@syncfusion/ej2-richtexteditor 29.2.4-738301 → 29.2.4-760237

package/blazorGlobalSrc/rich-text-editor/renderer/markdown-renderer.d.ts

@@ -0,0 +1,65 @@
+import { IRenderer, IRichTextEditor } from '../base/interface';
+/**
+ * Markdown module is used to render Rich Text Editor as Markdown editor content
+ *
+ * @hidden
+ * @deprecated
+ */
+export declare class MarkdownRender implements IRenderer {
+    private contentPanel;
+    protected parent: IRichTextEditor;
+    protected editableElement: Element;
+    /**
+     * Constructor for content renderer module
+     *
+     * @param {IRichTextEditor} parent - specifies the parent.
+     */
+    constructor(parent?: IRichTextEditor);
+    /**
+     * The function is used to render Rich Text Editor content div
+     *
+     * @returns {void}
+     * @hidden
+     * @deprecated
+     */
+    renderPanel(): void;
+    /**
+     * Get the content div element of RichTextEditor
+     *
+     * @returns {Element} - specifies the element
+     * @hidden
+     * @deprecated
+     */
+    getPanel(): Element;
+    /**
+     * Get the editable element of RichTextEditor
+     *
+     * @returns {Element} - specifies the element
+     * @hidden
+     * @deprecated
+     */
+    getEditPanel(): Element;
+    /**
+     * Returns the text content as string.
+     *
+     * @returns {string} - specifies the string values.
+     */
+    getText(): string;
+    /**
+     * Set the content div element of RichTextEditor
+     *
+     * @param  {Element} panel - specifies the element.
+     * @returns {void}
+     * @hidden
+     * @deprecated
+     */
+    setPanel(panel: Element): void;
+    /**
+     * Get the document of RichTextEditor
+     *
+     * @returns {void}
+     * @hidden
+     * @deprecated
+     */
+    getDocument(): Document;
+}

package/blazorGlobalSrc/rich-text-editor/renderer/markdown-renderer.js

@@ -0,0 +1,38 @@
+define(["require", "exports"], function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    var MarkdownRender = (function () {
+        function MarkdownRender(parent) {
+            this.parent = parent;
+        }
+        MarkdownRender.prototype.renderPanel = function () {
+            var rteObj = this.parent;
+            var div = this.parent.createElement('div', { id: this.parent.getID() + '_view', className: 'e-rte-content' });
+            this.editableElement = this.parent.createElement('textarea', {
+                className: 'e-content',
+                id: this.parent.getID() + '_editable-content',
+                attrs: { 'aria-labelledby': this.parent.getID() + '_view' }
+            });
+            div.appendChild(this.editableElement);
+            this.setPanel(div);
+            rteObj.rootContainer.appendChild(div);
+        };
+        MarkdownRender.prototype.getPanel = function () {
+            return this.contentPanel;
+        };
+        MarkdownRender.prototype.getEditPanel = function () {
+            return this.editableElement;
+        };
+        MarkdownRender.prototype.getText = function () {
+            return this.getEditPanel().value;
+        };
+        MarkdownRender.prototype.setPanel = function (panel) {
+            this.contentPanel = panel;
+        };
+        MarkdownRender.prototype.getDocument = function () {
+            return this.getEditPanel().ownerDocument;
+        };
+        return MarkdownRender;
+    }());
+    exports.MarkdownRender = MarkdownRender;
+});

package/blazorGlobalSrc/rich-text-editor/renderer/popup-renderer.d.ts

@@ -0,0 +1,54 @@
+import { IRenderer, IRichTextEditor } from '../base/interface';
+import { BaseQuickToolbar } from '../actions/base-quick-toolbar';
+/**
+ * `Popup renderer` module is used to render popup in RichTextEditor.
+ *
+ * @hidden
+ * @deprecated
+ */
+export declare class PopupRenderer implements IRenderer {
+    private popupObj;
+    private popupPanel;
+    protected parent: IRichTextEditor;
+    /**
+     * Constructor for popup renderer module
+     *
+     * @param {IRichTextEditor} parent - specifies the parent.
+     */
+    constructor(parent?: IRichTextEditor);
+    private quickToolbarOpen;
+    /**
+     * renderPopup method
+     *
+     * @param {BaseQuickToolbar} args - specifies  the arguments.
+     * @returns {void}
+     * @hidden
+     * @deprecated
+     */
+    renderPopup(args: BaseQuickToolbar): void;
+    /**
+     * The function is used to add popup class in Quick Toolbar
+     *
+     * @returns {void}
+     * @hidden
+     * @deprecated
+     */
+    renderPanel(): void;
+    /**
+     * Get the popup element of RichTextEditor
+     *
+     * @returns {Element} - specifies the element
+     * @hidden
+     * @deprecated
+     */
+    getPanel(): Element;
+    /**
+     * Set the popup element of RichTextEditor
+     *
+     * @returns {void}
+     * @param  {Element} panel - specifies the element
+     * @hidden
+     * @deprecated
+     */
+    setPanel(panel: Element): void;
+}

