@nanahoshi/mona-ui 0.1.0 → 0.2.0

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

@@ -1,7 +1,8 @@
 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 { signal, Injectable, computed, inject, Component, DOCUMENT, output, viewChild, DestroyRef, input, effect, untracked, afterNextRender } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { FormsModule } from '@angular/forms';
+import { twMerge } from 'tailwind-merge';
 import { ImmutableSet, any, List } from '@mirei/ts-collections';
 import { Extension, Editor } from '@tiptap/core';
 import { Color } from '@tiptap/extension-color';
@@ -23,12 +24,14 @@ import { StarterKit } from '@tiptap/starter-kit';
 import { Subject } from 'rxjs';
 import { Image } from '@tiptap/extension-image';
 import { TextSelection, AllSelection } from '@tiptap/pm/state';
+import { cva } from 'class-variance-authority';
 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 { WindowComponent, WindowContentTemplateDirective } from '@nanahoshi/mona-ui/window';
+import { form, required, maxLength, FormRoot, FormField } from '@angular/forms/signals';
 import { NumericTextBoxComponent } from '@nanahoshi/mona-ui/numeric-text-box';
 import { TextBoxComponent } from '@nanahoshi/mona-ui/text-box';
 import { DialogService } from '@nanahoshi/mona-ui/dialog';
@@ -449,6 +452,148 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
             type: Injectable
         }] });
 
