@syncfusion/ej2-richtexteditor 23.2.7 → 24.1.41-569781

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;
@@ -143,7 +144,7 @@ var Video = /** @class */ (function () {
             var dialogContent = this.vidsizeInput(e);
             var selectObj_1 = { args: e.args, selfVideo: this, selection: e.selection, selectNode: e.selectNode };
             this.dialogObj.setProperties({
-                height: 'inherit', width: '290px', header: vidSizeHeader, content: dialogContent,
+                width: '290px', header: vidSizeHeader, content: dialogContent,
                 buttons: [{
                         // eslint-disable-next-line
                         click: function (e) {
@@ -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;
     };
@@ -510,7 +516,6 @@ var Video = /** @class */ (function () {
                 _this.setAspectRatio(_this.videoEle, parseInt(width, 10), parseInt(height, 10), args);
                 _this.resizeVidDupPos(_this.videoEle);
                 _this.vidResizePos(_this.videoEle, _this.vidResizeDiv);
-                _this.parent.setContentHeight('', false);
             }
         });
     };
@@ -526,6 +531,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);
         }
@@ -692,6 +698,14 @@ var Video = /** @class */ (function () {
                 originalEvent.preventDefault();
                 break;
         }
+        if (originalEvent.ctrlKey && originalEvent.key === 'a') {
+            this.handleSelectAll();
+        }
+    };
+    Video.prototype.handleSelectAll = function () {
+        this.cancelResizeAction();
+        var videoFocusNodes = this.parent.inputElement.querySelectorAll('.' + classes.CLS_VID_FOCUS);
+        removeClass(videoFocusNodes, classes.CLS_VID_FOCUS);
     };
     Video.prototype.openDialog = function (isInternal, event, selection, ele, parentEle) {
         var range;
@@ -869,6 +883,7 @@ var Video = /** @class */ (function () {
             if (e.offsetX > e.target.clientWidth || e.offsetY > e.target.clientHeight) {
             }
             else {
+                this.parent.notify(events.documentClickClosedBy, { closedBy: "outside click" });
                 this.dialogObj.hide({ returnValue: true });
                 this.parent.isBlur = true;
                 dispatchEvent(this.parent.element, 'focusout');
@@ -1158,6 +1173,15 @@ var Video = /** @class */ (function () {
                 }
             }
         });
+        if (e.selectNode && ((e.selectNode[0] && e.selectNode[0].nodeType !== 3 &&
+            e.selectNode[0].nodeName !== 'BR' &&
+            (e.selectNode[0].classList &&
+                e.selectNode[0].classList.contains(classes.CLS_VID_CLICK_ELEM))) ||
+            e.selectNode[0].nodeName === 'IFRAME' || e.selectNode[0].nodeName === 'VIDEO')) {
+            var regex = new RegExp(/([^\S]|^)(((https?\:\/\/)|(www\.))(\S+))/gi);
+            var sourceElement = e.selectNode[0].querySelector('source');
+            this.inputUrl.value = sourceElement.src.match(regex) ? sourceElement.src : '';
+        }
         var embedUrlBtn = new RadioButton({
             label: this.i10n.getConstant('embeddedCode'),
             checked: true,
@@ -1167,7 +1191,6 @@ var Video = /** @class */ (function () {
             },
             change: function () {
                 urlContent.innerHTML = '';
-                _this.inputUrl.value = '';
                 urlContent.appendChild(_this.embedInputUrl);
             }
         });
@@ -1177,7 +1200,6 @@ var Video = /** @class */ (function () {
             name: 'URL',
             change: function () {
                 urlContent.innerHTML = '';
-                _this.embedInputUrl.value = '';
                 urlContent.appendChild(_this.inputUrl);
             }
         });
@@ -1307,8 +1329,12 @@ var Video = /** @class */ (function () {
                 _this.parent.trigger(events.fileRemoving, e, function (e) {
                     proxy.isVideoUploaded = false;
                     _this.dialogObj.getButtons(0).element.disabled = true;
-                    //proxy.inputUrl.removeAttribute('disabled');
-                    proxy.embedInputUrl.removeAttribute('disabled');
+                    if (proxy.inputUrl.getAttribute('disabled')) {
+                        proxy.inputUrl.removeAttribute('disabled');
+                    }
+                    if (proxy.embedInputUrl.getAttribute('disabled')) {
+                        proxy.embedInputUrl.removeAttribute('disabled');
+                    }
                     if (proxy.uploadUrl) {
                         proxy.uploadUrl.url = '';
                     }
@@ -1369,10 +1395,11 @@ var Video = /** @class */ (function () {
                 this.selection = proxy.parent.formatter.editorManager.nodeSelection.save(range, proxy.contentModule.getDocument());
                 this.selectParent = proxy.parent.formatter.editorManager.nodeSelection.getParentNodeCollection(range);
             }
-            var name_1 = url !== '' ? url.split('/')[url.split('/').length - 1] : embedUrl;
+            var webUrlBtn = document.getElementById('webURL');
+            var name_1 = webUrlBtn.checked ? url.split('/')[url.split('/').length - 1] : embedUrl;
             var value = {
                 cssClass: (proxy.parent.insertVideoSettings.layoutOption === 'Inline' ? classes.CLS_VIDEOINLINE : classes.CLS_VIDEOBREAK),
-                url: url, selection: this.selection, fileName: name_1, isEmbedUrl: embedUrl !== '' ? true : false,
+                url: url, selection: this.selection, fileName: name_1, isEmbedUrl: !webUrlBtn.checked,
                 selectParent: this.selectParent, width: {
                     width: proxy.parent.insertVideoSettings.width, minWidth: proxy.parent.insertVideoSettings.minWidth,
                     maxWidth: proxy.parent.getInsertImgMaxWidth()
@@ -1393,7 +1420,7 @@ var Video = /** @class */ (function () {
      * @method destroy
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     /* eslint-enable */
     Video.prototype.destroy = function () {

package/src/rich-text-editor/renderer/view-source.d.ts

@@ -7,7 +7,7 @@ import { ClickEventArgs } from '@syncfusion/ej2-navigations';
  * Content module is used to render Rich Text Editor content
  *
  * @hidden
-
+ * @deprecated
  */
 export declare class ViewSource {
     private parent;
@@ -15,6 +15,7 @@ export declare class ViewSource {
     private rendererFactory;
     private keyboardModule;
     private previewElement;
+    private codeViewTimeInterval;
     /**
      * Constructor for view source module
      *
@@ -40,7 +41,7 @@ export declare class ViewSource {
      * @param {ClickEventArgs} args - specifies the click event.
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     sourceCode(args?: ClickEventArgs | IHtmlKeyboardEvent): void;
     /**
@@ -49,7 +50,7 @@ export declare class ViewSource {
      * @param {ClickEventArgs} args - specifies the click event.
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     updateSourceCode(args?: ClickEventArgs | KeyboardEventArgs): void;
     private getTextAreaValue;
@@ -58,7 +59,7 @@ export declare class ViewSource {
      *
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     getPanel(): HTMLTextAreaElement | Element;
     /**
@@ -66,7 +67,7 @@ export declare class ViewSource {
      *
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     getViewPanel(): HTMLTextAreaElement | Element;
     /**
@@ -74,7 +75,7 @@ export declare class ViewSource {
      *
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     destroy(): void;
     private moduleDestroy;

package/src/rich-text-editor/renderer/view-source.js

@@ -8,7 +8,7 @@ import { KeyboardEvents } from '../actions/keyboard';
  * Content module is used to render Rich Text Editor content
  *
  * @hidden
-
+ * @deprecated
  */
 var ViewSource = /** @class */ (function () {
     /**
@@ -44,7 +44,7 @@ var ViewSource = /** @class */ (function () {
         this.parent.formatter.editorManager.observer.off(CONSTANT.KEY_DOWN_HANDLER, this.onKeyDown);
     };
     ViewSource.prototype.getSourceCode = function () {
-        return this.parent.createElement('textarea', { className: CLS_RTE_SOURCE_CODE_TXTAREA + ' ' + this.parent.cssClass });
+        return this.parent.createElement('textarea', { className: CLS_RTE_SOURCE_CODE_TXTAREA + this.parent.getCssClass(true) });
     };
     ViewSource.prototype.wireEvent = function (element) {
         this.keyboardModule = new KeyboardEvents(element, {
@@ -105,9 +105,10 @@ var ViewSource = /** @class */ (function () {
      * @param {ClickEventArgs} args - specifies the click event.
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     ViewSource.prototype.sourceCode = function (args) {
+        var _this = this;
         this.parent.notify(events.hidePopup, {});
         this.parent.isBlur = false;
         this.parent.trigger(events.actionBegin, { requestType: 'SourceCode', targetItem: 'SourceCode', args: args });
@@ -134,15 +135,16 @@ var ViewSource = /** @class */ (function () {
             rteContent.appendChild(this.previewElement);
             this.parent.element.appendChild(rteContent);
             rteContent.style.height = this.contentModule.getPanel().style.height;
-            rteContent.style.marginTop = this.contentModule.getPanel().style.marginTop;
             this.getPanel().value = this.getTextAreaValue();
             this.contentModule.getPanel().style.display = 'none';
             rteContent.style.display = 'block';
             this.getPanel().style.display = 'block';
         }
         else {
+            var height = this.parent.inputElement.offsetHeight;
             this.contentModule.getPanel().appendChild(this.previewElement);
             this.getPanel().value = this.getTextAreaValue();
+            this.previewElement.style.height = height + 'px';
             this.contentModule.getEditPanel().style.display = 'none';
             this.previewElement.style.display = 'block';
         }
@@ -153,17 +155,23 @@ var ViewSource = /** @class */ (function () {
             removeClass([this.parent.getToolbar()], [CLS_EXPAND_OPEN]);
         }
         removeClass(tbItems, [CLS_ACTIVE]);
-        this.parent.setContentHeight('sourceCode', true);
+        var isExpand = this.parent.element.querySelectorAll('.e-toolbar-extended.e-popup-open').length > 0 ? true : false;
+        this.parent.setContentHeight('SourceCode', isExpand);
         this.wireEvent(this.previewElement);
         this.unWireBaseKeyDown();
         this.previewElement.focus();
         this.parent.updateValue();
         if (!isNullOrUndefined(this.parent.placeholder) && !this.parent.iframeSettings.enable) {
             var placeHolderWrapper = this.parent.element.querySelector('.rte-placeholder.e-rte-placeholder');
-            placeHolderWrapper.style.display = 'none';
+            if (placeHolderWrapper) {
+                placeHolderWrapper.style.display = 'none';
+            }
         }
         this.parent.trigger(events.actionComplete, { requestType: 'SourceCode', targetItem: 'SourceCode', args: args });
         this.parent.invokeChangeEvent();
+        if (!isNullOrUndefined(this.parent.saveInterval) && this.parent.saveInterval > 0 && this.parent.autoSaveOnIdle) {
+            this.codeViewTimeInterval = setInterval(function () { _this.parent.notify(events.updateValueOnIdle, {}); }, this.parent.saveInterval);
+        }
     };
     /**
      * updateSourceCode method
@@ -171,7 +179,7 @@ var ViewSource = /** @class */ (function () {
      * @param {ClickEventArgs} args - specifies the click event.
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     ViewSource.prototype.updateSourceCode = function (args) {
         this.parent.isBlur = false;
@@ -213,7 +221,8 @@ var ViewSource = /** @class */ (function () {
         if (this.parent.getToolbar()) {
             removeClass([this.parent.getToolbar()], [CLS_EXPAND_OPEN]);
         }
-        this.parent.setContentHeight('preview', true);
+        var isExpand = this.parent.element.querySelectorAll('.e-toolbar-extended.e-popup-open').length > 0 ? true : false;
+        this.parent.setContentHeight('Preview', isExpand);
         this.unWireEvent();
         this.wireBaseKeyDown();
         this.contentModule.getEditPanel().focus();
@@ -225,6 +234,7 @@ var ViewSource = /** @class */ (function () {
         this.parent.trigger(events.actionComplete, { requestType: 'Preview', targetItem: 'Preview', args: args });
         this.parent.formatter.enableUndo(this.parent);
         this.parent.addAudioVideoWrapper();
+        clearTimeout(this.codeViewTimeInterval);
         this.parent.invokeChangeEvent();
         this.parent.notify(events.tableclass, {});
     };
@@ -243,7 +253,7 @@ var ViewSource = /** @class */ (function () {
      *
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     ViewSource.prototype.getPanel = function () {
         return this.parent.element && this.parent.element.querySelector('.e-rte-srctextarea');
@@ -253,7 +263,7 @@ var ViewSource = /** @class */ (function () {
      *
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     ViewSource.prototype.getViewPanel = function () {
         return (this.parent.iframeSettings.enable && this.getPanel()) ? this.getPanel().parentElement : this.getPanel();
@@ -263,7 +273,7 @@ var ViewSource = /** @class */ (function () {
      *
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     ViewSource.prototype.destroy = function () {
         if (isNullOrUndefined(this.parent)) {

package/src/rich-text-editor/services/renderer-factory.d.ts

@@ -4,7 +4,7 @@ import { RenderType } from '../base/enum';
  * RendererFactory
  *
  * @hidden
-
+ * @deprecated
  */
 export declare class RendererFactory {
     rendererMap: {
@@ -17,7 +17,7 @@ export declare class RendererFactory {
      * @param {IRenderer} type - specifies the renderer.
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     addRenderer(name: RenderType, type: IRenderer): void;
     /**
@@ -26,7 +26,7 @@ export declare class RendererFactory {
      * @param {RenderType} name - specifies the render type
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     getRenderer(name: RenderType): IRenderer;
 }

package/src/rich-text-editor/services/renderer-factory.js

@@ -4,7 +4,7 @@ import { RenderType } from '../base/enum';
  * RendererFactory
  *
  * @hidden
-
+ * @deprecated
  */
 var RendererFactory = /** @class */ (function () {
     function RendererFactory() {
@@ -17,7 +17,7 @@ var RendererFactory = /** @class */ (function () {
      * @param {IRenderer} type - specifies the renderer.
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     RendererFactory.prototype.addRenderer = function (name, type) {
         var rName = getEnumValue(RenderType, name);
@@ -31,7 +31,7 @@ var RendererFactory = /** @class */ (function () {
      * @param {RenderType} name - specifies the render type
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     RendererFactory.prototype.getRenderer = function (name) {
         var rName = getEnumValue(RenderType, name);

package/src/rich-text-editor/services/service-locator.d.ts

@@ -2,7 +2,7 @@
  * ServiceLocator
  *
  * @hidden
-
+ * @deprecated
  */
 export declare class ServiceLocator {
     private services;
@@ -13,7 +13,7 @@ export declare class ServiceLocator {
      * @param {T} type - specifies the type.
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     register<T>(name: string, type: T): void;
     /**
@@ -22,7 +22,7 @@ export declare class ServiceLocator {
      * @param {string} name - specifies the name.
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     getService<T>(name: string): T;
 }

package/src/rich-text-editor/services/service-locator.js

@@ -3,7 +3,7 @@ import { isNullOrUndefined } from '@syncfusion/ej2-base';
  * ServiceLocator
  *
  * @hidden
-
+ * @deprecated
  */
 var ServiceLocator = /** @class */ (function () {
     function ServiceLocator() {
@@ -17,7 +17,7 @@ var ServiceLocator = /** @class */ (function () {
      * @param {T} type - specifies the type.
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     /* eslint-enable */
     ServiceLocator.prototype.register = function (name, type) {
@@ -31,7 +31,7 @@ var ServiceLocator = /** @class */ (function () {
      * @param {string} name - specifies the name.
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     ServiceLocator.prototype.getService = function (name) {
         if (isNullOrUndefined(this.services["" + name])) {