package/blazorGlobalSrc/rich-text-editor/renderer/popup-renderer.js

@@ -0,0 +1,35 @@
+define(["require", "exports", "@syncfusion/ej2-popups", "../base/classes", "../base/constant"], function (require, exports, ej2_popups_1, classes_1, events) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    var PopupRenderer = (function () {
+        function PopupRenderer(parent) {
+            this.parent = parent;
+        }
+        PopupRenderer.prototype.quickToolbarOpen = function () {
+            var args = this.popupObj;
+            this.parent.trigger(events.quickToolbarOpen, args);
+        };
+        PopupRenderer.prototype.renderPopup = function (args) {
+            this.setPanel(args.element);
+            this.renderPanel();
+            args.popupObj = new ej2_popups_1.Popup(args.element, {
+                targetType: 'relative',
+                relateTo: this.parent.element,
+                open: this.quickToolbarOpen.bind(this)
+            });
+            this.popupObj = args.popupObj;
+            args.popupObj.hide();
+        };
+        PopupRenderer.prototype.renderPanel = function () {
+            this.getPanel().classList.add(classes_1.CLS_QUICK_POP);
+        };
+        PopupRenderer.prototype.getPanel = function () {
+            return this.popupPanel;
+        };
+        PopupRenderer.prototype.setPanel = function (panel) {
+            this.popupPanel = panel;
+        };
+        return PopupRenderer;
+    }());
+    exports.PopupRenderer = PopupRenderer;
+});

package/blazorGlobalSrc/rich-text-editor/renderer/render.d.ts

@@ -0,0 +1,46 @@
+import { IRichTextEditor, NotifyArgs } from '../base/interface';
+import { ServiceLocator } from '../services/service-locator';
+/**
+ * Content module is used to render Rich Text Editor content
+ *
+ * @hidden
+ * @deprecated
+ */
+export declare class Render {
+    private parent;
+    private locator;
+    private contentRenderer;
+    private renderer;
+    /**
+     * Constructor for render module
+     *
+     * @param {IRichTextEditor} parent - specifies the parent
+     * @param {ServiceLocator} locator - specifies the locator.
+     * @returns {void}
+     */
+    constructor(parent?: IRichTextEditor, locator?: ServiceLocator);
+    /**
+     * To initialize Rich Text Editor header, content and footer rendering
+     *
+     * @returns {void}
+     * @hidden
+     * @deprecated
+     */
+    render(): void;
+    /**
+     * Refresh the entire RichTextEditor.
+     *
+     * @param {NotifyArgs} e - specifies the arguments.
+     * @returns {void}
+     */
+    refresh(e?: NotifyArgs): void;
+    /**
+     * Destroy the entire RichTextEditor.
+     *
+     * @returns {void}
+     */
+    destroy(): void;
+    private addEventListener;
+    private removeEventListener;
+    private keyUp;
+}

package/blazorGlobalSrc/rich-text-editor/renderer/render.js

