suneditor 2.47.4 → 2.47.6

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 (140) hide show
  1. package/LICENSE.txt +20 -20
  2. package/README.md +1625 -1613
  3. package/dist/suneditor.min.js +2 -2
  4. package/example.md +586 -586
  5. package/package.json +71 -71
  6. package/src/assets/css/suneditor-contents.css +561 -561
  7. package/src/assets/css/suneditor.css +0 -0
  8. package/src/assets/defaultIcons.js +103 -103
  9. package/src/lang/Lang.d.ts +143 -143
  10. package/src/lang/ckb.d.ts +4 -4
  11. package/src/lang/ckb.js +187 -187
  12. package/src/lang/cs.d.ts +4 -4
  13. package/src/lang/cs.js +187 -187
  14. package/src/lang/da.d.ts +4 -4
  15. package/src/lang/da.js +191 -191
  16. package/src/lang/de.d.ts +4 -4
  17. package/src/lang/de.js +188 -188
  18. package/src/lang/en.d.ts +4 -4
  19. package/src/lang/en.js +187 -187
  20. package/src/lang/es.d.ts +4 -4
  21. package/src/lang/es.js +187 -187
  22. package/src/lang/fa.d.ts +4 -4
  23. package/src/lang/fa.js +187 -187
  24. package/src/lang/fr.d.ts +4 -4
  25. package/src/lang/fr.js +188 -188
  26. package/src/lang/he.d.ts +4 -4
  27. package/src/lang/he.js +188 -188
  28. package/src/lang/hu.d.ts +5 -5
  29. package/src/lang/hu.js +188 -188
  30. package/src/lang/index.d.ts +25 -24
  31. package/src/lang/index.js +30 -27
  32. package/src/lang/it.d.ts +4 -4
  33. package/src/lang/it.js +188 -188
  34. package/src/lang/ja.d.ts +4 -4
  35. package/src/lang/ja.js +187 -187
  36. package/src/lang/km.d.ts +5 -0
  37. package/src/lang/km.js +188 -0
  38. package/src/lang/ko.d.ts +4 -4
  39. package/src/lang/ko.js +187 -187
  40. package/src/lang/lv.d.ts +4 -4
  41. package/src/lang/lv.js +187 -187
  42. package/src/lang/nl.d.ts +4 -4
  43. package/src/lang/nl.js +187 -187
  44. package/src/lang/pl.d.ts +4 -4
  45. package/src/lang/pl.js +187 -187
  46. package/src/lang/pt_br.d.ts +4 -4
  47. package/src/lang/pt_br.js +189 -189
  48. package/src/lang/ro.d.ts +4 -4
  49. package/src/lang/ro.js +187 -187
  50. package/src/lang/ru.d.ts +4 -4
  51. package/src/lang/ru.js +187 -187
  52. package/src/lang/se.d.ts +4 -4
  53. package/src/lang/se.js +191 -191
  54. package/src/lang/tr.d.ts +5 -5
  55. package/src/lang/tr.js +191 -191
  56. package/src/lang/ua.d.ts +5 -5
  57. package/src/lang/ua.js +188 -188
  58. package/src/lang/ur.d.ts +4 -4
  59. package/src/lang/ur.js +187 -187
  60. package/src/lang/zh_cn.d.ts +4 -4
  61. package/src/lang/zh_cn.js +187 -187
  62. package/src/lib/constructor.js +0 -0
  63. package/src/lib/context.d.ts +42 -42
  64. package/src/lib/context.js +0 -0
  65. package/src/lib/core.d.ts +1135 -1135
  66. package/src/lib/core.js +13 -3
  67. package/src/lib/history.d.ts +48 -48
  68. package/src/lib/history.js +218 -218
  69. package/src/lib/util.d.ts +677 -677
  70. package/src/lib/util.js +1 -1
  71. package/src/options.d.ts +621 -620
  72. package/src/plugins/CommandPlugin.d.ts +7 -7
  73. package/src/plugins/DialogPlugin.d.ts +19 -19
  74. package/src/plugins/FileBrowserPlugin.d.ts +29 -29
  75. package/src/plugins/Module.d.ts +14 -14
  76. package/src/plugins/Plugin.d.ts +41 -41
  77. package/src/plugins/SubmenuPlugin.d.ts +7 -7
  78. package/src/plugins/command/blockquote.d.ts +4 -4
  79. package/src/plugins/command/blockquote.js +46 -46
  80. package/src/plugins/dialog/audio.d.ts +4 -4
  81. package/src/plugins/dialog/audio.js +558 -558
  82. package/src/plugins/dialog/image.d.ts +4 -4
  83. package/src/plugins/dialog/image.js +1127 -1127
  84. package/src/plugins/dialog/link.d.ts +4 -4
  85. package/src/plugins/dialog/link.js +223 -223
  86. package/src/plugins/dialog/math.d.ts +4 -4
  87. package/src/plugins/dialog/math.js +300 -300
  88. package/src/plugins/dialog/video.d.ts +4 -4
  89. package/src/plugins/dialog/video.js +989 -989
  90. package/src/plugins/fileBrowser/imageGallery.d.ts +4 -4
  91. package/src/plugins/fileBrowser/imageGallery.js +64 -64
  92. package/src/plugins/index.d.ts +79 -79
  93. package/src/plugins/index.js +32 -32
  94. package/src/plugins/modules/_anchor.js +461 -461
  95. package/src/plugins/modules/_colorPicker.d.ts +59 -59
  96. package/src/plugins/modules/_colorPicker.js +0 -0
  97. package/src/plugins/modules/_notice.d.ts +20 -20
  98. package/src/plugins/modules/_notice.js +72 -72
  99. package/src/plugins/modules/_selectMenu.js +118 -118
  100. package/src/plugins/modules/component.d.ts +24 -24
  101. package/src/plugins/modules/component.js +80 -80
  102. package/src/plugins/modules/dialog.d.ts +27 -27
  103. package/src/plugins/modules/dialog.js +174 -174
  104. package/src/plugins/modules/fileBrowser.d.ts +41 -41
  105. package/src/plugins/modules/fileBrowser.js +377 -377
  106. package/src/plugins/modules/fileManager.d.ts +66 -66
  107. package/src/plugins/modules/fileManager.js +325 -325
  108. package/src/plugins/modules/index.d.ts +10 -10
  109. package/src/plugins/modules/index.js +8 -8
  110. package/src/plugins/modules/resizing.d.ts +153 -153
  111. package/src/plugins/modules/resizing.js +902 -902
  112. package/src/plugins/submenu/align.d.ts +4 -4
  113. package/src/plugins/submenu/align.js +160 -160
  114. package/src/plugins/submenu/font.d.ts +4 -4
  115. package/src/plugins/submenu/font.js +123 -123
  116. package/src/plugins/submenu/fontColor.d.ts +4 -4
  117. package/src/plugins/submenu/fontColor.js +0 -0
  118. package/src/plugins/submenu/fontSize.d.ts +4 -4
  119. package/src/plugins/submenu/fontSize.js +112 -112
  120. package/src/plugins/submenu/formatBlock.d.ts +4 -4
  121. package/src/plugins/submenu/formatBlock.js +273 -273
  122. package/src/plugins/submenu/hiliteColor.d.ts +4 -4
  123. package/src/plugins/submenu/hiliteColor.js +0 -0
  124. package/src/plugins/submenu/horizontalRule.d.ts +4 -4
  125. package/src/plugins/submenu/horizontalRule.js +98 -98
  126. package/src/plugins/submenu/lineHeight.d.ts +4 -4
  127. package/src/plugins/submenu/lineHeight.js +104 -104
  128. package/src/plugins/submenu/list.d.ts +4 -4
  129. package/src/plugins/submenu/list.js +456 -456
  130. package/src/plugins/submenu/paragraphStyle.d.ts +4 -4
  131. package/src/plugins/submenu/paragraphStyle.js +135 -135
  132. package/src/plugins/submenu/table.d.ts +4 -4
  133. package/src/plugins/submenu/template.d.ts +4 -4
  134. package/src/plugins/submenu/template.js +71 -71
  135. package/src/plugins/submenu/textStyle.d.ts +4 -4
  136. package/src/plugins/submenu/textStyle.js +167 -167
  137. package/src/suneditor.d.ts +9 -9
  138. package/src/suneditor.js +75 -75
  139. package/src/suneditor_build.js +17 -17
  140. package/README_V3_TEMP.md +0 -630
