suneditor 2.47.0 → 2.47.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "suneditor",
-  "version": "2.47.0",
+  "version": "2.47.1",
   "description": "Vanilla javascript based WYSIWYG web editor, with no dependencies",
   "author": "JiHong.Lee",
   "license": "MIT",

package/src/lib/constructor.js

@@ -416,6 +416,7 @@ export default {
         options.plugins = plugins;
         /** Values */
         options.strictMode = options.strictMode !== false;
+        options.strictHTMLValidation = options.strictHTMLValidation === true;
         options.lang = options.lang || _defaultLang;
         options.value = typeof options.value === 'string' ? options.value : null;
         options.allowedClassNames = new util._w.RegExp((options.allowedClassNames && typeof options.allowedClassNames === 'string' ? options.allowedClassNames + '|' : '') + '^__se__|se-|katex');
@@ -542,6 +543,7 @@ export default {
         options.imageMultipleFile = !!options.imageMultipleFile;
         options.imageAccept = (typeof options.imageAccept !== 'string' || options.imageAccept.trim() === "*") ? 'image/*' : options.imageAccept.trim() || 'image/*';
         /** Image - image gallery */
+        options.imageGalleryData = options.imageGalleryData || null;
         options.imageGalleryUrl = typeof options.imageGalleryUrl === 'string' ? options.imageGalleryUrl : null;
         options.imageGalleryHeader = options.imageGalleryHeader || null;
         /** Video */

package/src/lib/core.js

@@ -1270,6 +1270,7 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
             const range = this.getRange();
             if (this._selectionVoid(range)) return false;
 
+            const collapsed = range.collapsed;
             let startCon = range.startContainer;
             let startOff = range.startOffset;
             let endCon = range.endContainer;
@@ -1294,7 +1295,7 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
                 while (endCon && endCon.nodeType === 1 && endCon.lastChild) {
                     endCon = endCon.lastChild;
                 }
-                endOff = endCon.textContent.length;
+                endOff = collapsed ? 0 : endCon.textContent.length;
             }
 
             // startContainer
@@ -1474,18 +1475,19 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
          * @description Determine if this offset is the edge offset of container
          * @param {Node} container The node of the selection object. (range.startContainer..)
          * @param {Number} offset The offset of the selection object. (core.getRange().startOffset...)
-         * @param {String|undefined} dir Select check point - Both edge, Front edge or End edge. ("front": Front edge, "end": End edge, undefined: Both edge)
+         * @param {String|undefined} dir Select check point - Both edge, Front edge or End edge. ("start": Front edge, "end": End edge, undefined: Both edge)
          * @returns {Boolean}
          */
         isEdgePoint: function (container, offset, dir) {
-            return (dir !== 'end' && offset === 0) || ((!dir || dir !== 'front') && !container.nodeValue && offset === 1) || ((!dir || dir === 'end') && !!container.nodeValue && offset === container.nodeValue.length);
+            if (container.nodeType === 1 && !container.textContent.length) return true;
+            return (dir !== 'end' && offset === 0) || ((!dir || dir !== 'start') && !container.nodeValue && offset === 1) || ((!dir || dir === 'end') && !!container.nodeValue && offset === container.nodeValue.length);
         },
 
         /**
          * @description Check if the container and offset values are the edges of the format tag
          * @param {Node} container The node of the selection object. (range.startContainer..)
          * @param {Number} offset The offset of the selection object. (core.getRange().startOffset...)
-         * @param {String} dir Select check point - "front": Front edge, "end": End edge, undefined: Both edge.
+         * @param {String} dir Select check point - "start": Front edge, "end": End edge, undefined: Both edge.
          * @returns {Array|null}
          * @private
          */
@@ -1493,7 +1495,7 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
             if (!this.isEdgePoint(node, offset, dir)) return false;
 
             const result = [];
-            dir = dir === 'front' ? 'previousSibling' : 'nextSibling';
+            dir = dir === 'start' ? 'previousSibling' : 'nextSibling';
             while (node && !util.isFormatElement(node) && !util.isWysiwygDiv(node)) {
                 if (!node[dir] || (util.isBreak(node[dir]) && !node[dir][dir])) {
                     if (node.nodeType === 1) result.push(node.cloneNode(false));
@@ -5541,7 +5543,11 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
             const dom = _d.createRange().createContextualFragment(contents);
 
             try {
-                util._consistencyCheckOfHTML(dom, this._htmlCheckWhitelistRegExp, this._htmlCheckBlacklistRegExp, this._classNameFilter);
+                if (this.options.strictHTMLValidation) {
+                    util._consistencyCheckOfHTML(dom, this._htmlCheckWhitelistRegExp, this._htmlCheckBlacklistRegExp, this._classNameFilter);
+                } else {
+                    util._consistencyCheckOfHTML(dom, this._htmlCheckWhitelistRegExp, false);
+                }
             } catch (error) {
                 console.warn('[SUNEDITOR.convertContentsForEditor.consistencyCheck.fail] ' + error);
             }
@@ -6235,6 +6241,8 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
                 this.execCommand('formatBlock', false, (formatName || options.defaultTag));
                 this.removeRange();
                 this._editorRange();
+                this.effectNode = null;
+                return;
             }
 
             if (format) {
@@ -6248,7 +6256,12 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
             }
 
             this.effectNode = null;
-            this.nativeFocus();
+
+            if (startCon) {
+                this.setRange(startCon, 1, startCon, 1);
+            } else {
+                this.nativeFocus();
+            }
         },
 
         /**
@@ -6532,7 +6545,7 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
             }
         },
 
-        addGlobalEvent(type, listener, useCapture) {
+        addGlobalEvent: function (type, listener, useCapture) {
             if (options.iframe) {
                 core._ww.addEventListener(type, listener, useCapture);
             }
@@ -6544,7 +6557,7 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
             };
         },
     
-        removeGlobalEvent(type, listener, useCapture) {
+        removeGlobalEvent: function (type, listener, useCapture) {
             if (!type) return;
     
             if (typeof type === 'object') {
@@ -6588,7 +6601,9 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
 
             event.removeGlobalEvent(event.__selectionSyncEvent);
             event.__selectionSyncEvent = event.addGlobalEvent('mouseup', function() {
-                core._editorRange();
+                if (core) {
+                    core._editorRange();
+                }
                 event.removeGlobalEvent(event.__selectionSyncEvent);
             });
 
@@ -6670,7 +6685,7 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
             const rangeEl = util.getRangeFormatElement(selectionNode, null);
 
             let selectionNodeDeepestFirstChild = selectionNode;
-            while (selectionNodeDeepestFirstChild.firstChild) selectionNodeDeepestFirstChild = selectionNodeDeepestFirstChild.firstChild;
+            while (selectionNodeDeepestFirstChild && selectionNodeDeepestFirstChild.firstChild) selectionNodeDeepestFirstChild = selectionNodeDeepestFirstChild.firstChild;
 
             const selectedComponentInfo = core.getFileComponent(selectionNodeDeepestFirstChild);
             if (selectedComponentInfo) {
@@ -6716,10 +6731,12 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
         },
 
         _toggleToolbarBalloon: function () {
-            core._editorRange();
-            const range = core.getRange();
-            if (core._bindControllersOff || (!core._isBalloonAlways && range.collapsed)) event._hideToolbar();
-            else event._showToolbarBalloon(range);
+            if (core) {
+                core._editorRange();
+                const range = core.getRange();
+                if (core._bindControllersOff || (!core._isBalloonAlways && range.collapsed)) event._hideToolbar();
+                else event._showToolbarBalloon(range);
+            }
         },
 
         _showToolbarBalloon: function (rangeObj) {
@@ -6896,6 +6913,14 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
                 return false;
             }
 
+            const range = core.getRange();
+            const selectionNode = core.getSelectionNode();
+            const formatEl = util.getFormatElement(selectionNode, null);
+            if (!formatEl && range.collapsed && !util.isComponent(selectionNode) && !util.isList(selectionNode)) {
+                const rangeEl = util.getRangeFormatElement(formatEl, null);
+                core._setDefaultFormat(util.isRangeFormatElement(rangeEl) ? 'DIV' : options.defaultTag);
+            }
+
             core._editorRange();
 
             const data = (e.data === null ? '' : e.data === undefined ? ' ' : e.data) || '';
@@ -6924,7 +6949,7 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
                 return siblingNode && siblingNode.nodeType === 1 && siblingNode.getAttribute('contenteditable') === 'false';
             } else {
                 siblingNode = event._isUneditableNode_getSibling(container, siblingKey, container);
-                return core.isEdgePoint(container, offset, isFront ? 'front' : 'end') && (siblingNode && siblingNode.nodeType === 1 && siblingNode.getAttribute('contenteditable') === 'false');
+                return core.isEdgePoint(container, offset, isFront ? 'start' : 'end') && (siblingNode && siblingNode.nodeType === 1 && siblingNode.getAttribute('contenteditable') === 'false');
             }
         },
 
@@ -6978,6 +7003,11 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
             }
 
             /** default key action */
+            if (keyCode === 13 && util.isFormatElement(core.getRange().startContainer)) {
+                core._resetRangeToTextNode();
+                selectionNode = core.getSelectionNode();
+            }
+            
             const range = core.getRange();
             const selectRange = !range.collapsed || range.startContainer !== range.endContainer;
             const fileComponentName = core._fileManager.pluginRegExp.test(core.currentControllerName) ? core.currentControllerName : '';
@@ -7204,6 +7234,12 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
                         break;
                     }
 
