@ojiepermana/angular 22.1.13 → 22.2.0

package/fesm2022/ojiepermana-angular-component-editor.mjs

@@ -1,515 +1,1000 @@
-import { DOCUMENT } from '@angular/common';
-import * as i0 from '@angular/core';
-import { InjectionToken, inject, SecurityContext, input, booleanAttribute, output, computed, Component, ElementRef, signal, forwardRef } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { cn } from '@ojiepermana/angular/component/utils/core';
-import { DomSanitizer } from '@angular/platform-browser';
-
-/**
- * Override this token when an application needs a stricter allow-list than
- * Angular's platform HTML sanitizer.
- */
-const EDITOR_HTML_SANITIZER = new InjectionToken('EDITOR_HTML_SANITIZER', {
-    providedIn: 'root',
-    factory: () => {
-        const sanitizer = inject(DomSanitizer);
-        return (html) => sanitizer.sanitize(SecurityContext.HTML, html) ?? '';
-    },
+import { DOCUMENT } from "@angular/common";
+import * as i0 from "@angular/core";
+import { Component, ElementRef, InjectionToken, SecurityContext, booleanAttribute, computed, forwardRef, inject, input, output, signal } from "@angular/core";
+import { NG_VALUE_ACCESSOR } from "@angular/forms";
+import { cn } from "@ojiepermana/angular/component/utils/core";
+import { DomSanitizer } from "@angular/platform-browser";
+const EDITOR_HTML_SANITIZER = new InjectionToken("EDITOR_HTML_SANITIZER", {
+	providedIn: "root",
+	factory: () => {
+		const sanitizer = inject(DomSanitizer);
+		return (html) => sanitizer.sanitize(SecurityContext.HTML, html) ?? "";
+	}
 });
-
-const DEFAULT_EDITOR_TOOLBAR = 'heading | bold italic underline strike | bullet ordered blockquote link align ~ undo redo';
-const EDITOR_BASE = 'block w-full min-w-0 text-sm text-foreground';
+const DEFAULT_EDITOR_TOOLBAR = "heading | bold italic underline strike | bullet ordered blockquote link align ~ undo redo";
+const EDITOR_BASE = "block w-full min-w-0 text-sm text-foreground";
 const EDITOR_SHELL_BASE = [
-    'relative min-w-0 overflow-hidden rounded-md border border-input bg-background shadow-sm',
-    'transition-[border-color,box-shadow] focus-within:border-ring focus-within:ring-1 focus-within:ring-ring',
-    'aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-within:ring-destructive',
-    'data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50',
-].join(' ');
-const EDITOR_TOOLBAR_BASE = [
-    'flex min-h-11 min-w-0 flex-wrap items-center gap-1 border-b border-[hsl(var(--border)/var(--opacity-70))] bg-[hsl(var(--muted)/var(--opacity-30))] px-2 py-1.5',
-    'data-[disabled=true]:pointer-events-none',
-].join(' ');
+	"relative min-w-0 overflow-hidden rounded-md border border-input bg-background shadow-sm",
+	"transition-[border-color,box-shadow] focus-within:border-ring focus-within:ring-1 focus-within:ring-ring",
+	"aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-within:ring-destructive",
+	"data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50"
+].join(" ");
+const EDITOR_TOOLBAR_BASE = ["flex min-h-11 min-w-0 flex-wrap items-center gap-1 border-b border-[hsl(var(--border)/var(--opacity-70))] bg-[hsl(var(--muted)/var(--opacity-30))] px-2 py-1.5", "data-[disabled=true]:pointer-events-none"].join(" ");
 const EDITOR_TOOL_BUTTON_BASE = [
-    'inline-flex size-8 shrink-0 items-center justify-center rounded-md text-sm font-medium text-muted-foreground',
-    'transition-colors hover:bg-accent hover:text-accent-foreground',
-    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
-    'disabled:pointer-events-none disabled:opacity-50',
-    'aria-pressed:bg-accent aria-pressed:text-accent-foreground',
-].join(' ');
+	"inline-flex size-8 shrink-0 items-center justify-center rounded-md text-sm font-medium text-muted-foreground",
+	"transition-colors hover:bg-accent hover:text-accent-foreground",
+	"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+	"disabled:pointer-events-none disabled:opacity-50",
+	"aria-pressed:bg-accent aria-pressed:text-accent-foreground"
+].join(" ");
 const EDITOR_SELECT_BASE = [
-    'h-8 rounded-md border border-transparent bg-transparent px-2 text-sm font-medium text-muted-foreground outline-none',
-    'transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring',
-    'disabled:pointer-events-none disabled:opacity-50',
-].join(' ');
+	"h-8 rounded-md border border-transparent bg-transparent px-2 text-sm font-medium text-muted-foreground outline-none",
+	"transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring",
+	"disabled:pointer-events-none disabled:opacity-50"
+].join(" ");
 const EDITOR_CONTENT_BASE = [
-    'block min-h-50 max-h-125 w-full overflow-y-auto px-4 py-3 text-sm leading-6 outline-none',
-    '[&_p]:my-2 [&_h1]:mb-2 [&_h1]:mt-4 [&_h1]:text-2xl [&_h1]:font-semibold [&_h2]:mb-2 [&_h2]:mt-4 [&_h2]:text-xl [&_h2]:font-semibold [&_h3]:mb-2 [&_h3]:mt-4 [&_h3]:text-lg [&_h3]:font-semibold',
-    '[&_blockquote]:my-3 [&_blockquote]:border-l-2 [&_blockquote]:border-border [&_blockquote]:pl-3 [&_blockquote]:text-muted-foreground [&_ul]:my-2 [&_ul]:list-disc [&_ul]:pl-6 [&_ol]:my-2 [&_ol]:list-decimal [&_ol]:pl-6 [&_pre]:my-3 [&_pre]:overflow-x-auto [&_pre]:rounded-md [&_pre]:bg-muted [&_pre]:p-3 [&_pre]:font-mono [&_pre]:text-xs',
-    'data-[empty=true]:before:pointer-events-none data-[empty=true]:before:text-muted-foreground data-[empty=true]:before:content-[attr(data-placeholder)]',
-    'data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50',
-].join(' ');
+	"block min-h-50 max-h-125 w-full overflow-y-auto px-4 py-3 text-sm leading-6 outline-none",
+	"[&_p]:my-2 [&_h1]:mb-2 [&_h1]:mt-4 [&_h1]:text-2xl [&_h1]:font-semibold [&_h2]:mb-2 [&_h2]:mt-4 [&_h2]:text-xl [&_h2]:font-semibold [&_h3]:mb-2 [&_h3]:mt-4 [&_h3]:text-lg [&_h3]:font-semibold",
+	"[&_blockquote]:my-3 [&_blockquote]:border-l-2 [&_blockquote]:border-border [&_blockquote]:pl-3 [&_blockquote]:text-muted-foreground [&_ul]:my-2 [&_ul]:list-disc [&_ul]:pl-6 [&_ol]:my-2 [&_ol]:list-decimal [&_ol]:pl-6 [&_pre]:my-3 [&_pre]:overflow-x-auto [&_pre]:rounded-md [&_pre]:bg-muted [&_pre]:p-3 [&_pre]:font-mono [&_pre]:text-xs",
+	"data-[empty=true]:before:pointer-events-none data-[empty=true]:before:text-muted-foreground data-[empty=true]:before:content-[attr(data-placeholder)]",
+	"data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50"
+].join(" ");
 const toolbarButtons = {
-    bold: { label: 'B', ariaLabel: 'Bold' },
-    italic: { label: 'I', ariaLabel: 'Italic' },
-    underline: { label: 'U', ariaLabel: 'Underline' },
-    strike: { label: 'S', ariaLabel: 'Strikethrough' },
-    bullet: { label: 'UL', ariaLabel: 'Bulleted list' },
-    ordered: { label: '1.', ariaLabel: 'Numbered list' },
-    blockquote: { label: 'Q', ariaLabel: 'Block quote' },
-    subscript: { label: 'Sub', ariaLabel: 'Subscript' },
-    superscript: { label: 'Sup', ariaLabel: 'Superscript' },
-    highlight: { label: 'H', ariaLabel: 'Highlight' },
-    link: { label: 'Link', ariaLabel: 'Insert link' },
-    code: { label: '</>', ariaLabel: 'Code block' },
-    undo: { label: 'Undo', ariaLabel: 'Undo' },
-    redo: { label: 'Redo', ariaLabel: 'Redo' },
+	bold: {
+		label: "B",
+		ariaLabel: "Bold"
+	},
+	italic: {
+		label: "I",
+		ariaLabel: "Italic"
+	},
+	underline: {
+		label: "U",
+		ariaLabel: "Underline"
+	},
+	strike: {
+		label: "S",
+		ariaLabel: "Strikethrough"
+	},
+	bullet: {
+		label: "UL",
+		ariaLabel: "Bulleted list"
+	},
+	ordered: {
+		label: "1.",
+		ariaLabel: "Numbered list"
+	},
+	blockquote: {
+		label: "Q",
+		ariaLabel: "Block quote"
+	},
+	subscript: {
+		label: "Sub",
+		ariaLabel: "Subscript"
+	},
+	superscript: {
+		label: "Sup",
+		ariaLabel: "Superscript"
+	},
+	highlight: {
+		label: "H",
+		ariaLabel: "Highlight"
+	},
+	link: {
+		label: "Link",
+		ariaLabel: "Insert link"
+	},
+	code: {
+		label: "</>",
+		ariaLabel: "Code block"
+	},
+	undo: {
+		label: "Undo",
+		ariaLabel: "Undo"
+	},
+	redo: {
+		label: "Redo",
+		ariaLabel: "Redo"
+	}
 };
