@oix1987/yjd 2.0.0 → 2.1.0

package/index.d.ts

@@ -2,6 +2,63 @@
 // These declarations are the package entry types (referenced via "types" in package.json),
 // so they are declared at top level rather than wrapped in `declare module`.
 
+/** A person/task suggestion returned by a mention source. */
+export interface MentionItem {
+  id: string | number;
+  name?: string;
+  label?: string;
+  avatar_url?: string;
+  [key: string]: any;
+}
+
+/** Config for a single mention trigger character. */
+export interface MentionTrigger {
+  /** Trigger character, e.g. '#'. */
+  char: string;
+  /** Async (or sync) lookup of suggestions for the typed query. */
+  source: (query: string) => MentionItem[] | Promise<MentionItem[]>;
+  /** Custom HTML for a suggestion row. Defaults to avatar + name. */
+  renderItem?: (item: MentionItem) => string;
+}
+
+/** @mention configuration. The token inserted carries `data-id`. */
+export interface MentionOptions {
+  /** Primary trigger character (default '@'). */
+  trigger?: string;
+  source?: (query: string) => MentionItem[] | Promise<MentionItem[]>;
+  renderItem?: (item: MentionItem) => string;
+  /** Additional triggers, e.g. '#' for task references. */
+  triggers?: MentionTrigger[];
+}
+
+/** Image upload hook configuration. */
+export interface ImageOptions {
+  /**
+   * Upload the chosen file and resolve to its URL. While pending, a placeholder
+   * is shown; on resolve the src is swapped, on reject the image is removed.
+   * Omit to fall back to inline base64 (data URLs).
+   */
+  upload?: (file: File) => string | Promise<string>;
+  /** `accept` attribute for the file picker (default 'image/*'). */
+  accept?: string;
+  /** Maximum file size in bytes; larger files emit 'image:error'. */
+  maxSize?: number;
+}
+
+/** A JSON document node produced by getJSON()/domToJson. */
+export interface JsonNode {
+  tag?: string;
+  text?: string;
+  attrs?: Record<string, string>;
+  content?: JsonNode[];
+}
+
+/** Root JSON document. */
+export interface JsonDoc {
+  type: 'doc';
+  content: JsonNode[];
+}
+
 // Editor options interface
 export interface EditorOptions {
   placeholder?: string;
@@ -24,6 +81,10 @@ export interface EditorOptions {
   markdown?: boolean;
   /** Autosave drafts to localStorage. true, or { key, debounce(ms) }. */
   autosave?: boolean | { key?: string; debounce?: number };
+  /** Image upload hook (replaces inline base64 when `upload` is provided). */
+  image?: ImageOptions | boolean;
+  /** @mention / #task autocomplete. Inert until a `source` is given. */
+  mention?: MentionOptions;
   features?: {
     emoji?: boolean;
     image?: boolean;
@@ -48,6 +109,15 @@ export class Editor {
   emit(event: string, data: any): void;
   getContent(): string;
   setContent(content: string): void;
+  /** Alias of getContent() / setContent(). */
+  getHTML(): string;
+  setHTML(html: string): void;
+  /** Export/import the document as a JSON tree. */
+  getJSON(): JsonDoc;
+  setJSON(json: JsonDoc | JsonNode[]): void;
+  /** Export/import the document as Markdown (mention ids preserved). */
+  getMarkdown(): string;
+  setMarkdown(markdown: string): void;
   getText(): string;
   isEmpty(): boolean;
   clear(): void;
@@ -76,10 +146,35 @@ export class RichEditor extends Editor {
   static register(path: string, definition: any, suppressWarning?: boolean): void;
   static get(path: string): any;
   static create(selector: string | Element, options?: EditorOptions): RichEditor;
+  /**
+   * Progressive-enhance a <textarea> into an editor, keeping textarea.value
+   * in sync (and dispatching native input/change events) on every edit.
+   */
+  static fromTextarea(
+    textarea: HTMLTextAreaElement | string,
+    options?: EditorOptions & { format?: 'html' | 'markdown' }
+  ): RichEditor;
+  /** The original textarea, when created via fromTextarea(). */
+  textarea?: HTMLTextAreaElement;
 }
 
+/** Brand-aligned alias of {@link RichEditor}. */
+export { RichEditor as yjd };
+
 export function createEditor(selector: string | Element, options?: EditorOptions): RichEditor;
 
+/**
+ * Render stored HTML into a read-only view that matches the editor's styling.
+ * Sanitizes the HTML and tags the host element with `.yjd-content`.
+ */
+export function renderStatic(html: string, target?: Element): Element;
+
+// Serialization helpers (also available on the editor as get/set methods)
+export function htmlToMarkdown(html: string): string;
+export function markdownToHtml(markdown: string): string;
+export function domToJson(html: string): JsonDoc;
+export function jsonToHtml(json: JsonDoc | JsonNode[]): string;
+
 // Formats
 export const Bold: any;
 export const Italic: any;
@@ -115,6 +210,7 @@ export const TableToolbar: any;
 export const CodeView: any;
 export const FindReplace: any;
 export const SlashMenu: any;
+export const Mention: any;
 export const ResizeHandles: any;
 
 // UI components

package/index.js

@@ -3,6 +3,8 @@ import registry from './lib/core/registry.js';
 import Module from './lib/core/module.js';
 import { Format, InlineFormat, BlockFormat } from './lib/core/format.js';
 import StylesLoader from './lib/styles-loader.js';
+import { renderStatic } from './lib/static.js';
+import { htmlToMarkdown, markdownToHtml, domToJson, jsonToHtml } from './lib/serialize.js';
 
 // Import formats
 import Bold from './lib/formats/bold.js';
@@ -38,6 +40,7 @@ import TableToolbar from './lib/modules/table-toolbar.js';
 import CodeView from './lib/modules/code-view.js';
 import FindReplace from './lib/modules/find-replace.js';
 import SlashMenu from './lib/modules/slash-menu.js';
+import Mention from './lib/modules/mention.js';
 
 import ResizeHandles from './lib/modules/resize-handles.js';
 
@@ -93,6 +96,7 @@ registry.register('modules/table-toolbar', TableToolbar, true);
 registry.register('modules/code-view', CodeView, true);
 registry.register('modules/find-replace', FindReplace, true);
 registry.register('modules/slash-menu', SlashMenu, true);
+registry.register('modules/mention', Mention, true);
 
 registry.register('modules/resize-handles', ResizeHandles, true);
 
@@ -142,11 +146,67 @@ class RichEditor extends Editor {
   static create(selector, options = {}) {
     return new RichEditor(selector, options);
   }
+
+  /**
+   * Progressive-enhance a <textarea>: hide it, mount an editor in its place,
+   * and keep the textarea's value in sync so existing form submits keep working.
+   *
+   *   const ed = RichEditor.fromTextarea(document.querySelector('#body'), {
+   *     // any editor option; `format` chooses how the textarea is read/written:
+   *     format: 'html' | 'markdown',  // default 'html'
+   *   });
+   *
+   * The textarea's current value seeds the editor (parsed as HTML or Markdown
+   * per `format`). On every change the textarea is updated and a native 'input'
+   * event is dispatched, so framework bindings / validation keep firing.
+   *
+   * @param {HTMLTextAreaElement|string} textarea  Element or selector.
+   * @param {object} [options]  Editor options + optional `format`.
+   * @returns {RichEditor}
+   */
+  static fromTextarea(textarea, options = {}) {
+    const ta = typeof textarea === 'string' ? document.querySelector(textarea) : textarea;
+    if (!ta) throw new Error('RichEditor.fromTextarea: textarea not found');
+
+    const format = options.format === 'markdown' ? 'markdown' : 'html';
+    const readEditor = (ed) => (format === 'markdown' ? ed.getMarkdown() : ed.getContent());
+
+    // Mount point right after the textarea; hide the original.
+    const mount = document.createElement('div');
+    ta.after(mount);
+    ta.style.display = 'none';
+    ta.setAttribute('aria-hidden', 'true');
+
+    const initial = ta.value || '';
+    const editor = new RichEditor(mount, {
+      width: '100%',
+      ...options,
+      // Seed content from the textarea (skip if caller passed explicit content).
+      content: options.content != null ? options.content
+        : (format === 'markdown' ? markdownToHtml(initial) : initial),
+    });
+
+    const sync = () => {
+      const next = readEditor(editor);
+      if (ta.value === next) return;
+      ta.value = next;
+      ta.dispatchEvent(new Event('input', { bubbles: true }));
+      ta.dispatchEvent(new Event('change', { bubbles: true }));
+    };
+    editor.on('change', sync);
+    sync(); // normalise the textarea to the editor's serialization up front.
+
+    editor.textarea = ta;
+    return editor;
+  }
 }
 
-// Export classes for extension
+// Export classes for extension. `yjd` is the brand-aligned name; `RichEditor`
+// is kept as an alias for backward compatibility.
 export {
   RichEditor as default,
+  RichEditor,
+  RichEditor as yjd,
   Editor,
   Module,
   Format,
@@ -194,6 +254,7 @@ export {
   CodeView,
   FindReplace,
   SlashMenu,
+  Mention,
 
   ResizeHandles
 };
@@ -214,6 +275,15 @@ export {
   createCustomButton
 };
 
+// Static rendering + serialization helpers
+export {
+  renderStatic,
+  htmlToMarkdown,
+  markdownToHtml,
+  domToJson,
+  jsonToHtml
+};
+
 
 
 

package/lib/core/editor.js

@@ -2,6 +2,7 @@ import registry from './registry.js';
 import Module from './module.js';
 import { execFormat, queryFormatState } from '../utils/exec-command.js';
 import { sanitizeHtml } from '../utils/sanitize.js';
+import { htmlToMarkdown, markdownToHtml, domToJson, jsonToHtml } from '../serialize.js';
 
 /**
  * Main Editor class - Inspired by Quill's architecture
@@ -253,9 +254,15 @@ export default class Editor {
       modulesToLoad = this.options.modules || ['toolbar', 'history'];
     } else {
       // No toolbar config - load full feature set
-      modulesToLoad = this.options.modules || ['toolbar', 'history', 'block-toolbar', 'table-toolbar', 'code-view', 'theme-switcher', 'resize-handles', 'find-replace', 'slash-menu'];
+      modulesToLoad = this.options.modules || ['toolbar', 'history', 'block-toolbar', 'table-toolbar', 'code-view', 'theme-switcher', 'resize-handles', 'find-replace', 'slash-menu', 'mention'];
     }
-    
+
+    // @mention is inert without a source, so load it whenever configured —
+    // even alongside a custom toolbar that otherwise loads only basics.
+    if (this.options.mention && !modulesToLoad.includes('mention')) {
+      modulesToLoad.push('mention');
+    }
+
     
     modulesToLoad.forEach(moduleName => {
       const ModuleClass = this.registry.get(`modules/${moduleName}`);
@@ -500,7 +507,9 @@ export default class Editor {
     // Persist draft if autosave is enabled
     this._scheduleAutosave(content);
 
-    // Emit text-change event
+    // Emit change events ('change' is the documented name; 'text-change' kept
+    // for backward compatibility).
+    this.emit('change', content);
     this.emit('text-change', content);
   }
 
@@ -823,6 +832,23 @@ export default class Editor {
     this.onContentChange();
   }
 
+  /* ----- Export / import in common formats (HTML · JSON · Markdown) ----- */
+
+  /** HTML string (alias of getContent). */
+  getHTML() { return this.getContent(); }
+  /** Set content from an HTML string (sanitised). */
+  setHTML(html) { this.setContent(sanitizeHtml(html || '')); }
+
+  /** Structured JSON document `{ type:'doc', content:[…] }`. */
+  getJSON() { return domToJson(this.getContent()); }
+  /** Set content from a JSON document (produced by getJSON). */
+  setJSON(json) { this.setContent(sanitizeHtml(jsonToHtml(json))); }
+
+  /** Markdown string. */
+  getMarkdown() { return htmlToMarkdown(this.getContent()); }
+  /** Set content from a Markdown string. */
+  setMarkdown(md) { this.setContent(sanitizeHtml(markdownToHtml(md || ''))); }
+
   /**
    * Get the plain text content of the editor (no markup).
    * @returns {string}
@@ -934,23 +960,76 @@ export default class Editor {
    */
   insertImageFile(file) {
     if (!file || !file.type || !file.type.startsWith('image/')) return;
-    const reader = new FileReader();
-    reader.onload = (ev) => {
-      const dataUrl = ev.target.result;
+
+    const cfg = this.options.image || {};
+    // Validate against optional accept / maxSize before doing anything.
+    if (cfg.accept && cfg.accept !== 'image/*') {
+      const ok = cfg.accept.split(',').some(a => {
+        a = a.trim();
+        return a.endsWith('/*') ? file.type.startsWith(a.slice(0, -1)) : file.type === a;
+      });
+      if (!ok) { this.emit('image:error', { file, reason: 'type' }); return; }
+    }
+    if (cfg.maxSize && file.size > cfg.maxSize) {
+      this.emit('image:error', { file, reason: 'size' });
+      return;
+    }
+
+    // Build a real <img> from a src (validates via the Image format).
+    const makeImg = (src, extra = '') => {
       const ImageClass = this.registry.get('formats/image');
-      let imgHtml;
       if (ImageClass && typeof ImageClass.create === 'function') {
-        const img = ImageClass.create(dataUrl); // validates the data: URL
-        if (!img) return;
-        imgHtml = img.outerHTML;
+        const img = ImageClass.create(src);
+        if (!img) return null;
+        if (extra) img.setAttribute('data-state', extra);
+        return img;
+      }
+      return null;
+    };
+
+    // No upload hook → embed as base64 (backward-compatible default).
+    if (typeof cfg.upload !== 'function') {
+      const reader = new FileReader();
+      reader.onload = (ev) => {
+        const html = (makeImg(ev.target.result) || {}).outerHTML
+          || `<img src="${ev.target.result}" class="inserted-image" style="max-width:100%" contenteditable="false">`;
+        this.focus();
+        execFormat('insertHTML', html);
+        this.onContentChange();
+      };
+      reader.readAsDataURL(file);
+      return;
+    }
+
+    // Upload hook: insert a placeholder, await the URL, then swap the src.
+    const placeholderId = 'rte-up-' + Math.round(performance.now()) + '-' + (this._upCounter = (this._upCounter || 0) + 1);
+    const ph = makeImg('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27120%27 height=%2790%27%3E%3Crect width=%27100%25%27 height=%27100%25%27 fill=%27%23efedff%27/%3E%3C/svg%3E', 'uploading');
+    if (!ph) return;
+    ph.id = placeholderId;
+    ph.style.opacity = '0.6';
+    this.focus();
+    execFormat('insertHTML', ph.outerHTML);
+    this.emit('image:upload', { file });
+
+    Promise.resolve(cfg.upload(file)).then((url) => {
+      const el = this.editor.querySelector('#' + placeholderId);
+      if (!el) return;
+      if (url) {
+        el.src = url;
+        el.style.opacity = '';
+        el.removeAttribute('data-state');
+        el.removeAttribute('id');
+        this.emit('image:uploaded', { file, url });
       } else {
-        imgHtml = `<img src="${dataUrl}" class="inserted-image" style="max-width:100%" contenteditable="false">`;
+        el.remove();
       }
-      this.focus();
-      execFormat('insertHTML', imgHtml);
       this.onContentChange();
-    };
-    reader.readAsDataURL(file);
+    }).catch((err) => {
+      const el = this.editor.querySelector('#' + placeholderId);
+      if (el) el.remove();
+      this.emit('image:error', { file, reason: 'upload', error: err });
+      this.onContentChange();
+    });
   }
 
   /**

package/lib/formats/image.js

@@ -165,32 +165,26 @@ class Image extends InlineFormat {
 
     const input = document.createElement('input');
     input.type = 'file';
-    input.accept = 'image/*';
+    input.accept = (editor.options.image && editor.options.image.accept) || 'image/*';
     input.style.display = 'none';
-    input.addEventListener('change', async () => {
+    input.addEventListener('change', () => {
       const file = input.files && input.files[0];
       if (file) {
-        try {
-          const src = await Image.handleFileUpload(file);
-          editor.focus();
-          const sel = window.getSelection();
-          // Restore the caret we had before the file dialog stole focus. If we
-          // never had one (clicking the toolbar can collapse the selection),
-          // drop the caret at the end of the editor so insertion still works.
-          if (savedRange) {
-            sel.removeAllRanges();
-            sel.addRange(savedRange);
-          } else if (!sel.rangeCount || !editor.editor.contains(sel.anchorNode)) {
-            const r = document.createRange();
-            r.selectNodeContents(editor.editor);
-            r.collapse(false);
-            sel.removeAllRanges();
-            sel.addRange(r);
-          }
-          Image.insertImageAtCurrentPosition(src, file.name || '', this.editorId);
-        } catch (err) {
-          console.warn('Image upload failed:', err.message);
+        // Restore the caret captured before the file dialog stole focus.
+        editor.focus();
+        const sel = window.getSelection();
+        if (savedRange) {
+          sel.removeAllRanges();
+          sel.addRange(savedRange);
+        } else if (!sel.rangeCount || !editor.editor.contains(sel.anchorNode)) {
+          const r = document.createRange();
+          r.selectNodeContents(editor.editor);
+          r.collapse(false);
+          sel.removeAllRanges();
+          sel.addRange(r);
         }
+        // Single insertion path → honours the image.upload hook + validation.
+        editor.insertImageFile(file);
       }
       input.remove();
     });

package/lib/modules/mention.js

@@ -0,0 +1,200 @@
+import Module from '../core/module.js';
+
+/**
+ * @mention module — trigger-based autocomplete that inserts a token carrying an
+ * id, so the serialized HTML/Markdown can tell the server who was tagged.
+ *
+ *   new Editor(el, {
+ *     mention: {
+ *       trigger: '@',
+ *       source: async (query) => [{ id, name, avatar_url }],
+ *       renderItem: (item) => `<img src="${item.avatar_url}"> ${item.name}`,
+ *       // optional extra triggers, e.g. '#' for task refs:
+ *       triggers: [{ char: '#', source: async (q) => [...] }]
+ *     }
+ *   })
+ *
+ * Token HTML: <span class="mention" data-id="ID" data-trigger="@"
+ *               contenteditable="false">@Name</span>
+ * → getMarkdown() emits `@[Name](id)`. Fires editor.on('mention:select', item).
+ */
+export default class Mention extends Module {
+  constructor(editor, options = {}) {
+    super(editor, options);
+    this.isOpen = false;
+    this.activeIndex = 0;
+    this.items = [];
+    this.sources = this._buildSources();
+    this.buildMenu();
+    this.bindEvents();
+  }
+
+  _buildSources() {
+    const cfg = this.editor.options.mention || this.options || {};
+    const map = {};
+    const renderItem = cfg.renderItem;
+    if (typeof cfg.source === 'function') {
+      map[cfg.trigger || '@'] = { source: cfg.source, renderItem: cfg.renderItem || renderItem };
+    }
+    (cfg.triggers || []).forEach((t) => {
+      if (t && t.char && typeof t.source === 'function') {
+        map[t.char] = { source: t.source, renderItem: t.renderItem || renderItem };
+      }
+    });
+    return map;
+  }
+
+  get enabled() { return Object.keys(this.sources).length > 0; }
+
+  buildMenu() {
+    const menu = document.createElement('div');
+    menu.className = 'yjd-mention-menu';
+    menu.setAttribute('role', 'listbox');
+    menu.style.display = 'none';
+    this.menu = menu;
+    document.body.appendChild(menu);
+  }
+
+  bindEvents() {
+    if (!this.enabled) return;
+    this._onInput = () => this.handleInput();
+    this.editor.editor.addEventListener('input', this._onInput);
+
+    this._onKeydown = (e) => {
+      if (!this.isOpen) return;
+      if (e.key === 'ArrowDown') { e.preventDefault(); this.move(1); }
+      else if (e.key === 'ArrowUp') { e.preventDefault(); this.move(-1); }
+      else if (e.key === 'Enter' || e.key === 'Tab') { e.preventDefault(); this.choose(this.activeIndex); }
+      else if (e.key === 'Escape') { e.preventDefault(); this.close(); }
+    };
+    this.editor.editor.addEventListener('keydown', this._onKeydown, true);
+
+    this._onDocPointer = (e) => { if (this.isOpen && !this.menu.contains(e.target)) this.close(); };
+    document.addEventListener('pointerdown', this._onDocPointer, true);
+  }
+
+  handleInput() {
+    const sel = window.getSelection();
+    if (!sel || !sel.isCollapsed || !sel.rangeCount) return this.close();
+    const range = sel.getRangeAt(0);
+    const node = range.startContainer;
+    if (node.nodeType !== Node.TEXT_NODE) return this.close();
+
+    const triggers = Object.keys(this.sources).map((c) => c.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')).join('');
+    const before = node.textContent.slice(0, range.startOffset);
+    const m = before.match(new RegExp(`(?:^|\\s)([${triggers}])([^\\s${triggers}]*)$`));
+    if (!m) return this.close();
+
+    this.char = m[1];
+    this.query = m[2];
+    this.node = node;
+    this.start = range.startOffset - this.query.length - 1; // index of trigger char
+    this._loadFor(range);
+  }
+
+  _loadFor(range) {
+    const src = this.sources[this.char];
+    if (!src) return this.close();
+    clearTimeout(this._t);
+    const q = this.query, char = this.char;
+    this._t = setTimeout(() => {
+      Promise.resolve(src.source(q)).then((items) => {
+        // Ignore stale responses (user kept typing / switched trigger).
+        if (this.char !== char || this.query !== q) return;
+        this.items = Array.isArray(items) ? items : [];
+        if (!this.items.length) return this.close();
+        this.activeIndex = 0;
+        this.render(src.renderItem);
+        this.open(range);
+      }).catch(() => this.close());
+    }, 120);
+  }
+
+  open(range) {
+    this.isOpen = true;
+    this.menu.style.display = 'block';
+    const rect = range.getBoundingClientRect();
+    const x = rect.left || (range.startContainer.parentElement || this.editor.editor).getBoundingClientRect().left;
+    const y = rect.bottom || rect.top;
+    this.menu.style.left = `${Math.round(x + window.scrollX)}px`;
+    this.menu.style.top = `${Math.round(y + window.scrollY + 6)}px`;
+    const mh = this.menu.offsetHeight;
+    if (rect.bottom + mh + 8 > window.innerHeight) {
+      this.menu.style.top = `${Math.round(rect.top + window.scrollY - mh - 6)}px`;
+    }
+  }
+
+  close() {
+    if (!this.isOpen) return;
+    this.isOpen = false;
+    this.menu.style.display = 'none';
+  }
+
+  move(d) {
+    this.activeIndex = (this.activeIndex + d + this.items.length) % this.items.length;
+    [...this.menu.children].forEach((el, i) => {
+      el.classList.toggle('active', i === this.activeIndex);
+      el.setAttribute('aria-selected', i === this.activeIndex ? 'true' : 'false');
+    });
+  }
+
+  render(renderItem) {
+    this.menu.innerHTML = '';
+    this.items.forEach((item, i) => {
+      const el = document.createElement('button');
+      el.type = 'button';
+      el.className = 'yjd-mention-item' + (i === this.activeIndex ? ' active' : '');
+      el.setAttribute('role', 'option');
+      el.setAttribute('aria-selected', i === this.activeIndex ? 'true' : 'false');
+      const label = item.name || item.label || item.id || '';
+      el.innerHTML = typeof renderItem === 'function'
+        ? renderItem(item)
+        : `${item.avatar_url ? `<img class="yjd-mention-avatar" src="${item.avatar_url}" alt="">` : ''}<span class="yjd-mention-name">${this.char}${label}</span>`;
+      el.addEventListener('pointerdown', (e) => { e.preventDefault(); this.choose(i); });
+      this.menu.appendChild(el);
+    });
+  }
+
+  choose(index) {
+    const item = this.items[index];
+    if (!item) return this.close();
+    const name = item.name || item.label || item.id || '';
+    try {
+      const node = this.node;
+      const sel = window.getSelection();
+      const del = document.createRange();
+      del.setStart(node, this.start);
+      del.setEnd(node, this.start + this.query.length + 1);
+      del.deleteContents();
+
+      const span = document.createElement('span');
+      span.className = 'mention';
+      span.setAttribute('data-id', String(item.id != null ? item.id : ''));
+      span.setAttribute('data-trigger', this.char);
+      span.setAttribute('contenteditable', 'false');
+      span.textContent = this.char + name;
+      del.insertNode(span);
+
+      const space = document.createTextNode(' ');
+      span.after(space);
+      const caret = document.createRange();
+      caret.setStart(space, 1);
+      caret.collapse(true);
+      sel.removeAllRanges();
+      sel.addRange(caret);
+    } catch (e) { /* node moved */ }
+
+    this.close();
+    this.editor.focus();
+    if (typeof this.editor.onContentChange === 'function') this.editor.onContentChange();
+    this.editor.emit('mention:select', item);
+  }
+
+  destroy() {
+    if (this._onInput) this.editor.editor.removeEventListener('input', this._onInput);
+    if (this._onKeydown) this.editor.editor.removeEventListener('keydown', this._onKeydown, true);
+    if (this._onDocPointer) document.removeEventListener('pointerdown', this._onDocPointer, true);
+    if (this.menu && this.menu.parentNode) this.menu.parentNode.removeChild(this.menu);
+    super.destroy();
+  }
+}