+                    if (!selectRange && core._isEdgeFormat(range.endContainer, range.endOffset, 'end') && !formatEl.nextSibling) {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        return;
+                    }
+
                     // tag[contenteditable="false"]
                     if (event._isUneditableNode(range, false)) {
                         e.preventDefault();
@@ -7358,15 +7394,14 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
                         if (!shift) {
                             const tabText = util.createTextNode(new _w.Array(core._variable.tabSize + 1).join('\u00A0'));
                             if (lines.length === 1) {
-                                const textRange = core.insertNode(tabText, null, true);
-                                if (!textRange) return false;
+                                if (!core.insertNode(tabText, null, true)) return false;
                                 if (!fc) {
                                     r.sc = tabText;
-                                    r.so = textRange.endOffset;
+                                    r.so = tabText.length;
                                 }
                                 if (!lc) {
                                     r.ec = tabText;
-                                    r.eo = textRange.endOffset;
+                                    r.eo = tabText.length;
                                 }
                             } else {
                                 const len = lines.length - 1;
@@ -7596,7 +7631,8 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
                                 const isMultiLine = util.getFormatElement(range.startContainer, null) !== util.getFormatElement(range.endContainer, null);
                                 const newFormat = formatEl.cloneNode(false);
                                 newFormat.innerHTML = '<br>';
-                                const r = core.removeNode();
+                                const commonCon = range.commonAncestorContainer;
+                                const r = commonCon === range.startContainer && commonCon === range.endContainer && util.onlyZeroWidthSpace(commonCon) ? range : core.removeNode();
                                 newEl = util.getFormatElement(r.container, null);
                                 if (!newEl) {
                                     if (util.isWysiwygDiv(r.container)) {
@@ -7711,8 +7747,8 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
                 e.preventDefault();
                 e.stopPropagation();
                 const nbsp = core.insertNode(util.createTextNode('\u00a0'));
-                if (nbsp && nbsp.container) {
-                    core.setRange(nbsp.container, nbsp.endOffset, nbsp.container, nbsp.endOffset);
+                if (nbsp) {
+                    core.setRange(nbsp, nbsp.length, nbsp, nbsp.length);
                     return;
                 }
             }
@@ -7724,7 +7760,7 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
             }
 
             if (event._directionKeyCode.test(keyCode)) {
-                core._editorRange();
+                _w.setTimeout(core._editorRange.bind(core), 0);
                 event._applyTagEffects();
             }
         },
@@ -7734,7 +7770,8 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
 
             let selectionNode = core.getSelectionNode();
 
-            const selectNode = function (node, offset = 0) {
+            const selectNode = function (node, offset) {
+                if (!offset) offset = 0;
                 e.preventDefault();
                 e.stopPropagation();
 
@@ -7757,12 +7794,12 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
                 let currentCellFirstNode = currentCell;
                 let currentCellLastNode = currentCell;
                 if (currentCell) {
-                    while (currentCellFirstNode.firstChild) currentCellFirstNode = currentCellFirstNode.firstChild;
-                    while (currentCellLastNode.lastChild) currentCellLastNode = currentCellLastNode.lastChild;
+                    while (currentCellFirstNode && currentCellFirstNode.firstChild) currentCellFirstNode = currentCellFirstNode.firstChild;
+                    while (currentCellLastNode && currentCellLastNode.lastChild) currentCellLastNode = currentCellLastNode.lastChild;
                 }
 
                 let selectionNodeDeepestFirstChild = selectionNode;
-                while (selectionNodeDeepestFirstChild.firstChild) selectionNodeDeepestFirstChild = selectionNodeDeepestFirstChild.firstChild;
+                while (selectionNodeDeepestFirstChild && selectionNodeDeepestFirstChild.firstChild) selectionNodeDeepestFirstChild = selectionNodeDeepestFirstChild.firstChild;
                 const isCellFirstNode = (selectionNodeDeepestFirstChild === currentCellFirstNode);
                 const isCellLastNode = (selectionNodeDeepestFirstChild === currentCellLastNode);
 
@@ -7773,14 +7810,14 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
                     if (previousRow) siblingToSet = previousRow.children[currentCell.cellIndex];
                     else siblingToSet = util.getPreviousDeepestNode(table, core.context.element.wysiwyg);
 
-                    while (siblingToSet.lastChild) siblingToSet = siblingToSet.lastChild;
+                    while (siblingToSet && siblingToSet.lastChild) siblingToSet = siblingToSet.lastChild;
                     if (siblingToSet) offset = siblingToSet.textContent.length;
                 } else if (e.keyCode === 40 && isCellLastNode) {  // DOWN
                     const nextRow = currentRow && currentRow.nextElementSibling;
                     if (nextRow) siblingToSet = nextRow.children[currentCell.cellIndex];
                     else siblingToSet = util.getNextDeepestNode(table, core.context.element.wysiwyg);
 
-                    while (siblingToSet.firstChild) siblingToSet = siblingToSet.firstChild;
+                    while (siblingToSet && siblingToSet.firstChild) siblingToSet = siblingToSet.firstChild;
                 }
 
                 if (siblingToSet) {
@@ -7831,7 +7868,7 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
             }
 
             let selectionNodeDeepestFirstChild = selectionNode;
-            while (selectionNodeDeepestFirstChild.firstChild) selectionNodeDeepestFirstChild = selectionNodeDeepestFirstChild.firstChild;
+            while (selectionNodeDeepestFirstChild && selectionNodeDeepestFirstChild.firstChild) selectionNodeDeepestFirstChild = selectionNodeDeepestFirstChild.firstChild;
 
             const selectedComponentInfo = core.getFileComponent(selectionNodeDeepestFirstChild);
             if (!(e.keyCode === 16 || e.shiftKey) && selectedComponentInfo) core.selectComponent(selectedComponentInfo.target, selectedComponentInfo.pluginName);
@@ -8353,7 +8390,7 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
             }
         },
 
-        _enterPrevent(e) {
+        _enterPrevent: function (e) {
             e.preventDefault();
             if (!util.isMobile) return;
 

package/src/lib/util.js

@@ -28,7 +28,7 @@ const util = {
         this.isOSX_IOS = /(Mac|iPhone|iPod|iPad)/.test(navigator.platform);
         this.isChromium = !!window.chrome;
         this.isResizeObserverSupported = (typeof ResizeObserver === 'function');
-        this.isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
+        this.isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || ((navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0) && 'ontouchstart' in window);
     },
 
     _allowedEmptyNodeList: '.se-component, pre, blockquote, hr, li, table, img, iframe, video, audio, canvas',

package/src/options.d.ts

@@ -3,6 +3,14 @@ import { Plugin } from './plugins/Plugin';
 
 export interface SunEditorOptions {
     plugins?: Plugin[] | Record<string, Plugin>;
+    /**
+     * Option to disable clean mode, which checks the styles, classes, etc. of the editor content
+     */
+    strictMode?: boolean;
+    /**
+     * Enforces strict HTML validation based on the editor`s policy. Applies to methods like setContents to ensure content compliance when enabled.
+     */
+    strictHTMLValidation?: boolean;
     /**
      * Values
      * ======
@@ -355,6 +363,10 @@ export interface SunEditorOptions {
      * Image - image gallery
      * =====
      */
+    /**
+     * Direct JSON data without making server requests.
+     */
+    imageGalleryData?: Array;
     /**
      * The url of the image gallery, if you use the image gallery
      */

package/src/plugins/dialog/image.js

@@ -684,7 +684,7 @@ export default {
         imagePlugin.setAlign.call(this, align, oImg, cover, container);
 
         oImg.onload = imagePlugin._image_create_onload.bind(this, oImg, contextImage.svgDefaultSize, container);
-        if (this.insertComponent(container, true, true, true)) this.plugins.fileManager.setInfo.call(this, 'image', oImg, this.functions.onImageUpload, file, true);
+        if (this.insertComponent(container, true, true, !this.options.mediaAutoSelect)) this.plugins.fileManager.setInfo.call(this, 'image', oImg, this.functions.onImageUpload, file, true);
         this.context.resizing._resize_plugin = '';
     },
 
@@ -697,6 +697,7 @@ export default {
             const line = this.appendFormatTag(container, null);
             if (line) this.setRange(line, 0, line, 0);
         }
+        this.history.push(false);
     },
 
     update_image: function (init, openController, notHistoryPush) {

package/src/plugins/fileBrowser/imageGallery.js

@@ -21,7 +21,8 @@ export default {
         const context = core.context;
         context.imageGallery = {
             title: core.lang.toolbar.imageGallery, // @Required @Override fileBrowser - File browser window title.
-            url: core.options.imageGalleryUrl, // @Required @Override fileBrowser - File server url.
+            directData: core.options.imageGalleryData, // @option @Override fileBrowser - Direct JSON data without making server requests.
+            url: core.options.imageGalleryUrl, // @option @Override fileBrowser - File server url.
             header: core.options.imageGalleryHeader, // @Required @Override fileBrowser - File server http header.
             listClass: 'se-image-list', // @Required @Override fileBrowser - Class name of list div.
             itemTemplateHandler: this.drawItems, // @Required @Override fileBrowser - Function that defines the HTML of an file item.

package/src/plugins/modules/fileBrowser.js

@@ -162,7 +162,11 @@
             fileBrowserContext.titleArea.textContent = pluginContext.title;
             fileBrowserContext.area.style.display = 'block';
 
-            this.plugins.fileBrowser._drawFileList.call(this, this.context[pluginName].url, this.context[pluginName].header);
+            if (this.context[pluginName].directData) {
+                this.plugins.fileBrowser._drawListItem.call(this, this.context[pluginName].directData, true);
+            } else {
+                this.plugins.fileBrowser._drawFileList.call(this, this.context[pluginName].url, this.context[pluginName].header);
+            }
         },
 
         _bindClose: null,

package/src/plugins/submenu/list.js

@@ -286,7 +286,7 @@ export default {
         }
         
         this.effectNode = null;
-        return !isCollapsed ? originRange : afterRange;
+        return !isCollapsed ? originRange : afterRange || originRange;
     },
 
     _detachNested: function (cells) {

package/src/plugins/dialog/mention.d.ts

@@ -1,5 +0,0 @@
-import { DialogPlugin } from '../DialogPlugin';
-
-declare const mention: DialogPlugin;
-
-export default mention;

package/src/plugins/dialog/mention.js

@@ -1,242 +0,0 @@
-/*
- * wysiwyg web editor
- *
- * suneditor.js
- * Copyright 2017 JiHong Lee.
- * MIT license.
- */
-"use strict";
-
-import dialog from "../modules/dialog";
-
-
-function insertAt(parent, child, index) {
-  if (!index) index = 0;
-  if (index >= parent.children.length) {
-    parent.appendChild(child);
-  } else {
-    parent.insertBefore(child, parent.children[index]);
-  }
-}
-
-export default {
-  name: "mention",
-  display: "dialog",
-
-  renderItem: function(item) {
-    return `<span>${item}</span>`;
-  },
-
-  getItems: function(term) {
-    return Promise.resolve(
-      ["overwite", "the", "mention", "plugin", "getItems", "method"].filter(
-        (w) => w.includes(term.toLowerCase())
-      )
-    );
-  },
-
-  renderList: function(term) {
-    const { mention } = this.context;
-    let promise = Promise.resolve();
-    if (mention.term !== term) {
-      mention.focussed = 0;
-      mention.term = term;
-      promise = mention.getItems(term).then((items) => {
-        mention._items = items;
-
-        Object.keys(mention._itemElements).forEach((id) => {
-          if (!items.find((i) => mention.getId(i) === id)) {
-            const child = mention._itemElements[id];
-            child.parentNode.removeChild(child);
-            delete mention._itemElements[id];
-          }
-        });
-
-        items.forEach((item, idx) => {
-          const id = mention.getId(item);
-          if (!mention._itemElements[id]) {
-            const el = this.util.createElement("LI");
-            el.setAttribute("data-mention", id);
-            this.util.addClass(el, 'se-mention-item');
-            el.innerHTML = mention.renderItem(item);
-            el.addEventListener("click", () => {
-              mention._addMention(item);
-            });
-            insertAt(mention._list, el, idx);
-            mention._itemElements[id] = el;
-          }
-        });
-      });
-    }
-
-    promise.then(() => {
-      const current = mention._list.querySelectorAll(".se-mention-item")[
-        mention.focussed
-      ];
-      if (current && !this.util.hasClass(current, "se-mention-active")) {
-        const prev = mention._list.querySelector(".se-mention-active");
-        if (prev) this.util.removeClass(prev, "se-mention-active");
-        this.util.addClass(current, "se-mention-active");
-      }
-    });
-  },
-
-  setDialog: function(core) {
-    const mention_dialog = core.util.createElement("DIV");
-    const lang = core.lang;
-    mention_dialog.className = "se-dialog-content";
-    mention_dialog.style.display = "none";
-    const html = `
-      <form class="se-dialog-form">
-        <div class="se-dialog-header">
-          <button type="button" data-command="close" class="se-btn se-dialog-close" title="${lang.dialogBox.close}" aria-label="${lang.dialogBox.close}">
-            ${core.icons.cancel}
-          </button>
-          <span class="se-modal-title">${lang.dialogBox.mentionBox.title}</span>
-        </div>
-        <div class="se-dialog-body">
-          <input class="se-input-form se-mention-search" type="text" placeholder="${lang.dialogBox.browser.search}" />
-          <ul class="se-mention-list">
-          </ul>
-        </div>
-      </form>
-    `;
-    mention_dialog.innerHTML = html;
-    return mention_dialog;
-  },
-
-  getId(mention) {
-    return mention;
-  },
-
-  getValue(mention) {
-    return `@${mention}`;
-  },
-
-  getLinkHref(/*mention*/) {
-    return "";
-  },
-
-  open: function() {
-    const { mention } = this.context;
-    this.plugins.dialog.open.call(
-      this,
-      "mention",
-      "mention" === this.currentControllerName
-    );
-    mention._search.focus();
-    mention.renderList("");
-  },
-
-  on: function(update) {
-    if (update) return;
-    this.plugins.mention.init.call(this);
-  },
-
-  init: function() {
-    const { mention } = this.context;
-    mention._search.value = "";
-    mention.focussed = 0;
-    mention._items = [];
-    mention._itemElements = {};
-    mention._list.innerHTML = "";
-    delete mention.term;
-  },
-
-  onKeyPress: function(e) {
-    const { mention } = this.context;
-    switch (e.key) {
-      case "ArrowDown":
-        mention.focussed += 1;
-        e.preventDefault();
-        e.stopPropagation();
-        break;
-
-      case "ArrowUp":
-        if (mention.focussed > 0) {
-          mention.focussed -= 1;
-        }
-        e.preventDefault();
-        e.stopPropagation();
-        break;
-
-      case "Enter":
-        mention._addMention();
-        e.preventDefault();
-        e.stopPropagation();
-        break;
-
-      default:
-    }
-  },
-
-  onKeyUp: function(e) {
-    const { mention } = this.context;
-    mention.renderList(e.target.value);
-  },
-
-  getMentions: function(core) {
-    const { mentions, getId } = core.context.mention;
-    return mentions.filter((mention) => {
-      const id = getId(mention);
-      return core.context.element.wysiwyg.querySelector(
-        `[data-mention="${id}"]`
-      );
-    });
-  },
-
-  _addMention: function(item) {
-    const { mention } = this.context;
-    const new_mention = item || mention._items[mention.focussed];
-    if (new_mention) {
-      if (
-        !mention.mentions.find(
-          (m) => mention.getId(m) === mention.getId(new_mention)
-        )
-      ) {
-        mention.mentions.push(new_mention);
-      }
-      const el = this.util.createElement("A");
-      el.href = mention.getLinkHref(new_mention);
-      el.target = "_blank";
-      el.innerHTML = mention.getValue(new_mention);
-      el.setAttribute("data-mention", mention.getId(new_mention));
-      this.insertNode(el, null, false);
-      const spacer = this.util.createElement("SPAN");
-      spacer.innerHTML = " ";
-      this.insertNode(spacer, el, false);
-    }
-    this.plugins.dialog.close.call(this);
-  },
-  add: function(core) {
-    core.addModule([dialog]);
-    this.title = core.lang.toolbar.mention;
-    const _dialog = this.setDialog(core);
-    core.getMentions = this.getMentions(core);
-
-    const _search = _dialog.querySelector(".se-mention-search");
-    _search.addEventListener("keyup", this.onKeyUp.bind(core));
-    _search.addEventListener("keydown", this.onKeyPress.bind(core));
-    const _list = _dialog.querySelector(".se-mention-list");
-
-    core.context.mention = {
-      _addMention: this._addMention.bind(core),
-      _itemElements: {},
-      _items: [],
-      _list,
-      _search,
-      focussed: 0,
-      getId: this.getId.bind(core),
-      getItems: this.getItems,
-      getLinkHref: this.getLinkHref.bind(core),
-      getValue: this.getValue.bind(core),
-      mentions: [],
-      modal: _dialog,
-      open: this.open.bind(core),
-      renderItem: this.renderItem,
-      renderList: this.renderList.bind(core),
-    };
-    core.context.dialog.modal.appendChild(_dialog);
-  },
-  action: function() {},
-};