@@ -3,10 +3,10 @@ import type {
33 InlineTool ,
44 InlineToolConstructorOptions ,
55} from '@editorjs/editorjs' ;
6- import EditorJSStyleElement from './EditorJSStyleElement' ;
7- import EditorJSStyleError from './EditorJSStyleError' ;
6+ import { EditorJSStyleElement } from './EditorJSStyleElement' ;
7+ import { EditorJSStyleError } from './EditorJSStyleError' ;
88
9- class EditorJSStyle implements InlineTool {
9+ class StyleInlineTool implements InlineTool {
1010 static get isInline ( ) {
1111 return true ;
1212 }
@@ -25,18 +25,20 @@ class EditorJSStyle implements InlineTool {
2525 return 'Style' ;
2626 }
2727
28+ static prepare ( ) {
29+ if ( customElements . get ( 'editorjs-style' ) ) {
30+ return ;
31+ }
32+
33+ customElements . define ( 'editorjs-style' , EditorJSStyleElement ) ;
34+ }
35+
2836 #actions: HTMLDivElement ;
2937 #api: API ;
3038
3139 constructor ( { api } : InlineToolConstructorOptions ) {
3240 this . #actions = document . createElement ( 'div' ) ;
3341 this . #api = api ;
34-
35- if ( customElements . get ( 'editorjs-style' ) ) {
36- return ;
37- }
38-
39- customElements . define ( 'editorjs-style' , EditorJSStyleElement ) ;
4042 }
4143
4244 get shortcut ( ) {
@@ -46,14 +48,16 @@ class EditorJSStyle implements InlineTool {
4648 checkState ( ) {
4749 this . #actions. innerHTML = '' ;
4850
49- const editorjsStyle = this . #api. selection . findParentTag ( 'EDITORJS-STYLE' ) ;
51+ const editorJSStyleElement = this . #api. selection . findParentTag (
52+ 'EDITORJS-STYLE'
53+ ) ;
5054
51- if ( ! editorjsStyle ) {
55+ if ( ! editorJSStyleElement ) {
5256 return false ;
5357 }
5458
5559 this . #actions. innerHTML = `
56- <div style="margin-left: 0.5rem ; ">
60+ <div style="margin-bottom: 16px; margin- left: 16px; margin-right: 16px ; ">
5761 <div style="display: flex; align-items: center; justify-content: space-between; ">
5862 <div>Style settings</div>
5963
@@ -72,15 +76,15 @@ class EditorJSStyle implements InlineTool {
7276
7377 <input class="id-input ${
7478 this . #api. styles . input
75- } " placeholder="exciting" style="width: 80%; ">
79+ } " style="width: 80%; ">
7680 </label>
7781
7882 <label style="display: flex; align-items: center; justify-content: space-between; ">
7983 <span>Class</span>
8084
8185 <input class="class-input ${
8286 this . #api. styles . input
83- } " placeholder="note editorial" style="width: 80%; ">
87+ } " style="width: 80%; ">
8488 </label>
8589
8690 <label style="display: flex; align-items: center; justify-content: space-between; ">
@@ -116,14 +120,18 @@ class EditorJSStyle implements InlineTool {
116120 }
117121
118122 deleteButton . addEventListener ( 'click' , ( ) => {
119- const clonedNodes = Array . from ( editorjsStyle . childNodes ) . map ( ( node ) =>
120- node . cloneNode ( true )
121- ) ;
123+ const clonedNodes = Array . from (
124+ editorJSStyleElement . childNodes
125+ ) . map ( ( node ) => node . cloneNode ( true ) ) ;
122126
123127 clonedNodes . forEach ( ( node ) =>
124- editorjsStyle . parentNode ?. insertBefore ( node , editorjsStyle )
128+ editorJSStyleElement . parentNode ?. insertBefore (
129+ node ,
130+ editorJSStyleElement
131+ )
125132 ) ;
126- editorjsStyle . remove ( ) ;
133+
134+ editorJSStyleElement . remove ( ) ;
127135
128136 if ( clonedNodes . length === 0 ) {
129137 return ;
@@ -143,31 +151,36 @@ class EditorJSStyle implements InlineTool {
143151 range . setEndAfter ( clonedNodes [ clonedNodes . length - 1 ] ) ;
144152
145153 selection . addRange ( range ) ;
154+ this . #actions. innerHTML = '' ;
155+ this . #api. tooltip . hide ( ) ;
146156 } ) ;
147157
148158 this . #api. tooltip . onHover ( deleteButton , 'Delete style' , {
149159 placement : 'top' ,
150160 } ) ;
151161
152- classInput . value = editorjsStyle . className ;
162+ classInput . value = editorJSStyleElement . className ;
153163
154164 classInput . addEventListener ( 'input' , ( ) =>
155- editorjsStyle . setAttribute ( 'class' , classInput . value )
165+ editorJSStyleElement . setAttribute ( 'class' , classInput . value )
156166 ) ;
157167
158- idInput . value = editorjsStyle . id ;
168+ idInput . value = editorJSStyleElement . id ;
159169
160- idInput . addEventListener ( 'input' , ( ) => ( editorjsStyle . id = idInput . value ) ) ;
170+ idInput . addEventListener (
171+ 'input' ,
172+ ( ) => ( editorJSStyleElement . id = idInput . value )
173+ ) ;
161174
162- styleTextarea . value = editorjsStyle . getAttribute ( 'style' ) ?? '' ;
175+ styleTextarea . value = editorJSStyleElement . getAttribute ( 'style' ) ?? '' ;
163176
164177 // To input line breaks
165178 styleTextarea . addEventListener ( 'keydown' , ( event ) =>
166179 event . stopPropagation ( )
167180 ) ;
168181
169182 styleTextarea . addEventListener ( 'input' , ( ) =>
170- editorjsStyle . setAttribute ( 'style' , styleTextarea . value )
183+ editorJSStyleElement . setAttribute ( 'style' , styleTextarea . value )
171184 ) ;
172185
173186 return true ;
@@ -198,17 +211,13 @@ class EditorJSStyle implements InlineTool {
198211 }
199212
200213 surround ( range : Range ) {
201- const editorjsStyle = new EditorJSStyleElement ( ) ;
214+ const editorjsStyleElement = new EditorJSStyleElement ( ) ;
202215
203- editorjsStyle . append (
204- range . collapsed ? 'new style' : range . extractContents ( )
205- ) ;
216+ editorjsStyleElement . append ( range . extractContents ( ) ) ;
206217
207- setTimeout ( ( ) => {
208- range . insertNode ( editorjsStyle ) ;
209- this . #api. selection . expandToTag ( editorjsStyle ) ;
210- } ) ;
218+ range . insertNode ( editorjsStyleElement ) ;
219+ this . #api. selection . expandToTag ( editorjsStyleElement ) ;
211220 }
212221}
213222
214- export default EditorJSStyle ;
223+ export { StyleInlineTool } ;
0 commit comments