@shival99/z-ui 1.9.27 → 2.0.2

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

@@ -1,17 +1,49 @@
 import * as i0 from '@angular/core';
-import { inject, Injector, DestroyRef, output, input, signal, computed, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component } 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 i2 from '@angular/forms';
-import { NgControl, NgModel, PristineChangeEvent, TouchedChangeEvent, ReactiveFormsModule, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+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 { ZModalComponent, ZModalContentDirective } from '@shival99/z-ui/components/z-modal';
 import { ZTranslateService } from '@shival99/z-ui/services';
 import { zTransform, zUuid, zMergeClasses, zCreateEvent } from '@shival99/z-ui/utils';
-import * as i1 from 'ngx-quill';
-import { QuillModule } from 'ngx-quill';
-import Quill from 'quill';
-import QuillResizeImage from 'quill-resize-image';
+import { Editor } from '@tiptap/core';
+import Code from '@tiptap/extension-code';
+import HorizontalRule from '@tiptap/extension-horizontal-rule';
+import Image from '@tiptap/extension-image';
+import Link from '@tiptap/extension-link';
+import Mention from '@tiptap/extension-mention';
+import Placeholder from '@tiptap/extension-placeholder';
+import TextAlign from '@tiptap/extension-text-align';
+import Underline from '@tiptap/extension-underline';
+import { Markdown } from '@tiptap/markdown';
+import StarterKit from '@tiptap/starter-kit';
 import { merge, filter } from 'rxjs';
 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: 'heading1', icon: 'lucideHeading1', label: 'Heading 1' },
+    { id: 'heading2', icon: 'lucideHeading2', label: 'Heading 2' },
+    { 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: 'horizontalRule', icon: 'lucideMinus', label: 'Horizontal rule' },
+    { id: 'clearFormatting', icon: 'lucideRemoveFormatting', label: 'Clear formatting' },
+];
+
 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',
