@shival99/z-ui 2.1.28 → 2.1.29

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

@@ -1,1750 +0,0 @@
-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