-/** document.execCommand name (+ optional value) for each editor command. */
 const EDITOR_EXEC_COMMANDS = {
-    paragraph: ['formatBlock', 'p'],
-    'heading-1': ['formatBlock', 'h1'],
-    'heading-2': ['formatBlock', 'h2'],
-    'heading-3': ['formatBlock', 'h3'],
-    bold: ['bold'],
-    italic: ['italic'],
-    underline: ['underline'],
-    strike: ['strikeThrough'],
-    bullet: ['insertUnorderedList'],
-    ordered: ['insertOrderedList'],
-    blockquote: ['formatBlock', 'blockquote'],
-    subscript: ['subscript'],
-    superscript: ['superscript'],
-    highlight: ['backColor'],
-    link: ['createLink', '#'],
-    code: ['formatBlock', 'pre'],
-    'align-left': ['justifyLeft'],
-    'align-center': ['justifyCenter'],
-    'align-right': ['justifyRight'],
-    undo: ['undo'],
-    redo: ['redo'],
+	paragraph: ["formatBlock", "p"],
+	"heading-1": ["formatBlock", "h1"],
+	"heading-2": ["formatBlock", "h2"],
+	"heading-3": ["formatBlock", "h3"],
+	bold: ["bold"],
+	italic: ["italic"],
+	underline: ["underline"],
+	strike: ["strikeThrough"],
+	bullet: ["insertUnorderedList"],
+	ordered: ["insertOrderedList"],
+	blockquote: ["formatBlock", "blockquote"],
+	subscript: ["subscript"],
+	superscript: ["superscript"],
+	highlight: ["backColor"],
+	link: ["createLink", "#"],
+	code: ["formatBlock", "pre"],
+	"align-left": ["justifyLeft"],
+	"align-center": ["justifyCenter"],
+	"align-right": ["justifyRight"],
+	undo: ["undo"],
+	redo: ["redo"]
 };
-/** Keeps the text selection alive while clicking toolbar controls. */
 const preserveEditorSelection = (event) => {
-    event.preventDefault();
+	event.preventDefault();
 };
 const parseToolbarItems = (items) => {
-    const tokens = items.split(/\s+/).filter(Boolean);
-    return tokens.flatMap((token, index) => {
-        if (token === '|') {
-            return [{ type: 'separator', track: `separator-${index}` }];
-        }
-        if (token === '~') {
-            return [{ type: 'spacer', track: `spacer-${index}` }];
-        }
-        if (token === 'heading') {
-            return [{ type: 'heading', track: `heading-${index}` }];
-        }
-        if (token === 'align') {
-            return [{ type: 'align', track: `align-${index}` }];
-        }
-        const command = token;
-        const button = toolbarButtons[command];
-        if (!button) {
-            return [];
-        }
-        return [{ type: 'button', command, label: button.label, ariaLabel: button.ariaLabel }];
-    });
+	return items.split(/\s+/).filter(Boolean).flatMap((token, index) => {
+		if (token === "|") return [{
+			type: "separator",
+			track: `separator-${index}`
+		}];
+		if (token === "~") return [{
+			type: "spacer",
+			track: `spacer-${index}`
+		}];
+		if (token === "heading") return [{
+			type: "heading",
+			track: `heading-${index}`
+		}];
+		if (token === "align") return [{
+			type: "align",
+			track: `align-${index}`
+		}];
+		const command = token;
+		const button = toolbarButtons[command];
+		if (!button) return [];
+		return [{
+			type: "button",
+			command,
+			label: button.label,
+			ariaLabel: button.ariaLabel
+		}];
+	});
 };
