@aquera/nile-elements 1.9.6 → 1.9.7

package/dist/src/nile-wysiwyg-editor/nile-wysiwyg-editor.js

@@ -0,0 +1,2038 @@
+import { __decorate } from "tslib";
+import { html, nothing } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { EditorView } from 'prosemirror-view';
+import { TextSelection } from 'prosemirror-state';
+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 { selectedImageInfo } from './engine/commands';
+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';
+const SLASH_ITEMS = [
+    { 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) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => resolve(reader.result);
+        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.
+ */
+let NileWysiwygEditor = class NileWysiwygEditor extends NileElement {
+    static get styles() {
+        return [styles];
+    }
+    constructor() {
+        super();
+        /** Document content as HTML. Not reflected to the attribute. */
+        this.value = '';
+        this.placeholder = '';
+        this.disabled = false;
+        this.readonly = false;
+        /** Toolbar config string; `"none"` hides the toolbar. */
+        this.toolbar = DEFAULT_TOOLBAR;
+        /** Shows a balloon toolbar over text selections. */
+        this.bubbleMenu = false;
+        /** Sanitizes incoming HTML (value, paste, insertHTML). Leave on. */
+        this.sanitize = true;
+        /** Constrains content to a single paragraph. */
+        this.singleLine = false;
+        /** Form field name. */
+        this.name = '';
+        this.required = false;
+        /**
+         * Fallback when no uploadHandler is set and no nile-image-upload-request
+         * listener takes over: embed image files as base64 data URLs.
+         */
+        this.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.
+         */
+        this.uploadFromComputer = false;
+        /** Max upload size (bytes) shown/enforced by the image dialog. Default 2 MB. */
+        this.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.
+         */
+        this.mentions = {};
+        /** Disables the "/" command menu. */
+        this.noSlashCommands = false;
+        /** Disables the ":" emoji picker. */
+        this.noEmoji = false;
+        /** Maximum character count; further input is rejected. 0 = unlimited. */
+        this.maxLength = 0;
+        /** Always show the word/character counter footer (implied by maxlength). */
+        this.showCounter = false;
+        /** Keeps the toolbar pinned to the viewport while scrolling long content. */
+        this.stickyToolbar = false;
+        /** Reusable snippets surfaced in the "/" menu (JSON attribute). */
+        this.snippets = [];
+        /** Merge fields offered in the merge-field picker (JSON attribute). */
+        this.mergeFields = [];
+        /** Content templates offered in the template picker (JSON attribute). */
+        this.templates = [];
+        /** Emit nile-autosave every N ms while the document has changed. 0 = off. */
+        this.autosaveInterval = 0;
+        /** When on, every paste drops formatting and inserts plain text. */
+        this.pasteAsPlainText = false;
+        /** Disables Markdown detection on plain-text pastes. */
+        this.noMarkdownPaste = false;
+        /** Disables typography autocorrect (smart quotes, dashes, (c) → ©). */
+        this.noTextTransform = false;
+        /** Expands the editor to fill the viewport. Esc exits. */
+        this.fullscreen = false;
+        /** Outlines block boundaries (paragraphs, headings, lists…) while editing. */
+        this.showBlocks = false;
+        this.hasFocus = false;
+        this.sourceMode = false;
+        this.counter = { words: 0, characters: 0 };
+        /** Which list the shared insert-menu is showing, if open. */
+        this.insertMenuMode = null;
+        this.mentionMatch = null;
+        this.slashMatch = null;
+        this.emojiMatch = null;
+        this.activeSuggestSource = null;
+        this.suggestDismissed = null;
+        this.mentionQueryToken = '';
+        this.lastAutosaveValue = '';
+        this.defaultValue = '';
+        this.syncingValue = false;
+        this.pendingChange = false;
+        /** Body overflow value before fullscreen locked it; null = not locked. */
+        this.previousBodyOverflow = null;
+        /**
+         * 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.
+         */
+        this.onOutsidePointerDown = (event) => {
+            const openPanels = this.floatingPanels.filter((p) => !!p && p.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);
+        };
+        if (typeof this.attachInternals === 'function') {
+            this.internals = this.attachInternals();
+        }
+    }
+    connectedCallback() {
+        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() {
+        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;
+    }
+    firstUpdated() {
+        this.defaultValue = this.value;
+        this.mountView();
+    }
+    updated(changed) {
+        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;
+            }
+        }
+    }
+    restartAutosave() {
+        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
+    buildState(doc) {
+        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).
+     */
+    snapshotToolbar(state) {
+        return {
+            ...computeToolbarState(state),
+            pasteAsPlainText: this.pasteAsPlainText,
+            fullscreen: this.fullscreen,
+            showBlocks: this.showBlocks,
+            formatPainter: isFormatPainterArmed(state),
+        };
+    }
+    mountView() {
+        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.relatedTarget;
+                    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),
+                image: (node, view, getPos) => new ImageView(node, view, getPos),
+                figure: (node, view, getPos) => new FigureView(node, view, getPos),
+                embed: (node, view, getPos) => new EmbedView(node, view, getPos),
+                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);
+    }
+    handleTransaction(tr) {
+        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();
+        }
+    }
+    buildChangeDetail(doc) {
+        const value = isDocEmpty(doc) ? '' : docToHtml(doc);
+        return { value, json: docToJson(doc), content: value };
+    }
+    scheduleChange() {
+        this.pendingChange = true;
+        if (this.changeTimer)
+            clearTimeout(this.changeTimer);
+        this.changeTimer = setTimeout(() => this.flushChange(), CHANGE_DEBOUNCE_MS);
+    }
+    flushChange() {
+        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
+    syncFormValue(doc) {
+        if (!this.internals)
+            return;
+        const value = isDocEmpty(doc) ? '' : docToHtml(doc);
+        this.internals.setFormValue(value === '' ? null : value);
+        this.updateValidity();
+    }
+    updateValidity() {
+        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() {
+        this.setContent(this.defaultValue);
+    }
+    formDisabledCallback(disabled) {
+        this.disabled = disabled;
+    }
+    checkValidity() {
+        return this.internals ? this.internals.checkValidity() : true;
+    }
+    reportValidity() {
+        return this.internals ? this.internals.reportValidity() : true;
+    }
+    // -------------------------------------------------------------- overlays
+    /** Positions an overlay element near a doc position (default: selection). */
+    positionOverlay(el, placement, pos) {
+        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. */
+    positionOverlayBelowAnchor(el, anchor) {
+        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. */
+    toolbarButton(label) {
+        return (this.toolbarEl?.shadowRoot?.querySelector(`button[aria-label="${label}"]`) ?? null);
+    }
+    updateOverlays() {
+        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
+    openSpecialChars() {
+        if (!this.view || !this.specialCharsEl || this.disabled || this.readonly)
+            return;
+        this.specialCharsEl.open = true;
+        this.specialCharsEl.updateComplete.then(() => this.positionOverlay(this.specialCharsEl, 'below'));
+    }
+    closeSpecialChars(refocus = true) {
+        if (this.specialCharsEl)
+            this.specialCharsEl.open = false;
+        if (refocus)
+            this.view?.focus();
+    }
+    insertSpecialChar(char) {
+        if (!this.view)
+            return;
+        this.view.dispatch(this.view.state.tr.insertText(char).scrollIntoView());
+        this.view.focus();
+    }
+    // ------------------------------------------------ templates & merge fields
+    openInsertMenu(mode) {
+        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'));
+    }
+    closeInsertMenu(refocus = true) {
+        if (this.insertMenuEl)
+            this.insertMenuEl.open = false;
+        this.insertMenuMode = null;
+        if (refocus)
+            this.view?.focus();
+    }
+    handleInsertSelect(index) {
+        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. */
+    insertMergeField(id, label) {
+        this.execCommand('insertMergeField', { id, label: label ?? null });
+    }
+    /** Changes the case of the selected text. */
+    changeCase(mode) {
+        this.execCommand('changeCase', { textCase: mode });
+    }
+    // ---------------------------------------------------------------- math
+    openMathPanel() {
+        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();
+        });
+    }
+    closeMathPanel(refocus = true) {
+        if (this.mathPanelEl)
+            this.mathPanelEl.open = false;
+        if (refocus)
+            this.view?.focus();
+    }
+    openMarkdownPanel() {
+        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();
+        });
+    }
+    closeMarkdownPanel(refocus = true) {
+        if (this.markdownPanelEl)
+            this.markdownPanelEl.open = false;
+        if (refocus)
+            this.view?.focus();
+    }
+    applyMath(latex, display) {
+        this.closeMathPanel();
+        this.execCommand('insertMath', { latex, mathDisplay: display });
+    }
+    /** Inserts a math formula (LaTeX) at the selection. */
+    insertMath(latex, display = 'inline') {
+        this.execCommand('insertMath', { latex, mathDisplay: display });
+    }
+    // ----------------------------------------------------------------- emoji
+    openEmojiPicker() {
+        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();
+        });
+    }
+    closeEmojiPicker(refocus = true) {
+        if (this.emojiPickerEl)
+            this.emojiPickerEl.open = false;
+        if (refocus)
+            this.view?.focus();
+    }
+    // ---------------------------------------------------------------- embeds
+    openEmbedPanel() {
+        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();
+        });
+    }
+    closeEmbedPanel(refocus = true) {
+        if (this.embedPanelEl)
+            this.embedPanelEl.open = false;
+        if (refocus)
+            this.view?.focus();
+    }
+    // -------------------------------------------------------------- bookmarks
+    openBookmarkPanel() {
+        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();
+        });
+    }
+    closeBookmarkPanel(refocus = true) {
+        if (this.bookmarkPanelEl)
+            this.bookmarkPanelEl.open = false;
+        if (refocus)
+            this.view?.focus();
+    }
+    // ---------------------------------------------------------------- images
+    openImagePanel() {
+        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();
+        });
+    }
+    closeImagePanel(refocus = true) {
+        if (this.imagePanelEl)
+            this.imagePanelEl.open = false;
+        if (refocus)
+            this.view?.focus();
+    }
+    insertImageAt(src, alt, pos, caption = null) {
+        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.
+     */
+    async insertImageFile(file, pos = null, meta) {
+        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, alt) => 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
+    dismissKeyFor(source, match) {
+        return `${source}:${match.trigger}:${match.from}`;
+    }
+    handleSuggestKey(event, source) {
+        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;
+        }
+    }
+    closeSuggestList() {
+        if (this.suggestListEl)
+            this.suggestListEl.open = false;
+        this.activeSuggestSource = null;
+    }
+    updateSuggestList() {
+        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
+            ? '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) => {
+                    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 = 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));
+    }
+    handleSuggestSelect(item) {
+        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). */
+    openFindBar() {
+        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();
+        });
+    }
+    closeFindBar() {
+        if (this.view)
+            this.view.dispatch(clearFindTr(this.view.state));
+        if (this.findBarEl)
+            this.findBarEl.open = false;
+        this.view?.focus();
+    }
+    find(query) {
+        if (!this.view)
+            return 0;
+        this.view.dispatch(searchTr(this.view.state, query));
+        this.scrollToActiveMatch();
+        return getFindState(this.view.state).matches.length;
+    }
+    findNext() {
+        if (!this.view)
+            return;
+        this.view.dispatch(findStepTr(this.view.state, 'next'));
+        this.scrollToActiveMatch();
+    }
+    findPrev() {
+        if (!this.view)
+            return;
+        this.view.dispatch(findStepTr(this.view.state, 'prev'));
+        this.scrollToActiveMatch();
+    }
+    replace(replacement) {
+        if (!this.view)
+            return;
+        const tr = replaceActiveTr(this.view.state, replacement);
+        if (tr)
+            this.view.dispatch(tr);
+    }
+    replaceAll(replacement) {
+        if (!this.view)
+            return;
+        const tr = replaceAllTr(this.view.state, replacement);
+        if (tr)
+            this.view.dispatch(tr);
+    }
+    scrollToActiveMatch() {
+        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. */
+    toggleSourceView() {
+        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();
+                }
+            });
+        }
+    }
+    applySourceView(htmlContent) {
+        this.sourceMode = false;
+        if (htmlContent !== null)
+            this.setContent(htmlContent, true);
+        this.updateComplete.then(() => this.view?.focus());
+    }
+    /** Word and character counts for the current document. */
+    getWordCount() {
+        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.
+     */
+    toggleFormatPainter() {
+        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. */
+    get contentRoot() {
+        return this.view?.dom ?? null;
+    }
+    /** Sanitizes `this.name` (or a fallback) into a safe download basename. */
+    exportFilename(extension) {
+        const base = (this.name || 'document').replace(/[^\w.-]+/g, '-').replace(/^-+|-+$/g, '') || 'document';
+        return `${base}.${extension}`;
+    }
+    downloadBlob(content, mime, filename) {
+        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.
+     */
+    getInlineStyledHTML() {
+        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. */
+    exportInlineHtml(filename) {
+        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. */
+    exportToWord(filename) {
+        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.
+     */
+    exportToPdf(options = {}) {
+        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 = () => {
+            // Delay removal so the browser's print job keeps its document alive.
+            setTimeout(() => frame.remove(), 1000);
+        };
+        frame.onload = () => {
+            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).
+     */
+    importFromWord(html, emitChange = true) {
+        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). */
+    importFromWordFile() {
+        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-/). */
+    openShortcutHelp() {
+        if (!this.shortcutHelpEl)
+            return;
+        this.shortcutHelpEl.open = true;
+        this.shortcutHelpEl.focusPanel();
+    }
+    closeShortcutHelp() {
+        if (this.shortcutHelpEl)
+            this.shortcutHelpEl.open = false;
+        this.view?.focus();
+    }
+    // ------------------------------------------------------------ fullscreen
+    /** Toggles distraction-free fullscreen mode. Esc exits. */
+    toggleFullscreen() {
+        this.fullscreen = !this.fullscreen;
+        this.view?.focus();
+    }
+    openLinkEditor() {
+        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();
+        });
+    }
+    closeLinkEditor(refocus = true) {
+        if (this.linkEditorEl)
+            this.linkEditorEl.open = false;
+        if (refocus)
+            this.view?.focus();
+    }
+    applyLink(href, text) {
+        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. */
+    get pmView() {
+        return this.view;
+    }
+    /** Document as ProseMirror JSON. */
+    get json() {
+        return this.view ? docToJson(this.view.state.doc) : null;
+    }
+    set json(value) {
+        if (value)
+            this.setContent(value);
+    }
+    focus() {
+        this.view?.focus();
+    }
+    blur() {
+        this.view?.dom?.blur();
+    }
+    getHTML() {
+        return this.view && !isDocEmpty(this.view.state.doc)
+            ? docToHtml(this.view.state.doc)
+            : '';
+    }
+    getJSON() {
+        return this.json;
+    }
+    getText() {
+        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.
+     */
+    getMarkdown() {
+        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.
+     */
+    setMarkdown(markdown, emitChange = false) {
+        this.setContent(markdownToHtml(markdown), emitChange);
+    }
+    /** Parses and inserts Markdown at the current selection. */
+    insertMarkdown(markdown) {
+        this.insertHTML(markdownToHtml(markdown));
+    }
+    /** Replaces the document. Accepts an HTML string or ProseMirror JSON. */
+    setContent(content, emitChange = false) {
+        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));
+        }
+    }
+    clear() {
+        this.setContent('');
+    }
+    /** Parses and inserts HTML at the current selection. */
+    insertHTML(htmlContent) {
+        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. */
+    execCommand(name, attrs) {
+        if (!this.view)
+            return false;
+        const command = getCommand(this.view.state, name, 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. */
+    isCommandActive(name) {
+        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
+    handleCommand(event) {
+        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);
+    }
+    handleBaseKeydown(event) {
+        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;
+    }
+    handleChromeFocusOut(event) {
+        // 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;
+        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. */
+    get floatingPanels() {
+        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. */
+    closeAllPanels(refocus = true) {
+        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);
+    }
+    render() {
+        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) => {
+                e.stopPropagation();
+                this.applySourceView(e.detail.html);
+            }}
+                @wysiwyg-source-cancel=${(e) => {
+                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) => {
+            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) => {
+            e.stopPropagation();
+            this.insertSpecialChar(e.detail.char);
+        }}
+          @wysiwyg-char-cancel=${(e) => {
+            e.stopPropagation();
+            this.closeSpecialChars();
+        }}
+        ></nile-wysiwyg-special-chars>
+        <nile-wysiwyg-emoji-picker
+          @wysiwyg-emoji-select=${(e) => {
+            e.stopPropagation();
+            this.closeEmojiPicker();
+            this.insertSpecialChar(e.detail.char);
+        }}
+          @wysiwyg-emoji-cancel=${(e) => {
+            e.stopPropagation();
+            this.closeEmojiPicker();
+        }}
+        ></nile-wysiwyg-emoji-picker>
+        <nile-wysiwyg-insert-menu
+          @wysiwyg-insert-select=${(e) => {
+            e.stopPropagation();
+            this.handleInsertSelect(e.detail.index);
+        }}
+          @wysiwyg-insert-cancel=${(e) => {
+            e.stopPropagation();
+            this.closeInsertMenu();
+        }}
+        ></nile-wysiwyg-insert-menu>
+        <nile-wysiwyg-math-panel
+          @wysiwyg-math-apply=${(e) => {
+            e.stopPropagation();
+            this.applyMath(e.detail.latex, e.detail.display);
+        }}
+          @wysiwyg-math-cancel=${(e) => {
+            e.stopPropagation();
+            this.closeMathPanel();
+        }}
+        ></nile-wysiwyg-math-panel>
+        <nile-wysiwyg-markdown-panel
+          @wysiwyg-markdown-apply=${(e) => {
+            e.stopPropagation();
+            this.closeMarkdownPanel();
+            this.insertMarkdown(e.detail.markdown);
+        }}
+          @wysiwyg-markdown-cancel=${(e) => {
+            e.stopPropagation();
+            this.closeMarkdownPanel();
+        }}
+        ></nile-wysiwyg-markdown-panel>
+        <nile-wysiwyg-embed-panel
+          @wysiwyg-embed-apply=${(e) => {
+            e.stopPropagation();
+            this.closeEmbedPanel();
+            this.execCommand('insertEmbed', {
+                src: e.detail.src,
+                provider: e.detail.provider,
+            });
+        }}
+          @wysiwyg-embed-cancel=${(e) => {
+            e.stopPropagation();
+            this.closeEmbedPanel();
+        }}
+        ></nile-wysiwyg-embed-panel>
+        <nile-wysiwyg-bookmark-panel
+          @wysiwyg-bookmark-apply=${(e) => {
+            e.stopPropagation();
+            this.closeBookmarkPanel();
+            this.execCommand('insertBookmark', { id: e.detail.id });
+        }}
+          @wysiwyg-bookmark-cancel=${(e) => {
+            e.stopPropagation();
+            this.closeBookmarkPanel();
+        }}
+        ></nile-wysiwyg-bookmark-panel>
+        <nile-wysiwyg-suggest-list
+          @wysiwyg-suggest-select=${(e) => {
+            e.stopPropagation();
+            this.handleSuggestSelect(e.detail.item);
+        }}
+        ></nile-wysiwyg-suggest-list>
+        <nile-wysiwyg-find-bar
+          @wysiwyg-find=${(e) => {
+            e.stopPropagation();
+            this.find(e.detail.query);
+        }}
+          @wysiwyg-find-step=${(e) => {
+            e.stopPropagation();
+            if (e.detail.direction === 'prev')
+                this.findPrev();
+            else
+                this.findNext();
+        }}
+          @wysiwyg-replace=${(e) => {
+            e.stopPropagation();
+            this.replace(e.detail.value);
+        }}
+          @wysiwyg-replace-all=${(e) => {
+            e.stopPropagation();
+            this.replaceAll(e.detail.value);
+        }}
+          @wysiwyg-find-close=${(e) => {
+            e.stopPropagation();
+            this.closeFindBar();
+        }}
+        ></nile-wysiwyg-find-bar>
+        <nile-wysiwyg-image-panel
+          ?upload-from-computer=${this.uploadFromComputer}
+          .maxFileSize=${this.imageMaxFileSize}
+          @wysiwyg-image-apply=${(e) => {
+            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) => {
+            e.stopPropagation();
+            this.closeImagePanel();
+            this.insertImageFile(e.detail.file, null, {
+                alt: e.detail.alt || null,
+                caption: e.detail.caption || null,
+            });
+        }}
+          @wysiwyg-image-remove=${(e) => {
+            e.stopPropagation();
+            this.closeImagePanel();
+            this.execCommand('deleteImage');
+        }}
+          @wysiwyg-image-cancel=${(e) => {
+            e.stopPropagation();
+            this.closeImagePanel();
+        }}
+        ></nile-wysiwyg-image-panel>
+        <nile-wysiwyg-link-editor
+          @wysiwyg-link-apply=${(e) => {
+            e.stopPropagation();
+            this.applyLink(e.detail.href, e.detail.text);
+        }}
+          @wysiwyg-link-remove=${(e) => {
+            e.stopPropagation();
+            this.execCommand('unlink');
+            this.closeLinkEditor();
+        }}
+          @wysiwyg-link-cancel=${(e) => {
+            e.stopPropagation();
+            this.closeLinkEditor();
+        }}
+        ></nile-wysiwyg-link-editor>
+      </div>
+    `;
+    }
+};
+NileWysiwygEditor.formAssociated = true;
+__decorate([
+    property({ type: String })
+], NileWysiwygEditor.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], NileWysiwygEditor.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileWysiwygEditor.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileWysiwygEditor.prototype, "readonly", void 0);
+__decorate([
+    property({ type: String })
+], NileWysiwygEditor.prototype, "toolbar", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'bubble-menu' })
+], NileWysiwygEditor.prototype, "bubbleMenu", void 0);
+__decorate([
+    property({ type: Boolean })
+], NileWysiwygEditor.prototype, "sanitize", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'singleline' })
+], NileWysiwygEditor.prototype, "singleLine", void 0);
+__decorate([
+    property({ type: String })
+], NileWysiwygEditor.prototype, "name", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileWysiwygEditor.prototype, "required", void 0);
+__decorate([
+    property({ attribute: false })
+], NileWysiwygEditor.prototype, "uploadHandler", void 0);
+__decorate([
+    property({ attribute: false })
+], NileWysiwygEditor.prototype, "allowBase64Images", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'upload-from-computer' })
+], NileWysiwygEditor.prototype, "uploadFromComputer", void 0);
+__decorate([
+    property({ type: Number, attribute: 'image-max-file-size' })
+], NileWysiwygEditor.prototype, "imageMaxFileSize", void 0);
+__decorate([
+    property({
+        attribute: 'mentions',
+        converter: {
+            fromAttribute: (value) => {
+                try {
+                    const parsed = JSON.parse(value);
+                    const out = {};
+                    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) => JSON.stringify(value),
+        },
+    })
+], NileWysiwygEditor.prototype, "mentions", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'no-slash-commands' })
+], NileWysiwygEditor.prototype, "noSlashCommands", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'no-emoji' })
+], NileWysiwygEditor.prototype, "noEmoji", void 0);
+__decorate([
+    property({ type: Number, attribute: 'maxlength' })
+], NileWysiwygEditor.prototype, "maxLength", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-counter' })
+], NileWysiwygEditor.prototype, "showCounter", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'sticky-toolbar', reflect: true })
+], NileWysiwygEditor.prototype, "stickyToolbar", void 0);
+__decorate([
+    property({
+        attribute: 'snippets',
+        converter: {
+            fromAttribute: (value) => {
+                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) => JSON.stringify(value),
+        },
+    })
+], NileWysiwygEditor.prototype, "snippets", void 0);
+__decorate([
+    property({
+        attribute: 'merge-fields',
+        converter: {
+            fromAttribute: (value) => {
+                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) => JSON.stringify(value),
+        },
+    })
+], NileWysiwygEditor.prototype, "mergeFields", void 0);
+__decorate([
+    property({
+        attribute: 'templates',
+        converter: {
+            fromAttribute: (value) => {
+                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) => JSON.stringify(value),
+        },
+    })
+], NileWysiwygEditor.prototype, "templates", void 0);
+__decorate([
+    property({ attribute: false })
+], NileWysiwygEditor.prototype, "mathRenderer", void 0);
+__decorate([
+    property({ type: Number, attribute: 'autosave-interval' })
+], NileWysiwygEditor.prototype, "autosaveInterval", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'paste-as-plain-text', reflect: true })
+], NileWysiwygEditor.prototype, "pasteAsPlainText", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'no-markdown-paste' })
+], NileWysiwygEditor.prototype, "noMarkdownPaste", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'no-text-transform' })
+], NileWysiwygEditor.prototype, "noTextTransform", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileWysiwygEditor.prototype, "fullscreen", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-blocks', reflect: true })
+], NileWysiwygEditor.prototype, "showBlocks", void 0);
+__decorate([
+    state()
+], NileWysiwygEditor.prototype, "toolbarState", void 0);
+__decorate([
+    state()
+], NileWysiwygEditor.prototype, "hasFocus", void 0);
+__decorate([
+    state()
+], NileWysiwygEditor.prototype, "sourceMode", void 0);
+__decorate([
+    state()
+], NileWysiwygEditor.prototype, "counter", void 0);
+__decorate([
+    state()
+], NileWysiwygEditor.prototype, "insertMenuMode", void 0);
+__decorate([
+    query('.nile-wysiwyg')
+], NileWysiwygEditor.prototype, "baseEl", void 0);
+__decorate([
+    query('nile-wysiwyg-toolbar')
+], NileWysiwygEditor.prototype, "toolbarEl", void 0);
+__decorate([
+    query('.nile-wysiwyg__surface')
+], NileWysiwygEditor.prototype, "surfaceEl", void 0);
+__decorate([
+    query('nile-wysiwyg-link-editor')
+], NileWysiwygEditor.prototype, "linkEditorEl", void 0);
+__decorate([
+    query('nile-wysiwyg-bubble-menu')
+], NileWysiwygEditor.prototype, "bubbleMenuEl", void 0);
+__decorate([
+    query('nile-wysiwyg-image-panel')
+], NileWysiwygEditor.prototype, "imagePanelEl", void 0);
+__decorate([
+    query('nile-wysiwyg-table-menu')
+], NileWysiwygEditor.prototype, "tableMenuEl", void 0);
+__decorate([
+    query('nile-wysiwyg-suggest-list')
+], NileWysiwygEditor.prototype, "suggestListEl", void 0);
+__decorate([
+    query('nile-wysiwyg-find-bar')
+], NileWysiwygEditor.prototype, "findBarEl", void 0);
+__decorate([
+    query('nile-wysiwyg-source-view')
+], NileWysiwygEditor.prototype, "sourceViewEl", void 0);
+__decorate([
+    query('nile-wysiwyg-embed-panel')
+], NileWysiwygEditor.prototype, "embedPanelEl", void 0);
+__decorate([
+    query('nile-wysiwyg-bookmark-panel')
+], NileWysiwygEditor.prototype, "bookmarkPanelEl", void 0);
+__decorate([
+    query('nile-wysiwyg-code-menu')
+], NileWysiwygEditor.prototype, "codeMenuEl", void 0);
+__decorate([
+    query('nile-wysiwyg-shortcut-help')
+], NileWysiwygEditor.prototype, "shortcutHelpEl", void 0);
+__decorate([
+    query('nile-wysiwyg-image-menu')
+], NileWysiwygEditor.prototype, "imageMenuEl", void 0);
+__decorate([
+    query('nile-wysiwyg-embed-menu')
+], NileWysiwygEditor.prototype, "embedMenuEl", void 0);
+__decorate([
+    query('nile-wysiwyg-special-chars')
+], NileWysiwygEditor.prototype, "specialCharsEl", void 0);
+__decorate([
+    query('nile-wysiwyg-emoji-picker')
+], NileWysiwygEditor.prototype, "emojiPickerEl", void 0);
+__decorate([
+    query('nile-wysiwyg-insert-menu')
+], NileWysiwygEditor.prototype, "insertMenuEl", void 0);
+__decorate([
+    query('nile-wysiwyg-math-panel')
+], NileWysiwygEditor.prototype, "mathPanelEl", void 0);
+__decorate([
+    query('nile-wysiwyg-markdown-panel')
+], NileWysiwygEditor.prototype, "markdownPanelEl", void 0);
+NileWysiwygEditor = __decorate([
+    customElement('nile-wysiwyg-editor')
+], NileWysiwygEditor);
+export { NileWysiwygEditor };
+export default NileWysiwygEditor;
+//# sourceMappingURL=nile-wysiwyg-editor.js.map