+const editorBaseThemeVariants = cva(`
+        flex flex-col
+        bg-surface text-foreground
+        border border-border
+        transition-[border-color,box-shadow] duration-150 ease-in
+        focus-within:border-focus-indicator
+        focus-within:ring-2 focus-within:ring-focus-indicator/35
+
+        prose prose-neutral max-w-none
+        prose-headings:text-foreground prose-headings:font-bold
+        prose-headings:mt-1 prose-headings:mb-1
+        prose-p:text-foreground prose-p:my-1
+        prose-strong:text-foreground
+        prose-a:text-primary
+
+        [&_ol]:ps-8 [&_ul]:ps-8
+
+        [&_blockquote]:border-l-4
+        [&_blockquote]:border-l-solid
+        [&_blockquote]:border-l-border-control-hover
+        [&_blockquote]:px-4 [&_blockquote]:py-2
+        [&_blockquote]:ms-4
+        [&_blockquote]:bg-surface-muted
+
+        [&_hr]:my-1 [&_hr]:bg-border-subtle
+        [&_hr]:border [&_hr]:border-border-subtle
+
+        [&_ul[data-type='taskList']_li]:flex
+        [&_ul[data-type='taskList']_li]:py-0.5
+        [&_ul[data-type='taskList']_li>label]:grow-0
+        [&_ul[data-type='taskList']_li>label]:shrink-0
+        [&_ul[data-type='taskList']_li>label]:basis-auto
+        [&_ul[data-type='taskList']_li>div]:grow-1
+        [&_ul[data-type='taskList']_li>div]:shrink-1
+        [&_ul[data-type='taskList']_li>div]:basis-auto
+        [&_ul[data-type='taskList']_input[type='checkbox']]:me-2!
+
+        [&_img]:max-w-full
+        [&_img]:h-auto
+        [&_img.ProseMirror-selectednode]:outline-3
+        [&_img.ProseMirror-selectednode]:outline-focus-indicator
+
+        [&_pre]:bg-surface-muted
+        [&_pre]:border [&_pre]:border-border-subtle
+        [&_pre]:whitespace-pre-wrap
+        [&_pre]:font-mono
+        [&_pre_code]:p-0
+        [&_pre_code]:text-sm
+        [&_pre_code]:bg-none
+
+        [&.ProseMirror-gapcursor]:after:border-foreground!
+
+        [&_table]:border-collapse
+        [&_table]:m-0
+        [&_table]:overflow-hidden
+        [&_table]:table-fixed
+        [&_table]:w-full
+        [&_table_td]:border [&_table_td]:border-border-subtle
+        [&_table_td]:p-2 [&_table_td]:align-top [&_table_td]:relative
+        [&_table_th]:border [&_table_th]:border-border-subtle
+        [&_table_th]:p-2 [&_table_th]:align-top [&_table_th]:relative
+
+        [&_table_th]:bg-surface-muted [&_table_th]:text-foreground [&_table_th]:font-bold
+
+        [&_.selectedCell]:after:content-[''] [&_.selectedCell]:after:absolute [&_.selectedCell]:after:inset-0
+        [&_.selectedCell]:after:pointer-events-none
+        [&_.selectedCell]:after:z-2
+        [&_.selectedCell]:after:bg-active/70
+
+        [&_.column-resize-handle]:absolute
+        [&_.column-resize-handle]:bg-focus-indicator
+        [&_.column-resize-handle]:w-1
+        [&_.column-resize-handle]:pointer-events-none
+        [&_.column-resize-handle]:top-0
+        [&_.column-resize-handle]:-bottom-0.5
+        [&_.column-resize-handle]:-right-0.5
+
+        [&_.ProseMirror.resize-cursor]:cursor-ew-resize
+
+    `);
+const editorContainerThemeVariants = cva(`
+        h-full w-full bg-surface
+        [&_div:first-child[contenteditable='true']]:p-1.5
+        [&_div:first-child[contenteditable='true']]:text-foreground
+        [&_div:first-child[contenteditable='true']]:border-none
+        [&_div:first-child[contenteditable='true']]:outline-none
+        [&_div:first-child[contenteditable='true']]:w-full
+        [&_div:first-child[contenteditable='true']]:h-full
+        [&_div:first-child[contenteditable='true']]:overflow-auto
+        [&_div:first-child[contenteditable='true']]:resize-none
+        [&_div:first-child[contenteditable='true']]:[scrollbar-color:var(--color-scrollbar-thumb)_var(--color-scrollbar-track)]
+        [&_div:first-child[contenteditable='true']]:[scrollbar-width:thin]
+    `);
+const editorFontColorPreviewThemeVariants = cva(`
+        w-full flex h-[2px]
+    `);
+const editorFontColorValueThemeVariants = cva(`
+       flex flex-col items-center justify-center
+       gap-0.5 ps-1.25 text-sm
+    `);
+const editorFontFamilyDropdownListThemeVariants = cva(`
+        w-[12em]
+    `);
+const editorFontHighlightPreviewThemeVariants = cva(`
+        w-full flex h-[2px]
+    `);
+const editorFontHighlightValueThemeVariants = cva(`
+       flex flex-col items-center justify-center
+       gap-0.5 ps-1.25 text-sm
+    `);
+const editorFontSizeDropdownListThemeVariants = cva(`
+        w-[8em]
+    `);
+const editorHeadingsDropdownListThemeVariants = cva(`
+        w-[14em]
+    `);
+const editorImageInserterActionsThemeVariants = cva(`
+        flex justify-end gap-1 px-2 py-1
+        bg-surface-muted
+        border-t border-t-border-subtle
+    `);
+const editorImageInserterFormThemeVariants = cva(`
+        flex flex-col gap-1.5 pt-2
+    `);
+const editorImageInserterRowLabelThemeVariants = cva(`
+        mb-0.5 ps-0.5 text-sm font-semibold
+    `);
+const editorImageInserterRowThemeVariants = cva(`
+        flex flex-col justify-center px-2
+    `);
+const editorTableCreatorThemeVariants = cva(`
+        grid grid-cols-8 gap-0.5 p-1
+    `);
+const editorTableCreatorCellThemeVariants = cva(`
+        flex h-6 w-6
+        bg-input-background border border-input-border
+    `);
+const editorToolbarThemeVariants = cva(`
+        flex flex-wrap items-center justify-start gap-1 p-1
+        bg-surface-muted text-foreground border-b border-b-border-subtle
+    `);
+
 class EditorBasicTextStylesComponent {
     constructor() {
         this.anyToolVisible = computed(() => {
@@ -565,11 +710,11 @@ class EditorBasicTextStylesComponent {
         }
     }
     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"] }] }); }
+    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\" [size]=\"'small'\">\n        @if (boldVisible()) {\n            <button monaButton [selected]=\"boldSelected()\" [toggleable]=\"false\" (click)=\"onBoldToggle()\" title=\"Bold\">\n                <i class=\"ri-bold\"></i>\n            </button>\n        }\n        @if (italicVisible()) {\n            <button\n                monaButton\n                [selected]=\"italicSelected()\"\n                [toggleable]=\"false\"\n                (click)=\"onItalicToggle()\"\n                title=\"Italic\">\n                <i class=\"ri-italic\"></i>\n            </button>\n        }\n        @if (underlineVisible()) {\n            <button\n                monaButton\n                [selected]=\"underlineSelected()\"\n                [toggleable]=\"false\"\n                (click)=\"onUnderlineToggle()\"\n                title=\"Underline\">\n                <i class=\"ri-underline\"></i>\n            </button>\n        }\n        @if (strikeThroughVisible()) {\n            <button\n                monaButton\n                [selected]=\"strikeThroughSelected()\"\n                [toggleable]=\"false\"\n                (click)=\"onStrikeThroughToggle()\"\n                title=\"Strikethrough\">\n                <i class=\"ri-strikethrough\"></i>\n            </button>\n        }\n        @if (subscriptVisible()) {\n            <button\n                monaButton\n                [selected]=\"subscriptSelected()\"\n                [toggleable]=\"false\"\n                (click)=\"onSubscriptToggle()\"\n                title=\"Subscript\">\n                <i class=\"ri-subscript\"></i>\n            </button>\n        }\n        @if (superscriptVisible()) {\n            <button\n                monaButton\n                [selected]=\"superscriptSelected()\"\n                [toggleable]=\"false\"\n                (click)=\"onSuperscriptToggle()\"\n                title=\"Superscript\">\n                <i class=\"ri-superscript\"></i>\n            </button>\n        }\n    </mona-button-group>\n}\n", 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" }]
+            args: [{ selector: "mona-editor-basic-text-styles", imports: [ButtonDirective, ButtonGroupComponent], template: "@if (anyToolVisible()) {\n    <mona-button-group selection=\"multiple\" [size]=\"'small'\">\n        @if (boldVisible()) {\n            <button monaButton [selected]=\"boldSelected()\" [toggleable]=\"false\" (click)=\"onBoldToggle()\" title=\"Bold\">\n                <i class=\"ri-bold\"></i>\n            </button>\n        }\n        @if (italicVisible()) {\n            <button\n                monaButton\n                [selected]=\"italicSelected()\"\n                [toggleable]=\"false\"\n                (click)=\"onItalicToggle()\"\n                title=\"Italic\">\n                <i class=\"ri-italic\"></i>\n            </button>\n        }\n        @if (underlineVisible()) {\n            <button\n                monaButton\n                [selected]=\"underlineSelected()\"\n                [toggleable]=\"false\"\n                (click)=\"onUnderlineToggle()\"\n                title=\"Underline\">\n                <i class=\"ri-underline\"></i>\n            </button>\n        }\n        @if (strikeThroughVisible()) {\n            <button\n                monaButton\n                [selected]=\"strikeThroughSelected()\"\n                [toggleable]=\"false\"\n                (click)=\"onStrikeThroughToggle()\"\n                title=\"Strikethrough\">\n                <i class=\"ri-strikethrough\"></i>\n            </button>\n        }\n        @if (subscriptVisible()) {\n            <button\n                monaButton\n                [selected]=\"subscriptSelected()\"\n                [toggleable]=\"false\"\n                (click)=\"onSubscriptToggle()\"\n                title=\"Subscript\">\n                <i class=\"ri-subscript\"></i>\n            </button>\n        }\n        @if (superscriptVisible()) {\n            <button\n                monaButton\n                [selected]=\"superscriptSelected()\"\n                [toggleable]=\"false\"\n                (click)=\"onSuperscriptToggle()\"\n                title=\"Superscript\">\n                <i class=\"ri-superscript\"></i>\n            </button>\n        }\n    </mona-button-group>\n}\n" }]
         }] });
 
 class EditorBlockquoteComponent {
@@ -591,11 +736,11 @@ class EditorBlockquoteComponent {
         }
     }
     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"] }] }); }
