@shival99/z-ui 2.1.29 → 2.1.31

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

@@ -0,0 +1,1750 @@
+import * as i0 from '@angular/core';
+import { inject, Injector, DestroyRef, viewChild, output, input, signal, computed, afterNextRender, effect, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i1 from '@angular/forms';
+import { NgControl, NgModel, PristineChangeEvent, TouchedChangeEvent, FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+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 { ZPopoverDirective } from '@shival99/z-ui/components/z-popover';
+import { ZTooltipDirective } from '@shival99/z-ui/components/z-tooltip';
+import { ZTranslateService } from '@shival99/z-ui/services';
+import { zTransform, zUuid, Z_EMOJI_SHEET, zMergeClasses, zCreateEvent, Z_EMOJI_KEYWORDS } from '@shival99/z-ui/utils';
+import { Editor, posToDOMRect } from '@tiptap/core';
+import BubbleMenu from '@tiptap/extension-bubble-menu';
+import Code from '@tiptap/extension-code';
+import HorizontalRule from '@tiptap/extension-horizontal-rule';
+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 = [
+    { id: 'undo', icon: 'lucideUndo', label: 'Undo' },
+    { id: 'redo', icon: 'lucideRedo', label: 'Redo' },
+    { id: 'bold', icon: 'lucideBold', label: 'Bold' },
+    { id: 'italic', icon: 'lucideItalic', label: 'Italic' },
+    { id: 'underline', icon: 'lucideUnderline', label: 'Underline' },
+    { id: 'strike', icon: 'lucideStrikethrough', label: 'Strike' },
+    { id: 'code', icon: 'lucideCode', label: 'Code' },
+    { 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',
+    'transition-[border-color,box-shadow,background-color,color,opacity] duration-200',
+    'dark:bg-input/30 dark:border-input',
+    'outline-none',
+], {
+    variants: {
+        zSize: {
+            sm: '[&_.z-editor-prosemirror]:min-h-24 [&_.z-editor-prosemirror]:text-sm',
+            default: '[&_.z-editor-prosemirror]:min-h-40 [&_.z-editor-prosemirror]:text-sm',
+            lg: '[&_.z-editor-prosemirror]:min-h-60 [&_.z-editor-prosemirror]:text-base',
+        },
+        zStatus: {
+            default: 'focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]',
+            error: 'border-destructive! ring-destructive/20 ring-[3px] focus-within:border-destructive! focus-within:ring-destructive/30',
+            disabled: 'opacity-50 cursor-not-allowed bg-muted! text-muted-foreground',
+            readonly: 'bg-muted/50! text-muted-foreground cursor-default',
+        },
+        zPlaceholderMode: {
+            firstLine: 'z-editor-placeholder-first-line',
+            everyLine: '',
+        },
+    },
+    defaultVariants: {
+        zSize: 'default',
+        zStatus: 'default',
+        zPlaceholderMode: 'everyLine',
+    },
+});
+
+class ZEditorComponent {
+    static _bubbleMenuOffset = 8;
+    _injector = inject(Injector);
+    _destroyRef = inject(DestroyRef);
+    _zTranslate = inject(ZTranslateService);
+    _editorHost = viewChild.required('editorHost');
+    _floatingToolbar = viewChild.required('floatingToolbar');
+    _slashMenuTrigger = viewChild.required('slashMenuTrigger');
+    _linkPopoverTrigger = viewChild.required('linkPopoverTrigger');
+    _slashMenuScrollHost = viewChild('slashMenuScrollHost', ...(ngDevMode ? [{ debugName: "_slashMenuScrollHost" }] : []));
+    zOnChange = output();
+    zOnFocus = output();
+    zOnBlur = output();
+    zControl = output();
+    zEvent = output();
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : []));
+    zSize = input('default', ...(ngDevMode ? [{ debugName: "zSize" }] : []));
+    zLabel = input('', ...(ngDevMode ? [{ debugName: "zLabel" }] : []));
+    zLabelClass = input('', ...(ngDevMode ? [{ debugName: "zLabelClass" }] : []));
+    zPlaceholder = input('', ...(ngDevMode ? [{ debugName: "zPlaceholder" }] : []));
+    zRequired = input(false, { ...(ngDevMode ? { debugName: "zRequired" } : {}), transform: zTransform });
+    zDisabled = input(false, { ...(ngDevMode ? { debugName: "zDisabled" } : {}), transform: zTransform });
+    zReadonly = input(false, { ...(ngDevMode ? { debugName: "zReadonly" } : {}), transform: zTransform });
+    zContentType = input('html', ...(ngDevMode ? [{ debugName: "zContentType" }] : []));
+    zToolbar = input(Z_EDITOR_DEFAULT_TOOLBAR, ...(ngDevMode ? [{ debugName: "zToolbar" }] : []));
+    zTipTap = input({}, ...(ngDevMode ? [{ debugName: "zTipTap" }] : []));
+    zValidators = input([], ...(ngDevMode ? [{ debugName: "zValidators" }] : []));
+    editorId = zUuid('z-editor');
+    linkInputId = zUuid('z-editor-link');
+    _value = signal('', ...(ngDevMode ? [{ debugName: "_value" }] : []));
+    _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
+    _formControl = signal(null, ...(ngDevMode ? [{ debugName: "_formControl" }] : []));
+    _formStateVersion = signal(0, ...(ngDevMode ? [{ debugName: "_formStateVersion" }] : []));
+    _isNgModel = signal(false, ...(ngDevMode ? [{ debugName: "_isNgModel" }] : []));
+    _selectionVersion = signal(0, ...(ngDevMode ? [{ debugName: "_selectionVersion" }] : []));
+    _plainText = signal('', ...(ngDevMode ? [{ debugName: "_plainText" }] : []));
+    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 = [
+        {
+            error: 'url',
+            message: 'i18n_z_ui_editor_invalid_url',
+            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,
+    }, ...(ngDevMode ? [{ debugName: "uiState" }] : []));
+    _customError = signal(null, ...(ngDevMode ? [{ debugName: "_customError" }] : []));
+    _onChange = () => void 0;
+    _onTouched = () => void 0;
+    _ngControl = null;
+    _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();
+        return this.zPlaceholder() || this._zTranslate.instant('i18n_z_ui_editor_placeholder');
+    }, ...(ngDevMode ? [{ debugName: "effectivePlaceholder" }] : []));
+    toolbarItems = computed(() => {
+        this._selectionVersion();
+        const toolbar = this.zToolbar();
+        if (toolbar === false) {
+            return [];
+        }
+        return toolbar.map(item => ({
+            ...item,
+            active: this._isToolbarCommandActive(item.id),
+            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();
+        if (this._isNgModel()) {
+            return this.uiState().dirty || this.uiState().touched;
+        }
+        if (control) {
+            return control.dirty;
+        }
+        return this.uiState().dirty || this.uiState().touched;
+    }, ...(ngDevMode ? [{ debugName: "_shouldShowValidation" }] : []));
+    _getValidationErrors() {
+        const errors = [];
+        const plainText = this._plainText().trim();
+        const valueText = this._serializeValueAsText();
+        const validators = this.zValidators();
+        if (!this._shouldShowValidation()) {
+            return errors;
+        }
+        const isRequired = this.zRequired() || this._formControl()?.errors?.['required'];
+        if (isRequired && !plainText && this._isEditorEmpty()) {
+            this._zTranslate.currentLang();
+            errors.push(this._zTranslate.instant('i18n_z_ui_editor_required'));
+        }
+        for (const validator of validators) {
+            if (validator.error === 'required') {
+                continue;
+            }
+            if (validator.minLength && valueText.length < validator.minLength) {
+                errors.push(validator.message);
+                continue;
+            }
+            if (validator.maxLength && valueText.length > validator.maxLength) {
+                errors.push(validator.message);
+                continue;
+            }
+            if (validator.pattern && !validator.pattern.test(valueText)) {
+                errors.push(validator.message);
+            }
+        }
+        return errors;
+    }
+    hasError = computed(() => {
+        if (this._customError()) {
+            return true;
+        }
+        const customErrors = this._getValidationErrors();
+        if (customErrors.length > 0) {
+            return true;
+        }
+        const control = this._formControl();
+        this._formStateVersion();
+        if (!control) {
+            return false;
+        }
+        return control.invalid && this._shouldShowValidation();
+    }, ...(ngDevMode ? [{ debugName: "hasError" }] : []));
+    errorMessage = computed(() => {
+        const customError = this._customError();
+        if (customError) {
+            return customError;
+        }
+        const customErrors = this._getValidationErrors();
+        if (customErrors.length > 0) {
+            return customErrors[0];
+        }
+        const control = this._formControl();
+        const errors = control?.errors;
+        if (!errors) {
+            return '';
+        }
+        this._zTranslate.currentLang();
+        if (errors['required']) {
+            return this._zTranslate.instant('i18n_z_ui_editor_required');
+        }
+        if (errors['minlength']) {
+            return this._zTranslate.instant('i18n_z_ui_editor_min_length', {
+                min: errors['minlength'].requiredLength,
+            });
+        }
+        if (errors['maxlength']) {
+            return this._zTranslate.instant('i18n_z_ui_editor_max_length', {
+                max: errors['maxlength'].requiredLength,
+            });
+        }
+        return this._zTranslate.instant('i18n_z_ui_editor_invalid');
+    }, ...(ngDevMode ? [{ debugName: "errorMessage" }] : []));
+    currentStatus = computed(() => {
+        if (this.isDisabled()) {
+            return 'disabled';
+        }
+        if (this.zReadonly()) {
+            return 'readonly';
+        }
+        if (this.hasError()) {
+            return 'error';
+        }
+        return 'default';
+    }, ...(ngDevMode ? [{ debugName: "currentStatus" }] : []));
+    wrapperClasses = computed(() => 'z-editor-wrapper flex w-full flex-col gap-2', ...(ngDevMode ? [{ debugName: "wrapperClasses" }] : []));
+    editorClasses = computed(() => zMergeClasses(zEditorVariants({
+        zSize: this.zSize(),
+        zStatus: this.currentStatus(),
+        zPlaceholderMode: this._placeholderMode(),
+    }), this.class()), ...(ngDevMode ? [{ debugName: "editorClasses" }] : []));
+    constructor() {
+        afterNextRender(() => {
+            this._createEditor();
+        });
+        effect(() => {
+            const editor = this._editor;
+            const editable = !this.isDisabled() && !this.zReadonly();
+            if (!editor || editor.isEditable === editable) {
+                return;
+            }
+            editor.setEditable(editable);
+            this._selectionVersion.update(v => v + 1);
+        });
+        this._destroyRef.onDestroy(() => {
+            this._teardownBubbleMenuPositionUpdates();
+            this._editor?.destroy();
+            this._editor = null;
+        });
+    }
+    ngOnInit() {
+        queueMicrotask(() => {
+            try {
+                this._ngControl = this._injector.get(NgControl, null);
+                this._isNgModel.set(this._ngControl instanceof NgModel);
+                if (this._ngControl?.control) {
+                    const { control } = this._ngControl;
+                    this._formControl.set(control);
+                    merge(control.statusChanges, control.valueChanges, control.events.pipe(filter(event => event instanceof PristineChangeEvent || event instanceof TouchedChangeEvent)))
+                        .pipe(takeUntilDestroyed(this._destroyRef))
+                        .subscribe(() => {
+                        this._formStateVersion.update(v => v + 1);
+                    });
+                }
+            }
+            catch {
+                this._ngControl = null;
+            }
+        });
+    }
+    writeValue(value) {
+        const nextValue = value || '';
+        this._pendingValue = nextValue;
+        this._value.set(nextValue);
+        if (!this._editor || this._isCurrentEditorContent(nextValue)) {
+            return;
+        }
+        this._editor.commands.setContent(nextValue, { emitUpdate: false });
+        this._refreshEditorState();
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._disabled.set(isDisabled);
+        this._editor?.setEditable(!isDisabled && !this.zReadonly());
+    }
+    onToolbarClick(command) {
+        const editor = this._editor;
+        if (!editor || this._isToolbarCommandDisabled(command)) {
+            return;
+        }
+        switch (command) {
+            case 'bold':
+                editor.chain().focus().toggleBold().run();
+                break;
+            case 'italic':
+                editor.chain().focus().toggleItalic().run();
+                break;
+            case 'underline':
+                editor.chain().focus().toggleUnderline().run();
+                break;
+            case 'strike':
+                editor.chain().focus().toggleStrike().run();
+                break;
+            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().unsetFontSize().run();
+                break;
+            case 'bulletList':
+                editor.chain().focus().toggleBulletList().run();
+                break;
+            case 'orderedList':
+                editor.chain().focus().toggleOrderedList().run();
+                break;
+            case 'blockquote':
+                editor.chain().focus().toggleBlockquote().run();
+                break;
+            case 'codeBlock':
+                editor.chain().focus().toggleCodeBlock().run();
+                break;
+            case 'horizontalRule':
+                editor.chain().focus().setHorizontalRule().run();
+                break;
+            case 'link':
+                this._toggleLink();
+                break;
+            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;
+            case 'redo':
+                editor.chain().focus().redo().run();
+                break;
+            case 'clearFormatting':
+                editor.chain().focus().clearNodes().unsetAllMarks().run();
+                this._collapseSelectionToAnchor();
+                break;
+        }
+        this._refreshEditorState();
+    }
+    _createEditor() {
+        if (this._editor) {
+            return;
+        }
+        const host = this._editorHost().nativeElement;
+        const tiptapOptions = this.zTipTap();
+        const placeholderConfig = this._placeholderConfig();
+        this._editor = new Editor({
+            element: host,
+            content: this._pendingValue,
+            editable: !this.isDisabled() && !this.zReadonly(),
+            extensions: [
+                this.zContentType() === 'markdown' &&
+                    Markdown.configure({
+                        markedOptions: {
+                            gfm: true,
+                        },
+                    }),
+                StarterKit.configure({
+                    code: false,
+                    horizontalRule: false,
+                    link: false,
+                    underline: false,
+                    dropcursor: {
+                        color: 'var(--primary)',
+                        width: 2,
+                    },
+                    ...tiptapOptions.starterKit,
+                }),
+                Code.extend({
+                    excludes: 'code',
+                }),
+                Underline,
+                TextStyle,
+                FontSize,
+                Color,
+                BackgroundColor,
+                BubbleMenu.configure({
+                    element: this._floatingToolbar().nativeElement,
+                    pluginKey: 'zEditorBubbleMenu',
+                    updateDelay: 0,
+                    options: {
+                        strategy: 'fixed',
+                        placement: 'top-start',
+                        offset: ZEditorComponent._bubbleMenuOffset,
+                        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', 'image'],
+                }),
+                Link.configure({
+                    openOnClick: false,
+                    ...tiptapOptions.link,
+                }),
+                HorizontalRule,
+                tiptapOptions.image !== false &&
+                    this._createImageExtension(typeof tiptapOptions.image === 'boolean' ? {} : (tiptapOptions.image ?? {})),
+                tiptapOptions.mention !== false &&
+                    Mention.configure({
+                        HTMLAttributes: {
+                            class: 'mention',
+                        },
+                        ...(typeof tiptapOptions.mention === 'boolean' ? {} : tiptapOptions.mention),
+                    }),
+                Placeholder.configure({
+                    placeholder: this.effectivePlaceholder(),
+                    showOnlyWhenEditable: false,
+                    showOnlyCurrent: true,
+                    ...placeholderConfig,
+                }),
+                ...(tiptapOptions.extensions ?? []),
+            ].filter(extension => !!extension),
+            editorProps: {
+                attributes: {
+                    class: 'z-editor-prosemirror',
+                    autocomplete: 'off',
+                    autocorrect: 'off',
+                    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(),
+            onTransaction: () => this._refreshEditorState(),
+            onFocus: () => this._handleFocus(),
+            onBlur: () => this._handleBlur(),
+        });
+        this._refreshEditorState();
+        this._setupBubbleMenuPositionUpdates();
+        this._emitControl();
+    }
+    _handleEditorUpdate() {
+        const value = this._getSerializedContent();
+        this._value.set(value);
+        this.uiState.update(s => ({ ...s, dirty: true }));
+        this._onChange(value);
+        this.zOnChange.emit(value);
+        this._refreshEditorState();
+    }
+    _handleFocus() {
+        const focusEvent = new FocusEvent('focus');
+        this.zOnFocus.emit(focusEvent);
+        this.zEvent.emit(zCreateEvent('focus', focusEvent));
+    }
+    _handleBlur() {
+        if (this.uiState().dirty) {
+            this.uiState.update(s => ({ ...s, touched: true }));
+        }
+        this._dismissCurrentSlashMenu();
+        this._onTouched();
+        const blurEvent = new FocusEvent('blur');
+        this.zOnBlur.emit(blurEvent);
+        this.zEvent.emit(zCreateEvent('blur', blurEvent));
+    }
+    _emitControl() {
+        const control = {
+            focus: () => this._editor?.commands.focus(),
+            blur: () => this._editor?.commands.blur(),
+            clear: () => this._setEditorContent(''),
+            setContent: content => this._setEditorContent(content),
+            getContent: () => this._getSerializedContent(),
+            getHTML: () => this._editor?.getHTML() ?? '',
+            getJSON: () => this._editor?.getJSON() ?? { type: 'doc', content: [] },
+            getMarkdown: () => this._getMarkdown(),
+            getText: () => this._editor?.getText() ?? '',
+            getLength: () => this._editor?.state.doc.content.size ?? 0,
+            getEditor: () => this._editor,
+            valid: () => this._validateControl(),
+            validate: () => !this._validateControl(),
+            reset: () => {
+                this._customError.set(null);
+                this.uiState.set({ touched: false, dirty: false });
+                this._setEditorContent('');
+            },
+            setValue: content => this._setEditorContent(content),
+            setErrorMessage: message => {
+                this._customError.set(message);
+                this._formStateVersion.update(v => v + 1);
+            },
+            hasError: this.hasError,
+            value: this._value.asReadonly(),
+            errorMessage: this.errorMessage,
+        };
+        this.zControl.emit(control);
+    }
+    _setEditorContent(content) {
+        this._pendingValue = content;
+        this._editor?.commands.setContent(content, { emitUpdate: false });
+        const value = this._getSerializedContent();
+        this._value.set(value);
+        this._plainText.set(this._editor?.getText() ?? '');
+        this._onChange(value);
+        this.zOnChange.emit(value);
+        this._refreshEditorState();
+    }
+    _validateControl() {
+        this.uiState.set({ touched: true, dirty: true });
+        this._formControl()?.markAsDirty();
+        this._formControl()?.markAsTouched();
+        this._formControl()?.updateValueAndValidity({ onlySelf: true });
+        this._formStateVersion.update(v => v + 1);
+        return !this.hasError();
+    }
+    _getSerializedContent() {
+        const editor = this._editor;
+        if (!editor) {
+            return this._value();
+        }
+        if (this.zContentType() === 'json') {
+            return editor.getJSON();
+        }
+        if (this.zContentType() === 'markdown') {
+            return this._getMarkdown();
+        }
+        return editor.getHTML();
+    }
+    _getMarkdown() {
+        const editor = this._editor;
+        return editor?.getMarkdown?.() ?? this._editor?.getText() ?? '';
+    }
+    _serializeValueAsText() {
+        const value = this._value();
+        if (typeof value === 'string') {
+            return value;
+        }
+        return JSON.stringify(value);
+    }
+    _refreshEditorState() {
+        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 frozenRect = this._getFrozenBubbleMenuReferenceRect();
+            if (frozenRect) {
+                return this._createVirtualElement(frozenRect);
+            }
+        }
+        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 this._createVirtualElement(rect);
+    }
+    _getFrozenBubbleMenuReferenceRect() {
+        const toolbarRect = this._floatingToolbar().nativeElement.getBoundingClientRect();
+        if (toolbarRect.width <= 0 || toolbarRect.height <= 0) {
+            return null;
+        }
+        return new DOMRect(toolbarRect.left, toolbarRect.bottom + ZEditorComponent._bubbleMenuOffset, toolbarRect.width, 0);
+    }
+    _createVirtualElement(rect) {
+        return {
+            getBoundingClientRect: () => rect,
+            getClientRects: () => [rect],
+        };
+    }
+    _isEditorEmpty() {
+        const editor = this._editor;
+        if (editor) {
+            return editor.isEmpty;
+        }
+        const value = this._value();
+        if (typeof value === 'string') {
+            return !value || value === '<p></p>' || value === '<p><br></p>';
+        }
+        return false;
+    }
+    _isCurrentEditorContent(content) {
+        const editor = this._editor;
+        if (!editor) {
+            return false;
+        }
+        if (this.zContentType() === 'json') {
+            return JSON.stringify(editor.getJSON()) === JSON.stringify(content);
+        }
+        return editor.getHTML() === String(content);
+    }
+    _isToolbarCommandActive(command) {
+        const editor = this._editor;
+        if (!editor || !editor.isEditable) {
+            return false;
+        }
+        switch (command) {
+            case 'bold':
+            case 'italic':
+            case 'underline':
+            case 'strike':
+            case 'code':
+            case 'bulletList':
+            case 'orderedList':
+            case 'blockquote':
+            case 'codeBlock':
+            case 'link':
+                return editor.isActive(command);
+            case 'heading1':
+                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;
+        }
+    }
+    _isToolbarCommandDisabled(command) {
+        const editor = this._editor;
+        if (!editor || !editor.isEditable || this.isDisabled() || this.zReadonly()) {
+            return true;
+        }
+        switch (command) {
+            case 'undo':
+                return !editor.can().undo();
+            case 'redo':
+                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, closePopover) {
+        this.onToolbarClick(command);
+        this._closePopover(closePopover, this._blockStylePopoverControl);
+    }
+    applyAlign(command, closePopover) {
+        this.onToolbarClick(command);
+        this._closePopover(closePopover, this._alignPopoverControl);
+    }
+    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;
+    }
+    onFloatingPopoverHide() {
+        // Yêu cầu cập nhật vị trí của floating toolbar khi popover đóng
+        this._requestBubbleMenuPositionUpdate();
+    }
+    setTextColor(color, closePopover) {
+        this._editor?.chain().focus().setColor(color).run();
+        this._closePopover(closePopover, this._textColorPopoverControl);
+        this._refreshEditorState();
+    }
+    setTextColorFromEvent(event, closePopover) {
+        const input = event.target;
+        this.setTextColor(input?.value ?? '', closePopover);
+    }
+    unsetTextColor(closePopover) {
+        this._editor?.chain().focus().unsetColor().run();
+        this._closePopover(closePopover, this._textColorPopoverControl);
+        this._refreshEditorState();
+    }
+    setBackgroundColor(color, closePopover) {
+        this._editor?.chain().focus().setBackgroundColor(color).run();
+        this._closePopover(closePopover, this._backgroundColorPopoverControl);
+        this._refreshEditorState();
+    }
+    setBackgroundColorFromEvent(event, closePopover) {
+        const input = event.target;
+        this.setBackgroundColor(input?.value ?? '', closePopover);
+    }
+    unsetBackgroundColor(closePopover) {
+        this._editor?.chain().focus().unsetBackgroundColor().run();
+        this._closePopover(closePopover, this._backgroundColorPopoverControl);
+        this._refreshEditorState();
+    }
+    _closePopover(closePopover, control) {
+        const close = closePopover ?? (() => control?.close());
+        requestAnimationFrame(() => {
+            close();
+        });
+    }
+    _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);
+        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._alignFixedTrigger(this._slashMenuTrigger().nativeElement, coords.left, coords.bottom, state => this.slashMenuState.update(current => ({ ...current, ...state })));
+                const popoverControl = this._slashMenuPopoverControl;
+                if (popoverControl?.isVisible()) {
+                    popoverControl.updatePosition();
+                    this._scrollActiveSlashMenuItemIntoView();
+                    return;
+                }
+                popoverControl?.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._showLinkPopover();
+    }
+    closeLinkPopover() {
+        this.linkPopoverState.update(state => ({ ...state, visible: false }));
+        this._linkAnchorElement = null;
+        this._linkPopoverControl?.closeImmediate();
+    }
+    onLinkUrlChange(value) {
+        this.linkUrl.set(String(value ?? ''));
+    }
+    applyLink() {
+        const editor = this._editor;
+        const href = this.normalizedLinkUrl();
+        const selection = this._linkSelection;
+        if (!editor || !href || !selection) {
+            return;
+        }
+        editor.chain().focus().setTextSelection(selection).extendMarkRange('link').setLink({ href }).run();
+        this.closeLinkPopover();
+        this._refreshEditorState();
+    }
+    _normalizeUrl(value) {
+        const trimmed = value.trim();
+        if (!trimmed) {
+            return '';
+        }
+        try {
+            const url = new URL(trimmed);
+            return url.protocol === 'http:' || url.protocol === 'https:' ? url.toString() : '';
+        }
+        catch {
+            return '';
+        }
+    }
+    removeLink() {
+        const editor = this._editor;
+        const selection = this._linkSelection;
+        if (!editor || !selection) {
+            this.closeLinkPopover();
+            return;
+        }
+        editor.chain().focus().setTextSelection(selection).extendMarkRange('link').unsetLink().run();
+        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._alignFixedTrigger(this._linkPopoverTrigger().nativeElement, rect.left, rect.top, state => this.linkPopoverState.update(current => ({ ...current, ...state })));
+                this._linkPopoverControl?.show();
+            }
+        });
+    }
+    _alignFixedTrigger(trigger, targetLeft, targetTop, updatePosition) {
+        const triggerRect = trigger.getBoundingClientRect();
+        const left = Number.parseFloat(trigger.style.left) || 0;
+        const top = Number.parseFloat(trigger.style.top) || 0;
+        const correctedLeft = left + targetLeft - triggerRect.left;
+        const correctedTop = top + targetTop - triggerRect.top;
+        updatePosition({
+            left: correctedLeft,
+            top: correctedTop,
+        });
+        trigger.style.left = `${correctedLeft}px`;
+        trigger.style.top = `${correctedTop}px`;
+    }
+    _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) {
+            return;
+        }
+        const selectionFrom = editor.state.selection.from;
+        const input = document.createElement('input');
+        input.type = 'file';
+        input.accept = 'image/*';
+        input.style.display = 'none';
+        const removeInput = () => {
+            input.remove();
+        };
+        input.addEventListener('change', () => {
+            const file = input.files?.[0];
+            if (!file) {
+                removeInput();
+                return;
+            }
+            const reader = new FileReader();
+            reader.addEventListener('load', () => {
+                const src = typeof reader.result === 'string' ? reader.result : '';
+                if (src) {
+                    editor.chain().focus().setTextSelection(selectionFrom).setImage({ src, alt: file.name }).run();
+                }
+                removeInput();
+            });
+            reader.addEventListener('error', removeInput);
+            reader.readAsDataURL(file);
+        }, { once: true });
+        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') {
+            return {};
+        }
+        const { mode: _mode, ...config } = placeholder;
+        return config;
+    }
+    _placeholderMode() {
+        const { placeholder } = this.zTipTap();
+        return typeof placeholder === 'object' && placeholder.mode === 'firstLine' ? 'firstLine' : 'everyLine';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: ZEditorComponent, isStandalone: true, selector: "z-editor", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", isSignal: true, isRequired: false, transformFunction: null }, zLabel: { classPropertyName: "zLabel", publicName: "zLabel", isSignal: true, isRequired: false, transformFunction: null }, zLabelClass: { classPropertyName: "zLabelClass", publicName: "zLabelClass", isSignal: true, isRequired: false, transformFunction: null }, zPlaceholder: { classPropertyName: "zPlaceholder", publicName: "zPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, zRequired: { classPropertyName: "zRequired", publicName: "zRequired", isSignal: true, isRequired: false, transformFunction: null }, zDisabled: { classPropertyName: "zDisabled", publicName: "zDisabled", isSignal: true, isRequired: false, transformFunction: null }, zReadonly: { classPropertyName: "zReadonly", publicName: "zReadonly", isSignal: true, isRequired: false, transformFunction: null }, zContentType: { classPropertyName: "zContentType", publicName: "zContentType", isSignal: true, isRequired: false, transformFunction: null }, zToolbar: { classPropertyName: "zToolbar", publicName: "zToolbar", isSignal: true, isRequired: false, transformFunction: null }, zTipTap: { classPropertyName: "zTipTap", publicName: "zTipTap", isSignal: true, isRequired: false, transformFunction: null }, zValidators: { classPropertyName: "zValidators", publicName: "zValidators", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zOnChange: "zOnChange", zOnFocus: "zOnFocus", zOnBlur: "zOnBlur", zControl: "zControl", zEvent: "zEvent" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => ZEditorComponent),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "_editorHost", first: true, predicate: ["editorHost"], descendants: true, isSignal: true }, { propertyName: "_floatingToolbar", first: true, predicate: ["floatingToolbar"], descendants: true, isSignal: true }, { propertyName: "_slashMenuTrigger", first: true, predicate: ["slashMenuTrigger"], descendants: true, isSignal: true }, { propertyName: "_linkPopoverTrigger", first: true, predicate: ["linkPopoverTrigger"], descendants: true, isSignal: true }, { propertyName: "_slashMenuScrollHost", first: true, predicate: ["slashMenuScrollHost"], descendants: true, isSignal: true }], exportAs: ["zEditor"], ngImport: i0, template: "<div [class]=\"wrapperClasses()\" [class.z-editor-disabled]=\"isDisabled()\" [class.z-editor-readonly]=\"zReadonly()\">\n  @if (zLabel()) {\n    <label [for]=\"editorId\" class=\"text-xs leading-none font-medium\" [class]=\"zLabelClass()\">\n      {{ zLabel() }}\n      @if (zRequired()) {\n        <span class=\"text-destructive! ml-0.5\">*</span>\n      }\n    </label>\n  }\n\n  <div [class]=\"editorClasses()\">\n    @if (showToolbar()) {\n      <div class=\"z-editor-toolbar\" role=\"toolbar\" [attr.aria-controls]=\"editorId\">\n        @for (item of toolbarItems(); track item.id) {\n          @switch (item.id) {\n            @case ('emoji') {\n              <button\n                type=\"button\"\n                class=\"z-editor-toolbar-button\"\n                z-popover\n                [zPopoverContent]=\"emojiPopover\"\n                zPosition=\"bottom-left\"\n                zTrigger=\"click\"\n                zClass=\"z-editor-emoji-popover\"\n                (zControl)=\"onEmojiPopoverControl($event)\"\n                (zShow)=\"onEmojiPopoverShow()\"\n                [disabled]=\"item.disabled\"\n                [attr.aria-label]=\"item.label\"\n                [attr.title]=\"item.label\">\n                <i z-icon [zType]=\"item.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n              </button>\n            }\n            @case ('blockStyle') {\n              <button\n                type=\"button\"\n                class=\"z-editor-toolbar-button\"\n                z-popover\n                [zPopoverContent]=\"blockStylePopover\"\n                zPosition=\"bottom-left\"\n                zTrigger=\"click\"\n                zClass=\"z-editor-menu-popover\"\n                (zControl)=\"onBlockStylePopoverControl($event)\"\n                (zHideStart)=\"onFloatingPopoverHide()\"\n                [disabled]=\"item.disabled\"\n                [attr.aria-label]=\"item.label\"\n                [attr.title]=\"item.label\">\n                <i z-icon [zType]=\"item.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n              </button>\n            }\n            @case ('textColor') {\n              @let textColor = activeTextColor();\n              <button\n                type=\"button\"\n                class=\"z-editor-toolbar-button\"\n                z-popover\n                [zPopoverContent]=\"textColorPopover\"\n                zPosition=\"bottom-left\"\n                zTrigger=\"click\"\n                zClass=\"z-editor-color-popover\"\n                (zControl)=\"onTextColorPopoverControl($event)\"\n                (zHideStart)=\"onFloatingPopoverHide()\"\n                [disabled]=\"item.disabled\"\n                [attr.aria-label]=\"item.label\"\n                [attr.title]=\"item.label\">\n                <i z-icon [zType]=\"item.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n                <span class=\"z-editor-color-indicator\" [style.background]=\"textColor\"></span>\n              </button>\n            }\n            @case ('backgroundColor') {\n              @let bgColor = activeBackgroundColor();\n              <button\n                type=\"button\"\n                class=\"z-editor-toolbar-button\"\n                z-popover\n                [zPopoverContent]=\"backgroundColorPopover\"\n                zPosition=\"bottom-left\"\n                zTrigger=\"click\"\n                zClass=\"z-editor-color-popover\"\n                (zControl)=\"onBackgroundColorPopoverControl($event)\"\n                (zHideStart)=\"onFloatingPopoverHide()\"\n                [disabled]=\"item.disabled\"\n                [attr.aria-label]=\"item.label\"\n                [attr.title]=\"item.label\">\n                <i z-icon [zType]=\"item.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n                <span class=\"z-editor-color-indicator\" [style.background]=\"bgColor\"></span>\n              </button>\n            }\n            @case ('align') {\n              <button\n                type=\"button\"\n                class=\"z-editor-toolbar-button\"\n                z-popover\n                [zPopoverContent]=\"alignPopover\"\n                zPosition=\"bottom-left\"\n                zTrigger=\"click\"\n                zClass=\"z-editor-menu-popover\"\n                (zControl)=\"onAlignPopoverControl($event)\"\n                (zHideStart)=\"onFloatingPopoverHide()\"\n                [disabled]=\"item.disabled\"\n                [attr.aria-label]=\"item.label\"\n                [attr.title]=\"item.label\">\n                <i z-icon [zType]=\"activeAlignIcon()\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n              </button>\n            }\n            @default {\n              <button\n                type=\"button\"\n                class=\"z-editor-toolbar-button\"\n                [class.z-editor-toolbar-button-active]=\"item.active\"\n                [disabled]=\"item.disabled\"\n                [attr.aria-label]=\"item.label\"\n                [attr.title]=\"item.label\"\n                (click)=\"onToolbarClick(item.id)\">\n                <i z-icon [zType]=\"item.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n              </button>\n            }\n          }\n        }\n      </div>\n    }\n\n    <div\n      #editorHost\n      [id]=\"editorId\"\n      class=\"z-editor-content\"\n      role=\"textbox\"\n      [attr.aria-multiline]=\"true\"\n      [attr.aria-readonly]=\"isDisabled() || zReadonly()\"></div>\n  </div>\n\n  @if (hasError()) {\n    <p class=\"text-destructive animate-in fade-in slide-in-from-top-1 m-0 text-xs duration-200\">\n      {{ errorMessage() }}\n    </p>\n  }\n\n  <ng-template #emojiPopover>\n    @let emojiCategoryLabel =\n      emojiSearchQuery() ? ('i18n_z_ui_emoji_search_results' | translate) : (activeEmojiCategoryLabel() | translate);\n    @let activeCategoryId = activeEmojiCategoryId();\n    <div class=\"z-editor-emoji-sheet\">\n      <div class=\"z-editor-emoji-header\">\n        <div class=\"z-editor-emoji-title mb-1\">\n          <span class=\"z-editor-emoji-title-dot\" aria-hidden=\"true\"></span>\n          <span>{{ emojiCategoryLabel }}</span>\n        </div>\n        <z-input\n          class=\"z-editor-emoji-search\"\n          zSize=\"sm\"\n          [zSearch]=\"true\"\n          [zDebounce]=\"150\"\n          [zPlaceholder]=\"'i18n_z_ui_emoji_search_placeholder' | translate\"\n          [ngModel]=\"emojiSearch()\"\n          (zOnSearch)=\"emojiSearch.set($any($event))\" />\n      </div>\n      <div class=\"z-editor-emoji-body\">\n        @if (hasEmojiResults()) {\n          <div class=\"z-editor-emoji-grid\">\n            @for (emoji of activeEmojis(); track emoji) {\n              <button\n                type=\"button\"\n                class=\"z-editor-emoji-button\"\n                [attr.aria-label]=\"emoji\"\n                (click)=\"insertEmoji($any(emoji))\">\n                {{ emoji }}\n              </button>\n            }\n          </div>\n        } @else {\n          <div class=\"z-editor-emoji-empty\">\n            <span class=\"z-editor-emoji-empty-icon\" aria-hidden=\"true\">\n              <i z-icon zType=\"lucideSearchX\" zSize=\"14\" [zStrokeWidth]=\"2\"></i>\n            </span>\n            <span>{{ 'i18n_z_ui_emoji_no_results' | translate }}</span>\n          </div>\n        }\n      </div>\n      <div class=\"z-editor-emoji-footer\" role=\"tablist\">\n        @for (category of emojiCategories; track category.id) {\n          <button\n            type=\"button\"\n            role=\"tab\"\n            class=\"z-editor-emoji-footer-button cursor-pointer!\"\n            [class.z-editor-emoji-footer-button-active]=\"category.id === activeCategoryId\"\n            [attr.aria-label]=\"category.labelKey | translate\"\n            [attr.aria-selected]=\"category.id === activeCategoryId\"\n            [attr.title]=\"category.labelKey | translate\"\n            (click)=\"setEmojiCategory(category.id)\">\n            <i z-icon [zType]=\"category.icon\" zSize=\"15\" [zStrokeWidth]=\"2\"></i>\n          </button>\n        }\n      </div>\n    </div>\n  </ng-template>\n\n  <ng-template #blockStylePopover let-close=\"close\">\n    <div class=\"z-editor-menu-list\">\n      @for (option of blockStyleOptions; track option.command) {\n        <button\n          type=\"button\"\n          class=\"z-editor-menu-item\"\n          [class.z-editor-menu-item-active]=\"activeBlockStyle() === option.command\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"applyBlockStyle(option.command, close)\">\n          <i z-icon [zType]=\"option.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n          <span>{{ option.label }}</span>\n        </button>\n      }\n    </div>\n  </ng-template>\n\n  <ng-template #alignPopover let-close=\"close\">\n    <div class=\"z-editor-menu-list\">\n      @for (option of alignOptions; track option.command) {\n        <button\n          type=\"button\"\n          class=\"z-editor-menu-item\"\n          [class.z-editor-menu-item-active]=\"activeAlign() === option.command\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"applyAlign(option.command, close)\">\n          <i z-icon [zType]=\"option.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n          <span>{{ option.label }}</span>\n        </button>\n      }\n    </div>\n  </ng-template>\n\n  <ng-template #textColorPopover let-close=\"close\">\n    @let currentTextColor = activeTextColor();\n    <div class=\"z-editor-color-grid\">\n      @for (color of textColorSwatches; track color) {\n        <button\n          type=\"button\"\n          class=\"z-editor-color-swatch\"\n          [class.z-editor-color-swatch-active]=\"currentTextColor === color\"\n          [style.background]=\"color\"\n          [attr.aria-label]=\"'Text color ' + color\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"setTextColor(color, close)\"></button>\n      }\n      <label class=\"z-editor-color-custom\">\n        <input type=\"color\" [value]=\"currentTextColor\" (input)=\"setTextColorFromEvent($event, close)\" />\n        {{ currentTextColor }}\n      </label>\n      <button\n        type=\"button\"\n        z-button\n        zType=\"outline\"\n        zSize=\"sm\"\n        class=\"z-editor-color-reset\"\n        (mousedown)=\"$event.preventDefault()\"\n        (click)=\"unsetTextColor(close)\">\n        Reset\n      </button>\n    </div>\n  </ng-template>\n\n  <ng-template #backgroundColorPopover let-close=\"close\">\n    @let currentBgColor = activeBackgroundColor();\n    <div class=\"z-editor-color-grid\">\n      @for (color of backgroundColorSwatches; track color) {\n        <button\n          type=\"button\"\n          class=\"z-editor-color-swatch\"\n          [class.z-editor-color-swatch-active]=\"currentBgColor === color\"\n          [style.background]=\"color\"\n          [attr.aria-label]=\"'Background color ' + color\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"setBackgroundColor(color, close)\"></button>\n      }\n      <label class=\"z-editor-color-custom\">\n        <input type=\"color\" [value]=\"currentBgColor\" (input)=\"setBackgroundColorFromEvent($event, close)\" />\n        {{ currentBgColor }}\n      </label>\n      <button\n        type=\"button\"\n        z-button\n        zType=\"outline\"\n        zSize=\"sm\"\n        class=\"z-editor-color-reset\"\n        (mousedown)=\"$event.preventDefault()\"\n        (click)=\"unsetBackgroundColor(close)\">\n        Reset\n      </button>\n    </div>\n  </ng-template>\n\n  <div #floatingToolbar class=\"z-editor-floating-toolbar\" role=\"toolbar\" [attr.aria-controls]=\"editorId\">\n    @for (item of floatingToolbarItems(); track item.id) {\n      @switch (item.id) {\n        @case ('blockStyle') {\n          <button\n            type=\"button\"\n            class=\"z-editor-toolbar-button\"\n            z-popover\n            [zPopoverContent]=\"blockStylePopover\"\n            zPosition=\"bottom-left\"\n            zTrigger=\"click\"\n            zClass=\"z-editor-menu-popover\"\n            (zControl)=\"onBlockStylePopoverControl($event)\"\n            (zHideStart)=\"onFloatingPopoverHide()\"\n            [disabled]=\"item.disabled\"\n            [attr.aria-label]=\"item.label\"\n            [attr.title]=\"activeBlockStyleLabel()\"\n            (mousedown)=\"$event.preventDefault()\">\n            <i z-icon [zType]=\"item.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n          </button>\n        }\n        @case ('textColor') {\n          @let textColor = activeTextColor();\n          <button\n            type=\"button\"\n            class=\"z-editor-toolbar-button\"\n            z-popover\n            [zPopoverContent]=\"textColorPopover\"\n            zPosition=\"bottom-left\"\n            zTrigger=\"click\"\n            zClass=\"z-editor-color-popover\"\n            (zControl)=\"onTextColorPopoverControl($event)\"\n            (zHideStart)=\"onFloatingPopoverHide()\"\n            [disabled]=\"item.disabled\"\n            [attr.aria-label]=\"item.label\"\n            [attr.title]=\"item.label\"\n            (mousedown)=\"$event.preventDefault()\">\n            <i z-icon [zType]=\"item.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n            <span class=\"z-editor-color-indicator\" [style.background]=\"textColor\"></span>\n          </button>\n        }\n        @case ('backgroundColor') {\n          @let bgColor = activeBackgroundColor();\n          <button\n            type=\"button\"\n            class=\"z-editor-toolbar-button\"\n            z-popover\n            [zPopoverContent]=\"backgroundColorPopover\"\n            zPosition=\"bottom-left\"\n            zTrigger=\"click\"\n            zClass=\"z-editor-color-popover\"\n            (zControl)=\"onBackgroundColorPopoverControl($event)\"\n            (zHideStart)=\"onFloatingPopoverHide()\"\n            [disabled]=\"item.disabled\"\n            [attr.aria-label]=\"item.label\"\n            [attr.title]=\"item.label\"\n            (mousedown)=\"$event.preventDefault()\">\n            <i z-icon [zType]=\"item.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n            <span class=\"z-editor-color-indicator\" [style.background]=\"bgColor\"></span>\n          </button>\n        }\n        @case ('align') {\n          <button\n            type=\"button\"\n            class=\"z-editor-toolbar-button\"\n            z-popover\n            [zPopoverContent]=\"alignPopover\"\n            zPosition=\"bottom-left\"\n            zTrigger=\"click\"\n            zClass=\"z-editor-menu-popover\"\n            (zControl)=\"onAlignPopoverControl($event)\"\n            (zHideStart)=\"onFloatingPopoverHide()\"\n            [disabled]=\"item.disabled\"\n            [attr.aria-label]=\"item.label\"\n            [attr.title]=\"activeAlignLabel()\"\n            (mousedown)=\"$event.preventDefault()\">\n            <i z-icon [zType]=\"activeAlignIcon()\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n          </button>\n        }\n        @default {\n          <button\n            type=\"button\"\n            class=\"z-editor-toolbar-button\"\n            z-tooltip\n            [zContent]=\"item.tooltip\"\n            zPosition=\"top\"\n            [zAlwaysShow]=\"true\"\n            [zDisabled]=\"item.disabled || !item.shortcut\"\n            [class.z-editor-toolbar-button-active]=\"item.active\"\n            [disabled]=\"item.disabled\"\n            [attr.aria-label]=\"item.label\"\n            [attr.title]=\"item.label\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"onFloatingToolbarClick(item.id)\">\n            <i z-icon [zType]=\"item.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n          </button>\n        }\n      }\n    }\n  </div>\n\n  <span\n    #slashMenuTrigger\n    class=\"z-editor-slash-menu-trigger\"\n    z-popover\n    [zPopoverContent]=\"slashMenuPopover\"\n    zTrigger=\"manual\"\n    zPosition=\"bottom-left\"\n    zClass=\"z-editor-slash-popover\"\n    [zOffset]=\"4\"\n    [zPopoverWidth]=\"300\"\n    [style.left.px]=\"slashMenuState().left\"\n    [style.top.px]=\"slashMenuState().top\"\n    (zControl)=\"onSlashMenuPopoverControl($event)\"\n    (zHide)=\"onSlashMenuPopoverHide()\"></span>\n\n  <ng-template #slashMenuPopover>\n    @let slashActiveIndex = slashMenuActiveIndex();\n    <div class=\"z-editor-slash-menu-shell\">\n      <div #slashMenuScrollHost class=\"z-editor-slash-menu-scrollbar\">\n        <div class=\"z-editor-slash-menu\" role=\"listbox\" [attr.aria-controls]=\"editorId\">\n          @for (item of filteredSlashCommands(); track item.id) {\n            @if (item.showGroupLabel) {\n              <div class=\"z-editor-slash-menu-group\">\n                {{ item.group }}\n              </div>\n            }\n            <button\n              type=\"button\"\n              class=\"z-editor-slash-menu-item\"\n              role=\"option\"\n              [class.z-editor-slash-menu-item-active]=\"$index === slashActiveIndex\"\n              [attr.aria-selected]=\"$index === slashActiveIndex\"\n              (mousedown)=\"$event.preventDefault()\"\n              (click)=\"applySlashCommand(item)\">\n              <i z-icon [zType]=\"item.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n              <span class=\"z-editor-slash-menu-copy\">\n                <span class=\"z-editor-slash-menu-label\">{{ item.label }}</span>\n              </span>\n            </button>\n          } @empty {\n            <div class=\"z-editor-slash-menu-empty\">\n              <i z-icon zType=\"lucideSearchX\" zSize=\"28\" [zStrokeWidth]=\"1.8\"></i>\n              <span>{{ 'i18n_z_ui_editor_no_commands' | translate }}</span>\n            </div>\n          }\n        </div>\n      </div>\n      <div class=\"z-editor-slash-menu-footer\" aria-hidden=\"true\">\n        <span>\n          <kbd>\u2191\u2193</kbd>\n          {{ 'i18n_z_ui_editor_shortcut_navigate' | translate }}\n        </span>\n        <span>\n          <kbd>Esc</kbd>\n          {{ 'i18n_z_ui_editor_shortcut_abort' | translate }}\n        </span>\n        <span>\n          <kbd>\u21B5</kbd>\n          {{ 'i18n_z_ui_editor_shortcut_select' | translate }}\n        </span>\n      </div>\n    </div>\n  </ng-template>\n\n  <span\n    #linkPopoverTrigger\n    class=\"z-editor-link-popover-trigger\"\n    z-popover\n    [zPopoverContent]=\"linkPopover\"\n    zTrigger=\"manual\"\n    zPosition=\"bottom-left\"\n    zClass=\"z-editor-link-popover\"\n    [zOffset]=\"6\"\n    [zPopoverWidth]=\"320\"\n    [style.left.px]=\"linkPopoverState().left\"\n    [style.top.px]=\"linkPopoverState().top\"\n    [style.width.px]=\"linkPopoverState().width\"\n    [style.height.px]=\"linkPopoverState().height\"\n    (zControl)=\"onLinkPopoverControl($event)\"\n    (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{color:var(--primary);font-weight:500;text-decoration-line:underline;text-decoration-color:currentcolor;text-decoration-thickness:.0625rem;text-underline-offset:.1875rem;cursor:pointer;transition:text-decoration-color .15s ease}.z-editor-wrapper .z-editor-prosemirror a:hover{text-decoration-color:color-mix(in srgb,currentcolor 70%,transparent)}.z-editor-wrapper .z-editor-prosemirror .mention{color:var(--primary);font-weight:500}.z-editor-wrapper .z-editor-prosemirror :is(h1,h2,h3,h4,h5,h6){color:var(--foreground);font-weight:700;line-height:1.2}.z-editor-wrapper .z-editor-prosemirror h1{font-size:1.875rem}.z-editor-wrapper .z-editor-prosemirror h2{font-size:1.5rem}.z-editor-wrapper .z-editor-prosemirror h3{font-size:1.25rem}.z-editor-wrapper .z-editor-prosemirror h4{font-size:1.125rem}.z-editor-wrapper .z-editor-prosemirror h5,.z-editor-wrapper .z-editor-prosemirror h6{font-size:1rem}.z-editor-wrapper .z-editor-prosemirror blockquote{border-left:.25rem solid var(--border);padding-left:1rem;font-style:italic;color:var(--muted-foreground)}.z-editor-wrapper .z-editor-prosemirror [data-type=horizontalRule]{margin-top:2rem;margin-bottom:2rem;padding-top:.5rem;padding-bottom:.5rem}.z-editor-wrapper .z-editor-prosemirror hr{border:0;border-top:.0625rem solid var(--border)}.z-editor-wrapper .z-editor-prosemirror pre{overflow-x:auto;border:.0625rem solid var(--border);border-radius:.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", "zAnimatedTypeIcon", "zAnimateIcon", "zAnimationTriggerIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "component", type: ZInputComponent, selector: "z-input", inputs: ["class", "zType", "zSize", "zAlign", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zLoading", "zLoadingOutline", "zPrefix", "zSuffix", "zMin", "zMax", "zStep", "zShowArrows", "zMask", "zDecimalPlaces", "zAllowNegative", "zThousandSeparator", "zDecimalMarker", "zValidators", "zAsyncValidators", "zAsyncDebounce", "zAsyncValidateOn", "zShowPasswordToggle", "zSearch", "zDebounce", "zAutofocus", "zAutoComplete", "zAllowClear", "zAutoSizeContent", "zRows", "zResize", "zMaxLength", "zAutoSuggest", "zColorConfig"], outputs: ["zOnSearch", "zOnChange", "zOnBlur", "zOnFocus", "zOnKeydown", "zOnEnter", "zOnColorCollapse", "zControl", "zEvent"], exportAs: ["zInput"] }, { kind: "directive", type: ZPopoverDirective, selector: "[z-popover]", inputs: ["zPopoverContent", "zPosition", "zTrigger", "zPopoverTrigger", "zClass", "zShowDelay", "zHideDelay", "zDisabled", "zOffset", "zPopoverWidth", "zTriggerRef", "zManualClose", "zOutsideClickClose", "zScrollClose", "zSticky", "zShowArrow", "zKeyboardSafe"], outputs: ["zShow", "zHide", "zHideStart", "zControl", "zPositionChange", "zOutsideClick"], exportAs: ["zPopover"] }, { kind: "directive", type: ZTooltipDirective, selector: "[z-tooltip], [zTooltip]", inputs: ["zContent", "zPosition", "zTooltipPosition", "zTrigger", "zTooltipTrigger", "zTooltipType", "zTooltipSize", "zClass", "zTooltipClass", "zShowDelay", "zTooltipShowDelay", "zHideDelay", "zTooltipHideDelay", "zArrow", "zTooltipArrow", "zDisabled", "zTooltipDisabled", "zOffset", "zTooltipOffset", "zAutoDetect", "zTriggerElement", "zAlwaysShow", "zMaxWidth"], outputs: ["zShow", "zHide"], exportAs: ["zTooltip"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'z-editor', imports: [
+                        FormsModule,
+                        ReactiveFormsModule,
+                        ZButtonComponent,
+                        ZIconComponent,
+                        ZInputComponent,
+                        ZPopoverDirective,
+                        ZTooltipDirective,
+                        TranslatePipe,
+                    ], standalone: true, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ZEditorComponent),
+                            multi: true,
+                        },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'zEditor', template: "<div [class]=\"wrapperClasses()\" [class.z-editor-disabled]=\"isDisabled()\" [class.z-editor-readonly]=\"zReadonly()\">\n  @if (zLabel()) {\n    <label [for]=\"editorId\" class=\"text-xs leading-none font-medium\" [class]=\"zLabelClass()\">\n      {{ zLabel() }}\n      @if (zRequired()) {\n        <span class=\"text-destructive! ml-0.5\">*</span>\n      }\n    </label>\n  }\n\n  <div [class]=\"editorClasses()\">\n    @if (showToolbar()) {\n      <div class=\"z-editor-toolbar\" role=\"toolbar\" [attr.aria-controls]=\"editorId\">\n        @for (item of toolbarItems(); track item.id) {\n          @switch (item.id) {\n            @case ('emoji') {\n              <button\n                type=\"button\"\n                class=\"z-editor-toolbar-button\"\n                z-popover\n                [zPopoverContent]=\"emojiPopover\"\n                zPosition=\"bottom-left\"\n                zTrigger=\"click\"\n                zClass=\"z-editor-emoji-popover\"\n                (zControl)=\"onEmojiPopoverControl($event)\"\n                (zShow)=\"onEmojiPopoverShow()\"\n                [disabled]=\"item.disabled\"\n                [attr.aria-label]=\"item.label\"\n                [attr.title]=\"item.label\">\n                <i z-icon [zType]=\"item.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n              </button>\n            }\n            @case ('blockStyle') {\n              <button\n                type=\"button\"\n                class=\"z-editor-toolbar-button\"\n                z-popover\n                [zPopoverContent]=\"blockStylePopover\"\n                zPosition=\"bottom-left\"\n                zTrigger=\"click\"\n                zClass=\"z-editor-menu-popover\"\n                (zControl)=\"onBlockStylePopoverControl($event)\"\n                (zHideStart)=\"onFloatingPopoverHide()\"\n                [disabled]=\"item.disabled\"\n                [attr.aria-label]=\"item.label\"\n                [attr.title]=\"item.label\">\n                <i z-icon [zType]=\"item.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n              </button>\n            }\n            @case ('textColor') {\n              @let textColor = activeTextColor();\n              <button\n                type=\"button\"\n                class=\"z-editor-toolbar-button\"\n                z-popover\n                [zPopoverContent]=\"textColorPopover\"\n                zPosition=\"bottom-left\"\n                zTrigger=\"click\"\n                zClass=\"z-editor-color-popover\"\n                (zControl)=\"onTextColorPopoverControl($event)\"\n                (zHideStart)=\"onFloatingPopoverHide()\"\n                [disabled]=\"item.disabled\"\n                [attr.aria-label]=\"item.label\"\n                [attr.title]=\"item.label\">\n                <i z-icon [zType]=\"item.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n                <span class=\"z-editor-color-indicator\" [style.background]=\"textColor\"></span>\n              </button>\n            }\n            @case ('backgroundColor') {\n              @let bgColor = activeBackgroundColor();\n              <button\n                type=\"button\"\n                class=\"z-editor-toolbar-button\"\n                z-popover\n                [zPopoverContent]=\"backgroundColorPopover\"\n                zPosition=\"bottom-left\"\n                zTrigger=\"click\"\n                zClass=\"z-editor-color-popover\"\n                (zControl)=\"onBackgroundColorPopoverControl($event)\"\n                (zHideStart)=\"onFloatingPopoverHide()\"\n                [disabled]=\"item.disabled\"\n                [attr.aria-label]=\"item.label\"\n                [attr.title]=\"item.label\">\n                <i z-icon [zType]=\"item.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n                <span class=\"z-editor-color-indicator\" [style.background]=\"bgColor\"></span>\n              </button>\n            }\n            @case ('align') {\n              <button\n                type=\"button\"\n                class=\"z-editor-toolbar-button\"\n                z-popover\n                [zPopoverContent]=\"alignPopover\"\n                zPosition=\"bottom-left\"\n                zTrigger=\"click\"\n                zClass=\"z-editor-menu-popover\"\n                (zControl)=\"onAlignPopoverControl($event)\"\n                (zHideStart)=\"onFloatingPopoverHide()\"\n                [disabled]=\"item.disabled\"\n                [attr.aria-label]=\"item.label\"\n                [attr.title]=\"item.label\">\n                <i z-icon [zType]=\"activeAlignIcon()\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n              </button>\n            }\n            @default {\n              <button\n                type=\"button\"\n                class=\"z-editor-toolbar-button\"\n                [class.z-editor-toolbar-button-active]=\"item.active\"\n                [disabled]=\"item.disabled\"\n                [attr.aria-label]=\"item.label\"\n                [attr.title]=\"item.label\"\n                (click)=\"onToolbarClick(item.id)\">\n                <i z-icon [zType]=\"item.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n              </button>\n            }\n          }\n        }\n      </div>\n    }\n\n    <div\n      #editorHost\n      [id]=\"editorId\"\n      class=\"z-editor-content\"\n      role=\"textbox\"\n      [attr.aria-multiline]=\"true\"\n      [attr.aria-readonly]=\"isDisabled() || zReadonly()\"></div>\n  </div>\n\n  @if (hasError()) {\n    <p class=\"text-destructive animate-in fade-in slide-in-from-top-1 m-0 text-xs duration-200\">\n      {{ errorMessage() }}\n    </p>\n  }\n\n  <ng-template #emojiPopover>\n    @let emojiCategoryLabel =\n      emojiSearchQuery() ? ('i18n_z_ui_emoji_search_results' | translate) : (activeEmojiCategoryLabel() | translate);\n    @let activeCategoryId = activeEmojiCategoryId();\n    <div class=\"z-editor-emoji-sheet\">\n      <div class=\"z-editor-emoji-header\">\n        <div class=\"z-editor-emoji-title mb-1\">\n          <span class=\"z-editor-emoji-title-dot\" aria-hidden=\"true\"></span>\n          <span>{{ emojiCategoryLabel }}</span>\n        </div>\n        <z-input\n          class=\"z-editor-emoji-search\"\n          zSize=\"sm\"\n          [zSearch]=\"true\"\n          [zDebounce]=\"150\"\n          [zPlaceholder]=\"'i18n_z_ui_emoji_search_placeholder' | translate\"\n          [ngModel]=\"emojiSearch()\"\n          (zOnSearch)=\"emojiSearch.set($any($event))\" />\n      </div>\n      <div class=\"z-editor-emoji-body\">\n        @if (hasEmojiResults()) {\n          <div class=\"z-editor-emoji-grid\">\n            @for (emoji of activeEmojis(); track emoji) {\n              <button\n                type=\"button\"\n                class=\"z-editor-emoji-button\"\n                [attr.aria-label]=\"emoji\"\n                (click)=\"insertEmoji($any(emoji))\">\n                {{ emoji }}\n              </button>\n            }\n          </div>\n        } @else {\n          <div class=\"z-editor-emoji-empty\">\n            <span class=\"z-editor-emoji-empty-icon\" aria-hidden=\"true\">\n              <i z-icon zType=\"lucideSearchX\" zSize=\"14\" [zStrokeWidth]=\"2\"></i>\n            </span>\n            <span>{{ 'i18n_z_ui_emoji_no_results' | translate }}</span>\n          </div>\n        }\n      </div>\n      <div class=\"z-editor-emoji-footer\" role=\"tablist\">\n        @for (category of emojiCategories; track category.id) {\n          <button\n            type=\"button\"\n            role=\"tab\"\n            class=\"z-editor-emoji-footer-button cursor-pointer!\"\n            [class.z-editor-emoji-footer-button-active]=\"category.id === activeCategoryId\"\n            [attr.aria-label]=\"category.labelKey | translate\"\n            [attr.aria-selected]=\"category.id === activeCategoryId\"\n            [attr.title]=\"category.labelKey | translate\"\n            (click)=\"setEmojiCategory(category.id)\">\n            <i z-icon [zType]=\"category.icon\" zSize=\"15\" [zStrokeWidth]=\"2\"></i>\n          </button>\n        }\n      </div>\n    </div>\n  </ng-template>\n\n  <ng-template #blockStylePopover let-close=\"close\">\n    <div class=\"z-editor-menu-list\">\n      @for (option of blockStyleOptions; track option.command) {\n        <button\n          type=\"button\"\n          class=\"z-editor-menu-item\"\n          [class.z-editor-menu-item-active]=\"activeBlockStyle() === option.command\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"applyBlockStyle(option.command, close)\">\n          <i z-icon [zType]=\"option.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n          <span>{{ option.label }}</span>\n        </button>\n      }\n    </div>\n  </ng-template>\n\n  <ng-template #alignPopover let-close=\"close\">\n    <div class=\"z-editor-menu-list\">\n      @for (option of alignOptions; track option.command) {\n        <button\n          type=\"button\"\n          class=\"z-editor-menu-item\"\n          [class.z-editor-menu-item-active]=\"activeAlign() === option.command\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"applyAlign(option.command, close)\">\n          <i z-icon [zType]=\"option.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n          <span>{{ option.label }}</span>\n        </button>\n      }\n    </div>\n  </ng-template>\n\n  <ng-template #textColorPopover let-close=\"close\">\n    @let currentTextColor = activeTextColor();\n    <div class=\"z-editor-color-grid\">\n      @for (color of textColorSwatches; track color) {\n        <button\n          type=\"button\"\n          class=\"z-editor-color-swatch\"\n          [class.z-editor-color-swatch-active]=\"currentTextColor === color\"\n          [style.background]=\"color\"\n          [attr.aria-label]=\"'Text color ' + color\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"setTextColor(color, close)\"></button>\n      }\n      <label class=\"z-editor-color-custom\">\n        <input type=\"color\" [value]=\"currentTextColor\" (input)=\"setTextColorFromEvent($event, close)\" />\n        {{ currentTextColor }}\n      </label>\n      <button\n        type=\"button\"\n        z-button\n        zType=\"outline\"\n        zSize=\"sm\"\n        class=\"z-editor-color-reset\"\n        (mousedown)=\"$event.preventDefault()\"\n        (click)=\"unsetTextColor(close)\">\n        Reset\n      </button>\n    </div>\n  </ng-template>\n\n  <ng-template #backgroundColorPopover let-close=\"close\">\n    @let currentBgColor = activeBackgroundColor();\n    <div class=\"z-editor-color-grid\">\n      @for (color of backgroundColorSwatches; track color) {\n        <button\n          type=\"button\"\n          class=\"z-editor-color-swatch\"\n          [class.z-editor-color-swatch-active]=\"currentBgColor === color\"\n          [style.background]=\"color\"\n          [attr.aria-label]=\"'Background color ' + color\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"setBackgroundColor(color, close)\"></button>\n      }\n      <label class=\"z-editor-color-custom\">\n        <input type=\"color\" [value]=\"currentBgColor\" (input)=\"setBackgroundColorFromEvent($event, close)\" />\n        {{ currentBgColor }}\n      </label>\n      <button\n        type=\"button\"\n        z-button\n        zType=\"outline\"\n        zSize=\"sm\"\n        class=\"z-editor-color-reset\"\n        (mousedown)=\"$event.preventDefault()\"\n        (click)=\"unsetBackgroundColor(close)\">\n        Reset\n      </button>\n    </div>\n  </ng-template>\n\n  <div #floatingToolbar class=\"z-editor-floating-toolbar\" role=\"toolbar\" [attr.aria-controls]=\"editorId\">\n    @for (item of floatingToolbarItems(); track item.id) {\n      @switch (item.id) {\n        @case ('blockStyle') {\n          <button\n            type=\"button\"\n            class=\"z-editor-toolbar-button\"\n            z-popover\n            [zPopoverContent]=\"blockStylePopover\"\n            zPosition=\"bottom-left\"\n            zTrigger=\"click\"\n            zClass=\"z-editor-menu-popover\"\n            (zControl)=\"onBlockStylePopoverControl($event)\"\n            (zHideStart)=\"onFloatingPopoverHide()\"\n            [disabled]=\"item.disabled\"\n            [attr.aria-label]=\"item.label\"\n            [attr.title]=\"activeBlockStyleLabel()\"\n            (mousedown)=\"$event.preventDefault()\">\n            <i z-icon [zType]=\"item.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n          </button>\n        }\n        @case ('textColor') {\n          @let textColor = activeTextColor();\n          <button\n            type=\"button\"\n            class=\"z-editor-toolbar-button\"\n            z-popover\n            [zPopoverContent]=\"textColorPopover\"\n            zPosition=\"bottom-left\"\n            zTrigger=\"click\"\n            zClass=\"z-editor-color-popover\"\n            (zControl)=\"onTextColorPopoverControl($event)\"\n            (zHideStart)=\"onFloatingPopoverHide()\"\n            [disabled]=\"item.disabled\"\n            [attr.aria-label]=\"item.label\"\n            [attr.title]=\"item.label\"\n            (mousedown)=\"$event.preventDefault()\">\n            <i z-icon [zType]=\"item.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n            <span class=\"z-editor-color-indicator\" [style.background]=\"textColor\"></span>\n          </button>\n        }\n        @case ('backgroundColor') {\n          @let bgColor = activeBackgroundColor();\n          <button\n            type=\"button\"\n            class=\"z-editor-toolbar-button\"\n            z-popover\n            [zPopoverContent]=\"backgroundColorPopover\"\n            zPosition=\"bottom-left\"\n            zTrigger=\"click\"\n            zClass=\"z-editor-color-popover\"\n            (zControl)=\"onBackgroundColorPopoverControl($event)\"\n            (zHideStart)=\"onFloatingPopoverHide()\"\n            [disabled]=\"item.disabled\"\n            [attr.aria-label]=\"item.label\"\n            [attr.title]=\"item.label\"\n            (mousedown)=\"$event.preventDefault()\">\n            <i z-icon [zType]=\"item.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n            <span class=\"z-editor-color-indicator\" [style.background]=\"bgColor\"></span>\n          </button>\n        }\n        @case ('align') {\n          <button\n            type=\"button\"\n            class=\"z-editor-toolbar-button\"\n            z-popover\n            [zPopoverContent]=\"alignPopover\"\n            zPosition=\"bottom-left\"\n            zTrigger=\"click\"\n            zClass=\"z-editor-menu-popover\"\n            (zControl)=\"onAlignPopoverControl($event)\"\n            (zHideStart)=\"onFloatingPopoverHide()\"\n            [disabled]=\"item.disabled\"\n            [attr.aria-label]=\"item.label\"\n            [attr.title]=\"activeAlignLabel()\"\n            (mousedown)=\"$event.preventDefault()\">\n            <i z-icon [zType]=\"activeAlignIcon()\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n          </button>\n        }\n        @default {\n          <button\n            type=\"button\"\n            class=\"z-editor-toolbar-button\"\n            z-tooltip\n            [zContent]=\"item.tooltip\"\n            zPosition=\"top\"\n            [zAlwaysShow]=\"true\"\n            [zDisabled]=\"item.disabled || !item.shortcut\"\n            [class.z-editor-toolbar-button-active]=\"item.active\"\n            [disabled]=\"item.disabled\"\n            [attr.aria-label]=\"item.label\"\n            [attr.title]=\"item.label\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"onFloatingToolbarClick(item.id)\">\n            <i z-icon [zType]=\"item.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n          </button>\n        }\n      }\n    }\n  </div>\n\n  <span\n    #slashMenuTrigger\n    class=\"z-editor-slash-menu-trigger\"\n    z-popover\n    [zPopoverContent]=\"slashMenuPopover\"\n    zTrigger=\"manual\"\n    zPosition=\"bottom-left\"\n    zClass=\"z-editor-slash-popover\"\n    [zOffset]=\"4\"\n    [zPopoverWidth]=\"300\"\n    [style.left.px]=\"slashMenuState().left\"\n    [style.top.px]=\"slashMenuState().top\"\n    (zControl)=\"onSlashMenuPopoverControl($event)\"\n    (zHide)=\"onSlashMenuPopoverHide()\"></span>\n\n  <ng-template #slashMenuPopover>\n    @let slashActiveIndex = slashMenuActiveIndex();\n    <div class=\"z-editor-slash-menu-shell\">\n      <div #slashMenuScrollHost class=\"z-editor-slash-menu-scrollbar\">\n        <div class=\"z-editor-slash-menu\" role=\"listbox\" [attr.aria-controls]=\"editorId\">\n          @for (item of filteredSlashCommands(); track item.id) {\n            @if (item.showGroupLabel) {\n              <div class=\"z-editor-slash-menu-group\">\n                {{ item.group }}\n              </div>\n            }\n            <button\n              type=\"button\"\n              class=\"z-editor-slash-menu-item\"\n              role=\"option\"\n              [class.z-editor-slash-menu-item-active]=\"$index === slashActiveIndex\"\n              [attr.aria-selected]=\"$index === slashActiveIndex\"\n              (mousedown)=\"$event.preventDefault()\"\n              (click)=\"applySlashCommand(item)\">\n              <i z-icon [zType]=\"item.icon\" zSize=\"16\" [zStrokeWidth]=\"2.5\"></i>\n              <span class=\"z-editor-slash-menu-copy\">\n                <span class=\"z-editor-slash-menu-label\">{{ item.label }}</span>\n              </span>\n            </button>\n          } @empty {\n            <div class=\"z-editor-slash-menu-empty\">\n              <i z-icon zType=\"lucideSearchX\" zSize=\"28\" [zStrokeWidth]=\"1.8\"></i>\n              <span>{{ 'i18n_z_ui_editor_no_commands' | translate }}</span>\n            </div>\n          }\n        </div>\n      </div>\n      <div class=\"z-editor-slash-menu-footer\" aria-hidden=\"true\">\n        <span>\n          <kbd>\u2191\u2193</kbd>\n          {{ 'i18n_z_ui_editor_shortcut_navigate' | translate }}\n        </span>\n        <span>\n          <kbd>Esc</kbd>\n          {{ 'i18n_z_ui_editor_shortcut_abort' | translate }}\n        </span>\n        <span>\n          <kbd>\u21B5</kbd>\n          {{ 'i18n_z_ui_editor_shortcut_select' | translate }}\n        </span>\n      </div>\n    </div>\n  </ng-template>\n\n  <span\n    #linkPopoverTrigger\n    class=\"z-editor-link-popover-trigger\"\n    z-popover\n    [zPopoverContent]=\"linkPopover\"\n    zTrigger=\"manual\"\n    zPosition=\"bottom-left\"\n    zClass=\"z-editor-link-popover\"\n    [zOffset]=\"6\"\n    [zPopoverWidth]=\"320\"\n    [style.left.px]=\"linkPopoverState().left\"\n    [style.top.px]=\"linkPopoverState().top\"\n    [style.width.px]=\"linkPopoverState().width\"\n    [style.height.px]=\"linkPopoverState().height\"\n    (zControl)=\"onLinkPopoverControl($event)\"\n    (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{color:var(--primary);font-weight:500;text-decoration-line:underline;text-decoration-color:currentcolor;text-decoration-thickness:.0625rem;text-underline-offset:.1875rem;cursor:pointer;transition:text-decoration-color .15s ease}.z-editor-wrapper .z-editor-prosemirror a:hover{text-decoration-color:color-mix(in srgb,currentcolor 70%,transparent)}.z-editor-wrapper .z-editor-prosemirror .mention{color:var(--primary);font-weight:500}.z-editor-wrapper .z-editor-prosemirror :is(h1,h2,h3,h4,h5,h6){color:var(--foreground);font-weight:700;line-height:1.2}.z-editor-wrapper .z-editor-prosemirror h1{font-size:1.875rem}.z-editor-wrapper .z-editor-prosemirror h2{font-size:1.5rem}.z-editor-wrapper .z-editor-prosemirror h3{font-size:1.25rem}.z-editor-wrapper .z-editor-prosemirror h4{font-size:1.125rem}.z-editor-wrapper .z-editor-prosemirror h5,.z-editor-wrapper .z-editor-prosemirror h6{font-size:1rem}.z-editor-wrapper .z-editor-prosemirror blockquote{border-left:.25rem solid var(--border);padding-left:1rem;font-style:italic;color:var(--muted-foreground)}.z-editor-wrapper .z-editor-prosemirror [data-type=horizontalRule]{margin-top:2rem;margin-bottom:2rem;padding-top:.5rem;padding-bottom:.5rem}.z-editor-wrapper .z-editor-prosemirror hr{border:0;border-top:.0625rem solid var(--border)}.z-editor-wrapper .z-editor-prosemirror pre{overflow-x:auto;border:.0625rem solid var(--border);border-radius:.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 }] }], _slashMenuTrigger: [{ type: i0.ViewChild, args: ['slashMenuTrigger', { isSignal: true }] }], _linkPopoverTrigger: [{ type: i0.ViewChild, args: ['linkPopoverTrigger', { isSignal: true }] }], _slashMenuScrollHost: [{ type: i0.ViewChild, args: ['slashMenuScrollHost', { isSignal: true }] }], zOnChange: [{ type: i0.Output, args: ["zOnChange"] }], zOnFocus: [{ type: i0.Output, args: ["zOnFocus"] }], zOnBlur: [{ type: i0.Output, args: ["zOnBlur"] }], zControl: [{ type: i0.Output, args: ["zControl"] }], zEvent: [{ type: i0.Output, args: ["zEvent"] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], zSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSize", required: false }] }], zLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLabel", required: false }] }], zLabelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLabelClass", required: false }] }], zPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPlaceholder", required: false }] }], zRequired: [{ type: i0.Input, args: [{ isSignal: true, alias: "zRequired", required: false }] }], zDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDisabled", required: false }] }], zReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "zReadonly", required: false }] }], zContentType: [{ type: i0.Input, args: [{ isSignal: true, alias: "zContentType", required: false }] }], zToolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "zToolbar", required: false }] }], zTipTap: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTipTap", required: false }] }], zValidators: [{ type: i0.Input, args: [{ isSignal: true, alias: "zValidators", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ZEditorComponent, Z_EDITOR_DEFAULT_TOOLBAR, zEditorVariants };
+//# sourceMappingURL=shival99-z-ui-components-z-editor.mjs.map