@shival99/z-ui 2.6.0 → 2.6.1

package/fesm2022/shival99-z-ui-components-z-editor.mjs

@@ -11,7 +11,7 @@ import { ZPopoverDirective } from '@shival99/z-ui/components/z-popover';
 import { ZTooltipDirective } from '@shival99/z-ui/components/z-tooltip';
 import { ZTranslateService } from '@shival99/z-ui/services';
 import { zTransform, zUuid, Z_EMOJI_SHEET, zMergeClasses, zCreateEvent, Z_EMOJI_KEYWORDS } from '@shival99/z-ui/utils';
-import { Editor, posToDOMRect } from '@tiptap/core';
+import { Extension, Editor, posToDOMRect } from '@tiptap/core';
 import BubbleMenu from '@tiptap/extension-bubble-menu';
 import Code from '@tiptap/extension-code';
 import HorizontalRule from '@tiptap/extension-horizontal-rule';
@@ -29,6 +29,24 @@ import { merge, filter } from 'rxjs';
 import ImageResize from 'tiptap-extension-resize-image';
 import { cva } from 'class-variance-authority';
 
+const Z_EDITOR_LINE_HEIGHT_OPTIONS = ['1', '1.15', '1.5', '1.75', '2'];
+const Z_EDITOR_LINE_HEIGHT_EXTENSION = Extension.create({
+    name: 'zEditorLineHeight',
+    addGlobalAttributes() {
+        return [
+            {
+                types: ['paragraph', 'heading'],
+                attributes: {
+                    lineHeight: {
+                        default: null,
+                        parseHTML: (element) => element.style.lineHeight || null,
+                        renderHTML: (attributes) => attributes.lineHeight ? { style: `line-height: ${attributes.lineHeight}` } : {},
+                    },
+                },
+            },
+        ];
+    },
+});
 const Z_EDITOR_DEFAULT_TOOLBAR = [
     { id: 'undo', icon: 'lucideUndo', label: 'Undo' },
     { id: 'redo', icon: 'lucideRedo', label: 'Redo' },
@@ -38,6 +56,7 @@ const Z_EDITOR_DEFAULT_TOOLBAR = [
     { id: 'strike', icon: 'lucideStrikethrough', label: 'Strike' },
     { id: 'code', icon: 'lucideCode', label: 'Code' },
     { id: 'blockStyle', icon: 'lucidePilcrow', label: 'Block style' },
+    { id: 'lineHeight', icon: 'lucideAlignVerticalSpaceAround', label: 'Line height' },
     { id: 'bulletList', icon: 'lucideList', label: 'Bullet list' },
     { id: 'orderedList', icon: 'lucideListOrdered', label: 'Ordered list' },
     { id: 'blockquote', icon: 'lucideQuote', label: 'Blockquote' },
@@ -345,6 +364,7 @@ class ZEditorComponent {
     ];
     textColorSwatches = Z_EDITOR_COLOR_SWATCHES;
     backgroundColorSwatches = Z_EDITOR_BACKGROUND_SWATCHES;
+    lineHeightOptions = Z_EDITOR_LINE_HEIGHT_OPTIONS;
     slashCommands = Z_EDITOR_SLASH_COMMANDS;
     blockStyleOptions = [
         { command: 'paragraph', icon: 'lucidePilcrow', label: 'Paragraph' },
@@ -389,6 +409,7 @@ class ZEditorComponent {
     _alignPopoverControl = null;
     _textColorPopoverControl = null;
     _backgroundColorPopoverControl = null;
+    _lineHeightPopoverControl = null;
     _slashMenuPopoverControl = null;
     _dismissedSlashMenu = null;
     _linkPopoverControl = null;
@@ -436,6 +457,8 @@ class ZEditorComponent {
     ...(ngDevMode ? [{ debugName: "activeAlignLabel" }] : /* istanbul ignore next */ []));
     activeAlignIcon = computed(() => this.alignOptions.find(option => option.command === this.activeAlign())?.icon ?? 'lucideAlignLeft', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "activeAlignIcon" }] : /* istanbul ignore next */ []));
+    activeLineHeight = computed(() => this._getActiveLineHeight(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeLineHeight" }] : /* istanbul ignore next */ []));
     filteredSlashCommands = computed(() => {
         const query = this.slashMenuState().query.trim().toLowerCase();
         const commands = this.slashCommands;
@@ -482,6 +505,7 @@ class ZEditorComponent {
             'strike',
             'code',
             'blockStyle',
+            'lineHeight',
             'clearFormatting',
             'textColor',
             'backgroundColor',
@@ -690,6 +714,8 @@ class ZEditorComponent {
                 break;
             case 'blockStyle':
                 break;
+            case 'lineHeight':
+                break;
             case 'heading1':
                 editor.chain().focus().toggleHeading({ level: 1 }).run();
                 break;
@@ -753,7 +779,14 @@ class ZEditorComponent {
                 editor.chain().focus().redo().run();
                 break;
             case 'clearFormatting':
-                editor.chain().focus().clearNodes().unsetAllMarks().run();
+                editor
+                    .chain()
+                    .focus()
+                    .clearNodes()
+                    .unsetAllMarks()
+                    .updateAttributes('paragraph', { lineHeight: null })
+                    .updateAttributes('heading', { lineHeight: null })
+                    .run();
                 this._collapseSelectionToAnchor();
                 break;
         }
@@ -792,6 +825,7 @@ class ZEditorComponent {
                     excludes: 'code',
                 }),
                 Underline,
+                Z_EDITOR_LINE_HEIGHT_EXTENSION,
                 TextStyle,
                 FontSize,
                 Color,
@@ -1039,6 +1073,7 @@ class ZEditorComponent {
     _isAnyBubbleMenuPopoverOpen() {
         return (!!this._blockStylePopoverControl?.isVisible() ||
             !!this._alignPopoverControl?.isVisible() ||
+            !!this._lineHeightPopoverControl?.isVisible() ||
             !!this._textColorPopoverControl?.isVisible() ||
             !!this._backgroundColorPopoverControl?.isVisible());
     }
@@ -1156,6 +1191,8 @@ class ZEditorComponent {
                 return this.activeBlockStyle() !== 'paragraph';
             case 'align':
                 return this.activeAlign() !== 'alignLeft';
+            case 'lineHeight':
+                return this.activeLineHeight() !== null;
             default:
                 return false;
         }
@@ -1175,6 +1212,7 @@ class ZEditorComponent {
             case 'emoji':
             case 'blockStyle':
             case 'align':
+            case 'lineHeight':
             case 'textColor':
             case 'backgroundColor':
                 return false;
@@ -1207,6 +1245,20 @@ class ZEditorComponent {
         this.onToolbarClick(command);
         this._closePopover(closePopover, this._alignPopoverControl);
     }
+    applyLineHeight(value, closePopover) {
+        const editor = this._editor;
+        if (!editor) {
+            return;
+        }
+        editor
+            .chain()
+            .focus()
+            .updateAttributes('paragraph', { lineHeight: value })
+            .updateAttributes('heading', { lineHeight: value })
+            .run();
+        this._closePopover(closePopover, this._lineHeightPopoverControl);
+        this._refreshEditorState();
+    }
     insertEmoji(emoji) {
         this._editor?.chain().focus().insertContent(emoji).run();
         this._refreshEditorState();
@@ -1231,6 +1283,9 @@ class ZEditorComponent {
     onAlignPopoverControl(control) {
         this._alignPopoverControl = control;
     }
+    onLineHeightPopoverControl(control) {
+        this._lineHeightPopoverControl = control;
+    }
     onTextColorPopoverControl(control) {
         this._textColorPopoverControl = control;
     }
@@ -1742,6 +1797,17 @@ class ZEditorComponent {
         }
         return 'alignLeft';
     }
+    _getActiveLineHeight() {
+        const editor = this._editor;
+        this._selectionVersion();
+        if (!editor) {
+            return null;
+        }
+        const lineHeight = editor.getAttributes('paragraph')['lineHeight'] ?? editor.getAttributes('heading')['lineHeight'];
+        return Z_EDITOR_LINE_HEIGHT_OPTIONS.includes(lineHeight)
+            ? lineHeight
+            : null;
+    }
     _createImageExtension(options) {
         return ImageResize.extend({
             addAttributes() {
@@ -1793,7 +1859,7 @@ class ZEditorComponent {
                 useExisting: forwardRef(() => ZEditorComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "_editorHost", first: true, predicate: ["editorHost"], descendants: true, isSignal: true }, { propertyName: "_floatingToolbar", first: true, predicate: ["floatingToolbar"], descendants: true, isSignal: true }, { propertyName: "_slashMenuTrigger", first: true, predicate: ["slashMenuTrigger"], descendants: true, isSignal: true }, { propertyName: "_linkPopoverTrigger", first: true, predicate: ["linkPopoverTrigger"], descendants: true, isSignal: true }, { propertyName: "_slashMenuScrollHost", first: true, predicate: ["slashMenuScrollHost"], descendants: true, isSignal: true }], exportAs: ["zEditor"], ngImport: i0, template: "<div [class]=\"wrapperClasses()\" [class.z-editor-disabled]=\"isDisabled()\" [class.z-editor-readonly]=\"zReadonly()\">\n  @if (zLabel()) {\n    <label [for]=\"editorId\" class=\"text-xs leading-none font-medium\" [class]=\"zLabelClass()\">\n      {{ zLabel() }}\n      @if (zRequired()) {\n        <span class=\"text-destructive! ml-0.5\">*</span>\n      }\n    </label>\n  }\n\n  <div [class]=\"editorClasses()\">\n    @if (showToolbar()) {\n      <div class=\"z-editor-toolbar\" role=\"toolbar\" [attr.aria-controls]=\"editorId\">\n        @for (item of toolbarItems(); track item.id) {\n          @switch (item.id) {\n            @case ('emoji') {\n              <button\n                type=\"button\"\n                class=\"z-editor-toolbar-button\"\n                z-popover\n                [zPopoverContent]=\"emojiPopover\"\n                zPosition=\"bottom-left\"\n                zTrigger=\"click\"\n                zClass=\"z-editor-emoji-popover\"\n                (zControl)=\"onEmojiPopoverControl($event)\"\n                (zShow)=\"onEmojiPopoverShow()\"\n                [disabled]=\"item.disabled\"\n                [attr.aria-label]=\"item.label\"\n                [attr.title]=\"item.label\">\n                <i z-icon [zType]=\"item.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n              </button>\n            }\n            @case ('blockStyle') {\n              <button\n                type=\"button\"\n                class=\"z-editor-toolbar-button\"\n                z-popover\n                [zPopoverContent]=\"blockStylePopover\"\n                zPosition=\"bottom-left\"\n                zTrigger=\"click\"\n                zClass=\"z-editor-menu-popover\"\n                (zControl)=\"onBlockStylePopoverControl($event)\"\n                (zHideStart)=\"onFloatingPopoverHide()\"\n                [disabled]=\"item.disabled\"\n                [attr.aria-label]=\"item.label\"\n                [attr.title]=\"item.label\">\n                <i z-icon [zType]=\"item.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n              </button>\n            }\n            @case ('textColor') {\n              @let textColor = activeTextColor();\n              <button\n                type=\"button\"\n                class=\"z-editor-toolbar-button\"\n                z-popover\n                [zPopoverContent]=\"textColorPopover\"\n                zPosition=\"bottom-left\"\n                zTrigger=\"click\"\n                zClass=\"z-editor-color-popover\"\n                (zControl)=\"onTextColorPopoverControl($event)\"\n                (zHideStart)=\"onFloatingPopoverHide()\"\n                [disabled]=\"item.disabled\"\n                [attr.aria-label]=\"item.label\"\n                [attr.title]=\"item.label\">\n                <i z-icon [zType]=\"item.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n                <span class=\"z-editor-color-indicator\" [style.background]=\"textColor\"></span>\n              </button>\n            }\n            @case ('backgroundColor') {\n              @let bgColor = activeBackgroundColor();\n              <button\n                type=\"button\"\n                class=\"z-editor-toolbar-button\"\n                z-popover\n                [zPopoverContent]=\"backgroundColorPopover\"\n                zPosition=\"bottom-left\"\n                zTrigger=\"click\"\n                zClass=\"z-editor-color-popover\"\n                (zControl)=\"onBackgroundColorPopoverControl($event)\"\n                (zHideStart)=\"onFloatingPopoverHide()\"\n                [disabled]=\"item.disabled\"\n                [attr.aria-label]=\"item.label\"\n                [attr.title]=\"item.label\">\n                <i z-icon [zType]=\"item.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n                <span class=\"z-editor-color-indicator\" [style.background]=\"bgColor\"></span>\n              </button>\n            }\n            @case ('align') {\n              <button\n                type=\"button\"\n                class=\"z-editor-toolbar-button\"\n                z-popover\n                [zPopoverContent]=\"alignPopover\"\n                zPosition=\"bottom-left\"\n                zTrigger=\"click\"\n                zClass=\"z-editor-menu-popover\"\n                (zControl)=\"onAlignPopoverControl($event)\"\n                (zHideStart)=\"onFloatingPopoverHide()\"\n                [disabled]=\"item.disabled\"\n                [attr.aria-label]=\"item.label\"\n                [attr.title]=\"item.label\">\n                <i z-icon [zType]=\"activeAlignIcon()\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n              </button>\n            }\n            @default {\n              <button\n                type=\"button\"\n                class=\"z-editor-toolbar-button\"\n                [class.z-editor-toolbar-button-active]=\"item.active\"\n                [disabled]=\"item.disabled\"\n                [attr.aria-label]=\"item.label\"\n                [attr.title]=\"item.label\"\n                (click)=\"onToolbarClick(item.id)\">\n                <i z-icon [zType]=\"item.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n              </button>\n            }\n          }\n        }\n      </div>\n    }\n\n    <div\n      #editorHost\n      [id]=\"editorId\"\n      class=\"z-editor-content\"\n      role=\"textbox\"\n      [attr.aria-multiline]=\"true\"\n      [attr.aria-readonly]=\"isDisabled() || zReadonly()\"></div>\n  </div>\n\n  @if (hasError()) {\n    <p class=\"text-destructive animate-in fade-in slide-in-from-top-1 m-0 text-xs duration-200\">\n      {{ errorMessage() }}\n    </p>\n  }\n\n  <ng-template #emojiPopover>\n    @let emojiCategoryLabel =\n      emojiSearchQuery() ? ('i18n_z_ui_emoji_search_results' | translate) : (activeEmojiCategoryLabel() | translate);\n    @let activeCategoryId = activeEmojiCategoryId();\n    <div class=\"z-editor-emoji-sheet\">\n      <div class=\"z-editor-emoji-header\">\n        <div class=\"z-editor-emoji-title mb-1\">\n          <span class=\"z-editor-emoji-title-dot\" aria-hidden=\"true\"></span>\n          <span>{{ emojiCategoryLabel }}</span>\n        </div>\n        <z-input\n          class=\"z-editor-emoji-search\"\n          zSize=\"sm\"\n          [zSearch]=\"true\"\n          [zDebounce]=\"150\"\n          [zPlaceholder]=\"'i18n_z_ui_emoji_search_placeholder' | translate\"\n          [ngModel]=\"emojiSearch()\"\n          (zOnSearch)=\"emojiSearch.set($any($event))\" />\n      </div>\n      <div class=\"z-editor-emoji-body\">\n        @if (hasEmojiResults()) {\n          <div class=\"z-editor-emoji-grid\">\n            @for (emoji of activeEmojis(); track emoji) {\n              <button\n                type=\"button\"\n                class=\"z-editor-emoji-button\"\n                [attr.aria-label]=\"emoji\"\n                (click)=\"insertEmoji($any(emoji))\">\n                {{ emoji }}\n              </button>\n            }\n          </div>\n        } @else {\n          <div class=\"z-editor-emoji-empty\">\n            <span class=\"z-editor-emoji-empty-icon\" aria-hidden=\"true\">\n              <i z-icon zType=\"lucideSearchX\" zSize=\"14\" [zStrokeWidth]=\"2\"></i>\n            </span>\n            <span>{{ 'i18n_z_ui_emoji_no_results' | translate }}</span>\n          </div>\n        }\n      </div>\n      <div class=\"z-editor-emoji-footer\" role=\"tablist\">\n        @for (category of emojiCategories; track category.id) {\n          <button\n            type=\"button\"\n            role=\"tab\"\n            class=\"z-editor-emoji-footer-button cursor-pointer!\"\n            [class.z-editor-emoji-footer-button-active]=\"category.id === activeCategoryId\"\n            [attr.aria-label]=\"category.labelKey | translate\"\n            [attr.aria-selected]=\"category.id === activeCategoryId\"\n            [attr.title]=\"category.labelKey | translate\"\n            (click)=\"setEmojiCategory(category.id)\">\n            <i z-icon [zType]=\"category.icon\" zSize=\"15\" [zStrokeWidth]=\"2\"></i>\n          </button>\n        }\n      </div>\n    </div>\n  </ng-template>\n\n  <ng-template #blockStylePopover let-close=\"close\">\n    <div class=\"z-editor-menu-list\">\n      @for (option of blockStyleOptions; track option.command) {\n        <button\n          type=\"button\"\n          class=\"z-editor-menu-item\"\n          [class.z-editor-menu-item-active]=\"activeBlockStyle() === option.command\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"applyBlockStyle(option.command, close)\">\n          <i z-icon [zType]=\"option.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n          <span>{{ option.label }}</span>\n        </button>\n      }\n    </div>\n  </ng-template>\n\n  <ng-template #alignPopover let-close=\"close\">\n    <div class=\"z-editor-menu-list\">\n      @for (option of alignOptions; track option.command) {\n        <button\n          type=\"button\"\n          class=\"z-editor-menu-item\"\n          [class.z-editor-menu-item-active]=\"activeAlign() === option.command\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"applyAlign(option.command, close)\">\n          <i z-icon [zType]=\"option.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n          <span>{{ option.label }}</span>\n        </button>\n      }\n    </div>\n  </ng-template>\n\n  <ng-template #textColorPopover let-close=\"close\">\n    @let currentTextColor = activeTextColor();\n    <div class=\"z-editor-color-grid\">\n      @for (color of textColorSwatches; track color) {\n        <button\n          type=\"button\"\n          class=\"z-editor-color-swatch\"\n          [class.z-editor-color-swatch-active]=\"currentTextColor === color\"\n          [style.background]=\"color\"\n          [attr.aria-label]=\"'Text color ' + color\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"setTextColor(color, close)\"></button>\n      }\n      <label class=\"z-editor-color-custom\">\n        <input type=\"color\" [value]=\"currentTextColor\" (input)=\"setTextColorFromEvent($event, close)\" />\n        {{ currentTextColor }}\n      </label>\n      <button\n        type=\"button\"\n        z-button\n        zType=\"outline\"\n        zSize=\"sm\"\n        class=\"z-editor-color-reset\"\n        (mousedown)=\"$event.preventDefault()\"\n        (click)=\"unsetTextColor(close)\">\n        Reset\n      </button>\n    </div>\n  </ng-template>\n\n  <ng-template #backgroundColorPopover let-close=\"close\">\n    @let currentBgColor = activeBackgroundColor();\n    <div class=\"z-editor-color-grid\">\n      @for (color of backgroundColorSwatches; track color) {\n        <button\n          type=\"button\"\n          class=\"z-editor-color-swatch\"\n          [class.z-editor-color-swatch-active]=\"currentBgColor === color\"\n          [style.background]=\"color\"\n          [attr.aria-label]=\"'Background color ' + color\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"setBackgroundColor(color, close)\"></button>\n      }\n      <label class=\"z-editor-color-custom\">\n        <input type=\"color\" [value]=\"currentBgColor\" (input)=\"setBackgroundColorFromEvent($event, close)\" />\n        {{ currentBgColor }}\n      </label>\n      <button\n        type=\"button\"\n        z-button\n        zType=\"outline\"\n        zSize=\"sm\"\n        class=\"z-editor-color-reset\"\n        (mousedown)=\"$event.preventDefault()\"\n        (click)=\"unsetBackgroundColor(close)\">\n        Reset\n      </button>\n    </div>\n  </ng-template>\n\n  <div #floatingToolbar class=\"z-editor-floating-toolbar\" role=\"toolbar\" [attr.aria-controls]=\"editorId\">\n    @for (item of floatingToolbarItems(); track item.id) {\n      @switch (item.id) {\n        @case ('blockStyle') {\n          <button\n            type=\"button\"\n            class=\"z-editor-toolbar-button\"\n            z-popover\n            [zPopoverContent]=\"blockStylePopover\"\n            zPosition=\"bottom-left\"\n            zTrigger=\"click\"\n            zClass=\"z-editor-menu-popover\"\n            (zControl)=\"onBlockStylePopoverControl($event)\"\n            (zHideStart)=\"onFloatingPopoverHide()\"\n            [disabled]=\"item.disabled\"\n            [attr.aria-label]=\"item.label\"\n            [attr.title]=\"activeBlockStyleLabel()\"\n            (mousedown)=\"$event.preventDefault()\">\n            <i z-icon [zType]=\"item.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n          </button>\n        }\n        @case ('textColor') {\n          @let textColor = activeTextColor();\n          <button\n            type=\"button\"\n            class=\"z-editor-toolbar-button\"\n            z-popover\n            [zPopoverContent]=\"textColorPopover\"\n            zPosition=\"bottom-left\"\n            zTrigger=\"click\"\n            zClass=\"z-editor-color-popover\"\n            (zControl)=\"onTextColorPopoverControl($event)\"\n            (zHideStart)=\"onFloatingPopoverHide()\"\n            [disabled]=\"item.disabled\"\n            [attr.aria-label]=\"item.label\"\n            [attr.title]=\"item.label\"\n            (mousedown)=\"$event.preventDefault()\">\n            <i z-icon [zType]=\"item.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n            <span class=\"z-editor-color-indicator\" [style.background]=\"textColor\"></span>\n          </button>\n        }\n        @case ('backgroundColor') {\n          @let bgColor = activeBackgroundColor();\n          <button\n            type=\"button\"\n            class=\"z-editor-toolbar-button\"\n            z-popover\n            [zPopoverContent]=\"backgroundColorPopover\"\n            zPosition=\"bottom-left\"\n            zTrigger=\"click\"\n            zClass=\"z-editor-color-popover\"\n            (zControl)=\"onBackgroundColorPopoverControl($event)\"\n            (zHideStart)=\"onFloatingPopoverHide()\"\n            [disabled]=\"item.disabled\"\n            [attr.aria-label]=\"item.label\"\n            [attr.title]=\"item.label\"\n            (mousedown)=\"$event.preventDefault()\">\n            <i z-icon [zType]=\"item.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n            <span class=\"z-editor-color-indicator\" [style.background]=\"bgColor\"></span>\n          </button>\n        }\n        @case ('align') {\n          <button\n            type=\"button\"\n            class=\"z-editor-toolbar-button\"\n            z-popover\n            [zPopoverContent]=\"alignPopover\"\n            zPosition=\"bottom-left\"\n            zTrigger=\"click\"\n            zClass=\"z-editor-menu-popover\"\n            (zControl)=\"onAlignPopoverControl($event)\"\n            (zHideStart)=\"onFloatingPopoverHide()\"\n            [disabled]=\"item.disabled\"\n            [attr.aria-label]=\"item.label\"\n            [attr.title]=\"activeAlignLabel()\"\n            (mousedown)=\"$event.preventDefault()\">\n            <i z-icon [zType]=\"activeAlignIcon()\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n          </button>\n        }\n        @default {\n          <button\n            type=\"button\"\n            class=\"z-editor-toolbar-button\"\n            z-tooltip\n            [zContent]=\"item.tooltip\"\n            zPosition=\"top\"\n            [zAlwaysShow]=\"true\"\n            [zDisabled]=\"item.disabled || !item.shortcut || !floatingToolbarVisible()\"\n            [class.z-editor-toolbar-button-active]=\"item.active\"\n            [disabled]=\"item.disabled\"\n            [attr.aria-label]=\"item.label\"\n            [attr.title]=\"item.label\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"onFloatingToolbarClick(item.id)\">\n            <i z-icon [zType]=\"item.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n          </button>\n        }\n      }\n    }\n  </div>\n\n  <span\n    #slashMenuTrigger\n    class=\"z-editor-slash-menu-trigger\"\n    z-popover\n    [zPopoverContent]=\"slashMenuPopover\"\n    zTrigger=\"manual\"\n    zPosition=\"bottom-left\"\n    zClass=\"z-editor-slash-popover\"\n    [zOffset]=\"4\"\n    [zPopoverWidth]=\"300\"\n    [style.left.px]=\"slashMenuState().left\"\n    [style.top.px]=\"slashMenuState().top\"\n    (zControl)=\"onSlashMenuPopoverControl($event)\"\n    (zHide)=\"onSlashMenuPopoverHide()\"></span>\n\n  <ng-template #slashMenuPopover>\n    @let slashActiveIndex = slashMenuActiveIndex();\n    <div class=\"z-editor-slash-menu-shell\">\n      <div #slashMenuScrollHost class=\"z-editor-slash-menu-scrollbar\">\n        <div class=\"z-editor-slash-menu\" role=\"listbox\" [attr.aria-controls]=\"editorId\">\n          @for (item of filteredSlashCommands(); track item.id) {\n            @if (item.showGroupLabel) {\n              <div class=\"z-editor-slash-menu-group\">\n                {{ item.group }}\n              </div>\n            }\n            <button\n              type=\"button\"\n              class=\"z-editor-slash-menu-item\"\n              role=\"option\"\n              [class.z-editor-slash-menu-item-active]=\"$index === slashActiveIndex\"\n              [attr.aria-selected]=\"$index === slashActiveIndex\"\n              (mousedown)=\"$event.preventDefault()\"\n              (click)=\"applySlashCommand(item)\">\n              <i z-icon [zType]=\"item.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n              <span class=\"z-editor-slash-menu-copy\">\n                <span class=\"z-editor-slash-menu-label\">{{ item.label }}</span>\n              </span>\n            </button>\n          } @empty {\n            <div class=\"z-editor-slash-menu-empty\">\n              <i z-icon zType=\"lucideSearchX\" zSize=\"28\" [zStrokeWidth]=\"1.8\"></i>\n              <span>{{ 'i18n_z_ui_editor_no_commands' | translate }}</span>\n            </div>\n          }\n        </div>\n      </div>\n      <div class=\"z-editor-slash-menu-footer\" aria-hidden=\"true\">\n        <span>\n          <kbd>\u2191\u2193</kbd>\n          {{ 'i18n_z_ui_editor_shortcut_navigate' | translate }}\n        </span>\n        <span>\n          <kbd>Esc</kbd>\n          {{ 'i18n_z_ui_editor_shortcut_abort' | translate }}\n        </span>\n        <span>\n          <kbd>\u21B5</kbd>\n          {{ 'i18n_z_ui_editor_shortcut_select' | translate }}\n        </span>\n      </div>\n    </div>\n  </ng-template>\n\n  <span\n    #linkPopoverTrigger\n    class=\"z-editor-link-popover-trigger\"\n    z-popover\n    [zPopoverContent]=\"linkPopover\"\n    zTrigger=\"manual\"\n    zPosition=\"bottom-left\"\n    zClass=\"z-editor-link-popover\"\n    [zOffset]=\"6\"\n    [zPopoverWidth]=\"320\"\n    [style.left.px]=\"linkPopoverState().left\"\n    [style.top.px]=\"linkPopoverState().top\"\n    [style.width.px]=\"linkPopoverState().width\"\n    [style.height.px]=\"linkPopoverState().height\"\n    (zControl)=\"onLinkPopoverControl($event)\"\n    (zHideStart)=\"onLinkPopoverHide()\"></span>\n\n  <ng-template #linkPopover>\n    <div class=\"z-editor-link-popover-content\" (keydown.escape)=\"closeLinkPopover()\">\n      <ng-template #linkPrefix>\n        <z-icon zType=\"lucideLink\" zSize=\"16\" class=\"text-muted-foreground\" />\n      </ng-template>\n      <z-input\n        zType=\"url\"\n        zSize=\"sm\"\n        class=\"z-editor-link-popover-input\"\n        [zPrefix]=\"linkPrefix\"\n        zPlaceholder=\"https://example.com\"\n        [zValidators]=\"linkValidators\"\n        [ngModel]=\"linkUrl()\"\n        (ngModelChange)=\"onLinkUrlChange($event)\"\n        (zOnEnter)=\"applyLink()\" />\n      <div class=\"z-editor-link-popover-actions\">\n        <button\n          type=\"button\"\n          z-button\n          zType=\"ghost\"\n          zSize=\"sm\"\n          [zDisabled]=\"!canApplyLink()\"\n          (click)=\"applyLink()\"\n          aria-label=\"Apply link\">\n          <z-icon zType=\"lucideCheck\" zSize=\"16\" [zStrokeWidth]=\"2.5\" />\n        </button>\n        <button\n          type=\"button\"\n          z-button\n          zType=\"ghost\"\n          zSize=\"sm\"\n          [zDisabled]=\"!activeLinkHref()\"\n          (click)=\"openActiveLink()\"\n          aria-label=\"Open link\">\n          <z-icon zType=\"lucideExternalLink\" zSize=\"16\" [zStrokeWidth]=\"2.5\" />\n        </button>\n        <button\n          type=\"button\"\n          z-button\n          zType=\"ghost-destructive\"\n          zSize=\"sm\"\n          [zDisabled]=\"!activeLinkHref()\"\n          (click)=\"removeLink()\"\n          aria-label=\"Remove link\">\n          <z-icon zType=\"lucideUnlink\" zSize=\"16\" [zStrokeWidth]=\"2.5\" />\n        </button>\n      </div>\n    </div>\n  </ng-template>\n</div>\n", styles: [".z-editor-wrapper .z-editor-toolbar{display:flex;flex-wrap:wrap;gap:.125rem;align-items:center;border-bottom:.0625rem solid var(--border);border-top-left-radius:.375rem;border-top-right-radius:.375rem;background-color:color-mix(in srgb,var(--muted) 30%,transparent);padding:.5rem}.z-editor-wrapper .z-editor-toolbar-button{position:relative;display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border-radius:var(--radius-xs);padding:0;color:var(--muted-foreground);transition:background-color .15s ease,color .15s ease,opacity .15s ease}.z-editor-wrapper .z-editor-toolbar-button:hover:not(:disabled){background-color:var(--accent);color:var(--foreground)}.z-editor-wrapper .z-editor-toolbar-button:disabled{cursor:not-allowed;opacity:.45}.z-editor-wrapper .z-editor-toolbar-button:is(.z-editor-toolbar-button-active,.z-popover-open,:focus):not(:disabled){background-color:color-mix(in srgb,var(--primary) 10%,transparent);color:var(--primary)}.z-editor-wrapper .z-editor-content{position:relative;border-bottom-right-radius:.375rem;border-bottom-left-radius:.375rem}.z-editor-wrapper .z-editor-prosemirror{width:100%;outline:none;padding:.75rem;color:var(--foreground)}.z-editor-wrapper .z-editor-prosemirror>*{margin-top:.75rem;margin-bottom:.75rem}.z-editor-wrapper .z-editor-prosemirror>:first-child{margin-top:0}.z-editor-wrapper .z-editor-prosemirror>:last-child{margin-bottom:0}.z-editor-wrapper .z-editor-prosemirror p{line-height:1.5}.z-editor-wrapper .z-editor-prosemirror a{color:var(--primary);font-weight:500;text-decoration-line:underline;text-decoration-color:currentcolor;text-decoration-thickness:.0625rem;text-underline-offset:.1875rem;cursor:pointer;transition:text-decoration-color .15s ease}.z-editor-wrapper .z-editor-prosemirror a:hover{text-decoration-color:color-mix(in srgb,currentcolor 70%,transparent)}.z-editor-wrapper .z-editor-prosemirror .mention{color:var(--primary);font-weight:500}.z-editor-wrapper .z-editor-prosemirror :is(h1,h2,h3,h4,h5,h6){color:var(--foreground);font-weight:700;line-height:1.2}.z-editor-wrapper .z-editor-prosemirror h1{font-size:1.875rem}.z-editor-wrapper .z-editor-prosemirror h2{font-size:1.5rem}.z-editor-wrapper .z-editor-prosemirror h3{font-size:1.25rem}.z-editor-wrapper .z-editor-prosemirror h4{font-size:1.125rem}.z-editor-wrapper .z-editor-prosemirror h5,.z-editor-wrapper .z-editor-prosemirror h6{font-size:1rem}.z-editor-wrapper .z-editor-prosemirror blockquote{border-left:.25rem solid var(--border);padding-left:1rem;font-style:italic;color:var(--muted-foreground)}.z-editor-wrapper .z-editor-prosemirror [data-type=horizontalRule]{margin-top:2rem;margin-bottom:2rem;padding-top:.5rem;padding-bottom:.5rem}.z-editor-wrapper .z-editor-prosemirror hr{border:0;border-top:.0625rem solid var(--border)}.z-editor-wrapper .z-editor-prosemirror pre{overflow-x:auto;border:.0625rem solid var(--border);border-radius:var(--radius-md);background-color:var(--muted);padding:.75rem 1rem;font-size:.875rem;line-height:1.5;white-space:pre-wrap;word-break:break-word}.z-editor-wrapper .z-editor-prosemirror pre code{display:inline;border:0;border-radius:0;background-color:transparent;padding:0;color:inherit;font:inherit}.z-editor-wrapper .z-editor-prosemirror code{display:inline-block;border:.0625rem solid var(--border);border-radius:var(--radius-md);background-color:var(--muted);padding:.125rem .375rem;color:var(--foreground);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:.875em;font-weight:500}.z-editor-wrapper .z-editor-prosemirror :is(ul,ol){padding-left:1.5rem}.z-editor-wrapper .z-editor-prosemirror ul{list-style:disc}.z-editor-wrapper .z-editor-prosemirror ol{list-style:decimal}.z-editor-wrapper .z-editor-prosemirror li{margin-top:.375rem;margin-bottom:.375rem;padding-left:.375rem}.z-editor-wrapper .z-editor-prosemirror img{display:block;max-width:100%;border-radius:var(--radius-md)}.z-editor-wrapper .z-editor-prosemirror img[data-text-align=center]{margin-right:auto;margin-left:auto}.z-editor-wrapper .z-editor-prosemirror img[data-text-align=right]{margin-right:0;margin-left:auto}.z-editor-wrapper .z-editor-prosemirror img[data-text-align=left],.z-editor-wrapper .z-editor-prosemirror img[data-text-align=justify]{margin-right:auto;margin-left:0}.z-editor-wrapper .z-editor-prosemirror img.ProseMirror-selectednode{outline:.125rem solid var(--primary)}.z-editor-wrapper .z-editor-prosemirror .image-resizer{display:inline-flex;position:relative;flex-grow:0}.z-editor-wrapper .z-editor-prosemirror .image-resizer .resize-trigger{position:absolute;right:-6px;bottom:-9px;width:12px;height:12px;cursor:nwse-resize;border-radius:50%;background-color:var(--primary);opacity:0;transition:opacity .2s ease}.z-editor-wrapper .z-editor-prosemirror .image-resizer:hover .resize-trigger{opacity:1}.z-editor-wrapper .z-editor-prosemirror .image-resizer .image-alignment{display:flex;gap:4px;position:absolute;top:-32px;left:0;padding:4px;border-radius:var(--radius-xs);background-color:var(--popover);box-shadow:0 2px 8px #00000026;opacity:0;transition:opacity .2s ease;pointer-events:none}.z-editor-wrapper .z-editor-prosemirror .image-resizer:hover .image-alignment{opacity:1;pointer-events:auto}.z-editor-wrapper .z-editor-prosemirror .ProseMirror-selectednode:not(img):not(pre):not([data-node-view-wrapper]){background-color:color-mix(in srgb,var(--primary) 20%,transparent)}.z-editor-wrapper .z-editor-prosemirror :is(p,h1,h2,h3,h4,h5,h6).is-empty:before{float:left;height:0;color:var(--muted-foreground);content:attr(data-placeholder);pointer-events:none}.z-editor-placeholder-first-line .z-editor-wrapper .z-editor-prosemirror :is(p,h1,h2,h3,h4,h5,h6).is-empty:before{content:none}.z-editor-placeholder-first-line .z-editor-wrapper .z-editor-prosemirror :is(p,h1,h2,h3,h4,h5,h6).is-editor-empty:first-child:before{content:attr(data-placeholder)}.z-editor-wrapper.z-editor-disabled .z-editor-toolbar,.z-editor-wrapper.z-editor-disabled .z-editor-content{pointer-events:none}.z-editor-wrapper.z-editor-readonly .z-editor-toolbar{display:none}.z-editor-wrapper.z-editor-readonly .z-editor-content{border-radius:var(--radius-md)}.z-editor-wrapper.z-editor-readonly .z-editor-prosemirror{cursor:default}.z-editor-link-modal{padding-top:0;padding-bottom:0}.z-editor-link-modal .z-modal-scrollbar main{min-height:0;padding:1rem}.z-editor-emoji-popover{padding:0;overflow:hidden;box-shadow:0 .5rem 1.5rem -.25rem #0000002e,0 .25rem .5rem -.125rem #0000001a}.z-editor-color-popover{padding:.5rem}.z-editor-menu-popover{padding:.25rem}.z-editor-menu-list{display:flex;min-width:9rem;flex-direction:column;gap:.125rem}.z-editor-menu-item{display:flex;width:100%;cursor:pointer;align-items:center;gap:.5rem;border-radius:var(--radius-xs);padding:.375rem .5rem;color:var(--muted-foreground);font-size:.8125rem;line-height:1.25;transition:background-color .15s ease,color .15s ease}.z-editor-menu-item:hover,.z-editor-menu-item.z-editor-menu-item-active{background-color:var(--accent);color:var(--foreground)}.z-editor-color-indicator{position:absolute;right:.25rem;bottom:.1875rem;width:.75rem;height:.1875rem;border-radius:999px;box-shadow:0 0 0 .0625rem var(--border)}.z-editor-color-grid{display:grid;grid-template-columns:repeat(5,1.625rem);gap:.25rem}.z-editor-color-swatch{width:1.625rem;height:1.625rem;border:.0625rem solid var(--border);border-radius:var(--radius-xs);cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}.z-editor-color-swatch:hover{transform:translateY(-.0625rem);border-color:var(--ring)}.z-editor-color-swatch.z-editor-color-swatch-active{border-color:var(--primary);box-shadow:0 0 0 .125rem color-mix(in srgb,var(--primary) 20%,transparent)}.z-editor-color-custom{grid-column:1/-1;display:flex;height:1.875rem;cursor:pointer;align-items:center;gap:.5rem;border:.0625rem solid var(--border);border-radius:var(--radius-xs);padding:.25rem .5rem;color:var(--muted-foreground);font-size:.75rem;transition:border-color .15s ease,background-color .15s ease,color .15s ease}.z-editor-color-custom input{width:1.375rem;height:1.375rem;flex:none;cursor:pointer;border:0;padding:0;background:transparent}.z-editor-color-custom:hover{border-color:var(--ring);background-color:var(--accent);color:var(--foreground)}.z-editor-color-reset{grid-column:1/-1;width:100%;justify-content:center}.z-editor-floating-toolbar{display:inline-flex;align-items:center;gap:.125rem;border:.0625rem solid var(--border);border-radius:var(--radius-sm);background-color:var(--popover);padding:.375rem;box-shadow:0 .625rem 1.5rem -.75rem #00000059,0 .25rem .75rem -.5rem #0003;visibility:hidden;opacity:0;position:fixed;top:-10000px;left:-10000px;scale:.98;translate:0 .25rem;transform-origin:top left;transition:opacity .12s ease,visibility .12s ease,scale .16s ease,translate .16s ease}.z-editor-floating-toolbar[style*=\"visibility: visible\"]{animation:z-editor-floating-toolbar-in .16s cubic-bezier(.16,1,.3,1);scale:1;translate:0 0}@keyframes z-editor-floating-toolbar-in{0%{opacity:0;scale:.96;translate:0 .375rem}to{opacity:1;scale:1;translate:0 0}}.z-editor-slash-menu-trigger,.z-editor-link-popover-trigger{position:fixed;z-index:-1;width:.0625rem;height:.0625rem;pointer-events:none}.z-editor-link-popover{padding:.5rem}.z-editor-link-popover-content{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;column-gap:.5rem}.z-editor-link-popover-input{flex:1;min-width:0}.z-editor-link-popover-actions{display:inline-flex;align-self:start;align-items:center;gap:.125rem}.z-editor-slash-popover{box-sizing:border-box;padding:0;overflow:hidden}.z-editor-slash-menu-shell{box-sizing:border-box;display:flex;min-width:0;height:min(16rem,100vh - 4rem);flex-direction:column}.z-editor-slash-menu-scrollbar{box-sizing:border-box;display:block;min-width:0;min-height:0;flex:1;overflow-x:hidden;overflow-y:scroll;overscroll-behavior:contain}.z-editor-slash-menu{box-sizing:border-box;display:flex;min-width:0;min-height:100%;flex-direction:column;padding:.2rem;gap:.2rem;color:var(--popover-foreground)}.z-editor-slash-menu-group{margin:.25rem 0 .125rem;border-top:.0625rem solid var(--border);padding:.5rem .5rem .1875rem;color:var(--muted-foreground);font-size:.6875rem;font-weight:600;line-height:1;text-transform:uppercase}.z-editor-slash-menu-group:first-child{margin-top:0;border-top:0;padding-top:.5rem}.z-editor-slash-menu-item{box-sizing:border-box;display:flex;align-self:stretch;min-width:0;cursor:pointer;align-items:center;gap:.5rem;border-radius:var(--radius-xs);padding:.375rem .75rem;text-align:left;transition:background-color .15s ease,color .15s ease}.z-editor-slash-menu-item i{color:var(--muted-foreground);flex:none}.z-editor-slash-menu-item:hover,.z-editor-slash-menu-item.z-editor-slash-menu-item-active{background-color:var(--accent);color:var(--foreground)}.z-editor-slash-menu-copy{display:flex;min-width:0;align-items:center}.z-editor-slash-menu-label{color:var(--foreground);font-size:.8125rem;font-weight:500;line-height:1.2}.z-editor-slash-menu-empty{box-sizing:border-box;display:flex;align-self:stretch;max-width:100%;min-width:0;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:.625rem;padding:1rem;color:var(--muted-foreground);font-size:.8125rem;line-height:1.15;text-align:center}.z-editor-slash-menu-empty i{color:var(--muted-foreground);flex:none}.z-editor-slash-menu-footer{box-sizing:border-box;display:flex;min-width:0;flex:none;align-items:center;gap:.75rem;border-top:.0625rem solid var(--border);padding:.375rem .625rem;color:var(--popover-foreground);font-size:.75rem;font-weight:500;line-height:1;white-space:nowrap}.z-editor-slash-menu-footer span{display:inline-flex;align-items:center;gap:.25rem}.z-editor-slash-menu-footer kbd{color:var(--foreground);font:inherit}.z-editor-emoji-sheet{display:flex;width:18rem;max-width:85vw;height:20rem;max-height:70vh;flex-direction:column;overflow:hidden;background-color:var(--popover);color:var(--popover-foreground)}.z-editor-emoji-header{display:flex;flex-direction:column;gap:.5rem;padding:.75rem .75rem .625rem;flex:none}.z-editor-emoji-title{display:flex;align-items:center;gap:.375rem;padding-inline:.25rem;color:var(--foreground);font-size:.8125rem;font-weight:600;line-height:1;letter-spacing:-.005em}.z-editor-emoji-title-dot{display:inline-block;width:.375rem;height:.375rem;border-radius:999px;background-color:var(--primary);box-shadow:0 0 0 .1875rem color-mix(in srgb,var(--primary) 18%,transparent)}.z-editor-emoji-search{width:100%}.z-editor-emoji-body{flex:1 1 0;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--muted-foreground) 30%,transparent) transparent}.z-editor-emoji-body::-webkit-scrollbar{width:.375rem}.z-editor-emoji-body::-webkit-scrollbar-track{background:transparent}.z-editor-emoji-body::-webkit-scrollbar-thumb{border-radius:999px;background-color:color-mix(in srgb,var(--muted-foreground) 30%,transparent)}.z-editor-emoji-body::-webkit-scrollbar-thumb:hover{background-color:color-mix(in srgb,var(--muted-foreground) 55%,transparent)}.z-editor-emoji-grid{display:grid;grid-template-columns:repeat(8,1.875rem);justify-content:center;gap:.125rem;padding:.25rem .5rem .5rem}.z-editor-emoji-empty{display:flex;height:100%;min-height:10rem;flex-direction:column;align-items:center;justify-content:center;gap:.375rem;padding:1.5rem .75rem;color:var(--muted-foreground);font-size:.8125rem;text-align:center}.z-editor-emoji-empty-icon{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:var(--radius-md);background-color:color-mix(in srgb,var(--muted) 70%,transparent);color:var(--muted-foreground)}.z-editor-emoji-button{display:inline-flex;align-items:center;justify-content:center;width:1.875rem;height:1.875rem;border-radius:var(--radius-md);font-family:\"Noto Color Emoji\",\"Apple Color Emoji\",\"Segoe UI Emoji\",Twemoji Mozilla,EmojiOne Color,\"Android Emoji\",sans-serif;font-size:1.1875rem;line-height:1;transition:background-color .12s ease,box-shadow .12s ease}.z-editor-emoji-button:hover{background-color:color-mix(in srgb,var(--accent) 80%,transparent);box-shadow:0 0 0 .0625rem color-mix(in srgb,var(--ring) 35%,transparent)}.z-editor-emoji-button:active{background-color:color-mix(in srgb,var(--primary) 18%,transparent);box-shadow:0 0 0 .0625rem color-mix(in srgb,var(--primary) 45%,transparent)}.z-editor-emoji-footer{position:relative;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));align-items:center;border-top:.0625rem solid color-mix(in srgb,var(--border) 70%,transparent);padding:.25rem;background-color:color-mix(in srgb,var(--muted) 35%,transparent);flex:none}.z-editor-emoji-footer-button{position:relative;display:inline-flex;align-items:center;justify-content:center;height:1.875rem;border-radius:var(--radius-md);color:var(--muted-foreground);transition:color .15s ease,background-color .15s ease}.z-editor-emoji-footer-button:after{content:\"\";position:absolute;bottom:.0625rem;left:50%;width:0;height:.125rem;border-radius:999px;background-color:var(--primary);transition:width .2s ease,transform .2s ease;transform:translate(-50%)}.z-editor-emoji-footer-button:hover{color:var(--foreground);background-color:color-mix(in srgb,var(--accent) 60%,transparent)}.z-editor-emoji-footer-button.z-editor-emoji-footer-button-active{color:var(--primary)}.z-editor-emoji-footer-button.z-editor-emoji-footer-button-active:after{width:.875rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: ZButtonComponent, selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "zAnimatedTypeIcon", "zAnimateIcon", "zAnimationTriggerIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "component", type: ZInputComponent, selector: "z-input", inputs: ["class", "zType", "zSize", "zAlign", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zLoading", "zLoadingOutline", "zPrefix", "zSuffix", "zMin", "zMax", "zStep", "zShowArrows", "zMask", "zDecimalPlaces", "zAllowNegative", "zThousandSeparator", "zDecimalMarker", "zValidators", "zAsyncValidators", "zAsyncDebounce", "zAsyncValidateOn", "zShowPasswordToggle", "zSearch", "zDebounce", "zAutofocus", "zAutoComplete", "zAllowClear", "zAutoSizeContent", "zRows", "zResize", "zMaxLength", "zAutoSuggest", "zColorConfig"], outputs: ["zOnSearch", "zOnChange", "zOnBlur", "zOnFocus", "zOnKeydown", "zOnEnter", "zOnColorCollapse", "zControl", "zEvent"], exportAs: ["zInput"] }, { kind: "directive", type: ZPopoverDirective, selector: "[z-popover]", inputs: ["zPopoverContent", "zPosition", "zTrigger", "zPopoverTrigger", "zClass", "zShowDelay", "zHideDelay", "zDisabled", "zOffset", "zPopoverWidth", "zTriggerRef", "zManualClose", "zOutsideClickClose", "zScrollClose", "zSticky", "zShowArrow", "zKeyboardSafe"], outputs: ["zShow", "zHide", "zHideStart", "zControl", "zPositionChange", "zOutsideClick"], exportAs: ["zPopover"] }, { kind: "directive", type: ZTooltipDirective, selector: "[z-tooltip], [zTooltip]", inputs: ["zContent", "zContext", "zPosition", "zTooltipPosition", "zTrigger", "zTooltipTrigger", "zTooltipType", "zTooltipSize", "zClass", "zTooltipClass", "zShowDelay", "zTooltipShowDelay", "zHideDelay", "zTooltipHideDelay", "zArrow", "zTooltipArrow", "zDisabled", "zTooltipDisabled", "zOffset", "zTooltipOffset", "zAutoDetect", "zTriggerElement", "zAlwaysShow", "zMaxWidth"], outputs: ["zShow", "zHide"], exportAs: ["zTooltip"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], viewQueries: [{ propertyName: "_editorHost", first: true, predicate: ["editorHost"], descendants: true, isSignal: true }, { propertyName: "_floatingToolbar", first: true, predicate: ["floatingToolbar"], descendants: true, isSignal: true }, { propertyName: "_slashMenuTrigger", first: true, predicate: ["slashMenuTrigger"], descendants: true, isSignal: true }, { propertyName: "_linkPopoverTrigger", first: true, predicate: ["linkPopoverTrigger"], descendants: true, isSignal: true }, { propertyName: "_slashMenuScrollHost", first: true, predicate: ["slashMenuScrollHost"], descendants: true, isSignal: true }], exportAs: ["zEditor"], ngImport: i0, template: "<div [class]=\"wrapperClasses()\" [class.z-editor-disabled]=\"isDisabled()\" [class.z-editor-readonly]=\"zReadonly()\">\n  @if (zLabel()) {\n    <label [for]=\"editorId\" class=\"text-xs leading-none font-medium\" [class]=\"zLabelClass()\">\n      {{ zLabel() }}\n      @if (zRequired()) {\n        <span class=\"text-destructive! ml-0.5\">*</span>\n      }\n    </label>\n  }\n\n  <div [class]=\"editorClasses()\">\n    @if (showToolbar()) {\n      <div class=\"z-editor-toolbar\" role=\"toolbar\" [attr.aria-controls]=\"editorId\">\n        @for (item of toolbarItems(); track item.id) {\n          @switch (item.id) {\n            @case ('emoji') {\n              <button\n                type=\"button\"\n                class=\"z-editor-toolbar-button\"\n                z-popover\n                [zPopoverContent]=\"emojiPopover\"\n                zPosition=\"bottom-left\"\n                zTrigger=\"click\"\n                zClass=\"z-editor-emoji-popover\"\n                (zControl)=\"onEmojiPopoverControl($event)\"\n                (zShow)=\"onEmojiPopoverShow()\"\n                [disabled]=\"item.disabled\"\n                [attr.aria-label]=\"item.label\"\n                [attr.title]=\"item.label\">\n                <i z-icon [zType]=\"item.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n              </button>\n            }\n            @case ('blockStyle') {\n              <button\n                type=\"button\"\n                class=\"z-editor-toolbar-button\"\n                z-popover\n                [zPopoverContent]=\"blockStylePopover\"\n                zPosition=\"bottom-left\"\n                zTrigger=\"click\"\n                zClass=\"z-editor-menu-popover\"\n                (zControl)=\"onBlockStylePopoverControl($event)\"\n                (zHideStart)=\"onFloatingPopoverHide()\"\n                [disabled]=\"item.disabled\"\n                [attr.aria-label]=\"item.label\"\n                [attr.title]=\"item.label\">\n                <i z-icon [zType]=\"item.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n              </button>\n            }\n            @case ('lineHeight') {\n              <button\n                type=\"button\"\n                class=\"z-editor-toolbar-button\"\n                z-popover\n                [zPopoverContent]=\"lineHeightPopover\"\n                zPosition=\"bottom-left\"\n                zTrigger=\"click\"\n                zClass=\"z-editor-menu-popover\"\n                (zControl)=\"onLineHeightPopoverControl($event)\"\n                (zHideStart)=\"onFloatingPopoverHide()\"\n                [class.z-editor-toolbar-button-active]=\"item.active\"\n                [disabled]=\"item.disabled\"\n                [attr.aria-label]=\"item.label\"\n                [attr.title]=\"item.label\">\n                <i z-icon [zType]=\"item.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n              </button>\n            }\n            @case ('textColor') {\n              @let textColor = activeTextColor();\n              <button\n                type=\"button\"\n                class=\"z-editor-toolbar-button\"\n                z-popover\n                [zPopoverContent]=\"textColorPopover\"\n                zPosition=\"bottom-left\"\n                zTrigger=\"click\"\n                zClass=\"z-editor-color-popover\"\n                (zControl)=\"onTextColorPopoverControl($event)\"\n                (zHideStart)=\"onFloatingPopoverHide()\"\n                [disabled]=\"item.disabled\"\n                [attr.aria-label]=\"item.label\"\n                [attr.title]=\"item.label\">\n                <i z-icon [zType]=\"item.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n                <span class=\"z-editor-color-indicator\" [style.background]=\"textColor\"></span>\n              </button>\n            }\n            @case ('backgroundColor') {\n              @let bgColor = activeBackgroundColor();\n              <button\n                type=\"button\"\n                class=\"z-editor-toolbar-button\"\n                z-popover\n                [zPopoverContent]=\"backgroundColorPopover\"\n                zPosition=\"bottom-left\"\n                zTrigger=\"click\"\n                zClass=\"z-editor-color-popover\"\n                (zControl)=\"onBackgroundColorPopoverControl($event)\"\n                (zHideStart)=\"onFloatingPopoverHide()\"\n                [disabled]=\"item.disabled\"\n                [attr.aria-label]=\"item.label\"\n                [attr.title]=\"item.label\">\n                <i z-icon [zType]=\"item.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n                <span class=\"z-editor-color-indicator\" [style.background]=\"bgColor\"></span>\n              </button>\n            }\n            @case ('align') {\n              <button\n                type=\"button\"\n                class=\"z-editor-toolbar-button\"\n                z-popover\n                [zPopoverContent]=\"alignPopover\"\n                zPosition=\"bottom-left\"\n                zTrigger=\"click\"\n                zClass=\"z-editor-menu-popover\"\n                (zControl)=\"onAlignPopoverControl($event)\"\n                (zHideStart)=\"onFloatingPopoverHide()\"\n                [disabled]=\"item.disabled\"\n                [attr.aria-label]=\"item.label\"\n                [attr.title]=\"item.label\">\n                <i z-icon [zType]=\"activeAlignIcon()\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n              </button>\n            }\n            @default {\n              <button\n                type=\"button\"\n                class=\"z-editor-toolbar-button\"\n                [class.z-editor-toolbar-button-active]=\"item.active\"\n                [disabled]=\"item.disabled\"\n                [attr.aria-label]=\"item.label\"\n                [attr.title]=\"item.label\"\n                (click)=\"onToolbarClick(item.id)\">\n                <i z-icon [zType]=\"item.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n              </button>\n            }\n          }\n        }\n      </div>\n    }\n\n    <div\n      #editorHost\n      [id]=\"editorId\"\n      class=\"z-editor-content\"\n      role=\"textbox\"\n      [attr.aria-multiline]=\"true\"\n      [attr.aria-readonly]=\"isDisabled() || zReadonly()\"></div>\n  </div>\n\n  @if (hasError()) {\n    <p class=\"text-destructive animate-in fade-in slide-in-from-top-1 m-0 text-xs duration-200\">\n      {{ errorMessage() }}\n    </p>\n  }\n\n  <ng-template #emojiPopover>\n    @let emojiCategoryLabel =\n      emojiSearchQuery() ? ('i18n_z_ui_emoji_search_results' | translate) : (activeEmojiCategoryLabel() | translate);\n    @let activeCategoryId = activeEmojiCategoryId();\n    <div class=\"z-editor-emoji-sheet\">\n      <div class=\"z-editor-emoji-header\">\n        <div class=\"z-editor-emoji-title mb-1\">\n          <span class=\"z-editor-emoji-title-dot\" aria-hidden=\"true\"></span>\n          <span>{{ emojiCategoryLabel }}</span>\n        </div>\n        <z-input\n          class=\"z-editor-emoji-search\"\n          zSize=\"sm\"\n          [zSearch]=\"true\"\n          [zDebounce]=\"150\"\n          [zPlaceholder]=\"'i18n_z_ui_emoji_search_placeholder' | translate\"\n          [ngModel]=\"emojiSearch()\"\n          (zOnSearch)=\"emojiSearch.set($any($event))\" />\n      </div>\n      <div class=\"z-editor-emoji-body\">\n        @if (hasEmojiResults()) {\n          <div class=\"z-editor-emoji-grid\">\n            @for (emoji of activeEmojis(); track emoji) {\n              <button\n                type=\"button\"\n                class=\"z-editor-emoji-button\"\n                [attr.aria-label]=\"emoji\"\n                (click)=\"insertEmoji($any(emoji))\">\n                {{ emoji }}\n              </button>\n            }\n          </div>\n        } @else {\n          <div class=\"z-editor-emoji-empty\">\n            <span class=\"z-editor-emoji-empty-icon\" aria-hidden=\"true\">\n              <i z-icon zType=\"lucideSearchX\" zSize=\"14\" [zStrokeWidth]=\"2\"></i>\n            </span>\n            <span>{{ 'i18n_z_ui_emoji_no_results' | translate }}</span>\n          </div>\n        }\n      </div>\n      <div class=\"z-editor-emoji-footer\" role=\"tablist\">\n        @for (category of emojiCategories; track category.id) {\n          <button\n            type=\"button\"\n            role=\"tab\"\n            class=\"z-editor-emoji-footer-button cursor-pointer!\"\n            [class.z-editor-emoji-footer-button-active]=\"category.id === activeCategoryId\"\n            [attr.aria-label]=\"category.labelKey | translate\"\n            [attr.aria-selected]=\"category.id === activeCategoryId\"\n            [attr.title]=\"category.labelKey | translate\"\n            (click)=\"setEmojiCategory(category.id)\">\n            <i z-icon [zType]=\"category.icon\" zSize=\"15\" [zStrokeWidth]=\"2\"></i>\n          </button>\n        }\n      </div>\n    </div>\n  </ng-template>\n\n  <ng-template #blockStylePopover let-close=\"close\">\n    <div class=\"z-editor-menu-list\">\n      @for (option of blockStyleOptions; track option.command) {\n        <button\n          type=\"button\"\n          class=\"z-editor-menu-item\"\n          [class.z-editor-menu-item-active]=\"activeBlockStyle() === option.command\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"applyBlockStyle(option.command, close)\">\n          <i z-icon [zType]=\"option.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n          <span>{{ option.label }}</span>\n        </button>\n      }\n    </div>\n  </ng-template>\n\n  <ng-template #alignPopover let-close=\"close\">\n    <div class=\"z-editor-menu-list\">\n      @for (option of alignOptions; track option.command) {\n        <button\n          type=\"button\"\n          class=\"z-editor-menu-item\"\n          [class.z-editor-menu-item-active]=\"activeAlign() === option.command\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"applyAlign(option.command, close)\">\n          <i z-icon [zType]=\"option.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n          <span>{{ option.label }}</span>\n        </button>\n      }\n    </div>\n  </ng-template>\n\n  <ng-template #lineHeightPopover let-close=\"close\">\n    <div class=\"z-editor-menu-list\">\n      @for (lineHeight of lineHeightOptions; track lineHeight) {\n        <button\n          type=\"button\"\n          class=\"z-editor-menu-item\"\n          [class.z-editor-menu-item-active]=\"activeLineHeight() === lineHeight\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"applyLineHeight(lineHeight, close)\">\n          <span>{{ lineHeight }}</span>\n        </button>\n      }\n    </div>\n  </ng-template>\n\n  <ng-template #textColorPopover let-close=\"close\">\n    @let currentTextColor = activeTextColor();\n    <div class=\"z-editor-color-grid\">\n      @for (color of textColorSwatches; track color) {\n        <button\n          type=\"button\"\n          class=\"z-editor-color-swatch\"\n          [class.z-editor-color-swatch-active]=\"currentTextColor === color\"\n          [style.background]=\"color\"\n          [attr.aria-label]=\"'Text color ' + color\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"setTextColor(color, close)\"></button>\n      }\n      <label class=\"z-editor-color-custom\">\n        <input type=\"color\" [value]=\"currentTextColor\" (input)=\"setTextColorFromEvent($event, close)\" />\n        {{ currentTextColor }}\n      </label>\n      <button\n        type=\"button\"\n        z-button\n        zType=\"outline\"\n        zSize=\"sm\"\n        class=\"z-editor-color-reset\"\n        (mousedown)=\"$event.preventDefault()\"\n        (click)=\"unsetTextColor(close)\">\n        Reset\n      </button>\n    </div>\n  </ng-template>\n\n  <ng-template #backgroundColorPopover let-close=\"close\">\n    @let currentBgColor = activeBackgroundColor();\n    <div class=\"z-editor-color-grid\">\n      @for (color of backgroundColorSwatches; track color) {\n        <button\n          type=\"button\"\n          class=\"z-editor-color-swatch\"\n          [class.z-editor-color-swatch-active]=\"currentBgColor === color\"\n          [style.background]=\"color\"\n          [attr.aria-label]=\"'Background color ' + color\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"setBackgroundColor(color, close)\"></button>\n      }\n      <label class=\"z-editor-color-custom\">\n        <input type=\"color\" [value]=\"currentBgColor\" (input)=\"setBackgroundColorFromEvent($event, close)\" />\n        {{ currentBgColor }}\n      </label>\n      <button\n        type=\"button\"\n        z-button\n        zType=\"outline\"\n        zSize=\"sm\"\n        class=\"z-editor-color-reset\"\n        (mousedown)=\"$event.preventDefault()\"\n        (click)=\"unsetBackgroundColor(close)\">\n        Reset\n      </button>\n    </div>\n  </ng-template>\n\n  <div #floatingToolbar class=\"z-editor-floating-toolbar\" role=\"toolbar\" [attr.aria-controls]=\"editorId\">\n    @for (item of floatingToolbarItems(); track item.id) {\n      @switch (item.id) {\n        @case ('blockStyle') {\n          <button\n            type=\"button\"\n            class=\"z-editor-toolbar-button\"\n            z-popover\n            [zPopoverContent]=\"blockStylePopover\"\n            zPosition=\"bottom-left\"\n            zTrigger=\"click\"\n            zClass=\"z-editor-menu-popover\"\n            (zControl)=\"onBlockStylePopoverControl($event)\"\n            (zHideStart)=\"onFloatingPopoverHide()\"\n            [disabled]=\"item.disabled\"\n            [attr.aria-label]=\"item.label\"\n            [attr.title]=\"activeBlockStyleLabel()\"\n            (mousedown)=\"$event.preventDefault()\">\n            <i z-icon [zType]=\"item.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n          </button>\n        }\n        @case ('lineHeight') {\n          <button\n            type=\"button\"\n            class=\"z-editor-toolbar-button\"\n            z-popover\n            [zPopoverContent]=\"lineHeightPopover\"\n            zPosition=\"bottom-left\"\n            zTrigger=\"click\"\n            zClass=\"z-editor-menu-popover\"\n            (zControl)=\"onLineHeightPopoverControl($event)\"\n            (zHideStart)=\"onFloatingPopoverHide()\"\n            [disabled]=\"item.disabled\"\n            [attr.aria-label]=\"item.label\"\n            [attr.title]=\"item.label\"\n            (mousedown)=\"$event.preventDefault()\">\n            <i z-icon [zType]=\"item.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n          </button>\n        }\n        @case ('textColor') {\n          @let textColor = activeTextColor();\n          <button\n            type=\"button\"\n            class=\"z-editor-toolbar-button\"\n            z-popover\n            [zPopoverContent]=\"textColorPopover\"\n            zPosition=\"bottom-left\"\n            zTrigger=\"click\"\n            zClass=\"z-editor-color-popover\"\n            (zControl)=\"onTextColorPopoverControl($event)\"\n            (zHideStart)=\"onFloatingPopoverHide()\"\n            [disabled]=\"item.disabled\"\n            [attr.aria-label]=\"item.label\"\n            [attr.title]=\"item.label\"\n            (mousedown)=\"$event.preventDefault()\">\n            <i z-icon [zType]=\"item.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n            <span class=\"z-editor-color-indicator\" [style.background]=\"textColor\"></span>\n          </button>\n        }\n        @case ('backgroundColor') {\n          @let bgColor = activeBackgroundColor();\n          <button\n            type=\"button\"\n            class=\"z-editor-toolbar-button\"\n            z-popover\n            [zPopoverContent]=\"backgroundColorPopover\"\n            zPosition=\"bottom-left\"\n            zTrigger=\"click\"\n            zClass=\"z-editor-color-popover\"\n            (zControl)=\"onBackgroundColorPopoverControl($event)\"\n            (zHideStart)=\"onFloatingPopoverHide()\"\n            [disabled]=\"item.disabled\"\n            [attr.aria-label]=\"item.label\"\n            [attr.title]=\"item.label\"\n            (mousedown)=\"$event.preventDefault()\">\n            <i z-icon [zType]=\"item.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n            <span class=\"z-editor-color-indicator\" [style.background]=\"bgColor\"></span>\n          </button>\n        }\n        @case ('align') {\n          <button\n            type=\"button\"\n            class=\"z-editor-toolbar-button\"\n            z-popover\n            [zPopoverContent]=\"alignPopover\"\n            zPosition=\"bottom-left\"\n            zTrigger=\"click\"\n            zClass=\"z-editor-menu-popover\"\n            (zControl)=\"onAlignPopoverControl($event)\"\n            (zHideStart)=\"onFloatingPopoverHide()\"\n            [disabled]=\"item.disabled\"\n            [attr.aria-label]=\"item.label\"\n            [attr.title]=\"activeAlignLabel()\"\n            (mousedown)=\"$event.preventDefault()\">\n            <i z-icon [zType]=\"activeAlignIcon()\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n          </button>\n        }\n        @default {\n          <button\n            type=\"button\"\n            class=\"z-editor-toolbar-button\"\n            z-tooltip\n            [zContent]=\"item.tooltip\"\n            zPosition=\"top\"\n            [zAlwaysShow]=\"true\"\n            [zDisabled]=\"item.disabled || !item.shortcut || !floatingToolbarVisible()\"\n            [class.z-editor-toolbar-button-active]=\"item.active\"\n            [disabled]=\"item.disabled\"\n            [attr.aria-label]=\"item.label\"\n            [attr.title]=\"item.label\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"onFloatingToolbarClick(item.id)\">\n            <i z-icon [zType]=\"item.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n          </button>\n        }\n      }\n    }\n  </div>\n\n  <span\n    #slashMenuTrigger\n    class=\"z-editor-slash-menu-trigger\"\n    z-popover\n    [zPopoverContent]=\"slashMenuPopover\"\n    zTrigger=\"manual\"\n    zPosition=\"bottom-left\"\n    zClass=\"z-editor-slash-popover\"\n    [zOffset]=\"4\"\n    [zPopoverWidth]=\"300\"\n    [style.left.px]=\"slashMenuState().left\"\n    [style.top.px]=\"slashMenuState().top\"\n    (zControl)=\"onSlashMenuPopoverControl($event)\"\n    (zHide)=\"onSlashMenuPopoverHide()\"></span>\n\n  <ng-template #slashMenuPopover>\n    @let slashActiveIndex = slashMenuActiveIndex();\n    <div class=\"z-editor-slash-menu-shell\">\n      <div #slashMenuScrollHost class=\"z-editor-slash-menu-scrollbar\">\n        <div class=\"z-editor-slash-menu\" role=\"listbox\" [attr.aria-controls]=\"editorId\">\n          @for (item of filteredSlashCommands(); track item.id) {\n            @if (item.showGroupLabel) {\n              <div class=\"z-editor-slash-menu-group\">\n                {{ item.group }}\n              </div>\n            }\n            <button\n              type=\"button\"\n              class=\"z-editor-slash-menu-item\"\n              role=\"option\"\n              [class.z-editor-slash-menu-item-active]=\"$index === slashActiveIndex\"\n              [attr.aria-selected]=\"$index === slashActiveIndex\"\n              (mousedown)=\"$event.preventDefault()\"\n              (click)=\"applySlashCommand(item)\">\n              <i z-icon [zType]=\"item.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n              <span class=\"z-editor-slash-menu-copy\">\n                <span class=\"z-editor-slash-menu-label\">{{ item.label }}</span>\n              </span>\n            </button>\n          } @empty {\n            <div class=\"z-editor-slash-menu-empty\">\n              <i z-icon zType=\"lucideSearchX\" zSize=\"28\" [zStrokeWidth]=\"1.8\"></i>\n              <span>{{ 'i18n_z_ui_editor_no_commands' | translate }}</span>\n            </div>\n          }\n        </div>\n      </div>\n      <div class=\"z-editor-slash-menu-footer\" aria-hidden=\"true\">\n        <span>\n          <kbd>\u2191\u2193</kbd>\n          {{ 'i18n_z_ui_editor_shortcut_navigate' | translate }}\n        </span>\n        <span>\n          <kbd>Esc</kbd>\n          {{ 'i18n_z_ui_editor_shortcut_abort' | translate }}\n        </span>\n        <span>\n          <kbd>\u21B5</kbd>\n          {{ 'i18n_z_ui_editor_shortcut_select' | translate }}\n        </span>\n      </div>\n    </div>\n  </ng-template>\n\n  <span\n    #linkPopoverTrigger\n    class=\"z-editor-link-popover-trigger\"\n    z-popover\n    [zPopoverContent]=\"linkPopover\"\n    zTrigger=\"manual\"\n    zPosition=\"bottom-left\"\n    zClass=\"z-editor-link-popover\"\n    [zOffset]=\"6\"\n    [zPopoverWidth]=\"320\"\n    [style.left.px]=\"linkPopoverState().left\"\n    [style.top.px]=\"linkPopoverState().top\"\n    [style.width.px]=\"linkPopoverState().width\"\n    [style.height.px]=\"linkPopoverState().height\"\n    (zControl)=\"onLinkPopoverControl($event)\"\n    (zHideStart)=\"onLinkPopoverHide()\"></span>\n\n  <ng-template #linkPopover>\n    <div class=\"z-editor-link-popover-content\" (keydown.escape)=\"closeLinkPopover()\">\n      <ng-template #linkPrefix>\n        <z-icon zType=\"lucideLink\" zSize=\"16\" class=\"text-muted-foreground\" />\n      </ng-template>\n      <z-input\n        zType=\"url\"\n        zSize=\"sm\"\n        class=\"z-editor-link-popover-input\"\n        [zPrefix]=\"linkPrefix\"\n        zPlaceholder=\"https://example.com\"\n        [zValidators]=\"linkValidators\"\n        [ngModel]=\"linkUrl()\"\n        (ngModelChange)=\"onLinkUrlChange($event)\"\n        (zOnEnter)=\"applyLink()\" />\n      <div class=\"z-editor-link-popover-actions\">\n        <button\n          type=\"button\"\n          z-button\n          zType=\"ghost\"\n          zSize=\"sm\"\n          [zDisabled]=\"!canApplyLink()\"\n          (click)=\"applyLink()\"\n          aria-label=\"Apply link\">\n          <z-icon zType=\"lucideCheck\" zSize=\"16\" [zStrokeWidth]=\"2.5\" />\n        </button>\n        <button\n          type=\"button\"\n          z-button\n          zType=\"ghost\"\n          zSize=\"sm\"\n          [zDisabled]=\"!activeLinkHref()\"\n          (click)=\"openActiveLink()\"\n          aria-label=\"Open link\">\n          <z-icon zType=\"lucideExternalLink\" zSize=\"16\" [zStrokeWidth]=\"2.5\" />\n        </button>\n        <button\n          type=\"button\"\n          z-button\n          zType=\"ghost-destructive\"\n          zSize=\"sm\"\n          [zDisabled]=\"!activeLinkHref()\"\n          (click)=\"removeLink()\"\n          aria-label=\"Remove link\">\n          <z-icon zType=\"lucideUnlink\" zSize=\"16\" [zStrokeWidth]=\"2.5\" />\n        </button>\n      </div>\n    </div>\n  </ng-template>\n</div>\n", styles: [".z-editor-wrapper .z-editor-toolbar{display:flex;flex-wrap:wrap;gap:.125rem;align-items:center;border-bottom:.0625rem solid var(--border);border-top-left-radius:.375rem;border-top-right-radius:.375rem;background-color:color-mix(in srgb,var(--muted) 30%,transparent);padding:.5rem}.z-editor-wrapper .z-editor-toolbar-button{position:relative;display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border-radius:var(--radius-xs);padding:0;color:var(--muted-foreground);transition:background-color .15s ease,color .15s ease,opacity .15s ease}.z-editor-wrapper .z-editor-toolbar-button:hover:not(:disabled){background-color:var(--accent);color:var(--foreground)}.z-editor-wrapper .z-editor-toolbar-button:disabled{cursor:not-allowed;opacity:.45}.z-editor-wrapper .z-editor-toolbar-button:is(.z-editor-toolbar-button-active,.z-popover-open,:focus):not(:disabled){background-color:color-mix(in srgb,var(--primary) 10%,transparent);color:var(--primary)}.z-editor-wrapper .z-editor-content{position:relative;border-bottom-right-radius:.375rem;border-bottom-left-radius:.375rem}.z-editor-wrapper .z-editor-prosemirror{width:100%;outline:none;padding:.75rem;color:var(--foreground)}.z-editor-wrapper .z-editor-prosemirror>*{margin-top:.75rem;margin-bottom:.75rem}.z-editor-wrapper .z-editor-prosemirror>:first-child{margin-top:0}.z-editor-wrapper .z-editor-prosemirror>:last-child{margin-bottom:0}.z-editor-wrapper .z-editor-prosemirror p{line-height:1.5}.z-editor-wrapper .z-editor-prosemirror a{color:var(--primary);font-weight:500;text-decoration-line:underline;text-decoration-color:currentcolor;text-decoration-thickness:.0625rem;text-underline-offset:.1875rem;cursor:pointer;transition:text-decoration-color .15s ease}.z-editor-wrapper .z-editor-prosemirror a:hover{text-decoration-color:color-mix(in srgb,currentcolor 70%,transparent)}.z-editor-wrapper .z-editor-prosemirror .mention{color:var(--primary);font-weight:500}.z-editor-wrapper .z-editor-prosemirror :is(h1,h2,h3,h4,h5,h6){color:var(--foreground);font-weight:700;line-height:1.2}.z-editor-wrapper .z-editor-prosemirror h1{font-size:1.875rem}.z-editor-wrapper .z-editor-prosemirror h2{font-size:1.5rem}.z-editor-wrapper .z-editor-prosemirror h3{font-size:1.25rem}.z-editor-wrapper .z-editor-prosemirror h4{font-size:1.125rem}.z-editor-wrapper .z-editor-prosemirror h5,.z-editor-wrapper .z-editor-prosemirror h6{font-size:1rem}.z-editor-wrapper .z-editor-prosemirror blockquote{border-left:.25rem solid var(--border);padding-left:1rem;font-style:italic;color:var(--muted-foreground)}.z-editor-wrapper .z-editor-prosemirror [data-type=horizontalRule]{margin-top:2rem;margin-bottom:2rem;padding-top:.5rem;padding-bottom:.5rem}.z-editor-wrapper .z-editor-prosemirror hr{border:0;border-top:.0625rem solid var(--border)}.z-editor-wrapper .z-editor-prosemirror pre{overflow-x:auto;border:.0625rem solid var(--border);border-radius:var(--radius-md);background-color:var(--muted);padding:.75rem 1rem;font-size:.875rem;line-height:1.5;white-space:pre-wrap;word-break:break-word}.z-editor-wrapper .z-editor-prosemirror pre code{display:inline;border:0;border-radius:0;background-color:transparent;padding:0;color:inherit;font:inherit}.z-editor-wrapper .z-editor-prosemirror code{display:inline-block;border:.0625rem solid var(--border);border-radius:var(--radius-md);background-color:var(--muted);padding:.125rem .375rem;color:var(--foreground);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:.875em;font-weight:500}.z-editor-wrapper .z-editor-prosemirror :is(ul,ol){padding-left:1.5rem}.z-editor-wrapper .z-editor-prosemirror ul{list-style:disc}.z-editor-wrapper .z-editor-prosemirror ol{list-style:decimal}.z-editor-wrapper .z-editor-prosemirror li{margin-top:.375rem;margin-bottom:.375rem;padding-left:.375rem}.z-editor-wrapper .z-editor-prosemirror img{display:block;max-width:100%;border-radius:var(--radius-md)}.z-editor-wrapper .z-editor-prosemirror img[data-text-align=center]{margin-right:auto;margin-left:auto}.z-editor-wrapper .z-editor-prosemirror img[data-text-align=right]{margin-right:0;margin-left:auto}.z-editor-wrapper .z-editor-prosemirror img[data-text-align=left],.z-editor-wrapper .z-editor-prosemirror img[data-text-align=justify]{margin-right:auto;margin-left:0}.z-editor-wrapper .z-editor-prosemirror img.ProseMirror-selectednode{outline:.125rem solid var(--primary)}.z-editor-wrapper .z-editor-prosemirror .image-resizer{display:inline-flex;position:relative;flex-grow:0}.z-editor-wrapper .z-editor-prosemirror .image-resizer .resize-trigger{position:absolute;right:-6px;bottom:-9px;width:12px;height:12px;cursor:nwse-resize;border-radius:50%;background-color:var(--primary);opacity:0;transition:opacity .2s ease}.z-editor-wrapper .z-editor-prosemirror .image-resizer:hover .resize-trigger{opacity:1}.z-editor-wrapper .z-editor-prosemirror .image-resizer .image-alignment{display:flex;gap:4px;position:absolute;top:-32px;left:0;padding:4px;border-radius:var(--radius-xs);background-color:var(--popover);box-shadow:0 2px 8px #00000026;opacity:0;transition:opacity .2s ease;pointer-events:none}.z-editor-wrapper .z-editor-prosemirror .image-resizer:hover .image-alignment{opacity:1;pointer-events:auto}.z-editor-wrapper .z-editor-prosemirror .ProseMirror-selectednode:not(img):not(pre):not([data-node-view-wrapper]){background-color:color-mix(in srgb,var(--primary) 20%,transparent)}.z-editor-wrapper .z-editor-prosemirror :is(p,h1,h2,h3,h4,h5,h6).is-empty:before{float:left;height:0;color:var(--muted-foreground);content:attr(data-placeholder);pointer-events:none}.z-editor-placeholder-first-line .z-editor-wrapper .z-editor-prosemirror :is(p,h1,h2,h3,h4,h5,h6).is-empty:before{content:none}.z-editor-placeholder-first-line .z-editor-wrapper .z-editor-prosemirror :is(p,h1,h2,h3,h4,h5,h6).is-editor-empty:first-child:before{content:attr(data-placeholder)}.z-editor-wrapper.z-editor-disabled .z-editor-toolbar,.z-editor-wrapper.z-editor-disabled .z-editor-content{pointer-events:none}.z-editor-wrapper.z-editor-readonly .z-editor-toolbar{display:none}.z-editor-wrapper.z-editor-readonly .z-editor-content{border-radius:var(--radius-md)}.z-editor-wrapper.z-editor-readonly .z-editor-prosemirror{cursor:default}.z-editor-link-modal{padding-top:0;padding-bottom:0}.z-editor-link-modal .z-modal-scrollbar main{min-height:0;padding:1rem}.z-editor-emoji-popover{padding:0;overflow:hidden;box-shadow:0 .5rem 1.5rem -.25rem #0000002e,0 .25rem .5rem -.125rem #0000001a}.z-editor-color-popover{padding:.5rem}.z-editor-menu-popover{padding:.25rem}.z-editor-menu-list{display:flex;min-width:9rem;flex-direction:column;gap:.125rem}.z-editor-menu-item{display:flex;width:100%;cursor:pointer;align-items:center;gap:.5rem;border-radius:var(--radius-xs);padding:.375rem .5rem;color:var(--muted-foreground);font-size:.8125rem;line-height:1.25;transition:background-color .15s ease,color .15s ease}.z-editor-menu-item:hover,.z-editor-menu-item.z-editor-menu-item-active{background-color:var(--accent);color:var(--foreground)}.z-editor-color-indicator{position:absolute;right:.25rem;bottom:.1875rem;width:.75rem;height:.1875rem;border-radius:999px;box-shadow:0 0 0 .0625rem var(--border)}.z-editor-color-grid{display:grid;grid-template-columns:repeat(5,1.625rem);gap:.25rem}.z-editor-color-swatch{width:1.625rem;height:1.625rem;border:.0625rem solid var(--border);border-radius:var(--radius-xs);cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}.z-editor-color-swatch:hover{transform:translateY(-.0625rem);border-color:var(--ring)}.z-editor-color-swatch.z-editor-color-swatch-active{border-color:var(--primary);box-shadow:0 0 0 .125rem color-mix(in srgb,var(--primary) 20%,transparent)}.z-editor-color-custom{grid-column:1/-1;display:flex;height:1.875rem;cursor:pointer;align-items:center;gap:.5rem;border:.0625rem solid var(--border);border-radius:var(--radius-xs);padding:.25rem .5rem;color:var(--muted-foreground);font-size:.75rem;transition:border-color .15s ease,background-color .15s ease,color .15s ease}.z-editor-color-custom input{width:1.375rem;height:1.375rem;flex:none;cursor:pointer;border:0;padding:0;background:transparent}.z-editor-color-custom:hover{border-color:var(--ring);background-color:var(--accent);color:var(--foreground)}.z-editor-color-reset{grid-column:1/-1;width:100%;justify-content:center}.z-editor-floating-toolbar{display:inline-flex;align-items:center;gap:.125rem;border:.0625rem solid var(--border);border-radius:var(--radius-sm);background-color:var(--popover);padding:.375rem;box-shadow:0 .625rem 1.5rem -.75rem #00000059,0 .25rem .75rem -.5rem #0003;visibility:hidden;opacity:0;position:fixed;top:-10000px;left:-10000px;scale:.98;translate:0 .25rem;transform-origin:top left;transition:opacity .12s ease,visibility .12s ease,scale .16s ease,translate .16s ease}.z-editor-floating-toolbar[style*=\"visibility: visible\"]{animation:z-editor-floating-toolbar-in .16s cubic-bezier(.16,1,.3,1);scale:1;translate:0 0}@keyframes z-editor-floating-toolbar-in{0%{opacity:0;scale:.96;translate:0 .375rem}to{opacity:1;scale:1;translate:0 0}}.z-editor-slash-menu-trigger,.z-editor-link-popover-trigger{position:fixed;z-index:-1;width:.0625rem;height:.0625rem;pointer-events:none}.z-editor-link-popover{padding:.5rem}.z-editor-link-popover-content{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;column-gap:.5rem}.z-editor-link-popover-input{flex:1;min-width:0}.z-editor-link-popover-actions{display:inline-flex;align-self:start;align-items:center;gap:.125rem}.z-editor-slash-popover{box-sizing:border-box;padding:0;overflow:hidden}.z-editor-slash-menu-shell{box-sizing:border-box;display:flex;min-width:0;height:min(16rem,100vh - 4rem);flex-direction:column}.z-editor-slash-menu-scrollbar{box-sizing:border-box;display:block;min-width:0;min-height:0;flex:1;overflow-x:hidden;overflow-y:scroll;overscroll-behavior:contain}.z-editor-slash-menu{box-sizing:border-box;display:flex;min-width:0;min-height:100%;flex-direction:column;padding:.2rem;gap:.2rem;color:var(--popover-foreground)}.z-editor-slash-menu-group{margin:.25rem 0 .125rem;border-top:.0625rem solid var(--border);padding:.5rem .5rem .1875rem;color:var(--muted-foreground);font-size:.6875rem;font-weight:600;line-height:1;text-transform:uppercase}.z-editor-slash-menu-group:first-child{margin-top:0;border-top:0;padding-top:.5rem}.z-editor-slash-menu-item{box-sizing:border-box;display:flex;align-self:stretch;min-width:0;cursor:pointer;align-items:center;gap:.5rem;border-radius:var(--radius-xs);padding:.375rem .75rem;text-align:left;transition:background-color .15s ease,color .15s ease}.z-editor-slash-menu-item i{color:var(--muted-foreground);flex:none}.z-editor-slash-menu-item:hover,.z-editor-slash-menu-item.z-editor-slash-menu-item-active{background-color:var(--accent);color:var(--foreground)}.z-editor-slash-menu-copy{display:flex;min-width:0;align-items:center}.z-editor-slash-menu-label{color:var(--foreground);font-size:.8125rem;font-weight:500;line-height:1.2}.z-editor-slash-menu-empty{box-sizing:border-box;display:flex;align-self:stretch;max-width:100%;min-width:0;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:.625rem;padding:1rem;color:var(--muted-foreground);font-size:.8125rem;line-height:1.15;text-align:center}.z-editor-slash-menu-empty i{color:var(--muted-foreground);flex:none}.z-editor-slash-menu-footer{box-sizing:border-box;display:flex;min-width:0;flex:none;align-items:center;gap:.75rem;border-top:.0625rem solid var(--border);padding:.375rem .625rem;color:var(--popover-foreground);font-size:.75rem;font-weight:500;line-height:1;white-space:nowrap}.z-editor-slash-menu-footer span{display:inline-flex;align-items:center;gap:.25rem}.z-editor-slash-menu-footer kbd{color:var(--foreground);font:inherit}.z-editor-emoji-sheet{display:flex;width:18rem;max-width:85vw;height:20rem;max-height:70vh;flex-direction:column;overflow:hidden;background-color:var(--popover);color:var(--popover-foreground)}.z-editor-emoji-header{display:flex;flex-direction:column;gap:.5rem;padding:.75rem .75rem .625rem;flex:none}.z-editor-emoji-title{display:flex;align-items:center;gap:.375rem;padding-inline:.25rem;color:var(--foreground);font-size:.8125rem;font-weight:600;line-height:1;letter-spacing:-.005em}.z-editor-emoji-title-dot{display:inline-block;width:.375rem;height:.375rem;border-radius:999px;background-color:var(--primary);box-shadow:0 0 0 .1875rem color-mix(in srgb,var(--primary) 18%,transparent)}.z-editor-emoji-search{width:100%}.z-editor-emoji-body{flex:1 1 0;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--muted-foreground) 30%,transparent) transparent}.z-editor-emoji-body::-webkit-scrollbar{width:.375rem}.z-editor-emoji-body::-webkit-scrollbar-track{background:transparent}.z-editor-emoji-body::-webkit-scrollbar-thumb{border-radius:999px;background-color:color-mix(in srgb,var(--muted-foreground) 30%,transparent)}.z-editor-emoji-body::-webkit-scrollbar-thumb:hover{background-color:color-mix(in srgb,var(--muted-foreground) 55%,transparent)}.z-editor-emoji-grid{display:grid;grid-template-columns:repeat(8,1.875rem);justify-content:center;gap:.125rem;padding:.25rem .5rem .5rem}.z-editor-emoji-empty{display:flex;height:100%;min-height:10rem;flex-direction:column;align-items:center;justify-content:center;gap:.375rem;padding:1.5rem .75rem;color:var(--muted-foreground);font-size:.8125rem;text-align:center}.z-editor-emoji-empty-icon{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:var(--radius-md);background-color:color-mix(in srgb,var(--muted) 70%,transparent);color:var(--muted-foreground)}.z-editor-emoji-button{display:inline-flex;align-items:center;justify-content:center;width:1.875rem;height:1.875rem;border-radius:var(--radius-md);font-family:\"Noto Color Emoji\",\"Apple Color Emoji\",\"Segoe UI Emoji\",Twemoji Mozilla,EmojiOne Color,\"Android Emoji\",sans-serif;font-size:1.1875rem;line-height:1;transition:background-color .12s ease,box-shadow .12s ease}.z-editor-emoji-button:hover{background-color:color-mix(in srgb,var(--accent) 80%,transparent);box-shadow:0 0 0 .0625rem color-mix(in srgb,var(--ring) 35%,transparent)}.z-editor-emoji-button:active{background-color:color-mix(in srgb,var(--primary) 18%,transparent);box-shadow:0 0 0 .0625rem color-mix(in srgb,var(--primary) 45%,transparent)}.z-editor-emoji-footer{position:relative;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));align-items:center;border-top:.0625rem solid color-mix(in srgb,var(--border) 70%,transparent);padding:.25rem;background-color:color-mix(in srgb,var(--muted) 35%,transparent);flex:none}.z-editor-emoji-footer-button{position:relative;display:inline-flex;align-items:center;justify-content:center;height:1.875rem;border-radius:var(--radius-md);color:var(--muted-foreground);transition:color .15s ease,background-color .15s ease}.z-editor-emoji-footer-button:after{content:\"\";position:absolute;bottom:.0625rem;left:50%;width:0;height:.125rem;border-radius:999px;background-color:var(--primary);transition:width .2s ease,transform .2s ease;transform:translate(-50%)}.z-editor-emoji-footer-button:hover{color:var(--foreground);background-color:color-mix(in srgb,var(--accent) 60%,transparent)}.z-editor-emoji-footer-button.z-editor-emoji-footer-button-active{color:var(--primary)}.z-editor-emoji-footer-button.z-editor-emoji-footer-button-active:after{width:.875rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: ZButtonComponent, selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "zAnimatedTypeIcon", "zAnimateIcon", "zAnimationTriggerIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "component", type: ZInputComponent, selector: "z-input", inputs: ["class", "zType", "zSize", "zAlign", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zLoading", "zLoadingOutline", "zPrefix", "zSuffix", "zMin", "zMax", "zStep", "zShowArrows", "zMask", "zDecimalPlaces", "zAllowNegative", "zThousandSeparator", "zDecimalMarker", "zValidators", "zAsyncValidators", "zAsyncDebounce", "zAsyncValidateOn", "zShowPasswordToggle", "zSearch", "zDebounce", "zAutofocus", "zAutoComplete", "zAllowClear", "zAutoSizeContent", "zRows", "zResize", "zMaxLength", "zAutoSuggest", "zColorConfig"], outputs: ["zOnSearch", "zOnChange", "zOnBlur", "zOnFocus", "zOnKeydown", "zOnEnter", "zOnColorCollapse", "zControl", "zEvent"], exportAs: ["zInput"] }, { kind: "directive", type: ZPopoverDirective, selector: "[z-popover]", inputs: ["zPopoverContent", "zPosition", "zTrigger", "zPopoverTrigger", "zClass", "zShowDelay", "zHideDelay", "zDisabled", "zOffset", "zPopoverWidth", "zTriggerRef", "zManualClose", "zOutsideClickClose", "zScrollClose", "zSticky", "zShowArrow", "zKeyboardSafe"], outputs: ["zShow", "zHide", "zHideStart", "zControl", "zPositionChange", "zOutsideClick"], exportAs: ["zPopover"] }, { kind: "directive", type: ZTooltipDirective, selector: "[z-tooltip], [zTooltip]", inputs: ["zContent", "zContext", "zPosition", "zTooltipPosition", "zTrigger", "zTooltipTrigger", "zTooltipType", "zTooltipSize", "zClass", "zTooltipClass", "zShowDelay", "zTooltipShowDelay", "zHideDelay", "zTooltipHideDelay", "zArrow", "zTooltipArrow", "zDisabled", "zTooltipDisabled", "zOffset", "zTooltipOffset", "zAutoDetect", "zTriggerElement", "zAlwaysShow", "zMaxWidth"], outputs: ["zShow", "zHide"], exportAs: ["zTooltip"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ZEditorComponent, decorators: [{
             type: Component,
@@ -1812,7 +1878,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                             useExisting: forwardRef(() => ZEditorComponent),
                             multi: true,
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'zEditor', template: "<div [class]=\"wrapperClasses()\" [class.z-editor-disabled]=\"isDisabled()\" [class.z-editor-readonly]=\"zReadonly()\">\n  @if (zLabel()) {\n    <label [for]=\"editorId\" class=\"text-xs leading-none font-medium\" [class]=\"zLabelClass()\">\n      {{ zLabel() }}\n      @if (zRequired()) {\n        <span class=\"text-destructive! ml-0.5\">*</span>\n      }\n    </label>\n  }\n\n  <div [class]=\"editorClasses()\">\n    @if (showToolbar()) {\n      <div class=\"z-editor-toolbar\" role=\"toolbar\" [attr.aria-controls]=\"editorId\">\n        @for (item of toolbarItems(); track item.id) {\n          @switch (item.id) {\n            @case ('emoji') {\n              <button\n                type=\"button\"\n                class=\"z-editor-toolbar-button\"\n                z-popover\n                [zPopoverContent]=\"emojiPopover\"\n                zPosition=\"bottom-left\"\n                zTrigger=\"click\"\n                zClass=\"z-editor-emoji-popover\"\n                (zControl)=\"onEmojiPopoverControl($event)\"\n                (zShow)=\"onEmojiPopoverShow()\"\n                [disabled]=\"item.disabled\"\n                [attr.aria-label]=\"item.label\"\n                [attr.title]=\"item.label\">\n                <i z-icon [zType]=\"item.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n              </button>\n            }\n            @case ('blockStyle') {\n              <button\n                type=\"button\"\n                class=\"z-editor-toolbar-button\"\n                z-popover\n                [zPopoverContent]=\"blockStylePopover\"\n                zPosition=\"bottom-left\"\n                zTrigger=\"click\"\n                zClass=\"z-editor-menu-popover\"\n                (zControl)=\"onBlockStylePopoverControl($event)\"\n                (zHideStart)=\"onFloatingPopoverHide()\"\n                [disabled]=\"item.disabled\"\n                [attr.aria-label]=\"item.label\"\n                [attr.title]=\"item.label\">\n                <i z-icon [zType]=\"item.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n              </button>\n            }\n            @case ('textColor') {\n              @let textColor = activeTextColor();\n              <button\n                type=\"button\"\n                class=\"z-editor-toolbar-button\"\n                z-popover\n                [zPopoverContent]=\"textColorPopover\"\n                zPosition=\"bottom-left\"\n                zTrigger=\"click\"\n                zClass=\"z-editor-color-popover\"\n                (zControl)=\"onTextColorPopoverControl($event)\"\n                (zHideStart)=\"onFloatingPopoverHide()\"\n                [disabled]=\"item.disabled\"\n                [attr.aria-label]=\"item.label\"\n                [attr.title]=\"item.label\">\n                <i z-icon [zType]=\"item.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n                <span class=\"z-editor-color-indicator\" [style.background]=\"textColor\"></span>\n              </button>\n            }\n            @case ('backgroundColor') {\n              @let bgColor = activeBackgroundColor();\n              <button\n                type=\"button\"\n                class=\"z-editor-toolbar-button\"\n                z-popover\n                [zPopoverContent]=\"backgroundColorPopover\"\n                zPosition=\"bottom-left\"\n                zTrigger=\"click\"\n                zClass=\"z-editor-color-popover\"\n                (zControl)=\"onBackgroundColorPopoverControl($event)\"\n                (zHideStart)=\"onFloatingPopoverHide()\"\n                [disabled]=\"item.disabled\"\n                [attr.aria-label]=\"item.label\"\n                [attr.title]=\"item.label\">\n                <i z-icon [zType]=\"item.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n                <span class=\"z-editor-color-indicator\" [style.background]=\"bgColor\"></span>\n              </button>\n            }\n            @case ('align') {\n              <button\n                type=\"button\"\n                class=\"z-editor-toolbar-button\"\n                z-popover\n                [zPopoverContent]=\"alignPopover\"\n                zPosition=\"bottom-left\"\n                zTrigger=\"click\"\n                zClass=\"z-editor-menu-popover\"\n                (zControl)=\"onAlignPopoverControl($event)\"\n                (zHideStart)=\"onFloatingPopoverHide()\"\n                [disabled]=\"item.disabled\"\n                [attr.aria-label]=\"item.label\"\n                [attr.title]=\"item.label\">\n                <i z-icon [zType]=\"activeAlignIcon()\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n              </button>\n            }\n            @default {\n              <button\n                type=\"button\"\n                class=\"z-editor-toolbar-button\"\n                [class.z-editor-toolbar-button-active]=\"item.active\"\n                [disabled]=\"item.disabled\"\n                [attr.aria-label]=\"item.label\"\n                [attr.title]=\"item.label\"\n                (click)=\"onToolbarClick(item.id)\">\n                <i z-icon [zType]=\"item.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n              </button>\n            }\n          }\n        }\n      </div>\n    }\n\n    <div\n      #editorHost\n      [id]=\"editorId\"\n      class=\"z-editor-content\"\n      role=\"textbox\"\n      [attr.aria-multiline]=\"true\"\n      [attr.aria-readonly]=\"isDisabled() || zReadonly()\"></div>\n  </div>\n\n  @if (hasError()) {\n    <p class=\"text-destructive animate-in fade-in slide-in-from-top-1 m-0 text-xs duration-200\">\n      {{ errorMessage() }}\n    </p>\n  }\n\n  <ng-template #emojiPopover>\n    @let emojiCategoryLabel =\n      emojiSearchQuery() ? ('i18n_z_ui_emoji_search_results' | translate) : (activeEmojiCategoryLabel() | translate);\n    @let activeCategoryId = activeEmojiCategoryId();\n    <div class=\"z-editor-emoji-sheet\">\n      <div class=\"z-editor-emoji-header\">\n        <div class=\"z-editor-emoji-title mb-1\">\n          <span class=\"z-editor-emoji-title-dot\" aria-hidden=\"true\"></span>\n          <span>{{ emojiCategoryLabel }}</span>\n        </div>\n        <z-input\n          class=\"z-editor-emoji-search\"\n          zSize=\"sm\"\n          [zSearch]=\"true\"\n          [zDebounce]=\"150\"\n          [zPlaceholder]=\"'i18n_z_ui_emoji_search_placeholder' | translate\"\n          [ngModel]=\"emojiSearch()\"\n          (zOnSearch)=\"emojiSearch.set($any($event))\" />\n      </div>\n      <div class=\"z-editor-emoji-body\">\n        @if (hasEmojiResults()) {\n          <div class=\"z-editor-emoji-grid\">\n            @for (emoji of activeEmojis(); track emoji) {\n              <button\n                type=\"button\"\n                class=\"z-editor-emoji-button\"\n                [attr.aria-label]=\"emoji\"\n                (click)=\"insertEmoji($any(emoji))\">\n                {{ emoji }}\n              </button>\n            }\n          </div>\n        } @else {\n          <div class=\"z-editor-emoji-empty\">\n            <span class=\"z-editor-emoji-empty-icon\" aria-hidden=\"true\">\n              <i z-icon zType=\"lucideSearchX\" zSize=\"14\" [zStrokeWidth]=\"2\"></i>\n            </span>\n            <span>{{ 'i18n_z_ui_emoji_no_results' | translate }}</span>\n          </div>\n        }\n      </div>\n      <div class=\"z-editor-emoji-footer\" role=\"tablist\">\n        @for (category of emojiCategories; track category.id) {\n          <button\n            type=\"button\"\n            role=\"tab\"\n            class=\"z-editor-emoji-footer-button cursor-pointer!\"\n            [class.z-editor-emoji-footer-button-active]=\"category.id === activeCategoryId\"\n            [attr.aria-label]=\"category.labelKey | translate\"\n            [attr.aria-selected]=\"category.id === activeCategoryId\"\n            [attr.title]=\"category.labelKey | translate\"\n            (click)=\"setEmojiCategory(category.id)\">\n            <i z-icon [zType]=\"category.icon\" zSize=\"15\" [zStrokeWidth]=\"2\"></i>\n          </button>\n        }\n      </div>\n    </div>\n  </ng-template>\n\n  <ng-template #blockStylePopover let-close=\"close\">\n    <div class=\"z-editor-menu-list\">\n      @for (option of blockStyleOptions; track option.command) {\n        <button\n          type=\"button\"\n          class=\"z-editor-menu-item\"\n          [class.z-editor-menu-item-active]=\"activeBlockStyle() === option.command\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"applyBlockStyle(option.command, close)\">\n          <i z-icon [zType]=\"option.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n          <span>{{ option.label }}</span>\n        </button>\n      }\n    </div>\n  </ng-template>\n\n  <ng-template #alignPopover let-close=\"close\">\n    <div class=\"z-editor-menu-list\">\n      @for (option of alignOptions; track option.command) {\n        <button\n          type=\"button\"\n          class=\"z-editor-menu-item\"\n          [class.z-editor-menu-item-active]=\"activeAlign() === option.command\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"applyAlign(option.command, close)\">\n          <i z-icon [zType]=\"option.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n          <span>{{ option.label }}</span>\n        </button>\n      }\n    </div>\n  </ng-template>\n\n  <ng-template #textColorPopover let-close=\"close\">\n    @let currentTextColor = activeTextColor();\n    <div class=\"z-editor-color-grid\">\n      @for (color of textColorSwatches; track color) {\n        <button\n          type=\"button\"\n          class=\"z-editor-color-swatch\"\n          [class.z-editor-color-swatch-active]=\"currentTextColor === color\"\n          [style.background]=\"color\"\n          [attr.aria-label]=\"'Text color ' + color\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"setTextColor(color, close)\"></button>\n      }\n      <label class=\"z-editor-color-custom\">\n        <input type=\"color\" [value]=\"currentTextColor\" (input)=\"setTextColorFromEvent($event, close)\" />\n        {{ currentTextColor }}\n      </label>\n      <button\n        type=\"button\"\n        z-button\n        zType=\"outline\"\n        zSize=\"sm\"\n        class=\"z-editor-color-reset\"\n        (mousedown)=\"$event.preventDefault()\"\n        (click)=\"unsetTextColor(close)\">\n        Reset\n      </button>\n    </div>\n  </ng-template>\n\n  <ng-template #backgroundColorPopover let-close=\"close\">\n    @let currentBgColor = activeBackgroundColor();\n    <div class=\"z-editor-color-grid\">\n      @for (color of backgroundColorSwatches; track color) {\n        <button\n          type=\"button\"\n          class=\"z-editor-color-swatch\"\n          [class.z-editor-color-swatch-active]=\"currentBgColor === color\"\n          [style.background]=\"color\"\n          [attr.aria-label]=\"'Background color ' + color\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"setBackgroundColor(color, close)\"></button>\n      }\n      <label class=\"z-editor-color-custom\">\n        <input type=\"color\" [value]=\"currentBgColor\" (input)=\"setBackgroundColorFromEvent($event, close)\" />\n        {{ currentBgColor }}\n      </label>\n      <button\n        type=\"button\"\n        z-button\n        zType=\"outline\"\n        zSize=\"sm\"\n        class=\"z-editor-color-reset\"\n        (mousedown)=\"$event.preventDefault()\"\n        (click)=\"unsetBackgroundColor(close)\">\n        Reset\n      </button>\n    </div>\n  </ng-template>\n\n  <div #floatingToolbar class=\"z-editor-floating-toolbar\" role=\"toolbar\" [attr.aria-controls]=\"editorId\">\n    @for (item of floatingToolbarItems(); track item.id) {\n      @switch (item.id) {\n        @case ('blockStyle') {\n          <button\n            type=\"button\"\n            class=\"z-editor-toolbar-button\"\n            z-popover\n            [zPopoverContent]=\"blockStylePopover\"\n            zPosition=\"bottom-left\"\n            zTrigger=\"click\"\n            zClass=\"z-editor-menu-popover\"\n            (zControl)=\"onBlockStylePopoverControl($event)\"\n            (zHideStart)=\"onFloatingPopoverHide()\"\n            [disabled]=\"item.disabled\"\n            [attr.aria-label]=\"item.label\"\n            [attr.title]=\"activeBlockStyleLabel()\"\n            (mousedown)=\"$event.preventDefault()\">\n            <i z-icon [zType]=\"item.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n          </button>\n        }\n        @case ('textColor') {\n          @let textColor = activeTextColor();\n          <button\n            type=\"button\"\n            class=\"z-editor-toolbar-button\"\n            z-popover\n            [zPopoverContent]=\"textColorPopover\"\n            zPosition=\"bottom-left\"\n            zTrigger=\"click\"\n            zClass=\"z-editor-color-popover\"\n            (zControl)=\"onTextColorPopoverControl($event)\"\n            (zHideStart)=\"onFloatingPopoverHide()\"\n            [disabled]=\"item.disabled\"\n            [attr.aria-label]=\"item.label\"\n            [attr.title]=\"item.label\"\n            (mousedown)=\"$event.preventDefault()\">\n            <i z-icon [zType]=\"item.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n            <span class=\"z-editor-color-indicator\" [style.background]=\"textColor\"></span>\n          </button>\n        }\n        @case ('backgroundColor') {\n          @let bgColor = activeBackgroundColor();\n          <button\n            type=\"button\"\n            class=\"z-editor-toolbar-button\"\n            z-popover\n            [zPopoverContent]=\"backgroundColorPopover\"\n            zPosition=\"bottom-left\"\n            zTrigger=\"click\"\n            zClass=\"z-editor-color-popover\"\n            (zControl)=\"onBackgroundColorPopoverControl($event)\"\n            (zHideStart)=\"onFloatingPopoverHide()\"\n            [disabled]=\"item.disabled\"\n            [attr.aria-label]=\"item.label\"\n            [attr.title]=\"item.label\"\n            (mousedown)=\"$event.preventDefault()\">\n            <i z-icon [zType]=\"item.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n            <span class=\"z-editor-color-indicator\" [style.background]=\"bgColor\"></span>\n          </button>\n        }\n        @case ('align') {\n          <button\n            type=\"button\"\n            class=\"z-editor-toolbar-button\"\n            z-popover\n            [zPopoverContent]=\"alignPopover\"\n            zPosition=\"bottom-left\"\n            zTrigger=\"click\"\n            zClass=\"z-editor-menu-popover\"\n            (zControl)=\"onAlignPopoverControl($event)\"\n            (zHideStart)=\"onFloatingPopoverHide()\"\n            [disabled]=\"item.disabled\"\n            [attr.aria-label]=\"item.label\"\n            [attr.title]=\"activeAlignLabel()\"\n            (mousedown)=\"$event.preventDefault()\">\n            <i z-icon [zType]=\"activeAlignIcon()\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n          </button>\n        }\n        @default {\n          <button\n            type=\"button\"\n            class=\"z-editor-toolbar-button\"\n            z-tooltip\n            [zContent]=\"item.tooltip\"\n            zPosition=\"top\"\n            [zAlwaysShow]=\"true\"\n            [zDisabled]=\"item.disabled || !item.shortcut || !floatingToolbarVisible()\"\n            [class.z-editor-toolbar-button-active]=\"item.active\"\n            [disabled]=\"item.disabled\"\n            [attr.aria-label]=\"item.label\"\n            [attr.title]=\"item.label\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"onFloatingToolbarClick(item.id)\">\n            <i z-icon [zType]=\"item.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n          </button>\n        }\n      }\n    }\n  </div>\n\n  <span\n    #slashMenuTrigger\n    class=\"z-editor-slash-menu-trigger\"\n    z-popover\n    [zPopoverContent]=\"slashMenuPopover\"\n    zTrigger=\"manual\"\n    zPosition=\"bottom-left\"\n    zClass=\"z-editor-slash-popover\"\n    [zOffset]=\"4\"\n    [zPopoverWidth]=\"300\"\n    [style.left.px]=\"slashMenuState().left\"\n    [style.top.px]=\"slashMenuState().top\"\n    (zControl)=\"onSlashMenuPopoverControl($event)\"\n    (zHide)=\"onSlashMenuPopoverHide()\"></span>\n\n  <ng-template #slashMenuPopover>\n    @let slashActiveIndex = slashMenuActiveIndex();\n    <div class=\"z-editor-slash-menu-shell\">\n      <div #slashMenuScrollHost class=\"z-editor-slash-menu-scrollbar\">\n        <div class=\"z-editor-slash-menu\" role=\"listbox\" [attr.aria-controls]=\"editorId\">\n          @for (item of filteredSlashCommands(); track item.id) {\n            @if (item.showGroupLabel) {\n              <div class=\"z-editor-slash-menu-group\">\n                {{ item.group }}\n              </div>\n            }\n            <button\n              type=\"button\"\n              class=\"z-editor-slash-menu-item\"\n              role=\"option\"\n              [class.z-editor-slash-menu-item-active]=\"$index === slashActiveIndex\"\n              [attr.aria-selected]=\"$index === slashActiveIndex\"\n              (mousedown)=\"$event.preventDefault()\"\n              (click)=\"applySlashCommand(item)\">\n              <i z-icon [zType]=\"item.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n              <span class=\"z-editor-slash-menu-copy\">\n                <span class=\"z-editor-slash-menu-label\">{{ item.label }}</span>\n              </span>\n            </button>\n          } @empty {\n            <div class=\"z-editor-slash-menu-empty\">\n              <i z-icon zType=\"lucideSearchX\" zSize=\"28\" [zStrokeWidth]=\"1.8\"></i>\n              <span>{{ 'i18n_z_ui_editor_no_commands' | translate }}</span>\n            </div>\n          }\n        </div>\n      </div>\n      <div class=\"z-editor-slash-menu-footer\" aria-hidden=\"true\">\n        <span>\n          <kbd>\u2191\u2193</kbd>\n          {{ 'i18n_z_ui_editor_shortcut_navigate' | translate }}\n        </span>\n        <span>\n          <kbd>Esc</kbd>\n          {{ 'i18n_z_ui_editor_shortcut_abort' | translate }}\n        </span>\n        <span>\n          <kbd>\u21B5</kbd>\n          {{ 'i18n_z_ui_editor_shortcut_select' | translate }}\n        </span>\n      </div>\n    </div>\n  </ng-template>\n\n  <span\n    #linkPopoverTrigger\n    class=\"z-editor-link-popover-trigger\"\n    z-popover\n    [zPopoverContent]=\"linkPopover\"\n    zTrigger=\"manual\"\n    zPosition=\"bottom-left\"\n    zClass=\"z-editor-link-popover\"\n    [zOffset]=\"6\"\n    [zPopoverWidth]=\"320\"\n    [style.left.px]=\"linkPopoverState().left\"\n    [style.top.px]=\"linkPopoverState().top\"\n    [style.width.px]=\"linkPopoverState().width\"\n    [style.height.px]=\"linkPopoverState().height\"\n    (zControl)=\"onLinkPopoverControl($event)\"\n    (zHideStart)=\"onLinkPopoverHide()\"></span>\n\n  <ng-template #linkPopover>\n    <div class=\"z-editor-link-popover-content\" (keydown.escape)=\"closeLinkPopover()\">\n      <ng-template #linkPrefix>\n        <z-icon zType=\"lucideLink\" zSize=\"16\" class=\"text-muted-foreground\" />\n      </ng-template>\n      <z-input\n        zType=\"url\"\n        zSize=\"sm\"\n        class=\"z-editor-link-popover-input\"\n        [zPrefix]=\"linkPrefix\"\n        zPlaceholder=\"https://example.com\"\n        [zValidators]=\"linkValidators\"\n        [ngModel]=\"linkUrl()\"\n        (ngModelChange)=\"onLinkUrlChange($event)\"\n        (zOnEnter)=\"applyLink()\" />\n      <div class=\"z-editor-link-popover-actions\">\n        <button\n          type=\"button\"\n          z-button\n          zType=\"ghost\"\n          zSize=\"sm\"\n          [zDisabled]=\"!canApplyLink()\"\n          (click)=\"applyLink()\"\n          aria-label=\"Apply link\">\n          <z-icon zType=\"lucideCheck\" zSize=\"16\" [zStrokeWidth]=\"2.5\" />\n        </button>\n        <button\n          type=\"button\"\n          z-button\n          zType=\"ghost\"\n          zSize=\"sm\"\n          [zDisabled]=\"!activeLinkHref()\"\n          (click)=\"openActiveLink()\"\n          aria-label=\"Open link\">\n          <z-icon zType=\"lucideExternalLink\" zSize=\"16\" [zStrokeWidth]=\"2.5\" />\n        </button>\n        <button\n          type=\"button\"\n          z-button\n          zType=\"ghost-destructive\"\n          zSize=\"sm\"\n          [zDisabled]=\"!activeLinkHref()\"\n          (click)=\"removeLink()\"\n          aria-label=\"Remove link\">\n          <z-icon zType=\"lucideUnlink\" zSize=\"16\" [zStrokeWidth]=\"2.5\" />\n        </button>\n      </div>\n    </div>\n  </ng-template>\n</div>\n", styles: [".z-editor-wrapper .z-editor-toolbar{display:flex;flex-wrap:wrap;gap:.125rem;align-items:center;border-bottom:.0625rem solid var(--border);border-top-left-radius:.375rem;border-top-right-radius:.375rem;background-color:color-mix(in srgb,var(--muted) 30%,transparent);padding:.5rem}.z-editor-wrapper .z-editor-toolbar-button{position:relative;display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border-radius:var(--radius-xs);padding:0;color:var(--muted-foreground);transition:background-color .15s ease,color .15s ease,opacity .15s ease}.z-editor-wrapper .z-editor-toolbar-button:hover:not(:disabled){background-color:var(--accent);color:var(--foreground)}.z-editor-wrapper .z-editor-toolbar-button:disabled{cursor:not-allowed;opacity:.45}.z-editor-wrapper .z-editor-toolbar-button:is(.z-editor-toolbar-button-active,.z-popover-open,:focus):not(:disabled){background-color:color-mix(in srgb,var(--primary) 10%,transparent);color:var(--primary)}.z-editor-wrapper .z-editor-content{position:relative;border-bottom-right-radius:.375rem;border-bottom-left-radius:.375rem}.z-editor-wrapper .z-editor-prosemirror{width:100%;outline:none;padding:.75rem;color:var(--foreground)}.z-editor-wrapper .z-editor-prosemirror>*{margin-top:.75rem;margin-bottom:.75rem}.z-editor-wrapper .z-editor-prosemirror>:first-child{margin-top:0}.z-editor-wrapper .z-editor-prosemirror>:last-child{margin-bottom:0}.z-editor-wrapper .z-editor-prosemirror p{line-height:1.5}.z-editor-wrapper .z-editor-prosemirror a{color:var(--primary);font-weight:500;text-decoration-line:underline;text-decoration-color:currentcolor;text-decoration-thickness:.0625rem;text-underline-offset:.1875rem;cursor:pointer;transition:text-decoration-color .15s ease}.z-editor-wrapper .z-editor-prosemirror a:hover{text-decoration-color:color-mix(in srgb,currentcolor 70%,transparent)}.z-editor-wrapper .z-editor-prosemirror .mention{color:var(--primary);font-weight:500}.z-editor-wrapper .z-editor-prosemirror :is(h1,h2,h3,h4,h5,h6){color:var(--foreground);font-weight:700;line-height:1.2}.z-editor-wrapper .z-editor-prosemirror h1{font-size:1.875rem}.z-editor-wrapper .z-editor-prosemirror h2{font-size:1.5rem}.z-editor-wrapper .z-editor-prosemirror h3{font-size:1.25rem}.z-editor-wrapper .z-editor-prosemirror h4{font-size:1.125rem}.z-editor-wrapper .z-editor-prosemirror h5,.z-editor-wrapper .z-editor-prosemirror h6{font-size:1rem}.z-editor-wrapper .z-editor-prosemirror blockquote{border-left:.25rem solid var(--border);padding-left:1rem;font-style:italic;color:var(--muted-foreground)}.z-editor-wrapper .z-editor-prosemirror [data-type=horizontalRule]{margin-top:2rem;margin-bottom:2rem;padding-top:.5rem;padding-bottom:.5rem}.z-editor-wrapper .z-editor-prosemirror hr{border:0;border-top:.0625rem solid var(--border)}.z-editor-wrapper .z-editor-prosemirror pre{overflow-x:auto;border:.0625rem solid var(--border);border-radius:var(--radius-md);background-color:var(--muted);padding:.75rem 1rem;font-size:.875rem;line-height:1.5;white-space:pre-wrap;word-break:break-word}.z-editor-wrapper .z-editor-prosemirror pre code{display:inline;border:0;border-radius:0;background-color:transparent;padding:0;color:inherit;font:inherit}.z-editor-wrapper .z-editor-prosemirror code{display:inline-block;border:.0625rem solid var(--border);border-radius:var(--radius-md);background-color:var(--muted);padding:.125rem .375rem;color:var(--foreground);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:.875em;font-weight:500}.z-editor-wrapper .z-editor-prosemirror :is(ul,ol){padding-left:1.5rem}.z-editor-wrapper .z-editor-prosemirror ul{list-style:disc}.z-editor-wrapper .z-editor-prosemirror ol{list-style:decimal}.z-editor-wrapper .z-editor-prosemirror li{margin-top:.375rem;margin-bottom:.375rem;padding-left:.375rem}.z-editor-wrapper .z-editor-prosemirror img{display:block;max-width:100%;border-radius:var(--radius-md)}.z-editor-wrapper .z-editor-prosemirror img[data-text-align=center]{margin-right:auto;margin-left:auto}.z-editor-wrapper .z-editor-prosemirror img[data-text-align=right]{margin-right:0;margin-left:auto}.z-editor-wrapper .z-editor-prosemirror img[data-text-align=left],.z-editor-wrapper .z-editor-prosemirror img[data-text-align=justify]{margin-right:auto;margin-left:0}.z-editor-wrapper .z-editor-prosemirror img.ProseMirror-selectednode{outline:.125rem solid var(--primary)}.z-editor-wrapper .z-editor-prosemirror .image-resizer{display:inline-flex;position:relative;flex-grow:0}.z-editor-wrapper .z-editor-prosemirror .image-resizer .resize-trigger{position:absolute;right:-6px;bottom:-9px;width:12px;height:12px;cursor:nwse-resize;border-radius:50%;background-color:var(--primary);opacity:0;transition:opacity .2s ease}.z-editor-wrapper .z-editor-prosemirror .image-resizer:hover .resize-trigger{opacity:1}.z-editor-wrapper .z-editor-prosemirror .image-resizer .image-alignment{display:flex;gap:4px;position:absolute;top:-32px;left:0;padding:4px;border-radius:var(--radius-xs);background-color:var(--popover);box-shadow:0 2px 8px #00000026;opacity:0;transition:opacity .2s ease;pointer-events:none}.z-editor-wrapper .z-editor-prosemirror .image-resizer:hover .image-alignment{opacity:1;pointer-events:auto}.z-editor-wrapper .z-editor-prosemirror .ProseMirror-selectednode:not(img):not(pre):not([data-node-view-wrapper]){background-color:color-mix(in srgb,var(--primary) 20%,transparent)}.z-editor-wrapper .z-editor-prosemirror :is(p,h1,h2,h3,h4,h5,h6).is-empty:before{float:left;height:0;color:var(--muted-foreground);content:attr(data-placeholder);pointer-events:none}.z-editor-placeholder-first-line .z-editor-wrapper .z-editor-prosemirror :is(p,h1,h2,h3,h4,h5,h6).is-empty:before{content:none}.z-editor-placeholder-first-line .z-editor-wrapper .z-editor-prosemirror :is(p,h1,h2,h3,h4,h5,h6).is-editor-empty:first-child:before{content:attr(data-placeholder)}.z-editor-wrapper.z-editor-disabled .z-editor-toolbar,.z-editor-wrapper.z-editor-disabled .z-editor-content{pointer-events:none}.z-editor-wrapper.z-editor-readonly .z-editor-toolbar{display:none}.z-editor-wrapper.z-editor-readonly .z-editor-content{border-radius:var(--radius-md)}.z-editor-wrapper.z-editor-readonly .z-editor-prosemirror{cursor:default}.z-editor-link-modal{padding-top:0;padding-bottom:0}.z-editor-link-modal .z-modal-scrollbar main{min-height:0;padding:1rem}.z-editor-emoji-popover{padding:0;overflow:hidden;box-shadow:0 .5rem 1.5rem -.25rem #0000002e,0 .25rem .5rem -.125rem #0000001a}.z-editor-color-popover{padding:.5rem}.z-editor-menu-popover{padding:.25rem}.z-editor-menu-list{display:flex;min-width:9rem;flex-direction:column;gap:.125rem}.z-editor-menu-item{display:flex;width:100%;cursor:pointer;align-items:center;gap:.5rem;border-radius:var(--radius-xs);padding:.375rem .5rem;color:var(--muted-foreground);font-size:.8125rem;line-height:1.25;transition:background-color .15s ease,color .15s ease}.z-editor-menu-item:hover,.z-editor-menu-item.z-editor-menu-item-active{background-color:var(--accent);color:var(--foreground)}.z-editor-color-indicator{position:absolute;right:.25rem;bottom:.1875rem;width:.75rem;height:.1875rem;border-radius:999px;box-shadow:0 0 0 .0625rem var(--border)}.z-editor-color-grid{display:grid;grid-template-columns:repeat(5,1.625rem);gap:.25rem}.z-editor-color-swatch{width:1.625rem;height:1.625rem;border:.0625rem solid var(--border);border-radius:var(--radius-xs);cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}.z-editor-color-swatch:hover{transform:translateY(-.0625rem);border-color:var(--ring)}.z-editor-color-swatch.z-editor-color-swatch-active{border-color:var(--primary);box-shadow:0 0 0 .125rem color-mix(in srgb,var(--primary) 20%,transparent)}.z-editor-color-custom{grid-column:1/-1;display:flex;height:1.875rem;cursor:pointer;align-items:center;gap:.5rem;border:.0625rem solid var(--border);border-radius:var(--radius-xs);padding:.25rem .5rem;color:var(--muted-foreground);font-size:.75rem;transition:border-color .15s ease,background-color .15s ease,color .15s ease}.z-editor-color-custom input{width:1.375rem;height:1.375rem;flex:none;cursor:pointer;border:0;padding:0;background:transparent}.z-editor-color-custom:hover{border-color:var(--ring);background-color:var(--accent);color:var(--foreground)}.z-editor-color-reset{grid-column:1/-1;width:100%;justify-content:center}.z-editor-floating-toolbar{display:inline-flex;align-items:center;gap:.125rem;border:.0625rem solid var(--border);border-radius:var(--radius-sm);background-color:var(--popover);padding:.375rem;box-shadow:0 .625rem 1.5rem -.75rem #00000059,0 .25rem .75rem -.5rem #0003;visibility:hidden;opacity:0;position:fixed;top:-10000px;left:-10000px;scale:.98;translate:0 .25rem;transform-origin:top left;transition:opacity .12s ease,visibility .12s ease,scale .16s ease,translate .16s ease}.z-editor-floating-toolbar[style*=\"visibility: visible\"]{animation:z-editor-floating-toolbar-in .16s cubic-bezier(.16,1,.3,1);scale:1;translate:0 0}@keyframes z-editor-floating-toolbar-in{0%{opacity:0;scale:.96;translate:0 .375rem}to{opacity:1;scale:1;translate:0 0}}.z-editor-slash-menu-trigger,.z-editor-link-popover-trigger{position:fixed;z-index:-1;width:.0625rem;height:.0625rem;pointer-events:none}.z-editor-link-popover{padding:.5rem}.z-editor-link-popover-content{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;column-gap:.5rem}.z-editor-link-popover-input{flex:1;min-width:0}.z-editor-link-popover-actions{display:inline-flex;align-self:start;align-items:center;gap:.125rem}.z-editor-slash-popover{box-sizing:border-box;padding:0;overflow:hidden}.z-editor-slash-menu-shell{box-sizing:border-box;display:flex;min-width:0;height:min(16rem,100vh - 4rem);flex-direction:column}.z-editor-slash-menu-scrollbar{box-sizing:border-box;display:block;min-width:0;min-height:0;flex:1;overflow-x:hidden;overflow-y:scroll;overscroll-behavior:contain}.z-editor-slash-menu{box-sizing:border-box;display:flex;min-width:0;min-height:100%;flex-direction:column;padding:.2rem;gap:.2rem;color:var(--popover-foreground)}.z-editor-slash-menu-group{margin:.25rem 0 .125rem;border-top:.0625rem solid var(--border);padding:.5rem .5rem .1875rem;color:var(--muted-foreground);font-size:.6875rem;font-weight:600;line-height:1;text-transform:uppercase}.z-editor-slash-menu-group:first-child{margin-top:0;border-top:0;padding-top:.5rem}.z-editor-slash-menu-item{box-sizing:border-box;display:flex;align-self:stretch;min-width:0;cursor:pointer;align-items:center;gap:.5rem;border-radius:var(--radius-xs);padding:.375rem .75rem;text-align:left;transition:background-color .15s ease,color .15s ease}.z-editor-slash-menu-item i{color:var(--muted-foreground);flex:none}.z-editor-slash-menu-item:hover,.z-editor-slash-menu-item.z-editor-slash-menu-item-active{background-color:var(--accent);color:var(--foreground)}.z-editor-slash-menu-copy{display:flex;min-width:0;align-items:center}.z-editor-slash-menu-label{color:var(--foreground);font-size:.8125rem;font-weight:500;line-height:1.2}.z-editor-slash-menu-empty{box-sizing:border-box;display:flex;align-self:stretch;max-width:100%;min-width:0;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:.625rem;padding:1rem;color:var(--muted-foreground);font-size:.8125rem;line-height:1.15;text-align:center}.z-editor-slash-menu-empty i{color:var(--muted-foreground);flex:none}.z-editor-slash-menu-footer{box-sizing:border-box;display:flex;min-width:0;flex:none;align-items:center;gap:.75rem;border-top:.0625rem solid var(--border);padding:.375rem .625rem;color:var(--popover-foreground);font-size:.75rem;font-weight:500;line-height:1;white-space:nowrap}.z-editor-slash-menu-footer span{display:inline-flex;align-items:center;gap:.25rem}.z-editor-slash-menu-footer kbd{color:var(--foreground);font:inherit}.z-editor-emoji-sheet{display:flex;width:18rem;max-width:85vw;height:20rem;max-height:70vh;flex-direction:column;overflow:hidden;background-color:var(--popover);color:var(--popover-foreground)}.z-editor-emoji-header{display:flex;flex-direction:column;gap:.5rem;padding:.75rem .75rem .625rem;flex:none}.z-editor-emoji-title{display:flex;align-items:center;gap:.375rem;padding-inline:.25rem;color:var(--foreground);font-size:.8125rem;font-weight:600;line-height:1;letter-spacing:-.005em}.z-editor-emoji-title-dot{display:inline-block;width:.375rem;height:.375rem;border-radius:999px;background-color:var(--primary);box-shadow:0 0 0 .1875rem color-mix(in srgb,var(--primary) 18%,transparent)}.z-editor-emoji-search{width:100%}.z-editor-emoji-body{flex:1 1 0;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--muted-foreground) 30%,transparent) transparent}.z-editor-emoji-body::-webkit-scrollbar{width:.375rem}.z-editor-emoji-body::-webkit-scrollbar-track{background:transparent}.z-editor-emoji-body::-webkit-scrollbar-thumb{border-radius:999px;background-color:color-mix(in srgb,var(--muted-foreground) 30%,transparent)}.z-editor-emoji-body::-webkit-scrollbar-thumb:hover{background-color:color-mix(in srgb,var(--muted-foreground) 55%,transparent)}.z-editor-emoji-grid{display:grid;grid-template-columns:repeat(8,1.875rem);justify-content:center;gap:.125rem;padding:.25rem .5rem .5rem}.z-editor-emoji-empty{display:flex;height:100%;min-height:10rem;flex-direction:column;align-items:center;justify-content:center;gap:.375rem;padding:1.5rem .75rem;color:var(--muted-foreground);font-size:.8125rem;text-align:center}.z-editor-emoji-empty-icon{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:var(--radius-md);background-color:color-mix(in srgb,var(--muted) 70%,transparent);color:var(--muted-foreground)}.z-editor-emoji-button{display:inline-flex;align-items:center;justify-content:center;width:1.875rem;height:1.875rem;border-radius:var(--radius-md);font-family:\"Noto Color Emoji\",\"Apple Color Emoji\",\"Segoe UI Emoji\",Twemoji Mozilla,EmojiOne Color,\"Android Emoji\",sans-serif;font-size:1.1875rem;line-height:1;transition:background-color .12s ease,box-shadow .12s ease}.z-editor-emoji-button:hover{background-color:color-mix(in srgb,var(--accent) 80%,transparent);box-shadow:0 0 0 .0625rem color-mix(in srgb,var(--ring) 35%,transparent)}.z-editor-emoji-button:active{background-color:color-mix(in srgb,var(--primary) 18%,transparent);box-shadow:0 0 0 .0625rem color-mix(in srgb,var(--primary) 45%,transparent)}.z-editor-emoji-footer{position:relative;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));align-items:center;border-top:.0625rem solid color-mix(in srgb,var(--border) 70%,transparent);padding:.25rem;background-color:color-mix(in srgb,var(--muted) 35%,transparent);flex:none}.z-editor-emoji-footer-button{position:relative;display:inline-flex;align-items:center;justify-content:center;height:1.875rem;border-radius:var(--radius-md);color:var(--muted-foreground);transition:color .15s ease,background-color .15s ease}.z-editor-emoji-footer-button:after{content:\"\";position:absolute;bottom:.0625rem;left:50%;width:0;height:.125rem;border-radius:999px;background-color:var(--primary);transition:width .2s ease,transform .2s ease;transform:translate(-50%)}.z-editor-emoji-footer-button:hover{color:var(--foreground);background-color:color-mix(in srgb,var(--accent) 60%,transparent)}.z-editor-emoji-footer-button.z-editor-emoji-footer-button-active{color:var(--primary)}.z-editor-emoji-footer-button.z-editor-emoji-footer-button-active:after{width:.875rem}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'zEditor', template: "<div [class]=\"wrapperClasses()\" [class.z-editor-disabled]=\"isDisabled()\" [class.z-editor-readonly]=\"zReadonly()\">\n  @if (zLabel()) {\n    <label [for]=\"editorId\" class=\"text-xs leading-none font-medium\" [class]=\"zLabelClass()\">\n      {{ zLabel() }}\n      @if (zRequired()) {\n        <span class=\"text-destructive! ml-0.5\">*</span>\n      }\n    </label>\n  }\n\n  <div [class]=\"editorClasses()\">\n    @if (showToolbar()) {\n      <div class=\"z-editor-toolbar\" role=\"toolbar\" [attr.aria-controls]=\"editorId\">\n        @for (item of toolbarItems(); track item.id) {\n          @switch (item.id) {\n            @case ('emoji') {\n              <button\n                type=\"button\"\n                class=\"z-editor-toolbar-button\"\n                z-popover\n                [zPopoverContent]=\"emojiPopover\"\n                zPosition=\"bottom-left\"\n                zTrigger=\"click\"\n                zClass=\"z-editor-emoji-popover\"\n                (zControl)=\"onEmojiPopoverControl($event)\"\n                (zShow)=\"onEmojiPopoverShow()\"\n                [disabled]=\"item.disabled\"\n                [attr.aria-label]=\"item.label\"\n                [attr.title]=\"item.label\">\n                <i z-icon [zType]=\"item.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n              </button>\n            }\n            @case ('blockStyle') {\n              <button\n                type=\"button\"\n                class=\"z-editor-toolbar-button\"\n                z-popover\n                [zPopoverContent]=\"blockStylePopover\"\n                zPosition=\"bottom-left\"\n                zTrigger=\"click\"\n                zClass=\"z-editor-menu-popover\"\n                (zControl)=\"onBlockStylePopoverControl($event)\"\n                (zHideStart)=\"onFloatingPopoverHide()\"\n                [disabled]=\"item.disabled\"\n                [attr.aria-label]=\"item.label\"\n                [attr.title]=\"item.label\">\n                <i z-icon [zType]=\"item.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n              </button>\n            }\n            @case ('lineHeight') {\n              <button\n                type=\"button\"\n                class=\"z-editor-toolbar-button\"\n                z-popover\n                [zPopoverContent]=\"lineHeightPopover\"\n                zPosition=\"bottom-left\"\n                zTrigger=\"click\"\n                zClass=\"z-editor-menu-popover\"\n                (zControl)=\"onLineHeightPopoverControl($event)\"\n                (zHideStart)=\"onFloatingPopoverHide()\"\n                [class.z-editor-toolbar-button-active]=\"item.active\"\n                [disabled]=\"item.disabled\"\n                [attr.aria-label]=\"item.label\"\n                [attr.title]=\"item.label\">\n                <i z-icon [zType]=\"item.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n              </button>\n            }\n            @case ('textColor') {\n              @let textColor = activeTextColor();\n              <button\n                type=\"button\"\n                class=\"z-editor-toolbar-button\"\n                z-popover\n                [zPopoverContent]=\"textColorPopover\"\n                zPosition=\"bottom-left\"\n                zTrigger=\"click\"\n                zClass=\"z-editor-color-popover\"\n                (zControl)=\"onTextColorPopoverControl($event)\"\n                (zHideStart)=\"onFloatingPopoverHide()\"\n                [disabled]=\"item.disabled\"\n                [attr.aria-label]=\"item.label\"\n                [attr.title]=\"item.label\">\n                <i z-icon [zType]=\"item.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n                <span class=\"z-editor-color-indicator\" [style.background]=\"textColor\"></span>\n              </button>\n            }\n            @case ('backgroundColor') {\n              @let bgColor = activeBackgroundColor();\n              <button\n                type=\"button\"\n                class=\"z-editor-toolbar-button\"\n                z-popover\n                [zPopoverContent]=\"backgroundColorPopover\"\n                zPosition=\"bottom-left\"\n                zTrigger=\"click\"\n                zClass=\"z-editor-color-popover\"\n                (zControl)=\"onBackgroundColorPopoverControl($event)\"\n                (zHideStart)=\"onFloatingPopoverHide()\"\n                [disabled]=\"item.disabled\"\n                [attr.aria-label]=\"item.label\"\n                [attr.title]=\"item.label\">\n                <i z-icon [zType]=\"item.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n                <span class=\"z-editor-color-indicator\" [style.background]=\"bgColor\"></span>\n              </button>\n            }\n            @case ('align') {\n              <button\n                type=\"button\"\n                class=\"z-editor-toolbar-button\"\n                z-popover\n                [zPopoverContent]=\"alignPopover\"\n                zPosition=\"bottom-left\"\n                zTrigger=\"click\"\n                zClass=\"z-editor-menu-popover\"\n                (zControl)=\"onAlignPopoverControl($event)\"\n                (zHideStart)=\"onFloatingPopoverHide()\"\n                [disabled]=\"item.disabled\"\n                [attr.aria-label]=\"item.label\"\n                [attr.title]=\"item.label\">\n                <i z-icon [zType]=\"activeAlignIcon()\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n              </button>\n            }\n            @default {\n              <button\n                type=\"button\"\n                class=\"z-editor-toolbar-button\"\n                [class.z-editor-toolbar-button-active]=\"item.active\"\n                [disabled]=\"item.disabled\"\n                [attr.aria-label]=\"item.label\"\n                [attr.title]=\"item.label\"\n                (click)=\"onToolbarClick(item.id)\">\n                <i z-icon [zType]=\"item.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n              </button>\n            }\n          }\n        }\n      </div>\n    }\n\n    <div\n      #editorHost\n      [id]=\"editorId\"\n      class=\"z-editor-content\"\n      role=\"textbox\"\n      [attr.aria-multiline]=\"true\"\n      [attr.aria-readonly]=\"isDisabled() || zReadonly()\"></div>\n  </div>\n\n  @if (hasError()) {\n    <p class=\"text-destructive animate-in fade-in slide-in-from-top-1 m-0 text-xs duration-200\">\n      {{ errorMessage() }}\n    </p>\n  }\n\n  <ng-template #emojiPopover>\n    @let emojiCategoryLabel =\n      emojiSearchQuery() ? ('i18n_z_ui_emoji_search_results' | translate) : (activeEmojiCategoryLabel() | translate);\n    @let activeCategoryId = activeEmojiCategoryId();\n    <div class=\"z-editor-emoji-sheet\">\n      <div class=\"z-editor-emoji-header\">\n        <div class=\"z-editor-emoji-title mb-1\">\n          <span class=\"z-editor-emoji-title-dot\" aria-hidden=\"true\"></span>\n          <span>{{ emojiCategoryLabel }}</span>\n        </div>\n        <z-input\n          class=\"z-editor-emoji-search\"\n          zSize=\"sm\"\n          [zSearch]=\"true\"\n          [zDebounce]=\"150\"\n          [zPlaceholder]=\"'i18n_z_ui_emoji_search_placeholder' | translate\"\n          [ngModel]=\"emojiSearch()\"\n          (zOnSearch)=\"emojiSearch.set($any($event))\" />\n      </div>\n      <div class=\"z-editor-emoji-body\">\n        @if (hasEmojiResults()) {\n          <div class=\"z-editor-emoji-grid\">\n            @for (emoji of activeEmojis(); track emoji) {\n              <button\n                type=\"button\"\n                class=\"z-editor-emoji-button\"\n                [attr.aria-label]=\"emoji\"\n                (click)=\"insertEmoji($any(emoji))\">\n                {{ emoji }}\n              </button>\n            }\n          </div>\n        } @else {\n          <div class=\"z-editor-emoji-empty\">\n            <span class=\"z-editor-emoji-empty-icon\" aria-hidden=\"true\">\n              <i z-icon zType=\"lucideSearchX\" zSize=\"14\" [zStrokeWidth]=\"2\"></i>\n            </span>\n            <span>{{ 'i18n_z_ui_emoji_no_results' | translate }}</span>\n          </div>\n        }\n      </div>\n      <div class=\"z-editor-emoji-footer\" role=\"tablist\">\n        @for (category of emojiCategories; track category.id) {\n          <button\n            type=\"button\"\n            role=\"tab\"\n            class=\"z-editor-emoji-footer-button cursor-pointer!\"\n            [class.z-editor-emoji-footer-button-active]=\"category.id === activeCategoryId\"\n            [attr.aria-label]=\"category.labelKey | translate\"\n            [attr.aria-selected]=\"category.id === activeCategoryId\"\n            [attr.title]=\"category.labelKey | translate\"\n            (click)=\"setEmojiCategory(category.id)\">\n            <i z-icon [zType]=\"category.icon\" zSize=\"15\" [zStrokeWidth]=\"2\"></i>\n          </button>\n        }\n      </div>\n    </div>\n  </ng-template>\n\n  <ng-template #blockStylePopover let-close=\"close\">\n    <div class=\"z-editor-menu-list\">\n      @for (option of blockStyleOptions; track option.command) {\n        <button\n          type=\"button\"\n          class=\"z-editor-menu-item\"\n          [class.z-editor-menu-item-active]=\"activeBlockStyle() === option.command\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"applyBlockStyle(option.command, close)\">\n          <i z-icon [zType]=\"option.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n          <span>{{ option.label }}</span>\n        </button>\n      }\n    </div>\n  </ng-template>\n\n  <ng-template #alignPopover let-close=\"close\">\n    <div class=\"z-editor-menu-list\">\n      @for (option of alignOptions; track option.command) {\n        <button\n          type=\"button\"\n          class=\"z-editor-menu-item\"\n          [class.z-editor-menu-item-active]=\"activeAlign() === option.command\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"applyAlign(option.command, close)\">\n          <i z-icon [zType]=\"option.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n          <span>{{ option.label }}</span>\n        </button>\n      }\n    </div>\n  </ng-template>\n\n  <ng-template #lineHeightPopover let-close=\"close\">\n    <div class=\"z-editor-menu-list\">\n      @for (lineHeight of lineHeightOptions; track lineHeight) {\n        <button\n          type=\"button\"\n          class=\"z-editor-menu-item\"\n          [class.z-editor-menu-item-active]=\"activeLineHeight() === lineHeight\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"applyLineHeight(lineHeight, close)\">\n          <span>{{ lineHeight }}</span>\n        </button>\n      }\n    </div>\n  </ng-template>\n\n  <ng-template #textColorPopover let-close=\"close\">\n    @let currentTextColor = activeTextColor();\n    <div class=\"z-editor-color-grid\">\n      @for (color of textColorSwatches; track color) {\n        <button\n          type=\"button\"\n          class=\"z-editor-color-swatch\"\n          [class.z-editor-color-swatch-active]=\"currentTextColor === color\"\n          [style.background]=\"color\"\n          [attr.aria-label]=\"'Text color ' + color\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"setTextColor(color, close)\"></button>\n      }\n      <label class=\"z-editor-color-custom\">\n        <input type=\"color\" [value]=\"currentTextColor\" (input)=\"setTextColorFromEvent($event, close)\" />\n        {{ currentTextColor }}\n      </label>\n      <button\n        type=\"button\"\n        z-button\n        zType=\"outline\"\n        zSize=\"sm\"\n        class=\"z-editor-color-reset\"\n        (mousedown)=\"$event.preventDefault()\"\n        (click)=\"unsetTextColor(close)\">\n        Reset\n      </button>\n    </div>\n  </ng-template>\n\n  <ng-template #backgroundColorPopover let-close=\"close\">\n    @let currentBgColor = activeBackgroundColor();\n    <div class=\"z-editor-color-grid\">\n      @for (color of backgroundColorSwatches; track color) {\n        <button\n          type=\"button\"\n          class=\"z-editor-color-swatch\"\n          [class.z-editor-color-swatch-active]=\"currentBgColor === color\"\n          [style.background]=\"color\"\n          [attr.aria-label]=\"'Background color ' + color\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"setBackgroundColor(color, close)\"></button>\n      }\n      <label class=\"z-editor-color-custom\">\n        <input type=\"color\" [value]=\"currentBgColor\" (input)=\"setBackgroundColorFromEvent($event, close)\" />\n        {{ currentBgColor }}\n      </label>\n      <button\n        type=\"button\"\n        z-button\n        zType=\"outline\"\n        zSize=\"sm\"\n        class=\"z-editor-color-reset\"\n        (mousedown)=\"$event.preventDefault()\"\n        (click)=\"unsetBackgroundColor(close)\">\n        Reset\n      </button>\n    </div>\n  </ng-template>\n\n  <div #floatingToolbar class=\"z-editor-floating-toolbar\" role=\"toolbar\" [attr.aria-controls]=\"editorId\">\n    @for (item of floatingToolbarItems(); track item.id) {\n      @switch (item.id) {\n        @case ('blockStyle') {\n          <button\n            type=\"button\"\n            class=\"z-editor-toolbar-button\"\n            z-popover\n            [zPopoverContent]=\"blockStylePopover\"\n            zPosition=\"bottom-left\"\n            zTrigger=\"click\"\n            zClass=\"z-editor-menu-popover\"\n            (zControl)=\"onBlockStylePopoverControl($event)\"\n            (zHideStart)=\"onFloatingPopoverHide()\"\n            [disabled]=\"item.disabled\"\n            [attr.aria-label]=\"item.label\"\n            [attr.title]=\"activeBlockStyleLabel()\"\n            (mousedown)=\"$event.preventDefault()\">\n            <i z-icon [zType]=\"item.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n          </button>\n        }\n        @case ('lineHeight') {\n          <button\n            type=\"button\"\n            class=\"z-editor-toolbar-button\"\n            z-popover\n            [zPopoverContent]=\"lineHeightPopover\"\n            zPosition=\"bottom-left\"\n            zTrigger=\"click\"\n            zClass=\"z-editor-menu-popover\"\n            (zControl)=\"onLineHeightPopoverControl($event)\"\n            (zHideStart)=\"onFloatingPopoverHide()\"\n            [disabled]=\"item.disabled\"\n            [attr.aria-label]=\"item.label\"\n            [attr.title]=\"item.label\"\n            (mousedown)=\"$event.preventDefault()\">\n            <i z-icon [zType]=\"item.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n          </button>\n        }\n        @case ('textColor') {\n          @let textColor = activeTextColor();\n          <button\n            type=\"button\"\n            class=\"z-editor-toolbar-button\"\n            z-popover\n            [zPopoverContent]=\"textColorPopover\"\n            zPosition=\"bottom-left\"\n            zTrigger=\"click\"\n            zClass=\"z-editor-color-popover\"\n            (zControl)=\"onTextColorPopoverControl($event)\"\n            (zHideStart)=\"onFloatingPopoverHide()\"\n            [disabled]=\"item.disabled\"\n            [attr.aria-label]=\"item.label\"\n            [attr.title]=\"item.label\"\n            (mousedown)=\"$event.preventDefault()\">\n            <i z-icon [zType]=\"item.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n            <span class=\"z-editor-color-indicator\" [style.background]=\"textColor\"></span>\n          </button>\n        }\n        @case ('backgroundColor') {\n          @let bgColor = activeBackgroundColor();\n          <button\n            type=\"button\"\n            class=\"z-editor-toolbar-button\"\n            z-popover\n            [zPopoverContent]=\"backgroundColorPopover\"\n            zPosition=\"bottom-left\"\n            zTrigger=\"click\"\n            zClass=\"z-editor-color-popover\"\n            (zControl)=\"onBackgroundColorPopoverControl($event)\"\n            (zHideStart)=\"onFloatingPopoverHide()\"\n            [disabled]=\"item.disabled\"\n            [attr.aria-label]=\"item.label\"\n            [attr.title]=\"item.label\"\n            (mousedown)=\"$event.preventDefault()\">\n            <i z-icon [zType]=\"item.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n            <span class=\"z-editor-color-indicator\" [style.background]=\"bgColor\"></span>\n          </button>\n        }\n        @case ('align') {\n          <button\n            type=\"button\"\n            class=\"z-editor-toolbar-button\"\n            z-popover\n            [zPopoverContent]=\"alignPopover\"\n            zPosition=\"bottom-left\"\n            zTrigger=\"click\"\n            zClass=\"z-editor-menu-popover\"\n            (zControl)=\"onAlignPopoverControl($event)\"\n            (zHideStart)=\"onFloatingPopoverHide()\"\n            [disabled]=\"item.disabled\"\n            [attr.aria-label]=\"item.label\"\n            [attr.title]=\"activeAlignLabel()\"\n            (mousedown)=\"$event.preventDefault()\">\n            <i z-icon [zType]=\"activeAlignIcon()\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n          </button>\n        }\n        @default {\n          <button\n            type=\"button\"\n            class=\"z-editor-toolbar-button\"\n            z-tooltip\n            [zContent]=\"item.tooltip\"\n            zPosition=\"top\"\n            [zAlwaysShow]=\"true\"\n            [zDisabled]=\"item.disabled || !item.shortcut || !floatingToolbarVisible()\"\n            [class.z-editor-toolbar-button-active]=\"item.active\"\n            [disabled]=\"item.disabled\"\n            [attr.aria-label]=\"item.label\"\n            [attr.title]=\"item.label\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"onFloatingToolbarClick(item.id)\">\n            <i z-icon [zType]=\"item.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n          </button>\n        }\n      }\n    }\n  </div>\n\n  <span\n    #slashMenuTrigger\n    class=\"z-editor-slash-menu-trigger\"\n    z-popover\n    [zPopoverContent]=\"slashMenuPopover\"\n    zTrigger=\"manual\"\n    zPosition=\"bottom-left\"\n    zClass=\"z-editor-slash-popover\"\n    [zOffset]=\"4\"\n    [zPopoverWidth]=\"300\"\n    [style.left.px]=\"slashMenuState().left\"\n    [style.top.px]=\"slashMenuState().top\"\n    (zControl)=\"onSlashMenuPopoverControl($event)\"\n    (zHide)=\"onSlashMenuPopoverHide()\"></span>\n\n  <ng-template #slashMenuPopover>\n    @let slashActiveIndex = slashMenuActiveIndex();\n    <div class=\"z-editor-slash-menu-shell\">\n      <div #slashMenuScrollHost class=\"z-editor-slash-menu-scrollbar\">\n        <div class=\"z-editor-slash-menu\" role=\"listbox\" [attr.aria-controls]=\"editorId\">\n          @for (item of filteredSlashCommands(); track item.id) {\n            @if (item.showGroupLabel) {\n              <div class=\"z-editor-slash-menu-group\">\n                {{ item.group }}\n              </div>\n            }\n            <button\n              type=\"button\"\n              class=\"z-editor-slash-menu-item\"\n              role=\"option\"\n              [class.z-editor-slash-menu-item-active]=\"$index === slashActiveIndex\"\n              [attr.aria-selected]=\"$index === slashActiveIndex\"\n              (mousedown)=\"$event.preventDefault()\"\n              (click)=\"applySlashCommand(item)\">\n              <i z-icon [zType]=\"item.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n              <span class=\"z-editor-slash-menu-copy\">\n                <span class=\"z-editor-slash-menu-label\">{{ item.label }}</span>\n              </span>\n            </button>\n          } @empty {\n            <div class=\"z-editor-slash-menu-empty\">\n              <i z-icon zType=\"lucideSearchX\" zSize=\"28\" [zStrokeWidth]=\"1.8\"></i>\n              <span>{{ 'i18n_z_ui_editor_no_commands' | translate }}</span>\n            </div>\n          }\n        </div>\n      </div>\n      <div class=\"z-editor-slash-menu-footer\" aria-hidden=\"true\">\n        <span>\n          <kbd>\u2191\u2193</kbd>\n          {{ 'i18n_z_ui_editor_shortcut_navigate' | translate }}\n        </span>\n        <span>\n          <kbd>Esc</kbd>\n          {{ 'i18n_z_ui_editor_shortcut_abort' | translate }}\n        </span>\n        <span>\n          <kbd>\u21B5</kbd>\n          {{ 'i18n_z_ui_editor_shortcut_select' | translate }}\n        </span>\n      </div>\n    </div>\n  </ng-template>\n\n  <span\n    #linkPopoverTrigger\n    class=\"z-editor-link-popover-trigger\"\n    z-popover\n    [zPopoverContent]=\"linkPopover\"\n    zTrigger=\"manual\"\n    zPosition=\"bottom-left\"\n    zClass=\"z-editor-link-popover\"\n    [zOffset]=\"6\"\n    [zPopoverWidth]=\"320\"\n    [style.left.px]=\"linkPopoverState().left\"\n    [style.top.px]=\"linkPopoverState().top\"\n    [style.width.px]=\"linkPopoverState().width\"\n    [style.height.px]=\"linkPopoverState().height\"\n    (zControl)=\"onLinkPopoverControl($event)\"\n    (zHideStart)=\"onLinkPopoverHide()\"></span>\n\n  <ng-template #linkPopover>\n    <div class=\"z-editor-link-popover-content\" (keydown.escape)=\"closeLinkPopover()\">\n      <ng-template #linkPrefix>\n        <z-icon zType=\"lucideLink\" zSize=\"16\" class=\"text-muted-foreground\" />\n      </ng-template>\n      <z-input\n        zType=\"url\"\n        zSize=\"sm\"\n        class=\"z-editor-link-popover-input\"\n        [zPrefix]=\"linkPrefix\"\n        zPlaceholder=\"https://example.com\"\n        [zValidators]=\"linkValidators\"\n        [ngModel]=\"linkUrl()\"\n        (ngModelChange)=\"onLinkUrlChange($event)\"\n        (zOnEnter)=\"applyLink()\" />\n      <div class=\"z-editor-link-popover-actions\">\n        <button\n          type=\"button\"\n          z-button\n          zType=\"ghost\"\n          zSize=\"sm\"\n          [zDisabled]=\"!canApplyLink()\"\n          (click)=\"applyLink()\"\n          aria-label=\"Apply link\">\n          <z-icon zType=\"lucideCheck\" zSize=\"16\" [zStrokeWidth]=\"2.5\" />\n        </button>\n        <button\n          type=\"button\"\n          z-button\n          zType=\"ghost\"\n          zSize=\"sm\"\n          [zDisabled]=\"!activeLinkHref()\"\n          (click)=\"openActiveLink()\"\n          aria-label=\"Open link\">\n          <z-icon zType=\"lucideExternalLink\" zSize=\"16\" [zStrokeWidth]=\"2.5\" />\n        </button>\n        <button\n          type=\"button\"\n          z-button\n          zType=\"ghost-destructive\"\n          zSize=\"sm\"\n          [zDisabled]=\"!activeLinkHref()\"\n          (click)=\"removeLink()\"\n          aria-label=\"Remove link\">\n          <z-icon zType=\"lucideUnlink\" zSize=\"16\" [zStrokeWidth]=\"2.5\" />\n        </button>\n      </div>\n    </div>\n  </ng-template>\n</div>\n", styles: [".z-editor-wrapper .z-editor-toolbar{display:flex;flex-wrap:wrap;gap:.125rem;align-items:center;border-bottom:.0625rem solid var(--border);border-top-left-radius:.375rem;border-top-right-radius:.375rem;background-color:color-mix(in srgb,var(--muted) 30%,transparent);padding:.5rem}.z-editor-wrapper .z-editor-toolbar-button{position:relative;display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border-radius:var(--radius-xs);padding:0;color:var(--muted-foreground);transition:background-color .15s ease,color .15s ease,opacity .15s ease}.z-editor-wrapper .z-editor-toolbar-button:hover:not(:disabled){background-color:var(--accent);color:var(--foreground)}.z-editor-wrapper .z-editor-toolbar-button:disabled{cursor:not-allowed;opacity:.45}.z-editor-wrapper .z-editor-toolbar-button:is(.z-editor-toolbar-button-active,.z-popover-open,:focus):not(:disabled){background-color:color-mix(in srgb,var(--primary) 10%,transparent);color:var(--primary)}.z-editor-wrapper .z-editor-content{position:relative;border-bottom-right-radius:.375rem;border-bottom-left-radius:.375rem}.z-editor-wrapper .z-editor-prosemirror{width:100%;outline:none;padding:.75rem;color:var(--foreground)}.z-editor-wrapper .z-editor-prosemirror>*{margin-top:.75rem;margin-bottom:.75rem}.z-editor-wrapper .z-editor-prosemirror>:first-child{margin-top:0}.z-editor-wrapper .z-editor-prosemirror>:last-child{margin-bottom:0}.z-editor-wrapper .z-editor-prosemirror p{line-height:1.5}.z-editor-wrapper .z-editor-prosemirror a{color:var(--primary);font-weight:500;text-decoration-line:underline;text-decoration-color:currentcolor;text-decoration-thickness:.0625rem;text-underline-offset:.1875rem;cursor:pointer;transition:text-decoration-color .15s ease}.z-editor-wrapper .z-editor-prosemirror a:hover{text-decoration-color:color-mix(in srgb,currentcolor 70%,transparent)}.z-editor-wrapper .z-editor-prosemirror .mention{color:var(--primary);font-weight:500}.z-editor-wrapper .z-editor-prosemirror :is(h1,h2,h3,h4,h5,h6){color:var(--foreground);font-weight:700;line-height:1.2}.z-editor-wrapper .z-editor-prosemirror h1{font-size:1.875rem}.z-editor-wrapper .z-editor-prosemirror h2{font-size:1.5rem}.z-editor-wrapper .z-editor-prosemirror h3{font-size:1.25rem}.z-editor-wrapper .z-editor-prosemirror h4{font-size:1.125rem}.z-editor-wrapper .z-editor-prosemirror h5,.z-editor-wrapper .z-editor-prosemirror h6{font-size:1rem}.z-editor-wrapper .z-editor-prosemirror blockquote{border-left:.25rem solid var(--border);padding-left:1rem;font-style:italic;color:var(--muted-foreground)}.z-editor-wrapper .z-editor-prosemirror [data-type=horizontalRule]{margin-top:2rem;margin-bottom:2rem;padding-top:.5rem;padding-bottom:.5rem}.z-editor-wrapper .z-editor-prosemirror hr{border:0;border-top:.0625rem solid var(--border)}.z-editor-wrapper .z-editor-prosemirror pre{overflow-x:auto;border:.0625rem solid var(--border);border-radius:var(--radius-md);background-color:var(--muted);padding:.75rem 1rem;font-size:.875rem;line-height:1.5;white-space:pre-wrap;word-break:break-word}.z-editor-wrapper .z-editor-prosemirror pre code{display:inline;border:0;border-radius:0;background-color:transparent;padding:0;color:inherit;font:inherit}.z-editor-wrapper .z-editor-prosemirror code{display:inline-block;border:.0625rem solid var(--border);border-radius:var(--radius-md);background-color:var(--muted);padding:.125rem .375rem;color:var(--foreground);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:.875em;font-weight:500}.z-editor-wrapper .z-editor-prosemirror :is(ul,ol){padding-left:1.5rem}.z-editor-wrapper .z-editor-prosemirror ul{list-style:disc}.z-editor-wrapper .z-editor-prosemirror ol{list-style:decimal}.z-editor-wrapper .z-editor-prosemirror li{margin-top:.375rem;margin-bottom:.375rem;padding-left:.375rem}.z-editor-wrapper .z-editor-prosemirror img{display:block;max-width:100%;border-radius:var(--radius-md)}.z-editor-wrapper .z-editor-prosemirror img[data-text-align=center]{margin-right:auto;margin-left:auto}.z-editor-wrapper .z-editor-prosemirror img[data-text-align=right]{margin-right:0;margin-left:auto}.z-editor-wrapper .z-editor-prosemirror img[data-text-align=left],.z-editor-wrapper .z-editor-prosemirror img[data-text-align=justify]{margin-right:auto;margin-left:0}.z-editor-wrapper .z-editor-prosemirror img.ProseMirror-selectednode{outline:.125rem solid var(--primary)}.z-editor-wrapper .z-editor-prosemirror .image-resizer{display:inline-flex;position:relative;flex-grow:0}.z-editor-wrapper .z-editor-prosemirror .image-resizer .resize-trigger{position:absolute;right:-6px;bottom:-9px;width:12px;height:12px;cursor:nwse-resize;border-radius:50%;background-color:var(--primary);opacity:0;transition:opacity .2s ease}.z-editor-wrapper .z-editor-prosemirror .image-resizer:hover .resize-trigger{opacity:1}.z-editor-wrapper .z-editor-prosemirror .image-resizer .image-alignment{display:flex;gap:4px;position:absolute;top:-32px;left:0;padding:4px;border-radius:var(--radius-xs);background-color:var(--popover);box-shadow:0 2px 8px #00000026;opacity:0;transition:opacity .2s ease;pointer-events:none}.z-editor-wrapper .z-editor-prosemirror .image-resizer:hover .image-alignment{opacity:1;pointer-events:auto}.z-editor-wrapper .z-editor-prosemirror .ProseMirror-selectednode:not(img):not(pre):not([data-node-view-wrapper]){background-color:color-mix(in srgb,var(--primary) 20%,transparent)}.z-editor-wrapper .z-editor-prosemirror :is(p,h1,h2,h3,h4,h5,h6).is-empty:before{float:left;height:0;color:var(--muted-foreground);content:attr(data-placeholder);pointer-events:none}.z-editor-placeholder-first-line .z-editor-wrapper .z-editor-prosemirror :is(p,h1,h2,h3,h4,h5,h6).is-empty:before{content:none}.z-editor-placeholder-first-line .z-editor-wrapper .z-editor-prosemirror :is(p,h1,h2,h3,h4,h5,h6).is-editor-empty:first-child:before{content:attr(data-placeholder)}.z-editor-wrapper.z-editor-disabled .z-editor-toolbar,.z-editor-wrapper.z-editor-disabled .z-editor-content{pointer-events:none}.z-editor-wrapper.z-editor-readonly .z-editor-toolbar{display:none}.z-editor-wrapper.z-editor-readonly .z-editor-content{border-radius:var(--radius-md)}.z-editor-wrapper.z-editor-readonly .z-editor-prosemirror{cursor:default}.z-editor-link-modal{padding-top:0;padding-bottom:0}.z-editor-link-modal .z-modal-scrollbar main{min-height:0;padding:1rem}.z-editor-emoji-popover{padding:0;overflow:hidden;box-shadow:0 .5rem 1.5rem -.25rem #0000002e,0 .25rem .5rem -.125rem #0000001a}.z-editor-color-popover{padding:.5rem}.z-editor-menu-popover{padding:.25rem}.z-editor-menu-list{display:flex;min-width:9rem;flex-direction:column;gap:.125rem}.z-editor-menu-item{display:flex;width:100%;cursor:pointer;align-items:center;gap:.5rem;border-radius:var(--radius-xs);padding:.375rem .5rem;color:var(--muted-foreground);font-size:.8125rem;line-height:1.25;transition:background-color .15s ease,color .15s ease}.z-editor-menu-item:hover,.z-editor-menu-item.z-editor-menu-item-active{background-color:var(--accent);color:var(--foreground)}.z-editor-color-indicator{position:absolute;right:.25rem;bottom:.1875rem;width:.75rem;height:.1875rem;border-radius:999px;box-shadow:0 0 0 .0625rem var(--border)}.z-editor-color-grid{display:grid;grid-template-columns:repeat(5,1.625rem);gap:.25rem}.z-editor-color-swatch{width:1.625rem;height:1.625rem;border:.0625rem solid var(--border);border-radius:var(--radius-xs);cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}.z-editor-color-swatch:hover{transform:translateY(-.0625rem);border-color:var(--ring)}.z-editor-color-swatch.z-editor-color-swatch-active{border-color:var(--primary);box-shadow:0 0 0 .125rem color-mix(in srgb,var(--primary) 20%,transparent)}.z-editor-color-custom{grid-column:1/-1;display:flex;height:1.875rem;cursor:pointer;align-items:center;gap:.5rem;border:.0625rem solid var(--border);border-radius:var(--radius-xs);padding:.25rem .5rem;color:var(--muted-foreground);font-size:.75rem;transition:border-color .15s ease,background-color .15s ease,color .15s ease}.z-editor-color-custom input{width:1.375rem;height:1.375rem;flex:none;cursor:pointer;border:0;padding:0;background:transparent}.z-editor-color-custom:hover{border-color:var(--ring);background-color:var(--accent);color:var(--foreground)}.z-editor-color-reset{grid-column:1/-1;width:100%;justify-content:center}.z-editor-floating-toolbar{display:inline-flex;align-items:center;gap:.125rem;border:.0625rem solid var(--border);border-radius:var(--radius-sm);background-color:var(--popover);padding:.375rem;box-shadow:0 .625rem 1.5rem -.75rem #00000059,0 .25rem .75rem -.5rem #0003;visibility:hidden;opacity:0;position:fixed;top:-10000px;left:-10000px;scale:.98;translate:0 .25rem;transform-origin:top left;transition:opacity .12s ease,visibility .12s ease,scale .16s ease,translate .16s ease}.z-editor-floating-toolbar[style*=\"visibility: visible\"]{animation:z-editor-floating-toolbar-in .16s cubic-bezier(.16,1,.3,1);scale:1;translate:0 0}@keyframes z-editor-floating-toolbar-in{0%{opacity:0;scale:.96;translate:0 .375rem}to{opacity:1;scale:1;translate:0 0}}.z-editor-slash-menu-trigger,.z-editor-link-popover-trigger{position:fixed;z-index:-1;width:.0625rem;height:.0625rem;pointer-events:none}.z-editor-link-popover{padding:.5rem}.z-editor-link-popover-content{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;column-gap:.5rem}.z-editor-link-popover-input{flex:1;min-width:0}.z-editor-link-popover-actions{display:inline-flex;align-self:start;align-items:center;gap:.125rem}.z-editor-slash-popover{box-sizing:border-box;padding:0;overflow:hidden}.z-editor-slash-menu-shell{box-sizing:border-box;display:flex;min-width:0;height:min(16rem,100vh - 4rem);flex-direction:column}.z-editor-slash-menu-scrollbar{box-sizing:border-box;display:block;min-width:0;min-height:0;flex:1;overflow-x:hidden;overflow-y:scroll;overscroll-behavior:contain}.z-editor-slash-menu{box-sizing:border-box;display:flex;min-width:0;min-height:100%;flex-direction:column;padding:.2rem;gap:.2rem;color:var(--popover-foreground)}.z-editor-slash-menu-group{margin:.25rem 0 .125rem;border-top:.0625rem solid var(--border);padding:.5rem .5rem .1875rem;color:var(--muted-foreground);font-size:.6875rem;font-weight:600;line-height:1;text-transform:uppercase}.z-editor-slash-menu-group:first-child{margin-top:0;border-top:0;padding-top:.5rem}.z-editor-slash-menu-item{box-sizing:border-box;display:flex;align-self:stretch;min-width:0;cursor:pointer;align-items:center;gap:.5rem;border-radius:var(--radius-xs);padding:.375rem .75rem;text-align:left;transition:background-color .15s ease,color .15s ease}.z-editor-slash-menu-item i{color:var(--muted-foreground);flex:none}.z-editor-slash-menu-item:hover,.z-editor-slash-menu-item.z-editor-slash-menu-item-active{background-color:var(--accent);color:var(--foreground)}.z-editor-slash-menu-copy{display:flex;min-width:0;align-items:center}.z-editor-slash-menu-label{color:var(--foreground);font-size:.8125rem;font-weight:500;line-height:1.2}.z-editor-slash-menu-empty{box-sizing:border-box;display:flex;align-self:stretch;max-width:100%;min-width:0;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:.625rem;padding:1rem;color:var(--muted-foreground);font-size:.8125rem;line-height:1.15;text-align:center}.z-editor-slash-menu-empty i{color:var(--muted-foreground);flex:none}.z-editor-slash-menu-footer{box-sizing:border-box;display:flex;min-width:0;flex:none;align-items:center;gap:.75rem;border-top:.0625rem solid var(--border);padding:.375rem .625rem;color:var(--popover-foreground);font-size:.75rem;font-weight:500;line-height:1;white-space:nowrap}.z-editor-slash-menu-footer span{display:inline-flex;align-items:center;gap:.25rem}.z-editor-slash-menu-footer kbd{color:var(--foreground);font:inherit}.z-editor-emoji-sheet{display:flex;width:18rem;max-width:85vw;height:20rem;max-height:70vh;flex-direction:column;overflow:hidden;background-color:var(--popover);color:var(--popover-foreground)}.z-editor-emoji-header{display:flex;flex-direction:column;gap:.5rem;padding:.75rem .75rem .625rem;flex:none}.z-editor-emoji-title{display:flex;align-items:center;gap:.375rem;padding-inline:.25rem;color:var(--foreground);font-size:.8125rem;font-weight:600;line-height:1;letter-spacing:-.005em}.z-editor-emoji-title-dot{display:inline-block;width:.375rem;height:.375rem;border-radius:999px;background-color:var(--primary);box-shadow:0 0 0 .1875rem color-mix(in srgb,var(--primary) 18%,transparent)}.z-editor-emoji-search{width:100%}.z-editor-emoji-body{flex:1 1 0;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--muted-foreground) 30%,transparent) transparent}.z-editor-emoji-body::-webkit-scrollbar{width:.375rem}.z-editor-emoji-body::-webkit-scrollbar-track{background:transparent}.z-editor-emoji-body::-webkit-scrollbar-thumb{border-radius:999px;background-color:color-mix(in srgb,var(--muted-foreground) 30%,transparent)}.z-editor-emoji-body::-webkit-scrollbar-thumb:hover{background-color:color-mix(in srgb,var(--muted-foreground) 55%,transparent)}.z-editor-emoji-grid{display:grid;grid-template-columns:repeat(8,1.875rem);justify-content:center;gap:.125rem;padding:.25rem .5rem .5rem}.z-editor-emoji-empty{display:flex;height:100%;min-height:10rem;flex-direction:column;align-items:center;justify-content:center;gap:.375rem;padding:1.5rem .75rem;color:var(--muted-foreground);font-size:.8125rem;text-align:center}.z-editor-emoji-empty-icon{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:var(--radius-md);background-color:color-mix(in srgb,var(--muted) 70%,transparent);color:var(--muted-foreground)}.z-editor-emoji-button{display:inline-flex;align-items:center;justify-content:center;width:1.875rem;height:1.875rem;border-radius:var(--radius-md);font-family:\"Noto Color Emoji\",\"Apple Color Emoji\",\"Segoe UI Emoji\",Twemoji Mozilla,EmojiOne Color,\"Android Emoji\",sans-serif;font-size:1.1875rem;line-height:1;transition:background-color .12s ease,box-shadow .12s ease}.z-editor-emoji-button:hover{background-color:color-mix(in srgb,var(--accent) 80%,transparent);box-shadow:0 0 0 .0625rem color-mix(in srgb,var(--ring) 35%,transparent)}.z-editor-emoji-button:active{background-color:color-mix(in srgb,var(--primary) 18%,transparent);box-shadow:0 0 0 .0625rem color-mix(in srgb,var(--primary) 45%,transparent)}.z-editor-emoji-footer{position:relative;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));align-items:center;border-top:.0625rem solid color-mix(in srgb,var(--border) 70%,transparent);padding:.25rem;background-color:color-mix(in srgb,var(--muted) 35%,transparent);flex:none}.z-editor-emoji-footer-button{position:relative;display:inline-flex;align-items:center;justify-content:center;height:1.875rem;border-radius:var(--radius-md);color:var(--muted-foreground);transition:color .15s ease,background-color .15s ease}.z-editor-emoji-footer-button:after{content:\"\";position:absolute;bottom:.0625rem;left:50%;width:0;height:.125rem;border-radius:999px;background-color:var(--primary);transition:width .2s ease,transform .2s ease;transform:translate(-50%)}.z-editor-emoji-footer-button:hover{color:var(--foreground);background-color:color-mix(in srgb,var(--accent) 60%,transparent)}.z-editor-emoji-footer-button.z-editor-emoji-footer-button-active{color:var(--primary)}.z-editor-emoji-footer-button.z-editor-emoji-footer-button-active:after{width:.875rem}\n"] }]
         }], ctorParameters: () => [], propDecorators: { _editorHost: [{ type: i0.ViewChild, args: ['editorHost', { isSignal: true }] }], _floatingToolbar: [{ type: i0.ViewChild, args: ['floatingToolbar', { isSignal: true }] }], _slashMenuTrigger: [{ type: i0.ViewChild, args: ['slashMenuTrigger', { isSignal: true }] }], _linkPopoverTrigger: [{ type: i0.ViewChild, args: ['linkPopoverTrigger', { isSignal: true }] }], _slashMenuScrollHost: [{ type: i0.ViewChild, args: ['slashMenuScrollHost', { isSignal: true }] }], zOnChange: [{ type: i0.Output, args: ["zOnChange"] }], zOnFocus: [{ type: i0.Output, args: ["zOnFocus"] }], zOnBlur: [{ type: i0.Output, args: ["zOnBlur"] }], zControl: [{ type: i0.Output, args: ["zControl"] }], zEvent: [{ type: i0.Output, args: ["zEvent"] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], zSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSize", required: false }] }], zLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLabel", required: false }] }], zLabelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLabelClass", required: false }] }], zPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPlaceholder", required: false }] }], zRequired: [{ type: i0.Input, args: [{ isSignal: true, alias: "zRequired", required: false }] }], zDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDisabled", required: false }] }], zReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "zReadonly", required: false }] }], zContentType: [{ type: i0.Input, args: [{ isSignal: true, alias: "zContentType", required: false }] }], zToolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "zToolbar", required: false }] }], zTipTap: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTipTap", required: false }] }], zValidators: [{ type: i0.Input, args: [{ isSignal: true, alias: "zValidators", required: false }] }] } });
 
 /**