+    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 [size]=\"'small'\" [selected]=\"blockquoteSelected()\" (click)=\"onBlockquoteToggle()\" title=\"Quotation\">\n    <i class=\"ri-double-quotes-r\"></i>\n</button>\n", 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" }]
+            args: [{ selector: "mona-editor-blockquote", imports: [ButtonDirective], template: "<button monaButton [size]=\"'small'\" [selected]=\"blockquoteSelected()\" (click)=\"onBlockquoteToggle()\" title=\"Quotation\">\n    <i class=\"ri-double-quotes-r\"></i>\n</button>\n" }]
         }] });
 
 class EditorCodeBlockComponent {
@@ -612,11 +757,11 @@ class EditorCodeBlockComponent {
         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"] }] }); }
+    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 [size]=\"'small'\" [selected]=\"codeBlockSelected()\" (click)=\"onCodeBlockClick()\">\n    <i class=\"ri-code-s-slash-line\"></i>\n</button>\n", 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" }]
+            args: [{ selector: "mona-editor-code-block", imports: [ButtonDirective], template: "<button monaButton [size]=\"'small'\" [selected]=\"codeBlockSelected()\" (click)=\"onCodeBlockClick()\">\n    <i class=\"ri-code-s-slash-line\"></i>\n</button>\n" }]
         }] });
 
 const htmlColorCode = (name, document) => {
@@ -634,6 +779,14 @@ class EditorFontColorComponent {
         this.#document = inject(DOCUMENT);
         this.#editorService = inject(EditorService);
         this.#lastColor = "";
+        this.colorPreviewClass = computed(() => {
+            return editorFontColorPreviewThemeVariants();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "colorPreviewClass" }] : /* istanbul ignore next */ []));
+        this.colorValueClass = computed(() => {
+            return editorFontColorValueThemeVariants();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "colorValueClass" }] : /* istanbul ignore next */ []));
         this.selectedColor = computed(() => {
             this.#editorService.state();
             const attributes = this.#editorService.editor.getAttributes("textStyle");
@@ -655,15 +808,19 @@ class EditorFontColorComponent {
         }
     }
     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]" }] }); }
+    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\n    view=\"gradient\"\n    [size]=\"'small'\"\n    [value]=\"selectedColor()\"\n    (valueChange)=\"onColorChange($event)\"\n    title=\"Color\">\n    <ng-template monaColorPickerValueTemplate let-color>\n        <div [class]=\"colorValueClass()\">\n            <i class=\"ri-font-family\"></i>\n            <span [class]=\"colorPreviewClass()\" [style.background-color]=\"color\"></span>\n        </div>\n    </ng-template>\n</mona-color-picker>\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"] }]
+            args: [{ selector: "mona-editor-font-color", imports: [ColorPickerComponent, ColorPickerValueTemplateDirective], template: "<mona-color-picker\n    view=\"gradient\"\n    [size]=\"'small'\"\n    [value]=\"selectedColor()\"\n    (valueChange)=\"onColorChange($event)\"\n    title=\"Color\">\n    <ng-template monaColorPickerValueTemplate let-color>\n        <div [class]=\"colorValueClass()\">\n            <i class=\"ri-font-family\"></i>\n            <span [class]=\"colorPreviewClass()\" [style.background-color]=\"color\"></span>\n        </div>\n    </ng-template>\n</mona-color-picker>\n" }]
         }] });
 
 class EditorFontFamilyComponent {
     constructor() {
+        this.dropdownListClass = computed(() => {
+            return editorFontFamilyDropdownListThemeVariants();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dropdownListClass" }] : /* istanbul ignore next */ []));
         this.editorService = inject(EditorService);
         this.selectedFontFamily = computed(() => {
             this.editorService.state();
@@ -678,20 +835,31 @@ class EditorFontFamilyComponent {
         this.editorService.editor.chain().focus().setFontFamily(defaultFontFamily).run();
     }
     onFontFamilyChange(fontFamily) {
+        if (!fontFamily) {
+            return;
+        }
         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]    " }] }); }
+    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\n    [data]=\"editorService.fonts()\"\n    [value]=\"selectedFontFamily()\"\n    (valueChange)=\"onFontFamilyChange($event)\"\n    [size]=\"'small'\"\n    [class]=\"dropdownListClass()\"\n    title=\"Select font family\">\n    <ng-template monaDropDownListItemTemplate let-font>\n        <span [style.font-family]=\"font\">{{ font }}</span>\n    </ng-template>\n</mona-dropdown-list>\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: 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"] }]
+            args: [{ selector: "mona-editor-font-family", imports: [DropdownListComponent, FormsModule, DropdownItemTemplateDirective], template: "<mona-dropdown-list\n    [data]=\"editorService.fonts()\"\n    [value]=\"selectedFontFamily()\"\n    (valueChange)=\"onFontFamilyChange($event)\"\n    [size]=\"'small'\"\n    [class]=\"dropdownListClass()\"\n    title=\"Select font family\">\n    <ng-template monaDropDownListItemTemplate let-font>\n        <span [style.font-family]=\"font\">{{ font }}</span>\n    </ng-template>\n</mona-dropdown-list>\n" }]
         }] });
 
 class EditorFontHighlightComponent {
     constructor() {
         this.#editorService = inject(EditorService);
         this.#lastColor = "";
+        this.highlightPreviewClass = computed(() => {
+            return editorFontHighlightPreviewThemeVariants();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "highlightPreviewClass" }] : /* istanbul ignore next */ []));
+        this.highlightValueClass = computed(() => {
+            return editorFontHighlightValueThemeVariants();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "highlightValueClass" }] : /* istanbul ignore next */ []));
         this.selectedColor = computed(() => {
             const state = this.#editorService.state();
             if (state.selection.empty) {
@@ -722,16 +890,20 @@ class EditorFontHighlightComponent {
         }
     }
     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]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.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    [size]=\"'small'\"\n    title=\"Background color\">\n    <ng-template monaColorPickerValueTemplate let-color>\n        <div [class]=\"highlightValueClass()\">\n            <i class=\"ri-drop-fill\"></i>\n            @if (color) {\n                <span [class]=\"highlightPreviewClass()\" [style.background-color]=\"color\"></span>\n            }\n        </div>\n    </ng-template>\n</mona-color-picker>\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"] }]
