@syncfusion/ej2-richtexteditor 20.2.49 → 20.3.47

package/src/editor-manager/plugin/video.d.ts

@@ -0,0 +1,34 @@
+import { EditorManager } from './../base/editor-manager';
+import { IHtmlItem } from './../base/interface';
+/**
+ * Video internal component
+ *
+ * @hidden
+
+ */
+export declare class VideoCommand {
+    private parent;
+    /**
+     * Constructor for creating the Video plugin
+     *
+     * @param {EditorManager} parent - specifies the parent element
+     * @hidden
+
+     */
+    constructor(parent: EditorManager);
+    private addEventListener;
+    /**
+     * videoCommand method
+     *
+     * @param {IHtmlItem} e - specifies the element
+     * @returns {void}
+     * @hidden
+
+     */
+    videoCommand(e: IHtmlItem): void;
+    private createVideo;
+    private editAreaVideoClick;
+    private setStyle;
+    private videoDimension;
+    private callBack;
+}

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

@@ -0,0 +1,249 @@
+import { createElement, isNullOrUndefined as isNOU, detach, addClass, Browser, formatUnit } from '@syncfusion/ej2-base';
+import * as CONSTANT from './../base/constant';
+import * as classes from './../base/classes';
+import { InsertHtml } from './inserthtml';
+/**
+ * Video internal component
+ *
+ * @hidden
+
+ */
+var VideoCommand = /** @class */ (function () {
+    /**
+     * Constructor for creating the Video plugin
+     *
+     * @param {EditorManager} parent - specifies the parent element
+     * @hidden
+
+     */
+    function VideoCommand(parent) {
+        this.parent = parent;
+        this.addEventListener();
+    }
+    VideoCommand.prototype.addEventListener = function () {
+        this.parent.observer.on(CONSTANT.VIDEO, this.videoCommand, this);
+    };
+    /**
+     * videoCommand method
+     *
+     * @param {IHtmlItem} e - specifies the element
+     * @returns {void}
+     * @hidden
+
+     */
+    VideoCommand.prototype.videoCommand = function (e) {
+        var selectNode;
+        var videoWrapNode;
+        var videoClickElem;
+        var value = e.value.toString().toLowerCase();
+        if (value !== 'video' && value !== 'videoreplace') {
+            selectNode = e.item.selectNode[0];
+            videoWrapNode = selectNode.closest('.' + classes.CLASS_EMBED_VIDEO_WRAP);
+            videoClickElem = selectNode.closest('.' + classes.CLASS_VIDEO_CLICK_ELEM);
+        }
+        switch (value) {
+            case 'video':
+            case 'videoreplace':
+                this.createVideo(e);
+                break;
+            case 'videodimension':
+                this.videoDimension(e);
+                break;
+            case 'inline':
+                selectNode.removeAttribute('class');
+                if (videoWrapNode) {
+                    videoWrapNode.style.display = 'inline-block';
+                }
+                if (videoClickElem) {
+                    selectNode.parentElement.style.cssFloat = '';
+                }
+                addClass([selectNode], [classes.CLASS_VIDEO, classes.CLASS_VIDEO_INLINE, classes.CLASS_VIDEO_FOCUS]);
+                this.callBack(e);
+                break;
+            case 'break':
+                selectNode.removeAttribute('class');
+                if (videoWrapNode) {
+                    videoWrapNode.style.display = 'block';
+                }
+                if (videoClickElem) {
+                    selectNode.parentElement.style.cssFloat = '';
+                }
+                addClass([selectNode], [classes.CLASS_VIDEO_BREAK, classes.CLASS_VIDEO, classes.CLASS_VIDEO_FOCUS]);
+                this.callBack(e);
+                break;
+            case 'justifyleft':
+                selectNode.removeAttribute('class');
+                if (videoWrapNode) {
+                    videoWrapNode.style.display = 'block';
+                }
+                if (videoClickElem) {
+                    selectNode.parentElement.style.cssFloat = 'left';
+                }
+                addClass([selectNode], [classes.CLASS_VIDEO, classes.CLASS_VIDEO_LEFT]);
+                this.callBack(e);
+                break;
+            case 'justifycenter':
+                selectNode.removeAttribute('class');
+                if (videoWrapNode) {
+                    videoWrapNode.style.display = 'block';
+                }
+                if (videoClickElem) {
+                    selectNode.parentElement.style.cssFloat = '';
+                }
+                addClass([selectNode], [classes.CLASS_VIDEO, classes.CLASS_VIDEO_CENTER]);
+                this.callBack(e);
+                break;
+            case 'justifyright':
+                selectNode.removeAttribute('class');
+                if (videoWrapNode) {
+                    videoWrapNode.style.display = 'block';
+                }
+                if (videoClickElem) {
+                    selectNode.parentElement.style.cssFloat = 'right';
+                }
+                addClass([selectNode], [classes.CLASS_VIDEO, classes.CLASS_VIDEO_RIGHT]);
+                this.callBack(e);
+                break;
+            case 'videoremove':
+                detach(selectNode.parentElement);
+                this.callBack(e);
+                break;
+        }
+    };
+    VideoCommand.prototype.createVideo = function (e) {
+        var _this = this;
+        var isReplaced = false;
+        var wrapElement;
+        var vidElement;
+        var sourceElement;
+        if (e.value === 'VideoReplace' && !isNOU(e.item.selectParent) && (e.item.selectParent[0].tagName === 'VIDEO')) {
+            var videoEle = e.item.selectParent[0].querySelector('source');
+            this.setStyle(videoEle, e, videoEle);
+            isReplaced = true;
+        }
+        else if (e.value === 'VideoReplace' && !isNOU(e.item.selectParent) &&
+            e.item.selectParent[0].classList &&
+            e.item.selectParent[0].classList.contains(classes.CLASS_VIDEO_CLICK_ELEM)) {
+            e.item.selectParent[0].innerHTML = e.item.fileName;
+            this.setStyle(e.item.selectParent[0].firstElementChild, e, e.item.selectParent[0].firstElementChild);
+        }
+        else {
+            if (!e.item.isEmbedUrl) {
+                wrapElement = createElement('span', { className: classes.CLASS_VIDEO_WRAP, attrs: { contentEditable: 'false', title: e.item.fileName } });
+                vidElement = createElement('video', { className: classes.CLASS_VIDEO + ' ' + classes.CLASS_VIDEO_INLINE, attrs: { controls: '' } });
+                sourceElement = createElement('source');
+                this.setStyle(sourceElement, e, vidElement);
+                vidElement.appendChild(sourceElement);
+                wrapElement.appendChild(vidElement);
+            }
+            else {
+                wrapElement = createElement('span', { className: classes.CLASS_EMBED_VIDEO_WRAP, attrs: { contentEditable: 'false' } });
+                var clickElement = createElement('span', { className: classes.CLASS_VIDEO_CLICK_ELEM });
+                var temp = createElement('template');
+                temp.innerHTML = e.item.fileName;
+                clickElement.appendChild(temp.content);
+                vidElement = sourceElement = clickElement.firstElementChild;
+                this.setStyle(sourceElement, e, vidElement);
+                wrapElement.appendChild(clickElement);
+            }
+            if (!isNOU(e.item.selection)) {
+                e.item.selection.restore();
+            }
+            InsertHtml.Insert(this.parent.currentDocument, wrapElement, this.parent.editableElement);
+            if (wrapElement.nextElementSibling === null) {
+                var insertElem = createElement('br');
+                wrapElement.parentNode.insertBefore(insertElem, wrapElement.nextSibling);
+            }
+        }
+        if (e.callBack && (isNOU(e.selector) || !isNOU(e.selector) && e.selector !== 'pasteCleanupModule')) {
+            var selectedNode = this.parent.nodeSelection.getSelectedNodes(this.parent.currentDocument)[0];
+            var videoElm_1 = (e.value === 'VideoReplace' || isReplaced) ? !e.item.isEmbedUrl ? e.item.selectParent[0] : e.item.selectParent[0].querySelector('iframe')
+                : (Browser.isIE ? selectedNode : !e.item.isEmbedUrl ? selectedNode.lastElementChild : selectedNode.querySelector('iframe'));
+            videoElm_1.addEventListener(videoElm_1.tagName !== 'IFRAME' ? 'loadeddata' : 'load', function () {
+                if (e.value !== 'VideoReplace' || !isReplaced) {
+                    e.callBack({
+                        requestType: 'Videos',
+                        editorMode: 'HTML',
+                        event: e.event,
+                        range: _this.parent.nodeSelection.getRange(_this.parent.currentDocument),
+                        elements: [videoElm_1]
+                    });
+                }
+            });
+            if (isReplaced) {
+                videoElm_1.load();
+            }
+            if (Browser.userAgent.indexOf('Firefox') !== -1) {
+                vidElement.addEventListener('play', function (args) { _this.editAreaVideoClick(e); });
+                vidElement.addEventListener('pause', function (args) { _this.editAreaVideoClick(e); });
+            }
+        }
+    };
+    VideoCommand.prototype.editAreaVideoClick = function (e) {
+        e.callBack({
+            requestType: 'VideosPlayPause',
+            editorMode: 'HTML',
+            event: e.event
+        });
+    };
+    VideoCommand.prototype.setStyle = function (sourceElement, e, videoEle) {
+        if (e.item.url !== '' && !isNOU(e.item.url)) {
+            sourceElement.setAttribute('src', e.item.url);
+        }
+        if (!e.item.isEmbedUrl) {
+            sourceElement.type = e.item.fileName && e.item.fileName.split('.').length > 0 ?
+                'video/' + e.item.fileName.split('.')[e.item.fileName.split('.').length - 1] :
+                e.item.url && e.item.url.split('.').length > 0 ? 'video/' + e.item.url.split('.')[e.item.url.split('.').length - 1] : '';
+        }
+        if (!isNOU(e.item.width) && !isNOU(e.item.width.width)) {
+            videoEle.setAttribute('width', formatUnit(e.item.width.width));
+        }
+        if (!isNOU(e.item.height) && !isNOU(e.item.height.height)) {
+            videoEle.setAttribute('height', formatUnit(e.item.height.height));
+        }
+        if (!isNOU(e.item.width) && !isNOU(e.item.width.minWidth)) {
+            videoEle.style.minWidth = formatUnit(e.item.width.minWidth);
+        }
+        if (!isNOU(e.item.width) && !isNOU(e.item.width.maxWidth)) {
+            videoEle.style.maxWidth = formatUnit(e.item.width.maxWidth);
+        }
+        if (!isNOU(e.item.height) && !isNOU(e.item.height.minHeight)) {
+            videoEle.style.minHeight = formatUnit(e.item.height.minHeight);
+        }
+        if (!isNOU(e.item.height) && !isNOU(e.item.height.maxHeight)) {
+            videoEle.style.maxHeight = formatUnit(e.item.height.maxHeight);
+        }
+    };
+    VideoCommand.prototype.videoDimension = function (e) {
+        var selectNode = !(e.item.selectNode[0].classList.contains(classes.CLASS_VIDEO_CLICK_ELEM)) ? e.item.selectNode[0] :
+            e.item.selectNode[0].querySelector('iframe');
+        selectNode.style.height = '';
+        selectNode.style.width = '';
+        if (e.item.width !== 'auto') {
+            selectNode.style.width = formatUnit(e.item.width);
+        }
+        else {
+            selectNode.removeAttribute('width');
+        }
+        if (e.item.height !== 'auto') {
+            selectNode.style.height = formatUnit(e.item.height);
+        }
+        else {
+            selectNode.removeAttribute('height');
+        }
+        this.callBack(e);
+    };
+    VideoCommand.prototype.callBack = function (e) {
+        if (e.callBack) {
+            e.callBack({
+                requestType: e.item.subCommand,
+                editorMode: 'HTML',
+                event: e.event,
+                range: this.parent.nodeSelection.getRange(this.parent.currentDocument),
+                elements: this.parent.nodeSelection.getSelectedNodes(this.parent.currentDocument)
+            });
+        }
+    };
+    return VideoCommand;
+}());
+export { VideoCommand };