@@ -1,5 +1,5 @@
1
- import { SubmenuPlugin } from '../SubmenuPlugin';
2
-
3
- declare const align: SubmenuPlugin;
4
-
1
+ import { SubmenuPlugin } from '../SubmenuPlugin';
2
+
3
+ declare const align: SubmenuPlugin;
4
+
5
5
  export default align;
@@ -1,160 +1,160 @@
1
- /*
2
- * wysiwyg web editor
3
- *
4
- * suneditor.js
5
- * Copyright 2017 JiHong Lee.
6
- * MIT license.
7
- */
8
- 'use strict';
9
-
10
- export default {
11
- name: 'align',
12
- display: 'submenu',
13
- add: function (core, targetElement) {
14
- const icons = core.icons;
15
- const context = core.context;
16
- context.align = {
17
- targetButton: targetElement,
18
- _itemMenu: null,
19
- _alignList: null,
20
- currentAlign: '',
21
- defaultDir: core.options.rtl ? 'right' : 'left',
22
- icons: {
23
- justify: icons.align_justify,
24
- left: icons.align_left,
25
- right: icons.align_right,
26
- center: icons.align_center
27
- }
28
- };
29
-
30
- /** set submenu */
31
- let listDiv = this.setSubmenu(core);
32
- let listUl = context.align._itemMenu = listDiv.querySelector('ul');
33
-
34
- /** add event listeners */
35
- listUl.addEventListener('click', this.pickup.bind(core));
36
- context.align._alignList = listUl.querySelectorAll('li button');
37
-
38
- /** append target button menu */
39
- core.initMenuTarget(this.name, targetElement, listDiv);
40
-
41
- /** empty memory */
42
- listDiv = null, listUl = null;
43
- },
44
-
45
- setSubmenu: function (core) {
46
- const lang = core.lang;
47
- const icons = core.icons;
48
- const listDiv = core.util.createElement('DIV');
49
- const alignItems = core.options.alignItems;
50
-
51
- let html = '';
52
- for (let i = 0, item, text; i < alignItems.length; i++) {
53
- item = alignItems[i];
54
- text = lang.toolbar['align' + item.charAt(0).toUpperCase() + item.slice(1)];
55
- html += '<li>' +
56
- '<button type="button" class="se-btn-list se-btn-align" data-value="' + item + '" title="' + text + '" aria-label="' + text + '">' +
57
- '<span class="se-list-icon">' + icons['align_' + item] + '</span>' + text +
58
- '</button>' +
59
- '</li>';
60
- }
61
-
62
- listDiv.className = 'se-submenu se-list-layer se-list-align';
63
- listDiv.innerHTML = '' +
64
- '<div class="se-list-inner">' +
65
- '<ul class="se-list-basic">' +
66
- html +
67
- '</ul>' +
68
- '</div>';
69
-
70
- return listDiv;
71
- },
72
-
73
- /**
74
- * @Override core
75
- */
76
- active: function (element) {
77
- const alignContext = this.context.align;
78
- const targetButton = alignContext.targetButton;
79
- const target = targetButton.firstElementChild;
80
-
81
- if (!element) {
82
- this.util.changeElement(target, alignContext.icons[alignContext.defaultDir]);
83
- targetButton.removeAttribute('data-focus');
84
- } else if (this.util.isFormatElement(element)) {
85
- const textAlign = element.style.textAlign;
86
- if (textAlign) {
87
- this.util.changeElement(target, alignContext.icons[textAlign] || alignContext.icons[alignContext.defaultDir]);
88
- targetButton.setAttribute('data-focus', textAlign);
89
- return true;
90
- }
91
- }
92
-
93
- return false;
94
- },
95
-
96
- /**
97
- * @Override submenu
98
- */
99
- on: function () {
100
- const alignContext = this.context.align;
101
- const alignList = alignContext._alignList;
102
- const currentAlign = alignContext.targetButton.getAttribute('data-focus') || alignContext.defaultDir;
103
-
104
- if (currentAlign !== alignContext.currentAlign) {
105
- for (let i = 0, len = alignList.length; i < len; i++) {
106
- if (currentAlign === alignList[i].getAttribute('data-value')) {
107
- this.util.addClass(alignList[i], 'active');
108
- } else {
109
- this.util.removeClass(alignList[i], 'active');
110
- }
111
- }
112
-
113
- alignContext.currentAlign = currentAlign;
114
- }
115
- },
116
-
117
- exchangeDir: function () {
118
- const dir = this.options.rtl ? 'right' : 'left';
119
- if (!this.context.align || this.context.align.defaultDir === dir) return;
120
-
121
- this.context.align.defaultDir = dir;
122
- let menu = this.context.align._itemMenu;
123
- let leftBtn = menu.querySelector('[data-value="left"]');
124
- let rightBtn = menu.querySelector('[data-value="right"]');
125
- if (leftBtn && rightBtn) {
126
- const lp = leftBtn.parentElement;
127
- const rp = rightBtn.parentElement;
128
- lp.appendChild(rightBtn);
129
- rp.appendChild(leftBtn);
130
- }
131
- },
132
-
133
- pickup: function (e) {
134
- e.preventDefault();
135
- e.stopPropagation();
136
-
137
- let target = e.target;
138
- let value = null;
139
-
140
- while (!value && !/UL/i.test(target.tagName)) {
141
- value = target.getAttribute('data-value');
142
- target = target.parentNode;
143
- }
144
-
145
- if (!value) return;
146
-
147
- const defaultDir = this.context.align.defaultDir;
148
- const selectedFormsts = this.getSelectedElements();
149
- for (let i = 0, len = selectedFormsts.length; i < len; i++) {
150
- this.util.setStyle(selectedFormsts[i], 'textAlign', (value === defaultDir ? '' : value));
151
- }
152
-
153
- this.effectNode = null;
154
- this.submenuOff();
155
- this.focus();
156
-
157
- // history stack
158
- this.history.push(false);
159
- }
160
- };
1
+ /*
2
+ * wysiwyg web editor
3
+ *
4
+ * suneditor.js
5
+ * Copyright 2017 JiHong Lee.
6
+ * MIT license.
7
+ */
8
+ 'use strict';
9
+
10
+ export default {
11
+ name: 'align',
12
+ display: 'submenu',
13
+ add: function (core, targetElement) {
14
+ const icons = core.icons;
15
+ const context = core.context;
16
+ context.align = {
17
+ targetButton: targetElement,
18
+ _itemMenu: null,
19
+ _alignList: null,
20
+ currentAlign: '',
21
+ defaultDir: core.options.rtl ? 'right' : 'left',
22
+ icons: {
23
+ justify: icons.align_justify,
24
+ left: icons.align_left,
25
+ right: icons.align_right,
26
+ center: icons.align_center
27
+ }
28
+ };
29
+
30
+ /** set submenu */
31
+ let listDiv = this.setSubmenu(core);
32
+ let listUl = context.align._itemMenu = listDiv.querySelector('ul');
33
+
34
+ /** add event listeners */
35
+ listUl.addEventListener('click', this.pickup.bind(core));
36
+ context.align._alignList = listUl.querySelectorAll('li button');
37
+
38
+ /** append target button menu */
39
+ core.initMenuTarget(this.name, targetElement, listDiv);
40
+
41
+ /** empty memory */
42
+ listDiv = null, listUl = null;
43
+ },
44
+
45
+ setSubmenu: function (core) {
46
+ const lang = core.lang;
47
+ const icons = core.icons;
48
+ const listDiv = core.util.createElement('DIV');
49
+ const alignItems = core.options.alignItems;
50
+
51
+ let html = '';
52
+ for (let i = 0, item, text; i < alignItems.length; i++) {
53
+ item = alignItems[i];
54
+ text = lang.toolbar['align' + item.charAt(0).toUpperCase() + item.slice(1)];
55
+ html += '<li>' +
56
+ '<button type="button" class="se-btn-list se-btn-align" data-value="' + item + '" title="' + text + '" aria-label="' + text + '">' +
57
+ '<span class="se-list-icon">' + icons['align_' + item] + '</span>' + text +
58
+ '</button>' +
59
+ '</li>';
60
+ }
61
+
62
+ listDiv.className = 'se-submenu se-list-layer se-list-align';
63
+ listDiv.innerHTML = '' +
64
+ '<div class="se-list-inner">' +
65
+ '<ul class="se-list-basic">' +
66
+ html +
67
+ '</ul>' +
68
+ '</div>';
69
+
70
+ return listDiv;
71
+ },
72
+
73
+ /**
74
+ * @Override core
75
+ */
76
+ active: function (element) {
77
+ const alignContext = this.context.align;
78
+ const targetButton = alignContext.targetButton;
79
+ const target = targetButton.firstElementChild;
80
+
81
+ if (!element) {
82
+ this.util.changeElement(target, alignContext.icons[alignContext.defaultDir]);
83
+ targetButton.removeAttribute('data-focus');
84
+ } else if (this.util.isFormatElement(element)) {
85
+ const textAlign = element.style.textAlign;
86
+ if (textAlign) {
87
+ this.util.changeElement(target, alignContext.icons[textAlign] || alignContext.icons[alignContext.defaultDir]);
88
+ targetButton.setAttribute('data-focus', textAlign);
89
+ return true;
90
+ }
91
+ }
92
+
93
+ return false;
94
+ },
95
+
96
+ /**
97
+ * @Override submenu
98
+ */
99
+ on: function () {
100
+ const alignContext = this.context.align;
101
+ const alignList = alignContext._alignList;
102
+ const currentAlign = alignContext.targetButton.getAttribute('data-focus') || alignContext.defaultDir;
103
+
104
+ if (currentAlign !== alignContext.currentAlign) {
105
+ for (let i = 0, len = alignList.length; i < len; i++) {
106
+ if (currentAlign === alignList[i].getAttribute('data-value')) {
107
+ this.util.addClass(alignList[i], 'active');
108
+ } else {
109
+ this.util.removeClass(alignList[i], 'active');
110
+ }
111
+ }
112
+
113
+ alignContext.currentAlign = currentAlign;
114
+ }
115
+ },
116
+
117
+ exchangeDir: function () {
118
+ const dir = this.options.rtl ? 'right' : 'left';
119
+ if (!this.context.align || this.context.align.defaultDir === dir) return;
120
+
121
+ this.context.align.defaultDir = dir;
122
+ let menu = this.context.align._itemMenu;
123
+ let leftBtn = menu.querySelector('[data-value="left"]');
124
+ let rightBtn = menu.querySelector('[data-value="right"]');
125
+ if (leftBtn && rightBtn) {
126
+ const lp = leftBtn.parentElement;
127
+ const rp = rightBtn.parentElement;
128
+ lp.appendChild(rightBtn);
129
+ rp.appendChild(leftBtn);
130
+ }
131
+ },
132
+
133
+ pickup: function (e) {
134
+ e.preventDefault();
135
+ e.stopPropagation();
136
+
137
+ let target = e.target;
138
+ let value = null;
139
+
140
+ while (!value && !/UL/i.test(target.tagName)) {
141
+ value = target.getAttribute('data-value');
142
+ target = target.parentNode;
143
+ }
144
+
145
+ if (!value) return;
146
+
147
+ const defaultDir = this.context.align.defaultDir;
148
+ const selectedFormsts = this.getSelectedElements();
149
+ for (let i = 0, len = selectedFormsts.length; i < len; i++) {
150
+ this.util.setStyle(selectedFormsts[i], 'textAlign', (value === defaultDir ? '' : value));
151
+ }
152
+
153
+ this.effectNode = null;
154
+ this.submenuOff();
155
+ this.focus();
156
+
157
+ // history stack
158
+ this.history.push(false);
159
+ }
160
+ };
@@ -1,5 +1,5 @@
1
- import { SubmenuPlugin } from '../SubmenuPlugin';
2
-
3
- declare const font: SubmenuPlugin;
4
-
1
+ import { SubmenuPlugin } from '../SubmenuPlugin';
2
+
3
+ declare const font: SubmenuPlugin;
4
+
5
5
  export default font;
