@oix1987/yjd 2.1.0 → 2.1.1

package/index.d.ts

@@ -45,6 +45,43 @@ export interface ImageOptions {
   maxSize?: number;
 }
 
+/** Result of a file.upload hook — a URL, or richer metadata. */
+export interface FileUploadResult {
+  url: string;
+  name?: string;
+  size?: string;
+}
+
+/** Attachment (non-image file) upload hook. Inserts a "file chip". */
+export interface FileOptions {
+  /**
+   * Upload the chosen file; resolve to a URL string or { url, name, size }.
+   * While pending a placeholder chip is shown. Omit to inline a data: URL.
+   */
+  upload?: (file: File) => string | FileUploadResult | Promise<string | FileUploadResult>;
+  /** `accept` attribute for the file picker (e.g. '.pdf,.zip,.docx'). */
+  accept?: string;
+  /** Maximum file size in bytes; larger files emit 'file:error'. */
+  maxSize?: number;
+}
+
+/** Enter-to-submit behaviour (e.g. a comment box). */
+export interface SubmitOptions {
+  /**
+   * Called when Enter is pressed and no autocomplete popup (mention/slash/emoji)
+   * is open. Receives the current HTML and the editor instance.
+   */
+  onEnter: (html: string, editor: Editor) => void;
+  /** Shift+Enter inserts a newline (default true). */
+  newlineOnShiftEnter?: boolean;
+}
+
+/**
+ * Toolbar configuration: a built-in preset, an exclusion of default items,
+ * a flat item list (single group), or full custom groups via toolbar1/toolbar2.
+ */
+export type ToolbarOption = 'full' | 'compact' | { exclude: string[] } | string[];
+
 /** A JSON document node produced by getJSON()/domToJson. */
 export interface JsonNode {
   tag?: string;
@@ -83,8 +120,16 @@ export interface EditorOptions {
   autosave?: boolean | { key?: string; debounce?: number };
   /** Image upload hook (replaces inline base64 when `upload` is provided). */
   image?: ImageOptions | boolean;
+  /** Attachment (non-image file) upload hook → inserts a file chip. */
+  file?: FileOptions;
   /** @mention / #task autocomplete. Inert until a `source` is given. */
   mention?: MentionOptions;
+  /** Enter-to-submit behaviour for comment-style editors. */
+  submit?: SubmitOptions;
+  /** Built-in preset / exclusion / flat list, instead of toolbar1/toolbar2. */
+  toolbar?: ToolbarOption;
+  /** Warn (emit 'content:overflow') when serialized HTML exceeds this many chars. */
+  maxContentSize?: number;
   features?: {
     emoji?: boolean;
     image?: boolean;
@@ -104,7 +149,10 @@ export interface EditorOptions {
 
 export class Editor {
   constructor(selector: string | Element, options?: EditorOptions);
+  /** The contentEditable element (public — apps may attach listeners to it). */
+  editor: HTMLElement;
   on(event: string, handler: (data: any) => void): void;
+  /** Remove a previously-added listener (symmetric with on()). */
   off(event: string, handler: (data: any) => void): void;
   emit(event: string, data: any): void;
   getContent(): string;
@@ -126,6 +174,12 @@ export class Editor {
   clearFormatting(): void;
   insertHorizontalRule(): void;
   insertImageFile(file: File): void;
+  /** Insert a non-image File as a file chip (uses options.file.upload). */
+  insertFileAttachment(file: File): void;
+  /** Open the native picker for a file attachment. */
+  openFileAttachmentPicker(): void;
+  /** True when a mention/slash/emoji popup that captures Enter is open. */
+  isMenuOpen(): boolean;
   setReadOnly(readOnly: boolean): void;
   isReadOnly(): boolean;
   setDirection(dir: 'ltr' | 'rtl'): void;
@@ -147,17 +201,30 @@ export class RichEditor extends Editor {
   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.
+   * Progressive-enhance a <textarea> into an editor with TWO-WAY sync (editor
+   * edits update textarea.value + fire native events; writing textarea.value
+   * updates the editor). The returned editor also exposes a controller:
+   * getValue()/setValue()/destroy() (destroy restores the textarea).
    */
   static fromTextarea(
     textarea: HTMLTextAreaElement | string,
     options?: EditorOptions & { format?: 'html' | 'markdown' }
-  ): RichEditor;
+  ): TextareaEditor;
   /** The original textarea, when created via fromTextarea(). */
   textarea?: HTMLTextAreaElement;
 }
 
+/** Editor returned by fromTextarea(), with a value controller. */
+export interface TextareaEditor extends RichEditor {
+  textarea: HTMLTextAreaElement;
+  /** Current content (HTML or Markdown per the `format` option). */
+  getValue(): string;
+  /** Replace the editor content (HTML or Markdown per `format`). */
+  setValue(value: string): void;
+  /** Remove the editor and restore the textarea with its last value. */
+  destroy(): void;
+}
+
 /** Brand-aligned alias of {@link RichEditor}. */
 export { RichEditor as yjd };
 

package/index.js

@@ -157,8 +157,15 @@ class RichEditor extends Editor {
    *   });
    *
    * 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.
+   * per `format`). Binding is TWO-WAY: editor edits update textarea.value (and
+   * fire native input/change events), and writing `textarea.value = …` from app
+   * code (e.g. resetting a form) updates the editor. The returned editor also
+   * carries a small controller:
+   *
+   *   const ed = RichEditor.fromTextarea('#body', { format: 'markdown' });
+   *   ed.setValue(md);   // load new content into the editor
+   *   ed.getValue();     // current content (html or markdown per `format`)
+   *   ed.destroy();      // remove the editor, restore the textarea + last value
    *
    * @param {HTMLTextAreaElement|string} textarea  Element or selector.
    * @param {object} [options]  Editor options + optional `format`.
@@ -169,7 +176,8 @@ class RichEditor extends Editor {
     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());
+    const read = (ed) => (format === 'markdown' ? ed.getMarkdown() : ed.getContent());
+    const write = (ed, v) => (format === 'markdown' ? ed.setMarkdown(v || '') : ed.setHTML(v || ''));
 
     // Mount point right after the textarea; hide the original.
     const mount = document.createElement('div');
@@ -177,26 +185,60 @@ class RichEditor extends Editor {
     ta.style.display = 'none';
     ta.setAttribute('aria-hidden', 'true');
 
-    const initial = ta.value || '';
+    // Take over textarea.value so app writes flow into the editor and reads
+    // reflect it. Keep the native descriptor to restore on destroy + to set the
+    // real value (for form submission) without re-triggering our setter.
+    const nativeDesc = Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, 'value');
+    let raw = ta.value || '';
+    let syncing = false; // guards editor→textarea writes from re-entering setValue
+
+    const initial = raw;
     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;
+    Object.defineProperty(ta, 'value', {
+      configurable: true,
+      get() { return raw; },
+      set(v) {
+        raw = v == null ? '' : String(v);
+        nativeDesc.set.call(ta, raw);   // keep the real textarea value for submits
+        if (!syncing) write(editor, raw); // app write → update editor
+      },
+    });
+
+    // editor edit → push to textarea + fire native events for app bindings.
+    const onChange = () => {
+      const next = read(editor);
+      if (raw === next) return;
+      raw = next;
+      syncing = true;
+      nativeDesc.set.call(ta, next);
       ta.dispatchEvent(new Event('input', { bubbles: true }));
       ta.dispatchEvent(new Event('change', { bubbles: true }));
+      syncing = false;
     };
-    editor.on('change', sync);
-    sync(); // normalise the textarea to the editor's serialization up front.
+    editor.on('change', onChange);
+    onChange(); // normalise textarea to the editor's serialization up front.
 
+    // Controller surface on the editor instance.
     editor.textarea = ta;
+    editor.getValue = () => read(editor);
+    editor.setValue = (v) => { write(editor, v); };
+    const baseDestroy = editor.destroy.bind(editor);
+    editor.destroy = () => {
+      const last = read(editor);
+      editor.off('change', onChange);
+      baseDestroy();
+      mount.remove();
+      delete ta.value; // restore the prototype's value accessor
+      nativeDesc.set.call(ta, last);
+      ta.style.display = '';
+      ta.removeAttribute('aria-hidden');
+    };
     return editor;
   }
 }

package/lib/core/editor.js

@@ -3,6 +3,7 @@ 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';
+import IconUtils from '../ui/icons.js';
 
 /**
  * Main Editor class - Inspired by Quill's architecture
@@ -396,15 +397,24 @@ export default class Editor {
       this.handlePaste(e);
     });
 
-    // Allow dropping (needed for the drop event to fire with files)
+    // Allow dropping (needed for the drop event to fire with files) and show a
+    // drop-zone highlight while files are dragged over the editor.
     this.editor.addEventListener('dragover', (e) => {
       if (e.dataTransfer && Array.from(e.dataTransfer.types || []).includes('Files')) {
         e.preventDefault();
+        this.editor.classList.add('yjd-drag-over');
+      }
+    });
+    this.editor.addEventListener('dragleave', (e) => {
+      // Only clear when the pointer actually leaves the editor (not child nodes).
+      if (!e.relatedTarget || !this.editor.contains(e.relatedTarget)) {
+        this.editor.classList.remove('yjd-drag-over');
       }
     });
 
     // Handle drop events (drag and drop) — insert dropped image files
     this.editor.addEventListener('drop', (e) => {
+      this.editor.classList.remove('yjd-drag-over');
       const dt = e.dataTransfer;
       const files = dt && dt.files ? Array.from(dt.files) : [];
       const imageFile = files.find(f => f.type && f.type.startsWith('image/'));
@@ -414,6 +424,14 @@ export default class Editor {
         this.insertImageFile(imageFile);
         return;
       }
+      // Non-image files become attachments when a file hook is configured.
+      const attachment = files.find(f => f && f.name);
+      if (attachment && this.options.file) {
+        e.preventDefault();
+        this.placeCaretAtPoint(e.clientX, e.clientY);
+        this.insertFileAttachment(attachment);
+        return;
+      }
       // Check content after a normal drop operation
       setTimeout(() => {
         this.ensureEditorHasContent();
@@ -442,6 +460,20 @@ export default class Editor {
       });
     }
 
+    // Enter-to-submit (e.g. a comment box). Enter submits, Shift+Enter inserts
+    // a newline — UNLESS an autocomplete popup is open, in which case Enter is
+    // left for the popup to choose its item. Configured via options.submit.
+    if (this.options.submit && typeof this.options.submit.onEnter === 'function') {
+      const submitCfg = this.options.submit;
+      this.editor.addEventListener('keydown', (e) => {
+        if (e.key !== 'Enter' || e.isComposing) return;
+        if (e.shiftKey) return; // Shift+Enter → newline (browser default)
+        if (this.isMenuOpen()) return; // let the popup handle Enter
+        e.preventDefault();
+        submitCfg.onEnter(this.getContent(), this);
+      });
+    }
+
     // Handle cut events
     this.editor.addEventListener('cut', () => {
       // Check content after cut operation
@@ -507,6 +539,19 @@ export default class Editor {
     // Persist draft if autosave is enabled
     this._scheduleAutosave(content);
 
+    // Warn when the serialized content exceeds maxContentSize (bytes). Guards
+    // against, e.g., pasting huge base64 images. Fires once per crossing.
+    if (this.options.maxContentSize) {
+      const size = content.length;
+      const over = size > this.options.maxContentSize;
+      if (over && !this._overflowed) {
+        this._overflowed = true;
+        this.emit('content:overflow', { size, max: this.options.maxContentSize });
+      } else if (!over) {
+        this._overflowed = false;
+      }
+    }
+
     // Emit change events ('change' is the documented name; 'text-change' kept
     // for backward compatibility).
     this.emit('change', content);
@@ -1001,24 +1046,26 @@ export default class Editor {
       return;
     }
 
-    // Upload hook: insert a placeholder, await the URL, then swap the src.
+    // Upload hook: insert a visible loading placeholder (spinner + filename),
+    // await the URL, then replace the placeholder with the real <img>.
     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';
+    const escName = (file.name || 'image')
+      .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    const phHTML =
+      `<span class="yjd-upload" id="${placeholderId}" contenteditable="false" data-state="uploading">` +
+      `<span class="yjd-spinner" aria-hidden="true"></span>` +
+      `<span class="yjd-upload-label">${escName}</span>` +
+      `</span>`;
     this.focus();
-    execFormat('insertHTML', ph.outerHTML);
+    execFormat('insertHTML', phHTML);
     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');
+        const img = makeImg(url);
+        if (img) { el.replaceWith(img); } else { el.remove(); }
         this.emit('image:uploaded', { file, url });
       } else {
         el.remove();
@@ -1032,6 +1079,157 @@ export default class Editor {
     });
   }
 
+  /**
+   * Human-readable byte size, e.g. 24576 -> "24 KB".
+   */
+  static formatBytes(bytes) {
+    if (!bytes && bytes !== 0) return '';
+    const u = ['B', 'KB', 'MB', 'GB'];
+    let i = 0, n = bytes;
+    while (n >= 1024 && i < u.length - 1) { n /= 1024; i++; }
+    return `${n >= 10 || i === 0 ? Math.round(n) : n.toFixed(1)} ${u[i]}`;
+  }
+
+  /**
+   * Open the native picker for a non-image attachment, then insert it as a
+   * file chip via the options.file.upload hook.
+   */
+  openFileAttachmentPicker() {
+    const cfg = this.options.file || {};
+    const sel = window.getSelection();
+    const savedRange = sel && sel.rangeCount ? sel.getRangeAt(0).cloneRange() : null;
+
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.accept = cfg.accept || '*/*';
+    input.style.display = 'none';
+    input.addEventListener('change', () => {
+      const file = input.files && input.files[0];
+      if (file) {
+        this.focus();
+        const s = window.getSelection();
+        if (savedRange) { s.removeAllRanges(); s.addRange(savedRange); }
+        else if (!s.rangeCount || !this.editor.contains(s.anchorNode)) {
+          const r = document.createRange();
+          r.selectNodeContents(this.editor); r.collapse(false);
+          s.removeAllRanges(); s.addRange(r);
+        }
+        this.insertFileAttachment(file);
+      }
+      input.remove();
+    });
+    document.body.appendChild(input);
+    input.click();
+  }
+
+  /**
+   * Insert a non-image File as a "file chip" — a contenteditable=false anchor
+   * (icon + name + size) that serializes to a Markdown link `[name (size)](url)`.
+   * Uploads via options.file.upload(file) -> string url | { url, name, size };
+   * with no hook it falls back to an inline data: URL (like images do).
+   * @param {File} file
+   */
+  insertFileAttachment(file) {
+    if (!file) return;
+    const cfg = this.options.file || {};
+
+    // Validate accept / maxSize, mirroring insertImageFile.
+    if (cfg.accept && cfg.accept !== '*/*') {
+      const name = (file.name || '').toLowerCase();
+      const ok = cfg.accept.split(',').some(a => {
+        a = a.trim().toLowerCase();
+        if (!a) return false;
+        if (a.startsWith('.')) return name.endsWith(a);
+        if (a.endsWith('/*')) return (file.type || '').startsWith(a.slice(0, -1));
+        return file.type === a;
+      });
+      if (!ok) { this.emit('file:error', { file, reason: 'type' }); return; }
+    }
+    if (cfg.maxSize && file.size > cfg.maxSize) {
+      this.emit('file:error', { file, reason: 'size' });
+      return;
+    }
+
+    const ico = IconUtils && typeof IconUtils.getIcon === 'function'
+      ? (IconUtils.getIcon('file') || '') : '';
+    const esc = (s) => String(s == null ? '' : s)
+      .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+
+    // Build a chip anchor element. `meta` may override name/size from the hook.
+    const makeChip = (url, meta = {}, state = '') => {
+      const name = meta.name || file.name || 'file';
+      const size = meta.size != null ? meta.size : Editor.formatBytes(file.size);
+      const a = document.createElement('a');
+      a.className = 'yjd-file-chip';
+      a.setAttribute('contenteditable', 'false');
+      a.setAttribute('href', url || '#');
+      a.setAttribute('target', '_blank');
+      a.setAttribute('rel', 'noopener noreferrer');
+      a.setAttribute('data-name', name);
+      if (size) a.setAttribute('data-size', size);
+      if (state) a.setAttribute('data-state', state);
+      // While uploading, the icon slot shows a spinner instead of the file glyph.
+      const icoHTML = state === 'uploading'
+        ? '<span class="yjd-spinner" aria-hidden="true"></span>' : ico;
+      a.innerHTML =
+        `<span class="yjd-file-ico" contenteditable="false">${icoHTML}</span>` +
+        `<span class="yjd-file-name">${esc(name)}</span>` +
+        (size ? `<span class="yjd-file-size">${esc(size)}</span>` : '');
+      return a;
+    };
+
+    const insertChipHTML = (html) => {
+      this.focus();
+      execFormat('insertHTML', html + '&nbsp;');
+      this.onContentChange();
+    };
+
+    // No upload hook → inline data URL (works offline, persists in the HTML).
+    if (typeof cfg.upload !== 'function') {
+      const reader = new FileReader();
+      reader.onload = (ev) => insertChipHTML(makeChip(ev.target.result).outerHTML);
+      reader.onerror = () => this.emit('file:error', { file, reason: 'read' });
+      reader.readAsDataURL(file);
+      return;
+    }
+
+    // Upload hook: insert a placeholder chip, await the URL, then fill it in.
+    const id = 'rte-file-' + Math.round(performance.now()) + '-' + (this._fileCounter = (this._fileCounter || 0) + 1);
+    const ph = makeChip('#', {}, 'uploading');
+    ph.id = id;
+    ph.style.opacity = '0.6';
+    insertChipHTML(ph.outerHTML);
+    this.emit('file:upload', { file });
+
+    Promise.resolve(cfg.upload(file)).then((res) => {
+      const el = this.editor.querySelector('#' + id);
+      if (!el) return;
+      const url = typeof res === 'string' ? res : (res && res.url);
+      if (!url) { el.remove(); this.onContentChange(); return; }
+      const name = (res && res.name) || el.getAttribute('data-name');
+      const size = (res && res.size) || el.getAttribute('data-size');
+      el.setAttribute('href', url);
+      el.setAttribute('data-name', name);
+      if (size) el.setAttribute('data-size', size);
+      el.style.opacity = '';
+      el.removeAttribute('data-state');
+      el.removeAttribute('id');
+      const icoEl = el.querySelector('.yjd-file-ico');
+      if (icoEl) icoEl.innerHTML = ico; // swap spinner back to the file icon
+      const nameEl = el.querySelector('.yjd-file-name');
+      const sizeEl = el.querySelector('.yjd-file-size');
+      if (nameEl) nameEl.textContent = name;
+      if (sizeEl && size) sizeEl.textContent = size;
+      this.emit('file:uploaded', { file, url, name, size });
+      this.onContentChange();
+    }).catch((err) => {
+      const el = this.editor.querySelector('#' + id);
+      if (el) el.remove();
+      this.emit('file:error', { file, reason: 'upload', error: err });
+      this.onContentChange();
+    });
+  }
+
   /**
    * Place the caret at the given viewport coordinates (used for drag-drop).
    */
@@ -1184,6 +1382,25 @@ export default class Editor {
     try { localStorage.removeItem(cfg.key); } catch (e) { /* ignore */ }
   }
 
+  /**
+   * True when an autocomplete/popup that captures Enter is open (mention, slash
+   * command, emoji). Used by submit.onEnter so Enter chooses the item instead
+   * of submitting. App code can call it too.
+   * @returns {boolean}
+   */
+  isMenuOpen() {
+    const m = this.modules.get('mention');
+    if (m && m.isOpen) return true;
+    const s = this.modules.get('slash-menu');
+    if (s && s.isOpen) return true;
+    // Any visible portaled popup (emoji, link, image, table…).
+    const sel = '.yjd-mention-menu, .yjd-slash-menu, .emoji-picker-popup.visible, .link-popup, .image-popup, .video-popup, .tag-popup';
+    return [...document.querySelectorAll(sel)].some((el) => {
+      if (!el.offsetParent && getComputedStyle(el).position !== 'fixed') return false;
+      return getComputedStyle(el).display !== 'none';
+    });
+  }
+
   /**
    * Remove inline formatting (and links) from the current selection.
    */
@@ -1431,6 +1648,9 @@ export default class Editor {
       case 'import':
         this.toggleFormat(command);
         break;
+      case 'file':
+        this.openFileAttachmentPicker();
+        break;
       case 'clear-format':
         this.clearFormatting();
         break;

package/lib/modules/mention.js

@@ -19,6 +19,9 @@ import Module from '../core/module.js';
  * → getMarkdown() emits `@[Name](id)`. Fires editor.on('mention:select', item).
  */
 export default class Mention extends Module {
+  // --rte-* theme vars copied onto the portaled menu when it opens.
+  static THEME_VARS = ['--rte-accent', '--rte-accent-ink', '--rte-accent-weak', '--rte-ink', '--rte-muted', '--rte-border', '--rte-bg', '--rte-radius-md', '--rte-shadow'];
+
   constructor(editor, options = {}) {
     super(editor, options);
     this.isOpen = false;
@@ -62,10 +65,14 @@ export default class Mention extends Module {
 
     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(); }
+      // Stop here (capture phase) so an outer Enter-to-submit handler doesn't
+      // also fire once choose() closes the menu.
+      const handled = ['ArrowDown', 'ArrowUp', 'Enter', 'Tab', 'Escape'].includes(e.key);
+      if (handled) { e.preventDefault(); e.stopPropagation(); }
+      if (e.key === 'ArrowDown') this.move(1);
+      else if (e.key === 'ArrowUp') this.move(-1);
+      else if (e.key === 'Enter' || e.key === 'Tab') this.choose(this.activeIndex);
+      else if (e.key === 'Escape') this.close();
     };
     this.editor.editor.addEventListener('keydown', this._onKeydown, true);
 
@@ -113,6 +120,7 @@ export default class Mention extends Module {
   open(range) {
     this.isOpen = true;
     this.menu.style.display = 'block';
+    this._applyTheme();
     const rect = range.getBoundingClientRect();
     const x = rect.left || (range.startContainer.parentElement || this.editor.editor).getBoundingClientRect().left;
     const y = rect.bottom || rect.top;
@@ -130,6 +138,21 @@ export default class Mention extends Module {
     this.menu.style.display = 'none';
   }
 
+  /**
+   * The menu is portaled to <body>, so it can't inherit the editor's --rte-*
+   * theme vars. Copy them across when opening so a themed editor themes its
+   * mention menu too (no need to re-declare the vars on .yjd-mention-menu).
+   */
+  _applyTheme() {
+    const root = this.editor.wrapper || this.editor.root;
+    if (!root) return;
+    const cs = getComputedStyle(root);
+    Mention.THEME_VARS.forEach((v) => {
+      const val = cs.getPropertyValue(v);
+      if (val) this.menu.style.setProperty(v, val.trim());
+    });
+  }
+
   move(d) {
     this.activeIndex = (this.activeIndex + d + this.items.length) % this.items.length;
     [...this.menu.children].forEach((el, i) => {
@@ -147,9 +170,14 @@ export default class Mention extends Module {
       el.setAttribute('role', 'option');
       el.setAttribute('aria-selected', i === this.activeIndex ? 'true' : 'false');
       const label = item.name || item.label || item.id || '';
+      // Default row: avatar (or an item.icon for special entries like "@all"),
+      // then the name. Apps only need a custom renderItem for richer layouts.
+      const media = item.avatar_url
+        ? `<img class="yjd-mention-avatar" src="${item.avatar_url}" alt="">`
+        : (item.icon ? `<span class="yjd-mention-ico">${item.icon}</span>` : '');
       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>`;
+        : `${media}<span class="yjd-mention-name">${this.char}${label}</span>`;
       el.addEventListener('pointerdown', (e) => { e.preventDefault(); this.choose(i); });
       this.menu.appendChild(el);
     });

package/lib/modules/slash-menu.js

@@ -60,10 +60,12 @@ export default class SlashMenu extends Module {
     // Keyboard interaction while open (capture so we beat other handlers).
     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.preventDefault(); this.choose(this.activeIndex); }
-      else if (e.key === 'Escape') { e.preventDefault(); this.close(); }
+      const handled = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'].includes(e.key);
+      if (handled) { e.preventDefault(); e.stopPropagation(); }
+      if (e.key === 'ArrowDown') this.move(1);
+      else if (e.key === 'ArrowUp') this.move(-1);
+      else if (e.key === 'Enter') this.choose(this.activeIndex);
+      else if (e.key === 'Escape') this.close();
     };
     this.editor.editor.addEventListener('keydown', this._onKeydown, true);
 

package/lib/modules/toolbar.js

@@ -49,6 +49,33 @@ class Toolbar extends Module {
         ],
         toolbar2: []
       };
+    } else if (options.toolbar === 'full') {
+      // Explicit full preset == the defaults.
+      this.options = { ...Toolbar.DEFAULTS, ...options };
+    } else if (options.toolbar === 'compact') {
+      // One tidy row of the essentials — good for comment boxes.
+      this.options = {
+        container: null,
+        toolbar1: [
+          { group: 'text-format', items: ['bold', 'italic', 'underline'] },
+          { group: 'link', items: ['link'] },
+          { group: 'paragraph-ops', items: ['list'] },
+          { group: 'insert', items: ['image', 'emoji'] },
+          { group: 'more', items: ['more'] }
+        ],
+        toolbar2: []
+      };
+    } else if (options.toolbar && typeof options.toolbar === 'object' && Array.isArray(options.toolbar.exclude)) {
+      // Start from the defaults and drop the named items (and any group left empty).
+      const drop = new Set(options.toolbar.exclude);
+      const prune = (rows) => (rows || [])
+        .map(g => ({ ...g, items: g.items.filter(it => !drop.has(it)) }))
+        .filter(g => g.items.length && !(g.items.length === 1 && g.items[0] === 'more' && false));
+      this.options = {
+        container: null,
+        toolbar1: prune(Toolbar.DEFAULTS.toolbar1),
+        toolbar2: prune(Toolbar.DEFAULTS.toolbar2)
+      };
     } else if (options.toolbar1 || options.toolbar2) {
       // If specific toolbar1/toolbar2 config is provided, use it - COMPLETELY OVERRIDE DEFAULTS
       this.options = {
@@ -415,6 +442,7 @@ class Toolbar extends Module {
       'indent-decrease': 'Decrease Indent',
       'emoji': 'Insert Emoji',
       'image': 'Insert Image',
+      'file': 'Attach File',
       'video': 'Insert Video',
       'tag': 'Insert Tag',
       'horizontal-rule': 'Insert Horizontal Rule',