package/src/editor-manager/plugin.d.ts

@@ -15,6 +15,8 @@ export * from './plugin/isformatted';
 export * from './plugin/ms-word-clean-up';
 export * from './plugin/nodecutter';
 export * from './plugin/image';
+export * from './plugin/audio';
+export * from './plugin/video';
 export * from './plugin/selection-commands';
 export * from './plugin/selection-exec';
 export * from './plugin/clearformat-exec';

package/src/editor-manager/plugin.js

@@ -15,6 +15,8 @@ export * from './plugin/isformatted';
 export * from './plugin/ms-word-clean-up';
 export * from './plugin/nodecutter';
 export * from './plugin/image';
+export * from './plugin/audio';
+export * from './plugin/video';
 export * from './plugin/selection-commands';
 export * from './plugin/selection-exec';
 export * from './plugin/clearformat-exec';

package/src/global.js

@@ -1,3 +1,3 @@
 import * as index from './index';
-index.RichTextEditor.Inject(index.Toolbar, index.Link, index.Image, index.Count, index.QuickToolbar, index.HtmlEditor, index.MarkdownEditor, index.Table, index.PasteCleanup, index.Resize, index.FileManager);
+index.RichTextEditor.Inject(index.Toolbar, index.Link, index.Image, index.Audio, index.Video, index.Count, index.QuickToolbar, index.HtmlEditor, index.MarkdownEditor, index.Table, index.PasteCleanup, index.Resize, index.FileManager);
 export * from './index';

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

