@gilav21/shadcn-angular-rte 0.1.1 → 0.2.0

package/fesm2022/{gilav21-shadcn-angular-rte-gilav21-shadcn-angular-rte-DWSBW7Gw.mjs → gilav21-shadcn-angular-rte-gilav21-shadcn-angular-rte-BFcfCqW4.mjs}

@@ -72,6 +72,494 @@ function prefersReducedMotion() {
     return globalThis.window?.matchMedia('(prefers-reduced-motion: reduce)').matches ?? false;
 }
 
+/**
+ * The syntax tokenizer, shared by every surface that shows code.
+ *
+ * It began inside `ui-code-block` as private methods over a private pattern
+ * table. The rich text editor and its read-only view need exactly the same
+ * tokens — `rich-text-markdown.service.ts` has always stored and round-tripped
+ * a code block's language, and the sanitizer has always allowed the
+ * `language-*` and `token-*` classes — so the tokenizer moved here rather than
+ * being written a second time. Rendering the whole `ui-code-block` COMPONENT
+ * inside a document was the alternative and is wrong: it brings a copy button,
+ * a line-number gutter, fold chevrons and a hard-coded dark surface into prose,
+ * and none of that can live inside a contenteditable.
+ *
+ * Two rules the callers rely on:
+ *
+ * 1. **A line is tokenized on its own.** Highlighting never spans lines, so a
+ *    multi-line string or block comment is coloured per line. That is what lets
+ *    the editor re-highlight one line without re-reading the block.
+ * 2. **An unknown language is not a guess.** {@link languagePatternsFor}
+ *    returns `null` for a language it does not know, and for none at all.
+ *    `ui-code-block` is a code viewer and keeps its documented TypeScript
+ *    fallback, but a DOCUMENT is mostly prose: a fence with no language, or one
+ *    tagged `text`, `log` or `diff`, would otherwise be coloured by TypeScript
+ *    rules, inventing keywords in the reader's notes.
+ */
+/**
+ * Build a word-boundary keyword matcher from a list. Constructed at runtime so
+ * the (legitimately long) per-language keyword set is a maintainable array
+ * rather than one giant, hard-to-read regex literal.
+ */
+const keywordPattern = (words) => new RegExp(String.raw `\b(${words.join('|')})\b`);
+const TS_KEYWORDS = ['const', 'let', 'var', 'function', 'class', 'import', 'from', 'return', 'if', 'else', 'for', 'while', 'export', 'interface', 'type', 'public', 'private', 'protected', 'implements', 'extends', 'new', 'this', 'true', 'false', 'null', 'undefined', 'void', 'async', 'await'];
+const JS_KEYWORDS = ['const', 'let', 'var', 'function', 'class', 'import', 'from', 'return', 'if', 'else', 'for', 'while', 'export', 'new', 'this', 'true', 'false', 'null', 'undefined', 'void', 'async', 'await'];
+const PYTHON_KEYWORDS = ['def', 'class', 'import', 'from', 'if', 'else', 'elif', 'for', 'while', 'return', 'try', 'except', 'finally', 'with', 'as', 'pass', 'break', 'continue', 'lambda', 'yield', 'async', 'await', 'True', 'False', 'None'];
+const JAVA_KEYWORDS = ['public', 'private', 'protected', 'class', 'interface', 'enum', 'extends', 'implements', 'new', 'this', 'super', 'return', 'if', 'else', 'for', 'while', 'do', 'switch', 'case', 'default', 'break', 'continue', 'try', 'catch', 'finally', 'throw', 'throws', 'import', 'package', 'void', 'int', 'boolean', 'char', 'byte', 'short', 'long', 'float', 'double', 'static', 'final', 'abstract', 'synchronized', 'volatile', 'transient', 'native', 'strictfp', 'instanceof', 'null', 'true', 'false'];
+const CSHARP_KEYWORDS = ['public', 'private', 'protected', 'internal', 'class', 'struct', 'record', 'interface', 'enum', 'delegate', 'event', 'void', 'int', 'string', 'bool', 'var', 'async', 'await', 'Task', 'return', 'if', 'else', 'for', 'foreach', 'while', 'do', 'switch', 'case', 'default', 'break', 'continue', 'try', 'catch', 'finally', 'throw', 'new', 'this', 'base', 'using', 'namespace', 'static', 'readonly', 'const', 'override', 'virtual', 'abstract', 'sealed', 'get', 'set', 'value'];
+/** The built-in language rules, keyed by lowercase language name. */
+const LANGUAGE_PATTERNS = {
+    typescript: [
+        { type: 'comment', regex: /\/\/.*/ },
+        { type: 'string', regex: /(["'])(?:(?=(\\?))\2.)*?\1/ },
+        { type: 'keyword', regex: keywordPattern(TS_KEYWORDS) },
+        { type: 'number', regex: /\b\d+\b/ },
+        { type: 'function', regex: /\b[a-zA-Z_$]\w*(?=\()/ },
+    ],
+    javascript: [
+        { type: 'comment', regex: /\/\/.*/ },
+        { type: 'string', regex: /(["'])(?:(?=(\\?))\2.)*?\1/ },
+        { type: 'keyword', regex: keywordPattern(JS_KEYWORDS) },
+        { type: 'number', regex: /\b\d+\b/ },
+        { type: 'function', regex: /\b[a-zA-Z_$]\w*(?=\()/ },
+    ],
+    python: [
+        { type: 'comment', regex: /#.*/ },
+        { type: 'string', regex: /(["'])(?:(?=(\\?))\2.)*?\1/ },
+        { type: 'decorator', regex: /@[\w.]+/ },
+        { type: 'keyword', regex: keywordPattern(PYTHON_KEYWORDS) },
+        { type: 'number', regex: /\b\d+\b/ },
+        { type: 'function', regex: /\b[a-zA-Z_]\w*(?=\()/ },
+    ],
+    java: [
+        { type: 'comment', regex: /\/\/.*/ },
+        { type: 'string', regex: /"(?:[^"\\]|\\.)*"/ },
+        { type: 'keyword', regex: keywordPattern(JAVA_KEYWORDS) },
+        { type: 'decorator', regex: /@\w+/ },
+        { type: 'number', regex: /\b\d+\b/ },
+        { type: 'function', regex: /\b[a-zA-Z_$]\w*(?=\()/ },
+    ],
+    html: [
+        { type: 'comment', regex: /<!--[\s\S]*?-->/ },
+        { type: 'tag', regex: /<\/?[a-z0-9-]+/i },
+        { type: 'attr', regex: /[a-z0-9-]{1,256}(?==)/i },
+        { type: 'string', regex: /"(?:[^"\\]|\\.)*"/ },
+    ],
+    xml: [
+        { type: 'comment', regex: /<!--[\s\S]*?-->/ },
+        { type: 'decorator', regex: /<\?xml[\s\S]*?\?>|<!\[CDATA\[[\s\S]*?\]\]>|<!DOCTYPE[^>]*>/i },
+        { type: 'string', regex: /"(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'/ },
+        { type: 'tag', regex: /<\/?[a-zA-Z_][\w.\-:]{0,256}/ },
+        { type: 'attr', regex: /[a-zA-Z_][\w.\-:]{0,256}(?==)/ },
+        { type: 'keyword', regex: /&(?:[a-zA-Z]+|#\d+|#x[0-9a-fA-F]+);/ },
+        { type: 'number', regex: /\b\d+\b/ },
+    ],
+    css: [
+        { type: 'comment', regex: /\/\*[\s\S]*?\*\// },
+        { type: 'selector', regex: /[.#]?[a-zA-Z0-9_-]{1,256}(?=\{)/ },
+        { type: 'property', regex: /[a-z0-9-]{1,256}(?=:)/i },
+        { type: 'string', regex: /"(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'/ },
+        { type: 'number', regex: /\b\d+(?:px|rem|em|%|vh|vw|s|ms|deg)?\b/ },
+    ],
+    json: [
+        { type: 'function', regex: /"[^"]+":/ },
+        { type: 'string', regex: /"(?:[^"\\]|\\.)*"/ },
+        { type: 'keyword', regex: /\b(true|false|null)\b/ },
+        { type: 'number', regex: /\b\d+\b/ },
+    ],
+    csharp: [
+        { type: 'comment', regex: /\/\/.*/ },
+        { type: 'string', regex: /"(?:[^"\\]|\\.)*"/ },
+        { type: 'decorator', regex: /\[[a-zA-Z]\w*\]/ },
+        { type: 'keyword', regex: keywordPattern(CSHARP_KEYWORDS) },
+        { type: 'number', regex: /\b\d+\b/ },
+        { type: 'function', regex: /\b[a-zA-Z_$]\w*(?=\()/ },
+    ],
+    yaml: [
+        { type: 'comment', regex: /#.*/ },
+        { type: 'string', regex: /"(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'/ },
+        { type: 'attr', regex: /[a-zA-Z0-9_-]{1,256}(?=:)/ },
+        { type: 'keyword', regex: /\b(true|false|null|yes|no|on|off)\b/ },
+        { type: 'number', regex: /\b\d+(\.\d+)?\b/ },
+    ],
+    bash: [
+        { type: 'comment', regex: /#.*/ },
+        { type: 'string', regex: /"(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'/ },
+        { type: 'keyword', regex: /\b(echo|ls|cd|pwd|mkdir|rm|cp|mv|touch|cat|grep|open|ssh|git|npm|node|ng|sudo|chmod|chown)\b/ },
+        { type: 'decorator', regex: /\$\w+/ },
+    ],
+};
+/**
+ * Spellings an author writes in a fence that mean a language the table already
+ * knows. A markdown fence carries whatever the author typed, and "ts" is far
+ * more common than "typescript".
+ */
+const LANGUAGE_ALIASES = {
+    ts: 'typescript',
+    tsx: 'typescript',
+    js: 'javascript',
+    jsx: 'javascript',
+    mjs: 'javascript',
+    cjs: 'javascript',
+    py: 'python',
+    'c#': 'csharp',
+    cs: 'csharp',
+    yml: 'yaml',
+    sh: 'bash',
+    shell: 'bash',
+    zsh: 'bash',
+    htm: 'html',
+    svg: 'xml',
+    scss: 'css',
+};
+/**
+ * The rules for a language, or `null` when it is one this module does not know.
+ *
+ * `null` is a real answer, not a failure: see rule 2 in the module comment. The
+ * caller decides what to do with it — `ui-code-block` substitutes TypeScript,
+ * a document leaves the code alone.
+ */
+function languagePatternsFor(language) {
+    if (!language)
+        return null;
+    const key = language.toLowerCase();
+    return LANGUAGE_PATTERNS[LANGUAGE_ALIASES[key] ?? key] ?? null;
+}
+/**
+ * Tokenize ONE line. See rule 1 in the module comment: highlighting never spans
+ * lines, so the caller splits and calls this per line.
+ */
+function tokenizeLine(line, patterns) {
+    if (!line)
+        return [];
+    const tokens = [];
+    let cursor = 0;
+    while (cursor < line.length) {
+        const remaining = line.slice(cursor);
+        const best = findBestMatch(remaining, patterns);
+        if (best?.index === 0) {
+            tokens.push({ type: best.type, text: best.text });
+            cursor += best.text.length;
+        }
+        else if (best) {
+            tokens.push({ type: 'text', text: remaining.slice(0, best.index) });
+            cursor += best.index;
+        }
+        else {
+            tokens.push({ type: 'text', text: remaining });
+            cursor += remaining.length;
+        }
+    }
+    return tokens;
+}
+function findBestMatch(remaining, patterns) {
+    let best = null;
+    for (const pattern of patterns) {
+        const match = pattern.regex.exec(remaining);
+        if (match && (best === null || match.index < best.index)) {
+            best = { type: pattern.type, text: match[0], index: match.index };
+        }
+    }
+    return best;
+}
+/**
+ * The class a document's highlighter marks a token with.
+ *
+ * `token` plus `token-<type>`, which `rich-text-sanitizer.service.ts` has
+ * allowed since before there was a highlighter: markup coloured elsewhere and
+ * pasted in already survived sanitization with these exact classes, so the
+ * colours this produces and the colours a paste brings are one set of rules.
+ * The colours themselves live in RICH_TEXT_PROSE_CLASSES, where the editor and
+ * the view share them and light and dark each get their own.
+ *
+ * A `text` run gets no class at all: it is the code's own colour, and a span
+ * per unstyled run would triple the node count for nothing.
+ */
+function tokenClassFor(type) {
+    return type === 'text' ? null : `token token-${type}`;
+}
+/**
+ * A code block's text with its line breaks, whichever form each one takes.
+ *
+ * The rule every reader of a code block has to follow: a line break is a line
+ * break, whether it is a `\n` character or a `<br>` element. `textContent`
+ * does not follow it — a `<br>` contributes nothing — and Shift+Enter, the
+ * editor's key for a new line inside a block, inserts `<br>`. So a function
+ * typed line by line was saved as one line, and the highlighter, which refused
+ * any block holding an element, stopped colouring from the first new line on.
+ */
+function readCodeLines(node) {
+    const lines = { text: '', breaks: [], trailingBr: false };
+    collectCodeLines(node, lines);
+    if (lines.breaks.at(-1) === 'br' && lines.text.endsWith('\n') && endsWithBr(node)) {
+        lines.text = lines.text.slice(0, -1);
+        lines.breaks.pop();
+        lines.trailingBr = true;
+    }
+    return lines;
+}
+function collectCodeLines(node, into) {
+    for (const child of Array.from(node.childNodes)) {
+        if (child.nodeType === Node.TEXT_NODE) {
+            const data = child.data;
+            into.text += data;
+            into.breaks.push(...Array.from(data.matchAll(/\n/g), () => 'newline'));
+        }
+        else if (child.nodeName === 'BR') {
+            into.text += '\n';
+            into.breaks.push('br');
+        }
+        else if (child.nodeType === Node.ELEMENT_NODE) {
+            collectCodeLines(child, into);
+        }
+    }
+}
+/** Whether the last thing in `node`, looking into nested elements, is a `<br>`. */
+function endsWithBr(node) {
+    let last = node.lastChild;
+    while (last?.nodeType === Node.ELEMENT_NODE && last.nodeName !== 'BR')
+        last = last.lastChild;
+    return last?.nodeName === 'BR';
+}
+/** A code block's text with every line break as `\n`; see {@link readCodeLines}. */
+function codeTextOf(node) {
+    return readCodeLines(node).text;
+}
+/**
+ * Elements that only STYLE the code text around them, which the paint reads
+ * through and does not keep.
+ *
+ * A browser writes these into a contenteditable on its own. Editing next to a
+ * coloured token, Chrome preserves the token's computed look as literal markup:
+ * `<font color="…">` with the keyword colour, `<b>` for its weight,
+ * `<span style="font-weight: 400">` to undo it. The bold, italic, underline and
+ * strike buttons write the rest. None of it can survive a save — a fence is
+ * text — and the colour of code is the highlighter's to decide. Refusing a
+ * block that held any of it switched highlighting off for the whole block the
+ * first time the browser did this, and it never came back.
+ */
+const STYLE_ONLY_TAGS = new Set(['SPAN', 'FONT', 'B', 'STRONG', 'I', 'EM', 'U', 'S', 'STRIKE', 'DEL']);
+/**
+ * Whether the paint can rebuild the block without losing anything.
+ *
+ * The paint is rebuilt from the block's lines, so it may only run where lines
+ * are all there is. A code block CAN hold more: the markdown writer keeps an
+ * image in one by writing the block in its tag form, and rebuilding that block
+ * deleted the image outright; a link is content too. A `<br>` is a line break
+ * and is rebuilt. Styling wrappers carry nothing but a look (see
+ * {@link STYLE_ONLY_TAGS}), and a span this module painted is exactly what the
+ * rebuild replaces.
+ */
+function isTextOnlyCode(code) {
+    return Array.from(code.querySelectorAll('*')).every((element) => element.nodeName === 'BR' || STYLE_ONLY_TAGS.has(element.nodeName));
+}
+/**
+ * Marks a document's `<pre><code>` element up with token spans, in place.
+ *
+ * The element's own TEXT is the source of truth and is never changed — the
+ * children are rebuilt from `textContent`, so running this twice is the same as
+ * running it once and a block that was already highlighted re-highlights
+ * cleanly. That idempotence is what lets the editor re-run it on every quiet
+ * moment without the markup growing.
+ *
+ * Returns whether anything was painted, so a caller that has to restore a caret
+ * can skip the work when nothing moved.
+ */
+function highlightCodeElement(code, language) {
+    const painted = paintedFragment(code, language);
+    if (!painted)
+        return false;
+    code.replaceChildren(painted);
+    return true;
+}
+/**
+ * The token markup for a block, built detached, or `null` when the block is not
+ * one to paint. Built apart from the element so a caller can compare it with
+ * what is already there BEFORE any node is replaced.
+ */
+function paintedFragment(code, language) {
+    const patterns = languagePatternsFor(language);
+    if (!patterns || !isTextOnlyCode(code))
+        return null;
+    const { text, breaks, trailingBr } = readCodeLines(code);
+    if (text === '')
+        return null;
+    const doc = code.ownerDocument;
+    const painted = doc.createDocumentFragment();
+    const lines = text.split('\n');
+    lines.forEach((line, index) => {
+        // Every break is written back as its own node AND in the form it had.
+        // As `\n` inside the last token, a trailing blank line was dropped on
+        // every pass; converted from `<br>` to `\n`, the empty line a
+        // Shift+Enter had just opened collapsed and took the caret with it.
+        if (index > 0)
+            painted.appendChild(breaks[index - 1] === 'br' ? doc.createElement('br') : doc.createTextNode('\n'));
+        for (const token of tokenizeLine(line, patterns)) {
+            const className = tokenClassFor(token.type);
+            if (className === null) {
+                painted.appendChild(doc.createTextNode(token.text));
+                continue;
+            }
+            const span = doc.createElement('span');
+            span.className = className;
+            span.textContent = token.text;
+            painted.appendChild(span);
+        }
+    });
+    if (trailingBr)
+        painted.appendChild(doc.createElement('br'));
+    return painted;
+}
+/** A fragment's markup, for comparing with an element's `innerHTML`. */
+function markupOf(fragment) {
+    const holder = fragment.ownerDocument.createElement('div');
+    holder.appendChild(fragment.cloneNode(true));
+    return holder.innerHTML;
+}
+/** The language a rendered `<pre><code>` carries: `data-language`, else the `language-*` class. */
+function languageOfCodeElement(code) {
+    const attribute = code.dataset['language'];
+    if (attribute)
+        return attribute;
+    const fromClass = /(?:^|\s)language-([\w+#.-]+)/.exec(code.className);
+    return fromClass?.[1] ?? null;
+}
+/**
+ * Highlights every code block under `root` that names a language this module
+ * knows, and returns how many it painted.
+ */
+function highlightCodeBlocks(root) {
+    let painted = 0;
+    for (const code of Array.from(root.querySelectorAll('pre > code'))) {
+        if (highlightCodeElement(code, languageOfCodeElement(code)))
+            painted++;
+    }
+    return painted;
+}
+/**
+ * Removes the spans the highlighter painted, in place.
+ *
+ * Only from a block whose language {@link languagePatternsFor} knows, which is
+ * exactly the set this module paints. Spans in a block it does NOT know came
+ * from the author — a paste from an already-highlighted source, which the
+ * sanitizer deliberately keeps — and are content, not decoration.
+ *
+ * The spans are unwrapped rather than the element flattened to its text: a code
+ * block may hold an image (the markdown writer keeps one by writing the block
+ * in its tag form), and `textContent = textContent` would delete it.
+ */
+function stripCodeHighlighting(root) {
+    for (const code of Array.from(root.querySelectorAll('pre > code'))) {
+        if (!languagePatternsFor(languageOfCodeElement(code)))
+            continue;
+        for (const span of Array.from(code.querySelectorAll('span.token'))) {
+            span.replaceWith(...Array.from(span.childNodes));
+        }
+        code.normalize();
+    }
+}
+/**
+ * How many characters come before the boundary (`container`, `offset`) in
+ * `root`, counting each `<br>` as one — the newline it stands for.
+ *
+ * `Range.toString()` counts a `<br>` as nothing, so on a line opened with
+ * Shift+Enter the caret was remembered one character early per break above it,
+ * and every repaint walked it back towards the top of the block.
+ */
+function characterOffsetIn(root, container, offset) {
+    if (!root.contains(container))
+        return null;
+    const measure = root.ownerDocument.createRange();
+    measure.setStart(root, 0);
+    measure.setEnd(container, offset);
+    return rawLengthOf(measure.cloneContents());
+}
+/** Text length with every `<br>` counted as one character, the trailing one included. */
+function rawLengthOf(node) {
+    let length = 0;
+    for (const child of Array.from(node.childNodes)) {
+        if (child.nodeType === Node.TEXT_NODE)
+            length += child.data.length;
+        else if (child.nodeName === 'BR')
+            length += 1;
+        else
+            length += rawLengthOf(child);
+    }
+    return length;
+}
+function collapsedRange(doc, place) {
+    const range = doc.createRange();
+    place(range);
+    range.collapse(true);
+    return range;
+}
+/**
+ * A collapsed range `offset` characters into `root`, counted as
+ * {@link characterOffsetIn} counts them, or `null` when the block is empty.
+ */
+function rangeAtCharacterOffset(root, offset) {
+    const doc = root.ownerDocument;
+    const walker = doc.createTreeWalker(root, NodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT);
+    let seen = 0;
+    let tail = null;
+    for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+        if (node.nodeType === Node.TEXT_NODE) {
+            const text = node;
+            if (seen + text.data.length >= offset)
+                return collapsedRange(doc, (range) => range.setStart(text, offset - seen));
+            seen += text.data.length;
+            tail = text;
+        }
+        else if (node.nodeName === 'BR') {
+            const br = node;
+            if (seen >= offset)
+                return collapsedRange(doc, (range) => range.setStartBefore(br));
+            seen += 1;
+            tail = br;
+        }
+    }
+    const end = tail;
+    if (!end)
+        return null;
+    // Past a break with nothing after it: the empty line a Shift+Enter opened.
+    if (end.nodeType === Node.TEXT_NODE)
+        return collapsedRange(doc, (range) => range.setStart(end, end.data.length));
+    return collapsedRange(doc, (range) => range.setStartAfter(end));
+}
+/**
+ * Highlights one code block and puts the caret back where it was.
+ *
+ * The caret is remembered as a CHARACTER OFFSET into the block's text, not as a
+ * node and an index: every node inside the block is replaced, so a remembered
+ * node would be detached by the time it was restored — the caret would jump to
+ * the top of the document and the next keystroke would land there. The text
+ * itself does not change, so the offset always still means the same place.
+ *
+ * Does nothing when the block is already painted exactly as it would be, so a
+ * keystroke that changes no token does not move the selection at all. That
+ * comparison is made on the DETACHED paint, before any node is replaced: made
+ * after, as it first was, the nodes were already swapped, the "nothing changed"
+ * exit skipped the restore, and the browser dropped the caret to the start of
+ * the block -- so every second keystroke in a word landed at the front.
+ */
+function highlightCodeElementKeepingCaret(code, language, selection) {
+    const painted = paintedFragment(code, language);
+    if (!painted || markupOf(painted) === code.innerHTML)
+        return false;
+    const range = selection && selection.rangeCount > 0 ? selection.getRangeAt(0) : null;
+    const caret = range?.collapsed ? characterOffsetIn(code, range.startContainer, range.startOffset) : null;
+    code.replaceChildren(painted);
+    if (caret !== null && selection) {
+        const restored = rangeAtCharacterOffset(code, caret);
+        if (restored) {
+            selection.removeAllRanges();
+            selection.addRange(restored);
+        }
+    }
+    return true;
+}
+
 /**
  * Counting and cutting text the way a reader sees it.
  */
@@ -829,6 +1317,32 @@ function firstTextNode(node) {
         return null;
     return doc.createTreeWalker(node, NodeFilter.SHOW_TEXT).nextNode();
 }
+/**
+ * How deep blocks nest before the markdown reader leaves the rest as text; see
+ * parseToggleBlocks and buildBlockquote in rich-text-markdown.service.ts. The
+ * reader counts a level for every details body, quote holding a nested quote
+ * and list item's block, so a details block nested through a list or a quote
+ * meets the same cap; a sub-list, read in its parent's pass, adds none. The
+ * writer counts the same list items and every quote (see nestingDepthOf), which
+ * is never less.
+ *
+ * It lives here rather than beside the reader so the EDITOR can respect the
+ * same ceiling. A structure typed past it is unwrapped the next time the
+ * document is read back, so building one is building something that will not
+ * survive; the nested-blockquote input rule clamps to this for that reason.
+ */
+const MAX_NESTING_DEPTH = 32;
+/** How many `<blockquote>` elements `node` sits inside, within `root`. */
+function blockquoteDepthOf(node, root) {
+    let depth = 0;
+    let at = node.nodeType === Node.ELEMENT_NODE ? node : node.parentElement;
+    while (at && at !== root && root.contains(at)) {
+        if (at.tagName === 'BLOCKQUOTE')
+            depth++;
+        at = at.parentElement;
+    }
+    return depth;
+}
 
 const SVG_CHECK_LENGTH = 256;
 function isJpeg(b) {
@@ -2864,14 +3378,15 @@ function parseListLine(line) {
     // runs after this one, so the refusal has to live here.
     if (THEMATIC_BREAK.test(line))
         return null;
-    const taskMatch = new RegExp(/^(\s*)[-*+]\s+\[([ xX])\]\s*(\S.*|)$/).exec(line);
+    const taskMatch = new RegExp(/^(\s*)([-*+])\s+\[([ xX])\]\s*(\S.*|)$/).exec(line);
     if (taskMatch) {
-        const checked = taskMatch[2] !== ' ';
+        const checked = taskMatch[3] !== ' ';
         return {
             indent: taskMatch[1].length,
             type: 'task',
-            content: `[${checked ? 'x' : ' '}] ${taskMatch[3]}`,
+            content: `[${checked ? 'x' : ' '}] ${taskMatch[4]}`,
             column: contentColumn(line, taskMatch[1].length + 1),
+            marker: taskMatch[2],
         };
     }
     // The content group is OPTIONAL. Requiring \s+ then a non-space meant an
@@ -2881,27 +3396,56 @@ function parseListLine(line) {
     // when a user opens a bullet and clicks away, so this hit an everyday
     // keystroke; for <ol> the second list also renumbered from 1.
     // A rule (--- / *** / ___) still does not match: it has no space.
-    const ulMatch = new RegExp(/^([ \t]*)[-*+]([ \t].*)?$/).exec(line);
+    const ulMatch = new RegExp(/^([ \t]*)([-*+])([ \t].*)?$/).exec(line);
     if (ulMatch) {
         return {
             indent: ulMatch[1].length,
             type: 'ul',
-            content: listItemContent(ulMatch[2]),
+            content: listItemContent(ulMatch[3]),
             column: contentColumn(line, ulMatch[1].length + 1),
+            marker: ulMatch[2],
         };
     }
-    const olMatch = new RegExp(/^([ \t]*)(\d{1,9})\.([ \t].*)?$/).exec(line);
+    // Both ordered delimiters, "." and ")". CommonMark has always allowed the
+    // second, and the writer needs it to end one ordered list before the next.
+    const olMatch = new RegExp(/^([ \t]*)(\d{1,9})([.)])([ \t].*)?$/).exec(line);
     if (olMatch) {
         return {
             indent: olMatch[1].length,
             type: 'ol',
-            content: listItemContent(olMatch[3]),
+            content: listItemContent(olMatch[4]),
             column: contentColumn(line, olMatch[1].length + olMatch[2].length + 1),
             number: Number.parseInt(olMatch[2], 10),
+            marker: olMatch[3],
         };
     }
     return null;
 }
+/** The two markers each kind of list alternates between; see {@link listMarkerFor}. */
+const UL_MARKERS = ['-', '*'];
+const OL_MARKERS = ['.', ')'];
+/** The previous sibling when it is a list of the same kind, so the two would merge. */
+function adjacentSiblingList(element) {
+    const previous = element.previousElementSibling;
+    return previous?.tagName === element.tagName ? previous : null;
+}
+/**
+ * The marker a list is written with, alternating along a run of sibling lists.
+ *
+ * A blank line does not end a list -- CommonMark ends one at a marker CHANGE --
+ * so two `<ol>`s side by side were written `1. a` / `1. b` and read back as ONE
+ * list with b renumbered to 2. Alternating the bullet character (for an ordered
+ * list, the delimiter after the number) puts a boundary the reader honours
+ * between every adjacent pair, and leaves a list with no list beside it written
+ * exactly as before.
+ */
+function listMarkerFor(listEl, type) {
+    const markers = type === 'ol' ? OL_MARKERS : UL_MARKERS;
+    let runs = 0;
+    for (let previous = adjacentSiblingList(listEl); previous; previous = adjacentSiblingList(previous))
+        runs++;
+    return markers[runs % markers.length];
+}
 /** How far a line is indented. */
 function indentOf(line) {
     return line.length - line.trimStart().length;
@@ -2991,7 +3535,7 @@ function holdLine(line, continuation, pendingBlank) {
     pendingBlank.length = 0;
 }
 /** Close the list levels that a line at `indent` of kind `type` does not continue. */
-function closeLevelsFor(stack, indent, type) {
+function closeLevelsFor(stack, indent, type, marker) {
     // Pop only DEEPER levels. Popping the current one too (`>=`) threw away the
     // list a sibling belongs to, so every line started a fresh one — an ordered
     // list renumbered from 1 on every row, and a screen reader announced
@@ -3000,8 +3544,12 @@ function closeLevelsFor(stack, indent, type) {
         stack.pop();
     }
     // A same-indent line of a DIFFERENT kind (bullet after numbered) is its own
-    // list, so that one context is replaced rather than appended.
-    if (stack.at(-1)?.indent === indent && stack.at(-1)?.type !== type) {
+    // list, so that one context is replaced rather than appended. A different
+    // MARKER of the same kind ends it just as surely -- that is CommonMark's
+    // only way to put two sibling lists of one kind next to each other, and the
+    // writer relies on it (see listMarkerFor).
+    const open = stack.at(-1);
+    if (open?.indent === indent && (open.type !== type || open.marker !== marker)) {
         stack.pop();
     }
 }
@@ -3012,7 +3560,7 @@ function pushListItem(stack, rootLists, line) {
         parent.items.push(item);
         return;
     }
-    const list = { type: line.type, items: [item], indent: line.indent, start: line.number ?? 1 };
+    const list = { type: line.type, items: [item], indent: line.indent, start: line.number ?? 1, marker: line.marker };
     if (parent)
         parent.items.at(-1)?.parts.push(list);
     else
@@ -3317,8 +3865,12 @@ function touchesWord(element) {
         || touches(nodeBeside(element, 'nextSibling'), /^[\p{L}\p{N}]/u);
 }
 function touches(node, letter) {
+    // A BLOCK sibling is not on this line and cannot run into the delimiters.
+    // Counted as touching, a task row's nested <ul> flipped the bold beside it
+    // to its tag form on the SECOND save -- the first save had moved the list
+    // next to it -- so the document kept changing after it had been saved once.
     if (node?.nodeType === Node.ELEMENT_NODE)
-        return (node.textContent ?? '') !== '';
+        return isPhrasing(node) && (node.textContent ?? '') !== '';
     return node?.nodeType === Node.TEXT_NODE && letter.test(node.textContent ?? '');
 }
 /**
@@ -3616,10 +4168,34 @@ function buildListContextHtml(ctx) {
 // half already does for parentheses. A flat [^\\]]* meant "see [1]" or
 // "[Draft] spec" -- everyday link and alt text -- did not match at all, so the
 // anchor was destroyed on save and its markdown source shown as page text.
+const TARGET_BODY = String.raw `(?:[^()]|\([^()]*\))`;
+const LINK_TEXT_BODY = String.raw `(?:[^[\]]|\[[^[\]]*\])`;
 const MEDIA_TARGET_PATTERN = {
-    image: /!\[((?:[^[\]]|\[[^[\]]*\]){0,4096})\]\(((?:[^()]|\([^()]*\))+)\)/g,
-    link: /\[((?:[^[\]]|\[[^[\]]*\]){1,4096})\]\(((?:[^()]|\([^()]*\)){1,4096})\)/g,
+    image: new RegExp(String.raw `!\[(${LINK_TEXT_BODY}{0,4096})\]\((${TARGET_BODY}+)\)`, 'g'),
+    link: new RegExp(String.raw `\[(${LINK_TEXT_BODY}{1,4096})\]\((${TARGET_BODY}{1,4096})\)`, 'g'),
 };
+/**
+ * The writer's half of {@link TARGET_BODY}: an address the reader hands back
+ * unchanged. It also refuses a backslash, which `protectEscapes` consumes
+ * before any target is matched, so a plain address holding one would not
+ * survive either.
+ */
+const PLAIN_TARGET = /^(?:[^()\\]|\([^()\\]*\))*$/;
+/**
+ * A link or image address as markdown source.
+ *
+ * The reader's grammar allows at most ONE level of balanced parentheses, so an
+ * address holding an odd or a nested ")" was cut at that character: the link
+ * pointed at the truncated prefix and the rest of the address landed on the
+ * page as visible text. CommonMark's answer is the backslash escape, and
+ * `protectEscapes` parks those before any target is matched, so no parenthesis
+ * is left for the grammar to trip on. An address the grammar already returns
+ * unchanged keeps its plain form, so ordinary URLs -- Wikipedia's
+ * "X_(disambiguation)" among them -- are written exactly as before.
+ */
+function markdownTarget(target) {
+    return PLAIN_TARGET.test(target) ? target : target.replaceAll(/[\\()]/g, String.raw `\$&`);
+}
 /**
  * Marker standing in for a character with Markdown meaning while the emphasis
  * passes run. Those passes regex over the WHOLE string, attribute values
@@ -3690,6 +4266,38 @@ const INDENTED_FENCE_TOKEN = /^\s+\d{1,9}\s*$/;
  * list item above it, whatever block it turns out to hold.
  */
 const CONTINUATION_LINE = /^ {2,}\S/;
+/** Columns a tab advances to, per CommonMark. */
+const TAB_STOP = 4;
+/**
+ * Every line's leading whitespace with its tabs advanced to the next
+ * four-column tab stop.
+ *
+ * CommonMark measures block indentation in COLUMNS (§2.2), while every
+ * indentation predicate here counts characters -- CONTINUATION_LINE, indentOf,
+ * contentColumn. A tab therefore read as one column, fell short of the item's
+ * continuation column, and the block escaped its list item: "- a" followed by a
+ * tab-indented quote came back as a list and a separate paragraph, and the next
+ * save wrote the quote marker as the literal characters "\> q". Expanding the
+ * tabs once, up front, lets all of those predicates stay character-based.
+ *
+ * Only the leading run is rewritten: a tab inside prose is content, not
+ * structure. Fenced and inline code are parked before this runs, so no tab
+ * inside code is ever seen.
+ */
+function expandLeadingTabs(text) {
+    if (!text.includes('\t'))
+        return text;
+    return text.split('\n').map(expandLineIndent).join('\n');
+}
+function expandLineIndent(line) {
+    const indent = /^[ \t]*/.exec(line)?.[0] ?? '';
+    if (!indent.includes('\t'))
+        return line;
+    let column = 0;
+    for (const ch of indent)
+        column += ch === '\t' ? TAB_STOP - (column % TAB_STOP) : 1;
+    return ' '.repeat(column) + line.slice(indent.length);
+}
 /** Private-use delimiters parking a raw HTML tag during the inline passes. */
 const RAW_TAG_OPEN = '';
 const RAW_TAG_CLOSE = '';
@@ -3971,6 +4579,10 @@ class RichTextMarkdownService {
         // -- rendering "</div>" as visible "&lt;/div&gt;".
         const protectedCode = [];
         html = this.protectCodeFences(html, protectedCode);
+        // AFTER the fences are parked, so a tab inside code is never rewritten,
+        // and BEFORE every block pass, all of which measure indentation in
+        // characters. See expandLeadingTabs.
+        html = expandLeadingTabs(html);
         // Inline code is lifted out with the fences and for the same reason: a
         // code span is inert text. parseInlineCode ran LAST, after the emphasis
         // and line-break passes had already rewritten its contents, so
@@ -4003,8 +4615,8 @@ class RichTextMarkdownService {
         // before this pass ever ran, and the break was silently dropped.
         html = this.parseLineBreaks(html);
         html = this.parseParagraphs(html, protectedTags);
-        html = this.parseImages(html, protectedInline, inlineSources, protectedTags);
-        html = this.parseLinks(html, inlineSources, protectedTags);
+        html = this.parseImages(html, protectedInline, inlineSources, protectedTags, protectedEscapes);
+        html = this.parseLinks(html, inlineSources, protectedTags, protectedEscapes);
         html = this.parseBoldItalic(html);
         html = this.parseStrikethrough(html);
         // After the emphasis passes, so the characters hidden in link and image
@@ -4469,7 +5081,7 @@ class RichTextMarkdownService {
                 result.push(...orphans, line);
                 continue;
             }
-            closeLevelsFor(stack, parsed.indent, parsed.type);
+            closeLevelsFor(stack, parsed.indent, parsed.type, parsed.marker);
             flushContinuation();
             pushListItem(stack, rootLists, parsed);
         }
@@ -4734,9 +5346,17 @@ class RichTextMarkdownService {
      * the query string broke. A target with a space is no target; only one that
      * held a code span or a tag is checked for it, since a plain target with a
      * space has always been read as a link.
-     */
-    targetSource(target, inlineSources, tagStore) {
-        const typed = decodeCharacterReferences(restoreParked(restoreParked(target, INLINE_CODE_OPEN, INLINE_CODE_CLOSE, inlineSources), RAW_TAG_OPEN, RAW_TAG_CLOSE, tagStore));
+     *
+     * A backslash escape is resolved LAST, after the character references: it is
+     * the author saying "this character, literally", so what it hands back must
+     * not be read as syntax again -- `\&amp;` means those five characters, not
+     * an ampersand. Resolving it here at all is what lets the writer escape a
+     * parenthesis the target grammar cannot carry (see markdownTarget): the real
+     * character reaches the sanitizer and the attribute, rather than the parked
+     * token, which sanitizeImageSrc percent-encoded into the address.
+     */
+    targetSource(target, inlineSources, tagStore, escapes) {
+        const typed = restoreParked(decodeCharacterReferences(restoreParked(restoreParked(target, INLINE_CODE_OPEN, INLINE_CODE_CLOSE, inlineSources), RAW_TAG_OPEN, RAW_TAG_CLOSE, tagStore)), ESCAPED_OPEN, ESCAPED_CLOSE, escapes);
         return holdsParkedToken(target) && /\s/.test(typed) ? null : typed;
     }
     /**
@@ -4748,12 +5368,49 @@ class RichTextMarkdownService {
     altText(alt, inlineStore, tagStore) {
         return restoreParked(resolveInlineCodeText(alt, inlineStore), RAW_TAG_OPEN, RAW_TAG_CLOSE, tagStore, (tag) => this.escapeHtml(tag));
     }
-    parseImages(html, inlineStore, inlineSources, tagStore) {
+    /**
+     * Park a tag this pass wrote in the raw-tag store, so no later pass can see
+     * inside it.
+     *
+     * The tag is written UNSHIELDED because parking supersedes the shield:
+     * restoreRawTags runs after unshieldUrls, so a shielded character parked in
+     * here would never be given back.
+     */
+    parkWrittenTag(tag, tagStore) {
+        const token = `${RAW_TAG_OPEN}${tagStore.length}${RAW_TAG_CLOSE}`;
+        tagStore.push(tag);
+        return token;
+    }
+    /**
+     * An `<img>` this pass wrote, with its attributes escaped but not shielded.
+     *
+     * Its alt text is DOCUMENT TEXT, which escapeHtmlInContent has already
+     * escaped, so only the quote is escaped again here -- escaping it twice
+     * brought a "<" back as the characters "&lt;", one more layer per save.
+     */
+    imageTag(attribute, target, alt) {
+        return `<img ${attribute}="${this.escapeHtml(target)}" alt="${alt.replaceAll('"', '&quot;')}">`;
+    }
+    /**
+     * Parse images ![alt](src).
+     *
+     * The tag is parked, not returned live. Left in the stream, its alt
+     * attribute was still document text as far as the passes that follow were
+     * concerned: parseLinks read `![a [b](u) c](i.png)` as a link INSIDE the
+     * attribute and wrote an `<a href="` into it, which ended the attribute and
+     * put the rest of the tag on the page. Shielding only hid `* _ \` ~`, so it
+     * could never have covered the bracket forms.
+     */
+    parseImages(html, inlineStore, inlineSources, tagStore, escapes) {
         return html.replaceAll(MEDIA_TARGET_PATTERN.image, (match, alt, target) => {
-            const src = this.targetSource(target, inlineSources, tagStore);
+            const src = this.targetSource(target, inlineSources, tagStore, escapes);
             if (src === null)
                 return match;
             const safeSrc = this.sanitizer.sanitizeImageSrc(src);
+            // An alt attribute is plain text: a parked code span restored in
+            // there would land as the literal string "<code>x</code>". Resolve
+            // it back to the text the author typed instead.
+            const plainAlt = this.altText(alt, inlineStore, tagStore);
             if (!safeSrc) {
                 // A POLICY-blocked image keeps its element and alt, so the
                 // reader sees a labelled frame rather than nothing and the block
@@ -4763,22 +5420,17 @@ class RichTextMarkdownService {
                 const blocked = this.sanitizer.takeBlockedByPolicy();
                 if (blocked === null)
                     return '';
-                const blockedAlt = this.altText(alt, inlineStore, tagStore);
-                return `<img data-blocked-src="${this.attr(blocked)}" alt="${this.textAttr(blockedAlt)}">`;
+                return this.parkWrittenTag(this.imageTag('data-blocked-src', blocked, plainAlt), tagStore);
             }
-            // An alt attribute is plain text: a parked code span restored in
-            // there would land as the literal string "<code>x</code>". Resolve
-            // it back to the text the author typed instead.
-            const plainAlt = this.altText(alt, inlineStore, tagStore);
-            return `<img src="${this.attr(safeSrc)}" alt="${this.textAttr(plainAlt)}">`;
+            return this.parkWrittenTag(this.imageTag('src', safeSrc, plainAlt), tagStore);
         });
     }
     /**
      * Parse links [text](url).
      */
-    parseLinks(html, inlineSources, tagStore) {
+    parseLinks(html, inlineSources, tagStore, escapes) {
         return html.replaceAll(MEDIA_TARGET_PATTERN.link, (match, text, target) => {
-            const url = this.targetSource(target, inlineSources, tagStore);
+            const url = this.targetSource(target, inlineSources, tagStore, escapes);
             if (url === null)
                 return match;
             const safeUrl = this.sanitizer.sanitizeUrl(url);
@@ -5070,7 +5722,7 @@ class RichTextMarkdownService {
         // of the link fused.
         if (inner.trim() === '')
             return `<a href="${this.escapeHtml(href)}"></a>${inner}`;
-        return `[${inner}](${href})`;
+        return `[${inner}](${markdownTarget(href)})`;
     }
     handleImageTag(element) {
         const alt = element.getAttribute('alt') ?? '';
@@ -5087,7 +5739,7 @@ class RichTextMarkdownService {
         // the paragraph inside the attribute, backticks or asterisks were read as
         // syntax, and "&copy;" or "<i>" came back as a character or a tag.
         const text = escapeMarkdownText(alt.replaceAll(/[ \t\n\r\f]+/g, ' '));
-        return `![${text}](${src})`;
+        return `![${text}](${markdownTarget(src)})`;
     }
     /**
      * Unwrap every span that is written as its text alone, so the text on either
@@ -5192,7 +5844,16 @@ class RichTextMarkdownService {
         // from opening and the code came back as paragraphs.
         const language = element.querySelector('code')?.dataset['language'] ?? '';
         const lang = /^[\w+#.-]+$/.test(language) ? language : '';
-        const codeContent = element.textContent ?? '';
+        // A fence is TEXT: it cannot carry an image, and a block written from
+        // textContent alone deleted one outright on the first save. The tag form
+        // can carry it and reads back verbatim, which is the answer inline code
+        // already gives for the same content.
+        if (element.querySelector('img'))
+            return this.preTagForm(element, lang, inListItem);
+        // Every line break, including a <br>. textContent counts a <br> as
+        // nothing, and Shift+Enter -- how a line is added inside a block --
+        // inserts one, so a function typed line by line was saved on one line.
+        const codeContent = codeTextOf(element);
         const indent = inListItem ? '  ' : '';
         const body = codeContent
             .split('\n')
@@ -5202,6 +5863,21 @@ class RichTextMarkdownService {
         const fence = '`'.repeat(Math.max(3, longestRun + 1));
         return `\n${indent}${fence}${lang}\n${body}\n${indent}${fence}\n`;
     }
+    /**
+     * A code block as its tag pair, on one markdown line.
+     *
+     * One line, with every newline written as a character reference, because a
+     * raw newline inside the pair would let the block passes split it: the
+     * `<pre>` and `</pre>` are parked separately and the lines between them are
+     * read as markdown. The reference decodes to the newline when the sanitizer
+     * parses the restored tag, so the code keeps its own line breaks.
+     */
+    preTagForm(element, language, inListItem) {
+        const code = element.querySelector('code') ?? element;
+        const lang = language ? ` data-language="${this.escapeHtml(language)}"` : '';
+        const indent = inListItem ? '  ' : '';
+        return `\n${indent}<pre><code${lang}>${this.codeTagContent(code)}</code></pre>\n`;
+    }
     handleUlTag(element) {
         const result = ['\n'];
         const isTask = 'taskList' in element.dataset;
@@ -5393,10 +6069,11 @@ class RichTextMarkdownService {
     listToMarkdown(listEl, type, indent, result) {
         const items = Array.from(listEl.children);
         const first = type === 'ol' ? listStartOf(listEl) : 1;
+        const marker = listMarkerFor(listEl, type);
         items.forEach((li, index) => {
             const [lead, ...rest] = itemRuns(li);
             const ordinal = first + index <= MAX_LIST_NUMBER ? first + index : first;
-            result.push(this.formatListItem(type, li, this.leadContent(li, lead, indent), indent, ordinal));
+            result.push(this.formatListItem(type, li, this.leadContent(li, lead, indent), indent, ordinal, marker));
             // Every sub-list, in order, with the content after each where it
             // falls. Only the last sub-list was kept, so an item holding two --
             // bullets under numbers, which indenting beside an existing sub-list of
@@ -5442,15 +6119,15 @@ class RichTextMarkdownService {
         // text vanished from the saved markdown while the HTML looked fine.
         return node.nodeType === Node.TEXT_NODE ? textToMarkdown(node) : this.elementToMarkdown(node);
     }
-    formatListItem(type, li, content, indent, ordinal) {
+    formatListItem(type, li, content, indent, ordinal, marker) {
         if (type === 'task') {
             const checked = li.dataset['checked'] === 'true';
-            return `${indent}- [${checked ? 'x' : ' '}] ${breaksAsTags(content)}\n`;
+            return `${indent}${marker} [${checked ? 'x' : ' '}] ${breaksAsTags(content)}\n`;
         }
         if (type === 'ol') {
-            return `${indent}${ordinal}. ${content}\n`;
+            return `${indent}${ordinal}${marker} ${content}\n`;
         }
-        return `${indent}- ${content}\n`;
+        return `${indent}${marker} ${content}\n`;
     }
     detectNestedListType(nestedList) {
         if ('taskList' in nestedList.dataset)
@@ -5611,15 +6288,6 @@ const SUBTREE_INDEPENDENT_TAGS = new Set(['table', 'img', 'input', 'pre', 'ul',
 const MAX_TABLE_ROWSPAN = 1000;
 /** Widest row a table may emit, bounding paste amplification. */
 const MAX_TABLE_COLUMNS = 1000;
-/**
- * How deep blocks nest before the reader leaves the rest as text; see
- * parseToggleBlocks and buildBlockquote. The reader counts a level for every
- * details body, quote holding a nested quote and list item's block, so a details
- * block nested through a list or a quote meets the same cap; a sub-list, read in
- * its parent's pass, adds none. The writer counts the same list items and every
- * quote (see nestingDepthOf), which is never less.
- */
-const MAX_NESTING_DEPTH = 32;
 /** HTML's own limit for a column span. */
 const MAX_COLSPAN = 1000;
 /** Blank-line boundary between blocks, captured so joining restores the text. */
@@ -9335,7 +10003,9 @@ const BLOCK_RULES = [
     { kind: 'heading3', pattern: /^#{3}$/, terminators: [' '] },
     { kind: 'bulletList', pattern: /^[-*]$/, terminators: [' '] },
     { kind: 'orderedList', pattern: /^\d{1,3}\.$/, terminators: [' '] },
-    { kind: 'blockquote', pattern: /^>$/, terminators: [' '] },
+    // A RUN of markers, one quote each. `/^>$/` matched exactly one, so a reader
+    // could load and round-trip a nested quote but an author could not type one.
+    { kind: 'blockquote', pattern: /^(>+)$/, terminators: [' '] },
     { kind: 'taskUnchecked', pattern: /^\[]$/, terminators: [' '] },
     { kind: 'taskChecked', pattern: /^\[[xX]]$/, terminators: [' '] },
     { kind: 'horizontalRule', pattern: /^-{3}$/, terminators: [''] },
@@ -9364,9 +10034,11 @@ function matchBlockInputRule(textBeforeCaret, terminator) {
         if (!match)
             continue;
         const markerLength = textBeforeCaret.length + terminator.length;
-        return rule.kind === 'codeBlock'
-            ? { kind: rule.kind, markerLength, language: match[1] ?? '' }
-            : { kind: rule.kind, markerLength };
+        if (rule.kind === 'codeBlock')
+            return { kind: rule.kind, markerLength, language: match[1] ?? '' };
+        if (rule.kind === 'blockquote')
+            return { kind: rule.kind, markerLength, depth: match[1].length };
+        return { kind: rule.kind, markerLength };
     }
     return null;
 }
@@ -9683,6 +10355,25 @@ const RICH_TEXT_PROSE_CLASSES = [
     '[&_details>:not(summary)]:px-3 [&_details>:not(summary)]:py-2',
     '[&_hr]:border-t [&_hr]:border-border [&_hr]:my-4',
     '[&_blockquote]:border-s-4 [&_blockquote]:border-border [&_blockquote]:ps-4 [&_blockquote]:py-1 [&_blockquote]:my-2 [&_blockquote]:text-muted-foreground [&_blockquote]:italic',
+    // Syntax highlighting. The classes are the ones the sanitizer has always
+    // allowed (`token`, `token-*`), so a document highlighted here and one
+    // pasted in already highlighted colour by one set of rules — see
+    // `lib/code-highlight.ts`.
+    //
+    // A code block sits on `bg-muted`, which is light in the light theme and
+    // dark in the dark one, so every colour needs both. `ui-code-block`'s own
+    // palette is not reused: it is tuned for that component's fixed
+    // `bg-zinc-950` surface and is unreadable on a light page.
+    '[&_.token-keyword]:text-violet-700 dark:[&_.token-keyword]:text-violet-300 [&_.token-keyword]:font-semibold',
+    '[&_.token-string]:text-emerald-700 dark:[&_.token-string]:text-emerald-300',
+    '[&_.token-comment]:text-muted-foreground [&_.token-comment]:italic',
+    '[&_.token-number]:text-amber-700 dark:[&_.token-number]:text-amber-300',
+    '[&_.token-function]:text-blue-700 dark:[&_.token-function]:text-blue-300',
+    '[&_.token-decorator]:text-fuchsia-700 dark:[&_.token-decorator]:text-fuchsia-300',
+    '[&_.token-tag]:text-rose-700 dark:[&_.token-tag]:text-rose-300',
+    '[&_.token-selector]:text-rose-700 dark:[&_.token-selector]:text-rose-300 [&_.token-selector]:font-semibold',
+    '[&_.token-attr]:text-sky-700 dark:[&_.token-attr]:text-sky-300',
+    '[&_.token-property]:text-sky-700 dark:[&_.token-property]:text-sky-300',
 ];
 
 /**
@@ -10039,6 +10730,9 @@ class RichTextEditorComponent extends RichTextEditorAddonHost {
         if (!this.editorDiv)
             return;
         this.editorDiv.nativeElement.innerHTML = html;
+        // Every block, because every block is new. This is the only path that
+        // repaints the whole document; typing repaints the caret's block alone.
+        highlightCodeBlocks(this.editorDiv.nativeElement);
         this.labelBlockedImages();
         this.selectedImageNode.set(null);
         this.tableCellSelected.set([]);
@@ -10139,6 +10833,11 @@ class RichTextEditorComponent extends RichTextEditorAddonHost {
         this.rootCommandRegistry = inject(RichTextCommandRegistry, { skipSelf: true });
         /** Output format: `'markdown'` converts to/from Markdown; `'html'` works with raw HTML. */
         this.mode = input('markdown', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+        /**
+         * Colour preset for this editor and its overlays — the names `change-theme`
+         * accepts. Unset, the editor follows the app's global tokens.
+         */
+        this.theme = input(...(ngDevMode ? [undefined, { debugName: "theme" }] : /* istanbul ignore next */ []));
         /** Visual border/focus style. See {@link EditorVariant}. */
         this.variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
         /** Text size preset for the editor content. See {@link EditorSize}. */
@@ -10228,6 +10927,18 @@ class RichTextEditorComponent extends RichTextEditorAddonHost {
          * on every keystroke.
          */
         this.findDebounceMs = input(150, ...(ngDevMode ? [{ debugName: "findDebounceMs" }] : /* istanbul ignore next */ []));
+        /**
+         * Milliseconds of quiet before the caret's code block is re-highlighted, so
+         * a burst of keystrokes repaints once. `0` repaints synchronously on every
+         * keystroke, which is what the unit suite uses.
+         *
+         * Highlighting is presentational only: the spans it paints never reach the
+         * value (`readContentFromEditor` unwraps them) and never reach the history,
+         * so this knob changes when colour catches up with typing and nothing else.
+         * Set it to a large number, or highlight nothing, by giving your fences a
+         * language the highlighter does not know.
+         */
+        this.codeHighlightDebounceMs = input(150, ...(ngDevMode ? [{ debugName: "codeHighlightDebounceMs" }] : /* istanbul ignore next */ []));
         /**
          * Hosts whose remote images and CSS backgrounds may load. Empty (the
          * default) means no policy: any `https://` source is permitted, which is how
@@ -10493,6 +11204,7 @@ class RichTextEditorComponent extends RichTextEditorAddonHost {
                 .replace('{total}', String(total));
         }, ...(ngDevMode ? [{ debugName: "findCounterText" }] : /* istanbul ignore next */ []));
         this.findDebounceTimer = null;
+        this.codeHighlightTimer = null;
         this.findOverlay = null;
         this.findRepaintHandle = null;
         this.findResizeObserver = null;
@@ -11068,7 +11780,7 @@ class RichTextEditorComponent extends RichTextEditorAddonHost {
         this.lastInputRule = null;
         const transformed = this.applyInputRules(event);
         this.sweepSpentCaretAnchors(div);
-        const html = this.sanitizer.sanitize(div.innerHTML).replaceAll('\u200B', '');
+        const html = this.sanitizer.sanitize(this.undecoratedMarkup(div)).replaceAll('\u200B', '');
         const triggerTextContent = this.buildTriggerAwareText(div.innerHTML);
         const selection = this.document.getSelection();
         const hasSelection = !!selection && selection.rangeCount > 0;
@@ -11087,6 +11799,10 @@ class RichTextEditorComponent extends RichTextEditorAddonHost {
         else {
             this.scheduleDebouncedHistoryPush();
         }
+        // LAST, and after the value has already been read: the repaint must
+        // never be what a reader of the document sees, only what the author
+        // does.
+        this.scheduleCodeHighlight();
     }
     /**
      * Template-bound `keydown` handler on the editable area, in strict priority
@@ -14840,6 +15556,7 @@ class RichTextEditorComponent extends RichTextEditorAddonHost {
     closeFindReplace() {
         const current = this.findMatches()[this.findCurrentIndex()]?.cloneRange();
         this.cancelPendingFind();
+        this.cancelPendingCodeHighlight();
         this.teardownFindOverlay();
         this.findReplaceVisible.set(false);
         this.findQuery.set('');
@@ -15482,10 +16199,30 @@ class RichTextEditorComponent extends RichTextEditorAddonHost {
         const editorElement = this.getEditorElement();
         if (!editorElement)
             return null;
-        const html = this.sanitizer.sanitize(editorElement.innerHTML).replaceAll('\u200B', '');
+        const html = this.sanitizer.sanitize(this.undecoratedMarkup(editorElement)).replaceAll('\u200B', '');
         this.htmlContent.set(html);
         return html;
     }
+    /**
+     * The editable's markup with the highlighter's spans unwrapped.
+     *
+     * Syntax colour is DECORATION: the author typed the code, not the spans
+     * around it, so they must not reach the value, the history or the markdown.
+     * Left in, every keystroke inside a fence emitted a different HTML string
+     * for the same code, and each undo step carried a repaint of its own.
+     *
+     * Read from a copy, so the live DOM \u2014 and with it the caret and the colour
+     * the author is looking at \u2014 is never touched. The copy is skipped entirely
+     * when the document carries no token span, which is every document with no
+     * code in it.
+     */
+    undecoratedMarkup(editorElement) {
+        if (!editorElement.querySelector('pre > code span.token'))
+            return editorElement.innerHTML;
+        const copy = editorElement.cloneNode(true);
+        stripCodeHighlighting(copy);
+        return copy.innerHTML;
+    }
     getMentionElementsInSelection() {
         const editor = this.getEditorElement();
         const selection = this.document.getSelection();
@@ -16260,6 +16997,29 @@ class RichTextEditorComponent extends RichTextEditorAddonHost {
         const quoted = line ? this.quoteLines([line]) : [];
         return quoted[0] ?? block;
     }
+    /**
+     * Quote one block `levels` deep, or as deep as the markdown reader's
+     * ceiling still allows.
+     *
+     * The ceiling is the READER's ({@link MAX_NESTING_DEPTH}), not one this rule
+     * invents: a quote nested past it is unwrapped when the document is read
+     * back, so building one here types a structure the next load throws away.
+     * Quotes the block ALREADY sits in count towards it, which is also what
+     * makes typing ">" inside a quote nest one level deeper instead of doing
+     * nothing.
+     *
+     * Every level is built inside the one snapshot `tryBlockRule` took, so the
+     * whole transform is a single undo step and Backspace restores all of the
+     * markers the author typed, not just the last one.
+     */
+    quoteBlockToDepth(block, levels) {
+        const editor = this.editorDiv?.nativeElement;
+        const room = MAX_NESTING_DEPTH - (editor ? blockquoteDepthOf(block, editor) : 0);
+        let quoted = block;
+        for (let level = 0; level < Math.min(levels, room); level++)
+            quoted = this.quoteBlock(quoted);
+        return quoted;
+    }
     /**
      * Wrap lines in one `<blockquote>` and return them as its lines.
      *
@@ -17181,7 +17941,7 @@ class RichTextEditorComponent extends RichTextEditorAddonHost {
             case 'orderedList':
                 return this.finishBlockRule(this.wrapBlockInList(block, 'ol'));
             case 'blockquote':
-                return this.finishBlockRule(this.quoteBlock(block));
+                return this.finishBlockRule(this.quoteBlockToDepth(block, match.depth ?? 1));
             case 'taskUnchecked':
                 return this.buildTaskBlock(block, false);
             case 'taskChecked':
@@ -17839,6 +18599,55 @@ class RichTextEditorComponent extends RichTextEditorAddonHost {
         this.tableCellSelecting = false;
         this.tableCellSelectAnchor = null;
     }
+    /**
+     * Repaint the caret's code block after {@link codeHighlightDebounceMs} of
+     * quiet. A debounce of 0 repaints inline.
+     */
+    scheduleCodeHighlight() {
+        this.cancelPendingCodeHighlight();
+        const delay = this.codeHighlightDebounceMs();
+        if (delay <= 0) {
+            this.highlightCaretCodeBlock();
+            return;
+        }
+        this.codeHighlightTimer = setTimeout(() => {
+            this.codeHighlightTimer = null;
+            this.highlightCaretCodeBlock();
+        }, delay);
+    }
+    cancelPendingCodeHighlight() {
+        if (this.codeHighlightTimer !== null) {
+            clearTimeout(this.codeHighlightTimer);
+            this.codeHighlightTimer = null;
+        }
+    }
+    /**
+     * Repaint the one code block the caret is in.
+     *
+     * The caret's block alone, not the document: a repaint replaces every node
+     * in the block, and doing that to a block the author is not in would detach
+     * whatever else held a reference to it for no visible gain. A wholesale
+     * load repaints everything, through {@link replaceEditorHtml}.
+     *
+     * Nothing here touches the history or the value. The spans are decoration:
+     * `readContentFromEditor` unwraps them before anything reads the document,
+     * so typing in a code block produces the same value it always did, and an
+     * undo step never has a repaint of its own to step through.
+     */
+    highlightCaretCodeBlock() {
+        const editor = this.editorDiv?.nativeElement;
+        if (!editor || this.isDisabled() || this.readonly())
+            return;
+        const selection = this.document.getSelection();
+        if (!selection || selection.rangeCount === 0)
+            return;
+        const start = selection.getRangeAt(0).startContainer;
+        const node = start.nodeType === Node.TEXT_NODE ? start.parentElement : start;
+        const code = node?.closest('pre > code');
+        if (!code || !editor.contains(code))
+            return;
+        highlightCodeElementKeepingCaret(code, languageOfCodeElement(code), selection);
+    }
     ngOnDestroy() {
         this.shortcutHandle?.unregister();
         this.shortcutHandle = null;
@@ -17853,7 +18662,7 @@ class RichTextEditorComponent extends RichTextEditorAddonHost {
         this.removeFloatingScrollListener();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: RichTextEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: RichTextEditorComponent, isStandalone: true, selector: "ui-rich-text-editor", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, toolbar: { classPropertyName: "toolbar", publicName: "toolbar", isSignal: true, isRequired: false, transformFunction: null }, toolbarItems: { classPropertyName: "toolbarItems", publicName: "toolbarItems", isSignal: true, isRequired: false, transformFunction: null }, customToolbarItems: { classPropertyName: "customToolbarItems", publicName: "customToolbarItems", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, markdownShortcuts: { classPropertyName: "markdownShortcuts", publicName: "markdownShortcuts", isSignal: true, isRequired: false, transformFunction: null }, counter: { classPropertyName: "counter", publicName: "counter", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, history: { classPropertyName: "history", publicName: "history", isSignal: true, isRequired: false, transformFunction: null }, findDebounceMs: { classPropertyName: "findDebounceMs", publicName: "findDebounceMs", isSignal: true, isRequired: false, transformFunction: null }, allowedImageHosts: { classPropertyName: "allowedImageHosts", publicName: "allowedImageHosts", isSignal: true, isRequired: false, transformFunction: null }, allowedLinkSchemes: { classPropertyName: "allowedLinkSchemes", publicName: "allowedLinkSchemes", isSignal: true, isRequired: false, transformFunction: null }, blockedImageMessage: { classPropertyName: "blockedImageMessage", publicName: "blockedImageMessage", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { customToolbarAction: "customToolbarAction", htmlChange: "htmlChange", markdownChange: "markdownChange", wordCountChange: "wordCountChange", historyChange: "historyChange", imageBlocked: "imageBlocked", focused: "focused", blurred: "blurred" }, host: { classAttribute: "block" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: RichTextEditorComponent, isStandalone: true, selector: "ui-rich-text-editor", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, toolbar: { classPropertyName: "toolbar", publicName: "toolbar", isSignal: true, isRequired: false, transformFunction: null }, toolbarItems: { classPropertyName: "toolbarItems", publicName: "toolbarItems", isSignal: true, isRequired: false, transformFunction: null }, customToolbarItems: { classPropertyName: "customToolbarItems", publicName: "customToolbarItems", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, markdownShortcuts: { classPropertyName: "markdownShortcuts", publicName: "markdownShortcuts", isSignal: true, isRequired: false, transformFunction: null }, counter: { classPropertyName: "counter", publicName: "counter", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, history: { classPropertyName: "history", publicName: "history", isSignal: true, isRequired: false, transformFunction: null }, findDebounceMs: { classPropertyName: "findDebounceMs", publicName: "findDebounceMs", isSignal: true, isRequired: false, transformFunction: null }, codeHighlightDebounceMs: { classPropertyName: "codeHighlightDebounceMs", publicName: "codeHighlightDebounceMs", isSignal: true, isRequired: false, transformFunction: null }, allowedImageHosts: { classPropertyName: "allowedImageHosts", publicName: "allowedImageHosts", isSignal: true, isRequired: false, transformFunction: null }, allowedLinkSchemes: { classPropertyName: "allowedLinkSchemes", publicName: "allowedLinkSchemes", isSignal: true, isRequired: false, transformFunction: null }, blockedImageMessage: { classPropertyName: "blockedImageMessage", publicName: "blockedImageMessage", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { customToolbarAction: "customToolbarAction", htmlChange: "htmlChange", markdownChange: "markdownChange", wordCountChange: "wordCountChange", historyChange: "historyChange", imageBlocked: "imageBlocked", focused: "focused", blurred: "blurred" }, host: { properties: { "attr.data-ui-theme": "theme()" }, classAttribute: "block" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => RichTextEditorComponent),
@@ -17875,7 +18684,7 @@ class RichTextEditorComponent extends RichTextEditorAddonHost {
             RichTextSanitizerService,
             RichTextMarkdownService,
             provideComponentLocale(() => RichTextEditorComponent),
-        ], viewQueries: [{ propertyName: "editorDiv", first: true, predicate: ["editorDiv"], descendants: true }, { propertyName: "editorContainer", first: true, predicate: ["editorContainer"], descendants: true }, { propertyName: "tableContextMenuRef", first: true, predicate: ["tableContextMenuRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (toolbar() === 'top' && !readonly()) {\n  <ui-rich-text-toolbar\n    [items]=\"toolbarItems()\"\n    [activeFormats]=\"activeFormats()\"\n    [textStyleAvailable]=\"textStyleAvailable()\"\n    [disabled]=\"isDisabled()\"\n    [readonly]=\"readonly()\"\n    [locale]=\"resolvedLocale()\"\n    (formatCommand)=\"onFormatCommand($event)\"\n    [addonSlots]=\"toolbarSlots.slots()\"\n    (addonSlotClick)=\"onAddonSlotClick($event)\"\n  />\n}\n\n<div #editorContainer [class]=\"editorContainerClasses()\" [dir]=\"resolvedDir()\">\n  <!--\n    Three of the attributes below exist for assistive tech specifically:\n\n    The tab index drops to -1 when disabled. A native disabled control leaves the\n    tab order entirely; a static 0 left a keyboard user stopping on an editor\n    that takes focus and then does nothing.\n\n    The readonly state is announced explicitly, because contenteditable false is\n    a browser editing hint rather than a state screen readers reliably report on\n    a textbox \u2014 without it a reader discovers the field is read-only by typing\n    and seeing nothing happen.\n\n    The placeholder is announced explicitly too, because the visible one is CSS\n    generated content. Chromium exposes that as a plain text child, so a reader\n    announces the hint as though it were the document's own text.\n  -->\n  <div\n    #editorDiv\n    [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n    [attr.contenteditable]=\"!isDisabled() && !readonly()\"\n    [attr.aria-disabled]=\"isDisabled()\"\n    [attr.aria-readonly]=\"readonly() ? 'true' : null\"\n    [class]=\"editableClasses()\"\n    [attr.placeholder]=\"placeholder() || resolvedLocale().editor.placeholder\"\n    [attr.aria-placeholder]=\"placeholder() || resolvedLocale().editor.placeholder\"\n    [attr.aria-label]=\"ariaLabel() || resolvedLocale().editor.ariaLabel\"\n    [attr.aria-describedby]=\"describedBy()\"\n    [attr.data-slot]=\"'rich-text-editor'\"\n    [style.min-height]=\"minHeight()\"\n    [style.max-height]=\"maxHeight()\"\n    role=\"textbox\"\n    aria-multiline=\"true\"\n    [attr.aria-expanded]=\"activeSuggestionPopup() ? 'true' : null\"\n    [attr.aria-controls]=\"activeSuggestionPopup()?.controlsId ?? null\"\n    [attr.aria-activedescendant]=\"activeSuggestionPopup()?.activeOptionId ?? null\"\n    (input)=\"onInput($event)\"\n    (beforeinput)=\"onBeforeInput($event)\"\n    (keydown)=\"onKeydown($event)\"\n    (paste)=\"onPaste($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur($event)\"\n    (mouseup)=\"onSelectionChange()\"\n    (keyup)=\"onSelectionChange()\"\n    (click)=\"onEditorClick($event)\"\n    (mousemove)=\"onEditorMouseMove($event)\"\n    (mousedown)=\"onEditorMouseDown($event)\"\n    (touchstart)=\"onEditorTouchStart($event)\"\n    (contextmenu)=\"onEditorContextMenu($event)\"\n    (dragover)=\"onEditorDragOver($event)\"\n    (dragleave)=\"onEditorDragLeave($event)\"\n    (drop)=\"onEditorDrop($event)\"\n  ></div>\n\n  @if (findReplaceVisible()) {\n    <div data-slot=\"rich-text-find-panel\"\n         class=\"absolute top-2 end-2 z-50 bg-popover border rounded-lg shadow-lg p-3 w-80 max-w-[calc(100vw-2rem)] max-sm:w-[calc(100%-1rem)] max-sm:start-2 animate-in slide-in-from-top-2 fade-in-0\"\n         tabindex=\"-1\"\n         (keydown.escape)=\"closeFindReplace()\"\n         (keydown)=\"onFindReplaceKeydown($event)\">\n      <div class=\"flex flex-wrap items-center gap-1.5 mb-2\">\n        <input\n          #findInput\n          data-slot=\"rich-text-find-query\"\n          type=\"text\"\n          [placeholder]=\"resolvedLocale().findReplace.findPlaceholder\"\n          [attr.aria-label]=\"resolvedLocale().findReplace.find\"\n          [attr.aria-invalid]=\"findRegexError() ? 'true' : null\"\n          [value]=\"findQuery()\"\n          (input)=\"onFindQueryChange($any($event.target).value)\"\n          class=\"flex h-7 min-w-0 flex-1 rounded-md border border-input bg-transparent px-2 py-1 text-xs shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring\"\n        />\n        <button type=\"button\"\n                class=\"inline-flex min-h-7 min-w-7 items-center justify-center rounded-md p-1 text-xs font-medium transition-colors hover:bg-accent\"\n                [class.bg-accent]=\"findCaseSensitive()\"\n                [attr.aria-pressed]=\"findCaseSensitive()\"\n                [attr.aria-label]=\"resolvedLocale().findReplace.caseSensitive\"\n                [title]=\"resolvedLocale().findReplace.caseSensitive\"\n                (click)=\"toggleFindCaseSensitive()\">Aa</button>\n        <button type=\"button\"\n                class=\"inline-flex min-h-7 min-w-7 items-center justify-center rounded-md p-1 text-xs font-medium transition-colors hover:bg-accent\"\n                [class.bg-accent]=\"findWholeWord()\"\n                [attr.aria-pressed]=\"findWholeWord()\"\n                [attr.aria-label]=\"resolvedLocale().findReplace.wholeWord\"\n                [title]=\"resolvedLocale().findReplace.wholeWord\"\n                (click)=\"toggleFindWholeWord()\">ab</button>\n        <button type=\"button\"\n                class=\"inline-flex min-h-7 min-w-7 items-center justify-center rounded-md p-1 text-xs font-medium transition-colors hover:bg-accent\"\n                [class.bg-accent]=\"findUseRegex()\"\n                [attr.aria-pressed]=\"findUseRegex()\"\n                [attr.aria-label]=\"resolvedLocale().findReplace.useRegex\"\n                [title]=\"resolvedLocale().findReplace.useRegex\"\n                (click)=\"toggleFindUseRegex()\">.*</button>\n      </div>\n      <div class=\"flex flex-wrap items-center justify-between gap-2 mb-2\">\n        <span data-slot=\"rich-text-find-counter\"\n              aria-live=\"polite\"\n              class=\"text-xs text-muted-foreground\">{{ findCounterText() }}</span>\n        <div class=\"flex gap-1\">\n          <button type=\"button\"\n                  class=\"inline-flex min-h-7 min-w-7 items-center justify-center rounded-md p-1 text-xs hover:bg-accent disabled:opacity-50\"\n                  [attr.aria-label]=\"resolvedLocale().findReplace.previous\"\n                  [title]=\"resolvedLocale().findReplace.previous\"\n                  [disabled]=\"findMatchCount() === 0\"\n                  (click)=\"findPrevious()\">&#x25B2;</button>\n          <button type=\"button\"\n                  class=\"inline-flex min-h-7 min-w-7 items-center justify-center rounded-md p-1 text-xs hover:bg-accent disabled:opacity-50\"\n                  [attr.aria-label]=\"resolvedLocale().findReplace.next\"\n                  [title]=\"resolvedLocale().findReplace.next\"\n                  [disabled]=\"findMatchCount() === 0\"\n                  (click)=\"findNext()\">&#x25BC;</button>\n          <button type=\"button\"\n                  class=\"inline-flex min-h-7 min-w-7 items-center justify-center rounded-md p-1 text-xs hover:bg-accent\"\n                  [attr.aria-label]=\"resolvedLocale().findReplace.close\"\n                  [title]=\"resolvedLocale().findReplace.close\"\n                  (click)=\"closeFindReplace()\">&#x2715;</button>\n        </div>\n      </div>\n      @if (showReplaceRow()) {\n        <div class=\"flex flex-wrap items-center gap-1.5\">\n          <input\n            data-slot=\"rich-text-find-replace\"\n            type=\"text\"\n            [placeholder]=\"resolvedLocale().findReplace.replacePlaceholder\"\n            [attr.aria-label]=\"resolvedLocale().findReplace.replace\"\n            [value]=\"replaceText()\"\n            (input)=\"replaceText.set($any($event.target).value)\"\n            class=\"flex h-7 min-w-0 flex-1 rounded-md border border-input bg-transparent px-2 py-1 text-xs shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring\"\n          />\n          <button type=\"button\" class=\"inline-flex min-h-7 items-center justify-center rounded-md px-2 py-1 text-xs hover:bg-accent whitespace-nowrap disabled:opacity-50\" [disabled]=\"findMatchCount() === 0\" (click)=\"replaceSingle()\">{{ resolvedLocale().findReplace.replace }}</button>\n          <button type=\"button\" class=\"inline-flex min-h-7 items-center justify-center rounded-md px-2 py-1 text-xs hover:bg-accent whitespace-nowrap disabled:opacity-50\" [disabled]=\"findMatchCount() === 0\" (click)=\"replaceAll()\">{{ resolvedLocale().findReplace.replaceAll }}</button>\n        </div>\n      }\n    </div>\n  }\n\n  @if (dragOver()) {\n    <div class=\"absolute inset-0 pointer-events-none border-2 border-dashed border-primary/60 rounded-md bg-primary/5\"></div>\n  }\n\n  @if (toolbar() === 'floating' && !readonly() && showFloatingToolbar()) {\n    <div \n      class=\"fixed z-[9999] bg-popover border rounded-lg shadow-lg p-1\"\n      [style.left.px]=\"floatingToolbarPosition().x\"\n      [style.top.px]=\"floatingToolbarPosition().y\"\n    >\n      <ui-rich-text-toolbar\n        [items]=\"['bold', 'italic', 'underline', 'separator', 'clear']\"\n        [activeFormats]=\"emptyFormats\"\n        [compact]=\"true\"\n        [disabled]=\"isDisabled()\"\n        [readonly]=\"readonly()\"\n        [locale]=\"resolvedLocale()\"\n        (formatCommand)=\"onFloatingFormatCommand($event)\"\n        [addonSlots]=\"toolbarSlots.slots()\"\n        (addonSlotClick)=\"onAddonSlotClick($event)\"\n      />\n    </div>\n  }\n\n  @if (tableContextMenuOpen()) {\n    <div\n      #tableContextMenuRef\n      class=\"fixed z-50 min-w-[180px] max-w-[calc(100vw-2rem)] max-h-[calc(100vh-1rem)] overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95\"\n      [style.left.px]=\"tableContextMenuPosition().x\"\n      [style.top.px]=\"tableContextMenuPosition().y\"\n      (mousedown)=\"$event.preventDefault()\"\n      (contextmenu)=\"onContextMenuOverlayContextMenu($event)\"\n    >\n      <button type=\"button\" class=\"relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground\" (click)=\"addTableRowAbove()\">\n        {{ resolvedLocale().table.addRowAbove }}\n      </button>\n      <button type=\"button\" class=\"relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground\" (click)=\"addTableRowBelow()\">\n        {{ resolvedLocale().table.addRowBelow }}\n      </button>\n      <div class=\"my-1 h-px bg-border\"></div>\n      <button type=\"button\" class=\"relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground\" (click)=\"addTableColumnLeft()\">\n        {{ resolvedLocale().table.addColumnLeft }}\n      </button>\n      <button type=\"button\" class=\"relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground\" (click)=\"addTableColumnRight()\">\n        {{ resolvedLocale().table.addColumnRight }}\n      </button>\n      <div class=\"my-1 h-px bg-border\"></div>\n      <button type=\"button\" class=\"relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground\" (click)=\"toggleTableHeaderRow()\">\n        {{ resolvedLocale().table.toggleHeaderRow }}\n      </button>\n      <div class=\"my-1 h-px bg-border\"></div>\n      @if (tableCellSelected().length >= 2) {\n        <button type=\"button\" class=\"relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground\" (click)=\"mergeCells()\">\n          {{ resolvedLocale().table.mergeCells }}\n        </button>\n      }\n      @if (canSplitCell()) {\n        <button type=\"button\" class=\"relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground\" (click)=\"splitCell()\">\n          {{ resolvedLocale().table.splitCell }}\n        </button>\n      }\n      @if (tableCellSelected().length >= 2 || canSplitCell()) {\n        <div class=\"my-1 h-px bg-border\"></div>\n      }\n      <div class=\"px-2 py-1.5\">\n        <div class=\"text-xs text-muted-foreground mb-1.5\">{{ resolvedLocale().table.borders }}</div>\n        <div class=\"flex items-center gap-1\">\n          <button type=\"button\" class=\"flex items-center justify-center w-7 h-7 rounded border border-transparent hover:border-border hover:bg-accent\" [title]=\"resolvedLocale().table.bordersAll\" (click)=\"setTableBorders('all')\">\n            <svg viewBox=\"0 0 20 20\" class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\n              <rect x=\"1\" y=\"1\" width=\"18\" height=\"18\" /><line x1=\"10\" y1=\"1\" x2=\"10\" y2=\"19\" /><line x1=\"1\" y1=\"10\" x2=\"19\" y2=\"10\" />\n            </svg>\n          </button>\n          <button type=\"button\" class=\"flex items-center justify-center w-7 h-7 rounded border border-transparent hover:border-border hover:bg-accent\" [title]=\"resolvedLocale().table.bordersNone\" (click)=\"setTableBorders('none')\">\n            <svg viewBox=\"0 0 20 20\" class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\" opacity=\"0.35\">\n              <rect x=\"1\" y=\"1\" width=\"18\" height=\"18\" stroke-dasharray=\"2 2\" /><line x1=\"10\" y1=\"1\" x2=\"10\" y2=\"19\" stroke-dasharray=\"2 2\" /><line x1=\"1\" y1=\"10\" x2=\"19\" y2=\"10\" stroke-dasharray=\"2 2\" />\n            </svg>\n          </button>\n          <button type=\"button\" class=\"flex items-center justify-center w-7 h-7 rounded border border-transparent hover:border-border hover:bg-accent\" [title]=\"resolvedLocale().table.bordersOuter\" (click)=\"setTableBorders('outer')\">\n            <svg viewBox=\"0 0 20 20\" class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\">\n              <rect x=\"1\" y=\"1\" width=\"18\" height=\"18\" stroke-width=\"1.5\" /><line x1=\"10\" y1=\"1\" x2=\"10\" y2=\"19\" stroke-width=\"1\" opacity=\"0.25\" stroke-dasharray=\"2 2\" /><line x1=\"1\" y1=\"10\" x2=\"19\" y2=\"10\" stroke-width=\"1\" opacity=\"0.25\" stroke-dasharray=\"2 2\" />\n            </svg>\n          </button>\n          <button type=\"button\" class=\"flex items-center justify-center w-7 h-7 rounded border border-transparent hover:border-border hover:bg-accent\" [title]=\"resolvedLocale().table.bordersHorizontal\" (click)=\"setTableBorders('horizontal')\">\n            <svg viewBox=\"0 0 20 20\" class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\">\n              <line x1=\"1\" y1=\"1\" x2=\"19\" y2=\"1\" stroke-width=\"1.5\" /><line x1=\"1\" y1=\"10\" x2=\"19\" y2=\"10\" stroke-width=\"1.5\" /><line x1=\"1\" y1=\"19\" x2=\"19\" y2=\"19\" stroke-width=\"1.5\" />\n            </svg>\n          </button>\n        </div>\n      </div>\n      <div class=\"my-1 h-px bg-border\"></div>\n      <div class=\"px-2 py-1.5\">\n        <div class=\"text-xs text-muted-foreground mb-1.5\">{{ resolvedLocale().table.cellAlignLeft }}</div>\n        <div class=\"flex items-center gap-1\" dir=\"ltr\">\n          <button type=\"button\" class=\"flex items-center justify-center w-7 h-7 rounded border border-transparent hover:border-border hover:bg-accent\" [title]=\"resolvedLocale().table.cellAlignLeft\" (click)=\"setCellAlignment('left')\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\"/><line x1=\"15\" x2=\"3\" y1=\"12\" y2=\"12\"/><line x1=\"17\" x2=\"3\" y1=\"18\" y2=\"18\"/></svg>\n          </button>\n          <button type=\"button\" class=\"flex items-center justify-center w-7 h-7 rounded border border-transparent hover:border-border hover:bg-accent\" [title]=\"resolvedLocale().table.cellAlignCenter\" (click)=\"setCellAlignment('center')\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\"/><line x1=\"17\" x2=\"7\" y1=\"12\" y2=\"12\"/><line x1=\"19\" x2=\"5\" y1=\"18\" y2=\"18\"/></svg>\n          </button>\n          <button type=\"button\" class=\"flex items-center justify-center w-7 h-7 rounded border border-transparent hover:border-border hover:bg-accent\" [title]=\"resolvedLocale().table.cellAlignRight\" (click)=\"setCellAlignment('right')\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\"/><line x1=\"21\" x2=\"9\" y1=\"12\" y2=\"12\"/><line x1=\"21\" x2=\"7\" y1=\"18\" y2=\"18\"/></svg>\n          </button>\n        </div>\n      </div>\n      <div class=\"px-2 py-1.5\">\n        <div class=\"text-xs text-muted-foreground mb-1.5\">{{ resolvedLocale().table.cellColor }}</div>\n        <div class=\"grid grid-cols-8 gap-0.5\">\n          @for (color of tableCellColors; track color) {\n            <button type=\"button\" class=\"w-4 h-4 rounded border border-border hover:scale-110 transition-transform\" [style.background-color]=\"color\" [attr.aria-label]=\"color\" (click)=\"setCellColor(color)\"></button>\n          }\n        </div>\n      </div>\n      <div class=\"my-1 h-px bg-border\"></div>\n      <button type=\"button\" class=\"relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground text-destructive\" (click)=\"deleteTableRow()\">\n        {{ resolvedLocale().table.deleteRow }}\n      </button>\n      <button type=\"button\" class=\"relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground text-destructive\" (click)=\"deleteTableColumn()\">\n        {{ resolvedLocale().table.deleteColumn }}\n      </button>\n      <button type=\"button\" class=\"relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground text-destructive\" (click)=\"deleteTable()\">\n        {{ resolvedLocale().table.deleteTable }}\n      </button>\n    </div>\n  }\n</div>\n\n@if (showCount() || showWordCount()) {\n  <!--\n    A polite status region, so a screen reader hears the count change, and the\n    limit is shown once one is set: enforcement used to be entirely silent,\n    so hitting maxLength read as a dead keyboard with the counter still showing\n    a bare number and no indication a limit existed at all. The colour change\n    at the limit gives sighted users the same signal.\n  -->\n  <output [attr.id]=\"counterId\" class=\"flex justify-end text-xs text-muted-foreground mt-1 px-1\" aria-live=\"polite\">\n    @if (showCount()) {\n      <!--\n        The localized phrase keeps its own {count}, and the limit follows as a\n        separate parenthetical. Interpolating \"0 / 120\" INTO the slot produced\n        \"0 / 120 characters\", which is wrong in English and cannot be localized\n        at all -- a locale ordering it differently had no way to express it,\n        because the separator was hardcoded in the template expression.\n      -->\n      <span [class.text-destructive]=\"atCharacterLimit()\" [class.font-medium]=\"atCharacterLimit()\">\n        {{ interpolateLocale(resolvedLocale().editor.characters, { count: characterCount() }) }}@if (maxLength()) {<span class=\"ms-1\">({{ maxLength() }} max)</span>}\n      </span>\n    }\n    @if (showWordCount()) {\n      <span [class.ms-3]=\"showCount()\">{{ interpolateLocale(resolvedLocale().editor.words, { count: wordCount() }) }}</span>\n    }\n  </output>\n}\n", styles: ["@media print{:host{display:block;overflow:visible}:host [data-slot=rich-text-editor]{max-height:none!important;height:auto!important;overflow:visible!important;border:none}:host [role=toolbar],:host [data-slot=rich-text-floating-toolbar],:host [data-slot=rich-text-find-overlay],:host [data-slot=rich-text-outline-panel],:host [data-slot=rich-text-history-badge]{display:none!important}:host tr,:host img{break-inside:avoid}:host h1,:host h2,:host h3{break-after:avoid}}:host img[data-blocked-src]{display:inline-flex;align-items:center;justify-content:center;min-width:8rem;min-height:4.5rem;padding:calc(.75rem * var(--_d));border:1px dashed var(--border);border-radius:var(--radius);background-color:color-mix(in oklab,var(--muted) 60%,transparent);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);color:var(--muted-foreground);font-size:.75rem;line-height:1.4;text-align:center;font-style:italic}:host img[data-blocked-src]:after{content:attr(data-blocked-label)}\n"], dependencies: [{ kind: "component", type: RichTextToolbarComponent, selector: "ui-rich-text-toolbar", inputs: ["items", "activeFormats", "compact", "class", "disabled", "readonly", "textStyleAvailable", "locale", "addonSlots"], outputs: ["formatCommand", "addonSlotClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "editorDiv", first: true, predicate: ["editorDiv"], descendants: true }, { propertyName: "editorContainer", first: true, predicate: ["editorContainer"], descendants: true }, { propertyName: "tableContextMenuRef", first: true, predicate: ["tableContextMenuRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (toolbar() === 'top' && !readonly()) {\n  <ui-rich-text-toolbar\n    [items]=\"toolbarItems()\"\n    [activeFormats]=\"activeFormats()\"\n    [textStyleAvailable]=\"textStyleAvailable()\"\n    [disabled]=\"isDisabled()\"\n    [readonly]=\"readonly()\"\n    [locale]=\"resolvedLocale()\"\n    (formatCommand)=\"onFormatCommand($event)\"\n    [addonSlots]=\"toolbarSlots.slots()\"\n    (addonSlotClick)=\"onAddonSlotClick($event)\"\n  />\n}\n\n<div #editorContainer [class]=\"editorContainerClasses()\" [dir]=\"resolvedDir()\">\n  <!--\n    Three of the attributes below exist for assistive tech specifically:\n\n    The tab index drops to -1 when disabled. A native disabled control leaves the\n    tab order entirely; a static 0 left a keyboard user stopping on an editor\n    that takes focus and then does nothing.\n\n    The readonly state is announced explicitly, because contenteditable false is\n    a browser editing hint rather than a state screen readers reliably report on\n    a textbox \u2014 without it a reader discovers the field is read-only by typing\n    and seeing nothing happen.\n\n    The placeholder is announced explicitly too, because the visible one is CSS\n    generated content. Chromium exposes that as a plain text child, so a reader\n    announces the hint as though it were the document's own text.\n  -->\n  <div\n    #editorDiv\n    [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n    [attr.contenteditable]=\"!isDisabled() && !readonly()\"\n    [attr.aria-disabled]=\"isDisabled()\"\n    [attr.aria-readonly]=\"readonly() ? 'true' : null\"\n    [class]=\"editableClasses()\"\n    [attr.placeholder]=\"placeholder() || resolvedLocale().editor.placeholder\"\n    [attr.aria-placeholder]=\"placeholder() || resolvedLocale().editor.placeholder\"\n    [attr.aria-label]=\"ariaLabel() || resolvedLocale().editor.ariaLabel\"\n    [attr.aria-describedby]=\"describedBy()\"\n    [attr.data-slot]=\"'rich-text-editor'\"\n    [style.min-height]=\"minHeight()\"\n    [style.max-height]=\"maxHeight()\"\n    role=\"textbox\"\n    aria-multiline=\"true\"\n    [attr.aria-expanded]=\"activeSuggestionPopup() ? 'true' : null\"\n    [attr.aria-controls]=\"activeSuggestionPopup()?.controlsId ?? null\"\n    [attr.aria-activedescendant]=\"activeSuggestionPopup()?.activeOptionId ?? null\"\n    (input)=\"onInput($event)\"\n    (beforeinput)=\"onBeforeInput($event)\"\n    (keydown)=\"onKeydown($event)\"\n    (paste)=\"onPaste($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur($event)\"\n    (mouseup)=\"onSelectionChange()\"\n    (keyup)=\"onSelectionChange()\"\n    (click)=\"onEditorClick($event)\"\n    (mousemove)=\"onEditorMouseMove($event)\"\n    (mousedown)=\"onEditorMouseDown($event)\"\n    (touchstart)=\"onEditorTouchStart($event)\"\n    (contextmenu)=\"onEditorContextMenu($event)\"\n    (dragover)=\"onEditorDragOver($event)\"\n    (dragleave)=\"onEditorDragLeave($event)\"\n    (drop)=\"onEditorDrop($event)\"\n  ></div>\n\n  @if (findReplaceVisible()) {\n    <div data-slot=\"rich-text-find-panel\"\n         class=\"absolute top-2 end-2 z-50 bg-popover border rounded-lg shadow-lg p-3 w-80 max-w-[calc(100vw-2rem)] max-sm:w-[calc(100%-1rem)] max-sm:start-2 animate-in slide-in-from-top-2 fade-in-0\"\n         tabindex=\"-1\"\n         (keydown.escape)=\"closeFindReplace()\"\n         (keydown)=\"onFindReplaceKeydown($event)\">\n      <div class=\"flex flex-wrap items-center gap-1.5 mb-2\">\n        <input\n          #findInput\n          data-slot=\"rich-text-find-query\"\n          type=\"text\"\n          [placeholder]=\"resolvedLocale().findReplace.findPlaceholder\"\n          [attr.aria-label]=\"resolvedLocale().findReplace.find\"\n          [attr.aria-invalid]=\"findRegexError() ? 'true' : null\"\n          [value]=\"findQuery()\"\n          (input)=\"onFindQueryChange($any($event.target).value)\"\n          class=\"flex h-7 min-w-0 flex-1 rounded-md border border-input bg-transparent px-2 py-1 text-xs shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring\"\n        />\n        <button type=\"button\"\n                class=\"inline-flex min-h-7 min-w-7 items-center justify-center rounded-md p-1 text-xs font-medium transition-colors hover:bg-accent\"\n                [class.bg-accent]=\"findCaseSensitive()\"\n                [attr.aria-pressed]=\"findCaseSensitive()\"\n                [attr.aria-label]=\"resolvedLocale().findReplace.caseSensitive\"\n                [title]=\"resolvedLocale().findReplace.caseSensitive\"\n                (click)=\"toggleFindCaseSensitive()\">Aa</button>\n        <button type=\"button\"\n                class=\"inline-flex min-h-7 min-w-7 items-center justify-center rounded-md p-1 text-xs font-medium transition-colors hover:bg-accent\"\n                [class.bg-accent]=\"findWholeWord()\"\n                [attr.aria-pressed]=\"findWholeWord()\"\n                [attr.aria-label]=\"resolvedLocale().findReplace.wholeWord\"\n                [title]=\"resolvedLocale().findReplace.wholeWord\"\n                (click)=\"toggleFindWholeWord()\">ab</button>\n        <button type=\"button\"\n                class=\"inline-flex min-h-7 min-w-7 items-center justify-center rounded-md p-1 text-xs font-medium transition-colors hover:bg-accent\"\n                [class.bg-accent]=\"findUseRegex()\"\n                [attr.aria-pressed]=\"findUseRegex()\"\n                [attr.aria-label]=\"resolvedLocale().findReplace.useRegex\"\n                [title]=\"resolvedLocale().findReplace.useRegex\"\n                (click)=\"toggleFindUseRegex()\">.*</button>\n      </div>\n      <div class=\"flex flex-wrap items-center justify-between gap-2 mb-2\">\n        <span data-slot=\"rich-text-find-counter\"\n              aria-live=\"polite\"\n              class=\"text-xs text-muted-foreground\">{{ findCounterText() }}</span>\n        <div class=\"flex gap-1\">\n          <button type=\"button\"\n                  class=\"inline-flex min-h-7 min-w-7 items-center justify-center rounded-md p-1 text-xs hover:bg-accent disabled:opacity-50\"\n                  [attr.aria-label]=\"resolvedLocale().findReplace.previous\"\n                  [title]=\"resolvedLocale().findReplace.previous\"\n                  [disabled]=\"findMatchCount() === 0\"\n                  (click)=\"findPrevious()\">&#x25B2;</button>\n          <button type=\"button\"\n                  class=\"inline-flex min-h-7 min-w-7 items-center justify-center rounded-md p-1 text-xs hover:bg-accent disabled:opacity-50\"\n                  [attr.aria-label]=\"resolvedLocale().findReplace.next\"\n                  [title]=\"resolvedLocale().findReplace.next\"\n                  [disabled]=\"findMatchCount() === 0\"\n                  (click)=\"findNext()\">&#x25BC;</button>\n          <button type=\"button\"\n                  class=\"inline-flex min-h-7 min-w-7 items-center justify-center rounded-md p-1 text-xs hover:bg-accent\"\n                  [attr.aria-label]=\"resolvedLocale().findReplace.close\"\n                  [title]=\"resolvedLocale().findReplace.close\"\n                  (click)=\"closeFindReplace()\">&#x2715;</button>\n        </div>\n      </div>\n      @if (showReplaceRow()) {\n        <div class=\"flex flex-wrap items-center gap-1.5\">\n          <input\n            data-slot=\"rich-text-find-replace\"\n            type=\"text\"\n            [placeholder]=\"resolvedLocale().findReplace.replacePlaceholder\"\n            [attr.aria-label]=\"resolvedLocale().findReplace.replace\"\n            [value]=\"replaceText()\"\n            (input)=\"replaceText.set($any($event.target).value)\"\n            class=\"flex h-7 min-w-0 flex-1 rounded-md border border-input bg-transparent px-2 py-1 text-xs shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring\"\n          />\n          <button type=\"button\" class=\"inline-flex min-h-7 items-center justify-center rounded-md px-2 py-1 text-xs hover:bg-accent whitespace-nowrap disabled:opacity-50\" [disabled]=\"findMatchCount() === 0\" (click)=\"replaceSingle()\">{{ resolvedLocale().findReplace.replace }}</button>\n          <button type=\"button\" class=\"inline-flex min-h-7 items-center justify-center rounded-md px-2 py-1 text-xs hover:bg-accent whitespace-nowrap disabled:opacity-50\" [disabled]=\"findMatchCount() === 0\" (click)=\"replaceAll()\">{{ resolvedLocale().findReplace.replaceAll }}</button>\n        </div>\n      }\n    </div>\n  }\n\n  @if (dragOver()) {\n    <div class=\"absolute inset-0 pointer-events-none border-2 border-dashed border-primary/60 rounded-md bg-primary/5\"></div>\n  }\n\n  @if (toolbar() === 'floating' && !readonly() && showFloatingToolbar()) {\n    <div \n      class=\"fixed z-[9999] bg-popover border rounded-lg shadow-lg p-1\"\n      [style.left.px]=\"floatingToolbarPosition().x\"\n      [style.top.px]=\"floatingToolbarPosition().y\"\n    >\n      <ui-rich-text-toolbar\n        [items]=\"['bold', 'italic', 'underline', 'separator', 'clear']\"\n        [activeFormats]=\"emptyFormats\"\n        [compact]=\"true\"\n        [disabled]=\"isDisabled()\"\n        [readonly]=\"readonly()\"\n        [locale]=\"resolvedLocale()\"\n        (formatCommand)=\"onFloatingFormatCommand($event)\"\n        [addonSlots]=\"toolbarSlots.slots()\"\n        (addonSlotClick)=\"onAddonSlotClick($event)\"\n      />\n    </div>\n  }\n\n  @if (tableContextMenuOpen()) {\n    <div\n      #tableContextMenuRef\n      class=\"fixed z-50 min-w-[180px] max-w-[calc(100vw-2rem)] max-h-[calc(100vh-1rem)] overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95\"\n      [style.left.px]=\"tableContextMenuPosition().x\"\n      [style.top.px]=\"tableContextMenuPosition().y\"\n      (mousedown)=\"$event.preventDefault()\"\n      (contextmenu)=\"onContextMenuOverlayContextMenu($event)\"\n    >\n      <button type=\"button\" class=\"relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground\" (click)=\"addTableRowAbove()\">\n        {{ resolvedLocale().table.addRowAbove }}\n      </button>\n      <button type=\"button\" class=\"relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground\" (click)=\"addTableRowBelow()\">\n        {{ resolvedLocale().table.addRowBelow }}\n      </button>\n      <div class=\"my-1 h-px bg-border\"></div>\n      <button type=\"button\" class=\"relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground\" (click)=\"addTableColumnLeft()\">\n        {{ resolvedLocale().table.addColumnLeft }}\n      </button>\n      <button type=\"button\" class=\"relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground\" (click)=\"addTableColumnRight()\">\n        {{ resolvedLocale().table.addColumnRight }}\n      </button>\n      <div class=\"my-1 h-px bg-border\"></div>\n      <button type=\"button\" class=\"relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground\" (click)=\"toggleTableHeaderRow()\">\n        {{ resolvedLocale().table.toggleHeaderRow }}\n      </button>\n      <div class=\"my-1 h-px bg-border\"></div>\n      @if (tableCellSelected().length >= 2) {\n        <button type=\"button\" class=\"relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground\" (click)=\"mergeCells()\">\n          {{ resolvedLocale().table.mergeCells }}\n        </button>\n      }\n      @if (canSplitCell()) {\n        <button type=\"button\" class=\"relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground\" (click)=\"splitCell()\">\n          {{ resolvedLocale().table.splitCell }}\n        </button>\n      }\n      @if (tableCellSelected().length >= 2 || canSplitCell()) {\n        <div class=\"my-1 h-px bg-border\"></div>\n      }\n      <div class=\"px-2 py-1.5\">\n        <div class=\"text-xs text-muted-foreground mb-1.5\">{{ resolvedLocale().table.borders }}</div>\n        <div class=\"flex items-center gap-1\">\n          <button type=\"button\" class=\"flex items-center justify-center w-7 h-7 rounded border border-transparent hover:border-border hover:bg-accent\" [title]=\"resolvedLocale().table.bordersAll\" (click)=\"setTableBorders('all')\">\n            <svg viewBox=\"0 0 20 20\" class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\n              <rect x=\"1\" y=\"1\" width=\"18\" height=\"18\" /><line x1=\"10\" y1=\"1\" x2=\"10\" y2=\"19\" /><line x1=\"1\" y1=\"10\" x2=\"19\" y2=\"10\" />\n            </svg>\n          </button>\n          <button type=\"button\" class=\"flex items-center justify-center w-7 h-7 rounded border border-transparent hover:border-border hover:bg-accent\" [title]=\"resolvedLocale().table.bordersNone\" (click)=\"setTableBorders('none')\">\n            <svg viewBox=\"0 0 20 20\" class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\" opacity=\"0.35\">\n              <rect x=\"1\" y=\"1\" width=\"18\" height=\"18\" stroke-dasharray=\"2 2\" /><line x1=\"10\" y1=\"1\" x2=\"10\" y2=\"19\" stroke-dasharray=\"2 2\" /><line x1=\"1\" y1=\"10\" x2=\"19\" y2=\"10\" stroke-dasharray=\"2 2\" />\n            </svg>\n          </button>\n          <button type=\"button\" class=\"flex items-center justify-center w-7 h-7 rounded border border-transparent hover:border-border hover:bg-accent\" [title]=\"resolvedLocale().table.bordersOuter\" (click)=\"setTableBorders('outer')\">\n            <svg viewBox=\"0 0 20 20\" class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\">\n              <rect x=\"1\" y=\"1\" width=\"18\" height=\"18\" stroke-width=\"1.5\" /><line x1=\"10\" y1=\"1\" x2=\"10\" y2=\"19\" stroke-width=\"1\" opacity=\"0.25\" stroke-dasharray=\"2 2\" /><line x1=\"1\" y1=\"10\" x2=\"19\" y2=\"10\" stroke-width=\"1\" opacity=\"0.25\" stroke-dasharray=\"2 2\" />\n            </svg>\n          </button>\n          <button type=\"button\" class=\"flex items-center justify-center w-7 h-7 rounded border border-transparent hover:border-border hover:bg-accent\" [title]=\"resolvedLocale().table.bordersHorizontal\" (click)=\"setTableBorders('horizontal')\">\n            <svg viewBox=\"0 0 20 20\" class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\">\n              <line x1=\"1\" y1=\"1\" x2=\"19\" y2=\"1\" stroke-width=\"1.5\" /><line x1=\"1\" y1=\"10\" x2=\"19\" y2=\"10\" stroke-width=\"1.5\" /><line x1=\"1\" y1=\"19\" x2=\"19\" y2=\"19\" stroke-width=\"1.5\" />\n            </svg>\n          </button>\n        </div>\n      </div>\n      <div class=\"my-1 h-px bg-border\"></div>\n      <div class=\"px-2 py-1.5\">\n        <div class=\"text-xs text-muted-foreground mb-1.5\">{{ resolvedLocale().table.cellAlignLeft }}</div>\n        <div class=\"flex items-center gap-1\" dir=\"ltr\">\n          <button type=\"button\" class=\"flex items-center justify-center w-7 h-7 rounded border border-transparent hover:border-border hover:bg-accent\" [title]=\"resolvedLocale().table.cellAlignLeft\" (click)=\"setCellAlignment('left')\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\"/><line x1=\"15\" x2=\"3\" y1=\"12\" y2=\"12\"/><line x1=\"17\" x2=\"3\" y1=\"18\" y2=\"18\"/></svg>\n          </button>\n          <button type=\"button\" class=\"flex items-center justify-center w-7 h-7 rounded border border-transparent hover:border-border hover:bg-accent\" [title]=\"resolvedLocale().table.cellAlignCenter\" (click)=\"setCellAlignment('center')\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\"/><line x1=\"17\" x2=\"7\" y1=\"12\" y2=\"12\"/><line x1=\"19\" x2=\"5\" y1=\"18\" y2=\"18\"/></svg>\n          </button>\n          <button type=\"button\" class=\"flex items-center justify-center w-7 h-7 rounded border border-transparent hover:border-border hover:bg-accent\" [title]=\"resolvedLocale().table.cellAlignRight\" (click)=\"setCellAlignment('right')\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\"/><line x1=\"21\" x2=\"9\" y1=\"12\" y2=\"12\"/><line x1=\"21\" x2=\"7\" y1=\"18\" y2=\"18\"/></svg>\n          </button>\n        </div>\n      </div>\n      <div class=\"px-2 py-1.5\">\n        <div class=\"text-xs text-muted-foreground mb-1.5\">{{ resolvedLocale().table.cellColor }}</div>\n        <div class=\"grid grid-cols-8 gap-0.5\">\n          @for (color of tableCellColors; track color) {\n            <button type=\"button\" class=\"w-4 h-4 rounded border border-border hover:scale-110 transition-transform\" [style.background-color]=\"color\" [attr.aria-label]=\"color\" (click)=\"setCellColor(color)\"></button>\n          }\n        </div>\n      </div>\n      <div class=\"my-1 h-px bg-border\"></div>\n      <button type=\"button\" class=\"relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground text-destructive\" (click)=\"deleteTableRow()\">\n        {{ resolvedLocale().table.deleteRow }}\n      </button>\n      <button type=\"button\" class=\"relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground text-destructive\" (click)=\"deleteTableColumn()\">\n        {{ resolvedLocale().table.deleteColumn }}\n      </button>\n      <button type=\"button\" class=\"relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground text-destructive\" (click)=\"deleteTable()\">\n        {{ resolvedLocale().table.deleteTable }}\n      </button>\n    </div>\n  }\n</div>\n\n@if (showCount() || showWordCount()) {\n  <!--\n    A polite status region, so a screen reader hears the count change, and the\n    limit is shown once one is set: enforcement used to be entirely silent,\n    so hitting maxLength read as a dead keyboard with the counter still showing\n    a bare number and no indication a limit existed at all. The colour change\n    at the limit gives sighted users the same signal.\n  -->\n  <output [attr.id]=\"counterId\" class=\"flex justify-end text-xs text-muted-foreground mt-1 px-1\" aria-live=\"polite\">\n    @if (showCount()) {\n      <!--\n        The localized phrase keeps its own {count}, and the limit follows as a\n        separate parenthetical. Interpolating \"0 / 120\" INTO the slot produced\n        \"0 / 120 characters\", which is wrong in English and cannot be localized\n        at all -- a locale ordering it differently had no way to express it,\n        because the separator was hardcoded in the template expression.\n      -->\n      <span [class.text-destructive]=\"atCharacterLimit()\" [class.font-medium]=\"atCharacterLimit()\">\n        {{ interpolateLocale(resolvedLocale().editor.characters, { count: characterCount() }) }}@if (maxLength()) {<span class=\"ms-1\">({{ maxLength() }} max)</span>}\n      </span>\n    }\n    @if (showWordCount()) {\n      <span [class.ms-3]=\"showCount()\">{{ interpolateLocale(resolvedLocale().editor.words, { count: wordCount() }) }}</span>\n    }\n  </output>\n}\n", styles: ["@media print{:host{display:block;overflow:visible}:host [data-slot=rich-text-editor]{max-height:none!important;height:auto!important;overflow:visible!important;border:none}:host [role=toolbar],:host [data-slot=rich-text-floating-toolbar],:host [data-slot=rich-text-find-overlay],:host [data-slot=rich-text-outline-panel],:host [data-slot=rich-text-history-badge]{display:none!important}:host tr,:host img{break-inside:avoid}:host h1,:host h2,:host h3{break-after:avoid}}:host img[data-blocked-src]{display:inline-flex;align-items:center;justify-content:center;min-width:8rem;min-height:4.5rem;padding:calc(.75rem * var(--_d));border:1px dashed var(--border);border-radius:var(--radius);background-color:color-mix(in oklab,var(--muted) 60%,transparent);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);color:var(--muted-foreground);font-size:.75rem;line-height:1.4;text-align:center;font-style:italic}:host img[data-blocked-src]:after{content:attr(data-blocked-label)}:host([data-ui-theme=\"neutral\"]){--primary: oklch(.205 0 0);--primary-foreground: oklch(.985 0 0);--ring: oklch(.708 0 0)}:host-context(.dark)[data-ui-theme=neutral]{--primary: oklch(.985 0 0);--primary-foreground: oklch(.205 0 0);--ring: oklch(.708 0 0)}:host([data-ui-theme=\"zinc\"]){--primary: oklch(.205 0 0);--primary-foreground: oklch(.985 0 0);--ring: oklch(.708 0 0)}:host-context(.dark)[data-ui-theme=zinc]{--primary: oklch(.985 0 0);--primary-foreground: oklch(.205 0 0);--ring: oklch(.708 0 0)}:host([data-ui-theme=\"slate\"]){--primary: oklch(.208 .042 265.755);--primary-foreground: oklch(.984 .003 247.858);--ring: oklch(.704 .04 256.788)}:host-context(.dark)[data-ui-theme=slate]{--primary: oklch(.929 .013 255.508);--primary-foreground: oklch(.208 .042 265.755);--ring: oklch(.704 .04 256.788)}:host([data-ui-theme=\"stone\"]){--primary: oklch(.216 .006 56.043);--primary-foreground: oklch(.985 .001 106.423);--ring: oklch(.709 .01 56.259)}:host-context(.dark)[data-ui-theme=stone]{--primary: oklch(.923 .003 48.717);--primary-foreground: oklch(.216 .006 56.043);--ring: oklch(.553 .013 58.071)}:host([data-ui-theme=\"gray\"]){--primary: oklch(.21 .028 264.532);--primary-foreground: oklch(.985 .002 247.839);--ring: oklch(.707 .022 264.436)}:host-context(.dark)[data-ui-theme=gray]{--primary: oklch(.928 .006 264.531);--primary-foreground: oklch(.21 .028 264.532);--ring: oklch(.551 .027 264.364)}:host([data-ui-theme=\"red\"]){--primary: oklch(.577 .245 27.325);--primary-foreground: oklch(.985 0 0);--ring: oklch(.577 .245 27.325)}:host-context(.dark)[data-ui-theme=red]{--primary: oklch(.577 .245 27.325);--primary-foreground: oklch(.985 0 0);--ring: oklch(.577 .245 27.325)}:host([data-ui-theme=\"rose\"]){--primary: oklch(.645 .246 16.439);--primary-foreground: oklch(.985 0 0);--ring: oklch(.645 .246 16.439)}:host-context(.dark)[data-ui-theme=rose]{--primary: oklch(.645 .246 16.439);--primary-foreground: oklch(.985 0 0);--ring: oklch(.645 .246 16.439)}:host([data-ui-theme=\"orange\"]){--primary: oklch(.646 .222 41.116);--primary-foreground: oklch(.985 0 0);--ring: oklch(.646 .222 41.116)}:host-context(.dark)[data-ui-theme=orange]{--primary: oklch(.646 .222 41.116);--primary-foreground: oklch(.985 0 0);--ring: oklch(.646 .222 41.116)}:host([data-ui-theme=\"green\"]){--primary: oklch(.623 .214 131.655);--primary-foreground: oklch(.985 0 0);--ring: oklch(.623 .214 131.655)}:host-context(.dark)[data-ui-theme=green]{--primary: oklch(.623 .214 131.655);--primary-foreground: oklch(.985 0 0);--ring: oklch(.623 .214 131.655)}:host([data-ui-theme=\"blue\"]){--primary: oklch(.546 .245 262.881);--primary-foreground: oklch(.985 0 0);--ring: oklch(.546 .245 262.881)}:host-context(.dark)[data-ui-theme=blue]{--primary: oklch(.546 .245 262.881);--primary-foreground: oklch(.985 0 0);--ring: oklch(.546 .245 262.881)}:host([data-ui-theme=\"yellow\"]){--primary: oklch(.82 .185 84.67);--primary-foreground: oklch(.205 0 0);--ring: oklch(.82 .185 84.67)}:host-context(.dark)[data-ui-theme=yellow]{--primary: oklch(.82 .185 84.67);--primary-foreground: oklch(.205 0 0);--ring: oklch(.82 .185 84.67)}:host([data-ui-theme=\"violet\"]){--primary: oklch(.558 .288 302.321);--primary-foreground: oklch(.985 0 0);--ring: oklch(.558 .288 302.321)}:host-context(.dark)[data-ui-theme=violet]{--primary: oklch(.558 .288 302.321);--primary-foreground: oklch(.985 0 0);--ring: oklch(.558 .288 302.321)}:host([data-ui-theme=\"amber\"]){--primary: oklch(.77 .16 70);--primary-foreground: oklch(.145 0 0);--ring: oklch(.77 .16 70)}:host-context(.dark)[data-ui-theme=amber]{--primary: oklch(.77 .16 70);--primary-foreground: oklch(.145 0 0);--ring: oklch(.77 .16 70)}\n"], dependencies: [{ kind: "component", type: RichTextToolbarComponent, selector: "ui-rich-text-toolbar", inputs: ["items", "activeFormats", "compact", "class", "disabled", "readonly", "textStyleAvailable", "locale", "addonSlots"], outputs: ["formatCommand", "addonSlotClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: RichTextEditorComponent, decorators: [{
             type: Component,
@@ -17905,7 +18714,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                         provideComponentLocale(() => RichTextEditorComponent),
                     ], host: {
                         class: 'block',
-                    }, template: "@if (toolbar() === 'top' && !readonly()) {\n  <ui-rich-text-toolbar\n    [items]=\"toolbarItems()\"\n    [activeFormats]=\"activeFormats()\"\n    [textStyleAvailable]=\"textStyleAvailable()\"\n    [disabled]=\"isDisabled()\"\n    [readonly]=\"readonly()\"\n    [locale]=\"resolvedLocale()\"\n    (formatCommand)=\"onFormatCommand($event)\"\n    [addonSlots]=\"toolbarSlots.slots()\"\n    (addonSlotClick)=\"onAddonSlotClick($event)\"\n  />\n}\n\n<div #editorContainer [class]=\"editorContainerClasses()\" [dir]=\"resolvedDir()\">\n  <!--\n    Three of the attributes below exist for assistive tech specifically:\n\n    The tab index drops to -1 when disabled. A native disabled control leaves the\n    tab order entirely; a static 0 left a keyboard user stopping on an editor\n    that takes focus and then does nothing.\n\n    The readonly state is announced explicitly, because contenteditable false is\n    a browser editing hint rather than a state screen readers reliably report on\n    a textbox \u2014 without it a reader discovers the field is read-only by typing\n    and seeing nothing happen.\n\n    The placeholder is announced explicitly too, because the visible one is CSS\n    generated content. Chromium exposes that as a plain text child, so a reader\n    announces the hint as though it were the document's own text.\n  -->\n  <div\n    #editorDiv\n    [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n    [attr.contenteditable]=\"!isDisabled() && !readonly()\"\n    [attr.aria-disabled]=\"isDisabled()\"\n    [attr.aria-readonly]=\"readonly() ? 'true' : null\"\n    [class]=\"editableClasses()\"\n    [attr.placeholder]=\"placeholder() || resolvedLocale().editor.placeholder\"\n    [attr.aria-placeholder]=\"placeholder() || resolvedLocale().editor.placeholder\"\n    [attr.aria-label]=\"ariaLabel() || resolvedLocale().editor.ariaLabel\"\n    [attr.aria-describedby]=\"describedBy()\"\n    [attr.data-slot]=\"'rich-text-editor'\"\n    [style.min-height]=\"minHeight()\"\n    [style.max-height]=\"maxHeight()\"\n    role=\"textbox\"\n    aria-multiline=\"true\"\n    [attr.aria-expanded]=\"activeSuggestionPopup() ? 'true' : null\"\n    [attr.aria-controls]=\"activeSuggestionPopup()?.controlsId ?? null\"\n    [attr.aria-activedescendant]=\"activeSuggestionPopup()?.activeOptionId ?? null\"\n    (input)=\"onInput($event)\"\n    (beforeinput)=\"onBeforeInput($event)\"\n    (keydown)=\"onKeydown($event)\"\n    (paste)=\"onPaste($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur($event)\"\n    (mouseup)=\"onSelectionChange()\"\n    (keyup)=\"onSelectionChange()\"\n    (click)=\"onEditorClick($event)\"\n    (mousemove)=\"onEditorMouseMove($event)\"\n    (mousedown)=\"onEditorMouseDown($event)\"\n    (touchstart)=\"onEditorTouchStart($event)\"\n    (contextmenu)=\"onEditorContextMenu($event)\"\n    (dragover)=\"onEditorDragOver($event)\"\n    (dragleave)=\"onEditorDragLeave($event)\"\n    (drop)=\"onEditorDrop($event)\"\n  ></div>\n\n  @if (findReplaceVisible()) {\n    <div data-slot=\"rich-text-find-panel\"\n         class=\"absolute top-2 end-2 z-50 bg-popover border rounded-lg shadow-lg p-3 w-80 max-w-[calc(100vw-2rem)] max-sm:w-[calc(100%-1rem)] max-sm:start-2 animate-in slide-in-from-top-2 fade-in-0\"\n         tabindex=\"-1\"\n         (keydown.escape)=\"closeFindReplace()\"\n         (keydown)=\"onFindReplaceKeydown($event)\">\n      <div class=\"flex flex-wrap items-center gap-1.5 mb-2\">\n        <input\n          #findInput\n          data-slot=\"rich-text-find-query\"\n          type=\"text\"\n          [placeholder]=\"resolvedLocale().findReplace.findPlaceholder\"\n          [attr.aria-label]=\"resolvedLocale().findReplace.find\"\n          [attr.aria-invalid]=\"findRegexError() ? 'true' : null\"\n          [value]=\"findQuery()\"\n          (input)=\"onFindQueryChange($any($event.target).value)\"\n          class=\"flex h-7 min-w-0 flex-1 rounded-md border border-input bg-transparent px-2 py-1 text-xs shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring\"\n        />\n        <button type=\"button\"\n                class=\"inline-flex min-h-7 min-w-7 items-center justify-center rounded-md p-1 text-xs font-medium transition-colors hover:bg-accent\"\n                [class.bg-accent]=\"findCaseSensitive()\"\n                [attr.aria-pressed]=\"findCaseSensitive()\"\n                [attr.aria-label]=\"resolvedLocale().findReplace.caseSensitive\"\n                [title]=\"resolvedLocale().findReplace.caseSensitive\"\n                (click)=\"toggleFindCaseSensitive()\">Aa</button>\n        <button type=\"button\"\n                class=\"inline-flex min-h-7 min-w-7 items-center justify-center rounded-md p-1 text-xs font-medium transition-colors hover:bg-accent\"\n                [class.bg-accent]=\"findWholeWord()\"\n                [attr.aria-pressed]=\"findWholeWord()\"\n                [attr.aria-label]=\"resolvedLocale().findReplace.wholeWord\"\n                [title]=\"resolvedLocale().findReplace.wholeWord\"\n                (click)=\"toggleFindWholeWord()\">ab</button>\n        <button type=\"button\"\n                class=\"inline-flex min-h-7 min-w-7 items-center justify-center rounded-md p-1 text-xs font-medium transition-colors hover:bg-accent\"\n                [class.bg-accent]=\"findUseRegex()\"\n                [attr.aria-pressed]=\"findUseRegex()\"\n                [attr.aria-label]=\"resolvedLocale().findReplace.useRegex\"\n                [title]=\"resolvedLocale().findReplace.useRegex\"\n                (click)=\"toggleFindUseRegex()\">.*</button>\n      </div>\n      <div class=\"flex flex-wrap items-center justify-between gap-2 mb-2\">\n        <span data-slot=\"rich-text-find-counter\"\n              aria-live=\"polite\"\n              class=\"text-xs text-muted-foreground\">{{ findCounterText() }}</span>\n        <div class=\"flex gap-1\">\n          <button type=\"button\"\n                  class=\"inline-flex min-h-7 min-w-7 items-center justify-center rounded-md p-1 text-xs hover:bg-accent disabled:opacity-50\"\n                  [attr.aria-label]=\"resolvedLocale().findReplace.previous\"\n                  [title]=\"resolvedLocale().findReplace.previous\"\n                  [disabled]=\"findMatchCount() === 0\"\n                  (click)=\"findPrevious()\">&#x25B2;</button>\n          <button type=\"button\"\n                  class=\"inline-flex min-h-7 min-w-7 items-center justify-center rounded-md p-1 text-xs hover:bg-accent disabled:opacity-50\"\n                  [attr.aria-label]=\"resolvedLocale().findReplace.next\"\n                  [title]=\"resolvedLocale().findReplace.next\"\n                  [disabled]=\"findMatchCount() === 0\"\n                  (click)=\"findNext()\">&#x25BC;</button>\n          <button type=\"button\"\n                  class=\"inline-flex min-h-7 min-w-7 items-center justify-center rounded-md p-1 text-xs hover:bg-accent\"\n                  [attr.aria-label]=\"resolvedLocale().findReplace.close\"\n                  [title]=\"resolvedLocale().findReplace.close\"\n                  (click)=\"closeFindReplace()\">&#x2715;</button>\n        </div>\n      </div>\n      @if (showReplaceRow()) {\n        <div class=\"flex flex-wrap items-center gap-1.5\">\n          <input\n            data-slot=\"rich-text-find-replace\"\n            type=\"text\"\n            [placeholder]=\"resolvedLocale().findReplace.replacePlaceholder\"\n            [attr.aria-label]=\"resolvedLocale().findReplace.replace\"\n            [value]=\"replaceText()\"\n            (input)=\"replaceText.set($any($event.target).value)\"\n            class=\"flex h-7 min-w-0 flex-1 rounded-md border border-input bg-transparent px-2 py-1 text-xs shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring\"\n          />\n          <button type=\"button\" class=\"inline-flex min-h-7 items-center justify-center rounded-md px-2 py-1 text-xs hover:bg-accent whitespace-nowrap disabled:opacity-50\" [disabled]=\"findMatchCount() === 0\" (click)=\"replaceSingle()\">{{ resolvedLocale().findReplace.replace }}</button>\n          <button type=\"button\" class=\"inline-flex min-h-7 items-center justify-center rounded-md px-2 py-1 text-xs hover:bg-accent whitespace-nowrap disabled:opacity-50\" [disabled]=\"findMatchCount() === 0\" (click)=\"replaceAll()\">{{ resolvedLocale().findReplace.replaceAll }}</button>\n        </div>\n      }\n    </div>\n  }\n\n  @if (dragOver()) {\n    <div class=\"absolute inset-0 pointer-events-none border-2 border-dashed border-primary/60 rounded-md bg-primary/5\"></div>\n  }\n\n  @if (toolbar() === 'floating' && !readonly() && showFloatingToolbar()) {\n    <div \n      class=\"fixed z-[9999] bg-popover border rounded-lg shadow-lg p-1\"\n      [style.left.px]=\"floatingToolbarPosition().x\"\n      [style.top.px]=\"floatingToolbarPosition().y\"\n    >\n      <ui-rich-text-toolbar\n        [items]=\"['bold', 'italic', 'underline', 'separator', 'clear']\"\n        [activeFormats]=\"emptyFormats\"\n        [compact]=\"true\"\n        [disabled]=\"isDisabled()\"\n        [readonly]=\"readonly()\"\n        [locale]=\"resolvedLocale()\"\n        (formatCommand)=\"onFloatingFormatCommand($event)\"\n        [addonSlots]=\"toolbarSlots.slots()\"\n        (addonSlotClick)=\"onAddonSlotClick($event)\"\n      />\n    </div>\n  }\n\n  @if (tableContextMenuOpen()) {\n    <div\n      #tableContextMenuRef\n      class=\"fixed z-50 min-w-[180px] max-w-[calc(100vw-2rem)] max-h-[calc(100vh-1rem)] overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95\"\n      [style.left.px]=\"tableContextMenuPosition().x\"\n      [style.top.px]=\"tableContextMenuPosition().y\"\n      (mousedown)=\"$event.preventDefault()\"\n      (contextmenu)=\"onContextMenuOverlayContextMenu($event)\"\n    >\n      <button type=\"button\" class=\"relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground\" (click)=\"addTableRowAbove()\">\n        {{ resolvedLocale().table.addRowAbove }}\n      </button>\n      <button type=\"button\" class=\"relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground\" (click)=\"addTableRowBelow()\">\n        {{ resolvedLocale().table.addRowBelow }}\n      </button>\n      <div class=\"my-1 h-px bg-border\"></div>\n      <button type=\"button\" class=\"relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground\" (click)=\"addTableColumnLeft()\">\n        {{ resolvedLocale().table.addColumnLeft }}\n      </button>\n      <button type=\"button\" class=\"relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground\" (click)=\"addTableColumnRight()\">\n        {{ resolvedLocale().table.addColumnRight }}\n      </button>\n      <div class=\"my-1 h-px bg-border\"></div>\n      <button type=\"button\" class=\"relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground\" (click)=\"toggleTableHeaderRow()\">\n        {{ resolvedLocale().table.toggleHeaderRow }}\n      </button>\n      <div class=\"my-1 h-px bg-border\"></div>\n      @if (tableCellSelected().length >= 2) {\n        <button type=\"button\" class=\"relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground\" (click)=\"mergeCells()\">\n          {{ resolvedLocale().table.mergeCells }}\n        </button>\n      }\n      @if (canSplitCell()) {\n        <button type=\"button\" class=\"relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground\" (click)=\"splitCell()\">\n          {{ resolvedLocale().table.splitCell }}\n        </button>\n      }\n      @if (tableCellSelected().length >= 2 || canSplitCell()) {\n        <div class=\"my-1 h-px bg-border\"></div>\n      }\n      <div class=\"px-2 py-1.5\">\n        <div class=\"text-xs text-muted-foreground mb-1.5\">{{ resolvedLocale().table.borders }}</div>\n        <div class=\"flex items-center gap-1\">\n          <button type=\"button\" class=\"flex items-center justify-center w-7 h-7 rounded border border-transparent hover:border-border hover:bg-accent\" [title]=\"resolvedLocale().table.bordersAll\" (click)=\"setTableBorders('all')\">\n            <svg viewBox=\"0 0 20 20\" class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\n              <rect x=\"1\" y=\"1\" width=\"18\" height=\"18\" /><line x1=\"10\" y1=\"1\" x2=\"10\" y2=\"19\" /><line x1=\"1\" y1=\"10\" x2=\"19\" y2=\"10\" />\n            </svg>\n          </button>\n          <button type=\"button\" class=\"flex items-center justify-center w-7 h-7 rounded border border-transparent hover:border-border hover:bg-accent\" [title]=\"resolvedLocale().table.bordersNone\" (click)=\"setTableBorders('none')\">\n            <svg viewBox=\"0 0 20 20\" class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\" opacity=\"0.35\">\n              <rect x=\"1\" y=\"1\" width=\"18\" height=\"18\" stroke-dasharray=\"2 2\" /><line x1=\"10\" y1=\"1\" x2=\"10\" y2=\"19\" stroke-dasharray=\"2 2\" /><line x1=\"1\" y1=\"10\" x2=\"19\" y2=\"10\" stroke-dasharray=\"2 2\" />\n            </svg>\n          </button>\n          <button type=\"button\" class=\"flex items-center justify-center w-7 h-7 rounded border border-transparent hover:border-border hover:bg-accent\" [title]=\"resolvedLocale().table.bordersOuter\" (click)=\"setTableBorders('outer')\">\n            <svg viewBox=\"0 0 20 20\" class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\">\n              <rect x=\"1\" y=\"1\" width=\"18\" height=\"18\" stroke-width=\"1.5\" /><line x1=\"10\" y1=\"1\" x2=\"10\" y2=\"19\" stroke-width=\"1\" opacity=\"0.25\" stroke-dasharray=\"2 2\" /><line x1=\"1\" y1=\"10\" x2=\"19\" y2=\"10\" stroke-width=\"1\" opacity=\"0.25\" stroke-dasharray=\"2 2\" />\n            </svg>\n          </button>\n          <button type=\"button\" class=\"flex items-center justify-center w-7 h-7 rounded border border-transparent hover:border-border hover:bg-accent\" [title]=\"resolvedLocale().table.bordersHorizontal\" (click)=\"setTableBorders('horizontal')\">\n            <svg viewBox=\"0 0 20 20\" class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\">\n              <line x1=\"1\" y1=\"1\" x2=\"19\" y2=\"1\" stroke-width=\"1.5\" /><line x1=\"1\" y1=\"10\" x2=\"19\" y2=\"10\" stroke-width=\"1.5\" /><line x1=\"1\" y1=\"19\" x2=\"19\" y2=\"19\" stroke-width=\"1.5\" />\n            </svg>\n          </button>\n        </div>\n      </div>\n      <div class=\"my-1 h-px bg-border\"></div>\n      <div class=\"px-2 py-1.5\">\n        <div class=\"text-xs text-muted-foreground mb-1.5\">{{ resolvedLocale().table.cellAlignLeft }}</div>\n        <div class=\"flex items-center gap-1\" dir=\"ltr\">\n          <button type=\"button\" class=\"flex items-center justify-center w-7 h-7 rounded border border-transparent hover:border-border hover:bg-accent\" [title]=\"resolvedLocale().table.cellAlignLeft\" (click)=\"setCellAlignment('left')\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\"/><line x1=\"15\" x2=\"3\" y1=\"12\" y2=\"12\"/><line x1=\"17\" x2=\"3\" y1=\"18\" y2=\"18\"/></svg>\n          </button>\n          <button type=\"button\" class=\"flex items-center justify-center w-7 h-7 rounded border border-transparent hover:border-border hover:bg-accent\" [title]=\"resolvedLocale().table.cellAlignCenter\" (click)=\"setCellAlignment('center')\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\"/><line x1=\"17\" x2=\"7\" y1=\"12\" y2=\"12\"/><line x1=\"19\" x2=\"5\" y1=\"18\" y2=\"18\"/></svg>\n          </button>\n          <button type=\"button\" class=\"flex items-center justify-center w-7 h-7 rounded border border-transparent hover:border-border hover:bg-accent\" [title]=\"resolvedLocale().table.cellAlignRight\" (click)=\"setCellAlignment('right')\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\"/><line x1=\"21\" x2=\"9\" y1=\"12\" y2=\"12\"/><line x1=\"21\" x2=\"7\" y1=\"18\" y2=\"18\"/></svg>\n          </button>\n        </div>\n      </div>\n      <div class=\"px-2 py-1.5\">\n        <div class=\"text-xs text-muted-foreground mb-1.5\">{{ resolvedLocale().table.cellColor }}</div>\n        <div class=\"grid grid-cols-8 gap-0.5\">\n          @for (color of tableCellColors; track color) {\n            <button type=\"button\" class=\"w-4 h-4 rounded border border-border hover:scale-110 transition-transform\" [style.background-color]=\"color\" [attr.aria-label]=\"color\" (click)=\"setCellColor(color)\"></button>\n          }\n        </div>\n      </div>\n      <div class=\"my-1 h-px bg-border\"></div>\n      <button type=\"button\" class=\"relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground text-destructive\" (click)=\"deleteTableRow()\">\n        {{ resolvedLocale().table.deleteRow }}\n      </button>\n      <button type=\"button\" class=\"relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground text-destructive\" (click)=\"deleteTableColumn()\">\n        {{ resolvedLocale().table.deleteColumn }}\n      </button>\n      <button type=\"button\" class=\"relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground text-destructive\" (click)=\"deleteTable()\">\n        {{ resolvedLocale().table.deleteTable }}\n      </button>\n    </div>\n  }\n</div>\n\n@if (showCount() || showWordCount()) {\n  <!--\n    A polite status region, so a screen reader hears the count change, and the\n    limit is shown once one is set: enforcement used to be entirely silent,\n    so hitting maxLength read as a dead keyboard with the counter still showing\n    a bare number and no indication a limit existed at all. The colour change\n    at the limit gives sighted users the same signal.\n  -->\n  <output [attr.id]=\"counterId\" class=\"flex justify-end text-xs text-muted-foreground mt-1 px-1\" aria-live=\"polite\">\n    @if (showCount()) {\n      <!--\n        The localized phrase keeps its own {count}, and the limit follows as a\n        separate parenthetical. Interpolating \"0 / 120\" INTO the slot produced\n        \"0 / 120 characters\", which is wrong in English and cannot be localized\n        at all -- a locale ordering it differently had no way to express it,\n        because the separator was hardcoded in the template expression.\n      -->\n      <span [class.text-destructive]=\"atCharacterLimit()\" [class.font-medium]=\"atCharacterLimit()\">\n        {{ interpolateLocale(resolvedLocale().editor.characters, { count: characterCount() }) }}@if (maxLength()) {<span class=\"ms-1\">({{ maxLength() }} max)</span>}\n      </span>\n    }\n    @if (showWordCount()) {\n      <span [class.ms-3]=\"showCount()\">{{ interpolateLocale(resolvedLocale().editor.words, { count: wordCount() }) }}</span>\n    }\n  </output>\n}\n", styles: ["@media print{:host{display:block;overflow:visible}:host [data-slot=rich-text-editor]{max-height:none!important;height:auto!important;overflow:visible!important;border:none}:host [role=toolbar],:host [data-slot=rich-text-floating-toolbar],:host [data-slot=rich-text-find-overlay],:host [data-slot=rich-text-outline-panel],:host [data-slot=rich-text-history-badge]{display:none!important}:host tr,:host img{break-inside:avoid}:host h1,:host h2,:host h3{break-after:avoid}}:host img[data-blocked-src]{display:inline-flex;align-items:center;justify-content:center;min-width:8rem;min-height:4.5rem;padding:calc(.75rem * var(--_d));border:1px dashed var(--border);border-radius:var(--radius);background-color:color-mix(in oklab,var(--muted) 60%,transparent);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);color:var(--muted-foreground);font-size:.75rem;line-height:1.4;text-align:center;font-style:italic}:host img[data-blocked-src]:after{content:attr(data-blocked-label)}\n"] }]
+                        '[attr.data-ui-theme]': 'theme()',
+                    }, template: "@if (toolbar() === 'top' && !readonly()) {\n  <ui-rich-text-toolbar\n    [items]=\"toolbarItems()\"\n    [activeFormats]=\"activeFormats()\"\n    [textStyleAvailable]=\"textStyleAvailable()\"\n    [disabled]=\"isDisabled()\"\n    [readonly]=\"readonly()\"\n    [locale]=\"resolvedLocale()\"\n    (formatCommand)=\"onFormatCommand($event)\"\n    [addonSlots]=\"toolbarSlots.slots()\"\n    (addonSlotClick)=\"onAddonSlotClick($event)\"\n  />\n}\n\n<div #editorContainer [class]=\"editorContainerClasses()\" [dir]=\"resolvedDir()\">\n  <!--\n    Three of the attributes below exist for assistive tech specifically:\n\n    The tab index drops to -1 when disabled. A native disabled control leaves the\n    tab order entirely; a static 0 left a keyboard user stopping on an editor\n    that takes focus and then does nothing.\n\n    The readonly state is announced explicitly, because contenteditable false is\n    a browser editing hint rather than a state screen readers reliably report on\n    a textbox \u2014 without it a reader discovers the field is read-only by typing\n    and seeing nothing happen.\n\n    The placeholder is announced explicitly too, because the visible one is CSS\n    generated content. Chromium exposes that as a plain text child, so a reader\n    announces the hint as though it were the document's own text.\n  -->\n  <div\n    #editorDiv\n    [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n    [attr.contenteditable]=\"!isDisabled() && !readonly()\"\n    [attr.aria-disabled]=\"isDisabled()\"\n    [attr.aria-readonly]=\"readonly() ? 'true' : null\"\n    [class]=\"editableClasses()\"\n    [attr.placeholder]=\"placeholder() || resolvedLocale().editor.placeholder\"\n    [attr.aria-placeholder]=\"placeholder() || resolvedLocale().editor.placeholder\"\n    [attr.aria-label]=\"ariaLabel() || resolvedLocale().editor.ariaLabel\"\n    [attr.aria-describedby]=\"describedBy()\"\n    [attr.data-slot]=\"'rich-text-editor'\"\n    [style.min-height]=\"minHeight()\"\n    [style.max-height]=\"maxHeight()\"\n    role=\"textbox\"\n    aria-multiline=\"true\"\n    [attr.aria-expanded]=\"activeSuggestionPopup() ? 'true' : null\"\n    [attr.aria-controls]=\"activeSuggestionPopup()?.controlsId ?? null\"\n    [attr.aria-activedescendant]=\"activeSuggestionPopup()?.activeOptionId ?? null\"\n    (input)=\"onInput($event)\"\n    (beforeinput)=\"onBeforeInput($event)\"\n    (keydown)=\"onKeydown($event)\"\n    (paste)=\"onPaste($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur($event)\"\n    (mouseup)=\"onSelectionChange()\"\n    (keyup)=\"onSelectionChange()\"\n    (click)=\"onEditorClick($event)\"\n    (mousemove)=\"onEditorMouseMove($event)\"\n    (mousedown)=\"onEditorMouseDown($event)\"\n    (touchstart)=\"onEditorTouchStart($event)\"\n    (contextmenu)=\"onEditorContextMenu($event)\"\n    (dragover)=\"onEditorDragOver($event)\"\n    (dragleave)=\"onEditorDragLeave($event)\"\n    (drop)=\"onEditorDrop($event)\"\n  ></div>\n\n  @if (findReplaceVisible()) {\n    <div data-slot=\"rich-text-find-panel\"\n         class=\"absolute top-2 end-2 z-50 bg-popover border rounded-lg shadow-lg p-3 w-80 max-w-[calc(100vw-2rem)] max-sm:w-[calc(100%-1rem)] max-sm:start-2 animate-in slide-in-from-top-2 fade-in-0\"\n         tabindex=\"-1\"\n         (keydown.escape)=\"closeFindReplace()\"\n         (keydown)=\"onFindReplaceKeydown($event)\">\n      <div class=\"flex flex-wrap items-center gap-1.5 mb-2\">\n        <input\n          #findInput\n          data-slot=\"rich-text-find-query\"\n          type=\"text\"\n          [placeholder]=\"resolvedLocale().findReplace.findPlaceholder\"\n          [attr.aria-label]=\"resolvedLocale().findReplace.find\"\n          [attr.aria-invalid]=\"findRegexError() ? 'true' : null\"\n          [value]=\"findQuery()\"\n          (input)=\"onFindQueryChange($any($event.target).value)\"\n          class=\"flex h-7 min-w-0 flex-1 rounded-md border border-input bg-transparent px-2 py-1 text-xs shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring\"\n        />\n        <button type=\"button\"\n                class=\"inline-flex min-h-7 min-w-7 items-center justify-center rounded-md p-1 text-xs font-medium transition-colors hover:bg-accent\"\n                [class.bg-accent]=\"findCaseSensitive()\"\n                [attr.aria-pressed]=\"findCaseSensitive()\"\n                [attr.aria-label]=\"resolvedLocale().findReplace.caseSensitive\"\n                [title]=\"resolvedLocale().findReplace.caseSensitive\"\n                (click)=\"toggleFindCaseSensitive()\">Aa</button>\n        <button type=\"button\"\n                class=\"inline-flex min-h-7 min-w-7 items-center justify-center rounded-md p-1 text-xs font-medium transition-colors hover:bg-accent\"\n                [class.bg-accent]=\"findWholeWord()\"\n                [attr.aria-pressed]=\"findWholeWord()\"\n                [attr.aria-label]=\"resolvedLocale().findReplace.wholeWord\"\n                [title]=\"resolvedLocale().findReplace.wholeWord\"\n                (click)=\"toggleFindWholeWord()\">ab</button>\n        <button type=\"button\"\n                class=\"inline-flex min-h-7 min-w-7 items-center justify-center rounded-md p-1 text-xs font-medium transition-colors hover:bg-accent\"\n                [class.bg-accent]=\"findUseRegex()\"\n                [attr.aria-pressed]=\"findUseRegex()\"\n                [attr.aria-label]=\"resolvedLocale().findReplace.useRegex\"\n                [title]=\"resolvedLocale().findReplace.useRegex\"\n                (click)=\"toggleFindUseRegex()\">.*</button>\n      </div>\n      <div class=\"flex flex-wrap items-center justify-between gap-2 mb-2\">\n        <span data-slot=\"rich-text-find-counter\"\n              aria-live=\"polite\"\n              class=\"text-xs text-muted-foreground\">{{ findCounterText() }}</span>\n        <div class=\"flex gap-1\">\n          <button type=\"button\"\n                  class=\"inline-flex min-h-7 min-w-7 items-center justify-center rounded-md p-1 text-xs hover:bg-accent disabled:opacity-50\"\n                  [attr.aria-label]=\"resolvedLocale().findReplace.previous\"\n                  [title]=\"resolvedLocale().findReplace.previous\"\n                  [disabled]=\"findMatchCount() === 0\"\n                  (click)=\"findPrevious()\">&#x25B2;</button>\n          <button type=\"button\"\n                  class=\"inline-flex min-h-7 min-w-7 items-center justify-center rounded-md p-1 text-xs hover:bg-accent disabled:opacity-50\"\n                  [attr.aria-label]=\"resolvedLocale().findReplace.next\"\n                  [title]=\"resolvedLocale().findReplace.next\"\n                  [disabled]=\"findMatchCount() === 0\"\n                  (click)=\"findNext()\">&#x25BC;</button>\n          <button type=\"button\"\n                  class=\"inline-flex min-h-7 min-w-7 items-center justify-center rounded-md p-1 text-xs hover:bg-accent\"\n                  [attr.aria-label]=\"resolvedLocale().findReplace.close\"\n                  [title]=\"resolvedLocale().findReplace.close\"\n                  (click)=\"closeFindReplace()\">&#x2715;</button>\n        </div>\n      </div>\n      @if (showReplaceRow()) {\n        <div class=\"flex flex-wrap items-center gap-1.5\">\n          <input\n            data-slot=\"rich-text-find-replace\"\n            type=\"text\"\n            [placeholder]=\"resolvedLocale().findReplace.replacePlaceholder\"\n            [attr.aria-label]=\"resolvedLocale().findReplace.replace\"\n            [value]=\"replaceText()\"\n            (input)=\"replaceText.set($any($event.target).value)\"\n            class=\"flex h-7 min-w-0 flex-1 rounded-md border border-input bg-transparent px-2 py-1 text-xs shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring\"\n          />\n          <button type=\"button\" class=\"inline-flex min-h-7 items-center justify-center rounded-md px-2 py-1 text-xs hover:bg-accent whitespace-nowrap disabled:opacity-50\" [disabled]=\"findMatchCount() === 0\" (click)=\"replaceSingle()\">{{ resolvedLocale().findReplace.replace }}</button>\n          <button type=\"button\" class=\"inline-flex min-h-7 items-center justify-center rounded-md px-2 py-1 text-xs hover:bg-accent whitespace-nowrap disabled:opacity-50\" [disabled]=\"findMatchCount() === 0\" (click)=\"replaceAll()\">{{ resolvedLocale().findReplace.replaceAll }}</button>\n        </div>\n      }\n    </div>\n  }\n\n  @if (dragOver()) {\n    <div class=\"absolute inset-0 pointer-events-none border-2 border-dashed border-primary/60 rounded-md bg-primary/5\"></div>\n  }\n\n  @if (toolbar() === 'floating' && !readonly() && showFloatingToolbar()) {\n    <div \n      class=\"fixed z-[9999] bg-popover border rounded-lg shadow-lg p-1\"\n      [style.left.px]=\"floatingToolbarPosition().x\"\n      [style.top.px]=\"floatingToolbarPosition().y\"\n    >\n      <ui-rich-text-toolbar\n        [items]=\"['bold', 'italic', 'underline', 'separator', 'clear']\"\n        [activeFormats]=\"emptyFormats\"\n        [compact]=\"true\"\n        [disabled]=\"isDisabled()\"\n        [readonly]=\"readonly()\"\n        [locale]=\"resolvedLocale()\"\n        (formatCommand)=\"onFloatingFormatCommand($event)\"\n        [addonSlots]=\"toolbarSlots.slots()\"\n        (addonSlotClick)=\"onAddonSlotClick($event)\"\n      />\n    </div>\n  }\n\n  @if (tableContextMenuOpen()) {\n    <div\n      #tableContextMenuRef\n      class=\"fixed z-50 min-w-[180px] max-w-[calc(100vw-2rem)] max-h-[calc(100vh-1rem)] overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95\"\n      [style.left.px]=\"tableContextMenuPosition().x\"\n      [style.top.px]=\"tableContextMenuPosition().y\"\n      (mousedown)=\"$event.preventDefault()\"\n      (contextmenu)=\"onContextMenuOverlayContextMenu($event)\"\n    >\n      <button type=\"button\" class=\"relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground\" (click)=\"addTableRowAbove()\">\n        {{ resolvedLocale().table.addRowAbove }}\n      </button>\n      <button type=\"button\" class=\"relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground\" (click)=\"addTableRowBelow()\">\n        {{ resolvedLocale().table.addRowBelow }}\n      </button>\n      <div class=\"my-1 h-px bg-border\"></div>\n      <button type=\"button\" class=\"relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground\" (click)=\"addTableColumnLeft()\">\n        {{ resolvedLocale().table.addColumnLeft }}\n      </button>\n      <button type=\"button\" class=\"relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground\" (click)=\"addTableColumnRight()\">\n        {{ resolvedLocale().table.addColumnRight }}\n      </button>\n      <div class=\"my-1 h-px bg-border\"></div>\n      <button type=\"button\" class=\"relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground\" (click)=\"toggleTableHeaderRow()\">\n        {{ resolvedLocale().table.toggleHeaderRow }}\n      </button>\n      <div class=\"my-1 h-px bg-border\"></div>\n      @if (tableCellSelected().length >= 2) {\n        <button type=\"button\" class=\"relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground\" (click)=\"mergeCells()\">\n          {{ resolvedLocale().table.mergeCells }}\n        </button>\n      }\n      @if (canSplitCell()) {\n        <button type=\"button\" class=\"relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground\" (click)=\"splitCell()\">\n          {{ resolvedLocale().table.splitCell }}\n        </button>\n      }\n      @if (tableCellSelected().length >= 2 || canSplitCell()) {\n        <div class=\"my-1 h-px bg-border\"></div>\n      }\n      <div class=\"px-2 py-1.5\">\n        <div class=\"text-xs text-muted-foreground mb-1.5\">{{ resolvedLocale().table.borders }}</div>\n        <div class=\"flex items-center gap-1\">\n          <button type=\"button\" class=\"flex items-center justify-center w-7 h-7 rounded border border-transparent hover:border-border hover:bg-accent\" [title]=\"resolvedLocale().table.bordersAll\" (click)=\"setTableBorders('all')\">\n            <svg viewBox=\"0 0 20 20\" class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\n              <rect x=\"1\" y=\"1\" width=\"18\" height=\"18\" /><line x1=\"10\" y1=\"1\" x2=\"10\" y2=\"19\" /><line x1=\"1\" y1=\"10\" x2=\"19\" y2=\"10\" />\n            </svg>\n          </button>\n          <button type=\"button\" class=\"flex items-center justify-center w-7 h-7 rounded border border-transparent hover:border-border hover:bg-accent\" [title]=\"resolvedLocale().table.bordersNone\" (click)=\"setTableBorders('none')\">\n            <svg viewBox=\"0 0 20 20\" class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\" opacity=\"0.35\">\n              <rect x=\"1\" y=\"1\" width=\"18\" height=\"18\" stroke-dasharray=\"2 2\" /><line x1=\"10\" y1=\"1\" x2=\"10\" y2=\"19\" stroke-dasharray=\"2 2\" /><line x1=\"1\" y1=\"10\" x2=\"19\" y2=\"10\" stroke-dasharray=\"2 2\" />\n            </svg>\n          </button>\n          <button type=\"button\" class=\"flex items-center justify-center w-7 h-7 rounded border border-transparent hover:border-border hover:bg-accent\" [title]=\"resolvedLocale().table.bordersOuter\" (click)=\"setTableBorders('outer')\">\n            <svg viewBox=\"0 0 20 20\" class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\">\n              <rect x=\"1\" y=\"1\" width=\"18\" height=\"18\" stroke-width=\"1.5\" /><line x1=\"10\" y1=\"1\" x2=\"10\" y2=\"19\" stroke-width=\"1\" opacity=\"0.25\" stroke-dasharray=\"2 2\" /><line x1=\"1\" y1=\"10\" x2=\"19\" y2=\"10\" stroke-width=\"1\" opacity=\"0.25\" stroke-dasharray=\"2 2\" />\n            </svg>\n          </button>\n          <button type=\"button\" class=\"flex items-center justify-center w-7 h-7 rounded border border-transparent hover:border-border hover:bg-accent\" [title]=\"resolvedLocale().table.bordersHorizontal\" (click)=\"setTableBorders('horizontal')\">\n            <svg viewBox=\"0 0 20 20\" class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\">\n              <line x1=\"1\" y1=\"1\" x2=\"19\" y2=\"1\" stroke-width=\"1.5\" /><line x1=\"1\" y1=\"10\" x2=\"19\" y2=\"10\" stroke-width=\"1.5\" /><line x1=\"1\" y1=\"19\" x2=\"19\" y2=\"19\" stroke-width=\"1.5\" />\n            </svg>\n          </button>\n        </div>\n      </div>\n      <div class=\"my-1 h-px bg-border\"></div>\n      <div class=\"px-2 py-1.5\">\n        <div class=\"text-xs text-muted-foreground mb-1.5\">{{ resolvedLocale().table.cellAlignLeft }}</div>\n        <div class=\"flex items-center gap-1\" dir=\"ltr\">\n          <button type=\"button\" class=\"flex items-center justify-center w-7 h-7 rounded border border-transparent hover:border-border hover:bg-accent\" [title]=\"resolvedLocale().table.cellAlignLeft\" (click)=\"setCellAlignment('left')\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\"/><line x1=\"15\" x2=\"3\" y1=\"12\" y2=\"12\"/><line x1=\"17\" x2=\"3\" y1=\"18\" y2=\"18\"/></svg>\n          </button>\n          <button type=\"button\" class=\"flex items-center justify-center w-7 h-7 rounded border border-transparent hover:border-border hover:bg-accent\" [title]=\"resolvedLocale().table.cellAlignCenter\" (click)=\"setCellAlignment('center')\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\"/><line x1=\"17\" x2=\"7\" y1=\"12\" y2=\"12\"/><line x1=\"19\" x2=\"5\" y1=\"18\" y2=\"18\"/></svg>\n          </button>\n          <button type=\"button\" class=\"flex items-center justify-center w-7 h-7 rounded border border-transparent hover:border-border hover:bg-accent\" [title]=\"resolvedLocale().table.cellAlignRight\" (click)=\"setCellAlignment('right')\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\"/><line x1=\"21\" x2=\"9\" y1=\"12\" y2=\"12\"/><line x1=\"21\" x2=\"7\" y1=\"18\" y2=\"18\"/></svg>\n          </button>\n        </div>\n      </div>\n      <div class=\"px-2 py-1.5\">\n        <div class=\"text-xs text-muted-foreground mb-1.5\">{{ resolvedLocale().table.cellColor }}</div>\n        <div class=\"grid grid-cols-8 gap-0.5\">\n          @for (color of tableCellColors; track color) {\n            <button type=\"button\" class=\"w-4 h-4 rounded border border-border hover:scale-110 transition-transform\" [style.background-color]=\"color\" [attr.aria-label]=\"color\" (click)=\"setCellColor(color)\"></button>\n          }\n        </div>\n      </div>\n      <div class=\"my-1 h-px bg-border\"></div>\n      <button type=\"button\" class=\"relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground text-destructive\" (click)=\"deleteTableRow()\">\n        {{ resolvedLocale().table.deleteRow }}\n      </button>\n      <button type=\"button\" class=\"relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground text-destructive\" (click)=\"deleteTableColumn()\">\n        {{ resolvedLocale().table.deleteColumn }}\n      </button>\n      <button type=\"button\" class=\"relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground text-destructive\" (click)=\"deleteTable()\">\n        {{ resolvedLocale().table.deleteTable }}\n      </button>\n    </div>\n  }\n</div>\n\n@if (showCount() || showWordCount()) {\n  <!--\n    A polite status region, so a screen reader hears the count change, and the\n    limit is shown once one is set: enforcement used to be entirely silent,\n    so hitting maxLength read as a dead keyboard with the counter still showing\n    a bare number and no indication a limit existed at all. The colour change\n    at the limit gives sighted users the same signal.\n  -->\n  <output [attr.id]=\"counterId\" class=\"flex justify-end text-xs text-muted-foreground mt-1 px-1\" aria-live=\"polite\">\n    @if (showCount()) {\n      <!--\n        The localized phrase keeps its own {count}, and the limit follows as a\n        separate parenthetical. Interpolating \"0 / 120\" INTO the slot produced\n        \"0 / 120 characters\", which is wrong in English and cannot be localized\n        at all -- a locale ordering it differently had no way to express it,\n        because the separator was hardcoded in the template expression.\n      -->\n      <span [class.text-destructive]=\"atCharacterLimit()\" [class.font-medium]=\"atCharacterLimit()\">\n        {{ interpolateLocale(resolvedLocale().editor.characters, { count: characterCount() }) }}@if (maxLength()) {<span class=\"ms-1\">({{ maxLength() }} max)</span>}\n      </span>\n    }\n    @if (showWordCount()) {\n      <span [class.ms-3]=\"showCount()\">{{ interpolateLocale(resolvedLocale().editor.words, { count: wordCount() }) }}</span>\n    }\n  </output>\n}\n", styles: ["@media print{:host{display:block;overflow:visible}:host [data-slot=rich-text-editor]{max-height:none!important;height:auto!important;overflow:visible!important;border:none}:host [role=toolbar],:host [data-slot=rich-text-floating-toolbar],:host [data-slot=rich-text-find-overlay],:host [data-slot=rich-text-outline-panel],:host [data-slot=rich-text-history-badge]{display:none!important}:host tr,:host img{break-inside:avoid}:host h1,:host h2,:host h3{break-after:avoid}}:host img[data-blocked-src]{display:inline-flex;align-items:center;justify-content:center;min-width:8rem;min-height:4.5rem;padding:calc(.75rem * var(--_d));border:1px dashed var(--border);border-radius:var(--radius);background-color:color-mix(in oklab,var(--muted) 60%,transparent);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);color:var(--muted-foreground);font-size:.75rem;line-height:1.4;text-align:center;font-style:italic}:host img[data-blocked-src]:after{content:attr(data-blocked-label)}:host([data-ui-theme=\"neutral\"]){--primary: oklch(.205 0 0);--primary-foreground: oklch(.985 0 0);--ring: oklch(.708 0 0)}:host-context(.dark)[data-ui-theme=neutral]{--primary: oklch(.985 0 0);--primary-foreground: oklch(.205 0 0);--ring: oklch(.708 0 0)}:host([data-ui-theme=\"zinc\"]){--primary: oklch(.205 0 0);--primary-foreground: oklch(.985 0 0);--ring: oklch(.708 0 0)}:host-context(.dark)[data-ui-theme=zinc]{--primary: oklch(.985 0 0);--primary-foreground: oklch(.205 0 0);--ring: oklch(.708 0 0)}:host([data-ui-theme=\"slate\"]){--primary: oklch(.208 .042 265.755);--primary-foreground: oklch(.984 .003 247.858);--ring: oklch(.704 .04 256.788)}:host-context(.dark)[data-ui-theme=slate]{--primary: oklch(.929 .013 255.508);--primary-foreground: oklch(.208 .042 265.755);--ring: oklch(.704 .04 256.788)}:host([data-ui-theme=\"stone\"]){--primary: oklch(.216 .006 56.043);--primary-foreground: oklch(.985 .001 106.423);--ring: oklch(.709 .01 56.259)}:host-context(.dark)[data-ui-theme=stone]{--primary: oklch(.923 .003 48.717);--primary-foreground: oklch(.216 .006 56.043);--ring: oklch(.553 .013 58.071)}:host([data-ui-theme=\"gray\"]){--primary: oklch(.21 .028 264.532);--primary-foreground: oklch(.985 .002 247.839);--ring: oklch(.707 .022 264.436)}:host-context(.dark)[data-ui-theme=gray]{--primary: oklch(.928 .006 264.531);--primary-foreground: oklch(.21 .028 264.532);--ring: oklch(.551 .027 264.364)}:host([data-ui-theme=\"red\"]){--primary: oklch(.577 .245 27.325);--primary-foreground: oklch(.985 0 0);--ring: oklch(.577 .245 27.325)}:host-context(.dark)[data-ui-theme=red]{--primary: oklch(.577 .245 27.325);--primary-foreground: oklch(.985 0 0);--ring: oklch(.577 .245 27.325)}:host([data-ui-theme=\"rose\"]){--primary: oklch(.645 .246 16.439);--primary-foreground: oklch(.985 0 0);--ring: oklch(.645 .246 16.439)}:host-context(.dark)[data-ui-theme=rose]{--primary: oklch(.645 .246 16.439);--primary-foreground: oklch(.985 0 0);--ring: oklch(.645 .246 16.439)}:host([data-ui-theme=\"orange\"]){--primary: oklch(.646 .222 41.116);--primary-foreground: oklch(.985 0 0);--ring: oklch(.646 .222 41.116)}:host-context(.dark)[data-ui-theme=orange]{--primary: oklch(.646 .222 41.116);--primary-foreground: oklch(.985 0 0);--ring: oklch(.646 .222 41.116)}:host([data-ui-theme=\"green\"]){--primary: oklch(.623 .214 131.655);--primary-foreground: oklch(.985 0 0);--ring: oklch(.623 .214 131.655)}:host-context(.dark)[data-ui-theme=green]{--primary: oklch(.623 .214 131.655);--primary-foreground: oklch(.985 0 0);--ring: oklch(.623 .214 131.655)}:host([data-ui-theme=\"blue\"]){--primary: oklch(.546 .245 262.881);--primary-foreground: oklch(.985 0 0);--ring: oklch(.546 .245 262.881)}:host-context(.dark)[data-ui-theme=blue]{--primary: oklch(.546 .245 262.881);--primary-foreground: oklch(.985 0 0);--ring: oklch(.546 .245 262.881)}:host([data-ui-theme=\"yellow\"]){--primary: oklch(.82 .185 84.67);--primary-foreground: oklch(.205 0 0);--ring: oklch(.82 .185 84.67)}:host-context(.dark)[data-ui-theme=yellow]{--primary: oklch(.82 .185 84.67);--primary-foreground: oklch(.205 0 0);--ring: oklch(.82 .185 84.67)}:host([data-ui-theme=\"violet\"]){--primary: oklch(.558 .288 302.321);--primary-foreground: oklch(.985 0 0);--ring: oklch(.558 .288 302.321)}:host-context(.dark)[data-ui-theme=violet]{--primary: oklch(.558 .288 302.321);--primary-foreground: oklch(.985 0 0);--ring: oklch(.558 .288 302.321)}:host([data-ui-theme=\"amber\"]){--primary: oklch(.77 .16 70);--primary-foreground: oklch(.145 0 0);--ring: oklch(.77 .16 70)}:host-context(.dark)[data-ui-theme=amber]{--primary: oklch(.77 .16 70);--primary-foreground: oklch(.145 0 0);--ring: oklch(.77 .16 70)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { editorDiv: [{
                 type: ViewChild,
                 args: ['editorDiv']
@@ -17915,7 +18725,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
             }], tableContextMenuRef: [{
                 type: ViewChild,
                 args: ['tableContextMenuRef']
-            }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], toolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "toolbar", required: false }] }], toolbarItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "toolbarItems", required: false }] }], customToolbarItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "customToolbarItems", required: false }] }], customToolbarAction: [{ type: i0.Output, args: ["customToolbarAction"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], markdownShortcuts: [{ type: i0.Input, args: [{ isSignal: true, alias: "markdownShortcuts", required: false }] }], counter: [{ type: i0.Input, args: [{ isSignal: true, alias: "counter", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], history: [{ type: i0.Input, args: [{ isSignal: true, alias: "history", required: false }] }], findDebounceMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "findDebounceMs", required: false }] }], allowedImageHosts: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowedImageHosts", required: false }] }], allowedLinkSchemes: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowedLinkSchemes", required: false }] }], blockedImageMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "blockedImageMessage", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], dir: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], htmlChange: [{ type: i0.Output, args: ["htmlChange"] }], markdownChange: [{ type: i0.Output, args: ["markdownChange"] }], wordCountChange: [{ type: i0.Output, args: ["wordCountChange"] }], historyChange: [{ type: i0.Output, args: ["historyChange"] }], imageBlocked: [{ type: i0.Output, args: ["imageBlocked"] }], focused: [{ type: i0.Output, args: ["focused"] }], blurred: [{ type: i0.Output, args: ["blurred"] }] } });
+            }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], toolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "toolbar", required: false }] }], toolbarItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "toolbarItems", required: false }] }], customToolbarItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "customToolbarItems", required: false }] }], customToolbarAction: [{ type: i0.Output, args: ["customToolbarAction"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], markdownShortcuts: [{ type: i0.Input, args: [{ isSignal: true, alias: "markdownShortcuts", required: false }] }], counter: [{ type: i0.Input, args: [{ isSignal: true, alias: "counter", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], history: [{ type: i0.Input, args: [{ isSignal: true, alias: "history", required: false }] }], findDebounceMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "findDebounceMs", required: false }] }], codeHighlightDebounceMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "codeHighlightDebounceMs", required: false }] }], allowedImageHosts: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowedImageHosts", required: false }] }], allowedLinkSchemes: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowedLinkSchemes", required: false }] }], blockedImageMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "blockedImageMessage", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], dir: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], htmlChange: [{ type: i0.Output, args: ["htmlChange"] }], markdownChange: [{ type: i0.Output, args: ["markdownChange"] }], wordCountChange: [{ type: i0.Output, args: ["wordCountChange"] }], historyChange: [{ type: i0.Output, args: ["historyChange"] }], imageBlocked: [{ type: i0.Output, args: ["imageBlocked"] }], focused: [{ type: i0.Output, args: ["focused"] }], blurred: [{ type: i0.Output, args: ["blurred"] }] } });
 /** The last child element of `parent` whose tag is `tagName`, or null. */
 function lastChildTagged(parent, tagName) {
     for (let child = parent.lastElementChild; child; child = child.previousElementSibling) {
@@ -19058,6 +19868,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                     }, template: "@if (skeleton()) {\n  <ui-skeleton class=\"h-9 w-24 rounded-md\" />\n} @else {\n  <button\n    uiRipple\n    [uiRippleDisabled]=\"!ripple()\"\n    [uiRippleColor]=\"rippleColor()\"\n    [class]=\"classes()\"\n    [disabled]=\"disabled() || loading()\"\n    [type]=\"type()\"\n    [attr.data-slot]=\"'button'\"\n    [attr.aria-label]=\"resolvedAriaLabel()\"\n    (click)=\"clicked.emit($event)\"\n  >\n    @if (loading()) {\n      <div class=\"absolute inset-0 flex items-center justify-center\" aria-hidden=\"true\">\n        <ui-spinner size=\"xs\" />\n      </div>\n    }\n    @if (label()) {\n      {{ label() }}\n    } @else {\n      <ng-content />\n    }\n  </button>\n}\n", styles: [":host{--_d: var(--density-button, var(--density, 1))}@layer components{[data-slot=button]{height:calc(2.25rem * var(--_d));padding-inline:calc(1rem * var(--_d))}:host([data-size=\"sm\"]) [data-slot=button]{height:calc(2rem * var(--_d));padding-inline:calc(.75rem * var(--_d))}:host([data-size=\"lg\"]) [data-slot=button]{height:calc(2.5rem * var(--_d));padding-inline:calc(2rem * var(--_d))}:host([data-size=\"icon\"]) [data-slot=button]{height:calc(2.25rem * var(--_d));width:calc(2.25rem * var(--_d));padding:0}:host([data-size=\"icon-sm\"]) [data-slot=button]{height:calc(2rem * var(--_d));width:calc(2rem * var(--_d));padding:0}:host([data-size=\"icon-lg\"]) [data-slot=button]{height:calc(2.5rem * var(--_d));width:calc(2.5rem * var(--_d));padding:0}}\n"] }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ripple: [{ type: i0.Input, args: [{ isSignal: true, alias: "ripple", required: false }] }], rippleColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "rippleColor", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], skeleton: [{ type: i0.Input, args: [{ isSignal: true, alias: "skeleton", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
 
+/**
+ * Per-instance colour presets — the same names `npx shadcn-angular change-theme`
+ * accepts. A component that exposes a `theme` input reflects it as the
+ * `data-ui-theme` attribute, and its own stylesheet maps each name to the
+ * preset's tokens, so nothing global is involved.
+ */
+const THEME_NAMES = [
+    'zinc', 'slate', 'stone', 'gray', 'neutral',
+    'red', 'rose', 'orange', 'green', 'blue', 'yellow', 'violet', 'amber',
+];
+/** The attribute a themed host carries; overlays look it up to inherit the preset. */
+const THEME_ATTRIBUTE = 'data-ui-theme';
+/** The tokens a preset overrides — everything else stays the app's global tokens. */
+const THEME_TOKENS = ['--primary', '--primary-foreground', '--ring'];
+/**
+ * Carries a themed component's preset onto an overlay rendered outside it.
+ * Call it when the overlay is shown — including every re-show of a reused one.
+ *
+ * Custom properties inherit through the DOM tree, so anything a themed component
+ * renders inside itself is themed for free, live. Two kinds of overlay are NOT
+ * descendants and would silently fall back to the global tokens: one appended
+ * to `document.body`, and one an addon directive creates through its
+ * `ViewContainerRef`, which Angular inserts as a SIBLING of the host. Those get
+ * the resolved tokens copied at show time (so a dark-mode toggle while one is
+ * open is not reflected until it re-opens).
+ *
+ * A real descendant is left alone so it keeps inheriting live, and an overlay
+ * whose origin is not themed (any more) has earlier copies cleared, so it
+ * follows the global tokens.
+ */
+function inheritThemeTokens(origin, overlay) {
+    const themed = origin.closest(`[${THEME_ATTRIBUTE}]`);
+    if (themed?.contains(overlay))
+        return;
+    if (!themed) {
+        for (const token of THEME_TOKENS)
+            overlay.style.removeProperty(token);
+        delete overlay.dataset['uiTheme'];
+        return;
+    }
+    const computed = getComputedStyle(themed);
+    for (const token of THEME_TOKENS) {
+        overlay.style.setProperty(token, computed.getPropertyValue(token));
+    }
+    // The attribute travels too, so an overlay opened FROM this overlay (a
+    // context submenu, a tooltip inside a popover) still finds a themed origin.
+    overlay.dataset['uiTheme'] = themed.dataset['uiTheme'];
+}
+
 const ALERT_DIALOG = new InjectionToken('ALERT_DIALOG');
 class AlertDialogComponent {
     constructor() {
@@ -19641,6 +20500,7 @@ class ConfirmDirective {
         this.appRef = inject(ApplicationRef);
         this.injector = inject(EnvironmentInjector);
         this.elementInjector = inject(Injector);
+        this.hostEl = inject(ElementRef);
     }
     /**
      * Intercept the host click and open the confirmation dialog instead.
@@ -19659,6 +20519,7 @@ class ConfirmDirective {
         ref.instance.cancelLabel.set(this.resolvedCancelLabel());
         this.appRef.attachView(ref.hostView);
         document.body.appendChild(ref.location.nativeElement);
+        inheritThemeTokens(this.hostEl.nativeElement, ref.location.nativeElement);
         ref.instance.show();
         const confirmSub = ref.instance.confirmed.subscribe(() => {
             this.confirmed.emit();
@@ -20350,6 +21211,7 @@ class RichTextActionsDirective {
         };
         const occupied = target.existing ? readActions(target.existing).map((a) => a.trigger) : [];
         const ref = this.vcr.createComponent(RichTextActionsDialogComponent);
+        inheritThemeTokens(this.vcr.element.nativeElement, ref.location.nativeElement);
         ref.setInput('definitions', this.uiRteActions());
         ref.setInput('locale', this.i18n.t());
         ref.setInput('context', {
@@ -20445,6 +21307,7 @@ class RichTextActionsDirective {
         this.popoverTarget = el;
         const rows = this.buildPopoverRows(el);
         const ref = this.vcr.createComponent(RichTextActionsPopoverComponent);
+        inheritThemeTokens(this.vcr.element.nativeElement, ref.location.nativeElement);
         ref.setInput('actions', rows);
         ref.setInput('locale', this.i18n.t());
         ref.setInput('canAdd', rows.length < 2);
@@ -20516,6 +21379,7 @@ class RichTextActionsDirective {
         this.hidePopover();
         const target = { kind: 'text', existing: el, image: null };
         const ref = this.vcr.createComponent(RichTextActionsDialogComponent);
+        inheritThemeTokens(this.vcr.element.nativeElement, ref.location.nativeElement);
         ref.setInput('definitions', this.uiRteActions());
         ref.setInput('locale', this.i18n.t());
         ref.setInput('context', {
@@ -21100,6 +21964,7 @@ function hoverCardHandlers(injector, o = {}) {
             body: String(event.params['body'] ?? ''),
             dir: directionOf(event.element),
         });
+        inheritThemeTokens(event.element, open.host);
         anchorOverlay(open.host, event.element);
         // Grace area: keep the card open while the pointer is over it.
         open.host.addEventListener('mouseenter', cancelClose);
@@ -21244,6 +22109,7 @@ function openDialogHandlers(injector, o = {}) {
             dir: directionOf(event.element),
         });
         overlay.host.style.inset = '0';
+        inheritThemeTokens(event.element, overlay.host);
         const onKeydown = (e) => { if (e.key === 'Escape')
             dismiss(); };
         const dismiss = () => {
@@ -22704,6 +23570,7 @@ class PopoverContentComponent {
     constructor() {
         this.popover = inject(POPOVER, { optional: true });
         this.document = inject(DOCUMENT);
+        this.hostEl = inject(ElementRef);
         /** Extra classes merged onto the panel. Keep a width constraint viewport-aware (`max-w-[calc(100vw-2rem)]`), since the panel is positioned, not laid out by its parent. */
         this.class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
         /** Alignment along the chosen {@link side}'s edge: `'start'`, `'center'` or `'end'`. May be flipped at runtime when {@link avoidCollisions} is on. */
@@ -22937,6 +23804,7 @@ class PopoverContentComponent {
             this.portalHost.dataset['popoverPortal'] = 'true';
             this.portalHost.style.cssText = 'display:contents';
             this.document.body.appendChild(this.portalHost);
+            inheritThemeTokens(this.hostEl.nativeElement, this.portalHost);
             this.popover?.registerPortal(this.portalHost);
         }
         this.portalHost.appendChild(el);
@@ -26180,6 +27048,7 @@ class TooltipDirective {
         this.renderer.appendChild(tooltipEl, text);
         this.renderer.setAttribute(tooltipEl, 'class', 'fixed z-50 whitespace-nowrap rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground pointer-events-none');
         this.renderer.appendChild(document.body, tooltipEl);
+        inheritThemeTokens(this.el.nativeElement, tooltipEl);
         return tooltipEl;
     }
     resolveTargetElement() {
@@ -30778,7 +31647,7 @@ class RichTextFileImportDirective {
     async importDocx(file) {
         this.assertImportableSize(file);
         const bytes = new Uint8Array(await file.arrayBuffer());
-        const { parseDocx } = await import('./gilav21-shadcn-angular-rte-docx-parser-CFx_4GC5.mjs');
+        const { parseDocx } = await import('./gilav21-shadcn-angular-rte-docx-parser-CdxuIlVT.mjs');
         const { renderDocxForEditor } = await import('./gilav21-shadcn-angular-rte-docx-to-editor-html-Cl9eIhkC.mjs');
         const html = renderDocxForEditor(parseDocx(bytes));
         this.insertImported(html);
@@ -33133,6 +34002,7 @@ class RichTextLinksDirective {
     createOverlay(text, url, showRemove, rect) {
         this.closeOverlay();
         const ref = this.vcr.createComponent(RichTextLinksFormComponent);
+        inheritThemeTokens(this.vcr.element.nativeElement, ref.location.nativeElement);
         ref.setInput('locale', this.i18n.t());
         ref.setInput('text', text);
         ref.setInput('url', url);
@@ -35493,6 +36363,7 @@ class RichTextSlashCommandsDirective {
     }
     createMenu() {
         const ref = this.vcr.createComponent(RichTextSlashCommandsMenuComponent);
+        inheritThemeTokens(this.vcr.element.nativeElement, ref.location.nativeElement);
         // Set here rather than as a host binding on the component: the id never
         // changes, and a host binding costs a change-detection pass per cycle
         // that re-fires the menu's scroll-into-view effect.
@@ -37740,5 +38611,5 @@ const RTE_FULL = [
  * Generated bundle index. Do not edit.
  */
 
-export { RichTextColorsButtonComponent as $, ACTION_ATTRS as A, RICH_TEXT_LOCALES as B, RICH_TEXT_MENTIONS_LOCALES as C, DEFAULT_COLOR_PALETTE as D, EMPTINESS_FIXTURES as E, FIND_MAX_PAINTED_RECTS as F, RICH_TEXT_OUTLINE_CONTEXT as G, HEADER_BYTES as H, IMAGE_IMPORT_ACCEPT as I, RICH_TEXT_OUTLINE_LOCALES as J, RICH_TEXT_PROSE_CLASSES as K, RICH_TEXT_SHORTCUT_DEFINITIONS as L, RICH_TEXT_SLASH_COMMANDS_LOCALES as M, RICH_TEXT_TABLES_BUTTON_CONTEXT as N, RICH_TEXT_TABLES_LOCALES as O, PDF_MIME as P, RICH_TEXT_TYPOGRAPHY_BUTTON_CONTEXT as Q, RICH_TEXT_ACTIONS_SANITIZER_RULES as R, RICH_TEXT_TYPOGRAPHY_LOCALES as S, RTE_FULL as T, RichTextActionsBindDirective as U, RichTextActionsDirective as V, RichTextAiChipComponent as W, RichTextAiDirective as X, RichTextAiPanelComponent as Y, RichTextAllowDirective as Z, RichTextAllowHost as _, ACTION_PARAMS as a, hostOf as a$, RichTextColorsDirective as a0, RichTextCommandRegistry as a1, RichTextEditorAddonHost as a2, RichTextEditorComponent as a3, RichTextEmojiButtonComponent as a4, RichTextEmojiDirective as a5, RichTextFileImportButtonComponent as a6, RichTextFileImportDirective as a7, RichTextFileImportOverlayComponent as a8, RichTextHistoryDirective as a9, addonSetting as aA, anchorOverlay as aB, applyImageAlignment as aC, applyStarterStyle as aD, assertFlatParams as aE, bindRichTextActions as aF, buildDefaultSlashCommands as aG, buildEntityInsertNode as aH, buildEntityRenderContext as aI, buildFindIndex as aJ, buildLineIndex as aK, caretPosition as aL, classifyImport as aM, compileFindRegex as aN, computeSeedStyleString as aO, containsCssUrl as aP, createImageElement as aQ, cssFunctionCalls as aR, dataUrlToFile as aS, decodeCssEscapes as aT, detectTrigger as aU, directionOf as aV, dragHasSupportedDocument as aW, extractCssUrls as aX, flattenIntoRowText as aY, hasUnsafeCssFunction as aZ, holdsNothing as a_, RichTextHistoryPanelComponent as aa, RichTextImageResizerComponent as ab, RichTextImagesButtonComponent as ac, RichTextImagesDirective as ad, RichTextImagesOverlayComponent as ae, RichTextLinksButtonComponent as af, RichTextLinksDirective as ag, RichTextLinksFormComponent as ah, RichTextMarkdownService as ai, RichTextMentionPopoverComponent as aj, RichTextMentionsDirective as ak, RichTextOutlineDirective as al, RichTextOutlinePanelComponent as am, RichTextPasteNormalizerService as an, RichTextSanitizerService as ao, RichTextSlashCommandsDirective as ap, RichTextSlashCommandsMenuComponent as aq, RichTextTablesButtonComponent as ar, RichTextTablesDirective as as, RichTextToolbarComponent as at, RichTextToolbarViewContext as au, RichTextTypographyButtonComponent as av, RichTextTypographyDirective as aw, TEXT_STYLE_OPTIONS as ax, TOOLBAR_BUTTONS as ay, TRANSPARENT_PIXEL as az, AddonSlotRegistry as b, hoverCardAction as b0, hoverCardHandlers as b1, isCombinedOnElement as b2, isHostAllowed as b3, isHostBearingUrl as b4, isInlineHoldingBlock as b5, isLineOwner as b6, isNestedList as b7, isPdfHeader as b8, isPhrasing as b9, parseImageSize as bA, placeCaretIn as bB, placeImageAtSelection as bC, positionAfterLine as bD, rangeShowsNothing as bE, readActions as bF, readFileAsDataUrl as bG, remoteHostOf as bH, removeAction as bI, reportResourceDecisions as bJ, resolveFromPage as bK, richTextHasMedia as bL, richTextMaxLength as bM, richTextMinWords as bN, richTextRequired as bO, richTextVisibleText as bP, rowRunsOf as bQ, selectTriggerRange as bR, separateListKinds as bS, simpleHash as bT, stripCssComments as bU, stripStyleIfMatches as bV, structureAround as bW, validateActionId as bX, validateActionParams as bY, writeAction as bZ, writeCombined as b_, isRichTextEmpty as ba, isSupportedDocumentFile as bb, isZipHeader as bc, labelBlockedImages as bd, lastOwnInlineNode as be, lineAbove as bf, lineBelow as bg, lineIsEmpty as bh, lineIsTextOnly as bi, lineKeepsItsElement as bj, lineOf as bk, lineOwnNodes as bl, lineTagIsFixed as bm, lineText as bn, linesBetween as bo, linesMayJoin as bp, linkedPreviewDialogAction as bq, linkedPreviewDialogHandlers as br, matchBlockInputRule as bs, matchInlineInputRule as bt, mountTopLayer as bu, nodeShowsNothing as bv, normalizeHostEntry as bw, offsetToPosition as bx, openDialogAction as by, openDialogHandlers as bz, DEFAULT_FONT_FAMILIES as c, DEFAULT_HIGHLIGHT_PALETTE as d, DEFAULT_LINK_SCHEMES as e, DEFAULT_TOOLBAR_ITEMS as f, DOCUMENT_IMPORT_ACCEPT as g, DOCX_MIME as h, isValidImageMagicBytes as i, FIND_MAX_QUERY_LENGTH as j, INLINE_RULE_LOOKBEHIND as k, PresetDialogComponent as l, PresetHoverCardComponent as m, RICH_TEXT_AI_CONTEXT as n, RICH_TEXT_AI_LOCALES as o, RICH_TEXT_COLORS_LOCALES as p, RICH_TEXT_COLOR_BUTTON_CONTEXT as q, RICH_TEXT_EMOJI_CONTEXT as r, RICH_TEXT_EMOJI_LOCALES as s, RICH_TEXT_FILE_IMPORT_BUTTON_CONTEXT as t, RICH_TEXT_FILE_IMPORT_LOCALES as u, RICH_TEXT_HISTORY_LOCALES as v, RICH_TEXT_IMAGES_BUTTON_CONTEXT as w, RICH_TEXT_IMAGES_LOCALES as x, RICH_TEXT_LINKS_BUTTON_CONTEXT as y, RICH_TEXT_LINKS_LOCALES as z };
-//# sourceMappingURL=gilav21-shadcn-angular-rte-gilav21-shadcn-angular-rte-DWSBW7Gw.mjs.map
+export { RichTextAllowHost as $, ACTION_ATTRS as A, RICH_TEXT_LOCALES as B, RICH_TEXT_MENTIONS_LOCALES as C, DEFAULT_COLOR_PALETTE as D, EMPTINESS_FIXTURES as E, FIND_MAX_PAINTED_RECTS as F, RICH_TEXT_OUTLINE_CONTEXT as G, HEADER_BYTES as H, IMAGE_IMPORT_ACCEPT as I, RICH_TEXT_OUTLINE_LOCALES as J, RICH_TEXT_PROSE_CLASSES as K, RICH_TEXT_SHORTCUT_DEFINITIONS as L, MAX_NESTING_DEPTH as M, RICH_TEXT_SLASH_COMMANDS_LOCALES as N, RICH_TEXT_TABLES_BUTTON_CONTEXT as O, PDF_MIME as P, RICH_TEXT_TABLES_LOCALES as Q, RICH_TEXT_ACTIONS_SANITIZER_RULES as R, RICH_TEXT_TYPOGRAPHY_BUTTON_CONTEXT as S, RICH_TEXT_TYPOGRAPHY_LOCALES as T, RTE_FULL as U, RichTextActionsBindDirective as V, RichTextActionsDirective as W, RichTextAiChipComponent as X, RichTextAiDirective as Y, RichTextAiPanelComponent as Z, RichTextAllowDirective as _, ACTION_PARAMS as a, hasUnsafeCssFunction as a$, RichTextColorsButtonComponent as a0, RichTextColorsDirective as a1, RichTextCommandRegistry as a2, RichTextEditorAddonHost as a3, RichTextEditorComponent as a4, RichTextEmojiButtonComponent as a5, RichTextEmojiDirective as a6, RichTextFileImportButtonComponent as a7, RichTextFileImportDirective as a8, RichTextFileImportOverlayComponent as a9, TRANSPARENT_PIXEL as aA, addonSetting as aB, anchorOverlay as aC, applyImageAlignment as aD, applyStarterStyle as aE, assertFlatParams as aF, bindRichTextActions as aG, blockquoteDepthOf as aH, buildDefaultSlashCommands as aI, buildEntityInsertNode as aJ, buildEntityRenderContext as aK, buildFindIndex as aL, buildLineIndex as aM, caretPosition as aN, classifyImport as aO, compileFindRegex as aP, computeSeedStyleString as aQ, containsCssUrl as aR, createImageElement as aS, cssFunctionCalls as aT, dataUrlToFile as aU, decodeCssEscapes as aV, detectTrigger as aW, directionOf as aX, dragHasSupportedDocument as aY, extractCssUrls as aZ, flattenIntoRowText as a_, RichTextHistoryDirective as aa, RichTextHistoryPanelComponent as ab, RichTextImageResizerComponent as ac, RichTextImagesButtonComponent as ad, RichTextImagesDirective as ae, RichTextImagesOverlayComponent as af, RichTextLinksButtonComponent as ag, RichTextLinksDirective as ah, RichTextLinksFormComponent as ai, RichTextMarkdownService as aj, RichTextMentionPopoverComponent as ak, RichTextMentionsDirective as al, RichTextOutlineDirective as am, RichTextOutlinePanelComponent as an, RichTextPasteNormalizerService as ao, RichTextSanitizerService as ap, RichTextSlashCommandsDirective as aq, RichTextSlashCommandsMenuComponent as ar, RichTextTablesButtonComponent as as, RichTextTablesDirective as at, RichTextToolbarComponent as au, RichTextToolbarViewContext as av, RichTextTypographyButtonComponent as aw, RichTextTypographyDirective as ax, TEXT_STYLE_OPTIONS as ay, TOOLBAR_BUTTONS as az, AddonSlotRegistry as b, writeAction as b$, holdsNothing as b0, hostOf as b1, hoverCardAction as b2, hoverCardHandlers as b3, isCombinedOnElement as b4, isHostAllowed as b5, isHostBearingUrl as b6, isInlineHoldingBlock as b7, isLineOwner as b8, isNestedList as b9, openDialogAction as bA, openDialogHandlers as bB, parseImageSize as bC, placeCaretIn as bD, placeImageAtSelection as bE, positionAfterLine as bF, rangeShowsNothing as bG, readActions as bH, readFileAsDataUrl as bI, remoteHostOf as bJ, removeAction as bK, reportResourceDecisions as bL, resolveFromPage as bM, richTextHasMedia as bN, richTextMaxLength as bO, richTextMinWords as bP, richTextRequired as bQ, richTextVisibleText as bR, rowRunsOf as bS, selectTriggerRange as bT, separateListKinds as bU, simpleHash as bV, stripCssComments as bW, stripStyleIfMatches as bX, structureAround as bY, validateActionId as bZ, validateActionParams as b_, isPdfHeader as ba, isPhrasing as bb, isRichTextEmpty as bc, isSupportedDocumentFile as bd, isZipHeader as be, labelBlockedImages as bf, lastOwnInlineNode as bg, lineAbove as bh, lineBelow as bi, lineIsEmpty as bj, lineIsTextOnly as bk, lineKeepsItsElement as bl, lineOf as bm, lineOwnNodes as bn, lineTagIsFixed as bo, lineText as bp, linesBetween as bq, linesMayJoin as br, linkedPreviewDialogAction as bs, linkedPreviewDialogHandlers as bt, matchBlockInputRule as bu, matchInlineInputRule as bv, mountTopLayer as bw, nodeShowsNothing as bx, normalizeHostEntry as by, offsetToPosition as bz, DEFAULT_FONT_FAMILIES as c, writeCombined as c0, DEFAULT_HIGHLIGHT_PALETTE as d, DEFAULT_LINK_SCHEMES as e, DEFAULT_TOOLBAR_ITEMS as f, DOCUMENT_IMPORT_ACCEPT as g, DOCX_MIME as h, isValidImageMagicBytes as i, FIND_MAX_QUERY_LENGTH as j, INLINE_RULE_LOOKBEHIND as k, PresetDialogComponent as l, PresetHoverCardComponent as m, RICH_TEXT_AI_CONTEXT as n, RICH_TEXT_AI_LOCALES as o, RICH_TEXT_COLORS_LOCALES as p, RICH_TEXT_COLOR_BUTTON_CONTEXT as q, RICH_TEXT_EMOJI_CONTEXT as r, RICH_TEXT_EMOJI_LOCALES as s, RICH_TEXT_FILE_IMPORT_BUTTON_CONTEXT as t, RICH_TEXT_FILE_IMPORT_LOCALES as u, RICH_TEXT_HISTORY_LOCALES as v, RICH_TEXT_IMAGES_BUTTON_CONTEXT as w, RICH_TEXT_IMAGES_LOCALES as x, RICH_TEXT_LINKS_BUTTON_CONTEXT as y, RICH_TEXT_LINKS_LOCALES as z };
+//# sourceMappingURL=gilav21-shadcn-angular-rte-gilav21-shadcn-angular-rte-BFcfCqW4.mjs.map