@@ -1,123 +1,123 @@
1
- /*
2
- * wysiwyg web editor
3
- *
4
- * suneditor.js
5
- * Copyright 2017 JiHong Lee.
6
- * MIT license.
7
- */
8
- 'use strict';
9
-
10
- export default {
11
- name: 'font',
12
- display: 'submenu',
13
- add: function (core, targetElement) {
14
- const context = core.context;
15
- context.font = {
16
- targetText: targetElement.querySelector('.txt'),
17
- targetTooltip: targetElement.parentNode.querySelector('.se-tooltip-text'),
18
- _fontList: null,
19
- currentFont: ''
20
- };
21
-
22
- /** set submenu */
23
- let listDiv = this.setSubmenu(core);
24
-
25
- /** add event listeners */
26
- listDiv.querySelector('.se-list-inner').addEventListener('click', this.pickup.bind(core));
27
-
28
- context.font._fontList = listDiv.querySelectorAll('ul li button');
29
-
30
- /** append target button menu */
31
- core.initMenuTarget(this.name, targetElement, listDiv);
32
-
33
- /** empty memory */
34
- listDiv = null;
35
- },
36
-
37
- setSubmenu: function (core) {
38
- const lang = core.lang;
39
- const listDiv = core.util.createElement('DIV');
40
-
41
- listDiv.className = 'se-submenu se-list-layer se-list-font-family';
42
-
43
- let font, text, i, len;
44
- let fontList = core.options.font;
45
-
46
- let list = '<div class="se-list-inner">' +
47
- '<ul class="se-list-basic">' +
48
- '<li><button type="button" class="default_value se-btn-list" title="' + lang.toolbar.default + '" aria-label="' + lang.toolbar.default + '">(' + lang.toolbar.default + ')</button></li>';
49
- for (i = 0, len = fontList.length; i < len; i++) {
50
- font = fontList[i];
51
- text = font.split(',')[0];
52
- list += '<li><button type="button" class="se-btn-list" data-value="' + font + '" data-txt="' + text + '" title="' + text + '" aria-label="' + text + '" style="font-family:' + font + ';">' + text + '</button></li>';
53
- }
54
- list += '</ul></div>';
55
- listDiv.innerHTML = list;
56
-
57
- return listDiv;
58
- },
59
-
60
- /**
61
- * @Override core
62
- */
63
- active: function (element) {
64
- const target = this.context.font.targetText;
65
- const tooltip = this.context.font.targetTooltip;
66
-
67
- if (!element) {
68
- const font = this.hasFocus ? this.wwComputedStyle.fontFamily : this.lang.toolbar.font;
69
- this.util.changeTxt(target, font);
70
- this.util.changeTxt(tooltip, this.hasFocus ? this.lang.toolbar.font + (font ? ' (' + font + ')' : '') : font);
71
- } else if (element.style && element.style.fontFamily.length > 0) {
72
- const selectFont = element.style.fontFamily.replace(/["']/g,'');
73
- this.util.changeTxt(target, selectFont);
74
- this.util.changeTxt(tooltip, this.lang.toolbar.font + ' (' + selectFont + ')');
75
- return true;
76
- }
77
-
78
- return false;
79
- },
80
-
81
- /**
82
- * @Override submenu
83
- */
84
- on: function () {
85
- const fontContext = this.context.font;
86
- const fontList = fontContext._fontList;
87
- const currentFont = fontContext.targetText.textContent;
88
-
89
- if (currentFont !== fontContext.currentFont) {
90
- for (let i = 0, len = fontList.length; i < len; i++) {
91
- if (currentFont === (fontList[i].getAttribute('data-value') || '').replace(/'|"/g, '')) {
92
- this.util.addClass(fontList[i], 'active');
93
- } else {
94
- this.util.removeClass(fontList[i], 'active');
95
- }
96
- }
97
-
98
- fontContext.currentFont = currentFont;
99
- }
100
- },
101
-
102
- pickup: function (e) {
103
- if (!/^BUTTON$/i.test(e.target.tagName)) return false;
104
-
105
- e.preventDefault();
106
- e.stopPropagation();
107
-
108
- let value = e.target.getAttribute('data-value');
109
-
110
- if (value) {
111
- const newNode = this.util.createElement('SPAN');
112
- if (/[\s\d\W]/.test(value) && !/^['"].*['"]$/.test(value)) {
113
- value = '"' + value + '"';
114
- }
115
- newNode.style.fontFamily = value;
116
- this.nodeChange(newNode, ['font-family'], null, null);
117
- } else {
118
- this.nodeChange(null, ['font-family'], ['span'], true);
119
- }
120
-
121
- this.submenuOff();
122
- }
123
- };
1
+ /*
2
+ * wysiwyg web editor
3
+ *
4
+ * suneditor.js
5
+ * Copyright 2017 JiHong Lee.
6
+ * MIT license.
7
+ */
8
+ 'use strict';
9
+
10
+ export default {
11
+ name: 'font',
12
+ display: 'submenu',
13
+ add: function (core, targetElement) {
14
+ const context = core.context;
15
+ context.font = {
16
+ targetText: targetElement.querySelector('.txt'),
17
+ targetTooltip: targetElement.parentNode.querySelector('.se-tooltip-text'),
18
+ _fontList: null,
19
+ currentFont: ''
20
+ };
21
+
22
+ /** set submenu */
23
+ let listDiv = this.setSubmenu(core);
24
+
25
+ /** add event listeners */
26
+ listDiv.querySelector('.se-list-inner').addEventListener('click', this.pickup.bind(core));
27
+
28
+ context.font._fontList = listDiv.querySelectorAll('ul li button');
29
+
30
+ /** append target button menu */
31
+ core.initMenuTarget(this.name, targetElement, listDiv);
32
+
33
+ /** empty memory */
34
+ listDiv = null;
35
+ },
36
+
37
+ setSubmenu: function (core) {
38
+ const lang = core.lang;
39
+ const listDiv = core.util.createElement('DIV');
40
+
41
+ listDiv.className = 'se-submenu se-list-layer se-list-font-family';
42
+
43
+ let font, text, i, len;
44
+ let fontList = core.options.font;
45
+
46
+ let list = '<div class="se-list-inner">' +
47
+ '<ul class="se-list-basic">' +
48
+ '<li><button type="button" class="default_value se-btn-list" title="' + lang.toolbar.default + '" aria-label="' + lang.toolbar.default + '">(' + lang.toolbar.default + ')</button></li>';
49
+ for (i = 0, len = fontList.length; i < len; i++) {
50
+ font = fontList[i];
51
+ text = font.split(',')[0];
52
+ list += '<li><button type="button" class="se-btn-list" data-value="' + font + '" data-txt="' + text + '" title="' + text + '" aria-label="' + text + '" style="font-family:' + font + ';">' + text + '</button></li>';
53
+ }
54
+ list += '</ul></div>';
55
+ listDiv.innerHTML = list;
56
+
57
+ return listDiv;
58
+ },
59
+
60
+ /**
61
+ * @Override core
62
+ */
63
+ active: function (element) {
64
+ const target = this.context.font.targetText;
65
+ const tooltip = this.context.font.targetTooltip;
66
+
67
+ if (!element) {
68
+ const font = this.hasFocus ? this.wwComputedStyle.fontFamily : this.lang.toolbar.font;
69
+ this.util.changeTxt(target, font);
70
+ this.util.changeTxt(tooltip, this.hasFocus ? this.lang.toolbar.font + (font ? ' (' + font + ')' : '') : font);
71
+ } else if (element.style && element.style.fontFamily.length > 0) {
72
+ const selectFont = element.style.fontFamily.replace(/["']/g,'');
73
+ this.util.changeTxt(target, selectFont);
74
+ this.util.changeTxt(tooltip, this.lang.toolbar.font + ' (' + selectFont + ')');
75
+ return true;
76
+ }
77
+
78
+ return false;
79
+ },
80
+
81
+ /**
82
+ * @Override submenu
83
+ */
84
+ on: function () {
85
+ const fontContext = this.context.font;
86
+ const fontList = fontContext._fontList;
87
+ const currentFont = fontContext.targetText.textContent;
88
+
89
+ if (currentFont !== fontContext.currentFont) {
90
+ for (let i = 0, len = fontList.length; i < len; i++) {
91
+ if (currentFont === (fontList[i].getAttribute('data-value') || '').replace(/'|"/g, '')) {
92
+ this.util.addClass(fontList[i], 'active');
93
+ } else {
94
+ this.util.removeClass(fontList[i], 'active');
95
+ }
96
+ }
97
+
98
+ fontContext.currentFont = currentFont;
99
+ }
100
+ },
101
+
102
+ pickup: function (e) {
103
+ if (!/^BUTTON$/i.test(e.target.tagName)) return false;
104
+
105
+ e.preventDefault();
106
+ e.stopPropagation();
107
+
108
+ let value = e.target.getAttribute('data-value');
109
+
110
+ if (value) {
111
+ const newNode = this.util.createElement('SPAN');
112
+ if (/[\s\d\W]/.test(value) && !/^['"].*['"]$/.test(value)) {
113
+ value = '"' + value + '"';
114
+ }
115
+ newNode.style.fontFamily = value;
116
+ this.nodeChange(newNode, ['font-family'], null, null);
117
+ } else {
118
+ this.nodeChange(null, ['font-family'], ['span'], true);
119
+ }
120
+
121
+ this.submenuOff();
122
+ }
123
+ };
@@ -1,5 +1,5 @@
1
- import { SubmenuPlugin } from '../SubmenuPlugin';
2
-
3
- declare const fontColor: SubmenuPlugin;
4
-
1
+ import { SubmenuPlugin } from '../SubmenuPlugin';
2
+
3
+ declare const fontColor: SubmenuPlugin;
4
+
5
5
  export default fontColor;
File without changes
@@ -1,5 +1,5 @@
1
- import { SubmenuPlugin } from '../SubmenuPlugin';
2
-
3
- declare const fontSize: SubmenuPlugin;
4
-
1
+ import { SubmenuPlugin } from '../SubmenuPlugin';
2
+
3
+ declare const fontSize: SubmenuPlugin;
4
+
5
5
  export default fontSize;