@@ -243,7 +243,9 @@ var BaseQuickToolbar = /** @class */ (function () {
                     parentData: parent_1.getBoundingClientRect(),
                     tBarElementHeight: tBarHeight
                 };
-                if (target.tagName === 'IMG') {
+                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)))) {
                     _this.setPosition(showPopupData);
                 }
                 if (!_this.parent.inlineMode.enable) {

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

@@ -171,7 +171,7 @@ var BaseToolbar = /** @class */ (function () {
             overflowMode: args.mode,
             enablePersistence: this.parent.enablePersistence,
             enableRtl: this.parent.enableRtl,
-            cssClass: args.cssClass,
+            cssClass: args.cssClass
         };
     };
     /**

package/src/rich-text-editor/actions/dropdown-buttons.d.ts

@@ -46,8 +46,8 @@ export declare class DropDownButtons {
     private columnDropDown;
     private cellDropDown;
     private verticalAlignDropDown;
-    private imageDisplayDropDown;
-    private imageAlignmentDropDown;
+    private renderDisplayDropDown;
+    private renderAlignmentDropDown;
     private tableStylesDropDown;
     private removeDropDownClasses;
     /**

package/src/rich-text-editor/actions/dropdown-buttons.js

@@ -164,10 +164,13 @@ var DropDownButtons = /** @class */ (function () {
                         });
                         break;
                     case 'align':
-                        _this.imageAlignmentDropDown(type, tbElement, targetElement);
+                    case 'videoalign':
+                        _this.renderAlignmentDropDown(type, tbElement, targetElement, item);
                         break;
                     case 'display':
-                        _this.imageDisplayDropDown(type, tbElement, targetElement);
+                    case 'audiolayoutoption':
+                    case 'videolayoutoption':
+                        _this.renderDisplayDropDown(type, tbElement, targetElement, item);
                         break;
                     case 'tablerows':
                         _this.rowDropDown(type, tbElement, targetElement);
@@ -351,29 +354,29 @@ var DropDownButtons = /** @class */ (function () {
             element: targetElement
         });
     };
