@syncfusion/ej2-richtexteditor 21.2.10 → 22.1.34

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 (147) hide show
  1. package/.eslintrc.json +1 -0
  2. package/CHANGELOG.md +18 -0
  3. package/dist/ej2-richtexteditor.min.js +2 -2
  4. package/dist/ej2-richtexteditor.umd.min.js +2 -2
  5. package/dist/ej2-richtexteditor.umd.min.js.map +1 -1
  6. package/dist/es6/ej2-richtexteditor.es2015.js +1558 -186
  7. package/dist/es6/ej2-richtexteditor.es2015.js.map +1 -1
  8. package/dist/es6/ej2-richtexteditor.es5.js +1571 -189
  9. package/dist/es6/ej2-richtexteditor.es5.js.map +1 -1
  10. package/dist/global/ej2-richtexteditor.min.js +2 -2
  11. package/dist/global/ej2-richtexteditor.min.js.map +1 -1
  12. package/dist/global/index.d.ts +1 -1
  13. package/package.json +12 -12
  14. package/src/common/config.js +2 -2
  15. package/src/common/constant.d.ts +6 -0
  16. package/src/common/constant.js +6 -0
  17. package/src/common/interface.d.ts +2 -2
  18. package/src/common/util.js +2 -0
  19. package/src/editor-manager/base/editor-manager.d.ts +4 -3
  20. package/src/editor-manager/base/editor-manager.js +6 -1
  21. package/src/editor-manager/base/interface.d.ts +44 -9
  22. package/src/editor-manager/plugin/clearformat.d.ts +1 -0
  23. package/src/editor-manager/plugin/clearformat.js +1 -0
  24. package/src/editor-manager/plugin/dom-node.js +10 -6
  25. package/src/editor-manager/plugin/emoji-picker-action.d.ts +8 -0
  26. package/src/editor-manager/plugin/emoji-picker-action.js +62 -0
  27. package/src/editor-manager/plugin/format-painter-actions.d.ts +19 -36
  28. package/src/editor-manager/plugin/format-painter-actions.js +224 -81
  29. package/src/editor-manager/plugin/inserthtml.js +6 -1
  30. package/src/editor-manager/plugin/link.js +1 -1
  31. package/src/editor-manager/plugin/ms-word-clean-up.d.ts +3 -0
  32. package/src/editor-manager/plugin/ms-word-clean-up.js +40 -7
  33. package/src/editor-manager/plugin/selection-commands.d.ts +2 -1
  34. package/src/editor-manager/plugin/selection-commands.js +48 -23
  35. package/src/editor-manager/plugin/table.js +2 -2
  36. package/src/editor-manager/plugin/toolbar-status.js +6 -0
  37. package/src/editor-manager/plugin/undo.d.ts +1 -0
  38. package/src/editor-manager/plugin/undo.js +26 -5
  39. package/src/editor-manager/plugin.d.ts +1 -0
  40. package/src/editor-manager/plugin.js +1 -0
  41. package/src/global.js +1 -1
  42. package/src/rich-text-editor/actions/base-quick-toolbar.js +8 -1
  43. package/src/rich-text-editor/actions/base-toolbar.js +3 -2
  44. package/src/rich-text-editor/actions/emoji-picker.d.ts +48 -0
  45. package/src/rich-text-editor/actions/emoji-picker.js +778 -0
  46. package/src/rich-text-editor/actions/enter-key.js +2 -2
  47. package/src/rich-text-editor/actions/execute-command-callback.js +3 -1
  48. package/src/rich-text-editor/actions/file-manager.js +1 -0
  49. package/src/rich-text-editor/actions/format-painter.d.ts +2 -2
  50. package/src/rich-text-editor/actions/format-painter.js +11 -9
  51. package/src/rich-text-editor/actions/full-screen.js +6 -0
  52. package/src/rich-text-editor/actions/html-editor.js +11 -2
  53. package/src/rich-text-editor/actions/paste-clean-up.js +1 -0
  54. package/src/rich-text-editor/actions/resize.js +1 -1
  55. package/src/rich-text-editor/actions.d.ts +1 -0
  56. package/src/rich-text-editor/actions.js +1 -0
  57. package/src/rich-text-editor/base/constant.d.ts +10 -0
  58. package/src/rich-text-editor/base/constant.js +10 -0
  59. package/src/rich-text-editor/base/enum.d.ts +0 -4
  60. package/src/rich-text-editor/base/interface.d.ts +44 -6
  61. package/src/rich-text-editor/base/rich-text-editor-model.d.ts +13 -7
  62. package/src/rich-text-editor/base/rich-text-editor.d.ts +27 -7
  63. package/src/rich-text-editor/base/rich-text-editor.js +42 -12
  64. package/src/rich-text-editor/base/util.js +2 -2
  65. package/src/rich-text-editor/formatter/formatter.js +7 -5
  66. package/src/rich-text-editor/models/default-locale.js +14 -2
  67. package/src/rich-text-editor/models/items.d.ts +2 -1
  68. package/src/rich-text-editor/models/items.js +188 -1
  69. package/src/rich-text-editor/models/toolbar-settings-model.d.ts +212 -9
  70. package/src/rich-text-editor/models/toolbar-settings.d.ts +209 -11
  71. package/src/rich-text-editor/models/toolbar-settings.js +23 -6
  72. package/src/rich-text-editor/renderer/audio-module.js +3 -3
  73. package/src/rich-text-editor/renderer/iframe-content-renderer.js +1 -1
  74. package/src/rich-text-editor/renderer/image-module.js +11 -6
  75. package/src/rich-text-editor/renderer/toolbar-renderer.d.ts +2 -0
  76. package/src/rich-text-editor/renderer/toolbar-renderer.js +7 -2
  77. package/src/rich-text-editor/renderer/video-module.js +14 -9
  78. package/styles/bootstrap-dark.css +299 -137
  79. package/styles/bootstrap.css +305 -140
  80. package/styles/bootstrap4.css +304 -133
  81. package/styles/bootstrap5-dark.css +310 -165
  82. package/styles/bootstrap5.css +310 -165
  83. package/styles/fabric-dark.css +297 -136
  84. package/styles/fabric.css +294 -133
  85. package/styles/fluent-dark.css +311 -170
  86. package/styles/fluent.css +311 -170
  87. package/styles/highcontrast-light.css +289 -128
  88. package/styles/highcontrast.css +296 -135
  89. package/styles/material-dark.css +295 -129
  90. package/styles/material.css +300 -134
  91. package/styles/material3-dark.css +3082 -0
  92. package/styles/material3-dark.scss +3 -0
  93. package/styles/material3.css +3138 -0
  94. package/styles/material3.scss +3 -0
  95. package/styles/rich-text-editor/_bootstrap-dark-definition.scss +54 -12
  96. package/styles/rich-text-editor/_bootstrap-definition.scss +57 -13
  97. package/styles/rich-text-editor/_bootstrap4-definition.scss +50 -7
  98. package/styles/rich-text-editor/_bootstrap5-definition.scss +56 -13
  99. package/styles/rich-text-editor/_fabric-dark-definition.scss +53 -10
  100. package/styles/rich-text-editor/_fabric-definition.scss +52 -9
  101. package/styles/rich-text-editor/_fluent-definition.scss +56 -15
  102. package/styles/rich-text-editor/_fusionnew-definition.scss +46 -4
  103. package/styles/rich-text-editor/_highcontrast-definition.scss +52 -9
  104. package/styles/rich-text-editor/_highcontrast-light-definition.scss +48 -5
  105. package/styles/rich-text-editor/_layout.scss +280 -68
  106. package/styles/rich-text-editor/_material-dark-definition.scss +48 -5
  107. package/styles/rich-text-editor/_material-definition.scss +50 -6
  108. package/styles/rich-text-editor/_material3-dark-definition.scss +1 -0
  109. package/styles/rich-text-editor/_material3-definition.scss +262 -0
  110. package/styles/rich-text-editor/_tailwind-definition.scss +63 -23
  111. package/styles/rich-text-editor/_theme.scss +103 -19
  112. package/styles/rich-text-editor/bootstrap-dark.css +299 -137
  113. package/styles/rich-text-editor/bootstrap.css +305 -140
  114. package/styles/rich-text-editor/bootstrap4.css +304 -133
  115. package/styles/rich-text-editor/bootstrap5-dark.css +310 -165
  116. package/styles/rich-text-editor/bootstrap5.css +310 -165
  117. package/styles/rich-text-editor/fabric-dark.css +297 -136
  118. package/styles/rich-text-editor/fabric.css +294 -133
  119. package/styles/rich-text-editor/fluent-dark.css +311 -170
  120. package/styles/rich-text-editor/fluent.css +311 -170
  121. package/styles/rich-text-editor/highcontrast-light.css +289 -128
  122. package/styles/rich-text-editor/highcontrast.css +296 -135
  123. package/styles/rich-text-editor/icons/_bootstrap-dark.scss +1 -1
  124. package/styles/rich-text-editor/icons/_bootstrap.scss +1 -1
  125. package/styles/rich-text-editor/icons/_bootstrap4.scss +1 -1
  126. package/styles/rich-text-editor/icons/_bootstrap5.scss +1 -1
  127. package/styles/rich-text-editor/icons/_fabric-dark.scss +1 -1
  128. package/styles/rich-text-editor/icons/_fabric.scss +1 -1
  129. package/styles/rich-text-editor/icons/_fluent.scss +1 -1
  130. package/styles/rich-text-editor/icons/_fusionnew.scss +1 -1
  131. package/styles/rich-text-editor/icons/_highcontrast-light.scss +1 -1
  132. package/styles/rich-text-editor/icons/_highcontrast.scss +1 -1
  133. package/styles/rich-text-editor/icons/_material-dark.scss +1 -1
  134. package/styles/rich-text-editor/icons/_material.scss +1 -1
  135. package/styles/rich-text-editor/icons/_material3-dark.scss +1 -0
  136. package/styles/rich-text-editor/icons/_material3.scss +1 -1
  137. package/styles/rich-text-editor/icons/_tailwind.scss +1 -1
  138. package/styles/rich-text-editor/material-dark.css +295 -129
  139. package/styles/rich-text-editor/material.css +300 -134
  140. package/styles/rich-text-editor/material3-dark.css +3082 -0
  141. package/styles/rich-text-editor/material3-dark.scss +5 -0
  142. package/styles/rich-text-editor/material3.css +3138 -0
  143. package/styles/rich-text-editor/material3.scss +5 -0
  144. package/styles/rich-text-editor/tailwind-dark.css +313 -157
  145. package/styles/rich-text-editor/tailwind.css +313 -157
  146. package/styles/tailwind-dark.css +313 -157
  147. package/styles/tailwind.css +313 -157
