@syncfusion/ej2-richtexteditor - npm Package Compare versions

Comparing version 24.2.7 to 24.2.8

dist/global/index.d.ts

 /*!
 *  filename: index.d.ts
-*  version : 24.2.7
+*  version : 24.2.8
 *  Copyright Syncfusion Inc. 2001 - 2023. All rights reserved.
@@ -5,0 +5,0 @@ *  Use of this code is subject to the terms of our license.

package.json

 {
   "_from": "@syncfusion/ej2-richtexteditor@*",
-  "_id": "@syncfusion/ej2-richtexteditor@24.2.4",
+  "_id": "@syncfusion/ej2-richtexteditor@24.2.7",
   "_inBundle": false,
-  "_integrity": "sha512-gxGUXVmOFE1abnbYaLzzX3FEGyT+H3uIhWIt0jS7DALyg61NbYz8XViClAoYz62KxDenDXYzu+HyP5bjpMc7gg==",
+  "_integrity": "sha512-LAwzVB7DsDIemywqqLxTjUPWekzjmy1o9UDLYXMT+MHewJcUqD6wVlupgs4/Tej+ZAE275Bt25VKHA/Zl06IMg==",
   "_location": "/@syncfusion/ej2-richtexteditor",
@@ -28,4 +28,4 @@ "_phantomChildren": {},
   ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-richtexteditor/-/ej2-richtexteditor-24.2.4.tgz",
-  "_shasum": "c1a662b91702ceddbdb9a858bae8cdccb2635ea7",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-richtexteditor/-/ej2-richtexteditor-24.2.7.tgz",
+  "_shasum": "4baefba0381f2363ff721f0972d9319c4edf05ab",
   "_spec": "@syncfusion/ej2-richtexteditor@*",
@@ -45,4 +45,4 @@ "_where": "/jenkins/workspace/elease-automation_release_24.1.1/packages/included",
     "@syncfusion/ej2-inputs": "~24.2.7",
-    "@syncfusion/ej2-navigations": "~24.2.4",
-    "@syncfusion/ej2-popups": "~24.2.5",
+    "@syncfusion/ej2-navigations": "~24.2.8",
+    "@syncfusion/ej2-popups": "~24.2.8",
     "@syncfusion/ej2-splitbuttons": "~24.2.7"
@@ -74,4 +74,4 @@ },
   "typings": "index.d.ts",
-  "version": "24.2.7",
+  "version": "24.2.8",
   "sideEffects": false
 }

src/editor-manager/plugin/dom-node.js

@@ -493,5 +493,7 @@ import * as CONSTANT from './../base/constant';
         var isTableStart = startChildNodes.length > 1 && startChildNodes[0].nodeName === 'TABLE';
+        var isImgOnlySelected = startChildNodes.length > 1 && startChildNodes[0].nodeName === 'IMAGE' &&
+            range.endOffset === 1 && range.endContainer.nodeName === '#text' && range.endContainer.textContent.length === 0;
         var start = ((isTableStart ? getLastTextNode(startChildNodes[range.startOffset + 1]) :
             startChildNodes[(range.startOffset > 0) ? (range.startOffset - 1) : range.startOffset]) || range.startContainer);
-        var end = (range.endContainer.childNodes[(range.endOffset > 0) ? (range.endOffset - 1) : range.endOffset]
+        var end = (range.endContainer.childNodes[(range.endOffset > 0) ? (isImgOnlySelected ? range.endOffset : (range.endOffset - 1)) : range.endOffset]
             || range.endContainer);
@@ -498,0 +500,0 @@ if ((start.nodeType === Node.ELEMENT_NODE && end.nodeType === Node.ELEMENT_NODE) && (start.contains(end) || end.contains(start))) {

src/editor-manager/plugin/format-painter-actions.d.ts

@@ -38,2 +38,3 @@ import { IFormatPainterEditor, IFormatPainterSettings } from '../base';
     private insertFormatNode;
+    private isListCopied;
     private insertBlockNode;
@@ -40,0 +41,0 @@ private insertNewList;

src/editor-manager/plugin/format-painter-actions.js

@@ -366,2 +366,10 @@ import { closest, createElement, detach, isNullOrUndefined as isNOU, removeClass } from '@syncfusion/ej2-base';
         var blockNodes = this.parent.domNode.blockNodes();
+        var isListCopied = this.isListCopied();
+        if (isListCopied) {
+            for (var i = 0; i < blockNodes.length; i++) {
+                if (closest(blockNodes[i], 'li')) {
+                    blockNodes[i] = closest(blockNodes[i], 'li');
+                }
+            }
+        }
         var isFullNodeSelected = false;
@@ -375,2 +383,12 @@ if (blockNodes.length === 1) {
     };
+    FormatPainterActions.prototype.isListCopied = function () {
+        var isListCopied = false;
+        for (var i = 0; i < this.copyCollection.length; i++) {
+            if (this.copyCollection[i].tagName === 'OL' || this.copyCollection[i].tagName === 'UL') {
+                isListCopied = true;
+                break;
+            }
+        }
+        return isListCopied;
+    };
     FormatPainterActions.prototype.insertBlockNode = function (element, range, docElement, nodes) {
@@ -377,0 +395,0 @@ var domSelection = this.parent.nodeSelection;

src/editor-manager/plugin/lists.js

@@ -75,4 +75,8 @@ import * as CONSTANT from './../base/constant';
         if (!preElementOLTest && !nextElementOLTest && preElemULStart !== '*' && nextElemULStart !== '*') {
+            var brElement = createElement('br');
             if (startElementOLTest) {
                 range.startContainer.textContent = range.startContainer.textContent.slice(range.startOffset, range.startContainer.textContent.length);
+                if (range.startContainer.nodeName === '#text' && range.startContainer.textContent.length === 0) {
+                    this.parent.domNode.insertAfter(brElement, range.startContainer);
+                }
                 this.applyListsHandler({ subCommand: 'OL', callBack: e.callBack });
@@ -84,2 +88,5 @@ e.event.preventDefault();
                 range.startContainer.textContent = range.startContainer.textContent.slice(range.startOffset, range.startContainer.textContent.length);
+                if (range.startContainer.nodeName === '#text' && range.startContainer.textContent.length === 0) {
+                    this.parent.domNode.insertAfter(brElement, range.startContainer);
+                }
                 this.applyListsHandler({ subCommand: 'UL', callBack: e.callBack });
@@ -195,7 +202,7 @@ e.event.preventDefault();
         var startNode = this.parent.domNode.getSelectedNode(range.startContainer, range.startOffset);
-        var endNode = this.parent.domNode.getSelectedNode(range.endContainer, range.endOffset);
+        var endNode = (!isNOU(range.endContainer.parentElement.closest('li')) && range.endContainer.parentElement.closest('li').childElementCount > 1 && range.endContainer.nodeName === '#text') ? range.endContainer : this.parent.domNode.getSelectedNode(range.endContainer, range.endOffset);
         startNode = startNode.nodeName === 'BR' ? startNode.parentElement : startNode;
         endNode = endNode.nodeName === 'BR' ? endNode.parentElement : endNode;
         startNode = startNode.nodeName !== 'LI' && !isNOU(startNode.closest('LI')) ? startNode.closest('LI') : startNode;
-        endNode = endNode.nodeName !== 'LI' && !isNOU(endNode.closest('LI')) ? endNode.closest('LI') : endNode;
+        endNode = endNode.nodeName !== 'LI' && endNode.nodeName !== '#text' && !isNOU(endNode.closest('LI')) ? endNode.closest('LI') : endNode;
         if (((range.commonAncestorContainer.nodeName === 'OL' || range.commonAncestorContainer.nodeName === 'UL' || range.commonAncestorContainer.nodeName === 'LI') &&
@@ -606,3 +613,3 @@ isNOU(endNode.nextElementSibling) && endNode.textContent.length === range.endOffset &&
         var isReverse = true;
-        if (this.isRevert(elements, type, item) && isNOU(item)) {
+        if (this.isRevert(elements, type, item) && isNOU(item) || (!isNOU(item) && item.listStyle === 'none')) {
             this.revertList(elements, e);
@@ -797,79 +804,81 @@ this.removeEmptyListElements();
             var element = elements[i];
-            if (this.domNode.contents(element)[0].nodeType === 3 && this.domNode.contents(element)[0].textContent.trim().length === 0) {
-                detach(this.domNode.contents(element)[0]);
-            }
-            var parentNode = elements[i].parentNode;
-            var className = element.getAttribute('class');
-            if (temp.length === 0) {
-                var siblingList = elements[i].querySelectorAll('ul, ol');
-                var firstNode = siblingList[0];
-                if (firstNode) {
-                    var child = firstNode
-                        .querySelectorAll('li');
-                    if (child) {
-                        var nestedElement = createElement(firstNode.tagName);
-                        append([nestedElement], firstNode.parentNode);
-                        var nestedElementLI = createElement('li', { styles: 'list-style-type: none;' });
-                        append([nestedElementLI], nestedElement);
-                        append([firstNode], nestedElementLI);
+            if ((isNullOrUndefined(e.item)) || ((element.nodeName === 'LI' && e.item.listStyle === 'none'))) {
+                if (this.domNode.contents(element)[0].nodeType === 3 && this.domNode.contents(element)[0].textContent.trim().length === 0) {
+                    detach(this.domNode.contents(element)[0]);
+                }
+                var parentNode = elements[i].parentNode;
+                var className = element.getAttribute('class');
+                if (temp.length === 0) {
+                    var siblingList = elements[i].querySelectorAll('ul, ol');
+                    var firstNode = siblingList[0];
+                    if (firstNode) {
+                        var child = firstNode
+                            .querySelectorAll('li');
+                        if (child) {
+                            var nestedElement = createElement(firstNode.tagName);
+                            append([nestedElement], firstNode.parentNode);
+                            var nestedElementLI = createElement('li', { styles: 'list-style-type: none;' });
+                            append([nestedElementLI], nestedElement);
+                            append([firstNode], nestedElementLI);
+                        }
                     }
                 }
-            }
-            if (element.parentNode.insertBefore(this.closeTag(parentNode.tagName), element),
-                'LI' === parentNode.parentNode.tagName || 'OL' === parentNode.parentNode.tagName ||
-                    'UL' === parentNode.parentNode.tagName) {
-                element.parentNode.insertBefore(this.closeTag('LI'), element);
-            }
-            else {
-                var classAttr = '';
-                if (className) {
-                    // eslint-disable-next-line
-                    classAttr += ' class="' + className + '"';
+                if (element.parentNode.insertBefore(this.closeTag(parentNode.tagName), element),
+                    'LI' === parentNode.parentNode.tagName || 'OL' === parentNode.parentNode.tagName ||
+                        'UL' === parentNode.parentNode.tagName) {
+                    element.parentNode.insertBefore(this.closeTag('LI'), element);
                 }
-                if (CONSTANT.DEFAULT_TAG && 0 === element.querySelectorAll(CONSTANT.BLOCK_TAGS.join(', ')).length) {
-                    var wrapperclass = isNullOrUndefined(className) ? ' class="e-rte-wrap-inner"' :
-                        ' class="' + className + ' e-rte-wrap-inner"';
-                    var parentElement = parentNode;
-                    if (!isNOU(parentElement.style.listStyleType)) {
-                        parentNode.style.removeProperty("list-style-type");
+                else {
+                    var classAttr = '';
+                    if (className) {
+                        // eslint-disable-next-line
+                        classAttr += ' class="' + className + '"';
                     }
-                    if (!isNOU(parentElement.style.listStyleImage)) {
-                        parentNode.style.removeProperty("list-style-image");
+                    if (CONSTANT.DEFAULT_TAG && 0 === element.querySelectorAll(CONSTANT.BLOCK_TAGS.join(', ')).length) {
+                        var wrapperclass = isNullOrUndefined(className) ? ' class="e-rte-wrap-inner"' :
+                            ' class="' + className + ' e-rte-wrap-inner"';
+                        var parentElement = parentNode;
+                        if (!isNOU(parentElement.style.listStyleType)) {
+                            parentNode.style.removeProperty("list-style-type");
+                        }
+                        if (!isNOU(parentElement.style.listStyleImage)) {
+                            parentNode.style.removeProperty("list-style-image");
+                        }
+                        if (parentElement.style.length === 0) {
+                            parentNode.removeAttribute("style");
+                        }
+                        var wrapper = '<' + CONSTANT.DEFAULT_TAG + wrapperclass +
+                            this.domNode.attributes(parentElement) + '></' + CONSTANT.DEFAULT_TAG + '>';
+                        if (e.enterAction !== 'BR') {
+                            this.domNode.wrapInner(element, this.domNode.parseHTMLFragment(wrapper));
+                        }
                     }
-                    if (parentElement.style.length === 0) {
-                        parentNode.removeAttribute("style");
+                    else if (this.domNode.contents(element)[0].nodeType === 3) {
+                        var replace = this.domNode.createTagString(CONSTANT.DEFAULT_TAG, parentNode, this.parent.domNode.encode(this.domNode.contents(element)[0].textContent));
+                        this.domNode.replaceWith(this.domNode.contents(element)[0], replace);
                     }
-                    var wrapper = '<' + CONSTANT.DEFAULT_TAG + wrapperclass +
-                        this.domNode.attributes(parentElement) + '></' + CONSTANT.DEFAULT_TAG + '>';
-                    if (e.enterAction !== 'BR') {
-                        this.domNode.wrapInner(element, this.domNode.parseHTMLFragment(wrapper));
+                    else if (this.domNode.contents(element)[0].classList.contains(markerClassName.startSelection) ||
+                        this.domNode.contents(element)[0].classList.contains(markerClassName.endSelection)) {
+                        var replace = this.domNode.createTagString(CONSTANT.DEFAULT_TAG, parentNode, this.domNode.contents(element)[0].outerHTML);
+                        this.domNode.replaceWith(this.domNode.contents(element)[0], replace);
                     }
+                    else {
+                        var childNode = element.firstChild;
+                        className = childNode.getAttribute('class');
+                        attributes(childNode, this.domNode.rawAttributes(parentNode));
+                        if (className && childNode.getAttribute('class')) {
+                            attributes(childNode, { 'class': className + ' ' + childNode.getAttribute('class') });
+                        }
+                    }
+                    append([this.openTag('LI')], element);
+                    prepend([this.closeTag('LI')], element);
                 }
-                else if (this.domNode.contents(element)[0].nodeType === 3) {
-                    var replace = this.domNode.createTagString(CONSTANT.DEFAULT_TAG, parentNode, this.parent.domNode.encode(this.domNode.contents(element)[0].textContent));
-                    this.domNode.replaceWith(this.domNode.contents(element)[0], replace);
+                this.domNode.insertAfter(this.openTag(parentNode.tagName), element);
+                if (parentNode.parentNode.tagName === 'LI') {
+                    parentNode = parentNode.parentNode.parentNode;
                 }
-                else if (this.domNode.contents(element)[0].classList.contains(markerClassName.startSelection) ||
-                    this.domNode.contents(element)[0].classList.contains(markerClassName.endSelection)) {
-                    var replace = this.domNode.createTagString(CONSTANT.DEFAULT_TAG, parentNode, this.domNode.contents(element)[0].outerHTML);
-                    this.domNode.replaceWith(this.domNode.contents(element)[0], replace);
+                if (viewNode.indexOf(parentNode) < 0) {
+                    viewNode.push(parentNode);
                 }
-                else {
-                    var childNode = element.firstChild;
-                    className = childNode.getAttribute('class');
-                    attributes(childNode, this.domNode.rawAttributes(parentNode));
-                    if (className && childNode.getAttribute('class')) {
-                        attributes(childNode, { 'class': className + ' ' + childNode.getAttribute('class') });
-                    }
-                }
-                append([this.openTag('LI')], element);
-                prepend([this.closeTag('LI')], element);
             }
-            this.domNode.insertAfter(this.openTag(parentNode.tagName), element);
-            if (parentNode.parentNode.tagName === 'LI') {
-                parentNode = parentNode.parentNode.parentNode;
-            }
-            if (viewNode.indexOf(parentNode) < 0) {
-                viewNode.push(parentNode);
-            }
         }
@@ -876,0 +885,0 @@ for (var i = 0; i < viewNode.length; i++) {

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

@@ -267,5 +267,5 @@ import { detach, getUniqueID, append, closest, selectAll, select, isNullOrUndefined as isNOU } from '@syncfusion/ej2-base';
                 };
-                if (target.tagName === 'IMG' || target.tagName === 'AUDIO' || target.tagName === 'VIDEO' || target.tagName === 'IFRAME' || (target.classList &&
+                if ((target.tagName === 'IMG' || target.tagName === 'AUDIO' || target.tagName === 'VIDEO' || target.tagName === 'IFRAME' || (target.classList &&
                     (target.classList.contains(classes.CLS_AUDIOWRAP) || target.classList.contains(classes.CLS_CLICKELEM) ||
-                        target.classList.contains(classes.CLS_VID_CLICK_ELEM)))) {
+                        target.classList.contains(classes.CLS_VID_CLICK_ELEM)))) && (x == beforeQuickToolbarArgs.positionX || y == beforeQuickToolbarArgs.positionY)) {
                     _this.setPosition(showPopupData);
@@ -272,0 +272,0 @@ }

src/rich-text-editor/actions/color-picker.d.ts

@@ -42,4 +42,5 @@ import { IRichTextEditor, IRenderer, IColorPickerRenderArgs } from '../base/interface';
     protected addEventListener(): void;
+    private showColorPicker;
     private onPropertyChanged;
     protected removeEventListener(): void;
 }

src/rich-text-editor/actions/color-picker.js

@@ -173,3 +173,12 @@ import { select, detach, extend, isNullOrUndefined } from '@syncfusion/ej2-base';
         this.parent.on(events.bindCssClass, this.setCssClass, this);
+        this.parent.on(events.showColorPicker, this.showColorPicker, this);
     };
+    ColorPickerInput.prototype.showColorPicker = function (e) {
+        if (!isNullOrUndefined(this.fontColorPicker) && (e.toolbarClick === "fontcolor")) {
+            this.fontColorDropDown.toggle();
+        }
+        else if (!isNullOrUndefined(this.backgroundColorPicker) && (e.toolbarClick === "backgroundcolor")) {
+            this.backgroundColorDropDown.toggle();
+        }
+    };
     ColorPickerInput.prototype.onPropertyChanged = function (model) {
@@ -247,2 +256,3 @@ var newProp = model.newProp;
         this.parent.off(events.bindCssClass, this.setCssClass);
+        this.parent.off(events.showColorPicker, this.showColorPicker);
     };
@@ -249,0 +259,0 @@ return ColorPickerInput;

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

@@ -59,2 +59,5 @@ import { addClass, Browser, EventHandler, detach, removeClass, select, selectAll, KeyboardEvents } from '@syncfusion/ej2-base';
                 }
+                if (!isNullOrUndefined(e.target) && (e.target.classList.contains("e-rte-fontcolor-dropdown") || e.target.classList.contains("e-rte-backgroundcolor-dropdown"))) {
+                    this.parent.notify(events.showColorPicker, { toolbarClick: e.target.classList.contains("e-rte-fontcolor-dropdown") ? "fontcolor" : "backgroundcolor" });
+                }
         }
@@ -61,0 +64,0 @@ };

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

@@ -763,2 +763,7 @@ /**
  */
