@nldd/design-system 0.8.63 → 0.8.65

package/dist/components/inputs/text-editor/text-editor.js

@@ -0,0 +1,782 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * Nederlandse Digitale Dienst Text Editor Component (Lit + TypeScript)
+ *
+ * A hybrid markdown editor built on CodeMirror 6 (via NLDDCodeMirrorElement):
+ * the document stays plain markdown text, but formatting is shown inline (bold
+ * is bold, headings are larger, links are coloured) while the syntax markers
+ * stay visible, only dimmed — the iA Writer / Kirby approach. No WYSIWYG tree,
+ * so the data stays portable.
+ *
+ * Default `variant="simple"` is bare (no frame, no focus ring) for use inside
+ * a composition (e.g. a message field) that owns its chrome and focus; the
+ * caret is a prominent accent. `variant="input-field"` adds a framed surface + focus
+ * ring. `font` is `sans` (default, best for prose) or `mono`.
+ *
+ * Headless: there is no built-in toolbar. A consumer drives formatting via the
+ * command methods (toggleBold/toggleItalic/toggleInlineCode/toggleStrikethrough/
+ * toggleHeading/toggleBulletList/toggleQuote/toggleLink/runCommand to toggle, and
+ * setHeading/setList for picker-style "set" semantics), reads the active formats
+ * with getState(), listens to the nldd-text-editor-state event to render toggle
+ * states, and forwards padding clicks with focusFromPoint(). Cmd/Ctrl+B/I/E/K are
+ * bound out of the box. Commands keep focus on the editor. An @-mention typeahead
+ * (mentionSource) collapses to an atomic token, and a W3C-style annotation overlay
+ * (annotations) marks ranges with a dashed underline, light tint and a count badge
+ * without touching the underlying text.
+ *
+ * @element nldd-text-editor
+ *
+ * @attr {string} value            - Editor content (markdown)
+ * @attr {string} placeholder      - Placeholder text shown while empty
+ * @attr {string} input-id         - Sets the id on the editable element. Set automatically by nldd-form-field.
+ * @attr {boolean} disabled        - Disabled state
+ * @attr {string} name             - Field name for form submission
+ * @attr {boolean} readonly        - Readonly state (focusable and selectable, not editable)
+ * @attr {boolean} required        - Required state
+ * @attr {boolean} wrap            - Wrap long lines (default true; prose wraps)
+ * @attr {number} rows             - Minimum visible rows (the floor in every resize mode). Default: 6.
+ * @attr {string} resize           - 'none' (fixed) | 'vertical' (drag) | 'auto' (grow, default)
+ * @attr {string} variant          - 'simple' (default, bare) | 'input-field' (framed surface)
+ * @attr {string} font             - 'sans' (default) | 'mono'
+ * @attr {string} accessible-label - Accessible label forwarded to the editor. Set automatically by nldd-form-field.
+ *
+ * @prop {MentionSource} mentionSource - Consumer-supplied @-mention candidate source (property only). Without it, @-typeahead is inert.
+ * @attr {boolean} annotatable - Enable the annotation overlay (off by default). Annotations only render when this is set.
+ * @prop {Annotation[]} annotations - Consumer-supplied annotation overlay (property only). Anchored by offset and mapped through edits; the text stays clean. Requires `annotatable`. Assign a NEW array to apply changes (Lit dirty-checks by identity, so in-place mutation like `.push()` won't re-render): `editor.annotations = [...editor.annotations, next]`.
+ * @attr {object} translations - Override the editor's assistive-tech strings (the open-in-new-tab link badge and the annotation count badge). Unset keys fall back to Dutch.
+ *
+ * @fires input                    - When the content changes (detail: { value })
+ * @fires change                   - When the content is committed on blur (detail: { value })
+ * @fires nldd-text-editor-state   - When the selection or content changes (detail: TextEditorState), for toolbar toggle state
+ * @fires nldd-text-editor-mention - When an @-mention is inserted (detail: MentionInsertedDetail with id, label, from, to)
+ * @fires nldd-text-editor-annotation-click - When an annotation's count badge is clicked (detail: { ids: string[], rect: DOMRect }); rect is the badge's viewport box so a consumer can anchor its own note UI to it
+ */
+import { LitElement } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { reflectNonDefault } from '../../../utilities/reflect-non-default.js';
+import { EditorView, keymap, drawSelection, dropCursor, placeholder as cmPlaceholder, } from '@codemirror/view';
+import { Compartment, EditorState, Prec, Transaction } from '@codemirror/state';
+import { defaultKeymap, history, historyKeymap, indentLess, undo as cmUndo, redo as cmRedo, undoDepth, redoDepth } from '@codemirror/commands';
+import { NLDDCodeMirrorElement } from '../../../utilities/codemirror/codemirror-element.js';
+import { nlddCodeMirrorTheme } from '../../../utilities/codemirror/theme.js';
+import { markdownEditing, mentionRangeAt, mentionRangeEndingAt, mentionRangeStartingAt } from './text-editor.markdown.js';
+import { mentions } from './text-editor.mentions.js';
+import { annotations as annotationExtension, setAnnotations, pasteAnnotations, currentAnnotations } from './text-editor.annotations.js';
+import { orderedListRenumber } from './text-editor.ordered-list.js';
+import { dragToMove, dragMovePlugin } from './text-editor.drag.js';
+import { linkOpenBadge } from './text-editor.links.js';
+import { toggleInlineWrap, indentListItems as cmIndentListItems, canIndentListItem as cmCanIndent, canOutdentListItem as cmCanOutdent, toggleHeading as cmToggleHeading, setHeading as cmSetHeading, toggleBulletList as cmToggleBulletList, setList as cmSetList, toggleQuote as cmToggleQuote, toggleLink as cmToggleLink, toggleCodeBlock as cmToggleCodeBlock, clearListMarkerBackward, readActiveFormats, EMPTY_FORMATS, } from './text-editor.commands.js';
+import { textEditorStyles } from './text-editor.styles.js';
+import { textEditorTemplate } from './text-editor.template.js';
+import { stripSentinels, docToClean } from './text-editor.annotation-sentinels.js';
+import { nlddTextEditorTranslations } from './text-editor.i18n.js';
+let NLDDTextEditor = class NLDDTextEditor extends NLDDCodeMirrorElement {
+    constructor() {
+        super(...arguments);
+        this._internals = this.attachInternals();
+        this._initialValue = '';
+        this._valueAtFocus = '';
+        this._accessibleLabelWarned = false;
+        this.value = '';
+        this.inputId = '';
+        this.placeholder = '';
+        this.disabled = false;
+        this.name = '';
+        this.readonly = false;
+        this.required = false;
+        this.wrap = true;
+        this.rows = 6;
+        this.resize = 'auto';
+        this.variant = 'simple';
+        this.font = 'sans';
+        this.accessibleLabel = '';
+        /** Whether the annotation overlay is enabled. Off by default; set the
+         *  `annotatable` attribute to turn it on (so the comment affordance and the
+         *  overlay only appear when the consumer opts in). */
+        this.annotatable = false;
+        /** Consumer-supplied annotations (W3C-style overlay). Property only (set via
+         *  JS). Render only when `annotatable` is on. The text stays clean; these
+         *  render as a light tint and a count badge, anchored by offset and mapped
+         *  through edits.
+         *
+         *  IMPORTANT: assign a NEW array to apply changes. Lit dirty-checks this
+         *  property by identity, so mutating the existing array in place
+         *  (`editor.annotations.push(next)`, `editor.annotations[0].end = 9`, …) does
+         *  NOT trigger a re-render. Always replace it:
+         *  `editor.annotations = [...editor.annotations, next]`. */
+        this.annotations = [];
+        /** Override translation keys for the editor's assistive-tech strings (the
+         *  open-in-new-tab link badge and the annotation count badge). Unset keys fall
+         *  back to Dutch. */
+        this.translations = {};
+        this._editableCompartment = new Compartment();
+        this._wrapCompartment = new Compartment();
+        this._placeholderCompartment = new Compartment();
+        this._attrsCompartment = new Compartment();
+        this._historyCompartment = new Compartment();
+        /** Text and annotations of the last cut, so a same-editor paste can move the
+         *  annotations along with their text. Cleared by copy and by a matching paste. */
+        this._cutBuffer = null;
+        /* # Internals */
+        this._onScrollerPointerDown = (event) => {
+            if (event.target !== this.view?.scrollDOM)
+                return;
+            // No caret to move on a read-only/disabled view — leave the press alone, like
+            // the drag path (which early-returns on state.readOnly).
+            if (this.view.state.readOnly)
+                return;
+            this.focusFromPoint(event.clientX, event.clientY);
+            event.preventDefault();
+        };
+        this._onMentionPointerDown = (event) => {
+            const token = event.target?.closest?.('.cm-md-mention-token');
+            if (!token || !this.view)
+                return;
+            // Don't dispatch a selection on a read-only/disabled view — matches the drag
+            // path, which guards its selection change on state.readOnly.
+            if (this.view.state.readOnly)
+                return;
+            const range = mentionRangeAt(this.view.state, this.view.posAtDOM(token));
+            if (!range)
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            this.view.dispatch({ selection: { anchor: range.from, head: range.to } });
+            this.view.focus();
+            // Hand off to the drag machinery: a plain release keeps the mention selected,
+            // dragging past the threshold moves the whole token. Left button, no modifiers.
+            if (event.button === 0 && !event.shiftKey && !event.altKey && !event.metaKey && !event.ctrlKey) {
+                this.view.plugin(dragMovePlugin)?.startFor(event, range.from, range.to);
+            }
+        };
+        /** A click on an annotation's count badge emits nldd-text-editor-annotation-click
+         *  with the id(s) it covers (a merged badge carries several) and the badge's
+         *  viewport rect, so the consumer can anchor its own note UI to the badge. The
+         *  tinted text stays plain-clickable for caret placement. */
+        this._onAnnotationBadgeClick = (event) => {
+            const badge = event.target?.closest?.('.cm-annotation-badge');
+            if (!badge)
+                return;
+            const ids = (badge.dataset.annotations ?? '').split(' ').filter(Boolean);
+            if (!ids.length)
+                return;
+            event.preventDefault();
+            this.dispatchEvent(new CustomEvent('nldd-text-editor-annotation-click', {
+                detail: { ids, rect: badge.getBoundingClientRect() },
+                bubbles: true,
+                composed: true,
+            }));
+        };
+    }
+    getEditorParent() {
+        return this._container;
+    }
+    /** Resolve a translation key, applying `{name}` placeholder substitution from
+     *  `vars`. Consumer overrides via `translations` win; unset keys fall back to the
+     *  Dutch defaults. */
+    _t(key, vars) {
+        let str = this.translations[key] ?? nlddTextEditorTranslations[key];
+        if (vars) {
+            for (const [k, v] of Object.entries(vars)) {
+                str = str.split(`{${k}}`).join(String(v));
+            }
+        }
+        return str;
+    }
+    buildExtensions() {
+        return [
+            nlddCodeMirrorTheme,
+            markdownEditing,
+            mentions(() => this.mentionSource, (detail) => this._emitMention(detail)),
+            // Prec.low so this transaction filter runs *before* the annotation filter
+            // (filters run low-precedence first), letting the annotation map through the
+            // renumber changes too — otherwise a marker growing from 1 to 11 drifts a
+            // token on that line.
+            Prec.low(orderedListRenumber),
+            // The label fns read `this._t` lazily, so a newly rendered badge always uses
+            // the current `translations`; overriding them before mount localizes the
+            // assistive-tech strings.
+            annotationExtension((count, quote) => this._t('components.text-editor.annotation-count-label', {
+                count,
+                noun: this._t(count === 1
+                    ? 'components.text-editor.annotation-singular-lowercase'
+                    : 'components.text-editor.annotation-plural-lowercase'),
+                quote,
+            })),
+            // Prec.highest so the badge nests inside a heading/bold run and scales with
+            // it, like the mention and annotation, instead of staying at the base size.
+            Prec.highest(linkOpenBadge((url) => this._t('components.text-editor.open-in-new-tab-label', { url }))),
+            this._historyCompartment.of(history()),
+            drawSelection(),
+            dropCursor(),
+            dragToMove,
+            // Prec.highest so this beats the markdown language's deleteMarkupBackward,
+            // which would otherwise leave alignment whitespace when a non-first list
+            // marker is backspaced. Falls through (returns false) off a list marker.
+            Prec.highest(keymap.of([{ key: 'Backspace', run: clearListMarkerBackward }])),
+            keymap.of([
+                { key: 'Mod-b', run: (view) => { toggleInlineWrap(view, '**', 'StrongEmphasis'); return true; } },
+                { key: 'Mod-i', run: (view) => { toggleInlineWrap(view, '*', 'Emphasis'); return true; } },
+                { key: 'Mod-e', run: (view) => { toggleInlineWrap(view, '`', 'InlineCode'); return true; } },
+                { key: 'Mod-k', run: (view) => { cmToggleLink(view); return true; } },
+                // A mention deletes in two steps: the first Backspace/Delete next to it
+                // selects the whole token, the second removes it.
+                { key: 'Backspace', run: (view) => this._selectMentionBeforeDelete(view, -1) },
+                { key: 'Delete', run: (view) => this._selectMentionBeforeDelete(view, 1) },
+                ...defaultKeymap,
+                ...historyKeymap,
+            ]),
+            this._placeholderCompartment.of(this._placeholderExtension()),
+            this._wrapCompartment.of(this.wrap ? EditorView.lineWrapping : []),
+            this._editableCompartment.of(this._editableExtension()),
+            this._attrsCompartment.of(this._attrsExtension()),
+            EditorView.updateListener.of((u) => {
+                if (u.docChanged)
+                    this._onDocChanged();
+                if (u.docChanged || u.selectionSet)
+                    this._emitState();
+            }),
+            EditorView.domEventHandlers({
+                focus: () => {
+                    this._valueAtFocus = this.value;
+                },
+                blur: () => {
+                    if (this.value !== this._valueAtFocus)
+                        this._emitChange();
+                },
+                // Triple-click selects the whole paragraph (the doc line), like macOS.
+                // CM's own triple-click stops at the visual line, which under wrapping is
+                // just one wrapped row.
+                mousedown: (event, view) => {
+                    if (event.detail < 3)
+                        return false;
+                    const pos = view.posAtCoords({ x: event.clientX, y: event.clientY });
+                    if (pos === null)
+                        return false;
+                    const line = view.state.doc.lineAt(pos);
+                    view.dispatch({ selection: { anchor: line.from, head: line.to } });
+                    event.preventDefault();
+                    return true;
+                },
+                // Native Cmd/Ctrl+X/C/V go through these DOM events, not the toolbar's
+                // methods, so mirror the annotation-carrying logic here too.
+                cut: (_event, view) => {
+                    const { from, to } = view.state.selection.main;
+                    this._cutBuffer = from === to
+                        ? null
+                        : { text: stripSentinels(view.state.sliceDoc(from, to)), anns: this._annotationsInSelection() };
+                    return false; // let CodeMirror perform the actual cut (clipboard + delete)
+                },
+                copy: () => {
+                    this._cutBuffer = null; // a plain copy must not carry a pending cut's annotations
+                    return false;
+                },
+                paste: (event) => {
+                    const raw = event.clipboardData?.getData('text/plain');
+                    if (raw === undefined)
+                        return false; // no clipboard data — let CodeMirror handle it
+                    this._pasteText(stripSentinels(raw));
+                    event.preventDefault();
+                    return true;
+                },
+            }),
+        ];
+    }
+    _editableExtension() {
+        const editable = !this.disabled;
+        const readOnly = this.disabled || this.readonly;
+        return [EditorView.editable.of(editable), EditorState.readOnly.of(readOnly)];
+    }
+    _placeholderExtension() {
+        return this.placeholder ? cmPlaceholder(this.placeholder) : [];
+    }
+    _attrsExtension() {
+        const attrs = {};
+        if (this.accessibleLabel)
+            attrs['aria-label'] = this.accessibleLabel;
+        if (this.inputId)
+            attrs['id'] = this.inputId;
+        return EditorView.contentAttributes.of(attrs);
+    }
+    firstUpdated() {
+        this._initialValue = this.value;
+        this.style.setProperty('--_rows', String(this.rows));
+        this.mountEditor(this.value);
+        this.onEditorMounted();
+    }
+    /* Runs on the initial mount and on every re-mount after a detach/reattach
+     * (e.g. Vue <KeepAlive>): the view — with its scroller and content DOM — is
+     * rebuilt, so the click forwarders and annotation state must be (re)applied. */
+    onEditorMounted() {
+        // A press on the scroller's own padding (outside .cm-content) doesn't
+        // place a caret; forward it to the nearest line.
+        this.view?.scrollDOM.addEventListener('pointerdown', this._onScrollerPointerDown);
+        // Clicking a mention selects the whole token (capture, to beat CM's own
+        // caret placement).
+        this.view?.contentDOM.addEventListener('pointerdown', this._onMentionPointerDown, true);
+        // Clicking an annotation's count badge opens it (the consumer decides how);
+        // the tinted text itself stays plain-clickable for caret placement.
+        this.view?.contentDOM.addEventListener('click', this._onAnnotationBadgeClick);
+        this._syncAnnotations();
+        this._internals.setFormValue(this.doc);
+        this._checkAccessibleLabel();
+        // Emit one state snapshot on mount so a consumer's toolbar initialises to the
+        // real state (e.g. undo/redo disabled with no history yet) instead of its
+        // default, without waiting for the first edit or selection change.
+        this._emitState();
+    }
+    updated(changed) {
+        if (changed.has('rows')) {
+            this.style.setProperty('--_rows', String(this.rows));
+        }
+        if (this.view) {
+            if (changed.has('value')) {
+                // Only push an external value change into the document; a value that just
+                // mirrors the current (sentinel-stripped) doc must not trigger a rewrite,
+                // which would strip the sentinels the filter then re-adds (caret churn).
+                if (stripSentinels(this.doc) !== this.value)
+                    this.setDoc(this.value);
+                this._internals.setFormValue(this.value);
+            }
+            if (changed.has('disabled') || changed.has('readonly')) {
+                this.reconfigure(this._editableCompartment, this._editableExtension());
+            }
+            if (changed.has('wrap')) {
+                this.reconfigure(this._wrapCompartment, this.wrap ? EditorView.lineWrapping : []);
+            }
+            if (changed.has('placeholder')) {
+                this.reconfigure(this._placeholderCompartment, this._placeholderExtension());
+            }
+            if (changed.has('accessibleLabel') || changed.has('inputId')) {
+                this.reconfigure(this._attrsCompartment, this._attrsExtension());
+            }
+            if (changed.has('annotations') || changed.has('annotatable')) {
+                this._syncAnnotations();
+            }
+        }
+        this._checkAccessibleLabel();
+    }
+    _syncAnnotations() {
+        // Annotations only render when the consumer opts in via `annotatable`.
+        // addToHistory:false keeps this consumer-driven re-anchoring (and the sentinel
+        // changes the filter appends) out of the text-edit undo stack — otherwise the
+        // first undo after load would strip the annotations instead of a real edit.
+        this.view?.dispatch({
+            effects: setAnnotations.of(this.annotatable ? this.annotations : []),
+            annotations: Transaction.addToHistory.of(false),
+        });
+    }
+    // Two-step mention deletion: select the token on the first key, remove on the
+    // second. dir -1 = Backspace (token ends at the caret), +1 = Delete (starts).
+    _selectMentionBeforeDelete(view, dir) {
+        const sel = view.state.selection.main;
+        // A non-empty selection (e.g. an already-selected mention) → let the default
+        // command delete it.
+        if (!sel.empty)
+            return false;
+        const range = dir < 0 ? mentionRangeEndingAt(view.state, sel.head) : mentionRangeStartingAt(view.state, sel.head);
+        if (!range)
+            return false; // not next to a mention → normal backspace/delete
+        view.dispatch({ selection: { anchor: range.from, head: range.to } });
+        return true;
+    }
+    /* # Headless command API */
+    toggleBold() {
+        if (this.view)
+            toggleInlineWrap(this.view, '**', 'StrongEmphasis');
+    }
+    toggleItalic() {
+        if (this.view)
+            toggleInlineWrap(this.view, '*', 'Emphasis');
+    }
+    toggleInlineCode() {
+        if (this.view)
+            toggleInlineWrap(this.view, '`', 'InlineCode');
+    }
+    toggleStrikethrough() {
+        if (this.view)
+            toggleInlineWrap(this.view, '~~', 'Strikethrough');
+    }
+    toggleHeading(level) {
+        if (this.view)
+            cmToggleHeading(this.view, level);
+    }
+    /** Set the block to a heading level (0 = paragraph) without toggling — for a
+     *  picker where choosing a level always applies it. */
+    setHeading(level) {
+        if (this.view)
+            cmSetHeading(this.view, level);
+    }
+    toggleBulletList() {
+        if (this.view)
+            cmToggleBulletList(this.view);
+    }
+    /** Set the list type, replacing any existing list ('none' strips it) — for an
+     *  exclusive list picker. */
+    setList(type) {
+        if (this.view)
+            cmSetList(this.view, type);
+    }
+    toggleQuote() {
+        if (this.view)
+            cmToggleQuote(this.view);
+    }
+    toggleLink(href = '') {
+        if (this.view)
+            cmToggleLink(this.view, href);
+    }
+    toggleCodeBlock() {
+        if (this.view)
+            cmToggleCodeBlock(this.view);
+    }
+    /** Nest the selected list item(s) under the preceding item at the same level.
+     *  Only list items move, and only as far as that parent's content column — so a
+     *  first or standalone item can't be over-indented into an indented code block. */
+    indent() {
+        if (this.view)
+            cmIndentListItems(this.view);
+    }
+    /** Decrease the leading indentation of the selected lines. */
+    outdent() {
+        if (this.view) {
+            indentLess(this.view);
+            this.view.focus();
+        }
+    }
+    /** Undo the last change. History is built in, so Cmd/Ctrl+Z works too. */
+    undo() {
+        if (this.view) {
+            cmUndo(this.view);
+            this.view.focus();
+        }
+    }
+    /** Redo the last undone change (Cmd/Ctrl+Shift+Z / Ctrl+Y also work). */
+    redo() {
+        if (this.view) {
+            cmRedo(this.view);
+            this.view.focus();
+        }
+    }
+    /** Drop the undo/redo history, leaving the document untouched. Use after a
+     *  consumer-driven discard so a later undo can't step back into the
+     *  thrown-away edits. Reconfiguring the history compartment off and back on
+     *  re-initialises it with empty stacks. */
+    clearHistory() {
+        const view = this.view;
+        if (!view)
+            return;
+        view.dispatch({ effects: this._historyCompartment.reconfigure([]) });
+        view.dispatch({ effects: this._historyCompartment.reconfigure(history()) });
+        this._emitState();
+    }
+    /** The annotations lying fully inside the current selection, offset relative to
+     *  the selection's clean start. */
+    _annotationsInSelection() {
+        if (!this.view)
+            return [];
+        const { from, to } = this.view.state.selection.main;
+        const doc = this.view.state.doc.toString();
+        const cleanFrom = docToClean(doc, from);
+        const cleanTo = docToClean(doc, to);
+        return currentAnnotations(this.view.state)
+            .filter((a) => a.from >= cleanFrom && a.to <= cleanTo)
+            .map((a) => ({ id: a.id, from: a.from - cleanFrom, to: a.to - cleanFrom }));
+    }
+    /** Copy the current selection to the clipboard, sentinel-free. No-op when the
+     *  selection is empty or the clipboard is unavailable (e.g. permission denied). */
+    async copy() {
+        if (!this.view)
+            return;
+        const { from, to } = this.view.state.selection.main;
+        if (from === to)
+            return;
+        const text = stripSentinels(this.view.state.sliceDoc(from, to));
+        // A copy is a plain-text copy: forget any pending cut so its annotations don't
+        // bleed onto the next paste.
+        this._cutBuffer = null;
+        try {
+            await navigator.clipboard.writeText(text);
+        }
+        catch { /* clipboard blocked */ }
+        // The await can outlive the element (disconnect destroys the view), so guard.
+        this.view?.focus();
+    }
+    /** Cut the current selection to the clipboard and remove it from the document.
+     *  Its annotations are remembered so a paste back into this editor moves them
+     *  along. No-op when the selection is empty. */
+    async cut() {
+        // Cut mutates (it removes the selection), so it's a no-op on a read-only editor.
+        if (!this.view || this.view.state.readOnly)
+            return;
+        const { from, to } = this.view.state.selection.main;
+        if (from === to)
+            return;
+        const text = stripSentinels(this.view.state.sliceDoc(from, to));
+        this._cutBuffer = { text, anns: this._annotationsInSelection() };
+        try {
+            await navigator.clipboard.writeText(text);
+        }
+        catch { /* clipboard blocked */ }
+        if (!this.view)
+            return;
+        this.view.dispatch(this.view.state.replaceSelection(''));
+        this.view.focus();
+    }
+    /** Paste clipboard text at the caret, replacing any selection. Sentinels that
+     *  rode in from another editor are stripped. When the text matches a cut made in
+     *  this editor, its annotations travel with it (a move); otherwise it's plain
+     *  text. No-op when the clipboard is empty or unreadable. */
+    async paste() {
+        if (!this.view)
+            return;
+        let raw = '';
+        try {
+            raw = await navigator.clipboard.readText();
+        }
+        catch {
+            return; /* clipboard blocked */
+        }
+        this._pasteText(stripSentinels(raw));
+        this.view?.focus();
+    }
+    /** Insert `text` at the selection, re-attaching the cut annotations when it matches
+     *  a cut made in this editor (a move, one-shot). Shared by the toolbar's paste()
+     *  and the native Cmd/Ctrl+V handler. */
+    _pasteText(text) {
+        // Paste mutates; refuse it on a read-only editor (covers the toolbar paste()
+        // and the native Cmd/Ctrl+V handler that both funnel through here).
+        if (!this.view || !text || this.view.state.readOnly)
+            return;
+        const buffer = this._cutBuffer;
+        // Normalize line endings on both sides: a Windows/other-app clipboard may hand
+        // back CRLF where the cut buffer holds LF, and an exact compare would then miss
+        // the match and silently drop the carried annotations.
+        const sameText = (a, b) => a.replace(/\r\n/g, '\n') === b.replace(/\r\n/g, '\n');
+        const carry = !!(buffer && sameText(buffer.text, text) && buffer.anns.length > 0);
+        const at = docToClean(this.view.state.doc.toString(), this.view.state.selection.main.from);
+        const spec = this.view.state.replaceSelection(text);
+        this.view.dispatch(carry ? { ...spec, effects: pasteAnnotations.of({ at, anns: buffer.anns }) } : spec);
+        // One-shot: a second paste of the same cut would duplicate the ids, so drop it.
+        if (carry)
+            this._cutBuffer = null;
+    }
+    /** Escape hatch: run a command by name (bold, italic, inlineCode,
+     *  strikethrough, bulletList, quote, heading [payload: level], link
+     *  [payload: href], copy, cut, paste). */
+    runCommand(name, payload) {
+        switch (name) {
+            case 'bold':
+                this.toggleBold();
+                break;
+            case 'italic':
+                this.toggleItalic();
+                break;
+            case 'inlineCode':
+                this.toggleInlineCode();
+                break;
+            case 'strikethrough':
+                this.toggleStrikethrough();
+                break;
+            case 'bulletList':
+                this.toggleBulletList();
+                break;
+            case 'quote':
+                this.toggleQuote();
+                break;
+            case 'heading':
+                this.toggleHeading((typeof payload === 'number' ? payload : 1));
+                break;
+            case 'link':
+                this.toggleLink(typeof payload === 'string' ? payload : '');
+                break;
+            case 'copy':
+                void this.copy();
+                break;
+            case 'cut':
+                void this.cut();
+                break;
+            case 'paste':
+                void this.paste();
+                break;
+        }
+    }
+    /** The formats active at the current selection (drives a toolbar's state). */
+    getState() {
+        return {
+            active: this.view ? readActiveFormats(this.view) : { ...EMPTY_FORMATS },
+            empty: this.view ? this.view.state.selection.main.empty : true,
+            canIndent: this.view ? cmCanIndent(this.view) : false,
+            canOutdent: this.view ? cmCanOutdent(this.view) : false,
+            canUndo: this.view ? undoDepth(this.view.state) > 0 : false,
+            canRedo: this.view ? redoDepth(this.view.state) > 0 : false,
+        };
+    }
+    /** The current selection in CLEAN (annotation-sentinel-free) coordinates plus
+     *  the quoted text — the anchor a consumer needs to attach a new annotation to
+     *  the selection (e.g. from a toolbar "comment" button). `empty` mirrors
+     *  getState().empty for gating that button.
+     *
+     *  `rect` is the selection's bounding box in viewport coordinates (or the
+     *  caret box when empty), so a consumer can anchor a popover to the selected
+     *  text itself instead of to its own button. Use it as a Floating UI virtual
+     *  anchor: `{ getBoundingClientRect: () => rect, contextElement: editorEl }`.
+     *  It is computed from CodeMirror's layout, so it is correct even when the
+     *  editor is not focused (clicking a toolbar button blurs the editor but the
+     *  selection state survives). `null` when there is no view or the selection
+     *  is scrolled out of sight. */
+    getSelection() {
+        const view = this.view;
+        if (!view)
+            return { start: 0, end: 0, quote: '', empty: true, rect: null };
+        const doc = view.state.doc.toString();
+        const sel = view.state.selection.main;
+        const start = docToClean(doc, sel.from);
+        const end = docToClean(doc, sel.to);
+        const a = view.coordsAtPos(sel.from);
+        const b = view.coordsAtPos(sel.to);
+        const rect = a && b
+            ? new DOMRect(Math.min(a.left, b.left), Math.min(a.top, b.top), Math.max(a.right, b.right) - Math.min(a.left, b.left), Math.max(a.bottom, b.bottom) - Math.min(a.top, b.top))
+            : null;
+        return { start, end, quote: stripSentinels(doc).slice(start, end), empty: sel.empty, rect };
+    }
+    /** The annotations currently in the editor, in CLEAN coordinates, each quote
+     *  re-sliced from the current text — so a consumer can persist positions that
+     *  moved with edits (read this on save, then write the anchors back). */
+    getAnnotations() {
+        const view = this.view;
+        if (!view)
+            return [];
+        const clean = stripSentinels(view.state.doc.toString());
+        return currentAnnotations(view.state).map((a) => ({
+            id: a.id,
+            start: a.from,
+            end: a.to,
+            quote: clean.slice(a.from, a.to),
+        }));
+    }
+    _emitState() {
+        this.dispatchEvent(new CustomEvent('nldd-text-editor-state', {
+            detail: this.getState(),
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    _emitMention(detail) {
+        this.dispatchEvent(new CustomEvent('nldd-text-editor-mention', {
+            detail,
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    _onDocChanged() {
+        // The document carries annotation sentinels; the exposed value never does.
+        const text = stripSentinels(this.doc);
+        if (text === this.value)
+            return;
+        this.value = text;
+        this._internals.setFormValue(text);
+        this.dispatchEvent(new CustomEvent('input', {
+            detail: { value: text },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    _emitChange() {
+        this.dispatchEvent(new CustomEvent('change', {
+            detail: { value: this.value },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    _checkAccessibleLabel() {
+        if (this._accessibleLabelWarned)
+            return;
+        if (this.accessibleLabel || this.inputId)
+            return;
+        this._accessibleLabelWarned = true;
+        console.warn('<nldd-text-editor>: No accessible-label or input-id provided. Use nldd-form-field for labeled usage, or set accessible-label for screen reader accessibility (WCAG SC 4.1.2).');
+    }
+    formResetCallback() {
+        this.value = this._initialValue;
+    }
+    formDisabledCallback(disabled) {
+        this.disabled = disabled;
+    }
+    formStateRestoreCallback(state) {
+        if (typeof state === 'string')
+            this.value = state;
+    }
+    render() {
+        return textEditorTemplate(this);
+    }
+};
+NLDDTextEditor.formAssociated = true;
+NLDDTextEditor.shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+};
+NLDDTextEditor.styles = textEditorStyles;
+__decorate([
+    property({ type: String })
+], NLDDTextEditor.prototype, "value", void 0);
+__decorate([
+    property({ type: String, attribute: 'input-id' })
+], NLDDTextEditor.prototype, "inputId", void 0);
+__decorate([
+    property({ reflect: true, converter: reflectNonDefault('') })
+], NLDDTextEditor.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NLDDTextEditor.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDTextEditor.prototype, "name", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NLDDTextEditor.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NLDDTextEditor.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NLDDTextEditor.prototype, "wrap", void 0);
+__decorate([
+    property({ type: Number })
+], NLDDTextEditor.prototype, "rows", void 0);
+__decorate([
+    property({ reflect: true, converter: reflectNonDefault('auto') })
+], NLDDTextEditor.prototype, "resize", void 0);
+__decorate([
+    property({ reflect: true, converter: reflectNonDefault('simple') })
+], NLDDTextEditor.prototype, "variant", void 0);
+__decorate([
+    property({ reflect: true, converter: reflectNonDefault('sans') })
+], NLDDTextEditor.prototype, "font", void 0);
+__decorate([
+    property({ type: String, attribute: 'accessible-label' })
+], NLDDTextEditor.prototype, "accessibleLabel", void 0);
+__decorate([
+    property({ attribute: false })
+], NLDDTextEditor.prototype, "mentionSource", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NLDDTextEditor.prototype, "annotatable", void 0);
+__decorate([
+    property({ attribute: false })
+], NLDDTextEditor.prototype, "annotations", void 0);
+__decorate([
+    property({ type: Object })
+], NLDDTextEditor.prototype, "translations", void 0);
+__decorate([
+    query('.text-editor')
+], NLDDTextEditor.prototype, "_container", void 0);
+NLDDTextEditor = __decorate([
+    customElement('nldd-text-editor')
+], NLDDTextEditor);
+export { NLDDTextEditor };
+//# sourceMappingURL=text-editor.js.map