@syncfusion/ej2-richtexteditor 24.1.46 → 24.2.3

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 (116) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/dist/ej2-richtexteditor.min.js +2 -2
  3. package/dist/ej2-richtexteditor.umd.min.js +2 -2
  4. package/dist/ej2-richtexteditor.umd.min.js.map +1 -1
  5. package/dist/es6/ej2-richtexteditor.es2015.js +760 -168
  6. package/dist/es6/ej2-richtexteditor.es2015.js.map +1 -1
  7. package/dist/es6/ej2-richtexteditor.es5.js +769 -167
  8. package/dist/es6/ej2-richtexteditor.es5.js.map +1 -1
  9. package/dist/global/ej2-richtexteditor.min.js +2 -2
  10. package/dist/global/ej2-richtexteditor.min.js.map +1 -1
  11. package/dist/global/index.d.ts +1 -1
  12. package/package.json +12 -12
  13. package/src/common/constant.d.ts +6 -0
  14. package/src/common/constant.js +6 -0
  15. package/src/common/util.js +31 -20
  16. package/src/editor-manager/base/constant.d.ts +6 -0
  17. package/src/editor-manager/base/constant.js +6 -0
  18. package/src/editor-manager/base/editor-manager.d.ts +5 -0
  19. package/src/editor-manager/base/editor-manager.js +59 -0
  20. package/src/editor-manager/base/interface.d.ts +8 -0
  21. package/src/editor-manager/plugin/dom-node.js +3 -1
  22. package/src/editor-manager/plugin/format-painter-actions.js +1 -1
  23. package/src/editor-manager/plugin/ms-word-clean-up.d.ts +2 -0
  24. package/src/editor-manager/plugin/ms-word-clean-up.js +39 -10
  25. package/src/editor-manager/plugin/selection-commands.js +16 -0
  26. package/src/editor-manager/plugin/table.d.ts +0 -1
  27. package/src/editor-manager/plugin/table.js +14 -26
  28. package/src/editor-manager/plugin/undo.d.ts +1 -0
  29. package/src/editor-manager/plugin/undo.js +21 -1
  30. package/src/rich-text-editor/actions/base-quick-toolbar.js +3 -0
  31. package/src/rich-text-editor/actions/base-toolbar.js +8 -4
  32. package/src/rich-text-editor/actions/count.js +1 -1
  33. package/src/rich-text-editor/actions/dropdown-buttons.js +21 -2
  34. package/src/rich-text-editor/actions/emoji-picker.js +1 -1
  35. package/src/rich-text-editor/actions/full-screen.js +1 -0
  36. package/src/rich-text-editor/actions/html-editor.d.ts +2 -0
  37. package/src/rich-text-editor/actions/html-editor.js +88 -4
  38. package/src/rich-text-editor/actions/keyboard.js +3 -1
  39. package/src/rich-text-editor/actions/paste-clean-up.d.ts +1 -0
  40. package/src/rich-text-editor/actions/paste-clean-up.js +32 -4
  41. package/src/rich-text-editor/actions/toolbar.d.ts +2 -1
  42. package/src/rich-text-editor/base/constant.d.ts +30 -0
  43. package/src/rich-text-editor/base/constant.js +199 -0
  44. package/src/rich-text-editor/base/interface.d.ts +7 -1
  45. package/src/rich-text-editor/base/rich-text-editor.d.ts +1 -0
  46. package/src/rich-text-editor/base/rich-text-editor.js +33 -61
  47. package/src/rich-text-editor/base/util.d.ts +4 -0
  48. package/src/rich-text-editor/base/util.js +35 -1
  49. package/src/rich-text-editor/formatter/formatter.js +15 -4
  50. package/src/rich-text-editor/models/default-locale.js +12 -12
  51. package/src/rich-text-editor/models/items.js +2 -2
  52. package/src/rich-text-editor/renderer/audio-module.d.ts +1 -0
  53. package/src/rich-text-editor/renderer/audio-module.js +13 -0
  54. package/src/rich-text-editor/renderer/dialog-renderer.d.ts +2 -0
  55. package/src/rich-text-editor/renderer/dialog-renderer.js +7 -0
  56. package/src/rich-text-editor/renderer/image-module.d.ts +1 -0
  57. package/src/rich-text-editor/renderer/image-module.js +20 -2
  58. package/src/rich-text-editor/renderer/link-module.js +10 -1
  59. package/src/rich-text-editor/renderer/table-module.d.ts +2 -0
  60. package/src/rich-text-editor/renderer/table-module.js +22 -2
  61. package/src/rich-text-editor/renderer/toolbar-renderer.d.ts +1 -0
  62. package/src/rich-text-editor/renderer/toolbar-renderer.js +25 -3
  63. package/src/rich-text-editor/renderer/video-module.d.ts +1 -0
  64. package/src/rich-text-editor/renderer/video-module.js +21 -4
  65. package/src/rich-text-editor/renderer/view-source.d.ts +1 -0
  66. package/src/rich-text-editor/renderer/view-source.js +5 -0
  67. package/styles/bootstrap-dark.css +49 -12
  68. package/styles/bootstrap.css +49 -12
  69. package/styles/bootstrap4.css +49 -12
  70. package/styles/bootstrap5-dark.css +49 -12
  71. package/styles/bootstrap5.css +49 -12
  72. package/styles/fabric-dark.css +49 -12
  73. package/styles/fabric.css +49 -12
  74. package/styles/fluent-dark.css +49 -12
  75. package/styles/fluent.css +49 -12
  76. package/styles/highcontrast-light.css +49 -12
  77. package/styles/highcontrast.css +49 -12
  78. package/styles/material-dark.css +49 -12
  79. package/styles/material.css +49 -12
  80. package/styles/material3-dark.css +56 -19
  81. package/styles/material3.css +56 -19
  82. package/styles/rich-text-editor/_bootstrap-dark-definition.scss +1 -0
  83. package/styles/rich-text-editor/_bootstrap-definition.scss +1 -0
  84. package/styles/rich-text-editor/_bootstrap4-definition.scss +1 -0
  85. package/styles/rich-text-editor/_bootstrap5-definition.scss +2 -1
  86. package/styles/rich-text-editor/_fabric-dark-definition.scss +1 -0
  87. package/styles/rich-text-editor/_fabric-definition.scss +1 -0
  88. package/styles/rich-text-editor/_fluent-definition.scss +2 -1
  89. package/styles/rich-text-editor/_fusionnew-definition.scss +2 -1
  90. package/styles/rich-text-editor/_highcontrast-definition.scss +1 -0
  91. package/styles/rich-text-editor/_highcontrast-light-definition.scss +1 -0
  92. package/styles/rich-text-editor/_layout.scss +40 -5
  93. package/styles/rich-text-editor/_material-dark-definition.scss +1 -0
  94. package/styles/rich-text-editor/_material-definition.scss +1 -0
  95. package/styles/rich-text-editor/_material3-definition.scss +9 -8
  96. package/styles/rich-text-editor/_tailwind-definition.scss +2 -1
  97. package/styles/rich-text-editor/_theme.scss +9 -5
  98. package/styles/rich-text-editor/bootstrap-dark.css +49 -12
  99. package/styles/rich-text-editor/bootstrap.css +49 -12
  100. package/styles/rich-text-editor/bootstrap4.css +49 -12
  101. package/styles/rich-text-editor/bootstrap5-dark.css +49 -12
  102. package/styles/rich-text-editor/bootstrap5.css +49 -12
  103. package/styles/rich-text-editor/fabric-dark.css +49 -12
  104. package/styles/rich-text-editor/fabric.css +49 -12
  105. package/styles/rich-text-editor/fluent-dark.css +49 -12
  106. package/styles/rich-text-editor/fluent.css +49 -12
  107. package/styles/rich-text-editor/highcontrast-light.css +49 -12
  108. package/styles/rich-text-editor/highcontrast.css +49 -12
  109. package/styles/rich-text-editor/material-dark.css +49 -12
  110. package/styles/rich-text-editor/material.css +49 -12
  111. package/styles/rich-text-editor/material3-dark.css +56 -19
  112. package/styles/rich-text-editor/material3.css +56 -19
  113. package/styles/rich-text-editor/tailwind-dark.css +49 -12
  114. package/styles/rich-text-editor/tailwind.css +49 -12
  115. package/styles/tailwind-dark.css +49 -12
  116. package/styles/tailwind.css +49 -12
