suneditor 2.47.5 → 2.47.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (141) hide show
  1. package/LICENSE.txt +20 -20
  2. package/README.md +1625 -1613
  3. package/dist/css/suneditor.min.css +1 -1
  4. package/dist/suneditor.min.js +2 -2
  5. package/example.md +586 -586
  6. package/package.json +71 -71
  7. package/src/assets/css/suneditor-contents.css +561 -561
  8. package/src/assets/css/suneditor.css +2 -2
  9. package/src/assets/defaultIcons.js +103 -103
  10. package/src/lang/Lang.d.ts +143 -143
  11. package/src/lang/ckb.d.ts +4 -4
  12. package/src/lang/ckb.js +187 -187
  13. package/src/lang/cs.d.ts +4 -4
  14. package/src/lang/cs.js +187 -187
  15. package/src/lang/da.d.ts +4 -4
  16. package/src/lang/da.js +191 -191
  17. package/src/lang/de.d.ts +4 -4
  18. package/src/lang/de.js +188 -188
  19. package/src/lang/en.d.ts +4 -4
  20. package/src/lang/en.js +187 -187
  21. package/src/lang/es.d.ts +4 -4
  22. package/src/lang/es.js +187 -187
  23. package/src/lang/fa.d.ts +4 -4
  24. package/src/lang/fa.js +187 -187
  25. package/src/lang/fr.d.ts +4 -4
  26. package/src/lang/fr.js +188 -188
  27. package/src/lang/he.d.ts +4 -4
  28. package/src/lang/he.js +188 -188
  29. package/src/lang/hu.d.ts +5 -5
  30. package/src/lang/hu.js +188 -188
  31. package/src/lang/index.d.ts +25 -24
  32. package/src/lang/index.js +30 -27
  33. package/src/lang/it.d.ts +4 -4
  34. package/src/lang/it.js +188 -188
  35. package/src/lang/ja.d.ts +4 -4
  36. package/src/lang/ja.js +187 -187
  37. package/src/lang/km.d.ts +5 -0
  38. package/src/lang/km.js +188 -0
  39. package/src/lang/ko.d.ts +4 -4
  40. package/src/lang/ko.js +187 -187
  41. package/src/lang/lv.d.ts +4 -4
  42. package/src/lang/lv.js +187 -187
  43. package/src/lang/nl.d.ts +4 -4
  44. package/src/lang/nl.js +187 -187
  45. package/src/lang/pl.d.ts +4 -4
  46. package/src/lang/pl.js +187 -187
  47. package/src/lang/pt_br.d.ts +4 -4
  48. package/src/lang/pt_br.js +189 -189
  49. package/src/lang/ro.d.ts +4 -4
  50. package/src/lang/ro.js +187 -187
  51. package/src/lang/ru.d.ts +4 -4
  52. package/src/lang/ru.js +187 -187
  53. package/src/lang/se.d.ts +4 -4
  54. package/src/lang/se.js +191 -191
  55. package/src/lang/tr.d.ts +5 -5
  56. package/src/lang/tr.js +191 -191
  57. package/src/lang/ua.d.ts +5 -5
  58. package/src/lang/ua.js +188 -188
  59. package/src/lang/ur.d.ts +4 -4
  60. package/src/lang/ur.js +187 -187
  61. package/src/lang/zh_cn.d.ts +4 -4
  62. package/src/lang/zh_cn.js +187 -187
  63. package/src/lib/constructor.js +0 -0
  64. package/src/lib/context.d.ts +42 -42
  65. package/src/lib/context.js +0 -0
  66. package/src/lib/core.d.ts +1135 -1135
  67. package/src/lib/core.js +9 -3
  68. package/src/lib/history.d.ts +48 -48
  69. package/src/lib/history.js +218 -218
  70. package/src/lib/util.d.ts +677 -677
  71. package/src/lib/util.js +1 -1
  72. package/src/options.d.ts +621 -620
  73. package/src/plugins/CommandPlugin.d.ts +7 -7
  74. package/src/plugins/DialogPlugin.d.ts +19 -19
  75. package/src/plugins/FileBrowserPlugin.d.ts +29 -29
  76. package/src/plugins/Module.d.ts +14 -14
  77. package/src/plugins/Plugin.d.ts +41 -41
  78. package/src/plugins/SubmenuPlugin.d.ts +7 -7
  79. package/src/plugins/command/blockquote.d.ts +4 -4
  80. package/src/plugins/command/blockquote.js +46 -46
  81. package/src/plugins/dialog/audio.d.ts +4 -4
  82. package/src/plugins/dialog/audio.js +557 -558
  83. package/src/plugins/dialog/image.d.ts +4 -4
  84. package/src/plugins/dialog/image.js +1126 -1127
  85. package/src/plugins/dialog/link.d.ts +4 -4
  86. package/src/plugins/dialog/link.js +223 -223
  87. package/src/plugins/dialog/math.d.ts +4 -4
  88. package/src/plugins/dialog/math.js +300 -300
  89. package/src/plugins/dialog/video.d.ts +4 -4
  90. package/src/plugins/dialog/video.js +989 -989
  91. package/src/plugins/fileBrowser/imageGallery.d.ts +4 -4
  92. package/src/plugins/fileBrowser/imageGallery.js +64 -64
  93. package/src/plugins/index.d.ts +79 -79
  94. package/src/plugins/index.js +32 -32
  95. package/src/plugins/modules/_anchor.js +461 -461
  96. package/src/plugins/modules/_colorPicker.d.ts +59 -59
  97. package/src/plugins/modules/_colorPicker.js +0 -0
  98. package/src/plugins/modules/_notice.d.ts +20 -20
  99. package/src/plugins/modules/_notice.js +72 -72
  100. package/src/plugins/modules/_selectMenu.js +118 -118
  101. package/src/plugins/modules/component.d.ts +24 -24
  102. package/src/plugins/modules/component.js +80 -80
  103. package/src/plugins/modules/dialog.d.ts +27 -27
  104. package/src/plugins/modules/dialog.js +174 -174
  105. package/src/plugins/modules/fileBrowser.d.ts +41 -41
  106. package/src/plugins/modules/fileBrowser.js +377 -377
  107. package/src/plugins/modules/fileManager.d.ts +66 -66
  108. package/src/plugins/modules/fileManager.js +325 -325
  109. package/src/plugins/modules/index.d.ts +10 -10
  110. package/src/plugins/modules/index.js +8 -8
  111. package/src/plugins/modules/resizing.d.ts +153 -153
  112. package/src/plugins/modules/resizing.js +902 -902
  113. package/src/plugins/submenu/align.d.ts +4 -4
  114. package/src/plugins/submenu/align.js +160 -160
  115. package/src/plugins/submenu/font.d.ts +4 -4
  116. package/src/plugins/submenu/font.js +123 -123
  117. package/src/plugins/submenu/fontColor.d.ts +4 -4
  118. package/src/plugins/submenu/fontColor.js +0 -0
  119. package/src/plugins/submenu/fontSize.d.ts +4 -4
  120. package/src/plugins/submenu/fontSize.js +112 -112
  121. package/src/plugins/submenu/formatBlock.d.ts +4 -4
  122. package/src/plugins/submenu/formatBlock.js +273 -273
  123. package/src/plugins/submenu/hiliteColor.d.ts +4 -4
  124. package/src/plugins/submenu/hiliteColor.js +0 -0
  125. package/src/plugins/submenu/horizontalRule.d.ts +4 -4
  126. package/src/plugins/submenu/horizontalRule.js +98 -98
  127. package/src/plugins/submenu/lineHeight.d.ts +4 -4
  128. package/src/plugins/submenu/lineHeight.js +104 -104
  129. package/src/plugins/submenu/list.d.ts +4 -4
  130. package/src/plugins/submenu/list.js +456 -456
  131. package/src/plugins/submenu/paragraphStyle.d.ts +4 -4
  132. package/src/plugins/submenu/paragraphStyle.js +135 -135
  133. package/src/plugins/submenu/table.d.ts +4 -4
  134. package/src/plugins/submenu/template.d.ts +4 -4
  135. package/src/plugins/submenu/template.js +71 -71
  136. package/src/plugins/submenu/textStyle.d.ts +4 -4
  137. package/src/plugins/submenu/textStyle.js +167 -167
  138. package/src/suneditor.d.ts +9 -9
  139. package/src/suneditor.js +75 -75
  140. package/src/suneditor_build.js +20 -17
  141. package/README_V3_TEMP.md +0 -630