-    DropDownButtons.prototype.imageDisplayDropDown = function (type, tbElement, targetElement) {
-        targetElement = select('#' + this.parent.getID() + '_' + type + '_Display', tbElement);
+    DropDownButtons.prototype.renderDisplayDropDown = function (type, tbElement, targetElement, item) {
+        targetElement = select('#' + this.parent.getID() + '_' + type + (item === 'display' ? '_Display' : item === 'videolayoutoption' ? '_VideoLayoutOption' : '_AudioLayoutOption'), tbElement);
         if (targetElement.classList.contains(classes.CLS_DROPDOWN_BTN)) {
             return;
         }
         this.displayDropDown = this.toolbarRenderer.renderDropDownButton({
-            iconCss: 'e-display e-icons',
+            iconCss: item === 'display' ? 'e-display e-icons' : item === 'videolayoutoption' ? 'e-video-display e-icons' : 'e-audio-display e-icons',
             cssClass: classes.CLS_DROPDOWN_POPUP + ' ' + classes.CLS_DROPDOWN_ITEMS + ' ' + classes.CLS_QUICK_DROPDOWN,
-            itemName: 'Display',
-            items: model.imageDisplayItems,
+            itemName: item === 'display' ? 'Display' : item === 'videolayoutoption' ? 'VideoLayoutOption' : 'AudioLayoutOption',
+            items: item === 'display' ? model.imageDisplayItems : item === 'videolayoutoption' ? model.videoLayoutOptionItems : model.audioLayoutOptionItems,
             element: targetElement
         });
     };
-    DropDownButtons.prototype.imageAlignmentDropDown = function (type, tbElement, targetElement) {
-        targetElement = select('#' + this.parent.getID() + '_' + type + '_Align', tbElement);
+    DropDownButtons.prototype.renderAlignmentDropDown = function (type, tbElement, targetElement, item) {
+        targetElement = select('#' + this.parent.getID() + '_' + type + (item === 'align' ? '_Align' : '_VideoAlign'), tbElement);
         if (targetElement.classList.contains(classes.CLS_DROPDOWN_BTN)) {
             return;
         }
         this.imageAlignDropDown = this.toolbarRenderer.renderDropDownButton({
             iconCss: 'e-justify-left e-icons',
             cssClass: classes.CLS_DROPDOWN_POPUP + ' ' + classes.CLS_DROPDOWN_ICONS + ' ' + classes.CLS_QUICK_DROPDOWN,
-            itemName: 'Align',
-            items: model.imageAlignItems,
+            itemName: item === 'align' ? 'Align' : 'VideoAlign',
+            items: item === 'align' ? model.imageAlignItems : model.videoAlignItems,
             element: targetElement
         });
     };

package/src/rich-text-editor/actions/enter-key.d.ts

@@ -7,6 +7,7 @@ export declare class EnterKeyAction {
     private range;
     private startNode;
     private endNode;
+    private formatTags;
     constructor(parent?: IRichTextEditor);
     protected addEventListener(): void;
     private destroy;