+            args: [{ selector: "mona-editor-font-highlight", imports: [ColorPickerComponent, ColorPickerValueTemplateDirective], template: "<mona-color-picker\n    view=\"gradient\"\n    [value]=\"selectedColor()\"\n    (valueChange)=\"onColorChange($event)\"\n    [size]=\"'small'\"\n    title=\"Background color\">\n    <ng-template monaColorPickerValueTemplate let-color>\n        <div [class]=\"highlightValueClass()\">\n            <i class=\"ri-drop-fill\"></i>\n            @if (color) {\n                <span [class]=\"highlightPreviewClass()\" [style.background-color]=\"color\"></span>\n            }\n        </div>\n    </ng-template>\n</mona-color-picker>\n" }]
         }] });
 
 class EditorFontSizeComponent {
     constructor() {
         this.editorService = inject(EditorService);
+        this.dropdownListClass = computed(() => {
+            return editorFontSizeDropdownListThemeVariants();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dropdownListClass" }] : /* istanbul ignore next */ []));
         this.selectedFontSize = computed(() => {
             this.editorService.state();
             return (this.editorService
@@ -740,18 +912,18 @@ class EditorFontSizeComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "selectedFontSize" }] : /* istanbul ignore next */ []));
     }
-    ngOnInit() {
-        // this.#editorService.editor.chain().focus().setFontSize(this.selectedFontSize().value).run();
-    }
     onFontSizeChange(fontSize) {
+        if (!fontSize) {
+            return;
+        }
         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"] }] }); }
+    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\n    [data]=\"editorService.fontSizes()\"\n    placeholder=\"Font Size\"\n    [value]=\"selectedFontSize()\"\n    (valueChange)=\"onFontSizeChange($event)\"\n    [size]=\"'small'\"\n    [class]=\"dropdownListClass()\"\n    title=\"Select font size\"></mona-dropdown-list>\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 }] }); }
 }
 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"] }]
+            args: [{ selector: "mona-editor-font-size", imports: [DropdownListComponent, FormsModule], template: "<mona-dropdown-list\n    [data]=\"editorService.fontSizes()\"\n    placeholder=\"Font Size\"\n    [value]=\"selectedFontSize()\"\n    (valueChange)=\"onFontSizeChange($event)\"\n    [size]=\"'small'\"\n    [class]=\"dropdownListClass()\"\n    title=\"Select font size\"></mona-dropdown-list>\n" }]
         }] });
 
 var HeadingType;
