@syncfusion/ej2-richtexteditor 24.1.46 → 24.2.3

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,
@@ -222,7 +306,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().replace(/(\r\n|\n|\r)/gm, '').replace(/\u200B/g, '').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) &&
@@ -384,7 +468,7 @@ var HtmlEditor = /** @class */ (function () {
         var liElement;
         var rootElement;
         if (e.args.code === 'Delete' && e.args.keyCode === 46 &&
-            this.parent.contentModule.getText().trim().replace(/(\r\n|\n|\r)/gm, '').replace(/\u200B/g, '').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') {

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/paste-clean-up.d.ts

@@ -75,6 +75,7 @@ export declare class PasteCleanup {
     private deniedTags;
     private deniedAttributes;
     private allowedStyle;
+    private findLastElement;
     /**
      * For internal use only - Get the module name.
      *

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

@@ -113,7 +113,8 @@ var PasteCleanup = /** @class */ (function () {
                     args: e.args,
                     text: e.text,
                     allowedStylePropertiesArray: this.parent.pasteCleanupSettings.allowedStyleProps,
-                    callBack: function (a, cropImageData) {
+                    callBack: function (a, cropImageData, pasteTableSource) {
+                        args.pasteTableSource = pasteTableSource;
                         value = a.trim();
                         _this.cropImageData = cropImageData;
                     }
@@ -691,10 +692,24 @@ var PasteCleanup = /** @class */ (function () {
             }
             this.parent.trigger(events.afterPasteCleanup, { value: clipBoardElem.innerHTML, filesData: filesData }, function (updatedArgs) { value = updatedArgs.value; });
             clipBoardElem.innerHTML = this.parent.addAnchorAriaLabel(value);
-            clipBoardElem = this.addTableClass(clipBoardElem);
+            clipBoardElem = this.addTableClass(clipBoardElem, args.pasteTableSource);
             this.parent.formatter.editorManager.execCommand('inserthtml', 'pasteCleanup', args, function (returnArgs) {
                 extend(args, { elements: returnArgs.elements, imageElements: returnArgs.imgElem }, true);
                 _this.parent.formatter.onSuccess(_this.parent, args);
+                if (!isNOU(returnArgs.elements) && !isNOU(returnArgs.imgElem)) {
+                    var pasteContent = returnArgs.elements;
+                    var imageContent = returnArgs.imgElem;
+                    var lastElementChild = _this.findLastElement(pasteContent[pasteContent.length - 1]);
+                    var isImageAtLast = !isNOU(lastElementChild) ? lastElementChild.nodeName === 'IMG' : false;
+                    if (isImageAtLast || pasteContent[pasteContent.length - 1] === imageContent[imageContent.length - 1]) {
+                        _this.parent.notify(events.insertCompleted, {
+                            args: args.event,
+                            type: 'Images',
+                            isNotify: true,
+                            elements: imageContent[imageContent.length - 1]
+                        });
+                    }
+                }
             }, clipBoardElem, null, null, this.parent.enterKey);
             this.removeTempClass();
             this.parent.notify(events.toolbarRefresh, {});
@@ -749,12 +764,15 @@ var PasteCleanup = /** @class */ (function () {
             }
         }
     };
-    PasteCleanup.prototype.addTableClass = function (element) {
+    PasteCleanup.prototype.addTableClass = function (element, source) {
         var tableElement = element.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') && (source === 'html' || source === '')) {
                 tableElement[i].classList.add('e-rte-table');
             }
+            else if (source && source !== 'html') {
+                tableElement[i].classList.add('e-rte-paste-' + source + '-table');
+            }
         }
         return element;
     };
@@ -1089,6 +1107,16 @@ var PasteCleanup = /** @class */ (function () {
         }
         return clipBoardElem;
     };
+    PasteCleanup.prototype.findLastElement = function (element) {
+        if (!isNOU(element) && !isNOU(element.lastElementChild)) {
+            var lastChild = element.lastElementChild;
+            while (lastChild && lastChild.lastElementChild) {
+                lastChild = lastChild.lastElementChild;
+            }
+            return lastChild;
+        }
+        return null;
+    };
     /**
      * For internal use only - Get the module name.
      *

package/src/rich-text-editor/actions/toolbar.d.ts

@@ -4,6 +4,7 @@ import { IUpdateItemsModel } from '../base/interface';
 import { ServiceLocator } from '../services/service-locator';
 import { RendererFactory } from '../services/renderer-factory';
 import { BaseToolbar } from './base-toolbar';
+import { DropDownButtons } from './dropdown-buttons';
 import { RichTextEditorModel } from '../base/rich-text-editor-model';
 /**
  * `Toolbar` module is used to handle Toolbar actions.
@@ -22,7 +23,7 @@ export declare class Toolbar {
     private isTransformChild;
     private contentRenderer;
     protected toolbarRenderer: IRenderer;
-    private dropDownModule;
+    dropDownModule: DropDownButtons;
     private toolbarActionModule;
     protected renderFactory: RendererFactory;
     private keyBoardModule;

package/src/rich-text-editor/base/constant.d.ts

@@ -744,6 +744,21 @@ export declare const cleanupResizeElements: string;
 /**
  * @hidden
 
+ */
+export declare const afterKeyDown: string;
+/**
+ * @hidden
+
+ */
+export declare const updateValueOnIdle: string;
+/**
+ * @hidden
+
+ */
+export declare const documentClickClosedBy: string;
+/**
+ * @hidden
+
  */
 export declare const blockEmptyNodes: string;
 /**
@@ -751,3 +766,18 @@ export declare const blockEmptyNodes: string;
 
  */
 export declare const inlineEmptyNodes: string;
+/**
+ * @hidden
+
+ */
+export declare const supportedUnits: string[];
+/**
+ * @hidden
+
+ */
+export declare const conversionFactors: Record<string, Record<string, number>>;
+/**
+ * @hidden
+
+ */
+export declare const onHandleFontsizeChange: string;

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

@@ -744,6 +744,21 @@ export var cleanupResizeElements = 'cleanupResizeElements';
 /**
  * @hidden
 
+ */
+export var afterKeyDown = 'afterKeyDown';
+/**
+ * @hidden
+
+ */
+export var updateValueOnIdle = 'updateValueOnIdle';
+/**
+ * @hidden
+
+ */
+export var documentClickClosedBy = 'documentClickClosedBy';
+/**
+ * @hidden
+
  */
 export var blockEmptyNodes = "address:empty, article:empty, aside:empty, blockquote:empty,\n details:empty, dd:empty, div:empty, dl:empty, dt:empty, fieldset:empty, footer:empty,form:empty, h1:empty,\n h2:empty, h3:empty, h4:empty, h5:empty, h6:empty, header:empty, hgroup:empty, li:empty, main:empty, nav:empty,\n noscript:empty, output:empty, p:empty, pre:empty, section:empty, td:empty, th:empty";
 /**
@@ -751,3 +766,187 @@ export var blockEmptyNodes = "address:empty, article:empty, aside:empty, blockqu
 
  */
 export var inlineEmptyNodes = "a:empty, abbr:empty, acronym:empty, b:empty, bdi:empty, bdo:empty, big:empty, button:empty,\ncanvas:empty, cite:empty, code:empty, data:empty, datalist:empty, del:empty, dfn:empty, em:empty, font:empty, i:empty, iframe:empty,\nins:empty, kbd:empty, label:empty, map:empty, mark:empty, meter:empty, noscript:empty, object:empty, output:empty, picture:empty, progress:empty,\nq:empty, ruby:empty, s:empty, samp:empty, script:empty, select:empty, slot:empty, small:empty, span:empty, strong:empty, strike:empty, sub:empty, sup:empty, svg:empty,\ntemplate:empty, textarea:empty, time:empty, u:empty, tt:empty, var:empty, wbr:empty";
+/**
+ * @hidden
+
+ */
+export var supportedUnits = ['px', 'em', 'rem', 'pt', 'cm', 'mm', 'in', 'pc', 'vw', 'vh', 'vmin', 'vmax'];
+/**
+ * @hidden
+
+ */
+export var conversionFactors = {
+    'px': {
+        'px': 1,
+        'em': 0.0625,
+        'rem': 0.0625,
+        'pt': 0.75,
+        'cm': 0.0264583,
+        'mm': 0.0026458,
+        'in': 0.0104167,
+        'pc': 0.0625,
+        'vw': 0.00625,
+        'vh': 0.00625,
+        'vmin': 0.00625,
+        'vmax': 0.00625
+    },
+    'em': {
+        'px': 16,
+        'em': 1,
+        'rem': 1,
+        'pt': 12,
+        'cm': 0.423333,
+        'mm': 0.0423333,
+        'in': 0.166667,
+        'pc': 0.0625,
+        'vw': 1,
+        'vh': 1,
+        'vmin': 1,
+        'vmax': 1
+    },
+    'rem': {
+        'px': 16,
+        'em': 1,
+        'rem': 1,
+        'pt': 12,
+        'cm': 0.423333,
+        'mm': 0.0423333,
+        'in': 0.166667,
+        'pc': 0.0625,
+        'vw': 1,
+        'vh': 1,
+        'vmin': 1,
+        'vmax': 1
+    },
+    'pt': {
+        'px': 1.33333,
+        'em': 0.0833333,
+        'rem': 0.0833333,
+        'pt': 1,
+        'cm': 0.0352778,
+        'mm': 0.0035278,
+        'in': 0.0138889,
+        'pc': 0.0416667,
+        'vw': 0.00416667,
+        'vh': 0.00416667,
+        'vmin': 0.00416667,
+        'vmax': 0.00416667
+    },
+    'cm': {
+        'px': 37.7953,
+        'em': 2.3622,
+        'rem': 2.3622,
+        'pt': 28.3465,
+        'cm': 1,
+        'mm': 0.1,
+        'in': 0.393701,
+        'pc': 0.148148,
+        'vw': 0.0377953,
+        'vh': 0.0377953,
+        'vmin': 0.0377953,
+        'vmax': 0.0377953
+    },
+    'mm': {
+        'px': 3.77953,
+        'em': 0.23622,
+        'rem': 0.23622,
+        'pt': 2.83465,
+        'cm': 10,
+        'mm': 1,
+        'in': 0.0393701,
+        'pc': 0.0148148,
+        'vw': 0.00377953,
+        'vh': 0.00377953,
+        'vmin': 0.00377953,
+        'vmax': 0.00377953
+    },
+    'in': {
+        'px': 96,
+        'em': 6,
+        'rem': 6,
+        'pt': 72,
+        'cm': 2.54,
+        'mm': 25.4,
+        'in': 1,
+        'pc': 0.375,
+        'vw': 0.09375,
+        'vh': 0.09375,
+        'vmin': 0.09375,
+        'vmax': 0.09375
+    },
+    'pc': {
+        'px': 16,
+        'em': 1,
+        'rem': 1,
+        'pt': 12,
+        'cm': 0.423333,
+        'mm': 0.0423333,
+        'in': 0.166667,
+        'pc': 1,
+        'vw': 0.0625,
+        'vh': 0.0625,
+        'vmin': 0.0625,
+        'vmax': 0.0625
+    },
+    'vw': {
+        'px': 160,
+        'em': 10,
+        'rem': 10,
+        'pt': 120,
+        'cm': 4.23333,
+        'mm': 0.423333,
+        'in': 1.66667,
+        'pc': 0.625,
+        'vw': 1,
+        'vh': 1,
+        'vmin': 1,
+        'vmax': 1
+    },
+    'vh': {
+        'px': 160,
+        'em': 10,
+        'rem': 10,
+        'pt': 120,
+        'cm': 4.23333,
+        'mm': 0.423333,
+        'in': 1.66667,
+        'pc': 0.625,
+        'vw': 1,
+        'vh': 1,
+        'vmin': 1,
+        'vmax': 1
+    },
+    'vmin': {
+        'px': 160,
+        'em': 10,
+        'rem': 10,
+        'pt': 120,
+        'cm': 4.23333,
+        'mm': 0.423333,
+        'in': 1.66667,
+        'pc': 0.625,
+        'vw': 1,
+        'vh': 1,
+        'vmin': 1,
+        'vmax': 1
+    },
+    'vmax': {
+        'px': 160,
+        'em': 10,
+        'rem': 10,
+        'pt': 120,
+        'cm': 4.23333,
+        'mm': 0.423333,
+        'in': 1.66667,
+        'pc': 0.625,
+        'vw': 1,
+        'vh': 1,
+        'vmin': 1,
+        'vmax': 1
+    }
+};
+/**
+ * @hidden
+
+ */
+export var onHandleFontsizeChange = 'onHandleFontsizeChange';

package/src/rich-text-editor/base/interface.d.ts

@@ -197,6 +197,7 @@ export interface IRichTextEditor extends Component<HTMLElement> {
     focusIn(): void;
     showEmojiPicker?(x?: number, y?: number): void;
     addAnchorAriaLabel?(value: string): string;
+    autoSaveOnIdle: boolean;
 }
 /**
 
@@ -253,7 +254,7 @@ export interface NotifyArgs {
     action?: string;
     callBack?(args?: string | IImageCommandsArgs, cropImageData?: {
         [key: string]: string | boolean | number;
-    }[]): void;
+    }[], pasteTableSource?: string): void;
     file?: Blob;
     insertElement?: Element;
     touchData?: ITouchData;
@@ -261,6 +262,11 @@ export interface NotifyArgs {
     formatPainterSettings?: FormatPainterSettingsModel;
     emojiPickerSettings?: EmojiSettingsModel;
     ariaLabel?: string;
+    /**
+     * Defines the source of the Table content.
+     * @private
+     */
+    pasteTableSource?: string;
 }
 /**
  * Provides information about the current and previous cssClass property .

package/src/rich-text-editor/base/rich-text-editor.d.ts

@@ -1607,4 +1607,5 @@ export declare class RichTextEditor extends Component<HTMLElement> implements IN
      * @hidden
      */
     private resetToolbarTabIndex;
+    private removeSelectionClassStates;
 }