@syncfusion/ej2-richtexteditor 23.2.7-52849 → 24.1.41-569781

package/src/rich-text-editor/actions/html-editor.js

@@ -14,6 +14,7 @@ import { getTextNodesUnder, sanitizeHelper, getDefaultValue } from '../base/util
 import { isIDevice } from '../../common/util';
 import { XhtmlValidation } from './xhtml-validation';
 import { ON_BEGIN } from './../../common/constant';
+import * as CONSTANT from '../base/constant';
 /**
  * `HtmlEditor` module is used to HTML editor
  */
@@ -70,6 +71,7 @@ var HtmlEditor = /** @class */ (function () {
         this.parent.on(events.readOnlyMode, this.updateReadOnly, this);
         this.parent.on(events.paste, this.onPaste, this);
         this.parent.on(events.tableclass, this.isTableClassAdded, this);
+        this.parent.on(events.onHandleFontsizeChange, this.onHandleFontsizeChange, this);
     };
     HtmlEditor.prototype.updateReadOnly = function () {
         if (this.parent.readonly) {
@@ -88,7 +90,9 @@ var HtmlEditor = /** @class */ (function () {
     };
     HtmlEditor.prototype.onSelectionRestore = function (e) {
         this.parent.isBlur = false;
-        this.contentRenderer.getEditPanel().focus();
+        if (isNOU(this.saveSelection) || isNOU(closest(this.saveSelection.range.startContainer.parentElement, ".e-img-caption")) ? true : !(closest(this.saveSelection.range.startContainer.parentElement, ".e-img-caption").getAttribute("contenteditable") == "false")) {
+            this.contentRenderer.getEditPanel().focus();
+        }
         if (isNullOrUndefined(e.items) || e.items) {
             this.saveSelection.restore();
         }
@@ -96,11 +100,91 @@ var HtmlEditor = /** @class */ (function () {
     HtmlEditor.prototype.isTableClassAdded = function () {
         var tableElement = this.parent.inputElement.querySelectorAll('table');
         for (var i = 0; i < tableElement.length; i++) {
-            if (!tableElement[i].classList.contains('e-rte-table')) {
+            if (!tableElement[i].classList.contains('e-rte-table') && !tableElement[i].classList.contains('e-rte-paste-table')) {
                 tableElement[i].classList.add('e-rte-table');
             }
         }
     };
+    HtmlEditor.prototype.onHandleFontsizeChange = function (e) {
+        var keyboardArgs = e.args;
+        var args = { name: 'dropDownSelect' };
+        args.item = {
+            command: 'Font',
+            subCommand: 'FontSize'
+        };
+        var items = this.parent.fontSize.items;
+        var activeElem;
+        if (this.parent.toolbarModule && this.parent.toolbarModule.dropDownModule &&
+            this.parent.toolbarModule.dropDownModule.fontSizeDropDown && !isNOU(this.parent.toolbarModule.dropDownModule.fontSizeDropDown.activeElem[0].textContent) && this.parent.toolbarModule.dropDownModule.fontSizeDropDown.activeElem[0].textContent !== '') {
+            activeElem = this.parent.toolbarModule.dropDownModule.fontSizeDropDown.activeElem[0].textContent;
+        }
+        else {
+            var fontSizeValue = void 0;
+            var selection = this.parent.contentModule.getDocument().getSelection();
+            if (selection && selection.focusNode && selection.focusNode.parentElement) {
+                fontSizeValue = document.defaultView.getComputedStyle(selection.focusNode.parentElement, null).getPropertyValue('font-size');
+            }
+            else {
+                fontSizeValue = this.parent.fontSize.width;
+            }
+            fontSizeValue = isNOU(fontSizeValue) ? this.parent.fontSize.width : fontSizeValue;
+            var actualTxtFontValues = fontSizeValue.match(/^([\d.]+)(\D+)$/);
+            var size_1 = parseInt(actualTxtFontValues[1], 10);
+            var unit = actualTxtFontValues[2];
+            var defaultFontValues = items[0].value.match(/^([\d.]+)(\D+)$/);
+            if (defaultFontValues[2] === unit) {
+                var index = items.findIndex(function (_a) {
+                    var value = _a.value;
+                    return parseInt(value, 10) >= size_1;
+                });
+                activeElem = items[index].text;
+            }
+            else {
+                var convertedSize_1 = this.convertFontSize(size_1, unit, defaultFontValues[2]);
+                var index = items.findIndex(function (_a) {
+                    var value = _a.value;
+                    return parseInt(value, 10) >= convertedSize_1;
+                });
+                activeElem = items[index].text;
+            }
+        }
+        var fontIndex = items.findIndex(function (size) { return size.text === activeElem; });
+        if (keyboardArgs.action === 'increase-fontsize' && fontIndex !== -1) {
+            if (fontIndex >= items.length - 1) {
+                var fontValues = items[fontIndex].value.match(/^([\d.]+)(\D+)$/);
+                if (fontValues) {
+                    var size = parseInt(fontValues[1], 10);
+                    var unit = fontValues[2];
+                    var roundedSize = size % 10 === 0 ? Math.ceil((size + 1) / 10) * 10 : Math.ceil(size / 10) * 10;
+                    args.item.value = roundedSize.toLocaleString() + unit;
+                    args.item.text = roundedSize.toLocaleString() + ' ' + unit;
+                }
+                this.parent.fontSize.items.push(args.item);
+            }
+            else {
+                args.item.value = items[fontIndex + 1].value;
+                args.item.text = items[fontIndex + 1].text;
+            }
+        }
+        else if (keyboardArgs.action === 'decrease-fontsize' && fontIndex !== -1 && fontIndex > 0) {
+            args.item.value = items[fontIndex - 1].value;
+            args.item.text = items[fontIndex - 1].text;
+        }
+        else {
+            if (fontIndex >= 0 && fontIndex < items.length && items[fontIndex]) {
+                args.item.value = items[fontIndex].value;
+                args.item.text = items[fontIndex].text;
+            }
+        }
+        this.parent.formatter.process(this.parent, args, keyboardArgs);
+    };
+    HtmlEditor.prototype.convertFontSize = function (value, originalUnit, targetUnit) {
+        if (CONSTANT.supportedUnits.indexOf(originalUnit) !== -1 || CONSTANT.supportedUnits.indexOf(targetUnit) !== -1) {
+            originalUnit = 'px';
+        }
+        var convertedValue = value * CONSTANT.conversionFactors[originalUnit][targetUnit];
+        return convertedValue;
+    };
     HtmlEditor.prototype.onKeyUp = function (e) {
         var args = e.args;
         var restrictKeys = [8, 9, 13, 16, 17, 18, 20, 27, 37, 38, 39, 40, 44, 45, 46, 91,
@@ -108,9 +192,12 @@ var HtmlEditor = /** @class */ (function () {
         var range = this.parent.getRange();
         // eslint-disable-next-line
         var regEx = new RegExp(String.fromCharCode(8203), 'g');
+        var isEmptyNode = range.startContainer === range.endContainer && range.startOffset === range.endOffset &&
+            range.startOffset === 1 && range.startContainer.textContent.length === 1 && range.startContainer.textContent.charCodeAt(0) == 8203 &&
+            range.startContainer.textContent.replace(regEx, '').length === 0;
         var pointer;
         var isRootParent = false;
-        if (restrictKeys.indexOf(args.keyCode) < 0 && !args.shiftKey && !args.ctrlKey && !args.altKey) {
+        if (restrictKeys.indexOf(args.keyCode) < 0 && !args.shiftKey && !args.ctrlKey && !args.altKey && !isEmptyNode) {
             pointer = range.startOffset;
             // eslint-disable-next-line @typescript-eslint/no-unused-expressions
             range.startContainer.nodeName === '#text' ? range.startContainer.parentElement !== this.parent.inputElement ? range.startContainer.parentElement.classList.add('currentStartMark')
@@ -222,7 +309,7 @@ var HtmlEditor = /** @class */ (function () {
             e.args.keyCode === 13) {
             this.spaceLink(e.args);
             if (this.parent.editorMode === 'HTML' && !this.parent.readonly) {
-                var currentLength = this.parent.getText().trim().length;
+                var currentLength = this.parent.getText().trim().replace(/(\r\n|\n|\r|\t)/gm, '').replace(/\u200B/g, '').length;
                 var selectionLength = this.parent.getSelection().length;
                 var totalLength = (currentLength - selectionLength) + 1;
                 if (!(this.parent.maxLength === -1 || totalLength <= this.parent.maxLength) &&
@@ -232,6 +319,15 @@ var HtmlEditor = /** @class */ (function () {
                 }
                 else {
                     this.parent.notify(events.enterHandler, { args: e.args });
+                    var newRange = this.parent.getRange();
+                    if (!isNullOrUndefined(newRange.startContainer) && this.parent.height !== 'auto' && newRange.startContainer.nodeName !== '#text'
+                        && !this.parent.iframeSettings.enable && newRange.startContainer.getBoundingClientRect().bottom > this.parent.element.getBoundingClientRect().bottom) {
+                        this.parent.element.querySelector('.e-rte-content').scrollTop += newRange.startContainer.getBoundingClientRect().bottom - this.parent.element.getBoundingClientRect().bottom;
+                    }
+                    else if (!isNullOrUndefined(newRange.startContainer) && this.parent.height === 'auto' && newRange.startContainer.nodeName !== '#text'
+                        && !this.parent.iframeSettings.enable && window.innerHeight < newRange.startContainer.getBoundingClientRect().top) {
+                        newRange.startContainer.scrollIntoView({ block: 'end', inline: 'nearest' });
+                    }
                 }
             }
         }
@@ -312,11 +408,13 @@ var HtmlEditor = /** @class */ (function () {
             currentRange.startContainer.previousSibling.nodeName === 'SPAN') {
             isPreviousNotContentEditable = currentRange.startContainer.previousSibling.contentEditable === 'false' ? false : true;
         }
+        var checkNode = currentRange.startContainer.nodeName === '#text' ? currentRange.startContainer.parentElement : currentRange.startContainer;
+        var isSelectedPositionNotStart = closest(currentRange.startContainer.nodeName === '#text' ? currentRange.startContainer.parentElement : currentRange.startContainer, 'li') ?
+            checkNode.nodeName !== 'li' && isNOU(checkNode.previousSibling) : true;
         if (e.args.code === 'Backspace' && e.args.keyCode === 8 && currentRange.startOffset === 0 &&
             currentRange.endOffset === 0 && this.parent.getSelection().length === 0 && currentRange.startContainer.textContent.length > 0 &&
             currentRange.startContainer.parentElement.tagName !== 'TD' && currentRange.startContainer.parentElement.tagName !== 'TH' &&
-            isPreviousNotContentEditable) {
-            var checkNode = currentRange.startContainer.nodeName === '#text' ? currentRange.startContainer.parentElement : currentRange.startContainer;
+            isPreviousNotContentEditable && isSelectedPositionNotStart) {
             if ((!this.parent.formatter.editorManager.domNode.isBlockNode(checkNode) &&
                 !isNOU(checkNode.previousSibling) && checkNode.previousSibling.nodeName === 'BR') ||
                 (!isNOU(currentRange.startContainer.previousSibling) && currentRange.startContainer.previousSibling.nodeName === 'BR')) {
@@ -327,8 +425,9 @@ var HtmlEditor = /** @class */ (function () {
                 var liElement = this.getRangeLiNode(currentRange.startContainer);
                 if (liElement.previousElementSibling && liElement.previousElementSibling.childElementCount > 0) {
                     this.oldRangeElement = liElement.previousElementSibling.lastElementChild.nodeName === 'BR' ?
-                        liElement.previousElementSibling : liElement.previousElementSibling.lastElementChild;
-                    if (!isNullOrUndefined(liElement.lastElementChild) && liElement.lastElementChild.nodeName !== 'BR') {
+                        liElement.previousElementSibling : liElement.previousElementSibling.lastChild;
+                    if (!isNOU(liElement.lastElementChild) && liElement.lastElementChild.nodeName !== 'BR' &&
+                        isNOU(liElement.lastElementChild.previousSibling) && liElement.lastChild.nodeName !== "#text") {
                         this.rangeElement = liElement.lastElementChild;
                         isLiElement = true;
                     }
@@ -338,13 +437,13 @@ var HtmlEditor = /** @class */ (function () {
                 }
             }
             else if (this.rangeElement === this.parent.inputElement || this.rangeElement.tagName === 'TABLE' ||
-                (!isNullOrUndefined(this.rangeElement.previousElementSibling) && this.rangeElement.previousElementSibling.tagName === 'TABLE')) {
+                (!isNOU(this.rangeElement.previousElementSibling) && this.rangeElement.previousElementSibling.tagName === 'TABLE')) {
                 return;
             }
             else {
                 this.oldRangeElement = this.rangeElement.previousElementSibling;
             }
-            if (isNullOrUndefined(this.oldRangeElement)) {
+            if (isNOU(this.oldRangeElement)) {
                 return;
             }
             else {
@@ -353,7 +452,7 @@ var HtmlEditor = /** @class */ (function () {
                         ? this.oldRangeElement.lastElementChild.lastElementChild :
                         this.oldRangeElement.lastElementChild;
                 }
-                var lastNode = this.oldRangeElement.lastChild;
+                var lastNode = this.oldRangeElement.lastChild ? this.oldRangeElement.lastChild : this.oldRangeElement;
                 while (lastNode.nodeType !== 3 && lastNode.nodeName !== '#text' &&
                     lastNode.nodeName !== 'BR') {
                     lastNode = lastNode.lastChild;
@@ -361,12 +460,17 @@ var HtmlEditor = /** @class */ (function () {
                 this.parent.formatter.editorManager.nodeSelection.setCursorPoint(this.parent.contentModule.getDocument(), 
                 // eslint-disable-next-line
                 lastNode, lastNode.textContent.length);
-                if (this.oldRangeElement.querySelectorAll('BR').length === 1) {
+                if (this.oldRangeElement.nodeName !== '#text' && this.oldRangeElement.querySelectorAll('BR').length === 1) {
                     detach(this.oldRangeElement.querySelector('BR'));
                 }
-                if (!isNullOrUndefined(this.rangeElement) && this.oldRangeElement !== this.rangeElement) {
+                if (!isNOU(this.rangeElement) && this.oldRangeElement !== this.rangeElement) {
                     while (this.rangeElement.firstChild) {
-                        this.oldRangeElement.appendChild(this.rangeElement.childNodes[0]);
+                        if (this.oldRangeElement.nodeName === '#text') {
+                            this.oldRangeElement.parentElement.appendChild(this.rangeElement.childNodes[0]);
+                        }
+                        else {
+                            this.oldRangeElement.appendChild(this.rangeElement.childNodes[0]);
+                        }
                     }
                     // eslint-disable-next-line
                     !isLiElement ? detach(this.rangeElement) : detach(this.rangeElement.parentElement);
@@ -380,7 +484,7 @@ var HtmlEditor = /** @class */ (function () {
         var liElement;
         var rootElement;
         if (e.args.code === 'Delete' && e.args.keyCode === 46 &&
-            this.parent.contentModule.getText().trim().length !== 0 && this.parent.getSelection().length === 0 && currentRange.startContainer.parentElement.tagName !== 'TD' &&
+            this.parent.contentModule.getText().trim().replace(/(\r\n|\n|\r|\t)/gm, '').replace(/\u200B/g, '').length !== 0 && this.parent.getSelection().length === 0 && currentRange.startContainer.parentElement.tagName !== 'TD' &&
             currentRange.startContainer.parentElement.tagName !== 'TH') {
             this.deleteRangeElement = rootElement = this.getRootBlockNode(currentRange.startContainer);
             if (this.deleteRangeElement.tagName === 'OL' || this.deleteRangeElement.tagName === 'UL') {
@@ -403,7 +507,11 @@ var HtmlEditor = /** @class */ (function () {
                 (!isNullOrUndefined(this.deleteRangeElement.nextElementSibling) && this.deleteRangeElement.nextElementSibling.tagName === 'TABLE'))) {
                 return;
             }
-            if (this.getCaretIndex(currentRange, this.deleteRangeElement) === this.deleteRangeElement.textContent.length) {
+            var isImgWithEmptyBlockNode = false;
+            if (this.deleteRangeElement.querySelectorAll('img').length > 0 && this.deleteRangeElement.textContent.trim() === '') {
+                isImgWithEmptyBlockNode = true;
+            }
+            if (this.getCaretIndex(currentRange, this.deleteRangeElement) === this.deleteRangeElement.textContent.length && !isImgWithEmptyBlockNode) {
                 if (!isNullOrUndefined(liElement)) {
                     if (isLiElement || !isNullOrUndefined(liElement.nextElementSibling)) {
                         this.deleteOldRangeElement = this.getRangeElement(liElement.nextElementSibling);
@@ -550,7 +658,7 @@ var HtmlEditor = /** @class */ (function () {
                 for (var j = 0; j < splitTextContent.length; j++) {
                     if (splitTextContent[j].match(httpRegex) || splitTextContent[j].match(wwwRegex)) {
                         resultSplitContent += '<a class="e-rte-anchor" href="' + splitTextContent[j] +
-                            '" title="' + splitTextContent[j] + '"target="_blank">' + splitTextContent[j] + ' </a>';
+                            '" title="' + splitTextContent[j] + '" target="_blank"' + ' aria-label="' + this.parent.serviceLocator.getService('rteLocale').getConstant("linkAriaLabel") + '">' + splitTextContent[j] + ' </a>';
                     }
                     else {
                         resultSplitContent += splitTextContent[j] + ' ';
@@ -602,6 +710,8 @@ var HtmlEditor = /** @class */ (function () {
         var selectParentEle;
         var item = args.item;
         var closestElement = closest(args.originalEvent.target, '.e-rte-quick-popup');
+        var target = args.originalEvent.target;
+        this.parent.notify(events.closeTooltip, { target: target });
         if (item.command !== 'FormatPainter') {
             if (closestElement && !closestElement.classList.contains('e-rte-inline-popup') && !closestElement.classList.contains('e-rte-text-popup')) {
                 if (!(item.subCommand === 'SourceCode' || item.subCommand === 'Preview' ||

package/src/rich-text-editor/actions/keyboard.js

@@ -65,7 +65,9 @@ var keyCode = {
     'singlequote': 222,
     ']': 221,
     '[': 219,
-    '=': 187
+    '=': 187,
+    '<': 188,
+    '>': 190
 };
 /**
  * KeyboardEvents class enables you to bind key action desired key combinations for ex., Ctrl+A, Delete, Alt+Space etc.

package/src/rich-text-editor/actions/markdown-editor.js

@@ -74,7 +74,9 @@ var MarkdownEditor = /** @class */ (function () {
     MarkdownEditor.prototype.onToolbarClick = function (args) {
         var item = args.item;
         var textArea = this.parent.contentModule.getEditPanel();
-        textArea.focus();
+        if (item.command !== 'Formats') {
+            textArea.focus();
+        }
         var startOffset = textArea.selectionStart;
         var endOffset = textArea.selectionEnd;
         var text = textArea.value.substring(startOffset, endOffset);

package/src/rich-text-editor/actions/paste-clean-up.d.ts

@@ -55,6 +55,7 @@ export declare class PasteCleanup {
     private updateCss;
     private setCssClass;
     private destroyDialog;
+    private docClick;
     private cleanAppleClass;
     private formatting;
     private cropImageHandler;
@@ -64,6 +65,8 @@ export declare class PasteCleanup {
     private removeTempClass;
     private sanitizeHelper;
     private plainFormatting;
+    private removingComments;
+    private reframeToBrContent;
     private getTextContent;
     private detachInlineElements;
     private findDetachEmptyElem;
@@ -73,6 +76,8 @@ export declare class PasteCleanup {
     private deniedTags;
     private deniedAttributes;
     private allowedStyle;
+    private findLastElement;
+    private processPictureElement;
     /**
      * For internal use only - Get the module name.
      *