-class EditorComponent {
-    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    commandSelected = output();
-    content = null;
-    classes = computed(() => cn(EDITOR_BASE, this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    shellClasses = computed(() => cn(EDITOR_SHELL_BASE), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "shellClasses" }] : /* istanbul ignore next */ []));
-    execute(command, source = 'api', originalEvent) {
-        if (this.disabled()) {
-            return;
-        }
-        this.content?.execute(command);
-        this.commandSelected.emit({ command, source, originalEvent });
-    }
-    registerContent(content) {
-        this.content = content;
-    }
-    unregisterContent(content) {
-        if (this.content === content) {
-            this.content = null;
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: EditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: EditorComponent, isStandalone: true, selector: "Editor", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { commandSelected: "commandSelected" }, host: { properties: { "class": "classes()", "attr.data-slot": "\"editor\"", "attr.data-disabled": "disabled() ? \"true\" : null", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.aria-invalid": "invalid() ? \"true\" : null", "attr.inert": "disabled() ? \"\" : null" } }, ngImport: i0, template: "<div\n  data-slot=\"editor-shell\"\n  [class]=\"shellClasses()\"\n  [attr.data-disabled]=\"disabled() ? 'true' : null\"\n  [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n>\n  <ng-content select=\"EditorToolbar\" />\n  <ng-content select=\"EditorContent\" />\n</div>\n" });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: EditorComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'Editor', host: {
-                        '[class]': 'classes()',
-                        '[attr.data-slot]': '"editor"',
-                        '[attr.data-disabled]': 'disabled() ? "true" : null',
-                        '[attr.aria-disabled]': 'disabled() ? "true" : null',
-                        '[attr.aria-invalid]': 'invalid() ? "true" : null',
-                        '[attr.inert]': 'disabled() ? "" : null',
-                    }, template: "<div\n  data-slot=\"editor-shell\"\n  [class]=\"shellClasses()\"\n  [attr.data-disabled]=\"disabled() ? 'true' : null\"\n  [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n>\n  <ng-content select=\"EditorToolbar\" />\n  <ng-content select=\"EditorContent\" />\n</div>\n" }]
-        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], commandSelected: [{ type: i0.Output, args: ["commandSelected"] }] } });
-class EditorToolbarComponent {
-    editor = inject(EditorComponent, { optional: true });
-    items = input(DEFAULT_EDITOR_TOOLBAR, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
-    disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled', transform: booleanAttribute });
-    ariaLabel = input('Formatting', { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    buttonClasses = EDITOR_TOOL_BUTTON_BASE;
-    selectClasses = EDITOR_SELECT_BASE;
-    disabled = computed(() => this.disabledInput() || this.editor?.disabled() === true, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-    parts = computed(() => parseToolbarItems(this.items()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "parts" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn(EDITOR_TOOLBAR_BASE, this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    execute(command, event) {
-        this.editor?.execute(command, 'toolbar', event);
-    }
-    handleSelect(event) {
-        const select = event.target;
-        this.editor?.execute(select.value, 'toolbar', event);
-        select.selectedIndex = 0;
-    }
-    preserveSelection = preserveEditorSelection;
-    trackPart(part, index) {
-        if (part.type === 'button') {
-            return `${part.command}-${index}`;
-        }
-        return part.track;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: EditorToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: EditorToolbarComponent, isStandalone: true, selector: "EditorToolbar", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "toolbar" }, properties: { "class": "classes()", "attr.data-slot": "\"editor-toolbar\"", "attr.aria-label": "ariaLabel()", "attr.data-disabled": "disabled() ? \"true\" : null" } }, ngImport: i0, template: "@for (part of parts(); track trackPart(part, $index)) {\n  @switch (part.type) {\n    @case ('heading') {\n      <select\n        [class]=\"selectClasses\"\n        [disabled]=\"disabled()\"\n        aria-label=\"Text style\"\n        (change)=\"handleSelect($event)\"\n      >\n        <option value=\"paragraph\">Text</option>\n        <option value=\"heading-1\">Heading 1</option>\n        <option value=\"heading-2\">Heading 2</option>\n        <option value=\"heading-3\">Heading 3</option>\n      </select>\n    }\n    @case ('align') {\n      <select\n        [class]=\"selectClasses\"\n        [disabled]=\"disabled()\"\n        aria-label=\"Text alignment\"\n        (change)=\"handleSelect($event)\"\n      >\n        <option value=\"align-left\">Left</option>\n        <option value=\"align-center\">Center</option>\n        <option value=\"align-right\">Right</option>\n      </select>\n    }\n    @case ('separator') {\n      <span\n        data-slot=\"editor-separator\"\n        class=\"mx-1 h-6 w-px shrink-0 bg-border\"\n        role=\"separator\"\n        aria-orientation=\"vertical\"\n      ></span>\n    }\n    @case ('spacer') {\n      <span data-slot=\"editor-spacer\" class=\"min-w-2 flex-1\"></span>\n    }\n    @case ('button') {\n      <button\n        type=\"button\"\n        data-slot=\"editor-button\"\n        [class]=\"buttonClasses\"\n        [disabled]=\"disabled()\"\n        [attr.aria-label]=\"part.ariaLabel\"\n        [attr.title]=\"part.ariaLabel\"\n        (mousedown)=\"preserveSelection($event)\"\n        (click)=\"execute(part.command, $event)\"\n      >\n        @if (part.command === 'undo') {\n          <svg\n            aria-hidden=\"true\"\n            class=\"size-4\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.75\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <path d=\"M9 14 4 9l5-5\" />\n            <path d=\"M4 9h10a6 6 0 0 1 0 12h-2\" />\n          </svg>\n        } @else if (part.command === 'redo') {\n          <svg\n            aria-hidden=\"true\"\n            class=\"size-4\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.75\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <path d=\"m15 14 5-5-5-5\" />\n            <path d=\"M20 9H10a6 6 0 0 0 0 12h2\" />\n          </svg>\n        } @else {\n          <span aria-hidden=\"true\">{{ part.label }}</span>\n        }\n      </button>\n    }\n  }\n}\n<ng-content />\n" });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: EditorToolbarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'EditorToolbar', host: {
-                        '[class]': 'classes()',
-                        '[attr.data-slot]': '"editor-toolbar"',
-                        role: 'toolbar',
-                        '[attr.aria-label]': 'ariaLabel()',
-                        '[attr.data-disabled]': 'disabled() ? "true" : null',
-                    }, template: "@for (part of parts(); track trackPart(part, $index)) {\n  @switch (part.type) {\n    @case ('heading') {\n      <select\n        [class]=\"selectClasses\"\n        [disabled]=\"disabled()\"\n        aria-label=\"Text style\"\n        (change)=\"handleSelect($event)\"\n      >\n        <option value=\"paragraph\">Text</option>\n        <option value=\"heading-1\">Heading 1</option>\n        <option value=\"heading-2\">Heading 2</option>\n        <option value=\"heading-3\">Heading 3</option>\n      </select>\n    }\n    @case ('align') {\n      <select\n        [class]=\"selectClasses\"\n        [disabled]=\"disabled()\"\n        aria-label=\"Text alignment\"\n        (change)=\"handleSelect($event)\"\n      >\n        <option value=\"align-left\">Left</option>\n        <option value=\"align-center\">Center</option>\n        <option value=\"align-right\">Right</option>\n      </select>\n    }\n    @case ('separator') {\n      <span\n        data-slot=\"editor-separator\"\n        class=\"mx-1 h-6 w-px shrink-0 bg-border\"\n        role=\"separator\"\n        aria-orientation=\"vertical\"\n      ></span>\n    }\n    @case ('spacer') {\n      <span data-slot=\"editor-spacer\" class=\"min-w-2 flex-1\"></span>\n    }\n    @case ('button') {\n      <button\n        type=\"button\"\n        data-slot=\"editor-button\"\n        [class]=\"buttonClasses\"\n        [disabled]=\"disabled()\"\n        [attr.aria-label]=\"part.ariaLabel\"\n        [attr.title]=\"part.ariaLabel\"\n        (mousedown)=\"preserveSelection($event)\"\n        (click)=\"execute(part.command, $event)\"\n      >\n        @if (part.command === 'undo') {\n          <svg\n            aria-hidden=\"true\"\n            class=\"size-4\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.75\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <path d=\"M9 14 4 9l5-5\" />\n            <path d=\"M4 9h10a6 6 0 0 1 0 12h-2\" />\n          </svg>\n        } @else if (part.command === 'redo') {\n          <svg\n            aria-hidden=\"true\"\n            class=\"size-4\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.75\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <path d=\"m15 14 5-5-5-5\" />\n            <path d=\"M20 9H10a6 6 0 0 0 0 12h2\" />\n          </svg>\n        } @else {\n          <span aria-hidden=\"true\">{{ part.label }}</span>\n        }\n      </button>\n    }\n  }\n}\n<ng-content />\n" }]
-        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-class EditorButtonComponent {
-    editor = inject(EditorComponent, { optional: true });
-    command = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "command" }] : /* istanbul ignore next */ []));
-    pressed = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "pressed" }] : /* istanbul ignore next */ []));
-    disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled', transform: booleanAttribute });
-    tooltip = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "tooltip" }] : /* istanbul ignore next */ []));
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    disabled = computed(() => this.disabledInput() || this.editor?.disabled() === true, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn(EDITOR_TOOL_BUTTON_BASE, this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    handleClick(event) {
-        const command = this.command();
-        if (!command) {
-            return;
-        }
-        this.editor?.execute(command, 'toolbar', event);
-    }
-    preserveSelection = preserveEditorSelection;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: EditorButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: EditorButtonComponent, isStandalone: true, selector: "button[EditorButton]", inputs: { command: { classPropertyName: "command", publicName: "command", isSignal: true, isRequired: false, transformFunction: null }, pressed: { classPropertyName: "pressed", publicName: "pressed", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button" }, listeners: { "mousedown": "preserveSelection($event)", "click": "handleClick($event)" }, properties: { "class": "classes()", "attr.data-slot": "\"editor-button\"", "attr.title": "tooltip() || null", "attr.aria-pressed": "pressed() === null ? null : pressed()", "disabled": "disabled() || null" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: EditorButtonComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'button[EditorButton]',
-                    host: {
-                        '[class]': 'classes()',
-                        '[attr.data-slot]': '"editor-button"',
-                        '[attr.title]': 'tooltip() || null',
-                        '[attr.aria-pressed]': 'pressed() === null ? null : pressed()',
-                        '[disabled]': 'disabled() || null',
-                        type: 'button',
-                        '(mousedown)': 'preserveSelection($event)',
-                        '(click)': 'handleClick($event)',
-                    },
-                    template: `<ng-content />`,
-                }]
-        }], propDecorators: { command: [{ type: i0.Input, args: [{ isSignal: true, alias: "command", required: false }] }], pressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "pressed", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-class EditorSeparatorComponent {
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn('mx-1 h-6 w-px shrink-0 bg-border', this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: EditorSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: EditorSeparatorComponent, isStandalone: true, selector: "EditorSeparator", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "separator", "aria-orientation": "vertical" }, properties: { "class": "classes()", "attr.data-slot": "\"editor-separator\"" } }, ngImport: i0, template: '', isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: EditorSeparatorComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'EditorSeparator',
-                    host: {
-                        '[class]': 'classes()',
-                        '[attr.data-slot]': '"editor-separator"',
-                        role: 'separator',
-                        'aria-orientation': 'vertical',
-                    },
-                    template: '',
-                }]
-        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-class EditorSpacerComponent {
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn('min-w-2 flex-1', this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: EditorSpacerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: EditorSpacerComponent, isStandalone: true, selector: "EditorSpacer", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"editor-spacer\"" } }, ngImport: i0, template: '', isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: EditorSpacerComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'EditorSpacer',
-                    host: {
-                        '[class]': 'classes()',
-                        '[attr.data-slot]': '"editor-spacer"',
-                    },
-                    template: '',
-                }]
-        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-class EditorContentComponent {
-    el = inject(ElementRef);
-    editor = inject(EditorComponent, { optional: true });
-    document = inject(DOCUMENT);
-    sanitizeHtml = inject(EDITOR_HTML_SANITIZER);
-    placeholder = input('Write something...', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
-    ariaLabel = input('Rich text editor', { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
-    disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled', transform: booleanAttribute });
-    invalidInput = input(false, { ...(ngDevMode ? { debugName: "invalidInput" } : /* istanbul ignore next */ {}), alias: 'aria-invalid', transform: booleanAttribute });
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    disabledState = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
-    empty = signal(true, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "empty" }] : /* istanbul ignore next */ []));
-    disabled = computed(() => this.disabledInput() || this.disabledState() || this.editor?.disabled() === true, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-    invalid = computed(() => this.invalidInput() || this.editor?.invalid() === true, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn(EDITOR_CONTENT_BASE, this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    lastKnownValue = '';
-    onChange = () => { };
-    onTouched = () => { };
-    ngAfterViewInit() {
-        this.editor?.registerContent(this);
-        this.setSanitizedValue(this.el.nativeElement.innerHTML);
-        queueMicrotask(() => this.syncEmptyState());
-    }
-    ngOnDestroy() {
-        this.editor?.unregisterContent(this);
-    }
-    writeValue(value) {
-        this.setSanitizedValue(value ?? '');
-        queueMicrotask(() => this.syncEmptyState());
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.disabledState.set(isDisabled);
-    }
-    execute(command) {
-        if (this.disabled()) {
-            return;
-        }
-        this.el.nativeElement.focus();
-        const [name, value] = EDITOR_EXEC_COMMANDS[command];
-        this.exec(name, command === 'highlight' ? this.highlightColor() : value);
-        this.handleInput();
-    }
-    focus() {
-        this.el.nativeElement.focus();
-    }
-    handleInput() {
-        const element = this.el.nativeElement;
-        const unsafeHtml = element.innerHTML;
-        const safeHtml = this.sanitizeHtml(unsafeHtml);
-        if (safeHtml !== unsafeHtml) {
-            element.innerHTML = safeHtml;
-        }
-        // Read back after assignment: the browser normalizes markup, so the
-        // DOM-normalized form is the canonical value emitted to consumers.
-        const html = element.innerHTML;
-        this.syncEmptyState();
-        if (html === this.lastKnownValue) {
-            return;
-        }
-        this.lastKnownValue = html;
-        this.onChange(html);
-    }
-    setSanitizedValue(value) {
-        this.el.nativeElement.innerHTML = this.sanitizeHtml(value);
-        this.lastKnownValue = this.el.nativeElement.innerHTML;
-    }
-    handleBlur() {
-        this.onTouched();
-    }
-    handleKeydown(event) {
-        if (this.disabled()) {
-            return;
-        }
-        const command = this.shortcutCommand(event);
-        if (!command) {
-            return;
-        }
-        event.preventDefault();
-        if (this.editor) {
-            this.editor.execute(command, 'shortcut', event);
-            return;
-        }
-        this.execute(command);
-    }
-    exec(command, value) {
-        if (typeof this.document.execCommand !== 'function') {
-            return;
-        }
-        this.document.execCommand(command, false, value);
-    }
-    highlightColor() {
-        const highlight = this.document.defaultView
-            ?.getComputedStyle(this.document.documentElement)
-            .getPropertyValue('--editor-highlight')
-            .trim();
-        return highlight ? `hsl(${highlight})` : 'hsl(48 96% 80%)';
-    }
-    syncEmptyState() {
-        const element = this.el.nativeElement;
-        const html = element.innerHTML
-            .replace(/<br\s*\/?>/gi, '')
-            .replace(/&nbsp;/g, '')
-            .trim();
-        const text = element.textContent?.replace(/\u00a0/g, '').trim() ?? '';
-        this.empty.set(html.length === 0 && text.length === 0);
-    }
-    shortcutCommand(event) {
-        const modifier = event.metaKey || event.ctrlKey;
-        if (!modifier) {
-            return null;
-        }
-        const key = event.key.toLowerCase();
-        // The digit rows are matched on the PHYSICAL key. `event.key` carries the
-        // shifted or option-modified character -- `&`/`*` on a US layout, `/`/`(`
-        // on DE/FR, `¡`/`™` for Option+1/2 on macOS -- so it is never the digit.
-        const code = event.code;
-        if (event.altKey && !event.shiftKey) {
-            if (code === 'Digit0') {
-                return 'paragraph';
-            }
-            if (code === 'Digit1') {
-                return 'heading-1';
-            }
-            if (code === 'Digit2') {
-                return 'heading-2';
-            }
-            if (code === 'Digit3') {
-                return 'heading-3';
-            }
-        }
-        if (event.shiftKey && !event.altKey) {
-            if (code === 'Digit7') {
-                return 'ordered';
-            }
-            if (code === 'Digit8') {
-                return 'bullet';
-            }
-            switch (key) {
-                case 'x':
-                    return 'strike';
-                case 'b':
-                    return 'blockquote';
-                case 'h':
-                    return 'highlight';
-                case 'l':
-                    return 'align-left';
-                case 'e':
-                    return 'align-center';
-                case 'r':
-                    return 'align-right';
-                case 'z':
-                    return 'redo';
-            }
-        }
-        if (event.altKey || event.shiftKey) {
-            return null;
-        }
-        switch (key) {
-            case 'b':
-                return 'bold';
-            case 'i':
-                return 'italic';
-            case 'u':
-                return 'underline';
-            case 'e':
-                return 'code';
-            case 'z':
-                return 'undo';
-            default:
-                return null;
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: EditorContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: EditorContentComponent, isStandalone: true, selector: "EditorContent", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalidInput: { classPropertyName: "invalidInput", publicName: "aria-invalid", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "input": "handleInput()", "blur": "handleBlur()", "keydown": "handleKeydown($event)" }, properties: { "class": "classes()", "attr.data-slot": "\"editor-content\"", "attr.contenteditable": "disabled() ? \"false\" : \"true\"", "attr.role": "\"textbox\"", "attr.aria-multiline": "\"true\"", "attr.aria-label": "ariaLabel()", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.aria-invalid": "invalid() ? \"true\" : null", "attr.data-disabled": "disabled() ? \"true\" : null", "attr.data-empty": "empty() ? \"true\" : null", "attr.data-placeholder": "placeholder()", "attr.tabindex": "disabled() ? null : \"0\"" } }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => EditorContentComponent),
-                multi: true,
-            },
-        ], ngImport: i0, template: `<ng-content />`, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: EditorContentComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'EditorContent',
-                    providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => EditorContentComponent),
-                            multi: true,
-                        },
-                    ],
-                    host: {
-                        '[class]': 'classes()',
-                        '[attr.data-slot]': '"editor-content"',
-                        '[attr.contenteditable]': 'disabled() ? "false" : "true"',
-                        '[attr.role]': '"textbox"',
-                        '[attr.aria-multiline]': '"true"',
-                        '[attr.aria-label]': 'ariaLabel()',
-                        '[attr.aria-disabled]': 'disabled() ? "true" : null',
-                        '[attr.aria-invalid]': 'invalid() ? "true" : null',
-                        '[attr.data-disabled]': 'disabled() ? "true" : null',
-                        '[attr.data-empty]': 'empty() ? "true" : null',
-                        '[attr.data-placeholder]': 'placeholder()',
-                        '[attr.tabindex]': 'disabled() ? null : "0"',
-                        '(input)': 'handleInput()',
-                        '(blur)': 'handleBlur()',
-                        '(keydown)': 'handleKeydown($event)',
-                    },
-                    template: `<ng-content />`,
-                }]
-        }], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalidInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-invalid", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { EDITOR_HTML_SANITIZER, EditorButtonComponent, EditorComponent, EditorContentComponent, EditorSeparatorComponent, EditorSpacerComponent, EditorToolbarComponent };
+var EditorComponent = class EditorComponent {
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	invalid = input(false, {
+		...ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	commandSelected = output();
+	content = null;
+	classes = computed(() => cn(EDITOR_BASE, this.class()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	shellClasses = computed(() => cn(EDITOR_SHELL_BASE), ...ngDevMode ? [{ debugName: "shellClasses" }] : /* istanbul ignore next */ []);
+	execute(command, source = "api", originalEvent) {
+		if (this.disabled()) return;
+		this.content?.execute(command);
+		this.commandSelected.emit({
+			command,
+			source,
+			originalEvent
+		});
+	}
+	registerContent(content) {
+		this.content = content;
+	}
+	unregisterContent(content) {
+		if (this.content === content) this.content = null;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: EditorComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: EditorComponent,
+		isStandalone: true,
+		selector: "Editor",
+		inputs: {
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			invalid: {
+				classPropertyName: "invalid",
+				publicName: "invalid",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			class: {
+				classPropertyName: "class",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { commandSelected: "commandSelected" },
+		host: { properties: {
+			"class": "classes()",
+			"attr.data-slot": "\"editor\"",
+			"attr.data-disabled": "disabled() ? \"true\" : null",
+			"attr.aria-disabled": "disabled() ? \"true\" : null",
+			"attr.aria-invalid": "invalid() ? \"true\" : null",
+			"attr.inert": "disabled() ? \"\" : null"
+		} },
+		ngImport: i0,
+		template: "<div\n  data-slot=\"editor-shell\"\n  [class]=\"shellClasses()\"\n  [attr.data-disabled]=\"disabled() ? 'true' : null\"\n  [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n>\n  <ng-content select=\"EditorToolbar\" />\n  <ng-content select=\"EditorContent\" />\n</div>\n"
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: EditorComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "Editor",
+			host: {
+				"[class]": "classes()",
+				"[attr.data-slot]": "\"editor\"",
+				"[attr.data-disabled]": "disabled() ? \"true\" : null",
+				"[attr.aria-disabled]": "disabled() ? \"true\" : null",
+				"[attr.aria-invalid]": "invalid() ? \"true\" : null",
+				"[attr.inert]": "disabled() ? \"\" : null"
+			},
+			template: "<div\n  data-slot=\"editor-shell\"\n  [class]=\"shellClasses()\"\n  [attr.data-disabled]=\"disabled() ? 'true' : null\"\n  [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n>\n  <ng-content select=\"EditorToolbar\" />\n  <ng-content select=\"EditorContent\" />\n</div>\n"
+		}]
+	}],
+	propDecorators: {
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		invalid: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "invalid",
+				required: false
+			}]
+		}],
+		class: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}],
+		commandSelected: [{
+			type: i0.Output,
+			args: ["commandSelected"]
+		}]
+	}
+});
+var EditorToolbarComponent = class EditorToolbarComponent {
+	editor = inject(EditorComponent, { optional: true });
+	items = input(DEFAULT_EDITOR_TOOLBAR, ...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
+	disabledInput = input(false, {
+		...ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {},
+		alias: "disabled",
+		transform: booleanAttribute
+	});
+	ariaLabel = input("Formatting", {
+		...ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {},
+		alias: "aria-label"
+	});
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	buttonClasses = EDITOR_TOOL_BUTTON_BASE;
+	selectClasses = EDITOR_SELECT_BASE;
+	disabled = computed(() => this.disabledInput() || this.editor?.disabled() === true, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
+	parts = computed(() => parseToolbarItems(this.items()), ...ngDevMode ? [{ debugName: "parts" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn(EDITOR_TOOLBAR_BASE, this.class()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	execute(command, event) {
+		this.editor?.execute(command, "toolbar", event);
+	}
+	handleSelect(event) {
+		const select = event.target;
+		this.editor?.execute(select.value, "toolbar", event);
+		select.selectedIndex = 0;
+	}
+	preserveSelection = preserveEditorSelection;
+	trackPart(part, index) {
+		if (part.type === "button") return `${part.command}-${index}`;
+		return part.track;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: EditorToolbarComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: EditorToolbarComponent,
+		isStandalone: true,
+		selector: "EditorToolbar",
+		inputs: {
+			items: {
+				classPropertyName: "items",
+				publicName: "items",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabledInput: {
+				classPropertyName: "disabledInput",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "aria-label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			class: {
+				classPropertyName: "class",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: { "role": "toolbar" },
+			properties: {
+				"class": "classes()",
+				"attr.data-slot": "\"editor-toolbar\"",
+				"attr.aria-label": "ariaLabel()",
+				"attr.data-disabled": "disabled() ? \"true\" : null"
+			}
+		},
+		ngImport: i0,
+		template: "@for (part of parts(); track trackPart(part, $index)) {\n  @switch (part.type) {\n    @case ('heading') {\n      <select\n        [class]=\"selectClasses\"\n        [disabled]=\"disabled()\"\n        aria-label=\"Text style\"\n        (change)=\"handleSelect($event)\"\n      >\n        <option value=\"paragraph\">Text</option>\n        <option value=\"heading-1\">Heading 1</option>\n        <option value=\"heading-2\">Heading 2</option>\n        <option value=\"heading-3\">Heading 3</option>\n      </select>\n    }\n    @case ('align') {\n      <select\n        [class]=\"selectClasses\"\n        [disabled]=\"disabled()\"\n        aria-label=\"Text alignment\"\n        (change)=\"handleSelect($event)\"\n      >\n        <option value=\"align-left\">Left</option>\n        <option value=\"align-center\">Center</option>\n        <option value=\"align-right\">Right</option>\n      </select>\n    }\n    @case ('separator') {\n      <span\n        data-slot=\"editor-separator\"\n        class=\"mx-1 h-6 w-px shrink-0 bg-border\"\n        role=\"separator\"\n        aria-orientation=\"vertical\"\n      ></span>\n    }\n    @case ('spacer') {\n      <span data-slot=\"editor-spacer\" class=\"min-w-2 flex-1\"></span>\n    }\n    @case ('button') {\n      <button\n        type=\"button\"\n        data-slot=\"editor-button\"\n        [class]=\"buttonClasses\"\n        [disabled]=\"disabled()\"\n        [attr.aria-label]=\"part.ariaLabel\"\n        [attr.title]=\"part.ariaLabel\"\n        (mousedown)=\"preserveSelection($event)\"\n        (click)=\"execute(part.command, $event)\"\n      >\n        @if (part.command === 'undo') {\n          <svg\n            aria-hidden=\"true\"\n            class=\"size-4\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.75\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <path d=\"M9 14 4 9l5-5\" />\n            <path d=\"M4 9h10a6 6 0 0 1 0 12h-2\" />\n          </svg>\n        } @else if (part.command === 'redo') {\n          <svg\n            aria-hidden=\"true\"\n            class=\"size-4\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.75\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <path d=\"m15 14 5-5-5-5\" />\n            <path d=\"M20 9H10a6 6 0 0 0 0 12h2\" />\n          </svg>\n        } @else {\n          <span aria-hidden=\"true\">{{ part.label }}</span>\n        }\n      </button>\n    }\n  }\n}\n<ng-content />\n"
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: EditorToolbarComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "EditorToolbar",
+			host: {
+				"[class]": "classes()",
+				"[attr.data-slot]": "\"editor-toolbar\"",
+				role: "toolbar",
+				"[attr.aria-label]": "ariaLabel()",
+				"[attr.data-disabled]": "disabled() ? \"true\" : null"
+			},
+			template: "@for (part of parts(); track trackPart(part, $index)) {\n  @switch (part.type) {\n    @case ('heading') {\n      <select\n        [class]=\"selectClasses\"\n        [disabled]=\"disabled()\"\n        aria-label=\"Text style\"\n        (change)=\"handleSelect($event)\"\n      >\n        <option value=\"paragraph\">Text</option>\n        <option value=\"heading-1\">Heading 1</option>\n        <option value=\"heading-2\">Heading 2</option>\n        <option value=\"heading-3\">Heading 3</option>\n      </select>\n    }\n    @case ('align') {\n      <select\n        [class]=\"selectClasses\"\n        [disabled]=\"disabled()\"\n        aria-label=\"Text alignment\"\n        (change)=\"handleSelect($event)\"\n      >\n        <option value=\"align-left\">Left</option>\n        <option value=\"align-center\">Center</option>\n        <option value=\"align-right\">Right</option>\n      </select>\n    }\n    @case ('separator') {\n      <span\n        data-slot=\"editor-separator\"\n        class=\"mx-1 h-6 w-px shrink-0 bg-border\"\n        role=\"separator\"\n        aria-orientation=\"vertical\"\n      ></span>\n    }\n    @case ('spacer') {\n      <span data-slot=\"editor-spacer\" class=\"min-w-2 flex-1\"></span>\n    }\n    @case ('button') {\n      <button\n        type=\"button\"\n        data-slot=\"editor-button\"\n        [class]=\"buttonClasses\"\n        [disabled]=\"disabled()\"\n        [attr.aria-label]=\"part.ariaLabel\"\n        [attr.title]=\"part.ariaLabel\"\n        (mousedown)=\"preserveSelection($event)\"\n        (click)=\"execute(part.command, $event)\"\n      >\n        @if (part.command === 'undo') {\n          <svg\n            aria-hidden=\"true\"\n            class=\"size-4\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.75\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <path d=\"M9 14 4 9l5-5\" />\n            <path d=\"M4 9h10a6 6 0 0 1 0 12h-2\" />\n          </svg>\n        } @else if (part.command === 'redo') {\n          <svg\n            aria-hidden=\"true\"\n            class=\"size-4\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.75\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <path d=\"m15 14 5-5-5-5\" />\n            <path d=\"M20 9H10a6 6 0 0 0 0 12h2\" />\n          </svg>\n        } @else {\n          <span aria-hidden=\"true\">{{ part.label }}</span>\n        }\n      </button>\n    }\n  }\n}\n<ng-content />\n"
+		}]
+	}],
+	propDecorators: {
+		items: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "items",
+				required: false
+			}]
+		}],
+		disabledInput: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "aria-label",
+				required: false
+			}]
+		}],
+		class: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}]
+	}
+});
+var EditorButtonComponent = class EditorButtonComponent {
+	editor = inject(EditorComponent, { optional: true });
+	command = input(null, ...ngDevMode ? [{ debugName: "command" }] : /* istanbul ignore next */ []);
+	pressed = input(null, ...ngDevMode ? [{ debugName: "pressed" }] : /* istanbul ignore next */ []);
+	disabledInput = input(false, {
+		...ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {},
+		alias: "disabled",
+		transform: booleanAttribute
+	});
+	tooltip = input("", ...ngDevMode ? [{ debugName: "tooltip" }] : /* istanbul ignore next */ []);
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	disabled = computed(() => this.disabledInput() || this.editor?.disabled() === true, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn(EDITOR_TOOL_BUTTON_BASE, this.class()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	handleClick(event) {
+		const command = this.command();
+		if (!command) return;
+		this.editor?.execute(command, "toolbar", event);
+	}
+	preserveSelection = preserveEditorSelection;
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: EditorButtonComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: EditorButtonComponent,
+		isStandalone: true,
+		selector: "button[EditorButton]",
+		inputs: {
+			command: {
+				classPropertyName: "command",
+				publicName: "command",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			pressed: {
+				classPropertyName: "pressed",
+				publicName: "pressed",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabledInput: {
+				classPropertyName: "disabledInput",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			tooltip: {
+				classPropertyName: "tooltip",
+				publicName: "tooltip",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			class: {
+				classPropertyName: "class",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: { "type": "button" },
+			listeners: {
+				"mousedown": "preserveSelection($event)",
+				"click": "handleClick($event)"
+			},
+			properties: {
+				"class": "classes()",
+				"attr.data-slot": "\"editor-button\"",
+				"attr.title": "tooltip() || null",
+				"attr.aria-pressed": "pressed() === null ? null : pressed()",
+				"disabled": "disabled() || null"
+			}
+		},
+		ngImport: i0,
+		template: `<ng-content />`,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: EditorButtonComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "button[EditorButton]",
+			host: {
+				"[class]": "classes()",
+				"[attr.data-slot]": "\"editor-button\"",
+				"[attr.title]": "tooltip() || null",
+				"[attr.aria-pressed]": "pressed() === null ? null : pressed()",
+				"[disabled]": "disabled() || null",
+				type: "button",
+				"(mousedown)": "preserveSelection($event)",
+				"(click)": "handleClick($event)"
+			},
+			template: `<ng-content />`
+		}]
+	}],
+	propDecorators: {
+		command: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "command",
+				required: false
+			}]
+		}],
+		pressed: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "pressed",
+				required: false
+			}]
+		}],
+		disabledInput: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		tooltip: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tooltip",
+				required: false
+			}]
+		}],
+		class: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}]
+	}
+});
+var EditorSeparatorComponent = class EditorSeparatorComponent {
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn("mx-1 h-6 w-px shrink-0 bg-border", this.class()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: EditorSeparatorComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: EditorSeparatorComponent,
+		isStandalone: true,
+		selector: "EditorSeparator",
+		inputs: { class: {
+			classPropertyName: "class",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: {
+				"role": "separator",
+				"aria-orientation": "vertical"
+			},
+			properties: {
+				"class": "classes()",
+				"attr.data-slot": "\"editor-separator\""
+			}
+		},
+		ngImport: i0,
+		template: "",
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: EditorSeparatorComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "EditorSeparator",
+			host: {
+				"[class]": "classes()",
+				"[attr.data-slot]": "\"editor-separator\"",
+				role: "separator",
+				"aria-orientation": "vertical"
+			},
+			template: ""
+		}]
+	}],
+	propDecorators: { class: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+var EditorSpacerComponent = class EditorSpacerComponent {
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn("min-w-2 flex-1", this.class()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: EditorSpacerComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: EditorSpacerComponent,
+		isStandalone: true,
+		selector: "EditorSpacer",
+		inputs: { class: {
+			classPropertyName: "class",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: { properties: {
+			"class": "classes()",
+			"attr.data-slot": "\"editor-spacer\""
+		} },
+		ngImport: i0,
+		template: "",
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: EditorSpacerComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "EditorSpacer",
+			host: {
+				"[class]": "classes()",
+				"[attr.data-slot]": "\"editor-spacer\""
+			},
+			template: ""
+		}]
+	}],
+	propDecorators: { class: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+var EditorContentComponent = class EditorContentComponent {
+	el = inject(ElementRef);
+	editor = inject(EditorComponent, { optional: true });
+	document = inject(DOCUMENT);
+	sanitizeHtml = inject(EDITOR_HTML_SANITIZER);
+	placeholder = input("Write something...", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
+	ariaLabel = input("Rich text editor", {
+		...ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {},
+		alias: "aria-label"
+	});
+	disabledInput = input(false, {
+		...ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {},
+		alias: "disabled",
+		transform: booleanAttribute
+	});
+	invalidInput = input(false, {
+		...ngDevMode ? { debugName: "invalidInput" } : /* istanbul ignore next */ {},
+		alias: "aria-invalid",
+		transform: booleanAttribute
+	});
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	disabledState = signal(false, ...ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []);
+	empty = signal(true, ...ngDevMode ? [{ debugName: "empty" }] : /* istanbul ignore next */ []);
+	disabled = computed(() => this.disabledInput() || this.disabledState() || this.editor?.disabled() === true, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
+	invalid = computed(() => this.invalidInput() || this.editor?.invalid() === true, ...ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn(EDITOR_CONTENT_BASE, this.class()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	lastKnownValue = "";
+	onChange = () => {};
+	onTouched = () => {};
+	ngAfterViewInit() {
+		this.editor?.registerContent(this);
+		this.setSanitizedValue(this.el.nativeElement.innerHTML);
+		queueMicrotask(() => this.syncEmptyState());
+	}
+	ngOnDestroy() {
+		this.editor?.unregisterContent(this);
+	}
+	writeValue(value) {
+		this.setSanitizedValue(value ?? "");
+		queueMicrotask(() => this.syncEmptyState());
+	}
+	registerOnChange(fn) {
+		this.onChange = fn;
+	}
+	registerOnTouched(fn) {
+		this.onTouched = fn;
+	}
+	setDisabledState(isDisabled) {
+		this.disabledState.set(isDisabled);
+	}
+	execute(command) {
+		if (this.disabled()) return;
+		this.el.nativeElement.focus();
+		const [name, value] = EDITOR_EXEC_COMMANDS[command];
+		this.exec(name, command === "highlight" ? this.highlightColor() : value);
+		this.handleInput();
+	}
+	focus() {
+		this.el.nativeElement.focus();
+	}
+	handleInput() {
+		const element = this.el.nativeElement;
+		const unsafeHtml = element.innerHTML;
+		const safeHtml = this.sanitizeHtml(unsafeHtml);
+		if (safeHtml !== unsafeHtml) element.innerHTML = safeHtml;
+		const html = element.innerHTML;
+		this.syncEmptyState();
+		if (html === this.lastKnownValue) return;
+		this.lastKnownValue = html;
+		this.onChange(html);
+	}
+	setSanitizedValue(value) {
+		this.el.nativeElement.innerHTML = this.sanitizeHtml(value);
+		this.lastKnownValue = this.el.nativeElement.innerHTML;
+	}
+	handleBlur() {
+		this.onTouched();
+	}
+	handleKeydown(event) {
+		if (this.disabled()) return;
+		const command = this.shortcutCommand(event);
+		if (!command) return;
+		event.preventDefault();
+		if (this.editor) {
+			this.editor.execute(command, "shortcut", event);
+			return;
+		}
+		this.execute(command);
+	}
+	exec(command, value) {
+		if (typeof this.document.execCommand !== "function") return;
+		this.document.execCommand(command, false, value);
+	}
+	highlightColor() {
+		const highlight = this.document.defaultView?.getComputedStyle(this.document.documentElement).getPropertyValue("--editor-highlight").trim();
+		return highlight ? `hsl(${highlight})` : "hsl(48 96% 80%)";
+	}
+	syncEmptyState() {
+		const element = this.el.nativeElement;
+		const html = element.innerHTML.replace(/<br\s*\/?>/gi, "").replace(/&nbsp;/g, "").trim();
+		const text = element.textContent?.replace(/\u00a0/g, "").trim() ?? "";
+		this.empty.set(html.length === 0 && text.length === 0);
+	}
+	shortcutCommand(event) {
+		if (!(event.metaKey || event.ctrlKey)) return null;
+		const key = event.key.toLowerCase();
+		const code = event.code;
+		if (event.altKey && !event.shiftKey) {
+			if (code === "Digit0") return "paragraph";
+			if (code === "Digit1") return "heading-1";
+			if (code === "Digit2") return "heading-2";
+			if (code === "Digit3") return "heading-3";
+		}
+		if (event.shiftKey && !event.altKey) {
+			if (code === "Digit7") return "ordered";
+			if (code === "Digit8") return "bullet";
+			switch (key) {
+				case "x": return "strike";
+				case "b": return "blockquote";
+				case "h": return "highlight";
+				case "l": return "align-left";
+				case "e": return "align-center";
+				case "r": return "align-right";
+				case "z": return "redo";
+			}
+		}
+		if (event.altKey || event.shiftKey) return null;
+		switch (key) {
+			case "b": return "bold";
+			case "i": return "italic";
+			case "u": return "underline";
+			case "e": return "code";
+			case "z": return "undo";
+			default: return null;
+		}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: EditorContentComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: EditorContentComponent,
+		isStandalone: true,
+		selector: "EditorContent",
+		inputs: {
+			placeholder: {
+				classPropertyName: "placeholder",
+				publicName: "placeholder",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "aria-label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabledInput: {
+				classPropertyName: "disabledInput",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			invalidInput: {
+				classPropertyName: "invalidInput",
+				publicName: "aria-invalid",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			class: {
+				classPropertyName: "class",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			listeners: {
+				"input": "handleInput()",
+				"blur": "handleBlur()",
+				"keydown": "handleKeydown($event)"
+			},
+			properties: {
+				"class": "classes()",
+				"attr.data-slot": "\"editor-content\"",
+				"attr.contenteditable": "disabled() ? \"false\" : \"true\"",
+				"attr.role": "\"textbox\"",
+				"attr.aria-multiline": "\"true\"",
+				"attr.aria-label": "ariaLabel()",
+				"attr.aria-disabled": "disabled() ? \"true\" : null",
+				"attr.aria-invalid": "invalid() ? \"true\" : null",
+				"attr.data-disabled": "disabled() ? \"true\" : null",
+				"attr.data-empty": "empty() ? \"true\" : null",
+				"attr.data-placeholder": "placeholder()",
+				"attr.tabindex": "disabled() ? null : \"0\""
+			}
+		},
+		providers: [{
+			provide: NG_VALUE_ACCESSOR,
+			useExisting: forwardRef(() => EditorContentComponent),
+			multi: true
+		}],
+		ngImport: i0,
+		template: `<ng-content />`,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: EditorContentComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "EditorContent",
+			providers: [{
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: forwardRef(() => EditorContentComponent),
+				multi: true
+			}],
+			host: {
+				"[class]": "classes()",
+				"[attr.data-slot]": "\"editor-content\"",
+				"[attr.contenteditable]": "disabled() ? \"false\" : \"true\"",
+				"[attr.role]": "\"textbox\"",
+				"[attr.aria-multiline]": "\"true\"",
+				"[attr.aria-label]": "ariaLabel()",
+				"[attr.aria-disabled]": "disabled() ? \"true\" : null",
+				"[attr.aria-invalid]": "invalid() ? \"true\" : null",
+				"[attr.data-disabled]": "disabled() ? \"true\" : null",
+				"[attr.data-empty]": "empty() ? \"true\" : null",
+				"[attr.data-placeholder]": "placeholder()",
+				"[attr.tabindex]": "disabled() ? null : \"0\"",
+				"(input)": "handleInput()",
+				"(blur)": "handleBlur()",
+				"(keydown)": "handleKeydown($event)"
+			},
+			template: `<ng-content />`
+		}]
+	}],
+	propDecorators: {
+		placeholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placeholder",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "aria-label",
+				required: false
+			}]
+		}],
+		disabledInput: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		invalidInput: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "aria-invalid",
+				required: false
+			}]
+		}],
+		class: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}]
+	}
+});
+export { EDITOR_HTML_SANITIZER, EditorButtonComponent, EditorComponent, EditorContentComponent, EditorSeparatorComponent, EditorSpacerComponent, EditorToolbarComponent };