@shival99/z-ui 2.0.2 → 2.0.3

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

@@ -7,21 +7,26 @@ import { TranslatePipe } from '@ngx-translate/core';
 import { ZButtonComponent } from '@shival99/z-ui/components/z-button';
 import { ZIconComponent } from '@shival99/z-ui/components/z-icon';
 import { ZInputComponent } from '@shival99/z-ui/components/z-input';
-import { ZModalComponent, ZModalContentDirective } from '@shival99/z-ui/components/z-modal';
+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, zMergeClasses, zCreateEvent } from '@shival99/z-ui/utils';
-import { Editor } from '@tiptap/core';
+import { zTransform, zUuid, Z_EMOJI_SHEET, zMergeClasses, zCreateEvent, Z_EMOJI_KEYWORDS } from '@shival99/z-ui/utils';
+import { 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';
-import Image from '@tiptap/extension-image';
 import Link from '@tiptap/extension-link';
 import Mention from '@tiptap/extension-mention';
 import Placeholder from '@tiptap/extension-placeholder';
 import TextAlign from '@tiptap/extension-text-align';
+import { TextStyle, Color, BackgroundColor } from '@tiptap/extension-text-style';
+import FontSize from '@tiptap/extension-text-style/font-size';
 import Underline from '@tiptap/extension-underline';
 import { Markdown } from '@tiptap/markdown';
+import { TextSelection } from '@tiptap/pm/state';
 import StarterKit from '@tiptap/starter-kit';
 import { merge, filter } from 'rxjs';
+import ImageResize from 'tiptap-extension-resize-image';
 import { cva } from 'class-variance-authority';
 
 const Z_EDITOR_DEFAULT_TOOLBAR = [
@@ -32,17 +37,192 @@ const Z_EDITOR_DEFAULT_TOOLBAR = [
     { id: 'underline', icon: 'lucideUnderline', label: 'Underline' },
     { id: 'strike', icon: 'lucideStrikethrough', label: 'Strike' },
     { id: 'code', icon: 'lucideCode', label: 'Code' },
-    { id: 'heading1', icon: 'lucideHeading1', label: 'Heading 1' },
-    { id: 'heading2', icon: 'lucideHeading2', label: 'Heading 2' },
+    { id: 'blockStyle', icon: 'lucidePilcrow', label: 'Block style' },
     { id: 'bulletList', icon: 'lucideList', label: 'Bullet list' },
     { id: 'orderedList', icon: 'lucideListOrdered', label: 'Ordered list' },
     { id: 'blockquote', icon: 'lucideQuote', label: 'Blockquote' },
     { id: 'codeBlock', icon: 'lucideFileCode', label: 'Code block' },
     { id: 'link', icon: 'lucideLink', label: 'Link' },
     { id: 'image', icon: 'lucideImage', label: 'Image' },
+    { id: 'emoji', icon: 'lucideSmilePlus', label: 'Emoji' },
+    { id: 'textColor', icon: 'lucidePalette', label: 'Text color' },
+    { id: 'backgroundColor', icon: 'lucideHighlighter', label: 'Background color' },
+    { id: 'align', icon: 'lucideAlignLeft', label: 'Align' },
     { id: 'horizontalRule', icon: 'lucideMinus', label: 'Horizontal rule' },
     { id: 'clearFormatting', icon: 'lucideRemoveFormatting', label: 'Clear formatting' },
 ];
+const Z_EDITOR_COLOR_SWATCHES = [
+    '#000000',
+    '#111827',
+    '#374151',
+    '#6b7280',
+    '#9ca3af',
+    '#ffffff',
+    '#7f1d1d',
+    '#ef4444',
+    '#f97316',
+    '#f59e0b',
+    '#eab308',
+    '#365314',
+    '#22c55e',
+    '#0f766e',
+    '#06b6d4',
+    '#1d4ed8',
+    '#3b82f6',
+    '#8b5cf6',
+    '#6d28d9',
+    '#ec4899',
+];
+const Z_EDITOR_BACKGROUND_SWATCHES = [
+    '#ffffff',
+    '#f9fafb',
+    '#f3f4f6',
+    '#e5e7eb',
+    '#d1d5db',
+    '#fef3c7',
+    '#fde68a',
+    '#ffedd5',
+    '#fed7aa',
+    '#fee2e2',
+    '#fecaca',
+    '#fce7f3',
+    '#fbcfe8',
+    '#ede9fe',
+    '#ddd6fe',
+    '#dbeafe',
+    '#bfdbfe',
+    '#cffafe',
+    '#a5f3fc',
+    '#dcfce7',
+];
+const Z_EDITOR_SLASH_COMMANDS = [
+    {
+        id: 'text',
+        command: 'paragraph',
+        icon: 'lucideType',
+        label: 'Text',
+        description: 'Plain paragraph text',
+        group: 'Formatting',
+        aliases: ['paragraph', 'p'],
+    },
+    {
+        id: 'standard',
+        command: 'paragraph',
+        icon: 'lucideType',
+        label: 'Standard',
+        description: '',
+        group: 'Formatting',
+        aliases: ['standard', 'normal'],
+    },
+    {
+        id: 'small',
+        command: 'small',
+        icon: 'lucideCaseLower',
+        label: 'Small',
+        description: '',
+        group: 'Formatting',
+        aliases: ['small', 'caption'],
+    },
+    {
+        id: 'heading-1',
+        command: 'heading1',
+        icon: 'lucideHeading1',
+        label: 'Heading 1',
+        description: 'Large section heading',
+        group: 'Formatting',
+        aliases: ['h1', 'title'],
+    },
+    {
+        id: 'heading-2',
+        command: 'heading2',
+        icon: 'lucideHeading2',
+        label: 'Heading 2',
+        description: 'Medium section heading',
+        group: 'Formatting',
+        aliases: ['h2', 'subtitle'],
+    },
+    {
+        id: 'heading-3',
+        command: 'heading3',
+        icon: 'lucideHeading3',
+        label: 'Heading 3',
+        description: 'Small section heading',
+        group: 'Formatting',
+        aliases: ['h3'],
+    },
+    {
+        id: 'heading-4',
+        command: 'heading4',
+        icon: 'lucideHeading4',
+        label: 'Heading 4',
+        description: '',
+        group: 'Formatting',
+        aliases: ['h4'],
+    },
+    {
+        id: 'bullet-list',
+        command: 'bulletList',
+        icon: 'lucideList',
+        label: 'Bullet list',
+        description: 'Unordered list',
+        group: 'Lists',
+        aliases: ['ul', 'list'],
+    },
+    {
+        id: 'ordered-list',
+        command: 'orderedList',
+        icon: 'lucideListOrdered',
+        label: 'Ordered list',
+        description: 'Numbered list',
+        group: 'Lists',
+        aliases: ['ol', 'number'],
+    },
+    {
+        id: 'alphabetical-list',
+        command: 'orderedList',
+        icon: 'lucideListOrdered',
+        label: 'Alphabetical list',
+        description: '',
+        group: 'Lists',
+        aliases: ['ordered', 'ol', 'number', 'alphabetical'],
+    },
+    {
+        id: 'blockquote',
+        command: 'blockquote',
+        icon: 'lucideQuote',
+        label: 'Blockquote',
+        description: 'Quote block',
+        group: 'Blocks',
+        aliases: ['quote'],
+    },
+    {
+        id: 'code-block',
+        command: 'codeBlock',
+        icon: 'lucideFileCode',
+        label: 'Code block',
+        description: 'Preformatted code',
+        group: 'Blocks',
+        aliases: ['code', 'pre'],
+    },
+    {
+        id: 'horizontal-rule',
+        command: 'horizontalRule',
+        icon: 'lucideMinus',
+        label: 'Divider',
+        description: 'Horizontal separator',
+        group: 'Insert',
+        aliases: ['hr', 'line', 'divider'],
+    },
+    {
+        id: 'image',
+        command: 'image',
+        icon: 'lucideImage',
+        label: 'Image',
+        description: 'Upload image',
+        group: 'Insert',
+        aliases: ['photo', 'picture'],
+    },
+];
 
 const zEditorVariants = cva([
     'z-editor block w-full rounded-[0.375rem] border border-input bg-white shadow-xs',
@@ -79,6 +259,8 @@ class ZEditorComponent {
     _destroyRef = inject(DestroyRef);
     _zTranslate = inject(ZTranslateService);
     _editorHost = viewChild.required('editorHost');
+    _floatingToolbar = viewChild.required('floatingToolbar');
+    _slashMenuScrollHost = viewChild('slashMenuScrollHost', ...(ngDevMode ? [{ debugName: "_slashMenuScrollHost" }] : []));
     zOnChange = output();
     zOnFocus = output();
     zOnBlur = output();
@@ -105,7 +287,22 @@ class ZEditorComponent {
     _isNgModel = signal(false, ...(ngDevMode ? [{ debugName: "_isNgModel" }] : []));
     _selectionVersion = signal(0, ...(ngDevMode ? [{ debugName: "_selectionVersion" }] : []));
     _plainText = signal('', ...(ngDevMode ? [{ debugName: "_plainText" }] : []));
-    linkModalVisible = signal(false, ...(ngDevMode ? [{ debugName: "linkModalVisible" }] : []));
+    slashMenuState = signal({
+        visible: false,
+        query: '',
+        from: 0,
+        to: 0,
+        left: 0,
+        top: 0,
+    }, ...(ngDevMode ? [{ debugName: "slashMenuState" }] : []));
+    slashMenuActiveIndex = signal(0, ...(ngDevMode ? [{ debugName: "slashMenuActiveIndex" }] : []));
+    linkPopoverState = signal({
+        visible: false,
+        left: 0,
+        top: 0,
+        width: 0,
+        height: 0,
+    }, ...(ngDevMode ? [{ debugName: "linkPopoverState" }] : []));
     linkUrl = signal('', ...(ngDevMode ? [{ debugName: "linkUrl" }] : []));
     activeLinkHref = signal('', ...(ngDevMode ? [{ debugName: "activeLinkHref" }] : []));
     linkValidators = [
@@ -115,6 +312,33 @@ class ZEditorComponent {
             validate: value => this._normalizeUrl(String(value ?? '')) !== '',
         },
     ];
+    textColorSwatches = Z_EDITOR_COLOR_SWATCHES;
+    backgroundColorSwatches = Z_EDITOR_BACKGROUND_SWATCHES;
+    slashCommands = Z_EDITOR_SLASH_COMMANDS;
+    blockStyleOptions = [
+        { command: 'paragraph', icon: 'lucidePilcrow', label: 'Paragraph' },
+        { command: 'heading1', icon: 'lucideHeading1', label: 'Heading 1' },
+        { command: 'heading2', icon: 'lucideHeading2', label: 'Heading 2' },
+        { command: 'heading3', icon: 'lucideHeading3', label: 'Heading 3' },
+        { command: 'heading4', icon: 'lucideHeading4', label: 'Heading 4' },
+    ];
+    alignOptions = [
+        { command: 'alignLeft', icon: 'lucideAlignLeft', label: 'Left' },
+        { command: 'alignCenter', icon: 'lucideAlignCenter', label: 'Center' },
+        { command: 'alignRight', icon: 'lucideAlignRight', label: 'Right' },
+        { command: 'alignJustify', icon: 'lucideAlignJustify', label: 'Justify' },
+    ];
+    _toolbarShortcutLabels = {
+        bold: 'Ctrl+B',
+        italic: 'Ctrl+I',
+        underline: 'Ctrl+U',
+        strike: 'Ctrl+Shift+S',
+        code: 'Ctrl+E',
+        link: 'Ctrl+K',
+        clearFormatting: 'Ctrl+\\',
+        undo: 'Ctrl+Z',
+        redo: 'Ctrl+Y',
+    };
     uiState = signal({
         touched: false,
         dirty: false,
@@ -126,9 +350,58 @@ class ZEditorComponent {
     _editor = null;
     _pendingValue = '';
     _linkSelection = null;
+    _linkAnchorElement = null;
+    _emojiPopoverControl = null;
+    _blockStylePopoverControl = null;
+    _alignPopoverControl = null;
+    _textColorPopoverControl = null;
+    _backgroundColorPopoverControl = null;
+    _slashMenuPopoverControl = null;
+    _dismissedSlashMenu = null;
+    _linkPopoverControl = null;
+    _resizeObserver = null;
+    _resizeListenerCleanup = null;
+    _bubbleMenuPositionFrame = null;
+    emojiCategories = Z_EMOJI_SHEET;
+    activeEmojiCategoryId = signal(this.emojiCategories[0]?.id ?? 'smileys-people', ...(ngDevMode ? [{ debugName: "activeEmojiCategoryId" }] : []));
+    emojiSearch = signal('', ...(ngDevMode ? [{ debugName: "emojiSearch" }] : []));
+    activeEmojiCategory = computed(() => this.emojiCategories.find(category => category.id === this.activeEmojiCategoryId()) ?? this.emojiCategories[0], ...(ngDevMode ? [{ debugName: "activeEmojiCategory" }] : []));
+    activeEmojiCategoryLabel = computed(() => this.activeEmojiCategory()?.labelKey ?? 'i18n_z_ui_emoji_category_smileys', ...(ngDevMode ? [{ debugName: "activeEmojiCategoryLabel" }] : []));
+    emojiSearchQuery = computed(() => this.emojiSearch().trim().toLowerCase(), ...(ngDevMode ? [{ debugName: "emojiSearchQuery" }] : []));
+    activeEmojis = computed(() => {
+        const query = this.emojiSearchQuery();
+        if (query) {
+            return this._searchEmojis(query);
+        }
+        return this.activeEmojiCategory()?.emojis ?? [];
+    }, ...(ngDevMode ? [{ debugName: "activeEmojis" }] : []));
+    hasEmojiResults = computed(() => this.activeEmojis().length > 0, ...(ngDevMode ? [{ debugName: "hasEmojiResults" }] : []));
     isDisabled = computed(() => this._disabled() || this.zDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
     showToolbar = computed(() => this.zToolbar() !== false && !this.zReadonly() && !this.isDisabled(), ...(ngDevMode ? [{ debugName: "showToolbar" }] : []));
     normalizedLinkUrl = computed(() => this._normalizeUrl(this.linkUrl()), ...(ngDevMode ? [{ debugName: "normalizedLinkUrl" }] : []));
+    activeTextColor = computed(() => this._getTextStyleAttribute('color') || '#111827', ...(ngDevMode ? [{ debugName: "activeTextColor" }] : []));
+    activeBackgroundColor = computed(() => this._getTextStyleAttribute('backgroundColor') || '#ffffff', ...(ngDevMode ? [{ debugName: "activeBackgroundColor" }] : []));
+    activeBlockStyle = computed(() => this._getActiveBlockStyle(), ...(ngDevMode ? [{ debugName: "activeBlockStyle" }] : []));
+    activeBlockStyleLabel = computed(() => this.blockStyleOptions.find(option => option.command === this.activeBlockStyle())?.label ?? 'Paragraph', ...(ngDevMode ? [{ debugName: "activeBlockStyleLabel" }] : []));
+    activeAlign = computed(() => this._getActiveAlign(), ...(ngDevMode ? [{ debugName: "activeAlign" }] : []));
+    activeAlignLabel = computed(() => this.alignOptions.find(option => option.command === this.activeAlign())?.label ?? 'Left', ...(ngDevMode ? [{ debugName: "activeAlignLabel" }] : []));
+    activeAlignIcon = computed(() => this.alignOptions.find(option => option.command === this.activeAlign())?.icon ?? 'lucideAlignLeft', ...(ngDevMode ? [{ debugName: "activeAlignIcon" }] : []));
+    filteredSlashCommands = computed(() => {
+        const query = this.slashMenuState().query.trim().toLowerCase();
+        const commands = this.slashCommands;
+        let matchedCommands = commands;
+        if (query) {
+            matchedCommands = commands.filter(item => {
+                const label = item.label.toLowerCase();
+                const description = item.description.toLowerCase();
+                return (label.includes(query) || description.includes(query) || item.aliases.some(alias => alias.includes(query)));
+            });
+        }
+        return matchedCommands.map((item, index) => ({
+            ...item,
+            showGroupLabel: index === 0 || matchedCommands[index - 1]?.group !== item.group,
+        }));
+    }, ...(ngDevMode ? [{ debugName: "filteredSlashCommands" }] : []));
     canApplyLink = computed(() => !!this.normalizedLinkUrl(), ...(ngDevMode ? [{ debugName: "canApplyLink" }] : []));
     effectivePlaceholder = computed(() => {
         this._zTranslate.currentLang();
@@ -146,6 +419,29 @@ class ZEditorComponent {
             disabled: this._isToolbarCommandDisabled(item.id),
         }));
     }, ...(ngDevMode ? [{ debugName: "toolbarItems" }] : []));
+    floatingToolbarItems = computed(() => {
+        this._selectionVersion();
+        const itemIds = [
+            'bold',
+            'italic',
+            'underline',
+            'strike',
+            'code',
+            'blockStyle',
+            'clearFormatting',
+            'textColor',
+            'backgroundColor',
+            'align',
+            'link',
+        ];
+        return Z_EDITOR_DEFAULT_TOOLBAR.filter(item => itemIds.includes(item.id)).map(item => ({
+            ...item,
+            active: this._isToolbarCommandActive(item.id),
+            disabled: this._isToolbarCommandDisabled(item.id),
+            shortcut: this._toolbarShortcutLabels[item.id] ?? '',
+            tooltip: this._getToolbarTooltip(item.id, item.label),
+        }));
+    }, ...(ngDevMode ? [{ debugName: "floatingToolbarItems" }] : []));
     _shouldShowValidation = computed(() => {
         const control = this._formControl();
         this._formStateVersion();
@@ -265,6 +561,7 @@ class ZEditorComponent {
             this._selectionVersion.update(v => v + 1);
         });
         this._destroyRef.onDestroy(() => {
+            this._teardownBubbleMenuPositionUpdates();
             this._editor?.destroy();
             this._editor = null;
         });
@@ -330,14 +627,25 @@ class ZEditorComponent {
             case 'code':
                 editor.chain().focus().toggleCode().run();
                 break;
+            case 'blockStyle':
+                break;
             case 'heading1':
                 editor.chain().focus().toggleHeading({ level: 1 }).run();
                 break;
             case 'heading2':
                 editor.chain().focus().toggleHeading({ level: 2 }).run();
                 break;
+            case 'heading3':
+                editor.chain().focus().toggleHeading({ level: 3 }).run();
+                break;
+            case 'heading4':
+                editor.chain().focus().toggleHeading({ level: 4 }).run();
+                break;
+            case 'small':
+                editor.chain().focus().setParagraph().setFontSize('0.875rem').run();
+                break;
             case 'paragraph':
-                editor.chain().focus().setParagraph().run();
+                editor.chain().focus().setParagraph().unsetFontSize().run();
                 break;
             case 'bulletList':
                 editor.chain().focus().toggleBulletList().run();
@@ -360,6 +668,23 @@ class ZEditorComponent {
             case 'image':
                 this._insertImage();
                 break;
+            case 'emoji':
+            case 'align':
+            case 'textColor':
+            case 'backgroundColor':
+                break;
+            case 'alignLeft':
+                this._setTextAlign('left');
+                break;
+            case 'alignCenter':
+                this._setTextAlign('center');
+                break;
+            case 'alignRight':
+                this._setTextAlign('right');
+                break;
+            case 'alignJustify':
+                this._setTextAlign('justify');
+                break;
             case 'undo':
                 editor.chain().focus().undo().run();
                 break;
@@ -368,6 +693,7 @@ class ZEditorComponent {
                 break;
             case 'clearFormatting':
                 editor.chain().focus().clearNodes().unsetAllMarks().run();
+                this._collapseSelectionToAnchor();
                 break;
         }
         this._refreshEditorState();
@@ -394,6 +720,7 @@ class ZEditorComponent {
                     code: false,
                     horizontalRule: false,
                     link: false,
+                    underline: false,
                     dropcursor: {
                         color: 'var(--primary)',
                         width: 2,
@@ -404,8 +731,33 @@ class ZEditorComponent {
                     excludes: 'code',
                 }),
                 Underline,
+                TextStyle,
+                FontSize,
+                Color,
+                BackgroundColor,
+                BubbleMenu.configure({
+                    element: this._floatingToolbar().nativeElement,
+                    pluginKey: 'zEditorBubbleMenu',
+                    updateDelay: 0,
+                    options: {
+                        strategy: 'fixed',
+                        placement: 'top-start',
+                        offset: 8,
+                        flip: true,
+                        shift: {
+                            padding: 8,
+                        },
+                    },
+                    getReferencedVirtualElement: () => this._getSelectionFloatingElement(),
+                    shouldShow: ({ editor, from, to }) => editor.isEditable &&
+                        !this.isDisabled() &&
+                        !this.zReadonly() &&
+                        from !== to &&
+                        !editor.isActive('image') &&
+                        editor.state.doc.textBetween(from, to).trim().length > 0,
+                }),
                 TextAlign.configure({
-                    types: ['heading', 'paragraph'],
+                    types: ['heading', 'paragraph', 'image'],
                 }),
                 Link.configure({
                     openOnClick: false,
@@ -413,7 +765,7 @@ class ZEditorComponent {
                 }),
                 HorizontalRule,
                 tiptapOptions.image !== false &&
-                    Image.configure(typeof tiptapOptions.image === 'boolean' ? {} : tiptapOptions.image),
+                    this._createImageExtension(typeof tiptapOptions.image === 'boolean' ? {} : (tiptapOptions.image ?? {})),
                 tiptapOptions.mention !== false &&
                     Mention.configure({
                         HTMLAttributes: {
@@ -437,6 +789,8 @@ class ZEditorComponent {
                     autocapitalize: 'off',
                     translate: 'no',
                 },
+                handleKeyDown: (_view, event) => this._handleSlashMenuKeyDown(event) || this._handleEditorShortcutKeyDown(event),
+                handleClick: (view, _pos, event) => this._handleEditorClick(view, event),
             },
             onUpdate: () => this._handleEditorUpdate(),
             onSelectionUpdate: () => this._refreshEditorState(),
@@ -445,6 +799,7 @@ class ZEditorComponent {
             onBlur: () => this._handleBlur(),
         });
         this._refreshEditorState();
+        this._setupBubbleMenuPositionUpdates();
         this._emitControl();
     }
     _handleEditorUpdate() {
@@ -464,6 +819,7 @@ class ZEditorComponent {
         if (this.uiState().dirty) {
             this.uiState.update(s => ({ ...s, touched: true }));
         }
+        this._dismissCurrentSlashMenu();
         this._onTouched();
         const blurEvent = new FocusEvent('blur');
         this.zOnBlur.emit(blurEvent);
@@ -546,6 +902,134 @@ class ZEditorComponent {
         this._plainText.set(this._editor?.getText() ?? '');
         this._selectionVersion.update(v => v + 1);
         this._formStateVersion.update(v => v + 1);
+        this._syncSlashMenu();
+        this._syncLinkPopoverPosition();
+    }
+    _searchEmojis(query) {
+        const results = [];
+        for (const category of this.emojiCategories) {
+            for (const entry of category.emojis) {
+                const emoji = typeof entry === 'string' ? entry : entry.emoji;
+                const keywords = typeof entry === 'string' ? Z_EMOJI_KEYWORDS.get(entry) : entry.keywords;
+                const matchesKeywords = keywords?.some(kw => kw.includes(query)) ?? false;
+                if (matchesKeywords || emoji.includes(query)) {
+                    results.push(emoji);
+                }
+            }
+        }
+        return results;
+    }
+    _setupBubbleMenuPositionUpdates() {
+        if (typeof ResizeObserver === 'undefined') {
+            this._resizeListenerCleanup = this._listenWindowResize();
+            return;
+        }
+        const editorElement = this._editorHost().nativeElement;
+        this._resizeObserver = new ResizeObserver(() => this._requestBubbleMenuPositionUpdate());
+        this._resizeObserver.observe(editorElement);
+        const wrapperElement = editorElement.closest('.z-editor-wrapper');
+        if (wrapperElement instanceof HTMLElement) {
+            this._resizeObserver.observe(wrapperElement);
+        }
+        this._resizeListenerCleanup = this._listenWindowResize();
+    }
+    _listenWindowResize() {
+        const listener = (event) => {
+            if (event.type === 'scroll' && event.target instanceof Element && event.target.closest('.z-popover')) {
+                return;
+            }
+            this._requestBubbleMenuPositionUpdate();
+        };
+        window.addEventListener('resize', listener, { passive: true });
+        window.addEventListener('scroll', listener, { passive: true, capture: true });
+        return () => {
+            window.removeEventListener('resize', listener);
+            window.removeEventListener('scroll', listener, { capture: true });
+        };
+    }
+    _teardownBubbleMenuPositionUpdates() {
+        this._resizeObserver?.disconnect();
+        this._resizeObserver = null;
+        this._resizeListenerCleanup?.();
+        this._resizeListenerCleanup = null;
+        if (this._bubbleMenuPositionFrame !== null) {
+            cancelAnimationFrame(this._bubbleMenuPositionFrame);
+            this._bubbleMenuPositionFrame = null;
+        }
+    }
+    _requestBubbleMenuPositionUpdate() {
+        if (this._bubbleMenuPositionFrame !== null) {
+            return;
+        }
+        if (this._isAnyBubbleMenuPopoverOpen()) {
+            return;
+        }
+        this._bubbleMenuPositionFrame = requestAnimationFrame(() => {
+            this._bubbleMenuPositionFrame = null;
+            this._editor?.view.dispatch(this._editor.state.tr.setMeta('zEditorBubbleMenu', 'updatePosition'));
+            this._syncLinkPopoverPosition();
+        });
+    }
+    _isAnyBubbleMenuPopoverOpen() {
+        return (!!this._blockStylePopoverControl?.isVisible() ||
+            !!this._alignPopoverControl?.isVisible() ||
+            !!this._textColorPopoverControl?.isVisible() ||
+            !!this._backgroundColorPopoverControl?.isVisible());
+    }
+    _syncLinkPopoverPosition() {
+        if (!this.linkPopoverState().visible) {
+            return;
+        }
+        const rect = this._getLinkPopoverReferenceRect();
+        if (!rect) {
+            return;
+        }
+        this.linkPopoverState.set({
+            visible: true,
+            left: rect.left,
+            top: rect.top,
+            width: rect.width,
+            height: rect.height,
+        });
+        requestAnimationFrame(() => {
+            if (this.linkPopoverState().visible) {
+                this._linkPopoverControl?.show();
+            }
+        });
+    }
+    _getSelectionFloatingElement() {
+        const editor = this._editor;
+        if (!editor) {
+            return null;
+        }
+        // Freeze the bubble menu in place while any popover triggered from it is open,
+        // so the popover (positioned relative to the bubble menu) does not flicker.
+        if (this._isAnyBubbleMenuPopoverOpen()) {
+            const toolbarRect = this._floatingToolbar().nativeElement.getBoundingClientRect();
+            if (toolbarRect.width > 0) {
+                return {
+                    getBoundingClientRect: () => toolbarRect,
+                    getClientRects: () => [toolbarRect],
+                };
+            }
+        }
+        const { from, to } = editor.state.selection;
+        if (from === to) {
+            return null;
+        }
+        const selectionRect = posToDOMRect(editor.view, from, to);
+        const menuWidth = this._floatingToolbar().nativeElement.getBoundingClientRect().width;
+        const activeAlign = this._getActiveAlignFromEditor(editor);
+        const left = activeAlign === 'alignCenter'
+            ? selectionRect.left + selectionRect.width / 2 - menuWidth / 2
+            : activeAlign === 'alignRight'
+                ? selectionRect.right - menuWidth
+                : selectionRect.left;
+        const rect = new DOMRect(Math.max(left, 0), selectionRect.top, menuWidth, selectionRect.height);
+        return {
+            getBoundingClientRect: () => rect,
+            getClientRects: () => [rect],
+        };
     }
     _isEditorEmpty() {
         const editor = this._editor;
@@ -589,8 +1073,16 @@ class ZEditorComponent {
                 return editor.isActive('heading', { level: 1 });
             case 'heading2':
                 return editor.isActive('heading', { level: 2 });
+            case 'heading3':
+                return editor.isActive('heading', { level: 3 });
+            case 'heading4':
+                return editor.isActive('heading', { level: 4 });
             case 'paragraph':
                 return editor.isActive('paragraph');
+            case 'blockStyle':
+                return this.activeBlockStyle() !== 'paragraph';
+            case 'align':
+                return this.activeAlign() !== 'alignLeft';
             default:
                 return false;
         }
@@ -607,24 +1099,328 @@ class ZEditorComponent {
                 return !editor.can().redo();
             case 'link':
                 return editor.state.selection.empty && !editor.isActive('link');
+            case 'emoji':
+            case 'blockStyle':
+            case 'align':
+            case 'textColor':
+            case 'backgroundColor':
+                return false;
             default:
                 return false;
         }
     }
+    onFloatingToolbarClick(command) {
+        this.onToolbarClick(command);
+    }
+    _getToolbarTooltip(command, label) {
+        const shortcut = this._toolbarShortcutLabels[command];
+        return shortcut ? `${label} (${shortcut})` : label;
+    }
+    applySlashCommand(item) {
+        const editor = this._editor;
+        const { from, to } = this.slashMenuState();
+        if (!editor) {
+            return;
+        }
+        editor.chain().focus().deleteRange({ from, to }).run();
+        this._hideSlashMenu();
+        this.onToolbarClick(item.command);
+    }
+    applyBlockStyle(command) {
+        this.onToolbarClick(command);
+        this._blockStylePopoverControl?.close();
+    }
+    applyAlign(command) {
+        this.onToolbarClick(command);
+        this._alignPopoverControl?.close();
+    }
+    insertEmoji(emoji) {
+        this._editor?.chain().focus().insertContent(emoji).run();
+        this._refreshEditorState();
+    }
+    setEmojiCategory(categoryId) {
+        this.activeEmojiCategoryId.set(categoryId);
+        this.emojiSearch.set('');
+    }
+    onEmojiPopoverControl(control) {
+        this._emojiPopoverControl = control;
+    }
+    onEmojiPopoverShow() {
+        setTimeout(() => {
+            const overlay = document.querySelector('.z-editor-emoji-popover');
+            const input = overlay?.querySelector('input');
+            input?.focus();
+        });
+    }
+    onBlockStylePopoverControl(control) {
+        this._blockStylePopoverControl = control;
+    }
+    onAlignPopoverControl(control) {
+        this._alignPopoverControl = control;
+    }
+    onTextColorPopoverControl(control) {
+        this._textColorPopoverControl = control;
+    }
+    onBackgroundColorPopoverControl(control) {
+        this._backgroundColorPopoverControl = control;
+    }
+    onSlashMenuPopoverControl(control) {
+        this._slashMenuPopoverControl = control;
+    }
+    onSlashMenuPopoverHide() {
+        this.slashMenuState.update(state => ({ ...state, visible: false }));
+        this.slashMenuActiveIndex.set(0);
+    }
+    onLinkPopoverControl(control) {
+        this._linkPopoverControl = control;
+    }
+    onLinkPopoverHide() {
+        this.linkPopoverState.update(state => ({ ...state, visible: false }));
+        this._linkAnchorElement = null;
+    }
+    setTextColor(color) {
+        this._editor?.chain().focus().setColor(color).run();
+        this._textColorPopoverControl?.close();
+        this._refreshEditorState();
+    }
+    setTextColorFromEvent(event) {
+        const input = event.target;
+        this.setTextColor(input?.value ?? '');
+    }
+    unsetTextColor() {
+        this._editor?.chain().focus().unsetColor().run();
+        this._textColorPopoverControl?.close();
+        this._refreshEditorState();
+    }
+    setBackgroundColor(color) {
+        this._editor?.chain().focus().setBackgroundColor(color).run();
+        this._backgroundColorPopoverControl?.close();
+        this._refreshEditorState();
+    }
+    setBackgroundColorFromEvent(event) {
+        const input = event.target;
+        this.setBackgroundColor(input?.value ?? '');
+    }
+    unsetBackgroundColor() {
+        this._editor?.chain().focus().unsetBackgroundColor().run();
+        this._backgroundColorPopoverControl?.close();
+        this._refreshEditorState();
+    }
+    _handleSlashMenuKeyDown(event) {
+        if (!this.slashMenuState().visible) {
+            return false;
+        }
+        const commands = this.filteredSlashCommands();
+        if (event.key === 'Escape' || event.key === 'Tab') {
+            this._hideSlashMenu();
+            return event.key === 'Escape';
+        }
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            this.slashMenuActiveIndex.update(index => (commands.length ? (index + 1) % commands.length : 0));
+            this._scrollActiveSlashMenuItemIntoView();
+            return true;
+        }
+        if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            this.slashMenuActiveIndex.update(index => commands.length ? (index - 1 + commands.length) % commands.length : 0);
+            this._scrollActiveSlashMenuItemIntoView();
+            return true;
+        }
+        if (event.key === 'Enter') {
+            const item = commands[this.slashMenuActiveIndex()];
+            if (!item) {
+                return false;
+            }
+            event.preventDefault();
+            this.applySlashCommand(item);
+            return true;
+        }
+        return false;
+    }
+    _handleEditorShortcutKeyDown(event) {
+        if (!this._editor || this.isDisabled() || this.zReadonly() || !this._isPrimaryShortcut(event)) {
+            return false;
+        }
+        const key = event.key.toLowerCase();
+        const command = this._getShortcutCommand(event, key);
+        if (!command || this._isToolbarCommandDisabled(command)) {
+            return false;
+        }
+        event.preventDefault();
+        this.onToolbarClick(command);
+        return true;
+    }
+    _getShortcutCommand(event, key) {
+        if (!event.shiftKey) {
+            switch (key) {
+                case 'b':
+                    return 'bold';
+                case 'i':
+                    return 'italic';
+                case 'u':
+                    return 'underline';
+                case 'e':
+                    return 'code';
+                case 'k':
+                    return 'link';
+                case '\\':
+                    return 'clearFormatting';
+                case 'z':
+                    return 'undo';
+                case 'y':
+                    return 'redo';
+            }
+        }
+        if (event.shiftKey && key === 's') {
+            return 'strike';
+        }
+        return null;
+    }
+    _isPrimaryShortcut(event) {
+        return (event.ctrlKey || event.metaKey) && !event.altKey;
+    }
+    _syncSlashMenu() {
+        const editor = this._editor;
+        if (!editor || !editor.isEditable || this.isDisabled() || this.zReadonly()) {
+            this._hideSlashMenu();
+            return;
+        }
+        const { selection } = editor.state;
+        if (!selection.empty) {
+            this._hideSlashMenu();
+            return;
+        }
+        const { $from } = selection;
+        const textBeforeCursor = $from.parent.textBetween(0, $from.parentOffset, '\0', '\0');
+        const match = /(?:^|\s)\/([^\s/]*)$/.exec(textBeforeCursor);
+        if (!match) {
+            if (!this._isDismissedSlashStillPresent()) {
+                this._dismissedSlashMenu = null;
+            }
+            this._hideSlashMenu();
+            return;
+        }
+        const query = match[1] ?? '';
+        const from = selection.from - query.length - 1;
+        const to = selection.from;
+        if (this._dismissedSlashMenu?.from === from &&
+            this._dismissedSlashMenu.to === to &&
+            this._dismissedSlashMenu.query === query) {
+            this._hideSlashMenu();
+            return;
+        }
+        if (this._dismissedSlashMenu) {
+            this._dismissedSlashMenu = null;
+        }
+        const coords = editor.view.coordsAtPos(selection.from);
+        if (this._slashMenuPopoverControl?.isVisible()) {
+            this._slashMenuPopoverControl.closeImmediate();
+        }
+        this.slashMenuState.set({
+            visible: true,
+            query,
+            from,
+            to,
+            left: coords.left,
+            top: coords.bottom,
+        });
+        const commandsLength = this.filteredSlashCommands().length;
+        if (this.slashMenuActiveIndex() >= commandsLength) {
+            this.slashMenuActiveIndex.set(0);
+        }
+        requestAnimationFrame(() => {
+            if (this.slashMenuState().visible) {
+                this._slashMenuPopoverControl?.show();
+                this._scrollActiveSlashMenuItemIntoView();
+            }
+        });
+    }
+    _scrollActiveSlashMenuItemIntoView() {
+        requestAnimationFrame(() => {
+            const scrollHost = this._slashMenuScrollHost()?.nativeElement;
+            const activeIndex = this.slashMenuActiveIndex();
+            const lastIndex = this.filteredSlashCommands().length - 1;
+            if (!scrollHost) {
+                return;
+            }
+            if (activeIndex === 0) {
+                scrollHost.scrollTop = 0;
+                return;
+            }
+            if (activeIndex === lastIndex) {
+                scrollHost.scrollTop = scrollHost.scrollHeight - scrollHost.clientHeight;
+                return;
+            }
+            const activeItem = scrollHost?.querySelector('.z-editor-slash-menu-item-active');
+            if (!(activeItem instanceof HTMLElement)) {
+                return;
+            }
+            activeItem.scrollIntoView({ block: 'nearest' });
+        });
+    }
+    _hideSlashMenu() {
+        if (!this.slashMenuState().visible) {
+            return;
+        }
+        this.slashMenuState.update(state => ({ ...state, visible: false }));
+        this.slashMenuActiveIndex.set(0);
+        this._slashMenuPopoverControl?.closeImmediate();
+    }
+    _dismissCurrentSlashMenu() {
+        const { visible, query, from, to } = this.slashMenuState();
+        if (visible) {
+            this._dismissedSlashMenu = { query, from, to };
+            this._hideSlashMenu();
+            return;
+        }
+        const currentSlashMenuMatch = this._getCurrentSlashMenuMatch();
+        if (currentSlashMenuMatch) {
+            this._dismissedSlashMenu = currentSlashMenuMatch;
+        }
+    }
+    _getCurrentSlashMenuMatch() {
+        const selection = this._editor?.state.selection;
+        if (!selection?.empty) {
+            return null;
+        }
+        const textBeforeCursor = selection.$from.parent.textBetween(0, selection.$from.parentOffset, '\0', '\0');
+        const match = /(?:^|\s)\/([^\s/]*)$/.exec(textBeforeCursor);
+        if (!match) {
+            return null;
+        }
+        const query = match[1] ?? '';
+        return {
+            query,
+            from: selection.from - query.length - 1,
+            to: selection.from,
+        };
+    }
+    _isDismissedSlashStillPresent() {
+        const dismissed = this._dismissedSlashMenu;
+        const doc = this._editor?.state.doc;
+        if (!dismissed || !doc || dismissed.from < 0 || dismissed.from >= doc.content.size) {
+            return false;
+        }
+        return doc.textBetween(dismissed.from, dismissed.from + 1, '\0', '\0') === '/';
+    }
     _toggleLink() {
         const editor = this._editor;
         if (!editor) {
             return;
         }
         const { from, to } = editor.state.selection;
+        this._linkAnchorElement = null;
         this._linkSelection = { from, to };
         const href = String(editor.getAttributes('link')['href'] ?? '');
         this.activeLinkHref.set(href);
         this.linkUrl.set(href);
-        this.linkModalVisible.set(true);
+        this._showLinkPopover();
     }
-    closeLinkModal() {
-        this.linkModalVisible.set(false);
+    closeLinkPopover() {
+        this.linkPopoverState.update(state => ({ ...state, visible: false }));
+        this._linkAnchorElement = null;
+        this._linkPopoverControl?.closeImmediate();
     }
     onLinkUrlChange(value) {
         this.linkUrl.set(String(value ?? ''));
@@ -637,7 +1433,7 @@ class ZEditorComponent {
             return;
         }
         editor.chain().focus().setTextSelection(selection).extendMarkRange('link').setLink({ href }).run();
-        this.closeLinkModal();
+        this.closeLinkPopover();
         this._refreshEditorState();
     }
     _normalizeUrl(value) {
@@ -657,13 +1453,90 @@ class ZEditorComponent {
         const editor = this._editor;
         const selection = this._linkSelection;
         if (!editor || !selection) {
-            this.closeLinkModal();
+            this.closeLinkPopover();
             return;
         }
         editor.chain().focus().setTextSelection(selection).extendMarkRange('link').unsetLink().run();
-        this.closeLinkModal();
+        this.closeLinkPopover();
         this._refreshEditorState();
     }
+    openActiveLink() {
+        const href = this.activeLinkHref();
+        if (!href) {
+            return;
+        }
+        window.open(href, '_blank', 'noopener,noreferrer');
+    }
+    _handleEditorClick(view, event) {
+        const target = event.target instanceof HTMLElement ? event.target : null;
+        const link = target?.closest('a[href]');
+        if (!(link instanceof HTMLAnchorElement) || this.isDisabled() || this.zReadonly()) {
+            return false;
+        }
+        if (event.detail >= 2) {
+            this.closeLinkPopover();
+            return false;
+        }
+        const position = view.posAtCoords({ left: event.clientX, top: event.clientY });
+        if (!position) {
+            return false;
+        }
+        event.preventDefault();
+        view.dispatch(view.state.tr.setSelection(TextSelection.near(view.state.doc.resolve(position.pos))));
+        this._editor?.chain().focus().run();
+        const selection = this._editor?.state.selection;
+        if (!selection) {
+            return true;
+        }
+        this._linkSelection = { from: selection.from, to: selection.to };
+        this._linkAnchorElement = link;
+        const href = link.href || link.getAttribute('href') || '';
+        this.activeLinkHref.set(href);
+        this.linkUrl.set(href);
+        this._showLinkPopover();
+        return true;
+    }
+    _showLinkPopover() {
+        const rect = this._getLinkPopoverReferenceRect();
+        if (!rect) {
+            return;
+        }
+        this.linkPopoverState.set({
+            visible: true,
+            left: rect.left,
+            top: rect.top,
+            width: rect.width,
+            height: rect.height,
+        });
+        requestAnimationFrame(() => {
+            if (this.linkPopoverState().visible) {
+                this._linkPopoverControl?.show();
+            }
+        });
+    }
+    _getLinkPopoverReferenceRect() {
+        const anchorRect = this._getLinkAnchorRect();
+        if (anchorRect) {
+            return anchorRect;
+        }
+        const editor = this._editor;
+        const selection = this._linkSelection;
+        if (!editor || !selection) {
+            return null;
+        }
+        return posToDOMRect(editor.view, selection.from, selection.to);
+    }
+    _getLinkAnchorRect() {
+        const anchor = this._linkAnchorElement;
+        if (!anchor || !this._editorHost().nativeElement.contains(anchor)) {
+            return null;
+        }
+        const rect = anchor.getBoundingClientRect();
+        if (rect.width === 0 && rect.height === 0) {
+            return null;
+        }
+        return rect;
+    }
     _insertImage() {
         const editor = this._editor;
         if (!editor) {
@@ -697,6 +1570,99 @@ class ZEditorComponent {
         document.body.appendChild(input);
         input.click();
     }
+    _setTextAlign(alignment) {
+        const editor = this._editor;
+        if (!editor) {
+            return;
+        }
+        const command = alignment === 'left' ? editor.chain().focus().unsetTextAlign() : editor.chain().focus().setTextAlign(alignment);
+        command.run();
+    }
+    _collapseSelectionToAnchor() {
+        const editor = this._editor;
+        if (!editor) {
+            return;
+        }
+        const { from } = editor.state.selection;
+        editor.commands.setTextSelection(from);
+        editor.view.dispatch(editor.state.tr.setMeta('zEditorBubbleMenu', 'updatePosition'));
+    }
+    _getTextStyleAttribute(attribute) {
+        this._selectionVersion();
+        return String(this._editor?.getAttributes('textStyle')[attribute] ?? '');
+    }
+    _getActiveBlockStyle() {
+        const editor = this._editor;
+        this._selectionVersion();
+        if (!editor) {
+            return 'paragraph';
+        }
+        if (editor.isActive('heading', { level: 1 })) {
+            return 'heading1';
+        }
+        if (editor.isActive('heading', { level: 2 })) {
+            return 'heading2';
+        }
+        if (editor.isActive('heading', { level: 3 })) {
+            return 'heading3';
+        }
+        if (editor.isActive('heading', { level: 4 })) {
+            return 'heading4';
+        }
+        return 'paragraph';
+    }
+    _getActiveAlign() {
+        const editor = this._editor;
+        this._selectionVersion();
+        if (!editor) {
+            return 'alignLeft';
+        }
+        return this._getActiveAlignFromEditor(editor);
+    }
+    _getActiveAlignFromEditor(editor) {
+        if (editor.isActive({ textAlign: 'center' })) {
+            return 'alignCenter';
+        }
+        if (editor.isActive({ textAlign: 'right' })) {
+            return 'alignRight';
+        }
+        if (editor.isActive({ textAlign: 'justify' })) {
+            return 'alignJustify';
+        }
+        return 'alignLeft';
+    }
+    _createImageExtension(options) {
+        return ImageResize.extend({
+            addAttributes() {
+                return {
+                    ...this.parent?.(),
+                    textAlign: {
+                        default: null,
+                        parseHTML: element => element.style.textAlign || element.getAttribute('data-text-align') || null,
+                        renderHTML: attributes => {
+                            const textAlign = String(attributes['textAlign'] ?? '');
+                            if (!textAlign) {
+                                return {};
+                            }
+                            return {
+                                'data-text-align': textAlign,
+                                style: ZEditorComponent._getImageAlignStyle(textAlign),
+                            };
+                        },
+                    },
+                };
+            },
+        }).configure(options);
+    }
+    static _getImageAlignStyle(textAlign) {
+        if (textAlign === 'center') {
+            return 'display: block; margin-left: auto; margin-right: auto;';
+        }
+        if (textAlign === 'right') {
+            return 'display: block; margin-left: auto; margin-right: 0;';
+        }
+        return 'display: block; margin-left: 0; margin-right: auto;';
+    }
     _placeholderConfig() {
         const { placeholder } = this.zTipTap();
         if (!placeholder || typeof placeholder === 'string') {
@@ -716,98 +1682,7 @@ class ZEditorComponent {
                 useExisting: forwardRef(() => ZEditorComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "_editorHost", first: true, predicate: ["editorHost"], descendants: true, isSignal: true }], exportAs: ["zEditor"], ngImport: i0, template: `
-    <div [class]="wrapperClasses()" [class.z-editor-disabled]="isDisabled()" [class.z-editor-readonly]="zReadonly()">
-      @if (zLabel()) {
-        <label [for]="editorId" class="text-xs leading-none font-medium" [class]="zLabelClass()">
-          {{ zLabel() }}
-          @if (zRequired()) {
-            <span class="text-destructive! ml-0.5">*</span>
-          }
-        </label>
-      }
-
-      <div [class]="editorClasses()">
-        @if (showToolbar()) {
-          <div class="z-editor-toolbar" role="toolbar" [attr.aria-controls]="editorId">
-            @for (item of toolbarItems(); track item.id) {
-              <button
-                type="button"
-                class="z-editor-toolbar-button"
-                [class.z-editor-toolbar-button-active]="item.active"
-                [disabled]="item.disabled"
-                [attr.aria-label]="item.label"
-                [attr.title]="item.label"
-                (click)="onToolbarClick(item.id)"
-              >
-                <i z-icon [zType]="item.icon" zSize="16"></i>
-              </button>
-            }
-          </div>
-        }
-
-        <div
-          #editorHost
-          [id]="editorId"
-          class="z-editor-content"
-          role="textbox"
-          [attr.aria-multiline]="true"
-          [attr.aria-readonly]="isDisabled() || zReadonly()"
-        ></div>
-      </div>
-
-      @if (hasError()) {
-        <p class="text-destructive animate-in fade-in slide-in-from-top-1 m-0 text-xs duration-200">
-          {{ errorMessage() }}
-        </p>
-      }
-
-      <z-modal
-        [(zVisible)]="linkModalVisible"
-        class="z-editor-link-modal"
-        zWidth="360px"
-        [zClosable]="false"
-        [zHideHeader]="true"
-        [zHideFooter]="true"
-      >
-        <ng-template z-modal-content>
-          <div class="space-y-4">
-            <z-input
-              zType="url"
-              zLabel="URL"
-              zPlaceholder="https://example.com"
-              [zRequired]="true"
-              [zValidators]="linkValidators"
-              [ngModel]="linkUrl()"
-              (ngModelChange)="onLinkUrlChange($event)"
-              (zOnEnter)="applyLink()"
-            />
-
-            <div class="mt-4 flex items-center justify-between gap-2">
-              <button
-                type="button"
-                z-button
-                zType="ghost"
-                zSize="sm"
-                [zDisabled]="!activeLinkHref()"
-                (click)="removeLink()"
-              >
-                {{ 'i18n_z_ui_common_remove' | translate }}
-              </button>
-              <div class="flex items-center gap-2">
-                <button type="button" z-button zType="outline" zSize="sm" (click)="closeLinkModal()">
-                  {{ 'i18n_z_ui_common_cancel' | translate }}
-                </button>
-                <button type="button" z-button zSize="sm" [zDisabled]="!canApplyLink()" (click)="applyLink()">
-                  {{ 'i18n_z_ui_common_apply' | translate }}
-                </button>
-              </div>
-            </div>
-          </div>
-        </ng-template>
-      </z-modal>
-    </div>
-  `, isInline: true, 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{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border-radius:.25rem;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.z-editor-toolbar-button-active{background-color:color-mix(in srgb,var(--primary) 10%,transparent);color:var(--primary)}.z-editor-wrapper .z-editor-content{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:1.25rem;margin-bottom:1.25rem}.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.75}.z-editor-wrapper .z-editor-prosemirror a{border-bottom:.0625rem solid transparent;color:var(--primary);font-weight:500;transition:border-color .15s ease}.z-editor-wrapper .z-editor-prosemirror a:hover{border-color:var(--primary)}.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:.375rem;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:.375rem;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:.375rem}.z-editor-wrapper .z-editor-prosemirror img.ProseMirror-selectednode{outline:.125rem solid var(--primary)}.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:.375rem}.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}\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", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "component", type: ZInputComponent, selector: "z-input", inputs: ["class", "zType", "zSize", "zAlign", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "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: "component", type: ZModalComponent, selector: "z-modal", inputs: ["class", "zVisible", "zTitle", "zDescription", "zWidth", "zClosable", "zMaskClosable", "zHideHeader", "zHideFooter", "zOkText", "zCancelText", "zOkDestructive", "zOkDisabled", "zLoading", "zContentLoading", "zSkeletonRows", "zOverlay"], outputs: ["zOk", "zCancel", "zAfterClose", "zScrollbar", "zVisibleChange"], exportAs: ["zModal"] }, { kind: "directive", type: ZModalContentDirective, selector: "[z-modal-content], [zModalContent]" }, { 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: "_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                [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                [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                [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                [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>\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          (click)=\"applyBlockStyle(option.command)\">\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>\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          (click)=\"applyAlign(option.command)\">\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>\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          (click)=\"setTextColor(color)\"></button>\n      }\n      <label class=\"z-editor-color-custom\">\n        <input type=\"color\" [value]=\"currentTextColor\" (input)=\"setTextColorFromEvent($event)\" />\n        {{ currentTextColor }}\n      </label>\n      <button type=\"button\" z-button zType=\"outline\" zSize=\"sm\" class=\"z-editor-color-reset\" (click)=\"unsetTextColor()\">\n        Reset\n      </button>\n    </div>\n  </ng-template>\n\n  <ng-template #backgroundColorPopover>\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          (click)=\"setBackgroundColor(color)\"></button>\n      }\n      <label class=\"z-editor-color-custom\">\n        <input type=\"color\" [value]=\"currentBgColor\" (input)=\"setBackgroundColorFromEvent($event)\" />\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        (click)=\"unsetBackgroundColor()\">\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            [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            [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            [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            [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\"\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    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    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    (zHide)=\"onLinkPopoverHide()\"></span>\n\n  <ng-template #linkPopover>\n    <div class=\"z-editor-link-popover-content\">\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:.25rem;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.z-editor-toolbar-button-active{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:1.25rem;margin-bottom:1.25rem}.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.75}.z-editor-wrapper .z-editor-prosemirror a{border-bottom:.0625rem solid transparent;color:var(--primary);font-weight:500;cursor:pointer;transition:border-color .15s ease}.z-editor-wrapper .z-editor-prosemirror a:hover{border-color:var(--primary)}.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:.375rem;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:.375rem;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:.375rem}.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:6px;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:.375rem}.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:.25rem;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:.25rem;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:.25rem;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:.25rem;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:.25rem;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:999px;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:.4375rem;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:.4375rem;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", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "component", type: ZInputComponent, selector: "z-input", inputs: ["class", "zType", "zSize", "zAlign", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "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", "zClass", "zShowDelay", "zHideDelay", "zDisabled", "zOffset", "zPopoverWidth", "zManualClose", "zScrollClose", "zShowArrow"], outputs: ["zShow", "zHide", "zHideStart", "zControl", "zPositionChange"], exportAs: ["zPopover"] }, { kind: "directive", type: ZTooltipDirective, selector: "[z-tooltip], [zTooltip]", inputs: ["zContent", "zPosition", "zTrigger", "zTooltipType", "zTooltipSize", "zClass", "zShowDelay", "zHideDelay", "zArrow", "zDisabled", "zOffset", "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: "21.0.9", ngImport: i0, type: ZEditorComponent, decorators: [{
             type: Component,
@@ -817,108 +1692,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                         ZButtonComponent,
                         ZIconComponent,
                         ZInputComponent,
-                        ZModalComponent,
-                        ZModalContentDirective,
+                        ZPopoverDirective,
+                        ZTooltipDirective,
                         TranslatePipe,
-                    ], standalone: true, template: `
-    <div [class]="wrapperClasses()" [class.z-editor-disabled]="isDisabled()" [class.z-editor-readonly]="zReadonly()">
-      @if (zLabel()) {
-        <label [for]="editorId" class="text-xs leading-none font-medium" [class]="zLabelClass()">
-          {{ zLabel() }}
-          @if (zRequired()) {
-            <span class="text-destructive! ml-0.5">*</span>
-          }
-        </label>
-      }
-
-      <div [class]="editorClasses()">
-        @if (showToolbar()) {
-          <div class="z-editor-toolbar" role="toolbar" [attr.aria-controls]="editorId">
-            @for (item of toolbarItems(); track item.id) {
-              <button
-                type="button"
-                class="z-editor-toolbar-button"
-                [class.z-editor-toolbar-button-active]="item.active"
-                [disabled]="item.disabled"
-                [attr.aria-label]="item.label"
-                [attr.title]="item.label"
-                (click)="onToolbarClick(item.id)"
-              >
-                <i z-icon [zType]="item.icon" zSize="16"></i>
-              </button>
-            }
-          </div>
-        }
-
-        <div
-          #editorHost
-          [id]="editorId"
-          class="z-editor-content"
-          role="textbox"
-          [attr.aria-multiline]="true"
-          [attr.aria-readonly]="isDisabled() || zReadonly()"
-        ></div>
-      </div>
-
-      @if (hasError()) {
-        <p class="text-destructive animate-in fade-in slide-in-from-top-1 m-0 text-xs duration-200">
-          {{ errorMessage() }}
-        </p>
-      }
-
-      <z-modal
-        [(zVisible)]="linkModalVisible"
-        class="z-editor-link-modal"
-        zWidth="360px"
-        [zClosable]="false"
-        [zHideHeader]="true"
-        [zHideFooter]="true"
-      >
-        <ng-template z-modal-content>
-          <div class="space-y-4">
-            <z-input
-              zType="url"
-              zLabel="URL"
-              zPlaceholder="https://example.com"
-              [zRequired]="true"
-              [zValidators]="linkValidators"
-              [ngModel]="linkUrl()"
-              (ngModelChange)="onLinkUrlChange($event)"
-              (zOnEnter)="applyLink()"
-            />
-
-            <div class="mt-4 flex items-center justify-between gap-2">
-              <button
-                type="button"
-                z-button
-                zType="ghost"
-                zSize="sm"
-                [zDisabled]="!activeLinkHref()"
-                (click)="removeLink()"
-              >
-                {{ 'i18n_z_ui_common_remove' | translate }}
-              </button>
-              <div class="flex items-center gap-2">
-                <button type="button" z-button zType="outline" zSize="sm" (click)="closeLinkModal()">
-                  {{ 'i18n_z_ui_common_cancel' | translate }}
-                </button>
-                <button type="button" z-button zSize="sm" [zDisabled]="!canApplyLink()" (click)="applyLink()">
-                  {{ 'i18n_z_ui_common_apply' | translate }}
-                </button>
-              </div>
-            </div>
-          </div>
-        </ng-template>
-      </z-modal>
-    </div>
-  `, providers: [
+                    ], standalone: true, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => ZEditorComponent),
                             multi: true,
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'zEditor', 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{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border-radius:.25rem;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.z-editor-toolbar-button-active{background-color:color-mix(in srgb,var(--primary) 10%,transparent);color:var(--primary)}.z-editor-wrapper .z-editor-content{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:1.25rem;margin-bottom:1.25rem}.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.75}.z-editor-wrapper .z-editor-prosemirror a{border-bottom:.0625rem solid transparent;color:var(--primary);font-weight:500;transition:border-color .15s ease}.z-editor-wrapper .z-editor-prosemirror a:hover{border-color:var(--primary)}.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:.375rem;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:.375rem;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:.375rem}.z-editor-wrapper .z-editor-prosemirror img.ProseMirror-selectednode{outline:.125rem solid var(--primary)}.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:.375rem}.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}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { _editorHost: [{ type: i0.ViewChild, args: ['editorHost', { 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 }] }] } });
+                    ], 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                [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                [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                [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                [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>\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          (click)=\"applyBlockStyle(option.command)\">\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>\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          (click)=\"applyAlign(option.command)\">\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>\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          (click)=\"setTextColor(color)\"></button>\n      }\n      <label class=\"z-editor-color-custom\">\n        <input type=\"color\" [value]=\"currentTextColor\" (input)=\"setTextColorFromEvent($event)\" />\n        {{ currentTextColor }}\n      </label>\n      <button type=\"button\" z-button zType=\"outline\" zSize=\"sm\" class=\"z-editor-color-reset\" (click)=\"unsetTextColor()\">\n        Reset\n      </button>\n    </div>\n  </ng-template>\n\n  <ng-template #backgroundColorPopover>\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          (click)=\"setBackgroundColor(color)\"></button>\n      }\n      <label class=\"z-editor-color-custom\">\n        <input type=\"color\" [value]=\"currentBgColor\" (input)=\"setBackgroundColorFromEvent($event)\" />\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        (click)=\"unsetBackgroundColor()\">\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            [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            [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            [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            [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\"\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    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    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    (zHide)=\"onLinkPopoverHide()\"></span>\n\n  <ng-template #linkPopover>\n    <div class=\"z-editor-link-popover-content\">\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:.25rem;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.z-editor-toolbar-button-active{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:1.25rem;margin-bottom:1.25rem}.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.75}.z-editor-wrapper .z-editor-prosemirror a{border-bottom:.0625rem solid transparent;color:var(--primary);font-weight:500;cursor:pointer;transition:border-color .15s ease}.z-editor-wrapper .z-editor-prosemirror a:hover{border-color:var(--primary)}.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:.375rem;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:.375rem;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:.375rem}.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:6px;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:.375rem}.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:.25rem;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:.25rem;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:.25rem;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:.25rem;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:.25rem;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:999px;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:.4375rem;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:.4375rem;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 }] }], _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 }] }] } });
 
 /**
  * Generated bundle index. Do not edit.