@solidev/data 1.0.0 → 1.1.0

package/fesm2022/solidev-data-richedit.mjs

@@ -1,13 +1,1082 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Output, Input, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, viewChild, inject, DestroyRef, afterNextRender, Component, signal, computed, EventEmitter, Output, Input, ChangeDetectionStrategy } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i2 from 'ngx-editor';
-import { Editor, NgxEditorModule } from 'ngx-editor';
-import * as i3 from '@angular/forms';
-import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import * as i2 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormControl, ReactiveFormsModule } from '@angular/forms';
+import { chainCommands, exitCode, toggleMark, baseKeymap, setBlockType, lift, wrapIn } from 'prosemirror-commands';
+import { redo, undo, history } from 'prosemirror-history';
+import { inputRules, wrappingInputRule, textblockTypeInputRule } from 'prosemirror-inputrules';
+import { keymap } from 'prosemirror-keymap';
+import { bulletList, orderedList, listItem, liftListItem, sinkListItem, splitListItem, wrapInList } from 'prosemirror-schema-list';
+import { PluginKey, Plugin, EditorState } from 'prosemirror-state';
+import { DecorationSet, Decoration, EditorView } from 'prosemirror-view';
+import { Schema, DOMParser, DOMSerializer } from 'prosemirror-model';
+import { uniqueId, asText, fieldValues } from '@solidev/data';
 import { firstValueFrom } from 'rxjs';
 