@@ -20,9 +52,9 @@ const zEditorVariants = cva([
 ], {
     variants: {
         zSize: {
-            sm: '[&_.ql-editor]:min-h-24 [&_.ql-editor]:text-sm',
-            default: '[&_.ql-editor]:min-h-40 [&_.ql-editor]:text-sm',
-            lg: '[&_.ql-editor]:min-h-60 [&_.ql-editor]:text-base',
+            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]',
@@ -30,29 +62,23 @@ const zEditorVariants = cva([
             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',
     },
 });
 
-Quill.register('modules/resize', QuillResizeImage);
-const DEFAULT_TOOLBAR = [
-    ['bold', 'italic', 'underline', 'strike'],
-    ['blockquote', 'code-block'],
-    [{ header: 1 }, { header: 2 }],
-    [{ list: 'ordered' }, { list: 'bullet' }],
-    [{ indent: '-1' }, { indent: '+1' }],
-    [{ align: [] }],
-    [{ color: [] }, { background: [] }],
-    ['link', 'image'],
-    ['clean'],
-];
 class ZEditorComponent {
     _injector = inject(Injector);
     _destroyRef = inject(DestroyRef);
     _zTranslate = inject(ZTranslateService);
+    _editorHost = viewChild.required('editorHost');
     zOnChange = output();
     zOnFocus = output();
     zOnBlur = output();
@@ -66,17 +92,29 @@ class ZEditorComponent {
     zRequired = input(false, { ...(ngDevMode ? { debugName: "zRequired" } : {}), transform: zTransform });
     zDisabled = input(false, { ...(ngDevMode ? { debugName: "zDisabled" } : {}), transform: zTransform });
     zReadonly = input(false, { ...(ngDevMode ? { debugName: "zReadonly" } : {}), transform: zTransform });
-    zModules = input(null, ...(ngDevMode ? [{ debugName: "zModules" }] : []));
-    zFormats = input(null, ...(ngDevMode ? [{ debugName: "zFormats" }] : []));
-    zBounds = input('document.body', ...(ngDevMode ? [{ debugName: "zBounds" }] : []));
-    zTheme = input('snow', ...(ngDevMode ? [{ debugName: "zTheme" }] : []));
+    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" }] : []));
+    linkModalVisible = signal(false, ...(ngDevMode ? [{ debugName: "linkModalVisible" }] : []));
+    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 ?? '')) !== '',
+        },
+    ];
     uiState = signal({
         touched: false,
         dirty: false,
@@ -85,29 +123,29 @@ class ZEditorComponent {
     _onChange = () => void 0;
     _onTouched = () => void 0;
     _ngControl = null;
-    _editorInstance = null;
+    _editor = null;
+    _pendingValue = '';
+    _linkSelection = null;
     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" }] : []));
+    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" }] : []));
-    effectiveModules = computed(() => {
-        const customModules = this.zModules();
-        if (customModules) {
-            return customModules;
-        }
-        return {
-            toolbar: DEFAULT_TOOLBAR,
-            resize: {
-                locale: {},
-            },
-            history: {
-                delay: 1000,
-                maxStack: 50,
-                userOnly: true,
-            },
-        };
-    }, ...(ngDevMode ? [{ debugName: "effectiveModules" }] : []));
+    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" }] : []));
     _shouldShowValidation = computed(() => {
         const control = this._formControl();
         this._formStateVersion();
@@ -121,38 +159,36 @@ class ZEditorComponent {
     }, ...(ngDevMode ? [{ debugName: "_shouldShowValidation" }] : []));
     _getValidationErrors() {
         const errors = [];
-        const value = this._value();
+        const plainText = this._plainText().trim();
+        const valueText = this._serializeValueAsText();
         const validators = this.zValidators();
         if (!this._shouldShowValidation()) {
             return errors;
         }
-        // Check zRequired independently (works with ngModel without formControlName)
         const isRequired = this.zRequired() || this._formControl()?.errors?.['required'];
-        if (isRequired && (!value || value.trim() === '' || value === '<p><br></p>')) {
+        if (isRequired && !plainText && this._isEditorEmpty()) {
             this._zTranslate.currentLang();
             errors.push(this._zTranslate.instant('i18n_z_ui_editor_required'));
         }
         for (const validator of validators) {
-            // Skip required check here since we already checked above
             if (validator.error === 'required') {
                 continue;
             }
-            if (validator.minLength && value.length < validator.minLength) {
+            if (validator.minLength && valueText.length < validator.minLength) {
                 errors.push(validator.message);
                 continue;
             }
-            if (validator.maxLength && value.length > validator.maxLength) {
+            if (validator.maxLength && valueText.length > validator.maxLength) {
                 errors.push(validator.message);
                 continue;
             }
-            if (validator.pattern && !validator.pattern.test(value)) {
+            if (validator.pattern && !validator.pattern.test(valueText)) {
                 errors.push(validator.message);
             }
         }
         return errors;
     }
     hasError = computed(() => {
-        // Custom error from setErrorMessage takes priority
         if (this._customError()) {
             return true;
         }
@@ -168,7 +204,6 @@ class ZEditorComponent {
         return control.invalid && this._shouldShowValidation();
     }, ...(ngDevMode ? [{ debugName: "hasError" }] : []));
     errorMessage = computed(() => {
-        // Custom error from setErrorMessage takes priority
         const customError = this._customError();
         if (customError) {
             return customError;
@@ -211,11 +246,29 @@ class ZEditorComponent {
         return 'default';
     }, ...(ngDevMode ? [{ debugName: "currentStatus" }] : []));
     wrapperClasses = computed(() => 'z-editor-wrapper flex w-full flex-col gap-2', ...(ngDevMode ? [{ debugName: "wrapperClasses" }] : []));
-    labelClasses = computed(() => zMergeClasses('mb-1.5 block text-sm font-medium text-foreground', this.zLabelClass()), ...(ngDevMode ? [{ debugName: "labelClasses" }] : []));
     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._editor?.destroy();
+            this._editor = null;
+        });
+    }
     ngOnInit() {
         queueMicrotask(() => {
             try {
@@ -235,10 +288,16 @@ class ZEditorComponent {
                 this._ngControl = null;
             }
         });
-        setTimeout(() => this._emitControl());
     }
     writeValue(value) {
-        this._value.set(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;
@@ -248,20 +307,160 @@ class ZEditorComponent {
     }
     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 'heading1':
+                editor.chain().focus().toggleHeading({ level: 1 }).run();
+                break;
+            case 'heading2':
+                editor.chain().focus().toggleHeading({ level: 2 }).run();
+                break;
+            case 'paragraph':
+                editor.chain().focus().setParagraph().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 'undo':
+                editor.chain().focus().undo().run();
+                break;
+            case 'redo':
+                editor.chain().focus().redo().run();
+                break;
+            case 'clearFormatting':
+                editor.chain().focus().clearNodes().unsetAllMarks().run();
+                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,
+                    dropcursor: {
+                        color: 'var(--primary)',
+                        width: 2,
+                    },
+                    ...tiptapOptions.starterKit,
+                }),
+                Code.extend({
+                    excludes: 'code',
+                }),
+                Underline,
+                TextAlign.configure({
+                    types: ['heading', 'paragraph'],
+                }),
+                Link.configure({
+                    openOnClick: false,
+                    ...tiptapOptions.link,
+                }),
+                HorizontalRule,
+                tiptapOptions.image !== false &&
+                    Image.configure(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',
+                },
+            },
+            onUpdate: () => this._handleEditorUpdate(),
+            onSelectionUpdate: () => this._refreshEditorState(),
+            onTransaction: () => this._refreshEditorState(),
+            onFocus: () => this._handleFocus(),
+            onBlur: () => this._handleBlur(),
+        });
+        this._refreshEditorState();
+        this._emitControl();
     }
-    onContentChange(event) {
-        const html = event.html || '';
-        this._value.set(html);
+    _handleEditorUpdate() {
+        const value = this._getSerializedContent();
+        this._value.set(value);
         this.uiState.update(s => ({ ...s, dirty: true }));
-        this._onChange(html);
-        this.zOnChange.emit(html);
+        this._onChange(value);
+        this.zOnChange.emit(value);
+        this._refreshEditorState();
     }
-    onFocus() {
+    _handleFocus() {
         const focusEvent = new FocusEvent('focus');
         this.zOnFocus.emit(focusEvent);
         this.zEvent.emit(zCreateEvent('focus', focusEvent));
     }
-    onBlur() {
+    _handleBlur() {
         if (this.uiState().dirty) {
             this.uiState.update(s => ({ ...s, touched: true }));
         }
@@ -270,85 +469,254 @@ class ZEditorComponent {
         this.zOnBlur.emit(blurEvent);
         this.zEvent.emit(zCreateEvent('blur', blurEvent));
     }
-    focus() {
-        this._editorInstance?.quillEditor?.focus();
+    _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);
     }
-    blur() {
-        this._editorInstance?.quillEditor?.blur();
+    _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;
     }
-    clear() {
-        this._value.set('');
-        this._onChange('');
+    _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);
     }
-    setContent(content) {
-        this._value.set(content);
-        this._onChange(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 'paragraph':
+                return editor.isActive('paragraph');
+            default:
+                return false;
+        }
     }
-    getContent() {
-        return this._value();
+    _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');
+            default:
+                return false;
+        }
     }
-    getText() {
-        return this._editorInstance?.quillEditor?.getText() || '';
+    _toggleLink() {
+        const editor = this._editor;
+        if (!editor) {
+            return;
+        }
+        const { from, to } = editor.state.selection;
+        this._linkSelection = { from, to };
+        const href = String(editor.getAttributes('link')['href'] ?? '');
+        this.activeLinkHref.set(href);
+        this.linkUrl.set(href);
+        this.linkModalVisible.set(true);
     }
-    getLength() {
-        return this._editorInstance?.quillEditor?.getLength() || 0;
+    closeLinkModal() {
+        this.linkModalVisible.set(false);
     }
-    setErrorMessage(message) {
-        this._customError.set(message);
+    onLinkUrlChange(value) {
+        this.linkUrl.set(String(value ?? ''));
     }
-    setValue(content) {
-        this.setContent(content);
+    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.closeLinkModal();
+        this._refreshEditorState();
     }
-    /** @deprecated Use `valid()` for boolean form-submit checks. */
-    validate() {
-        this.uiState.update(s => ({ ...s, touched: true, dirty: true }));
-        this._onTouched();
-        if (this._ngControl?.control) {
-            this._ngControl.control.markAsDirty();
-            this._ngControl.control.markAsTouched();
+    _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.closeLinkModal();
+            return;
         }
-        return this.hasError();
+        editor.chain().focus().setTextSelection(selection).extendMarkRange('link').unsetLink().run();
+        this.closeLinkModal();
+        this._refreshEditorState();
     }
-    valid() {
-        return !this.validate();
+    _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();
     }
-    reset() {
-        this._value.set('');
-        this.uiState.update(s => ({ ...s, touched: false, dirty: false }));
-        this._customError.set(null);
-        this._onChange('');
-        if (this._ngControl?.control) {
-            this._ngControl.control.markAsPristine();
-            this._ngControl.control.markAsUntouched();
+    _placeholderConfig() {
+        const { placeholder } = this.zTipTap();
+        if (!placeholder || typeof placeholder === 'string') {
+            return {};
         }
+        const { mode: _mode, ...config } = placeholder;
+        return config;
     }
-    _emitControl() {
-        this.zControl.emit({
-            focus: () => this.focus(),
-            blur: () => this.blur(),
-            clear: () => this.clear(),
-            setContent: (content) => this.setContent(content),
-            getContent: () => this.getContent(),
-            getText: () => this.getText(),
-            getLength: () => this.getLength(),
-            valid: () => this.valid(),
-            validate: () => this.validate(),
-            reset: () => this.reset(),
-            setValue: (content) => this.setValue(content),
-            setErrorMessage: (message) => this.setErrorMessage(message),
-            hasError: this.hasError,
-            value: this._value.asReadonly(),
-            errorMessage: this.errorMessage,
-        });
+    _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 }, zModules: { classPropertyName: "zModules", publicName: "zModules", isSignal: true, isRequired: false, transformFunction: null }, zFormats: { classPropertyName: "zFormats", publicName: "zFormats", isSignal: true, isRequired: false, transformFunction: null }, zBounds: { classPropertyName: "zBounds", publicName: "zBounds", isSignal: true, isRequired: false, transformFunction: null }, zTheme: { classPropertyName: "zTheme", publicName: "zTheme", 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: [
+    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,
             },
-        ], exportAs: ["zEditor"], ngImport: i0, template: `
+        ], viewQueries: [{ propertyName: "_editorHost", first: true, predicate: ["editorHost"], descendants: true, isSignal: true }], exportAs: ["zEditor"], ngImport: i0, template: `
     <div [class]="wrapperClasses()" [class.z-editor-disabled]="isDisabled()" [class.z-editor-readonly]="zReadonly()">
       @if (zLabel()) {
         <label [for]="editorId" class="text-xs leading-none font-medium" [class]="zLabelClass()">
@@ -359,32 +727,100 @@ class ZEditorComponent {
         </label>
       }
 
-      <quill-editor
-        [id]="editorId"
-        [class]="editorClasses()"
-        [modules]="effectiveModules()"
-        [placeholder]="effectivePlaceholder()"
-        [readOnly]="isDisabled() || zReadonly()"
-        [formats]="zFormats()"
-        [bounds]="zBounds()"
-        [theme]="zTheme()"
-        [ngModel]="_value()"
-        (onContentChanged)="onContentChange($event)"
-        (onFocus)="onFocus()"
-        (onBlur)="onBlur()"
-      />
+      <div [class]="editorClasses()">
+        @if (showToolbar()) {
+          <div class="z-editor-toolbar" role="toolbar" [attr.aria-controls]="editorId">
+            @for (item of toolbarItems(); track item.id) {
+              <button
+                type="button"
+                class="z-editor-toolbar-button"
+                [class.z-editor-toolbar-button-active]="item.active"
+                [disabled]="item.disabled"
+                [attr.aria-label]="item.label"
+                [attr.title]="item.label"
+                (click)="onToolbarClick(item.id)"
+              >
+                <i z-icon [zType]="item.icon" zSize="16"></i>
+              </button>
+            }
+          </div>
+        }
+
+        <div
+          #editorHost
+          [id]="editorId"
+          class="z-editor-content"
+          role="textbox"
+          [attr.aria-multiline]="true"
+          [attr.aria-readonly]="isDisabled() || zReadonly()"
+        ></div>
+      </div>
 
       @if (hasError()) {
         <p class="text-destructive animate-in fade-in slide-in-from-top-1 m-0 text-xs duration-200">
           {{ errorMessage() }}
         </p>
       }
+
+      <z-modal
+        [(zVisible)]="linkModalVisible"
+        class="z-editor-link-modal"
+        zWidth="360px"
+        [zClosable]="false"
+        [zHideHeader]="true"
+        [zHideFooter]="true"
+      >
+        <ng-template z-modal-content>
+          <div class="space-y-4">
+            <z-input
+              zType="url"
+              zLabel="URL"
+              zPlaceholder="https://example.com"
+              [zRequired]="true"
+              [zValidators]="linkValidators"
+              [ngModel]="linkUrl()"
+              (ngModelChange)="onLinkUrlChange($event)"
+              (zOnEnter)="applyLink()"
+            />
+
+            <div class="mt-4 flex items-center justify-between gap-2">
+              <button
+                type="button"
+                z-button
+                zType="ghost"
+                zSize="sm"
+                [zDisabled]="!activeLinkHref()"
+                (click)="removeLink()"
+              >
+                {{ 'i18n_z_ui_common_remove' | translate }}
+              </button>
+              <div class="flex items-center gap-2">
+                <button type="button" z-button zType="outline" zSize="sm" (click)="closeLinkModal()">
+                  {{ 'i18n_z_ui_common_cancel' | translate }}
+                </button>
+                <button type="button" z-button zSize="sm" [zDisabled]="!canApplyLink()" (click)="applyLink()">
+                  {{ 'i18n_z_ui_common_apply' | translate }}
+                </button>
+              </div>
+            </div>
+          </div>
+        </ng-template>
+      </z-modal>
     </div>
-  `, isInline: true, styles: [".ql-container{box-sizing:border-box;font-family:Helvetica,Arial,sans-serif;font-size:13px;height:100%;margin:0;position:relative}.ql-container.ql-disabled .ql-tooltip{visibility:hidden}.ql-container:not(.ql-disabled) li[data-list=checked]>.ql-ui,.ql-container:not(.ql-disabled) li[data-list=unchecked]>.ql-ui{cursor:pointer}.ql-clipboard{left:-100000px;height:1px;overflow-y:hidden;position:absolute;top:50%}.ql-clipboard p{margin:0;padding:0}.ql-editor{box-sizing:border-box;counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;line-height:1.42;height:100%;outline:none;overflow-y:auto;padding:12px 15px;tab-size:4;-moz-tab-size:4;text-align:left;white-space:pre-wrap;word-wrap:break-word}.ql-editor>*{cursor:text}.ql-editor p,.ql-editor ol,.ql-editor pre,.ql-editor blockquote,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{margin:0;padding:0}@supports (counter-set:none){.ql-editor p,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{counter-set:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor p,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor table{border-collapse:collapse}.ql-editor td{border:1px solid #000;padding:2px 5px}.ql-editor ol{padding-left:1.5em}.ql-editor li{list-style-type:none;padding-left:1.5em;position:relative}.ql-editor li>.ql-ui:before{display:inline-block;margin-left:-1.5em;margin-right:.3em;text-align:right;white-space:nowrap;width:1.2em}.ql-editor li[data-list=checked]>.ql-ui,.ql-editor li[data-list=unchecked]>.ql-ui{color:#777}.ql-editor li[data-list=bullet]>.ql-ui:before{content:\"\\2022\"}.ql-editor li[data-list=checked]>.ql-ui:before{content:\"\\2611\"}.ql-editor li[data-list=unchecked]>.ql-ui:before{content:\"\\2610\"}@supports (counter-set:none){.ql-editor li[data-list]{counter-set:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list]{counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered]{counter-increment:list-0}.ql-editor li[data-list=ordered]>.ql-ui:before{content:counter(list-0,decimal) \". \"}.ql-editor li[data-list=ordered].ql-indent-1{counter-increment:list-1}.ql-editor li[data-list=ordered].ql-indent-1>.ql-ui:before{content:counter(list-1,lower-alpha) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-1{counter-set:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-1{counter-reset:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-2{counter-increment:list-2}.ql-editor li[data-list=ordered].ql-indent-2>.ql-ui:before{content:counter(list-2,lower-roman) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-2{counter-set:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-2{counter-reset:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-3{counter-increment:list-3}.ql-editor li[data-list=ordered].ql-indent-3>.ql-ui:before{content:counter(list-3,decimal) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-3{counter-set:list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-3{counter-reset:list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-4{counter-increment:list-4}.ql-editor li[data-list=ordered].ql-indent-4>.ql-ui:before{content:counter(list-4,lower-alpha) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-4{counter-set:list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-4{counter-reset:list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-5{counter-increment:list-5}.ql-editor li[data-list=ordered].ql-indent-5>.ql-ui:before{content:counter(list-5,lower-roman) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-5{counter-set:list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-5{counter-reset:list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-6{counter-increment:list-6}.ql-editor li[data-list=ordered].ql-indent-6>.ql-ui:before{content:counter(list-6,decimal) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-6{counter-set:list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-6{counter-reset:list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-7{counter-increment:list-7}.ql-editor li[data-list=ordered].ql-indent-7>.ql-ui:before{content:counter(list-7,lower-alpha) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-7{counter-set:list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-7{counter-reset:list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-8{counter-increment:list-8}.ql-editor li[data-list=ordered].ql-indent-8>.ql-ui:before{content:counter(list-8,lower-roman) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-8{counter-set:list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-8{counter-reset:list-9}}.ql-editor li[data-list=ordered].ql-indent-9{counter-increment:list-9}.ql-editor li[data-list=ordered].ql-indent-9>.ql-ui:before{content:counter(list-9,decimal) \". \"}.ql-editor .ql-indent-1:not(.ql-direction-rtl){padding-left:3em}.ql-editor li.ql-indent-1:not(.ql-direction-rtl){padding-left:4.5em}.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:3em}.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:4.5em}.ql-editor .ql-indent-2:not(.ql-direction-rtl){padding-left:6em}.ql-editor li.ql-indent-2:not(.ql-direction-rtl){padding-left:7.5em}.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:6em}.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:7.5em}.ql-editor .ql-indent-3:not(.ql-direction-rtl){padding-left:9em}.ql-editor li.ql-indent-3:not(.ql-direction-rtl){padding-left:10.5em}.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:9em}.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:10.5em}.ql-editor .ql-indent-4:not(.ql-direction-rtl){padding-left:12em}.ql-editor li.ql-indent-4:not(.ql-direction-rtl){padding-left:13.5em}.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:12em}.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:13.5em}.ql-editor .ql-indent-5:not(.ql-direction-rtl){padding-left:15em}.ql-editor li.ql-indent-5:not(.ql-direction-rtl){padding-left:16.5em}.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:15em}.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:16.5em}.ql-editor .ql-indent-6:not(.ql-direction-rtl){padding-left:18em}.ql-editor li.ql-indent-6:not(.ql-direction-rtl){padding-left:19.5em}.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:18em}.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:19.5em}.ql-editor .ql-indent-7:not(.ql-direction-rtl){padding-left:21em}.ql-editor li.ql-indent-7:not(.ql-direction-rtl){padding-left:22.5em}.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:21em}.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:22.5em}.ql-editor .ql-indent-8:not(.ql-direction-rtl){padding-left:24em}.ql-editor li.ql-indent-8:not(.ql-direction-rtl){padding-left:25.5em}.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:24em}.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:25.5em}.ql-editor .ql-indent-9:not(.ql-direction-rtl){padding-left:27em}.ql-editor li.ql-indent-9:not(.ql-direction-rtl){padding-left:28.5em}.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:27em}.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:28.5em}.ql-editor li.ql-direction-rtl{padding-right:1.5em}.ql-editor li.ql-direction-rtl>.ql-ui:before{margin-left:.3em;margin-right:-1.5em;text-align:left}.ql-editor table{table-layout:fixed;width:100%}.ql-editor table td{outline:none}.ql-editor .ql-code-block-container{font-family:monospace}.ql-editor .ql-video{display:block;max-width:100%}.ql-editor .ql-video.ql-align-center{margin:0 auto}.ql-editor .ql-video.ql-align-right{margin:0 0 0 auto}.ql-editor .ql-bg-black{background-color:#000}.ql-editor .ql-bg-red{background-color:#e60000}.ql-editor .ql-bg-orange{background-color:#f90}.ql-editor .ql-bg-yellow{background-color:#ff0}.ql-editor .ql-bg-green{background-color:#008a00}.ql-editor .ql-bg-blue{background-color:#06c}.ql-editor .ql-bg-purple{background-color:#93f}.ql-editor .ql-color-white{color:#fff}.ql-editor .ql-color-red{color:#e60000}.ql-editor .ql-color-orange{color:#f90}.ql-editor .ql-color-yellow{color:#ff0}.ql-editor .ql-color-green{color:#008a00}.ql-editor .ql-color-blue{color:#06c}.ql-editor .ql-color-purple{color:#93f}.ql-editor .ql-font-serif{font-family:Georgia,Times New Roman,serif}.ql-editor .ql-font-monospace{font-family:Monaco,Courier New,monospace}.ql-editor .ql-size-small{font-size:.75em}.ql-editor .ql-size-large{font-size:1.5em}.ql-editor .ql-size-huge{font-size:2.5em}.ql-editor .ql-direction-rtl{direction:rtl;text-align:inherit}.ql-editor .ql-align-center{text-align:center}.ql-editor .ql-align-justify{text-align:justify}.ql-editor .ql-align-right{text-align:right}.ql-editor .ql-ui{position:absolute}.ql-editor.ql-blank:before{color:#0009;content:attr(data-placeholder);font-style:italic;left:15px;pointer-events:none;position:absolute;right:15px}.ql-snow.ql-toolbar:after,.ql-snow .ql-toolbar:after{clear:both;content:\"\";display:table}.ql-snow.ql-toolbar button,.ql-snow .ql-toolbar button{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px;width:28px}.ql-snow.ql-toolbar button svg,.ql-snow .ql-toolbar button svg{float:left;height:100%}.ql-snow.ql-toolbar button:active:hover,.ql-snow .ql-toolbar button:active:hover{outline:none}.ql-snow.ql-toolbar input.ql-image[type=file],.ql-snow .ql-toolbar input.ql-image[type=file]{display:none}.ql-snow.ql-toolbar button:hover,.ql-snow .ql-toolbar button:hover,.ql-snow.ql-toolbar button:focus,.ql-snow .ql-toolbar button:focus,.ql-snow.ql-toolbar button.ql-active,.ql-snow .ql-toolbar button.ql-active,.ql-snow.ql-toolbar .ql-picker-label:hover,.ql-snow .ql-toolbar .ql-picker-label:hover,.ql-snow.ql-toolbar .ql-picker-label.ql-active,.ql-snow .ql-toolbar .ql-picker-label.ql-active,.ql-snow.ql-toolbar .ql-picker-item:hover,.ql-snow .ql-toolbar .ql-picker-item:hover,.ql-snow.ql-toolbar .ql-picker-item.ql-selected,.ql-snow .ql-toolbar .ql-picker-item.ql-selected{color:#06c}.ql-snow.ql-toolbar button:hover .ql-fill,.ql-snow .ql-toolbar button:hover .ql-fill,.ql-snow.ql-toolbar button:focus .ql-fill,.ql-snow .ql-toolbar button:focus .ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-fill,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill{fill:#06c}.ql-snow.ql-toolbar button:hover .ql-stroke,.ql-snow .ql-toolbar button:hover .ql-stroke,.ql-snow.ql-toolbar button:focus .ql-stroke,.ql-snow .ql-toolbar button:focus .ql-stroke,.ql-snow.ql-toolbar button.ql-active .ql-stroke,.ql-snow .ql-toolbar button.ql-active .ql-stroke,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow.ql-toolbar button:hover .ql-stroke-miter,.ql-snow .ql-toolbar button:hover .ql-stroke-miter,.ql-snow.ql-toolbar button:focus .ql-stroke-miter,.ql-snow .ql-toolbar button:focus .ql-stroke-miter,.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter{stroke:#06c}@media(pointer:coarse){.ql-snow.ql-toolbar button:hover:not(.ql-active),.ql-snow .ql-toolbar button:hover:not(.ql-active){color:#444}.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill{fill:#444}.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter{stroke:#444}}.ql-snow,.ql-snow *{box-sizing:border-box}.ql-snow .ql-hidden{display:none}.ql-snow .ql-out-bottom,.ql-snow .ql-out-top{visibility:hidden}.ql-snow .ql-tooltip{position:absolute;transform:translateY(10px)}.ql-snow .ql-tooltip a{cursor:pointer;text-decoration:none}.ql-snow .ql-tooltip.ql-flip{transform:translateY(-10px)}.ql-snow .ql-formats{display:inline-block;vertical-align:middle}.ql-snow .ql-formats:after{clear:both;content:\"\";display:table}.ql-snow .ql-stroke{fill:none;stroke:#444;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.ql-snow .ql-stroke-miter{fill:none;stroke:#444;stroke-miterlimit:10;stroke-width:2}.ql-snow .ql-fill,.ql-snow .ql-stroke.ql-fill{fill:#444}.ql-snow .ql-empty{fill:none}.ql-snow .ql-even{fill-rule:evenodd}.ql-snow .ql-thin,.ql-snow .ql-stroke.ql-thin{stroke-width:1}.ql-snow .ql-transparent{opacity:.4}.ql-snow .ql-direction svg:last-child{display:none}.ql-snow .ql-direction.ql-active svg:last-child{display:inline}.ql-snow .ql-direction.ql-active svg:first-child{display:none}.ql-snow .ql-editor h1{font-size:2em}.ql-snow .ql-editor h2{font-size:1.5em}.ql-snow .ql-editor h3{font-size:1.17em}.ql-snow .ql-editor h4{font-size:1em}.ql-snow .ql-editor h5{font-size:.83em}.ql-snow .ql-editor h6{font-size:.67em}.ql-snow .ql-editor a{text-decoration:underline}.ql-snow .ql-editor blockquote{border-left:4px solid #ccc;margin-bottom:5px;margin-top:5px;padding-left:16px}.ql-snow .ql-editor code,.ql-snow .ql-editor .ql-code-block-container{background-color:#f0f0f0;border-radius:3px}.ql-snow .ql-editor .ql-code-block-container{margin-bottom:5px;margin-top:5px;padding:5px 10px}.ql-snow .ql-editor code{font-size:85%;padding:2px 4px}.ql-snow .ql-editor .ql-code-block-container{background-color:#23241f;color:#f8f8f2;overflow:visible}.ql-snow .ql-editor img{max-width:100%}.ql-snow .ql-picker{color:#444;display:inline-block;float:left;font-size:14px;font-weight:500;height:24px;position:relative;vertical-align:middle}.ql-snow .ql-picker-label{cursor:pointer;display:inline-block;height:100%;padding-left:8px;padding-right:2px;position:relative;width:100%}.ql-snow .ql-picker-label:before{display:inline-block;line-height:22px}.ql-snow .ql-picker-options{background-color:#fff;display:none;min-width:100%;padding:4px 8px;position:absolute;white-space:nowrap}.ql-snow .ql-picker-options .ql-picker-item{cursor:pointer;display:block;padding-bottom:5px;padding-top:5px}.ql-snow .ql-picker.ql-expanded .ql-picker-label{color:#ccc;z-index:2}.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill{fill:#ccc}.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke{stroke:#ccc}.ql-snow .ql-picker.ql-expanded .ql-picker-options{display:block;margin-top:-1px;top:100%;z-index:1}.ql-snow .ql-color-picker,.ql-snow .ql-icon-picker{width:28px}.ql-snow .ql-color-picker .ql-picker-label,.ql-snow .ql-icon-picker .ql-picker-label{padding:2px 4px}.ql-snow .ql-color-picker .ql-picker-label svg,.ql-snow .ql-icon-picker .ql-picker-label svg{right:4px}.ql-snow .ql-icon-picker .ql-picker-options{padding:4px 0}.ql-snow .ql-icon-picker .ql-picker-item{height:24px;width:24px;padding:2px 4px}.ql-snow .ql-color-picker .ql-picker-options{padding:3px 5px;width:152px}.ql-snow .ql-color-picker .ql-picker-item{border:1px solid transparent;float:left;height:16px;margin:2px;padding:0;width:16px}.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg{position:absolute;margin-top:-9px;right:0;top:50%;width:18px}.ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=\"\"]):before{content:attr(data-label)}.ql-snow .ql-picker.ql-header{width:98px}.ql-snow .ql-picker.ql-header .ql-picker-label:before,.ql-snow .ql-picker.ql-header .ql-picker-item:before{content:\"Normal\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"1\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"1\"]:before{content:\"Heading 1\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"2\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"2\"]:before{content:\"Heading 2\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"3\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"3\"]:before{content:\"Heading 3\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"4\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"4\"]:before{content:\"Heading 4\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"5\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"5\"]:before{content:\"Heading 5\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"6\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"6\"]:before{content:\"Heading 6\"}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"1\"]:before{font-size:2em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"2\"]:before{font-size:1.5em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"3\"]:before{font-size:1.17em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"4\"]:before{font-size:1em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"5\"]:before{font-size:.83em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"6\"]:before{font-size:.67em}.ql-snow .ql-picker.ql-font{width:108px}.ql-snow .ql-picker.ql-font .ql-picker-label:before,.ql-snow .ql-picker.ql-font .ql-picker-item:before{content:\"Sans Serif\"}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]:before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]:before{content:\"Serif\"}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]:before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before{content:\"Monospace\"}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]:before{font-family:Georgia,Times New Roman,serif}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before{font-family:Monaco,Courier New,monospace}.ql-snow .ql-picker.ql-size{width:98px}.ql-snow .ql-picker.ql-size .ql-picker-label:before,.ql-snow .ql-picker.ql-size .ql-picker-item:before{content:\"Normal\"}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]:before{content:\"Small\"}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]:before{content:\"Large\"}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]:before{content:\"Huge\"}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]:before{font-size:10px}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]:before{font-size:18px}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]:before{font-size:32px}.ql-snow .ql-color-picker.ql-background .ql-picker-item{background-color:#fff}.ql-snow .ql-color-picker.ql-color .ql-picker-item{background-color:#000}.ql-code-block-container{position:relative}.ql-code-block-container .ql-ui{right:5px;top:5px}.ql-toolbar.ql-snow{border:1px solid #ccc;box-sizing:border-box;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;padding:8px}.ql-toolbar.ql-snow .ql-formats{margin-right:15px}.ql-toolbar.ql-snow .ql-picker-label{border:1px solid transparent}.ql-toolbar.ql-snow .ql-picker-options{border:1px solid transparent;box-shadow:#0003 0 2px 8px}.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label,.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options{border-color:#ccc}.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover{border-color:#000}.ql-toolbar.ql-snow+.ql-container.ql-snow{border-top:0}.ql-snow .ql-tooltip{background-color:#fff;border:1px solid #ccc;box-shadow:0 0 5px #ddd;color:#444;padding:5px 12px;white-space:nowrap}.ql-snow .ql-tooltip:before{content:\"Visit URL:\";line-height:26px;margin-right:8px}.ql-snow .ql-tooltip input[type=text]{display:none;border:1px solid #ccc;font-size:13px;height:26px;margin:0;padding:3px 5px;width:170px}.ql-snow .ql-tooltip a.ql-preview{display:inline-block;max-width:200px;overflow-x:hidden;text-overflow:ellipsis;vertical-align:top}.ql-snow .ql-tooltip a.ql-action:after{border-right:1px solid #ccc;content:\"Edit\";margin-left:16px;padding-right:8px}.ql-snow .ql-tooltip a.ql-remove:before{content:\"Remove\";margin-left:8px}.ql-snow .ql-tooltip a{line-height:26px}.ql-snow .ql-tooltip.ql-editing a.ql-preview,.ql-snow .ql-tooltip.ql-editing a.ql-remove{display:none}.ql-snow .ql-tooltip.ql-editing input[type=text]{display:inline-block}.ql-snow .ql-tooltip.ql-editing a.ql-action:after{border-right:0;content:\"Save\";padding-right:0}.ql-snow .ql-tooltip[data-mode=link]:before{content:\"Enter link:\"}.ql-snow .ql-tooltip[data-mode=formula]:before{content:\"Enter formula:\"}.ql-snow .ql-tooltip[data-mode=video]:before{content:\"Enter video:\"}.ql-snow a{color:#06c}.ql-container.ql-snow{border:1px solid #ccc}.z-editor-wrapper .ql-toolbar.ql-snow{border:none;border-bottom:.0625rem solid var(--border)}.z-editor-wrapper .ql-container.ql-snow{border:none}.z-editor-wrapper .ql-toolbar.ql-snow{border:none!important;border-bottom:.0625rem solid var(--border)!important;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 .ql-toolbar.ql-snow .ql-formats{margin-right:.25rem;display:inline-flex;gap:.125rem;align-items:center}.z-editor-wrapper .ql-toolbar.ql-snow button{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border-radius:.25rem;padding:0;color:var(--muted-foreground);transition:all .15s ease}.z-editor-wrapper .ql-toolbar.ql-snow button:hover{background-color:var(--accent);color:var(--foreground)}.z-editor-wrapper .ql-toolbar.ql-snow button.ql-active{background-color:color-mix(in srgb,var(--primary) 10%,transparent);color:var(--primary)}.z-editor-wrapper .ql-toolbar.ql-snow button svg{width:1rem;height:1rem}.z-editor-wrapper .ql-toolbar.ql-snow .ql-picker{color:var(--muted-foreground);height:1.75rem}.z-editor-wrapper .ql-toolbar.ql-snow .ql-picker .ql-picker-label{display:inline-flex;align-items:center;justify-content:center;border-radius:.25rem;padding:0 8px;height:100%;transition:all .15s ease}.z-editor-wrapper .ql-toolbar.ql-snow .ql-picker .ql-picker-label:hover{background-color:var(--accent);color:var(--foreground)}.z-editor-wrapper .ql-toolbar.ql-snow .ql-picker .ql-picker-options{border-radius:.375rem;border:1px solid var(--border);background-color:var(--popover);box-shadow:0 4px 6px -1px #0000001a}.z-editor-wrapper .ql-toolbar.ql-snow .ql-picker .ql-picker-options .ql-picker-item{border-radius:.25rem;padding:.25rem 8px;transition:all .15s ease}.z-editor-wrapper .ql-toolbar.ql-snow .ql-picker .ql-picker-options .ql-picker-item:hover{background-color:var(--accent)}.z-editor-wrapper .ql-container.ql-snow{border:none!important;border-bottom-left-radius:.375rem;border-bottom-right-radius:.375rem;font-family:inherit}.z-editor-wrapper .ql-container.ql-snow .ql-editor{padding:.5rem 12px}.z-editor-wrapper .ql-container.ql-snow .ql-editor.ql-blank:before{font-style:normal;color:var(--muted-foreground)}.z-editor-wrapper .ql-container.ql-snow .ql-editor .ql-align-center{text-align:center}.z-editor-wrapper .ql-container.ql-snow .ql-editor .ql-align-center img{display:inline-block}.z-editor-wrapper .ql-container.ql-snow .ql-editor .ql-align-right{text-align:right}.z-editor-wrapper .ql-container.ql-snow .ql-editor .ql-align-right img{display:inline-block}.z-editor-wrapper .ql-container.ql-snow .ql-editor .ql-align-left,.z-editor-wrapper .ql-container.ql-snow .ql-editor .ql-align-justify{text-align:left}.z-editor-wrapper .ql-container.ql-snow .ql-editor .ql-align-left img,.z-editor-wrapper .ql-container.ql-snow .ql-editor .ql-align-justify img{display:inline-block}.z-editor-wrapper .ql-container.ql-snow .ql-editor img[style*=\"float: left\"]{margin-right:1rem;margin-bottom:.5rem}.z-editor-wrapper .ql-container.ql-snow .ql-editor img[style*=\"float: right\"]{margin-left:1rem;margin-bottom:.5rem}.z-editor-wrapper .ql-container.ql-snow .ql-editor img[style*=\"margin: auto\"],.z-editor-wrapper .ql-container.ql-snow .ql-editor img[style*=\"display: block\"]{display:block;margin-left:auto;margin-right:auto}.z-editor-wrapper .ql-container.ql-snow .ql-tooltip{left:.5rem!important;right:auto!important;max-width:calc(100% - 1rem);display:flex;align-items:center;border-radius:.375rem;border:1px solid var(--border);background-color:var(--popover);box-shadow:0 4px 6px -1px #0000001a;padding:.375rem!important;gap:.5rem;color:var(--foreground);z-index:10}.z-editor-wrapper .ql-container.ql-snow .ql-tooltip.ql-hidden{display:none}.z-editor-wrapper .ql-container.ql-snow .ql-tooltip:before,.z-editor-wrapper .ql-container.ql-snow .ql-tooltip:after{display:none}.z-editor-wrapper .ql-container.ql-snow .ql-tooltip .ql-preview{display:none}.z-editor-wrapper .ql-container.ql-snow .ql-tooltip input[type=text]{border:1px solid var(--border);border-radius:.25rem;padding:.25rem 8px;font-size:.875rem;outline:none;background-color:var(--background);color:var(--foreground)}.z-editor-wrapper .ql-container.ql-snow .ql-tooltip input[type=text]:focus{border-color:var(--ring);box-shadow:0 0 0 2px color-mix(in srgb,var(--ring) 30%,transparent)}.z-editor-wrapper .ql-container.ql-snow .ql-tooltip .ql-action,.z-editor-wrapper .ql-container.ql-snow .ql-tooltip .ql-remove{cursor:pointer;font-size:.75rem;padding:0rem 8px;border-radius:.25rem;transition:all .15s ease;text-decoration:none;border:1px solid var(--border);background-color:var(--background);box-shadow:0 1px 2px #0000000d}.z-editor-wrapper .ql-container.ql-snow .ql-tooltip .ql-action:hover,.z-editor-wrapper .ql-container.ql-snow .ql-tooltip .ql-remove:hover{background-color:var(--accent);color:var(--accent-foreground)}.z-editor-wrapper .ql-container.ql-snow .ql-tooltip .ql-action:after,.z-editor-wrapper .ql-container.ql-snow .ql-tooltip .ql-remove:after{padding:0!important;margin:0!important;border:none!important}.z-editor-wrapper .ql-container.ql-snow .ql-tooltip .ql-action{color:var(--primary)}.z-editor-wrapper .ql-container.ql-snow .ql-tooltip .ql-remove{color:var(--destructive)}.z-editor-wrapper .ql-container.ql-snow .ql-tooltip .ql-remove:hover{background-color:color-mix(in srgb,var(--destructive) 10%,transparent);color:var(--destructive)}:root.dark .z-editor-wrapper .ql-container.ql-snow .ql-tooltip .ql-action,:root.dark .z-editor-wrapper .ql-container.ql-snow .ql-tooltip .ql-remove{background-color:color-mix(in srgb,var(--input) 30%,transparent);border-color:var(--input)}:root.dark .z-editor-wrapper .ql-container.ql-snow .ql-tooltip .ql-action:hover,:root.dark .z-editor-wrapper .ql-container.ql-snow .ql-tooltip .ql-remove:hover{background-color:color-mix(in srgb,var(--input) 50%,transparent)}.z-editor-wrapper.z-editor-disabled .ql-toolbar,.z-editor-wrapper.z-editor-disabled .ql-container{pointer-events:none}.z-editor-wrapper.z-editor-readonly .ql-toolbar{display:none}.z-editor-wrapper.z-editor-readonly .ql-container{border-radius:.375rem}.z-editor-wrapper.z-editor-readonly .ql-editor{cursor:default}\n/*! Bundled license information:\n\nquill/dist/quill.snow.css:\n  (*!\n   * Quill Editor v2.0.3\n   * https://quilljs.com\n   * Copyright (c) 2017-2024, Slab\n   * Copyright (c) 2014, Jason Chen\n   * Copyright (c) 2013, salesforce.com\n   *)\n*/\n"], dependencies: [{ kind: "ngmodule", type: QuillModule }, { kind: "component", type: i1.QuillEditorComponent, selector: "quill-editor" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".z-editor-wrapper .z-editor-toolbar{display:flex;flex-wrap:wrap;gap:.125rem;align-items:center;border-bottom:.0625rem solid var(--border);border-top-left-radius:.375rem;border-top-right-radius:.375rem;background-color:color-mix(in srgb,var(--muted) 30%,transparent);padding:.5rem}.z-editor-wrapper .z-editor-toolbar-button{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border-radius:.25rem;padding:0;color:var(--muted-foreground);transition:background-color .15s ease,color .15s ease,opacity .15s ease}.z-editor-wrapper .z-editor-toolbar-button:hover:not(:disabled){background-color:var(--accent);color:var(--foreground)}.z-editor-wrapper .z-editor-toolbar-button:disabled{cursor:not-allowed;opacity:.45}.z-editor-wrapper .z-editor-toolbar-button.z-editor-toolbar-button-active{background-color:color-mix(in srgb,var(--primary) 10%,transparent);color:var(--primary)}.z-editor-wrapper .z-editor-content{border-bottom-right-radius:.375rem;border-bottom-left-radius:.375rem}.z-editor-wrapper .z-editor-prosemirror{width:100%;outline:none;padding:.75rem;color:var(--foreground)}.z-editor-wrapper .z-editor-prosemirror>*{margin-top:1.25rem;margin-bottom:1.25rem}.z-editor-wrapper .z-editor-prosemirror>:first-child{margin-top:0}.z-editor-wrapper .z-editor-prosemirror>:last-child{margin-bottom:0}.z-editor-wrapper .z-editor-prosemirror p{line-height:1.75}.z-editor-wrapper .z-editor-prosemirror a{border-bottom:.0625rem solid transparent;color:var(--primary);font-weight:500;transition:border-color .15s ease}.z-editor-wrapper .z-editor-prosemirror a:hover{border-color:var(--primary)}.z-editor-wrapper .z-editor-prosemirror .mention{color:var(--primary);font-weight:500}.z-editor-wrapper .z-editor-prosemirror :is(h1,h2,h3,h4,h5,h6){color:var(--foreground);font-weight:700;line-height:1.2}.z-editor-wrapper .z-editor-prosemirror h1{font-size:1.875rem}.z-editor-wrapper .z-editor-prosemirror h2{font-size:1.5rem}.z-editor-wrapper .z-editor-prosemirror h3{font-size:1.25rem}.z-editor-wrapper .z-editor-prosemirror h4{font-size:1.125rem}.z-editor-wrapper .z-editor-prosemirror h5,.z-editor-wrapper .z-editor-prosemirror h6{font-size:1rem}.z-editor-wrapper .z-editor-prosemirror blockquote{border-left:.25rem solid var(--border);padding-left:1rem;font-style:italic;color:var(--muted-foreground)}.z-editor-wrapper .z-editor-prosemirror [data-type=horizontalRule]{margin-top:2rem;margin-bottom:2rem;padding-top:.5rem;padding-bottom:.5rem}.z-editor-wrapper .z-editor-prosemirror hr{border:0;border-top:.0625rem solid var(--border)}.z-editor-wrapper .z-editor-prosemirror pre{overflow-x:auto;border:.0625rem solid var(--border);border-radius:.375rem;background-color:var(--muted);padding:.75rem 1rem;font-size:.875rem;line-height:1.5;white-space:pre-wrap;word-break:break-word}.z-editor-wrapper .z-editor-prosemirror pre code{display:inline;border:0;border-radius:0;background-color:transparent;padding:0;color:inherit;font:inherit}.z-editor-wrapper .z-editor-prosemirror code{display:inline-block;border:.0625rem solid var(--border);border-radius:.375rem;background-color:var(--muted);padding:.125rem .375rem;color:var(--foreground);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:.875em;font-weight:500}.z-editor-wrapper .z-editor-prosemirror :is(ul,ol){padding-left:1.5rem}.z-editor-wrapper .z-editor-prosemirror ul{list-style:disc}.z-editor-wrapper .z-editor-prosemirror ol{list-style:decimal}.z-editor-wrapper .z-editor-prosemirror li{margin-top:.375rem;margin-bottom:.375rem;padding-left:.375rem}.z-editor-wrapper .z-editor-prosemirror img{display:block;max-width:100%;border-radius:.375rem}.z-editor-wrapper .z-editor-prosemirror img.ProseMirror-selectednode{outline:.125rem solid var(--primary)}.z-editor-wrapper .z-editor-prosemirror .ProseMirror-selectednode:not(img):not(pre):not([data-node-view-wrapper]){background-color:color-mix(in srgb,var(--primary) 20%,transparent)}.z-editor-wrapper .z-editor-prosemirror :is(p,h1,h2,h3,h4,h5,h6).is-empty:before{float:left;height:0;color:var(--muted-foreground);content:attr(data-placeholder);pointer-events:none}.z-editor-placeholder-first-line .z-editor-wrapper .z-editor-prosemirror :is(p,h1,h2,h3,h4,h5,h6).is-empty:before{content:none}.z-editor-placeholder-first-line .z-editor-wrapper .z-editor-prosemirror :is(p,h1,h2,h3,h4,h5,h6).is-editor-empty:first-child:before{content:attr(data-placeholder)}.z-editor-wrapper.z-editor-disabled .z-editor-toolbar,.z-editor-wrapper.z-editor-disabled .z-editor-content{pointer-events:none}.z-editor-wrapper.z-editor-readonly .z-editor-toolbar{display:none}.z-editor-wrapper.z-editor-readonly .z-editor-content{border-radius:.375rem}.z-editor-wrapper.z-editor-readonly .z-editor-prosemirror{cursor:default}.z-editor-link-modal{padding-top:0;padding-bottom:0}.z-editor-link-modal .z-modal-scrollbar main{min-height:0;padding:1rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: ZButtonComponent, selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "component", type: ZInputComponent, selector: "z-input", inputs: ["class", "zType", "zSize", "zAlign", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zPrefix", "zSuffix", "zMin", "zMax", "zStep", "zShowArrows", "zMask", "zDecimalPlaces", "zAllowNegative", "zThousandSeparator", "zDecimalMarker", "zValidators", "zAsyncValidators", "zAsyncDebounce", "zAsyncValidateOn", "zShowPasswordToggle", "zSearch", "zDebounce", "zAutofocus", "zAutoComplete", "zAllowClear", "zAutoSizeContent", "zRows", "zResize", "zMaxLength", "zAutoSuggest", "zColorConfig"], outputs: ["zOnSearch", "zOnChange", "zOnBlur", "zOnFocus", "zOnKeydown", "zOnEnter", "zOnColorCollapse", "zControl", "zEvent"], exportAs: ["zInput"] }, { kind: "component", type: ZModalComponent, selector: "z-modal", inputs: ["class", "zVisible", "zTitle", "zDescription", "zWidth", "zClosable", "zMaskClosable", "zHideHeader", "zHideFooter", "zOkText", "zCancelText", "zOkDestructive", "zOkDisabled", "zLoading", "zContentLoading", "zSkeletonRows", "zOverlay"], outputs: ["zOk", "zCancel", "zAfterClose", "zScrollbar", "zVisibleChange"], exportAs: ["zModal"] }, { kind: "directive", type: ZModalContentDirective, selector: "[z-modal-content], [zModalContent]" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'z-editor', imports: [QuillModule, ReactiveFormsModule, FormsModule], standalone: true, template: `
+            args: [{ selector: 'z-editor', imports: [
+                        FormsModule,
+                        ReactiveFormsModule,
+                        ZButtonComponent,
+                        ZIconComponent,
+                        ZInputComponent,
+                        ZModalComponent,
+                        ZModalContentDirective,
+                        TranslatePipe,
+                    ], standalone: true, template: `
     <div [class]="wrapperClasses()" [class.z-editor-disabled]="isDisabled()" [class.z-editor-readonly]="zReadonly()">
       @if (zLabel()) {
         <label [for]="editorId" class="text-xs leading-none font-medium" [class]="zLabelClass()">
@@ -395,26 +831,85 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
         </label>
       }
 
-      <quill-editor
-        [id]="editorId"
-        [class]="editorClasses()"
-        [modules]="effectiveModules()"
-        [placeholder]="effectivePlaceholder()"
-        [readOnly]="isDisabled() || zReadonly()"
-        [formats]="zFormats()"
-        [bounds]="zBounds()"
-        [theme]="zTheme()"
-        [ngModel]="_value()"
-        (onContentChanged)="onContentChange($event)"
-        (onFocus)="onFocus()"
-        (onBlur)="onBlur()"
-      />
+      <div [class]="editorClasses()">
+        @if (showToolbar()) {
+          <div class="z-editor-toolbar" role="toolbar" [attr.aria-controls]="editorId">
+            @for (item of toolbarItems(); track item.id) {
+              <button
+                type="button"
+                class="z-editor-toolbar-button"
+                [class.z-editor-toolbar-button-active]="item.active"
+                [disabled]="item.disabled"
+                [attr.aria-label]="item.label"
+                [attr.title]="item.label"
+                (click)="onToolbarClick(item.id)"
+              >
+                <i z-icon [zType]="item.icon" zSize="16"></i>
+              </button>
+            }
+          </div>
+        }
+
+        <div
+          #editorHost
+          [id]="editorId"
+          class="z-editor-content"
+          role="textbox"
+          [attr.aria-multiline]="true"
+          [attr.aria-readonly]="isDisabled() || zReadonly()"
+        ></div>
+      </div>
 
       @if (hasError()) {
         <p class="text-destructive animate-in fade-in slide-in-from-top-1 m-0 text-xs duration-200">
           {{ errorMessage() }}
         </p>
       }
+
+      <z-modal
+        [(zVisible)]="linkModalVisible"
+        class="z-editor-link-modal"
+        zWidth="360px"
+        [zClosable]="false"
+        [zHideHeader]="true"
+        [zHideFooter]="true"
+      >
+        <ng-template z-modal-content>
+          <div class="space-y-4">
+            <z-input
+              zType="url"
+              zLabel="URL"
+              zPlaceholder="https://example.com"
+              [zRequired]="true"
+              [zValidators]="linkValidators"
+              [ngModel]="linkUrl()"
+              (ngModelChange)="onLinkUrlChange($event)"
+              (zOnEnter)="applyLink()"
+            />
+
+            <div class="mt-4 flex items-center justify-between gap-2">
+              <button
+                type="button"
+                z-button
+                zType="ghost"
+                zSize="sm"
+                [zDisabled]="!activeLinkHref()"
+                (click)="removeLink()"
+              >
+                {{ 'i18n_z_ui_common_remove' | translate }}
+              </button>
+              <div class="flex items-center gap-2">
+                <button type="button" z-button zType="outline" zSize="sm" (click)="closeLinkModal()">
+                  {{ 'i18n_z_ui_common_cancel' | translate }}
+                </button>
+                <button type="button" z-button zSize="sm" [zDisabled]="!canApplyLink()" (click)="applyLink()">
+                  {{ 'i18n_z_ui_common_apply' | translate }}
+                </button>
+              </div>
+            </div>
+          </div>
+        </ng-template>
+      </z-modal>
     </div>
   `, providers: [
                         {
@@ -422,12 +917,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                             useExisting: forwardRef(() => ZEditorComponent),
                             multi: true,
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'zEditor', styles: [".ql-container{box-sizing:border-box;font-family:Helvetica,Arial,sans-serif;font-size:13px;height:100%;margin:0;position:relative}.ql-container.ql-disabled .ql-tooltip{visibility:hidden}.ql-container:not(.ql-disabled) li[data-list=checked]>.ql-ui,.ql-container:not(.ql-disabled) li[data-list=unchecked]>.ql-ui{cursor:pointer}.ql-clipboard{left:-100000px;height:1px;overflow-y:hidden;position:absolute;top:50%}.ql-clipboard p{margin:0;padding:0}.ql-editor{box-sizing:border-box;counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;line-height:1.42;height:100%;outline:none;overflow-y:auto;padding:12px 15px;tab-size:4;-moz-tab-size:4;text-align:left;white-space:pre-wrap;word-wrap:break-word}.ql-editor>*{cursor:text}.ql-editor p,.ql-editor ol,.ql-editor pre,.ql-editor blockquote,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{margin:0;padding:0}@supports (counter-set:none){.ql-editor p,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{counter-set:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor p,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor table{border-collapse:collapse}.ql-editor td{border:1px solid #000;padding:2px 5px}.ql-editor ol{padding-left:1.5em}.ql-editor li{list-style-type:none;padding-left:1.5em;position:relative}.ql-editor li>.ql-ui:before{display:inline-block;margin-left:-1.5em;margin-right:.3em;text-align:right;white-space:nowrap;width:1.2em}.ql-editor li[data-list=checked]>.ql-ui,.ql-editor li[data-list=unchecked]>.ql-ui{color:#777}.ql-editor li[data-list=bullet]>.ql-ui:before{content:\"\\2022\"}.ql-editor li[data-list=checked]>.ql-ui:before{content:\"\\2611\"}.ql-editor li[data-list=unchecked]>.ql-ui:before{content:\"\\2610\"}@supports (counter-set:none){.ql-editor li[data-list]{counter-set:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list]{counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered]{counter-increment:list-0}.ql-editor li[data-list=ordered]>.ql-ui:before{content:counter(list-0,decimal) \". \"}.ql-editor li[data-list=ordered].ql-indent-1{counter-increment:list-1}.ql-editor li[data-list=ordered].ql-indent-1>.ql-ui:before{content:counter(list-1,lower-alpha) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-1{counter-set:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-1{counter-reset:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-2{counter-increment:list-2}.ql-editor li[data-list=ordered].ql-indent-2>.ql-ui:before{content:counter(list-2,lower-roman) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-2{counter-set:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-2{counter-reset:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-3{counter-increment:list-3}.ql-editor li[data-list=ordered].ql-indent-3>.ql-ui:before{content:counter(list-3,decimal) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-3{counter-set:list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-3{counter-reset:list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-4{counter-increment:list-4}.ql-editor li[data-list=ordered].ql-indent-4>.ql-ui:before{content:counter(list-4,lower-alpha) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-4{counter-set:list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-4{counter-reset:list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-5{counter-increment:list-5}.ql-editor li[data-list=ordered].ql-indent-5>.ql-ui:before{content:counter(list-5,lower-roman) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-5{counter-set:list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-5{counter-reset:list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-6{counter-increment:list-6}.ql-editor li[data-list=ordered].ql-indent-6>.ql-ui:before{content:counter(list-6,decimal) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-6{counter-set:list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-6{counter-reset:list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-7{counter-increment:list-7}.ql-editor li[data-list=ordered].ql-indent-7>.ql-ui:before{content:counter(list-7,lower-alpha) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-7{counter-set:list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-7{counter-reset:list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-8{counter-increment:list-8}.ql-editor li[data-list=ordered].ql-indent-8>.ql-ui:before{content:counter(list-8,lower-roman) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-8{counter-set:list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-8{counter-reset:list-9}}.ql-editor li[data-list=ordered].ql-indent-9{counter-increment:list-9}.ql-editor li[data-list=ordered].ql-indent-9>.ql-ui:before{content:counter(list-9,decimal) \". \"}.ql-editor .ql-indent-1:not(.ql-direction-rtl){padding-left:3em}.ql-editor li.ql-indent-1:not(.ql-direction-rtl){padding-left:4.5em}.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:3em}.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:4.5em}.ql-editor .ql-indent-2:not(.ql-direction-rtl){padding-left:6em}.ql-editor li.ql-indent-2:not(.ql-direction-rtl){padding-left:7.5em}.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:6em}.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:7.5em}.ql-editor .ql-indent-3:not(.ql-direction-rtl){padding-left:9em}.ql-editor li.ql-indent-3:not(.ql-direction-rtl){padding-left:10.5em}.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:9em}.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:10.5em}.ql-editor .ql-indent-4:not(.ql-direction-rtl){padding-left:12em}.ql-editor li.ql-indent-4:not(.ql-direction-rtl){padding-left:13.5em}.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:12em}.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:13.5em}.ql-editor .ql-indent-5:not(.ql-direction-rtl){padding-left:15em}.ql-editor li.ql-indent-5:not(.ql-direction-rtl){padding-left:16.5em}.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:15em}.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:16.5em}.ql-editor .ql-indent-6:not(.ql-direction-rtl){padding-left:18em}.ql-editor li.ql-indent-6:not(.ql-direction-rtl){padding-left:19.5em}.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:18em}.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:19.5em}.ql-editor .ql-indent-7:not(.ql-direction-rtl){padding-left:21em}.ql-editor li.ql-indent-7:not(.ql-direction-rtl){padding-left:22.5em}.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:21em}.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:22.5em}.ql-editor .ql-indent-8:not(.ql-direction-rtl){padding-left:24em}.ql-editor li.ql-indent-8:not(.ql-direction-rtl){padding-left:25.5em}.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:24em}.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:25.5em}.ql-editor .ql-indent-9:not(.ql-direction-rtl){padding-left:27em}.ql-editor li.ql-indent-9:not(.ql-direction-rtl){padding-left:28.5em}.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:27em}.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:28.5em}.ql-editor li.ql-direction-rtl{padding-right:1.5em}.ql-editor li.ql-direction-rtl>.ql-ui:before{margin-left:.3em;margin-right:-1.5em;text-align:left}.ql-editor table{table-layout:fixed;width:100%}.ql-editor table td{outline:none}.ql-editor .ql-code-block-container{font-family:monospace}.ql-editor .ql-video{display:block;max-width:100%}.ql-editor .ql-video.ql-align-center{margin:0 auto}.ql-editor .ql-video.ql-align-right{margin:0 0 0 auto}.ql-editor .ql-bg-black{background-color:#000}.ql-editor .ql-bg-red{background-color:#e60000}.ql-editor .ql-bg-orange{background-color:#f90}.ql-editor .ql-bg-yellow{background-color:#ff0}.ql-editor .ql-bg-green{background-color:#008a00}.ql-editor .ql-bg-blue{background-color:#06c}.ql-editor .ql-bg-purple{background-color:#93f}.ql-editor .ql-color-white{color:#fff}.ql-editor .ql-color-red{color:#e60000}.ql-editor .ql-color-orange{color:#f90}.ql-editor .ql-color-yellow{color:#ff0}.ql-editor .ql-color-green{color:#008a00}.ql-editor .ql-color-blue{color:#06c}.ql-editor .ql-color-purple{color:#93f}.ql-editor .ql-font-serif{font-family:Georgia,Times New Roman,serif}.ql-editor .ql-font-monospace{font-family:Monaco,Courier New,monospace}.ql-editor .ql-size-small{font-size:.75em}.ql-editor .ql-size-large{font-size:1.5em}.ql-editor .ql-size-huge{font-size:2.5em}.ql-editor .ql-direction-rtl{direction:rtl;text-align:inherit}.ql-editor .ql-align-center{text-align:center}.ql-editor .ql-align-justify{text-align:justify}.ql-editor .ql-align-right{text-align:right}.ql-editor .ql-ui{position:absolute}.ql-editor.ql-blank:before{color:#0009;content:attr(data-placeholder);font-style:italic;left:15px;pointer-events:none;position:absolute;right:15px}.ql-snow.ql-toolbar:after,.ql-snow .ql-toolbar:after{clear:both;content:\"\";display:table}.ql-snow.ql-toolbar button,.ql-snow .ql-toolbar button{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px;width:28px}.ql-snow.ql-toolbar button svg,.ql-snow .ql-toolbar button svg{float:left;height:100%}.ql-snow.ql-toolbar button:active:hover,.ql-snow .ql-toolbar button:active:hover{outline:none}.ql-snow.ql-toolbar input.ql-image[type=file],.ql-snow .ql-toolbar input.ql-image[type=file]{display:none}.ql-snow.ql-toolbar button:hover,.ql-snow .ql-toolbar button:hover,.ql-snow.ql-toolbar button:focus,.ql-snow .ql-toolbar button:focus,.ql-snow.ql-toolbar button.ql-active,.ql-snow .ql-toolbar button.ql-active,.ql-snow.ql-toolbar .ql-picker-label:hover,.ql-snow .ql-toolbar .ql-picker-label:hover,.ql-snow.ql-toolbar .ql-picker-label.ql-active,.ql-snow .ql-toolbar .ql-picker-label.ql-active,.ql-snow.ql-toolbar .ql-picker-item:hover,.ql-snow .ql-toolbar .ql-picker-item:hover,.ql-snow.ql-toolbar .ql-picker-item.ql-selected,.ql-snow .ql-toolbar .ql-picker-item.ql-selected{color:#06c}.ql-snow.ql-toolbar button:hover .ql-fill,.ql-snow .ql-toolbar button:hover .ql-fill,.ql-snow.ql-toolbar button:focus .ql-fill,.ql-snow .ql-toolbar button:focus .ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-fill,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill{fill:#06c}.ql-snow.ql-toolbar button:hover .ql-stroke,.ql-snow .ql-toolbar button:hover .ql-stroke,.ql-snow.ql-toolbar button:focus .ql-stroke,.ql-snow .ql-toolbar button:focus .ql-stroke,.ql-snow.ql-toolbar button.ql-active .ql-stroke,.ql-snow .ql-toolbar button.ql-active .ql-stroke,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow.ql-toolbar button:hover .ql-stroke-miter,.ql-snow .ql-toolbar button:hover .ql-stroke-miter,.ql-snow.ql-toolbar button:focus .ql-stroke-miter,.ql-snow .ql-toolbar button:focus .ql-stroke-miter,.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter{stroke:#06c}@media(pointer:coarse){.ql-snow.ql-toolbar button:hover:not(.ql-active),.ql-snow .ql-toolbar button:hover:not(.ql-active){color:#444}.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill{fill:#444}.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter{stroke:#444}}.ql-snow,.ql-snow *{box-sizing:border-box}.ql-snow .ql-hidden{display:none}.ql-snow .ql-out-bottom,.ql-snow .ql-out-top{visibility:hidden}.ql-snow .ql-tooltip{position:absolute;transform:translateY(10px)}.ql-snow .ql-tooltip a{cursor:pointer;text-decoration:none}.ql-snow .ql-tooltip.ql-flip{transform:translateY(-10px)}.ql-snow .ql-formats{display:inline-block;vertical-align:middle}.ql-snow .ql-formats:after{clear:both;content:\"\";display:table}.ql-snow .ql-stroke{fill:none;stroke:#444;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.ql-snow .ql-stroke-miter{fill:none;stroke:#444;stroke-miterlimit:10;stroke-width:2}.ql-snow .ql-fill,.ql-snow .ql-stroke.ql-fill{fill:#444}.ql-snow .ql-empty{fill:none}.ql-snow .ql-even{fill-rule:evenodd}.ql-snow .ql-thin,.ql-snow .ql-stroke.ql-thin{stroke-width:1}.ql-snow .ql-transparent{opacity:.4}.ql-snow .ql-direction svg:last-child{display:none}.ql-snow .ql-direction.ql-active svg:last-child{display:inline}.ql-snow .ql-direction.ql-active svg:first-child{display:none}.ql-snow .ql-editor h1{font-size:2em}.ql-snow .ql-editor h2{font-size:1.5em}.ql-snow .ql-editor h3{font-size:1.17em}.ql-snow .ql-editor h4{font-size:1em}.ql-snow .ql-editor h5{font-size:.83em}.ql-snow .ql-editor h6{font-size:.67em}.ql-snow .ql-editor a{text-decoration:underline}.ql-snow .ql-editor blockquote{border-left:4px solid #ccc;margin-bottom:5px;margin-top:5px;padding-left:16px}.ql-snow .ql-editor code,.ql-snow .ql-editor .ql-code-block-container{background-color:#f0f0f0;border-radius:3px}.ql-snow .ql-editor .ql-code-block-container{margin-bottom:5px;margin-top:5px;padding:5px 10px}.ql-snow .ql-editor code{font-size:85%;padding:2px 4px}.ql-snow .ql-editor .ql-code-block-container{background-color:#23241f;color:#f8f8f2;overflow:visible}.ql-snow .ql-editor img{max-width:100%}.ql-snow .ql-picker{color:#444;display:inline-block;float:left;font-size:14px;font-weight:500;height:24px;position:relative;vertical-align:middle}.ql-snow .ql-picker-label{cursor:pointer;display:inline-block;height:100%;padding-left:8px;padding-right:2px;position:relative;width:100%}.ql-snow .ql-picker-label:before{display:inline-block;line-height:22px}.ql-snow .ql-picker-options{background-color:#fff;display:none;min-width:100%;padding:4px 8px;position:absolute;white-space:nowrap}.ql-snow .ql-picker-options .ql-picker-item{cursor:pointer;display:block;padding-bottom:5px;padding-top:5px}.ql-snow .ql-picker.ql-expanded .ql-picker-label{color:#ccc;z-index:2}.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill{fill:#ccc}.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke{stroke:#ccc}.ql-snow .ql-picker.ql-expanded .ql-picker-options{display:block;margin-top:-1px;top:100%;z-index:1}.ql-snow .ql-color-picker,.ql-snow .ql-icon-picker{width:28px}.ql-snow .ql-color-picker .ql-picker-label,.ql-snow .ql-icon-picker .ql-picker-label{padding:2px 4px}.ql-snow .ql-color-picker .ql-picker-label svg,.ql-snow .ql-icon-picker .ql-picker-label svg{right:4px}.ql-snow .ql-icon-picker .ql-picker-options{padding:4px 0}.ql-snow .ql-icon-picker .ql-picker-item{height:24px;width:24px;padding:2px 4px}.ql-snow .ql-color-picker .ql-picker-options{padding:3px 5px;width:152px}.ql-snow .ql-color-picker .ql-picker-item{border:1px solid transparent;float:left;height:16px;margin:2px;padding:0;width:16px}.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg{position:absolute;margin-top:-9px;right:0;top:50%;width:18px}.ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=\"\"]):before{content:attr(data-label)}.ql-snow .ql-picker.ql-header{width:98px}.ql-snow .ql-picker.ql-header .ql-picker-label:before,.ql-snow .ql-picker.ql-header .ql-picker-item:before{content:\"Normal\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"1\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"1\"]:before{content:\"Heading 1\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"2\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"2\"]:before{content:\"Heading 2\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"3\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"3\"]:before{content:\"Heading 3\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"4\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"4\"]:before{content:\"Heading 4\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"5\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"5\"]:before{content:\"Heading 5\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"6\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"6\"]:before{content:\"Heading 6\"}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"1\"]:before{font-size:2em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"2\"]:before{font-size:1.5em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"3\"]:before{font-size:1.17em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"4\"]:before{font-size:1em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"5\"]:before{font-size:.83em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"6\"]:before{font-size:.67em}.ql-snow .ql-picker.ql-font{width:108px}.ql-snow .ql-picker.ql-font .ql-picker-label:before,.ql-snow .ql-picker.ql-font .ql-picker-item:before{content:\"Sans Serif\"}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]:before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]:before{content:\"Serif\"}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]:before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before{content:\"Monospace\"}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]:before{font-family:Georgia,Times New Roman,serif}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before{font-family:Monaco,Courier New,monospace}.ql-snow .ql-picker.ql-size{width:98px}.ql-snow .ql-picker.ql-size .ql-picker-label:before,.ql-snow .ql-picker.ql-size .ql-picker-item:before{content:\"Normal\"}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]:before{content:\"Small\"}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]:before{content:\"Large\"}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]:before{content:\"Huge\"}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]:before{font-size:10px}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]:before{font-size:18px}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]:before{font-size:32px}.ql-snow .ql-color-picker.ql-background .ql-picker-item{background-color:#fff}.ql-snow .ql-color-picker.ql-color .ql-picker-item{background-color:#000}.ql-code-block-container{position:relative}.ql-code-block-container .ql-ui{right:5px;top:5px}.ql-toolbar.ql-snow{border:1px solid #ccc;box-sizing:border-box;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;padding:8px}.ql-toolbar.ql-snow .ql-formats{margin-right:15px}.ql-toolbar.ql-snow .ql-picker-label{border:1px solid transparent}.ql-toolbar.ql-snow .ql-picker-options{border:1px solid transparent;box-shadow:#0003 0 2px 8px}.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label,.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options{border-color:#ccc}.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover{border-color:#000}.ql-toolbar.ql-snow+.ql-container.ql-snow{border-top:0}.ql-snow .ql-tooltip{background-color:#fff;border:1px solid #ccc;box-shadow:0 0 5px #ddd;color:#444;padding:5px 12px;white-space:nowrap}.ql-snow .ql-tooltip:before{content:\"Visit URL:\";line-height:26px;margin-right:8px}.ql-snow .ql-tooltip input[type=text]{display:none;border:1px solid #ccc;font-size:13px;height:26px;margin:0;padding:3px 5px;width:170px}.ql-snow .ql-tooltip a.ql-preview{display:inline-block;max-width:200px;overflow-x:hidden;text-overflow:ellipsis;vertical-align:top}.ql-snow .ql-tooltip a.ql-action:after{border-right:1px solid #ccc;content:\"Edit\";margin-left:16px;padding-right:8px}.ql-snow .ql-tooltip a.ql-remove:before{content:\"Remove\";margin-left:8px}.ql-snow .ql-tooltip a{line-height:26px}.ql-snow .ql-tooltip.ql-editing a.ql-preview,.ql-snow .ql-tooltip.ql-editing a.ql-remove{display:none}.ql-snow .ql-tooltip.ql-editing input[type=text]{display:inline-block}.ql-snow .ql-tooltip.ql-editing a.ql-action:after{border-right:0;content:\"Save\";padding-right:0}.ql-snow .ql-tooltip[data-mode=link]:before{content:\"Enter link:\"}.ql-snow .ql-tooltip[data-mode=formula]:before{content:\"Enter formula:\"}.ql-snow .ql-tooltip[data-mode=video]:before{content:\"Enter video:\"}.ql-snow a{color:#06c}.ql-container.ql-snow{border:1px solid #ccc}.z-editor-wrapper .ql-toolbar.ql-snow{border:none;border-bottom:.0625rem solid var(--border)}.z-editor-wrapper .ql-container.ql-snow{border:none}.z-editor-wrapper .ql-toolbar.ql-snow{border:none!important;border-bottom:.0625rem solid var(--border)!important;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 .ql-toolbar.ql-snow .ql-formats{margin-right:.25rem;display:inline-flex;gap:.125rem;align-items:center}.z-editor-wrapper .ql-toolbar.ql-snow button{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border-radius:.25rem;padding:0;color:var(--muted-foreground);transition:all .15s ease}.z-editor-wrapper .ql-toolbar.ql-snow button:hover{background-color:var(--accent);color:var(--foreground)}.z-editor-wrapper .ql-toolbar.ql-snow button.ql-active{background-color:color-mix(in srgb,var(--primary) 10%,transparent);color:var(--primary)}.z-editor-wrapper .ql-toolbar.ql-snow button svg{width:1rem;height:1rem}.z-editor-wrapper .ql-toolbar.ql-snow .ql-picker{color:var(--muted-foreground);height:1.75rem}.z-editor-wrapper .ql-toolbar.ql-snow .ql-picker .ql-picker-label{display:inline-flex;align-items:center;justify-content:center;border-radius:.25rem;padding:0 8px;height:100%;transition:all .15s ease}.z-editor-wrapper .ql-toolbar.ql-snow .ql-picker .ql-picker-label:hover{background-color:var(--accent);color:var(--foreground)}.z-editor-wrapper .ql-toolbar.ql-snow .ql-picker .ql-picker-options{border-radius:.375rem;border:1px solid var(--border);background-color:var(--popover);box-shadow:0 4px 6px -1px #0000001a}.z-editor-wrapper .ql-toolbar.ql-snow .ql-picker .ql-picker-options .ql-picker-item{border-radius:.25rem;padding:.25rem 8px;transition:all .15s ease}.z-editor-wrapper .ql-toolbar.ql-snow .ql-picker .ql-picker-options .ql-picker-item:hover{background-color:var(--accent)}.z-editor-wrapper .ql-container.ql-snow{border:none!important;border-bottom-left-radius:.375rem;border-bottom-right-radius:.375rem;font-family:inherit}.z-editor-wrapper .ql-container.ql-snow .ql-editor{padding:.5rem 12px}.z-editor-wrapper .ql-container.ql-snow .ql-editor.ql-blank:before{font-style:normal;color:var(--muted-foreground)}.z-editor-wrapper .ql-container.ql-snow .ql-editor .ql-align-center{text-align:center}.z-editor-wrapper .ql-container.ql-snow .ql-editor .ql-align-center img{display:inline-block}.z-editor-wrapper .ql-container.ql-snow .ql-editor .ql-align-right{text-align:right}.z-editor-wrapper .ql-container.ql-snow .ql-editor .ql-align-right img{display:inline-block}.z-editor-wrapper .ql-container.ql-snow .ql-editor .ql-align-left,.z-editor-wrapper .ql-container.ql-snow .ql-editor .ql-align-justify{text-align:left}.z-editor-wrapper .ql-container.ql-snow .ql-editor .ql-align-left img,.z-editor-wrapper .ql-container.ql-snow .ql-editor .ql-align-justify img{display:inline-block}.z-editor-wrapper .ql-container.ql-snow .ql-editor img[style*=\"float: left\"]{margin-right:1rem;margin-bottom:.5rem}.z-editor-wrapper .ql-container.ql-snow .ql-editor img[style*=\"float: right\"]{margin-left:1rem;margin-bottom:.5rem}.z-editor-wrapper .ql-container.ql-snow .ql-editor img[style*=\"margin: auto\"],.z-editor-wrapper .ql-container.ql-snow .ql-editor img[style*=\"display: block\"]{display:block;margin-left:auto;margin-right:auto}.z-editor-wrapper .ql-container.ql-snow .ql-tooltip{left:.5rem!important;right:auto!important;max-width:calc(100% - 1rem);display:flex;align-items:center;border-radius:.375rem;border:1px solid var(--border);background-color:var(--popover);box-shadow:0 4px 6px -1px #0000001a;padding:.375rem!important;gap:.5rem;color:var(--foreground);z-index:10}.z-editor-wrapper .ql-container.ql-snow .ql-tooltip.ql-hidden{display:none}.z-editor-wrapper .ql-container.ql-snow .ql-tooltip:before,.z-editor-wrapper .ql-container.ql-snow .ql-tooltip:after{display:none}.z-editor-wrapper .ql-container.ql-snow .ql-tooltip .ql-preview{display:none}.z-editor-wrapper .ql-container.ql-snow .ql-tooltip input[type=text]{border:1px solid var(--border);border-radius:.25rem;padding:.25rem 8px;font-size:.875rem;outline:none;background-color:var(--background);color:var(--foreground)}.z-editor-wrapper .ql-container.ql-snow .ql-tooltip input[type=text]:focus{border-color:var(--ring);box-shadow:0 0 0 2px color-mix(in srgb,var(--ring) 30%,transparent)}.z-editor-wrapper .ql-container.ql-snow .ql-tooltip .ql-action,.z-editor-wrapper .ql-container.ql-snow .ql-tooltip .ql-remove{cursor:pointer;font-size:.75rem;padding:0rem 8px;border-radius:.25rem;transition:all .15s ease;text-decoration:none;border:1px solid var(--border);background-color:var(--background);box-shadow:0 1px 2px #0000000d}.z-editor-wrapper .ql-container.ql-snow .ql-tooltip .ql-action:hover,.z-editor-wrapper .ql-container.ql-snow .ql-tooltip .ql-remove:hover{background-color:var(--accent);color:var(--accent-foreground)}.z-editor-wrapper .ql-container.ql-snow .ql-tooltip .ql-action:after,.z-editor-wrapper .ql-container.ql-snow .ql-tooltip .ql-remove:after{padding:0!important;margin:0!important;border:none!important}.z-editor-wrapper .ql-container.ql-snow .ql-tooltip .ql-action{color:var(--primary)}.z-editor-wrapper .ql-container.ql-snow .ql-tooltip .ql-remove{color:var(--destructive)}.z-editor-wrapper .ql-container.ql-snow .ql-tooltip .ql-remove:hover{background-color:color-mix(in srgb,var(--destructive) 10%,transparent);color:var(--destructive)}:root.dark .z-editor-wrapper .ql-container.ql-snow .ql-tooltip .ql-action,:root.dark .z-editor-wrapper .ql-container.ql-snow .ql-tooltip .ql-remove{background-color:color-mix(in srgb,var(--input) 30%,transparent);border-color:var(--input)}:root.dark .z-editor-wrapper .ql-container.ql-snow .ql-tooltip .ql-action:hover,:root.dark .z-editor-wrapper .ql-container.ql-snow .ql-tooltip .ql-remove:hover{background-color:color-mix(in srgb,var(--input) 50%,transparent)}.z-editor-wrapper.z-editor-disabled .ql-toolbar,.z-editor-wrapper.z-editor-disabled .ql-container{pointer-events:none}.z-editor-wrapper.z-editor-readonly .ql-toolbar{display:none}.z-editor-wrapper.z-editor-readonly .ql-container{border-radius:.375rem}.z-editor-wrapper.z-editor-readonly .ql-editor{cursor:default}\n/*! Bundled license information:\n\nquill/dist/quill.snow.css:\n  (*!\n   * Quill Editor v2.0.3\n   * https://quilljs.com\n   * Copyright (c) 2017-2024, Slab\n   * Copyright (c) 2014, Jason Chen\n   * Copyright (c) 2013, salesforce.com\n   *)\n*/\n"] }]
-        }], propDecorators: { 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 }] }], zModules: [{ type: i0.Input, args: [{ isSignal: true, alias: "zModules", required: false }] }], zFormats: [{ type: i0.Input, args: [{ isSignal: true, alias: "zFormats", required: false }] }], zBounds: [{ type: i0.Input, args: [{ isSignal: true, alias: "zBounds", required: false }] }], zTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTheme", required: false }] }], zValidators: [{ type: i0.Input, args: [{ isSignal: true, alias: "zValidators", required: false }] }] } });
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'zEditor', styles: [".z-editor-wrapper .z-editor-toolbar{display:flex;flex-wrap:wrap;gap:.125rem;align-items:center;border-bottom:.0625rem solid var(--border);border-top-left-radius:.375rem;border-top-right-radius:.375rem;background-color:color-mix(in srgb,var(--muted) 30%,transparent);padding:.5rem}.z-editor-wrapper .z-editor-toolbar-button{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border-radius:.25rem;padding:0;color:var(--muted-foreground);transition:background-color .15s ease,color .15s ease,opacity .15s ease}.z-editor-wrapper .z-editor-toolbar-button:hover:not(:disabled){background-color:var(--accent);color:var(--foreground)}.z-editor-wrapper .z-editor-toolbar-button:disabled{cursor:not-allowed;opacity:.45}.z-editor-wrapper .z-editor-toolbar-button.z-editor-toolbar-button-active{background-color:color-mix(in srgb,var(--primary) 10%,transparent);color:var(--primary)}.z-editor-wrapper .z-editor-content{border-bottom-right-radius:.375rem;border-bottom-left-radius:.375rem}.z-editor-wrapper .z-editor-prosemirror{width:100%;outline:none;padding:.75rem;color:var(--foreground)}.z-editor-wrapper .z-editor-prosemirror>*{margin-top:1.25rem;margin-bottom:1.25rem}.z-editor-wrapper .z-editor-prosemirror>:first-child{margin-top:0}.z-editor-wrapper .z-editor-prosemirror>:last-child{margin-bottom:0}.z-editor-wrapper .z-editor-prosemirror p{line-height:1.75}.z-editor-wrapper .z-editor-prosemirror a{border-bottom:.0625rem solid transparent;color:var(--primary);font-weight:500;transition:border-color .15s ease}.z-editor-wrapper .z-editor-prosemirror a:hover{border-color:var(--primary)}.z-editor-wrapper .z-editor-prosemirror .mention{color:var(--primary);font-weight:500}.z-editor-wrapper .z-editor-prosemirror :is(h1,h2,h3,h4,h5,h6){color:var(--foreground);font-weight:700;line-height:1.2}.z-editor-wrapper .z-editor-prosemirror h1{font-size:1.875rem}.z-editor-wrapper .z-editor-prosemirror h2{font-size:1.5rem}.z-editor-wrapper .z-editor-prosemirror h3{font-size:1.25rem}.z-editor-wrapper .z-editor-prosemirror h4{font-size:1.125rem}.z-editor-wrapper .z-editor-prosemirror h5,.z-editor-wrapper .z-editor-prosemirror h6{font-size:1rem}.z-editor-wrapper .z-editor-prosemirror blockquote{border-left:.25rem solid var(--border);padding-left:1rem;font-style:italic;color:var(--muted-foreground)}.z-editor-wrapper .z-editor-prosemirror [data-type=horizontalRule]{margin-top:2rem;margin-bottom:2rem;padding-top:.5rem;padding-bottom:.5rem}.z-editor-wrapper .z-editor-prosemirror hr{border:0;border-top:.0625rem solid var(--border)}.z-editor-wrapper .z-editor-prosemirror pre{overflow-x:auto;border:.0625rem solid var(--border);border-radius:.375rem;background-color:var(--muted);padding:.75rem 1rem;font-size:.875rem;line-height:1.5;white-space:pre-wrap;word-break:break-word}.z-editor-wrapper .z-editor-prosemirror pre code{display:inline;border:0;border-radius:0;background-color:transparent;padding:0;color:inherit;font:inherit}.z-editor-wrapper .z-editor-prosemirror code{display:inline-block;border:.0625rem solid var(--border);border-radius:.375rem;background-color:var(--muted);padding:.125rem .375rem;color:var(--foreground);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:.875em;font-weight:500}.z-editor-wrapper .z-editor-prosemirror :is(ul,ol){padding-left:1.5rem}.z-editor-wrapper .z-editor-prosemirror ul{list-style:disc}.z-editor-wrapper .z-editor-prosemirror ol{list-style:decimal}.z-editor-wrapper .z-editor-prosemirror li{margin-top:.375rem;margin-bottom:.375rem;padding-left:.375rem}.z-editor-wrapper .z-editor-prosemirror img{display:block;max-width:100%;border-radius:.375rem}.z-editor-wrapper .z-editor-prosemirror img.ProseMirror-selectednode{outline:.125rem solid var(--primary)}.z-editor-wrapper .z-editor-prosemirror .ProseMirror-selectednode:not(img):not(pre):not([data-node-view-wrapper]){background-color:color-mix(in srgb,var(--primary) 20%,transparent)}.z-editor-wrapper .z-editor-prosemirror :is(p,h1,h2,h3,h4,h5,h6).is-empty:before{float:left;height:0;color:var(--muted-foreground);content:attr(data-placeholder);pointer-events:none}.z-editor-placeholder-first-line .z-editor-wrapper .z-editor-prosemirror :is(p,h1,h2,h3,h4,h5,h6).is-empty:before{content:none}.z-editor-placeholder-first-line .z-editor-wrapper .z-editor-prosemirror :is(p,h1,h2,h3,h4,h5,h6).is-editor-empty:first-child:before{content:attr(data-placeholder)}.z-editor-wrapper.z-editor-disabled .z-editor-toolbar,.z-editor-wrapper.z-editor-disabled .z-editor-content{pointer-events:none}.z-editor-wrapper.z-editor-readonly .z-editor-toolbar{display:none}.z-editor-wrapper.z-editor-readonly .z-editor-content{border-radius:.375rem}.z-editor-wrapper.z-editor-readonly .z-editor-prosemirror{cursor:default}.z-editor-link-modal{padding-top:0;padding-bottom:0}.z-editor-link-modal .z-modal-scrollbar main{min-height:0;padding:1rem}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { _editorHost: [{ type: i0.ViewChild, args: ['editorHost', { isSignal: true }] }], zOnChange: [{ type: i0.Output, args: ["zOnChange"] }], zOnFocus: [{ type: i0.Output, args: ["zOnFocus"] }], zOnBlur: [{ type: i0.Output, args: ["zOnBlur"] }], zControl: [{ type: i0.Output, args: ["zControl"] }], zEvent: [{ type: i0.Output, args: ["zEvent"] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], zSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSize", required: false }] }], zLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLabel", required: false }] }], zLabelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLabelClass", required: false }] }], zPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPlaceholder", required: false }] }], zRequired: [{ type: i0.Input, args: [{ isSignal: true, alias: "zRequired", required: false }] }], zDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDisabled", required: false }] }], zReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "zReadonly", required: false }] }], zContentType: [{ type: i0.Input, args: [{ isSignal: true, alias: "zContentType", required: false }] }], zToolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "zToolbar", required: false }] }], zTipTap: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTipTap", required: false }] }], zValidators: [{ type: i0.Input, args: [{ isSignal: true, alias: "zValidators", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ZEditorComponent, zEditorVariants };
+export { ZEditorComponent, Z_EDITOR_DEFAULT_TOOLBAR, zEditorVariants };
 //# sourceMappingURL=shival99-z-ui-components-z-editor.mjs.map