@@ -0,0 +1,70 @@
+define(["require", "exports", "../base/enum", "../base/constant", "@syncfusion/ej2-base"], function (require, exports, enum_1, events, ej2_base_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    var Render = (function () {
+        function Render(parent, locator) {
+            this.parent = parent;
+            this.locator = locator;
+            this.renderer = this.locator.getService('rendererFactory');
+            this.addEventListener();
+        }
+        Render.prototype.render = function () {
+            var rteObj = this.parent;
+            this.contentRenderer = this.renderer.getRenderer(enum_1.RenderType.Content);
+            this.contentRenderer.renderPanel();
+        };
+        Render.prototype.refresh = function (e) {
+            if (e === void 0) { e = { requestType: 'refresh' }; }
+            this.parent.notify(e.requestType + "-begin", e);
+        };
+        Render.prototype.destroy = function () {
+            if (ej2_base_1.isNullOrUndefined(this.parent)) {
+                return;
+            }
+            this.removeEventListener();
+            this.locator.destroy();
+            this.renderer.destroy();
+        };
+        Render.prototype.addEventListener = function () {
+            if (this.parent.isDestroyed) {
+                return;
+            }
+            this.parent.on(events.modelChanged, this.refresh, this);
+            this.parent.on(events.keyUp, this.keyUp, this);
+        };
+        Render.prototype.removeEventListener = function () {
+            if (this.parent.isDestroyed) {
+                return;
+            }
+            this.parent.off(events.modelChanged, this.refresh);
+            this.parent.off(events.keyUp, this.keyUp);
+        };
+        Render.prototype.keyUp = function (e) {
+            if (this.parent.editorMode === 'HTML') {
+                switch (e.args.which) {
+                    case 46:
+                    case 8:
+                        var childNodes = this.parent.contentModule.getEditPanel().childNodes;
+                        if ((childNodes.length === 0) ||
+                            (childNodes.length === 1 && childNodes[0].childNodes.length === 0 && ((childNodes[0].tagName === 'BR') ||
+                                ((childNodes[0].tagName === 'P' || childNodes[0].tagName === 'DIV') && childNodes[0].textContent === '')))) {
+                            var node = this.parent.contentModule.getEditPanel();
+                            if (this.parent.enterKey === 'DIV') {
+                                node.innerHTML = '<div><br/></div>';
+                            }
+                            else if (this.parent.enterKey === 'BR') {
+                                node.innerHTML = '<br/>';
+                            }
+                            else {
+                                node.innerHTML = '<p><br/></p>';
+                            }
+                            this.parent.formatter.editorManager.nodeSelection.setCursorPoint(this.parent.contentModule.getDocument(), node.childNodes[0], 0);
+                        }
+                        break;
+                }
+            }
+        };
+        return Render;
+    }());
+    exports.Render = Render;
+});

package/blazorGlobalSrc/rich-text-editor/renderer/slash-menu.d.ts

@@ -0,0 +1,20 @@
+import { IRichTextEditor } from '../base';
+import { ServiceLocator } from '../services';
+export declare class SlashMenu {
+    private parent;
+    private L10n;
+    private mention;
+    private savedSelection;
+    private currentDocument;
+    private defaultItems;
+    private injectibleItems;
+    constructor(options: IRichTextEditor, serviceLocator: ServiceLocator);
+    private removeEventListener;
+    private onPropertyChanged;
+    getModuleName(): string;
+    destroy(): void;
+    private generateMentionModel;
+    private handleSelect;
+    private getItems;
+    render(): void;
+}

package/blazorGlobalSrc/rich-text-editor/renderer/slash-menu.js