@@ -390,7 +390,7 @@ var RichTextEditor = /** @class */ (function (_super) {
390
390
  if (tool.command === 'InsertText') {
391
391
  currentInsertContentLength = value.length;
392
392
  }
393
- var currentLength = this.getText().trim().replace(/(\r\n|\n|\r)/gm, '').replace(/\u200B/g, '').length;
393
+ var currentLength = this.getText().trim().replace(/(\r\n|\n|\r|\t)/gm, '').replace(/\u200B/g, '').length;
394
394
  var selectionLength = this.getSelection().length;
395
395
  var totalLength = (currentLength - selectionLength) + currentInsertContentLength;
396
396
  if (!(this.maxLength === -1 || totalLength <= this.maxLength)) {
@@ -757,7 +757,7 @@ var RichTextEditor = /** @class */ (function (_super) {
757
757
  }
758
758
  if (e.action !== 'insert-link' &&
759
759
  e.action !== 'format-copy' && e.action !== 'format-paste' &&
760
- (!e.target || !(e.target.classList.contains('e-mention') && e.code === 'Tab')) &&
760
+ (!e.target || !(e.target.classList.contains('e-mention') && !isNOU(document.querySelector('#' + e.target.id + '_popup.e-popup-open')) && e.code === 'Tab')) &&
761
761
  (e.action && e.action !== 'paste' && e.action !== 'space'
762
762
  || e.which === 9 || (e.code === 'Backspace' && e.which === 8))) {
763
763
  var FormatPainterEscapeAction = false;
@@ -765,7 +765,12 @@ var RichTextEditor = /** @class */ (function (_super) {
765
765
  FormatPainterEscapeAction = this.formatPainterModule.previousAction === 'escape';
766
766
  }
767
767
  if (!FormatPainterEscapeAction) {
768
- this.formatter.process(this, null, e);
768
+ if (this.editorMode === 'HTML' && (e.action === 'increase-fontsize' || e.action === 'decrease-fontsize')) {
769
+ this.notify(events.onHandleFontsizeChange, { member: 'onHandleFontsizeChange', args: e });
770
+ }
771
+ else {
772
+ this.formatter.process(this, null, e);
773
+ }
769
774
  }
770
775
  switch (e.action) {
771
776
  case 'toolbar-focus':
@@ -791,6 +796,7 @@ var RichTextEditor = /** @class */ (function (_super) {
791
796
  this.setPlaceHolder();
792
797
  }
793
798
  }
799
+ this.notify(events.afterKeyDown, { member: 'afterKeyDown', args: e });
794
800
  this.autoResize();
795
801
  };
796
802
  RichTextEditor.prototype.keyUp = function (e) {
@@ -817,7 +823,7 @@ var RichTextEditor = /** @class */ (function (_super) {
817
823
  var formatPainterCopy = e.key === 'C' && e.altKey && e.shiftKey;
818
824
  var formatPainterPaste = e.key === 'V' && e.altKey && e.shiftKey;
819
825
  if ((!formatPainterCopy && !formatPainterPaste) && ((e.key !== 'shift' && !e.ctrlKey) && e.key && e.key.length === 1 || allowedKeys) || (this.editorMode === 'Markdown'
820
- && ((e.key !== 'shift' && !e.ctrlKey) && e.key && e.key.length === 1 || allowedKeys)) && !this.inlineMode.enable) {
826
+ && ((e.key !== 'shift' && !e.ctrlKey) && e.key && e.key.length === 1 || allowedKeys)) || (this.autoSaveOnIdle && Browser.isDevice) && !this.inlineMode.enable) {
821
827
  this.formatter.onKeyHandler(this, e);
822
828
  }
823
829
  if (this.inputElement && this.inputElement.textContent.length !== 0
@@ -913,60 +919,6 @@ var RichTextEditor = /** @class */ (function (_super) {
913
919
  return;
914
920
  }
915
921
  }
916
- if (e.detail === 3) {
917
- var range = this.getRange();
918
- var selection = this.formatter.editorManager.domNode.getSelection();
919
- // To handle the triple click node selection improper range due to browser behavior.
920
- if (selection.rangeCount > 0 && !isNOU(range.startContainer.parentElement) && (!isNOU(range.startContainer.parentElement.nextSibling) &&
921
- (range.startContainer.parentElement.nextSibling.nodeType !== 3 ||
922
- /\s+$/.test(range.startContainer.parentElement.nextSibling.textContent)) || range.startOffset === range.endOffset)
923
- || range.startContainer.parentElement.tagName.toLocaleLowerCase() === 'li') {
924
- var newRange = new Range();
925
- var start = range.startContainer;
926
- var end = range.endContainer;
927
- var isInvalid = false;
928
- var isInsideList = range.commonAncestorContainer.nodeName === 'OL' || range.commonAncestorContainer.nodeName === 'UL'
929
- || range.commonAncestorContainer.nodeName === 'LI';
930
- if (!isInsideList && end.nodeType === 1 && end.nodeName === 'LI') {
931
- end = closest(end, 'ol, ul').previousElementSibling.lastElementChild;
932
- }
933
- else if (isInsideList && end.nodeType === 1 && range.endOffset === 0) {
934
- if (end.previousElementSibling && end.previousElementSibling.lastElementChild) {
935
- end = end.previousElementSibling.lastElementChild;
936
- }
937
- else {
938
- end = closest(end.parentElement, 'li');
939
- if (end && end.nodeName === 'LI') {
940
- end = end.previousElementSibling;
941
- }
942
- }
943
- }
944
- else {
945
- if (!closest(end, 'li') && end.previousElementSibling && end.previousElementSibling.lastChild &&
946
- end.previousElementSibling.textContent.trim().length > 0) {
947
- end = end.previousElementSibling.lastChild;
948
- }
949
- else if (closest(end, 'li') && end.previousElementSibling && end.previousElementSibling.lastChild) {
950
- end = closest(end, 'li').parentElement.previousElementSibling.lastChild;
951
- }
952
- }
953
- if (!end || end === this.inputElement) {
954
- end = start;
955
- isInvalid = true;
956
- }
957
- while (end.nodeName !== '#text' && !isInvalid) {
958
- if (end.lastElementChild) {
959
- end = end.lastElementChild;
960
- }
961
- else {
962
- end = end.lastChild;
963
- }
964
- }
965
- newRange.setStart(start, 0);
966
- newRange.setEnd(end, end.textContent.length);
967
- this.formatter.editorManager.nodeSelection.setRange(this.contentModule.getDocument(), newRange);
968
- }
969
- }
970
922
  this.notifyMouseUp(e);
971
923
  };
972
924
  /**
@@ -1008,10 +960,10 @@ var RichTextEditor = /** @class */ (function (_super) {
1008
960
  requestType: 'Paste'
1009
961
  };
1010
962
  this.trigger(events.actionBegin, evenArgs, function (pasteArgs) {
1011
- var currentLength = _this.inputElement.textContent.length;
963
+ var currentLength = _this.getText().replace(/(\r\n|\n|\r|\t)/gm, '').replace(/\u200B/g, '').length;
1012
964
  var selectionLength = _this.getSelection().length;
1013
965
  var pastedContentLength = (isNOU(e) || isNOU(e.clipboardData))
1014
- ? 0 : e.clipboardData.getData('text/plain').replace(/(\r\n|\n|\r)/gm, '').replace(/\u200B/g, '').length;
966
+ ? 0 : e.clipboardData.getData('text/plain').replace(/(\r\n|\n|\r|\t)/gm, '').replace(/\u200B/g, '').length;
1015
967
  var totalLength = (currentLength - selectionLength) + pastedContentLength;
1016
968
  if (_this.editorMode === 'Markdown') {
1017
969
  var args_1 = { requestType: 'Paste', editorMode: _this.editorMode, event: e };
@@ -2089,6 +2041,7 @@ var RichTextEditor = /** @class */ (function (_super) {
2089
2041
  addClass([this.element], [classes.CLS_FOCUS]);
2090
2042
  this.preventDefaultResize(e);
2091
2043
  this.notify(events.mouseDown, { args: e });
2044
+ this.formatter.editorManager.observer.notify(events.mouseDown, { args: e });
2092
2045
  this.clickPoints = { clientX: touch.clientX, clientY: touch.clientY };
2093
2046
  };
2094
2047
  RichTextEditor.prototype.preventImgResize = function (e) {
@@ -2250,6 +2203,7 @@ var RichTextEditor = /** @class */ (function (_super) {
2250
2203
  detach(item[i]);
2251
2204
  }
2252
2205
  }
2206
+ this.removeSelectionClassStates(valueElementWrapper);
2253
2207
  return valueElementWrapper.innerHTML;
2254
2208
  };
2255
2209
  RichTextEditor.prototype.updateStatus = function (e) {
@@ -2297,6 +2251,7 @@ var RichTextEditor = /** @class */ (function (_super) {
2297
2251
  }
2298
2252
  if (this.isBlur && isNOU(trg)) {
2299
2253
  removeClass([this.element], [classes.CLS_FOCUS]);
2254
+ this.removeSelectionClassStates(this.inputElement);
2300
2255
  this.notify(events.focusChange, {});
2301
2256
  var value = this.getUpdatedValue();
2302
2257
  this.setProperties({ value: value });
@@ -2463,6 +2418,7 @@ var RichTextEditor = /** @class */ (function (_super) {
2463
2418
  this.on(events.resizeInitialized, this.updateResizeFlag, this);
2464
2419
  this.on(events.updateTbItemsStatus, this.updateStatus, this);
2465
2420
  this.on(events.cleanupResizeElements, this.cleanupResizeElements, this);
2421
+ this.on(events.updateValueOnIdle, this.updateValueOnIdle, this);
2466
2422
  if (this.readonly && this.enabled) {
2467
2423
  return;
2468
2424
  }
@@ -2471,7 +2427,7 @@ var RichTextEditor = /** @class */ (function (_super) {
2471
2427
  RichTextEditor.prototype.restrict = function (e) {
2472
2428
  if (this.maxLength >= 0) {
2473
2429
  var element = this.editorMode === 'Markdown' ? this.contentModule.getText() :
2474
- (e && e.currentTarget.textContent);
2430
+ (this.getText().replace(/(\r\n|\n|\r|\t)/gm, '').replace(/\u200B/g, ''));
2475
2431
  if (!element) {
2476
2432
  return;
2477
2433
  }
@@ -2551,6 +2507,7 @@ var RichTextEditor = /** @class */ (function (_super) {
2551
2507
  this.off(events.resizeInitialized, this.updateResizeFlag);
2552
2508
  this.off(events.updateTbItemsStatus, this.updateStatus);
2553
2509
  this.off(events.cleanupResizeElements, this.cleanupResizeElements);
2510
+ this.off(events.updateValueOnIdle, this.updateValueOnIdle);
2554
2511
  if (this.readonly && this.enabled) {
2555
2512
  return;
2556
2513
  }
@@ -2620,6 +2577,21 @@ var RichTextEditor = /** @class */ (function (_super) {
2620
2577
  }
2621
2578
  }
2622
2579
  };
2580
+ RichTextEditor.prototype.removeSelectionClassStates = function (element) {
2581
+ var classNames = [classes.CLS_IMG_FOCUS, classes.CLS_TABLE_SEL, classes.CLS_VID_FOCUS, classes.CLS_AUD_FOCUS];
2582
+ for (var i = 0; i < classNames.length; i++) {
2583
+ var item = element.querySelectorAll('.' + classNames[i]);
2584
+ removeClass(item, classNames[i]);
2585
+ if (item.length === 0) {
2586
+ continue;
2587
+ }
2588
+ for (var j = 0; j < item.length; j++) {
2589
+ if (item[j].classList.length === 0) {
2590
+ item[j].removeAttribute('class');
2591
+ }
2592
+ }
2593
+ }
2594
+ };
2623
2595
  __decorate([
2624
2596
  Complex({}, ToolbarSettings)
2625
2597
  ], RichTextEditor.prototype, "toolbarSettings", void 0);
@@ -51,6 +51,10 @@ export declare function pageYOffset(e: MouseEvent | Touch, parentElement: HTMLEl
51
51
  * @hidden
52
52
  */
53
53
  export declare function getTooltipText(item: string, serviceLocator: ServiceLocator): string;
54
+ export declare function getTooltipTextDropdownItems(item: string, serviceLocator: ServiceLocator, localeItems: {
55
+ [ket: string]: string;
56
+ }[], rteObj?: IRichTextEditor): string;
57
+ export declare function getQuickToolbarTooltipText(item: string): string;
54
58
  /**
55
59
  * @param {ISetToolbarStatusArgs} e - specifies the e element
56
60
  * @param {boolean} isPopToolbar - specifies the boolean value
@@ -6,7 +6,7 @@ import { Browser, detach, SanitizeHtmlHelper, extend } from '@syncfusion/ej2-bas
6
6
  import * as classes from '../base/classes';
7
7
  import * as CONSTANT from '../base/constant';
8
8
  import * as model from '../models/items';
9
- import { toolsLocale, fontNameLocale, formatsLocale, numberFormatListLocale, bulletFormatListLocale } from '../models/default-locale';
9
+ import { toolsLocale, fontNameLocale, formatsLocale, numberFormatListLocale, bulletFormatListLocale, defaultLocale } from '../models/default-locale';
10
10
  var undoRedoItems = ['Undo', 'Redo'];
11
11
  var inlineNode = ['a', 'abbr', 'acronym', 'audio', 'b', 'bdi', 'bdo', 'big', 'br', 'button',
12
12
  'canvas', 'cite', 'code', 'data', 'datalist', 'del', 'dfn', 'em', 'embed', 'font', 'i', 'iframe', 'img', 'input',
@@ -134,6 +134,40 @@ export function getTooltipText(item, serviceLocator) {
134
134
  var tooltipText = i10n.getConstant(itemLocale);
135
135
  return tooltipText;
136
136
  }
137
+ export function getTooltipTextDropdownItems(item, serviceLocator, localeItems, rteObj) {
138
+ if (localeItems) {
139
+ var i10n = serviceLocator.getService('rteLocale');
140
+ for (var i = 0; i < localeItems.length; i++) {
141
+ var itemLocale = localeItems[i].value.toLocaleLowerCase();
142
+ var numberValue = localeItems[i].locale;
143
+ var numberLocale = defaultLocale["" + numberValue].toLocaleLowerCase();
144
+ if (item === itemLocale || item === numberLocale) {
145
+ var tooltipText = localeItems[i].locale;
146
+ return i10n.getConstant(tooltipText);
147
+ }
148
+ }
149
+ }
150
+ else {
151
+ var fontsize = rteObj.fontSize.items;
152
+ for (var i = 0; i < fontsize.length; i++) {
153
+ if (item === rteObj.fontSize.items[i].value) {
154
+ var fontSize = rteObj.fontSize.items[i].text;
155
+ return fontSize;
156
+ }
157
+ }
158
+ }
159
+ return '';
160
+ }
161
+ export function getQuickToolbarTooltipText(item) {
162
+ var keys = Object.keys(defaultLocale);
163
+ for (var i = 0; i < keys.length; i++) {
164
+ var tooltipText = defaultLocale["" + keys[i]];
165
+ if (item === tooltipText) {
166
+ return tooltipText;
167
+ }
168
+ }
169
+ return '';
170
+ }
137
171
  /**
138
172
  * @param {ISetToolbarStatusArgs} e - specifies the e element
139
173
  * @param {boolean} isPopToolbar - specifies the boolean value
@@ -1,4 +1,4 @@
1
- import { extend, isNullOrUndefined as isNOU, Browser } from '@syncfusion/ej2-base';
1
+ import { extend, isNullOrUndefined as isNOU, Browser, closest } from '@syncfusion/ej2-base';
2
2
  import * as CONSTANT from '../base/constant';
3
3
  import { updateUndoRedoStatus, isIDevice } from '../base/util';
4
4
  import { KEY_DOWN, KEY_UP } from './../../common/constant';
@@ -27,12 +27,21 @@ var Formatter = /** @class */ (function () {
27
27
  var selection = self.contentModule.getDocument().getSelection();
28
28
  var range = (selection.rangeCount > 0) ? selection.getRangeAt(selection.rangeCount - 1) : null;
29
29
  var saveSelection;
30
+ var newRange;
31
+ if (!isNOU(value) && !isNOU(value.selection)) {
32
+ newRange = value.selection.range;
33
+ }
30
34
  var isKeyboardVideoInsert = (!isNOU(value) && !isNOU(value.cssClass) &&
31
35
  value.cssClass !== 'e-video-inline');
32
36
  if (self.editorMode === 'HTML') {
33
37
  if (!isNOU(args) && !isKeyboardVideoInsert) {
34
38
  if (isNOU(args.name) || (!isNOU(args.name) && args.name !== 'showDialog')) {
35
- saveSelection = this.editorManager.nodeSelection.save(range, self.contentModule.getDocument());
39
+ if (newRange) {
40
+ saveSelection = this.editorManager.nodeSelection.save(newRange, self.contentModule.getDocument());
41
+ }
42
+ else {
43
+ saveSelection = this.editorManager.nodeSelection.save(range, self.contentModule.getDocument());
44
+ }
36
45
  }
37
46
  }
38
47
  }
@@ -60,7 +69,7 @@ var Formatter = /** @class */ (function () {
60
69
  if (args.item.command === 'Images' || args.item.command === 'Videos' || args.item.command === 'Table' || args.item.command === 'Files') {
61
70
  currentInsertContentLength = 1;
62
71
  }
63
- var currentLength = self.getText().trim().replace(/(\r\n|\n|\r)/gm, '').replace(/\u200B/g, '').length;
72
+ var currentLength = self.getText().trim().replace(/(\r\n|\n|\r|\t)/gm, '').replace(/\u200B/g, '').length;
64
73
  var selectionLength = self.getSelection().length;
65
74
  var totalLength = (currentLength - selectionLength) + currentInsertContentLength;
66
75
  if (!(self.maxLength === -1 || totalLength <= self.maxLength)) {
@@ -124,7 +133,9 @@ var Formatter = /** @class */ (function () {
124
133
  _this.saveData();
125
134
  }
126
135
  self.isBlur = false;
127
- self.contentModule.getEditPanel().focus();
136
+ if (isNOU(saveSelection) || isNOU(closest(saveSelection.range.startContainer.parentElement, ".e-img-caption")) ? true : !(closest(saveSelection.range.startContainer.parentElement, ".e-img-caption").getAttribute("contenteditable") == "false")) {
137
+ self.contentModule.getEditPanel().focus();
138
+ }
128
139
  if (self.editorMode === 'HTML' && !isKeyboardVideoInsert) {
129
140
  if (isNOU(args.selectType) || (!isNOU(args.selectType) && args.selectType !== 'showDialog')) {
130
141
  saveSelection.restore();
@@ -52,7 +52,7 @@ export var defaultLocale = {
52
52
  'remove': 'Remove',
53
53
  'insertLink': 'Insert Link',
54
54
  'display': 'Display',
55
- 'altText': 'Alternative Text',
55
+ 'altText': 'Alternative text',
56
56
  'dimension': 'Change Size',
57
57
  'fullscreen': 'Maximize',
58
58
  'maximize': 'Maximize',
@@ -65,12 +65,12 @@ export var defaultLocale = {
65
65
  'preview': 'Preview',
66
66
  'viewside': 'ViewSide',
67
67
  'insertCode': 'Insert Code',
68
- 'linkText': 'Display Text',
68
+ 'linkText': 'Display text',
69
69
  'linkTooltipLabel': 'Title',
70
- 'linkWebUrl': 'Web Address',
70
+ 'linkWebUrl': 'Web address',
71
71
  'linkTitle': 'Enter a title',
72
72
  'linkurl': 'http://example.com',
73
- 'linkOpenInNewWindow': 'Open Link in New Window',
73
+ 'linkOpenInNewWindow': 'Open link in new window',
74
74
  'linkHeader': 'Insert Link',
75
75
  'dialogInsert': 'Insert',
76
76
  'dialogCancel': 'Cancel',
@@ -104,8 +104,8 @@ export var defaultLocale = {
104
104
  'imageWidth': 'Width',
105
105
  'videoHeight': 'Height',
106
106
  'videoWidth': 'Width',
107
- 'textPlaceholder': 'Enter Text',
108
- 'inserttablebtn': 'Insert Table',
107
+ 'textPlaceholder': 'Enter text',
108
+ 'inserttablebtn': 'Insert table',
109
109
  'tabledialogHeader': 'Insert Table',
110
110
  'tableWidth': 'Width',
111
111
  'cellpadding': 'Cell Padding',
@@ -115,7 +115,7 @@ export var defaultLocale = {
115
115
  'tableRows': 'Table Rows',
116
116
  'tableColumns': 'Table Columns',
117
117
  'tableCellHorizontalAlign': 'Table Cell Horizontal Align',
118
- 'tableCellVerticalAlign': 'Table Cell Vertical Align',
118
+ 'tableCellVerticalAlign': 'Table Vertical Align',
119
119
  'createTable': 'Create Table',
120
120
  'removeTable': 'Remove Table',
121
121
  'tableHeader': 'Table Header',
@@ -193,8 +193,8 @@ export var defaultLocale = {
193
193
  'bulletFormatListNone': 'None',
194
194
  'formatPainter': 'Format Painter',
195
195
  'emojiPicker': 'Emoji Picker',
196
- 'embeddedCode': 'Embedded Code',
197
- 'pasteEmbeddedCodeHere': 'Paste Embedded Code here',
196
+ 'embeddedCode': 'Embedded code',
197
+ 'pasteEmbeddedCodeHere': 'Paste embedded code here',
198
198
  'emojiPickerTypeToFind': 'Type to find',
199
199
  'emojiPickerNoResultFound': 'No results found',
200
200
  'emojiPickerTrySomethingElse': 'Try something else',
@@ -254,7 +254,7 @@ export var toolsLocale = {
254
254
  'remove': 'remove',
255
255
  'insertlink': 'insertLink',
256
256
  'display': 'display',
257
- 'alttext': 'altText',
257
+ 'alttext': 'alternateHeader',
258
258
  'dimension': 'dimension',
259
259
  'fullscreen': 'fullscreen',
260
260
  'maximize': 'maximize',
@@ -289,8 +289,8 @@ export var toolsLocale = {
289
289
  'deleterow': 'deleteRow',
290
290
  'formatpainter': 'formatPainter',
291
291
  'emojipicker': 'emojiPicker',
292
- 'embeddedCode': 'Embedded Code',
293
- 'pasteEmbeddedCodeHere': 'Paste Embedded Code here',
292
+ 'embeddedCode': 'Embedded code',
293
+ 'pasteEmbeddedCodeHere': 'Paste embedded code here',
294
294
  'emojiPickerTypeToFind': 'Type to find',
295
295
  'emojiPickerNoResultFound': 'No results found',
296
296
  'emojiPickerTrySomethingElse': 'Try something else',
@@ -457,14 +457,14 @@ export var tools = {
457
457
  'sourcecode': {
458
458
  'id': 'SourceCode',
459
459
  'icon': 'e-source-code',
460
- 'tooltip': 'Source Code',
460
+ 'tooltip': 'Code View (Ctrl+Shift+H)',
461
461
  'command': 'SourceCode',
462
462
  'subCommand': 'SourceCode'
463
463
  },
464
464
  'preview': {
465
465
  'id': 'Preview',
466
466
  'icon': 'e-preview',
467
- 'tooltip': 'Preview',
467
+ 'tooltip': 'Preview (Ctrl+Shift+H)',
468
468
  'command': 'Preview',
469
469
  'subCommand': 'Preview'
470
470
  },
@@ -34,6 +34,7 @@ export declare class Audio {
34
34
  private onToolbarAction;
35
35
  private onKeyUp;
36
36
  private onKeyDown;
37
+ private handleSelectAll;
37
38
  private openDialog;
38
39
  private showDialog;
39
40
  private closeDialog;
@@ -239,6 +239,13 @@ var Audio = /** @class */ (function () {
239
239
  originalEvent.preventDefault();
240
240
  break;
241
241
  }
242
+ if (originalEvent.ctrlKey && originalEvent.key === 'a') {
243
+ this.handleSelectAll();
244
+ }
245
+ };
246
+ Audio.prototype.handleSelectAll = function () {
247
+ var audioFocusNodes = this.parent.inputElement.querySelectorAll('.' + classes.CLS_AUD_FOCUS);
248
+ removeClass(audioFocusNodes, classes.CLS_AUD_FOCUS);
242
249
  };
243
250
  Audio.prototype.openDialog = function (isInternal, event, selection, ele, parentEle) {
244
251
  var range;
@@ -379,6 +386,7 @@ var Audio = /** @class */ (function () {
379
386
  if (e.offsetX > e.target.clientWidth || e.offsetY > e.target.clientHeight) {
380
387
  }
381
388
  else {
389
+ this.parent.notify(events.documentClickClosedBy, { closedBy: "outside click" });
382
390
  this.dialogObj.hide({ returnValue: true });
383
391
  this.parent.isBlur = true;
384
392
  dispatchEvent(this.parent.element, 'focusout');
@@ -640,6 +648,11 @@ var Audio = /** @class */ (function () {
640
648
  }
641
649
  }
642
650
  });
651
+ if (e.selectNode && this.isAudioElem(e.selectNode[0])) {
652
+ var regex = new RegExp(/([^\S]|^)(((https?\:\/\/)|(www\.))(\S+))/gi);
653
+ var sourceElement = e.selectNode[0].querySelector('source');
654
+ this.inputUrl.value = sourceElement.src.match(regex) ? sourceElement.src : '';
655
+ }
643
656
  audioUrl.appendChild(this.inputUrl);
644
657
  return audioUrl;
645
658
  };
@@ -7,6 +7,7 @@ export declare class DialogRenderer {
7
7
  dialogObj: Dialog;
8
8
  private dialogEle;
9
9
  private parent;
10
+ private outsideClickClosedBy;
10
11
  constructor(parent?: IRichTextEditor);
11
12
  protected addEventListener(): void;
12
13
  protected removeEventListener(): void;
@@ -23,6 +24,7 @@ export declare class DialogRenderer {
23
24
  private handleEnterKeyDown;
24
25
  private beforeOpenCallback;
25
26
  private open;
27
+ private documentClickClosedBy;
26
28
  private beforeClose;
27
29
  private getDialogPosition;
28
30
  /**
@@ -15,6 +15,7 @@ var DialogRenderer = /** @class */ (function () {
15
15
  }
16
16
  this.parent.on(events.moduleDestroy, this.moduleDestroy, this);
17
17
  this.parent.on(events.destroy, this.removeEventListener, this);
18
+ this.parent.on(events.documentClickClosedBy, this.documentClickClosedBy, this);
18
19
  };
19
20
  DialogRenderer.prototype.removeEventListener = function () {
20
21
  if (this.parent.isDestroyed) {
@@ -22,6 +23,7 @@ var DialogRenderer = /** @class */ (function () {
22
23
  }
23
24
  this.parent.off(events.destroy, this.removeEventListener);
24
25
  this.parent.off(events.moduleDestroy, this.moduleDestroy);
26
+ this.parent.off(events.documentClickClosedBy, this.documentClickClosedBy);
25
27
  };
26
28
  /**
27
29
  * dialog render method
@@ -68,10 +70,14 @@ var DialogRenderer = /** @class */ (function () {
68
70
  DialogRenderer.prototype.open = function (args) {
69
71
  this.parent.trigger(events.dialogOpen, args);
70
72
  };
73
+ DialogRenderer.prototype.documentClickClosedBy = function (args) {
74
+ this.outsideClickClosedBy = args.closedBy;
75
+ };
71
76
  DialogRenderer.prototype.beforeClose = function (args) {
72
77
  if (this.dialogEle) {
73
78
  this.dialogEle.removeEventListener('keydown', this.handleEnterKeyDown);
74
79
  }
80
+ args.closedBy = this.outsideClickClosedBy === 'outside click' ? this.outsideClickClosedBy : args.closedBy;
75
81
  this.parent.trigger(events.beforeDialogClose, args, function (closeArgs) {
76
82
  if (!closeArgs.cancel) {
77
83
  if (closeArgs.container.classList.contains('e-popup-close')) {
@@ -79,6 +85,7 @@ var DialogRenderer = /** @class */ (function () {
79
85
  }
80
86
  }
81
87
  });
88
+ this.outsideClickClosedBy = "";
82
89
  };
83
90
  DialogRenderer.prototype.getDialogPosition = function () {
84
91
  var distanceFromVisibleTop = this.parent.element.getBoundingClientRect().top;
@@ -67,6 +67,7 @@ export declare class Image {
67
67
  private editImgLink;
68
68
  private removeImgLink;
69
69
  private onKeyDown;
70
+ private handleSelectAll;
70
71
  private openDialog;
71
72
  private showDialog;
72
73
  private closeDialog;
@@ -725,6 +725,14 @@ var Image = /** @class */ (function () {
725
725
  originalEvent.preventDefault();
726
726
  break;
727
727
  }
728
+ if (originalEvent.ctrlKey && originalEvent.key === 'a') {
729
+ this.handleSelectAll();
730
+ }
731
+ };
732
+ Image.prototype.handleSelectAll = function () {
733
+ this.cancelResizeAction();
734
+ var imgFocusNodes = this.parent.inputElement.querySelectorAll('.' + classes.CLS_IMG_FOCUS);
735
+ removeClass(imgFocusNodes, classes.CLS_IMG_FOCUS);
728
736
  };
729
737
  Image.prototype.openDialog = function (isInternal, event, selection, ele, parentEle) {
730
738
  var range;
@@ -894,10 +902,12 @@ var Image = /** @class */ (function () {
894
902
  _this.parent.formatter.editorManager.nodeSelection.Clear(_this.contentModule.getDocument());
895
903
  _this.parent.formatter.editorManager.nodeSelection.setSelectionContents(_this.contentModule.getDocument(), target);
896
904
  _this.quickToolObj.imageQTBar.showPopup(args.pageX, pageY, target);
905
+ _this.resizeStart(e.args, target);
897
906
  }, 400);
898
907
  }
899
908
  else {
900
- this.quickToolObj.imageQTBar.showPopup(args.pageX, pageY, target);
909
+ var coordinates = target.getBoundingClientRect();
910
+ this.quickToolObj.imageQTBar.showPopup(coordinates.left, coordinates.top, target, 'Image');
901
911
  }
902
912
  }
903
913
  };
@@ -1361,7 +1371,7 @@ var Image = /** @class */ (function () {
1361
1371
  isModal: Browser.isDevice,
1362
1372
  buttons: [{
1363
1373
  click: this.insertImageUrl.bind(selectObj),
1364
- buttonModel: { content: imgInsert, cssClass: 'e-flat e-insertImage' + this.parent.getCssClass(true), isPrimary: true, disabled: true }
1374
+ buttonModel: { content: imgInsert, cssClass: 'e-flat e-insertImage' + this.parent.getCssClass(true), isPrimary: true, disabled: this.parent.editorMode === 'Markdown' ? false : true }
1365
1375
  },
1366
1376
  {
1367
1377
  click: function (e) {
@@ -1467,6 +1477,7 @@ var Image = /** @class */ (function () {
1467
1477
  if (e.offsetX > e.target.clientWidth || e.offsetY > e.target.clientHeight) {
1468
1478
  }
1469
1479
  else {
1480
+ this.parent.notify(events.documentClickClosedBy, { closedBy: "outside click" });
1470
1481
  this.dialogObj.hide({ returnValue: true });
1471
1482
  this.parent.isBlur = true;
1472
1483
  dispatchEvent(this.parent.element, 'focusout');
@@ -1528,6 +1539,10 @@ var Image = /** @class */ (function () {
1528
1539
  }
1529
1540
  }
1530
1541
  });
1542
+ if (e.selectNode && e.selectNode[0].nodeName === 'IMG') {
1543
+ var regex = new RegExp(/([^\S]|^)(((https?\:\/\/)|(www\.))(\S+))/gi);
1544
+ this.inputUrl.value = e.selectNode[0].src.match(regex) ? e.selectNode[0].src : '';
1545
+ }
1531
1546
  imgUrl.appendChild(this.inputUrl);
1532
1547
  return imgUrl;
1533
1548
  };
@@ -1536,6 +1551,9 @@ var Image = /** @class */ (function () {
1536
1551
  var proxy = this.selfImage;
1537
1552
  proxy.isImgUploaded = false;
1538
1553
  var url = proxy.inputUrl.value;
1554
+ if (proxy.parent.editorMode === 'Markdown' && url === '') {
1555
+ url = 'http://';
1556
+ }
1539
1557
  if (proxy.parent.formatter.getUndoRedoStack().length === 0) {
1540
1558
  proxy.parent.formatter.saveData();
1541
1559
  }
@@ -386,12 +386,20 @@ var Link = /** @class */ (function () {
386
386
  }
387
387
  var target = (this.selfLink.checkBoxObj.checked) ? '_blank' : null;
388
388
  var linkLabel = (this.selfLink.checkBoxObj.checked) ? this.selfLink.i10n.getConstant('linkAriaLabel') : null;
389
+ if (this.selfLink.parent.editorMode === 'Markdown' && linkUrl === '') {
390
+ linkUrl = 'http://';
391
+ }
389
392
  if (linkUrl === '') {
390
393
  this.selfLink.checkUrl(true);
391
394
  return;
392
395
  }
393
396
  if (!this.selfLink.isUrl(linkUrl)) {
394
- linkText = (linkText === '') ? linkUrl : linkText;
397
+ if (this.selfLink.parent.editorMode === 'Markdown') {
398
+ linkText = (linkText !== '') ? linkText : '';
399
+ }
400
+ else {
401
+ linkText = (linkText === '') ? linkUrl : linkText;
402
+ }
395
403
  if (!this.selfLink.parent.enableAutoUrl) {
396
404
  linkUrl = linkUrl.indexOf('http') > -1 ? linkUrl : 'http://' + linkUrl;
397
405
  }
@@ -532,6 +540,7 @@ var Link = /** @class */ (function () {
532
540
  this.parent.inlineMode.enable && !closest(target, '#' + this.dialogObj.element.id)) &&
533
541
  !closest(target, '#' + this.parent.getID() + '_toolbar_CreateLink') &&
534
542
  !target.querySelector('#' + this.parent.getID() + '_toolbar_CreateLink')))) {
543
+ this.parent.notify(events.documentClickClosedBy, { closedBy: "outside click" });
535
544
  this.dialogObj.hide({ returnValue: true });
536
545
  EventHandler.remove(this.parent.element.ownerDocument, 'mousedown', this.onDocumentClick);
537
546
  this.parent.isBlur = true;
@@ -46,6 +46,7 @@ export declare class Table {
46
46
  private UpdateCells;
47
47
  private keyUp;
48
48
  private keyDown;
49
+ private handleSelectAll;
49
50
  private tableModulekeyUp;
50
51
  private openDialog;
51
52
  private showDialog;
@@ -120,4 +121,5 @@ export declare class Table {
120
121
  * @returns {void}
121
122
  */
122
123
  private getModuleName;
124
+ private afterKeyDown;
123
125
  }