@nanahoshi/mona-ui 0.1.0

package/fesm2022/nanahoshi-mona-ui-editor.mjs

@@ -0,0 +1,1400 @@
+import * as i0 from '@angular/core';
+import { signal, Injectable, computed, inject, Component, DOCUMENT, output, ChangeDetectionStrategy, viewChild, input, effect, untracked } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { FormsModule, FormGroup, FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
+import { ImmutableSet, any, List } from '@mirei/ts-collections';
+import { Extension, Editor } from '@tiptap/core';
+import { Color } from '@tiptap/extension-color';
+import { FontFamily } from '@tiptap/extension-font-family';
+import { Highlight } from '@tiptap/extension-highlight';
+import { Link } from '@tiptap/extension-link';
+import { Subscript } from '@tiptap/extension-subscript';
+import { Superscript } from '@tiptap/extension-superscript';
+import { Table } from '@tiptap/extension-table';
+import { TableCell } from '@tiptap/extension-table-cell';
+import { TableHeader } from '@tiptap/extension-table-header';
+import { TableRow } from '@tiptap/extension-table-row';
+import { TaskItem } from '@tiptap/extension-task-item';
+import { TaskList } from '@tiptap/extension-task-list';
+import { TextAlign } from '@tiptap/extension-text-align';
+import { TextStyle } from '@tiptap/extension-text-style';
+import { Underline } from '@tiptap/extension-underline';
+import { StarterKit } from '@tiptap/starter-kit';
+import { Subject } from 'rxjs';
+import { Image } from '@tiptap/extension-image';
+import { TextSelection, AllSelection } from '@tiptap/pm/state';
+import { ButtonDirective } from '@nanahoshi/mona-ui/button';
+import { ButtonGroupComponent } from '@nanahoshi/mona-ui/button-group';
+import { ColorPickerComponent, ColorPickerValueTemplateDirective } from '@nanahoshi/mona-ui/color-picker';
+import { DropdownListComponent } from '@nanahoshi/mona-ui/dropdown-list';
+import { DropdownItemTemplateDirective } from '@nanahoshi/mona-ui/dropdowns';
+import { WindowComponent } from '@nanahoshi/mona-ui/window';
+import { NumericTextBoxComponent } from '@nanahoshi/mona-ui/numeric-text-box';
+import { TextBoxComponent } from '@nanahoshi/mona-ui/text-box';
+import { DialogService } from '@nanahoshi/mona-ui/dialog';
+import { PopoverComponent } from '@nanahoshi/mona-ui/popover';
+
+const ExtendedImage = Image.extend({
+    name: "extendedImage",
+    addAttributes() {
+        return {
+            width: {
+                default: null,
+                parseHTML: (element) => element.getAttribute("width"),
+                renderHTML: (attributes) => attributes["width"] ? { width: attributes["width"] } : {}
+            },
+            height: {
+                default: null,
+                parseHTML: (element) => element.getAttribute("height"),
+                renderHTML: (attributes) => attributes["height"] ? { height: attributes["height"] } : {}
+            }
+        };
+    }
+});
+
+const FontSize = Extension.create({
+    name: "fontSize",
+    addOptions() {
+        return {
+            types: ["textStyle"],
+            getStyle: (fontSize) => {
+                return `font-size: ${fontSize}`;
+            }
+        };
+    },
+    addGlobalAttributes() {
+        return [
+            {
+                types: this.options.types,
+                attributes: {
+                    fontSize: {
+                        default: null,
+                        parseHTML: element => element.style.fontSize.replace(/['"]+/g, ""),
+                        renderHTML: attributes => {
+                            if (!attributes["fontSize"]) {
+                                return {};
+                            }
+                            return {
+                                style: this.options.getStyle(attributes["fontSize"])
+                            };
+                        }
+                    }
+                }
+            }
+        ];
+    },
+    addCommands() {
+        return {
+            setFontSize: fontSize => ({ chain }) => {
+                return chain().setMark("textStyle", { fontSize }).run();
+            },
+            unsetFontSize: () => ({ chain }) => {
+                return chain().setMark("textStyle", { fontSize: null }).removeEmptyTextStyle().run();
+            }
+        };
+    }
+});
+
+/**
+ * Indent extension for Tiptap v3
+ * Port of the well-known v2 example, updated for @tiptap/core@3 and @tiptap/pm.
+ */
+const clamp = (val, min, max) => {
+    if (val < min)
+        return min;
+    if (val > max)
+        return max;
+    return val;
+};
+var IndentProps;
+(function (IndentProps) {
+    IndentProps[IndentProps["min"] = 0] = "min";
+    IndentProps[IndentProps["max"] = 210] = "max";
+    IndentProps[IndentProps["more"] = 30] = "more";
+    IndentProps[IndentProps["less"] = -30] = "less";
+})(IndentProps || (IndentProps = {}));
+/**
+ * Helpers for list detection (kept simple here).
+ * If you want to support more list types, extend these.
+ */
+const isBulletListNode = (name) => name === "bulletList" || name === "bullet_list";
+const isOrderedListNode = (name) => name === "orderedList" || name === "ordered_list";
+const isTaskListNode = (name) => name === "taskList" || name === "task_list";
+const isListNodeName = (name) => isBulletListNode(name) || isOrderedListNode(name) || isTaskListNode(name);
+/**
+ * Update the `indent` attribute of the node at `pos` by `delta` pixels.
+ */
+const setNodeIndentMarkup = (tr, pos, delta) => {
+    const doc = tr.doc;
+    if (!doc)
+        return tr;
+    const node = doc.nodeAt(pos);
+    if (!node)
+        return tr;
+    const minIndent = IndentProps.min;
+    const maxIndent = IndentProps.max;
+    const currentIndent = node.attrs.indent ?? 0;
+    const indent = clamp(currentIndent + delta, minIndent, maxIndent);
+    if (indent === currentIndent)
+        return tr;
+    const nodeAttrs = {
+        ...node.attrs,
+        indent
+    };
+    return tr.setNodeMarkup(pos, node.type, nodeAttrs, node.marks);
+};
+/**
+ * Apply indent delta to all matching blocks in the current selection.
+ */
+const updateIndentLevel = (tr, delta, options) => {
+    const { doc, selection } = tr;
+    if (!doc || !selection)
+        return tr;
+    if (!(selection instanceof TextSelection || selection instanceof AllSelection)) {
+        return tr;
+    }
+    const { from, to } = selection;
+    doc.nodesBetween(from, to, (node, pos) => {
+        const nodeName = node.type.name;
+        // Only apply to configured types (typically paragraph + heading)
+        if (options.types.includes(nodeName)) {
+            tr = setNodeIndentMarkup(tr, pos, delta);
+            return false;
+        }
+        // Don’t traverse into lists (you might want to handle list indentation differently)
+        if (isListNodeName(nodeName)) {
+            return false;
+        }
+        return true;
+    });
+    return tr;
+};
+const Indent = Extension.create({
+    name: "indent",
+    /**
+     * Tiptap v3 uses `addOptions` instead of `defaultOptions`.
+     */
+    addOptions() {
+        return {
+            types: ["paragraph", "heading"],
+            indentLevels: [0, 30, 60, 90, 120, 150, 180, 210],
+            defaultIndentLevel: 0
+        };
+    },
+    /**
+     * Attach a global `indent` attribute to the configured node types.
+     * Stored as a pixel value and rendered as `margin-left`.
+     */
+    addGlobalAttributes() {
+        return [
+            {
+                types: this.options.types,
+                attributes: {
+                    indent: {
+                        default: this.options.defaultIndentLevel,
+                        renderHTML: attributes => {
+                            const indent = attributes["indent"] ?? this.options.defaultIndentLevel;
+                            if (!indent || indent === 0) {
+                                return {};
+                            }
+                            return {
+                                style: `margin-left: ${indent}px;`
+                            };
+                        },
+                        parseHTML: element => {
+                            const raw = element.style.marginLeft;
+                            const parsed = raw ? parseInt(raw, 10) : NaN;
+                            return Number.isNaN(parsed) ? this.options.defaultIndentLevel : parsed;
+                        }
+                    }
+                }
+            }
+        ];
+    },
+    addCommands() {
+        return {
+            indent: () => ({ tr, state, dispatch }) => {
+                const { selection } = state;
+                // Keep current selection intact
+                tr = tr.setSelection(selection);
+                tr = updateIndentLevel(tr, IndentProps.more, this.options);
+                if (tr.docChanged && dispatch) {
+                    dispatch(tr);
+                    return true;
+                }
+                return false;
+            },
+            outdent: () => ({ tr, state, dispatch }) => {
+                const { selection } = state;
+                tr = tr.setSelection(selection);
+                tr = updateIndentLevel(tr, IndentProps.less, this.options);
+                if (tr.docChanged && dispatch) {
+                    dispatch(tr);
+                    return true;
+                }
+                return false;
+            }
+        };
+    },
+    /**
+     * Default keyboard shortcuts:
+     *  - Tab       → indent()
+     *  - Shift-Tab → outdent()
+     */
+    addKeyboardShortcuts() {
+        const indentCommand = () => this.editor.commands.indent();
+        const outdentCommand = () => this.editor.commands.outdent();
+        return {
+            Tab: indentCommand,
+            "Shift-Tab": outdentCommand
+        };
+    }
+});
+
+class EditorService {
+    constructor() {
+        this.#defaultSettings = {
+            alignment: true,
+            blockquote: true,
+            bold: true,
+            code: true,
+            fontColor: true,
+            fontFamily: true,
+            fontHighlight: true,
+            fontList: [],
+            fontSize: true,
+            headings: true,
+            history: true,
+            horizontalRule: true,
+            image: true,
+            indent: true,
+            italic: true,
+            link: true,
+            list: true,
+            strikethrough: true,
+            subscript: true,
+            superscript: true,
+            table: true,
+            taskList: true,
+            underline: true
+        };
+        this.#state = signal({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#state" }] : /* istanbul ignore next */ []));
+        this.blur$ = new Subject();
+        this.create$ = new Subject();
+        this.focus$ = new Subject();
+        this.fontSizes = signal(ImmutableSet.create([
+            "10px",
+            "12px",
+            "14px",
+            "16px",
+            "18px",
+            "20px",
+            "24px",
+            "32px",
+            "36px",
+            "48px",
+            "60px",
+            "72px"
+        ]), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fontSizes" }] : /* istanbul ignore next */ []));
+        this.fonts = signal(ImmutableSet.create([
+            "Arial",
+            "Comic Sans MS",
+            "Courier New",
+            "Georgia",
+            "Impact",
+            "Lucida Console",
+            "Lucida Sans Unicode",
+            "Palatino Linotype",
+            "Tahoma",
+            "Times New Roman",
+            "Trebuchet MS",
+            "Verdana"
+        ]), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fonts" }] : /* istanbul ignore next */ []));
+        this.state = this.#state.asReadonly();
+        this.selectionUpdate$ = new Subject();
+        this.settings = signal({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
+        this.update$ = new Subject();
+    }
+    #defaultSettings;
+    #state;
+    #editor;
+    destroy() {
+        this.#editor.destroy();
+    }
+    setupEditor(element, settings) {
+        if (this.#editor) {
+            this.#editor.destroy();
+        }
+        const editorSettings = { ...this.#defaultSettings, ...settings };
+        if (editorSettings.fontList && any(editorSettings.fontList)) {
+            this.fonts.set(ImmutableSet.create(editorSettings.fontList));
+        }
+        this.#editor = new Editor({
+            element,
+            extensions: this.getExtensionsFromSettings(editorSettings),
+            content: ``,
+            onBlur: () => this.blur$.next(),
+            onCreate: ({ editor }) => {
+                this.#state.set(editor.state);
+                this.settings.set(editorSettings);
+                this.create$.next();
+            },
+            onFocus: () => this.focus$.next(),
+            onSelectionUpdate: () => this.selectionUpdate$.next(),
+            onTransaction: tx => this.#state.set(tx.editor.state),
+            onUpdate: () => this.update$.next()
+        });
+    }
+    get editor() {
+        return this.#editor;
+    }
+    getExtensionsFromSettings(settings) {
+        const extensions = new List();
+        extensions.add(TextStyle);
+        const customizedStarterKit = this.getCustomizedStarterKitExtension(settings);
+        extensions.add(customizedStarterKit);
+        if (settings.alignment) {
+            extensions.add(TextAlign.configure({
+                types: ["paragraph", "heading"]
+            }));
+        }
+        if (settings.fontColor) {
+            extensions.add(Color);
+        }
+        if (settings.fontFamily) {
+            extensions.add(FontFamily);
+        }
+        if (settings.fontHighlight) {
+            extensions.add(Highlight.configure({ multicolor: true }));
+        }
+        if (settings.fontSize) {
+            extensions.add(FontSize);
+        }
+        if (settings.image) {
+            extensions.add(ExtendedImage);
+        }
+        if (settings.indent) {
+            extensions.add(Indent);
+        }
+        if (settings.link) {
+            extensions.add(Link.configure({
+                openOnClick: "whenNotEditable",
+                autolink: true
+            }));
+        }
+        if (settings.subscript) {
+            extensions.add(Subscript);
+        }
+        if (settings.superscript) {
+            extensions.add(Superscript);
+        }
+        if (settings.underline) {
+            extensions.add(Underline);
+        }
+        if (settings.table) {
+            extensions.add(Table.configure({
+                resizable: true
+            }));
+            extensions.add(TableHeader);
+            extensions.add(TableRow);
+            extensions.add(TableCell);
+        }
+        if (settings.taskList) {
+            extensions.add(TaskList);
+            extensions.add(TaskItem.configure({
+                nested: true
+            }));
+        }
+        return extensions.toArray();
+    }
+    getCustomizedStarterKitExtension(settings) {
+        let starterKit = StarterKit;
+        if (!settings.bold) {
+            starterKit = starterKit.configure({ bold: false });
+        }
+        if (!settings.italic) {
+            starterKit = starterKit.configure({ italic: false });
+        }
+        if (!settings.strikethrough) {
+            starterKit = starterKit.configure({ strike: false });
+        }
+        if (!settings.history) {
+            starterKit = starterKit.configure({ undoRedo: false });
+        }
+        if (!settings.blockquote) {
+            starterKit = starterKit.configure({ blockquote: false });
+        }
+        if (!settings.list) {
+            starterKit = starterKit.configure({ bulletList: false, orderedList: false, listItem: false });
+        }
+        if (!settings.headings) {
+            starterKit = starterKit.configure({ heading: false });
+        }
+        if (!settings.horizontalRule) {
+            starterKit = starterKit.configure({ horizontalRule: false });
+        }
+        if (!settings.code) {
+            starterKit = starterKit.configure({ code: false });
+        }
+        return starterKit;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditorService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditorService, decorators: [{
+            type: Injectable
+        }] });
+
+class EditorBasicTextStylesComponent {
+    constructor() {
+        this.anyToolVisible = computed(() => {
+            return (this.boldVisible() ||
+                this.italicVisible() ||
+                this.underlineVisible() ||
+                this.strikeThroughVisible() ||
+                this.subscriptVisible() ||
+                this.superscriptVisible());
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "anyToolVisible" }] : /* istanbul ignore next */ []));
+        this.boldSelected = computed(() => {
+            this.editorService.state();
+            return this.editorService.editor.isActive("bold");
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "boldSelected" }] : /* istanbul ignore next */ []));
+        this.boldVisible = computed(() => {
+            return this.editorService.settings().bold;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "boldVisible" }] : /* istanbul ignore next */ []));
+        this.editorService = inject(EditorService);
+        this.italicSelected = computed(() => {
+            this.editorService.state();
+            return this.editorService.editor.isActive("italic");
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "italicSelected" }] : /* istanbul ignore next */ []));
+        this.italicVisible = computed(() => {
+            return this.editorService.settings().italic;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "italicVisible" }] : /* istanbul ignore next */ []));
+        this.strikeThroughSelected = computed(() => {
+            this.editorService.state();
+            return this.editorService.editor.isActive("strike");
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "strikeThroughSelected" }] : /* istanbul ignore next */ []));
+        this.strikeThroughVisible = computed(() => {
+            return this.editorService.settings().strikethrough;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "strikeThroughVisible" }] : /* istanbul ignore next */ []));
+        this.subscriptSelected = computed(() => {
+            this.editorService.state();
+            return this.editorService.editor.isActive("subscript");
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "subscriptSelected" }] : /* istanbul ignore next */ []));
+        this.subscriptVisible = computed(() => {
+            return this.editorService.settings().subscript;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "subscriptVisible" }] : /* istanbul ignore next */ []));
+        this.superscriptSelected = computed(() => {
+            this.editorService.state();
+            return this.editorService.editor.isActive("superscript");
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "superscriptSelected" }] : /* istanbul ignore next */ []));
+        this.superscriptVisible = computed(() => {
+            return this.editorService.settings().superscript;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "superscriptVisible" }] : /* istanbul ignore next */ []));
+        this.underlineSelected = computed(() => {
+            this.editorService.state();
+            return this.editorService.editor.isActive("underline");
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "underlineSelected" }] : /* istanbul ignore next */ []));
+        this.underlineVisible = computed(() => {
+            return this.editorService.settings().underline;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "underlineVisible" }] : /* istanbul ignore next */ []));
+    }
+    onBoldToggle() {
+        if (this.boldSelected()) {
+            this.editorService.editor.chain().focus().unsetBold().run();
+        }
+        else {
+            this.editorService.editor.chain().focus().setBold().run();
+        }
+    }
+    onItalicToggle() {
+        if (this.italicSelected()) {
+            this.editorService.editor.chain().focus().unsetItalic().run();
+        }
+        else {
+            this.editorService.editor.chain().focus().setItalic().run();
+        }
+    }
+    onStrikeThroughToggle() {
+        if (this.strikeThroughSelected()) {
+            this.editorService.editor.chain().focus().unsetStrike().run();
+        }
+        else {
+            this.editorService.editor.chain().focus().setStrike().run();
+        }
+    }
+    onSubscriptToggle() {
+        if (this.subscriptSelected()) {
+            this.editorService.editor.chain().focus().unsetSubscript().run();
+        }
+        else {
+            this.editorService.editor.chain().focus().setSubscript().run();
+        }
+    }
+    onSuperscriptToggle() {
+        if (this.superscriptSelected()) {
+            this.editorService.editor.chain().focus().unsetSuperscript().run();
+        }
+        else {
+            this.editorService.editor.chain().focus().setSuperscript().run();
+        }
+    }
+    onUnderlineToggle() {
+        if (this.underlineSelected()) {
+            this.editorService.editor.chain().focus().unsetUnderline().run();
+        }
+        else {
+            this.editorService.editor.chain().focus().setUnderline().run();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditorBasicTextStylesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: EditorBasicTextStylesComponent, isStandalone: true, selector: "mona-editor-basic-text-styles", ngImport: i0, template: "@if (anyToolVisible()) {\n    <mona-button-group selection=\"multiple\">\n        @if (boldVisible()) {\n            <button monaButton [selected]=\"boldSelected()\" (click)=\"onBoldToggle()\" title=\"Bold\">\n                <i class=\"ri-bold\"></i>\n            </button>\n        }\n        @if (italicVisible()) {\n            <button monaButton [selected]=\"italicSelected()\" (click)=\"onItalicToggle()\" title=\"Italic\">\n                <i class=\"ri-italic\"></i>\n            </button>\n        }\n        @if (underlineVisible()) {\n            <button monaButton [selected]=\"underlineSelected()\" (click)=\"onUnderlineToggle()\" title=\"Underline\">\n                <i class=\"ri-underline\"></i>\n            </button>\n        }\n        @if (strikeThroughVisible()) {\n            <button\n                monaButton\n                [selected]=\"strikeThroughSelected()\"\n                (click)=\"onStrikeThroughToggle()\"\n                title=\"Strikethrough\">\n                <i class=\"ri-strikethrough\"></i>\n            </button>\n        }\n        @if (subscriptVisible()) {\n            <button monaButton [selected]=\"subscriptSelected()\" (click)=\"onSubscriptToggle()\" title=\"Subscript\">\n                <i class=\"ri-subscript\"></i>\n            </button>\n        }\n        @if (superscriptVisible()) {\n            <button monaButton [selected]=\"superscriptSelected()\" (click)=\"onSuperscriptToggle()\" title=\"Superscript\">\n                <i class=\"ri-superscript\"></i>\n            </button>\n        }\n    </mona-button-group>\n}\n", styles: [""], dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "component", type: ButtonGroupComponent, selector: "mona-button-group", inputs: ["allowEmpty", "aria-label", "disabled", "look", "rounded", "selection", "size", "class"], outputs: ["buttonClick", "disabledChange", "selectionChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditorBasicTextStylesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-editor-basic-text-styles", imports: [ButtonDirective, ButtonGroupComponent], template: "@if (anyToolVisible()) {\n    <mona-button-group selection=\"multiple\">\n        @if (boldVisible()) {\n            <button monaButton [selected]=\"boldSelected()\" (click)=\"onBoldToggle()\" title=\"Bold\">\n                <i class=\"ri-bold\"></i>\n            </button>\n        }\n        @if (italicVisible()) {\n            <button monaButton [selected]=\"italicSelected()\" (click)=\"onItalicToggle()\" title=\"Italic\">\n                <i class=\"ri-italic\"></i>\n            </button>\n        }\n        @if (underlineVisible()) {\n            <button monaButton [selected]=\"underlineSelected()\" (click)=\"onUnderlineToggle()\" title=\"Underline\">\n                <i class=\"ri-underline\"></i>\n            </button>\n        }\n        @if (strikeThroughVisible()) {\n            <button\n                monaButton\n                [selected]=\"strikeThroughSelected()\"\n                (click)=\"onStrikeThroughToggle()\"\n                title=\"Strikethrough\">\n                <i class=\"ri-strikethrough\"></i>\n            </button>\n        }\n        @if (subscriptVisible()) {\n            <button monaButton [selected]=\"subscriptSelected()\" (click)=\"onSubscriptToggle()\" title=\"Subscript\">\n                <i class=\"ri-subscript\"></i>\n            </button>\n        }\n        @if (superscriptVisible()) {\n            <button monaButton [selected]=\"superscriptSelected()\" (click)=\"onSuperscriptToggle()\" title=\"Superscript\">\n                <i class=\"ri-superscript\"></i>\n            </button>\n        }\n    </mona-button-group>\n}\n" }]
+        }] });
+
+class EditorBlockquoteComponent {
+    constructor() {
+        this.#editorService = inject(EditorService);
+        this.blockquoteSelected = computed(() => {
+            this.#editorService.state();
+            return this.#editorService.editor.isActive("blockquote");
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "blockquoteSelected" }] : /* istanbul ignore next */ []));
+    }
+    #editorService;
+    onBlockquoteToggle() {
+        if (this.blockquoteSelected()) {
+            this.#editorService.editor.chain().focus().unsetBlockquote().run();
+        }
+        else {
+            this.#editorService.editor.chain().focus().setBlockquote().run();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditorBlockquoteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: EditorBlockquoteComponent, isStandalone: true, selector: "mona-editor-blockquote", ngImport: i0, template: "<button monaButton [selected]=\"blockquoteSelected()\" (click)=\"onBlockquoteToggle()\" title=\"Quotation\">\n    <i class=\"ri-double-quotes-r\"></i>\n</button>\n", styles: [""], dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditorBlockquoteComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-editor-blockquote", imports: [ButtonDirective], template: "<button monaButton [selected]=\"blockquoteSelected()\" (click)=\"onBlockquoteToggle()\" title=\"Quotation\">\n    <i class=\"ri-double-quotes-r\"></i>\n</button>\n" }]
+        }] });
+
+class EditorCodeBlockComponent {
+    constructor() {
+        this.#editorService = inject(EditorService);
+        this.codeBlockSelected = computed(() => {
+            this.#editorService.state();
+            return this.#editorService.editor.isActive("codeBlock");
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "codeBlockSelected" }] : /* istanbul ignore next */ []));
+    }
+    #editorService;
+    onCodeBlockClick() {
+        this.#editorService.editor.chain().toggleCodeBlock().run();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditorCodeBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: EditorCodeBlockComponent, isStandalone: true, selector: "mona-editor-code-block", ngImport: i0, template: "<button monaButton [selected]=\"codeBlockSelected()\" (click)=\"onCodeBlockClick()\">\n    <i class=\"ri-code-s-slash-line\"></i>\n</button>\n", styles: [""], dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditorCodeBlockComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-editor-code-block", imports: [ButtonDirective], template: "<button monaButton [selected]=\"codeBlockSelected()\" (click)=\"onCodeBlockClick()\">\n    <i class=\"ri-code-s-slash-line\"></i>\n</button>\n" }]
+        }] });
+
+const htmlColorCode = (name, document) => {
+    const canvas = document.createElement("canvas");
+    const context = canvas.getContext("2d");
+    if (!context) {
+        return "";
+    }
+    context.fillStyle = name;
+    return context.fillStyle;
+};
+
+class EditorFontColorComponent {
+    constructor() {
+        this.#document = inject(DOCUMENT);
+        this.#editorService = inject(EditorService);
+        this.#lastColor = "";
+        this.selectedColor = computed(() => {
+            this.#editorService.state();
+            const attributes = this.#editorService.editor.getAttributes("textStyle");
+            const color = attributes["color"] || this.#lastColor;
+            return htmlColorCode(color, this.#document);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedColor" }] : /* istanbul ignore next */ []));
+    }
+    #document;
+    #editorService;
+    #lastColor;
+    onColorChange(color) {
+        if (color) {
+            this.#editorService.editor.chain().focus().setColor(color).run();
+            this.#lastColor = color;
+        }
+        else {
+            this.#editorService.editor.chain().focus().unsetColor().run();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditorFontColorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: EditorFontColorComponent, isStandalone: true, selector: "mona-editor-font-color", ngImport: i0, template: "<mona-color-picker view=\"gradient\" [value]=\"selectedColor()\" (valueChange)=\"onColorChange($event)\" title=\"Color\">\n    <ng-template monaColorPickerValueTemplate let-color>\n        <div class=\"mona-editor-font-color-value\">\n            <i class=\"ri-font-family\"></i>\n            <span class=\"mona-editor-font-color-preview\" [style.background-color]=\"color\"></span>\n        </div>\n    </ng-template>\n</mona-color-picker>\n", styles: [".mona-editor-font-color-value{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.125rem;padding-left:.375rem;font-size:14px}.mona-editor-font-color-preview{width:100%;display:flex;height:2px}\n"], dependencies: [{ kind: "component", type: ColorPickerComponent, selector: "mona-color-picker", inputs: ["closeOnSelect", "columns", "disabled", "invalid", "opacity", "palette", "readonly", "rounded", "showClearButton", "size", "view", "required", "touched", "value"], outputs: ["touch", "valueChange"] }, { kind: "directive", type: ColorPickerValueTemplateDirective, selector: "ng-template[monaColorPickerValueTemplate]" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditorFontColorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-editor-font-color", imports: [ColorPickerComponent, ColorPickerValueTemplateDirective], template: "<mona-color-picker view=\"gradient\" [value]=\"selectedColor()\" (valueChange)=\"onColorChange($event)\" title=\"Color\">\n    <ng-template monaColorPickerValueTemplate let-color>\n        <div class=\"mona-editor-font-color-value\">\n            <i class=\"ri-font-family\"></i>\n            <span class=\"mona-editor-font-color-preview\" [style.background-color]=\"color\"></span>\n        </div>\n    </ng-template>\n</mona-color-picker>\n", styles: [".mona-editor-font-color-value{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.125rem;padding-left:.375rem;font-size:14px}.mona-editor-font-color-preview{width:100%;display:flex;height:2px}\n"] }]
+        }] });
+
+class EditorFontFamilyComponent {
+    constructor() {
+        this.editorService = inject(EditorService);
+        this.selectedFontFamily = computed(() => {
+            this.editorService.state();
+            return (this.editorService
+                .fonts()
+                .firstOrDefault(ff => this.editorService.editor.isActive("textStyle", { fontFamily: ff })) ?? null);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedFontFamily" }] : /* istanbul ignore next */ []));
+    }
+    ngOnInit() {
+        const defaultFontFamily = this.editorService.fonts().first();
+        this.editorService.editor.chain().focus().setFontFamily(defaultFontFamily).run();
+    }
+    onFontFamilyChange(fontFamily) {
+        this.editorService.editor.chain().focus().setFontFamily(fontFamily).run();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditorFontFamilyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: EditorFontFamilyComponent, isStandalone: true, selector: "mona-editor-font-family", ngImport: i0, template: "<mona-dropdown-list\r\n    [data]=\"editorService.fonts()\"\r\n    [ngModel]=\"selectedFontFamily()\"\r\n    (ngModelChange)=\"onFontFamilyChange($event)\"\r\n    title=\"Select font family\">\r\n    <ng-template monaDropDownListItemTemplate let-font>\r\n        <span [style.font-family]=\"font\">{{ font }}</span>\r\n    </ng-template>\r\n</mona-dropdown-list>\r\n", styles: ["mona-dropdown-list{width:12em}\n"], dependencies: [{ kind: "component", type: DropdownListComponent, selector: "mona-dropdown-list", inputs: ["aria-label", "aria-labelledby", "data", "disabled", "itemDisabled", "invalid", "loading", "placeholder", "popupClass", "popupHeight", "popupWidth", "readonly", "required", "rounded", "showClearButton", "size", "textField", "touched", "class", "valueField", "value"], outputs: ["close", "closed", "disabledChange", "open", "opened", "touch", "valueChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: DropdownItemTemplateDirective, selector: "        ng-template[monaDropDownItemTemplate],        ng-template[monaAutoCompleteItemTemplate],        ng-template[monaDropDownListItemTemplate],        ng-template[monaComboBoxItemTemplate],        ng-template[monaMultiSelectItemTemplate]    " }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditorFontFamilyComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-editor-font-family", imports: [DropdownListComponent, FormsModule, DropdownItemTemplateDirective], template: "<mona-dropdown-list\r\n    [data]=\"editorService.fonts()\"\r\n    [ngModel]=\"selectedFontFamily()\"\r\n    (ngModelChange)=\"onFontFamilyChange($event)\"\r\n    title=\"Select font family\">\r\n    <ng-template monaDropDownListItemTemplate let-font>\r\n        <span [style.font-family]=\"font\">{{ font }}</span>\r\n    </ng-template>\r\n</mona-dropdown-list>\r\n", styles: ["mona-dropdown-list{width:12em}\n"] }]
+        }] });
+
+class EditorFontHighlightComponent {
+    constructor() {
+        this.#editorService = inject(EditorService);
+        this.#lastColor = "";
+        this.selectedColor = computed(() => {
+            const state = this.#editorService.state();
+            if (state.selection.empty) {
+                const marks = state.storedMarks || state.selection.$from.marks();
+                const highlightMark = marks.find(mark => mark.type.name === "highlight");
+                return highlightMark ? highlightMark.attrs["color"] : this.#lastColor;
+            }
+            else {
+                const node = state.doc.nodeAt(state.selection.from);
+                if (node) {
+                    const highlightMark = node.marks.find(mark => mark.type.name === "highlight");
+                    return highlightMark ? highlightMark.attrs["color"] : this.#lastColor;
+                }
+                return "";
+            }
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedColor" }] : /* istanbul ignore next */ []));
+    }
+    #editorService;
+    #lastColor;
+    onColorChange(color) {
+        if (color) {
+            this.#editorService.editor.chain().focus().setHighlight({ color }).run();
+            this.#lastColor = color;
+        }
+        else {
+            this.#editorService.editor.chain().focus().unsetHighlight().run();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditorFontHighlightComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: EditorFontHighlightComponent, isStandalone: true, selector: "mona-editor-font-highlight", ngImport: i0, template: "<mona-color-picker\n    view=\"gradient\"\n    [value]=\"selectedColor()\"\n    (valueChange)=\"onColorChange($event)\"\n    title=\"Background color\">\n    <ng-template monaColorPickerValueTemplate let-color>\n        <div class=\"mona-editor-font-highlight-value\">\n            <i class=\"ri-drop-fill\"></i>\n            <span class=\"mona-editor-font-highlight-preview\" [style.background-color]=\"color\"></span>\n        </div>\n    </ng-template>\n</mona-color-picker>\n", styles: [".mona-editor-font-highlight-value{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.125rem;padding-left:.375rem;font-size:14px}.mona-editor-font-highlight-preview{width:100%;display:flex;height:2px}\n"], dependencies: [{ kind: "component", type: ColorPickerComponent, selector: "mona-color-picker", inputs: ["closeOnSelect", "columns", "disabled", "invalid", "opacity", "palette", "readonly", "rounded", "showClearButton", "size", "view", "required", "touched", "value"], outputs: ["touch", "valueChange"] }, { kind: "directive", type: ColorPickerValueTemplateDirective, selector: "ng-template[monaColorPickerValueTemplate]" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditorFontHighlightComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-editor-font-highlight", imports: [ColorPickerComponent, ColorPickerValueTemplateDirective], template: "<mona-color-picker\n    view=\"gradient\"\n    [value]=\"selectedColor()\"\n    (valueChange)=\"onColorChange($event)\"\n    title=\"Background color\">\n    <ng-template monaColorPickerValueTemplate let-color>\n        <div class=\"mona-editor-font-highlight-value\">\n            <i class=\"ri-drop-fill\"></i>\n            <span class=\"mona-editor-font-highlight-preview\" [style.background-color]=\"color\"></span>\n        </div>\n    </ng-template>\n</mona-color-picker>\n", styles: [".mona-editor-font-highlight-value{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.125rem;padding-left:.375rem;font-size:14px}.mona-editor-font-highlight-preview{width:100%;display:flex;height:2px}\n"] }]
+        }] });
+
+class EditorFontSizeComponent {
+    constructor() {
+        this.editorService = inject(EditorService);
+        this.selectedFontSize = computed(() => {
+            this.editorService.state();
+            return (this.editorService
+                .fontSizes()
+                .firstOrDefault(fs => this.editorService.editor.isActive("textStyle", { fontSize: fs })) ?? null);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedFontSize" }] : /* istanbul ignore next */ []));
+    }
+    ngOnInit() {
+        // this.#editorService.editor.chain().focus().setFontSize(this.selectedFontSize().value).run();
+    }
+    onFontSizeChange(fontSize) {
+        this.editorService.editor.chain().focus().setFontSize(fontSize).run();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditorFontSizeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: EditorFontSizeComponent, isStandalone: true, selector: "mona-editor-font-size", ngImport: i0, template: "<mona-dropdown-list\r\n    [data]=\"editorService.fontSizes()\"\r\n    placeholder=\"Font Size\"\r\n    [ngModel]=\"selectedFontSize()\"\r\n    (ngModelChange)=\"onFontSizeChange($event)\"\r\n    title=\"Select font size\"></mona-dropdown-list>\r\n", styles: ["mona-dropdown-list{width:8em}\n"], dependencies: [{ kind: "component", type: DropdownListComponent, selector: "mona-dropdown-list", inputs: ["aria-label", "aria-labelledby", "data", "disabled", "itemDisabled", "invalid", "loading", "placeholder", "popupClass", "popupHeight", "popupWidth", "readonly", "required", "rounded", "showClearButton", "size", "textField", "touched", "class", "valueField", "value"], outputs: ["close", "closed", "disabledChange", "open", "opened", "touch", "valueChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditorFontSizeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-editor-font-size", imports: [DropdownListComponent, FormsModule], template: "<mona-dropdown-list\r\n    [data]=\"editorService.fontSizes()\"\r\n    placeholder=\"Font Size\"\r\n    [ngModel]=\"selectedFontSize()\"\r\n    (ngModelChange)=\"onFontSizeChange($event)\"\r\n    title=\"Select font size\"></mona-dropdown-list>\r\n", styles: ["mona-dropdown-list{width:8em}\n"] }]
+        }] });
+
+var HeadingType;
+(function (HeadingType) {
+    HeadingType[HeadingType["Heading1"] = 1] = "Heading1";
+    HeadingType[HeadingType["Heading2"] = 2] = "Heading2";
+    HeadingType[HeadingType["Heading3"] = 3] = "Heading3";
+    HeadingType[HeadingType["Heading4"] = 4] = "Heading4";
+    HeadingType[HeadingType["Heading5"] = 5] = "Heading5";
+    HeadingType[HeadingType["Heading6"] = 6] = "Heading6";
+    HeadingType[HeadingType["Paragraph"] = 7] = "Paragraph";
+})(HeadingType || (HeadingType = {}));
+
+class EditorHeadingsComponent {
+    constructor() {
+        this.#editorService = inject(EditorService);
+        this.HeadingType = HeadingType;
+        this.headingsDropdownListData = [
+            { text: "Paragraph", value: HeadingType.Paragraph },
+            { text: "Heading 1", value: HeadingType.Heading1 },
+            { text: "Heading 2", value: HeadingType.Heading2 },
+            { text: "Heading 3", value: HeadingType.Heading3 },
+            { text: "Heading 4", value: HeadingType.Heading4 },
+            { text: "Heading 5", value: HeadingType.Heading5 },
+            { text: "Heading 6", value: HeadingType.Heading6 }
+        ];
+        this.selectedHeadingsDropdownItem = computed(() => {
+            const state = this.#editorService.state();
+            const node = state.selection.$from.node();
+            if (node && node.type.name === "heading") {
+                return this.headingsDropdownListData.find(item => item.value === node.attrs["level"]);
+            }
+            return this.headingsDropdownListData.find(item => item.value === HeadingType.Paragraph);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedHeadingsDropdownItem" }] : /* istanbul ignore next */ []));
+    }
+    #editorService;
+    onFormatChange(headingItem) {
+        if (headingItem.value === HeadingType.Paragraph) {
+            this.#editorService.editor.chain().focus().setParagraph().run();
+        }
+        else {
+            this.#editorService.editor.chain().focus().setHeading({ level: headingItem.value }).run();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditorHeadingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: EditorHeadingsComponent, isStandalone: true, selector: "mona-editor-headings", ngImport: i0, template: "<mona-dropdown-list\r\n    [data]=\"headingsDropdownListData\"\r\n    [ngModel]=\"selectedHeadingsDropdownItem()\"\r\n    (ngModelChange)=\"onFormatChange($event)\"\r\n    textField=\"text\"\r\n    valueField=\"value\"\r\n    title=\"Format\">\r\n    <ng-template monaDropDownListItemTemplate let-dataItem>\r\n        @switch (dataItem.value) {\r\n            @case (HeadingType.Heading1) {\r\n                <h1>{{ dataItem.text }}</h1>\r\n            }\r\n            @case (HeadingType.Heading2) {\r\n                <h2>{{ dataItem.text }}</h2>\r\n            }\r\n            @case (HeadingType.Heading3) {\r\n                <h3>{{ dataItem.text }}</h3>\r\n            }\r\n            @case (HeadingType.Heading4) {\r\n                <h4>{{ dataItem.text }}</h4>\r\n            }\r\n            @case (HeadingType.Heading5) {\r\n                <h5>{{ dataItem.text }}</h5>\r\n            }\r\n            @case (HeadingType.Heading6) {\r\n                <h6>{{ dataItem.text }}</h6>\r\n            }\r\n            @case (HeadingType.Paragraph) {\r\n                <p>{{ dataItem.text }}</p>\r\n            }\r\n            @default {\r\n                <p>{{ dataItem.text }}</p>\r\n            }\r\n        }\r\n    </ng-template>\r\n</mona-dropdown-list>\r\n", styles: ["mona-dropdown-list{width:12em}\n"], dependencies: [{ kind: "component", type: DropdownListComponent, selector: "mona-dropdown-list", inputs: ["aria-label", "aria-labelledby", "data", "disabled", "itemDisabled", "invalid", "loading", "placeholder", "popupClass", "popupHeight", "popupWidth", "readonly", "required", "rounded", "showClearButton", "size", "textField", "touched", "class", "valueField", "value"], outputs: ["close", "closed", "disabledChange", "open", "opened", "touch", "valueChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: DropdownItemTemplateDirective, selector: "        ng-template[monaDropDownItemTemplate],        ng-template[monaAutoCompleteItemTemplate],        ng-template[monaDropDownListItemTemplate],        ng-template[monaComboBoxItemTemplate],        ng-template[monaMultiSelectItemTemplate]    " }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditorHeadingsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-editor-headings", imports: [DropdownListComponent, FormsModule, DropdownItemTemplateDirective], template: "<mona-dropdown-list\r\n    [data]=\"headingsDropdownListData\"\r\n    [ngModel]=\"selectedHeadingsDropdownItem()\"\r\n    (ngModelChange)=\"onFormatChange($event)\"\r\n    textField=\"text\"\r\n    valueField=\"value\"\r\n    title=\"Format\">\r\n    <ng-template monaDropDownListItemTemplate let-dataItem>\r\n        @switch (dataItem.value) {\r\n            @case (HeadingType.Heading1) {\r\n                <h1>{{ dataItem.text }}</h1>\r\n            }\r\n            @case (HeadingType.Heading2) {\r\n                <h2>{{ dataItem.text }}</h2>\r\n            }\r\n            @case (HeadingType.Heading3) {\r\n                <h3>{{ dataItem.text }}</h3>\r\n            }\r\n            @case (HeadingType.Heading4) {\r\n                <h4>{{ dataItem.text }}</h4>\r\n            }\r\n            @case (HeadingType.Heading5) {\r\n                <h5>{{ dataItem.text }}</h5>\r\n            }\r\n            @case (HeadingType.Heading6) {\r\n                <h6>{{ dataItem.text }}</h6>\r\n            }\r\n            @case (HeadingType.Paragraph) {\r\n                <p>{{ dataItem.text }}</p>\r\n            }\r\n            @default {\r\n                <p>{{ dataItem.text }}</p>\r\n            }\r\n        }\r\n    </ng-template>\r\n</mona-dropdown-list>\r\n", styles: ["mona-dropdown-list{width:12em}\n"] }]
+        }] });
+
+class EditorHistoryComponent {
+    constructor() {
+        this.#editorService = inject(EditorService);
+        this.redoDisabled = computed(() => {
+            this.#editorService.state();
+            return !this.#editorService.editor.can().redo();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "redoDisabled" }] : /* istanbul ignore next */ []));
+        this.undoDisabled = computed(() => {
+            this.#editorService.state();
+            return !this.#editorService.editor.can().undo();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "undoDisabled" }] : /* istanbul ignore next */ []));
+    }
+    #editorService;
+    onRedoClick() {
+        this.#editorService.editor.chain().focus().redo().run();
+    }
+    onUndoClick() {
+        this.#editorService.editor.chain().focus().undo().run();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditorHistoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: EditorHistoryComponent, isStandalone: true, selector: "mona-editor-history", ngImport: i0, template: "<mona-button-group selection=\"single\">\n    <button monaButton [disabled]=\"undoDisabled()\" (click)=\"onUndoClick()\" title=\"Undo\">\n        <i class=\"ri-arrow-go-back-line\"></i>\n    </button>\n    <button monaButton [disabled]=\"redoDisabled()\" (click)=\"onRedoClick()\" title=\"Redo\">\n        <i class=\"ri-arrow-go-forward-line\"></i>\n    </button>\n</mona-button-group>\n", styles: [""], dependencies: [{ kind: "component", type: ButtonGroupComponent, selector: "mona-button-group", inputs: ["allowEmpty", "aria-label", "disabled", "look", "rounded", "selection", "size", "class"], outputs: ["buttonClick", "disabledChange", "selectionChange"] }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditorHistoryComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-editor-history", imports: [ButtonGroupComponent, ButtonDirective], template: "<mona-button-group selection=\"single\">\n    <button monaButton [disabled]=\"undoDisabled()\" (click)=\"onUndoClick()\" title=\"Undo\">\n        <i class=\"ri-arrow-go-back-line\"></i>\n    </button>\n    <button monaButton [disabled]=\"redoDisabled()\" (click)=\"onRedoClick()\" title=\"Redo\">\n        <i class=\"ri-arrow-go-forward-line\"></i>\n    </button>\n</mona-button-group>\n" }]
+        }] });
+
+class EditorHorizontalRuleComponent {
+    #editorService = inject(EditorService);
+    onHorizontalRuleClick() {
+        this.#editorService.editor.chain().focus().setHorizontalRule().run();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditorHorizontalRuleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: EditorHorizontalRuleComponent, isStandalone: true, selector: "mona-editor-horizontal-rule", ngImport: i0, template: "<button monaButton (click)=\"onHorizontalRuleClick()\" title=\"Add horizontal line\">\n    <i class=\"ri-subtract-line\"></i>\n</button>\n", styles: [""], dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditorHorizontalRuleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-editor-horizontal-rule", imports: [ButtonDirective], template: "<button monaButton (click)=\"onHorizontalRuleClick()\" title=\"Add horizontal line\">\n    <i class=\"ri-subtract-line\"></i>\n</button>\n" }]
+        }] });
+
+class EditorImageInserterComponent {
+    constructor() {
+        this.imageForm = new FormGroup({
+            altText: new FormControl(""),
+            height: new FormControl(null),
+            link: new FormControl("", { nonNullable: true, validators: [Validators.required] }),
+            width: new FormControl(null)
+        });
+        this.cancel = output();
+        this.insert = output();
+    }
+    onCancel() {
+        this.cancel.emit();
+    }
+    onImageInsert() {
+        this.insert.emit({
+            altText: this.imageForm.controls.altText.value ?? "",
+            height: this.imageForm.controls.height.value,
+            link: this.imageForm.controls.link.value,
+            width: this.imageForm.controls.width.value
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditorImageInserterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: EditorImageInserterComponent, isStandalone: true, selector: "mona-editor-image-inserter", outputs: { cancel: "cancel", insert: "insert" }, ngImport: i0, template: "<form [formGroup]=\"imageForm\">\r\n    <div class=\"editor-image-inserter-row\">\r\n        <div class=\"editor-image-inserter-row-label\">Image URL</div>\r\n        <mona-text-box formControlName=\"link\"></mona-text-box>\r\n    </div>\r\n    <div class=\"editor-image-inserter-row\">\r\n        <div class=\"editor-image-inserter-row-label\">Alt Text</div>\r\n        <mona-text-box formControlName=\"altText\"></mona-text-box>\r\n    </div>\r\n    <div class=\"editor-image-inserter-row\">\r\n        <div class=\"editor-image-inserter-row-label\">Width (px)</div>\r\n        <mona-numeric-text-box formControlName=\"width\"></mona-numeric-text-box>\r\n    </div>\r\n    <div class=\"editor-image-inserter-row\">\r\n        <div class=\"editor-image-inserter-row-label\">Height (px)</div>\r\n        <mona-numeric-text-box formControlName=\"height\"></mona-numeric-text-box>\r\n    </div>\r\n    <div class=\"editor-image-inserter-actions\">\r\n        <button monaButton [disabled]=\"!imageForm.valid\" (click)=\"onImageInsert()\">Insert</button>\r\n        <button monaButton [look]=\"'secondary'\" (click)=\"onCancel()\">Cancel</button>\r\n    </div>\r\n</form>\r\n", styles: ["form{display:flex;flex-direction:column;gap:.375rem;padding-top:.5rem}.editor-image-inserter-row{display:flex;flex-direction:column;justify-content:center;padding:0 .5rem}.editor-image-inserter-row-label{margin-bottom:.125rem;padding-left:.125rem;font-size:.875em;font-weight:600}.editor-image-inserter-actions{display:flex;justify-content:flex-end;gap:.25rem;padding:.25rem .5rem;background:var(--mona-background-dark);border-top:1px solid var(--mona-border-color)}\n"], dependencies: [{ kind: "component", type: TextBoxComponent, selector: "mona-text-box", inputs: ["clearButton", "disabled", "inputAttributes", "inputClass", "inputStyle", "invalid", "placeholder", "readonly", "required", "rounded", "size", "touched", "type", "class", "value"], outputs: ["inputBlur", "inputFocus", "touch", "valueChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "component", type: NumericTextBoxComponent, selector: "mona-numeric-text-box", inputs: ["aria-label", "decimals", "disabled", "formatter", "maxValue", "minValue", "nullable", "readonly", "required", "invalid", "rounded", "size", "spinners", "step", "tabindex", "touched", "class", "value"], outputs: ["inputBlur", "inputFocus", "inputFocusOut", "touch", "valueChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditorImageInserterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-editor-image-inserter", imports: [TextBoxComponent, ReactiveFormsModule, ButtonDirective, NumericTextBoxComponent], template: "<form [formGroup]=\"imageForm\">\r\n    <div class=\"editor-image-inserter-row\">\r\n        <div class=\"editor-image-inserter-row-label\">Image URL</div>\r\n        <mona-text-box formControlName=\"link\"></mona-text-box>\r\n    </div>\r\n    <div class=\"editor-image-inserter-row\">\r\n        <div class=\"editor-image-inserter-row-label\">Alt Text</div>\r\n        <mona-text-box formControlName=\"altText\"></mona-text-box>\r\n    </div>\r\n    <div class=\"editor-image-inserter-row\">\r\n        <div class=\"editor-image-inserter-row-label\">Width (px)</div>\r\n        <mona-numeric-text-box formControlName=\"width\"></mona-numeric-text-box>\r\n    </div>\r\n    <div class=\"editor-image-inserter-row\">\r\n        <div class=\"editor-image-inserter-row-label\">Height (px)</div>\r\n        <mona-numeric-text-box formControlName=\"height\"></mona-numeric-text-box>\r\n    </div>\r\n    <div class=\"editor-image-inserter-actions\">\r\n        <button monaButton [disabled]=\"!imageForm.valid\" (click)=\"onImageInsert()\">Insert</button>\r\n        <button monaButton [look]=\"'secondary'\" (click)=\"onCancel()\">Cancel</button>\r\n    </div>\r\n</form>\r\n", styles: ["form{display:flex;flex-direction:column;gap:.375rem;padding-top:.5rem}.editor-image-inserter-row{display:flex;flex-direction:column;justify-content:center;padding:0 .5rem}.editor-image-inserter-row-label{margin-bottom:.125rem;padding-left:.125rem;font-size:.875em;font-weight:600}.editor-image-inserter-actions{display:flex;justify-content:flex-end;gap:.25rem;padding:.25rem .5rem;background:var(--mona-background-dark);border-top:1px solid var(--mona-border-color)}\n"] }]
+        }], propDecorators: { cancel: [{ type: i0.Output, args: ["cancel"] }], insert: [{ type: i0.Output, args: ["insert"] }] } });
+
+class EditorImageComponent {
+    constructor() {
+        this.#editorService = inject(EditorService);
+        this.inserterVisible = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "inserterVisible" }] : /* istanbul ignore next */ []));
+    }
+    #editorService;
+    onDisplayInserterClick() {
+        this.inserterVisible.set(true);
+    }
+    onImageInsert(event) {
+        this.insertImage(event);
+        this.closeInserter();
+    }
+    onInsertCancel() {
+        this.closeInserter();
+    }
+    onInserterClose() {
+        this.closeInserter();
+    }
+    closeInserter() {
+        this.inserterVisible.set(false);
+    }
+    insertImage(event) {
+        this.#editorService.editor
+            .chain()
+            .setImage({
+            src: event.link,
+            alt: event.altText,
+            title: event.altText
+        })
+            .updateAttributes("extendedImage", {
+            width: event.width,
+            height: event.height
+        })
+            .run();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditorImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: EditorImageComponent, isStandalone: true, selector: "mona-editor-image", ngImport: i0, template: "<button monaButton (click)=\"onDisplayInserterClick()\" title=\"Insert image\">\n    <i class=\"ri-image-add-line\"></i>\n</button>\n\n@if (inserterVisible()) {\n    <mona-window [width]=\"400\" [height]=\"316\" [modal]=\"false\" [title]=\"'Insert Image'\" (close)=\"onInserterClose()\">\n        <mona-editor-image-inserter\n            (insert)=\"onImageInsert($event)\"\n            (cancel)=\"onInsertCancel()\"></mona-editor-image-inserter>\n    </mona-window>\n}\n", styles: [""], dependencies: [{ kind: "component", type: WindowComponent, selector: "mona-window", inputs: ["closable", "closeOnEscape", "draggable", "focusedElement", "height", "left", "look", "maxHeight", "maxWidth", "maximizable", "minHeight", "minWidth", "minimizable", "modal", "resizable", "rounded", "title", "top", "width"], outputs: ["close", "closed", "dragEnd", "dragStart", "heightChange", "leftChange", "topChange", "widthChange"] }, { kind: "component", type: EditorImageInserterComponent, selector: "mona-editor-image-inserter", outputs: ["cancel", "insert"] }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditorImageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-editor-image", imports: [WindowComponent, EditorImageInserterComponent, ButtonDirective], template: "<button monaButton (click)=\"onDisplayInserterClick()\" title=\"Insert image\">\n    <i class=\"ri-image-add-line\"></i>\n</button>\n\n@if (inserterVisible()) {\n    <mona-window [width]=\"400\" [height]=\"316\" [modal]=\"false\" [title]=\"'Insert Image'\" (close)=\"onInserterClose()\">\n        <mona-editor-image-inserter\n            (insert)=\"onImageInsert($event)\"\n            (cancel)=\"onInsertCancel()\"></mona-editor-image-inserter>\n    </mona-window>\n}\n" }]
+        }] });
+
+class EditorIndentComponent {
+    constructor() {
+        this.#editorService = inject(EditorService);
+        this.indentDisabled = computed(() => {
+            this.#editorService.state();
+            return !this.#editorService.editor.can().indent();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "indentDisabled" }] : /* istanbul ignore next */ []));
+        this.outdentDisabled = computed(() => {
+            this.#editorService.state();
+            return !this.#editorService.editor.can().outdent();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "outdentDisabled" }] : /* istanbul ignore next */ []));
+    }
+    #editorService;
+    onIndentClick() {
+        this.#editorService.editor.chain().focus().indent().run();
+    }
+    onOutdentClick() {
+        this.#editorService.editor.chain().focus().outdent().run();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditorIndentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: EditorIndentComponent, isStandalone: true, selector: "mona-editor-indent", ngImport: i0, template: "<mona-button-group selection=\"single\">\n    <button monaButton [disabled]=\"indentDisabled()\" (click)=\"onIndentClick()\" title=\"Indent\">\n        <i class=\"ri-indent-increase\"></i>\n    </button>\n    <button monaButton [disabled]=\"outdentDisabled()\" (click)=\"onOutdentClick()\" title=\"Outdent\">\n        <i class=\"ri-indent-decrease\"></i>\n    </button>\n</mona-button-group>\n", styles: [""], dependencies: [{ kind: "component", type: ButtonGroupComponent, selector: "mona-button-group", inputs: ["allowEmpty", "aria-label", "disabled", "look", "rounded", "selection", "size", "class"], outputs: ["buttonClick", "disabledChange", "selectionChange"] }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditorIndentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-editor-indent", imports: [ButtonGroupComponent, ButtonDirective], template: "<mona-button-group selection=\"single\">\n    <button monaButton [disabled]=\"indentDisabled()\" (click)=\"onIndentClick()\" title=\"Indent\">\n        <i class=\"ri-indent-increase\"></i>\n    </button>\n    <button monaButton [disabled]=\"outdentDisabled()\" (click)=\"onOutdentClick()\" title=\"Outdent\">\n        <i class=\"ri-indent-decrease\"></i>\n    </button>\n</mona-button-group>\n" }]
+        }] });
+
+class EditorLinkComponent {
+    constructor() {
+        this.#dialogService = inject(DialogService);
+        this.#editorService = inject(EditorService);
+        this.linkSelected = computed(() => {
+            this.#editorService.state();
+            return this.#editorService.editor.isActive("link");
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "linkSelected" }] : /* istanbul ignore next */ []));
+        this.unlinkDisabled = computed(() => {
+            this.#editorService.state();
+            return !this.#editorService.editor.isActive("link");
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "unlinkDisabled" }] : /* istanbul ignore next */ []));
+    }
+    #dialogService;
+    #editorService;
+    onLinkDialogDisplay() {
+        const link = this.#editorService.editor.getAttributes("link")["href"] ?? "";
+        const dialogRef = this.#dialogService.show({
+            title: "Insert Link",
+            type: "info",
+            // inputType: "string",
+            text: "Enter the URL"
+            // value: link
+        });
+        // dialogRef.result.pipe(take(1)).subscribe(result => this.setLink(result.value as string));
+    }
+    onUnlinkClick() {
+        this.#editorService.editor.chain().focus().unsetLink().run();
+    }
+    setLink(url) {
+        if (!url) {
+            this.#editorService.editor.chain().focus().unsetLink().run();
+            return;
+        }
+        this.#editorService.editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditorLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: EditorLinkComponent, isStandalone: true, selector: "mona-editor-link", ngImport: i0, template: "<mona-button-group selection=\"single\">\n    <button monaButton [selected]=\"linkSelected()\" (click)=\"onLinkDialogDisplay()\" title=\"Insert Link\">\n        <i class=\"ri-link-m\"></i>\n    </button>\n    <button monaButton [disabled]=\"unlinkDisabled()\" (click)=\"onUnlinkClick()\" title=\"Remove Link\">\n        <i class=\"ri-link-unlink-m\"></i>\n    </button>\n</mona-button-group>\n", styles: [""], dependencies: [{ kind: "component", type: ButtonGroupComponent, selector: "mona-button-group", inputs: ["allowEmpty", "aria-label", "disabled", "look", "rounded", "selection", "size", "class"], outputs: ["buttonClick", "disabledChange", "selectionChange"] }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditorLinkComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-editor-link", imports: [ButtonGroupComponent, ButtonDirective], template: "<mona-button-group selection=\"single\">\n    <button monaButton [selected]=\"linkSelected()\" (click)=\"onLinkDialogDisplay()\" title=\"Insert Link\">\n        <i class=\"ri-link-m\"></i>\n    </button>\n    <button monaButton [disabled]=\"unlinkDisabled()\" (click)=\"onUnlinkClick()\" title=\"Remove Link\">\n        <i class=\"ri-link-unlink-m\"></i>\n    </button>\n</mona-button-group>\n" }]
+        }] });
+
+class EditorListComponent {
+    constructor() {
+        this.#editorService = inject(EditorService);
+        this.orderedListSelected = computed(() => {
+            this.#editorService.state();
+            return this.#editorService.editor.isActive("orderedList");
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "orderedListSelected" }] : /* istanbul ignore next */ []));
+        this.unorderedListSelected = computed(() => {
+            this.#editorService.state();
+            return this.#editorService.editor.isActive("bulletList");
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "unorderedListSelected" }] : /* istanbul ignore next */ []));
+    }
+    #editorService;
+    onOrderedListToggle() {
+        this.#editorService.editor.chain().focus().toggleOrderedList().run();
+    }
+    onUnorderedListToggle() {
+        this.#editorService.editor.chain().focus().toggleBulletList().run();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditorListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: EditorListComponent, isStandalone: true, selector: "mona-editor-list", ngImport: i0, template: "<mona-button-group selection=\"single\">\n    <button\n        monaButton\n        [selected]=\"unorderedListSelected()\"\n        (click)=\"onUnorderedListToggle()\"\n        title=\"Insert unordered list\">\n        <i class=\"ri-list-unordered\"></i>\n    </button>\n    <button monaButton [selected]=\"orderedListSelected()\" (click)=\"onOrderedListToggle()\" title=\"Insert ordered list\">\n        <i class=\"ri-list-ordered-2\"></i>\n    </button>\n</mona-button-group>\n", styles: [""], dependencies: [{ kind: "component", type: ButtonGroupComponent, selector: "mona-button-group", inputs: ["allowEmpty", "aria-label", "disabled", "look", "rounded", "selection", "size", "class"], outputs: ["buttonClick", "disabledChange", "selectionChange"] }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditorListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-editor-list", imports: [ButtonGroupComponent, ButtonDirective], template: "<mona-button-group selection=\"single\">\n    <button\n        monaButton\n        [selected]=\"unorderedListSelected()\"\n        (click)=\"onUnorderedListToggle()\"\n        title=\"Insert unordered list\">\n        <i class=\"ri-list-unordered\"></i>\n    </button>\n    <button monaButton [selected]=\"orderedListSelected()\" (click)=\"onOrderedListToggle()\" title=\"Insert ordered list\">\n        <i class=\"ri-list-ordered-2\"></i>\n    </button>\n</mona-button-group>\n" }]
+        }] });
+
+class EditorTableCreatorComponent {
+    constructor() {
+        this.highlightedCell = { row: 0, col: 0 };
+        this.insert = output();
+    }
+    onCellClick(row, col) {
+        this.insert.emit({ row, col });
+        this.highlightedCell = { row: 0, col: 0 };
+    }
+    onCellMouseEnter(row, col) {
+        this.highlightedCell = { row, col };
+    }
+    onCellMouseLeave() {
+        this.highlightedCell = { row: 0, col: 0 };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditorTableCreatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: EditorTableCreatorComponent, isStandalone: true, selector: "mona-editor-table-creator", outputs: { insert: "insert" }, ngImport: i0, template: "<div class=\"mona-editor-table-creator\" (mouseleave)=\"onCellMouseLeave()\">\n    @for (rx of [1, 2, 3, 4, 5, 6, 7, 8]; track rx) {\n        @for (cx of [1, 2, 3, 4, 5, 6, 7, 8]; track cx) {\n            <div\n                class=\"mona-editor-table-creator-cell\"\n                [style.background-color]=\"\n                    rx <= highlightedCell.row && cx <= highlightedCell.col\n                        ? 'var(--mona-primary)'\n                        : 'var(--mona-background-lighter)'\n                \"\n                (click)=\"onCellClick(rx, cx)\"\n                (mouseenter)=\"onCellMouseEnter(rx, cx)\"></div>\n        }\n    }\n</div>\n", styles: [".mona-editor-table-creator{display:grid;grid-template-columns:repeat(8,1fr);column-gap:.125rem;row-gap:.125rem;padding:.25rem}.mona-editor-table-creator-cell{display:flex;border:1px solid var(--mona-border-color);width:24px;height:24px;background:var(--mona-background-lighter)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditorTableCreatorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-editor-table-creator", imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mona-editor-table-creator\" (mouseleave)=\"onCellMouseLeave()\">\n    @for (rx of [1, 2, 3, 4, 5, 6, 7, 8]; track rx) {\n        @for (cx of [1, 2, 3, 4, 5, 6, 7, 8]; track cx) {\n            <div\n                class=\"mona-editor-table-creator-cell\"\n                [style.background-color]=\"\n                    rx <= highlightedCell.row && cx <= highlightedCell.col\n                        ? 'var(--mona-primary)'\n                        : 'var(--mona-background-lighter)'\n                \"\n                (click)=\"onCellClick(rx, cx)\"\n                (mouseenter)=\"onCellMouseEnter(rx, cx)\"></div>\n        }\n    }\n</div>\n", styles: [".mona-editor-table-creator{display:grid;grid-template-columns:repeat(8,1fr);column-gap:.125rem;row-gap:.125rem;padding:.25rem}.mona-editor-table-creator-cell{display:flex;border:1px solid var(--mona-border-color);width:24px;height:24px;background:var(--mona-background-lighter)}\n"] }]
+        }], propDecorators: { insert: [{ type: i0.Output, args: ["insert"] }] } });
+
+class EditorTableComponent {
+    constructor() {
+        this.#editorService = inject(EditorService);
+        this.addColumnBeforeDisabled = computed(() => {
+            this.#editorService.state();
+            const isTable = this.#editorService.editor.isActive("table");
+            const canAddColumnBefore = this.#editorService.editor.can().addColumnBefore();
+            return !isTable || !canAddColumnBefore;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "addColumnBeforeDisabled" }] : /* istanbul ignore next */ []));
+        this.addColumnAfterDisabled = computed(() => {
+            this.#editorService.state();
+            const isTable = this.#editorService.editor.isActive("table");
+            const canAddColumnAfter = this.#editorService.editor.can().addColumnAfter();
+            return !isTable || !canAddColumnAfter;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "addColumnAfterDisabled" }] : /* istanbul ignore next */ []));
+        this.addRowBeforeDisabled = computed(() => {
+            this.#editorService.state();
+            const isTable = this.#editorService.editor.isActive("table");
+            const canAddRowBefore = this.#editorService.editor.can().addRowBefore();
+            return !isTable || !canAddRowBefore;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "addRowBeforeDisabled" }] : /* istanbul ignore next */ []));
+        this.addRowAfterDisabled = computed(() => {
+            this.#editorService.state();
+            const isTable = this.#editorService.editor.isActive("table");
+            const canAddRowAfter = this.#editorService.editor.can().addRowAfter();
+            return !isTable || !canAddRowAfter;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "addRowAfterDisabled" }] : /* istanbul ignore next */ []));
+        this.deleteColumnDisabled = computed(() => {
+            this.#editorService.state();
+            const isTable = this.#editorService.editor.isActive("table");
+            const canDeleteColumn = this.#editorService.editor.can().deleteColumn();
+            return !isTable || !canDeleteColumn;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "deleteColumnDisabled" }] : /* istanbul ignore next */ []));
+        this.deleteRowDisabled = computed(() => {
+            this.#editorService.state();
+            const isTable = this.#editorService.editor.isActive("table");
+            const canDeleteRow = this.#editorService.editor.can().deleteRow();
+            return !isTable || !canDeleteRow;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "deleteRowDisabled" }] : /* istanbul ignore next */ []));
+        this.deleteTableDisabled = computed(() => {
+            this.#editorService.state();
+            const isTable = this.#editorService.editor.isActive("table");
+            const canDeleteTable = this.#editorService.editor.can().deleteTable();
+            return !isTable || !canDeleteTable;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "deleteTableDisabled" }] : /* istanbul ignore next */ []));
+        this.mergeCellsDisabled = computed(() => {
+            this.#editorService.state();
+            const isTable = this.#editorService.editor.isActive("table");
+            const canMergeCells = this.#editorService.editor.can().mergeCells();
+            return !isTable || !canMergeCells;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "mergeCellsDisabled" }] : /* istanbul ignore next */ []));
+        this.popover = viewChild("popoverComponent", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "popover" }] : /* istanbul ignore next */ []));
+        this.splitCellDisabled = computed(() => {
+            this.#editorService.state();
+            const isTable = this.#editorService.editor.isActive("table");
+            const canSplitCell = this.#editorService.editor.can().splitCell();
+            return !isTable || !canSplitCell;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "splitCellDisabled" }] : /* istanbul ignore next */ []));
+        this.toggleHeaderRowDisabled = computed(() => {
+            this.#editorService.state();
+            const isTable = this.#editorService.editor.isActive("table");
+            const canToggleHeaderRow = this.#editorService.editor.can().toggleHeaderRow();
+            return !isTable || !canToggleHeaderRow;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "toggleHeaderRowDisabled" }] : /* istanbul ignore next */ []));
+    }
+    #editorService;
+    onAddColumnBeforeClick() {
+        this.#editorService.editor.chain().focus().addColumnBefore().run();
+    }
+    onAddColumnAfterClick() {
+        this.#editorService.editor.chain().focus().addColumnAfter().run();
+    }
+    onAddRowBeforeClick() {
+        this.#editorService.editor.chain().focus().addRowBefore().run();
+    }
+    onAddRowAfterClick() {
+        this.#editorService.editor.chain().focus().addRowAfter().run();
+    }
+    onDeleteColumnClick() {
+        this.#editorService.editor.chain().focus().deleteColumn().run();
+    }
+    onDeleteRowClick() {
+        this.#editorService.editor.chain().focus().deleteRow().run();
+    }
+    onDeleteTableClick() {
+        this.#editorService.editor.chain().focus().deleteTable().run();
+    }
+    onMergeCellsClick() {
+        this.#editorService.editor.chain().focus().mergeCells().run();
+    }
+    onSplitCellClick() {
+        this.#editorService.editor.chain().focus().splitCell().run();
+    }
+    onTableInsert(event) {
+        this.popover()?.close();
+        this.#editorService.editor.commands.insertTable({
+            rows: event.row,
+            cols: event.col
+        });
+    }
+    onToggleHeaderRow() {
+        this.#editorService.editor.chain().focus().toggleHeaderRow().run();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditorTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: EditorTableComponent, isStandalone: true, selector: "mona-editor-table", viewQueries: [{ propertyName: "popover", first: true, predicate: ["popoverComponent"], descendants: true, isSignal: true }], ngImport: i0, template: "<mona-button-group selection=\"single\">\n    <button monaButton title=\"Insert table\" #insertTableButton>\n        <i class=\"ri-grid-line\"></i>\n    </button>\n    <button\n        monaButton\n        [disabled]=\"addColumnBeforeDisabled()\"\n        (click)=\"onAddColumnBeforeClick()\"\n        title=\"Add column before\">\n        <i class=\"ri-insert-column-left\"></i>\n    </button>\n    <button monaButton [disabled]=\"addColumnAfterDisabled()\" (click)=\"onAddColumnAfterClick()\" title=\"Add column after\">\n        <i class=\"ri-insert-column-right\"></i>\n    </button>\n    <button monaButton [disabled]=\"addRowBeforeDisabled()\" (click)=\"onAddRowBeforeClick()\" title=\"Add row before\">\n        <i class=\"ri-insert-row-top\"></i>\n    </button>\n    <button monaButton [disabled]=\"addRowAfterDisabled()\" (click)=\"onAddRowAfterClick()\" title=\"Add row after\">\n        <i class=\"ri-insert-row-bottom\"></i>\n    </button>\n    <button monaButton [disabled]=\"deleteColumnDisabled()\" (click)=\"onDeleteColumnClick()\" title=\"Delete column\">\n        <i class=\"ri-delete-column\"></i>\n    </button>\n    <button monaButton [disabled]=\"deleteRowDisabled()\" (click)=\"onDeleteRowClick()\" title=\"Delete row\">\n        <i class=\"ri-delete-row\"></i>\n    </button>\n    <button monaButton [disabled]=\"mergeCellsDisabled()\" (click)=\"onMergeCellsClick()\" title=\"Merge selected cells\">\n        <i class=\"ri-merge-cells-horizontal\"></i>\n    </button>\n    <button monaButton [disabled]=\"splitCellDisabled()\" (click)=\"onSplitCellClick()\" title=\"Split cell\">\n        <i class=\"ri-split-cells-horizontal\"></i>\n    </button>\n    <button monaButton [disabled]=\"toggleHeaderRowDisabled()\" (click)=\"onToggleHeaderRow()\" title=\"Toggle header row\">\n        <i class=\"ri-table-line\"></i>\n    </button>\n    <button monaButton [disabled]=\"deleteTableDisabled()\" (click)=\"onDeleteTableClick()\" title=\"Delete table\">\n        <i class=\"ri-close-large-line\"></i>\n    </button>\n</mona-button-group>\n\n<mona-popover [target]=\"insertTableButton\" position=\"bottom\" #popoverComponent>\n    <mona-editor-table-creator (insert)=\"onTableInsert($event)\"></mona-editor-table-creator>\n</mona-popover>\n", styles: [""], dependencies: [{ kind: "component", type: ButtonGroupComponent, selector: "mona-button-group", inputs: ["allowEmpty", "aria-label", "disabled", "look", "rounded", "selection", "size", "class"], outputs: ["buttonClick", "disabledChange", "selectionChange"] }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "component", type: PopoverComponent, selector: "mona-popover", inputs: ["displayArrow", "position", "rounded", "target", "title", "trigger"], outputs: ["hide", "hidden", "show", "shown"], exportAs: ["monaPopover"] }, { kind: "component", type: EditorTableCreatorComponent, selector: "mona-editor-table-creator", outputs: ["insert"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditorTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-editor-table", imports: [ButtonGroupComponent, ButtonDirective, PopoverComponent, EditorTableCreatorComponent], template: "<mona-button-group selection=\"single\">\n    <button monaButton title=\"Insert table\" #insertTableButton>\n        <i class=\"ri-grid-line\"></i>\n    </button>\n    <button\n        monaButton\n        [disabled]=\"addColumnBeforeDisabled()\"\n        (click)=\"onAddColumnBeforeClick()\"\n        title=\"Add column before\">\n        <i class=\"ri-insert-column-left\"></i>\n    </button>\n    <button monaButton [disabled]=\"addColumnAfterDisabled()\" (click)=\"onAddColumnAfterClick()\" title=\"Add column after\">\n        <i class=\"ri-insert-column-right\"></i>\n    </button>\n    <button monaButton [disabled]=\"addRowBeforeDisabled()\" (click)=\"onAddRowBeforeClick()\" title=\"Add row before\">\n        <i class=\"ri-insert-row-top\"></i>\n    </button>\n    <button monaButton [disabled]=\"addRowAfterDisabled()\" (click)=\"onAddRowAfterClick()\" title=\"Add row after\">\n        <i class=\"ri-insert-row-bottom\"></i>\n    </button>\n    <button monaButton [disabled]=\"deleteColumnDisabled()\" (click)=\"onDeleteColumnClick()\" title=\"Delete column\">\n        <i class=\"ri-delete-column\"></i>\n    </button>\n    <button monaButton [disabled]=\"deleteRowDisabled()\" (click)=\"onDeleteRowClick()\" title=\"Delete row\">\n        <i class=\"ri-delete-row\"></i>\n    </button>\n    <button monaButton [disabled]=\"mergeCellsDisabled()\" (click)=\"onMergeCellsClick()\" title=\"Merge selected cells\">\n        <i class=\"ri-merge-cells-horizontal\"></i>\n    </button>\n    <button monaButton [disabled]=\"splitCellDisabled()\" (click)=\"onSplitCellClick()\" title=\"Split cell\">\n        <i class=\"ri-split-cells-horizontal\"></i>\n    </button>\n    <button monaButton [disabled]=\"toggleHeaderRowDisabled()\" (click)=\"onToggleHeaderRow()\" title=\"Toggle header row\">\n        <i class=\"ri-table-line\"></i>\n    </button>\n    <button monaButton [disabled]=\"deleteTableDisabled()\" (click)=\"onDeleteTableClick()\" title=\"Delete table\">\n        <i class=\"ri-close-large-line\"></i>\n    </button>\n</mona-button-group>\n\n<mona-popover [target]=\"insertTableButton\" position=\"bottom\" #popoverComponent>\n    <mona-editor-table-creator (insert)=\"onTableInsert($event)\"></mona-editor-table-creator>\n</mona-popover>\n" }]
+        }], propDecorators: { popover: [{ type: i0.ViewChild, args: ["popoverComponent", { isSignal: true }] }] } });
+
+class EditorTaskListComponent {
+    constructor() {
+        this.#editorService = inject(EditorService);
+        this.taskSelected = computed(() => {
+            this.#editorService.state();
+            return this.#editorService.editor.isActive("taskItem");
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "taskSelected" }] : /* istanbul ignore next */ []));
+    }
+    #editorService;
+    onTaskToggle() {
+        this.#editorService.editor.chain().focus().toggleTaskList().run();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditorTaskListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: EditorTaskListComponent, isStandalone: true, selector: "mona-editor-task-list", ngImport: i0, template: "<button monaButton [selected]=\"taskSelected()\" (click)=\"onTaskToggle()\" title=\"Insert task list\">\n    <i class=\"ri-checkbox-fill\"></i>\n</button>\n", styles: [""], dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditorTaskListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-editor-task-list", imports: [ButtonDirective], template: "<button monaButton [selected]=\"taskSelected()\" (click)=\"onTaskToggle()\" title=\"Insert task list\">\n    <i class=\"ri-checkbox-fill\"></i>\n</button>\n" }]
+        }] });
+
+class EditorTextAlignmentsComponent {
+    constructor() {
+        this.#editorService = inject(EditorService);
+        this.alignCenterSelected = computed(() => {
+            this.#editorService.state();
+            return this.#editorService.editor.isActive({ textAlign: "center" });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "alignCenterSelected" }] : /* istanbul ignore next */ []));
+        this.alignJustifySelected = computed(() => {
+            this.#editorService.state();
+            return this.#editorService.editor.isActive({ textAlign: "justify" });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "alignJustifySelected" }] : /* istanbul ignore next */ []));
+        this.alignLeftSelected = computed(() => {
+            this.#editorService.state();
+            return this.#editorService.editor.isActive({ textAlign: "left" });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "alignLeftSelected" }] : /* istanbul ignore next */ []));
+        this.alignRightSelected = computed(() => {
+            this.#editorService.state();
+            return this.#editorService.editor.isActive({ textAlign: "right" });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "alignRightSelected" }] : /* istanbul ignore next */ []));
+    }
+    #editorService;
+    onAlignCenter() {
+        if (this.alignCenterSelected()) {
+            this.#editorService.editor.chain().focus().unsetTextAlign().run();
+        }
+        else {
+            this.#editorService.editor.chain().focus().setTextAlign("center").run();
+        }
+    }
+    onAlignJustify() {
+        if (this.alignJustifySelected()) {
+            this.#editorService.editor.chain().focus().unsetTextAlign().run();
+        }
+        else {
+            this.#editorService.editor.chain().focus().setTextAlign("justify").run();
+        }
+    }
+    onAlignLeft() {
+        if (this.alignLeftSelected()) {
+            this.#editorService.editor.chain().focus().unsetTextAlign().run();
+        }
+        else {
+            this.#editorService.editor.chain().focus().setTextAlign("left").run();
+        }
+    }
+    onAlignRight() {
+        if (this.alignRightSelected()) {
+            this.#editorService.editor.chain().focus().unsetTextAlign().run();
+        }
+        else {
+            this.#editorService.editor.chain().focus().setTextAlign("right").run();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditorTextAlignmentsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: EditorTextAlignmentsComponent, isStandalone: true, selector: "mona-editor-text-alignments", ngImport: i0, template: "<mona-button-group selection=\"single\">\r\n    <button monaButton [selected]=\"alignLeftSelected()\" (click)=\"onAlignLeft()\" title=\"Align text left\">\r\n        <i class=\"ri-align-left\"></i>\r\n    </button>\r\n    <button monaButton [selected]=\"alignCenterSelected()\" (click)=\"onAlignCenter()\" title=\"Center text\">\r\n        <i class=\"ri-align-center\"></i>\r\n    </button>\r\n    <button monaButton [selected]=\"alignRightSelected()\" (click)=\"onAlignRight()\" title=\"Align text right\">\r\n        <i class=\"ri-align-right\"></i>\r\n    </button>\r\n    <button monaButton [selected]=\"alignJustifySelected()\" (click)=\"onAlignJustify()\" title=\"Justify\">\r\n        <i class=\"ri-align-justify\"></i>\r\n    </button>\r\n</mona-button-group>\r\n", styles: [""], dependencies: [{ kind: "component", type: ButtonGroupComponent, selector: "mona-button-group", inputs: ["allowEmpty", "aria-label", "disabled", "look", "rounded", "selection", "size", "class"], outputs: ["buttonClick", "disabledChange", "selectionChange"] }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditorTextAlignmentsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-editor-text-alignments", imports: [ButtonGroupComponent, ButtonDirective], template: "<mona-button-group selection=\"single\">\r\n    <button monaButton [selected]=\"alignLeftSelected()\" (click)=\"onAlignLeft()\" title=\"Align text left\">\r\n        <i class=\"ri-align-left\"></i>\r\n    </button>\r\n    <button monaButton [selected]=\"alignCenterSelected()\" (click)=\"onAlignCenter()\" title=\"Center text\">\r\n        <i class=\"ri-align-center\"></i>\r\n    </button>\r\n    <button monaButton [selected]=\"alignRightSelected()\" (click)=\"onAlignRight()\" title=\"Align text right\">\r\n        <i class=\"ri-align-right\"></i>\r\n    </button>\r\n    <button monaButton [selected]=\"alignJustifySelected()\" (click)=\"onAlignJustify()\" title=\"Justify\">\r\n        <i class=\"ri-align-justify\"></i>\r\n    </button>\r\n</mona-button-group>\r\n" }]
+        }] });
+
+class EditorComponent {
+    constructor() {
+        this.editorContainer = viewChild.required("editorContainer", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "editorContainer" }] : /* istanbul ignore next */ []));
+        this.editorService = inject(EditorService);
+        /**
+         * Emits when the editor loses focus.
+         */
+        this.blur = output();
+        /**
+         * Emits when the editor is created for the first time and is ready to be used.
+         */
+        this.create = output();
+        /**
+         * Emits when the editor gains focus.
+         */
+        this.focus = output();
+        /**
+         * Emits when the selection of the editor changes.
+         */
+        this.selectionUpdate = output();
+        /**
+         * Emits when the content of the editor changes.
+         */
+        this.update = output();
+        /**
+         * The initial content of the editor.
+         * Accepted values are:
+         * - A string representing the HTML content.
+         * - A {@link JSONContent} representing the content.
+         */
+        this.content = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "content" }] : /* istanbul ignore next */ []));
+        /**
+         * The settings of the editor.
+         */
+        this.settings = input({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            const settings = this.settings();
+            untracked(() => {
+                this.editorService.setupEditor(this.editorContainer().nativeElement, settings);
+            });
+        });
+        effect(() => {
+            const content = this.content() ?? "";
+            untracked(() => {
+                this.loadEditorContent(content);
+            });
+        });
+    }
+    ngOnDestroy() {
+        this.editorService.destroy();
+    }
+    ngOnInit() {
+        this.setSubscriptions();
+    }
+    loadEditorContent(content) {
+        if (typeof content === "string") {
+            this.editorService.editor.commands.setContent(content);
+        }
+        else {
+            this.editorService.editor.commands.setContent({
+                type: "doc",
+                content: [content]
+            });
+        }
+    }
+    setSubscriptions() {
+        this.editorService.blur$.subscribe(() => {
+            this.blur.emit();
+        });
+        this.editorService.create$.subscribe(() => {
+            this.create.emit();
+        });
+        this.editorService.focus$.subscribe(() => {
+            this.focus.emit();
+        });
+        this.editorService.selectionUpdate$.subscribe(() => {
+            this.selectionUpdate.emit();
+        });
+        this.editorService.update$.subscribe(() => {
+            this.update.emit({
+                html: this.html,
+                json: this.json
+            });
+        });
+    }
+    /**
+     * Returns the HTML content of the editor.
+     * It can be used to save the content of the editor in a database and restore it later.
+     */
+    get html() {
+        return this.editorService.editor.getHTML();
+    }
+    /**
+     * Returns the JSON content of the editor in the {@link JSONContent} format.
+     * It can be used to save the content of the editor in a database and restore it later.
+     */
+    get json() {
+        return this.editorService.editor.getJSON();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: EditorComponent, isStandalone: true, selector: "mona-editor", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { blur: "blur", create: "create", focus: "focus", selectionUpdate: "selectionUpdate", update: "update" }, host: { classAttribute: "mona-editor" }, providers: [EditorService], viewQueries: [{ propertyName: "editorContainer", first: true, predicate: ["editorContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"mona-editor-toolbar\">\n    <mona-editor-basic-text-styles></mona-editor-basic-text-styles>\n    @if (editorService.settings().headings) {\n        <mona-editor-headings></mona-editor-headings>\n    }\n    @if (editorService.settings().alignment) {\n        <mona-editor-text-alignments></mona-editor-text-alignments>\n    }\n    @if (editorService.settings().fontSize) {\n        <mona-editor-font-size></mona-editor-font-size>\n    }\n    @if (editorService.settings().fontFamily) {\n        <mona-editor-font-family></mona-editor-font-family>\n    }\n    @if (editorService.settings().fontColor) {\n        <mona-editor-font-color></mona-editor-font-color>\n    }\n    @if (editorService.settings().fontHighlight) {\n        <mona-editor-font-highlight></mona-editor-font-highlight>\n    }\n    @if (editorService.settings().blockquote) {\n        <mona-editor-blockquote></mona-editor-blockquote>\n    }\n    @if (editorService.settings().code) {\n        <mona-editor-code-block></mona-editor-code-block>\n    }\n    @if (editorService.settings().link) {\n        <mona-editor-link></mona-editor-link>\n    }\n    @if (editorService.settings().list) {\n        <mona-editor-list></mona-editor-list>\n    }\n    @if (editorService.settings().taskList) {\n        <mona-editor-task-list></mona-editor-task-list>\n    }\n    @if (editorService.settings().indent) {\n        <mona-editor-indent></mona-editor-indent>\n    }\n    @if (editorService.settings().history) {\n        <mona-editor-history></mona-editor-history>\n    }\n    @if (editorService.settings().horizontalRule) {\n        <mona-editor-horizontal-rule></mona-editor-horizontal-rule>\n    }\n    @if (editorService.settings().image) {\n        <mona-editor-image></mona-editor-image>\n    }\n    @if (editorService.settings().table) {\n        <mona-editor-table></mona-editor-table>\n    }\n</div>\n<div class=\"mona-editor-container\" #editorContainer></div>\n", styles: [".mona-editor-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:.25rem;padding:.25rem}.mona-editor-toolbar button{width:1.875rem;height:1.875rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: EditorBasicTextStylesComponent, selector: "mona-editor-basic-text-styles" }, { kind: "component", type: EditorHeadingsComponent, selector: "mona-editor-headings" }, { kind: "component", type: EditorTextAlignmentsComponent, selector: "mona-editor-text-alignments" }, { kind: "component", type: EditorFontSizeComponent, selector: "mona-editor-font-size" }, { kind: "component", type: EditorFontColorComponent, selector: "mona-editor-font-color" }, { kind: "component", type: EditorFontHighlightComponent, selector: "mona-editor-font-highlight" }, { kind: "component", type: EditorBlockquoteComponent, selector: "mona-editor-blockquote" }, { kind: "component", type: EditorLinkComponent, selector: "mona-editor-link" }, { kind: "component", type: EditorListComponent, selector: "mona-editor-list" }, { kind: "component", type: EditorIndentComponent, selector: "mona-editor-indent" }, { kind: "component", type: EditorHistoryComponent, selector: "mona-editor-history" }, { kind: "component", type: EditorFontFamilyComponent, selector: "mona-editor-font-family" }, { kind: "component", type: EditorHorizontalRuleComponent, selector: "mona-editor-horizontal-rule" }, { kind: "component", type: EditorTaskListComponent, selector: "mona-editor-task-list" }, { kind: "component", type: EditorImageComponent, selector: "mona-editor-image" }, { kind: "component", type: EditorTableComponent, selector: "mona-editor-table" }, { kind: "component", type: EditorCodeBlockComponent, selector: "mona-editor-code-block" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-editor", imports: [
+                        FormsModule,
+                        EditorBasicTextStylesComponent,
+                        EditorHeadingsComponent,
+                        EditorTextAlignmentsComponent,
+                        EditorFontSizeComponent,
+                        EditorFontColorComponent,
+                        EditorFontHighlightComponent,
+                        EditorBlockquoteComponent,
+                        EditorLinkComponent,
+                        EditorListComponent,
+                        EditorIndentComponent,
+                        EditorHistoryComponent,
+                        EditorFontFamilyComponent,
+                        EditorHorizontalRuleComponent,
+                        EditorTaskListComponent,
+                        EditorImageComponent,
+                        EditorTableComponent,
+                        EditorCodeBlockComponent
+                    ], providers: [EditorService], host: {
+                        class: "mona-editor"
+                    }, template: "<div class=\"mona-editor-toolbar\">\n    <mona-editor-basic-text-styles></mona-editor-basic-text-styles>\n    @if (editorService.settings().headings) {\n        <mona-editor-headings></mona-editor-headings>\n    }\n    @if (editorService.settings().alignment) {\n        <mona-editor-text-alignments></mona-editor-text-alignments>\n    }\n    @if (editorService.settings().fontSize) {\n        <mona-editor-font-size></mona-editor-font-size>\n    }\n    @if (editorService.settings().fontFamily) {\n        <mona-editor-font-family></mona-editor-font-family>\n    }\n    @if (editorService.settings().fontColor) {\n        <mona-editor-font-color></mona-editor-font-color>\n    }\n    @if (editorService.settings().fontHighlight) {\n        <mona-editor-font-highlight></mona-editor-font-highlight>\n    }\n    @if (editorService.settings().blockquote) {\n        <mona-editor-blockquote></mona-editor-blockquote>\n    }\n    @if (editorService.settings().code) {\n        <mona-editor-code-block></mona-editor-code-block>\n    }\n    @if (editorService.settings().link) {\n        <mona-editor-link></mona-editor-link>\n    }\n    @if (editorService.settings().list) {\n        <mona-editor-list></mona-editor-list>\n    }\n    @if (editorService.settings().taskList) {\n        <mona-editor-task-list></mona-editor-task-list>\n    }\n    @if (editorService.settings().indent) {\n        <mona-editor-indent></mona-editor-indent>\n    }\n    @if (editorService.settings().history) {\n        <mona-editor-history></mona-editor-history>\n    }\n    @if (editorService.settings().horizontalRule) {\n        <mona-editor-horizontal-rule></mona-editor-horizontal-rule>\n    }\n    @if (editorService.settings().image) {\n        <mona-editor-image></mona-editor-image>\n    }\n    @if (editorService.settings().table) {\n        <mona-editor-table></mona-editor-table>\n    }\n</div>\n<div class=\"mona-editor-container\" #editorContainer></div>\n", styles: [".mona-editor-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:.25rem;padding:.25rem}.mona-editor-toolbar button{width:1.875rem;height:1.875rem}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { editorContainer: [{ type: i0.ViewChild, args: ["editorContainer", { isSignal: true }] }], blur: [{ type: i0.Output, args: ["blur"] }], create: [{ type: i0.Output, args: ["create"] }], focus: [{ type: i0.Output, args: ["focus"] }], selectionUpdate: [{ type: i0.Output, args: ["selectionUpdate"] }], update: [{ type: i0.Output, args: ["update"] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: false }] }] } });
+
+/*
+ * Public API Surface of @nanahoshi/mona-ui/editor
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { EditorComponent };
+//# sourceMappingURL=nanahoshi-mona-ui-editor.mjs.map