@@ -769,6 +941,10 @@ class EditorHeadingsComponent {
     constructor() {
         this.#editorService = inject(EditorService);
         this.HeadingType = HeadingType;
+        this.dropdownListClass = computed(() => {
+            return editorHeadingsDropdownListThemeVariants();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dropdownListClass" }] : /* istanbul ignore next */ []));
         this.headingsDropdownListData = [
             { text: "Paragraph", value: HeadingType.Paragraph },
             { text: "Heading 1", value: HeadingType.Heading1 },
@@ -790,6 +966,9 @@ class EditorHeadingsComponent {
     }
     #editorService;
     onFormatChange(headingItem) {
+        if (!headingItem) {
+            return;
+        }
         if (headingItem.value === HeadingType.Paragraph) {
             this.#editorService.editor.chain().focus().setParagraph().run();
         }
@@ -798,11 +977,11 @@ class EditorHeadingsComponent {
         }
     }
     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]    " }] }); }
+    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\n    [data]=\"headingsDropdownListData\"\n    [value]=\"selectedHeadingsDropdownItem()\"\n    (valueChange)=\"onFormatChange($event)\"\n    [size]=\"'small'\"\n    [class]=\"dropdownListClass()\"\n    textField=\"text\"\n    valueField=\"value\"\n    title=\"Format\">\n    <ng-template monaDropDownListItemTemplate let-dataItem>\n        @switch (dataItem.value) {\n            @case (HeadingType.Heading1) {\n                <h1 class=\"m-0 text-2xl font-bold\">{{ dataItem.text }}</h1>\n            }\n            @case (HeadingType.Heading2) {\n                <h2 class=\"m-0 text-xl font-bold\">{{ dataItem.text }}</h2>\n            }\n            @case (HeadingType.Heading3) {\n                <h3 class=\"m-0 text-lg font-bold\">{{ dataItem.text }}</h3>\n            }\n            @case (HeadingType.Heading4) {\n                <h4 class=\"m-0 text-base font-bold\">{{ dataItem.text }}</h4>\n            }\n            @case (HeadingType.Heading5) {\n                <h5 class=\"m-0 text-sm font-bold\">{{ dataItem.text }}</h5>\n            }\n            @case (HeadingType.Heading6) {\n                <h6 class=\"m-0 text-xs font-bold\">{{ dataItem.text }}</h6>\n            }\n            @case (HeadingType.Paragraph) {\n                <p class=\"m-0 text-sm\">{{ dataItem.text }}</p>\n            }\n            @default {\n                <p class=\"m-0 text-sm\">{{ dataItem.text }}</p>\n            }\n        }\n    </ng-template>\n</mona-dropdown-list>\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: 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"] }]
+            args: [{ selector: "mona-editor-headings", imports: [DropdownListComponent, FormsModule, DropdownItemTemplateDirective], template: "<mona-dropdown-list\n    [data]=\"headingsDropdownListData\"\n    [value]=\"selectedHeadingsDropdownItem()\"\n    (valueChange)=\"onFormatChange($event)\"\n    [size]=\"'small'\"\n    [class]=\"dropdownListClass()\"\n    textField=\"text\"\n    valueField=\"value\"\n    title=\"Format\">\n    <ng-template monaDropDownListItemTemplate let-dataItem>\n        @switch (dataItem.value) {\n            @case (HeadingType.Heading1) {\n                <h1 class=\"m-0 text-2xl font-bold\">{{ dataItem.text }}</h1>\n            }\n            @case (HeadingType.Heading2) {\n                <h2 class=\"m-0 text-xl font-bold\">{{ dataItem.text }}</h2>\n            }\n            @case (HeadingType.Heading3) {\n                <h3 class=\"m-0 text-lg font-bold\">{{ dataItem.text }}</h3>\n            }\n            @case (HeadingType.Heading4) {\n                <h4 class=\"m-0 text-base font-bold\">{{ dataItem.text }}</h4>\n            }\n            @case (HeadingType.Heading5) {\n                <h5 class=\"m-0 text-sm font-bold\">{{ dataItem.text }}</h5>\n            }\n            @case (HeadingType.Heading6) {\n                <h6 class=\"m-0 text-xs font-bold\">{{ dataItem.text }}</h6>\n            }\n            @case (HeadingType.Paragraph) {\n                <p class=\"m-0 text-sm\">{{ dataItem.text }}</p>\n            }\n            @default {\n                <p class=\"m-0 text-sm\">{{ dataItem.text }}</p>\n            }\n        }\n    </ng-template>\n</mona-dropdown-list>\n" }]
         }] });
 
 class EditorHistoryComponent {
@@ -827,11 +1006,11 @@ class EditorHistoryComponent {
         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"] }] }); }
+    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\" [size]=\"'small'\">\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", 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" }]
+            args: [{ selector: "mona-editor-history", imports: [ButtonGroupComponent, ButtonDirective], template: "<mona-button-group selection=\"single\" [size]=\"'small'\">\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 {
@@ -840,41 +1019,63 @@ class EditorHorizontalRuleComponent {
         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"] }] }); }
+    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 [size]=\"'small'\" (click)=\"onHorizontalRuleClick()\" title=\"Add horizontal line\">\n    <i class=\"ri-subtract-line\"></i>\n</button>\n", 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" }]
+            args: [{ selector: "mona-editor-horizontal-rule", imports: [ButtonDirective], template: "<button monaButton [size]=\"'small'\" (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.#imageFormModel = signal({
+            alt: "",
+            height: null,
+            link: "",
+            width: null
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#imageFormModel" }] : /* istanbul ignore next */ []));
+        this.actionsClass = computed(() => {
+            return editorImageInserterActionsThemeVariants();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "actionsClass" }] : /* istanbul ignore next */ []));
+        this.formClass = computed(() => {
+            return editorImageInserterFormThemeVariants();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "formClass" }] : /* istanbul ignore next */ []));
+        this.iForm = form(this.#imageFormModel, schema => {
+            required(schema.link);
+            maxLength(schema.link, 2048);
         });
+        this.rowClass = computed(() => {
+            return editorImageInserterRowThemeVariants();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rowClass" }] : /* istanbul ignore next */ []));
+        this.rowLabelClass = computed(() => {
+            return editorImageInserterRowLabelThemeVariants();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rowLabelClass" }] : /* istanbul ignore next */ []));
         this.cancel = output();
         this.insert = output();
     }
+    #imageFormModel;
     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
+            alt: this.iForm.alt().value(),
+            height: this.iForm.height().value(),
+            link: this.iForm.link().value(),
+            width: this.iForm.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"] }] }); }
+    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 [formRoot]=\"iForm\" [class]=\"formClass()\">\n    <div [class]=\"rowClass()\">\n        <div [class]=\"rowLabelClass()\">Image URL</div>\n        <mona-text-box [size]=\"'small'\" [formField]=\"iForm.link\"></mona-text-box>\n    </div>\n    <div [class]=\"rowClass()\">\n        <div [class]=\"rowLabelClass()\">Alt Text</div>\n        <mona-text-box [size]=\"'small'\" [formField]=\"iForm.alt\"></mona-text-box>\n    </div>\n    <div class=\"flex gap-2\">\n        <div [class]=\"rowClass()\">\n            <div [class]=\"rowLabelClass()\">Width (px)</div>\n            <mona-numeric-text-box [size]=\"'small'\" [formField]=\"iForm.width\"></mona-numeric-text-box>\n        </div>\n        <div [class]=\"rowClass()\">\n            <div [class]=\"rowLabelClass()\">Height (px)</div>\n            <mona-numeric-text-box [size]=\"'small'\" [formField]=\"iForm.height\"></mona-numeric-text-box>\n        </div>\n    </div>\n    <div [class]=\"actionsClass()\">\n        <button monaButton [size]=\"'small'\" [disabled]=\"!iForm().valid()\" look=\"primary\" (click)=\"onImageInsert()\">\n            Insert\n        </button>\n        <button monaButton [size]=\"'small'\" [look]=\"'secondary'\" (click)=\"onCancel()\">Cancel</button>\n    </div>\n</form>\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: "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"] }, { kind: "directive", type: FormRoot, selector: "form[formRoot]", inputs: ["formRoot"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }] }); }
 }
 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"] }]
+            args: [{ selector: "mona-editor-image-inserter", imports: [TextBoxComponent, ButtonDirective, NumericTextBoxComponent, FormRoot, FormField], template: "<form [formRoot]=\"iForm\" [class]=\"formClass()\">\n    <div [class]=\"rowClass()\">\n        <div [class]=\"rowLabelClass()\">Image URL</div>\n        <mona-text-box [size]=\"'small'\" [formField]=\"iForm.link\"></mona-text-box>\n    </div>\n    <div [class]=\"rowClass()\">\n        <div [class]=\"rowLabelClass()\">Alt Text</div>\n        <mona-text-box [size]=\"'small'\" [formField]=\"iForm.alt\"></mona-text-box>\n    </div>\n    <div class=\"flex gap-2\">\n        <div [class]=\"rowClass()\">\n            <div [class]=\"rowLabelClass()\">Width (px)</div>\n            <mona-numeric-text-box [size]=\"'small'\" [formField]=\"iForm.width\"></mona-numeric-text-box>\n        </div>\n        <div [class]=\"rowClass()\">\n            <div [class]=\"rowLabelClass()\">Height (px)</div>\n            <mona-numeric-text-box [size]=\"'small'\" [formField]=\"iForm.height\"></mona-numeric-text-box>\n        </div>\n    </div>\n    <div [class]=\"actionsClass()\">\n        <button monaButton [size]=\"'small'\" [disabled]=\"!iForm().valid()\" look=\"primary\" (click)=\"onImageInsert()\">\n            Insert\n        </button>\n        <button monaButton [size]=\"'small'\" [look]=\"'secondary'\" (click)=\"onCancel()\">Cancel</button>\n    </div>\n</form>\n" }]
         }], propDecorators: { cancel: [{ type: i0.Output, args: ["cancel"] }], insert: [{ type: i0.Output, args: ["insert"] }] } });
 
 class EditorImageComponent {
@@ -905,8 +1106,8 @@ class EditorImageComponent {
             .chain()
             .setImage({
             src: event.link,
-            alt: event.altText,
-            title: event.altText
+            alt: event.alt,
+            title: event.alt
         })
             .updateAttributes("extendedImage", {
             width: event.width,
@@ -915,11 +1116,11 @@ class EditorImageComponent {
             .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"] }] }); }
+    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 [size]=\"'small'\" (click)=\"onDisplayInserterClick()\" title=\"Insert image\">\n    <i class=\"ri-image-add-line\"></i>\n</button>\n\n@if (inserterVisible()) {\n    <mona-window\n        [width]=\"400\"\n        [modal]=\"false\"\n        [title]=\"'Insert Image'\"\n        [minimizable]=\"false\"\n        [maximizable]=\"false\"\n        (close)=\"onInserterClose()\">\n        <ng-template monaWindowContentTemplate>\n            <mona-editor-image-inserter\n                (insert)=\"onImageInsert($event)\"\n                (cancel)=\"onInsertCancel()\"></mona-editor-image-inserter>\n        </ng-template>\n    </mona-window>\n}\n", 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"] }, { kind: "directive", type: WindowContentTemplateDirective, selector: "ng-template[monaWindowContentTemplate]" }] }); }
 }
 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" }]
+            args: [{ selector: "mona-editor-image", imports: [WindowComponent, EditorImageInserterComponent, ButtonDirective, WindowContentTemplateDirective], template: "<button monaButton [size]=\"'small'\" (click)=\"onDisplayInserterClick()\" title=\"Insert image\">\n    <i class=\"ri-image-add-line\"></i>\n</button>\n\n@if (inserterVisible()) {\n    <mona-window\n        [width]=\"400\"\n        [modal]=\"false\"\n        [title]=\"'Insert Image'\"\n        [minimizable]=\"false\"\n        [maximizable]=\"false\"\n        (close)=\"onInserterClose()\">\n        <ng-template monaWindowContentTemplate>\n            <mona-editor-image-inserter\n                (insert)=\"onImageInsert($event)\"\n                (cancel)=\"onInsertCancel()\"></mona-editor-image-inserter>\n        </ng-template>\n    </mona-window>\n}\n" }]
         }] });
 
 class EditorIndentComponent {
@@ -944,11 +1145,11 @@ class EditorIndentComponent {
         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"] }] }); }
+    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\" [size]=\"'small'\">\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", 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" }]
+            args: [{ selector: "mona-editor-indent", imports: [ButtonGroupComponent, ButtonDirective], template: "<mona-button-group selection=\"single\" [size]=\"'small'\">\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 {
@@ -990,11 +1191,11 @@ class EditorLinkComponent {
         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"] }] }); }
+    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\" [size]=\"'small'\">\n    <button\n        monaButton\n        [selected]=\"linkSelected()\"\n        [toggleable]=\"false\"\n        (click)=\"onLinkDialogDisplay()\"\n        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", 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" }]
+            args: [{ selector: "mona-editor-link", imports: [ButtonGroupComponent, ButtonDirective], template: "<mona-button-group selection=\"single\" [size]=\"'small'\">\n    <button\n        monaButton\n        [selected]=\"linkSelected()\"\n        [toggleable]=\"false\"\n        (click)=\"onLinkDialogDisplay()\"\n        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 {
@@ -1019,16 +1220,24 @@ class EditorListComponent {
         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"] }] }); }
+    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\" [size]=\"'small'\">\n    <button\n        monaButton\n        [selected]=\"unorderedListSelected()\"\n        [toggleable]=\"false\"\n        (click)=\"onUnorderedListToggle()\"\n        title=\"Insert unordered list\">\n        <i class=\"ri-list-unordered\"></i>\n    </button>\n    <button\n        monaButton\n        [selected]=\"orderedListSelected()\"\n        [toggleable]=\"false\"\n        (click)=\"onOrderedListToggle()\"\n        title=\"Insert ordered list\">\n        <i class=\"ri-list-ordered-2\"></i>\n    </button>\n</mona-button-group>\n", 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" }]
+            args: [{ selector: "mona-editor-list", imports: [ButtonGroupComponent, ButtonDirective], template: "<mona-button-group selection=\"single\" [size]=\"'small'\">\n    <button\n        monaButton\n        [selected]=\"unorderedListSelected()\"\n        [toggleable]=\"false\"\n        (click)=\"onUnorderedListToggle()\"\n        title=\"Insert unordered list\">\n        <i class=\"ri-list-unordered\"></i>\n    </button>\n    <button\n        monaButton\n        [selected]=\"orderedListSelected()\"\n        [toggleable]=\"false\"\n        (click)=\"onOrderedListToggle()\"\n        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.tableCreatorCellClass = computed(() => {
+            return editorTableCreatorCellThemeVariants();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tableCreatorCellClass" }] : /* istanbul ignore next */ []));
+        this.tableCreatorClass = computed(() => {
+            return editorTableCreatorThemeVariants();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tableCreatorClass" }] : /* istanbul ignore next */ []));
         this.insert = output();
     }
     onCellClick(row, col) {
@@ -1042,11 +1251,11 @@ class EditorTableCreatorComponent {
         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 }); }
+    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]=\"tableCreatorClass()\" (pointerleave)=\"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]=\"tableCreatorCellClass()\"\n                [style.background-color]=\"\n                    rx <= highlightedCell.row && cx <= highlightedCell.col\n                        ? 'var(--color-primary)'\n                        : 'var(--color-surface-muted)'\n                \"\n                (click)=\"onCellClick(rx, cx)\"\n                (pointerenter)=\"onCellMouseEnter(rx, cx)\"></div>\n        }\n    }\n</div>\n" }); }
 }
 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"] }]
+            args: [{ selector: "mona-editor-table-creator", template: "<div [class]=\"tableCreatorClass()\" (pointerleave)=\"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]=\"tableCreatorCellClass()\"\n                [style.background-color]=\"\n                    rx <= highlightedCell.row && cx <= highlightedCell.col\n                        ? 'var(--color-primary)'\n                        : 'var(--color-surface-muted)'\n                \"\n                (click)=\"onCellClick(rx, cx)\"\n                (pointerenter)=\"onCellMouseEnter(rx, cx)\"></div>\n        }\n    }\n</div>\n" }]
         }], propDecorators: { insert: [{ type: i0.Output, args: ["insert"] }] } });
 
 class EditorTableComponent {
@@ -1164,11 +1373,11 @@ class EditorTableComponent {
         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"] }] }); }
+    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\" [size]=\"'small'\">\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", 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" }]
+            args: [{ selector: "mona-editor-table", imports: [ButtonGroupComponent, ButtonDirective, PopoverComponent, EditorTableCreatorComponent], template: "<mona-button-group selection=\"single\" [size]=\"'small'\">\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 {
@@ -1185,11 +1394,11 @@ class EditorTaskListComponent {
         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"] }] }); }
+    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()\" [size]=\"'small'\" (click)=\"onTaskToggle()\" title=\"Insert task list\">\n    <i class=\"ri-checkbox-fill\"></i>\n</button>\n", 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" }]
+            args: [{ selector: "mona-editor-task-list", imports: [ButtonDirective], template: "<button monaButton [selected]=\"taskSelected()\" [size]=\"'small'\" (click)=\"onTaskToggle()\" title=\"Insert task list\">\n    <i class=\"ri-checkbox-fill\"></i>\n</button>\n" }]
         }] });
 
 class EditorTextAlignmentsComponent {
@@ -1250,51 +1459,65 @@ class EditorTextAlignmentsComponent {
         }
     }
     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"] }] }); }
+    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\" [size]=\"'small'\">\n    <button\n        monaButton\n        [selected]=\"alignLeftSelected()\"\n        [toggleable]=\"false\"\n        (click)=\"onAlignLeft()\"\n        title=\"Align text left\">\n        <i class=\"ri-align-left\"></i>\n    </button>\n    <button\n        monaButton\n        [selected]=\"alignCenterSelected()\"\n        [toggleable]=\"false\"\n        (click)=\"onAlignCenter()\"\n        title=\"Center text\">\n        <i class=\"ri-align-center\"></i>\n    </button>\n    <button\n        monaButton\n        [selected]=\"alignRightSelected()\"\n        [toggleable]=\"false\"\n        (click)=\"onAlignRight()\"\n        title=\"Align text right\">\n        <i class=\"ri-align-right\"></i>\n    </button>\n    <button\n        monaButton\n        [selected]=\"alignJustifySelected()\"\n        [toggleable]=\"false\"\n        (click)=\"onAlignJustify()\"\n        title=\"Justify\">\n        <i class=\"ri-align-justify\"></i>\n    </button>\n</mona-button-group>\n", 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" }]
+            args: [{ selector: "mona-editor-text-alignments", imports: [ButtonGroupComponent, ButtonDirective], template: "<mona-button-group selection=\"single\" [size]=\"'small'\">\n    <button\n        monaButton\n        [selected]=\"alignLeftSelected()\"\n        [toggleable]=\"false\"\n        (click)=\"onAlignLeft()\"\n        title=\"Align text left\">\n        <i class=\"ri-align-left\"></i>\n    </button>\n    <button\n        monaButton\n        [selected]=\"alignCenterSelected()\"\n        [toggleable]=\"false\"\n        (click)=\"onAlignCenter()\"\n        title=\"Center text\">\n        <i class=\"ri-align-center\"></i>\n    </button>\n    <button\n        monaButton\n        [selected]=\"alignRightSelected()\"\n        [toggleable]=\"false\"\n        (click)=\"onAlignRight()\"\n        title=\"Align text right\">\n        <i class=\"ri-align-right\"></i>\n    </button>\n    <button\n        monaButton\n        [selected]=\"alignJustifySelected()\"\n        [toggleable]=\"false\"\n        (click)=\"onAlignJustify()\"\n        title=\"Justify\">\n        <i class=\"ri-align-justify\"></i>\n    </button>\n</mona-button-group>\n" }]
         }] });
 
 class EditorComponent {
+    #destroyRef;
     constructor() {
+        this.#destroyRef = inject(DestroyRef);
+        this.baseClass = computed(() => {
+            const userClass = this.userClass();
+            const variantClass = editorBaseThemeVariants();
+            return twMerge(variantClass, userClass);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+        this.containerClass = computed(() => {
+            return editorContainerThemeVariants();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "containerClass" }] : /* istanbul ignore next */ []));
         this.editorContainer = viewChild.required("editorContainer", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "editorContainer" }] : /* istanbul ignore next */ []));
         this.editorService = inject(EditorService);
