@syncfusion/ej2-richtexteditor 24.2.3 → 24.2.4

package/dist/es6/ej2-richtexteditor.es2015.js

@@ -2668,7 +2668,7 @@ let defaultLocale = {
     'audioLayoutOption': 'Layout option',
     'videoLayoutOption': 'Layout option',
     'align': 'Align',
-    'caption': 'Image Caption',
+    'caption': 'Caption',
     'remove': 'Remove',
     'insertLink': 'Insert Link',
     'display': 'Display',
@@ -2732,14 +2732,14 @@ let 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',
@@ -7882,6 +7882,33 @@ function getDefaultMDTbStatus() {
         formats: null
     };
 }
+/**
+ * @param {Range} range - specifies the range
+ * @returns {void}
+ * @hidden
+ */
+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) {
+            let emptyLI = (range.startContainer.nodeName === "#text" ? range.startContainer.parentElement : range.startContainer).querySelectorAll('li :empty');
+            if (emptyLI.length > 0) {
+                emptyLI.forEach((item) => {
+                    item.remove();
+                });
+            }
+        }
+        let liElem = (range.startContainer.nodeName === "#text" ? range.startContainer.parentElement : range.startContainer).querySelectorAll("li");
+        if (liElem.length > 0) {
+            liElem.forEach((item) => {
+                if (item.firstChild.nodeName === "OL" || item.firstChild.nodeName === "UL") {
+                    item.style.listStyleType = "none";
+                }
+            });
+        }
+    }
+}
 
 /**
  * MarkdownToolbarStatus module for refresh the toolbar status
@@ -10821,6 +10848,9 @@ class NodeSelection {
                 || 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;
         }
@@ -13536,7 +13566,12 @@ class InsertHtml {
                     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);
             }
@@ -20431,12 +20466,12 @@ const IFRAMEHEADER = `
                     display: block;float: none;height: auto;margin: 5px auto;max-width: 100%;position: relative;}
                 .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;}
                 img.e-img-focus::selection, audio.e-audio-focus::selection, .e-video-focus::selection { background: transparent;color: transparent;}
-                span.e-rte-imageboxmark {  width: 10px; height: 10px; position: absolute; display: block;
+                span.e-rte-imageboxmark, span.e-rte-videoboxmark {  width: 10px; height: 10px; position: absolute; display: block;
                     background: #4a90e2; border: 1px solid #fff; z-index: 1000;}
-                .e-mob-rte.e-mob-span span.e-rte-imageboxmark { background: #4a90e2; border: 1px solid #fff; }
-                .e-mob-rte span.e-rte-imageboxmark { background: #fff; border: 1px solid #4a90e2;
+                .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; }
+                .e-mob-rte span.e-rte-imageboxmark, .e-mob-rte span.e-rte-videoboxmark { background: #fff; border: 1px solid #4a90e2;
                     border-radius: 15px; height: 20px; width: 20px; }
-                .e-mob-rte.e-mob-span span.e-rte-imageboxmark { background: #4a90e2; border: 1px solid #fff; }
+                .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; }
                 .e-rte-content .e-content img.e-resize, .e-rte-content .e-content video.e-resize { z-index: 1000; }
                 .e-img-caption .e-img-inner { outline: 0; }
                 .e-img-caption a:focus-visible { outline: none; }
@@ -28170,6 +28205,7 @@ class Video {
         this.isAllowedTypes = true;
         this.pageX = null;
         this.pageY = null;
+        this.mouseX = null;
         this.deletedVid = [];
         this.parent = parent;
         this.rteID = parent.element.id;
@@ -28566,62 +28602,50 @@ class Video {
         if (isNullOrUndefined(vidEleStyle)) {
             return;
         }
-        // eslint-disable-next-line
-        const width = vidEleStyle.width !== '' ? vidEleStyle.width.match(/^\d+(\.\d*)?%$/g) ? parseFloat(vidEleStyle.width) :
+        /* eslint-disable */
+        let width = vidEleStyle.width !== '' ? vidEleStyle.width.match(/^\d+(\.\d*)?%$/g) ? parseFloat(vidEleStyle.width) :
             parseInt(vidEleStyle.width, 10) : vid.style.width !== '' ? vid.style.width : vid.width;
-        const height = vidEleStyle.height !== '' ? parseInt(vidEleStyle.height, 10) : vid.style.height !== '' ? vid.style.height : vid.height;
+        let 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) {
-                    const 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 === '')) {
-                const currentWidth = ((parseInt(width.toString(), 10) / parseInt(height.toString(), 10) * expectedY) +
-                    parseInt(width.toString(), 10) / parseInt(height.toString(), 10)) <
+                const 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 !== '') {
-                const currentWidth = (parseInt(width.toString(), 10) / parseInt(height.toString(), 10) * expectedY) <
+                const 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());
@@ -28639,6 +28663,23 @@ class Video {
             }
         }
     }
+    updateVidEleWidth(vid, width, height, expectedX, expectedY) {
+        if (parseInt('' + vid.getBoundingClientRect().width + '', 10) !== 0 && parseInt('' + width + '', 10) !== 0) {
+            const original = vid.offsetWidth + this.mouseX;
+            const 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');
+    }
     pixToPerc(expected, parentEle) {
         return expected / parseFloat(getComputedStyle(parentEle).width) * 100;
     }
@@ -28679,6 +28720,7 @@ class Video {
         const 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);
         }
@@ -34020,7 +34062,7 @@ let RichTextEditor = class RichTextEditor extends Component {
             if (this.valueContainer) {
                 this.valueContainer.value = (this.enableHtmlEncode) ? this.value : value;
             }
-            if (this.editorMode === 'HTML' && this.inputElement && this.inputElement.innerHTML.replace('&amp;', '&').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
@@ -34041,9 +34083,6 @@ let RichTextEditor = class RichTextEditor extends Component {
                 }
                 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 {
@@ -35201,6 +35240,9 @@ let RichTextEditor = class RichTextEditor extends Component {
                 if (item[j].classList.length === 0) {
                     item[j].removeAttribute('class');
                 }
+                if (item[j].nodeName === 'IMG' && item[j].style.outline !== '') {
+                    item[j].style.outline = '';
+                }
             }
         }
     }