@@ -0,0 +1,224 @@
+define(["require", "exports", "@syncfusion/ej2-dropdowns", "../base", "@syncfusion/ej2-base", "../models/slash-menu-settings", "../../selection/selection", "../models/default-locale", "../base/constant"], function (require, exports, ej2_dropdowns_1, base_1, ej2_base_1, slash_menu_settings_1, selection_1, default_locale_1, events) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    var SlashMenu = (function () {
+        function SlashMenu(options, serviceLocator) {
+            this.parent = options;
+            this.currentDocument = this.parent.element.ownerDocument;
+            this.L10n = serviceLocator.getService('rteLocale');
+            this.savedSelection = new selection_1.NodeSelection(this.parent.inputElement);
+            this.defaultItems = slash_menu_settings_1.defaultSlashMenuDataModel;
+            this.injectibleItems = slash_menu_settings_1.injectibleSlashMenuDataModel;
+            this.parent.on(events.modelChanged, this.onPropertyChanged, this);
+            this.parent.on(events.destroy, this.removeEventListener, this);
+            this.parent.on(events.initialEnd, this.render, this);
+        }
+        SlashMenu.prototype.removeEventListener = function () {
+            this.parent.off(events.modelChanged, this.onPropertyChanged);
+            this.parent.off(events.destroy, this.removeEventListener);
+        };
+        SlashMenu.prototype.onPropertyChanged = function (e) {
+            for (var _i = 0, _a = Object.keys(e.newProp); _i < _a.length; _i++) {
+                var prop = _a[_i];
+                if (prop === 'slashMenuSettings') {
+                    switch (Object.keys(e.newProp.slashMenuSettings)[0]) {
+                        case 'enable':
+                            if (!e.newProp.slashMenuSettings.enable) {
+                                this.removeEventListener();
+                            }
+                            else {
+                                this.render();
+                            }
+                            break;
+                        case 'items':
+                            this.mention.dataSource = this.getItems();
+                            break;
+                        case 'popupHeight':
+                            this.mention.popupHeight = e.newProp.slashMenuSettings.popupHeight;
+                            break;
+                        case 'popupWidth':
+                            this.mention.popupWidth = e.newProp.slashMenuSettings.popupWidth;
+                            break;
+                    }
+                }
+            }
+        };
+        SlashMenu.prototype.getModuleName = function () {
+            return 'slashMenu';
+        };
+        SlashMenu.prototype.destroy = function () {
+            if (this.mention && !this.mention.isDestroyed) {
+                this.mention.destroy();
+                this.defaultItems = [];
+                this.injectibleItems = [];
+            }
+        };
+        SlashMenu.prototype.generateMentionModel = function () {
+            var _this = this;
+            var dataSource = this.getItems();
+            var model = {
+                dataSource: dataSource,
+                cssClass: 'e-slash-menu' + this.parent.getCssClass(),
+                fields: { text: 'text', groupBy: 'type', iconCss: 'iconCss', value: 'description' },
+                mentionChar: '/',
+                target: this.parent.inputElement,
+                popupHeight: this.parent.slashMenuSettings.popupHeight,
+                popupWidth: this.parent.slashMenuSettings.popupWidth,
+                allowSpaces: true,
+                itemTemplate: '${if(iconCss && description)}' +
+                    '<div class="e-rte-slash-menu-item-content" style="display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center;">' +
+                    '<div class="e-slash-menu-icon"style="padding: 15px 15px 15px 15px;"><div class="${iconCss}"></div></div> ' +
+                    '<div style="display: flex; flex-direction: column;">' +
+                    '<span class="e-rte-slash-menu-item-text" style="font-weight: 500;">${text}</span>' +
+                    '${if(description)}' +
+                    '<span class="e-rte-slash-menu-item-description">${description}</span>' +
+                    '${/if}' +
+                    '</div>' +
+                    '</div>' +
+                    '${else}' +
+                    '${if(iconCss && text)}' +
+                    '<div class="e-rte-slash-menu-item-content" style="display: flex; flex-direction: row; align-items: center; height: 25px; font-weight: 500;">' +
+                    '<div class="e-slash-menu-icon"style="margin-left: 15px; width: 30px"><div class="${iconCss}"></div></div> ' +
+                    '<span class="e-rte-slash-menu-item-icon-text">${text}</span>' +
+                    '</div>' +
+                    '${/if}' +
+                    '${/if}',
+                beforeOpen: function () {
+                    _this.parent.notify(events.slashMenuOpening, {});
+                    _this.savedSelection = _this.savedSelection.save(_this.savedSelection.getRange(_this.currentDocument), _this.currentDocument);
+                },
+                filtering: function () {
+                    _this.savedSelection = _this.savedSelection.save(_this.savedSelection.getRange(_this.currentDocument), _this.currentDocument);
+                },
+                select: this.handleSelect.bind(this)
+            };
+            return model;
+        };
+        SlashMenu.prototype.handleSelect = function (args) {
+            var _this = this;
+            args.cancel = true;
+            this.parent.focusIn();
+            this.savedSelection.restore();
+            var item = args.itemData;
+            var selectEventArgs = {
+                isInteracted: args.isInteracted,
+                item: args.item,
+                itemData: args.itemData,
+                originalEvent: args.e,
+                cancel: false
+            };
+            if (args.itemData.isCustomItem) {
+                this.parent.formatter.beforeSlashMenuApply();
+            }
+            this.parent.trigger('slashMenuItemSelect', selectEventArgs, function (selectArgs) {
+                if (selectArgs.cancel) {
+                    return;
+                }
+                else {
+                    if (!selectArgs.itemData.isCustomItem) {
+                        _this.parent.formatter.beforeSlashMenuApply();
+                        var itemModel_1 = item;
+                        switch (itemModel_1.command) {
+                            case 'OrderedList':
+                                _this.parent.executeCommand('insertOrderedList');
+                                break;
+                            case 'UnorderedList':
+                                _this.parent.executeCommand('insertUnorderedList');
+                                break;
+                            case 'Audio':
+                            case 'Video':
+                            case 'Image':
+                            case 'Table':
+                            case 'Link':
+                                _this.mention.hidePopup();
+                                setTimeout(function () {
+                                    if (itemModel_1.subCommand === base_1.DialogType.InsertLink) {
+                                        _this.parent.notify(events.showLinkDialog, {});
+                                    }
+                                    else if (itemModel_1.subCommand === base_1.DialogType.InsertImage) {
+                                        _this.parent.notify(events.showImageDialog, selectEventArgs);
+                                    }
+                                    else if (itemModel_1.subCommand === base_1.DialogType.InsertAudio) {
+                                        _this.parent.notify(events.showAudioDialog, selectEventArgs);
+                                    }
+                                    else if (itemModel_1.subCommand === base_1.DialogType.InsertVideo) {
+                                        _this.parent.notify(events.showVideoDialog, selectEventArgs);
+                                    }
+                                    else if (itemModel_1.subCommand === base_1.DialogType.InsertTable) {
+                                        _this.parent.notify(events.showTableDialog, {});
+                                    }
+                                }, 100);
+                                break;
+                            case 'Emojipicker':
+                                _this.mention.hidePopup();
+                                setTimeout(function () {
+                                    _this.parent.showEmojiPicker();
+                                }, 100);
+                                break;
+                            default:
+                                _this.parent.executeCommand('formatBlock', itemModel_1.subCommand);
+                                break;
+                        }
+                        _this.parent.notify(events.toolbarRefresh, {});
+                    }
+                    else {
+                        if (_this.parent.inputElement.classList.contains('e-mention')) {
+                            var slashMenuPopup = _this.parent.inputElement.ownerDocument.getElementById(_this.parent.inputElement.id + '_slash_menu_popup');
+                            var isSlashMenuPopupOpen = slashMenuPopup && slashMenuPopup.classList.contains('e-popup-open');
+                            if (isSlashMenuPopupOpen) {
+                                _this.mention.hidePopup();
+                            }
+                        }
+                    }
+                }
+            });
+        };
+        SlashMenu.prototype.getItems = function () {
+            var items = this.parent.slashMenuSettings.items;
+            var dataSource = [];
+            var _loop_1 = function (i) {
+                if (typeof items[i] === 'string') {
+                    var commnadName_1 = items[i];
+                    var model = this_1.defaultItems.filter(function (item) { return item.command === commnadName_1; })[0];
+                    if (ej2_base_1.isNullOrUndefined(model)) {
+                        model = this_1.injectibleItems.filter(function (item) { return item.module.toLowerCase().replace(' ', '') === commnadName_1.toLowerCase().replace(' ', ''); })[0];
+                    }
+                    var localeVariable = default_locale_1.slashMenuCommandsKey.get(commnadName_1);
+                    dataSource.push({
+                        text: this_1.L10n.getConstant(localeVariable.text),
+                        command: model.command,
+                        subCommand: model.subCommand,
+                        type: model.type,
+                        module: model.module,
+                        iconCss: model.iconCss,
+                        description: this_1.L10n.getConstant(localeVariable.description)
+                    });
+                }
+                else {
+                    dataSource.push({
+                        text: items[i].text,
+                        command: items[i].command,
+                        type: items[i].type,
+                        iconCss: items[i].iconCss,
+                        description: items[i].description,
+                        isCustomItem: true
+                    });
+                }
+            };
+            var this_1 = this;
+            for (var i = 0; i < items.length; i++) {
+                _loop_1(i);
+            }
+            return dataSource;
+        };
+        SlashMenu.prototype.render = function () {
+            if (this.parent.editorMode === 'HTML' && this.parent.slashMenuSettings.enable) {
+                var options = this.generateMentionModel();
+                this.mention = new ej2_dropdowns_1.Mention(options);
+                this.mention.appendTo(this.parent.rootContainer.appendChild(this.parent.createElement('div', { className: 'e-rte-slash-menu', id: this.parent.getID() + '_slash_menu' })));
+            }
+        };
+        return SlashMenu;
+    }());
+    exports.SlashMenu = SlashMenu;
+});