@nanahoshi/mona-ui 0.1.1 → 0.2.0

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

@@ -2,7 +2,6 @@ import * as i0 from '@angular/core';
 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 { ThemeService } from '@nanahoshi/mona-ui/theme';
 import { twMerge } from 'tailwind-merge';
 import { ImmutableSet, any, List } from '@mirei/ts-collections';
 import { Extension, Editor } from '@tiptap/core';
@@ -453,12 +452,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
             type: Injectable
         }] });
 
-const editorBaseVariants = cva(`
-        flex flex-col bg-background text-foreground
-        border border-solid border-border
-        transition-[border-color] duration-150 ease-in
-        focus-visible:ring-2 focus-visible:ring-primary/40
-        focus-visible:border-primary
+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
@@ -471,13 +471,13 @@ const editorBaseVariants = cva(`
 
         [&_blockquote]:border-l-4
         [&_blockquote]:border-l-solid
-        [&_blockquote]:border-l-primary
+        [&_blockquote]:border-l-border-control-hover
         [&_blockquote]:px-4 [&_blockquote]:py-2
         [&_blockquote]:ms-4
-        [&_blockquote]:bg-background-light
+        [&_blockquote]:bg-surface-muted
 
-        [&_hr]:border [&_hr]:border-solid [&_hr]:border-border
-        [&_hr]:bg-background-dark [&_hr]:my-1
+        [&_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
@@ -492,10 +492,10 @@ const editorBaseVariants = cva(`
         [&_img]:max-w-full
         [&_img]:h-auto
         [&_img.ProseMirror-selectednode]:outline-3
-        [&_img.ProseMirror-selectednode]:outline-primary
+        [&_img.ProseMirror-selectednode]:outline-focus-indicator
 
-        [&_pre]:bg-background-dark
-        [&_pre]:border [&_pre]:border-solid [&_pre]:border-border
+        [&_pre]:bg-surface-muted
+        [&_pre]:border [&_pre]:border-border-subtle
         [&_pre]:whitespace-pre-wrap
         [&_pre]:font-mono
         [&_pre_code]:p-0
@@ -509,20 +509,20 @@ const editorBaseVariants = cva(`
         [&_table]:overflow-hidden
         [&_table]:table-fixed
         [&_table]:w-full
-        [&_table_td]:border [&_table_td]:border-solid [&_table_td]:border-foreground/40
+        [&_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-solid [&_table_th]:border-foreground/40
+        [&_table_th]:border [&_table_th]:border-border-subtle
         [&_table_th]:p-2 [&_table_th]:align-top [&_table_th]:relative
 
-        [&_table_th]:bg-background-darker [&_table_th]:color-foreground [&_table_th]:font-bold
+        [&_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-primary
+        [&_.selectedCell]:after:bg-active/70
 
         [&_.column-resize-handle]:absolute
-        [&_.column-resize-handle]:bg-primary
+        [&_.column-resize-handle]:bg-focus-indicator
         [&_.column-resize-handle]:w-1
         [&_.column-resize-handle]:pointer-events-none
         [&_.column-resize-handle]:top-0
@@ -532,8 +532,8 @@ const editorBaseVariants = cva(`
         [&_.ProseMirror.resize-cursor]:cursor-ew-resize
 
     `);
-const editorContainerVariants = cva(`
-        bg-background w-full h-full
+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
@@ -542,186 +542,58 @@ const editorContainerVariants = cva(`
         [&_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 editorFontColorPreviewVariants = cva(`
+const editorFontColorPreviewThemeVariants = cva(`
         w-full flex h-[2px]
     `);
-const editorFontColorValueVariants = cva(`
+const editorFontColorValueThemeVariants = cva(`
        flex flex-col items-center justify-center
        gap-0.5 ps-1.25 text-sm
     `);
-const editorFontFamilyDropdownListVariants = cva(`
+const editorFontFamilyDropdownListThemeVariants = cva(`
         w-[12em]
     `);
-const editorFontHighlightPreviewVariants = cva(`
+const editorFontHighlightPreviewThemeVariants = cva(`
         w-full flex h-[2px]
     `);
-const editorFontHighlightValueVariants = cva(`
+const editorFontHighlightValueThemeVariants = cva(`
        flex flex-col items-center justify-center
        gap-0.5 ps-1.25 text-sm
     `);
-const editorFontSizeDropdownListVariants = cva(`
+const editorFontSizeDropdownListThemeVariants = cva(`
         w-[8em]
     `);
-const editorHeadingsDropdownListVariants = cva(`
+const editorHeadingsDropdownListThemeVariants = cva(`
         w-[14em]
     `);
-const editorImageInserterActionsVariants = cva(`
+const editorImageInserterActionsThemeVariants = cva(`
         flex justify-end gap-1 px-2 py-1
-        bg-background-dark
-        border-t border-t-solid border-t-border
+        bg-surface-muted
+        border-t border-t-border-subtle
     `);
-const editorImageInserterFormVariants = cva(`
+const editorImageInserterFormThemeVariants = cva(`
         flex flex-col gap-1.5 pt-2
     `);
-const editorImageInserterRowLabelVariants = cva(`
+const editorImageInserterRowLabelThemeVariants = cva(`
         mb-0.5 ps-0.5 text-sm font-semibold
     `);
-const editorImageInserterRowVariants = cva(`
+const editorImageInserterRowThemeVariants = cva(`
         flex flex-col justify-center px-2
     `);
-const editorTableCreatorVariants = cva(`
+const editorTableCreatorThemeVariants = cva(`
         grid grid-cols-8 gap-0.5 p-1
     `);
-const editorTableCreatorCellVariants = cva(`
-        flex border border-solid border-border
-        w-6 h-6 bg-background-light
+const editorTableCreatorCellThemeVariants = cva(`
+        flex h-6 w-6
+        bg-input-background border border-input-border
     `);
-const editorToolbarVariants = cva(`
+const editorToolbarThemeVariants = cva(`
         flex flex-wrap items-center justify-start gap-1 p-1
-        bg-background-dark text-foreground border-b border-b-solid border-b-border
+        bg-surface-muted text-foreground border-b border-b-border-subtle
     `);
 
-const editorBaseThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return editorBaseVariants;
-        default:
-            return editorBaseVariants;
-    }
-};
-const editorContainerThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return editorContainerVariants;
-        default:
-            return editorContainerVariants;
-    }
-};
-const editorFontColorPreviewThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return editorFontColorPreviewVariants;
-        default:
-            return editorFontColorPreviewVariants;
-    }
-};
-const editorFontColorValueThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return editorFontColorValueVariants;
-        default:
-            return editorFontColorValueVariants;
-    }
-};
-const editorFontFamilyDropdownListThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return editorFontFamilyDropdownListVariants;
-        default:
-            return editorFontFamilyDropdownListVariants;
-    }
-};
-const editorFontHighlightPreviewThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return editorFontHighlightPreviewVariants;
-        default:
-            return editorFontHighlightPreviewVariants;
-    }
-};
-const editorFontHighlightValueThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return editorFontHighlightValueVariants;
-        default:
-            return editorFontHighlightValueVariants;
-    }
-};
-const editorFontSizeDropdownListThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return editorFontSizeDropdownListVariants;
-        default:
-            return editorFontSizeDropdownListVariants;
-    }
-};
-const editorHeadingsDropdownListThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return editorHeadingsDropdownListVariants;
-        default:
-            return editorHeadingsDropdownListVariants;
-    }
-};
-const editorImageInserterActionsThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return editorImageInserterActionsVariants;
-        default:
-            return editorImageInserterActionsVariants;
-    }
-};
-const editorImageInserterFormThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return editorImageInserterFormVariants;
-        default:
-            return editorImageInserterFormVariants;
-    }
-};
-const editorImageInserterRowLabelThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return editorImageInserterRowLabelVariants;
-        default:
-            return editorImageInserterRowLabelVariants;
-    }
-};
-const editorImageInserterRowThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return editorImageInserterRowVariants;
-        default:
-            return editorImageInserterRowVariants;
-    }
-};
-const editorTableCreatorCellThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return editorTableCreatorCellVariants;
-        default:
-            return editorTableCreatorCellVariants;
-    }
-};
-const editorTableCreatorThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return editorTableCreatorVariants;
-        default:
-            return editorTableCreatorVariants;
-    }
-};
-const editorToolbarThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return editorToolbarVariants;
-        default:
-            return editorToolbarVariants;
-    }
-};
-
 class EditorBasicTextStylesComponent {
     constructor() {
         this.anyToolVisible = computed(() => {
@@ -906,16 +778,13 @@ class EditorFontColorComponent {
     constructor() {
         this.#document = inject(DOCUMENT);
         this.#editorService = inject(EditorService);
-        this.#themeService = inject(ThemeService);
         this.#lastColor = "";
         this.colorPreviewClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return editorFontColorPreviewThemeVariants(theme)();
+            return editorFontColorPreviewThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "colorPreviewClass" }] : /* istanbul ignore next */ []));
         this.colorValueClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return editorFontColorValueThemeVariants(theme)();
+            return editorFontColorValueThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "colorValueClass" }] : /* istanbul ignore next */ []));
         this.selectedColor = computed(() => {
@@ -928,7 +797,6 @@ class EditorFontColorComponent {
     }
     #document;
     #editorService;
-    #themeService;
     #lastColor;
     onColorChange(color) {
         if (color) {
@@ -949,10 +817,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
 
 class EditorFontFamilyComponent {
     constructor() {
-        this.#themeService = inject(ThemeService);
         this.dropdownListClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return editorFontFamilyDropdownListThemeVariants(theme)();
+            return editorFontFamilyDropdownListThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "dropdownListClass" }] : /* istanbul ignore next */ []));
         this.editorService = inject(EditorService);
@@ -964,7 +830,6 @@ class EditorFontFamilyComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "selectedFontFamily" }] : /* istanbul ignore next */ []));
     }
