@nanahoshi/mona-ui 0.18.5 → 0.19.0

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

@@ -1,9 +1,10 @@
 import * as i0 from '@angular/core';
-import { signal, Injectable, computed, inject, Component, DOCUMENT, output, viewChild, DestroyRef, input, effect, untracked, afterNextRender } from '@angular/core';
+import { inject, signal, Injectable, computed, 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 { ImmutableSet, any, List, range } from '@mirei/ts-collections';
+import { MonaI18nService } from '@nanahoshi/mona-ui/i18n';
 import { Extension, Editor } from '@tiptap/core';
 import { Color } from '@tiptap/extension-color';
 import { FontFamily } from '@tiptap/extension-font-family';
@@ -201,11 +202,12 @@ const Indent = Extension.create({
                                 return {};
                             }
                             return {
-                                style: `margin-left: ${indent}px;`
+                                style: `margin-inline-start: ${indent}px;`
                             };
                         },
                         parseHTML: element => {
-                            const raw = element.style.marginLeft;
+                            const el = element;
+                            const raw = el.style.marginInlineStart || el.style.marginLeft;
                             const parsed = raw ? parseInt(raw, 10) : NaN;
                             return Number.isNaN(parsed) ? this.options.defaultIndentLevel : parsed;
                         }
@@ -254,8 +256,62 @@ const Indent = Extension.create({
     }
 });
 
