@syncfusion/ej2-richtexteditor 24.2.3 → 24.2.4

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 24.2.3
+*  version : 24.2.4
 *  Copyright Syncfusion Inc. 2001 - 2023. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-richtexteditor@*",
-  "_id": "@syncfusion/ej2-richtexteditor@24.1.47",
+  "_id": "@syncfusion/ej2-richtexteditor@24.2.3",
   "_inBundle": false,
-  "_integrity": "sha512-ITHuJcI8Vi0NzcpJ2//FUUah+iuPTk39qOb4jZQCJaLsoDlUsu/m2fzybDOdR6X84st4zXZb2oxvL6ANoz1G3Q==",
+  "_integrity": "sha512-qjy4z7YGj17wCO4I5dW2kqGyRSaUxHXprYekBaF78kmtSAbFQjy8QFO9+15bOUEcNTPaTaPWHNvZ61Vm3+qOEw==",
   "_location": "/@syncfusion/ej2-richtexteditor",
   "_phantomChildren": {},
   "_requested": {
@@ -25,8 +25,8 @@
     "/@syncfusion/ej2-react-richtexteditor",
     "/@syncfusion/ej2-vue-richtexteditor"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-richtexteditor/-/ej2-richtexteditor-24.1.47.tgz",
-  "_shasum": "93709601606f02a03d67372a08a4f34792d6087e",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-richtexteditor/-/ej2-richtexteditor-24.2.3.tgz",
+  "_shasum": "c6180082b7903ea03940e96f5911e093ee6fab92",
   "_spec": "@syncfusion/ej2-richtexteditor@*",
   "_where": "/jenkins/workspace/elease-automation_release_24.1.1/packages/included",
   "author": {
@@ -40,8 +40,8 @@
     "@syncfusion/ej2-base": "~24.2.3",
     "@syncfusion/ej2-buttons": "~24.2.3",
     "@syncfusion/ej2-filemanager": "~24.2.3",
-    "@syncfusion/ej2-inputs": "~24.2.3",
-    "@syncfusion/ej2-navigations": "~24.2.3",
+    "@syncfusion/ej2-inputs": "~24.2.4",
+    "@syncfusion/ej2-navigations": "~24.2.4",
     "@syncfusion/ej2-popups": "~24.2.3",
     "@syncfusion/ej2-splitbuttons": "~24.2.3"
   },
@@ -69,6 +69,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "24.2.3",
+  "version": "24.2.4",
   "sideEffects": false
 }

package/src/common/util.d.ts

@@ -34,3 +34,9 @@ export declare function getDefaultHtmlTbStatus(): IToolbarStatus;
  * @hidden
  */
 export declare function getDefaultMDTbStatus(): IToolbarStatus;
+/**
+ * @param {Range} range - specifies the range
+ * @returns {void}
+ * @hidden
+ */
+export declare function nestedListCleanUp(range: Range): void;

package/src/common/util.js

@@ -190,3 +190,30 @@ export function getDefaultMDTbStatus() {
         formats: null
     };
 }
+/**
+ * @param {Range} range - specifies the range
+ * @returns {void}
+ * @hidden
+ */
+export function nestedListCleanUp(range) {
+    if (range.startContainer.parentElement.closest('ol,ul') !== null && range.endContainer.parentElement.closest('ol,ul') !== null) {
+        range.extractContents();
+        while ((range.startContainer.nodeName === "#text" ? range.startContainer.parentElement : range.startContainer).querySelectorAll('li :empty').length > 0 ||
+            (range.startContainer.nodeName === "#text" ? range.startContainer.parentElement : range.startContainer).querySelectorAll('ol :empty').length > 0) {
+            var emptyLI = (range.startContainer.nodeName === "#text" ? range.startContainer.parentElement : range.startContainer).querySelectorAll('li :empty');
+            if (emptyLI.length > 0) {
+                emptyLI.forEach(function (item) {
+                    item.remove();
+                });
+            }
+        }
+        var liElem = (range.startContainer.nodeName === "#text" ? range.startContainer.parentElement : range.startContainer).querySelectorAll("li");
+        if (liElem.length > 0) {
+            liElem.forEach(function (item) {
+                if (item.firstChild.nodeName === "OL" || item.firstChild.nodeName === "UL") {
+                    item.style.listStyleType = "none";
+                }
+            });
+        }
+    }
+}

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