+/**
+ * The document schema `richedit` stores and edits.
+ *
+ * It is a deliberate copy of the schema `ngx-editor` used, because the field
+ * values already in consumers' databases were produced by that serializer:
+ * `<p style="text-align:center">`, `<span style="color:red;">`, `<u>`, `<s>`,
+ * `data-indent` attributes. Anything this schema fails to parse would be
+ * silently dropped the next time a user saves, so parse rules are kept wider
+ * than the toolbar — `sup`, `sub` and `image` have no button but survive a
+ * round trip, and so does `indent`.
+ *
+ * The one intentional difference is `rel="noopener"` on serialized links, which
+ * `ngx-editor` did not emit. It is not parsed back into an attribute, so it
+ * stays stable across round trips.
+ */
+/** Style declarations from a camelCased object, skipping empty values. */
+function toStyleString(styles) {
+    const declarations = Object.entries(styles)
+        .filter(([, value]) => typeof value === 'string' && value !== '')
+        .map(([property, value]) => `${property.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`)}:${String(value)}`);
+    return declarations.length ? declarations.join(';') : null;
+}
+/** `align` and `indent`, read the way ngx-editor read them. */
+function blockAttrs(dom) {
+    const indent = dom.getAttribute('data-indent');
+    return {
+        align: dom.getAttribute('align') ?? dom.style.textAlign ?? null,
+        indent: Number.parseInt(indent ?? '', 10) || null,
+    };
+}
+/** DOM attributes for a block carrying `align` / `indent`. */
+function blockDomAttrs(attrs) {
+    const align = attrs['align'];
+    const indent = attrs['indent'];
+    return {
+        style: toStyleString({
+            // ngx-editor left `left` implicit; keeping that keeps stored values byte
+            // identical when nothing changed.
+            textAlign: align !== 'left' ? align : null,
+            marginLeft: indent !== null ? `${indent * 40}px` : null,
+        }),
+        'data-indent': indent !== null ? String(indent) : null,
+    };
+}
+const ALIGNABLE = {
+    align: { default: null },
+    indent: { default: null },
+};
+const nodes = {
+    doc: { content: 'block+' },
+    text: { group: 'inline' },
+    paragraph: {
+        content: 'inline*',
+        group: 'block',
+        attrs: ALIGNABLE,
+        parseDOM: [{ tag: 'p', getAttrs: (dom) => blockAttrs(dom) }],
+        toDOM: (node) => ['p', blockDomAttrs(node.attrs), 0],
+    },
+    blockquote: {
+        content: 'block+',
+        group: 'block',
+        defining: true,
+        attrs: { indent: { default: null } },
+        parseDOM: [
+            {
+                tag: 'blockquote',
+                getAttrs: (dom) => ({
+                    indent: Number.parseInt(dom.getAttribute('data-indent') ?? '', 10) || null,
+                }),
+            },
+        ],
+        toDOM: (node) => {
+            const indent = node.attrs['indent'];
+            return [
+                'blockquote',
+                {
+                    style: toStyleString({ marginLeft: indent !== null ? `${indent * 40}px` : null }),
+                    'data-indent': indent !== null ? String(indent) : null,
+                },
+                0,
+            ];
+        },
+    },
+    horizontal_rule: {
+        group: 'block',
+        parseDOM: [{ tag: 'hr' }],
+        toDOM: () => ['hr'],
+    },
+    heading: {
+        attrs: { level: { default: 1 }, ...ALIGNABLE },
+        content: 'inline*',
+        group: 'block',
+        defining: true,
+        parseDOM: [1, 2, 3, 4, 5, 6].map((level) => ({
+            tag: `h${level}`,
+            getAttrs: (dom) => ({ level, ...blockAttrs(dom) }),
+        })),
+        toDOM: (node) => [`h${String(node.attrs['level'])}`, blockDomAttrs(node.attrs), 0],
+    },
+    code_block: {
+        content: 'text*',
+        marks: '',
+        group: 'block',
+        code: true,
+        defining: true,
+        parseDOM: [{ tag: 'pre', preserveWhitespace: 'full' }],
+        toDOM: () => ['pre', ['code', 0]],
+    },
+    hard_break: {
+        inline: true,
+        group: 'inline',
+        selectable: false,
+        parseDOM: [{ tag: 'br' }],
+        toDOM: () => ['br'],
+    },
+    // No toolbar button inserts one, but stored content may contain images and
+    // dropping them on the next save would lose user data.
+    image: {
+        inline: true,
+        group: 'inline',
+        draggable: true,
+        attrs: {
+            src: {},
+            alt: { default: null },
+            title: { default: null },
+            width: { default: null },
+        },
+        parseDOM: [
+            {
+                tag: 'img[src]',
+                getAttrs: (dom) => ({
+                    src: dom.getAttribute('src'),
+                    alt: dom.getAttribute('alt'),
+                    title: dom.getAttribute('title'),
+                    width: dom.getAttribute('width'),
+                }),
+            },
+        ],
+        toDOM: (node) => [
+            'img',
+            {
+                src: node.attrs['src'],
+                alt: node.attrs['alt'],
+                title: node.attrs['title'],
+                width: node.attrs['width'],
+            },
+        ],
+    },
+    list_item: { ...listItem, content: 'paragraph block*' },
+    ordered_list: { ...orderedList, content: 'list_item+', group: 'block' },
+    bullet_list: { ...bulletList, content: 'list_item+', group: 'block' },
+};
+const marks = {
+    link: {
+        attrs: { href: {}, title: { default: null }, target: { default: '_blank' } },
+        inclusive: false,
+        parseDOM: [
+            {
+                tag: 'a[href]',
+                getAttrs: (dom) => ({
+                    href: dom.getAttribute('href'),
+                    title: dom.getAttribute('title'),
+                    target: dom.getAttribute('target'),
+                }),
+            },
+        ],
+        toDOM: (mark) => [
+            'a',
+            {
+                href: mark.attrs['href'],
+                title: mark.attrs['title'],
+                target: mark.attrs['target'],
+                // Not parsed back, so it does not accumulate; opening a link in a new
+                // tab without it hands the target window a reference to ours.
+                rel: 'noopener',
+            },
+            0,
+        ],
+    },
+    em: {
+        parseDOM: [{ tag: 'i' }, { tag: 'em' }, { style: 'font-style=italic' }],
+        toDOM: () => ['em', 0],
+    },
+    strong: {
+        parseDOM: [
+            { tag: 'strong' },
+            // Google Docs wraps pasted content in <b style="font-weight:normal">.
+            { tag: 'b', getAttrs: (dom) => dom.style.fontWeight !== 'normal' && null },
+            { style: 'font-weight', getAttrs: (value) => /^(?:bold(?:er)?|[5-9]\d{2,})$/.test(value) && null },
+        ],
+        toDOM: () => ['strong', 0],
+    },
+    code: {
+        parseDOM: [{ tag: 'code' }],
+        toDOM: () => ['code', 0],
+    },
+    u: {
+        parseDOM: [{ tag: 'u' }, { style: 'text-decoration=underline', consuming: false }],
+        toDOM: () => ['u', 0],
+    },
+    s: {
+        parseDOM: [{ tag: 's' }, { tag: 'strike' }, { style: 'text-decoration=line-through' }],
+        toDOM: () => ['s', 0],
+    },
+    text_color: {
+        attrs: { color: { default: null } },
+        parseDOM: [{ style: 'color', getAttrs: (value) => ({ color: value }) }],
+        toDOM: (mark) => ['span', { style: `color:${String(mark.attrs['color'])};` }, 0],
+    },
+    text_background_color: {
+        attrs: { backgroundColor: { default: null } },
+        parseDOM: [{ style: 'background-color', getAttrs: (value) => ({ backgroundColor: value }) }],
+        toDOM: (mark) => [
+            'span',
+            { style: `background-color:${String(mark.attrs['backgroundColor'])};` },
+            0,
+        ],
+    },
+    // Parse-only in practice: no toolbar button toggles them, but content saved
+    // by ngx-editor's superscript/subscript commands still round-trips.
+    sup: {
+        parseDOM: [{ tag: 'sup' }, { style: 'vertical-align=super' }],
+        toDOM: () => ['sup', 0],
+    },
+    sub: {
+        parseDOM: [{ tag: 'sub' }, { style: 'vertical-align=sub' }],
+        toDOM: () => ['sub', 0],
+    },
+};
+/** The schema itself — one instance, shared by every editor. */
+const schema = new Schema({ nodes, marks });
+/**
+ * Node types, resolved once and by name.
+ *
+ * `Schema.nodes` is an index signature, and this project turns on
+ * `noPropertyAccessFromIndexSignature`, so every lookup would otherwise need
+ * brackets at the call site.
+ */
+const nodeTypes = {
+    doc: schema.nodes['doc'],
+    paragraph: schema.nodes['paragraph'],
+    heading: schema.nodes['heading'],
+    blockquote: schema.nodes['blockquote'],
+    codeBlock: schema.nodes['code_block'],
+    bulletList: schema.nodes['bullet_list'],
+    orderedList: schema.nodes['ordered_list'],
+    listItem: schema.nodes['list_item'],
+    hardBreak: schema.nodes['hard_break'],
+    horizontalRule: schema.nodes['horizontal_rule'],
+    image: schema.nodes['image'],
+};
+/** Mark types, resolved once and by name. See {@link nodeTypes}. */
+const markTypes = {
+    strong: schema.marks['strong'],
+    em: schema.marks['em'],
+    underline: schema.marks['u'],
+    strike: schema.marks['s'],
+    code: schema.marks['code'],
+    link: schema.marks['link'],
+    textColor: schema.marks['text_color'],
+    backgroundColor: schema.marks['text_background_color'],
+};
+
+/**
+ * HTML in, HTML out. `richedit` stores its field values as HTML strings, so
+ * every document crosses this boundary twice per edit.
+ *
+ * Both directions go through a detached element, never through the live
+ * document, which keeps them usable under SSR shims and in jsdom specs.
+ */
+/** A detached container to parse into or serialize out of. */
+function container() {
+    return document.createElement('div');
+}
+/**
+ * Parse an HTML string into a document node.
+ *
+ * Anything the schema has no rule for is dropped, which is why the schema keeps
+ * parse rules for constructs the toolbar cannot produce.
+ */
+function fromHTML(html, schema$1 = schema) {
+    const element = container();
+    element.innerHTML = html;
+    return DOMParser.fromSchema(schema$1).parse(element);
+}
+/**
+ * Serialize a document node back to an HTML string.
+ *
+ * An empty document serializes to `''`, not to the `<p></p>` `ngx-editor`
+ * wrote. A field the user cleared should read as empty for the consumer — a
+ * paragraph containing nothing is truthy, and every `if (model.description)`
+ * built on it was quietly wrong.
+ */
+function toHTML(doc, schema$1 = schema) {
+    if (isEmpty(doc))
+        return '';
+    const element = container();
+    element.appendChild(DOMSerializer.fromSchema(schema$1).serializeFragment(doc.content));
+    return element.innerHTML;
+}
+/**
+ * Whether a document holds nothing but one empty textblock.
+ *
+ * Drives both the placeholder decoration and {@link toHTML}'s empty case. Note
+ * that an empty *heading* counts: the user typed `# ` and nothing else, so
+ * there is still no content to store.
+ */
+function isEmpty(doc) {
+    if (doc.childCount === 0)
+        return true;
+    const first = doc.firstChild;
+    return doc.childCount === 1 && !!first && first.isTextblock && first.content.size === 0;
+}
+
+/** Marks a transaction as coming from {@link Editor.setContent}. */
+const SET_CONTENT = new PluginKey('richeditSetContent');
+/** Shows `placeholder` over an otherwise empty document. */
+function placeholderPlugin(placeholder) {
+    return new Plugin({
+        props: {
+            decorations: (state) => {
+                const first = state.doc.firstChild;
+                if (!first || !isEmpty(state.doc))
+                    return null;
+                return DecorationSet.create(state.doc, [
+                    Decoration.node(0, first.nodeSize, { class: 'is-empty', 'data-placeholder': placeholder }),
+                ]);
+            },
+        },
+    });
+}
+/** The typing shortcuts: `# `, `> `, `- `, `1. ` and ``` ``` ```. */
+function editorInputRules() {
+    return inputRules({
+        rules: [
+            wrappingInputRule(/^\s*>\s$/, nodeTypes.blockquote),
+            wrappingInputRule(/^\s*([-+*])\s$/, nodeTypes.bulletList),
+            wrappingInputRule(/^(\d+)\.\s$/, nodeTypes.orderedList, (match) => ({ order: Number(match[1]) }), (match, node) => node.childCount + node.attrs['order'] === Number(match[1])),
+            textblockTypeInputRule(/^```$/, nodeTypes.codeBlock),
+            textblockTypeInputRule(/^(#{1,6})\s$/, nodeTypes.heading, (match) => ({ level: match[1].length })),
+        ],
+    });
+}
+/** Keys the editor binds on top of ProseMirror's base map. */
+function editorKeymap() {
+    const hardBreak = chainCommands(exitCode, (state, dispatch) => {
+        if (dispatch) {
+            dispatch(state.tr.replaceSelectionWith(nodeTypes.hardBreak.create()).scrollIntoView());
+        }
+        return true;
+    });
+    return keymap({
+        'Mod-z': undo,
+        'Mod-y': redo,
+        'Mod-Shift-z': redo,
+        'Mod-b': toggleMark(markTypes.strong),
+        'Mod-i': toggleMark(markTypes.em),
+        'Mod-u': toggleMark(markTypes.underline),
+        Enter: splitListItem(nodeTypes.listItem),
+        Tab: sinkListItem(nodeTypes.listItem),
+        'Shift-Tab': liftListItem(nodeTypes.listItem),
+        'Mod-Enter': hardBreak,
+        'Shift-Enter': hardBreak,
+    });
+}
+/**
+ * The rich text engine behind `<data-richedit>`.
+ *
+ * Owns a ProseMirror `EditorView` and everything plugged into it, and speaks
+ * HTML at its edges — which is what the field values are. It replaces
+ * `ngx-editor`'s class of the same name and keeps the same shape of
+ * responsibility, so the Angular components around it stayed thin.
+ *
+ * The view is created detached: the menu bar and the editor component both
+ * receive the `Editor` before there is anywhere to put its DOM, and the editor
+ * component adopts {@link dom} when it renders.
+ *
+ * @example
+ * ```ts
+ * const editor = new Editor({ content: '<p>hello</p>' });
+ * editor.onChange((html) => console.log(html));
+ * document.body.appendChild(editor.dom);
+ * ```
+ */
+class Editor {
+    /** The underlying ProseMirror view. */
+    view;
+    changeListeners = new Set();
+    stateListeners = new Set();
+    /** Serialization of the current document — what {@link html} reports. */
+    _html;
+    /**
+     * The last string handed in from outside.
+     *
+     * Parsing normalises (`<b>` becomes `<strong>`, `text-align:center` gains a
+     * space), so the loaded string and the serialized one often differ while
+     * meaning the same document. Keeping both is what lets {@link setContent}
+     * recognise "you are giving me back what you already gave me".
+     */
+    _loaded;
+    _editable;
+    constructor(options = {}) {
+        this._loaded = options.content ?? '';
+        this._editable = options.editable ?? true;
+        const plugins = [history(), editorKeymap(), keymap(baseKeymap), editorInputRules()];
+        if (options.placeholder) {
+            plugins.push(placeholderPlugin(options.placeholder));
+        }
+        const doc = fromHTML(this._loaded);
+        this._html = toHTML(doc);
+        this.view = new EditorView(null, {
+            state: EditorState.create({ doc, schema, plugins }),
+            editable: () => this._editable,
+            attributes: options.labelledBy ? { 'aria-labelledby': options.labelledBy } : {},
+            dispatchTransaction: (transaction) => {
+                this.view.updateState(this.view.state.apply(transaction));
+                if (transaction.docChanged) {
+                    this._html = toHTML(this.view.state.doc);
+                    // Content pushed in from outside must not be reported back as a user
+                    // edit; that is what would mark a pristine form dirty on load.
+                    if (!transaction.getMeta(SET_CONTENT)) {
+                        for (const listener of this.changeListeners)
+                            listener(this._html);
+                    }
+                }
+                for (const listener of this.stateListeners)
+                    listener(this.view.state);
+            },
+        });
+    }
+    /** The editor's DOM node, ready to be placed in the document. */
+    get dom() {
+        return this.view.dom;
+    }
+    /** Current editor state, for menu bar queries. */
+    get state() {
+        return this.view.state;
+    }
+    /** Current content, as an HTML string. */
+    get html() {
+        return this._html;
+    }
+    /** Whether the document accepts edits. */
+    get editable() {
+        return this._editable;
+    }
+    /**
+     * Replace the content.
+     *
+     * A no-op when the HTML is the one already loaded, which is what keeps a
+     * form control writing its own value back from resetting the cursor on every
+     * keystroke. The replacement is kept out of the undo history — undoing back
+     * past a programmatic load is not something a user ever means.
+     */
+    setContent(html) {
+        if (html === this._html || html === this._loaded)
+            return;
+        this._loaded = html;
+        const doc = fromHTML(html);
+        const transaction = this.view.state.tr
+            .replaceWith(0, this.view.state.doc.content.size, doc.content)
+            .setMeta(SET_CONTENT, true)
+            .setMeta('addToHistory', false);
+        this.view.dispatch(transaction);
+    }
+    /** Enable or disable editing. */
+    setEditable(editable) {
+        if (this._editable === editable)
+            return;
+        this._editable = editable;
+        // Re-runs the `editable` prop and updates contenteditable on the DOM node.
+        this.view.setProps({});
+    }
+    /** Run a command against the current state. Returns whether it applied. */
+    exec(command) {
+        const applied = command(this.view.state, this.view.dispatch.bind(this.view));
+        this.view.focus();
+        return applied;
+    }
+    /** Put the caret back in the document. */
+    focus() {
+        this.view.focus();
+    }
+    /** Listen to content changes. Returns a function that stops listening. */
+    onChange(listener) {
+        this.changeListeners.add(listener);
+        return () => this.changeListeners.delete(listener);
+    }
+    /** Listen to state changes, including selection. Returns an unsubscribe. */
+    onStateChange(listener) {
+        this.stateListeners.add(listener);
+        return () => this.stateListeners.delete(listener);
+    }
+    /** Tear the view down and drop every listener. */
+    destroy() {
+        this.changeListeners.clear();
+        this.stateListeners.clear();
+        this.view.destroy();
+    }
+}
+
+/**
+ * The editable region of `<data-richedit>`: a `ControlValueAccessor` wrapped
+ * around a vendored {@link Editor}.
+ *
+ * Internal to the entry point — it replaces `<ngx-editor>` and keeps its
+ * contract, so `richedit`'s template still binds a `[formControl]` to it and
+ * the form machinery is none the wiser.
+ *
+ * The editor's DOM is built detached by the {@link Editor} itself and adopted
+ * here once there is a host element, which keeps construction free of layout
+ * and safe under SSR.
+ */
+class RicheditEditorComponent {
+    /** The engine to display. Owned by the parent, which also destroys it. */
+    editor = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "editor" }] : /* istanbul ignore next */ []));
+    /** Id put on the wrapper, so a label can point at it. */
+    inputId = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "inputId" }] : /* istanbul ignore next */ []));
+    host = viewChild.required('host', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "host" }] : /* istanbul ignore next */ []));
+    destroyRef = inject(DestroyRef);
+    onChange = () => {
+        // Replaced by registerOnChange when used inside a form.
+    };
+    onTouched = () => {
+        // Replaced by registerOnTouched when used inside a form.
+    };
+    constructor() {
+        afterNextRender(() => {
+            this.host().nativeElement.appendChild(this.editor().dom);
+        });
+    }
+    ngOnInit() {
+        const stop = this.editor().onChange((html) => {
+            this.onTouched();
+            this.onChange(html);
+        });
+        this.destroyRef.onDestroy(stop);
+    }
+    /** Load a value coming from the form into the editor. */
+    writeValue(html) {
+        this.editor().setContent(html ?? '');
+    }
+    /** @param onChange callback the form supplies to hear about edits */
+    registerOnChange(onChange) {
+        this.onChange = onChange;
+    }
+    /** @param onTouched callback the form supplies to hear about first contact */
+    registerOnTouched(onTouched) {
+        this.onTouched = onTouched;
+    }
+    /** Disabling the control makes the document read-only. */
+    setDisabledState(disabled) {
+        this.editor().setEditable(!disabled);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: RicheditEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.3", type: RicheditEditorComponent, isStandalone: true, selector: "data-richedit-editor", inputs: { editor: { classPropertyName: "editor", publicName: "editor", isSignal: true, isRequired: true, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: NG_VALUE_ACCESSOR, multi: true, useExisting: RicheditEditorComponent }], viewQueries: [{ propertyName: "host", first: true, predicate: ["host"], descendants: true, isSignal: true }], ngImport: i0, template: '<div #host class="data-richedit__content" [attr.id]="inputId()"></div>', isInline: true, styles: [":host{display:block}:host ::ng-deep .ProseMirror{outline:none;min-height:6rem;padding:.5rem .75rem;white-space:pre-wrap;word-wrap:break-word}:host ::ng-deep .ProseMirror>*:first-child{margin-top:0}:host ::ng-deep .ProseMirror>*:last-child{margin-bottom:0}:host ::ng-deep .ProseMirror .is-empty:before{content:attr(data-placeholder);float:left;height:0;pointer-events:none;color:var(--bs-secondary-color, #6c757d)}:host ::ng-deep .ProseMirror blockquote{border-left:3px solid var(--bs-border-color, #dee2e6);padding-left:.75rem;margin-left:0;color:var(--bs-secondary-color, #6c757d)}:host ::ng-deep .ProseMirror pre{background:var(--bs-tertiary-bg, rgba(0, 0, 0, .05));border-radius:var(--bs-border-radius-sm, .25rem);padding:.5rem .75rem}:host ::ng-deep .ProseMirror hr{border-top:1px solid var(--bs-border-color, #dee2e6)}:host ::ng-deep .ProseMirror .ProseMirror-selectednode{outline:2px solid var(--bs-primary, #0d6efd)}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: RicheditEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'data-richedit-editor', template: '<div #host class="data-richedit__content" [attr.id]="inputId()"></div>', providers: [{ provide: NG_VALUE_ACCESSOR, multi: true, useExisting: RicheditEditorComponent }], styles: [":host{display:block}:host ::ng-deep .ProseMirror{outline:none;min-height:6rem;padding:.5rem .75rem;white-space:pre-wrap;word-wrap:break-word}:host ::ng-deep .ProseMirror>*:first-child{margin-top:0}:host ::ng-deep .ProseMirror>*:last-child{margin-bottom:0}:host ::ng-deep .ProseMirror .is-empty:before{content:attr(data-placeholder);float:left;height:0;pointer-events:none;color:var(--bs-secondary-color, #6c757d)}:host ::ng-deep .ProseMirror blockquote{border-left:3px solid var(--bs-border-color, #dee2e6);padding-left:.75rem;margin-left:0;color:var(--bs-secondary-color, #6c757d)}:host ::ng-deep .ProseMirror pre{background:var(--bs-tertiary-bg, rgba(0, 0, 0, .05));border-radius:var(--bs-border-radius-sm, .25rem);padding:.5rem .75rem}:host ::ng-deep .ProseMirror hr{border-top:1px solid var(--bs-border-color, #dee2e6)}:host ::ng-deep .ProseMirror .ProseMirror-selectednode{outline:2px solid var(--bs-primary, #0d6efd)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { editor: [{ type: i0.Input, args: [{ isSignal: true, alias: "editor", required: true }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], host: [{ type: i0.ViewChild, args: ['host', { isSignal: true }] }] } });
+
+/**
+ * Editing commands for the `richedit` schema, plus the state queries the menu
+ * bar needs to render a button pressed or not.
+ *
+ * Everything here is a plain ProseMirror `Command` — `(state, dispatch?) =>
+ * boolean` — so it can be bound to a key, called from a button, or asserted on
+ * in a spec by dispatching into a bare `EditorState`.
+ */
+/** Whether every attribute in `expected` matches the node's. */
+function attrsMatch(actual, expected) {
+    return Object.keys(expected).every((key) => actual[key] === expected[key]);
+}
+/**
+ * Whether the mark is on the whole selection — or, with the cursor collapsed,
+ * whether the next character typed would carry it.
+ */
+function isMarkActive(state, type) {
+    const { from, to, empty, $from } = state.selection;
+    if (empty) {
+        return !!type.isInSet(state.storedMarks ?? $from.marks());
+    }
+    return state.doc.rangeHasMark(from, to, type);
+}
+/**
+ * Whether a node of that type (with those attributes, if given) contains or
+ * intersects the selection.
+ *
+ * `nodesBetween` walks down from the document, so this reports ancestors too —
+ * which is what makes it work for blockquotes and lists, where the cursor sits
+ * in a paragraph nested inside the node being asked about.
+ */
+function isNodeActive(state, type, attrs = {}) {
+    const { from, to } = state.selection;
+    let active = false;
+    state.doc.nodesBetween(from, to, (node) => {
+        if (node.type === type && attrsMatch(node.attrs, attrs)) {
+            active = true;
+        }
+    });
+    return active;
+}
+/** Toggle a mark over the selection. */
+function toggleMarkCommand(type) {
+    return toggleMark(type);
+}
+/** Toggle `<strong>` over the selection. */
+const toggleBold = toggleMark(markTypes.strong);
+/** Toggle `<em>` over the selection. */
+const toggleItalic = toggleMark(markTypes.em);
+/** Toggle `<u>` over the selection. */
+const toggleUnderline = toggleMark(markTypes.underline);
+/** Toggle `<s>` over the selection. */
+const toggleStrike = toggleMark(markTypes.strike);
+/** Toggle `<code>` over the selection. */
+const toggleCode = toggleMark(markTypes.code);
+/**
+ * Make the selected blocks headings of that level.
+ *
+ * This is what the menu bar's dropdown uses: picking a level in a list should
+ * put you at that level, not toggle you out of it.
+ */
+function setHeading(level) {
+    return setBlockType(nodeTypes.heading, { level });
+}
+/**
+ * Switch the selected blocks between a heading of that level and a paragraph.
+ *
+ * Unlike {@link setHeading}, picking the level already in force turns it back
+ * into a paragraph — the behaviour a toggle button wants.
+ */
+function toggleHeading(level) {
+    return (state, dispatch) => isNodeActive(state, nodeTypes.heading, { level })
+        ? setBlockType(nodeTypes.paragraph)(state, dispatch)
+        : setHeading(level)(state, dispatch);
+}
+/** Turn the selected blocks into paragraphs. */
+const setParagraph = setBlockType(nodeTypes.paragraph);
+/** Toggle a code block over the selected blocks. */
+const toggleCodeBlock = (state, dispatch) => isNodeActive(state, nodeTypes.codeBlock)
+    ? setBlockType(nodeTypes.paragraph)(state, dispatch)
+    : setBlockType(nodeTypes.codeBlock)(state, dispatch);
+/** Wrap the selection in a blockquote, or lift it back out. */
+const toggleBlockquote = (state, dispatch) => isNodeActive(state, nodeTypes.blockquote) ? lift(state, dispatch) : wrapIn(nodeTypes.blockquote)(state, dispatch);
+/** Wrap the selection in a list of that type, or lift it back out. */
+function toggleList(type) {
+    return (state, dispatch) => isNodeActive(state, type) ? liftListItem(nodeTypes.listItem)(state, dispatch) : wrapInList(type)(state, dispatch);
+}
+/** Toggle a bullet list around the selection. */
+const toggleBulletList = toggleList(nodeTypes.bulletList);
+/** Toggle an ordered list around the selection. */
+const toggleOrderedList = toggleList(nodeTypes.orderedList);
+/**
+ * Set the text alignment of every paragraph and heading in the selection.
+ *
+ * Alignment lives on the block as an attribute and serializes to
+ * `style="text-align:…"`, the way `ngx-editor` stored it. `null` clears it.
+ */
+function setAlign(align) {
+    return (state, dispatch) => {
+        const { from, to } = state.selection;
+        const transaction = state.tr;
+        let applicable = false;
+        state.doc.nodesBetween(from, to, (node, pos) => {
+            if (node.type !== nodeTypes.paragraph && node.type !== nodeTypes.heading)
+                return;
+            applicable = true;
+            // setNodeMarkup keeps the node's size, so positions collected during the
+            // walk stay valid as the transaction grows.
+            transaction.setNodeMarkup(pos, undefined, { ...node.attrs, align });
+        });
+        if (!applicable)
+            return false;
+        if (dispatch)
+            dispatch(transaction.scrollIntoView());
+        return true;
+    };
+}
+/** The alignment in force on the block holding the cursor, if any. */
+function activeAlignment(state) {
+    const parent = state.selection.$from.parent;
+    if (parent.type !== nodeTypes.paragraph && parent.type !== nodeTypes.heading)
+        return null;
+    return parent.attrs['align'] ?? null;
+}
+/** The heading level in force, or 0 outside a heading. */
+function activeHeading(state) {
+    for (let level = 1; level <= 6; level++) {
+        if (isNodeActive(state, nodeTypes.heading, { level }))
+            return level;
+    }
+    return 0;
+}
+/**
+ * Apply a colour mark to the selection, replacing any colour already there.
+ *
+ * With the cursor collapsed the mark is stored instead, so it applies to what
+ * the user types next — the same behaviour as bold on an empty selection.
+ */
+function setColor(type, attrs) {
+    return (state, dispatch) => {
+        const { from, to, empty } = state.selection;
+        if (empty) {
+            if (dispatch)
+                dispatch(state.tr.addStoredMark(type.create(attrs)));
+            return true;
+        }
+        if (dispatch) {
+            dispatch(state.tr.removeMark(from, to, type).addMark(from, to, type.create(attrs)).scrollIntoView());
+        }
+        return true;
+    };
+}
+/** Drop a colour mark from the selection. */
+function removeColor(type) {
+    return (state, dispatch) => {
+        const { from, to, empty } = state.selection;
+        if (empty) {
+            if (dispatch)
+                dispatch(state.tr.removeStoredMark(type));
+            return true;
+        }
+        if (dispatch)
+            dispatch(state.tr.removeMark(from, to, type).scrollIntoView());
+        return true;
+    };
+}
+/** The colour currently carried by the selection, for the colour pickers. */
+function activeColor(state, type, attr) {
+    const { $from, empty } = state.selection;
+    const marks = empty ? (state.storedMarks ?? $from.marks()) : ($from.nodeAfter?.marks ?? $from.marks());
+    const mark = marks.find((candidate) => candidate.type === type);
+    return mark ? (mark.attrs[attr] ?? null) : null;
+}
+/**
+ * The span of the link under the cursor, or the selection when it is not
+ * collapsed.
+ *
+ * Walks outwards from the cursor over the sibling text nodes that carry the
+ * mark, so "remove link" works with the caret merely inside the link rather
+ * than with the whole thing selected.
+ */
+function linkRange(state) {
+    const { $from, from, to, empty } = state.selection;
+    if (!empty)
+        return { from, to };
+    const type = markTypes.link;
+    if (!type.isInSet($from.marks()))
+        return null;
+    const parent = $from.parent;
+    const start = parent.childAfter($from.parentOffset);
+    if (!start.node)
+        return null;
+    let index = start.index;
+    let startPos = $from.start() + start.offset;
+    while (index > 0 && type.isInSet(parent.child(index - 1).marks)) {
+        index--;
+        startPos -= parent.child(index).nodeSize;
+    }
+    index = start.index;
+    let endPos = $from.start() + start.offset + start.node.nodeSize;
+    while (index + 1 < parent.childCount && type.isInSet(parent.child(index + 1).marks)) {
+        index++;
+        endPos += parent.child(index).nodeSize;
+    }
+    return { from: startPos, to: endPos };
+}
+/** The href of the link under the cursor, for prefilling the link form. */
+function activeLink(state) {
+    const mark = state.selection.$from.marks().find((candidate) => candidate.type === markTypes.link);
+    return mark ? (mark.attrs['href'] ?? null) : null;
+}
+/**
+ * Link the selection.
+ *
+ * Takes the href as an argument rather than prompting, so the command stays
+ * free of DOM and the menu bar owns the form. With the caret inside an existing
+ * link and nothing selected, that link's whole span is re-linked.
+ */
+function addLink(href, title = null) {
+    return (state, dispatch) => {
+        const range = linkRange(state);
+        if (!range || range.from === range.to)
+            return false;
+        if (dispatch) {
+            const mark = markTypes.link.create({ href, title, target: '_blank' });
+            dispatch(state.tr.removeMark(range.from, range.to, markTypes.link).addMark(range.from, range.to, mark).scrollIntoView());
+        }
+        return true;
+    };
+}
+/** Unlink the link under the cursor, or the selection. */
+const removeLink = (state, dispatch) => {
+    const range = linkRange(state);
+    if (!range || range.from === range.to)
+        return false;
+    if (dispatch)
+        dispatch(state.tr.removeMark(range.from, range.to, markTypes.link).scrollIntoView());
+    return true;
+};
+/** Insert a horizontal rule at the selection. */
+const insertHorizontalRule = (state, dispatch) => {
+    if (dispatch)
+        dispatch(state.tr.replaceSelectionWith(nodeTypes.horizontalRule.create()).scrollIntoView());
+    return true;
+};
+/** Drop every mark from the selection and put its blocks back to paragraphs. */
+const clearFormat = (state, dispatch) => {
+    const { from, to, empty } = state.selection;
+    if (empty)
+        return false;
+    if (dispatch) {
+        const transaction = state.tr;
+        for (const type of Object.values(schema.marks)) {
+            transaction.removeMark(from, to, type);
+        }
+        dispatch(transaction.scrollIntoView());
+    }
+    return true;
+};
+
+/** Button definitions, by toolbar item name. */
+const BUTTONS = {
+    bold: { icon: 'bi-type-bold', label: 'Gras', command: toggleBold, active: (s) => isMarkActive(s, markTypes.strong) },
+    italic: {
+        icon: 'bi-type-italic',
+        label: 'Italique',
+        command: toggleItalic,
+        active: (s) => isMarkActive(s, markTypes.em),
+    },
+    underline: {
+        icon: 'bi-type-underline',
+        label: 'Souligné',
+        command: toggleUnderline,
+        active: (s) => isMarkActive(s, markTypes.underline),
+    },
+    strike: {
+        icon: 'bi-type-strikethrough',
+        label: 'Barré',
+        command: toggleStrike,
+        active: (s) => isMarkActive(s, markTypes.strike),
+    },
+    code: { icon: 'bi-code', label: 'Code', command: toggleCode, active: (s) => isMarkActive(s, markTypes.code) },
+    blockquote: {
+        icon: 'bi-blockquote-left',
+        label: 'Citation',
+        command: toggleBlockquote,
+        active: (s) => isNodeActive(s, nodeTypes.blockquote),
+    },
+    bullet_list: {
+        icon: 'bi-list-ul',
+        label: 'Liste à puces',
+        command: toggleBulletList,
+        active: (s) => isNodeActive(s, nodeTypes.bulletList),
+    },
+    ordered_list: {
+        icon: 'bi-list-ol',
+        label: 'Liste numérotée',
+        command: toggleOrderedList,
+        active: (s) => isNodeActive(s, nodeTypes.orderedList),
+    },
+    align_left: { icon: 'bi-text-left', label: 'Aligner à gauche', ...alignEntry('left') },
+    align_center: { icon: 'bi-text-center', label: 'Centrer', ...alignEntry('center') },
+    align_right: { icon: 'bi-text-right', label: 'Aligner à droite', ...alignEntry('right') },
+    align_justify: { icon: 'bi-justify', label: 'Justifier', ...alignEntry('justify') },
+    horizontal_rule: {
+        icon: 'bi-hr',
+        label: 'Ligne horizontale',
+        command: insertHorizontalRule,
+        active: () => false,
+    },
+    format_clear: { icon: 'bi-eraser', label: 'Effacer la mise en forme', command: clearFormat, active: () => false },
+    undo: { icon: 'bi-arrow-counterclockwise', label: 'Annuler', command: undo, active: () => false },
+    redo: { icon: 'bi-arrow-clockwise', label: 'Rétablir', command: redo, active: () => false },
+};
+/** The command and active check for an alignment button. */
+function alignEntry(align) {
+    return {
+        command: setAlign(align),
+        active: (state) => activeAlignment(state) === align,
+    };
+}
+/**
+ * Colour pickers, by toolbar item name.
+ *
+ * Each renders as an icon over a swatch rather than as a bare `<input
+ * type="color">`: on its own that input is an opaque coloured square, and two
+ * of them side by side say nothing about which is text and which is
+ * background.
+ */
+const COLORS = {
+    text_color: { icon: 'bi-fonts', label: 'Couleur du texte', mark: markTypes.textColor, attr: 'color' },
+    background_color: {
+        icon: 'bi-highlighter',
+        label: 'Couleur de fond',
+        mark: markTypes.backgroundColor,
+        attr: 'backgroundColor',
+    },
+};
+/** Items accepted by the configuration but not implemented here. */
+const UNSUPPORTED = new Set(['image', 'indent', 'outdent', 'superscript', 'subscript']);
+/** `rgb(255, 0, 0)` or `#f00` as the `#rrggbb` an `<input type="color">` wants. */
+function toHexColor(value) {
+    if (!value)
+        return '#000000';
+    const rgb = /^rgba?\((\d+)[,\s]+(\d+)[,\s]+(\d+)/.exec(value);
+    if (rgb) {
+        return `#${[1, 2, 3].map((i) => Number(rgb[i]).toString(16).padStart(2, '0')).join('')}`;
+    }
+    const short = /^#([0-9a-f])([0-9a-f])([0-9a-f])$/i.exec(value);
+    if (short) {
+        return `#${short[1]}${short[1]}${short[2]}${short[2]}${short[3]}${short[3]}`.toLowerCase();
+    }
+    return /^#[0-9a-f]{6}$/i.test(value) ? value.toLowerCase() : '#000000';
+}
+/**
+ * The menu bar of `<data-richedit>`.
+ *
+ * Internal to the entry point — it replaces `<ngx-editor-menu>` and reads the
+ * same `Toolbar` configuration, so presets and hand-written toolbars carry
+ * over. Rendering is Bootstrap button groups with `bootstrap-icons`; colours
+ * use a native `<input type="color">` and links a small inline form, which is
+ * what lets this drop the floating-ui dependency the old menu needed.
+ */
+class RicheditMenubarComponent {
+    /** The engine the buttons act on. */
+    editor = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "editor" }] : /* istanbul ignore next */ []));
+    /** Toolbar configuration; unknown items are skipped with a warning. */
+    toolbar = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "toolbar" }] : /* istanbul ignore next */ []));
+    /** Latest editor state, so buttons can render themselves pressed. */
+    editorState = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "editorState" }] : /* istanbul ignore next */ []));
+    /** Whether the inline link form is open. */
+    linkOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "linkOpen" }] : /* istanbul ignore next */ []));
+    destroyRef = inject(DestroyRef);
+    /** The toolbar resolved into entries the template can render. */
+    groups = computed(() => {
+        const skipped = [];
+        const groups = this.toolbar().map((group) => group.map((item) => this.resolve(item, skipped)).filter((entry) => entry !== null));
+        if (skipped.length) {
+            console.warn(`richedit: unsupported toolbar item(s) ignored: ${skipped.join(', ')}`);
+        }
+        return groups.filter((group) => group.length > 0);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "groups" }] : /* istanbul ignore next */ []));
+    /** Href of the link under the cursor, prefilled into the link form. */
+    linkHref = computed(() => {
+        const state = this.editorState();
+        return state ? (activeLink(state) ?? '') : '';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "linkHref" }] : /* istanbul ignore next */ []));
+    ngOnInit() {
+        this.editorState.set(this.editor().state);
+        const stop = this.editor().onStateChange((state) => this.editorState.set(state));
+        this.destroyRef.onDestroy(stop);
+    }
+    /** Whether a toggle button should render pressed. */
+    isActive(entry) {
+        const state = this.editorState();
+        return state ? entry.active(state) : false;
+    }
+    /** Run a button's command. */
+    run(entry) {
+        this.editor().exec(entry.command);
+    }
+    /** Heading level in force, as the string the dropdown binds to. */
+    currentHeading() {
+        const state = this.editorState();
+        return state ? activeHeading(state) : 0;
+    }
+    /** Apply the level picked in the heading dropdown. */
+    applyHeading(value) {
+        const level = Number(value);
+        this.editor().exec(level === 0 ? setParagraph : setHeading(level));
+    }
+    /**
+     * The colour actually in force, or null when the selection carries none.
+     *
+     * Distinct from {@link currentColor} on purpose: the swatch has to be able to
+     * show "no colour", while the native picker insists on a real value.
+     */
+    swatchColor(entry) {
+        const state = this.editorState();
+        return state ? activeColor(state, entry.mark, entry.attr) : null;
+    }
+    /** Current value of a colour picker, as the `#rrggbb` the input requires. */
+    currentColor(entry) {
+        return toHexColor(this.swatchColor(entry));
+    }
+    /** Apply a colour picked in one of the pickers. */
+    applyColor(entry, value) {
+        this.editor().exec(setColor(entry.mark, { [entry.attr]: value }));
+    }
+    /** Drop the colour a picker controls. */
+    clearColor(entry) {
+        this.editor().exec(removeColor(entry.mark));
+    }
+    /** Open or close the inline link form. */
+    toggleLinkForm() {
+        this.linkOpen.update((open) => !open);
+    }
+    /** Link the selection to `href`, then close the form. */
+    applyLink(href) {
+        if (href) {
+            this.editor().exec(addLink(href));
+        }
+        this.linkOpen.set(false);
+    }
+    /** Unlink, then close the form. */
+    clearLink() {
+        this.editor().exec(removeLink);
+        this.linkOpen.set(false);
+    }
+    /** Whether the cursor sits in a link, for the button's pressed state. */
+    linkActive() {
+        const state = this.editorState();
+        return state ? isMarkActive(state, markTypes.link) : false;
+    }
+    /** Turn one configuration item into a renderable entry, or skip it. */
+    resolve(item, skipped) {
+        if (typeof item !== 'string') {
+            const levels = item.heading;
+            if (!levels?.length)
+                return null;
+            return {
+                kind: 'heading',
+                key: 'heading',
+                label: 'Niveau de titre',
+                levels: levels.map((level) => Number(level.slice(1))),
+            };
+        }
+        if (item === 'link') {
+            return { kind: 'link', key: 'link', icon: 'bi-link-45deg', label: 'Lien' };
+        }
+        const color = COLORS[item];
+        if (color) {
+            return { kind: 'color', key: item, ...color };
+        }
+        const button = BUTTONS[item];
+        if (button) {
+            return { kind: 'button', key: item, ...button };
+        }
+        if (UNSUPPORTED.has(item)) {
+            skipped.push(item);
+        }
+        return null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: RicheditMenubarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: RicheditMenubarComponent, isStandalone: true, selector: "data-richedit-menubar", inputs: { editor: { classPropertyName: "editor", publicName: "editor", isSignal: true, isRequired: true, transformFunction: null }, toolbar: { classPropertyName: "toolbar", publicName: "toolbar", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"btn-toolbar data-richedit__menubar\" role=\"toolbar\" aria-label=\"Mise en forme du texte\">\n  @for (group of groups(); track $index) {\n    <div class=\"btn-group btn-group-sm me-1\">\n      @for (entry of group; track entry.key) {\n        @if (entry.kind === \"button\") {\n          <button\n            type=\"button\"\n            class=\"btn btn-sm btn-outline-secondary\"\n            [class.active]=\"isActive(entry)\"\n            [attr.aria-pressed]=\"isActive(entry)\"\n            [attr.aria-label]=\"entry.label\"\n            [title]=\"entry.label\"\n            (click)=\"run(entry)\"\n          >\n            <i class=\"bi {{ entry.icon }}\" aria-hidden=\"true\"></i>\n          </button>\n        } @else if (entry.kind === \"link\") {\n          <button\n            type=\"button\"\n            class=\"btn btn-sm btn-outline-secondary\"\n            [class.active]=\"linkActive()\"\n            [attr.aria-pressed]=\"linkOpen()\"\n            [attr.aria-expanded]=\"linkOpen()\"\n            [attr.aria-label]=\"entry.label\"\n            [title]=\"entry.label\"\n            (click)=\"toggleLinkForm()\"\n          >\n            <i class=\"bi {{ entry.icon }}\" aria-hidden=\"true\"></i>\n          </button>\n        } @else if (entry.kind === \"heading\") {\n          <select\n            #headingSelect\n            class=\"form-select form-select-sm data-richedit__headings\"\n            [attr.aria-label]=\"entry.label\"\n            [title]=\"entry.label\"\n            [value]=\"currentHeading()\"\n            (change)=\"applyHeading(headingSelect.value)\"\n          >\n            <option [value]=\"0\">Paragraphe</option>\n            @for (level of entry.levels; track level) {\n              <option [value]=\"level\">Titre {{ level }}</option>\n            }\n          </select>\n        } @else {\n          <!--\n            The native picker is the real control -- it keeps the keyboard and\n            the OS colour dialog -- but it sits invisible over the label, which\n            carries the icon, the swatch and (through :focus-within) the focus\n            ring.\n          -->\n          <label class=\"btn btn-sm btn-outline-secondary data-richedit__color\" [title]=\"entry.label\">\n            <i class=\"bi {{ entry.icon }}\" aria-hidden=\"true\"></i>\n            <span\n              class=\"data-richedit__swatch\"\n              [style.background-color]=\"swatchColor(entry) ?? 'transparent'\"\n              aria-hidden=\"true\"\n            ></span>\n            <input\n              #colorInput\n              type=\"color\"\n              [attr.aria-label]=\"entry.label\"\n              [value]=\"currentColor(entry)\"\n              (change)=\"applyColor(entry, colorInput.value)\"\n            />\n          </label>\n          <button\n            type=\"button\"\n            class=\"btn btn-sm btn-outline-secondary\"\n            [attr.aria-label]=\"entry.label + ' : effacer'\"\n            [title]=\"entry.label + ' : effacer'\"\n            (click)=\"clearColor(entry)\"\n          >\n            <i class=\"bi bi-x-lg\" aria-hidden=\"true\"></i>\n          </button>\n        }\n      }\n    </div>\n  }\n</div>\n@if (linkOpen()) {\n  <div class=\"input-group input-group-sm mt-1 data-richedit__linkform\">\n    <input\n      #linkInput\n      type=\"url\"\n      class=\"form-control\"\n      placeholder=\"https://\u2026\"\n      aria-label=\"Adresse du lien\"\n      [value]=\"linkHref()\"\n      (keydown.enter)=\"applyLink(linkInput.value)\"\n    />\n    <button type=\"button\" class=\"btn btn-primary\" (click)=\"applyLink(linkInput.value)\">Appliquer</button>\n    <button type=\"button\" class=\"btn btn-outline-secondary\" (click)=\"clearLink()\">Supprimer</button>\n    <button type=\"button\" class=\"btn btn-outline-secondary\" (click)=\"toggleLinkForm()\">Annuler</button>\n  </div>\n}\n", styles: [":host{display:block}.data-richedit__menubar{flex-wrap:wrap;gap:.25rem 0;padding:.25rem;border-bottom:1px solid var(--bs-border-color, #dee2e6)}.data-richedit__headings{width:auto}.data-richedit__color{position:relative;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;margin-bottom:0;cursor:pointer}.data-richedit__color input[type=color]{position:absolute;inset:0;width:100%;height:100%;padding:0;border:none;opacity:0;cursor:pointer}.data-richedit__color:focus-within{border-color:var(--bs-primary-border-subtle, #86b7fe);box-shadow:0 0 0 .25rem rgba(var(--bs-primary-rgb, 13, 110, 253),.25)}.data-richedit__swatch{display:block;width:1em;height:3px;border-radius:1px;box-shadow:inset 0 0 0 1px var(--bs-border-color, #dee2e6)}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: RicheditMenubarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'data-richedit-menubar', template: "<div class=\"btn-toolbar data-richedit__menubar\" role=\"toolbar\" aria-label=\"Mise en forme du texte\">\n  @for (group of groups(); track $index) {\n    <div class=\"btn-group btn-group-sm me-1\">\n      @for (entry of group; track entry.key) {\n        @if (entry.kind === \"button\") {\n          <button\n            type=\"button\"\n            class=\"btn btn-sm btn-outline-secondary\"\n            [class.active]=\"isActive(entry)\"\n            [attr.aria-pressed]=\"isActive(entry)\"\n            [attr.aria-label]=\"entry.label\"\n            [title]=\"entry.label\"\n            (click)=\"run(entry)\"\n          >\n            <i class=\"bi {{ entry.icon }}\" aria-hidden=\"true\"></i>\n          </button>\n        } @else if (entry.kind === \"link\") {\n          <button\n            type=\"button\"\n            class=\"btn btn-sm btn-outline-secondary\"\n            [class.active]=\"linkActive()\"\n            [attr.aria-pressed]=\"linkOpen()\"\n            [attr.aria-expanded]=\"linkOpen()\"\n            [attr.aria-label]=\"entry.label\"\n            [title]=\"entry.label\"\n            (click)=\"toggleLinkForm()\"\n          >\n            <i class=\"bi {{ entry.icon }}\" aria-hidden=\"true\"></i>\n          </button>\n        } @else if (entry.kind === \"heading\") {\n          <select\n            #headingSelect\n            class=\"form-select form-select-sm data-richedit__headings\"\n            [attr.aria-label]=\"entry.label\"\n            [title]=\"entry.label\"\n            [value]=\"currentHeading()\"\n            (change)=\"applyHeading(headingSelect.value)\"\n          >\n            <option [value]=\"0\">Paragraphe</option>\n            @for (level of entry.levels; track level) {\n              <option [value]=\"level\">Titre {{ level }}</option>\n            }\n          </select>\n        } @else {\n          <!--\n            The native picker is the real control -- it keeps the keyboard and\n            the OS colour dialog -- but it sits invisible over the label, which\n            carries the icon, the swatch and (through :focus-within) the focus\n            ring.\n          -->\n          <label class=\"btn btn-sm btn-outline-secondary data-richedit__color\" [title]=\"entry.label\">\n            <i class=\"bi {{ entry.icon }}\" aria-hidden=\"true\"></i>\n            <span\n              class=\"data-richedit__swatch\"\n              [style.background-color]=\"swatchColor(entry) ?? 'transparent'\"\n              aria-hidden=\"true\"\n            ></span>\n            <input\n              #colorInput\n              type=\"color\"\n              [attr.aria-label]=\"entry.label\"\n              [value]=\"currentColor(entry)\"\n              (change)=\"applyColor(entry, colorInput.value)\"\n            />\n          </label>\n          <button\n            type=\"button\"\n            class=\"btn btn-sm btn-outline-secondary\"\n            [attr.aria-label]=\"entry.label + ' : effacer'\"\n            [title]=\"entry.label + ' : effacer'\"\n            (click)=\"clearColor(entry)\"\n          >\n            <i class=\"bi bi-x-lg\" aria-hidden=\"true\"></i>\n          </button>\n        }\n      }\n    </div>\n  }\n</div>\n@if (linkOpen()) {\n  <div class=\"input-group input-group-sm mt-1 data-richedit__linkform\">\n    <input\n      #linkInput\n      type=\"url\"\n      class=\"form-control\"\n      placeholder=\"https://\u2026\"\n      aria-label=\"Adresse du lien\"\n      [value]=\"linkHref()\"\n      (keydown.enter)=\"applyLink(linkInput.value)\"\n    />\n    <button type=\"button\" class=\"btn btn-primary\" (click)=\"applyLink(linkInput.value)\">Appliquer</button>\n    <button type=\"button\" class=\"btn btn-outline-secondary\" (click)=\"clearLink()\">Supprimer</button>\n    <button type=\"button\" class=\"btn btn-outline-secondary\" (click)=\"toggleLinkForm()\">Annuler</button>\n  </div>\n}\n", styles: [":host{display:block}.data-richedit__menubar{flex-wrap:wrap;gap:.25rem 0;padding:.25rem;border-bottom:1px solid var(--bs-border-color, #dee2e6)}.data-richedit__headings{width:auto}.data-richedit__color{position:relative;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;margin-bottom:0;cursor:pointer}.data-richedit__color input[type=color]{position:absolute;inset:0;width:100%;height:100%;padding:0;border:none;opacity:0;cursor:pointer}.data-richedit__color:focus-within{border-color:var(--bs-primary-border-subtle, #86b7fe);box-shadow:0 0 0 .25rem rgba(var(--bs-primary-rgb, 13, 110, 253),.25)}.data-richedit__swatch{display:block;width:1em;height:3px;border-radius:1px;box-shadow:inset 0 0 0 1px var(--bs-border-color, #dee2e6)}\n"] }]
+        }], propDecorators: { editor: [{ type: i0.Input, args: [{ isSignal: true, alias: "editor", required: true }] }], toolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "toolbar", required: false }] }] } });
+
 /**
  * Named toolbar presets for {@link RicheditComponent}, selectable through its
  * `toolbar` input.
@@ -22,31 +1091,35 @@ import { firstValueFrom } from 'rxjs';
  */
 const RichEditToolbars = {
     default: [
-        ["bold", "italic"],
-        ["underline", "strike"],
-        ["code", "blockquote"],
-        ["ordered_list", "bullet_list"],
-        [{ heading: ["h1", "h2", "h3", "h4", "h5", "h6"] }],
-        ["link"],
-        ["text_color", "background_color"],
-        ["align_left", "align_center", "align_right", "align_justify"],
+        ['bold', 'italic'],
+        ['underline', 'strike'],
+        ['code', 'blockquote'],
+        ['ordered_list', 'bullet_list'],
+        [{ heading: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] }],
+        ['link'],
+        ['text_color', 'background_color'],
+        ['align_left', 'align_center', 'align_right', 'align_justify'],
     ],
     light: [
-        ["bold", "italic", "underline"],
-        ["ordered_list", "bullet_list"],
-        ["text_color"],
-        ["align_left", "align_center", "align_right", "align_justify"],
+        ['bold', 'italic', 'underline'],
+        ['ordered_list', 'bullet_list'],
+        ['text_color'],
+        ['align_left', 'align_center', 'align_right', 'align_justify'],
     ],
     none: [],
 };
 /**
- * Rich text editor for a model field, built on `ngx-editor`.
+ * Rich text editor for a model field, built on a vendored ProseMirror engine.
  *
  * Shipped as a separate entry point (`@solidev/data/richedit`) so that the
- * `ngx-editor` dependency stays optional for consumers who do not need it. It
- * follows the same `dd` / `inline` / `form` layout convention as
+ * `prosemirror-*` dependencies stay optional for consumers who do not need
+ * them. It follows the same `dd` / `inline` / `form` layout convention as
  * `<data-dispedit>`, and can also stand in as the `quill` editor slot.
  *
+ * The engine used to be `ngx-editor`, which stopped at Angular 19. The
+ * replacement lives in `./prose` and speaks the same schema, so stored values
+ * are unaffected — and so is this component's API.
+ *
  * Unlike `<data-dispedit>`, saving is explicit: the value is written back and
  * persisted only when {@link save} runs, from the built-in save button — and
  * only in `dd` mode. In the other modes {@link save} updates the model in memory
@@ -60,6 +1133,8 @@ const RichEditToolbars = {
  */
 class RicheditComponent {
     /** Model instance holding the field. */
+    /** Id tying the label to the editor. */
+    inputId = uniqueId('data-richedit');
     model;
     /** Name of the rich text field to edit. */
     field;
@@ -74,7 +1149,7 @@ class RicheditComponent {
      * API; `inline` and `form` render a label plus the editor and leave saving to
      * the caller.
      */
-    mode = "dd";
+    mode = 'dd';
     /** Hide label (for inline forms) */
     hideLabel = false;
     /**
@@ -92,17 +1167,17 @@ class RicheditComponent {
      */
     fc;
     /** Toolbar preset name from {@link RichEditToolbars}, or an explicit toolbar. */
-    toolbar = "default";
+    toolbar = 'default';
     /** Emits the editor's HTML on every change. Only wired for an internal `fc`. */
     changed = new EventEmitter();
     /** Field manager for {@link field}; only resolved when `fc` is created here. */
     manager;
     /** Whether the manager declares the field required. */
     required;
-    /** Underlying ngx-editor instance; destroyed with the component. */
+    /** Underlying editor instance; destroyed with the component. */
     editor;
     /** Unused; kept for backwards compatibility. */
-    html = "";
+    html = '';
     /** Toolbar actually rendered, resolved from {@link toolbar}. */
     realToolbar;
     /**
@@ -112,20 +1187,21 @@ class RicheditComponent {
      */
     ngOnInit() {
         this.editor = new Editor();
-        if (this.toolbar === "light" || this.toolbar === "default") {
+        if (this.toolbar === 'light' || this.toolbar === 'default') {
             this.realToolbar = RichEditToolbars[this.toolbar];
         }
-        else if (this.toolbar === "none") {
+        else if (this.toolbar === 'none') {
+            // No toolbar at all: leave `realToolbar` undefined.
         }
         else {
             this.realToolbar = this.toolbar;
         }
         if (!this.fc) {
-            this.fc = new FormControl("");
+            this.fc = new FormControl('');
             if (this.model && this.field) {
                 this.manager = this.model.FM(this.field);
                 this.required = this.manager?.required || false;
-                this.fc.setValue(this.model[this.field] || "", {
+                this.fc.setValue(asText(fieldValues(this.model)[this.field]), {
                     emitEvent: false,
                 });
             }
@@ -138,8 +1214,7 @@ class RicheditComponent {
             this.fc.valueChanges.subscribe((v) => this.changed.emit(v));
         }
     }
-    /** Destroy the ngx-editor instance to release its resources. */
-    // make sure to destory the editor
+    /** Destroy the editor instance to release its resources. */
     ngOnDestroy() {
         this.editor.destroy();
     }
@@ -174,17 +1249,17 @@ class RicheditComponent {
     async save() {
         if (this.model && this.field) {
             this.model.setFV(this.field, this.fc.value);
-            if (this.mode === "dd") {
+            if (this.mode === 'dd') {
                 await firstValueFrom(this.model.update([this.field], { updateModel: true }));
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: RicheditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: RicheditComponent, isStandalone: true, selector: "data-richedit", inputs: { model: "model", field: "field", editable: "editable", edit: "edit", mode: "mode", hideLabel: "hideLabel", hideButton: "hideButton", fc: "fc", toolbar: "toolbar" }, outputs: { changed: "changed" }, ngImport: i0, template: "\n<ng-template #editorTemplate>\n  <div class=\"NgxEditor__Wrapper\">\n    @if (edit && toolbar!=='none') {\n      <ngx-editor-menu [editor]=\"editor\" [toolbar]=\"realToolbar\"></ngx-editor-menu>\n    }\n    <ngx-editor [editor]=\"editor\" [formControl]=\"fc\" [placeholder]=\"''\"></ngx-editor>\n  </div>\n  @if (edit && !hideButton) {\n    <button class=\"btn btn-primary btn-sm w-100 mt-1\" (click)=\"save()\"><i class=\"bi bi-save me-2\"></i>Enregistrer</button>\n  }\n</ng-template>\n<ng-template #titleTpl>\n  <ng-content></ng-content>\n</ng-template>\n<!-- Dd display-->\n@if (mode==='dd') {\n  @if (!hideLabel) {\n    <dt [class.required]=\"required\"><span class=\"editable\" (click)=\"toggleEdit()\" role=\"button\">\n      <ng-container *ngTemplateOutlet=\"titleTpl\"></ng-container></span></dt>\n    }\n    <dd [class.mb-0]=\"hideLabel\">\n      <ng-container *ngTemplateOutlet=\"editorTemplate\"></ng-container>\n    </dd>\n  }\n  <!-- Inline display-->\n  @if (mode==='inline') {\n    @if (!hideLabel) {\n      <label [class.required]=\"required\">\n        <ng-container *ngTemplateOutlet=\"titleTpl\"></ng-container>\n      </label>\n    }\n    <ng-container *ngTemplateOutlet=\"editorTemplate\"></ng-container>\n  }\n  <!-- Form display-->\n  @if (mode==='form') {\n    @if (!hideLabel) {\n      <label [class.required]=\"required\">\n        <ng-container *ngTemplateOutlet=\"titleTpl\"></ng-container>\n      </label>\n    }\n    <ng-container *ngTemplateOutlet=\"editorTemplate\"></ng-container>\n  }", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: NgxEditorModule }, { kind: "component", type: i2.NgxEditorComponent, selector: "ngx-editor", inputs: ["editor", "outputFormat", "placeholder"], outputs: ["focusOut", "focusIn"] }, { kind: "component", type: i2.NgxEditorMenuComponent, selector: "ngx-editor-menu", inputs: ["toolbar", "colorPresets", "disabled", "editor", "customMenuRef", "dropdownPlacement"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: RicheditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: RicheditComponent, isStandalone: true, selector: "data-richedit", inputs: { model: "model", field: "field", editable: "editable", edit: "edit", mode: "mode", hideLabel: "hideLabel", hideButton: "hideButton", fc: "fc", toolbar: "toolbar" }, outputs: { changed: "changed" }, ngImport: i0, template: "<ng-template #editorTemplate>\n  <div class=\"data-richedit__wrapper\">\n    @if (edit && toolbar !== \"none\") {\n      <data-richedit-menubar [editor]=\"editor\" [toolbar]=\"realToolbar\"></data-richedit-menubar>\n    }\n    <data-richedit-editor [editor]=\"editor\" [inputId]=\"inputId\" [formControl]=\"fc\"></data-richedit-editor>\n  </div>\n  @if (edit && !hideButton) {\n    <button class=\"btn btn-primary btn-sm w-100 mt-1\" (click)=\"save()\">\n      <i class=\"bi bi-save me-2\"></i>\n      Enregistrer\n    </button>\n  }\n</ng-template>\n<ng-template #titleTpl>\n  <ng-content></ng-content>\n</ng-template>\n<!-- Dd display-->\n@if (mode === \"dd\") {\n  @if (!hideLabel) {\n    <dt [class.required]=\"required\">\n      <span\n        class=\"editable\"\n        (click)=\"toggleEdit()\"\n        role=\"button\"\n        tabindex=\"0\"\n        (keydown.enter)=\"toggleEdit()\"\n        (keydown.space)=\"$event.preventDefault(); toggleEdit()\"\n      >\n        <ng-container *ngTemplateOutlet=\"titleTpl\"></ng-container>\n      </span>\n    </dt>\n  }\n  <dd [class.mb-0]=\"hideLabel\">\n    <ng-container *ngTemplateOutlet=\"editorTemplate\"></ng-container>\n  </dd>\n}\n<!-- Inline display-->\n@if (mode === \"inline\") {\n  @if (!hideLabel) {\n    <label [class.required]=\"required\" [attr.for]=\"inputId\">\n      <ng-container *ngTemplateOutlet=\"titleTpl\"></ng-container>\n    </label>\n  }\n  <ng-container *ngTemplateOutlet=\"editorTemplate\"></ng-container>\n}\n<!-- Form display-->\n@if (mode === \"form\") {\n  @if (!hideLabel) {\n    <label [class.required]=\"required\" [attr.for]=\"inputId\">\n      <ng-container *ngTemplateOutlet=\"titleTpl\"></ng-container>\n    </label>\n  }\n  <ng-container *ngTemplateOutlet=\"editorTemplate\"></ng-container>\n}\n", styles: [".data-richedit__wrapper{border:var(--bs-border-width, 1px) solid var(--bs-border-color, #dee2e6);border-radius:var(--bs-border-radius, .375rem);background:var(--bs-body-bg, #fff);overflow:hidden}.data-richedit__wrapper:focus-within{border-color:var(--bs-primary-border-subtle, #86b7fe);box-shadow:0 0 0 .25rem rgba(var(--bs-primary-rgb, 13, 110, 253),.25)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: RicheditEditorComponent, selector: "data-richedit-editor", inputs: ["editor", "inputId"] }, { kind: "component", type: RicheditMenubarComponent, selector: "data-richedit-menubar", inputs: ["editor", "toolbar"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: RicheditComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: RicheditComponent, decorators: [{
             type: Component,
-            args: [{ selector: "data-richedit", imports: [CommonModule, NgxEditorModule, ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.Eager, template: "\n<ng-template #editorTemplate>\n  <div class=\"NgxEditor__Wrapper\">\n    @if (edit && toolbar!=='none') {\n      <ngx-editor-menu [editor]=\"editor\" [toolbar]=\"realToolbar\"></ngx-editor-menu>\n    }\n    <ngx-editor [editor]=\"editor\" [formControl]=\"fc\" [placeholder]=\"''\"></ngx-editor>\n  </div>\n  @if (edit && !hideButton) {\n    <button class=\"btn btn-primary btn-sm w-100 mt-1\" (click)=\"save()\"><i class=\"bi bi-save me-2\"></i>Enregistrer</button>\n  }\n</ng-template>\n<ng-template #titleTpl>\n  <ng-content></ng-content>\n</ng-template>\n<!-- Dd display-->\n@if (mode==='dd') {\n  @if (!hideLabel) {\n    <dt [class.required]=\"required\"><span class=\"editable\" (click)=\"toggleEdit()\" role=\"button\">\n      <ng-container *ngTemplateOutlet=\"titleTpl\"></ng-container></span></dt>\n    }\n    <dd [class.mb-0]=\"hideLabel\">\n      <ng-container *ngTemplateOutlet=\"editorTemplate\"></ng-container>\n    </dd>\n  }\n  <!-- Inline display-->\n  @if (mode==='inline') {\n    @if (!hideLabel) {\n      <label [class.required]=\"required\">\n        <ng-container *ngTemplateOutlet=\"titleTpl\"></ng-container>\n      </label>\n    }\n    <ng-container *ngTemplateOutlet=\"editorTemplate\"></ng-container>\n  }\n  <!-- Form display-->\n  @if (mode==='form') {\n    @if (!hideLabel) {\n      <label [class.required]=\"required\">\n        <ng-container *ngTemplateOutlet=\"titleTpl\"></ng-container>\n      </label>\n    }\n    <ng-container *ngTemplateOutlet=\"editorTemplate\"></ng-container>\n  }" }]
+            args: [{ selector: 'data-richedit', imports: [CommonModule, ReactiveFormsModule, RicheditEditorComponent, RicheditMenubarComponent], changeDetection: ChangeDetectionStrategy.Eager, template: "<ng-template #editorTemplate>\n  <div class=\"data-richedit__wrapper\">\n    @if (edit && toolbar !== \"none\") {\n      <data-richedit-menubar [editor]=\"editor\" [toolbar]=\"realToolbar\"></data-richedit-menubar>\n    }\n    <data-richedit-editor [editor]=\"editor\" [inputId]=\"inputId\" [formControl]=\"fc\"></data-richedit-editor>\n  </div>\n  @if (edit && !hideButton) {\n    <button class=\"btn btn-primary btn-sm w-100 mt-1\" (click)=\"save()\">\n      <i class=\"bi bi-save me-2\"></i>\n      Enregistrer\n    </button>\n  }\n</ng-template>\n<ng-template #titleTpl>\n  <ng-content></ng-content>\n</ng-template>\n<!-- Dd display-->\n@if (mode === \"dd\") {\n  @if (!hideLabel) {\n    <dt [class.required]=\"required\">\n      <span\n        class=\"editable\"\n        (click)=\"toggleEdit()\"\n        role=\"button\"\n        tabindex=\"0\"\n        (keydown.enter)=\"toggleEdit()\"\n        (keydown.space)=\"$event.preventDefault(); toggleEdit()\"\n      >\n        <ng-container *ngTemplateOutlet=\"titleTpl\"></ng-container>\n      </span>\n    </dt>\n  }\n  <dd [class.mb-0]=\"hideLabel\">\n    <ng-container *ngTemplateOutlet=\"editorTemplate\"></ng-container>\n  </dd>\n}\n<!-- Inline display-->\n@if (mode === \"inline\") {\n  @if (!hideLabel) {\n    <label [class.required]=\"required\" [attr.for]=\"inputId\">\n      <ng-container *ngTemplateOutlet=\"titleTpl\"></ng-container>\n    </label>\n  }\n  <ng-container *ngTemplateOutlet=\"editorTemplate\"></ng-container>\n}\n<!-- Form display-->\n@if (mode === \"form\") {\n  @if (!hideLabel) {\n    <label [class.required]=\"required\" [attr.for]=\"inputId\">\n      <ng-container *ngTemplateOutlet=\"titleTpl\"></ng-container>\n    </label>\n  }\n  <ng-container *ngTemplateOutlet=\"editorTemplate\"></ng-container>\n}\n", styles: [".data-richedit__wrapper{border:var(--bs-border-width, 1px) solid var(--bs-border-color, #dee2e6);border-radius:var(--bs-border-radius, .375rem);background:var(--bs-body-bg, #fff);overflow:hidden}.data-richedit__wrapper:focus-within{border-color:var(--bs-primary-border-subtle, #86b7fe);box-shadow:0 0 0 .25rem rgba(var(--bs-primary-rgb, 13, 110, 253),.25)}\n"] }]
         }], propDecorators: { model: [{
                 type: Input
             }], field: [{
@@ -207,9 +1282,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                 type: Output
             }] } });
 
+/**
+ * Toolbar configuration for `<data-richedit>`.
+ *
+ * The shape is the one `ngx-editor` used — an array of groups, each group an
+ * array of items, an item either a name or a `{heading: [...]}` dropdown — so
+ * toolbars written against the old editor keep compiling and keep working.
+ */
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { RichEditToolbars, RicheditComponent };
+export { Editor, RichEditToolbars, RicheditComponent, activeAlignment, activeColor, activeHeading, activeLink, addLink, clearFormat, fromHTML, insertHorizontalRule, isEmpty, isMarkActive, isNodeActive, linkRange, markTypes, nodeTypes, removeColor, removeLink, schema, setAlign, setColor, setHeading, setParagraph, toHTML, toggleBlockquote, toggleBold, toggleBulletList, toggleCode, toggleCodeBlock, toggleHeading, toggleItalic, toggleList, toggleMarkCommand, toggleOrderedList, toggleStrike, toggleUnderline };
 //# sourceMappingURL=solidev-data-richedit.mjs.map