@syncfusion/ej2-richtexteditor 21.2.10 → 22.1.34

package/src/editor-manager/plugin/selection-commands.js

@@ -465,8 +465,10 @@ var SelectionCommands = /** @class */ (function () {
                                 while (currentFormatNode) {
                                     var isSameTextContent = currentFormatNode.parentElement.textContent.trim()
                                         === nodes[index].textContent.trim();
-                                    if (!domNode.isBlockNode(currentFormatNode.parentElement) && isSameTextContent) {
-                                        currentFormatNode = currentFormatNode.parentElement;
+                                    var parent_1 = currentFormatNode.parentElement;
+                                    if (!domNode.isBlockNode(parent_1) && isSameTextContent &&
+                                        !(parent_1.nodeName === 'SPAN' && parent_1.classList.contains('e-img-inner'))) {
+                                        currentFormatNode = parent_1;
                                     }
                                     else {
                                         break;
@@ -647,33 +649,19 @@ var SelectionCommands = /** @class */ (function () {
     };
     // Below function is used to insert the element created by the format painter plugin.
     SelectionCommands.insertFormatPainterElem = function (nodes, index, range, nodeCutter, painterValues, domNode) {
-        var parent = nodes[index].parentElement;
+        var parent = !domNode.isBlockNode(nodes[index].parentElement) ?
+            nodes[index].parentElement : nodes[index];
         if (!domNode.isBlockNode(parent)) {
-            // The below code is used to remove the already present inline style from the text node.
             while (parent.textContent.trim() === parent.parentElement.textContent.trim() && !domNode.isBlockNode(parent.parentElement)) {
                 parent = parent.parentElement;
             }
-            if (parent.textContent.trim() !== nodes[index].textContent.trim()) {
-                nodeCutter.SplitNode(range, parent, true);
-                var childELemList = nodes[index].parentElement.childNodes;
-                for (var i = 0; i < childELemList.length; i++) {
-                    if (childELemList[i].textContent.trim() === nodes[i].textContent.trim()) {
-                        parent.parentNode.insertBefore(childELemList[i], parent);
-                        break;
-                    }
-                }
-                var blockChildNodes = parent.parentElement.childNodes;
-                for (var k = 0; k < blockChildNodes.length; k++) {
-                    if (blockChildNodes[k].textContent.trim() === '' || blockChildNodes[k].textContent.length === 0) {
-                        detach(blockChildNodes[k]);
-                    }
-                }
-            }
-            else {
-                InsertMethods.unwrap(parent);
-            }
+        }
+        // The below code is used to remove the already present inline style from the text node.
+        if (!isNOU(parent) && parent.nodeType === 1 && !(parent.classList.contains('e-rte-img-caption') || parent.classList.contains('e-img-inner'))) {
+            this.formatPainterCleanup(index, nodes, parent, range, nodeCutter, domNode);
         }
         var elem = painterValues.element;
+        // The below code is used to apply the inline format copied.
         if (!isNOU(elem)) {
             // Step 1: Cloning the element that is created by format painter.
             // Step 2: Finding the last child of the nested elememt using the paintervalues.lastchild nodename
@@ -698,6 +686,43 @@ var SelectionCommands = /** @class */ (function () {
         }
         return nodes[index];
     };
+    SelectionCommands.formatPainterCleanup = function (index, nodes, parent, range, nodeCutter, domNode) {
+        var INVALID_TAGS = ['A', 'AUDIO', 'IMG', 'VIDEO', 'IFRAME'];
+        if (index === 0 && parent.textContent.trim() !== nodes[index].textContent.trim()) {
+            nodeCutter.SplitNode(range, parent, true);
+            var childELemList = nodes[index].parentElement.childNodes;
+            for (var i = 0; i < childELemList.length; i++) {
+                if (childELemList[i].textContent.trim() === nodes[i].textContent.trim()) {
+                    parent.parentNode.insertBefore(childELemList[i], parent);
+                    break;
+                }
+            }
+            var blockChildNodes = parent.parentElement.childNodes;
+            for (var k = 0; k < blockChildNodes.length; k++) {
+                if (blockChildNodes[k].textContent.trim() === '' || blockChildNodes[k].textContent.length === 0) {
+                    detach(blockChildNodes[k]);
+                }
+            }
+        }
+        else if (parent.textContent.trim() !== nodes[index].textContent.trim()) {
+            parent.parentElement.insertBefore(nodes[index], parent);
+        }
+        else {
+            while (!isNOU(parent) && parent.nodeType !== 3 && !domNode.isBlockNode(parent)) {
+                var temp = void 0;
+                for (var i = 0; i < parent.childNodes.length; i++) {
+                    var currentChild = parent.childNodes[i];
+                    if (currentChild.textContent.trim().length !== 0 && currentChild.nodeType !== 3) {
+                        temp = parent.childNodes[i];
+                    }
+                }
+                if (INVALID_TAGS.indexOf(parent.tagName) === -1) {
+                    InsertMethods.unwrap(parent);
+                }
+                parent = temp;
+            }
+        }
+    };
     SelectionCommands.enterAction = 'P';
     return SelectionCommands;
 }());

package/src/editor-manager/plugin/table.js

@@ -525,10 +525,10 @@ var TableCommand = /** @class */ (function () {
         this.updateRowSpanStyle(minMaxIndexes.startRow, minMaxIndexes.endRow, this.getCorrespondingColumns());
         this.updateColSpanStyle(minMaxIndexes.startColumn, minMaxIndexes.endColumn, this.getCorrespondingColumns());
         e.item.selection.setSelectionText(this.parent.currentDocument, e.item.selection.range.startContainer, e.item.selection.range.startContainer, 0, 0);
-        if (this.parent.nodeSelection.range) {
+        if (this.parent.nodeSelection && firstCell) {
             this.parent.nodeSelection.setCursorPoint(this.parent.currentDocument, 
             // eslint-disable-next-line
-            this.parent.nodeSelection.range.endContainer, 0);
+            firstCell, 0);
         }
         if (e.callBack) {
             e.callBack({

package/src/editor-manager/plugin/toolbar-status.js

@@ -323,6 +323,9 @@ var ToolbarStatus = /** @class */ (function () {
         else if (list === 'none') {
             return 'None';
         }
+        else if (this.isOrderedList(node)) {
+            return true;
+        }
         else {
             return null;
         }
@@ -341,6 +344,9 @@ var ToolbarStatus = /** @class */ (function () {
         else if (list === 'disc') {
             return 'Disc';
         }
+        else if (this.isUnorderedList(node)) {
+            return true;
+        }
         else {
             return null;
         }

package/src/editor-manager/plugin/undo.d.ts

@@ -38,6 +38,7 @@ export declare class UndoRedoManager {
     destroy(): void;
     private keyDown;
     private keyUp;
+    private getTextContentFromFragment;
     /**
      * RTE collection stored html format.
      *

package/src/editor-manager/plugin/undo.js

@@ -85,6 +85,19 @@ var UndoRedoManager = /** @class */ (function () {
             this.saveData(e);
         }
     };
+    UndoRedoManager.prototype.getTextContentFromFragment = function (fragment) {
+        var textContent = '';
+        for (var i = 0; i < fragment.childNodes.length; i++) {
+            var childNode = fragment.childNodes[i];
+            if (childNode.nodeType === Node.TEXT_NODE) {
+                textContent += childNode.textContent;
+            }
+            else if (childNode.nodeType === Node.ELEMENT_NODE) {
+                textContent += this.getTextContentFromFragment(childNode);
+            }
+        }
+        return textContent;
+    };
     /**
      * RTE collection stored html format.
      *
@@ -107,8 +120,12 @@ var UndoRedoManager = /** @class */ (function () {
         }
         range = new NodeSelection().getRange(this.parent.currentDocument);
         var save = new NodeSelection().save(range, this.parent.currentDocument);
-        var htmlText = this.parent.editableElement.innerHTML;
-        var changEle = { text: htmlText, range: save };
+        var clonedElement = this.parent.editableElement.cloneNode(true);
+        var fragment = document.createDocumentFragment();
+        while (clonedElement.firstChild) {
+            fragment.appendChild(clonedElement.firstChild);
+        }
+        var changEle = { text: fragment, range: save };
         if (this.undoRedoStack.length >= this.steps) {
             this.undoRedoStack = this.undoRedoStack.slice(0, this.steps + 1);
         }
@@ -116,7 +133,8 @@ var UndoRedoManager = /** @class */ (function () {
             && (this.undoRedoStack[this.undoRedoStack.length - 1].range.startOffset === save.range.startOffset) &&
             (this.undoRedoStack[this.undoRedoStack.length - 1].range.endOffset === save.range.endOffset) &&
             (this.undoRedoStack[this.undoRedoStack.length - 1].range.range.startContainer === save.range.startContainer) &&
-            (this.undoRedoStack[this.undoRedoStack.length - 1].text.trim() === changEle.text.trim())) {
+            (this.getTextContentFromFragment(this.undoRedoStack[this.undoRedoStack.length - 1].text).trim() ===
+                this.getTextContentFromFragment(changEle.text).trim())) {
             return;
         }
         this.undoRedoStack.push(changEle);
@@ -142,7 +160,8 @@ var UndoRedoManager = /** @class */ (function () {
         if (this.steps > 0) {
             var range = this.undoRedoStack[this.steps - 1].range;
             var removedContent = this.undoRedoStack[this.steps - 1].text;
-            this.parent.editableElement.innerHTML = removedContent;
+            this.parent.editableElement.innerHTML = '';
+            this.parent.editableElement.appendChild(removedContent.cloneNode(true));
             this.parent.editableElement.focus();
             if (isIDevice()) {
                 setEditFrameFocus(this.parent.editableElement, e.selector);
@@ -172,7 +191,9 @@ var UndoRedoManager = /** @class */ (function () {
     UndoRedoManager.prototype.redo = function (e) {
         if (this.undoRedoStack[this.steps + 1] != null) {
             var range = this.undoRedoStack[this.steps + 1].range;
-            this.parent.editableElement.innerHTML = this.undoRedoStack[this.steps + 1].text;
+            var addedContent = this.undoRedoStack[this.steps + 1].text;
+            this.parent.editableElement.innerHTML = '';
+            this.parent.editableElement.appendChild(addedContent.cloneNode(true));
             this.parent.editableElement.focus();
             if (isIDevice()) {
                 setEditFrameFocus(this.parent.editableElement, e.selector);

package/src/editor-manager/plugin.d.ts

@@ -24,3 +24,4 @@ export * from './plugin/undo';
 export * from './plugin/table';
 export * from './plugin/toolbar-status';
 export * from './plugin/format-painter-actions';
+export * from './plugin/emoji-picker-action';

package/src/editor-manager/plugin.js

@@ -24,3 +24,4 @@ export * from './plugin/undo';
 export * from './plugin/table';
 export * from './plugin/toolbar-status';
 export * from './plugin/format-painter-actions';
+export * from './plugin/emoji-picker-action';

package/src/global.js

@@ -1,3 +1,3 @@
 import * as index from './index';
-index.RichTextEditor.Inject(index.Toolbar, index.Link, index.Image, index.Audio, index.Video, index.Count, index.QuickToolbar, index.HtmlEditor, index.MarkdownEditor, index.Table, index.PasteCleanup, index.Resize, index.FileManager, index.FormatPainter);
+index.RichTextEditor.Inject(index.Toolbar, index.Link, index.Image, index.Audio, index.Video, index.Count, index.QuickToolbar, index.HtmlEditor, index.MarkdownEditor, index.Table, index.PasteCleanup, index.Resize, index.FileManager, index.FormatPainter, index.EmojiPicker);
 export * from './index';

package/src/rich-text-editor/actions/base-quick-toolbar.js

@@ -183,7 +183,8 @@ var BaseQuickToolbar = /** @class */ (function () {
      */
     BaseQuickToolbar.prototype.showPopup = function (x, y, target) {
         var _this = this;
-        var eventArgs = { popup: this.popupObj, cancel: false, targetElement: target, positionX: x, positionY: y };
+        var eventArgs = { popup: this.popupObj, cancel: false, targetElement: target,
+            positionX: x, positionY: y };
         this.parent.trigger(events.beforeQuickToolbarOpen, eventArgs, function (beforeQuickToolbarArgs) {
             if (!beforeQuickToolbarArgs.cancel) {
                 var editPanelTop = void 0;
@@ -219,6 +220,7 @@ var BaseQuickToolbar = /** @class */ (function () {
                 if (_this.parent.showTooltip) {
                     _this.tooltip = new Tooltip({
                         target: '#' + _this.element.id + ' [title]',
+                        openDelay: 400,
                         showTipPointer: true
                     });
                     _this.tooltip.appendTo(_this.element);
@@ -299,6 +301,11 @@ var BaseQuickToolbar = /** @class */ (function () {
             }
             this.tooltip.destroy();
         }
+        else {
+            if (!isNullOrUndefined(this.tooltip)) {
+                this.tooltip.destroy();
+            }
+        }
         if (!isNullOrUndefined(this.parent.getToolbar()) && !this.parent.inlineMode.enable) {
             if (isNullOrUndefined(viewSourcePanel) || viewSourcePanel.style.display === 'none') {
                 this.parent.enableToolbarItem(this.parent.toolbarSettings.items);

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

@@ -154,8 +154,9 @@ var BaseToolbar = /** @class */ (function () {
                                 _this.parent.formatter.saveData();
                             }
                             callback_1.call(_this);
-                            if ((_this.parent.formatter.getUndoRedoStack()[_this.parent.formatter.getUndoRedoStack().length - 1].text.trim()
-                                === _this.parent.inputElement.innerHTML.trim())) {
+                            var currentContentElem = _this.parent.createElement('div');
+                            currentContentElem.appendChild(_this.parent.formatter.getUndoRedoStack()[_this.parent.formatter.getUndoRedoStack().length - 1].text);
+                            if (currentContentElem.innerHTML.trim() === _this.parent.inputElement.innerHTML.trim()) {
                                 return;
                             }
                             if (proxy_1.undo) {

package/src/rich-text-editor/actions/emoji-picker.d.ts

@@ -0,0 +1,48 @@
+import { IRichTextEditor } from '../base/interface';
+import { ServiceLocator } from '../services/service-locator';
+import { RendererFactory } from '../services/renderer-factory';
+import { Popup } from '@syncfusion/ej2-popups';
+import { BaseToolbar } from './base-toolbar';
+export declare class EmojiPicker {
+    protected parent: IRichTextEditor;
+    protected locator: ServiceLocator;
+    protected renderFactory: RendererFactory;
+    baseToolbar: BaseToolbar;
+    popupObj: Popup;
+    private popDiv;
+    private save;
+    private clickEvent;
+    private divElement;
+    private i10n;
+    constructor(parent?: IRichTextEditor, serviceLocator?: ServiceLocator);
+    /**
+     * Destroys the Count.
+     *
+     * @function destroy
+     * @returns {void}
+     * @hidden
+
+     */
+    destroy(): void;
+    protected addEventListener(): void;
+    private toolbarClick;
+    private buttoncode;
+    private docClick;
+    private scrollEvent;
+    private contentscroll;
+    private emojiToolbarClick;
+    private onKeyDown;
+    private filterKeyHandler;
+    private searchFilter;
+    private emojiBtnClick;
+    private onkeyPress;
+    private onkeyUp;
+    private getCoordinates;
+    protected removeEventListener(): void;
+    /**
+     * For internal use only - Get the module name.
+     *
+     * @returns {string} - returns the string value
+     */
+    private getModuleName;
+}