@syncfusion/ej2-richtexteditor 23.2.7 → 24.1.43

package/src/rich-text-editor/base/rich-text-editor.js

@@ -390,7 +390,7 @@ var RichTextEditor = /** @class */ (function (_super) {
             if (tool.command === 'InsertText') {
                 currentInsertContentLength = value.length;
             }
-            var currentLength = this.getText().trim().length;
+            var currentLength = this.getText().trim().replace(/(\r\n|\n|\r)/gm, '').replace(/\u200B/g, '').length;
             var selectionLength = this.getSelection().length;
             var totalLength = (currentLength - selectionLength) + currentInsertContentLength;
             if (!(this.maxLength === -1 || totalLength <= this.maxLength)) {
@@ -565,7 +565,7 @@ var RichTextEditor = /** @class */ (function (_super) {
         if (this.enableXhtml) {
             this.setProperties({ value: this.getXhtml() }, true);
         }
-        if (this.toolbarSettings.enable && this.toolbarSettings.type === 'Expand' && !isNOU(this.getToolbar()) &&
+        if (this.toolbarSettings.enable && (this.toolbarSettings.type === 'Expand' || this.toolbarSettings.type === 'MultiRow' || this.toolbarSettings.type === 'Scrollable') && !isNOU(this.getToolbar()) &&
             (this.toolbarSettings.items.indexOf('Undo') > -1 && this.toolbarSettings.items.indexOf('Redo') > -1)) {
             this.disableToolbarItem(['Undo', 'Redo']);
         }
@@ -575,7 +575,7 @@ var RichTextEditor = /** @class */ (function (_super) {
         }
         // eslint-disable-next-line
         (this.enabled && !this.readonly) ? this.eventInitializer() : this.unWireEvents();
-        this.notify(events.bindCssClass, { cssClass: this.cssClass });
+        this.notify(events.bindCssClass, { cssClass: this.getCssClass() });
         this.addAudioVideoWrapper();
         this.notify(events.tableclass, {});
         this.renderComplete();
@@ -666,7 +666,13 @@ var RichTextEditor = /** @class */ (function (_super) {
             range.endContainer;
         var closestLI = closest(endNode, 'LI');
         var isDetached = false;
-        if (!isNOU(closestLI) && endNode.textContent.length === range.endOffset &&
+        var currentRangeEndOffset = range.endOffset;
+        if (currentEndContainer.nodeType === Node.TEXT_NODE) {
+            if (currentEndContainer.textContent.charAt(currentRangeEndOffset - 1) === '\uFEFF') {
+                currentRangeEndOffset--;
+            }
+        }
+        if (!isNOU(closestLI) && endNode.textContent.trim().length === currentRangeEndOffset &&
             !range.collapsed && isNOU(endNode.nextElementSibling)) {
             for (var i = 0; i < closestLI.childNodes.length; i++) {
                 if (closestLI.childNodes[i].nodeName === '#text' && closestLI.childNodes[i].textContent.trim().length === 0) {
@@ -745,7 +751,7 @@ var RichTextEditor = /** @class */ (function (_super) {
         }
         var notFormatPainterCopy = isNOU(e.action) ? true : (e.action !== 'format-copy' ? true : false);
         if (this.formatter.getUndoRedoStack().length === 0 && notFormatPainterCopy &&
-            !(e.altKey || e.shiftKey || (e.altKey && e.shiftKey && e.which === 67))) {
+            !(e.altKey || e.shiftKey || (e.altKey && e.shiftKey && e.which == 67))) {
             this.formatter.saveData();
         }
         if (e.action !== 'insert-link' &&
@@ -814,7 +820,7 @@ var RichTextEditor = /** @class */ (function (_super) {
             this.formatter.onKeyHandler(this, e);
         }
         if (this.inputElement && this.inputElement.textContent.length !== 0
-            || this.element.querySelectorAll('.e-toolbar-item.e-active').length > 0) {
+            || this.element.querySelectorAll('.e-toolbar-item.e-active').length > 0 || this.formatter.getUndoRedoStack().length > 0) {
             this.notify(events.toolbarRefresh, { args: e });
         }
         if (!isNOU(this.placeholder)) {
@@ -906,20 +912,61 @@ var RichTextEditor = /** @class */ (function (_super) {
                 return;
             }
         }
-        this.notifyMouseUp(e);
         if (e.detail === 3) {
             var range = this.getRange();
             var selection = this.formatter.editorManager.domNode.getSelection();
-            if (/\s+$/.test(selection.toString())) {
-                if (!isNOU(range.startContainer.parentElement) && (!isNOU(range.startContainer.parentElement.nextSibling) &&
-                    (range.startContainer.parentElement.nextSibling.nodeType !== 3 ||
-                        /\s+$/.test(range.startContainer.parentElement.nextSibling.textContent)) || range.startOffset === range.endOffset)
-                    || range.startContainer.parentElement.tagName.toLocaleLowerCase() === 'li') {
-                    range.setStart(range.startContainer, range.startOffset);
-                    range.setEnd(range.startContainer, range.startContainer.textContent.length);
+            // To handle the triple click node selection improper range due to browser behavior.
+            if (selection.rangeCount > 0 && !isNOU(range.startContainer.parentElement) && (!isNOU(range.startContainer.parentElement.nextSibling) &&
+                (range.startContainer.parentElement.nextSibling.nodeType !== 3 ||
+                    /\s+$/.test(range.startContainer.parentElement.nextSibling.textContent)) || range.startOffset === range.endOffset)
+                || range.startContainer.parentElement.tagName.toLocaleLowerCase() === 'li') {
+                var newRange = new Range();
+                var start = range.startContainer;
+                var end = range.endContainer;
+                var isInvalid = false;
+                var isInsideList = range.commonAncestorContainer.nodeName === 'OL' || range.commonAncestorContainer.nodeName === 'UL'
+                    || range.commonAncestorContainer.nodeName === 'LI';
+                if (!isInsideList && end.nodeType === 1 && end.nodeName === 'LI') {
+                    end = closest(end, 'ol, ul').previousElementSibling.lastElementChild;
+                }
+                else if (isInsideList && end.nodeType === 1 && range.endOffset === 0) {
+                    if (end.previousElementSibling && end.previousElementSibling.lastElementChild) {
+                        end = end.previousElementSibling.lastElementChild;
+                    }
+                    else {
+                        end = closest(end.parentElement, 'li');
+                        if (end && end.nodeName === 'LI') {
+                            end = end.previousElementSibling;
+                        }
+                    }
+                }
+                else {
+                    if (!closest(end, 'li') && end.previousElementSibling && end.previousElementSibling.lastChild &&
+                        end.previousElementSibling.textContent.trim().length > 0) {
+                        end = end.previousElementSibling.lastChild;
+                    }
+                    else if (closest(end, 'li') && end.previousElementSibling && end.previousElementSibling.lastChild) {
+                        end = closest(end, 'li').parentElement.previousElementSibling.lastChild;
+                    }
+                }
+                if (!end || end === this.inputElement) {
+                    end = start;
+                    isInvalid = true;
+                }
+                while (end.nodeName !== '#text' && !isInvalid) {
+                    if (end.lastElementChild) {
+                        end = end.lastElementChild;
+                    }
+                    else {
+                        end = end.lastChild;
+                    }
                 }
+                newRange.setStart(start, 0);
+                newRange.setEnd(end, end.textContent.length);
+                this.formatter.editorManager.nodeSelection.setRange(this.contentModule.getDocument(), newRange);
             }
         }
+        this.notifyMouseUp(e);
     };
     /**
      * @param {Function} module - specifies the module function.
@@ -963,7 +1010,7 @@ var RichTextEditor = /** @class */ (function (_super) {
             var currentLength = _this.inputElement.textContent.length;
             var selectionLength = _this.getSelection().length;
             var pastedContentLength = (isNOU(e) || isNOU(e.clipboardData))
-                ? 0 : e.clipboardData.getData('text/plain').length;
+                ? 0 : e.clipboardData.getData('text/plain').replace(/(\r\n|\n|\r)/gm, '').replace(/\u200B/g, '').length;
             var totalLength = (currentLength - selectionLength) + pastedContentLength;
             if (_this.editorMode === 'Markdown') {
                 var args_1 = { requestType: 'Paste', editorMode: _this.editorMode, event: e };
@@ -1395,7 +1442,7 @@ var RichTextEditor = /** @class */ (function (_super) {
     RichTextEditor.prototype.updatePanelValue = function () {
         var value = this.value;
         value = (this.enableHtmlEncode && this.value) ? decode(value) : value;
-        var getTextArea = this.element.querySelector('.e-rte-srctextarea');
+        var getTextArea = this.element.querySelector('.' + classes.CLS_RTE_SOURCE_CODE_TXTAREA);
         if (value) {
             if (getTextArea && getTextArea.style.display === 'block') {
                 getTextArea.value = this.value;
@@ -2026,6 +2073,16 @@ var RichTextEditor = /** @class */ (function (_super) {
     RichTextEditor.prototype.getID = function () {
         return (this.originalElement.tagName === 'TEXTAREA' ? this.valueContainer.id : this.element.id);
     };
+    /**
+   * @returns {void}
+   * getCssClass method
+   *
+   * @hidden
+
+   */
+    RichTextEditor.prototype.getCssClass = function (isSpace) {
+        return (isNOU(this.cssClass) ? '' : isSpace ? ' ' + this.cssClass : this.cssClass);
+    };
     RichTextEditor.prototype.mouseDownHandler = function (e) {
         var touch = (e.touches ? e.changedTouches[0] : e);
         addClass([this.element], [classes.CLS_FOCUS]);
@@ -2137,7 +2194,7 @@ var RichTextEditor = /** @class */ (function (_super) {
     };
     RichTextEditor.prototype.getUpdatedValue = function () {
         var value;
-        var getTextArea = this.element.querySelector('.e-rte-srctextarea');
+        var getTextArea = this.element.querySelector('.' + classes.CLS_RTE_SOURCE_CODE_TXTAREA);
         if (this.editorMode === 'HTML') {
             value = (this.inputElement.innerHTML === '<p><br></p>' || this.inputElement.innerHTML === '<div><br></div>' ||
                 this.inputElement.innerHTML === '<br>') ? null : this.enableHtmlEncode ?
@@ -2168,6 +2225,10 @@ var RichTextEditor = /** @class */ (function (_super) {
         clearTimeout(this.idleInterval);
         this.idleInterval = setTimeout(this.updateValueOnIdle.bind(this), 0);
     };
+    RichTextEditor.prototype.cleanupResizeElements = function (args) {
+        var value = this.removeResizeElement(args.value);
+        args.callBack(value);
+    };
     RichTextEditor.prototype.removeResizeElement = function (value) {
         var valueElementWrapper = document.createElement("div");
         valueElementWrapper.innerHTML = value;
@@ -2389,6 +2450,7 @@ var RichTextEditor = /** @class */ (function (_super) {
         this.on(events.contentChanged, this.contentChanged, this);
         this.on(events.resizeInitialized, this.updateResizeFlag, this);
         this.on(events.updateTbItemsStatus, this.updateStatus, this);
+        this.on(events.cleanupResizeElements, this.cleanupResizeElements, this);
         if (this.readonly && this.enabled) {
             return;
         }
@@ -2475,6 +2537,7 @@ var RichTextEditor = /** @class */ (function (_super) {
         this.off(events.contentChanged, this.contentChanged);
         this.off(events.resizeInitialized, this.updateResizeFlag);
         this.off(events.updateTbItemsStatus, this.updateStatus);
+        this.off(events.cleanupResizeElements, this.cleanupResizeElements);
         if (this.readonly && this.enabled) {
             return;
         }

package/src/rich-text-editor/base/util.js

@@ -265,11 +265,11 @@ export function getTBarItemsIndex(items, toolbarItems) {
                 continue;
             }
             else {
-                if (items[i] === 'OrderedList' && toolbarItems[j].subCommand === 'OL') {
+                if ((items[i] === 'OrderedList' || items[i] === 'NumberFormatList') && toolbarItems[j].subCommand === 'OL') {
                     itemsIndex.push(j);
                     break;
                 }
-                else if (items[i] === 'UnorderedList' && toolbarItems[j].subCommand === 'UL') {
+                else if ((items[i] === 'UnorderedList' || items[i] === 'BulletFormatList') && toolbarItems[j].subCommand === 'UL') {
                     itemsIndex.push(j);
                     break;
                 }
@@ -422,6 +422,15 @@ export function updateTextNode(value, rteObj) {
             for (var i = 0; i < emptyBlockElem.length; i++) {
                 emptyBlockElem[i].innerHTML = '<br>';
             }
+            // To handle the Empty block node with \n
+            var allPNodes = tempNode.querySelectorAll('p');
+            for (var i = 0; i < allPNodes.length; i++) {
+                if (allPNodes[i].textContent.trim().length === 0 && allPNodes[i].childNodes.length === 1
+                    && allPNodes[i].childNodes[0].nodeName === '#text' &&
+                    isNOU(allPNodes[i].childNodes[0].textContent.match(/\u00a0/g))) {
+                    allPNodes[i].innerHTML = '<br>';
+                }
+            }
             var emptyInlineElem = tempNode.querySelectorAll(CONSTANT.inlineEmptyNodes);
             for (var i = 0; i < emptyInlineElem.length; i++) {
                 emptyInlineElem[i].innerHTML = '&ZeroWidthSpace;';

package/src/rich-text-editor/formatter/formatter.js

@@ -60,7 +60,7 @@ var Formatter = /** @class */ (function () {
             if (args.item.command === 'Images' || args.item.command === 'Videos' || args.item.command === 'Table' || args.item.command === 'Files') {
                 currentInsertContentLength = 1;
             }
-            var currentLength = self.getText().trim().length;
+            var currentLength = self.getText().trim().replace(/(\r\n|\n|\r)/gm, '').replace(/\u200B/g, '').length;
             var selectionLength = self.getSelection().length;
             var totalLength = (currentLength - selectionLength) + currentInsertContentLength;
             if (!(self.maxLength === -1 || totalLength <= self.maxLength)) {

package/src/rich-text-editor/models/default-locale.js

@@ -227,6 +227,7 @@ export var toolsLocale = {
     'bulletformatlist': 'bulletFormatList',
     'undo': 'undo',
     'redo': 'redo',
+    'filemanager': 'fileManager',
     'superscript': 'superscript',
     'subscript': 'subscript',
     'createlink': 'createLink',
@@ -293,6 +294,7 @@ export var toolsLocale = {
     'emojiPickerTypeToFind': 'Type to find',
     'emojiPickerNoResultFound': 'No results found',
     'emojiPickerTrySomethingElse': 'Try something else',
+    'ImageLinkAriaLabel': 'Open in new window',
 };
 export var fontNameLocale = [
     { locale: 'fontNameSegoeUI', value: 'Segoe UI' },

package/src/rich-text-editor/models/items.js

@@ -780,7 +780,7 @@ export var windowKeys = {
     'Number Format List': 'Ctrl+Shift+O',
     'Bullet Format List': 'Ctrl+Alt+O',
     'Insert Audio': 'Ctrl+Shift+A',
-    'Insert Video': 'Ctrl+Shift+V',
+    'Insert Video': 'Ctrl+Alt+V',
     'Increase Indent': 'Ctrl+]',
     'Decrease Indent': 'Ctrl+[',
     'Decrease Fontsize': 'Ctrl+Shift+<',

package/src/rich-text-editor/renderer/dialog-renderer.js

@@ -83,7 +83,16 @@ var DialogRenderer = /** @class */ (function () {
     DialogRenderer.prototype.getDialogPosition = function () {
         var distanceFromVisibleTop = this.parent.element.getBoundingClientRect().top;
         if (distanceFromVisibleTop < 0) {
-            distanceFromVisibleTop = Math.abs(distanceFromVisibleTop);
+            var topHeight = 0;
+            var parentElement = this.parent.element;
+            while (parentElement.nodeName !== 'BODY') {
+                var top_1 = parentElement.getBoundingClientRect().top;
+                if (top_1 > 0) {
+                    topHeight = top_1;
+                }
+                parentElement = parentElement.parentElement;
+            }
+            distanceFromVisibleTop = Math.abs(distanceFromVisibleTop) + topHeight;
             return distanceFromVisibleTop.toString();
         }
         else {