+export declare const showColorPicker: string;
+/**
+ * @hidden
+
+ */
 export declare const blockEmptyNodes: string;
@@ -765,0 +770,0 @@ /**

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

@@ -763,2 +763,7 @@ /**
  */
+export var showColorPicker = 'showColorPicker';
+/**
+ * @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";
@@ -765,0 +770,0 @@ /**

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

@@ -97,3 +97,3 @@ /* eslint-disable */
     'audioUrl': 'http://example.com/audio.mp3',
-    'videoUrl': 'http://example.com/video.mp3',
+    'videoUrl': 'http://example.com/video.mp4',
     'webUrl': 'Web URL',
@@ -100,0 +100,0 @@ 'embedUrl': 'Embed Code',

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

@@ -40,3 +40,7 @@ import { Dialog } from '@syncfusion/ej2-popups';
         e.open = this.open.bind(this);
-        e.position = { X: 'center', Y: this.getDialogPosition() };
+        e.position = {
+            X: 'center',
+            Y: (e.target !== 'string' && e.target.nodeName === 'BODY' &&
+                !isNOU(e.position)) ? e.position.Y : this.getDialogPosition()
+        };
         if (isNOU(e.close)) {
@@ -43,0 +47,0 @@ e.close = this.close.bind(this);

src/rich-text-editor/renderer/iframe-content-renderer.js

@@ -17,3 +17,3 @@ var __extends = (this && this.__extends) || (function () {
 import { getEditValue } from '../base/util';
-var IFRAMEHEADER = "\n<!DOCTYPE html> \n    <html>\n         <head>\n            <meta charset='utf-8' /> \n            <style>\n                @charset \"UTF-8\";\n                body {\n                    font-family: \"Roboto\", sans-serif;\n                    font-size: 14px;\n                }\n                html, body{height: 100%;margin: 0;}\n                body.e-cursor{cursor:default}\n                span.e-selected-node\t{background-color: #939393;color: white;}\n                span.e-selected-node.e-highlight {background-color: #1d9dd8;}\n                body{color:#333;word-wrap:break-word;padding: 8px;box-sizing: border-box;}\n                .e-rte-image, .e-rte-video {border: 0;cursor: pointer;display:\n                    block;float: none;height: auto;margin: 5px auto;max-width: 100%;position: relative;}\n                .e-rte-audio {border: 0;cursor: pointer;display:\n                        block;float: none;margin: 5px auto;max-width: 100%;position: relative;}\n                .e-rte-image.e-imginline, .e-rte-audio.e-audio-inline, .e-rte-video.e-video-inline {display: inline-block;float: none;max-width: calc(100% - (2 * 5px));padding: 1px;vertical-align: bottom;}\n                .e-rte-image.e-imgcenter, .e-rte-video.e-video-center {cursor: pointer;display: block;float: none;margin: 5px auto;max-width: 100%;position: relative;}\n                .e-rte-image.e-imgright, .e-rte-video.e-video-right { float: right; margin: 0 auto;margin-left: 5px;text-align: right;}\n                .e-rte-image.e-imgleft, .e-rte-video.e-video-left {float: left;margin: 0 auto;margin-right: 5px;text-align: left;}\n                .e-img-caption { display: inline-block; float: none; margin: 5px auto; max-width: 100%;position: relative;}\n                .e-img-caption.e-caption-inline {display: inline-block;float: none;\n                    margin: 5px auto;margin-left: 5px;margin-right: 5px;max-width: calc(100% - (2 * 5px));\n                    position: relativetext-align: center;vertical-align: bottom;}\n                .e-rte-img-caption.e-imgcenter {display: contents; margin-left: auto; margin-right: auto;}\n                .e-rte-img-caption.e-imgright {display: contents; margin-left: auto; margin-right: 0;}\n                .e-rte-img-caption.e-imgleft {display: contents;margin-left: 0;margin-right: auto;}\n                .e-img-caption.e-rte-img-caption.e-imgbreak {display: contents;}\n                .e-img-inner {box-sizing: border-box;display: block;font-size: 16px;font-weight: initial;\n                    margin: auto;opacity: .9;text-align: center;width: 100%;}\n                .e-img-wrap {display: inline-block;margin: auto;padding: 0;text-align: center;width: 100%;}\n                .e-imgleft, .e-video-left {float: left;margin: 0 5px 0 0;text-align: left;}\n                .e-imgright, .e-video-right {float: right;margin: 0 0 0 5px;text-align: right;}\n                .e-imgcenter, .e-video-center {cursor: pointer;display: block;float: none;height: auto;margin: 5px auto;max-width: 100%;position: relative;}\n                .e-control img:not(.e-resize) {border: 2px solid transparent; z-index: 1000}\n                .e-imginline , .e-audio-inline, .e-video-inline {display: inline-block;float: none;margin-left: 5px;margin-right: 5px;\n                    max-width: calc(100% - (2 * 5px));vertical-align: bottom;}\n                .e-imgbreak, .e-audio-break, .e-video-break {border: 0;cursor: pointer;\n                    display: block;float: none;height: auto;margin: 5px auto;max-width: 100%;position: relative;}\n                .e-rte-image.e-img-focus:not(.e-resize), .e-audio-focus:not(.e-resize), .e-video-focus:not(.e-resize) {border: solid 2px #4a90e2;}\n                img.e-img-focus::selection, audio.e-audio-focus::selection, .e-video-focus::selection { background: transparent;color: transparent;}\n                span.e-rte-imageboxmark, span.e-rte-videoboxmark {  width: 10px; height: 10px; position: absolute; display: block;\n                    background: #4a90e2; border: 1px solid #fff; z-index: 1000;}\n                .e-mob-rte.e-mob-span span.e-rte-imageboxmark, .e-mob-rte.e-mob-span span.e-rte-videoboxmark { background: #4a90e2; border: 1px solid #fff; }\n                .e-mob-rte span.e-rte-imageboxmark, .e-mob-rte span.e-rte-videoboxmark { background: #fff; border: 1px solid #4a90e2;\n                    border-radius: 15px; height: 20px; width: 20px; }\n                .e-mob-rte.e-mob-span span.e-rte-imageboxmark, .e-mob-rte.e-mob-span span.e-rte-videoboxmark { background: #4a90e2; border: 1px solid #fff; }\n                .e-rte-content .e-content img.e-resize, .e-rte-content .e-content video.e-resize { z-index: 1000; }\n                .e-img-caption .e-img-inner { outline: 0; }\n                .e-img-caption a:focus-visible { outline: none; }\n                .e-img-caption .e-rte-image.e-imgright, .e-img-caption .e-rte-image.e-imgleft { float: none; margin: 0;}\n                body{box-sizing: border-box;min-height: 100px;outline: 0 solid transparent;\n                    overflow-x: auto;padding: 16px;position: relative;text-align: inherit;z-index: 2;}\n                p{margin: 0 0 10px;margin-bottom: 10px;}\n                li{margin-bottom: 10px;}\n                h1{font-size: 2.17em;font-weight: 400;line-height: 1;margin: 10px 0;}\n                h2{font-size: 1.74em;font-weight: 400;margin: 10px 0;}\n                h3{font-size: 1.31em;font-weight: 400;margin: 10px 0;}\n                h4{font-size: 16px;font-weight: 400;line-height: 1.5;margin: 0;}\n                h5{font-size: 00.8em;font-weight: 400;margin: 0;}\n                h6{font-size: 00.65em;font-weight: 400;margin: 0;}\n                blockquote{margin: 10px 0;margin-left: 0;padding-left: 5px;border-left: solid 2px #5c5c5c;}\n                pre{background-color: inherit;border: 0;border-radius: 0;color: #333;\n                    font-size: inherit;line-height: inherit;margin: 0 0 10px;overflow: visible;padding: 0;\n                    white-space: pre-wrap;word-break: inherit;word-wrap: break-word;}\n                strong, b{font-weight: 700;}\n                a{text-decoration: none;user-select: auto;}\n                a:hover{text-decoration: underline;};\n                p:last-child, pre:last-child, blockquote:last-child{margin-bottom: 0;}\n                h3+h4, h4+h5, h5+h6{margin-top: 00.6em;}\n                ul:last-child{margin-bottom: 0;}\n                table { border-collapse: collapse; empty-cells: show;}\n                table td,table th {border: 1px solid #BDBDBD; height: 20px; padding: 2px 5px; vertical-align: middle;}\n                table.e-alternate-border tbody tr:nth-child(2n) {background-color: #F5F5F5;}\n                table th {background-color: #E0E0E0;}\n                table.e-dashed-border td,table.e-dashed-border th { border: 1px dashed #BDBDBD} \n                table .e-cell-select {border: 1px double #4a90e2;}\n                span.e-table-box { cursor: nwse-resize; display: block; height: 10px; position: absolute; width: 10px; }\n                span.e-table-box.e-rmob {height: 14px;width: 14px;}\n                .e-row-resize, .e-column-resize { background-color: transparent; background-repeat: repeat;\n                    bottom: 0;cursor: col-resize;height: 1px;overflow: visible;position: absolute;width: 1px; }\n                .e-row-resize { cursor: row-resize; height: 1px;}\n                .e-table-rhelper { cursor: col-resize; opacity: .87;position: absolute;}\n                .e-table-rhelper.e-column-helper { width: 1px; }\n                .e-table-rhelper.e-row-helper {height: 1px;}\n                .e-reicon::before { border-bottom: 6px solid transparent; border-right: 6px solid;\n                    border-top: 6px solid transparent; content: ''; display: block; height: 0;\n                    position: absolute; right: 4px; top: 4px; width: 20px; }\n                .e-reicon::after { border-bottom: 6px solid transparent; border-left: 6px solid;\n                    border-top: 6px solid transparent; content: ''; display: block;\n                    height: 0; left: 4px; position: absolute; top: 4px; width: 20px; z-index: 3; }\n                .e-row-helper.e-reicon::after { top: 10px; transform: rotate(90deg); }\n                .e-row-helper.e-reicon::before { left: 4px; top: -20px; transform: rotate(90deg); }\n                span.e-table-box { background-color: #ffffff; border: 1px solid #BDBDBD; }\n                span.e-table-box.e-rbox-select { background-color: #BDBDBD; border: 1px solid #BDBDBD; }\n                .e-table-rhelper { background-color: #4a90e2;}\n                .e-rtl { direction: rtl; }\n                .e-rte-placeholder::before { content: attr(placeholder); opacity: 0.54; overflow: hidden; padding-top: 16px; position: absolute; text-align: start; top: 0; z-index: 1; }\n            </style>\n        </head>";
+var IFRAMEHEADER = "\n<!DOCTYPE html> \n    <html>\n         <head>\n            <meta charset='utf-8' /> \n            <style>\n                @charset \"UTF-8\";\n                body {\n                    font-family: \"Roboto\", sans-serif;\n                    font-size: 14px;\n                }\n                html, body{height: 100%;margin: 0;}\n                body.e-cursor{cursor:default}\n                span.e-selected-node\t{background-color: #939393;color: white;}\n                span.e-selected-node.e-highlight {background-color: #1d9dd8;}\n                body{color:#333;word-wrap:break-word;padding: 8px;box-sizing: border-box;}\n                .e-rte-image, .e-rte-video {border: 0;cursor: pointer;display:\n                    block;float: none;height: auto;margin: 5px auto;max-width: 100%;position: relative;}\n                .e-rte-audio {border: 0;cursor: pointer;display:\n                        block;float: none;margin: 5px auto;max-width: 100%;position: relative;}\n                .e-rte-image.e-imginline, .e-rte-audio.e-audio-inline, .e-rte-video.e-video-inline {display: inline-block;float: none;\n                    margin-left: 5px;margin-right: 5px;max-width: calc(100% - (2 * 5px));padding: 1px;vertical-align: bottom;}\n                .e-rte-image.e-imgcenter, .e-rte-video.e-video-center {cursor: pointer;display: block;float: none;margin: 5px auto;max-width: 100%;position: relative;}\n                .e-rte-image.e-imgright, .e-rte-video.e-video-right { float: right; margin: 0 auto;margin-left: 5px;text-align: right;}\n                .e-rte-image.e-imgleft, .e-rte-video.e-video-left {float: left;margin: 0 auto;margin-right: 5px;text-align: left;}\n                .e-img-caption { display: inline-block; float: none; margin: 5px auto; max-width: 100%;position: relative;}\n                .e-img-caption.e-caption-inline {display: inline-block;float: none;\n                    margin: 5px auto;margin-left: 5px;margin-right: 5px;max-width: calc(100% - (2 * 5px));\n                    position: relativetext-align: center;vertical-align: bottom;}\n                .e-rte-img-caption.e-imgcenter {display: contents; margin-left: auto; margin-right: auto;}\n                .e-rte-img-caption.e-imgright {display: contents; margin-left: auto; margin-right: 0;}\n                .e-rte-img-caption.e-imgleft {display: contents;margin-left: 0;margin-right: auto;}\n                .e-img-caption.e-rte-img-caption.e-imgbreak {display: contents;}\n                .e-img-inner {box-sizing: border-box;display: block;font-size: 16px;font-weight: initial;\n                    margin: auto;opacity: .9;text-align: center;width: 100%;}\n                .e-img-wrap {display: inline-block;margin: auto;padding: 0;text-align: center;width: 100%;}\n                .e-imgleft, .e-video-left {float: left;margin: 0 5px 0 0;text-align: left;}\n                .e-imgright, .e-video-right {float: right;margin: 0 0 0 5px;text-align: right;}\n                .e-imgcenter, .e-video-center {cursor: pointer;display: block;float: none;height: auto;margin: 5px auto;max-width: 100%;position: relative;}\n                .e-control img:not(.e-resize) {border: 2px solid transparent; z-index: 1000}\n                .e-imginline , .e-audio-inline, .e-video-inline {display: inline-block;float: none;margin-left: 5px;margin-right: 5px;\n                    max-width: calc(100% - (2 * 5px));vertical-align: bottom;}\n                .e-imgbreak, .e-audio-break, .e-video-break {border: 0;cursor: pointer;\n                    display: block;float: none;height: auto;margin: 5px auto;max-width: 100%;position: relative;}\n                .e-rte-image.e-img-focus:not(.e-resize), .e-audio-focus:not(.e-resize), .e-video-focus:not(.e-resize) {border: solid 2px #4a90e2;}\n                img.e-img-focus::selection, audio.e-audio-focus::selection, .e-video-focus::selection { background: transparent;color: transparent;}\n                span.e-rte-imageboxmark, span.e-rte-videoboxmark {  width: 10px; height: 10px; position: absolute; display: block;\n                    background: #4a90e2; border: 1px solid #fff; z-index: 1000;}\n                .e-mob-rte.e-mob-span span.e-rte-imageboxmark, .e-mob-rte.e-mob-span span.e-rte-videoboxmark { background: #4a90e2; border: 1px solid #fff; }\n                .e-mob-rte span.e-rte-imageboxmark, .e-mob-rte span.e-rte-videoboxmark { background: #fff; border: 1px solid #4a90e2;\n                    border-radius: 15px; height: 20px; width: 20px; }\n                .e-mob-rte.e-mob-span span.e-rte-imageboxmark, .e-mob-rte.e-mob-span span.e-rte-videoboxmark { background: #4a90e2; border: 1px solid #fff; }\n                .e-rte-content .e-content img.e-resize, .e-rte-content .e-content video.e-resize { z-index: 1000; }\n                .e-img-caption .e-img-inner { outline: 0; }\n                .e-img-caption a:focus-visible { outline: none; }\n                .e-img-caption .e-rte-image.e-imgright, .e-img-caption .e-rte-image.e-imgleft { float: none; margin: 0;}\n                body{box-sizing: border-box;min-height: 100px;outline: 0 solid transparent;\n                    overflow-x: auto;padding: 16px;position: relative;text-align: inherit;z-index: 2;}\n                p{margin: 0 0 10px;margin-bottom: 10px;}\n                li{margin-bottom: 10px;}\n                h1{font-size: 2.17em;font-weight: 400;line-height: 1;margin: 10px 0;}\n                h2{font-size: 1.74em;font-weight: 400;margin: 10px 0;}\n                h3{font-size: 1.31em;font-weight: 400;margin: 10px 0;}\n                h4{font-size: 16px;font-weight: 400;line-height: 1.5;margin: 0;}\n                h5{font-size: 00.8em;font-weight: 400;margin: 0;}\n                h6{font-size: 00.65em;font-weight: 400;margin: 0;}\n                blockquote{margin: 10px 0;margin-left: 0;padding-left: 5px;border-left: solid 2px #5c5c5c;}\n                pre{background-color: inherit;border: 0;border-radius: 0;color: #333;\n                    font-size: inherit;line-height: inherit;margin: 0 0 10px;overflow: visible;padding: 0;\n                    white-space: pre-wrap;word-break: inherit;word-wrap: break-word;}\n                strong, b{font-weight: 700;}\n                a{text-decoration: none;user-select: auto;}\n                a:hover{text-decoration: underline;};\n                p:last-child, pre:last-child, blockquote:last-child{margin-bottom: 0;}\n                h3+h4, h4+h5, h5+h6{margin-top: 00.6em;}\n                ul:last-child{margin-bottom: 0;}\n                table { border-collapse: collapse; empty-cells: show;}\n                table td,table th {border: 1px solid #BDBDBD; height: 20px; padding: 2px 5px; vertical-align: middle;}\n                table.e-alternate-border tbody tr:nth-child(2n) {background-color: #F5F5F5;}\n                table th {background-color: #E0E0E0;}\n                table.e-dashed-border td,table.e-dashed-border th { border: 1px dashed #BDBDBD} \n                table .e-cell-select {border: 1px double #4a90e2;}\n                span.e-table-box { cursor: nwse-resize; display: block; height: 10px; position: absolute; width: 10px; }\n                span.e-table-box.e-rmob {height: 14px;width: 14px;}\n                .e-row-resize, .e-column-resize { background-color: transparent; background-repeat: repeat;\n                    bottom: 0;cursor: col-resize;height: 1px;overflow: visible;position: absolute;width: 1px; }\n                .e-row-resize { cursor: row-resize; height: 1px;}\n                .e-table-rhelper { cursor: col-resize; opacity: .87;position: absolute;}\n                .e-table-rhelper.e-column-helper { width: 1px; }\n                .e-table-rhelper.e-row-helper {height: 1px;}\n                .e-reicon::before { border-bottom: 6px solid transparent; border-right: 6px solid;\n                    border-top: 6px solid transparent; content: ''; display: block; height: 0;\n                    position: absolute; right: 4px; top: 4px; width: 20px; }\n                .e-reicon::after { border-bottom: 6px solid transparent; border-left: 6px solid;\n                    border-top: 6px solid transparent; content: ''; display: block;\n                    height: 0; left: 4px; position: absolute; top: 4px; width: 20px; z-index: 3; }\n                .e-row-helper.e-reicon::after { top: 10px; transform: rotate(90deg); }\n                .e-row-helper.e-reicon::before { left: 4px; top: -20px; transform: rotate(90deg); }\n                span.e-table-box { background-color: #ffffff; border: 1px solid #BDBDBD; }\n                span.e-table-box.e-rbox-select { background-color: #BDBDBD; border: 1px solid #BDBDBD; }\n                .e-table-rhelper { background-color: #4a90e2;}\n                .e-rtl { direction: rtl; }\n                .e-rte-placeholder::before { content: attr(placeholder); opacity: 0.54; overflow: hidden; padding-top: 16px; position: absolute; text-align: start; top: 0; z-index: 1; }\n            </style>\n        </head>";
 /**
@@ -20,0 +20,0 @@ * Content module is used to render Rich Text Editor content

src/rich-text-editor/renderer/table-module.d.ts

@@ -36,3 +36,2 @@ import { Dialog, Popup } from '@syncfusion/ej2-popups';
     private currentColumnResize;
-    private currentMarginLeft;
     private previousTableElement;
@@ -87,2 +86,3 @@ private constructor();
     private resizing;
+    private getCurrentColWidth;
     private getCurrentTableWidth;
@@ -93,2 +93,3 @@ private findFirstLastColCells;
     private resizeEnd;
+    private resetResizeHelper;
     private resizeBtnInit;
@@ -129,2 +130,3 @@ private addRow;
     private afterKeyDown;
+    private updateResizeIconPosition;
 }

src/rich-text-editor/renderer/toolbar-renderer.js

@@ -111,2 +111,15 @@ import { addClass, Browser, removeClass, formatUnit, isNullOrUndefined, isNullOrUndefined as isNOU } from '@syncfusion/ej2-base';
         }
+        if (this.parent.showTooltip) {
+            this.dropdownTooltip = new Tooltip({
+                target: '[aria-owns="' + this.parent.getID() + '"].e-rte-elements [title]',
+                showTipPointer: true,
+                openDelay: 400,
+                opensOn: 'Hover',
+                beforeRender: this.tooltipBeforeRender.bind(this),
+                cssClass: this.parent.getCssClass(),
+                windowCollision: true,
+                position: 'BottomCenter'
+            });
+            this.dropdownTooltip.appendTo(args.element);
+        }
         this.parent.notify(events.selectionSave, args);
@@ -156,15 +169,2 @@ };
         }
-        if (this.parent.showTooltip) {
-            this.dropdownTooltip = new Tooltip({
-                target: '[aria-owns="' + this.parent.getID() + '"].e-rte-elements [title]',
-                showTipPointer: true,
-                openDelay: 400,
-                opensOn: 'Hover',
-                beforeRender: this.tooltipBeforeRender.bind(this),
-                cssClass: this.parent.getCssClass(),
-                windowCollision: true,
-                position: 'BottomCenter'
-            });
-            this.dropdownTooltip.appendTo(document.body);
-        }
     };
@@ -171,0 +171,0 @@ /**

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

27672809

increased by0.47%

Lines of code

239412

increased by0.45%

Worsened metrics

Number of package files

407

decreased by-0.49%

Dependency changes

• Updated@syncfusion/ej2-navigations@~24.2.8

• Updated@syncfusion/ej2-popups@~24.2.8