5
5
* @author Calum Knott ([email protected] )
6
6
* @license The MIT License (MIT)
7
7
*/
8
-
8
+
9
9
/**
10
10
* @typedef {object } EditorJsCodeFlaskConfig
11
11
* @property {string } placeholder - placeholder for the empty EditorJsCodeFlask
12
12
* @property {boolean } preserveBlank - Whether or not to keep blank EditorJsCodeFlasks when saving editor data
13
13
*/
14
-
14
+
15
15
/**
16
16
* @typedef {Object } EditorJsCodeFlaskData
17
17
* @description Tool's input and output data format
23
23
24
24
import Prism from 'prismjs' ;
25
25
26
+ // Additional languages
27
+ import "prismjs/components/prism-java"
28
+ import "prismjs/components/prism-go"
29
+ import "prismjs/components/prism-typescript"
30
+
26
31
// import "prismjs-components-importer/esm"; // ALL - Massivly Increases Bundle size!
27
32
28
33
import "prismjs-components-importer/esm/prism-iecst" ; // Structured Text
29
- import "prismjs-components-importer/esm/prism-markdown" ;
30
- import "prismjs-components-importer/esm/prism-json" ;
34
+ import "prismjs-components-importer/esm/prism-markdown" ;
35
+ import "prismjs-components-importer/esm/prism-json" ;
31
36
import "prismjs-components-importer/esm/prism-python" ;
32
37
import "prismjs-components-importer/esm/prism-bash" ;
33
-
38
+
34
39
35
40
import CodeFlask from 'codeflask' ;
36
41
37
42
import NiceSelect from "nice-select2/dist/js/nice-select2" ;
38
43
import NiceSelectStyle from "nice-select2/dist/css/nice-select2.css" ;
39
44
40
-
41
-
42
-
43
- // console.log(Prism.languages)
44
-
45
-
46
-
47
45
class EditorJsCodeFlask {
48
46
/**
49
47
* Default placeholder for EditorJsCodeFlask Tool
58
56
static get enableLineBreaks ( ) {
59
57
return true ;
60
58
}
61
-
59
+
62
60
/**
63
61
* Render plugin`s main Element and fill it with saved data
64
62
*
72
70
// console.log(data)
73
71
this . api = api ;
74
72
this . readOnly = readOnly ;
75
-
73
+
76
74
this . _CSS = {
77
75
block : this . api . styles . block ,
78
76
wrapper : 'ce-EditorJsCodeFlask' ,
79
77
settingsButton : this . api . styles . settingsButton ,
80
78
settingsButtonActive : this . api . styles . settingsButtonActive ,
81
79
} ;
82
-
80
+
83
81
if ( ! this . readOnly ) {
84
82
this . onKeyUp = this . onKeyUp . bind ( this ) ;
85
83
}
86
-
84
+
87
85
/**
88
86
* Placeholder for EditorJsCodeFlask if it is first Block
89
87
* @type {string }
94
92
95
93
this . _element ; // used to hold the wrapper div, as a point of reference
96
94
97
-
95
+
98
96
99
97
// let x = (x === undefined) ? your_default_value : x;
100
98
this . data = { }
106
104
// console.log(this.data)
107
105
108
106
}
109
-
107
+
110
108
/**
111
109
* Check if text content is empty and set empty string to inner html.
112
110
* We need this because some browsers (e.g. Safari) insert <br> into empty contenteditanle elements
117
115
if ( e . code !== 'Backspace' && e . code !== 'Delete' ) {
118
116
return ;
119
117
}
120
-
118
+
121
119
const { textContent} = this . _element ;
122
-
120
+
123
121
if ( textContent === '' ) {
124
122
this . _element . innerHTML = '' ;
125
123
}
126
124
}
127
125
128
-
126
+
129
127
/**
130
128
* Return Tool's view
131
129
*
145
143
this . _element . appendChild ( editorElem )
146
144
this . _element . appendChild ( langdisplay )
147
145
148
- this . data . editorInstance = new CodeFlask ( editorElem , {
149
- language : this . data . language ,
146
+ this . data . editorInstance = new CodeFlask ( editorElem , {
147
+ language : this . data . language ,
150
148
lineNumbers : this . data . showlinenumbers ,
151
149
readonly : this . readOnly
152
150
} ) ;
232
230
233
231
settingsContainer . appendChild ( languagesSelect ) ;
234
232
new NiceSelect ( languagesSelect , { searchable : true , placeholder : "Language..." } ) ;
235
-
233
+
236
234
// settingsContainer.appendChild(settingsButton);
237
235
238
236
return settingsContainer ;
249
247
250
248
_updateLanguage = ( lang ) => {
251
249
this . data . language = lang
252
- this . _element . querySelector ( '.editorjs-codeFlask_LangDisplay' ) . innerHTML = this . data . language
253
- this . data . editorInstance . updateLanguage ( this . data . language )
250
+ this . _element . querySelector ( '.editorjs-codeFlask_LangDisplay' ) . innerHTML = lang
251
+ this . data . editorInstance . addLanguage ( lang , Prism . languages [ lang ] )
252
+ this . data . editorInstance . updateLanguage ( lang )
254
253
}
255
-
256
254
257
-
255
+
256
+
258
257
/**
259
258
* Extract Tool's data from the view
260
259
* @param {HTMLDivElement } toolsContent - EditorJsCodeFlask tools rendered view
267
266
language : this . data . language ,
268
267
showlinenumbers : this . data . showlinenumbers
269
268
} ;
270
-
269
+
271
270
return resp
272
271
}
273
-
272
+
274
273
/**
275
274
* Returns true to notify the core that read-only mode is supported
276
275
*
280
279
return true ;
281
280
}
282
281
283
-
282
+
284
283
/**
285
284
* Icon and title for displaying at the Toolbox
286
285
*
293
292
} ;
294
293
}
295
294
}
296
-
297
- export { EditorJsCodeFlask as default }
295
+
296
+ export { EditorJsCodeFlask as default }
0 commit comments