@@ -3,7 +3,7 @@ import { NodeCutter } from './nodecutter';
 import * as CONSTANT from './../base/constant';
 import { detach, Browser, isNullOrUndefined as isNOU, createElement, closest } from '@syncfusion/ej2-base';
 import { InsertMethods } from './insert-methods';
-import { updateTextNode } from './../../common/util';
+import { updateTextNode, nestedListCleanUp } from './../../common/util';
 /**
  * Insert a HTML Node or Text
  *
@@ -82,7 +82,12 @@ var InsertHtml = /** @class */ (function () {
                     lasNode.textContent.length : lasNode.childNodes.length);
                 range = nodeSelection.getRange(docElement);
             }
-            range.extractContents();
+            if (range.startContainer.parentElement.closest('ol,ul') !== null && range.endContainer.parentElement.closest('ol,ul') !== null) {
+                nestedListCleanUp(range);
+            }
+            else {
+                range.extractContents();
+            }
             if (insertNode.tagName === 'TABLE') {
                 this.removeEmptyElements(editNode);
             }

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

@@ -1403,7 +1403,7 @@ var RichTextEditor = /** @class */ (function (_super) {
             if (this.valueContainer) {
                 this.valueContainer.value = (this.enableHtmlEncode) ? this.value : value;
             }
-            if (this.editorMode === 'HTML' && this.inputElement && this.inputElement.innerHTML.replace('&', '&').trim() !== value.trim()) {
+            if (this.editorMode === 'HTML' && this.inputElement && this.inputElement.innerHTML.trim() !== value.trim()) {
                 this.inputElement.innerHTML = value;
             }
             else if (this.editorMode === 'Markdown' && this.inputElement
@@ -1424,9 +1424,6 @@ var RichTextEditor = /** @class */ (function (_super) {
                 }
                 else {
                     this.inputElement.innerHTML = '<p><br/></p>';
-                    if (value === '' && this.formatter && this.inputElement) {
-                        this.formatter.editorManager.nodeSelection.setCursorPoint(this.contentModule.getDocument(), this.inputElement.firstElementChild, this.inputElement.firstElementChild.childElementCount);
-                    }
                 }
             }
             else {
@@ -2589,6 +2586,9 @@ var RichTextEditor = /** @class */ (function (_super) {
                 if (item[j].classList.length === 0) {
                     item[j].removeAttribute('class');
                 }
+                if (item[j].nodeName === 'IMG' && item[j].style.outline !== '') {
+                    item[j].style.outline = '';
+                }
             }
         }
     };

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

@@ -48,7 +48,7 @@ export var defaultLocale = {
     'audioLayoutOption': 'Layout option',
     'videoLayoutOption': 'Layout option',
     'align': 'Align',
-    'caption': 'Image Caption',
+    'caption': 'Caption',
     'remove': 'Remove',
     'insertLink': 'Insert Link',
     'display': 'Display',
@@ -112,14 +112,14 @@ export var defaultLocale = {
     'cellspacing': 'Cell Spacing',
     'columns': 'Number of columns',
     'rows': 'Number of rows',
-    'tableRows': 'Table Rows',
-    'tableColumns': 'Table Columns',
+    'tableRows': 'Row',
+    'tableColumns': 'Column',
     'tableCellHorizontalAlign': 'Table Cell Horizontal Align',
-    'tableCellVerticalAlign': 'Table Vertical Align',
+    'tableCellVerticalAlign': 'Vertical Align',
     'createTable': 'Create Table',
     'removeTable': 'Remove Table',
-    'tableHeader': 'Table Header',
-    'tableRemove': 'Table Remove',
+    'tableHeader': 'Header Row',
+    'tableRemove': 'Delete',
     'tableCellBackground': 'Table Cell Background',
     'tableEditProperties': 'Table Edit Properties',
     'styles': 'Styles',

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

@@ -14,7 +14,7 @@ var __extends = (this && this.__extends) || (function () {
 import { ContentRender } from '../renderer/content-renderer';
 import { isNullOrUndefined } from '@syncfusion/ej2-base';
 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-audio, .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-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-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 {  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 { background: #4a90e2; border: 1px solid #fff; }\n                .e-mob-rte span.e-rte-imageboxmark { 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 { 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-audio, .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-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-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>";
 /**
  * Content module is used to render Rich Text Editor content
  *

package/src/rich-text-editor/renderer/video-module.d.ts

@@ -23,6 +23,7 @@ export declare class Video {
     private isAllowedTypes;
     private pageX;
     private pageY;
+    private mouseX;
     private dialogRenderObj;
     private deletedVid;
     private changedWidthValue;
@@ -51,6 +52,7 @@ export declare class Video {
     private vidResizePos;
     private calcPos;
     private setAspectRatio;
+    private updateVidEleWidth;
     private pixToPerc;
     private vidDupMouseMove;
     private resizing;

package/src/rich-text-editor/renderer/video-module.js

@@ -13,6 +13,7 @@ var Video = /** @class */ (function () {
         this.isAllowedTypes = true;
         this.pageX = null;
         this.pageY = null;
+        this.mouseX = null;
         this.deletedVid = [];
         this.parent = parent;
         this.rteID = parent.element.id;
@@ -412,62 +413,50 @@ var Video = /** @class */ (function () {
         if (isNullOrUndefined(vidEleStyle)) {
             return;
         }
-        // eslint-disable-next-line
+        /* eslint-disable */
         var width = vidEleStyle.width !== '' ? vidEleStyle.width.match(/^\d+(\.\d*)?%$/g) ? parseFloat(vidEleStyle.width) :
             parseInt(vidEleStyle.width, 10) : vid.style.width !== '' ? vid.style.width : vid.width;
         var height = vidEleStyle.height !== '' ? parseInt(vidEleStyle.height, 10) : vid.style.height !== '' ? vid.style.height : vid.height;
+        width = width.toString().match(/\b\d+(\.\d*)?(%|$)\b/g) ? parseFloat(width.toString()) : parseInt(width.toString(), 10);
+        height = height.toString().match(/\b\d+(\.\d*)?(%|$)\b/g) ? parseFloat(height.toString()) : parseInt(height.toString(), 10);
+        /* eslint-enable */
         if (width > height) {
             vid.style.minWidth = this.parent.insertVideoSettings.minWidth === 0 ? '200px' : formatUnit(this.parent.insertVideoSettings.minWidth);
             vid.style.minHeight = this.parent.insertVideoSettings.minHeight === 0 ? '90px' : formatUnit(this.parent.insertVideoSettings.minHeight);
             if (this.parent.insertVideoSettings.resizeByPercent) {
-                if (parseInt('' + vid.getBoundingClientRect().width + '', 10) !== 0 && parseInt('' + width + '', 10) !== 0) {
-                    var percentageValue = this.pixToPerc((parseInt(width.toString(), 10) / parseInt(height.toString(), 10) * expectedY), (vid.previousElementSibling || vid.parentElement));
-                    vid.style.width = Math.min(Math.round((percentageValue / vid.getBoundingClientRect().width) * expectedX * 100) / 100, 100) + '%';
-                }
-                else {
-                    vid.style.width = this.pixToPerc(parseInt(width.toString(), 10) / parseInt(height.toString(), 10) * expectedY, (vid.previousElementSibling || vid.parentElement)) + '%';
-                }
-                vid.style.height = null;
-                vid.removeAttribute('height');
+                this.updateVidEleWidth(vid, width, height, expectedX, expectedY);
             }
             else if ((vid.style.width === '' && vid.style.height !== '') || (vidEleStyle.width === '' && vidEleStyle.height !== '')) {
                 vid.style.height = expectedY + 'px';
             }
             else if ((vid.style.width !== '' && vid.style.height === '') || (vidEleStyle.width !== '' && vidEleStyle.height === '')) {
-                var currentWidth = ((parseInt(width.toString(), 10) / parseInt(height.toString(), 10) * expectedY) +
-                    parseInt(width.toString(), 10) / parseInt(height.toString(), 10)) <
+                var currentWidth = ((width / height * expectedY) +
+                    width / height) <
                     (this.parent.inputElement.getBoundingClientRect().right - 32) ?
-                    ((parseInt(width.toString(), 10) / parseInt(height.toString(), 10) * expectedY) +
-                        parseInt(width.toString(), 10) / parseInt(height.toString(), 10)) :
+                    ((width / height * expectedY) +
+                        width / height) :
                     (this.parent.inputElement.getBoundingClientRect().right - 32);
                 vid.style.width = currentWidth.toString() + 'px';
             }
             else if (vid.style.width !== '' || vidEleStyle.width !== '') {
-                var currentWidth = (parseInt(width.toString(), 10) / parseInt(height.toString(), 10) * expectedY) <
+                var currentWidth = (width / height * expectedY) <
                     (this.parent.inputElement.getBoundingClientRect().right - 32) ?
-                    (parseInt(width.toString(), 10) / parseInt(height.toString(), 10) * expectedY) :
+                    (width / height * expectedY) :
                     (this.parent.inputElement.getBoundingClientRect().right - 32);
                 vid.style.width = currentWidth + 'px';
                 vid.style.height = expectedY + 'px';
             }
             else {
-                vid.setAttribute('width', (parseInt(((parseInt(width.toString(), 10) / parseInt(height.toString(), 10) * expectedY) + parseInt(width.toString(), 10) / parseInt(height.toString(), 10)).toString(), 10)).toString());
+                vid.setAttribute('width', (parseInt(((width / height * expectedY) + width / height).toString(), 10)).toString());
             }
         }
         else if (height > width) {
             if (this.parent.insertVideoSettings.resizeByPercent) {
-                if (parseInt('' + vid.getBoundingClientRect().width + '', 10) !== 0 && parseInt('' + width + '', 10) !== 0) {
-                    vid.style.width = Math.min(Math.round((parseInt(width.toString(), 10) / vid.getBoundingClientRect().width) * expectedX * 100) / 100, 100) + '%';
-                }
-                else {
-                    vid.style.width = this.pixToPerc((expectedX / parseInt(height.toString(), 10) * expectedY), (vid.previousElementSibling || vid.parentElement)) + '%';
-                }
-                vid.style.height = null;
-                vid.removeAttribute('height');
+                this.updateVidEleWidth(vid, width, height, expectedX, expectedY);
             }
             else if (vid.style.width !== '' || vidEleStyle.width !== '') {
                 vid.style.width = expectedX + 'px';
-                vid.style.height = (parseInt(height.toString(), 10) / parseInt(width.toString(), 10) * expectedX) + 'px';
+                vid.style.height = (height / width * expectedX) + 'px';
             }
             else {
                 vid.setAttribute('width', this.resizeBtnStat.botRight ? (this.getPointX(e.event) - vid.getBoundingClientRect().left).toString() : expectedX.toString());
@@ -485,6 +474,23 @@ var Video = /** @class */ (function () {
             }
         }
     };
+    Video.prototype.updateVidEleWidth = function (vid, width, height, expectedX, expectedY) {
+        if (parseInt('' + vid.getBoundingClientRect().width + '', 10) !== 0 && parseInt('' + width + '', 10) !== 0) {
+            var original = vid.offsetWidth + this.mouseX;
+            var finalWidthByPerc = (original / vid.offsetWidth) * (parseFloat(vid.style.width).toString() === 'NaN' ? (vid.offsetWidth / (parseFloat(getComputedStyle(this.parent.element).width)) * 100) : parseFloat(vid.style.width));
+            vid.style.width = ((finalWidthByPerc > 3) ? finalWidthByPerc : 3) + '%';
+        }
+        else {
+            if (width > height) {
+                vid.style.width = this.pixToPerc(width / height * expectedY, (vid.previousElementSibling || vid.parentElement)) + '%';
+            }
+            else {
+                vid.style.width = this.pixToPerc((expectedX / height * expectedY), (vid.previousElementSibling || vid.parentElement)) + '%';
+            }
+        }
+        vid.style.height = null;
+        vid.removeAttribute('height');
+    };
     Video.prototype.pixToPerc = function (expected, parentEle) {
         return expected / parseFloat(getComputedStyle(parentEle).width) * 100;
     };
@@ -526,6 +532,7 @@ var Video = /** @class */ (function () {
         var height = parseInt(this.vidDupPos.height, 10) + mouseY;
         this.pageX = pageX;
         this.pageY = pageY;
+        this.mouseX = mouseX;
         if (this.resizeBtnStat.botRight) {
             this.vidDupMouseMove(width + 'px', height + 'px', e);
         }

package/src/selection/selection.js

@@ -90,6 +90,9 @@ var NodeSelection = /** @class */ (function () {
                 || this.isChildNode(nodeCollection, startNode))) {
             return null;
         }
+        if (startNode.nodeType === 3 && startNode.previousSibling === endNode && endNode.nodeName === 'IMG') {
+            return null;
+        }
         if (nodeCollection.indexOf(startNode.firstChild) === -1 && startNode.firstChild && !this.isChildNode(nodeCollection, startNode)) {
             return startNode.firstChild;
         }

package/styles/material3-dark.css

@@ -2566,7 +2566,9 @@
 }
 
 .e-rte-toolbar .e-rte-table-popup .e-insert-table-btn {
-  border-color: var(--color-sf-outline);
+  font-weight: 400;
+  border: 1px solid rgba(var(--color-sf-outline));
+  border-radius: 20px;
 }
 
 .e-dialog .e-dlg-header-content + .e-dlg-content {
@@ -3255,6 +3257,10 @@ span.e-table-box.e-rbox-select {
   border-top-right-radius: 8px;
 }
 
+.e-rte-toolbar .e-rte-table-popup .e-insert-table-btn {
+  color: rgba(var(--color-sf-on-surface));
+}
+
 .e-richtexteditor.e-rte-tb-expand .e-rte-content-border {
   border-bottom: 0;
 }

package/styles/material3.css

@@ -2622,7 +2622,9 @@
 }
 
 .e-rte-toolbar .e-rte-table-popup .e-insert-table-btn {
-  border-color: var(--color-sf-outline);
+  font-weight: 400;
+  border: 1px solid rgba(var(--color-sf-outline));
+  border-radius: 20px;
 }
 
 .e-dialog .e-dlg-header-content + .e-dlg-content {
@@ -3311,6 +3313,10 @@ span.e-table-box.e-rbox-select {
   border-top-right-radius: 8px;
 }
 
+.e-rte-toolbar .e-rte-table-popup .e-insert-table-btn {
+  color: rgba(var(--color-sf-on-surface));
+}
+
 .e-richtexteditor.e-rte-tb-expand .e-rte-content-border {
   border-bottom: 0;
 }

package/styles/rich-text-editor/_layout.scss

@@ -2018,7 +2018,9 @@
 
   @if $skin-name == 'Material3' {
     .e-rte-toolbar .e-rte-table-popup .e-insert-table-btn{
-      border-color: $outline;
+      font-weight: $font-weight;
+      border: 1px solid rgba($info-outline-border);
+      border-radius: 20px;
     }
     .e-dialog .e-dlg-header-content + .e-dlg-content{
       padding-top: 0;

package/styles/rich-text-editor/_theme.scss

@@ -822,6 +822,9 @@
     .e-bigger .e-rtl .e-rte-toolbar .e-toolbar-items {
       border-top-right-radius: $rte-border-top-right-radius;
     }
+    .e-rte-toolbar .e-rte-table-popup .e-insert-table-btn{
+      color: $rte-content-color;
+    }
   }
   // Blazor styles start
   .e-richtexteditor.e-rte-tb-expand .e-rte-content-border {

package/styles/rich-text-editor/material3-dark.css

@@ -2566,7 +2566,9 @@
 }
 
 .e-rte-toolbar .e-rte-table-popup .e-insert-table-btn {
-  border-color: var(--color-sf-outline);
+  font-weight: 400;
+  border: 1px solid rgba(var(--color-sf-outline));
+  border-radius: 20px;
 }
 
 .e-dialog .e-dlg-header-content + .e-dlg-content {
@@ -3255,6 +3257,10 @@ span.e-table-box.e-rbox-select {
   border-top-right-radius: 8px;
 }
 
+.e-rte-toolbar .e-rte-table-popup .e-insert-table-btn {
+  color: rgba(var(--color-sf-on-surface));
+}
+
 .e-richtexteditor.e-rte-tb-expand .e-rte-content-border {
   border-bottom: 0;
 }

package/styles/rich-text-editor/material3.css

@@ -2622,7 +2622,9 @@
 }
 
 .e-rte-toolbar .e-rte-table-popup .e-insert-table-btn {
-  border-color: var(--color-sf-outline);
+  font-weight: 400;
+  border: 1px solid rgba(var(--color-sf-outline));
+  border-radius: 20px;
 }
 
 .e-dialog .e-dlg-header-content + .e-dlg-content {
@@ -3311,6 +3313,10 @@ span.e-table-box.e-rbox-select {
   border-top-right-radius: 8px;
 }
 
+.e-rte-toolbar .e-rte-table-popup .e-insert-table-btn {
+  color: rgba(var(--color-sf-on-surface));
+}
+
 .e-richtexteditor.e-rte-tb-expand .e-rte-content-border {
   border-bottom: 0;
 }