@mk-kit/ui 0.34.0

package/fesm2022/mk-kit-ui-rich-text.mjs

@@ -0,0 +1,565 @@
+import * as i0 from '@angular/core';
+import { inject, DOCUMENT, ElementRef, viewChild, input, booleanAttribute, output, signal, computed, afterRenderEffect, ChangeDetectionStrategy, Component, model, forwardRef } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { MK_I18N, MkFieldContext } from '@mk-kit/ui/core';
+
+/**
+ * Rich-text engine — an accessible contenteditable surface with a floating
+ * inline formatting toolbar (Bold, Italic, Underline, Strikethrough, Inline
+ * code, Link, Clear). Built on the native Selection API +
+ * `document.execCommand` (deprecated but universally supported and
+ * dependency-free — the only practical way to do inline formatting without a
+ * heavyweight editor engine).
+ *
+ * This is the low-level building block: it emits HTML via `contentChange`, and
+ * structural intents (`splitAt`, `removeEmpty`, `arrowOut`) so a block-editor
+ * host can create, merge or navigate blocks. For a standalone form control use
+ * {@link MkRichText} (`<mk-rich-text>`), which wraps this engine in a CVA over
+ * a sanitised HTML string.
+ */
+class MkRichTextEngine {
+    document = inject(DOCUMENT);
+    host = inject(ElementRef);
+    editableRef = viewChild.required('editable', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "editableRef" }] : /* istanbul ignore next */ []));
+    i18n = inject(MK_I18N);
+    /** Pending toolbar-hide delay from `onBlur`; cleared on destroy. */
+    blurTimer = null;
+    /** Current HTML content. */
+    html = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "html" }] : /* istanbul ignore next */ []));
+    /** Placeholder shown when empty. */
+    placeholder = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Disable editing. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Allow soft line breaks (Shift+Enter). Plain Enter always splits. */
+    multiline = input(true, { ...(ngDevMode ? { debugName: "multiline" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Emit `splitAt` on Enter (block-editor hosts). When `false` — standalone
+     * field usage — Enter inserts a line break inside this surface instead.
+     */
+    splitOnEnter = input(true, { ...(ngDevMode ? { debugName: "splitOnEnter" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Minimum height of the editable surface (any CSS length). */
+    minHeight = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minHeight" }] : /* istanbul ignore next */ []));
+    /** Accessible label for the editable region. */
+    ariaLabel = input(this.i18n.blockEditor.editableText, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Id of an external label element, for `aria-labelledby`. */
+    labelledBy = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []));
+    /** Space-separated id list for `aria-describedby`. */
+    describedBy = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    /** Reflect an invalid state via `aria-invalid`. */
+    invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Fired on every edit with the sanitised-by-construction HTML. */
+    contentChange = output();
+    /** Enter pressed: `before` stays in this block, `after` starts a new one. */
+    splitAt = output();
+    /** Backspace at the very start of an empty block. */
+    removeEmpty = output();
+    /** Caret tried to leave the top/bottom edge with an arrow key. */
+    arrowOut = output();
+    /** Focus/blur bubbled so the wrapper can show selection chrome. */
+    focusChange = output();
+    isEmpty = signal(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []));
+    toolbar = signal({
+        visible: false,
+        top: 0,
+        left: 0,
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "toolbar" }] : /* istanbul ignore next */ []));
+    activeFormats = signal(new Set(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeFormats" }] : /* istanbul ignore next */ []));
+    tools = [
+        { id: 'bold', label: this.i18n.blockEditor.bold, icon: 'B', shortcut: 'Ctrl+B' },
+        { id: 'italic', label: this.i18n.blockEditor.italic, icon: 'I', shortcut: 'Ctrl+I' },
+        { id: 'underline', label: this.i18n.blockEditor.underline, icon: 'U', shortcut: 'Ctrl+U' },
+        { id: 'strikeThrough', label: this.i18n.blockEditor.strikethrough, icon: 'S' },
+        { id: 'code', label: this.i18n.blockEditor.inlineCode, icon: '</>' },
+        { id: 'link', label: this.i18n.blockEditor.link, icon: '🔗' },
+        { id: 'clear', label: this.i18n.blockEditor.clearFormatting, icon: '⌫' },
+    ];
+    showPlaceholder = computed(() => this.isEmpty(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showPlaceholder" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Sync the DOM from the `html` input only when the user is not actively
+        // editing this element — otherwise setting innerHTML would reset the caret.
+        afterRenderEffect(() => {
+            const value = this.html() ?? '';
+            const el = this.editableRef().nativeElement;
+            if (this.document.activeElement === el)
+                return;
+            if (el.innerHTML !== value)
+                el.innerHTML = value;
+            this.isEmpty.set(this.computeEmpty(el));
+        });
+    }
+    /** Places the caret and focuses (called by the host for navigation). */
+    focus(position = 'end') {
+        const el = this.editableRef().nativeElement;
+        el.focus();
+        this.setCaret(el, position);
+    }
+    onInput() {
+        const el = this.editableRef().nativeElement;
+        this.isEmpty.set(this.computeEmpty(el));
+        this.contentChange.emit(el.innerHTML);
+    }
+    onFocus() {
+        this.focusChange.emit(true);
+    }
+    ngOnDestroy() {
+        if (this.blurTimer !== null) {
+            clearTimeout(this.blurTimer);
+            this.blurTimer = null;
+        }
+    }
+    onBlur() {
+        this.focusChange.emit(false);
+        // Hide the toolbar on a delay, but only if focus really left the
+        // component — Tabbing into the toolbar itself must not dismiss it.
+        if (this.blurTimer !== null)
+            clearTimeout(this.blurTimer);
+        this.blurTimer = setTimeout(() => {
+            this.blurTimer = null;
+            const active = this.document.activeElement;
+            if (active && this.host.nativeElement.contains(active))
+                return;
+            this.toolbar.update((t) => (t.visible ? { ...t, visible: false } : t));
+        }, 150);
+    }
+    onSelectionChange() {
+        this.updateToolbar();
+    }
+    onKeydown(event) {
+        if (this.disabled())
+            return;
+        const el = this.editableRef().nativeElement;
+        if (event.key === 'Enter' && !event.shiftKey) {
+            event.preventDefault();
+            if (this.splitOnEnter())
+                this.emitSplit(el);
+            else
+                this.insertLineBreak();
+            return;
+        }
+        // Shift+Enter in single-line mode is a hard split too.
+        if (event.key === 'Enter' && event.shiftKey && !this.multiline()) {
+            event.preventDefault();
+            if (this.splitOnEnter())
+                this.emitSplit(el);
+            else
+                this.insertLineBreak();
+            return;
+        }
+        if (event.key === 'Backspace' && this.isCaretAtStart(el) && this.isSelectionCollapsed()) {
+            if (this.computeEmpty(el)) {
+                event.preventDefault();
+                this.removeEmpty.emit();
+            }
+            return;
+        }
+        if (event.key === 'ArrowUp' && this.isCaretAtStart(el) && this.isSelectionCollapsed()) {
+            event.preventDefault();
+            this.arrowOut.emit('up');
+            return;
+        }
+        if (event.key === 'ArrowDown' && this.isCaretAtEnd(el) && this.isSelectionCollapsed()) {
+            event.preventDefault();
+            this.arrowOut.emit('down');
+            return;
+        }
+    }
+    /** Escape inside the toolbar returns focus to the text; arrows move tools. */
+    onToolbarKeydown(event) {
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            event.stopPropagation();
+            this.toolbar.update((t) => ({ ...t, visible: false }));
+            this.editableRef().nativeElement.focus();
+            return;
+        }
+        if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {
+            const bar = event.currentTarget;
+            const buttons = Array.from(bar.querySelectorAll('.mk-rich-text__tool'));
+            const current = buttons.indexOf(this.document.activeElement);
+            if (current === -1 || buttons.length === 0)
+                return;
+            event.preventDefault();
+            const delta = event.key === 'ArrowRight' ? 1 : -1;
+            buttons[(current + delta + buttons.length) % buttons.length].focus();
+        }
+    }
+    /** Runs a toolbar command, keeping the model + toolbar state in sync. */
+    runTool(id) {
+        const el = this.editableRef().nativeElement;
+        el.focus();
+        switch (id) {
+            case 'bold':
+            case 'italic':
+            case 'underline':
+            case 'strikeThrough':
+                this.document.execCommand(id);
+                break;
+            case 'code':
+                this.wrapInlineCode();
+                break;
+            case 'link':
+                this.applyLink();
+                break;
+            case 'clear':
+                this.document.execCommand('removeFormat');
+                this.document.execCommand('unlink');
+                break;
+        }
+        this.onInput();
+        this.updateToolbar();
+    }
+    isActive(id) {
+        return this.activeFormats().has(id);
+    }
+    // --- internals ------------------------------------------------------------
+    emitSplit(el) {
+        const { before, after } = this.splitHtmlAtCaret(el);
+        this.splitAt.emit({ before, after });
+    }
+    /** Inserts a `<br>` at the caret (Enter in `splitOnEnter=false` mode). */
+    insertLineBreak() {
+        // insertHTML keeps the markup to the sanitiser's allow-list (`<br>`),
+        // unlike the browser's default Enter handling which wraps lines in divs.
+        this.document.execCommand('insertHTML', false, '<br>');
+        this.onInput();
+    }
+    /** Extracts markup after the caret so the host can start a new block with it. */
+    splitHtmlAtCaret(el) {
+        const selection = this.document.defaultView?.getSelection();
+        if (!selection || selection.rangeCount === 0) {
+            return { before: el.innerHTML, after: '' };
+        }
+        const range = selection.getRangeAt(0);
+        const tail = range.cloneRange();
+        tail.selectNodeContents(el);
+        tail.setStart(range.endContainer, range.endOffset);
+        const fragment = tail.cloneContents();
+        const holder = this.document.createElement('div');
+        holder.appendChild(fragment);
+        const after = holder.innerHTML;
+        const head = range.cloneRange();
+        head.selectNodeContents(el);
+        head.setEnd(range.startContainer, range.startOffset);
+        const headHolder = this.document.createElement('div');
+        headHolder.appendChild(head.cloneContents());
+        const before = headHolder.innerHTML;
+        return { before, after };
+    }
+    wrapInlineCode() {
+        const selection = this.document.defaultView?.getSelection();
+        if (!selection || selection.rangeCount === 0 || selection.isCollapsed)
+            return;
+        const range = selection.getRangeAt(0);
+        const code = this.document.createElement('code');
+        try {
+            range.surroundContents(code);
+        }
+        catch {
+            // Selection crosses element boundaries — fall back to insertHTML.
+            const html = range.toString();
+            this.document.execCommand('insertHTML', false, `<code>${escapeText(html)}</code>`);
+        }
+    }
+    applyLink() {
+        const selection = this.document.defaultView?.getSelection();
+        if (!selection || selection.isCollapsed)
+            return;
+        const url = this.document.defaultView?.prompt(this.i18n.blockEditor.linkUrlPrompt, 'https://');
+        if (url == null)
+            return;
+        const trimmed = url.trim();
+        if (trimmed === '') {
+            this.document.execCommand('unlink');
+            return;
+        }
+        if (!/^(https?:|mailto:|tel:|\/|#)/i.test(trimmed))
+            return; // block javascript: etc.
+        this.document.execCommand('createLink', false, trimmed);
+    }
+    updateToolbar() {
+        const el = this.editableRef().nativeElement;
+        const selection = this.document.defaultView?.getSelection();
+        if (this.disabled() ||
+            !selection ||
+            selection.rangeCount === 0 ||
+            selection.isCollapsed ||
+            !el.contains(selection.anchorNode)) {
+            this.toolbar.update((t) => (t.visible ? { ...t, visible: false } : t));
+            return;
+        }
+        const rect = selection.getRangeAt(0).getBoundingClientRect();
+        const host = el.getBoundingClientRect();
+        this.toolbar.set({
+            visible: true,
+            top: rect.top - host.top - 8,
+            left: rect.left - host.left + rect.width / 2,
+        });
+        const active = new Set();
+        for (const id of ['bold', 'italic', 'underline', 'strikeThrough']) {
+            try {
+                if (this.document.queryCommandState(id))
+                    active.add(id);
+            }
+            catch {
+                /* queryCommandState can throw in some engines */
+            }
+        }
+        this.activeFormats.set(active);
+    }
+    computeEmpty(el) {
+        const text = el.textContent?.trim() ?? '';
+        return text === '' && !el.querySelector('img, hr, iframe');
+    }
+    setCaret(el, position) {
+        const selection = this.document.defaultView?.getSelection();
+        if (!selection)
+            return;
+        const range = this.document.createRange();
+        range.selectNodeContents(el);
+        range.collapse(position === 'start');
+        selection.removeAllRanges();
+        selection.addRange(range);
+    }
+    isSelectionCollapsed() {
+        return this.document.defaultView?.getSelection()?.isCollapsed ?? true;
+    }
+    isCaretAtStart(el) {
+        const selection = this.document.defaultView?.getSelection();
+        if (!selection || selection.rangeCount === 0)
+            return false;
+        const range = selection.getRangeAt(0).cloneRange();
+        range.selectNodeContents(el);
+        range.setEnd(selection.anchorNode, selection.anchorOffset);
+        return range.toString().length === 0;
+    }
+    isCaretAtEnd(el) {
+        const selection = this.document.defaultView?.getSelection();
+        if (!selection || selection.rangeCount === 0)
+            return false;
+        const range = selection.getRangeAt(0).cloneRange();
+        range.selectNodeContents(el);
+        range.setStart(selection.anchorNode, selection.anchorOffset);
+        return range.toString().length === 0;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkRichTextEngine, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkRichTextEngine, isStandalone: true, selector: "mk-rich-text-engine", inputs: { html: { classPropertyName: "html", publicName: "html", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, multiline: { classPropertyName: "multiline", publicName: "multiline", isSignal: true, isRequired: false, transformFunction: null }, splitOnEnter: { classPropertyName: "splitOnEnter", publicName: "splitOnEnter", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, labelledBy: { classPropertyName: "labelledBy", publicName: "labelledBy", isSignal: true, isRequired: false, transformFunction: null }, describedBy: { classPropertyName: "describedBy", publicName: "describedBy", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { contentChange: "contentChange", splitAt: "splitAt", removeEmpty: "removeEmpty", arrowOut: "arrowOut", focusChange: "focusChange" }, host: { classAttribute: "mk-rich-text" }, viewQueries: [{ propertyName: "editableRef", first: true, predicate: ["editable"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (toolbar().visible && !disabled()) {\n  <div\n    class=\"mk-rich-text__toolbar\"\n    role=\"toolbar\"\n    [attr.aria-label]=\"i18n.blockEditor.textFormatting\"\n    [style.top.px]=\"toolbar().top\"\n    [style.left.px]=\"toolbar().left\"\n    (keydown)=\"onToolbarKeydown($event)\"\n  >\n    @for (tool of tools; track tool.id) {\n      <button\n        type=\"button\"\n        class=\"mk-rich-text__tool\"\n        [class.mk-rich-text__tool--active]=\"isActive(tool.id)\"\n        [class.mk-rich-text__tool--code]=\"tool.id === 'code'\"\n        [attr.aria-pressed]=\"isActive(tool.id)\"\n        [attr.aria-label]=\"tool.label + (tool.shortcut ? ' (' + tool.shortcut + ')' : '')\"\n        [title]=\"tool.label\"\n        (mousedown)=\"$event.preventDefault()\"\n        (click)=\"runTool(tool.id)\"\n      >\n        {{ tool.icon }}\n      </button>\n    }\n  </div>\n}\n\n<div\n  #editable\n  class=\"mk-rich-text__editable\"\n  data-mk-editable\n  role=\"textbox\"\n  aria-multiline=\"true\"\n  [attr.aria-label]=\"labelledBy() ? null : ariaLabel()\"\n  [attr.aria-labelledby]=\"labelledBy()\"\n  [attr.aria-describedby]=\"describedBy()\"\n  [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n  [attr.contenteditable]=\"disabled() ? null : 'true'\"\n  [attr.data-placeholder]=\"placeholder()\"\n  [style.min-height]=\"minHeight()\"\n  [class.mk-rich-text__editable--empty]=\"showPlaceholder()\"\n  (input)=\"onInput()\"\n  (focus)=\"onFocus()\"\n  (blur)=\"onBlur()\"\n  (keydown)=\"onKeydown($event)\"\n  (keyup)=\"onSelectionChange()\"\n  (mouseup)=\"onSelectionChange()\"\n></div>\n", styles: [":host{display:block;position:relative}.mk-rich-text__editable{display:block;width:100%;min-height:1.5em;outline:none;color:var(--mk-text);font-family:inherit;font-size:inherit;line-height:var(--mk-line-height-relaxed);white-space:pre-wrap;word-break:break-word}.mk-rich-text__editable:focus-visible{outline:none}.mk-rich-text__editable--empty:before{content:attr(data-placeholder);color:var(--mk-text-subtle);pointer-events:none}.mk-rich-text__editable a{color:var(--mk-primary);text-decoration:underline}.mk-rich-text__editable code{font-family:var(--mk-font-mono);font-size:.9em;padding:.1em .3em;border-radius:var(--mk-radius-xs);background:var(--mk-code-bg)}.mk-rich-text__toolbar{position:absolute;z-index:var(--mk-z-menu);display:flex;gap:2px;padding:var(--mk-space-1);transform:translate(-50%,-100%);background:var(--mk-surface-inverse);border-radius:var(--mk-radius-md);box-shadow:var(--mk-shadow-lg);animation:mk-rich-text-pop var(--mk-duration-fast) var(--mk-ease-out)}@keyframes mk-rich-text-pop{0%{opacity:0;transform:translate(-50%,-90%)}to{opacity:1;transform:translate(-50%,-100%)}}@media(prefers-reduced-motion:reduce){.mk-rich-text__toolbar{animation:none}}.mk-rich-text__tool{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:0 var(--mk-space-1);border:none;border-radius:var(--mk-radius-sm);background:transparent;color:var(--mk-text-inverse);font-family:inherit;font-size:var(--mk-font-size-sm);font-weight:var(--mk-font-weight-bold);cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-rich-text__tool--code{font-family:var(--mk-font-mono);font-size:var(--mk-font-size-xs);font-weight:var(--mk-font-weight-normal)}.mk-rich-text__tool:hover{background:var(--mk-hover-overlay)}.mk-rich-text__tool--active{background:var(--mk-primary);color:var(--mk-primary-contrast)}.mk-rich-text__tool:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkRichTextEngine, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-rich-text-engine', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'mk-rich-text' }, template: "@if (toolbar().visible && !disabled()) {\n  <div\n    class=\"mk-rich-text__toolbar\"\n    role=\"toolbar\"\n    [attr.aria-label]=\"i18n.blockEditor.textFormatting\"\n    [style.top.px]=\"toolbar().top\"\n    [style.left.px]=\"toolbar().left\"\n    (keydown)=\"onToolbarKeydown($event)\"\n  >\n    @for (tool of tools; track tool.id) {\n      <button\n        type=\"button\"\n        class=\"mk-rich-text__tool\"\n        [class.mk-rich-text__tool--active]=\"isActive(tool.id)\"\n        [class.mk-rich-text__tool--code]=\"tool.id === 'code'\"\n        [attr.aria-pressed]=\"isActive(tool.id)\"\n        [attr.aria-label]=\"tool.label + (tool.shortcut ? ' (' + tool.shortcut + ')' : '')\"\n        [title]=\"tool.label\"\n        (mousedown)=\"$event.preventDefault()\"\n        (click)=\"runTool(tool.id)\"\n      >\n        {{ tool.icon }}\n      </button>\n    }\n  </div>\n}\n\n<div\n  #editable\n  class=\"mk-rich-text__editable\"\n  data-mk-editable\n  role=\"textbox\"\n  aria-multiline=\"true\"\n  [attr.aria-label]=\"labelledBy() ? null : ariaLabel()\"\n  [attr.aria-labelledby]=\"labelledBy()\"\n  [attr.aria-describedby]=\"describedBy()\"\n  [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n  [attr.contenteditable]=\"disabled() ? null : 'true'\"\n  [attr.data-placeholder]=\"placeholder()\"\n  [style.min-height]=\"minHeight()\"\n  [class.mk-rich-text__editable--empty]=\"showPlaceholder()\"\n  (input)=\"onInput()\"\n  (focus)=\"onFocus()\"\n  (blur)=\"onBlur()\"\n  (keydown)=\"onKeydown($event)\"\n  (keyup)=\"onSelectionChange()\"\n  (mouseup)=\"onSelectionChange()\"\n></div>\n", styles: [":host{display:block;position:relative}.mk-rich-text__editable{display:block;width:100%;min-height:1.5em;outline:none;color:var(--mk-text);font-family:inherit;font-size:inherit;line-height:var(--mk-line-height-relaxed);white-space:pre-wrap;word-break:break-word}.mk-rich-text__editable:focus-visible{outline:none}.mk-rich-text__editable--empty:before{content:attr(data-placeholder);color:var(--mk-text-subtle);pointer-events:none}.mk-rich-text__editable a{color:var(--mk-primary);text-decoration:underline}.mk-rich-text__editable code{font-family:var(--mk-font-mono);font-size:.9em;padding:.1em .3em;border-radius:var(--mk-radius-xs);background:var(--mk-code-bg)}.mk-rich-text__toolbar{position:absolute;z-index:var(--mk-z-menu);display:flex;gap:2px;padding:var(--mk-space-1);transform:translate(-50%,-100%);background:var(--mk-surface-inverse);border-radius:var(--mk-radius-md);box-shadow:var(--mk-shadow-lg);animation:mk-rich-text-pop var(--mk-duration-fast) var(--mk-ease-out)}@keyframes mk-rich-text-pop{0%{opacity:0;transform:translate(-50%,-90%)}to{opacity:1;transform:translate(-50%,-100%)}}@media(prefers-reduced-motion:reduce){.mk-rich-text__toolbar{animation:none}}.mk-rich-text__tool{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:0 var(--mk-space-1);border:none;border-radius:var(--mk-radius-sm);background:transparent;color:var(--mk-text-inverse);font-family:inherit;font-size:var(--mk-font-size-sm);font-weight:var(--mk-font-weight-bold);cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-rich-text__tool--code{font-family:var(--mk-font-mono);font-size:var(--mk-font-size-xs);font-weight:var(--mk-font-weight-normal)}.mk-rich-text__tool:hover{background:var(--mk-hover-overlay)}.mk-rich-text__tool--active{background:var(--mk-primary);color:var(--mk-primary-contrast)}.mk-rich-text__tool:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { editableRef: [{ type: i0.ViewChild, args: ['editable', { isSignal: true }] }], html: [{ type: i0.Input, args: [{ isSignal: true, alias: "html", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], multiline: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiline", required: false }] }], splitOnEnter: [{ type: i0.Input, args: [{ isSignal: true, alias: "splitOnEnter", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], labelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelledBy", required: false }] }], describedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "describedBy", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], contentChange: [{ type: i0.Output, args: ["contentChange"] }], splitAt: [{ type: i0.Output, args: ["splitAt"] }], removeEmpty: [{ type: i0.Output, args: ["removeEmpty"] }], arrowOut: [{ type: i0.Output, args: ["arrowOut"] }], focusChange: [{ type: i0.Output, args: ["focusChange"] }] } });
+function escapeText(value) {
+    return value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
+
+/**
+ * Allow-list sanitiser for inline rich-text HTML — the security backbone of
+ * both `<mk-rich-text>` and the block editor's text blocks.
+ *
+ * SECURITY MODEL: rich-text surfaces store HTML authored through the editor's
+ * restricted formatting commands. Before that markup is emitted, persisted or
+ * re-rendered it is passed through {@link sanitizeInlineHtml}, an allow-list
+ * cleaner that strips scripts, event handlers and dangerous URLs. Angular's
+ * `DomSanitizer` re-sanitises at display time where applicable. This module is
+ * dependency-free so it can run on a server (SSG/SSR) — never feed its output
+ * back into `innerHTML` without sanitising again.
+ */
+const ALLOWED_INLINE_TAGS = new Set([
+    'b', 'strong', 'i', 'em', 'u', 's', 'strike', 'code', 'a', 'br', 'span', 'mark', 'sub', 'sup',
+]);
+/** Escapes a value for safe placement in a double-quoted attribute. */
+function escapeAttr(value) {
+    return String(value ?? '')
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;');
+}
+/** True for URL schemes safe to place in `href`/`src`. */
+function isSafeUrl(url) {
+    const trimmed = String(url ?? '').trim();
+    if (trimmed === '')
+        return false;
+    // Allow relative, http(s), mailto, tel and data:image.
+    if (/^(https?:|mailto:|tel:)/i.test(trimmed))
+        return true;
+    if (/^data:image\//i.test(trimmed))
+        return true;
+    if (/^[a-z][a-z0-9+.-]*:/i.test(trimmed))
+        return false; // any other scheme
+    return true; // relative / anchor / protocol-relative-ish
+}
+/**
+ * Allow-list cleaner for inline rich text. Keeps a small set of formatting
+ * tags, strips everything else's tags (preserving their text), removes event
+ * handler attributes and unsafe `href`s. Not a substitute for `DomSanitizer`,
+ * but makes the serialised string safe by construction.
+ */
+function sanitizeInlineHtml(html) {
+    if (!html)
+        return '';
+    let out = String(html);
+    // Drop script/style blocks entirely.
+    out = out.replace(/<\s*(script|style)[\s\S]*?<\s*\/\s*\1\s*>/gi, '');
+    // Rewrite each tag: keep allow-listed ones with a scrubbed attribute set.
+    out = out.replace(/<\/?[a-z][a-z0-9]*\b[^>]*>/gi, (tag) => {
+        const closing = /^<\s*\//.test(tag);
+        const name = (tag.match(/^<\s*\/?\s*([a-z0-9]+)/i)?.[1] ?? '').toLowerCase();
+        if (!ALLOWED_INLINE_TAGS.has(name))
+            return '';
+        if (closing)
+            return `</${name}>`;
+        if (name === 'a') {
+            const href = tag.match(/\shref\s*=\s*(?:"([^"]*)"|'([^']*)')/i);
+            const url = href?.[1] ?? href?.[2] ?? '';
+            if (url && isSafeUrl(url)) {
+                return `<a href="${escapeAttr(url)}" rel="noopener noreferrer nofollow" target="_blank">`;
+            }
+            return '<a>';
+        }
+        return `<${name}>`;
+    });
+    return out;
+}
+
+/**
+ * Rich text — a small WYSIWYG form control over a sanitised HTML string, for
+ * single "description"-style fields where the full block editor is overkill.
+ * Renders a textarea-like surface with the floating inline formatting toolbar
+ * (Bold, Italic, Underline, Strikethrough, Inline code, Link, Clear) on text
+ * selection; Enter inserts a line break.
+ *
+ * Implements `ControlValueAccessor` with a two-way `value` model, so it works
+ * with `[(ngModel)]`, reactive forms and `[(value)]`. Every value — written or
+ * emitted — passes through {@link sanitizeInlineHtml}, and a visually empty
+ * surface (whitespace / lone `<br>`s) normalises to `''` so `required`
+ * validation behaves.
+ *
+ * ```html
+ * <mk-rich-text [(ngModel)]="description" placeholder="Describe it…" />
+ * <mk-rich-text [(value)]="html" minHeight="8rem" />
+ * ```
+ */
+class MkRichText {
+    field = inject(MkFieldContext, { optional: true });
+    i18n = inject(MK_I18N);
+    /** Two-way HTML string value (sanitised; `''` when visually empty). */
+    value = model('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Placeholder shown when empty. */
+    placeholder = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Disable the control. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Force the invalid visual + `aria-invalid` when used standalone. */
+    invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Minimum height of the editable area (any CSS length). */
+    minHeight = input('4.5em', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minHeight" }] : /* istanbul ignore next */ []));
+    /** Accessible label when not labelled by an `mk-form-field`. */
+    ariaLabel = input('', { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    cvaDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
+    onChange = () => { };
+    onTouched = () => { };
+    isDisabled = computed(() => this.disabled() || this.cvaDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    isInvalid = computed(() => this.invalid() || (this.field?.hasError() ?? false), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
+    labelledBy = this.field?.labelId ?? null;
+    describedBy = computed(() => this.field?.describedBy() ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    effectiveAriaLabel = computed(() => this.ariaLabel() || this.i18n.blockEditor.editableText, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveAriaLabel" }] : /* istanbul ignore next */ []));
+    /** Sanitised view of the model, rendered into the engine. */
+    safeHtml = computed(() => sanitizeInlineHtml(this.value()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "safeHtml" }] : /* istanbul ignore next */ []));
+    /** User edit: sanitise, normalise the empty state, propagate. */
+    onContentChange(html) {
+        const value = normalizeRichTextValue(html);
+        this.value.set(value);
+        this.onChange(value);
+    }
+    onFocusChange(focused) {
+        if (!focused)
+            this.onTouched();
+    }
+    // --- ControlValueAccessor -------------------------------------------------
+    writeValue(value) {
+        this.value.set(normalizeRichTextValue(value == null ? '' : String(value)));
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.cvaDisabled.set(isDisabled);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkRichText, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: MkRichText, isStandalone: true, selector: "mk-rich-text", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.mk-rich-text-field--disabled": "isDisabled()", "class.mk-rich-text-field--invalid": "isInvalid()" }, classAttribute: "mk-rich-text-field" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => MkRichText),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<mk-rich-text-engine\n  [html]=\"safeHtml()\"\n  [placeholder]=\"placeholder()\"\n  [disabled]=\"isDisabled()\"\n  [splitOnEnter]=\"false\"\n  [minHeight]=\"minHeight()\"\n  [ariaLabel]=\"effectiveAriaLabel()\"\n  [labelledBy]=\"labelledBy\"\n  [describedBy]=\"describedBy()\"\n  [invalid]=\"isInvalid()\"\n  (contentChange)=\"onContentChange($event)\"\n  (focusChange)=\"onFocusChange($event)\"\n/>\n", styles: [":host{display:block;width:100%;padding:var(--mk-space-2) var(--mk-space-3);font-family:inherit;font-size:var(--mk-font-size-md);color:var(--mk-text);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);transition:border-color var(--mk-duration-fast) var(--mk-ease-standard),box-shadow var(--mk-duration-fast) var(--mk-ease-standard),background-color var(--mk-duration-fast) var(--mk-ease-standard)}:host(:hover:not(.mk-rich-text-field--disabled)){border-color:var(--mk-border-strong)}:host(:focus-within){outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:-2px;border-color:var(--mk-primary)}:host(.mk-rich-text-field--invalid){border-color:var(--mk-danger)}:host(.mk-rich-text-field--invalid:focus-within){outline-color:var(--mk-danger);border-color:var(--mk-danger)}:host(.mk-rich-text-field--disabled){background-color:var(--mk-surface-2);color:var(--mk-text-disabled);border-color:var(--mk-border-subtle);cursor:not-allowed;opacity:.7}@media(pointer:coarse){:host{font-size:max(var(--mk-font-size-md),16px)}}\n"], dependencies: [{ kind: "component", type: MkRichTextEngine, selector: "mk-rich-text-engine", inputs: ["html", "placeholder", "disabled", "multiline", "splitOnEnter", "minHeight", "ariaLabel", "labelledBy", "describedBy", "invalid"], outputs: ["contentChange", "splitAt", "removeEmpty", "arrowOut", "focusChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkRichText, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-rich-text', imports: [MkRichTextEngine], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mk-rich-text-field',
+                        '[class.mk-rich-text-field--disabled]': 'isDisabled()',
+                        '[class.mk-rich-text-field--invalid]': 'isInvalid()',
+                    }, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => MkRichText),
+                            multi: true,
+                        },
+                    ], template: "<mk-rich-text-engine\n  [html]=\"safeHtml()\"\n  [placeholder]=\"placeholder()\"\n  [disabled]=\"isDisabled()\"\n  [splitOnEnter]=\"false\"\n  [minHeight]=\"minHeight()\"\n  [ariaLabel]=\"effectiveAriaLabel()\"\n  [labelledBy]=\"labelledBy\"\n  [describedBy]=\"describedBy()\"\n  [invalid]=\"isInvalid()\"\n  (contentChange)=\"onContentChange($event)\"\n  (focusChange)=\"onFocusChange($event)\"\n/>\n", styles: [":host{display:block;width:100%;padding:var(--mk-space-2) var(--mk-space-3);font-family:inherit;font-size:var(--mk-font-size-md);color:var(--mk-text);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);transition:border-color var(--mk-duration-fast) var(--mk-ease-standard),box-shadow var(--mk-duration-fast) var(--mk-ease-standard),background-color var(--mk-duration-fast) var(--mk-ease-standard)}:host(:hover:not(.mk-rich-text-field--disabled)){border-color:var(--mk-border-strong)}:host(:focus-within){outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:-2px;border-color:var(--mk-primary)}:host(.mk-rich-text-field--invalid){border-color:var(--mk-danger)}:host(.mk-rich-text-field--invalid:focus-within){outline-color:var(--mk-danger);border-color:var(--mk-danger)}:host(.mk-rich-text-field--disabled){background-color:var(--mk-surface-2);color:var(--mk-text-disabled);border-color:var(--mk-border-subtle);cursor:not-allowed;opacity:.7}@media(pointer:coarse){:host{font-size:max(var(--mk-font-size-md),16px)}}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }] } });
+/**
+ * Sanitises an HTML string and collapses visually empty markup (whitespace,
+ * `&nbsp;`s, lone `<br>`s and empty formatting tags) to `''`.
+ */
+function normalizeRichTextValue(html) {
+    const sanitized = sanitizeInlineHtml(html);
+    const text = sanitized
+        .replace(/<[^>]*>/g, '')
+        .replace(/&nbsp;/gi, ' ')
+        .trim();
+    return text === '' ? '' : sanitized;
+}
+
+/**
+ * RICH TEXT entry for @mk-kit/ui.
+ *
+ * A small WYSIWYG form control (`<mk-rich-text>`) over a sanitised HTML
+ * string, plus the low-level contenteditable engine and the allow-list
+ * sanitiser it is built on. The block editor composes the same engine for its
+ * paragraph, heading, quote and list blocks.
+ *
+ * NOTE: this barrel deliberately does not export an HTML-escape helper — the
+ * block-editor entry exports `mkEscapeHtml` and the root umbrella re-exports
+ * both entries.
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MkRichText, MkRichTextEngine, sanitizeInlineHtml };
+//# sourceMappingURL=mk-kit-ui-rich-text.mjs.map