-    #themeService;
     ngOnInit() {
         const defaultFontFamily = this.editorService.fonts().first();
         this.editorService.editor.chain().focus().setFontFamily(defaultFontFamily).run();
@@ -986,16 +851,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
 class EditorFontHighlightComponent {
     constructor() {
         this.#editorService = inject(EditorService);
-        this.#themeService = inject(ThemeService);
         this.#lastColor = "";
         this.highlightPreviewClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return editorFontHighlightPreviewThemeVariants(theme)();
+            return editorFontHighlightPreviewThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "highlightPreviewClass" }] : /* istanbul ignore next */ []));
         this.highlightValueClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return editorFontHighlightValueThemeVariants(theme)();
+            return editorFontHighlightValueThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "highlightValueClass" }] : /* istanbul ignore next */ []));
         this.selectedColor = computed(() => {
@@ -1017,7 +879,6 @@ class EditorFontHighlightComponent {
         ...(ngDevMode ? [{ debugName: "selectedColor" }] : /* istanbul ignore next */ []));
     }
     #editorService;
-    #themeService;
     #lastColor;
     onColorChange(color) {
         if (color) {
@@ -1039,10 +900,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
 class EditorFontSizeComponent {
     constructor() {
         this.editorService = inject(EditorService);
-        this.#themeService = inject(ThemeService);
         this.dropdownListClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return editorFontSizeDropdownListThemeVariants(theme)();
+            return editorFontSizeDropdownListThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "dropdownListClass" }] : /* istanbul ignore next */ []));
         this.selectedFontSize = computed(() => {
@@ -1053,7 +912,6 @@ class EditorFontSizeComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "selectedFontSize" }] : /* istanbul ignore next */ []));
     }