+const EDITOR_DEFAULT_MESSAGES = {
+    addColumnAfter: "Add column after",
+    addColumnBefore: "Add column before",
+    addHorizontalLine: "Add horizontal line",
+    addRowAfter: "Add row after",
+    addRowBefore: "Add row before",
+    alignCenter: "Center text",
+    alignLeft: "Align text left",
+    alignRight: "Align text right",
+    altText: "Alt Text",
+    backgroundColor: "Background color",
+    bold: "Bold",
+    cancel: "Cancel",
+    codeBlock: "Code block",
+    color: "Color",
+    deleteColumn: "Delete column",
+    deleteRow: "Delete row",
+    deleteTable: "Delete table",
+    enterUrl: "Enter the URL",
+    fontSize: "Font Size",
+    format: "Format",
+    heading: (level) => `Heading ${level}`,
+    heightPx: "Height (px)",
+    imageUrl: "Image URL",
+    indent: "Indent",
+    insert: "Insert",
+    insertImage: "Insert image",
+    insertLink: "Insert Link",
+    insertOrderedList: "Insert ordered list",
+    insertTable: "Insert table",
+    insertTaskList: "Insert task list",
+    insertUnorderedList: "Insert unordered list",
+    italic: "Italic",
+    justify: "Justify",
+    mergeCells: "Merge selected cells",
+    outdent: "Outdent",
+    paragraph: "Paragraph",
+    quotation: "Quotation",
+    redo: "Redo",
+    removeLink: "Remove Link",
+    selectFontFamily: "Select font family",
+    selectFontSize: "Select font size",
+    splitCell: "Split cell",
+    strikethrough: "Strikethrough",
+    subscript: "Subscript",
+    superscript: "Superscript",
+    toggleHeaderRow: "Toggle header row",
+    underline: "Underline",
+    undo: "Undo",
+    widthPx: "Width (px)"
+};
+
 class EditorService {
     constructor() {
+        this.#i18n = inject(MonaI18nService);
+        this.messages = this.#i18n.componentMessages("editor", EDITOR_DEFAULT_MESSAGES);
         this.#defaultSettings = {
             alignment: true,
             blockquote: true,
@@ -322,6 +378,7 @@ class EditorService {
         ...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
         this.update$ = new Subject();
     }
+    #i18n;
     #defaultSettings;
     #state;
     #editor;
@@ -469,9 +526,9 @@ const editorBaseThemeVariants = cva(`
 
         [&_ol]:ps-8 [&_ul]:ps-8
 
-        [&_blockquote]:border-l-4
-        [&_blockquote]:border-l-solid
-        [&_blockquote]:border-l-border-control-hover
+        [&_blockquote]:border-s-4
+        [&_blockquote]:border-s-solid
+        [&_blockquote]:border-s-border-control-hover
         [&_blockquote]:px-4 [&_blockquote]:py-2
         [&_blockquote]:ms-4
         [&_blockquote]:bg-surface-muted
@@ -527,7 +584,7 @@ const editorBaseThemeVariants = cva(`
         [&_.column-resize-handle]:pointer-events-none
         [&_.column-resize-handle]:top-0
         [&_.column-resize-handle]:-bottom-0.5
-        [&_.column-resize-handle]:-right-0.5
+        [&_.column-resize-handle]:-end-0.5
 
         [&_.ProseMirror.resize-cursor]:cursor-ew-resize
 
@@ -596,6 +653,8 @@ const editorToolbarThemeVariants = cva(`
 
 class EditorBasicTextStylesComponent {
     constructor() {
+        this.#i18n = inject(MonaI18nService);
+        this.messages = this.#i18n.componentMessages("editor", EDITOR_DEFAULT_MESSAGES);
         this.anyToolVisible = computed(() => {
             return (this.boldVisible() ||
                 this.italicVisible() ||
@@ -661,6 +720,7 @@ class EditorBasicTextStylesComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "underlineVisible" }] : /* istanbul ignore next */ []));
     }
+    #i18n;
     onBoldToggle() {
         if (this.boldSelected()) {
             this.editorService.editor.chain().focus().unsetBold().run();
@@ -710,16 +770,18 @@ 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\" [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", "type", "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\n                monaButton\n                [selected]=\"boldSelected()\"\n                [toggleable]=\"false\"\n                (click)=\"onBoldToggle()\"\n                [title]=\"messages().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]=\"messages().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]=\"messages().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]=\"messages().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]=\"messages().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]=\"messages().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", "type", "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\" [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" }]
+            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\n                monaButton\n                [selected]=\"boldSelected()\"\n                [toggleable]=\"false\"\n                (click)=\"onBoldToggle()\"\n                [title]=\"messages().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]=\"messages().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]=\"messages().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]=\"messages().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]=\"messages().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]=\"messages().superscript\">\n                <i class=\"ri-superscript\"></i>\n            </button>\n        }\n    </mona-button-group>\n}\n" }]
         }] });
 
 class EditorBlockquoteComponent {
     constructor() {
         this.#editorService = inject(EditorService);
+        this.#i18n = inject(MonaI18nService);
+        this.messages = this.#i18n.componentMessages("editor", EDITOR_DEFAULT_MESSAGES);
         this.blockquoteSelected = computed(() => {
             this.#editorService.state();
             return this.#editorService.editor.isActive("blockquote");
@@ -727,6 +789,7 @@ class EditorBlockquoteComponent {
         ...(ngDevMode ? [{ debugName: "blockquoteSelected" }] : /* istanbul ignore next */ []));
     }
     #editorService;
+    #i18n;
     onBlockquoteToggle() {
         if (this.blockquoteSelected()) {
             this.#editorService.editor.chain().focus().unsetBlockquote().run();
@@ -736,16 +799,18 @@ 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 [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", "type", "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]=\"messages().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", "type", "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 [size]=\"'small'\" [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]=\"messages().quotation\">\n    <i class=\"ri-double-quotes-r\"></i>\n</button>\n" }]
         }] });
 
 class EditorCodeBlockComponent {
     constructor() {
         this.#editorService = inject(EditorService);
+        this.#i18n = inject(MonaI18nService);
+        this.messages = this.#i18n.componentMessages("editor", EDITOR_DEFAULT_MESSAGES);
         this.codeBlockSelected = computed(() => {
             this.#editorService.state();
             return this.#editorService.editor.isActive("codeBlock");
@@ -753,15 +818,16 @@ class EditorCodeBlockComponent {
         ...(ngDevMode ? [{ debugName: "codeBlockSelected" }] : /* istanbul ignore next */ []));
     }
     #editorService;
+    #i18n;
     onCodeBlockClick() {
         this.#editorService.editor.chain().toggleCodeBlock().run();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditorCodeBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: EditorCodeBlockComponent, isStandalone: true, selector: "mona-editor-code-block", ngImport: i0, template: "<button monaButton [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", "type", "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()\" [title]=\"messages().codeBlock\">\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", "type", "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 [size]=\"'small'\" [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()\" [title]=\"messages().codeBlock\">\n    <i class=\"ri-code-s-slash-line\"></i>\n</button>\n" }]
         }] });
 
 const htmlColorCode = (name, document) => {
@@ -778,6 +844,8 @@ class EditorFontColorComponent {
     constructor() {
         this.#document = inject(DOCUMENT);
         this.#editorService = inject(EditorService);
+        this.#i18n = inject(MonaI18nService);
+        this.messages = this.#i18n.componentMessages("editor", EDITOR_DEFAULT_MESSAGES);
         this.#lastColor = "";
         this.colorPreviewClass = computed(() => {
             return editorFontColorPreviewThemeVariants();
@@ -797,6 +865,7 @@ class EditorFontColorComponent {
     }
     #document;
     #editorService;
+    #i18n;
     #lastColor;
     onColorChange(color) {
         if (color) {
@@ -808,15 +877,17 @@ 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\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]" }] }); }
+    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]=\"messages().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: ["aria-label", "closeOnSelect", "columns", "disabled", "invalid", "opacity", "palette", "readonly", "required", "rounded", "showClearButton", "size", "touched", "value", "view"], 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\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" }]
+            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]=\"messages().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.#i18n = inject(MonaI18nService);
+        this.messages = this.#i18n.componentMessages("editor", EDITOR_DEFAULT_MESSAGES);
         this.dropdownListClass = computed(() => {
             return editorFontFamilyDropdownListThemeVariants();
         }, /* @ts-ignore */
@@ -830,6 +901,7 @@ class EditorFontFamilyComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "selectedFontFamily" }] : /* istanbul ignore next */ []));
     }
+    #i18n;
     ngOnInit() {
         const defaultFontFamily = this.editorService.fonts().first();
         this.editorService.editor.chain().focus().setFontFamily(defaultFontFamily).run();
@@ -841,16 +913,18 @@ class EditorFontFamilyComponent {
         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\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", "valuePrimitive", "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]    " }] }); }
+    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]=\"messages().selectFontFamily\">\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", "valuePrimitive", "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\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" }]
+            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]=\"messages().selectFontFamily\">\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.#i18n = inject(MonaI18nService);
+        this.messages = this.#i18n.componentMessages("editor", EDITOR_DEFAULT_MESSAGES);
         this.#lastColor = "";
         this.highlightPreviewClass = computed(() => {
             return editorFontHighlightPreviewThemeVariants();
@@ -879,6 +953,7 @@ class EditorFontHighlightComponent {
         ...(ngDevMode ? [{ debugName: "selectedColor" }] : /* istanbul ignore next */ []));
     }
     #editorService;
+    #i18n;
     #lastColor;
     onColorChange(color) {
         if (color) {
@@ -890,15 +965,17 @@ 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: "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]" }] }); }
+    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]=\"messages().backgroundColor\">\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: ["aria-label", "closeOnSelect", "columns", "disabled", "invalid", "opacity", "palette", "readonly", "required", "rounded", "showClearButton", "size", "touched", "value", "view"], 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    [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" }]
+            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]=\"messages().backgroundColor\">\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.#i18n = inject(MonaI18nService);
+        this.messages = this.#i18n.componentMessages("editor", EDITOR_DEFAULT_MESSAGES);
         this.editorService = inject(EditorService);
         this.dropdownListClass = computed(() => {
             return editorFontSizeDropdownListThemeVariants();
@@ -912,6 +989,7 @@ class EditorFontSizeComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "selectedFontSize" }] : /* istanbul ignore next */ []));
     }
+    #i18n;
     onFontSizeChange(fontSize) {
         if (!fontSize) {
             return;
@@ -919,11 +997,11 @@ class EditorFontSizeComponent {
         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\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", "valuePrimitive", "value"], outputs: ["close", "closed", "disabledChange", "open", "opened", "touch", "valueChange"] }, { kind: "ngmodule", type: FormsModule }] }); }
+    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]=\"messages().fontSize\"\n    [value]=\"selectedFontSize()\"\n    (valueChange)=\"onFontSizeChange($event)\"\n    [size]=\"'small'\"\n    [class]=\"dropdownListClass()\"\n    [title]=\"messages().selectFontSize\"></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", "valuePrimitive", "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\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" }]
+            args: [{ selector: "mona-editor-font-size", imports: [DropdownListComponent, FormsModule], template: "<mona-dropdown-list\n    [data]=\"editorService.fontSizes()\"\n    [placeholder]=\"messages().fontSize\"\n    [value]=\"selectedFontSize()\"\n    (valueChange)=\"onFontSizeChange($event)\"\n    [size]=\"'small'\"\n    [class]=\"dropdownListClass()\"\n    [title]=\"messages().selectFontSize\"></mona-dropdown-list>\n" }]
         }] });
 
 var HeadingType;
@@ -940,31 +1018,39 @@ var HeadingType;
 class EditorHeadingsComponent {
     constructor() {
         this.#editorService = inject(EditorService);
+        this.#i18n = inject(MonaI18nService);
+        this.messages = this.#i18n.componentMessages("editor", EDITOR_DEFAULT_MESSAGES);
         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 },
-            { text: "Heading 2", value: HeadingType.Heading2 },
-            { text: "Heading 3", value: HeadingType.Heading3 },
-            { text: "Heading 4", value: HeadingType.Heading4 },
-            { text: "Heading 5", value: HeadingType.Heading5 },
-            { text: "Heading 6", value: HeadingType.Heading6 }
-        ];
+        this.headingsDropdownListData = computed(() => {
+            const msgs = this.messages();
+            return [
+                { text: msgs.paragraph, value: HeadingType.Paragraph },
+                ...range(1, 6)
+                    .select(level => ({
+                    text: msgs.heading(level),
+                    value: level
+                }))
+                    .toArray()
+            ];
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "headingsDropdownListData" }] : /* istanbul ignore next */ []));
         this.selectedHeadingsDropdownItem = computed(() => {
             const state = this.#editorService.state();
             const node = state.selection.$from.node();
+            const data = this.headingsDropdownListData();
             if (node && node.type.name === "heading") {
-                return this.headingsDropdownListData.find(item => item.value === node.attrs["level"]);
+                return data.find(item => item.value === node.attrs["level"]);
             }
-            return this.headingsDropdownListData.find(item => item.value === HeadingType.Paragraph);
+            return data.find(item => item.value === HeadingType.Paragraph);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "selectedHeadingsDropdownItem" }] : /* istanbul ignore next */ []));
     }
     #editorService;
+    #i18n;
     onFormatChange(headingItem) {
         if (!headingItem) {
             return;
@@ -977,16 +1063,18 @@ 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\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", "valuePrimitive", "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]    " }] }); }
+    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]=\"messages().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", "valuePrimitive", "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\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" }]
+            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]=\"messages().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 {
     constructor() {
         this.#editorService = inject(EditorService);
+        this.#i18n = inject(MonaI18nService);
+        this.messages = this.#i18n.componentMessages("editor", EDITOR_DEFAULT_MESSAGES);
         this.redoDisabled = computed(() => {
             this.#editorService.state();
             return !this.#editorService.editor.can().redo();
@@ -999,6 +1087,7 @@ class EditorHistoryComponent {
         ...(ngDevMode ? [{ debugName: "undoDisabled" }] : /* istanbul ignore next */ []));
     }
     #editorService;
+    #i18n;
     onRedoClick() {
         this.#editorService.editor.chain().focus().redo().run();
     }
@@ -1006,28 +1095,36 @@ 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\" [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", "type", "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]=\"messages().undo\">\n        <i class=\"ri-arrow-go-back-line\"></i>\n    </button>\n    <button monaButton [disabled]=\"redoDisabled()\" (click)=\"onRedoClick()\" [title]=\"messages().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", "type", "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\" [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" }]
+            args: [{ selector: "mona-editor-history", imports: [ButtonGroupComponent, ButtonDirective], template: "<mona-button-group selection=\"single\" [size]=\"'small'\">\n    <button monaButton [disabled]=\"undoDisabled()\" (click)=\"onUndoClick()\" [title]=\"messages().undo\">\n        <i class=\"ri-arrow-go-back-line\"></i>\n    </button>\n    <button monaButton [disabled]=\"redoDisabled()\" (click)=\"onRedoClick()\" [title]=\"messages().redo\">\n        <i class=\"ri-arrow-go-forward-line\"></i>\n    </button>\n</mona-button-group>\n" }]
         }] });
 
 class EditorHorizontalRuleComponent {
-    #editorService = inject(EditorService);
+    constructor() {
+        this.#editorService = inject(EditorService);
+        this.#i18n = inject(MonaI18nService);
+        this.messages = this.#i18n.componentMessages("editor", EDITOR_DEFAULT_MESSAGES);
+    }
+    #editorService;
+    #i18n;
     onHorizontalRuleClick() {
         this.#editorService.editor.chain().focus().setHorizontalRule().run();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditorHorizontalRuleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: EditorHorizontalRuleComponent, isStandalone: true, selector: "mona-editor-horizontal-rule", ngImport: i0, template: "<button monaButton [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", "type", "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]=\"messages().addHorizontalLine\">\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", "type", "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 [size]=\"'small'\" (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]=\"messages().addHorizontalLine\">\n    <i class=\"ri-subtract-line\"></i>\n</button>\n" }]
         }] });
 
 class EditorImageInserterComponent {
     constructor() {
+        this.#i18n = inject(MonaI18nService);
+        this.messages = this.#i18n.componentMessages("editor", EDITOR_DEFAULT_MESSAGES);
         this.#imageFormModel = signal({
             alt: "",
             height: null,
@@ -1058,6 +1155,7 @@ class EditorImageInserterComponent {
         this.cancel = output();
         this.insert = output();
     }
+    #i18n;
     #imageFormModel;
     onCancel() {
         this.cancel.emit();
@@ -1071,20 +1169,23 @@ class EditorImageInserterComponent {
         });
     }
     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 [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", "type", "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"] }] }); }
+    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()\">{{ messages().imageUrl }}</div>\n        <mona-text-box [size]=\"'small'\" [formField]=\"iForm.link\"></mona-text-box>\n    </div>\n    <div [class]=\"rowClass()\">\n        <div [class]=\"rowLabelClass()\">{{ messages().altText }}</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()\">{{ messages().widthPx }}</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()\">{{ messages().heightPx }}</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            {{ messages().insert }}\n        </button>\n        <button monaButton [size]=\"'small'\" [look]=\"'secondary'\" (click)=\"onCancel()\">{{ messages().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", "type", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "component", type: NumericTextBoxComponent, selector: "mona-numeric-text-box", inputs: ["aria-label", "decimals", "disabled", "formatter", "invalid", "maxValue", "minValue", "nullable", "readonly", "required", "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, 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" }]
+            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()\">{{ messages().imageUrl }}</div>\n        <mona-text-box [size]=\"'small'\" [formField]=\"iForm.link\"></mona-text-box>\n    </div>\n    <div [class]=\"rowClass()\">\n        <div [class]=\"rowLabelClass()\">{{ messages().altText }}</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()\">{{ messages().widthPx }}</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()\">{{ messages().heightPx }}</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            {{ messages().insert }}\n        </button>\n        <button monaButton [size]=\"'small'\" [look]=\"'secondary'\" (click)=\"onCancel()\">{{ messages().cancel }}</button>\n    </div>\n</form>\n" }]
         }], propDecorators: { cancel: [{ type: i0.Output, args: ["cancel"] }], insert: [{ type: i0.Output, args: ["insert"] }] } });
 
 class EditorImageComponent {
     constructor() {
         this.#editorService = inject(EditorService);
+        this.#i18n = inject(MonaI18nService);
+        this.messages = this.#i18n.componentMessages("editor", EDITOR_DEFAULT_MESSAGES);
         this.inserterVisible = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "inserterVisible" }] : /* istanbul ignore next */ []));
     }
     #editorService;
+    #i18n;
     onDisplayInserterClick() {
         this.inserterVisible.set(true);
     }
@@ -1116,16 +1217,18 @@ 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 [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", "type", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "directive", type: WindowContentTemplateDirective, selector: "ng-template[monaWindowContentTemplate]" }] }); }
+    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]=\"messages().insertImage\">\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]=\"messages().insertImage\"\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", "messages", "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", "type", "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, 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" }]
+            args: [{ selector: "mona-editor-image", imports: [WindowComponent, EditorImageInserterComponent, ButtonDirective, WindowContentTemplateDirective], template: "<button monaButton [size]=\"'small'\" (click)=\"onDisplayInserterClick()\" [title]=\"messages().insertImage\">\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]=\"messages().insertImage\"\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 {
     constructor() {
         this.#editorService = inject(EditorService);
+        this.#i18n = inject(MonaI18nService);
+        this.messages = this.#i18n.componentMessages("editor", EDITOR_DEFAULT_MESSAGES);
         this.indentDisabled = computed(() => {
             this.#editorService.state();
             return !this.#editorService.editor.can().indent();
@@ -1138,6 +1241,7 @@ class EditorIndentComponent {
         ...(ngDevMode ? [{ debugName: "outdentDisabled" }] : /* istanbul ignore next */ []));
     }
     #editorService;
+    #i18n;
     onIndentClick() {
         this.#editorService.editor.chain().focus().indent().run();
     }
@@ -1145,17 +1249,19 @@ 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\" [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", "type", "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]=\"messages().indent\">\n        <i class=\"ri-indent-increase\"></i>\n    </button>\n    <button monaButton [disabled]=\"outdentDisabled()\" (click)=\"onOutdentClick()\" [title]=\"messages().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", "type", "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\" [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" }]
+            args: [{ selector: "mona-editor-indent", imports: [ButtonGroupComponent, ButtonDirective], template: "<mona-button-group selection=\"single\" [size]=\"'small'\">\n    <button monaButton [disabled]=\"indentDisabled()\" (click)=\"onIndentClick()\" [title]=\"messages().indent\">\n        <i class=\"ri-indent-increase\"></i>\n    </button>\n    <button monaButton [disabled]=\"outdentDisabled()\" (click)=\"onOutdentClick()\" [title]=\"messages().outdent\">\n        <i class=\"ri-indent-decrease\"></i>\n    </button>\n</mona-button-group>\n" }]
         }] });
 
 class EditorLinkComponent {
     constructor() {
         this.#dialogService = inject(DialogService);
         this.#editorService = inject(EditorService);
+        this.#i18n = inject(MonaI18nService);
+        this.messages = this.#i18n.componentMessages("editor", EDITOR_DEFAULT_MESSAGES);
         this.linkSelected = computed(() => {
             this.#editorService.state();
             return this.#editorService.editor.isActive("link");
@@ -1169,13 +1275,14 @@ class EditorLinkComponent {
     }
     #dialogService;
     #editorService;
+    #i18n;
     onLinkDialogDisplay() {
         const link = this.#editorService.editor.getAttributes("link")["href"] ?? "";
         const dialogRef = this.#dialogService.show({
-            title: "Insert Link",
+            title: this.messages().insertLink,
             type: "info",
             // inputType: "string",
-            text: "Enter the URL"
+            text: this.messages().enterUrl
             // value: link
         });
         // dialogRef.result.pipe(take(1)).subscribe(result => this.setLink(result.value as string));
@@ -1191,16 +1298,18 @@ 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\" [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", "type", "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]=\"messages().insertLink\">\n        <i class=\"ri-link-m\"></i>\n    </button>\n    <button monaButton [disabled]=\"unlinkDisabled()\" (click)=\"onUnlinkClick()\" [title]=\"messages().removeLink\">\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", "type", "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\" [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" }]
+            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]=\"messages().insertLink\">\n        <i class=\"ri-link-m\"></i>\n    </button>\n    <button monaButton [disabled]=\"unlinkDisabled()\" (click)=\"onUnlinkClick()\" [title]=\"messages().removeLink\">\n        <i class=\"ri-link-unlink-m\"></i>\n    </button>\n</mona-button-group>\n" }]
         }] });
 
 class EditorListComponent {
     constructor() {
         this.#editorService = inject(EditorService);
+        this.#i18n = inject(MonaI18nService);
+        this.messages = this.#i18n.componentMessages("editor", EDITOR_DEFAULT_MESSAGES);
         this.orderedListSelected = computed(() => {
             this.#editorService.state();
             return this.#editorService.editor.isActive("orderedList");
@@ -1213,6 +1322,7 @@ class EditorListComponent {
         ...(ngDevMode ? [{ debugName: "unorderedListSelected" }] : /* istanbul ignore next */ []));
     }
     #editorService;
+    #i18n;
     onOrderedListToggle() {
         this.#editorService.editor.chain().focus().toggleOrderedList().run();
     }
@@ -1220,11 +1330,11 @@ 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\" [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", "type", "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]=\"messages().insertUnorderedList\">\n        <i class=\"ri-list-unordered\"></i>\n    </button>\n    <button\n        monaButton\n        [selected]=\"orderedListSelected()\"\n        [toggleable]=\"false\"\n        (click)=\"onOrderedListToggle()\"\n        [title]=\"messages().insertOrderedList\">\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", "type", "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\" [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" }]
+            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]=\"messages().insertUnorderedList\">\n        <i class=\"ri-list-unordered\"></i>\n    </button>\n    <button\n        monaButton\n        [selected]=\"orderedListSelected()\"\n        [toggleable]=\"false\"\n        (click)=\"onOrderedListToggle()\"\n        [title]=\"messages().insertOrderedList\">\n        <i class=\"ri-list-ordered-2\"></i>\n    </button>\n</mona-button-group>\n" }]
         }] });
 
 class EditorTableCreatorComponent {
@@ -1261,6 +1371,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
 class EditorTableComponent {
     constructor() {
         this.#editorService = inject(EditorService);
+        this.#i18n = inject(MonaI18nService);
+        this.messages = this.#i18n.componentMessages("editor", EDITOR_DEFAULT_MESSAGES);
         this.addColumnBeforeDisabled = computed(() => {
             this.#editorService.state();
             const isTable = this.#editorService.editor.isActive("table");
@@ -1335,6 +1447,7 @@ class EditorTableComponent {
         ...(ngDevMode ? [{ debugName: "toggleHeaderRowDisabled" }] : /* istanbul ignore next */ []));
     }
     #editorService;
+    #i18n;
     onAddColumnBeforeClick() {
         this.#editorService.editor.chain().focus().addColumnBefore().run();
     }
@@ -1373,16 +1486,18 @@ 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\" [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", "type", "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]=\"messages().insertTable\" #insertTableButton>\n        <i class=\"ri-grid-line\"></i>\n    </button>\n    <button\n        monaButton\n        [disabled]=\"addColumnBeforeDisabled()\"\n        (click)=\"onAddColumnBeforeClick()\"\n        [title]=\"messages().addColumnBefore\">\n        <i class=\"ri-insert-column-left\"></i>\n    </button>\n    <button monaButton [disabled]=\"addColumnAfterDisabled()\" (click)=\"onAddColumnAfterClick()\" [title]=\"messages().addColumnAfter\">\n        <i class=\"ri-insert-column-right\"></i>\n    </button>\n    <button monaButton [disabled]=\"addRowBeforeDisabled()\" (click)=\"onAddRowBeforeClick()\" [title]=\"messages().addRowBefore\">\n        <i class=\"ri-insert-row-top\"></i>\n    </button>\n    <button monaButton [disabled]=\"addRowAfterDisabled()\" (click)=\"onAddRowAfterClick()\" [title]=\"messages().addRowAfter\">\n        <i class=\"ri-insert-row-bottom\"></i>\n    </button>\n    <button monaButton [disabled]=\"deleteColumnDisabled()\" (click)=\"onDeleteColumnClick()\" [title]=\"messages().deleteColumn\">\n        <i class=\"ri-delete-column\"></i>\n    </button>\n    <button monaButton [disabled]=\"deleteRowDisabled()\" (click)=\"onDeleteRowClick()\" [title]=\"messages().deleteRow\">\n        <i class=\"ri-delete-row\"></i>\n    </button>\n    <button monaButton [disabled]=\"mergeCellsDisabled()\" (click)=\"onMergeCellsClick()\" [title]=\"messages().mergeCells\">\n        <i class=\"ri-merge-cells-horizontal\"></i>\n    </button>\n    <button monaButton [disabled]=\"splitCellDisabled()\" (click)=\"onSplitCellClick()\" [title]=\"messages().splitCell\">\n        <i class=\"ri-split-cells-horizontal\"></i>\n    </button>\n    <button monaButton [disabled]=\"toggleHeaderRowDisabled()\" (click)=\"onToggleHeaderRow()\" [title]=\"messages().toggleHeaderRow\">\n        <i class=\"ri-table-line\"></i>\n    </button>\n    <button monaButton [disabled]=\"deleteTableDisabled()\" (click)=\"onDeleteTableClick()\" [title]=\"messages().deleteTable\">\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", "type", "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\" [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" }]
+            args: [{ selector: "mona-editor-table", imports: [ButtonGroupComponent, ButtonDirective, PopoverComponent, EditorTableCreatorComponent], template: "<mona-button-group selection=\"single\" [size]=\"'small'\">\n    <button monaButton [title]=\"messages().insertTable\" #insertTableButton>\n        <i class=\"ri-grid-line\"></i>\n    </button>\n    <button\n        monaButton\n        [disabled]=\"addColumnBeforeDisabled()\"\n        (click)=\"onAddColumnBeforeClick()\"\n        [title]=\"messages().addColumnBefore\">\n        <i class=\"ri-insert-column-left\"></i>\n    </button>\n    <button monaButton [disabled]=\"addColumnAfterDisabled()\" (click)=\"onAddColumnAfterClick()\" [title]=\"messages().addColumnAfter\">\n        <i class=\"ri-insert-column-right\"></i>\n    </button>\n    <button monaButton [disabled]=\"addRowBeforeDisabled()\" (click)=\"onAddRowBeforeClick()\" [title]=\"messages().addRowBefore\">\n        <i class=\"ri-insert-row-top\"></i>\n    </button>\n    <button monaButton [disabled]=\"addRowAfterDisabled()\" (click)=\"onAddRowAfterClick()\" [title]=\"messages().addRowAfter\">\n        <i class=\"ri-insert-row-bottom\"></i>\n    </button>\n    <button monaButton [disabled]=\"deleteColumnDisabled()\" (click)=\"onDeleteColumnClick()\" [title]=\"messages().deleteColumn\">\n        <i class=\"ri-delete-column\"></i>\n    </button>\n    <button monaButton [disabled]=\"deleteRowDisabled()\" (click)=\"onDeleteRowClick()\" [title]=\"messages().deleteRow\">\n        <i class=\"ri-delete-row\"></i>\n    </button>\n    <button monaButton [disabled]=\"mergeCellsDisabled()\" (click)=\"onMergeCellsClick()\" [title]=\"messages().mergeCells\">\n        <i class=\"ri-merge-cells-horizontal\"></i>\n    </button>\n    <button monaButton [disabled]=\"splitCellDisabled()\" (click)=\"onSplitCellClick()\" [title]=\"messages().splitCell\">\n        <i class=\"ri-split-cells-horizontal\"></i>\n    </button>\n    <button monaButton [disabled]=\"toggleHeaderRowDisabled()\" (click)=\"onToggleHeaderRow()\" [title]=\"messages().toggleHeaderRow\">\n        <i class=\"ri-table-line\"></i>\n    </button>\n    <button monaButton [disabled]=\"deleteTableDisabled()\" (click)=\"onDeleteTableClick()\" [title]=\"messages().deleteTable\">\n        <i class=\"ri-close-large-line\"></i>\n    </button>\n</mona-button-group>\n\n<mona-popover [target]=\"insertTableButton\" position=\"bottom\" #popoverComponent>\n    <mona-editor-table-creator (insert)=\"onTableInsert($event)\"></mona-editor-table-creator>\n</mona-popover>\n" }]
         }], propDecorators: { popover: [{ type: i0.ViewChild, args: ["popoverComponent", { isSignal: true }] }] } });
 
 class EditorTaskListComponent {
     constructor() {
         this.#editorService = inject(EditorService);
+        this.#i18n = inject(MonaI18nService);
+        this.messages = this.#i18n.componentMessages("editor", EDITOR_DEFAULT_MESSAGES);
         this.taskSelected = computed(() => {
             this.#editorService.state();
             return this.#editorService.editor.isActive("taskItem");
@@ -1390,20 +1505,23 @@ class EditorTaskListComponent {
         ...(ngDevMode ? [{ debugName: "taskSelected" }] : /* istanbul ignore next */ []));
     }
     #editorService;
+    #i18n;
     onTaskToggle() {
         this.#editorService.editor.chain().focus().toggleTaskList().run();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditorTaskListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: EditorTaskListComponent, isStandalone: true, selector: "mona-editor-task-list", ngImport: i0, template: "<button monaButton [selected]=\"taskSelected()\" [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", "type", "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]=\"messages().insertTaskList\">\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", "type", "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()\" [size]=\"'small'\" (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]=\"messages().insertTaskList\">\n    <i class=\"ri-checkbox-fill\"></i>\n</button>\n" }]
         }] });
 
 class EditorTextAlignmentsComponent {
     constructor() {
         this.#editorService = inject(EditorService);
+        this.#i18n = inject(MonaI18nService);
+        this.messages = this.#i18n.componentMessages("editor", EDITOR_DEFAULT_MESSAGES);
         this.alignCenterSelected = computed(() => {
             this.#editorService.state();
             return this.#editorService.editor.isActive({ textAlign: "center" });
@@ -1426,6 +1544,7 @@ class EditorTextAlignmentsComponent {
         ...(ngDevMode ? [{ debugName: "alignRightSelected" }] : /* istanbul ignore next */ []));
     }
     #editorService;
+    #i18n;
     onAlignCenter() {
         if (this.alignCenterSelected()) {
             this.#editorService.editor.chain().focus().unsetTextAlign().run();
@@ -1459,11 +1578,11 @@ 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\" [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", "type", "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]=\"messages().alignLeft\">\n        <i class=\"ri-align-left\"></i>\n    </button>\n    <button\n        monaButton\n        [selected]=\"alignCenterSelected()\"\n        [toggleable]=\"false\"\n        (click)=\"onAlignCenter()\"\n        [title]=\"messages().alignCenter\">\n        <i class=\"ri-align-center\"></i>\n    </button>\n    <button\n        monaButton\n        [selected]=\"alignRightSelected()\"\n        [toggleable]=\"false\"\n        (click)=\"onAlignRight()\"\n        [title]=\"messages().alignRight\">\n        <i class=\"ri-align-right\"></i>\n    </button>\n    <button\n        monaButton\n        [selected]=\"alignJustifySelected()\"\n        [toggleable]=\"false\"\n        (click)=\"onAlignJustify()\"\n        [title]=\"messages().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", "type", "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\" [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" }]
+            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]=\"messages().alignLeft\">\n        <i class=\"ri-align-left\"></i>\n    </button>\n    <button\n        monaButton\n        [selected]=\"alignCenterSelected()\"\n        [toggleable]=\"false\"\n        (click)=\"onAlignCenter()\"\n        [title]=\"messages().alignCenter\">\n        <i class=\"ri-align-center\"></i>\n    </button>\n    <button\n        monaButton\n        [selected]=\"alignRightSelected()\"\n        [toggleable]=\"false\"\n        (click)=\"onAlignRight()\"\n        [title]=\"messages().alignRight\">\n        <i class=\"ri-align-right\"></i>\n    </button>\n    <button\n        monaButton\n        [selected]=\"alignJustifySelected()\"\n        [toggleable]=\"false\"\n        (click)=\"onAlignJustify()\"\n        [title]=\"messages().justify\">\n        <i class=\"ri-align-justify\"></i>\n    </button>\n</mona-button-group>\n" }]
         }] });
 
 class EditorComponent {
@@ -1617,5 +1736,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { EditorComponent };
+export { EDITOR_DEFAULT_MESSAGES, EditorComponent };
 //# sourceMappingURL=nanahoshi-mona-ui-editor.mjs.map