├── src
├── vite-env.d.ts
├── settings.tsx
├── utils.tsx
├── index.css
├── index.tsx
└── constants.tsx
├── .gitignore
├── vite.config.js
├── tsconfig.json
├── package.json
├── types
└── index.d.ts
├── public
└── vite.svg
├── README.md
└── dist
├── index.umd.cjs
└── index.js
/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
--------------------------------------------------------------------------------
/src/settings.tsx:
--------------------------------------------------------------------------------
1 | import { ColorParameters, TextAlignParameters, TitleType } from "./constants";
2 |
3 | const Settings = TitleType.concat(TextAlignParameters).concat(ColorParameters)
4 |
5 | export default Settings
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist-ssr
12 | *.local
13 |
14 | # Editor directories and files
15 | .vscode/*
16 | !.vscode/extensions.json
17 | .idea
18 | .DS_Store
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 |
--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
1 | import path from "path";
2 | import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js';
3 |
4 | export default {
5 | build: {
6 | copyPublicDir: false,
7 | lib: {
8 | entry: path.resolve(__dirname, "src", "index.tsx"),
9 | name: "H1Tool",
10 | fileName: "index"
11 | }
12 | },
13 | plugins: [
14 | cssInjectedByJsPlugin(),
15 | ]
16 | };
17 |
18 | //Invalid value "mjs" for option "output.format" - Valid values are "amd", "cjs", "system", "es", "iife" or "umd".
--------------------------------------------------------------------------------
/src/utils.tsx:
--------------------------------------------------------------------------------
1 | export const createElement = (name: string) => {
2 | const element = document.createElement(name)
3 |
4 | return element
5 | }
6 |
7 | export const addClassName = (element: HTMLElement, className: string) => {
8 | return element.classList.add(className)
9 | }
10 |
11 | export const removeClassName = (element: HTMLElement, className: string) => {
12 | return element.classList.remove(className)
13 | }
14 |
15 | export const contentEditable = (element: HTMLElement, boolean: "true" | "false") => {
16 | element.contentEditable = boolean
17 | }
18 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ES2020",
4 | "useDefineForClassFields": true,
5 | "module": "ESNext",
6 | "lib": ["ES2020", "DOM", "DOM.Iterable"],
7 | "skipLibCheck": true,
8 | "jsx": "react",
9 |
10 | /* Bundler mode */
11 | "moduleResolution": "bundler",
12 | "allowImportingTsExtensions": true,
13 | "resolveJsonModule": true,
14 | "isolatedModules": true,
15 | "noEmit": true,
16 |
17 | /* Linting */
18 | "strict": true,
19 | "noUnusedLocals": true,
20 | "noUnusedParameters": true,
21 | "noFallthroughCasesInSwitch": true
22 | },
23 | "include": ["src"]
24 | }
25 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | p{
2 | font-weight: bold;
3 | margin: 0;
4 | padding: 0.2em 0;
5 | }
6 |
7 | .h1{
8 | font-size: 5em;
9 | }
10 |
11 |
12 | .h2{
13 | font-size: 4em;
14 | }
15 |
16 | .h3{
17 | font-size: 3em;
18 | }
19 |
20 | .h4{
21 | font-size: 2em;
22 | }
23 |
24 | .h5{
25 | font-size: 1.5em;
26 | }
27 |
28 | .h6{
29 | font-size: 1em;
30 | }
31 |
32 | .text-align-left{
33 | text-align: left;
34 | }
35 |
36 | .text-align-right{
37 | text-align: right;
38 | }
39 |
40 | .text-align-center{
41 | text-align: center;
42 | }
43 |
44 | .red{
45 | color: red;
46 | }
47 |
48 | .blue{
49 | color: blue;
50 | }
51 |
52 | .pink{
53 | color: pink;
54 | }
55 |
56 | .black{
57 | color: black;
58 | }
59 |
60 | .orange{
61 | color: orange;
62 | }
63 |
64 | .yellow{
65 | color: yellow;
66 | }
67 |
68 | .purple{
69 | color: purple;
70 | }
71 |
72 | .green{
73 | color: green;
74 | }
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "title-editorjs",
3 | "version": "1.0.1",
4 | "types": "./types/index.d.ts",
5 | "type": "module",
6 | "main": "./dist/index.umd.cjs",
7 | "module": "./dist/index.js",
8 | "scripts": {
9 | "dev": "vite",
10 | "build": "tsc && vite build",
11 | "preview": "vite preview"
12 | },
13 | "devDependencies": {
14 | "typescript": "^5.2.2",
15 | "vite": "^5.0.0"
16 | },
17 | "dependencies": {
18 | "@editorjs/editorjs": "^2.28.2",
19 | "vite-plugin-css-injected-by-js": "^3.3.0"
20 | },
21 | "keywords": [
22 | "header",
23 | "title",
24 | "tool",
25 | "editor.js",
26 | "editorjs"
27 | ],
28 | "author": {
29 | "name": "Emerson Matias",
30 | "email": "emersonsmatthias@gmail.com"
31 | },
32 | "license": "MIT",
33 | "description": "Title Tool for Editor.js",
34 | "repository": {
35 | "type": "github",
36 | "url": "https://github.com/EmersonMatias/title-editorjs"
37 | },
38 | "exports": {
39 | ".": {
40 | "import": "./dist/index.js",
41 | "require": "./dist/index.umd.cjs",
42 | "types": "./types/index.d.ts"
43 | }
44 | },
45 | "files": [
46 | "dist",
47 | "types"
48 | ]
49 | }
50 |
--------------------------------------------------------------------------------
/types/index.d.ts:
--------------------------------------------------------------------------------
1 | import { API } from "@editorjs/editorjs"
2 |
3 | export type IData = {
4 | text: string,
5 | color: string,
6 | alignText: string
7 | titleType: string
8 | }
9 |
10 | export type ISetting = {
11 | name: string,
12 | icon: string,
13 | type: string
14 | }
15 |
16 | export type Params = {
17 | data?: IData,
18 | readOnly?: boolean,
19 | api?: API,
20 | config?: undefined
21 | }
22 |
23 | declare class Title {
24 | public data: IData
25 | public H1: HTMLHeadElement
26 | public settings: ISetting[]
27 |
28 | static get toolbox() {
29 | return toolBox
30 | }
31 |
32 | constructor({ data, readOnly }: IH1)
33 |
34 | public render(): HTMLHeadElement;
35 |
36 | validate(savedData: IData): boolean
37 |
38 | save(blockContent: HTMLDivElement): IData
39 |
40 | renderSettings(): {
41 | icon: string;
42 | label: string;
43 | onActivate: () => void;
44 | }[]
45 |
46 | _colorSetting(colorSelected: string): void;
47 |
48 | _textAlignSetting(alignSelected: string): void
49 |
50 | _headerTypeSetting(headerSelected: string): void
51 |
52 | _hasData(data: IData): void
53 |
54 | _hasDataText(): void
55 |
56 | /*
57 | static get enableLineBreaks() {
58 | return true;
59 | }
60 | */
61 |
62 | static get isReadOnlySupported(): boolean
63 | }
64 |
65 | export default Header
--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Title Tool - Editor.js (React-TS)
2 |
3 | Provides Title (headings) Blocks for the [Editor.js](https://github.com/codex-team/editor.js). It is compatible with react and typescript, without causing typing errors.
4 |
5 | ## Installation
6 | Get the package
7 |
8 | ```shell
9 | npm i title-editorjs
10 | ```
11 |
12 | ## Usage
13 | Include module at your application
14 |
15 | ```javascript
16 | import Title from "title-editorjs";
17 | ```
18 |
19 | Add a new Tool to the `tools` property of the Editor.js initial config.
20 |
21 | ```javascript
22 | const editor = EditorJS({
23 | ...
24 |
25 | tools: {
26 | ...
27 | title: Title
28 | },
29 |
30 | ...
31 | });
32 | ```
33 |
34 | ## Tool's settings
35 | | Setting | Description
36 | |------|-----------------------------------------
37 | |H1 | Transform the title into an h1 header
38 | |H2 | Transform the title into an h2 header
39 | |H3 | Transform the title into an h3 header
40 | |H4 | Transform the title into an h4 header
41 | |H5 | Transform the title into an h5 header
42 | |H6| Transform the title into an h6 header
43 | |
Blue | Change the title color to blue
44 | |
Pink | Change the title color to pink
45 | |
Green| Change the title color to green
46 | |
Purple | Change the title color to purple
47 | |
Orange | Change the title color to orange
48 | |
Black |Change the title color to black
49 | |
Yellow | Change the title color to yellow
50 | |
Red | Change the title color to red
51 | |Text-Align-Center |Change text alignment to center
52 | |Text-Align-Right |Change text alignment to right
53 | |Text-Align-Left |Change text alignment to left
54 |
55 | ## Config Params
56 | For now the package doesn´t have any configuration parameters 😔. But it's coming...😌
57 |
58 | ## Output data
59 |
60 | | Field | Type | Description |
61 | | ----- | -------- | ------------------------------------------------ |
62 | | text | `string` | titles's text |
63 | | titleType | `string` | type of title: H1, H2 ... H6 |
64 | | color | `string or undefined` | color of the title |
65 | | alignText | `string or undefined` | align of the title |
66 |
67 | ```json
68 | {
69 | "id": "9V7e_m3ao4",
70 | "type": "title",
71 | "data": {
72 | "text": "H1",
73 | "color": "Red",
74 | "alignText": "Text-Align-Center",
75 | "titleType": "H1"
76 | }
77 | }
78 | ```
79 |
80 |
81 | ### And...
82 | 🌠🌠🌠 If the package was useful to you give it a star. 🌠🌠🌠
83 |
84 | 💁💁🏾💁🏼 Feel free to propose improvements. 💁🏾💁🏼💁🏿
85 |
--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
1 | import { toolBox } from "./constants"
2 | import "./index.css"
3 | import Settings from "./settings"
4 | import { IData, Params, ISetting } from "../types"
5 | import { addClassName, contentEditable, createElement, removeClassName } from "./utils"
6 | import DeclareTitle from "../types"
7 |
8 | export default class Title implements DeclareTitle {
9 | public data: IData
10 | public Title: HTMLHeadElement
11 | public settings: ISetting[]
12 |
13 | static get toolbox() {
14 | return toolBox
15 | }
16 |
17 | constructor({ data, readOnly }: Params) {
18 | this.settings = Settings
19 | this.data = {
20 | text: "Title",
21 | color: "",
22 | alignText: "text-align-center",
23 | titleType: "H1"
24 | }
25 |
26 | this.Title = createElement("p") //Criando elemento H1
27 | this.Title.innerText = this.data.text
28 | contentEditable(this.Title, `${!readOnly}`)
29 |
30 | this._titleTypeSetting(this.data.titleType) //Elemento Inicial do
31 |
32 | if (data) {
33 | const dataIsEmpty = Object.entries(data).length
34 | if (dataIsEmpty !== 0) {
35 | this._hasData(data)
36 | }
37 | }
38 |
39 | }
40 |
41 | render() {
42 | console.log(this.data)
43 | return this.Title
44 | }
45 |
46 | validate(savedData: IData) {
47 | if (!savedData.text?.trim()) {
48 | return false
49 | }
50 |
51 | return true
52 | }
53 |
54 | save(blockContent: HTMLDivElement) {
55 | const text = blockContent.innerHTML
56 | const response = { text: text, color: this.data.color, alignText: this.data.alignText, titleType: this.data.titleType }
57 | return response
58 | }
59 |
60 | renderSettings() {
61 | return this.settings.map((setting) => ({
62 | icon: setting.icon,
63 | label: setting.name,
64 | onActivate: () => {
65 | if (setting.type === "color") {
66 | return this._colorSetting(setting.name)
67 | } else if (setting.type === "textalign") {
68 | return this._textAlignSetting(setting.name)
69 | } else if (setting.type === "titleType") {
70 | return this._titleTypeSetting(setting.name)
71 | }
72 | }
73 | }))
74 | }
75 |
76 | _colorSetting(colorSelected: string) {
77 | this.settings.map((setting) => {
78 | if (setting.type === "color") {
79 | if (setting.name === colorSelected) {
80 | this.data.color = setting.name
81 | return addClassName(this.Title, setting.name.toLowerCase())
82 | } else {
83 | return removeClassName(this.Title, setting.name.toLocaleLowerCase())
84 | }
85 | }
86 | })
87 | }
88 |
89 | _textAlignSetting(alignSelected: string) {
90 | this.settings.map((setting) => {
91 | if (setting.type === "textalign")
92 | if (alignSelected === setting.name) {
93 | this.data.alignText = setting.name
94 | return addClassName(this.Title, `${setting.name.toLowerCase()}`)
95 | } else {
96 | return removeClassName(this.Title, `${setting.name.toLowerCase()}`)
97 | }
98 | })
99 | }
100 |
101 | _titleTypeSetting(titleSelected: string) {
102 | this.settings.map((setting) => {
103 | if (setting.type === "titleType")
104 | if (titleSelected === setting.name) {
105 | this.data.titleType = setting.name
106 | return addClassName(this.Title, `${setting.name.toLowerCase()}`)
107 | } else {
108 | return removeClassName(this.Title, `${setting.name.toLowerCase()}`)
109 | }
110 | })
111 | }
112 |
113 | _hasData(data: IData) {
114 | this.data = {
115 | text: data?.text,
116 | color: data?.color,
117 | alignText: data?.alignText,
118 | titleType: data.titleType
119 | }
120 |
121 | this._hasDataText();
122 | this._colorSetting(this.data.color)
123 | this._textAlignSetting(this.data.alignText)
124 | this._titleTypeSetting(this.data.titleType)
125 | }
126 |
127 | _hasDataText() {
128 | if (this.data.text) {
129 | this.Title.innerHTML = this.data.text
130 | }
131 | }
132 |
133 | /*
134 | static get enableLineBreaks() {
135 | return true;
136 | }
137 | */
138 |
139 | static get isReadOnlySupported() {
140 | return true;
141 | }
142 | }
--------------------------------------------------------------------------------
/src/constants.tsx:
--------------------------------------------------------------------------------
1 | export const TextAlignParameters = [
2 | {
3 | name: "Text-Align-Left",
4 | icon: ``,
5 | type: "textalign"
6 | },
7 | {
8 | name: "Text-Align-Right",
9 | icon: ``,
10 | type: "textalign"
11 | },
12 | {
13 | name: "Text-Align-Center",
14 | icon: ``,
15 | type: "textalign"
16 | }
17 | ]
18 |
19 | export const ColorParameters = [
20 | {
21 | name: 'Blue',
22 | icon: ``,
25 | type: "color"
26 |
27 | },
28 | {
29 | name: 'Red',
30 | icon: ``,
33 | type: "color"
34 | },
35 | {
36 | name: 'Pink',
37 | icon: ``,
40 | type: "color"
41 | },
42 | {
43 | name: 'Black',
44 | icon: ``,
47 | type: "color"
48 | },
49 | {
50 | name: 'Orange',
51 | icon: ``,
54 | type: "color"
55 | },
56 | {
57 | name: 'Yellow',
58 | icon: ``,
61 | type: "color"
62 | },
63 | {
64 | name: 'Purple',
65 | icon: ``,
68 | type: "color"
69 | },
70 | {
71 | name: 'Green',
72 | icon: ``,
73 | type: "color"
74 | }
75 | ]
76 |
77 | export const TitleType = [
78 | {
79 | name: 'H1',
80 | icon: ``,
81 | type: "titleType"
82 | },
83 | {
84 | name: 'H2',
85 | icon: ``,
86 | type: "titleType"
87 | },
88 | {
89 | name: 'H3',
90 | icon: ``,
91 | type: "titleType"
92 | },
93 | {
94 | name: 'H4',
95 | icon: ``,
96 | type: "titleType"
97 | },
98 | {
99 | name: 'H5',
100 | icon: ``,
101 | type: "titleType"
102 | },
103 | {
104 | name: 'H6',
105 | icon: ``,
106 | type: "titleType"
107 | }
108 | ]
109 |
110 |
111 |
112 | export const toolBox = {
113 | title: 'Title',
114 | icon: ''
115 | }
116 |
--------------------------------------------------------------------------------
/dist/index.umd.cjs:
--------------------------------------------------------------------------------
1 | (function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode("p{font-weight:700;margin:0;padding:.2em 0}.h1{font-size:5em}.h2{font-size:4em}.h3{font-size:3em}.h4{font-size:2em}.h5{font-size:1.5em}.h6{font-size:1em}.text-align-left{text-align:left}.text-align-right{text-align:right}.text-align-center{text-align:center}.red{color:red}.blue{color:#00f}.pink{color:pink}.black{color:#000}.orange{color:orange}.yellow{color:#ff0}.purple{color:purple}.green{color:green}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
2 | (function(n,i){typeof exports=="object"&&typeof module<"u"?module.exports=i():typeof define=="function"&&define.amd?define(i):(n=typeof globalThis<"u"?globalThis:n||self,n.H1Tool=i())})(this,function(){"use strict";var x=Object.defineProperty;var d=(n,i,o)=>i in n?x(n,i,{enumerable:!0,configurable:!0,writable:!0,value:o}):n[i]=o;var s=(n,i,o)=>(d(n,typeof i!="symbol"?i+"":i,o),o);const n=[{name:"Text-Align-Left",icon:'',type:"textalign"},{name:"Text-Align-Right",icon:'',type:"textalign"},{name:"Text-Align-Center",icon:'',type:"textalign"}],i=[{name:"Blue",icon:``,type:"color"},{name:"Red",icon:``,type:"color"},{name:"Pink",icon:``,type:"color"},{name:"Black",icon:``,type:"color"},{name:"Orange",icon:``,type:"color"},{name:"Yellow",icon:``,type:"color"},{name:"Purple",icon:``,type:"color"},{name:"Green",icon:``,type:"color"}],o=[{name:"H1",icon:'',type:"titleType"},{name:"H2",icon:'',type:"titleType"},{name:"H3",icon:'',type:"titleType"},{name:"H4",icon:'',type:"titleType"},{name:"H5",icon:'',type:"titleType"},{name:"H6",icon:'',type:"titleType"}],a={title:"Title",icon:''},c=o.concat(n).concat(i),g=l=>document.createElement(l),r=(l,e)=>l.classList.add(e),h=(l,e)=>l.classList.remove(e),w=(l,e)=>{l.contentEditable=e};class p{constructor({data:e,readOnly:t}){s(this,"data");s(this,"Title");s(this,"settings");this.settings=c,this.data={text:"Title",color:"",alignText:"text-align-center",titleType:"H1"},this.Title=g("p"),this.Title.innerText=this.data.text,w(this.Title,`${!t}`),this._titleTypeSetting(this.data.titleType),e&&Object.entries(e).length!==0&&this._hasData(e)}static get toolbox(){return a}render(){return console.log(this.data),this.Title}validate(e){var t;return!!((t=e.text)!=null&&t.trim())}save(e){return{text:e.innerHTML,color:this.data.color,alignText:this.data.alignText,titleType:this.data.titleType}}renderSettings(){return this.settings.map(e=>({icon:e.icon,label:e.name,onActivate:()=>{if(e.type==="color")return this._colorSetting(e.name);if(e.type==="textalign")return this._textAlignSetting(e.name);if(e.type==="titleType")return this._titleTypeSetting(e.name)}}))}_colorSetting(e){this.settings.map(t=>{if(t.type==="color")return t.name===e?(this.data.color=t.name,r(this.Title,t.name.toLowerCase())):h(this.Title,t.name.toLocaleLowerCase())})}_textAlignSetting(e){this.settings.map(t=>{if(t.type==="textalign")return e===t.name?(this.data.alignText=t.name,r(this.Title,`${t.name.toLowerCase()}`)):h(this.Title,`${t.name.toLowerCase()}`)})}_titleTypeSetting(e){this.settings.map(t=>{if(t.type==="titleType")return e===t.name?(this.data.titleType=t.name,r(this.Title,`${t.name.toLowerCase()}`)):h(this.Title,`${t.name.toLowerCase()}`)})}_hasData(e){this.data={text:e==null?void 0:e.text,color:e==null?void 0:e.color,alignText:e==null?void 0:e.alignText,titleType:e.titleType},this._hasDataText(),this._colorSetting(this.data.color),this._textAlignSetting(this.data.alignText),this._titleTypeSetting(this.data.titleType)}_hasDataText(){this.data.text&&(this.Title.innerHTML=this.data.text)}static get isReadOnlySupported(){return!0}}return p});
19 |
--------------------------------------------------------------------------------
/dist/index.js:
--------------------------------------------------------------------------------
1 | (function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode("p{font-weight:700;margin:0;padding:.2em 0}.h1{font-size:5em}.h2{font-size:4em}.h3{font-size:3em}.h4{font-size:2em}.h5{font-size:1.5em}.h6{font-size:1em}.text-align-left{text-align:left}.text-align-right{text-align:right}.text-align-center{text-align:center}.red{color:red}.blue{color:#00f}.pink{color:pink}.black{color:#000}.orange{color:orange}.yellow{color:#ff0}.purple{color:purple}.green{color:green}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
2 | var r = Object.defineProperty;
3 | var h = (i, t, e) => t in i ? r(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e;
4 | var l = (i, t, e) => (h(i, typeof t != "symbol" ? t + "" : t, e), e);
5 | const a = [
6 | {
7 | name: "Text-Align-Left",
8 | icon: '',
9 | type: "textalign"
10 | },
11 | {
12 | name: "Text-Align-Right",
13 | icon: '',
14 | type: "textalign"
15 | },
16 | {
17 | name: "Text-Align-Center",
18 | icon: '',
19 | type: "textalign"
20 | }
21 | ], c = [
22 | {
23 | name: "Blue",
24 | icon: ``,
27 | type: "color"
28 | },
29 | {
30 | name: "Red",
31 | icon: ``,
34 | type: "color"
35 | },
36 | {
37 | name: "Pink",
38 | icon: ``,
41 | type: "color"
42 | },
43 | {
44 | name: "Black",
45 | icon: ``,
48 | type: "color"
49 | },
50 | {
51 | name: "Orange",
52 | icon: ``,
55 | type: "color"
56 | },
57 | {
58 | name: "Yellow",
59 | icon: ``,
62 | type: "color"
63 | },
64 | {
65 | name: "Purple",
66 | icon: ``,
69 | type: "color"
70 | },
71 | {
72 | name: "Green",
73 | icon: ``,
76 | type: "color"
77 | }
78 | ], g = [
79 | {
80 | name: "H1",
81 | icon: '',
82 | type: "titleType"
83 | },
84 | {
85 | name: "H2",
86 | icon: '',
87 | type: "titleType"
88 | },
89 | {
90 | name: "H3",
91 | icon: '',
92 | type: "titleType"
93 | },
94 | {
95 | name: "H4",
96 | icon: '',
97 | type: "titleType"
98 | },
99 | {
100 | name: "H5",
101 | icon: '',
102 | type: "titleType"
103 | },
104 | {
105 | name: "H6",
106 | icon: '',
107 | type: "titleType"
108 | }
109 | ], w = {
110 | title: "Title",
111 | icon: ''
112 | }, p = g.concat(a).concat(c), v = (i) => document.createElement(i), n = (i, t) => i.classList.add(t), o = (i, t) => i.classList.remove(t), x = (i, t) => {
113 | i.contentEditable = t;
114 | };
115 | class m {
116 | constructor({ data: t, readOnly: e }) {
117 | l(this, "data");
118 | l(this, "Title");
119 | l(this, "settings");
120 | this.settings = p, this.data = {
121 | text: "Title",
122 | color: "",
123 | alignText: "text-align-center",
124 | titleType: "H1"
125 | }, this.Title = v("p"), this.Title.innerText = this.data.text, x(this.Title, `${!e}`), this._titleTypeSetting(this.data.titleType), t && Object.entries(t).length !== 0 && this._hasData(t);
126 | }
127 | static get toolbox() {
128 | return w;
129 | }
130 | render() {
131 | return console.log(this.data), this.Title;
132 | }
133 | validate(t) {
134 | var e;
135 | return !!((e = t.text) != null && e.trim());
136 | }
137 | save(t) {
138 | return { text: t.innerHTML, color: this.data.color, alignText: this.data.alignText, titleType: this.data.titleType };
139 | }
140 | renderSettings() {
141 | return this.settings.map((t) => ({
142 | icon: t.icon,
143 | label: t.name,
144 | onActivate: () => {
145 | if (t.type === "color")
146 | return this._colorSetting(t.name);
147 | if (t.type === "textalign")
148 | return this._textAlignSetting(t.name);
149 | if (t.type === "titleType")
150 | return this._titleTypeSetting(t.name);
151 | }
152 | }));
153 | }
154 | _colorSetting(t) {
155 | this.settings.map((e) => {
156 | if (e.type === "color")
157 | return e.name === t ? (this.data.color = e.name, n(this.Title, e.name.toLowerCase())) : o(this.Title, e.name.toLocaleLowerCase());
158 | });
159 | }
160 | _textAlignSetting(t) {
161 | this.settings.map((e) => {
162 | if (e.type === "textalign")
163 | return t === e.name ? (this.data.alignText = e.name, n(this.Title, `${e.name.toLowerCase()}`)) : o(this.Title, `${e.name.toLowerCase()}`);
164 | });
165 | }
166 | _titleTypeSetting(t) {
167 | this.settings.map((e) => {
168 | if (e.type === "titleType")
169 | return t === e.name ? (this.data.titleType = e.name, n(this.Title, `${e.name.toLowerCase()}`)) : o(this.Title, `${e.name.toLowerCase()}`);
170 | });
171 | }
172 | _hasData(t) {
173 | this.data = {
174 | text: t == null ? void 0 : t.text,
175 | color: t == null ? void 0 : t.color,
176 | alignText: t == null ? void 0 : t.alignText,
177 | titleType: t.titleType
178 | }, this._hasDataText(), this._colorSetting(this.data.color), this._textAlignSetting(this.data.alignText), this._titleTypeSetting(this.data.titleType);
179 | }
180 | _hasDataText() {
181 | this.data.text && (this.Title.innerHTML = this.data.text);
182 | }
183 | /*
184 | static get enableLineBreaks() {
185 | return true;
186 | }
187 | */
188 | static get isReadOnlySupported() {
189 | return !0;
190 | }
191 | }
192 | export {
193 | m as default
194 | };
195 |
--------------------------------------------------------------------------------