-    #themeService;
     onFontSizeChange(fontSize) {
         if (!fontSize) {
             return;
@@ -1082,11 +940,9 @@ var HeadingType;
 class EditorHeadingsComponent {
     constructor() {
         this.#editorService = inject(EditorService);
-        this.#themeService = inject(ThemeService);
         this.HeadingType = HeadingType;
         this.dropdownListClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return editorHeadingsDropdownListThemeVariants(theme)();
+            return editorHeadingsDropdownListThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "dropdownListClass" }] : /* istanbul ignore next */ []));
         this.headingsDropdownListData = [
@@ -1109,7 +965,6 @@ class EditorHeadingsComponent {
         ...(ngDevMode ? [{ debugName: "selectedHeadingsDropdownItem" }] : /* istanbul ignore next */ []));
     }
     #editorService;
-    #themeService;
     onFormatChange(headingItem) {
         if (!headingItem) {
             return;
@@ -1180,15 +1035,12 @@ class EditorImageInserterComponent {
             width: null
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#imageFormModel" }] : /* istanbul ignore next */ []));
-        this.#themeService = inject(ThemeService);
         this.actionsClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return editorImageInserterActionsThemeVariants(theme)();
+            return editorImageInserterActionsThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "actionsClass" }] : /* istanbul ignore next */ []));
         this.formClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return editorImageInserterFormThemeVariants(theme)();