+        this.toolbarClass = computed(() => {
+            return editorToolbarThemeVariants();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "toolbarClass" }] : /* istanbul ignore next */ []));
         /**
-         * Emits when the editor loses focus.
+         * @description 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.
+         * @description 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.
+         * @description Emits when the editor gains focus.
          */
         this.focus = output();
         /**
-         * Emits when the selection of the editor changes.
+         * @description Emits when the selection of the editor changes.
          */
         this.selectionUpdate = output();
         /**
-         * Emits when the content of the editor changes.
+         * @description 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.
+         * @description The initial content of the editor.
          */
         this.content = input(/* @ts-ignore */
         ...(ngDevMode ? [undefined, { debugName: "content" }] : /* istanbul ignore next */ []));
         /**
-         * The settings of the editor.
+         * @description The settings of the editor.
          */
         this.settings = input({}, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
+        this.userClass = input("", { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: "class" });
         effect(() => {
             const settings = this.settings();
             untracked(() => {
@@ -1307,12 +1530,10 @@ class EditorComponent {
                 this.loadEditorContent(content);
             });
         });
-    }
-    ngOnDestroy() {
-        this.editorService.destroy();
-    }
-    ngOnInit() {
-        this.setSubscriptions();
+        afterNextRender({
+            read: () => this.setSubscriptions()
+        });
+        this.#destroyRef.onDestroy(() => this.editorService.destroy());
     }
     loadEditorContent(content) {
         if (typeof content === "string") {
@@ -1326,19 +1547,19 @@ class EditorComponent {
         }
     }
     setSubscriptions() {
-        this.editorService.blur$.subscribe(() => {
+        this.editorService.blur$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(() => {
             this.blur.emit();
         });
-        this.editorService.create$.subscribe(() => {
+        this.editorService.create$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(() => {
             this.create.emit();
         });
-        this.editorService.focus$.subscribe(() => {
+        this.editorService.focus$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(() => {
             this.focus.emit();
         });
-        this.editorService.selectionUpdate$.subscribe(() => {
+        this.editorService.selectionUpdate$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(() => {
             this.selectionUpdate.emit();
         });
-        this.editorService.update$.subscribe(() => {
+        this.editorService.update$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(() => {
             this.update.emit({
                 html: this.html,
                 json: this.json
@@ -1360,7 +1581,7 @@ class EditorComponent {
         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" }] }); }
+    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 }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { blur: "blur", create: "create", focus: "focus", selectionUpdate: "selectionUpdate", update: "update" }, host: { properties: { "class": "baseClass()" } }, providers: [EditorService], viewQueries: [{ propertyName: "editorContainer", first: true, predicate: ["editorContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div [class]=\"toolbarClass()\">\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]=\"containerClass()\" #editorContainer></div>\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,
@@ -1384,9 +1605,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         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 }] }] } });
+                        "[class]": "baseClass()"
+                    }, template: "<div [class]=\"toolbarClass()\">\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]=\"containerClass()\" #editorContainer></div>\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 }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 /*
  * Public API Surface of @nanahoshi/mona-ui/editor