@@ -1,300 +1,300 @@
1
- 'use strict';
2
-
3
- import dialog from '../modules/dialog';
4
-
5
- const KATEX_WEBSITE = "https://katex.org/docs/supported.html";
6
-
7
- export default {
8
- name: 'math',
9
- display: 'dialog',
10
- add: function (core) {
11
- core.addModule([dialog]);
12
-
13
- const context = core.context;
14
- context.math = {
15
- focusElement: null, // @Override dialog // This element has focus when the dialog is opened.
16
- previewElement: null,
17
- fontSizeElement: null,
18
- defaultFontSize: '',
19
- _mathExp: null
20
- };
21
-
22
- /** math dialog */
23
- let math_dialog = this.setDialog(core);
24
- context.math.modal = math_dialog;
25
- context.math.focusElement = math_dialog.querySelector('.se-math-exp');
26
- context.math.previewElement = math_dialog.querySelector('.se-math-preview');
27
- context.math.fontSizeElement = math_dialog.querySelector('.se-math-size');
28
- context.math.focusElement.addEventListener('paste', function (e) {
29
- if (typeof core.functions.onPasteMath === 'function') {
30
- core.functions.onPasteMath(e, core);
31
- }
32
- }, false);
33
- context.math.focusElement.addEventListener(core.util.isIE ? 'textinput' : 'input', this._renderMathExp.bind(core, context.math), false);
34
- context.math.fontSizeElement.addEventListener('change', function (e) { this.fontSize = e.target.value; }.bind(context.math.previewElement.style), false);
35
-
36
- /** math controller */
37
- let math_controller = this.setController_MathButton(core);
38
- context.math.mathController = math_controller;
39
- context.math._mathExp = null;
40
-
41
- /** add event listeners */
42
- math_dialog.querySelector('form').addEventListener('submit', this.submit.bind(core), false);
43
- math_controller.addEventListener('click', this.onClick_mathController.bind(core));
44
- context.math.previewElement.style.fontSize = context.math.defaultFontSize;
45
-
46
- /** append html */
47
- context.dialog.modal.appendChild(math_dialog);
48
- context.element.relative.appendChild(math_controller);
49
-
50
- /** empty memory */
51
- math_dialog = null, math_controller = null;
52
- },
53
-
54
- /** dialog */
55
- setDialog: function (core) {
56
- const lang = core.lang;
57
- const dialog = core.util.createElement('DIV');
58
- const fontSize = core.options.mathFontSize;
59
- let defaultFontSize = fontSize[0].value;
60
-
61
- dialog.className = 'se-dialog-content';
62
- dialog.style.display = 'none';
63
- let html = '' +
64
- '<form>' +
65
- '<div class="se-dialog-header">' +
66
- '<button type="button" data-command="close" class="se-btn se-dialog-close" title="' + lang.dialogBox.close + '" aria-label="' + lang.dialogBox.close + '">' +
67
- core.icons.cancel +
68
- '</button>' +
69
- '<span class="se-modal-title">' + lang.dialogBox.mathBox.title + '</span>' +
70
- '</div>' +
71
- '<div class="se-dialog-body">' +
72
- '<div class="se-dialog-form">' +
73
- '<label>' + lang.dialogBox.mathBox.inputLabel + ' (<a href="' + KATEX_WEBSITE + '" target="_blank">KaTeX</a>)</label>' +
74
- '<textarea class="se-input-form se-math-exp" type="text"></textarea>' +
75
- '</div>' +
76
- '<div class="se-dialog-form">' +
77
- '<label>' + lang.dialogBox.mathBox.fontSizeLabel + '</label>' +
78
- '<select class="se-input-select se-math-size">';
79
- for (let i = 0, len = fontSize.length, f; i < len; i++) {
80
- f = fontSize[i];
81
- if (f.default) defaultFontSize = f.value;
82
- html += '<option value="' + f.value + '"' + (f.default ? ' selected' : '') + '>' + f.text + '</option>';
83
- }
84
- html += '</select>' +
85
- '</div>' +
86
- '<div class="se-dialog-form">' +
87
- '<label>' + lang.dialogBox.mathBox.previewLabel + '</label>' +
88
- '<p class="se-math-preview"></p>' +
89
- '</div>' +
90
- '</div>' +
91
- '<div class="se-dialog-footer">' +
92
- '<button type="submit" class="se-btn-primary" title="' + lang.dialogBox.submitButton + '" aria-label="' + lang.dialogBox.submitButton + '"><span>' + lang.dialogBox.submitButton + '</span></button>' +
93
- '</div>' +
94
- '</form>';
95
-
96
- core.context.math.defaultFontSize = defaultFontSize;
97
- dialog.innerHTML = html;
98
- return dialog;
99
- },
100
-
101
- /** modify controller button */
102
- setController_MathButton: function (core) {
103
- const lang = core.lang;
104
- const math_btn = core.util.createElement('DIV');
105
-
106
- math_btn.className = 'se-controller se-controller-link';
107
- math_btn.innerHTML = '' +
108
- '<div class="se-arrow se-arrow-up"></div>' +
109
- '<div class="link-content">' +
110
- '<div class="se-btn-group">' +
111
- '<button type="button" data-command="update" tabindex="-1" class="se-btn se-tooltip">' +
112
- core.icons.edit +
113
- '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.controller.edit + '</span></span>' +
114
- '</button>' +
115
- '<button type="button" data-command="delete" tabindex="-1" class="se-btn se-tooltip">' +
116
- core.icons.delete +
117
- '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.controller.remove + '</span></span>' +
118
- '</button>' +
119
- '</div>' +
120
- '</div>' +
121
- '';
122
-
123
- return math_btn;
124
- },
125
-
126
- /**
127
- * @Required @Override dialog
128
- */
129
- open: function () {
130
- this.plugins.dialog.open.call(this, 'math', 'math' === this.currentControllerName);
131
- },
132
-
133
- /**
134
- * @Override core - managedTagsInfo
135
- */
136
- managedTags: function () {
137
- return {
138
- className: 'katex',
139
- method: function (element) {
140
- if (!element.getAttribute('data-exp') || !this.options.katex) return;
141
- const dom = this._d.createRange().createContextualFragment(this.plugins.math._renderer.call(this, this.util.HTMLDecoder(element.getAttribute('data-exp'))));
142
- element.innerHTML = dom.querySelector('.katex').innerHTML;
143
- element.setAttribute('contenteditable', false);
144
- }
145
- };
146
- },
147
-
148
- _renderer: function (exp) {
149
- let result = '';
150
- try {
151
- this.util.removeClass(this.context.math.focusElement, 'se-error');
152
- result = this.options.katex.src.renderToString(exp, {throwOnError: true, displayMode: true});
153
- } catch(error) {
154
- this.util.addClass(this.context.math.focusElement, 'se-error');
155
- result = '<span class="se-math-katex-error">Katex syntax error. (Refer <a href="' + KATEX_WEBSITE + '" target="_blank">KaTeX</a>)</span>';
156
- console.warn('[SUNEDITOR.math.Katex.error] ', error);
157
- }
158
- return result;
159
- },
160
-
161
- _renderMathExp: function (contextMath, e) {
162
- contextMath.previewElement.innerHTML = this.plugins.math._renderer.call(this, e.target.value);
163
- },
164
-
165
- submit: function (e) {
166
- this.showLoading();
167
-
168
- e.preventDefault();
169
- e.stopPropagation();
170
-
171
- const submitAction = function () {
172
- if (this.context.math.focusElement.value.trim().length === 0) return false;
173
-
174
- const contextMath = this.context.math;
175
- const mathExp = contextMath.focusElement.value;
176
- const katexEl = contextMath.previewElement.querySelector('.katex');
177
-
178
- if (!katexEl) return false;
179
- katexEl.className = '__se__katex ' + katexEl.className;
180
- katexEl.setAttribute('contenteditable', false);
181
- katexEl.setAttribute('data-exp', this.util.HTMLEncoder(mathExp));
182
- katexEl.setAttribute('data-font-size', contextMath.fontSizeElement.value);
183
- katexEl.style.fontSize = contextMath.fontSizeElement.value;
184
-
185
- if (!this.context.dialog.updateModal) {
186
- const selectedFormats = this.getSelectedElements();
187
-
188
- if (selectedFormats.length > 1) {
189
- const oFormat = this.util.createElement(selectedFormats[0].nodeName);
190
- oFormat.appendChild(katexEl);
191
- if (!this.insertNode(oFormat, null, true)) return false;
192
- } else {
193
- if (!this.insertNode(katexEl, null, true)) return false;
194
- }
195
-
196
- const empty = this.util.createTextNode(this.util.zeroWidthSpace);
197
- katexEl.parentNode.insertBefore(empty, katexEl.nextSibling);
198
- this.setRange(katexEl, 0, katexEl, 1);
199
- } else {
200
- const containerEl = this.util.getParentElement(contextMath._mathExp, '.katex');
201
- containerEl.parentNode.replaceChild(katexEl, containerEl);
202
- this.setRange(katexEl, 0, katexEl, 1);
203
- }
204
-
205
- contextMath.focusElement.value = '';
206
- contextMath.fontSizeElement.value = '1em';
207
- contextMath.previewElement.style.fontSize = '1em';
208
- contextMath.previewElement.innerHTML = '';
209
-
210
- return true;
211
- }.bind(this);
212
-
213
- try {
214
- if (submitAction()) {
215
- this.plugins.dialog.close.call(this);
216
- // history stack
217
- this.history.push(false);
218
- }
219
- } catch (e) {
220
- this.plugins.dialog.close.call(this);
221
- } finally {
222
- this.closeLoading();
223
- }
224
-
225
- return false;
226
- },
227
-
228
- active: function (element) {
229
- if (!element) {
230
- if (this.controllerArray.indexOf(this.context.math.mathController) > -1) {
231
- this.controllersOff();
232
- }
233
- } else if (element.getAttribute('data-exp')) {
234
- if (this.controllerArray.indexOf(this.context.math.mathController) < 0) {
235
- this.setRange(element, 0, element, 1);
236
- this.plugins.math.call_controller.call(this, element);
237
- }
238
- return true;
239
- }
240
-
241
- return false;
242
- },
243
-
244
- on: function (update) {
245
- if (!update) {
246
- this.plugins.math.init.call(this);
247
- } else {
248
- const contextMath = this.context.math;
249
- if (contextMath._mathExp) {
250
- const exp = this.util.HTMLDecoder(contextMath._mathExp.getAttribute('data-exp'));
251
- const fontSize = contextMath._mathExp.getAttribute('data-font-size') || '1em';
252
- this.context.dialog.updateModal = true;
253
- contextMath.focusElement.value = exp;
254
- contextMath.fontSizeElement.value = fontSize;
255
- contextMath.previewElement.innerHTML = this.plugins.math._renderer.call(this, exp);
256
- contextMath.previewElement.style.fontSize = fontSize;
257
- }
258
- }
259
- },
260
-
261
- call_controller: function (mathTag) {
262
- this.context.math._mathExp = mathTag;
263
- const mathBtn = this.context.math.mathController;
264
-
265
- this.setControllerPosition(mathBtn, mathTag, 'bottom', {left: 0, top: 0});
266
- this.controllersOn(mathBtn, mathTag, 'math');
267
- },
268
-
269
- onClick_mathController: function (e) {
270
- e.stopPropagation();
271
-
272
- const command = e.target.getAttribute('data-command') || e.target.parentNode.getAttribute('data-command');
273
- if (!command) return;
274
-
275
- e.preventDefault();
276
-
277
- if (/update/.test(command)) {
278
- this.context.math.focusElement.value = this.util.HTMLDecoder(this.context.math._mathExp.getAttribute('data-exp'));
279
- this.plugins.dialog.open.call(this, 'math', true);
280
- } else {
281
- /** delete */
282
- this.util.removeItem(this.context.math._mathExp);
283
- this.context.math._mathExp = null;
284
- this.focus();
285
-
286
- // history stack
287
- this.history.push(false);
288
- }
289
-
290
- this.controllersOff();
291
- },
292
-
293
- init: function () {
294
- const contextMath = this.context.math;
295
- contextMath.mathController.style.display = 'none';
296
- contextMath._mathExp = null;
297
- contextMath.focusElement.value = '';
298
- contextMath.previewElement.innerHTML = '';
299
- }
300
- };
1
+ 'use strict';
2
+
3
+ import dialog from '../modules/dialog';
4
+
5
+ const KATEX_WEBSITE = "https://katex.org/docs/supported.html";
6
+
7
+ export default {
8
+ name: 'math',
9
+ display: 'dialog',
10
+ add: function (core) {
11
+ core.addModule([dialog]);
12
+
13
+ const context = core.context;
14
+ context.math = {
15
+ focusElement: null, // @Override dialog // This element has focus when the dialog is opened.
16
+ previewElement: null,
17
+ fontSizeElement: null,
18
+ defaultFontSize: '',
19
+ _mathExp: null
20
+ };
21
+
22
+ /** math dialog */
23
+ let math_dialog = this.setDialog(core);
24
+ context.math.modal = math_dialog;
25
+ context.math.focusElement = math_dialog.querySelector('.se-math-exp');
26
+ context.math.previewElement = math_dialog.querySelector('.se-math-preview');
27
+ context.math.fontSizeElement = math_dialog.querySelector('.se-math-size');
28
+ context.math.focusElement.addEventListener('paste', function (e) {
29
+ if (typeof core.functions.onPasteMath === 'function') {
30
+ core.functions.onPasteMath(e, core);
31
+ }
32
+ }, false);
33
+ context.math.focusElement.addEventListener(core.util.isIE ? 'textinput' : 'input', this._renderMathExp.bind(core, context.math), false);
34
+ context.math.fontSizeElement.addEventListener('change', function (e) { this.fontSize = e.target.value; }.bind(context.math.previewElement.style), false);
35
+
36
+ /** math controller */
37
+ let math_controller = this.setController_MathButton(core);
38
+ context.math.mathController = math_controller;
39
+ context.math._mathExp = null;
40
+
41
+ /** add event listeners */
42
+ math_dialog.querySelector('form').addEventListener('submit', this.submit.bind(core), false);
43
+ math_controller.addEventListener('click', this.onClick_mathController.bind(core));
44
+ context.math.previewElement.style.fontSize = context.math.defaultFontSize;
45
+
46
+ /** append html */
47
+ context.dialog.modal.appendChild(math_dialog);
48
+ context.element.relative.appendChild(math_controller);
49
+
50
+ /** empty memory */
51
+ math_dialog = null, math_controller = null;
52
+ },
53
+
54
+ /** dialog */
55
+ setDialog: function (core) {
56
+ const lang = core.lang;
57
+ const dialog = core.util.createElement('DIV');
58
+ const fontSize = core.options.mathFontSize;
59
+ let defaultFontSize = fontSize[0].value;
60
+
61
+ dialog.className = 'se-dialog-content';
62
+ dialog.style.display = 'none';
63
+ let html = '' +
64
+ '<form>' +
65
+ '<div class="se-dialog-header">' +
66
+ '<button type="button" data-command="close" class="se-btn se-dialog-close" title="' + lang.dialogBox.close + '" aria-label="' + lang.dialogBox.close + '">' +
67
+ core.icons.cancel +
68
+ '</button>' +
69
+ '<span class="se-modal-title">' + lang.dialogBox.mathBox.title + '</span>' +
70
+ '</div>' +
71
+ '<div class="se-dialog-body">' +
72
+ '<div class="se-dialog-form">' +
73
+ '<label>' + lang.dialogBox.mathBox.inputLabel + ' (<a href="' + KATEX_WEBSITE + '" target="_blank">KaTeX</a>)</label>' +
74
+ '<textarea class="se-input-form se-math-exp" type="text"></textarea>' +
75
+ '</div>' +
76
+ '<div class="se-dialog-form">' +
77
+ '<label>' + lang.dialogBox.mathBox.fontSizeLabel + '</label>' +
78
+ '<select class="se-input-select se-math-size">';
79
+ for (let i = 0, len = fontSize.length, f; i < len; i++) {
80
+ f = fontSize[i];
81
+ if (f.default) defaultFontSize = f.value;
82
+ html += '<option value="' + f.value + '"' + (f.default ? ' selected' : '') + '>' + f.text + '</option>';
83
+ }
84
+ html += '</select>' +
85
+ '</div>' +
86
+ '<div class="se-dialog-form">' +
87
+ '<label>' + lang.dialogBox.mathBox.previewLabel + '</label>' +
88
+ '<p class="se-math-preview"></p>' +
89
+ '</div>' +
90
+ '</div>' +
91
+ '<div class="se-dialog-footer">' +
92
+ '<button type="submit" class="se-btn-primary" title="' + lang.dialogBox.submitButton + '" aria-label="' + lang.dialogBox.submitButton + '"><span>' + lang.dialogBox.submitButton + '</span></button>' +
93
+ '</div>' +
94
+ '</form>';
95
+
96
+ core.context.math.defaultFontSize = defaultFontSize;
97
+ dialog.innerHTML = html;
98
+ return dialog;
99
+ },
100
+
101
+ /** modify controller button */
102
+ setController_MathButton: function (core) {
103
+ const lang = core.lang;
104
+ const math_btn = core.util.createElement('DIV');
105
+
106
+ math_btn.className = 'se-controller se-controller-link';
107
+ math_btn.innerHTML = '' +
108
+ '<div class="se-arrow se-arrow-up"></div>' +
109
+ '<div class="link-content">' +
110
+ '<div class="se-btn-group">' +
111
+ '<button type="button" data-command="update" tabindex="-1" class="se-btn se-tooltip">' +
112
+ core.icons.edit +
113
+ '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.controller.edit + '</span></span>' +
114
+ '</button>' +
115
+ '<button type="button" data-command="delete" tabindex="-1" class="se-btn se-tooltip">' +
116
+ core.icons.delete +
117
+ '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.controller.remove + '</span></span>' +
118
+ '</button>' +
119
+ '</div>' +
120
+ '</div>' +
121
+ '';
122
+
123
+ return math_btn;
124
+ },
125
+
126
+ /**
127
+ * @Required @Override dialog
128
+ */
129
+ open: function () {
130
+ this.plugins.dialog.open.call(this, 'math', 'math' === this.currentControllerName);
131
+ },
132
+
133
+ /**
134
+ * @Override core - managedTagsInfo
135
+ */
136
+ managedTags: function () {
137
+ return {
138
+ className: 'katex',
139
+ method: function (element) {
140
+ if (!element.getAttribute('data-exp') || !this.options.katex) return;
141
+ const dom = this._d.createRange().createContextualFragment(this.plugins.math._renderer.call(this, this.util.HTMLDecoder(element.getAttribute('data-exp'))));
142
+ element.innerHTML = dom.querySelector('.katex').innerHTML;
143
+ element.setAttribute('contenteditable', false);
144
+ }
145
+ };
146
+ },
147
+
148
+ _renderer: function (exp) {
149
+ let result = '';
150
+ try {
151
+ this.util.removeClass(this.context.math.focusElement, 'se-error');
152
+ result = this.options.katex.src.renderToString(exp, {throwOnError: true, displayMode: true});
153
+ } catch(error) {
154
+ this.util.addClass(this.context.math.focusElement, 'se-error');
155
+ result = '<span class="se-math-katex-error">Katex syntax error. (Refer <a href="' + KATEX_WEBSITE + '" target="_blank">KaTeX</a>)</span>';
156
+ console.warn('[SUNEDITOR.math.Katex.error] ', error);
157
+ }
158
+ return result;
159
+ },
160
+
161
+ _renderMathExp: function (contextMath, e) {
162
+ contextMath.previewElement.innerHTML = this.plugins.math._renderer.call(this, e.target.value);
163
+ },
164
+
165
+ submit: function (e) {
166
+ this.showLoading();
167
+
168
+ e.preventDefault();
169
+ e.stopPropagation();
170
+
171
+ const submitAction = function () {
172
+ if (this.context.math.focusElement.value.trim().length === 0) return false;
173
+
174
+ const contextMath = this.context.math;
175
+ const mathExp = contextMath.focusElement.value;
176
+ const katexEl = contextMath.previewElement.querySelector('.katex');
177
+
178
+ if (!katexEl) return false;
179
+ katexEl.className = '__se__katex ' + katexEl.className;
180
+ katexEl.setAttribute('contenteditable', false);
181
+ katexEl.setAttribute('data-exp', this.util.HTMLEncoder(mathExp));
182
+ katexEl.setAttribute('data-font-size', contextMath.fontSizeElement.value);
183
+ katexEl.style.fontSize = contextMath.fontSizeElement.value;
184
+
185
+ if (!this.context.dialog.updateModal) {
186
+ const selectedFormats = this.getSelectedElements();
187
+
188
+ if (selectedFormats.length > 1) {
189
+ const oFormat = this.util.createElement(selectedFormats[0].nodeName);
190
+ oFormat.appendChild(katexEl);
191
+ if (!this.insertNode(oFormat, null, true)) return false;
192
+ } else {
193
+ if (!this.insertNode(katexEl, null, true)) return false;
194
+ }
195
+
196
+ const empty = this.util.createTextNode(this.util.zeroWidthSpace);
197
+ katexEl.parentNode.insertBefore(empty, katexEl.nextSibling);
198
+ this.setRange(katexEl, 0, katexEl, 1);
199
+ } else {
200
+ const containerEl = this.util.getParentElement(contextMath._mathExp, '.katex');
201
+ containerEl.parentNode.replaceChild(katexEl, containerEl);
202
+ this.setRange(katexEl, 0, katexEl, 1);
203
+ }
204
+
205
+ contextMath.focusElement.value = '';
206
+ contextMath.fontSizeElement.value = '1em';
207
+ contextMath.previewElement.style.fontSize = '1em';
208
+ contextMath.previewElement.innerHTML = '';
209
+
210
+ return true;
211
+ }.bind(this);
212
+
213
+ try {
214
+ if (submitAction()) {
215
+ this.plugins.dialog.close.call(this);
216
+ // history stack
217
+ this.history.push(false);
218
+ }
219
+ } catch (e) {
220
+ this.plugins.dialog.close.call(this);
221
+ } finally {
222
+ this.closeLoading();
223
+ }
224
+
225
+ return false;
226
+ },
227
+
228
+ active: function (element) {
229
+ if (!element) {
230
+ if (this.controllerArray.indexOf(this.context.math.mathController) > -1) {
231
+ this.controllersOff();
232
+ }
233
+ } else if (element.getAttribute('data-exp')) {
234
+ if (this.controllerArray.indexOf(this.context.math.mathController) < 0) {
235
+ this.setRange(element, 0, element, 1);
236
+ this.plugins.math.call_controller.call(this, element);
237
+ }
238
+ return true;
239
+ }
240
+
241
+ return false;
242
+ },
243
+
244
+ on: function (update) {
245
+ if (!update) {
246
+ this.plugins.math.init.call(this);
247
+ } else {
248
+ const contextMath = this.context.math;
249
+ if (contextMath._mathExp) {
250
+ const exp = this.util.HTMLDecoder(contextMath._mathExp.getAttribute('data-exp'));
251
+ const fontSize = contextMath._mathExp.getAttribute('data-font-size') || '1em';
252
+ this.context.dialog.updateModal = true;
253
+ contextMath.focusElement.value = exp;
254
+ contextMath.fontSizeElement.value = fontSize;
255
+ contextMath.previewElement.innerHTML = this.plugins.math._renderer.call(this, exp);
256
+ contextMath.previewElement.style.fontSize = fontSize;
257
+ }
258
+ }
259
+ },
260
+
261
+ call_controller: function (mathTag) {
262
+ this.context.math._mathExp = mathTag;
263
+ const mathBtn = this.context.math.mathController;
264
+
265
+ this.setControllerPosition(mathBtn, mathTag, 'bottom', {left: 0, top: 0});
266
+ this.controllersOn(mathBtn, mathTag, 'math');
267
+ },
268
+
269
+ onClick_mathController: function (e) {
270
+ e.stopPropagation();
271
+
272
+ const command = e.target.getAttribute('data-command') || e.target.parentNode.getAttribute('data-command');
273
+ if (!command) return;
274
+
275
+ e.preventDefault();
276
+
277
+ if (/update/.test(command)) {
278
+ this.context.math.focusElement.value = this.util.HTMLDecoder(this.context.math._mathExp.getAttribute('data-exp'));
279
+ this.plugins.dialog.open.call(this, 'math', true);
280
+ } else {
281
+ /** delete */
282
+ this.util.removeItem(this.context.math._mathExp);
283
+ this.context.math._mathExp = null;
284
+ this.focus();
285
+
286
+ // history stack
287
+ this.history.push(false);
288
+ }
289
+
290
+ this.controllersOff();
291
+ },
292
+
293
+ init: function () {
294
+ const contextMath = this.context.math;
295
+ contextMath.mathController.style.display = 'none';
296
+ contextMath._mathExp = null;
297
+ contextMath.focusElement.value = '';
298
+ contextMath.previewElement.innerHTML = '';
299
+ }
300
+ };
@@ -1,5 +1,5 @@
1
- import { DialogPlugin } from '../DialogPlugin';
2
-
3
- declare const video: DialogPlugin;
4
-
1
+ import { DialogPlugin } from '../DialogPlugin';
2
+
3
+ declare const video: DialogPlugin;
4
+
5
5
  export default video;