+            return editorImageInserterFormThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "formClass" }] : /* istanbul ignore next */ []));
         this.iForm = form(this.#imageFormModel, schema => {
@@ -1196,20 +1048,17 @@ class EditorImageInserterComponent {
             maxLength(schema.link, 2048);
         });
         this.rowClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return editorImageInserterRowThemeVariants(theme)();
+            return editorImageInserterRowThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "rowClass" }] : /* istanbul ignore next */ []));
         this.rowLabelClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return editorImageInserterRowLabelThemeVariants(theme)();
+            return editorImageInserterRowLabelThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "rowLabelClass" }] : /* istanbul ignore next */ []));
         this.cancel = output();
         this.insert = output();
     }
     #imageFormModel;
-    #themeService;
     onCancel() {
         this.cancel.emit();
     }
@@ -1380,21 +1229,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
 
 class EditorTableCreatorComponent {
     constructor() {
-        this.#themeService = inject(ThemeService);
         this.highlightedCell = { row: 0, col: 0 };
         this.tableCreatorCellClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return editorTableCreatorCellThemeVariants(theme)();
+            return editorTableCreatorCellThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "tableCreatorCellClass" }] : /* istanbul ignore next */ []));
         this.tableCreatorClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return editorTableCreatorThemeVariants(theme)();
+            return editorTableCreatorThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "tableCreatorClass" }] : /* istanbul ignore next */ []));
         this.insert = output();
     }
-    #themeService;
     onCellClick(row, col) {
         this.insert.emit({ row, col });
         this.highlightedCell = { row: 0, col: 0 };
@@ -1406,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]=\"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-background-light)'\n                \"\n                (click)=\"onCellClick(rx, cx)\"\n                (pointerenter)=\"onCellMouseEnter(rx, cx)\"></div>\n        }\n    }\n</div>\n" }); }
+    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", 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-background-light)'\n                \"\n                (click)=\"onCellClick(rx, cx)\"\n                (pointerenter)=\"onCellMouseEnter(rx, cx)\"></div>\n        }\n    }\n</div>\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 {
@@ -1623,28 +1468,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
 
 class EditorComponent {
     #destroyRef;
-    #themeService;
     constructor() {
         this.#destroyRef = inject(DestroyRef);
-        this.#themeService = inject(ThemeService);
         this.baseClass = computed(() => {
-            const theme = this.#themeService.theme();
             const userClass = this.userClass();
-            const variantClass = editorBaseThemeVariants(theme)();
+            const variantClass = editorBaseThemeVariants();
             return twMerge(variantClass, userClass);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
         this.containerClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return editorContainerThemeVariants(theme)();
+            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(() => {
-            const theme = this.#themeService.theme();
-            return editorToolbarThemeVariants(theme)();
+            return editorToolbarThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "toolbarClass" }] : /* istanbul ignore next */ []));
         /**