@aquera/nile-elements 1.9.6 → 1.9.7

package/src/nile-wysiwyg-editor/nile-wysiwyg-editor.ts

@@ -0,0 +1,2155 @@
+import { html, TemplateResult, CSSResultArray, PropertyValues, nothing } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { EditorView } from 'prosemirror-view';
+import { EditorState, Transaction, TextSelection } from 'prosemirror-state';
+import { Node as PMNode } from 'prosemirror-model';
+
+import NileElement from '../internal/nile-element';
+import { styles } from './nile-wysiwyg-editor.css';
+import {
+  defaultSchema,
+  createEditorState,
+  computeToolbarState,
+  htmlToDoc,
+  htmlToSlice,
+  docToHtml,
+  docToText,
+  docToMarkdown,
+  markdownToHtml,
+  docToJson,
+  jsonToDoc,
+  isDocEmpty,
+  sanitizeHtml,
+  getCommand,
+  getMarkRange,
+  flattenToSingleParagraph,
+  imageUploadKey,
+  findUploadPos,
+  countWords,
+  TaskItemView,
+  ImageView,
+  FigureView,
+  EmbedView,
+  MathView,
+  isOfficeHtml,
+  cleanOfficeHtml,
+  toInlineStyledHtml,
+  buildWordDocument,
+  buildPrintDocument,
+  isFormatPainterArmed,
+  armFormatPainter,
+  disarmFormatPainter,
+  applyFormatPainter,
+  getFindState,
+  searchTr,
+  findStepTr,
+  clearFindTr,
+  replaceActiveTr,
+  replaceAllTr,
+} from './engine';
+import type { ToolbarState } from './engine/selection-state';
+import type { CommandAttrs, CommandName } from './engine/commands';
+import { selectedImageInfo } from './engine/commands';
+import type { MathRenderer } from './engine/plugins/math-view';
+import type { SuggestionMatch } from './engine/plugins/suggestions';
+import type {
+  WysiwygChangeDetail,
+  WysiwygCommandDetail,
+  MentionsConfig,
+  SnippetConfig,
+  MergeFieldConfig,
+  TemplateConfig,
+} from './types';
+import { DEFAULT_TOOLBAR } from './types';
+import { EMOJI } from './emoji';
+
+import './nile-wysiwyg-toolbar/nile-wysiwyg-toolbar';
+import './ui/link-editor';
+import './ui/bubble-menu';
+import './ui/image-panel';
+import './ui/table-menu';
+import './ui/suggest-list';
+import './ui/find-replace';
+import './ui/source-view';
+import './ui/embed-panel';
+import './ui/bookmark-panel';
+import './ui/code-block-menu';
+import './ui/shortcut-help';
+import './ui/image-menu';
+import './ui/embed-menu';
+import './ui/special-chars';
+import './ui/emoji-picker';
+import './ui/insert-menu';
+import './ui/math-panel';
+import './ui/markdown-panel';
+import type { NileWysiwygLinkEditor } from './ui/link-editor';
+import type { NileWysiwygBubbleMenu } from './ui/bubble-menu';
+import type { NileWysiwygImagePanel } from './ui/image-panel';
+import type { NileWysiwygTableMenu } from './ui/table-menu';
+import type { NileWysiwygSuggestList, SuggestItem } from './ui/suggest-list';
+import type { NileWysiwygFindBar } from './ui/find-replace';
+import type { NileWysiwygSourceView } from './ui/source-view';
+import type { NileWysiwygEmbedPanel } from './ui/embed-panel';
+import type { NileWysiwygBookmarkPanel } from './ui/bookmark-panel';
+import type { NileWysiwygCodeMenu } from './ui/code-block-menu';
+import type { NileWysiwygShortcutHelp } from './ui/shortcut-help';
+import type { NileWysiwygImageMenu } from './ui/image-menu';
+import type { NileWysiwygEmbedMenu } from './ui/embed-menu';
+import type { NileWysiwygSpecialChars } from './ui/special-chars';
+import type { NileWysiwygEmojiPicker } from './ui/emoji-picker';
+import type { NileWysiwygInsertMenu } from './ui/insert-menu';
+import type { NileWysiwygMathPanel } from './ui/math-panel';
+import type { NileWysiwygMarkdownPanel } from './ui/markdown-panel';
+
+interface SlashItem extends SuggestItem {
+  command: CommandName | 'openImage' | 'openEmbed' | 'openBookmark';
+  attrs?: CommandAttrs;
+}
+
+const SLASH_ITEMS: SlashItem[] = [
+  { key: 'heading1', label: 'Heading 1', hint: '#', command: 'heading', attrs: { level: 1 } },
+  { key: 'heading2', label: 'Heading 2', hint: '##', command: 'heading', attrs: { level: 2 } },
+  { key: 'heading3', label: 'Heading 3', hint: '###', command: 'heading', attrs: { level: 3 } },
+  { key: 'bulletList', label: 'Bulleted list', hint: '-', command: 'bulletList' },
+  { key: 'orderedList', label: 'Numbered list', hint: '1.', command: 'orderedList' },
+  { key: 'taskList', label: 'Checklist', hint: '[ ]', command: 'taskList' },
+  { key: 'blockquote', label: 'Blockquote', hint: '>', command: 'blockquote' },
+  { key: 'codeBlock', label: 'Code block', hint: '```', command: 'codeBlock' },
+  { key: 'table', label: 'Table', hint: '3×3', command: 'insertTable', attrs: { rows: 3, cols: 3 } },
+  { key: 'image', label: 'Image', command: 'openImage' },
+  { key: 'embed', label: 'Video embed', hint: 'YouTube…', command: 'openEmbed' },
+  { key: 'bookmark', label: 'Bookmark (anchor)', command: 'openBookmark' },
+  { key: 'horizontalRule', label: 'Divider', hint: '---', command: 'horizontalRule' },
+];
+
+let uploadCounter = 0;
+
+function readFileAsDataURL(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(reader.result as string);
+    reader.onerror = () => reject(reader.error);
+    reader.readAsDataURL(file);
+  });
+}
+
+const CHANGE_DEBOUNCE_MS = 250;
+
+/**
+ * WYSIWYG rich text editor powered by ProseMirror.
+ *
+ * Requires evergreen browsers: selection inside shadow DOM relies on
+ * `Selection.getComposedRanges()` (Safari 17+, recent Firefox) or Chrome's
+ * `shadowRoot.getSelection()`.
+ *
+ * @tag nile-wysiwyg-editor
+ *
+ * @event nile-change - Debounced content change. detail: { value, json, content }
+ * @event nile-input - Every document change. detail: { value, json, content }
+ * @event nile-focus - Editor gained focus.
+ * @event nile-blur - Editor lost focus.
+ * @event nile-selection-change - detail: ToolbarState snapshot.
+ * @event nile-image-upload-request - Cancelable. detail: { file, insert(src, alt) }.
+ *   Call preventDefault() and use insert() to fully own the upload.
+ * @event nile-image-upload-error - detail: { file, error } when uploadHandler rejects.
+ * @event nile-mention-query - detail: { trigger, query, provide(items) } for async sources.
+ * @event nile-mention-select - detail: { trigger, key, label } when a mention is inserted.
+ * @event nile-word-count - detail: { words, characters } on every document change.
+ * @event nile-autosave - detail: { value, json, content } on the autosave interval.
+ *
+ * @csspart base - Outer container.
+ * @csspart toolbar - The toolbar element.
+ * @csspart surface - The scrollable editing surface.
+ */
+@customElement('nile-wysiwyg-editor')
+export class NileWysiwygEditor extends NileElement {
+  static formAssociated = true;
+
+  /** Document content as HTML. Not reflected to the attribute. */
+  @property({ type: String }) value = '';
+
+  @property({ type: String }) placeholder = '';
+
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  @property({ type: Boolean, reflect: true }) readonly = false;
+
+  /** Toolbar config string; `"none"` hides the toolbar. */
+  @property({ type: String }) toolbar = DEFAULT_TOOLBAR;
+
+  /** Shows a balloon toolbar over text selections. */
+  @property({ type: Boolean, attribute: 'bubble-menu' }) bubbleMenu = false;
+
+  /** Sanitizes incoming HTML (value, paste, insertHTML). Leave on. */
+  @property({ type: Boolean }) sanitize = true;
+
+  /** Constrains content to a single paragraph. */
+  @property({ type: Boolean, attribute: 'singleline' }) singleLine = false;
+
+  /** Form field name. */
+  @property({ type: String }) name = '';
+
+  @property({ type: Boolean, reflect: true }) required = false;
+
+  /**
+   * Async image upload handler. When set, pasted/dropped/picked image files
+   * are uploaded through it (an "Uploading…" placeholder shows meanwhile)
+   * and the returned src is inserted.
+   */
+  @property({ attribute: false }) uploadHandler?: (
+    file: File
+  ) => Promise<{ src: string; alt?: string }>;
+
+  /**
+   * Fallback when no uploadHandler is set and no nile-image-upload-request
+   * listener takes over: embed image files as base64 data URLs.
+   */
+  @property({ attribute: false }) allowBase64Images = true;
+
+  /**
+   * Shows an "Upload from computer" button in the Insert Image dialog. Off by
+   * default (URL-only, like the RTE's default); files can always be added via
+   * drag & drop or paste regardless.
+   */
+  @property({ type: Boolean, attribute: 'upload-from-computer' })
+  uploadFromComputer = false;
+
+  /** Max upload size (bytes) shown/enforced by the image dialog. Default 2 MB. */
+  @property({ type: Number, attribute: 'image-max-file-size' })
+  imageMaxFileSize = 2 * 1024 * 1024;
+
+  /**
+   * Mention config: trigger character → items, same shape and JSON attribute
+   * format as nile-rich-text-editor. For async sources, configure the
+   * trigger with an empty array and listen to nile-mention-query.
+   */
+  @property({
+    attribute: 'mentions',
+    converter: {
+      fromAttribute: (value: string): MentionsConfig => {
+        try {
+          const parsed = JSON.parse(value);
+          const out: MentionsConfig = {};
+          for (const trigger of Object.keys(parsed)) {
+            const items = parsed[trigger];
+            if (Array.isArray(items)) {
+              out[trigger] = items
+                .filter(i => i && typeof i.key === 'string' && typeof i.label === 'string')
+                .map(i => ({ key: i.key, label: i.label }));
+            }
+          }
+          return out;
+        } catch {
+          return {};
+        }
+      },
+      toAttribute: (value: MentionsConfig) => JSON.stringify(value),
+    },
+  })
+  mentions: MentionsConfig = {};
+
+  /** Disables the "/" command menu. */
+  @property({ type: Boolean, attribute: 'no-slash-commands' }) noSlashCommands = false;
+
+  /** Disables the ":" emoji picker. */
+  @property({ type: Boolean, attribute: 'no-emoji' }) noEmoji = false;
+
+  /** Maximum character count; further input is rejected. 0 = unlimited. */
+  @property({ type: Number, attribute: 'maxlength' }) maxLength = 0;
+
+  /** Always show the word/character counter footer (implied by maxlength). */
+  @property({ type: Boolean, attribute: 'show-counter' }) showCounter = false;
+
+  /** Keeps the toolbar pinned to the viewport while scrolling long content. */
+  @property({ type: Boolean, attribute: 'sticky-toolbar', reflect: true })
+  stickyToolbar = false;
+
+  /** Reusable snippets surfaced in the "/" menu (JSON attribute). */
+  @property({
+    attribute: 'snippets',
+    converter: {
+      fromAttribute: (value: string): SnippetConfig[] => {
+        try {
+          const parsed = JSON.parse(value);
+          return Array.isArray(parsed)
+            ? parsed.filter(
+                s =>
+                  s &&
+                  typeof s.key === 'string' &&
+                  typeof s.label === 'string' &&
+                  typeof s.html === 'string'
+              )
+            : [];
+        } catch {
+          return [];
+        }
+      },
+      toAttribute: (value: SnippetConfig[]) => JSON.stringify(value),
+    },
+  })
+  snippets: SnippetConfig[] = [];
+
+  /** Merge fields offered in the merge-field picker (JSON attribute). */
+  @property({
+    attribute: 'merge-fields',
+    converter: {
+      fromAttribute: (value: string): MergeFieldConfig[] => {
+        try {
+          const parsed = JSON.parse(value);
+          return Array.isArray(parsed)
+            ? parsed.filter(f => f && typeof f.id === 'string' && typeof f.label === 'string')
+            : [];
+        } catch {
+          return [];
+        }
+      },
+      toAttribute: (value: MergeFieldConfig[]) => JSON.stringify(value),
+    },
+  })
+  mergeFields: MergeFieldConfig[] = [];
+
+  /** Content templates offered in the template picker (JSON attribute). */
+  @property({
+    attribute: 'templates',
+    converter: {
+      fromAttribute: (value: string): TemplateConfig[] => {
+        try {
+          const parsed = JSON.parse(value);
+          return Array.isArray(parsed)
+            ? parsed.filter(t => t && typeof t.label === 'string' && typeof t.html === 'string')
+            : [];
+        } catch {
+          return [];
+        }
+      },
+      toAttribute: (value: TemplateConfig[]) => JSON.stringify(value),
+    },
+  })
+  templates: TemplateConfig[] = [];
+
+  /**
+   * Renders a math node's LaTeX to HTML (KaTeX/MathJax/MathML). When unset,
+   * the raw LaTeX is shown. Same trust level as uploadHandler — output is
+   * inserted as HTML.
+   */
+  @property({ attribute: false }) mathRenderer?: MathRenderer;
+
+  /** Emit nile-autosave every N ms while the document has changed. 0 = off. */
+  @property({ type: Number, attribute: 'autosave-interval' }) autosaveInterval = 0;
+
+  /** When on, every paste drops formatting and inserts plain text. */
+  @property({ type: Boolean, attribute: 'paste-as-plain-text', reflect: true })
+  pasteAsPlainText = false;
+
+  /** Disables Markdown detection on plain-text pastes. */
+  @property({ type: Boolean, attribute: 'no-markdown-paste' })
+  noMarkdownPaste = false;
+
+  /** Disables typography autocorrect (smart quotes, dashes, (c) → ©). */
+  @property({ type: Boolean, attribute: 'no-text-transform' })
+  noTextTransform = false;
+
+  /** Expands the editor to fill the viewport. Esc exits. */
+  @property({ type: Boolean, reflect: true }) fullscreen = false;
+
+  /** Outlines block boundaries (paragraphs, headings, lists…) while editing. */
+  @property({ type: Boolean, attribute: 'show-blocks', reflect: true })
+  showBlocks = false;
+
+  @state() private toolbarState?: ToolbarState;
+
+  @state() private hasFocus = false;
+
+  @state() private sourceMode = false;
+
+  @state() private counter = { words: 0, characters: 0 };
+
+  /** Which list the shared insert-menu is showing, if open. */
+  @state() private insertMenuMode: 'template' | 'merge' | null = null;
+
+  @query('.nile-wysiwyg') private baseEl!: HTMLElement;
+
+  @query('nile-wysiwyg-toolbar') private toolbarEl?: HTMLElement;
+
+  @query('.nile-wysiwyg__surface') private surfaceEl!: HTMLElement;
+
+  @query('nile-wysiwyg-link-editor') private linkEditorEl!: NileWysiwygLinkEditor;
+
+  @query('nile-wysiwyg-bubble-menu') private bubbleMenuEl!: NileWysiwygBubbleMenu;
+
+  @query('nile-wysiwyg-image-panel') private imagePanelEl!: NileWysiwygImagePanel;
+
+  @query('nile-wysiwyg-table-menu') private tableMenuEl!: NileWysiwygTableMenu;
+
+  @query('nile-wysiwyg-suggest-list') private suggestListEl!: NileWysiwygSuggestList;
+
+  @query('nile-wysiwyg-find-bar') private findBarEl!: NileWysiwygFindBar;
+
+  @query('nile-wysiwyg-source-view') private sourceViewEl?: NileWysiwygSourceView;
+
+  @query('nile-wysiwyg-embed-panel') private embedPanelEl!: NileWysiwygEmbedPanel;
+
+  @query('nile-wysiwyg-bookmark-panel') private bookmarkPanelEl!: NileWysiwygBookmarkPanel;
+
+  @query('nile-wysiwyg-code-menu') private codeMenuEl!: NileWysiwygCodeMenu;
+
+  @query('nile-wysiwyg-shortcut-help') private shortcutHelpEl!: NileWysiwygShortcutHelp;
+
+  @query('nile-wysiwyg-image-menu') private imageMenuEl!: NileWysiwygImageMenu;
+
+  @query('nile-wysiwyg-embed-menu') private embedMenuEl!: NileWysiwygEmbedMenu;
+
+  @query('nile-wysiwyg-special-chars') private specialCharsEl!: NileWysiwygSpecialChars;
+
+  @query('nile-wysiwyg-emoji-picker') private emojiPickerEl!: NileWysiwygEmojiPicker;
+
+  @query('nile-wysiwyg-insert-menu') private insertMenuEl!: NileWysiwygInsertMenu;
+
+  @query('nile-wysiwyg-math-panel') private mathPanelEl!: NileWysiwygMathPanel;
+
+  @query('nile-wysiwyg-markdown-panel') private markdownPanelEl!: NileWysiwygMarkdownPanel;
+
+  private view?: EditorView;
+
+  private mentionMatch: SuggestionMatch | null = null;
+
+  private slashMatch: SuggestionMatch | null = null;
+
+  private emojiMatch: SuggestionMatch | null = null;
+
+  private activeSuggestSource: 'mention' | 'slash' | 'emoji' | null = null;
+
+  private suggestDismissed: string | null = null;
+
+  private mentionQueryToken = '';
+
+  private autosaveTimer?: ReturnType<typeof setInterval>;
+
+  private lastAutosaveValue = '';
+
+  private internals?: ElementInternals;
+
+  private defaultValue = '';
+
+  private syncingValue = false;
+
+  private changeTimer?: ReturnType<typeof setTimeout>;
+
+  private pendingChange = false;
+
+  /** Body overflow value before fullscreen locked it; null = not locked. */
+  private previousBodyOverflow: string | null = null;
+
+  public static get styles(): CSSResultArray {
+    return [styles];
+  }
+
+  constructor() {
+    super();
+    if (typeof this.attachInternals === 'function') {
+      this.internals = this.attachInternals();
+    }
+  }
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    // Remount after a disconnect/reconnect (e.g. host moved in the DOM).
+    if (this.hasUpdated && !this.view) {
+      this.updateComplete.then(() => this.mountView());
+    }
+    // Close floating panels when the user clicks anywhere outside them.
+    document.addEventListener('pointerdown', this.onOutsidePointerDown, true);
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    document.removeEventListener('pointerdown', this.onOutsidePointerDown, true);
+    if (this.changeTimer) clearTimeout(this.changeTimer);
+    if (this.autosaveTimer) clearInterval(this.autosaveTimer);
+    if (this.previousBodyOverflow !== null) {
+      document.body.style.overflow = this.previousBodyOverflow;
+      this.previousBodyOverflow = null;
+    }
+    this.view?.destroy();
+    this.view = undefined;
+  }
+
+  protected firstUpdated(): void {
+    this.defaultValue = this.value;
+    this.mountView();
+  }
+
+  protected updated(changed: PropertyValues): void {
+    if (changed.has('value') && this.view && !this.syncingValue) {
+      const current = docToHtml(this.view.state.doc);
+      if (current !== this.value) this.setContent(this.value);
+    }
+    this.syncingValue = false;
+
+    if ((changed.has('disabled') || changed.has('readonly')) && this.view) {
+      this.view.setProps({});
+    }
+    if (changed.has('placeholder') && this.view) {
+      // Decorations are recomputed on any transaction.
+      this.view.dispatch(this.view.state.tr);
+    }
+    if (changed.has('required')) this.updateValidity();
+    if (changed.has('autosaveInterval')) this.restartAutosave();
+    if (
+      (changed.has('pasteAsPlainText') ||
+        changed.has('fullscreen') ||
+        changed.has('showBlocks')) &&
+      this.view
+    ) {
+      this.toolbarState = this.snapshotToolbar(this.view.state);
+    }
+    // Input rules are baked into the state at build time; rebuild in place
+    // (same doc, fresh plugins) when the autocorrect toggle changes.
+    if (changed.has('noTextTransform') && this.view && !changed.has('value')) {
+      this.view.updateState(this.buildState(this.view.state.doc));
+    }
+    // Lock page scrolling while fullscreen covers the viewport.
+    if (changed.has('fullscreen')) {
+      if (this.fullscreen) {
+        if (this.previousBodyOverflow === null) {
+          this.previousBodyOverflow = document.body.style.overflow;
+          document.body.style.overflow = 'hidden';
+        }
+      } else if (this.previousBodyOverflow !== null) {
+        document.body.style.overflow = this.previousBodyOverflow;
+        this.previousBodyOverflow = null;
+      }
+    }
+  }
+
+  private restartAutosave(): void {
+    if (this.autosaveTimer) clearInterval(this.autosaveTimer);
+    this.autosaveTimer = undefined;
+    if (this.autosaveInterval > 0) {
+      this.lastAutosaveValue = this.value;
+      this.autosaveTimer = setInterval(() => {
+        if (!this.view || this.value === this.lastAutosaveValue) return;
+        this.lastAutosaveValue = this.value;
+        this.emit('nile-autosave', this.buildChangeDetail(this.view.state.doc));
+      }, this.autosaveInterval);
+    }
+  }
+
+  // ------------------------------------------------------------------ view
+
+  private buildState(doc?: PMNode): EditorState {
+    return createEditorState({
+      schema: defaultSchema,
+      doc,
+      getPlaceholder: () => this.placeholder,
+      singleLine: this.singleLine,
+      onLinkShortcut: () => this.openLinkEditor(),
+      onFindShortcut: () => this.openFindBar(),
+      onShortcutHelp: () => this.openShortcutHelp(),
+      onImageFiles: (files, pos) => {
+        for (const file of files) this.insertImageFile(file, pos);
+      },
+      mentions: {
+        getTriggers: () => Object.keys(this.mentions),
+        onChange: match => {
+          this.mentionMatch = match;
+          this.updateSuggestList();
+        },
+        onKeyDown: event => this.handleSuggestKey(event, 'mention'),
+      },
+      slashCommands: {
+        onChange: match => {
+          this.slashMatch = match;
+          this.updateSuggestList();
+        },
+        onKeyDown: event => this.handleSuggestKey(event, 'slash'),
+      },
+      emoji: {
+        onChange: match => {
+          this.emojiMatch = match;
+          this.updateSuggestList();
+        },
+        onKeyDown: event => this.handleSuggestKey(event, 'emoji'),
+      },
+      getMaxLength: () => this.maxLength,
+      getForcePlainText: () => this.pasteAsPlainText,
+      getMarkdownPaste: () => !this.noMarkdownPaste,
+      getSanitize: () => this.sanitize,
+      textTransform: !this.noTextTransform,
+    });
+  }
+
+  /**
+   * ToolbarState snapshot augmented with host-only flags the pure
+   * computeToolbarState can't know about (e.g. the paste-as-plain-text toggle).
+   */
+  private snapshotToolbar(state: EditorState): ToolbarState {
+    return {
+      ...computeToolbarState(state),
+      pasteAsPlainText: this.pasteAsPlainText,
+      fullscreen: this.fullscreen,
+      showBlocks: this.showBlocks,
+      formatPainter: isFormatPainterArmed(state),
+    };
+  }
+
+  private mountView(): void {
+    if (this.view || !this.surfaceEl) return;
+    let doc = this.value
+      ? htmlToDoc(defaultSchema, this.value, this.sanitize)
+      : undefined;
+    if (doc && this.singleLine) doc = flattenToSingleParagraph(doc);
+
+    this.view = new EditorView(this.surfaceEl, {
+      state: this.buildState(doc),
+      dispatchTransaction: tr => this.handleTransaction(tr),
+      editable: () => !this.disabled && !this.readonly,
+      transformPastedHTML: pasted => {
+        // Word/Google Docs clipboard HTML gets normalized (real lists, no
+        // mso noise) before the sanitizer clamps it to the schema.
+        const cleaned = isOfficeHtml(pasted) ? cleanOfficeHtml(pasted) : pasted;
+        return this.sanitize ? sanitizeHtml(cleaned) : cleaned;
+      },
+      handleDOMEvents: {
+        mousedown: () => {
+          // Clicking into the document dismisses the never-focused popovers
+          // (they take no focus, so blur can't close them).
+          this.closeSpecialChars(false);
+          this.closeInsertMenu(false);
+          return false;
+        },
+        focus: () => {
+          this.hasFocus = true;
+          this.updateOverlays();
+          this.emit('nile-focus');
+          return false;
+        },
+        blur: (_view, event) => {
+          // Focus moving into the editor's own chrome (language picker,
+          // panels) is not a blur — closing overlays here would dismiss
+          // the control the user just clicked.
+          const related = (event as FocusEvent).relatedTarget as Node | null;
+          if (related && (this.shadowRoot?.contains(related) || this.contains(related))) {
+            return false;
+          }
+          this.hasFocus = false;
+          this.flushChange();
+          this.updateOverlays();
+          this.closeSuggestList();
+          this.closeSpecialChars(false);
+          this.emit('nile-blur');
+          return false;
+        },
+      },
+      attributes: {
+        role: 'textbox',
+        'aria-multiline': this.singleLine ? 'false' : 'true',
+      },
+      nodeViews: {
+        task_item: (node, view, getPos) =>
+          new TaskItemView(node, view, getPos as () => number | undefined),
+        image: (node, view, getPos) =>
+          new ImageView(node, view, getPos as () => number | undefined),
+        figure: (node, view, getPos) =>
+          new FigureView(node, view, getPos as () => number | undefined),
+        embed: (node, view, getPos) =>
+          new EmbedView(node, view, getPos as () => number | undefined),
+        math: node => new MathView(node, this.mathRenderer),
+      },
+    });
+
+    this.toolbarState = this.snapshotToolbar(this.view.state);
+    this.counter = countWords(this.view.state.doc);
+    this.syncFormValue(this.view.state.doc);
+  }
+
+  private handleTransaction(tr: Transaction): void {
+    if (!this.view) return;
+    const newState = this.view.state.apply(tr);
+    this.view.updateState(newState);
+
+    // Format painter: once armed, the next non-empty selection the user makes
+    // receives the copied formatting, then the painter disarms.
+    if (tr.selectionSet && !newState.selection.empty && isFormatPainterArmed(newState)) {
+      const applyTr = applyFormatPainter(newState);
+      if (applyTr) {
+        this.view.dispatch(applyTr);
+        return;
+      }
+    }
+
+    this.toolbarState = this.snapshotToolbar(newState);
+    this.emit('nile-selection-change', this.toolbarState);
+    this.updateOverlays();
+
+    if (this.findBarEl?.open) {
+      const find = getFindState(newState);
+      this.findBarEl.matchCount = find.matches.length;
+      this.findBarEl.activeIndex = find.activeIndex;
+    }
+
+    if (tr.docChanged) {
+      const detail = this.buildChangeDetail(newState.doc);
+      this.syncingValue = true;
+      this.value = detail.value;
+      this.syncFormValue(newState.doc);
+      this.emit('nile-input', detail);
+      this.counter = countWords(newState.doc);
+      this.emit('nile-word-count', this.counter);
+      this.scheduleChange();
+    }
+  }
+
+  private buildChangeDetail(doc: PMNode): WysiwygChangeDetail {
+    const value = isDocEmpty(doc) ? '' : docToHtml(doc);
+    return { value, json: docToJson(doc), content: value };
+  }
+
+  private scheduleChange(): void {
+    this.pendingChange = true;
+    if (this.changeTimer) clearTimeout(this.changeTimer);
+    this.changeTimer = setTimeout(() => this.flushChange(), CHANGE_DEBOUNCE_MS);
+  }
+
+  private flushChange(): void {
+    if (!this.pendingChange || !this.view) return;
+    this.pendingChange = false;
+    if (this.changeTimer) clearTimeout(this.changeTimer);
+    this.emit('nile-change', this.buildChangeDetail(this.view.state.doc));
+  }
+
+  // ------------------------------------------------------------------ form
+
+  private syncFormValue(doc: PMNode): void {
+    if (!this.internals) return;
+    const value = isDocEmpty(doc) ? '' : docToHtml(doc);
+    this.internals.setFormValue(value === '' ? null : value);
+    this.updateValidity();
+  }
+
+  private updateValidity(): void {
+    if (!this.internals) return;
+    const empty = this.view ? isDocEmpty(this.view.state.doc) : this.value === '';
+    if (this.required && empty) {
+      this.internals.setValidity(
+        { valueMissing: true },
+        'Please fill out this field.',
+        this.surfaceEl ?? undefined
+      );
+    } else {
+      this.internals.setValidity({});
+    }
+  }
+
+  formResetCallback(): void {
+    this.setContent(this.defaultValue);
+  }
+
+  formDisabledCallback(disabled: boolean): void {
+    this.disabled = disabled;
+  }
+
+  public checkValidity(): boolean {
+    return this.internals ? this.internals.checkValidity() : true;
+  }
+
+  public reportValidity(): boolean {
+    return this.internals ? this.internals.reportValidity() : true;
+  }
+
+  // -------------------------------------------------------------- overlays
+
+  /** Positions an overlay element near a doc position (default: selection). */
+  private positionOverlay(
+    el: HTMLElement,
+    placement: 'above' | 'below',
+    pos?: number
+  ): void {
+    if (!this.view || !this.baseEl) return;
+    const from = pos ?? this.view.state.selection.from;
+    const coords = this.view.coordsAtPos(from);
+    const baseRect = this.baseEl.getBoundingClientRect();
+    const left = Math.max(
+      4,
+      Math.min(coords.left - baseRect.left, baseRect.width - el.offsetWidth - 4)
+    );
+    el.style.left = `${left}px`;
+    if (placement === 'above') {
+      el.style.top = `${Math.max(4, coords.top - baseRect.top - el.offsetHeight - 8)}px`;
+    } else {
+      el.style.top = `${coords.bottom - baseRect.top + 6}px`;
+    }
+  }
+
+  /** Positions a floating panel directly below a toolbar/anchor element. */
+  private positionOverlayBelowAnchor(el: HTMLElement, anchor: HTMLElement): void {
+    if (!this.baseEl) return;
+    const baseRect = this.baseEl.getBoundingClientRect();
+    const anchorRect = anchor.getBoundingClientRect();
+    const left = Math.max(
+      4,
+      Math.min(anchorRect.left - baseRect.left, baseRect.width - el.offsetWidth - 4)
+    );
+    // Clear any CSS-pinned `right` (e.g. the find bar) so `left` wins.
+    el.style.right = 'auto';
+    el.style.left = `${left}px`;
+    el.style.top = `${anchorRect.bottom - baseRect.top + 6}px`;
+  }
+
+  /** Finds a toolbar button by its aria-label, to anchor a panel below it. */
+  private toolbarButton(label: string): HTMLElement | null {
+    return (
+      (this.toolbarEl?.shadowRoot?.querySelector(
+        `button[aria-label="${label}"]`
+      ) as HTMLElement | null) ?? null
+    );
+  }
+
+  private updateOverlays(): void {
+    if (!this.bubbleMenuEl) return;
+    const panelOpen =
+      this.linkEditorEl?.open ||
+      this.imagePanelEl?.open ||
+      this.embedPanelEl?.open ||
+      this.bookmarkPanelEl?.open ||
+      this.emojiPickerEl?.open;
+    const show =
+      this.bubbleMenu &&
+      this.hasFocus &&
+      !!this.toolbarState &&
+      !this.toolbarState.selectionEmpty &&
+      !this.toolbarState.imageSelected &&
+      !this.toolbarState.embedSelected &&
+      !panelOpen;
+    this.bubbleMenuEl.open = show;
+    if (show) {
+      this.bubbleMenuEl.toolbarState = this.toolbarState;
+      this.bubbleMenuEl.updateComplete.then(() =>
+        this.positionOverlay(this.bubbleMenuEl, 'above')
+      );
+    }
+
+    if (this.tableMenuEl) {
+      const showTable =
+        this.hasFocus && !!this.toolbarState && this.toolbarState.inTable && !panelOpen;
+      this.tableMenuEl.open = showTable;
+      if (showTable) {
+        this.tableMenuEl.updateComplete.then(() =>
+          this.positionOverlay(this.tableMenuEl, 'below')
+        );
+      }
+    }
+
+    if (this.codeMenuEl) {
+      const showCode =
+        this.hasFocus && !!this.toolbarState && this.toolbarState.inCodeBlock && !panelOpen;
+      this.codeMenuEl.open = showCode;
+      if (showCode) {
+        this.codeMenuEl.language = this.toolbarState!.codeBlockLanguage ?? '';
+        this.codeMenuEl.updateComplete.then(() =>
+          this.positionOverlay(this.codeMenuEl, 'above')
+        );
+      }
+    }
+
+    if (this.imageMenuEl) {
+      const showImage =
+        this.hasFocus && !!this.toolbarState && this.toolbarState.imageSelected && !panelOpen;
+      this.imageMenuEl.open = showImage;
+      if (showImage) {
+        this.imageMenuEl.toolbarState = this.toolbarState;
+        this.imageMenuEl.updateComplete.then(() =>
+          this.positionOverlay(this.imageMenuEl, 'above')
+        );
+      }
+    }
+
+    if (this.embedMenuEl) {
+      const showEmbed =
+        this.hasFocus && !!this.toolbarState && this.toolbarState.embedSelected && !panelOpen;
+      this.embedMenuEl.open = showEmbed;
+      if (showEmbed) {
+        this.embedMenuEl.toolbarState = this.toolbarState;
+        this.embedMenuEl.updateComplete.then(() =>
+          this.positionOverlay(this.embedMenuEl, 'above')
+        );
+      }
+    }
+  }
+
+  // -------------------------------------------------------- special chars
+
+  private openSpecialChars(): void {
+    if (!this.view || !this.specialCharsEl || this.disabled || this.readonly) return;
+    this.specialCharsEl.open = true;
+    this.specialCharsEl.updateComplete.then(() =>
+      this.positionOverlay(this.specialCharsEl, 'below')
+    );
+  }
+
+  private closeSpecialChars(refocus = true): void {
+    if (this.specialCharsEl) this.specialCharsEl.open = false;
+    if (refocus) this.view?.focus();
+  }
+
+  private insertSpecialChar(char: string): void {
+    if (!this.view) return;
+    this.view.dispatch(this.view.state.tr.insertText(char).scrollIntoView());
+    this.view.focus();
+  }
+
+  // ------------------------------------------------ templates & merge fields
+
+  private openInsertMenu(mode: 'template' | 'merge'): void {
+    if (!this.view || !this.insertMenuEl || this.disabled || this.readonly) return;
+    this.insertMenuMode = mode;
+    const menu = this.insertMenuEl;
+    if (mode === 'merge') {
+      menu.heading = 'Merge field';
+      menu.emptyText = 'No merge fields configured.';
+      menu.items = this.mergeFields.map(f => ({ label: f.label, description: `{{${f.id}}}` }));
+    } else {
+      menu.heading = 'Template';
+      menu.emptyText = 'No templates configured.';
+      menu.items = this.templates.map(t => ({ label: t.label, description: t.description }));
+    }
+    menu.open = true;
+    if (this.bubbleMenuEl) this.bubbleMenuEl.open = false;
+    menu.updateComplete.then(() => this.positionOverlay(menu, 'below'));
+  }
+
+  private closeInsertMenu(refocus = true): void {
+    if (this.insertMenuEl) this.insertMenuEl.open = false;
+    this.insertMenuMode = null;
+    if (refocus) this.view?.focus();
+  }
+
+  private handleInsertSelect(index: number): void {
+    const mode = this.insertMenuMode;
+    this.closeInsertMenu();
+    if (!this.view) return;
+    if (mode === 'merge') {
+      const field = this.mergeFields[index];
+      if (field) this.execCommand('insertMergeField', { id: field.id, label: field.label });
+    } else if (mode === 'template') {
+      const template = this.templates[index];
+      if (template) this.insertHTML(template.html);
+    }
+  }
+
+  /** Inserts a merge-field placeholder at the selection. */
+  public insertMergeField(id: string, label?: string): void {
+    this.execCommand('insertMergeField', { id, label: label ?? null });
+  }
+
+  /** Changes the case of the selected text. */
+  public changeCase(mode: 'upper' | 'lower' | 'title' | 'sentence'): void {
+    this.execCommand('changeCase', { textCase: mode });
+  }
+
+  // ---------------------------------------------------------------- math
+
+  private openMathPanel(): void {
+    if (!this.view || !this.mathPanelEl || this.disabled || this.readonly) return;
+    this.mathPanelEl.reset();
+    this.mathPanelEl.open = true;
+    if (this.bubbleMenuEl) this.bubbleMenuEl.open = false;
+    if (this.tableMenuEl) this.tableMenuEl.open = false;
+    this.mathPanelEl.updateComplete.then(() => {
+      const anchor = this.toolbarButton('Insert math (LaTeX)');
+      if (anchor) this.positionOverlayBelowAnchor(this.mathPanelEl, anchor);
+      else this.positionOverlay(this.mathPanelEl, 'below');
+      this.mathPanelEl.focusInput();
+    });
+  }
+
+  private closeMathPanel(refocus = true): void {
+    if (this.mathPanelEl) this.mathPanelEl.open = false;
+    if (refocus) this.view?.focus();
+  }
+
+  private openMarkdownPanel(): void {
+    if (!this.view || !this.markdownPanelEl || this.disabled || this.readonly) return;
+    this.markdownPanelEl.reset();
+    this.markdownPanelEl.open = true;
+    if (this.bubbleMenuEl) this.bubbleMenuEl.open = false;
+    if (this.tableMenuEl) this.tableMenuEl.open = false;
+    this.markdownPanelEl.updateComplete.then(() => {
+      const anchor = this.toolbarButton('Insert from Markdown');
+      if (anchor) this.positionOverlayBelowAnchor(this.markdownPanelEl, anchor);
+      else this.positionOverlay(this.markdownPanelEl, 'below');
+      this.markdownPanelEl.focusInput();
+    });
+  }
+
+  private closeMarkdownPanel(refocus = true): void {
+    if (this.markdownPanelEl) this.markdownPanelEl.open = false;
+    if (refocus) this.view?.focus();
+  }
+
+  private applyMath(latex: string, display: 'inline' | 'block'): void {
+    this.closeMathPanel();
+    this.execCommand('insertMath', { latex, mathDisplay: display });
+  }
+
+  /** Inserts a math formula (LaTeX) at the selection. */
+  public insertMath(latex: string, display: 'inline' | 'block' = 'inline'): void {
+    this.execCommand('insertMath', { latex, mathDisplay: display });
+  }
+
+  // ----------------------------------------------------------------- emoji
+
+  private openEmojiPicker(): void {
+    if (!this.view || !this.emojiPickerEl || this.disabled || this.readonly) return;
+    this.emojiPickerEl.open = true;
+    if (this.bubbleMenuEl) this.bubbleMenuEl.open = false;
+    if (this.tableMenuEl) this.tableMenuEl.open = false;
+    this.emojiPickerEl.updateComplete.then(() => {
+      this.positionOverlay(this.emojiPickerEl, 'below');
+      this.emojiPickerEl.focusInput();
+    });
+  }
+
+  private closeEmojiPicker(refocus = true): void {
+    if (this.emojiPickerEl) this.emojiPickerEl.open = false;
+    if (refocus) this.view?.focus();
+  }
+
+  // ---------------------------------------------------------------- embeds
+
+  private openEmbedPanel(): void {
+    if (!this.view || !this.embedPanelEl || this.disabled || this.readonly) return;
+    this.embedPanelEl.reset();
+    this.embedPanelEl.open = true;
+    if (this.bubbleMenuEl) this.bubbleMenuEl.open = false;
+    if (this.tableMenuEl) this.tableMenuEl.open = false;
+    this.embedPanelEl.updateComplete.then(() => {
+      // Anchor below the embed toolbar button when available.
+      const anchor = this.toolbarButton('Embed video (YouTube, Vimeo, Loom)');
+      if (anchor) this.positionOverlayBelowAnchor(this.embedPanelEl, anchor);
+      else this.positionOverlay(this.embedPanelEl, 'below');
+      this.embedPanelEl.focusInput();
+    });
+  }
+
+  private closeEmbedPanel(refocus = true): void {
+    if (this.embedPanelEl) this.embedPanelEl.open = false;
+    if (refocus) this.view?.focus();
+  }
+
+  // -------------------------------------------------------------- bookmarks
+
+  private openBookmarkPanel(): void {
+    if (!this.view || !this.bookmarkPanelEl || this.disabled || this.readonly) return;
+    this.bookmarkPanelEl.open = true;
+    if (this.bubbleMenuEl) this.bubbleMenuEl.open = false;
+    if (this.tableMenuEl) this.tableMenuEl.open = false;
+    this.bookmarkPanelEl.updateComplete.then(() => {
+      this.positionOverlay(this.bookmarkPanelEl, 'below');
+      this.bookmarkPanelEl.focusInput();
+    });
+  }
+
+  private closeBookmarkPanel(refocus = true): void {
+    if (this.bookmarkPanelEl) this.bookmarkPanelEl.open = false;
+    if (refocus) this.view?.focus();
+  }
+
+  // ---------------------------------------------------------------- images
+
+  private openImagePanel(): void {
+    if (!this.view || !this.imagePanelEl || this.disabled || this.readonly) return;
+    // Editing an already-selected image/figure pre-fills the fields (and shows
+    // Remove); otherwise open a blank insert panel.
+    const info = selectedImageInfo(this.view.state);
+    if (info) {
+      this.imagePanelEl.prefill({
+        src: info.node.attrs.src,
+        alt: info.node.attrs.alt ?? '',
+        caption: info.isFigure ? info.node.textContent : '',
+      });
+    } else {
+      this.imagePanelEl.reset();
+    }
+    this.imagePanelEl.open = true;
+    if (this.bubbleMenuEl) this.bubbleMenuEl.open = false;
+    if (this.tableMenuEl) this.tableMenuEl.open = false;
+    this.imagePanelEl.updateComplete.then(() => {
+      // Anchor below the image toolbar button when it's available; otherwise
+      // fall back to positioning at the cursor.
+      const anchor = this.toolbarButton('Insert image');
+      if (anchor) this.positionOverlayBelowAnchor(this.imagePanelEl, anchor);
+      else this.positionOverlay(this.imagePanelEl, 'below');
+      this.imagePanelEl.focusInput();
+    });
+  }
+
+  private closeImagePanel(refocus = true): void {
+    if (this.imagePanelEl) this.imagePanelEl.open = false;
+    if (refocus) this.view?.focus();
+  }
+
+  private insertImageAt(
+    src: string,
+    alt: string | null,
+    pos: number | null,
+    caption: string | null = null
+  ): void {
+    if (!this.view) return;
+    if (pos !== null) {
+      const $pos = this.view.state.doc.resolve(
+        Math.min(pos, this.view.state.doc.content.size)
+      );
+      this.view.dispatch(this.view.state.tr.setSelection(TextSelection.near($pos)));
+    }
+    this.execCommand('insertImage', { src, alt, caption });
+  }
+
+  /**
+   * Routes an image file through the upload pipeline: a cancelable
+   * `nile-image-upload-request` first, then `uploadHandler` (with an
+   * uploading placeholder), then the base64 fallback.
+   */
+  public async insertImageFile(
+    file: File,
+    pos: number | null = null,
+    meta?: { alt?: string | null; caption?: string | null }
+  ): Promise<void> {
+    if (!this.view) return;
+    const metaAlt = meta?.alt ?? null;
+    const metaCaption = meta?.caption ?? null;
+
+    const request = this.emit(
+      'nile-image-upload-request',
+      {
+        file,
+        insert: (src: string, alt?: string) =>
+          this.insertImageAt(src, alt ?? metaAlt, pos, metaCaption),
+      },
+      true,
+      true,
+      true
+    );
+    if (request.defaultPrevented) return;
+
+    if (this.uploadHandler) {
+      uploadCounter += 1;
+      const id = `nile-upload-${uploadCounter}`;
+      const at = pos ?? this.view.state.selection.from;
+      this.view.dispatch(this.view.state.tr.setMeta(imageUploadKey, { add: { id, pos: at } }));
+      try {
+        const { src, alt } = await this.uploadHandler(file);
+        const mappedPos = this.view ? findUploadPos(this.view.state, id) : null;
+        this.view?.dispatch(this.view.state.tr.setMeta(imageUploadKey, { remove: { id } }));
+        this.insertImageAt(src, metaAlt ?? alt ?? null, mappedPos, metaCaption);
+      } catch (error) {
+        this.view?.dispatch(this.view.state.tr.setMeta(imageUploadKey, { remove: { id } }));
+        this.emit('nile-image-upload-error', { file, error });
+      }
+      return;
+    }
+
+    if (this.allowBase64Images) {
+      const src = await readFileAsDataURL(file);
+      this.insertImageAt(src, metaAlt, pos, metaCaption);
+    }
+  }
+
+  // ---------------------------------------------------- mentions & slash
+
+  private dismissKeyFor(
+    source: 'mention' | 'slash' | 'emoji',
+    match: SuggestionMatch
+  ): string {
+    return `${source}:${match.trigger}:${match.from}`;
+  }
+
+  private handleSuggestKey(
+    event: KeyboardEvent,
+    source: 'mention' | 'slash' | 'emoji'
+  ): boolean {
+    if (this.activeSuggestSource !== source || !this.suggestListEl?.open) return false;
+    switch (event.key) {
+      case 'ArrowDown':
+        this.suggestListEl.next();
+        return true;
+      case 'ArrowUp':
+        this.suggestListEl.prev();
+        return true;
+      case 'Enter':
+      case 'Tab':
+        return this.suggestListEl.selectCurrent();
+      case 'Escape': {
+        const match =
+          source === 'mention'
+            ? this.mentionMatch
+            : source === 'slash'
+              ? this.slashMatch
+              : this.emojiMatch;
+        if (match) this.suggestDismissed = this.dismissKeyFor(source, match);
+        this.closeSuggestList();
+        return true;
+      }
+      default:
+        return false;
+    }
+  }
+
+  private closeSuggestList(): void {
+    if (this.suggestListEl) this.suggestListEl.open = false;
+    this.activeSuggestSource = null;
+  }
+
+  private updateSuggestList(): void {
+    if (!this.suggestListEl || !this.view) return;
+    const mention = this.mentionMatch?.active ? this.mentionMatch : null;
+    const slash =
+      !this.noSlashCommands && this.slashMatch?.active ? this.slashMatch : null;
+    const emoji = !this.noEmoji && this.emojiMatch?.active ? this.emojiMatch : null;
+    const source: 'mention' | 'slash' | 'emoji' | null = mention
+      ? 'mention'
+      : slash
+        ? 'slash'
+        : emoji
+          ? 'emoji'
+          : null;
+    const match = mention ?? slash ?? emoji;
+
+    if (!source || !match || this.disabled || this.readonly) {
+      this.closeSuggestList();
+      return;
+    }
+    if (this.suggestDismissed === this.dismissKeyFor(source, match)) return;
+    this.suggestDismissed = null;
+
+    if (source === 'mention') {
+      const all = this.mentions[match.trigger] ?? [];
+      const query = match.query.toLowerCase();
+      this.suggestListEl.items = all.filter(item =>
+        item.label.toLowerCase().includes(query)
+      );
+      // Async override: listeners may provide items for this exact query.
+      const token = `${match.trigger} ${match.query}`;
+      this.mentionQueryToken = token;
+      this.emit('nile-mention-query', {
+        trigger: match.trigger,
+        query: match.query,
+        provide: (items: { key: string; label: string }[]) => {
+          if (this.mentionQueryToken !== token || !Array.isArray(items)) return;
+          this.suggestListEl.items = items
+            .filter(i => i && typeof i.key === 'string' && typeof i.label === 'string')
+            .map(i => ({ key: i.key, label: i.label }));
+        },
+      });
+    } else if (source === 'slash') {
+      const query = match.query.toLowerCase();
+      const snippetItems: SuggestItem[] = this.snippets.map(s => ({
+        key: `snippet:${s.key}`,
+        label: s.label,
+        hint: 'snippet',
+      }));
+      this.suggestListEl.items = [...SLASH_ITEMS, ...snippetItems].filter(item =>
+        item.label.toLowerCase().includes(query)
+      );
+    } else {
+      const query = match.query.toLowerCase();
+      this.suggestListEl.items = EMOJI.filter(e => e.name.includes(query))
+        .slice(0, 12)
+        .map(e => ({ key: e.name, label: `${e.char}  ${e.name}` }));
+      if (this.suggestListEl.items.length === 0) {
+        this.closeSuggestList();
+        return;
+      }
+    }
+
+    this.activeSuggestSource = source;
+    this.suggestListEl.resetActive();
+    this.suggestListEl.open = true;
+    this.suggestListEl.updateComplete.then(() =>
+      this.positionOverlay(this.suggestListEl, 'below', match.from)
+    );
+  }
+
+  private handleSuggestSelect(item: SuggestItem): void {
+    if (!this.view) return;
+    if (this.activeSuggestSource === 'mention' && this.mentionMatch?.active) {
+      const match = this.mentionMatch;
+      const { state } = this.view;
+      const mention = state.schema.nodes.mention.create({
+        trigger: match.trigger,
+        key: item.key,
+        label: item.label,
+      });
+      this.view.dispatch(
+        state.tr.replaceWith(match.from, match.to, [mention, state.schema.text(' ')])
+      );
+      this.view.focus();
+      this.emit('nile-mention-select', {
+        trigger: match.trigger,
+        key: item.key,
+        label: item.label,
+      });
+    } else if (this.activeSuggestSource === 'slash' && this.slashMatch?.active) {
+      const match = this.slashMatch;
+      this.view.dispatch(this.view.state.tr.delete(match.from, match.to));
+      this.closeSuggestList();
+      if (item.key.startsWith('snippet:')) {
+        const snippet = this.snippets.find(s => `snippet:${s.key}` === item.key);
+        if (snippet) this.insertHTML(snippet.html);
+        return;
+      }
+      const slashItem = SLASH_ITEMS.find(s => s.key === item.key);
+      if (!slashItem) return;
+      if (slashItem.command === 'openImage') this.openImagePanel();
+      else if (slashItem.command === 'openEmbed') this.openEmbedPanel();
+      else if (slashItem.command === 'openBookmark') this.openBookmarkPanel();
+      else this.execCommand(slashItem.command, slashItem.attrs);
+    } else if (this.activeSuggestSource === 'emoji' && this.emojiMatch?.active) {
+      const match = this.emojiMatch;
+      const emoji = EMOJI.find(e => e.name === item.key);
+      if (emoji) {
+        this.view.dispatch(
+          this.view.state.tr.insertText(emoji.char, match.from, match.to)
+        );
+        this.view.focus();
+      }
+    }
+    this.closeSuggestList();
+  }
+
+  // ---------------------------------------------------------- find & replace
+
+  /** Opens the find & replace bar (also bound to Mod-f inside the editor). */
+  public openFindBar(): void {
+    if (!this.findBarEl || this.sourceMode) return;
+    this.findBarEl.open = true;
+    const find = this.view ? getFindState(this.view.state) : null;
+    this.findBarEl.matchCount = find?.matches.length ?? 0;
+    this.findBarEl.activeIndex = find?.activeIndex ?? 0;
+    this.findBarEl.updateComplete.then(() => {
+      // Anchor below the Find & replace toolbar button when present; otherwise
+      // fall back to the CSS-pinned top-right position.
+      const anchor = this.toolbarButton('Find & replace (Ctrl+F)');
+      if (anchor) this.positionOverlayBelowAnchor(this.findBarEl, anchor);
+      this.findBarEl.focusInput();
+    });
+  }
+
+  public closeFindBar(): void {
+    if (this.view) this.view.dispatch(clearFindTr(this.view.state));
+    if (this.findBarEl) this.findBarEl.open = false;
+    this.view?.focus();
+  }
+
+  public find(query: string): number {
+    if (!this.view) return 0;
+    this.view.dispatch(searchTr(this.view.state, query));
+    this.scrollToActiveMatch();
+    return getFindState(this.view.state).matches.length;
+  }
+
+  public findNext(): void {
+    if (!this.view) return;
+    this.view.dispatch(findStepTr(this.view.state, 'next'));
+    this.scrollToActiveMatch();
+  }
+
+  public findPrev(): void {
+    if (!this.view) return;
+    this.view.dispatch(findStepTr(this.view.state, 'prev'));
+    this.scrollToActiveMatch();
+  }
+
+  public replace(replacement: string): void {
+    if (!this.view) return;
+    const tr = replaceActiveTr(this.view.state, replacement);
+    if (tr) this.view.dispatch(tr);
+  }
+
+  public replaceAll(replacement: string): void {
+    if (!this.view) return;
+    const tr = replaceAllTr(this.view.state, replacement);
+    if (tr) this.view.dispatch(tr);
+  }
+
+  private scrollToActiveMatch(): void {
+    if (!this.view) return;
+    const find = getFindState(this.view.state);
+    const match = find.matches[find.activeIndex];
+    if (!match) return;
+    this.view.dispatch(
+      this.view.state.tr
+        .setSelection(TextSelection.create(this.view.state.doc, match.from, match.to))
+        .scrollIntoView()
+    );
+  }
+
+  // -------------------------------------------------------------- source view
+
+  /** Toggles raw-HTML source editing. Content re-sanitizes on the way back. */
+  public toggleSourceView(): void {
+    if (this.sourceMode) {
+      this.applySourceView(this.sourceViewEl?.textarea?.value ?? null);
+    } else {
+      this.sourceMode = true;
+      this.updateComplete.then(() => {
+        if (this.sourceViewEl) {
+          this.sourceViewEl.value = this.getHTML();
+          this.sourceViewEl.focusInput();
+        }
+      });
+    }
+  }
+
+  private applySourceView(htmlContent: string | null): void {
+    this.sourceMode = false;
+    if (htmlContent !== null) this.setContent(htmlContent, true);
+    this.updateComplete.then(() => this.view?.focus());
+  }
+
+  /** Word and character counts for the current document. */
+  public getWordCount(): { words: number; characters: number } {
+    return this.view ? countWords(this.view.state.doc) : { words: 0, characters: 0 };
+  }
+
+  /**
+   * Arms the format painter (copies the formatting at the selection) or, if
+   * already armed, disarms it. Once armed, the next non-empty selection the
+   * user makes receives the copied formatting.
+   */
+  public toggleFormatPainter(): void {
+    if (!this.view) return;
+    const tr = isFormatPainterArmed(this.view.state)
+      ? disarmFormatPainter(this.view.state)
+      : armFormatPainter(this.view.state);
+    if (tr) this.view.dispatch(tr);
+    this.view.focus();
+  }
+
+  // ---------------------------------------------------------- export & import
+
+  /** The live, styled content element used as the source for exports. */
+  private get contentRoot(): HTMLElement | null {
+    return (this.view?.dom as HTMLElement | undefined) ?? null;
+  }
+
+  /** Sanitizes `this.name` (or a fallback) into a safe download basename. */
+  private exportFilename(extension: string): string {
+    const base =
+      (this.name || 'document').replace(/[^\w.-]+/g, '-').replace(/^-+|-+$/g, '') || 'document';
+    return `${base}.${extension}`;
+  }
+
+  private downloadBlob(content: string, mime: string, filename: string): void {
+    const blob = new Blob([content], { type: mime });
+    const url = URL.createObjectURL(blob);
+    const anchor = document.createElement('a');
+    anchor.href = url;
+    anchor.download = filename;
+    anchor.style.display = 'none';
+    document.body.appendChild(anchor);
+    anchor.click();
+    anchor.remove();
+    // Revoke after the click so the download has a chance to start.
+    setTimeout(() => URL.revokeObjectURL(url), 0);
+  }
+
+  /**
+   * The document as HTML with every style folded into inline `style`
+   * attributes — the form email clients (which strip `<style>` blocks and
+   * classes) can render. Returns the string; does not download.
+   */
+  public getInlineStyledHTML(): string {
+    const root = this.contentRoot;
+    if (!this.view || !root || isDocEmpty(this.view.state.doc)) return '';
+    return toInlineStyledHtml(root);
+  }
+
+  /** Downloads the document as an inline-styled, email-ready `.html` file. */
+  public exportInlineHtml(filename?: string): void {
+    const body = this.getInlineStyledHTML();
+    if (!body) return;
+    const doc = `<!DOCTYPE html>\n<html><head><meta charset="utf-8"></head><body>${body}</body></html>`;
+    this.downloadBlob(doc, 'text/html;charset=utf-8', filename ?? this.exportFilename('html'));
+  }
+
+  /** Downloads the document as a Word-openable `.doc` file. */
+  public exportToWord(filename?: string): void {
+    const body = this.getInlineStyledHTML();
+    if (!body) return;
+    const doc = buildWordDocument(body, this.name || 'Document');
+    this.downloadBlob(doc, 'application/msword', filename ?? this.exportFilename('doc'));
+  }
+
+  /**
+   * Opens the browser print dialog with a self-contained, print-tuned copy of
+   * the document ("Save as PDF"). Honours page breaks, embedded images and the
+   * base font; optional running header/footer text.
+   */
+  public exportToPdf(
+    options: { header?: string; footer?: string; fontFamily?: string } = {}
+  ): void {
+    const body = this.getInlineStyledHTML();
+    if (!body) return;
+    const source = buildPrintDocument(body, { title: this.name || 'Document', ...options });
+
+    const frame = document.createElement('iframe');
+    frame.setAttribute('aria-hidden', 'true');
+    Object.assign(frame.style, {
+      position: 'fixed',
+      right: '0',
+      bottom: '0',
+      width: '0',
+      height: '0',
+      border: '0',
+    });
+    document.body.appendChild(frame);
+
+    const cleanup = (): void => {
+      // Delay removal so the browser's print job keeps its document alive.
+      setTimeout(() => frame.remove(), 1000);
+    };
+
+    frame.onload = (): void => {
+      const win = frame.contentWindow;
+      if (!win) {
+        cleanup();
+        return;
+      }
+      win.focus();
+      win.addEventListener('afterprint', cleanup, { once: true });
+      win.print();
+    };
+
+    const fdoc = frame.contentDocument;
+    if (!fdoc) {
+      frame.remove();
+      return;
+    }
+    fdoc.open();
+    fdoc.write(source);
+    fdoc.close();
+  }
+
+  /**
+   * Imports Word / Google-Docs HTML: normalizes the proprietary markup to
+   * clean semantic HTML, then replaces the document. Fidelity note: comments
+   * and track-changes are not preserved — the editor has no model for them,
+   * and binary `.docx`/`.doc` files are not parsed (export as "Web Page" /
+   * HTML first, or paste directly, which is handled automatically).
+   */
+  public importFromWord(html: string, emitChange = true): void {
+    if (!html) return;
+    const cleaned = isOfficeHtml(html) ? cleanOfficeHtml(html) : html;
+    this.setContent(cleaned, emitChange);
+  }
+
+  /** Opens a file picker for an HTML export and imports it (toolbar action). */
+  private importFromWordFile(): void {
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.accept = '.htm,.html,text/html';
+    input.style.display = 'none';
+    input.addEventListener('change', () => {
+      const file = input.files?.[0];
+      input.remove();
+      if (!file) return;
+      file.text().then(text => this.importFromWord(text));
+    });
+    document.body.appendChild(input);
+    input.click();
+  }
+
+  // -------------------------------------------------------- shortcut help
+
+  /** Opens the keyboard shortcut reference (also bound to Mod-/). */
+  public openShortcutHelp(): void {
+    if (!this.shortcutHelpEl) return;
+    this.shortcutHelpEl.open = true;
+    this.shortcutHelpEl.focusPanel();
+  }
+
+  public closeShortcutHelp(): void {
+    if (this.shortcutHelpEl) this.shortcutHelpEl.open = false;
+    this.view?.focus();
+  }
+
+  // ------------------------------------------------------------ fullscreen
+
+  /** Toggles distraction-free fullscreen mode. Esc exits. */
+  public toggleFullscreen(): void {
+    this.fullscreen = !this.fullscreen;
+    this.view?.focus();
+  }
+
+  private openLinkEditor(): void {
+    if (!this.view || !this.linkEditorEl || this.disabled || this.readonly) return;
+    const ts = this.toolbarState ?? computeToolbarState(this.view.state);
+    this.linkEditorEl.href = ts.linkHref ?? '';
+    this.linkEditorEl.text = '';
+    this.linkEditorEl.allowText = ts.selectionEmpty && !ts.linkActive;
+    this.linkEditorEl.canRemove = ts.linkActive;
+    this.linkEditorEl.open = true;
+    if (this.bubbleMenuEl) this.bubbleMenuEl.open = false;
+    this.linkEditorEl.updateComplete.then(() => {
+      this.positionOverlay(this.linkEditorEl, 'below');
+      this.linkEditorEl.focusInput();
+    });
+  }
+
+  private closeLinkEditor(refocus = true): void {
+    if (this.linkEditorEl) this.linkEditorEl.open = false;
+    if (refocus) this.view?.focus();
+  }
+
+  private applyLink(href: string, text: string): void {
+    if (!this.view) return;
+    const { state } = this.view;
+    const linkType = state.schema.marks.link;
+    if (state.selection.empty && !getMarkRange(state.selection.$from, linkType)) {
+      const label = text || href;
+      const node = state.schema.text(label, [linkType.create({ href })]);
+      this.view.dispatch(state.tr.replaceSelectionWith(node, false).scrollIntoView());
+    } else {
+      this.execCommand('link', { href });
+    }
+    this.closeLinkEditor();
+  }
+
+  // ---------------------------------------------------------------- public
+
+  /** The underlying ProseMirror EditorView. Advanced escape hatch. */
+  public get pmView(): EditorView | undefined {
+    return this.view;
+  }
+
+  /** Document as ProseMirror JSON. */
+  public get json(): Record<string, unknown> | null {
+    return this.view ? docToJson(this.view.state.doc) : null;
+  }
+
+  public set json(value: Record<string, unknown> | null) {
+    if (value) this.setContent(value);
+  }
+
+  public override focus(): void {
+    this.view?.focus();
+  }
+
+  public override blur(): void {
+    (this.view?.dom as HTMLElement | undefined)?.blur();
+  }
+
+  public getHTML(): string {
+    return this.view && !isDocEmpty(this.view.state.doc)
+      ? docToHtml(this.view.state.doc)
+      : '';
+  }
+
+  public getJSON(): Record<string, unknown> | null {
+    return this.json;
+  }
+
+  public getText(): string {
+    return this.view ? docToText(this.view.state.doc) : '';
+  }
+
+  /**
+   * Document as Markdown. Best-effort: structural nodes and Markdown-native
+   * marks are converted; color/font marks are dropped to plain text. Use
+   * getHTML() when a loss-free representation is required.
+   */
+  public getMarkdown(): string {
+    return this.view && !isDocEmpty(this.view.state.doc)
+      ? docToMarkdown(this.view.state.doc)
+      : '';
+  }
+
+  /**
+   * Replaces the document with parsed Markdown. Covers the same subset as
+   * getMarkdown(): headings, lists, code fences, tables, quotes and the
+   * inline marks. The parsed HTML flows through the schema and sanitizer.
+   */
+  public setMarkdown(markdown: string, emitChange = false): void {
+    this.setContent(markdownToHtml(markdown), emitChange);
+  }
+
+  /** Parses and inserts Markdown at the current selection. */
+  public insertMarkdown(markdown: string): void {
+    this.insertHTML(markdownToHtml(markdown));
+  }
+
+  /** Replaces the document. Accepts an HTML string or ProseMirror JSON. */
+  public setContent(content: string | Record<string, unknown>, emitChange = false): void {
+    if (!this.view) {
+      if (typeof content === 'string') this.value = content;
+      return;
+    }
+    let doc =
+      typeof content === 'string'
+        ? htmlToDoc(defaultSchema, content, this.sanitize)
+        : jsonToDoc(defaultSchema, content);
+    if (this.singleLine) doc = flattenToSingleParagraph(doc);
+    this.view.updateState(this.buildState(doc));
+    this.toolbarState = this.snapshotToolbar(this.view.state);
+    this.syncingValue = true;
+    this.value = isDocEmpty(doc) ? '' : docToHtml(doc);
+    this.syncFormValue(doc);
+    if (emitChange) {
+      this.emit('nile-input', this.buildChangeDetail(doc));
+      this.emit('nile-change', this.buildChangeDetail(doc));
+    }
+  }
+
+  public clear(): void {
+    this.setContent('');
+  }
+
+  /** Parses and inserts HTML at the current selection. */
+  public insertHTML(htmlContent: string): void {
+    if (!this.view) return;
+    const slice = htmlToSlice(defaultSchema, htmlContent, this.sanitize);
+    this.view.dispatch(this.view.state.tr.replaceSelection(slice).scrollIntoView());
+    this.view.focus();
+  }
+
+  /** Runs a named editor command. Returns whether the command applied. */
+  public execCommand(name: string, attrs?: CommandAttrs): boolean {
+    if (!this.view) return false;
+    const command = getCommand(this.view.state, name as CommandName, attrs);
+    if (!command) return false;
+    const applied = command(this.view.state, this.view.dispatch, this.view);
+    this.view.focus();
+    return applied;
+  }
+
+  /** True when the given mark/block command is active at the selection. */
+  public isCommandActive(name: string): boolean {
+    const ts = this.toolbarState;
+    if (!ts) return false;
+    switch (name) {
+      case 'bold':
+        return ts.bold;
+      case 'italic':
+        return ts.italic;
+      case 'underline':
+        return ts.underline;
+      case 'strike':
+        return ts.strike;
+      case 'code':
+        return ts.code;
+      case 'link':
+        return ts.linkActive;
+      case 'bulletList':
+        return ts.inBulletList;
+      case 'orderedList':
+        return ts.inOrderedList;
+      case 'blockquote':
+        return ts.inBlockquote;
+      default:
+        return false;
+    }
+  }
+
+  // ---------------------------------------------------------------- render
+
+  private handleCommand(event: CustomEvent<WysiwygCommandDetail>): void {
+    event.stopPropagation();
+    const { name, attrs } = event.detail;
+    if (name === 'openLink') {
+      this.openLinkEditor();
+      return;
+    }
+    if (name === 'openImage') {
+      this.openImagePanel();
+      return;
+    }
+    if (name === 'openEmbed') {
+      this.openEmbedPanel();
+      return;
+    }
+    if (name === 'openBookmark') {
+      this.openBookmarkPanel();
+      return;
+    }
+    if (name === 'toggleShowBlocks') {
+      this.showBlocks = !this.showBlocks;
+      this.view?.focus();
+      return;
+    }
+    if (name === 'toggleSource') {
+      this.toggleSourceView();
+      return;
+    }
+    if (name === 'togglePastePlainText') {
+      this.pasteAsPlainText = !this.pasteAsPlainText;
+      this.view?.focus();
+      return;
+    }
+    if (name === 'toggleFullscreen') {
+      this.toggleFullscreen();
+      return;
+    }
+    if (name === 'openShortcutHelp') {
+      this.openShortcutHelp();
+      return;
+    }
+    if (name === 'openSpecialChars') {
+      this.openSpecialChars();
+      return;
+    }
+    if (name === 'openEmoji') {
+      this.openEmojiPicker();
+      return;
+    }
+    if (name === 'openFind') {
+      this.openFindBar();
+      return;
+    }
+    if (name === 'exportPdf') {
+      this.exportToPdf();
+      return;
+    }
+    if (name === 'exportWord') {
+      this.exportToWord();
+      return;
+    }
+    if (name === 'exportInlineHtml') {
+      this.exportInlineHtml();
+      return;
+    }
+    if (name === 'importWord') {
+      this.importFromWordFile();
+      return;
+    }
+    if (name === 'toggleFormatPainter') {
+      this.toggleFormatPainter();
+      return;
+    }
+    if (name === 'openMergeField') {
+      this.openInsertMenu('merge');
+      return;
+    }
+    if (name === 'openTemplate') {
+      this.openInsertMenu('template');
+      return;
+    }
+    if (name === 'openMarkdown') {
+      this.openMarkdownPanel();
+      return;
+    }
+    if (name === 'openMath') {
+      this.openMathPanel();
+      return;
+    }
+    this.execCommand(name, attrs);
+  }
+
+  private handleBaseKeydown(event: KeyboardEvent): void {
+    if (event.key !== 'Escape' || event.defaultPrevented) return;
+    // The special-chars panel never takes focus, so its Esc lands here.
+    if (this.specialCharsEl?.open) {
+      this.closeSpecialChars();
+      return;
+    }
+    // Esc exits fullscreen — but only when nothing else claimed it (panels
+    // stopPropagation, ProseMirror handlers preventDefault).
+    if (!this.fullscreen) return;
+    const panelOpen =
+      this.linkEditorEl?.open ||
+      this.imagePanelEl?.open ||
+      this.embedPanelEl?.open ||
+      this.bookmarkPanelEl?.open ||
+      this.emojiPickerEl?.open ||
+      this.findBarEl?.open ||
+      this.shortcutHelpEl?.open ||
+      this.suggestListEl?.open;
+    if (!panelOpen) this.fullscreen = false;
+  }
+
+  private handleChromeFocusOut(event: FocusEvent): void {
+    // Focus left the widget entirely (e.g. clicked the page) while it was
+    // parked on chrome like the language picker: close the overlays.
+    const related = event.relatedTarget as Node | null;
+    if (related && (this.shadowRoot?.contains(related) || this.contains(related))) return;
+    if (this.view?.hasFocus()) return;
+    this.hasFocus = false;
+    this.updateOverlays();
+  }
+
+  /** The floating insert panels that should dismiss on outside interaction. */
+  private get floatingPanels(): Array<{ open: boolean } | undefined> {
+    return [
+      this.linkEditorEl,
+      this.imagePanelEl,
+      this.embedPanelEl,
+      this.bookmarkPanelEl,
+      this.specialCharsEl,
+      this.emojiPickerEl,
+      this.insertMenuEl,
+      this.mathPanelEl,
+      this.markdownPanelEl,
+    ];
+  }
+
+  /** Closes every open insert panel. `refocus` returns focus to the editor. */
+  private closeAllPanels(refocus = true): void {
+    if (this.linkEditorEl?.open) this.closeLinkEditor(refocus);
+    if (this.imagePanelEl?.open) this.closeImagePanel(refocus);
+    if (this.embedPanelEl?.open) this.closeEmbedPanel(refocus);
+    if (this.bookmarkPanelEl?.open) this.closeBookmarkPanel(refocus);
+    if (this.specialCharsEl?.open) this.closeSpecialChars(refocus);
+    if (this.emojiPickerEl?.open) this.closeEmojiPicker(refocus);
+    if (this.insertMenuEl?.open) this.closeInsertMenu(refocus);
+    if (this.mathPanelEl?.open) this.closeMathPanel(refocus);
+    if (this.markdownPanelEl?.open) this.closeMarkdownPanel(refocus);
+  }
+
+  /**
+   * Closes any open insert panel when the pointer goes down outside of it —
+   * whether elsewhere in the editor (e.g. the content area) or off the widget.
+   */
+  private onOutsidePointerDown = (event: Event): void => {
+    const openPanels = this.floatingPanels.filter(
+      (p): p is HTMLElement & { open: boolean } => !!p && (p as { open: boolean }).open
+    );
+    if (!openPanels.length) return;
+    const path = event.composedPath();
+    // Click landed inside an open panel — leave it be.
+    if (openPanels.some(panel => path.includes(panel))) return;
+    // Refocus the editor only when the click stayed within the widget.
+    const insideWidget =
+      path.includes(this) || (!!this.shadowRoot && path.includes(this.shadowRoot));
+    this.closeAllPanels(insideWidget);
+  };
+
+  public render(): TemplateResult {
+    const showToolbar = this.toolbar !== 'none' && !this.readonly && !this.sourceMode;
+    return html`
+      <div
+        class="nile-wysiwyg ${this.showBlocks ? 'nile-wysiwyg--show-blocks' : ''}"
+        part="base"
+        @wysiwyg-command=${this.handleCommand}
+        @focusout=${this.handleChromeFocusOut}
+        @keydown=${this.handleBaseKeydown}
+      >
+        ${showToolbar
+          ? html`
+              <nile-wysiwyg-toolbar
+                part="toolbar"
+                exportparts="button, select, color"
+                config=${this.toolbar}
+                ?disabled=${this.disabled}
+                .toolbarState=${this.toolbarState}
+              ></nile-wysiwyg-toolbar>
+            `
+          : nothing}
+        ${this.sourceMode
+          ? html`
+              <nile-wysiwyg-source-view
+                @wysiwyg-source-apply=${(e: CustomEvent) => {
+                  e.stopPropagation();
+                  this.applySourceView(e.detail.html);
+                }}
+                @wysiwyg-source-cancel=${(e: Event) => {
+                  e.stopPropagation();
+                  this.applySourceView(null);
+                }}
+              ></nile-wysiwyg-source-view>
+            `
+          : nothing}
+        <div
+          class="nile-wysiwyg__surface"
+          part="surface"
+          style=${this.sourceMode ? 'display: none' : ''}
+        ></div>
+        ${(this.maxLength > 0 || this.showCounter) && !this.sourceMode
+          ? html`
+              <div
+                class="nile-wysiwyg__counter ${this.maxLength > 0 &&
+                this.counter.characters >= this.maxLength
+                  ? 'over'
+                  : ''}"
+                part="counter"
+              >
+                ${this.maxLength > 0
+                  ? `${this.counter.characters} / ${this.maxLength}`
+                  : `${this.counter.words} words · ${this.counter.characters} characters`}
+              </div>
+            `
+          : nothing}
+        <nile-wysiwyg-shortcut-help
+          @wysiwyg-shortcut-help-close=${(e: Event) => {
+            e.stopPropagation();
+            this.closeShortcutHelp();
+          }}
+        ></nile-wysiwyg-shortcut-help>
+        <nile-wysiwyg-bubble-menu></nile-wysiwyg-bubble-menu>
+        <nile-wysiwyg-table-menu></nile-wysiwyg-table-menu>
+        <nile-wysiwyg-code-menu></nile-wysiwyg-code-menu>
+        <nile-wysiwyg-image-menu></nile-wysiwyg-image-menu>
+        <nile-wysiwyg-embed-menu></nile-wysiwyg-embed-menu>
+        <nile-wysiwyg-special-chars
+          @wysiwyg-char-select=${(e: CustomEvent) => {
+            e.stopPropagation();
+            this.insertSpecialChar(e.detail.char);
+          }}
+          @wysiwyg-char-cancel=${(e: Event) => {
+            e.stopPropagation();
+            this.closeSpecialChars();
+          }}
+        ></nile-wysiwyg-special-chars>
+        <nile-wysiwyg-emoji-picker
+          @wysiwyg-emoji-select=${(e: CustomEvent) => {
+            e.stopPropagation();
+            this.closeEmojiPicker();
+            this.insertSpecialChar(e.detail.char);
+          }}
+          @wysiwyg-emoji-cancel=${(e: Event) => {
+            e.stopPropagation();
+            this.closeEmojiPicker();
+          }}
+        ></nile-wysiwyg-emoji-picker>
+        <nile-wysiwyg-insert-menu
+          @wysiwyg-insert-select=${(e: CustomEvent) => {
+            e.stopPropagation();
+            this.handleInsertSelect(e.detail.index);
+          }}
+          @wysiwyg-insert-cancel=${(e: Event) => {
+            e.stopPropagation();
+            this.closeInsertMenu();
+          }}
+        ></nile-wysiwyg-insert-menu>
+        <nile-wysiwyg-math-panel
+          @wysiwyg-math-apply=${(e: CustomEvent) => {
+            e.stopPropagation();
+            this.applyMath(e.detail.latex, e.detail.display);
+          }}
+          @wysiwyg-math-cancel=${(e: Event) => {
+            e.stopPropagation();
+            this.closeMathPanel();
+          }}
+        ></nile-wysiwyg-math-panel>
+        <nile-wysiwyg-markdown-panel
+          @wysiwyg-markdown-apply=${(e: CustomEvent) => {
+            e.stopPropagation();
+            this.closeMarkdownPanel();
+            this.insertMarkdown(e.detail.markdown);
+          }}
+          @wysiwyg-markdown-cancel=${(e: Event) => {
+            e.stopPropagation();
+            this.closeMarkdownPanel();
+          }}
+        ></nile-wysiwyg-markdown-panel>
+        <nile-wysiwyg-embed-panel
+          @wysiwyg-embed-apply=${(e: CustomEvent) => {
+            e.stopPropagation();
+            this.closeEmbedPanel();
+            this.execCommand('insertEmbed', {
+              src: e.detail.src,
+              provider: e.detail.provider,
+            });
+          }}
+          @wysiwyg-embed-cancel=${(e: Event) => {
+            e.stopPropagation();
+            this.closeEmbedPanel();
+          }}
+        ></nile-wysiwyg-embed-panel>
+        <nile-wysiwyg-bookmark-panel
+          @wysiwyg-bookmark-apply=${(e: CustomEvent) => {
+            e.stopPropagation();
+            this.closeBookmarkPanel();
+            this.execCommand('insertBookmark', { id: e.detail.id });
+          }}
+          @wysiwyg-bookmark-cancel=${(e: Event) => {
+            e.stopPropagation();
+            this.closeBookmarkPanel();
+          }}
+        ></nile-wysiwyg-bookmark-panel>
+        <nile-wysiwyg-suggest-list
+          @wysiwyg-suggest-select=${(e: CustomEvent) => {
+            e.stopPropagation();
+            this.handleSuggestSelect(e.detail.item);
+          }}
+        ></nile-wysiwyg-suggest-list>
+        <nile-wysiwyg-find-bar
+          @wysiwyg-find=${(e: CustomEvent) => {
+            e.stopPropagation();
+            this.find(e.detail.query);
+          }}
+          @wysiwyg-find-step=${(e: CustomEvent) => {
+            e.stopPropagation();
+            if (e.detail.direction === 'prev') this.findPrev();
+            else this.findNext();
+          }}
+          @wysiwyg-replace=${(e: CustomEvent) => {
+            e.stopPropagation();
+            this.replace(e.detail.value);
+          }}
+          @wysiwyg-replace-all=${(e: CustomEvent) => {
+            e.stopPropagation();
+            this.replaceAll(e.detail.value);
+          }}
+          @wysiwyg-find-close=${(e: Event) => {
+            e.stopPropagation();
+            this.closeFindBar();
+          }}
+        ></nile-wysiwyg-find-bar>
+        <nile-wysiwyg-image-panel
+          ?upload-from-computer=${this.uploadFromComputer}
+          .maxFileSize=${this.imageMaxFileSize}
+          @wysiwyg-image-apply=${(e: CustomEvent) => {
+            e.stopPropagation();
+            const editing = this.imagePanelEl?.editing;
+            this.closeImagePanel();
+            this.execCommand(editing ? 'updateImage' : 'insertImage', {
+              src: e.detail.src,
+              alt: e.detail.alt || null,
+              caption: e.detail.caption || null,
+            });
+          }}
+          @wysiwyg-image-file=${(e: CustomEvent) => {
+            e.stopPropagation();
+            this.closeImagePanel();
+            this.insertImageFile(e.detail.file, null, {
+              alt: e.detail.alt || null,
+              caption: e.detail.caption || null,
+            });
+          }}
+          @wysiwyg-image-remove=${(e: Event) => {
+            e.stopPropagation();
+            this.closeImagePanel();
+            this.execCommand('deleteImage');
+          }}
+          @wysiwyg-image-cancel=${(e: Event) => {
+            e.stopPropagation();
+            this.closeImagePanel();
+          }}
+        ></nile-wysiwyg-image-panel>
+        <nile-wysiwyg-link-editor
+          @wysiwyg-link-apply=${(e: CustomEvent) => {
+            e.stopPropagation();
+            this.applyLink(e.detail.href, e.detail.text);
+          }}
+          @wysiwyg-link-remove=${(e: Event) => {
+            e.stopPropagation();
+            this.execCommand('unlink');
+            this.closeLinkEditor();
+          }}
+          @wysiwyg-link-cancel=${(e: Event) => {
+            e.stopPropagation();
+            this.closeLinkEditor();
+          }}
+        ></nile-wysiwyg-link-editor>
+      </div>
+    `;
+  }
+}
+
+export default NileWysiwygEditor;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-wysiwyg-editor': NileWysiwygEditor;
+  }
+}