@@ -148,15 +148,20 @@ var Image = /** @class */ (function () {
148
148
  if (args.subCommand.toLowerCase() === 'undo' || args.subCommand.toLowerCase() === 'redo') {
149
149
  for (var i = 0; i < this.parent.formatter.getUndoRedoStack().length; i++) {
150
150
  var temp = this.parent.createElement('div');
151
- var contentElem = parseHtml(this.parent.formatter.getUndoRedoStack()[i].text);
152
- temp.appendChild(contentElem);
151
+ var contentElem = this.parent.formatter.getUndoRedoStack()[i].text;
152
+ temp.appendChild(contentElem.cloneNode(true));
153
153
  var img = temp.querySelectorAll('img');
154
154
  if (temp.querySelector('.e-img-resize') && img.length > 0) {
155
155
  for (var j = 0; j < img.length; j++) {
156
156
  img[j].style.outline = '';
157
157
  }
158
158
  detach(temp.querySelector('.e-img-resize'));
159
- this.parent.formatter.getUndoRedoStack()[i].text = temp.innerHTML;
159
+ var clonedElement = temp.cloneNode(true);
160
+ var fragment = document.createDocumentFragment();
161
+ while (clonedElement.firstChild) {
162
+ fragment.appendChild(clonedElement.firstChild);
163
+ }
164
+ this.parent.formatter.getUndoRedoStack()[i].text = fragment;
160
165
  }
161
166
  }
162
167
  }
@@ -349,7 +354,7 @@ var Image = /** @class */ (function () {
349
354
  if (isNullOrUndefined(img.width)) {
350
355
  return;
351
356
  }
352
- // eslint-disable-next-line
357
+ // eslint-disable-next-line security/detect-unsafe-regex
353
358
  var width = img.style.width !== '' ? img.style.width.match(/^\d+(\.\d*)?%$/g) ? parseFloat(img.style.width) :
354
359
  parseInt(img.style.width, 10) : img.width;
355
360
  var height = img.style.height !== '' ? parseInt(img.style.height, 10) : img.height;
@@ -628,7 +633,7 @@ var Image = /** @class */ (function () {
628
633
  selectNodeEle = this.parent.formatter.editorManager.nodeSelection.getNodeCollection(range);
629
634
  selectParentEle = this.parent.formatter.editorManager.nodeSelection.getParentNodeCollection(range);
630
635
  if (!originalEvent.ctrlKey && originalEvent.key && (originalEvent.key.length === 1 || originalEvent.action === 'enter') &&
631
- (selectParentEle[0].tagName === 'IMG') && selectParentEle[0].parentElement) {
636
+ (!isNOU(selectParentEle[0]) && selectParentEle[0].tagName === 'IMG') && selectParentEle[0].parentElement) {
632
637
  var prev = selectParentEle[0].parentElement.childNodes[0];
633
638
  if (this.contentModule.getEditPanel().querySelector('.e-img-resize')) {
634
639
  this.removeResizeEle();
@@ -1277,7 +1282,7 @@ var Image = /** @class */ (function () {
1277
1282
  var dialogContent = this.imgsizeInput(e);
1278
1283
  var selectObj_1 = { args: e.args, selfImage: this, selection: e.selection, selectNode: e.selectNode };
1279
1284
  this.dialogObj.setProperties({
1280
- height: 'inherit', width: '290px', header: imgSizeHeader, content: dialogContent, position: { X: 'center', Y: 'center' },
1285
+ height: (Browser.isDevice) ? '300px' : 'inherit', width: '290px', header: imgSizeHeader, content: dialogContent, position: { X: 'center', Y: 'center' },
1281
1286
  buttons: [{
1282
1287
  // eslint-disable-next-line
1283
1288
  click: function (e) {
@@ -20,6 +20,7 @@ export declare class ToolbarRenderer implements IRenderer {
20
20
  private currentElement;
21
21
  private currentDropdown;
22
22
  private popupOverlay;
23
+ private tooltip;
23
24
  /**
24
25
  * Constructor for toolbar renderer module
25
26
  *
@@ -27,6 +28,7 @@ export declare class ToolbarRenderer implements IRenderer {
27
28
  */
28
29
  constructor(parent?: IRichTextEditor);
29
30
  private wireEvent;
31
+ private destroyTooltip;
30
32
  private unWireEvent;
31
33
  private toolbarBeforeCreate;
32
34
  private toolbarCreated;
@@ -26,6 +26,10 @@ var ToolbarRenderer = /** @class */ (function () {
26
26
  }
27
27
  ToolbarRenderer.prototype.wireEvent = function () {
28
28
  this.parent.on(events.destroy, this.unWireEvent, this);
29
+ this.parent.on(events.maximizeMinimizeClick, this.destroyTooltip, this);
30
+ };
31
+ ToolbarRenderer.prototype.destroyTooltip = function () {
32
+ this.tooltip.close();
29
33
  };
30
34
  ToolbarRenderer.prototype.unWireEvent = function () {
31
35
  this.parent.off(events.destroy, this.unWireEvent);
@@ -122,12 +126,13 @@ var ToolbarRenderer = /** @class */ (function () {
122
126
  args.rteToolbarObj.toolbarObj.createElement = this.parent.createElement;
123
127
  args.rteToolbarObj.toolbarObj.appendTo(args.target);
124
128
  if (this.parent.showTooltip) {
125
- var tooltip = new Tooltip({
129
+ this.tooltip = new Tooltip({
126
130
  target: '#' + this.parent.getID() + '_toolbar_wrapper [title]',
127
131
  showTipPointer: true,
132
+ openDelay: 400,
128
133
  cssClass: this.parent.cssClass
129
134
  });
130
- tooltip.appendTo(args.target);
135
+ this.tooltip.appendTo(args.target);
131
136
  }
132
137
  };
133
138
  /**
@@ -107,15 +107,20 @@ var Video = /** @class */ (function () {
107
107
  if (args.subCommand.toLowerCase() === 'undo' || args.subCommand.toLowerCase() === 'redo') {
108
108
  for (var i = 0; i < this.parent.formatter.getUndoRedoStack().length; i++) {
109
109
  var temp = this.parent.createElement('div');
110
- var contentElem = parseHtml(this.parent.formatter.getUndoRedoStack()[i].text);
111
- temp.appendChild(contentElem);
110
+ var contentElem = this.parent.formatter.getUndoRedoStack()[i].text;
111
+ temp.appendChild(contentElem.cloneNode(true));
112
112
  var vid = temp.querySelectorAll('video');
113
113
  if (temp.querySelector('.e-vid-resize') && vid.length > 0) {
114
114
  for (var j = 0; j < vid.length; j++) {
115
115
  vid[j].style.outline = '';
116
116
  }
117
117
  detach(temp.querySelector('.e-vid-resize'));
118
- this.parent.formatter.getUndoRedoStack()[i].text = temp.innerHTML;
118
+ var clonedElement = temp.cloneNode(true);
119
+ var fragment = document.createDocumentFragment();
120
+ while (clonedElement.firstChild) {
121
+ fragment.appendChild(clonedElement.firstChild);
122
+ }
123
+ this.parent.formatter.getUndoRedoStack()[i].text = fragment;
119
124
  }
120
125
  }
121
126
  }
@@ -411,8 +416,8 @@ var Video = /** @class */ (function () {
411
416
  parseInt(vidEleStyle.width, 10) : vid.style.width !== '' ? vid.style.width : vid.width;
412
417
  var height = vidEleStyle.height !== '' ? parseInt(vidEleStyle.height, 10) : vid.style.height !== '' ? vid.style.height : vid.height;
413
418
  if (width > height) {
414
- vid.style.minWidth = this.parent.insertVideoSettings.minWidth === 0 ? '140px' : formatUnit(this.parent.insertVideoSettings.minWidth);
415
- vid.style.minHeight = this.parent.insertVideoSettings.minHeight === 0 ? '60px' : formatUnit(this.parent.insertVideoSettings.minHeight);
419
+ vid.style.minWidth = this.parent.insertVideoSettings.minWidth === 0 ? '200px' : formatUnit(this.parent.insertVideoSettings.minWidth);
420
+ vid.style.minHeight = this.parent.insertVideoSettings.minHeight === 0 ? '90px' : formatUnit(this.parent.insertVideoSettings.minHeight);
416
421
  if (this.parent.insertVideoSettings.resizeByPercent) {
417
422
  if (parseInt('' + vid.getBoundingClientRect().width + '', 10) !== 0 && parseInt('' + width + '', 10) !== 0) {
418
423
  var percentageValue = this.pixToPerc((parseInt(width.toString(), 10) / parseInt(height.toString(), 10) * expectedY), (vid.previousElementSibling || vid.parentElement));
@@ -608,7 +613,7 @@ var Video = /** @class */ (function () {
608
613
  selectNodeEle = this.parent.formatter.editorManager.nodeSelection.getNodeCollection(range);
609
614
  selectParentEle = this.parent.formatter.editorManager.nodeSelection.getParentNodeCollection(range);
610
615
  if (!originalEvent.ctrlKey && originalEvent.key && (originalEvent.key.length === 1 || originalEvent.action === 'enter') &&
611
- ((selectParentEle[0].tagName === 'VIDEO' || this.isEmbedVidElem(selectParentEle[0]))) &&
616
+ ((!isNOU(selectParentEle[0]) && selectParentEle[0].tagName === 'VIDEO' || this.isEmbedVidElem(selectParentEle[0]))) &&
612
617
  selectParentEle[0].parentElement) {
613
618
  var prev = selectParentEle[0].parentElement.childNodes[0];
614
619
  if (this.contentModule.getEditPanel().querySelector('.e-vid-resize')) {
@@ -1124,7 +1129,7 @@ var Video = /** @class */ (function () {
1124
1129
  videoUrl.appendChild(urlContent);
1125
1130
  this.embedInputUrl = this.parent.createElement('textarea', {
1126
1131
  className: 'e-input e-embed-video-url',
1127
- attrs: { placeholder: 'Paste Embedded Code here', type: 'text', tabindex: '-1', 'aria-label': this.i10n.getConstant('embedVideoLinkHeader') }
1132
+ attrs: { placeholder: this.i10n.getConstant('pasteEmbeddedCodeHere'), type: 'text', tabindex: '-1', 'aria-label': this.i10n.getConstant('embedVideoLinkHeader') }
1128
1133
  });
1129
1134
  this.embedInputUrl.addEventListener('keyup', function () {
1130
1135
  if (!isNOU(_this.embedInputUrl)) {
@@ -1151,7 +1156,7 @@ var Video = /** @class */ (function () {
1151
1156
  }
1152
1157
  });
1153
1158
  var embedUrlBtn = new RadioButton({
1154
- label: 'Embedded Code',
1159
+ label: this.i10n.getConstant('embeddedCode'),
1155
1160
  checked: true,
1156
1161
  name: 'URL',
1157
1162
  created: function () {
@@ -1165,7 +1170,7 @@ var Video = /** @class */ (function () {
1165
1170
  });
1166
1171
  embedUrlBtn.appendTo(videoUrl.querySelector('#embedURL'));
1167
1172
  var webUrlBtn = new RadioButton({
1168
- label: 'Web URL',
1173
+ label: this.i10n.getConstant('webUrl'),
1169
1174
  name: 'URL',
1170
1175
  change: function () {
1171
1176
  urlContent.innerHTML = '';