@solidev/data 1.0.1 → 1.1.0

package/fesm2022/solidev-data-mdedit.mjs

@@ -0,0 +1,668 @@
+import * as i0 from '@angular/core';
+import { input, model, output, signal, computed, viewChild, inject, DestroyRef, afterNextRender, Component } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { FormControl } from '@angular/forms';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { uniqueId, asText, fieldValues } from '@solidev/data';
+import { EditorState, EditorSelection, Compartment } from '@codemirror/state';
+import { EditorView, keymap, placeholder } from '@codemirror/view';
+import { firstValueFrom } from 'rxjs';
+import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
+import { history, historyKeymap, defaultKeymap } from '@codemirror/commands';
+import { HighlightStyle, syntaxHighlighting, syntaxTree } from '@codemirror/language';
+import { tags } from '@lezer/highlight';
+
+/**
+ * Syntax highlighting for the markdown *source*.
+ *
+ * The point of `mdedit` is that the markup stays on screen: `**bold**` keeps
+ * its asterisks, a heading keeps its `#`. What this style does is make the
+ * source read like the document it describes — headings get bigger, `**bold**`
+ * renders bold, code turns monospace — while the markers themselves
+ * ({@link tags.processingInstruction}, {@link tags.meta}) are dimmed so they
+ * stay visible but recede.
+ *
+ * Colours come from Bootstrap CSS variables so the editor follows the host
+ * theme, including its dark mode, without shipping a palette of its own.
+ */
+const markdownHighlightStyle = HighlightStyle.define([
+    { tag: tags.heading1, fontSize: '1.6em', fontWeight: 'bold', lineHeight: '1.4' },
+    { tag: tags.heading2, fontSize: '1.4em', fontWeight: 'bold', lineHeight: '1.4' },
+    { tag: tags.heading3, fontSize: '1.25em', fontWeight: 'bold' },
+    { tag: tags.heading4, fontSize: '1.15em', fontWeight: 'bold' },
+    { tag: tags.heading5, fontSize: '1.05em', fontWeight: 'bold' },
+    { tag: tags.heading6, fontSize: '1em', fontWeight: 'bold' },
+    { tag: tags.strong, fontWeight: 'bold' },
+    { tag: tags.emphasis, fontStyle: 'italic' },
+    { tag: tags.strikethrough, textDecoration: 'line-through' },
+    { tag: tags.link, textDecoration: 'underline' },
+    { tag: tags.url, color: 'var(--bs-link-color, #0d6efd)', textDecoration: 'underline' },
+    {
+        tag: tags.monospace,
+        fontFamily: 'var(--bs-font-monospace, monospace)',
+        backgroundColor: 'var(--bs-tertiary-bg, rgba(0, 0, 0, 0.05))',
+    },
+    { tag: tags.quote, color: 'var(--bs-secondary-color, #6c757d)', fontStyle: 'italic' },
+    { tag: tags.contentSeparator, fontWeight: 'bold', color: 'var(--bs-secondary-color, #6c757d)' },
+    { tag: tags.list, color: 'var(--bs-emphasis-color, #000)' },
+    // The markup itself: `#`, `*`, `>`, backticks, list bullets. Dimmed rather
+    // than hidden -- this is a source editor, not a WYSIWYG.
+    { tag: tags.processingInstruction, color: 'var(--bs-secondary-color, #6c757d)' },
+    { tag: tags.meta, color: 'var(--bs-secondary-color, #6c757d)' },
+]);
+/**
+ * Editor chrome: a box that matches Bootstrap's `.form-control`, including its
+ * focus ring, so an `mdedit` sits in a form without looking foreign.
+ */
+const markdownTheme = EditorView.theme({
+    '&': {
+        fontSize: 'inherit',
+        color: 'var(--bs-body-color, #212529)',
+        backgroundColor: 'var(--bs-body-bg, #fff)',
+        border: 'var(--bs-border-width, 1px) solid var(--bs-border-color, #dee2e6)',
+        borderRadius: 'var(--bs-border-radius, 0.375rem)',
+    },
+    '&.cm-focused': {
+        outline: 'none',
+        borderColor: 'var(--bs-primary-border-subtle, #86b7fe)',
+        boxShadow: '0 0 0 0.25rem rgba(var(--bs-primary-rgb, 13, 110, 253), 0.25)',
+    },
+    '.cm-content': {
+        fontFamily: 'var(--bs-body-font-family, system-ui, sans-serif)',
+        padding: '0.5rem 0.75rem',
+        minHeight: '8rem',
+        caretColor: 'var(--bs-body-color, #212529)',
+    },
+    '.cm-line': {
+        padding: '0',
+    },
+    '.cm-placeholder': {
+        color: 'var(--bs-secondary-color, #6c757d)',
+    },
+    '&.cm-editor.cm-readonly .cm-content, &.cm-editor:not(.cm-focused) .cm-content': {
+        caretColor: 'transparent',
+    },
+});
+/**
+ * The whole visual layer — chrome plus source highlighting — as one extension,
+ * which is what {@link markdownSetup} installs.
+ */
+function markdownStyling() {
+    return [markdownTheme, syntaxHighlighting(markdownHighlightStyle)];
+}
+
+/**
+ * The extensions that make an `EditorView` behave as a markdown source editor.
+ *
+ * Deliberately not CodeMirror's `basicSetup`: this edits prose, so there are no
+ * line numbers, no fold gutter and no bracket matching — just markdown parsing,
+ * history, wrapping, and the styling from {@link markdownStyling}.
+ *
+ * The markdown dialect is `markdownLanguage`, i.e. GFM: tables, strikethrough
+ * and task lists parse. Fenced code blocks are recognised but their content is
+ * not highlighted per-language; that would need `@codemirror/language-data` and
+ * its lazily loaded grammars, which is out of scope here.
+ */
+function markdownSetup(options = {}) {
+    const extensions = [
+        history(),
+        // Our bindings come first so undo/redo and the markdown list-continuation
+        // keys win over the language's own defaults.
+        keymap.of([...historyKeymap, ...defaultKeymap]),
+        markdown({ base: markdownLanguage, addKeymap: true }),
+        EditorView.lineWrapping,
+        markdownStyling(),
+    ];
+    if (options.placeholder) {
+        extensions.push(placeholder(options.placeholder));
+    }
+    if (options.labelledBy) {
+        extensions.push(EditorView.contentAttributes.of({ 'aria-labelledby': options.labelledBy }));
+    }
+    const { onChange, onStateChange } = options;
+    if (onChange || onStateChange) {
+        extensions.push(EditorView.updateListener.of((update) => {
+            if (onChange && update.docChanged) {
+                onChange(update.state.doc.toString());
+            }
+            if (onStateChange && (update.docChanged || update.selectionSet || update.focusChanged)) {
+                onStateChange(update.state);
+            }
+        }));
+    }
+    if (options.readOnly) {
+        extensions.push(options.readOnly.of(readOnlyExtension(options.readOnlyInitially ?? false)));
+    }
+    else if (options.readOnlyInitially) {
+        extensions.push(readOnlyExtension(true));
+    }
+    return extensions;
+}
+/**
+ * Read-only state for a given editability, meant to be reconfigured into the
+ * compartment passed to {@link markdownSetup}.
+ *
+ * Both facets are needed: `EditorState.readOnly` stops commands from changing
+ * the document, `EditorView.editable` takes `contenteditable` off the DOM node
+ * so the caret and the browser's own editing affordances go away too.
+ */
+function readOnlyExtension(readOnly) {
+    return [EditorState.readOnly.of(readOnly), EditorView.editable.of(!readOnly)];
+}
+
+/**
+ * Markdown editing commands, written as CodeMirror `StateCommand`s.
+ *
+ * A `StateCommand` only needs `{state, dispatch}`, which an `EditorView`
+ * satisfies — so these drive the toolbar buttons in the browser, and can be
+ * exercised in a spec against a bare `EditorState`, with no DOM at all. They
+ * rewrite the markdown source, since that is what the user sees and edits.
+ */
+/**
+ * Lines touched by the selection, in document order and without duplicates.
+ *
+ * Selection ranges are sorted and non-overlapping, so tracking the last line
+ * number emitted is enough to keep a line from being rewritten twice when two
+ * cursors sit on it.
+ */
+function selectedLines(state) {
+    const lines = [];
+    let last = -1;
+    for (const range of state.selection.ranges) {
+        for (let pos = range.from; pos <= range.to;) {
+            const line = state.doc.lineAt(pos);
+            if (line.number > last) {
+                lines.push(line);
+                last = line.number;
+            }
+            pos = line.to + 1;
+        }
+    }
+    return lines;
+}
+/**
+ * Toggle a symmetric inline delimiter — `**` for bold, `*` for italic, `~~` for
+ * strikethrough, `` ` `` for code.
+ *
+ * Wraps the selection, or unwraps it when the delimiters are already there,
+ * whether they sit just outside the selection (the usual case after a previous
+ * toggle) or inside it (the user selected them along with the text). On an
+ * empty selection it inserts the pair and leaves the cursor between the two
+ * halves, so typing continues inside the mark.
+ */
+function toggleInlineMark(delim) {
+    const len = delim.length;
+    return ({ state, dispatch }) => {
+        const transaction = state.changeByRange((range) => {
+            if (!range.empty &&
+                state.sliceDoc(range.from - len, range.from) === delim &&
+                state.sliceDoc(range.to, range.to + len) === delim) {
+                return {
+                    changes: [
+                        { from: range.from - len, to: range.from },
+                        { from: range.to, to: range.to + len },
+                    ],
+                    range: EditorSelection.range(range.from - len, range.to - len),
+                };
+            }
+            const text = state.sliceDoc(range.from, range.to);
+            if (text.length >= 2 * len && text.startsWith(delim) && text.endsWith(delim)) {
+                return {
+                    changes: [
+                        { from: range.from, to: range.from + len },
+                        { from: range.to - len, to: range.to },
+                    ],
+                    range: EditorSelection.range(range.from, range.to - 2 * len),
+                };
+            }
+            return {
+                changes: [
+                    { from: range.from, insert: delim },
+                    { from: range.to, insert: delim },
+                ],
+                range: range.empty
+                    ? EditorSelection.cursor(range.from + len)
+                    : EditorSelection.range(range.from + len, range.to + len),
+            };
+        });
+        dispatch(state.update(transaction, { scrollIntoView: true, userEvent: 'input' }));
+        return true;
+    };
+}
+/** Toggle `**bold**` around the selection. */
+const toggleBold = toggleInlineMark('**');
+/** Toggle `*italic*` around the selection. */
+const toggleItalic = toggleInlineMark('*');
+/** Toggle `~~strikethrough~~` around the selection (GFM). */
+const toggleStrikethrough = toggleInlineMark('~~');
+/** Toggle `` `code` `` around the selection. */
+const toggleInlineCode = toggleInlineMark('`');
+/** Leading ATX heading markup, e.g. `### `. */
+const HEADING = /^#{1,6} */;
+/**
+ * Set the heading level of every selected line, `0` meaning plain paragraph.
+ *
+ * This sets rather than toggles: picking "Heading 2" twice leaves an `h2`, and
+ * the way back to a paragraph is `setHeading(0)` — which is what the toolbar's
+ * "Paragraphe" entry does. Returns false when nothing would change, as a
+ * CodeMirror command should.
+ */
+function setHeading(level) {
+    const prefix = level > 0 ? `${'#'.repeat(level)} ` : '';
+    return ({ state, dispatch }) => {
+        const changes = [];
+        for (const line of selectedLines(state)) {
+            const current = HEADING.exec(line.text)?.[0] ?? '';
+            if (current === prefix)
+                continue;
+            changes.push({ from: line.from, to: line.from + current.length, insert: prefix });
+        }
+        if (!changes.length)
+            return false;
+        dispatch(state.update({ changes, userEvent: 'input' }));
+        return true;
+    };
+}
+/**
+ * Add a line prefix to every selected line, or strip it when all of them
+ * already have it.
+ *
+ * `prefixFor` receives the index of the line within the selection, which is
+ * what lets ordered lists number themselves.
+ */
+function toggleLinePrefix(match, prefixFor) {
+    return ({ state, dispatch }) => {
+        const lines = selectedLines(state);
+        if (!lines.length)
+            return false;
+        const strip = lines.every((line) => match.test(line.text));
+        const changes = [];
+        lines.forEach((line, index) => {
+            const found = match.exec(line.text);
+            if (strip) {
+                if (found)
+                    changes.push({ from: line.from, to: line.from + found[0].length });
+            }
+            else if (!found) {
+                changes.push({ from: line.from, insert: prefixFor(index) });
+            }
+        });
+        if (!changes.length)
+            return false;
+        dispatch(state.update({ changes, userEvent: 'input' }));
+        return true;
+    };
+}
+/** Toggle `> ` blockquote markers on the selected lines. */
+const toggleQuote = toggleLinePrefix(/^> ?/, () => '> ');
+/** Toggle `- ` bullets on the selected lines; `*` and `+` bullets count as set. */
+const toggleBulletList = toggleLinePrefix(/^[-*+] /, () => '- ');
+/** Toggle `1. ` numbering on the selected lines, renumbering from one. */
+const toggleOrderedList = toggleLinePrefix(/^\d+\. /, (index) => `${index + 1}. `);
+/**
+ * Turn the selection into a link.
+ *
+ * With text selected it becomes `[text](url)` and the `url` placeholder is left
+ * selected, ready to be typed over. With no selection the whole
+ * `[text](url)` skeleton is inserted and `text` is selected instead.
+ */
+const insertLink = ({ state, dispatch }) => {
+    const transaction = state.changeByRange((range) => {
+        if (range.empty) {
+            return {
+                changes: { from: range.from, insert: '[text](url)' },
+                range: EditorSelection.range(range.from + 1, range.from + 5),
+            };
+        }
+        const text = state.sliceDoc(range.from, range.to);
+        // '[' + text + '](' puts the url placeholder here.
+        const urlFrom = range.from + text.length + 3;
+        return {
+            changes: { from: range.from, to: range.to, insert: `[${text}](url)` },
+            range: EditorSelection.range(urlFrom, urlFrom + 3),
+        };
+    });
+    dispatch(state.update(transaction, { scrollIntoView: true, userEvent: 'input' }));
+    return true;
+};
+/** Lezer node names, per markdown construct, as produced by `@lezer/markdown`. */
+const ACTIVE_NODES = {
+    bold: 'StrongEmphasis',
+    italic: 'Emphasis',
+    strike: 'Strikethrough',
+    code: 'InlineCode',
+    quote: 'Blockquote',
+    bulletList: 'BulletList',
+    orderedList: 'OrderedList',
+    link: 'Link',
+};
+/**
+ * Which markdown constructs the cursor currently sits in.
+ *
+ * Read from the syntax tree rather than by matching the raw text, so nesting
+ * and escapes are handled by the parser. Drives `aria-pressed` on the toolbar.
+ */
+function markdownActive(state) {
+    const active = {
+        bold: false,
+        italic: false,
+        strike: false,
+        code: false,
+        quote: false,
+        bulletList: false,
+        orderedList: false,
+        link: false,
+        heading: 0,
+    };
+    // -1 biases the lookup towards the node ending at the cursor, so a mark stays
+    // reported as active with the caret just after its closing delimiter.
+    let node = syntaxTree(state).resolveInner(state.selection.main.head, -1);
+    const names = Object.entries(ACTIVE_NODES);
+    for (;;) {
+        const heading = /^ATXHeading([1-6])$/.exec(node.name);
+        if (heading && !active.heading) {
+            active.heading = Number(heading[1]);
+        }
+        for (const [key, nodeName] of names) {
+            if (node.name === nodeName)
+                active[key] = true;
+        }
+        const parent = node.parent;
+        if (!parent)
+            return active;
+        node = parent;
+    }
+}
+
+/**
+ * Named toolbar presets for {@link MdeditComponent}, selectable through its
+ * `toolbar` input.
+ *
+ * - `default`: marks, a heading dropdown, quote and code, lists, links.
+ * - `light`: a reduced set — bold, italic, bullets, links.
+ * - `none`: empty; the component hides the toolbar entirely for this value.
+ *
+ * An `MdToolbar` can also be passed directly when neither preset fits.
+ */
+const MdEditToolbars = {
+    default: [['bold', 'italic', 'strike'], ['heading'], ['quote', 'code'], ['bullet_list', 'ordered_list'], ['link']],
+    light: [['bold', 'italic'], ['bullet_list'], ['link']],
+    none: [],
+};
+const BUTTONS = {
+    bold: { icon: 'bi-type-bold', label: 'Gras', command: toggleBold, active: 'bold' },
+    italic: { icon: 'bi-type-italic', label: 'Italique', command: toggleItalic, active: 'italic' },
+    strike: { icon: 'bi-type-strikethrough', label: 'Barré', command: toggleStrikethrough, active: 'strike' },
+    code: { icon: 'bi-code', label: 'Code', command: toggleInlineCode, active: 'code' },
+    quote: { icon: 'bi-blockquote-left', label: 'Citation', command: toggleQuote, active: 'quote' },
+    bullet_list: { icon: 'bi-list-ul', label: 'Liste à puces', command: toggleBulletList, active: 'bulletList' },
+    ordered_list: { icon: 'bi-list-ol', label: 'Liste numérotée', command: toggleOrderedList, active: 'orderedList' },
+    link: { icon: 'bi-link-45deg', label: 'Lien', command: insertLink, active: 'link' },
+};
+/** Levels offered by the heading dropdown; 0 puts the line back to a paragraph. */
+const HEADING_LEVELS = [
+    { level: 0, label: 'Paragraphe' },
+    { level: 1, label: 'Titre 1' },
+    { level: 2, label: 'Titre 2' },
+    { level: 3, label: 'Titre 3' },
+    { level: 4, label: 'Titre 4' },
+];
+/** Everything off, the state of an editor that has not reported yet. */
+const NOTHING_ACTIVE = {
+    bold: false,
+    italic: false,
+    strike: false,
+    code: false,
+    quote: false,
+    bulletList: false,
+    orderedList: false,
+    link: false,
+    heading: 0,
+};
+/**
+ * Markdown source editor for a model field, built on CodeMirror 6.
+ *
+ * Shipped as a separate entry point (`@solidev/data/mdedit`) so consumers who
+ * do not edit markdown never pull CodeMirror in. The markup stays on screen and
+ * stays editable — this is a *source* editor that styles itself as it goes
+ * (headings bigger, `**bold**` actually bold), not a WYSIWYG hiding the syntax
+ * and not a split preview. The flavour is GFM.
+ *
+ * The external contract matches {@link RicheditComponent} so the two are
+ * interchangeable in a form: same `dd` / `inline` / `form` modes, same explicit
+ * save (persisting only in `dd` mode), same `[fc]` escape hatch.
+ *
+ * @example
+ * ```html
+ * <data-mdedit [model]="thing" field="description">Description</data-mdedit>
+ * ```
+ */
+class MdeditComponent {
+    /** Id tying the label to the editor. */
+    inputId = uniqueId('data-mdedit');
+    /** Id of the label element, wired to the editor through `aria-labelledby`. */
+    labelId = `${this.inputId}-label`;
+    /** Model instance holding the field. */
+    model = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "model" }] : /* istanbul ignore next */ []));
+    /** Name of the markdown field to edit. */
+    field = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "field" }] : /* istanbul ignore next */ []));
+    /** Whether {@link toggleEdit} is allowed to enable editing. */
+    editable = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "editable" }] : /* istanbul ignore next */ []));
+    /** Whether the editor is currently enabled. Defaults to true. */
+    edit = model(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "edit" }] : /* istanbul ignore next */ []));
+    /**
+     * Layout, and whether {@link save} persists.
+     *
+     * `dd` renders a `<dt>`/`<dd>` block and is the only mode that saves to the
+     * API; `inline` and `form` render a label plus the editor and leave saving to
+     * the caller.
+     */
+    mode = input('dd', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    /** Hide label (for inline forms). */
+    hideLabel = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hideLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Hide the built-in save button, for callers driving persistence themselves
+     * from the {@link changed} output.
+     */
+    hideButton = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hideButton" }] : /* istanbul ignore next */ []));
+    /**
+     * Form control backing the editor.
+     *
+     * When supplied, the component uses it as-is and skips its own setup — no
+     * field manager lookup, no seeding from the model, and no {@link changed}
+     * emissions. When absent, one is created and wired up from `[model]` and
+     * `[field]`.
+     */
+    fc = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "fc" }] : /* istanbul ignore next */ []));
+    /** Toolbar preset name from {@link MdEditToolbars}, or an explicit toolbar. */
+    toolbar = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "toolbar" }] : /* istanbul ignore next */ []));
+    /** Text shown while the document is empty. */
+    placeholder = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Emits the markdown source on every change. Only wired for an internal `fc`. */
+    changed = output();
+    /** Field manager for {@link field}; only resolved when `fc` is created here. */
+    manager;
+    /** Whether the manager declares the field required. */
+    required = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    /** Markdown constructs under the cursor, driving `aria-pressed`. */
+    active = signal(NOTHING_ACTIVE, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    /** Heading levels offered by the dropdown. */
+    headingLevels = HEADING_LEVELS;
+    /** The control actually in use: the supplied `[fc]`, or the internal one. */
+    control;
+    /** Toolbar resolved from {@link toolbar}, as entries the template can render. */
+    groups = computed(() => {
+        const requested = this.toolbar();
+        const layout = typeof requested === 'string' ? (MdEditToolbars[requested] ?? []) : requested;
+        return layout.map((group) => group.map((item) => item === 'heading'
+            ? { kind: 'heading', label: 'Niveau de titre' }
+            : { kind: 'button', ...BUTTONS[item] }));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "groups" }] : /* istanbul ignore next */ []));
+    host = viewChild('editorHost', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "host" }] : /* istanbul ignore next */ []));
+    destroyRef = inject(DestroyRef);
+    /** Holds the read-only extensions, so editability can be reconfigured live. */
+    readOnly = new Compartment();
+    view;
+    constructor() {
+        // The view touches the DOM, so it is only built once there is one --
+        // nothing happens under SSR, where afterNextRender does not run.
+        afterNextRender(() => this.mount());
+        this.destroyRef.onDestroy(() => this.view?.destroy());
+    }
+    /**
+     * Resolve the control — unless a `[fc]` was given, build one seeded from the
+     * model field, enabled per `[edit]`, and relaying changes to {@link changed} —
+     * then keep the editor and the control in step.
+     */
+    ngOnInit() {
+        const supplied = this.fc();
+        if (supplied) {
+            this.control = supplied;
+        }
+        else {
+            this.control = new FormControl('');
+            const model = this.model();
+            const field = this.field();
+            if (model && field) {
+                this.manager = model.FM(field);
+                this.required.set(this.manager?.required ?? false);
+                this.control.setValue(asText(fieldValues(model)[field]), { emitEvent: false });
+            }
+            if (this.edit()) {
+                this.control.enable();
+            }
+            else {
+                this.control.disable();
+            }
+            this.control.valueChanges
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe((value) => this.changed.emit(value));
+        }
+        // A value set from outside is pushed into the document, and enable() /
+        // disable() flips the read-only compartment. Both are no-ops when they
+        // already match, which is what keeps the editor -> control -> editor round
+        // trip from looping.
+        this.control.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((value) => this.applyValue(value));
+        this.control.statusChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => this.applyEditable());
+    }
+    /**
+     * Switch between read-only and editing by enabling or disabling the control.
+     * Forces read-only when `[editable]` is false.
+     */
+    toggleEdit() {
+        if (this.editable() && !this.edit()) {
+            this.control.enable();
+            this.edit.set(true);
+        }
+        else {
+            this.control.disable();
+            this.edit.set(false);
+        }
+    }
+    /**
+     * Run a toolbar command against the editor and hand focus back, so a click
+     * on the toolbar does not take the caret out of the document.
+     */
+    run(command) {
+        const view = this.view;
+        if (!view)
+            return;
+        command(view);
+        view.focus();
+    }
+    /** Apply the heading level picked in the dropdown to the current line(s). */
+    setHeadingLevel(value) {
+        this.run(setHeading(Number(value)));
+    }
+    /**
+     * Write the editor content back to the model field, and persist it in `dd`
+     * mode only.
+     *
+     * In `inline` / `form` modes the model is updated in memory but no request is
+     * sent, leaving the save to the surrounding form. Does nothing without both a
+     * `[model]` and a `[field]`.
+     */
+    async save() {
+        const model = this.model();
+        const field = this.field();
+        if (!model || !field)
+            return;
+        model.setFV(field, this.control.value);
+        if (this.mode() === 'dd') {
+            await firstValueFrom(model.update([field], { updateModel: true }));
+        }
+    }
+    /** Build the CodeMirror view inside the host element. */
+    mount() {
+        const host = this.host()?.nativeElement;
+        if (!host || this.view)
+            return;
+        this.view = new EditorView({
+            parent: host,
+            state: EditorState.create({
+                doc: this.control.value ?? '',
+                extensions: markdownSetup({
+                    readOnly: this.readOnly,
+                    readOnlyInitially: this.control.disabled,
+                    placeholder: this.placeholder(),
+                    labelledBy: this.labelId,
+                    onChange: (doc) => this.pushToControl(doc),
+                    onStateChange: (state) => this.active.set(markdownActive(state)),
+                }),
+            }),
+        });
+    }
+    /**
+     * Push a document into the control, unless it is already there.
+     *
+     * `setValue` emits even when the value is unchanged, so without this guard an
+     * external `setValue` would come back through the editor as a second
+     * `valueChanges` — and a second {@link changed} emission for one edit.
+     */
+    pushToControl(doc) {
+        if (doc === (this.control.value ?? ''))
+            return;
+        this.control.setValue(doc);
+    }
+    /** Push a control value into the document, unless it is already there. */
+    applyValue(value) {
+        const view = this.view;
+        if (!view)
+            return;
+        const next = value ?? '';
+        if (next === view.state.doc.toString())
+            return;
+        view.dispatch({ changes: { from: 0, to: view.state.doc.length, insert: next } });
+    }
+    /** Mirror the control's enabled/disabled status onto the editor. */
+    applyEditable() {
+        this.view?.dispatch({ effects: this.readOnly.reconfigure(readOnlyExtension(this.control.disabled)) });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: MdeditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: MdeditComponent, isStandalone: true, selector: "data-mdedit", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, edit: { classPropertyName: "edit", publicName: "edit", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, hideLabel: { classPropertyName: "hideLabel", publicName: "hideLabel", isSignal: true, isRequired: false, transformFunction: null }, hideButton: { classPropertyName: "hideButton", publicName: "hideButton", isSignal: true, isRequired: false, transformFunction: null }, fc: { classPropertyName: "fc", publicName: "fc", isSignal: true, isRequired: false, transformFunction: null }, toolbar: { classPropertyName: "toolbar", publicName: "toolbar", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { edit: "editChange", changed: "changed" }, viewQueries: [{ propertyName: "host", first: true, predicate: ["editorHost"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #editorTemplate>\n  @if (edit() && groups().length) {\n    <div class=\"btn-toolbar data-mdedit__toolbar\" role=\"toolbar\" aria-label=\"Mise en forme du markdown\">\n      @for (group of groups(); track $index) {\n        <div class=\"btn-group btn-group-sm me-1\">\n          @for (entry of group; track entry.label) {\n            @if (entry.kind === \"button\") {\n              <button\n                type=\"button\"\n                class=\"btn btn-sm btn-outline-secondary\"\n                [class.active]=\"active()[entry.active]\"\n                [attr.aria-pressed]=\"active()[entry.active]\"\n                [attr.aria-label]=\"entry.label\"\n                [title]=\"entry.label\"\n                (click)=\"run(entry.command)\"\n              >\n                <i class=\"bi {{ entry.icon }}\" aria-hidden=\"true\"></i>\n              </button>\n            } @else {\n              <select\n                #headingSelect\n                class=\"form-select form-select-sm data-mdedit__headings\"\n                [attr.aria-label]=\"entry.label\"\n                [title]=\"entry.label\"\n                [value]=\"active().heading\"\n                (change)=\"setHeadingLevel(headingSelect.value)\"\n              >\n                @for (level of headingLevels; track level.level) {\n                  <option [value]=\"level.level\">{{ level.label }}</option>\n                }\n              </select>\n            }\n          }\n        </div>\n      }\n    </div>\n  }\n  <div #editorHost class=\"data-mdedit__host\" [attr.id]=\"inputId\"></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        [attr.id]=\"labelId\"\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.id]=\"labelId\" [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.id]=\"labelId\" [attr.for]=\"inputId\">\n      <ng-container [ngTemplateOutlet]=\"titleTpl\"></ng-container>\n    </label>\n  }\n  <ng-container [ngTemplateOutlet]=\"editorTemplate\"></ng-container>\n}\n", styles: [".data-mdedit__toolbar{flex-wrap:wrap;gap:.25rem 0;margin-bottom:.25rem}.data-mdedit__headings{width:auto}.data-mdedit__host .cm-editor{height:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: MdeditComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'data-mdedit', imports: [NgTemplateOutlet], template: "<ng-template #editorTemplate>\n  @if (edit() && groups().length) {\n    <div class=\"btn-toolbar data-mdedit__toolbar\" role=\"toolbar\" aria-label=\"Mise en forme du markdown\">\n      @for (group of groups(); track $index) {\n        <div class=\"btn-group btn-group-sm me-1\">\n          @for (entry of group; track entry.label) {\n            @if (entry.kind === \"button\") {\n              <button\n                type=\"button\"\n                class=\"btn btn-sm btn-outline-secondary\"\n                [class.active]=\"active()[entry.active]\"\n                [attr.aria-pressed]=\"active()[entry.active]\"\n                [attr.aria-label]=\"entry.label\"\n                [title]=\"entry.label\"\n                (click)=\"run(entry.command)\"\n              >\n                <i class=\"bi {{ entry.icon }}\" aria-hidden=\"true\"></i>\n              </button>\n            } @else {\n              <select\n                #headingSelect\n                class=\"form-select form-select-sm data-mdedit__headings\"\n                [attr.aria-label]=\"entry.label\"\n                [title]=\"entry.label\"\n                [value]=\"active().heading\"\n                (change)=\"setHeadingLevel(headingSelect.value)\"\n              >\n                @for (level of headingLevels; track level.level) {\n                  <option [value]=\"level.level\">{{ level.label }}</option>\n                }\n              </select>\n            }\n          }\n        </div>\n      }\n    </div>\n  }\n  <div #editorHost class=\"data-mdedit__host\" [attr.id]=\"inputId\"></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        [attr.id]=\"labelId\"\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.id]=\"labelId\" [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.id]=\"labelId\" [attr.for]=\"inputId\">\n      <ng-container [ngTemplateOutlet]=\"titleTpl\"></ng-container>\n    </label>\n  }\n  <ng-container [ngTemplateOutlet]=\"editorTemplate\"></ng-container>\n}\n", styles: [".data-mdedit__toolbar{flex-wrap:wrap;gap:.25rem 0;margin-bottom:.25rem}.data-mdedit__headings{width:auto}.data-mdedit__host .cm-editor{height:100%}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: false }] }], field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], edit: [{ type: i0.Input, args: [{ isSignal: true, alias: "edit", required: false }] }, { type: i0.Output, args: ["editChange"] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], hideLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideLabel", required: false }] }], hideButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideButton", required: false }] }], fc: [{ type: i0.Input, args: [{ isSignal: true, alias: "fc", required: false }] }], toolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "toolbar", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }], host: [{ type: i0.ViewChild, args: ['editorHost', { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MdEditToolbars, MdeditComponent, insertLink, markdownActive, markdownHighlightStyle, markdownSetup, markdownStyling, markdownTheme, readOnlyExtension, setHeading, toggleBold, toggleBulletList, toggleInlineCode, toggleInlineMark, toggleItalic, toggleOrderedList, toggleQuote, toggleStrikethrough };
+//# sourceMappingURL=solidev-data-mdedit.mjs.map