@xui/rich-text-editor 2.0.0-alpha.11

package/fesm2022/xui-rich-text-editor.mjs

@@ -0,0 +1,1082 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, forwardRef, viewChild, input, model, booleanAttribute, signal, computed, effect, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { provideIcons, NgIcon } from '@ng-icons/core';
+import { matTerminalRound, matLinkRound, matHorizontalRuleRound, matFormatUnderlinedRound, matFormatStrikethroughRound, matFormatQuoteRound, matFormatListNumberedRound, matFormatListBulletedRound, matFormatItalicRound, matFormatBoldRound, matCodeRound } from '@ng-icons/material-icons/round';
+import { xui } from '@xui/core';
+import { XuiIcon } from '@xui/icon';
+
+const MARK_TAGS = {
+    STRONG: 'bold',
+    B: 'bold',
+    EM: 'italic',
+    I: 'italic',
+    U: 'underline',
+    S: 'strike',
+    STRIKE: 'strike',
+    DEL: 'strike',
+    CODE: 'code',
+    A: 'link'
+};
+/**
+ * Walks the editor's HTML and hands each piece to `writer`.
+ *
+ * Shared by every syntax so they only describe *what* their markup looks like,
+ * never how to traverse a DOM — and so a new syntax cannot get the traversal
+ * subtly wrong.
+ */
+function serializeHtml(root, writer) {
+    const blocks = [];
+    for (const node of Array.from(root.childNodes)) {
+        const block = serializeBlock(node, writer);
+        if (block !== null) {
+            blocks.push(block);
+        }
+    }
+    return blocks.filter(block => block !== '').join('\n\n');
+}
+function serializeBlock(node, writer) {
+    if (node.nodeType === Node.TEXT_NODE) {
+        const text = node.textContent ?? '';
+        // Loose text between blocks — browsers leave it there after some edits.
+        return text.trim() ? writer.block('paragraph', writer.escape(text)) : null;
+    }
+    if (!(node instanceof Element)) {
+        return null;
+    }
+    switch (node.tagName) {
+        case 'H1':
+            return writer.block('heading1', serializeInline(node, writer));
+        case 'H2':
+            return writer.block('heading2', serializeInline(node, writer));
+        case 'H3':
+            return writer.block('heading3', serializeInline(node, writer));
+        case 'BLOCKQUOTE':
+            return writer.block('quote', quoteContent(node, writer));
+        case 'PRE':
+            return writer.codeBlock(node.textContent ?? '');
+        case 'HR':
+            return writer.rule();
+        case 'UL':
+        case 'OL':
+            return writer.list(Array.from(node.children)
+                .filter(child => child.tagName === 'LI')
+                .map(item => serializeInline(item, writer)), node.tagName === 'OL');
+        case 'BR':
+            return null;
+        default:
+            // `p`, `div` (what some browsers still produce on Enter), and anything
+            // else that reached the top level: treat as a paragraph.
+            return writer.block('paragraph', serializeInline(node, writer));
+    }
+}
+/** A quote may hold blocks of its own; flatten them to lines. */
+function quoteContent(node, writer) {
+    const hasBlocks = Array.from(node.children).some(child => /^(P|DIV|H[1-3])$/.test(child.tagName));
+    if (!hasBlocks) {
+        return serializeInline(node, writer);
+    }
+    return Array.from(node.children)
+        .map(child => serializeInline(child, writer))
+        .filter(Boolean)
+        .join('\n');
+}
+function serializeInline(node, writer) {
+    let out = '';
+    for (const child of Array.from(node.childNodes)) {
+        if (child.nodeType === Node.TEXT_NODE) {
+            out += writer.escape(child.textContent ?? '');
+            continue;
+        }
+        if (!(child instanceof Element)) {
+            continue;
+        }
+        if (child.tagName === 'BR') {
+            out += '\n';
+            continue;
+        }
+        const mark = MARK_TAGS[child.tagName];
+        const inner = child.tagName === 'CODE' ? writer.escape(child.textContent ?? '') : serializeInline(child, writer);
+        out += mark ? writer.mark(mark, inner, child.getAttribute('href') ?? undefined) : inner;
+    }
+    return out;
+}
+/** Escapes text for insertion into the editor's HTML. */
+function escapeHtml(text) {
+    return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+/**
+ * Keeps `javascript:` and friends out of an `href`.
+ *
+ * Source text is user input as far as this package is concerned — a comment, a
+ * forum post — so a link is only ever emitted when its scheme is one that can
+ * do nothing but navigate.
+ */
+function sanitizeUrl(url) {
+    const trimmed = url.trim();
+    return /^(https?:|mailto:|tel:|\/|#|\.)/i.test(trimmed) ? trimmed : '';
+}
+
+/**
+ * The BBCode this syntax reads and writes.
+ *
+ * The tags every forum agrees on. BBCode has underline, which Markdown lacks;
+ * it has no headings and no thematic break, so the toolbar drops those — the
+ * format decides what the toolbar offers, not the other way round.
+ */
+const FEATURES$1 = [
+    'bold',
+    'italic',
+    'underline',
+    'strike',
+    'link',
+    'bulletList',
+    'orderedList',
+    'quote',
+    'codeBlock'
+];
+const writer$1 = {
+    // BBCode has no escape character. A stray `[` is only ambiguous next to a tag
+    // name, so that is the one case worth neutralising.
+    escape: text => text.replace(/\[(?=\/?[a-z*]+[\]=])/gi, '&#91;'),
+    mark: (kind, inner, href) => {
+        switch (kind) {
+            case 'bold':
+                return `[b]${inner}[/b]`;
+            case 'italic':
+                return `[i]${inner}[/i]`;
+            case 'underline':
+                return `[u]${inner}[/u]`;
+            case 'strike':
+                return `[s]${inner}[/s]`;
+            case 'link':
+                return href ? `[url=${href}]${inner}[/url]` : inner;
+            // No inline-code tag in BBCode: `[code]` is a block everywhere.
+            default:
+                return inner;
+        }
+    },
+    block: (kind, inner) => {
+        switch (kind) {
+            case 'quote':
+                return `[quote]${inner}[/quote]`;
+            // Headings degrade to plain paragraphs rather than to a `[size]` guess.
+            default:
+                return inner;
+        }
+    },
+    list: (items, ordered) => [ordered ? '[list=1]' : '[list]', ...items.map(item => `[*]${item}`), '[/list]'].join('\n'),
+    codeBlock: text => `[code]\n${text.replace(/\n$/, '')}\n[/code]`,
+    rule: () => ''
+};
+/** BBCode ⇄ the editor's HTML. */
+const bbcodeSyntax = {
+    name: 'bbcode',
+    features: FEATURES$1,
+    fromHtml: root => serializeHtml(root, writer$1),
+    toHtml: source => bbcodeToHtml(source)
+};
+/** `[tag]…[/tag]` → HTML element, innermost pair first. */
+const PAIRS = [
+    [/\[b]([\s\S]*?)\[\/b]/gi, '<strong>$1</strong>'],
+    [/\[i]([\s\S]*?)\[\/i]/gi, '<em>$1</em>'],
+    [/\[u]([\s\S]*?)\[\/u]/gi, '<u>$1</u>'],
+    [/\[s]([\s\S]*?)\[\/s]/gi, '<s>$1</s>']
+];
+function bbcodeToHtml(source) {
+    const blocks = splitBlocks(source.replace(/\r\n?/g, '\n'));
+    return blocks.join('');
+}
+/**
+ * Block tags first — they own whole lines and may hold inline markup — then
+ * whatever is left becomes paragraphs.
+ */
+function splitBlocks(source) {
+    const html = [];
+    const pattern = /\[(code|quote|list)(=1)?]([\s\S]*?)\[\/\1]/gi;
+    let cursor = 0;
+    let match;
+    while ((match = pattern.exec(source)) !== null) {
+        html.push(...paragraphs(source.slice(cursor, match.index)));
+        cursor = match.index + match[0].length;
+        const [, tag, ordered, body] = match;
+        if (tag.toLowerCase() === 'code') {
+            html.push(`<pre>${escapeHtml(body.replace(/^\n|\n$/g, ''))}</pre>`);
+            continue;
+        }
+        if (tag.toLowerCase() === 'quote') {
+            html.push(`<blockquote>${paragraphs(body).join('') || '<p></p>'}</blockquote>`);
+            continue;
+        }
+        const items = body
+            .split(/\[\*]/)
+            .map(item => item.trim())
+            .filter(Boolean)
+            .map(item => `<li>${inlineToHtml$1(item)}</li>`)
+            .join('');
+        html.push(ordered ? `<ol>${items}</ol>` : `<ul>${items}</ul>`);
+    }
+    html.push(...paragraphs(source.slice(cursor)));
+    return html;
+}
+function paragraphs(source) {
+    return source
+        .split(/\n{2,}/)
+        .map(block => block.replace(/^\n+|\n+$/g, ''))
+        .filter(block => block.trim())
+        .map(block => `<p>${block.split('\n').map(inlineToHtml$1).join('<br>')}</p>`);
+}
+function inlineToHtml$1(text) {
+    let out = escapeHtml(text).replace(/\[url(?:=([^\]]+))?]([\s\S]*?)\[\/url]/gi, (match, href, label) => {
+        const url = sanitizeUrl(href ?? label);
+        return url ? `<a href="${escapeHtml(url)}">${label || escapeHtml(url)}</a>` : match;
+    });
+    for (const [pattern, replacement] of PAIRS) {
+        // Non-greedy matches close the innermost pair first, so repeating until the
+        // text settles unwraps nested tags from the inside out.
+        let previous;
+        do {
+            previous = out;
+            out = out.replace(pattern, replacement);
+        } while (out !== previous);
+    }
+    return out;
+}
+
+/**
+ * The Markdown this syntax reads and writes.
+ *
+ * A deliberately small, portable subset — what a comment box needs and what
+ * every Markdown renderer agrees on. No tables, footnotes, images or HTML
+ * passthrough; no underline, which Markdown has no syntax for.
+ */
+const FEATURES = [
+    'bold',
+    'italic',
+    'strike',
+    'code',
+    'link',
+    'heading1',
+    'heading2',
+    'heading3',
+    'bulletList',
+    'orderedList',
+    'quote',
+    'codeBlock',
+    'rule'
+];
+const writer = {
+    escape: text => text.replace(/([\\`*_[\]#>~])/g, '\\$1'),
+    mark: (kind, inner, href) => {
+        switch (kind) {
+            case 'bold':
+                return `**${inner}**`;
+            case 'italic':
+                return `*${inner}*`;
+            case 'strike':
+                return `~~${inner}~~`;
+            case 'code':
+                // Code spans are verbatim, so the backslashes `escape` added are noise.
+                return `\`${inner.replace(/\\([\\`*_[\]#>~])/g, '$1')}\``;
+            case 'link':
+                return href ? `[${inner}](${href})` : inner;
+            // Markdown cannot underline. Rather than invent `<u>`, the text stays put.
+            default:
+                return inner;
+        }
+    },
+    block: (kind, inner) => {
+        switch (kind) {
+            case 'heading1':
+                return `# ${inner}`;
+            case 'heading2':
+                return `## ${inner}`;
+            case 'heading3':
+                return `### ${inner}`;
+            case 'quote':
+                return inner
+                    .split('\n')
+                    .map(line => `> ${line}`)
+                    .join('\n');
+            default:
+                return inner;
+        }
+    },
+    list: (items, ordered) => items.map((item, index) => (ordered ? `${index + 1}. ${item}` : `- ${item}`)).join('\n'),
+    codeBlock: text => `\`\`\`\n${text.replace(/\n$/, '')}\n\`\`\``,
+    rule: () => '---'
+};
+/** Markdown ⇄ the editor's HTML. */
+const markdownSyntax = {
+    name: 'markdown',
+    features: FEATURES,
+    fromHtml: root => serializeHtml(root, writer),
+    toHtml: source => blocksToHtml(source)
+};
+function blocksToHtml(source) {
+    const lines = source.replace(/\r\n?/g, '\n').split('\n');
+    const html = [];
+    let index = 0;
+    while (index < lines.length) {
+        const line = lines[index];
+        if (!line.trim()) {
+            index++;
+            continue;
+        }
+        // Fenced code: verbatim until the closing fence, or the end of the input.
+        if (/^```/.test(line)) {
+            const code = [];
+            index++;
+            while (index < lines.length && !/^```/.test(lines[index])) {
+                code.push(lines[index++]);
+            }
+            index++;
+            html.push(`<pre>${escapeHtml(code.join('\n'))}</pre>`);
+            continue;
+        }
+        const heading = /^(#{1,3})\s+(.*)$/.exec(line);
+        if (heading) {
+            const level = heading[1].length;
+            html.push(`<h${level}>${inlineToHtml(heading[2])}</h${level}>`);
+            index++;
+            continue;
+        }
+        if (/^(\s*[-*_]){3,}\s*$/.test(line)) {
+            html.push('<hr>');
+            index++;
+            continue;
+        }
+        if (/^>\s?/.test(line)) {
+            const quoted = [];
+            while (index < lines.length && /^>\s?/.test(lines[index])) {
+                quoted.push(lines[index++].replace(/^>\s?/, ''));
+            }
+            html.push(`<blockquote>${quoted.map(text => `<p>${inlineToHtml(text)}</p>`).join('')}</blockquote>`);
+            continue;
+        }
+        const bullet = /^\s*[-*+]\s+/;
+        const ordered = /^\s*\d+[.)]\s+/;
+        if (bullet.test(line) || ordered.test(line)) {
+            const isOrdered = ordered.test(line);
+            const marker = isOrdered ? ordered : bullet;
+            const items = [];
+            while (index < lines.length && marker.test(lines[index])) {
+                items.push(`<li>${inlineToHtml(lines[index++].replace(marker, ''))}</li>`);
+            }
+            html.push(isOrdered ? `<ol>${items.join('')}</ol>` : `<ul>${items.join('')}</ul>`);
+            continue;
+        }
+        // Anything else runs on as a paragraph until a blank line or a new block.
+        const paragraph = [];
+        while (index < lines.length && lines[index].trim() && !startsBlock(lines[index])) {
+            paragraph.push(lines[index++]);
+        }
+        html.push(`<p>${paragraph.map(inlineToHtml).join('<br>')}</p>`);
+    }
+    return html.join('');
+}
+function startsBlock(line) {
+    return /^(```|#{1,3}\s|>|\s*[-*+]\s|\s*\d+[.)]\s)/.test(line) || /^(\s*[-*_]){3,}\s*$/.test(line);
+}
+/**
+ * Stand-ins for the two things that must sit out the emphasis passes: a code
+ * span, and a backslash-escaped character. Private-use codepoints, so nothing a
+ * user can type collides with them.
+ */
+const SPAN = String.fromCharCode(0xe000);
+const ESCAPED = String.fromCharCode(0xe001);
+/**
+ * Inline Markdown → HTML.
+ *
+ * Code spans and escapes are lifted out first and put back last. That is what
+ * keeps `**` inside a code span from turning bold, and `\*` from being read as
+ * emphasis at all — both are invisible to the passes in between.
+ */
+function inlineToHtml(text) {
+    const codeSpans = [];
+    const escapes = [];
+    let out = escapeHtml(text)
+        .replace(/`([^`]+)`/g, (_, code) => {
+        codeSpans.push(code);
+        return `${SPAN}${codeSpans.length - 1}${SPAN}`;
+    })
+        .replace(/\\([\\`*_[\]#>~])/g, (_, char) => {
+        escapes.push(char);
+        return `${ESCAPED}${escapes.length - 1}${ESCAPED}`;
+    });
+    out = out
+        .replace(/\[([^\]]+)]\(([^)\s]+)\)/g, (match, label, href) => {
+        const url = sanitizeUrl(href);
+        return url ? `<a href="${escapeHtml(url)}">${label}</a>` : match;
+    })
+        .replace(/(\*\*|__)(?=\S)([\s\S]*?\S)\1/g, '<strong>$2</strong>')
+        .replace(/(?<![*\w])\*(?=\S)([^*]*?\S)\*(?![*\w])/g, '<em>$1</em>')
+        .replace(/(?<![_\w])_(?=\S)([^_]*?\S)_(?![_\w])/g, '<em>$1</em>')
+        .replace(/~~(?=\S)([\s\S]*?\S)~~/g, '<s>$1</s>');
+    return out
+        .replace(new RegExp(`${ESCAPED}(\\d+)${ESCAPED}`, 'g'), (_, index) => escapes[Number(index)])
+        .replace(new RegExp(`${SPAN}(\\d+)${SPAN}`, 'g'), (_, index) => `<code>${codeSpans[Number(index)]}</code>`);
+}
+
+const defaultConfig = {
+    format: 'markdown',
+    placeholder: '',
+    sourceView: true
+};
+const XuiRichTextEditorConfigToken = new InjectionToken('XuiRichTextEditorConfig');
+/** Application-wide defaults for every editor. Individual inputs still win. */
+function provideXuiRichTextEditorConfig(config) {
+    return { provide: XuiRichTextEditorConfigToken, useValue: { ...defaultConfig, ...config } };
+}
+function injectXuiRichTextEditorConfig() {
+    return inject(XuiRichTextEditorConfigToken, { optional: true }) ?? defaultConfig;
+}
+const XuiRichTextSyntaxToken = new InjectionToken('XuiRichTextSyntax');
+/**
+ * Teaches the editor a format.
+ *
+ * Markdown and BBCode are built in; this adds to them, or replaces one by
+ * registering a syntax under the same name — the last one provided wins, so an
+ * app can swap in its own flavour of Markdown without forking the editor.
+ *
+ * ```ts
+ * provideXuiRichTextSyntax({
+ *   name: 'plain',
+ *   features: ['bold'],
+ *   toHtml: text => `<p>${text}</p>`,
+ *   fromHtml: root => root.textContent ?? ''
+ * });
+ * ```
+ */
+function provideXuiRichTextSyntax(...syntaxes) {
+    return { provide: XuiRichTextSyntaxToken, useValue: syntaxes, multi: true };
+}
+/**
+ * Every known syntax, by name. Built-ins first, so anything provided by the app
+ * that reuses a name replaces it.
+ */
+function injectXuiRichTextSyntaxes() {
+    const provided = inject(XuiRichTextSyntaxToken, { optional: true });
+    return new Map([markdownSyntax, bbcodeSyntax, ...(provided ?? []).flat()].map(syntax => [syntax.name, syntax]));
+}
+
+/**
+ * The full toolbar, in order. Each editor shows the entries its format can
+ * express — the same button set can therefore never produce markup the format
+ * cannot round-trip.
+ */
+const TOOLS = [
+    { feature: 'bold', label: 'Bold', icon: 'matFormatBoldRound', command: 'bold', state: 'command', key: 'b' },
+    { feature: 'italic', label: 'Italic', icon: 'matFormatItalicRound', command: 'italic', state: 'command', key: 'i' },
+    {
+        feature: 'underline',
+        label: 'Underline',
+        icon: 'matFormatUnderlinedRound',
+        command: 'underline',
+        state: 'command',
+        key: 'u'
+    },
+    {
+        feature: 'strike',
+        label: 'Strikethrough',
+        icon: 'matFormatStrikethroughRound',
+        command: 'strikeThrough',
+        state: 'command'
+    },
+    { feature: 'code', label: 'Inline code', icon: 'matCodeRound', command: 'xuiCode', state: 'none' },
+    { feature: 'link', label: 'Link', icon: 'matLinkRound', command: 'xuiLink', state: 'none', key: 'k' },
+    { feature: 'heading1', label: 'Heading 1', text: 'H1', command: 'formatBlock', argument: 'h1', state: 'block' },
+    { feature: 'heading2', label: 'Heading 2', text: 'H2', command: 'formatBlock', argument: 'h2', state: 'block' },
+    { feature: 'heading3', label: 'Heading 3', text: 'H3', command: 'formatBlock', argument: 'h3', state: 'block' },
+    {
+        feature: 'bulletList',
+        label: 'Bulleted list',
+        icon: 'matFormatListBulletedRound',
+        command: 'insertUnorderedList',
+        state: 'command'
+    },
+    {
+        feature: 'orderedList',
+        label: 'Numbered list',
+        icon: 'matFormatListNumberedRound',
+        command: 'insertOrderedList',
+        state: 'command'
+    },
+    {
+        feature: 'quote',
+        label: 'Quote',
+        icon: 'matFormatQuoteRound',
+        command: 'formatBlock',
+        argument: 'blockquote',
+        state: 'block'
+    },
+    {
+        feature: 'codeBlock',
+        label: 'Code block',
+        icon: 'matTerminalRound',
+        command: 'formatBlock',
+        argument: 'pre',
+        state: 'block'
+    },
+    {
+        feature: 'rule',
+        label: 'Divider',
+        icon: 'matHorizontalRuleRound',
+        command: 'insertHorizontalRule',
+        state: 'none'
+    }
+];
+const XUI_RICH_TEXT_EDITOR_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => XuiRichTextEditor),
+    multi: true
+};
+/**
+ * A WYSIWYG editor whose value is source text.
+ *
+ * The user works on formatted content; the binding is the Markdown or BBCode
+ * you store — so nothing downstream has to know an editor was involved, and
+ * nothing has to be sanitised on the way out.
+ *
+ * ```html
+ * <xui-rich-text-editor [(value)]="comment" format="markdown" placeholder="Say something…" />
+ * ```
+ *
+ * ```html
+ * <xui-rich-text-editor formControlName="post" format="bbcode" />
+ * ```
+ *
+ * The toolbar is the format's capabilities: Markdown offers headings and a
+ * divider but no underline, BBCode the reverse. Teach it a new format with
+ * {@link provideXuiRichTextSyntax} and the toolbar follows.
+ *
+ * The source view (`</>`) shows the text itself, editable, and the two stay in
+ * step. Pasting always lands as plain text — foreign HTML never enters the
+ * document, so the value cannot carry markup the format does not define.
+ */
+class XuiRichTextEditor {
+    config = injectXuiRichTextEditorConfig();
+    syntaxes = injectXuiRichTextSyntaxes();
+    surface = viewChild('surface', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "surface" }] : /* istanbul ignore next */ []));
+    linkField = viewChild('linkField', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "linkField" }] : /* istanbul ignore next */ []));
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    /** The source text, in the active `format`. Two-way bindable, and the form value. */
+    value = model('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** `'markdown'`, `'bbcode'`, or any format registered with `provideXuiRichTextSyntax`. */
+    format = input(this.config.format, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
+    placeholder = input(this.config.placeholder, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Offer the source-text toggle. */
+    sourceView = input(this.config.sourceView, { ...(ngDevMode ? { debugName: "sourceView" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Height of the writing area before it grows with the content. */
+    minHeight = input(180, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minHeight" }] : /* istanbul ignore next */ []));
+    ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    /** Whether the source view is showing. Two-way bindable. */
+    source = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "source" }] : /* istanbul ignore next */ []));
+    linkDraft = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "linkDraft" }] : /* istanbul ignore next */ []));
+    active = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    onChange;
+    onTouched;
+    disabledByForm = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledByForm" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this.disabledByForm(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    /**
+     * The value the surface already shows, tagged with the format it was rendered
+     * in. Re-rendering the user's own keystrokes would reset the caret on every
+     * one, so the effect below writes only when this no longer matches.
+     */
+    synced = null;
+    /** The element that value went into — the source toggle builds a new one. */
+    syncedSurface = null;
+    /** What the link is to wrap, held while the URL field has the selection. */
+    savedRange = null;
+    syntax = computed(() => {
+        const syntax = this.syntaxes.get(this.format());
+        if (!syntax) {
+            throw new Error(`@xui/rich-text-editor: unknown format "${this.format()}". ` +
+                `Known formats: ${[...this.syntaxes.keys()].join(', ')}. Register others with provideXuiRichTextSyntax().`);
+        }
+        return syntax;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "syntax" }] : /* istanbul ignore next */ []));
+    tools = computed(() => {
+        const features = this.syntax().features;
+        return TOOLS.filter(tool => features.includes(tool.feature));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tools" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => xui('border-border bg-surface-inset text-foreground block overflow-hidden rounded-lg border', 'focus-within:border-focus transition-colors', 'data-disabled:cursor-not-allowed data-disabled:opacity-50', '[&.ng-invalid.ng-touched]:border-error', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    toolClass = computed(() => xui('text-foreground-muted hover:bg-surface-raised hover:text-foreground flex items-center rounded px-1.5 py-1', 'data-active:bg-surface-raised data-active:text-foreground disabled:pointer-events-none disabled:opacity-50', 'focus-visible:outline-focus focus-visible:outline-2'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "toolClass" }] : /* istanbul ignore next */ []));
+    /** Tailwind resets block elements, so the writing area re-states how prose looks. */
+    surfaceClass = computed(() => xui('block p-3 outline-none [&>*+*]:mt-2', '[&_h1]:text-2xl [&_h1]:font-semibold [&_h2]:text-xl [&_h2]:font-semibold [&_h3]:text-lg [&_h3]:font-semibold', '[&_ul]:list-disc [&_ol]:list-decimal [&_ul]:ps-6 [&_ol]:ps-6', '[&_blockquote]:border-border-strong [&_blockquote]:text-foreground-muted [&_blockquote]:border-s-2 [&_blockquote]:ps-3', '[&_pre]:bg-surface-sunken [&_pre]:rounded [&_pre]:p-2 [&_pre]:font-mono [&_pre]:text-sm', '[&_code]:bg-surface-sunken [&_code]:rounded [&_code]:px-1 [&_code]:font-mono [&_code]:text-sm', '[&_pre_code]:bg-transparent [&_pre_code]:p-0', '[&_a]:text-link [&_a]:underline', '[&_hr]:border-border [&_hr]:my-3'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "surfaceClass" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Enter should start a paragraph, and marks should be tags rather than
+        // inline styles — otherwise there is nothing for a syntax to recognise.
+        safely(() => document.execCommand?.('defaultParagraphSeparator', false, 'p'));
+        safely(() => document.execCommand?.('styleWithCSS', false, 'false'));
+        // Renders whenever the value arrives from outside — a binding, a form, the
+        // source toggle — and skips the echo of the user's own typing, which would
+        // otherwise reset the caret on every keystroke.
+        effect(() => {
+            const surface = this.surface()?.nativeElement;
+            const value = this.value();
+            const key = this.syncKey(value);
+            if (!surface || (key === this.synced && surface === this.syncedSurface)) {
+                return;
+            }
+            this.syncedSurface = surface;
+            // A format switch keeps the content and changes only how it is written
+            // down: the document is the same either way, so it is re-read in the new
+            // format rather than re-rendered from text the new format cannot parse.
+            if (this.synced && !this.synced.startsWith(`${this.format()}:`) && surface.innerHTML) {
+                const translated = this.syntax().fromHtml(surface);
+                this.synced = this.syncKey(translated);
+                this.value.set(translated);
+                this.onChange?.(translated);
+                return;
+            }
+            surface.innerHTML = this.syntax().toHtml(value);
+            this.synced = key;
+        });
+        effect(() => {
+            if (this.linkDraft() !== null) {
+                this.linkField()?.nativeElement.focus();
+            }
+        });
+    }
+    /** The editing surface, for consumers who need to focus it. */
+    focus() {
+        this.surface()?.nativeElement.focus();
+    }
+    /** Show the formatted view (`false`) or the source text (`true`). */
+    toggleSource() {
+        this.source.update(source => !source);
+    }
+    onSourceInput(event) {
+        this.commit(event.target.value);
+    }
+    /** Reads the surface back out as source text. */
+    pull() {
+        const surface = this.surface()?.nativeElement;
+        if (!surface) {
+            return;
+        }
+        this.commit(this.syntax().fromHtml(surface));
+        this.refreshActive();
+    }
+    onKeydown(event) {
+        if (!(event.metaKey || event.ctrlKey)) {
+            return;
+        }
+        const tool = this.tools().find(candidate => candidate.key === event.key.toLowerCase());
+        if (tool) {
+            event.preventDefault();
+            this.run(tool);
+        }
+    }
+    /**
+     * Paste as plain text.
+     *
+     * Whatever is on the clipboard — a Word document, half a web page — would
+     * otherwise arrive as HTML the format cannot express and the editor would
+     * have to guess at. The text is inserted as typed instead.
+     */
+    onPaste(event) {
+        event.preventDefault();
+        const text = event.clipboardData?.getData('text/plain') ?? '';
+        this.exec('insertText', text);
+        this.pull();
+    }
+    run(tool) {
+        if (this.isDisabled() || this.source()) {
+            return;
+        }
+        if (tool.command === 'xuiLink') {
+            // Captured before anything touches focus: the URL field is about to take
+            // the document selection, and this is the range the link must wrap.
+            this.savedRange = currentRange();
+            // The field appears with the draft; an effect focuses it once it exists.
+            this.linkDraft.set('');
+            return;
+        }
+        this.focus();
+        if (tool.command === 'xuiCode') {
+            this.wrapSelection('code');
+        }
+        else if (tool.command === 'formatBlock') {
+            // A second press on the same block returns it to a paragraph.
+            const target = this.active().includes(tool.feature) ? 'p' : tool.argument;
+            this.exec('formatBlock', target);
+        }
+        else {
+            this.exec(tool.command, tool.argument);
+        }
+        this.pull();
+    }
+    applyLink() {
+        const href = this.linkDraft()?.trim();
+        this.linkDraft.set(null);
+        this.focus();
+        this.restoreSelection();
+        if (href) {
+            this.exec('createLink', href);
+            this.pull();
+        }
+    }
+    /** Puts the caret back where it was before the URL field took focus. */
+    restoreSelection() {
+        const selection = getSelection();
+        if (!this.savedRange || !selection) {
+            return;
+        }
+        selection.removeAllRanges();
+        selection.addRange(this.savedRange);
+        this.savedRange = null;
+    }
+    /** Reflects the caret's formatting on the toolbar. */
+    refreshActive() {
+        if (typeof document === 'undefined' || !document.queryCommandState) {
+            return;
+        }
+        const block = document.queryCommandValue?.('formatBlock')?.toLowerCase();
+        this.active.set(this.tools()
+            .filter(tool => {
+            if (tool.state === 'command') {
+                return safely(() => document.queryCommandState(tool.command));
+            }
+            return tool.state === 'block' && block === tool.argument;
+        })
+            .map(tool => tool.feature));
+    }
+    /** Wraps the selection in a tag, or unwraps it when it is already wrapped. */
+    wrapSelection(tag) {
+        const selection = getSelection();
+        if (!selection?.rangeCount) {
+            return;
+        }
+        const range = selection.getRangeAt(0);
+        const existing = closest(range.commonAncestorContainer, tag);
+        if (existing) {
+            existing.replaceWith(...Array.from(existing.childNodes));
+            return;
+        }
+        if (!range.collapsed) {
+            this.exec('insertHTML', `<${tag}>${escapeText(range.toString())}</${tag}>`);
+        }
+    }
+    exec(command, argument) {
+        // `execCommand` is the only editing API every browser implements for
+        // contenteditable; absent under a test DOM, where nothing is being edited.
+        safely(() => document.execCommand?.(command, false, argument));
+    }
+    commit(next) {
+        if (next === this.value()) {
+            return;
+        }
+        // The surface already shows this — recorded before the write so the render
+        // effect sees it and leaves the caret where the user put it.
+        this.synced = this.syncKey(next);
+        this.value.set(next);
+        this.onChange?.(next);
+    }
+    syncKey(value) {
+        return `${this.format()}:${value}`;
+    }
+    // --- ControlValueAccessor ---
+    writeValue(value) {
+        this.value.set(value ?? '');
+        // Force the next render: the value came from outside, so whatever is in the
+        // surface is stale even if the string matches what we last serialised.
+        this.synced = null;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabledByForm.set(isDisabled);
+    }
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiRichTextEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: XuiRichTextEditor, isStandalone: true, selector: "xui-rich-text-editor", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, sourceView: { classPropertyName: "sourceView", publicName: "sourceView", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", source: "sourceChange" }, host: { properties: { "class": "computedClass()", "attr.data-disabled": "isDisabled() ? \"\" : null" } }, providers: [XUI_RICH_TEXT_EDITOR_VALUE_ACCESSOR], viewQueries: [{ propertyName: "surface", first: true, predicate: ["surface"], descendants: true, isSignal: true }, { propertyName: "linkField", first: true, predicate: ["linkField"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div
+      role="toolbar"
+      aria-label="Formatting"
+      class="border-border bg-surface-sunken flex flex-wrap items-center gap-0.5 rounded-t-lg border-b p-1"
+    >
+      @for (tool of tools(); track tool.feature) {
+        <button
+          type="button"
+          [class]="toolClass()"
+          [attr.aria-label]="tool.label"
+          [attr.aria-pressed]="tool.state === 'none' ? null : active().includes(tool.feature)"
+          [attr.data-active]="active().includes(tool.feature) ? '' : null"
+          [disabled]="isDisabled() || source()"
+          [title]="tool.label"
+          (mousedown)="$event.preventDefault()"
+          (click)="run(tool)"
+        >
+          @if (tool.icon) {
+            <ng-icon xui size="sm" [name]="tool.icon" />
+          } @else {
+            <span class="px-0.5 text-xs font-semibold">{{ tool.text }}</span>
+          }
+        </button>
+      }
+
+      @if (sourceView()) {
+        <button
+          type="button"
+          [class]="toolClass()"
+          class="ms-auto"
+          aria-label="Source"
+          [attr.aria-pressed]="source()"
+          [attr.data-active]="source() ? '' : null"
+          [disabled]="isDisabled()"
+          title="Source"
+          (click)="toggleSource()"
+        >
+          <span class="px-0.5 text-xs font-semibold">&lt;/&gt;</span>
+        </button>
+      }
+    </div>
+
+    @if (linkDraft() !== null) {
+      <div class="border-border bg-surface-sunken flex items-center gap-1 border-b p-1">
+        <input
+          #linkField
+          type="url"
+          class="text-foreground placeholder:text-foreground-subtle min-w-0 flex-1 bg-transparent px-2 py-1 text-sm outline-none"
+          placeholder="https://example.com"
+          aria-label="Link URL"
+          [value]="linkDraft()"
+          (input)="linkDraft.set($any($event.target).value)"
+          (keydown.enter)="applyLink(); $event.preventDefault()"
+          (keydown.escape)="linkDraft.set(null)"
+        />
+        <button type="button" [class]="toolClass()" class="text-xs" (click)="applyLink()">Apply</button>
+        <button type="button" [class]="toolClass()" class="text-xs" (click)="linkDraft.set(null)">Cancel</button>
+      </div>
+    }
+
+    @if (source()) {
+      <textarea
+        class="text-foreground placeholder:text-foreground-subtle block w-full resize-y bg-transparent p-3 font-mono text-sm outline-none"
+        [style.min-height.px]="minHeight()"
+        [attr.aria-label]="'Source (' + format() + ')'"
+        [disabled]="isDisabled()"
+        [value]="value()"
+        (input)="onSourceInput($event)"
+        (blur)="onTouched?.()"
+      ></textarea>
+    } @else {
+      <div class="relative">
+        @if (!value().trim() && placeholder()) {
+          <p class="text-foreground-subtle pointer-events-none absolute p-3 select-none">{{ placeholder() }}</p>
+        }
+
+        <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->
+        <div
+          #surface
+          role="textbox"
+          aria-multiline="true"
+          [class]="surfaceClass()"
+          [style.min-height.px]="minHeight()"
+          [attr.contenteditable]="isDisabled() ? null : true"
+          [attr.aria-label]="ariaLabel()"
+          [attr.aria-disabled]="isDisabled() ? true : null"
+          (input)="pull()"
+          (blur)="onTouched?.()"
+          (paste)="onPaste($event)"
+          (keydown)="onKeydown($event)"
+          (keyup)="refreshActive()"
+          (mouseup)="refreshActive()"
+        ></div>
+      </div>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: XuiIcon, selector: "ng-icon[xui]", inputs: ["class", "size", "color", "title"], exportAs: ["xuiIcon"] }], viewProviders: [
+            provideIcons({
+                matCodeRound,
+                matFormatBoldRound,
+                matFormatItalicRound,
+                matFormatListBulletedRound,
+                matFormatListNumberedRound,
+                matFormatQuoteRound,
+                matFormatStrikethroughRound,
+                matFormatUnderlinedRound,
+                matHorizontalRuleRound,
+                matLinkRound,
+                matTerminalRound
+            })
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiRichTextEditor, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'xui-rich-text-editor',
+                    imports: [NgIcon, XuiIcon],
+                    template: `
+    <div
+      role="toolbar"
+      aria-label="Formatting"
+      class="border-border bg-surface-sunken flex flex-wrap items-center gap-0.5 rounded-t-lg border-b p-1"
+    >
+      @for (tool of tools(); track tool.feature) {
+        <button
+          type="button"
+          [class]="toolClass()"
+          [attr.aria-label]="tool.label"
+          [attr.aria-pressed]="tool.state === 'none' ? null : active().includes(tool.feature)"
+          [attr.data-active]="active().includes(tool.feature) ? '' : null"
+          [disabled]="isDisabled() || source()"
+          [title]="tool.label"
+          (mousedown)="$event.preventDefault()"
+          (click)="run(tool)"
+        >
+          @if (tool.icon) {
+            <ng-icon xui size="sm" [name]="tool.icon" />
+          } @else {
+            <span class="px-0.5 text-xs font-semibold">{{ tool.text }}</span>
+          }
+        </button>
+      }
+
+      @if (sourceView()) {
+        <button
+          type="button"
+          [class]="toolClass()"
+          class="ms-auto"
+          aria-label="Source"
+          [attr.aria-pressed]="source()"
+          [attr.data-active]="source() ? '' : null"
+          [disabled]="isDisabled()"
+          title="Source"
+          (click)="toggleSource()"
+        >
+          <span class="px-0.5 text-xs font-semibold">&lt;/&gt;</span>
+        </button>
+      }
+    </div>
+
+    @if (linkDraft() !== null) {
+      <div class="border-border bg-surface-sunken flex items-center gap-1 border-b p-1">
+        <input
+          #linkField
+          type="url"
+          class="text-foreground placeholder:text-foreground-subtle min-w-0 flex-1 bg-transparent px-2 py-1 text-sm outline-none"
+          placeholder="https://example.com"
+          aria-label="Link URL"
+          [value]="linkDraft()"
+          (input)="linkDraft.set($any($event.target).value)"
+          (keydown.enter)="applyLink(); $event.preventDefault()"
+          (keydown.escape)="linkDraft.set(null)"
+        />
+        <button type="button" [class]="toolClass()" class="text-xs" (click)="applyLink()">Apply</button>
+        <button type="button" [class]="toolClass()" class="text-xs" (click)="linkDraft.set(null)">Cancel</button>
+      </div>
+    }
+
+    @if (source()) {
+      <textarea
+        class="text-foreground placeholder:text-foreground-subtle block w-full resize-y bg-transparent p-3 font-mono text-sm outline-none"
+        [style.min-height.px]="minHeight()"
+        [attr.aria-label]="'Source (' + format() + ')'"
+        [disabled]="isDisabled()"
+        [value]="value()"
+        (input)="onSourceInput($event)"
+        (blur)="onTouched?.()"
+      ></textarea>
+    } @else {
+      <div class="relative">
+        @if (!value().trim() && placeholder()) {
+          <p class="text-foreground-subtle pointer-events-none absolute p-3 select-none">{{ placeholder() }}</p>
+        }
+
+        <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->
+        <div
+          #surface
+          role="textbox"
+          aria-multiline="true"
+          [class]="surfaceClass()"
+          [style.min-height.px]="minHeight()"
+          [attr.contenteditable]="isDisabled() ? null : true"
+          [attr.aria-label]="ariaLabel()"
+          [attr.aria-disabled]="isDisabled() ? true : null"
+          (input)="pull()"
+          (blur)="onTouched?.()"
+          (paste)="onPaste($event)"
+          (keydown)="onKeydown($event)"
+          (keyup)="refreshActive()"
+          (mouseup)="refreshActive()"
+        ></div>
+      </div>
+    }
+  `,
+                    host: {
+                        '[class]': 'computedClass()',
+                        '[attr.data-disabled]': 'isDisabled() ? "" : null'
+                    },
+                    providers: [XUI_RICH_TEXT_EDITOR_VALUE_ACCESSOR],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    viewProviders: [
+                        provideIcons({
+                            matCodeRound,
+                            matFormatBoldRound,
+                            matFormatItalicRound,
+                            matFormatListBulletedRound,
+                            matFormatListNumberedRound,
+                            matFormatQuoteRound,
+                            matFormatStrikethroughRound,
+                            matFormatUnderlinedRound,
+                            matHorizontalRuleRound,
+                            matLinkRound,
+                            matTerminalRound
+                        })
+                    ]
+                }]
+        }], ctorParameters: () => [], propDecorators: { surface: [{ type: i0.ViewChild, args: ['surface', { isSignal: true }] }], linkField: [{ type: i0.ViewChild, args: ['linkField', { isSignal: true }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], sourceView: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceView", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], source: [{ type: i0.Input, args: [{ isSignal: true, alias: "source", required: false }] }, { type: i0.Output, args: ["sourceChange"] }] } });
+function currentRange() {
+    const selection = getSelection();
+    return selection?.rangeCount ? selection.getRangeAt(0).cloneRange() : null;
+}
+/** The nearest ancestor with `tag`, starting at `node` itself. */
+function closest(node, tag) {
+    const element = node instanceof Element ? node : node.parentElement;
+    return element?.closest(tag) ?? null;
+}
+function escapeText(text) {
+    return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
+/** Runs `fn`, treating a DOM that does not implement it as "no". */
+function safely(fn) {
+    try {
+        return fn() === true;
+    }
+    catch {
+        return false;
+    }
+}
+
+const XuiRichTextEditorImports = [XuiRichTextEditor];
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { XUI_RICH_TEXT_EDITOR_VALUE_ACCESSOR, XuiRichTextEditor, XuiRichTextEditorImports, bbcodeSyntax, escapeHtml, injectXuiRichTextEditorConfig, injectXuiRichTextSyntaxes, markdownSyntax, provideXuiRichTextEditorConfig, provideXuiRichTextSyntax, sanitizeUrl, serializeHtml };
+//# sourceMappingURL=xui-rich-text-editor.mjs.map