@phuong-tran-redoc/document-engine-angular 0.0.33 → 0.0.35

package/fesm2022/phuong-tran-redoc-document-engine-angular.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { HostBinding, Input, Directive, inject, Injectable, ElementRef, ViewEncapsulation, ChangeDetectionStrategy, Component, EventEmitter, Output, ChangeDetectorRef, InjectionToken, HostListener, forwardRef, ContentChildren, ViewChild, ViewChildren, NgZone, ViewContainerRef, EnvironmentInjector, NgModule, ApplicationRef, createComponent, Renderer2 } from '@angular/core';
+import { inject, ElementRef, Input, Directive, Injectable, ApplicationRef, createComponent, HostBinding, InjectionToken, Renderer2, ChangeDetectorRef, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component, EventEmitter, Output, HostListener, ContentChildren, ViewChild, ViewChildren, NgZone, ViewContainerRef, EnvironmentInjector, NgModule } from '@angular/core';
 import { Extension, Editor } from '@tiptap/core';
 import Blockquote from '@tiptap/extension-blockquote';
 import Bold from '@tiptap/extension-bold';
@@ -22,17 +22,17 @@ import { TextStyleKit } from '@tiptap/extension-text-style';
 import Underline from '@tiptap/extension-underline';
 import { Dropcursor, Gapcursor, TrailingNode, UndoRedo, CharacterCount, Placeholder } from '@tiptap/extensions';
 import { ResetOnEnter, EditableRegion, RestrictedEditing, CustomOrderedList, StyledTableKit, PageBreak, ResetFormat, Indent, ClearContent, TextCase, NotumHeading, DynamicField, Color, normalizeColor, getActiveMarkRange, getSelectedCells, getCombinedCellAttributeValue, TableDefaultAttributes, getCursorCellInfo, getClosestDomElement } from '@phuong-tran-redoc/document-engine-core';
+import { BubbleMenuPlugin } from '@tiptap/extension-bubble-menu';
 import * as i1 from '@angular/common';
-import { CommonModule, DOCUMENT } from '@angular/common';
-import { throttle } from 'lodash-es';
+import { DOCUMENT, CommonModule } from '@angular/common';
 import * as i2 from '@angular/forms';
-import { FormsModule, FormControl, ReactiveFormsModule, FormBuilder, Validators, NG_VALUE_ACCESSOR, NonNullableFormBuilder } from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormsModule, FormControl, ReactiveFormsModule, FormBuilder, Validators, NonNullableFormBuilder } from '@angular/forms';
+import { FloatingMenuPlugin } from '@tiptap/extension-floating-menu';
+import { computePosition, offset, flip, shift, autoUpdate } from '@floating-ui/dom';
+import { throttle } from 'lodash-es';
 import { DomSanitizer } from '@angular/platform-browser';
 import { Subject, debounceTime, distinctUntilChanged, takeUntil } from 'rxjs';
-import { autoUpdate, computePosition, offset, flip, shift } from '@floating-ui/dom';
 import { CellSelection } from '@tiptap/pm/tables';
-import { BubbleMenuPlugin } from '@tiptap/extension-bubble-menu';
-import { FloatingMenuPlugin } from '@tiptap/extension-floating-menu';
 
 const DocumentEngineKit = Extension.create({
     name: 'DocumentEngineKit',
@@ -269,188 +269,952 @@ const DefaultEditorConfig = {
     showPrintButton: false,
 };
 
-const COLORS = Color.fromArray([
-    { name: 'Black', value: '#000000', type: 'hex' },
-    { name: 'Dim gray', value: '#696969', type: 'hex' },
-    { name: 'Light gray', value: '#d3d3d3', type: 'hex' },
-    { name: 'White', value: '#ffffff', type: 'hex' },
-    { name: 'Transparent', value: 'transparent', type: 'hex' },
-    // row 2
-    { name: 'Red', value: '#ff0000', type: 'hex' },
-    { name: 'Orange', value: '#ffa500', type: 'hex' },
-    { name: 'Yellow', value: '#ffff00', type: 'hex' },
-    { name: 'Light green', value: '#90ee90', type: 'hex' },
-    { name: 'Green', value: '#008000', type: 'hex' },
-    // row 3
-    { name: 'Aquamarine', value: '#7fffd4', type: 'hex' },
-    { name: 'Turquoise', value: '#40e0d0', type: 'hex' },
-    { name: 'Lightblue', value: '#add8e6', type: 'hex' },
-    { name: 'Blue', value: '#0000ff', type: 'hex' },
-    { name: 'Purple', value: '#800080', type: 'hex' },
-]);
-
-/**
- * Custom button directive matching React button component styles
- * Supports variants: default, destructive, outline, secondary, ghost, link
- * Supports sizes: default, sm, lg, icon, icon-sm, icon-lg
- *
- * Usage:
- * - <button documentEngineButton>Text</button> - secondary variant, default size
- * - <button documentEngineButton="filled">Text</button> - default variant (primary)
- * - <button documentEngineButton variant="outline">Text</button> - outline variant
- * - <button documentEngineButton variant="icon" size="icon-sm">Icon</button> - icon button
- */
-class ButtonDirective {
-    variant = 'ghost';
-    size = 'default';
-    get buttonClasses() {
-        const classes = ['btn'];
-        classes.push(`btn--${this.variant}`);
-        classes.push(`btn--size-${this.size}`);
-        return classes.join(' ');
+class TiptapBubbleMenuDirective {
+    elRef = inject(ElementRef);
+    props;
+    editor;
+    mountTo;
+    shouldShow;
+    ngOnInit() {
+        const editor = this.editor;
+        if (!editor)
+            throw new Error('Required: Input `editor`');
+        const bubbleMenuElement = this.elRef.nativeElement;
+        bubbleMenuElement.style.visibility = 'hidden';
+        bubbleMenuElement.style.position = 'absolute';
+        // Prevent editor blur when interacting with the bubble content
+        // bubbleMenuElement.addEventListener('mousedown', this.preventDefault);
+        const { pluginKey, appendTo, updateDelay, resizeDelay, options } = this.props;
+        editor.registerPlugin(BubbleMenuPlugin({
+            pluginKey,
+            appendTo,
+            updateDelay,
+            resizeDelay,
+            editor,
+            element: bubbleMenuElement,
+            options: this.getFloatingUiOptions(options ?? {}, bubbleMenuElement),
+            shouldShow: this.shouldShow,
+            getReferencedVirtualElement: this.mountTo,
+        }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.10", type: ButtonDirective, isStandalone: true, selector: "button[documentEngineButton]", inputs: { variant: "variant", size: "size" }, host: { attributes: { "type": "button" }, properties: { "class": "this.buttonClasses" } }, ngImport: i0 });
+    ngOnDestroy() {
+        if (this.editor && this.props?.pluginKey) {
+            this.editor.unregisterPlugin(this.props.pluginKey);
+        }
+        window.requestAnimationFrame(() => {
+            if (this.elRef.nativeElement.parentNode) {
+                this.elRef.nativeElement.parentNode.removeChild(this.elRef.nativeElement);
+            }
+        });
+        this.elRef.nativeElement.removeEventListener('mousedown', this.preventDefault);
+    }
+    preventDefault(event) {
+        // Allow default behavior for focusable elements so inputs can receive focus
+        const target = event.target;
+        if (target) {
+            const tag = target.tagName;
+            const isFocusableTag = tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || target.isContentEditable;
+            if (isFocusableTag)
+                return;
+        }
+        event.preventDefault();
+    }
+    getFloatingUiOptions(userOptions, element) {
+        // Find arrow element if it exists
+        // const arrowElement = element.querySelector('[data-arrow]') as HTMLElement | null;
+        // Merge with default Floating UI options
+        const defaultOptions = {
+            placement: 'bottom',
+            flip: {
+                fallbackPlacements: ['top', 'bottom', 'bottom-start', 'top-end', 'bottom-end'],
+                padding: 8,
+            },
+            // Enable shift middleware to keep bubble within viewport
+            shift: { padding: 8 },
+            // Add offset to create space between selection and bubble
+            offset: 10,
+            // Configure arrow if element exists
+            // arrow: arrowElement ? { element: arrowElement } : false,
+        };
+        return { ...defaultOptions, ...userOptions };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: TiptapBubbleMenuDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.10", type: TiptapBubbleMenuDirective, isStandalone: true, selector: "tiptap-bubble-menu[editor], [tiptapBubbleMenu][editor]", inputs: { props: "props", editor: "editor", mountTo: "mountTo", shouldShow: "shouldShow" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: TiptapBubbleMenuDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'button[documentEngineButton]',
+                    selector: 'tiptap-bubble-menu[editor], [tiptapBubbleMenu][editor]',
                     standalone: true,
-                    host: {
-                        type: 'button',
-                    },
                 }]
-        }], propDecorators: { variant: [{
+        }], propDecorators: { props: [{
                 type: Input
-            }], size: [{
+            }], editor: [{
+                type: Input
+            }], mountTo: [{
+                type: Input
+            }], shouldShow: [{
                 type: Input
-            }], buttonClasses: [{
-                type: HostBinding,
-                args: ['class']
             }] } });
 
-const DEFAULT = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect></svg>`;
-const CHECK = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="100%" height="100%"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/></svg>`;
-// Official icons
-const UNDO = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M280-200v-80h284q63 0 109.5-40T720-420q0-60-46.5-100T564-560H312l104 104-56 56-200-200 200-200 56 56-104 104h252q97 0 166.5 63T800-420q0 94-69.5 157T564-200H280Z"/></svg>`;
-const REDO = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M396-200q-97 0-166.5-63T160-420q0-94 69.5-157T396-640h252L544-744l56-56 200 200-200 200-56-56 104-104H396q-63 0-109.5 40T240-420q0 60 46.5 100T396-280h284v80H396Z"/></svg>`;
-const FORMAT_SIZE = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M560-160v-520H360v-120h520v120H680v520H560Zm-360 0v-320H80v-120h360v120H320v320H200Z"/></svg>`;
-const ARROW_DROP_DOWN = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M480-360 280-560h400L480-360Z"/></svg>`;
-const FORMAT_LINE_SPACING = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M240-160 80-320l56-56 64 62v-332l-64 62-56-56 160-160 160 160-56 56-64-62v332l64-62 56 56-160 160Zm240-40v-80h400v80H480Zm0-240v-80h400v80H480Zm0-240v-80h400v80H480Z"/></svg>`;
-const MATCH_CASE = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="m131-252 165-440h79l165 440h-76l-39-112H247l-40 112h-76Zm139-176h131l-64-182h-4l-63 182Zm395 186q-51 0-81-27.5T554-342q0-44 34.5-72.5T677-443q23 0 45 4t38 11v-12q0-29-20.5-47T685-505q-23 0-42 9.5T610-468l-47-35q24-29 54.5-43t68.5-14q69 0 103 32.5t34 97.5v178h-63v-37h-4q-14 23-38 35t-53 12Zm12-54q35 0 59.5-24t24.5-56q-14-8-33.5-12.5T689-393q-32 0-50 14t-18 37q0 20 16 33t40 13Z"/></svg>`;
-const FORMAT_CLEAR = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor"><path d="m528-546-93-93-121-121h486v120H568l-40 94ZM792-56 460-388l-80 188H249l119-280L56-792l56-56 736 736-56 56Z"/></svg>`;
-const FORMAT_COLOR_TEXT = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M80 0v-160h800V0H80Zm140-280 210-560h100l210 560h-96l-50-144H368l-52 144h-96Zm176-224h168l-82-232h-4l-82 232Z"/></svg>`;
-const FORMAT_COLOR_FILL = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="m247-904 57-56 343 343q23 23 23 57t-23 57L457-313q-23 23-57 23t-57-23L153-503q-23-23-23-57t23-57l190-191-96-96Zm153 153L209-560h382L400-751Zm360 471q-33 0-56.5-23.5T680-360q0-21 12.5-45t27.5-45q9-12 19-25t21-25q11 12 21 25t19 25q15 21 27.5 45t12.5 45q0 33-23.5 56.5T760-280ZM80 0v-160h800V0H80Z"/></svg>`;
-const FORMAT_BOLD = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M272-200v-560h221q65 0 120 40t55 111q0 51-23 78.5T602-491q25 11 55.5 41t30.5 90q0 89-65 124.5T501-200H272Zm121-112h104q48 0 58.5-24.5T566-372q0-11-10.5-35.5T494-432H393v120Zm0-228h93q33 0 48-17t15-38q0-24-17-39t-44-15h-95v109Z"/></svg>`;
-const FORMAT_ITALIC = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M200-200v-100h160l120-360H320v-100h400v100H580L460-300h140v100H200Z"/></svg>`;
-const FORMAT_UNDERLINE = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M200-120v-80h560v80H200Zm280-160q-101 0-157-63t-56-167v-330h103v336q0 56 28 91t82 35q54 0 82-35t28-91v-336h103v330q0 104-56 167t-157 63Z"/></svg>`;
-const FORMAT_STRIKETHROUGH = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M80-400v-80h800v80H80Zm340-160v-120H200v-120h560v120H540v120H420Zm0 400v-160h120v160H420Z"/></svg>`;
-const SUBSCRIPT = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M760-160v-80q0-17 11.5-28.5T800-280h80v-40H760v-40h120q17 0 28.5 11.5T920-320v40q0 17-11.5 28.5T880-240h-80v40h120v40H760Zm-525-80 185-291-172-269h106l124 200h4l123-200h107L539-531l186 291H618L482-457h-4L342-240H235Z"/></svg>`;
-const SUPERSCRIPT = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M760-600v-80q0-17 11.5-28.5T800-720h80v-40H760v-40h120q17 0 28.5 11.5T920-760v40q0 17-11.5 28.5T880-680h-80v40h120v40H760ZM235-160l185-291-172-269h106l124 200h4l123-200h107L539-451l186 291H618L482-377h-4L342-160H235Z"/></svg>`;
-const CODE = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M320-240 80-480l240-240 57 57-184 184 183 183-56 56Zm320 0-57-57 184-184-183-183 56-56 240 240-240 240Z"/></svg>`;
-const FORMAT_ALIGN_LEFT = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M120-120v-80h720v80H120Zm0-160v-80h480v80H120Zm0-160v-80h720v80H120Zm0-160v-80h480v80H120Zm0-160v-80h720v80H120Z"/></svg>`;
-const FORMAT_ALIGN_CENTER = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M120-120v-80h720v80H120Zm160-160v-80h400v80H280ZM120-440v-80h720v80H120Zm160-160v-80h400v80H280ZM120-760v-80h720v80H120Z"/></svg>`;
-const FORMAT_ALIGN_RIGHT = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M120-760v-80h720v80H120Zm240 160v-80h480v80H360ZM120-440v-80h720v80H120Zm240 160v-80h480v80H360ZM120-120v-80h720v80H120Z"/></svg>`;
-const FORMAT_ALIGN_JUSTIFY = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M120-120v-80h720v80H120Zm0-160v-80h720v80H120Zm0-160v-80h720v80H120Zm0-160v-80h720v80H120Zm0-160v-80h720v80H120Z"/></svg>`;
-const FORMAT_INDENT_DECREASE = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M120-120v-80h720v80H120Zm320-160v-80h400v80H440Zm0-160v-80h400v80H440Zm0-160v-80h400v80H440ZM120-760v-80h720v80H120Zm160 440L120-480l160-160v320Z"/></svg>`;
-const FORMAT_INDENT_INCREASE = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M120-120v-80h720v80H120Zm320-160v-80h400v80H440Zm0-160v-80h400v80H440Zm0-160v-80h400v80H440ZM120-760v-80h720v80H120Zm0 440v-320l160 160-160 160Z"/></svg>`;
-const FORMAT_LIST_BULLETED = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M360-200v-80h480v80H360Zm0-240v-80h480v80H360Zm0-240v-80h480v80H360ZM200-160q-33 0-56.5-23.5T120-240q0-33 23.5-56.5T200-320q33 0 56.5 23.5T280-240q0 33-23.5 56.5T200-160Zm0-240q-33 0-56.5-23.5T120-480q0-33 23.5-56.5T200-560q33 0 56.5 23.5T280-480q0 33-23.5 56.5T200-400Zm0-240q-33 0-56.5-23.5T120-720q0-33 23.5-56.5T200-800q33 0 56.5 23.5T280-720q0 33-23.5 56.5T200-640Z"/></svg>`;
-const FORMAT_LIST_NUMBERED = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M120-80v-60h100v-30h-60v-60h60v-30H120v-60h120q17 0 28.5 11.5T280-280v40q0 17-11.5 28.5T240-200q17 0 28.5 11.5T280-160v40q0 17-11.5 28.5T240-80H120Zm0-280v-110q0-17 11.5-28.5T160-510h60v-30H120v-60h120q17 0 28.5 11.5T280-560v70q0 17-11.5 28.5T240-450h-60v30h100v60H120Zm60-280v-180h-60v-60h120v240h-60Zm180 440v-80h480v80H360Zm0-240v-80h480v80H360Zm0-240v-80h480v80H360Z"/></svg>`;
-const FORMAT_QUOTE = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="m228-240 92-160q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 23-5.5 42.5T458-480L320-240h-92Zm360 0 92-160q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 23-5.5 42.5T818-480L680-240h-92ZM320-500q25 0 42.5-17.5T380-560q0-25-17.5-42.5T320-620q-25 0-42.5 17.5T260-560q0 25 17.5 42.5T320-500Zm360 0q25 0 42.5-17.5T740-560q0-25-17.5-42.5T680-620q-25 0-42.5 17.5T620-560q0 25 17.5 42.5T680-500Zm0-60Zm-360 0Z"/></svg>`;
-const TABLE_ROWS = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M760-200v-120H200v120h560Zm0-200v-160H200v160h560Zm0-240v-120H200v120h560ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Z"/></svg>`;
-const LINK = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M440-280H280q-83 0-141.5-58.5T80-480q0-83 58.5-141.5T280-680h160v80H280q-50 0-85 35t-35 85q0 50 35 85t85 35h160v80ZM320-440v-80h320v80H320Zm200 160v-80h160q50 0 85-35t35-85q0-50-35-85t-85-35H520v-80h160q83 0 141.5 58.5T880-480q0 83-58.5 141.5T680-280H520Z"/></svg>`;
-const LINK_OFF = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="m770-302-60-62q40-11 65-42.5t25-73.5q0-50-35-85t-85-35H520v-80h160q83 0 141.5 58.5T880-480q0 57-29.5 105T770-302ZM634-440l-80-80h86v80h-6ZM792-56 56-792l56-56 736 736-56 56ZM440-280H280q-83 0-141.5-58.5T80-480q0-69 42-123t108-71l74 74h-24q-50 0-85 35t-35 85q0 50 35 85t85 35h160v80ZM320-440v-80h65l79 80H320Z"/></svg>`;
-const SPECIAL_CHARACTER = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M120-120v-120h200q-84-45-132-125t-48-175q0-142 99-241t241-99q142 0 241 99t99 241q0 95-48 175T640-240h200v120H520v-204q78-14 129-75t51-141q0-92-64-156t-156-64q-92 0-156 64t-64 156q0 80 51 141t129 75v204H120Z"/></svg>`;
-const CLEAR_ALL = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M120-280v-80h560v80H120Zm80-160v-80h560v80H200Zm80-160v-80h560v80H280Z"/></svg>`;
-const INSERT_PAGE_BREAK = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M240-80q-33 0-56.5-23.5T160-160v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-80H240Zm-80-440v-280q0-33 23.5-56.5T240-880h320l240 240v120h-80v-80H520v-200H240v280h-80Zm200 160v-80h240v80H360Zm320 0v-80h240v80H680Zm-640 0v-80h240v80H40Zm440-160Zm0 240Z"/></svg>`;
-const MARKDOWN = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="m640-360 120-120-42-43-48 48v-125h-60v125l-48-48-42 43 120 120ZM160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm0-80h640v-480H160v480Zm0 0v-480 480Zm60-120h60v-180h40v120h60v-120h40v180h60v-200q0-17-11.5-28.5T440-600H260q-17 0-28.5 11.5T220-560v200Z"/></svg>`;
-const DYNAMIC_FORM = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M160-520q-33 0-56.5-23.5T80-600v-120q0-33 23.5-56.5T160-800h360v280H160Zm0-80h280v-120H160v120Zm0 440q-33 0-56.5-23.5T80-240v-120q0-33 23.5-56.5T160-440h440v280H160Zm0-80h360v-120H160v120Zm520 80v-360h-80v-280h280l-80 200h80L680-160ZM190-270h60v-60h-60v60Zm0-360h60v-60h-60v60Zm-30 30v-120 120Zm0 360v-120 120Z"/></svg>`;
-const PHOTO = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm40-80h480L570-480 450-320l-90-120-120 160Zm-40 80v-560 560Z"/></svg>`;
-const PRINT = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M640-640v-120H320v120h-80v-200h480v200h-80Zm-480 80h640-640Zm560 100q17 0 28.5-11.5T760-500q0-17-11.5-28.5T720-540q-17 0-28.5 11.5T680-500q0 17 11.5 28.5T720-460Zm-80 260v-160H320v160h320Zm80 80H240v-160H80v-240q0-51 35-85.5t85-34.5h560q51 0 85.5 34.5T880-520v240H720v160Zm80-240v-160q0-17-11.5-28.5T760-560H200q-17 0-28.5 11.5T160-520v160h80v-80h480v80h80Z"/></svg>`;
-const ARCHIVE = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="m480-240 160-160-56-56-64 64v-168h-80v168l-64-64-56 56 160 160ZM200-640v440h560v-440H200Zm0 520q-33 0-56.5-23.5T120-200v-499q0-14 4.5-27t13.5-24l50-61q11-14 27.5-21.5T250-840h460q18 0 34.5 7.5T772-811l50 61q9 11 13.5 24t4.5 27v499q0 33-23.5 56.5T760-120H200Zm16-600h528l-34-40H250l-34 40Zm264 300Z"/></svg>`;
-// Common Icons
-const EDIT = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M200-200h57l391-391-57-57-391 391v57Zm-80 80v-170l528-527q12-11 26.5-17t30.5-6q16 0 31 6t26 18l55 56q12 11 17.5 26t5.5 30q0 16-5.5 30.5T817-647L290-120H120Zm640-584-56-56 56 56Zm-141 85-28-29 57 57-29-28Z"/></svg>`;
-const SETTINGS = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm70-80h79l14-106q31-8 57.5-23.5T639-327l99 41 39-68-86-65q5-14 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5 38.5T427-266l13 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Zm-2-140Z"/></svg>`;
-const SEARCH = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg>`;
-const SEARCH_OFF = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M280-80q-83 0-141.5-58.5T80-280q0-83 58.5-141.5T280-480q83 0 141.5 58.5T480-280q0 83-58.5 141.5T280-80Zm544-40L568-376q-12-13-25.5-26.5T516-428q38-24 61-64t23-88q0-75-52.5-127.5T420-760q-75 0-127.5 52.5T240-580q0 6 .5 11.5T242-557q-18 2-39.5 8T164-535q-2-11-3-22t-1-23q0-109 75.5-184.5T420-840q109 0 184.5 75.5T680-580q0 43-13.5 81.5T629-428l251 252-56 56Zm-615-61 71-71 70 71 29-28-71-71 71-71-28-28-71 71-71-71-28 28 71 71-71 71 28 28Z"/></svg>`;
-const DESCRIPTION = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M320-240h320v-80H320v80Zm0-160h320v-80H320v80ZM240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h320l240 240v480q0 33-23.5 56.5T720-80H240Zm280-520v-200H240v640h480v-440H520ZM240-800v200-200 640-640Z"/></svg>`;
-const CLOSE = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg>`;
-const VERTICAL_ALIGN_TOP = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M160-760v-80h640v80H160Zm280 640v-408L336-424l-56-56 200-200 200 200-56 56-104-104v408h-80Z"/></svg>`;
-const VERTICAL_ALIGN_CENTER = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M440-80v-168l-64 64-56-56 160-160 160 160-56 56-64-64v168h-80ZM160-440v-80h640v80H160Zm320-120L320-720l56-56 64 64v-168h80v168l64-64 56 56-160 160Z"/></svg>`;
-const VERTICAL_ALIGN_BOTTOM = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M160-120v-80h640v80H160Zm320-160L280-480l56-56 104 104v-408h80v408l104-104 56 56-200 200Z"/></svg>`;
-// Custom SVG
-const RESTRICT_EDIT = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" aria-hidden="true">
-  <g transform="translate(10 10) scale(0.8) translate(-10 -10)">
-    <path d="M6.25 16a.75.75 0 1 1 0 1.5H.75a.75.75 0 1 1 0-1.5zm0-5a.75.75 0 1 1 0 1.5H.75a.75.75 0 1 1 0-1.5zm3-5a.75.75 0 0 1 0 1.5H.75a.75.75 0 0 1 0-1.5zm6-5a.75.75 0 1 1 0 1.5H.75a.75.75 0 0 1 0-1.5zm.25 5.5a3.5 3.5 0 0 1 3.143 1.959.75.75 0 0 1-1.36.636A2 2 0 0 0 13.5 10v2H19a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1h-7a1 1 0 0 1-1-1v-5a1 1 0 0 1 1-1v-2l.005-.192A3.5 3.5 0 0 1 15.5 6.5m0 7.5a.5.5 0 0 0-.492.41L15 14.5v2a.5.5 0 0 0 .992.09L16 16.5v-2a.5.5 0 0 0-.5-.5">
-    </path>
-  </g>
-</svg>
-`;
-const TABLE_CELL_PROPERTY = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" aria-hidden="true">
-  <path d="m11.105 18-.17 1H2.5A1.5 1.5 0 0 1 1 17.5v-15A1.5 1.5 0 0 1 2.5 1h15A1.5 1.5 0 0 1 19 2.5v9.975l-.85-.124-.15-.302V8h-5v4h.021l-.172.351-1.916.28-.151.027c-.287.063-.54.182-.755.341L8 13v5zM2 12h5V8H2zm10-4H8v4h4zM2 2v5h5V2zm0 16h5v-5H2zM13 7h5V2h-5zM8 2v5h4V2z" opacity=".6"></path>
-  <path d="m15.5 11.5 1.323 2.68 2.957.43-2.14 2.085.505 2.946L15.5 18.25l-2.645 1.39.505-2.945-2.14-2.086 2.957-.43zM13 6a1 1 0 0 1 1 1v3.172a2 2 0 0 0-.293.443l-.858 1.736-1.916.28-.151.027A1.98 1.98 0 0 0 9.315 14H7a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1zm-1 2H8v4h4z"></path>
-</svg>
-`;
-const TABLE_COLUMN = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" aria-hidden="true">
-  <path d="M2.5 1h15A1.5 1.5 0 0 1 19 2.5v15a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 1 17.5v-15A1.5 1.5 0 0 1 2.5 1M2 2v16h16V2z" opacity=".6"></path>
-  <path d="M18 7v1H2V7zm0 5v1H2v-1z" opacity=".6"></path>
-  <path d="M14 1v18a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1m-2 1H8v4h4zm0 6H8v4h4zm0 6H8v4h4z"></path>
-</svg>
-`;
-const TABLE_MERGE_CELL = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" aria-hidden="true">
-  <path d="M2.5 1h15A1.5 1.5 0 0 1 19 2.5v15a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 1 17.5v-15A1.5 1.5 0 0 1 2.5 1M2 2v16h16V2z" opacity=".6"></path>
-  <path d="M7 2h1v16H7zm5 0h1v7h-1zm6 5v1H2V7zM8 12v1H2v-1z" opacity=".6"></path>
-  <path d="M7 7h12a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1m1 2v9h10V9z"></path>
-</svg>
-`;
-const TABLE_PROPERTY = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" aria-hidden="true">
-  <path d="M8 2v5h4V2h1v5h5v1h-5v4h.021l-.172.351-1.916.28-.151.027c-.287.063-.54.182-.755.341L8 13v5H7v-5H2v-1h5V8H2V7h5V2zm4 6H8v4h4z" opacity=".6"></path>
-  <path d="m15.5 11.5 1.323 2.68 2.957.43-2.14 2.085.505 2.946L15.5 18.25l-2.645 1.39.505-2.945-2.14-2.086 2.957-.43zM17 1a2 2 0 0 1 2 2v9.475l-.85-.124-.857-1.736a2 2 0 0 0-.292-.44L17 3H3v14h7.808l.402.392L10.935 19H3a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2z"></path>
-</svg>
-`;
-const TABLE_ROW = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" aria-hidden="true">
-  <path d="M2.5 1h15A1.5 1.5 0 0 1 19 2.5v15a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 1 17.5v-15A1.5 1.5 0 0 1 2.5 1M2 2v16h16V2z" opacity=".6"></path>
-  <path d="M7 2h1v16H7zm5 0h1v16h-1z" opacity=".6"></path>
-  <path d="M1 6h18a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1m1 2v4h4V8zm6 0v4h4V8zm6 0v4h4V8z"></path>
-</svg>
-`;
-
-/**
- * Icon registry service for managing SVG icons
- * Similar to Angular Material's MatIconRegistry
- */
-class IconRegistryService {
-    sanitizer = inject(DomSanitizer);
-    icons = new Map();
-    constructor() {
-        this.registerDefaultIcons();
-    }
-    /**
-     * Register a new icon with its SVG content
-     */
-    registerIcon(name, svgContent) {
-        if (this.icons.has(name)) {
-            throw new Error(`Icon ${name} already registered`);
-        }
-        this.icons.set(name, svgContent);
-    }
-    /**
-     * Get icon SVG content by name
-     * Returns SafeHtml for use in templates with [innerHTML]
-     */
-    getIcon(name) {
-        const icon = this.icons.get(name);
-        if (!icon) {
-            console.warn(`Icon ${name} not registered`);
-            return this.sanitizer.bypassSecurityTrustHtml(DEFAULT);
-        }
-        return this.sanitizer.bypassSecurityTrustHtml(icon);
-    }
-    /**
-     * Get raw icon SVG string by name
-     * Returns string for direct DOM manipulation
-     */
+function shouldShowFnFactory(params) {
+    const { editor, target, forceOpen } = params;
+    const requireFocus = target.requireFocus !== false;
+    const allowEmptySelection = target.allowEmptySelection === true;
+    return () => {
+        if (forceOpen())
+            return true;
+        if (requireFocus && !editor.isFocused)
+            return false;
+        // Avoid showing during drag/resize
+        const dragging = editor.isDragging;
+        if (dragging)
+            return false;
+        // Avoid showing when selection is empty and mark is required
+        if (!allowEmptySelection && editor.state.selection.empty && target.kind === 'mark')
+            return false;
+        // Avoid showing when extension is not active
+        const active = Array.isArray(target.name)
+            ? target.name.some((name) => editor.isActive(name))
+            : editor.isActive(target.name);
+        if (!active)
+            return false;
+        // Avoid showing when extra predicate is not met
+        if (target.extraPredicate && !target.extraPredicate(editor))
+            return false;
+        return true;
+    };
+}
+function selectionChangeHandler(params) {
+    const { editor, target, onActive, onInactive, listenOnUpdate } = params;
+    const run = () => {
+        const isActive = Array.isArray(target.name)
+            ? target.name.some((name) => editor.isActive(name))
+            : editor.isActive(target.name);
+        if (!isActive)
+            return onInactive();
+        const activeName = Array.isArray(target.name) ? target.name.find((name) => editor.isActive(name)) : target.name;
+        const attrs = target.kind === 'mark'
+            ? (editor.getAttributes(activeName) ?? {})
+            : (editor.state.selection.node?.attrs ?? {});
+        onActive(attrs);
+    };
+    const onSelection = () => run();
+    const onUpdate = () => run();
+    editor.on('selectionUpdate', onSelection);
+    if (listenOnUpdate)
+        editor.on('update', onUpdate);
+    run(); // initial sync
+    return () => {
+        editor.off('selectionUpdate', onSelection);
+        if (listenOnUpdate)
+            editor.off('update', onUpdate);
+    };
+}
+
+class EventManager {
+    document = inject(DOCUMENT);
+    keyToEscapeListener = new Map();
+    keyToOutsideListener = new Map();
+    isAttached(key) {
+        return this.keyToOutsideListener.has(key) || this.keyToEscapeListener.has(key);
+    }
+    attach(key, hostElement, cb, anchorElement) {
+        // Avoid duplicate listeners
+        this.detach(key);
+        const oldOutside = this.keyToOutsideListener.get(key);
+        if (!oldOutside) {
+            const handler = (event) => {
+                const target = event.target;
+                const path = event.composedPath?.();
+                // Check if click is inside bubble
+                const isInsideBubble = !!hostElement && ((!!target && hostElement.contains(target)) || (!!path && path.includes(hostElement)));
+                if (isInsideBubble)
+                    return;
+                // Check if click is on the anchor (toolbar button)
+                const isInsideAnchor = !!anchorElement && ((!!target && anchorElement.contains(target)) || (!!path && path.includes(anchorElement)));
+                if (isInsideAnchor)
+                    return;
+                // Check if click is inside a CDK overlay (e.g., MatSelect dropdown, MatMenu, etc.)
+                // These are rendered outside the bubble but should not close it
+                if (target instanceof Element) {
+                    const isInsideOverlay = target.closest('.cdk-overlay-container, .cdk-overlay-pane');
+                    if (isInsideOverlay)
+                        return;
+                }
+                cb(key);
+            };
+            this.keyToOutsideListener.set(key, handler);
+            this.document.addEventListener('pointerdown', handler, true);
+            this.document.addEventListener('mousedown', handler, true);
+            this.document.addEventListener('click', handler, true);
+        }
+        const oldEsc = this.keyToEscapeListener.get(key);
+        if (!oldEsc) {
+            const escHandler = (e) => e.key === 'Escape' && cb(key);
+            this.document.addEventListener('keydown', escHandler, true);
+            this.keyToEscapeListener.set(key, escHandler);
+        }
+    }
+    detach(key) {
+        const outside = this.keyToOutsideListener.get(key);
+        if (outside) {
+            this.document.removeEventListener('pointerdown', outside, true);
+            this.document.removeEventListener('mousedown', outside, true);
+            this.document.removeEventListener('click', outside, true);
+            this.keyToOutsideListener.delete(key);
+        }
+        const esc = this.keyToEscapeListener.get(key);
+        if (esc) {
+            this.document.removeEventListener('keydown', esc, true);
+            this.keyToEscapeListener.delete(key);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: EventManager, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: EventManager, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: EventManager, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Service to manage focus trapping within an element
+ * Traps keyboard focus inside a container element for accessibility
+ */
+class FocusTrapService {
+    document = inject(DOCUMENT);
+    activeTraps = new Map();
+    /**
+     * Attach focus trap to an element
+     * @param element The container element to trap focus within
+     * @param autoFocus Whether to automatically focus the first focusable element
+     */
+    attach(element, autoFocus = true) {
+        if (!element)
+            return;
+        // Detach existing trap if any
+        this.detach(element);
+        // Get all focusable elements within the container
+        const focusableSelectors = [
+            'a[href]',
+            'button:not([disabled])',
+            'textarea:not([disabled])',
+            'input:not([disabled])',
+            'select:not([disabled])',
+            '[tabindex]:not([tabindex="-1"])',
+        ].join(', ');
+        const focusableElements = Array.from(element.querySelectorAll(focusableSelectors));
+        if (focusableElements.length === 0)
+            return;
+        const firstFocusableElement = focusableElements[0];
+        const lastFocusableElement = focusableElements[focusableElements.length - 1];
+        // Focus the first element if requested
+        if (autoFocus && firstFocusableElement) {
+            setTimeout(() => {
+                firstFocusableElement.focus();
+            }, 0);
+        }
+        // Handle Tab key to trap focus
+        const handler = (event) => {
+            if (event.key !== 'Tab')
+                return;
+            if (!element.contains(this.document.activeElement)) {
+                event.preventDefault();
+                if (event.shiftKey) {
+                    lastFocusableElement?.focus();
+                }
+                else {
+                    firstFocusableElement?.focus();
+                }
+                return;
+            }
+            if (event.shiftKey) {
+                // Shift + Tab: going backwards
+                if (this.document.activeElement === firstFocusableElement) {
+                    event.preventDefault();
+                    lastFocusableElement?.focus();
+                }
+            }
+            else {
+                // Tab: going forwards
+                if (this.document.activeElement === lastFocusableElement) {
+                    event.preventDefault();
+                    firstFocusableElement?.focus();
+                }
+            }
+        };
+        element.addEventListener('keydown', handler);
+        this.activeTraps.set(element, {
+            handler,
+            firstElement: firstFocusableElement,
+            lastElement: lastFocusableElement,
+        });
+    }
+    /**
+     * Detach focus trap from an element
+     * @param element The element to remove focus trap from
+     */
+    detach(element) {
+        if (!element)
+            return;
+        const trap = this.activeTraps.get(element);
+        if (trap) {
+            element.removeEventListener('keydown', trap.handler);
+            this.activeTraps.delete(element);
+        }
+    }
+    /**
+     * Detach all active focus traps
+     */
+    detachAll() {
+        this.activeTraps.forEach((trap, element) => {
+            element.removeEventListener('keydown', trap.handler);
+        });
+        this.activeTraps.clear();
+    }
+    /**
+     * Re-attach focus trap to an element (useful when content changes)
+     * @param element The element to re-attach focus trap to
+     * @param autoFocus Whether to automatically focus the first focusable element
+     */
+    reattach(element, autoFocus = false) {
+        this.detach(element);
+        this.attach(element, autoFocus);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: FocusTrapService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: FocusTrapService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: FocusTrapService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class AngularRenderer {
+    applicationRef;
+    componentRef;
+    constructor(ViewComponent, injector, props) {
+        this.applicationRef = injector.get(ApplicationRef);
+        this.componentRef = createComponent(ViewComponent, {
+            environmentInjector: this.applicationRef.injector,
+            elementInjector: injector,
+        });
+        // set input props to the component
+        this.updateProps(props);
+        this.applicationRef.attachView(this.componentRef.hostView);
+    }
+    get instance() {
+        return this.componentRef.instance;
+    }
+    get elementRef() {
+        return this.componentRef.injector.get(ElementRef);
+    }
+    get dom() {
+        return this.elementRef.nativeElement;
+    }
+    updateProps(props) {
+        Object.entries(props).forEach(([key, value]) => {
+            this.componentRef.setInput(key, value);
+        });
+    }
+    updateAttributes(attributes) {
+        Object.keys(attributes).forEach((key) => {
+            this.dom.setAttribute(key, attributes[key]);
+        });
+    }
+    detectChanges() {
+        this.componentRef.changeDetectorRef.detectChanges();
+    }
+    destroy() {
+        this.componentRef.destroy();
+        this.applicationRef.detachView(this.componentRef.hostView);
+    }
+}
+
+class TiptapDraggableDirective {
+    draggable = true;
+    handle = '';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: TiptapDraggableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.10", type: TiptapDraggableDirective, isStandalone: true, selector: "[tiptapDraggable]", host: { properties: { "attr.draggable": "this.draggable", "attr.data-drag-handle": "this.handle" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: TiptapDraggableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tiptapDraggable]',
+                }]
+        }], propDecorators: { draggable: [{
+                type: HostBinding,
+                args: ['attr.draggable']
+            }], handle: [{
+                type: HostBinding,
+                args: ['attr.data-drag-handle']
+            }] } });
+
+/**
+ * Injection token for HTML preprocessor function.
+ * Use this token to provide a custom function that processes HTML content
+ * before it's set into the TipTap editor.
+ *
+ * This is optional - if not provided, the editor will use the HTML content as-is.
+ *
+ * @example
+ * ```typescript
+ * // In your component or module providers
+ * {
+ *   provide: EDITOR_HTML_PREPROCESSOR,
+ *   useValue: (html: string) => {
+ *     // Your custom preprocessing logic
+ *     return html.replace(/old/g, 'new');
+ *   }
+ * }
+ * ```
+ */
+const EDITOR_HTML_PREPROCESSOR = new InjectionToken('EDITOR_HTML_PREPROCESSOR');
+/**
+ * Injection token for content wrapper class.
+ * Use this token to provide a custom class name for the content wrapper element.
+ *
+ * @example
+ * ```typescript
+ * // In your component or module providers
+ * {
+ *   provide: EDITOR_CONTENT_WRAPPER_CLASS,
+ *   useValue: 'my-content-wrapper'
+ * }
+ * ```
+ */
+const EDITOR_CONTENT_WRAPPER_CLASS = new InjectionToken('EDITOR_CONTENT_WRAPPER_CLASS', {
+    providedIn: 'root',
+    factory: () => null,
+});
+
+class TiptapEditorDirective {
+    elRef = inject(ElementRef);
+    renderer = inject(Renderer2);
+    changeDetectorRef = inject(ChangeDetectorRef);
+    htmlPreprocessor = inject(EDITOR_HTML_PREPROCESSOR, { optional: true });
+    contentWrapperClass = inject(EDITOR_CONTENT_WRAPPER_CLASS, { optional: true });
+    _editor;
+    initialEditableState;
+    set editor(editor) {
+        this._editor = editor;
+        // Store initial editable state immediately when editor is set
+        // This ensures we capture the state before any Forms API calls
+        if (this.initialEditableState === undefined && editor) {
+            this.initialEditableState = editor.isEditable;
+        }
+    }
+    get editor() {
+        if (!this._editor) {
+            throw new Error('Editor must be set before use.');
+        }
+        return this._editor;
+    }
+    outputFormat = 'html';
+    onChange = () => {
+        /** */
+    };
+    onTouched = () => {
+        /** */
+    };
+    // Writes a new value to the element.
+    // This methods is called when programmatic changes from model to view are requested.
+    writeValue(value) {
+        // Apply preprocessor if value is a string (HTML) and preprocessor is available
+        let processedValue = value;
+        if (typeof value === 'string' && this.htmlPreprocessor) {
+            processedValue = this.htmlPreprocessor(value);
+        }
+        this.editor.chain().setContent(processedValue, { emitUpdate: false }).run();
+    }
+    // Registers a callback function that is called when the control's value changes in the UI.
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    // Registers a callback function that is called by the forms API on initialization to update the form model on blur.
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    // Called by the forms api to enable or disable the element
+    setDisabledState(isDisabled) {
+        // Ensure we have captured the initial state (fallback in case setter wasn't called)
+        if (this.initialEditableState === undefined && this.editor) {
+            this.initialEditableState = this.editor.isEditable;
+        }
+        // Only apply disabled state if editor was initially editable
+        // If editor was configured as readonly (editable: false), preserve that state
+        if (this.initialEditableState === true) {
+            this.editor.setEditable(!isDisabled);
+        }
+        // If initialEditableState === false, do nothing - preserve readonly state
+        this.renderer.setProperty(this.elRef.nativeElement, 'disabled', isDisabled);
+    }
+    handleChange = ({ editor, transaction }) => {
+        if (!transaction.docChanged)
+            return;
+        // Needed for ChangeDetectionStrategy.OnPush to get notified about changes
+        this.changeDetectorRef.markForCheck();
+        if (this.outputFormat === 'html') {
+            const htmlContent = editor.getHTML();
+            let finalContent = htmlContent;
+            if (this.contentWrapperClass) {
+                finalContent = `<div class="${this.contentWrapperClass}">${htmlContent}</div>`;
+            }
+            this.onChange(finalContent);
+            return;
+        }
+        this.onChange(editor.getJSON());
+    };
+    ngOnInit() {
+        const editor = this.editor;
+        // take the inner contents and clear the block
+        const { innerHTML } = this.elRef.nativeElement;
+        this.elRef.nativeElement.innerHTML = '';
+        // insert the editor in the dom
+        this.elRef.nativeElement.append(...Array.from(editor.options.element?.childNodes || []));
+        // update the options for the editor
+        editor.setOptions({ element: this.elRef.nativeElement });
+        // update content to the editor
+        if (innerHTML) {
+            // Apply preprocessor to initial content if available
+            const processedContent = this.htmlPreprocessor ? this.htmlPreprocessor(innerHTML) : innerHTML;
+            editor.chain().setContent(processedContent, { emitUpdate: false }).run();
+        }
+        // register blur handler to update `touched` property
+        editor.on('blur', () => {
+            this.onTouched();
+        });
+        // register update handler to listen to changes on update
+        editor.on('update', this.handleChange);
+        // Needed for ChangeDetectionStrategy.OnPush to get notified
+        editor.on('selectionUpdate', () => this.changeDetectorRef.markForCheck());
+    }
+    ngAfterViewInit() {
+        this.changeDetectorRef.detectChanges();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: TiptapEditorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.10", type: TiptapEditorDirective, isStandalone: true, selector: "tiptap[editor], [tiptap][editor], tiptap-editor[editor], [tiptapEditor][editor]", inputs: { editor: "editor", outputFormat: "outputFormat" }, host: { classAttribute: "tiptap-editor no-twp" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => TiptapEditorDirective),
+                multi: true,
+            },
+        ], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: TiptapEditorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'tiptap[editor], [tiptap][editor], tiptap-editor[editor], [tiptapEditor][editor]',
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TiptapEditorDirective),
+                            multi: true,
+                        },
+                    ],
+                    standalone: true,
+                    host: {
+                        ['class']: 'tiptap-editor no-twp',
+                    },
+                }]
+        }], propDecorators: { editor: [{
+                type: Input
+            }], outputFormat: [{
+                type: Input
+            }] } });
+
+class TiptapFloatingMenuDirective {
+    elRef;
+    constructor(elRef) {
+        this.elRef = elRef;
+    }
+    pluginKey = 'TiptapFloatingMenu';
+    editor;
+    options = {};
+    shouldShow;
+    ngOnInit() {
+        const editor = this.editor;
+        if (!editor) {
+            throw new Error('Required: Input `editor`');
+        }
+        const floatingMenuElement = this.elRef.nativeElement;
+        floatingMenuElement.style.visibility = 'hidden';
+        floatingMenuElement.style.position = 'absolute';
+        editor.registerPlugin(FloatingMenuPlugin({
+            pluginKey: this.pluginKey,
+            editor,
+            element: floatingMenuElement,
+            options: this.options,
+            shouldShow: this.shouldShow,
+        }));
+    }
+    ngOnDestroy() {
+        if (this.editor && this.pluginKey) {
+            this.editor.unregisterPlugin(this.pluginKey);
+        }
+        window.requestAnimationFrame(() => {
+            if (this.elRef.nativeElement.parentNode) {
+                this.elRef.nativeElement.parentNode.removeChild(this.elRef.nativeElement);
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: TiptapFloatingMenuDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.10", type: TiptapFloatingMenuDirective, isStandalone: true, selector: "tiptap-floating-menu[editor], [tiptapFloatingMenu][editor]", inputs: { pluginKey: "pluginKey", editor: "editor", options: "options", shouldShow: "shouldShow" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: TiptapFloatingMenuDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'tiptap-floating-menu[editor], [tiptapFloatingMenu][editor]',
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { pluginKey: [{
+                type: Input
+            }], editor: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], shouldShow: [{
+                type: Input
+            }] } });
+
+/**
+ * Directive for positioning a popover/dropdown relative to a trigger element using floating-ui
+ * Handles positioning, visibility, and cleanup automatically
+ *
+ * Usage:
+ * <button #trigger>Open</button>
+ * <div [popover]="trigger" [isOpen]="isOpen">
+ *   Content
+ * </div>
+ */
+class PopoverDirective {
+    elRef = inject(ElementRef);
+    cdr = inject(ChangeDetectorRef);
+    /**
+     * The trigger element reference (ElementRef or HTMLElement)
+     */
+    popover;
+    /**
+     * Whether the popover is open
+     */
+    isOpen = false;
+    /**
+     * Placement of the popover relative to trigger
+     */
+    placement = 'bottom-start';
+    /**
+     * Offset from trigger
+     */
+    offset = 8;
+    /**
+     * Padding for flip/shift middleware
+     */
+    padding = 8;
+    cleanupAutoUpdate;
+    isPositioned = false;
+    viewInitialized = false;
+    retryCount = 0;
+    maxRetries = 10;
+    ngAfterViewInit() {
+        this.viewInitialized = true;
+        this.updateVisibility();
+    }
+    ngOnChanges(changes) {
+        if (this.viewInitialized && (changes['isOpen'] || changes['popover'])) {
+            this.updateVisibility();
+        }
+    }
+    ngOnDestroy() {
+        this.cleanup();
+    }
+    updateVisibility() {
+        if (!this.viewInitialized)
+            return;
+        if (this.isOpen && this.popover) {
+            // Wait for next tick to ensure element is rendered
+            setTimeout(() => {
+                this.setupFloating();
+            });
+        }
+        else {
+            this.isPositioned = false;
+            this.cleanup();
+        }
+    }
+    setupFloating() {
+        // Reset retry count on each attempt
+        this.retryCount = 0;
+        this._setupFloatingInternal();
+    }
+    _setupFloatingInternal() {
+        let triggerEl;
+        if (!this.popover) {
+            if (this.retryCount < this.maxRetries) {
+                this.retryCount++;
+                setTimeout(() => this._setupFloatingInternal(), 10);
+            }
+            return;
+        }
+        if (this.popover instanceof ElementRef) {
+            triggerEl = this.popover.nativeElement;
+            // If ElementRef exists but nativeElement is not yet available, retry
+            if (!triggerEl) {
+                if (this.retryCount < this.maxRetries) {
+                    this.retryCount++;
+                    setTimeout(() => this._setupFloatingInternal(), 10);
+                }
+                return;
+            }
+        }
+        else {
+            triggerEl = this.popover;
+        }
+        const dropdownEl = this.elRef.nativeElement;
+        if (!triggerEl || !dropdownEl) {
+            // Retry if elements not ready
+            if (this.retryCount < this.maxRetries) {
+                this.retryCount++;
+                setTimeout(() => this._setupFloatingInternal(), 10);
+            }
+            return;
+        }
+        // Compute initial position before showing dropdown to prevent flash
+        computePosition(triggerEl, dropdownEl, {
+            placement: this.placement,
+            middleware: [offset(this.offset), flip(), shift({ padding: this.padding })],
+        })
+            .then(({ x, y }) => {
+            // Set position first, then make visible
+            Object.assign(dropdownEl.style, { left: `${x}px`, top: `${y}px` });
+            this.isPositioned = true;
+            // Trigger change detection to update visibility binding
+            this.cdr.markForCheck();
+        })
+            .catch((error) => {
+            console.error('[PopoverDirective] Error computing position', error);
+        });
+        // Use autoUpdate to automatically reposition on scroll/resize
+        this.cleanupAutoUpdate = autoUpdate(triggerEl, dropdownEl, () => {
+            computePosition(triggerEl, dropdownEl, {
+                placement: this.placement,
+                middleware: [offset(this.offset), flip(), shift({ padding: this.padding })],
+            }).then(({ x, y }) => {
+                Object.assign(dropdownEl.style, { left: `${x}px`, top: `${y}px` });
+            });
+        });
+    }
+    cleanup() {
+        if (this.cleanupAutoUpdate) {
+            this.cleanupAutoUpdate();
+            this.cleanupAutoUpdate = undefined;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: PopoverDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.10", type: PopoverDirective, isStandalone: true, selector: "[popover]", inputs: { popover: "popover", isOpen: "isOpen", placement: "placement", offset: "offset", padding: "padding" }, host: { properties: { "style.position": "\"fixed\"", "style.visibility": "isPositioned ? \"visible\" : \"hidden\"" } }, usesOnChanges: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: PopoverDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[popover]',
+                    standalone: true,
+                    host: {
+                        '[style.position]': '"fixed"',
+                        '[style.visibility]': 'isPositioned ? "visible" : "hidden"',
+                    },
+                }]
+        }], propDecorators: { popover: [{
+                type: Input
+            }], isOpen: [{
+                type: Input
+            }], placement: [{
+                type: Input
+            }], offset: [{
+                type: Input
+            }], padding: [{
+                type: Input
+            }] } });
+
+const COLORS = Color.fromArray([
+    { name: 'Black', value: '#000000', type: 'hex' },
+    { name: 'Dim gray', value: '#696969', type: 'hex' },
+    { name: 'Light gray', value: '#d3d3d3', type: 'hex' },
+    { name: 'White', value: '#ffffff', type: 'hex' },
+    { name: 'Transparent', value: 'transparent', type: 'hex' },
+    // row 2
+    { name: 'Red', value: '#ff0000', type: 'hex' },
+    { name: 'Orange', value: '#ffa500', type: 'hex' },
+    { name: 'Yellow', value: '#ffff00', type: 'hex' },
+    { name: 'Light green', value: '#90ee90', type: 'hex' },
+    { name: 'Green', value: '#008000', type: 'hex' },
+    // row 3
+    { name: 'Aquamarine', value: '#7fffd4', type: 'hex' },
+    { name: 'Turquoise', value: '#40e0d0', type: 'hex' },
+    { name: 'Lightblue', value: '#add8e6', type: 'hex' },
+    { name: 'Blue', value: '#0000ff', type: 'hex' },
+    { name: 'Purple', value: '#800080', type: 'hex' },
+]);
+
+/**
+ * Custom button directive matching React button component styles
+ * Supports variants: default, destructive, outline, secondary, ghost, link
+ * Supports sizes: default, sm, lg, icon, icon-sm, icon-lg
+ *
+ * Usage:
+ * - <button documentEngineButton>Text</button> - secondary variant, default size
+ * - <button documentEngineButton="filled">Text</button> - default variant (primary)
+ * - <button documentEngineButton variant="outline">Text</button> - outline variant
+ * - <button documentEngineButton variant="icon" size="icon-sm">Icon</button> - icon button
+ */
+class ButtonDirective {
+    variant = 'ghost';
+    size = 'default';
+    get buttonClasses() {
+        const classes = ['btn'];
+        classes.push(`btn--${this.variant}`);
+        classes.push(`btn--size-${this.size}`);
+        return classes.join(' ');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.10", type: ButtonDirective, isStandalone: true, selector: "button[documentEngineButton]", inputs: { variant: "variant", size: "size" }, host: { attributes: { "type": "button" }, properties: { "class": "this.buttonClasses" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ButtonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[documentEngineButton]',
+                    standalone: true,
+                    host: {
+                        type: 'button',
+                    },
+                }]
+        }], propDecorators: { variant: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], buttonClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+const DEFAULT = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect></svg>`;
+const CHECK = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="100%" height="100%"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/></svg>`;
+// Official icons
+const UNDO = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M280-200v-80h284q63 0 109.5-40T720-420q0-60-46.5-100T564-560H312l104 104-56 56-200-200 200-200 56 56-104 104h252q97 0 166.5 63T800-420q0 94-69.5 157T564-200H280Z"/></svg>`;
+const REDO = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M396-200q-97 0-166.5-63T160-420q0-94 69.5-157T396-640h252L544-744l56-56 200 200-200 200-56-56 104-104H396q-63 0-109.5 40T240-420q0 60 46.5 100T396-280h284v80H396Z"/></svg>`;
+const FORMAT_SIZE = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M560-160v-520H360v-120h520v120H680v520H560Zm-360 0v-320H80v-120h360v120H320v320H200Z"/></svg>`;
+const ARROW_DROP_DOWN = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M480-360 280-560h400L480-360Z"/></svg>`;
+const FORMAT_LINE_SPACING = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M240-160 80-320l56-56 64 62v-332l-64 62-56-56 160-160 160 160-56 56-64-62v332l64-62 56 56-160 160Zm240-40v-80h400v80H480Zm0-240v-80h400v80H480Zm0-240v-80h400v80H480Z"/></svg>`;
+const MATCH_CASE = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="m131-252 165-440h79l165 440h-76l-39-112H247l-40 112h-76Zm139-176h131l-64-182h-4l-63 182Zm395 186q-51 0-81-27.5T554-342q0-44 34.5-72.5T677-443q23 0 45 4t38 11v-12q0-29-20.5-47T685-505q-23 0-42 9.5T610-468l-47-35q24-29 54.5-43t68.5-14q69 0 103 32.5t34 97.5v178h-63v-37h-4q-14 23-38 35t-53 12Zm12-54q35 0 59.5-24t24.5-56q-14-8-33.5-12.5T689-393q-32 0-50 14t-18 37q0 20 16 33t40 13Z"/></svg>`;
+const FORMAT_CLEAR = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor"><path d="m528-546-93-93-121-121h486v120H568l-40 94ZM792-56 460-388l-80 188H249l119-280L56-792l56-56 736 736-56 56Z"/></svg>`;
+const FORMAT_COLOR_TEXT = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M80 0v-160h800V0H80Zm140-280 210-560h100l210 560h-96l-50-144H368l-52 144h-96Zm176-224h168l-82-232h-4l-82 232Z"/></svg>`;
+const FORMAT_COLOR_FILL = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="m247-904 57-56 343 343q23 23 23 57t-23 57L457-313q-23 23-57 23t-57-23L153-503q-23-23-23-57t23-57l190-191-96-96Zm153 153L209-560h382L400-751Zm360 471q-33 0-56.5-23.5T680-360q0-21 12.5-45t27.5-45q9-12 19-25t21-25q11 12 21 25t19 25q15 21 27.5 45t12.5 45q0 33-23.5 56.5T760-280ZM80 0v-160h800V0H80Z"/></svg>`;
+const FORMAT_BOLD = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M272-200v-560h221q65 0 120 40t55 111q0 51-23 78.5T602-491q25 11 55.5 41t30.5 90q0 89-65 124.5T501-200H272Zm121-112h104q48 0 58.5-24.5T566-372q0-11-10.5-35.5T494-432H393v120Zm0-228h93q33 0 48-17t15-38q0-24-17-39t-44-15h-95v109Z"/></svg>`;
+const FORMAT_ITALIC = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M200-200v-100h160l120-360H320v-100h400v100H580L460-300h140v100H200Z"/></svg>`;
+const FORMAT_UNDERLINE = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M200-120v-80h560v80H200Zm280-160q-101 0-157-63t-56-167v-330h103v336q0 56 28 91t82 35q54 0 82-35t28-91v-336h103v330q0 104-56 167t-157 63Z"/></svg>`;
+const FORMAT_STRIKETHROUGH = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M80-400v-80h800v80H80Zm340-160v-120H200v-120h560v120H540v120H420Zm0 400v-160h120v160H420Z"/></svg>`;
+const SUBSCRIPT = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M760-160v-80q0-17 11.5-28.5T800-280h80v-40H760v-40h120q17 0 28.5 11.5T920-320v40q0 17-11.5 28.5T880-240h-80v40h120v40H760Zm-525-80 185-291-172-269h106l124 200h4l123-200h107L539-531l186 291H618L482-457h-4L342-240H235Z"/></svg>`;
+const SUPERSCRIPT = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M760-600v-80q0-17 11.5-28.5T800-720h80v-40H760v-40h120q17 0 28.5 11.5T920-760v40q0 17-11.5 28.5T880-680h-80v40h120v40H760ZM235-160l185-291-172-269h106l124 200h4l123-200h107L539-451l186 291H618L482-377h-4L342-160H235Z"/></svg>`;
+const CODE = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M320-240 80-480l240-240 57 57-184 184 183 183-56 56Zm320 0-57-57 184-184-183-183 56-56 240 240-240 240Z"/></svg>`;
+const FORMAT_ALIGN_LEFT = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M120-120v-80h720v80H120Zm0-160v-80h480v80H120Zm0-160v-80h720v80H120Zm0-160v-80h480v80H120Zm0-160v-80h720v80H120Z"/></svg>`;
+const FORMAT_ALIGN_CENTER = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M120-120v-80h720v80H120Zm160-160v-80h400v80H280ZM120-440v-80h720v80H120Zm160-160v-80h400v80H280ZM120-760v-80h720v80H120Z"/></svg>`;
+const FORMAT_ALIGN_RIGHT = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M120-760v-80h720v80H120Zm240 160v-80h480v80H360ZM120-440v-80h720v80H120Zm240 160v-80h480v80H360ZM120-120v-80h720v80H120Z"/></svg>`;
+const FORMAT_ALIGN_JUSTIFY = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M120-120v-80h720v80H120Zm0-160v-80h720v80H120Zm0-160v-80h720v80H120Zm0-160v-80h720v80H120Zm0-160v-80h720v80H120Z"/></svg>`;
+const FORMAT_INDENT_DECREASE = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M120-120v-80h720v80H120Zm320-160v-80h400v80H440Zm0-160v-80h400v80H440Zm0-160v-80h400v80H440ZM120-760v-80h720v80H120Zm160 440L120-480l160-160v320Z"/></svg>`;
+const FORMAT_INDENT_INCREASE = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M120-120v-80h720v80H120Zm320-160v-80h400v80H440Zm0-160v-80h400v80H440Zm0-160v-80h400v80H440ZM120-760v-80h720v80H120Zm0 440v-320l160 160-160 160Z"/></svg>`;
+const FORMAT_LIST_BULLETED = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M360-200v-80h480v80H360Zm0-240v-80h480v80H360Zm0-240v-80h480v80H360ZM200-160q-33 0-56.5-23.5T120-240q0-33 23.5-56.5T200-320q33 0 56.5 23.5T280-240q0 33-23.5 56.5T200-160Zm0-240q-33 0-56.5-23.5T120-480q0-33 23.5-56.5T200-560q33 0 56.5 23.5T280-480q0 33-23.5 56.5T200-400Zm0-240q-33 0-56.5-23.5T120-720q0-33 23.5-56.5T200-800q33 0 56.5 23.5T280-720q0 33-23.5 56.5T200-640Z"/></svg>`;
+const FORMAT_LIST_NUMBERED = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M120-80v-60h100v-30h-60v-60h60v-30H120v-60h120q17 0 28.5 11.5T280-280v40q0 17-11.5 28.5T240-200q17 0 28.5 11.5T280-160v40q0 17-11.5 28.5T240-80H120Zm0-280v-110q0-17 11.5-28.5T160-510h60v-30H120v-60h120q17 0 28.5 11.5T280-560v70q0 17-11.5 28.5T240-450h-60v30h100v60H120Zm60-280v-180h-60v-60h120v240h-60Zm180 440v-80h480v80H360Zm0-240v-80h480v80H360Zm0-240v-80h480v80H360Z"/></svg>`;
+const FORMAT_QUOTE = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="m228-240 92-160q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 23-5.5 42.5T458-480L320-240h-92Zm360 0 92-160q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 23-5.5 42.5T818-480L680-240h-92ZM320-500q25 0 42.5-17.5T380-560q0-25-17.5-42.5T320-620q-25 0-42.5 17.5T260-560q0 25 17.5 42.5T320-500Zm360 0q25 0 42.5-17.5T740-560q0-25-17.5-42.5T680-620q-25 0-42.5 17.5T620-560q0 25 17.5 42.5T680-500Zm0-60Zm-360 0Z"/></svg>`;
+const TABLE_ROWS = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M760-200v-120H200v120h560Zm0-200v-160H200v160h560Zm0-240v-120H200v120h560ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Z"/></svg>`;
+const LINK = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M440-280H280q-83 0-141.5-58.5T80-480q0-83 58.5-141.5T280-680h160v80H280q-50 0-85 35t-35 85q0 50 35 85t85 35h160v80ZM320-440v-80h320v80H320Zm200 160v-80h160q50 0 85-35t35-85q0-50-35-85t-85-35H520v-80h160q83 0 141.5 58.5T880-480q0 83-58.5 141.5T680-280H520Z"/></svg>`;
+const LINK_OFF = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="m770-302-60-62q40-11 65-42.5t25-73.5q0-50-35-85t-85-35H520v-80h160q83 0 141.5 58.5T880-480q0 57-29.5 105T770-302ZM634-440l-80-80h86v80h-6ZM792-56 56-792l56-56 736 736-56 56ZM440-280H280q-83 0-141.5-58.5T80-480q0-69 42-123t108-71l74 74h-24q-50 0-85 35t-35 85q0 50 35 85t85 35h160v80ZM320-440v-80h65l79 80H320Z"/></svg>`;
+const SPECIAL_CHARACTER = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M120-120v-120h200q-84-45-132-125t-48-175q0-142 99-241t241-99q142 0 241 99t99 241q0 95-48 175T640-240h200v120H520v-204q78-14 129-75t51-141q0-92-64-156t-156-64q-92 0-156 64t-64 156q0 80 51 141t129 75v204H120Z"/></svg>`;
+const CLEAR_ALL = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M120-280v-80h560v80H120Zm80-160v-80h560v80H200Zm80-160v-80h560v80H280Z"/></svg>`;
+const INSERT_PAGE_BREAK = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M240-80q-33 0-56.5-23.5T160-160v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-80H240Zm-80-440v-280q0-33 23.5-56.5T240-880h320l240 240v120h-80v-80H520v-200H240v280h-80Zm200 160v-80h240v80H360Zm320 0v-80h240v80H680Zm-640 0v-80h240v80H40Zm440-160Zm0 240Z"/></svg>`;
+const MARKDOWN = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="m640-360 120-120-42-43-48 48v-125h-60v125l-48-48-42 43 120 120ZM160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm0-80h640v-480H160v480Zm0 0v-480 480Zm60-120h60v-180h40v120h60v-120h40v180h60v-200q0-17-11.5-28.5T440-600H260q-17 0-28.5 11.5T220-560v200Z"/></svg>`;
+const DYNAMIC_FORM = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M160-520q-33 0-56.5-23.5T80-600v-120q0-33 23.5-56.5T160-800h360v280H160Zm0-80h280v-120H160v120Zm0 440q-33 0-56.5-23.5T80-240v-120q0-33 23.5-56.5T160-440h440v280H160Zm0-80h360v-120H160v120Zm520 80v-360h-80v-280h280l-80 200h80L680-160ZM190-270h60v-60h-60v60Zm0-360h60v-60h-60v60Zm-30 30v-120 120Zm0 360v-120 120Z"/></svg>`;
+const PHOTO = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm40-80h480L570-480 450-320l-90-120-120 160Zm-40 80v-560 560Z"/></svg>`;
+const PRINT = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M640-640v-120H320v120h-80v-200h480v200h-80Zm-480 80h640-640Zm560 100q17 0 28.5-11.5T760-500q0-17-11.5-28.5T720-540q-17 0-28.5 11.5T680-500q0 17 11.5 28.5T720-460Zm-80 260v-160H320v160h320Zm80 80H240v-160H80v-240q0-51 35-85.5t85-34.5h560q51 0 85.5 34.5T880-520v240H720v160Zm80-240v-160q0-17-11.5-28.5T760-560H200q-17 0-28.5 11.5T160-520v160h80v-80h480v80h80Z"/></svg>`;
+const ARCHIVE = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="m480-240 160-160-56-56-64 64v-168h-80v168l-64-64-56 56 160 160ZM200-640v440h560v-440H200Zm0 520q-33 0-56.5-23.5T120-200v-499q0-14 4.5-27t13.5-24l50-61q11-14 27.5-21.5T250-840h460q18 0 34.5 7.5T772-811l50 61q9 11 13.5 24t4.5 27v499q0 33-23.5 56.5T760-120H200Zm16-600h528l-34-40H250l-34 40Zm264 300Z"/></svg>`;
+// Common Icons
+const EDIT = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M200-200h57l391-391-57-57-391 391v57Zm-80 80v-170l528-527q12-11 26.5-17t30.5-6q16 0 31 6t26 18l55 56q12 11 17.5 26t5.5 30q0 16-5.5 30.5T817-647L290-120H120Zm640-584-56-56 56 56Zm-141 85-28-29 57 57-29-28Z"/></svg>`;
+const SETTINGS = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm70-80h79l14-106q31-8 57.5-23.5T639-327l99 41 39-68-86-65q5-14 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5 38.5T427-266l13 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Zm-2-140Z"/></svg>`;
+const SEARCH = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg>`;
+const SEARCH_OFF = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M280-80q-83 0-141.5-58.5T80-280q0-83 58.5-141.5T280-480q83 0 141.5 58.5T480-280q0 83-58.5 141.5T280-80Zm544-40L568-376q-12-13-25.5-26.5T516-428q38-24 61-64t23-88q0-75-52.5-127.5T420-760q-75 0-127.5 52.5T240-580q0 6 .5 11.5T242-557q-18 2-39.5 8T164-535q-2-11-3-22t-1-23q0-109 75.5-184.5T420-840q109 0 184.5 75.5T680-580q0 43-13.5 81.5T629-428l251 252-56 56Zm-615-61 71-71 70 71 29-28-71-71 71-71-28-28-71 71-71-71-28 28 71 71-71 71 28 28Z"/></svg>`;
+const DESCRIPTION = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M320-240h320v-80H320v80Zm0-160h320v-80H320v80ZM240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h320l240 240v480q0 33-23.5 56.5T720-80H240Zm280-520v-200H240v640h480v-440H520ZM240-800v200-200 640-640Z"/></svg>`;
+const CLOSE = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg>`;
+const VERTICAL_ALIGN_TOP = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M160-760v-80h640v80H160Zm280 640v-408L336-424l-56-56 200-200 200 200-56 56-104-104v408h-80Z"/></svg>`;
+const VERTICAL_ALIGN_CENTER = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M440-80v-168l-64 64-56-56 160-160 160 160-56 56-64-64v168h-80ZM160-440v-80h640v80H160Zm320-120L320-720l56-56 64 64v-168h80v168l64-64 56 56-160 160Z"/></svg>`;
+const VERTICAL_ALIGN_BOTTOM = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M160-120v-80h640v80H160Zm320-160L280-480l56-56 104 104v-408h80v408l104-104 56 56-200 200Z"/></svg>`;
+// Custom SVG
+const RESTRICT_EDIT = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" aria-hidden="true">
+  <g transform="translate(10 10) scale(0.8) translate(-10 -10)">
+    <path d="M6.25 16a.75.75 0 1 1 0 1.5H.75a.75.75 0 1 1 0-1.5zm0-5a.75.75 0 1 1 0 1.5H.75a.75.75 0 1 1 0-1.5zm3-5a.75.75 0 0 1 0 1.5H.75a.75.75 0 0 1 0-1.5zm6-5a.75.75 0 1 1 0 1.5H.75a.75.75 0 0 1 0-1.5zm.25 5.5a3.5 3.5 0 0 1 3.143 1.959.75.75 0 0 1-1.36.636A2 2 0 0 0 13.5 10v2H19a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1h-7a1 1 0 0 1-1-1v-5a1 1 0 0 1 1-1v-2l.005-.192A3.5 3.5 0 0 1 15.5 6.5m0 7.5a.5.5 0 0 0-.492.41L15 14.5v2a.5.5 0 0 0 .992.09L16 16.5v-2a.5.5 0 0 0-.5-.5">
+    </path>
+  </g>
+</svg>
+`;
+const TABLE_CELL_PROPERTY = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" aria-hidden="true">
+  <path d="m11.105 18-.17 1H2.5A1.5 1.5 0 0 1 1 17.5v-15A1.5 1.5 0 0 1 2.5 1h15A1.5 1.5 0 0 1 19 2.5v9.975l-.85-.124-.15-.302V8h-5v4h.021l-.172.351-1.916.28-.151.027c-.287.063-.54.182-.755.341L8 13v5zM2 12h5V8H2zm10-4H8v4h4zM2 2v5h5V2zm0 16h5v-5H2zM13 7h5V2h-5zM8 2v5h4V2z" opacity=".6"></path>
+  <path d="m15.5 11.5 1.323 2.68 2.957.43-2.14 2.085.505 2.946L15.5 18.25l-2.645 1.39.505-2.945-2.14-2.086 2.957-.43zM13 6a1 1 0 0 1 1 1v3.172a2 2 0 0 0-.293.443l-.858 1.736-1.916.28-.151.027A1.98 1.98 0 0 0 9.315 14H7a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1zm-1 2H8v4h4z"></path>
+</svg>
+`;
+const TABLE_COLUMN = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" aria-hidden="true">
+  <path d="M2.5 1h15A1.5 1.5 0 0 1 19 2.5v15a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 1 17.5v-15A1.5 1.5 0 0 1 2.5 1M2 2v16h16V2z" opacity=".6"></path>
+  <path d="M18 7v1H2V7zm0 5v1H2v-1z" opacity=".6"></path>
+  <path d="M14 1v18a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1m-2 1H8v4h4zm0 6H8v4h4zm0 6H8v4h4z"></path>
+</svg>
+`;
+const TABLE_MERGE_CELL = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" aria-hidden="true">
+  <path d="M2.5 1h15A1.5 1.5 0 0 1 19 2.5v15a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 1 17.5v-15A1.5 1.5 0 0 1 2.5 1M2 2v16h16V2z" opacity=".6"></path>
+  <path d="M7 2h1v16H7zm5 0h1v7h-1zm6 5v1H2V7zM8 12v1H2v-1z" opacity=".6"></path>
+  <path d="M7 7h12a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1m1 2v9h10V9z"></path>
+</svg>
+`;
+const TABLE_PROPERTY = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" aria-hidden="true">
+  <path d="M8 2v5h4V2h1v5h5v1h-5v4h.021l-.172.351-1.916.28-.151.027c-.287.063-.54.182-.755.341L8 13v5H7v-5H2v-1h5V8H2V7h5V2zm4 6H8v4h4z" opacity=".6"></path>
+  <path d="m15.5 11.5 1.323 2.68 2.957.43-2.14 2.085.505 2.946L15.5 18.25l-2.645 1.39.505-2.945-2.14-2.086 2.957-.43zM17 1a2 2 0 0 1 2 2v9.475l-.85-.124-.857-1.736a2 2 0 0 0-.292-.44L17 3H3v14h7.808l.402.392L10.935 19H3a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2z"></path>
+</svg>
+`;
+const TABLE_ROW = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" aria-hidden="true">
+  <path d="M2.5 1h15A1.5 1.5 0 0 1 19 2.5v15a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 1 17.5v-15A1.5 1.5 0 0 1 2.5 1M2 2v16h16V2z" opacity=".6"></path>
+  <path d="M7 2h1v16H7zm5 0h1v16h-1z" opacity=".6"></path>
+  <path d="M1 6h18a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1m1 2v4h4V8zm6 0v4h4V8zm6 0v4h4V8z"></path>
+</svg>
+`;
+
+/**
+ * Icon registry service for managing SVG icons
+ * Similar to Angular Material's MatIconRegistry
+ */
+class IconRegistryService {
+    sanitizer = inject(DomSanitizer);
+    icons = new Map();
+    constructor() {
+        this.registerDefaultIcons();
+    }
+    /**
+     * Register a new icon with its SVG content
+     */
+    registerIcon(name, svgContent) {
+        if (this.icons.has(name)) {
+            throw new Error(`Icon ${name} already registered`);
+        }
+        this.icons.set(name, svgContent);
+    }
+    /**
+     * Get icon SVG content by name
+     * Returns SafeHtml for use in templates with [innerHTML]
+     */
+    getIcon(name) {
+        const icon = this.icons.get(name);
+        if (!icon) {
+            console.warn(`Icon ${name} not registered`);
+            return this.sanitizer.bypassSecurityTrustHtml(DEFAULT);
+        }
+        return this.sanitizer.bypassSecurityTrustHtml(icon);
+    }
+    /**
+     * Get raw icon SVG string by name
+     * Returns string for direct DOM manipulation
+     */
     getIconString(name) {
         const icon = this.icons.get(name);
         if (!icon) {
@@ -2444,214 +3208,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
           <button documentEngineSelectOption value="arrows">Arrows</button>
           <button documentEngineSelectOption value="symbols">Symbols</button>
           <button documentEngineSelectOption value="punctuation">Punctuation</button>
-        </document-engine-select>
-      </div>
-
-      <!-- Characters Grid -->
-      <div class="special-characters-view__grid-container">
-        <div
-          class="special-characters-view__grid"
-          role="grid"
-          aria-label="Special characters grid"
-          tabindex="-1"
-          (keydown)="onGridKeydown($event)"
-        >
-          <button
-            *ngFor="let char of currentCharacters; let i = index"
-            #charButton
-            type="button"
-            role="gridcell"
-            class="special-characters-view__char-button"
-            (click)="insertCharacter(char.char)"
-            [attr.aria-label]="char.name + (char.code ? ' (' + char.code + ')' : '')"
-            [title]="char.name + (char.code ? ' (' + char.code + ')' : '')"
-            [attr.data-index]="i"
-          >
-            {{ char.char }}
-          </button>
-        </div>
-      </div>
-
-      <!-- Actions -->
-      <div class="special-characters-view__actions">
-        <button type="button" documentEngineButton variant="secondary" (click)="close?.()">Close</button>
-      </div>
-    </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".special-characters-view{display:flex;flex-direction:column;width:100%}.special-characters-view__header{padding:.5rem 1rem;border-bottom:1px solid var(--border);font-weight:500}.special-characters-view__select{padding:.75rem;width:100%}.special-characters-view__grid-container{padding:.75rem;overflow-y:auto;max-height:20rem}.special-characters-view__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:.25rem}.special-characters-view__char-button{width:2.5rem;height:2.5rem;border-radius:.25rem;border:1px solid var(--border);background-color:transparent;cursor:pointer;font-size:1.125rem;font-weight:500;display:flex;align-items:center;justify-content:center;transition:background-color .2s,color .2s;outline:none}.special-characters-view__char-button:hover{background-color:var(--accent);color:var(--accent-foreground)}.special-characters-view__char-button:focus{outline:none;box-shadow:0 0 0 2px var(--ring);box-shadow-offset:2px}.special-characters-view__actions{display:flex;justify-content:flex-end;padding:.75rem;border-top:1px solid var(--border)}\n"] }]
-        }], propDecorators: { charButtons: [{
-                type: ViewChildren,
-                args: ['charButton']
-            }] } });
-
-const SpecialCharactersBubbleConfig = {
-    pluginKey: 'SpecialCharactersBubbleMenu',
-    views: [
-        {
-            id: 'characters',
-            component: SpecialCharactersViewComponent,
-            label: 'Special Characters',
-            isDefault: true,
-        },
-    ],
-};
-
-/**
- * Directive for positioning a popover/dropdown relative to a trigger element using floating-ui
- * Handles positioning, visibility, and cleanup automatically
- *
- * Usage:
- * <button #trigger>Open</button>
- * <div [popover]="trigger" [isOpen]="isOpen">
- *   Content
- * </div>
- */
-class PopoverDirective {
-    elRef = inject(ElementRef);
-    cdr = inject(ChangeDetectorRef);
-    /**
-     * The trigger element reference (ElementRef or HTMLElement)
-     */
-    popover;
-    /**
-     * Whether the popover is open
-     */
-    isOpen = false;
-    /**
-     * Placement of the popover relative to trigger
-     */
-    placement = 'bottom-start';
-    /**
-     * Offset from trigger
-     */
-    offset = 8;
-    /**
-     * Padding for flip/shift middleware
-     */
-    padding = 8;
-    cleanupAutoUpdate;
-    isPositioned = false;
-    viewInitialized = false;
-    retryCount = 0;
-    maxRetries = 10;
-    ngAfterViewInit() {
-        this.viewInitialized = true;
-        this.updateVisibility();
-    }
-    ngOnChanges(changes) {
-        if (this.viewInitialized && (changes['isOpen'] || changes['popover'])) {
-            this.updateVisibility();
-        }
-    }
-    ngOnDestroy() {
-        this.cleanup();
-    }
-    updateVisibility() {
-        if (!this.viewInitialized)
-            return;
-        if (this.isOpen && this.popover) {
-            // Wait for next tick to ensure element is rendered
-            setTimeout(() => {
-                this.setupFloating();
-            });
-        }
-        else {
-            this.isPositioned = false;
-            this.cleanup();
-        }
-    }
-    setupFloating() {
-        // Reset retry count on each attempt
-        this.retryCount = 0;
-        this._setupFloatingInternal();
-    }
-    _setupFloatingInternal() {
-        let triggerEl;
-        if (!this.popover) {
-            if (this.retryCount < this.maxRetries) {
-                this.retryCount++;
-                setTimeout(() => this._setupFloatingInternal(), 10);
-            }
-            return;
-        }
-        if (this.popover instanceof ElementRef) {
-            triggerEl = this.popover.nativeElement;
-            // If ElementRef exists but nativeElement is not yet available, retry
-            if (!triggerEl) {
-                if (this.retryCount < this.maxRetries) {
-                    this.retryCount++;
-                    setTimeout(() => this._setupFloatingInternal(), 10);
-                }
-                return;
-            }
-        }
-        else {
-            triggerEl = this.popover;
-        }
-        const dropdownEl = this.elRef.nativeElement;
-        if (!triggerEl || !dropdownEl) {
-            // Retry if elements not ready
-            if (this.retryCount < this.maxRetries) {
-                this.retryCount++;
-                setTimeout(() => this._setupFloatingInternal(), 10);
-            }
-            return;
-        }
-        // Compute initial position before showing dropdown to prevent flash
-        computePosition(triggerEl, dropdownEl, {
-            placement: this.placement,
-            middleware: [offset(this.offset), flip(), shift({ padding: this.padding })],
-        })
-            .then(({ x, y }) => {
-            // Set position first, then make visible
-            Object.assign(dropdownEl.style, { left: `${x}px`, top: `${y}px` });
-            this.isPositioned = true;
-            // Trigger change detection to update visibility binding
-            this.cdr.markForCheck();
-        })
-            .catch((error) => {
-            console.error('[PopoverDirective] Error computing position', error);
-        });
-        // Use autoUpdate to automatically reposition on scroll/resize
-        this.cleanupAutoUpdate = autoUpdate(triggerEl, dropdownEl, () => {
-            computePosition(triggerEl, dropdownEl, {
-                placement: this.placement,
-                middleware: [offset(this.offset), flip(), shift({ padding: this.padding })],
-            }).then(({ x, y }) => {
-                Object.assign(dropdownEl.style, { left: `${x}px`, top: `${y}px` });
-            });
-        });
-    }
-    cleanup() {
-        if (this.cleanupAutoUpdate) {
-            this.cleanupAutoUpdate();
-            this.cleanupAutoUpdate = undefined;
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: PopoverDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.10", type: PopoverDirective, isStandalone: true, selector: "[popover]", inputs: { popover: "popover", isOpen: "isOpen", placement: "placement", offset: "offset", padding: "padding" }, host: { properties: { "style.position": "\"fixed\"", "style.visibility": "isPositioned ? \"visible\" : \"hidden\"" } }, usesOnChanges: true, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: PopoverDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[popover]',
-                    standalone: true,
-                    host: {
-                        '[style.position]': '"fixed"',
-                        '[style.visibility]': 'isPositioned ? "visible" : "hidden"',
-                    },
-                }]
-        }], propDecorators: { popover: [{
-                type: Input
-            }], isOpen: [{
-                type: Input
-            }], placement: [{
-                type: Input
-            }], offset: [{
-                type: Input
-            }], padding: [{
-                type: Input
+        </document-engine-select>
+      </div>
+
+      <!-- Characters Grid -->
+      <div class="special-characters-view__grid-container">
+        <div
+          class="special-characters-view__grid"
+          role="grid"
+          aria-label="Special characters grid"
+          tabindex="-1"
+          (keydown)="onGridKeydown($event)"
+        >
+          <button
+            *ngFor="let char of currentCharacters; let i = index"
+            #charButton
+            type="button"
+            role="gridcell"
+            class="special-characters-view__char-button"
+            (click)="insertCharacter(char.char)"
+            [attr.aria-label]="char.name + (char.code ? ' (' + char.code + ')' : '')"
+            [title]="char.name + (char.code ? ' (' + char.code + ')' : '')"
+            [attr.data-index]="i"
+          >
+            {{ char.char }}
+          </button>
+        </div>
+      </div>
+
+      <!-- Actions -->
+      <div class="special-characters-view__actions">
+        <button type="button" documentEngineButton variant="secondary" (click)="close?.()">Close</button>
+      </div>
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".special-characters-view{display:flex;flex-direction:column;width:100%}.special-characters-view__header{padding:.5rem 1rem;border-bottom:1px solid var(--border);font-weight:500}.special-characters-view__select{padding:.75rem;width:100%}.special-characters-view__grid-container{padding:.75rem;overflow-y:auto;max-height:20rem}.special-characters-view__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:.25rem}.special-characters-view__char-button{width:2.5rem;height:2.5rem;border-radius:.25rem;border:1px solid var(--border);background-color:transparent;cursor:pointer;font-size:1.125rem;font-weight:500;display:flex;align-items:center;justify-content:center;transition:background-color .2s,color .2s;outline:none}.special-characters-view__char-button:hover{background-color:var(--accent);color:var(--accent-foreground)}.special-characters-view__char-button:focus{outline:none;box-shadow:0 0 0 2px var(--ring);box-shadow-offset:2px}.special-characters-view__actions{display:flex;justify-content:flex-end;padding:.75rem;border-top:1px solid var(--border)}\n"] }]
+        }], propDecorators: { charButtons: [{
+                type: ViewChildren,
+                args: ['charButton']
             }] } });
 
+const SpecialCharactersBubbleConfig = {
+    pluginKey: 'SpecialCharactersBubbleMenu',
+    views: [
+        {
+            id: 'characters',
+            component: SpecialCharactersViewComponent,
+            label: 'Special Characters',
+            isDefault: true,
+        },
+    ],
+};
+
 /**
  * Toggle button option directive
  */
@@ -4175,597 +4782,342 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
                 ></document-engine-color-picker>
               </div>
             </div>
-          </div>
-        </div>
-
-        <div class="table-style-view__section">
-          <div class="table-style-view__section-label">Background</div>
-          <div class="table-style-view__field table-style-view__field--color">
-            <div class="table-style-view__field-label">Color</div>
-
-            <div class="table-style-view__color-input">
-              <input documentEngineInput [value]="tableBg" readonly />
-
-              <button
-                *ngIf="tableBg"
-                type="button"
-                documentEngineButton
-                size="icon"
-                variant="ghost"
-                class="table-style-view__color-clear"
-                (click)="tableBg = null"
-              >
-                <document-engine-icon name="close"></document-engine-icon>
-              </button>
-
-              <button
-                #bgColorTrigger
-                type="button"
-                class="table-style-view__color-swatch"
-                [style.background-color]="tableBg || 'transparent'"
-                (click)="toggleColorPicker('bg')"
-                title="Pick color"
-              >
-                <div *ngIf="tableBg === 'transparent'" class="table-style-view__color-checker"></div>
-              </button>
-            </div>
-
-            <!-- Color picker for background -->
-            <div
-              *ngIf="showColorPicker === 'bg'"
-              [popover]="bgColorTrigger"
-              [isOpen]="showColorPicker === 'bg'"
-              class="table-style-view__color-picker-dropdown"
-              (click)="$event.stopPropagation()"
-            >
-              <document-engine-color-picker
-                [colorPalette]="colorPalette"
-                [activeColor]="tableBgObj"
-                (colorSelected)="onTableBgSelected($event)"
-                (colorRemoved)="onTableBgRemoved()"
-              ></document-engine-color-picker>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Actions -->
-      <div class="table-style-view__actions">
-        <button documentEngineButton variant="ghost" (click)="cancel()">Cancel</button>
-        <button documentEngineButton variant="default" (click)="onSave()">Save</button>
-      </div>
-    </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".table-style-view{display:flex;flex-direction:column;width:32.5rem}.table-style-view__header{padding:.5rem 1rem;border-bottom:1px solid var(--border);font-weight:500}.table-style-view__content{display:flex;flex-direction:column;gap:1rem;padding:.75rem}.table-style-view__section{display:flex;flex-direction:column;gap:.5rem}.table-style-view__section-label{font-weight:700;color:var(--muted-foreground)}.table-style-view__border-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:.5rem}.table-style-view__field{display:flex;flex-direction:column;gap:.25rem;grid-column:span 2}.table-style-view__field--color{grid-column:span 4;position:relative}.table-style-view__field-label{font-size:.75rem;color:var(--muted-foreground)}.table-style-view__color-input{position:relative;display:flex;align-items:center;gap:.25rem}.table-style-view__color-input input{flex:1;padding-right:3rem}.table-style-view__color-clear{position:absolute;right:2.5rem;z-index:1}.table-style-view__color-swatch{position:absolute;right:.5rem;width:1.75rem;height:1.75rem;border-radius:.25rem;border:1px solid var(--border);cursor:pointer;transition:transform .2s;overflow:hidden;z-index:2}.table-style-view__color-swatch:hover{transform:scale(1.1)}.table-style-view__color-checker{position:absolute;inset:0;opacity:.3;background-image:repeating-conic-gradient(#ccc 0deg 90deg,#fff 90deg 180deg);background-size:4px 4px}.table-style-view__color-picker-dropdown{z-index:50;background:var(--popover);border:1px solid var(--border);border-radius:.5rem;box-shadow:var(--shadow-elevation-2);padding:.5rem}.table-style-view__actions{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;padding:.75rem;border-top:1px solid var(--border)}\n"] }]
-        }], propDecorators: { borderColorTrigger: [{
-                type: ViewChild,
-                args: ['borderColorTrigger', { static: false, read: ElementRef }]
-            }], bgColorTrigger: [{
-                type: ViewChild,
-                args: ['bgColorTrigger', { static: false, read: ElementRef }]
-            }] } });
-
-const TableBubbleConfig = {
-    props: {
-        pluginKey: 'TableBubbleMenu',
-        mountTo: 'table',
-    },
-    target: {
-        kind: 'node',
-        name: ['tableCell', 'tableHeader'],
-        allowEmptySelection: true,
-        requireFocus: false,
-    },
-    views: [
-        {
-            id: 'main',
-            component: TableMainViewComponent,
-            label: 'Table',
-            isDefault: true,
-        },
-        {
-            id: 'table-style',
-            component: TableStyleViewComponent,
-            label: 'Table Properties',
-        },
-        {
-            id: 'cell-style',
-            component: TableCellStyleViewComponent,
-            label: 'Cell Properties',
-        },
-    ],
-};
-const TableCreateBubbleConfig = {
-    pluginKey: 'TableCreateBubbleMenu',
-    views: [
-        {
-            id: 'create',
-            component: TableCreateViewComponent,
-            label: 'Create Table',
-            isDefault: true,
-        },
-    ],
-};
-
-/**
- * Template view for bubble menu
- * Shows templates for insertion into the editor
- * Replaces entire editor content with selected template
- */
-class TemplateViewComponent {
-    cdr = inject(ChangeDetectorRef);
-    editor;
-    close;
-    goBack;
-    navigateTo;
-    searchQuery = '';
-    originalTemplates = [];
-    // Reactive form control for search
-    searchControl = new FormControl('');
-    destroy$ = new Subject();
-    onActivate(attrs) {
-        const templates = attrs['templates'];
-        if (!templates)
-            throw new Error('Templates are required');
-        this.originalTemplates = templates;
-        this.searchQuery = '';
-        this.searchControl.setValue('');
-        this.cdr.markForCheck();
-    }
-    ngOnInit() {
-        // Set up reactive form subscription with debounce
-        this.searchControl.valueChanges
-            .pipe(debounceTime(200), distinctUntilChanged(), takeUntil(this.destroy$))
-            .subscribe((value) => {
-            this.searchQuery = value || '';
-            this.cdr.markForCheck();
-        });
-    }
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
-    }
-    /**
-     * Getter that filters templates based on search query
-     */
-    get filteredTemplates() {
-        const query = this.searchQuery.toLowerCase().trim();
-        if (!query)
-            return this.originalTemplates;
-        // Filter templates based on search query
-        return this.originalTemplates.filter((template) => template.title.toLowerCase().includes(query) || template.description?.toLowerCase().includes(query));
-    }
-    /**
-     * Insert a template into the editor, replacing entire content
-     */
-    insertTemplate(template) {
-        if (!this.editor)
-            return;
-        // Replace entire editor content with template data
-        this.editor.chain().focus().setContent(template.data).run();
-        this.close?.();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: TemplateViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: TemplateViewComponent, isStandalone: true, selector: "document-engine-template-view", ngImport: i0, template: `
-    <div class="template-view">
-      <!-- Title -->
-      <div class="template-view__header">Templates</div>
-
-      <!-- Search Bar -->
-      <div class="template-view__search">
-        <div class="template-view__search-field">
-          <label documentEngineLabel for="search-input">Search templates</label>
-          <div class="template-view__search-input-wrapper">
-            <document-engine-icon name="search" class="template-view__search-icon"></document-engine-icon>
-            <input
-              documentEngineInput
-              id="search-input"
-              [formControl]="searchControl"
-              placeholder="Search templates..."
-              aria-label="Search templates"
-            />
-          </div>
-        </div>
-      </div>
-
-      <!-- Templates List -->
-      <div class="template-view__list-container">
-        <div *ngIf="filteredTemplates.length > 0; else noResults" class="template-view__list">
-          <button
-            *ngFor="let template of filteredTemplates"
-            type="button"
-            class="template-view__template-item"
-            (click)="insertTemplate(template)"
-            [attr.aria-label]="template.title + (template.description ? ' - ' + template.description : '')"
-            [title]="template.description || template.title"
-          >
-            <div class="template-view__template-title">{{ template.title }}</div>
-            <div *ngIf="template.description" class="template-view__template-description">
-              {{ template.description }}
-            </div>
-          </button>
+          </div>
         </div>
 
-        <ng-template #noResults>
-          <div class="template-view__empty">
-            <document-engine-icon name="search_off" class="template-view__empty-icon"></document-engine-icon>
-            <div class="template-view__empty-text">No templates found matching "{{ searchQuery }}"</div>
-          </div>
-        </ng-template>
-      </div>
+        <div class="table-style-view__section">
+          <div class="table-style-view__section-label">Background</div>
+          <div class="table-style-view__field table-style-view__field--color">
+            <div class="table-style-view__field-label">Color</div>
 
-      <!-- Actions -->
-      <div class="template-view__actions">
-        <button type="button" documentEngineButton variant="secondary" (click)="close?.()">Close</button>
-      </div>
-    </div>
-  `, isInline: true, styles: [".template-view{display:flex;flex-direction:column;width:100%;max-width:28rem}.template-view__header{padding:.5rem 1rem;border-bottom:1px solid var(--border);font-weight:500}.template-view__search{padding:.75rem;border-bottom:1px solid var(--border)}.template-view__search-field{display:flex;flex-direction:column;gap:.25rem;width:100%}.template-view__search-input-wrapper{position:relative;display:flex;align-items:center}.template-view__search-icon{position:absolute;left:.75rem;color:var(--muted-foreground);pointer-events:none;z-index:1}.template-view__search-input-wrapper input{padding-left:2.5rem}.template-view__list-container{overflow-y:auto;max-height:20rem}.template-view__list{padding:.5rem 0}.template-view__template-item{display:flex;flex-direction:column;align-items:flex-start;padding:.75rem;width:100%;text-align:left;background-color:transparent;border:none;cursor:pointer;transition:background-color .2s;outline:none}.template-view__template-item:hover{background-color:var(--accent);color:var(--accent-foreground)}.template-view__template-item:focus{outline:none;box-shadow:0 0 0 2px var(--ring);box-shadow-offset:2px}.template-view__template-title{font-weight:500;font-size:.875rem;color:var(--foreground);margin-bottom:.25rem}.template-view__template-description{font-size:.75rem;color:var(--muted-foreground);line-height:1.4}.template-view__empty{padding:2rem 1rem;text-align:center;color:var(--muted-foreground)}.template-view__empty-icon{margin-bottom:.5rem;font-size:2rem;opacity:.5}.template-view__empty-text{font-size:.875rem}.template-view__actions{display:flex;justify-content:flex-end;padding:.75rem;border-top:1px solid var(--border)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: ButtonDirective, selector: "button[documentEngineButton]", inputs: ["variant", "size"] }, { kind: "directive", type: InputDirective, selector: "input[documentEngineInput]", inputs: ["class"] }, { kind: "directive", type: LabelDirective, selector: "label[documentEngineLabel]", inputs: ["class"] }, { kind: "component", type: IconComponent, selector: "document-engine-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: TemplateViewComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'document-engine-template-view', standalone: true, imports: [CommonModule, ReactiveFormsModule, ButtonDirective, InputDirective, LabelDirective, IconComponent], template: `
-    <div class="template-view">
-      <!-- Title -->
-      <div class="template-view__header">Templates</div>
+            <div class="table-style-view__color-input">
+              <input documentEngineInput [value]="tableBg" readonly />
 
-      <!-- Search Bar -->
-      <div class="template-view__search">
-        <div class="template-view__search-field">
-          <label documentEngineLabel for="search-input">Search templates</label>
-          <div class="template-view__search-input-wrapper">
-            <document-engine-icon name="search" class="template-view__search-icon"></document-engine-icon>
-            <input
-              documentEngineInput
-              id="search-input"
-              [formControl]="searchControl"
-              placeholder="Search templates..."
-              aria-label="Search templates"
-            />
-          </div>
-        </div>
-      </div>
+              <button
+                *ngIf="tableBg"
+                type="button"
+                documentEngineButton
+                size="icon"
+                variant="ghost"
+                class="table-style-view__color-clear"
+                (click)="tableBg = null"
+              >
+                <document-engine-icon name="close"></document-engine-icon>
+              </button>
 
-      <!-- Templates List -->
-      <div class="template-view__list-container">
-        <div *ngIf="filteredTemplates.length > 0; else noResults" class="template-view__list">
-          <button
-            *ngFor="let template of filteredTemplates"
-            type="button"
-            class="template-view__template-item"
-            (click)="insertTemplate(template)"
-            [attr.aria-label]="template.title + (template.description ? ' - ' + template.description : '')"
-            [title]="template.description || template.title"
-          >
-            <div class="template-view__template-title">{{ template.title }}</div>
-            <div *ngIf="template.description" class="template-view__template-description">
-              {{ template.description }}
+              <button
+                #bgColorTrigger
+                type="button"
+                class="table-style-view__color-swatch"
+                [style.background-color]="tableBg || 'transparent'"
+                (click)="toggleColorPicker('bg')"
+                title="Pick color"
+              >
+                <div *ngIf="tableBg === 'transparent'" class="table-style-view__color-checker"></div>
+              </button>
             </div>
-          </button>
-        </div>
 
-        <ng-template #noResults>
-          <div class="template-view__empty">
-            <document-engine-icon name="search_off" class="template-view__empty-icon"></document-engine-icon>
-            <div class="template-view__empty-text">No templates found matching "{{ searchQuery }}"</div>
+            <!-- Color picker for background -->
+            <div
+              *ngIf="showColorPicker === 'bg'"
+              [popover]="bgColorTrigger"
+              [isOpen]="showColorPicker === 'bg'"
+              class="table-style-view__color-picker-dropdown"
+              (click)="$event.stopPropagation()"
+            >
+              <document-engine-color-picker
+                [colorPalette]="colorPalette"
+                [activeColor]="tableBgObj"
+                (colorSelected)="onTableBgSelected($event)"
+                (colorRemoved)="onTableBgRemoved()"
+              ></document-engine-color-picker>
+            </div>
           </div>
-        </ng-template>
+        </div>
       </div>
 
       <!-- Actions -->
-      <div class="template-view__actions">
-        <button type="button" documentEngineButton variant="secondary" (click)="close?.()">Close</button>
+      <div class="table-style-view__actions">
+        <button documentEngineButton variant="ghost" (click)="cancel()">Cancel</button>
+        <button documentEngineButton variant="default" (click)="onSave()">Save</button>
       </div>
     </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".template-view{display:flex;flex-direction:column;width:100%;max-width:28rem}.template-view__header{padding:.5rem 1rem;border-bottom:1px solid var(--border);font-weight:500}.template-view__search{padding:.75rem;border-bottom:1px solid var(--border)}.template-view__search-field{display:flex;flex-direction:column;gap:.25rem;width:100%}.template-view__search-input-wrapper{position:relative;display:flex;align-items:center}.template-view__search-icon{position:absolute;left:.75rem;color:var(--muted-foreground);pointer-events:none;z-index:1}.template-view__search-input-wrapper input{padding-left:2.5rem}.template-view__list-container{overflow-y:auto;max-height:20rem}.template-view__list{padding:.5rem 0}.template-view__template-item{display:flex;flex-direction:column;align-items:flex-start;padding:.75rem;width:100%;text-align:left;background-color:transparent;border:none;cursor:pointer;transition:background-color .2s;outline:none}.template-view__template-item:hover{background-color:var(--accent);color:var(--accent-foreground)}.template-view__template-item:focus{outline:none;box-shadow:0 0 0 2px var(--ring);box-shadow-offset:2px}.template-view__template-title{font-weight:500;font-size:.875rem;color:var(--foreground);margin-bottom:.25rem}.template-view__template-description{font-size:.75rem;color:var(--muted-foreground);line-height:1.4}.template-view__empty{padding:2rem 1rem;text-align:center;color:var(--muted-foreground)}.template-view__empty-icon{margin-bottom:.5rem;font-size:2rem;opacity:.5}.template-view__empty-text{font-size:.875rem}.template-view__actions{display:flex;justify-content:flex-end;padding:.75rem;border-top:1px solid var(--border)}\n"] }]
-        }] });
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".table-style-view{display:flex;flex-direction:column;width:32.5rem}.table-style-view__header{padding:.5rem 1rem;border-bottom:1px solid var(--border);font-weight:500}.table-style-view__content{display:flex;flex-direction:column;gap:1rem;padding:.75rem}.table-style-view__section{display:flex;flex-direction:column;gap:.5rem}.table-style-view__section-label{font-weight:700;color:var(--muted-foreground)}.table-style-view__border-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:.5rem}.table-style-view__field{display:flex;flex-direction:column;gap:.25rem;grid-column:span 2}.table-style-view__field--color{grid-column:span 4;position:relative}.table-style-view__field-label{font-size:.75rem;color:var(--muted-foreground)}.table-style-view__color-input{position:relative;display:flex;align-items:center;gap:.25rem}.table-style-view__color-input input{flex:1;padding-right:3rem}.table-style-view__color-clear{position:absolute;right:2.5rem;z-index:1}.table-style-view__color-swatch{position:absolute;right:.5rem;width:1.75rem;height:1.75rem;border-radius:.25rem;border:1px solid var(--border);cursor:pointer;transition:transform .2s;overflow:hidden;z-index:2}.table-style-view__color-swatch:hover{transform:scale(1.1)}.table-style-view__color-checker{position:absolute;inset:0;opacity:.3;background-image:repeating-conic-gradient(#ccc 0deg 90deg,#fff 90deg 180deg);background-size:4px 4px}.table-style-view__color-picker-dropdown{z-index:50;background:var(--popover);border:1px solid var(--border);border-radius:.5rem;box-shadow:var(--shadow-elevation-2);padding:.5rem}.table-style-view__actions{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;padding:.75rem;border-top:1px solid var(--border)}\n"] }]
+        }], propDecorators: { borderColorTrigger: [{
+                type: ViewChild,
+                args: ['borderColorTrigger', { static: false, read: ElementRef }]
+            }], bgColorTrigger: [{
+                type: ViewChild,
+                args: ['bgColorTrigger', { static: false, read: ElementRef }]
+            }] } });
 
-const TemplateBubbleConfig = {
-    pluginKey: 'TemplateBubbleMenu',
-    maxWidth: '400px',
-    width: '400px',
+const TableBubbleConfig = {
+    props: {
+        pluginKey: 'TableBubbleMenu',
+        mountTo: 'table',
+    },
+    target: {
+        kind: 'node',
+        name: ['tableCell', 'tableHeader'],
+        allowEmptySelection: true,
+        requireFocus: false,
+    },
     views: [
         {
-            id: 'templates',
-            component: TemplateViewComponent,
-            label: 'Templates',
+            id: 'main',
+            component: TableMainViewComponent,
+            label: 'Table',
             isDefault: true,
         },
-    ],
-};
-
-const FONT_SIZE_OPTIONS = [
-    { value: '12px', label: '12px' },
-    { value: '14px', label: '14px' },
-    { value: '16px', label: '16px' },
-    { value: '18px', label: '18px' },
-    { value: '20px', label: '20px' },
-];
-const LINE_HEIGHT_OPTIONS = [
-    { value: null, label: 'Default' },
-    { value: '1', label: '1' },
-    { value: '1.5', label: '1.5' },
-    { value: '2', label: '2' },
-    { value: '2.5', label: '2.5' },
-    { value: '3', label: '3' },
-];
-const TEXT_CASE_OPTIONS = [
-    { value: 'uppercase', label: 'UPPERCASE' },
-    { value: 'lowercase', label: 'lowercase' },
-    { value: 'capitalize', label: 'Capitalize' },
-];
-const HEADING_OPTIONS = [
-    { value: null, label: 'Normal text', class: '' },
-    { value: 1, label: 'Heading 1', class: 'h1' },
-    { value: 2, label: 'Heading 2', class: 'h2' },
-    { value: 3, label: 'Heading 3', class: 'h3' },
-];
-const TEXT_ALIGN_OPTIONS = [
-    { value: 'left', label: 'Align Left', icon: 'format_align_left' },
-    { value: 'center', label: 'Align Center', icon: 'format_align_center' },
-    { value: 'right', label: 'Align Right', icon: 'format_align_right' },
-    { value: 'justify', label: 'Align Justify', icon: 'format_align_justify' },
-];
-
-const LIST_STYLE_OPTIONS = [
-    { value: 'decimal', label: 'Decimal', example: '1.' },
-    { value: 'lower-alpha-dot', label: 'Lower Alpha', example: 'a.' },
-    { value: 'lower-alpha-parens', label: 'Lower Alpha (Parentheses)', example: '(a)' },
-    { value: 'lower-roman-parens', label: 'Lower Roman', example: '(i)' },
-];
-
-/**
- * Service to manage focus trapping within an element
- * Traps keyboard focus inside a container element for accessibility
- */
-class FocusTrapService {
-    document = inject(DOCUMENT);
-    activeTraps = new Map();
-    /**
-     * Attach focus trap to an element
-     * @param element The container element to trap focus within
-     * @param autoFocus Whether to automatically focus the first focusable element
-     */
-    attach(element, autoFocus = true) {
-        if (!element)
-            return;
-        // Detach existing trap if any
-        this.detach(element);
-        // Get all focusable elements within the container
-        const focusableSelectors = [
-            'a[href]',
-            'button:not([disabled])',
-            'textarea:not([disabled])',
-            'input:not([disabled])',
-            'select:not([disabled])',
-            '[tabindex]:not([tabindex="-1"])',
-        ].join(', ');
-        const focusableElements = Array.from(element.querySelectorAll(focusableSelectors));
-        if (focusableElements.length === 0)
-            return;
-        const firstFocusableElement = focusableElements[0];
-        const lastFocusableElement = focusableElements[focusableElements.length - 1];
-        // Focus the first element if requested
-        if (autoFocus && firstFocusableElement) {
-            setTimeout(() => {
-                firstFocusableElement.focus();
-            }, 0);
-        }
-        // Handle Tab key to trap focus
-        const handler = (event) => {
-            if (event.key !== 'Tab')
-                return;
-            if (!element.contains(this.document.activeElement)) {
-                event.preventDefault();
-                if (event.shiftKey) {
-                    lastFocusableElement?.focus();
-                }
-                else {
-                    firstFocusableElement?.focus();
-                }
-                return;
-            }
-            if (event.shiftKey) {
-                // Shift + Tab: going backwards
-                if (this.document.activeElement === firstFocusableElement) {
-                    event.preventDefault();
-                    lastFocusableElement?.focus();
-                }
-            }
-            else {
-                // Tab: going forwards
-                if (this.document.activeElement === lastFocusableElement) {
-                    event.preventDefault();
-                    firstFocusableElement?.focus();
-                }
-            }
-        };
-        element.addEventListener('keydown', handler);
-        this.activeTraps.set(element, {
-            handler,
-            firstElement: firstFocusableElement,
-            lastElement: lastFocusableElement,
+        {
+            id: 'table-style',
+            component: TableStyleViewComponent,
+            label: 'Table Properties',
+        },
+        {
+            id: 'cell-style',
+            component: TableCellStyleViewComponent,
+            label: 'Cell Properties',
+        },
+    ],
+};
+const TableCreateBubbleConfig = {
+    pluginKey: 'TableCreateBubbleMenu',
+    views: [
+        {
+            id: 'create',
+            component: TableCreateViewComponent,
+            label: 'Create Table',
+            isDefault: true,
+        },
+    ],
+};
+
+/**
+ * Template view for bubble menu
+ * Shows templates for insertion into the editor
+ * Replaces entire editor content with selected template
+ */
+class TemplateViewComponent {
+    cdr = inject(ChangeDetectorRef);
+    editor;
+    close;
+    goBack;
+    navigateTo;
+    searchQuery = '';
+    originalTemplates = [];
+    // Reactive form control for search
+    searchControl = new FormControl('');
+    destroy$ = new Subject();
+    onActivate(attrs) {
+        const templates = attrs['templates'];
+        if (!templates)
+            throw new Error('Templates are required');
+        this.originalTemplates = templates;
+        this.searchQuery = '';
+        this.searchControl.setValue('');
+        this.cdr.markForCheck();
+    }
+    ngOnInit() {
+        // Set up reactive form subscription with debounce
+        this.searchControl.valueChanges
+            .pipe(debounceTime(200), distinctUntilChanged(), takeUntil(this.destroy$))
+            .subscribe((value) => {
+            this.searchQuery = value || '';
+            this.cdr.markForCheck();
         });
     }
-    /**
-     * Detach focus trap from an element
-     * @param element The element to remove focus trap from
-     */
-    detach(element) {
-        if (!element)
-            return;
-        const trap = this.activeTraps.get(element);
-        if (trap) {
-            element.removeEventListener('keydown', trap.handler);
-            this.activeTraps.delete(element);
-        }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
     }
     /**
-     * Detach all active focus traps
+     * Getter that filters templates based on search query
      */
-    detachAll() {
-        this.activeTraps.forEach((trap, element) => {
-            element.removeEventListener('keydown', trap.handler);
-        });
-        this.activeTraps.clear();
+    get filteredTemplates() {
+        const query = this.searchQuery.toLowerCase().trim();
+        if (!query)
+            return this.originalTemplates;
+        // Filter templates based on search query
+        return this.originalTemplates.filter((template) => template.title.toLowerCase().includes(query) || template.description?.toLowerCase().includes(query));
     }
     /**
-     * Re-attach focus trap to an element (useful when content changes)
-     * @param element The element to re-attach focus trap to
-     * @param autoFocus Whether to automatically focus the first focusable element
+     * Insert a template into the editor, replacing entire content
      */
-    reattach(element, autoFocus = false) {
-        this.detach(element);
-        this.attach(element, autoFocus);
+    insertTemplate(template) {
+        if (!this.editor)
+            return;
+        // Replace entire editor content with template data
+        this.editor.chain().focus().setContent(template.data).run();
+        this.close?.();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: FocusTrapService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: FocusTrapService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: FocusTrapService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: TemplateViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: TemplateViewComponent, isStandalone: true, selector: "document-engine-template-view", ngImport: i0, template: `
+    <div class="template-view">
+      <!-- Title -->
+      <div class="template-view__header">Templates</div>
 
-function shouldShowFnFactory(params) {
-    const { editor, target, forceOpen } = params;
-    const requireFocus = target.requireFocus !== false;
-    const allowEmptySelection = target.allowEmptySelection === true;
-    return () => {
-        if (forceOpen())
-            return true;
-        if (requireFocus && !editor.isFocused)
-            return false;
-        // Avoid showing during drag/resize
-        const dragging = editor.isDragging;
-        if (dragging)
-            return false;
-        // Avoid showing when selection is empty and mark is required
-        if (!allowEmptySelection && editor.state.selection.empty && target.kind === 'mark')
-            return false;
-        // Avoid showing when extension is not active
-        const active = Array.isArray(target.name)
-            ? target.name.some((name) => editor.isActive(name))
-            : editor.isActive(target.name);
-        if (!active)
-            return false;
-        // Avoid showing when extra predicate is not met
-        if (target.extraPredicate && !target.extraPredicate(editor))
-            return false;
-        return true;
-    };
-}
-function selectionChangeHandler(params) {
-    const { editor, target, onActive, onInactive, listenOnUpdate } = params;
-    const run = () => {
-        const isActive = Array.isArray(target.name)
-            ? target.name.some((name) => editor.isActive(name))
-            : editor.isActive(target.name);
-        if (!isActive)
-            return onInactive();
-        const activeName = Array.isArray(target.name) ? target.name.find((name) => editor.isActive(name)) : target.name;
-        const attrs = target.kind === 'mark'
-            ? (editor.getAttributes(activeName) ?? {})
-            : (editor.state.selection.node?.attrs ?? {});
-        onActive(attrs);
-    };
-    const onSelection = () => run();
-    const onUpdate = () => run();
-    editor.on('selectionUpdate', onSelection);
-    if (listenOnUpdate)
-        editor.on('update', onUpdate);
-    run(); // initial sync
-    return () => {
-        editor.off('selectionUpdate', onSelection);
-        if (listenOnUpdate)
-            editor.off('update', onUpdate);
-    };
-}
+      <!-- Search Bar -->
+      <div class="template-view__search">
+        <div class="template-view__search-field">
+          <label documentEngineLabel for="search-input">Search templates</label>
+          <div class="template-view__search-input-wrapper">
+            <document-engine-icon name="search" class="template-view__search-icon"></document-engine-icon>
+            <input
+              documentEngineInput
+              id="search-input"
+              [formControl]="searchControl"
+              placeholder="Search templates..."
+              aria-label="Search templates"
+            />
+          </div>
+        </div>
+      </div>
 
-class TiptapBubbleMenuDirective {
-    elRef = inject(ElementRef);
-    props;
-    editor;
-    mountTo;
-    shouldShow;
-    ngOnInit() {
-        const editor = this.editor;
-        if (!editor)
-            throw new Error('Required: Input `editor`');
-        const bubbleMenuElement = this.elRef.nativeElement;
-        bubbleMenuElement.style.visibility = 'hidden';
-        bubbleMenuElement.style.position = 'absolute';
-        // Prevent editor blur when interacting with the bubble content
-        // bubbleMenuElement.addEventListener('mousedown', this.preventDefault);
-        const { pluginKey, appendTo, updateDelay, resizeDelay, options } = this.props;
-        editor.registerPlugin(BubbleMenuPlugin({
-            pluginKey,
-            appendTo,
-            updateDelay,
-            resizeDelay,
-            editor,
-            element: bubbleMenuElement,
-            options: this.getFloatingUiOptions(options ?? {}, bubbleMenuElement),
-            shouldShow: this.shouldShow,
-            getReferencedVirtualElement: this.mountTo,
-        }));
-    }
-    ngOnDestroy() {
-        if (this.editor && this.props?.pluginKey) {
-            this.editor.unregisterPlugin(this.props.pluginKey);
-        }
-        window.requestAnimationFrame(() => {
-            if (this.elRef.nativeElement.parentNode) {
-                this.elRef.nativeElement.parentNode.removeChild(this.elRef.nativeElement);
-            }
-        });
-        this.elRef.nativeElement.removeEventListener('mousedown', this.preventDefault);
-    }
-    preventDefault(event) {
-        // Allow default behavior for focusable elements so inputs can receive focus
-        const target = event.target;
-        if (target) {
-            const tag = target.tagName;
-            const isFocusableTag = tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || target.isContentEditable;
-            if (isFocusableTag)
-                return;
-        }
-        event.preventDefault();
-    }
-    getFloatingUiOptions(userOptions, element) {
-        // Find arrow element if it exists
-        // const arrowElement = element.querySelector('[data-arrow]') as HTMLElement | null;
-        // Merge with default Floating UI options
-        const defaultOptions = {
-            placement: 'bottom',
-            flip: {
-                fallbackPlacements: ['top', 'bottom', 'bottom-start', 'top-end', 'bottom-end'],
-                padding: 8,
-            },
-            // Enable shift middleware to keep bubble within viewport
-            shift: { padding: 8 },
-            // Add offset to create space between selection and bubble
-            offset: 10,
-            // Configure arrow if element exists
-            // arrow: arrowElement ? { element: arrowElement } : false,
-        };
-        return { ...defaultOptions, ...userOptions };
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: TiptapBubbleMenuDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.10", type: TiptapBubbleMenuDirective, isStandalone: true, selector: "tiptap-bubble-menu[editor], [tiptapBubbleMenu][editor]", inputs: { props: "props", editor: "editor", mountTo: "mountTo", shouldShow: "shouldShow" }, ngImport: i0 });
+      <!-- Templates List -->
+      <div class="template-view__list-container">
+        <div *ngIf="filteredTemplates.length > 0; else noResults" class="template-view__list">
+          <button
+            *ngFor="let template of filteredTemplates"
+            type="button"
+            class="template-view__template-item"
+            (click)="insertTemplate(template)"
+            [attr.aria-label]="template.title + (template.description ? ' - ' + template.description : '')"
+            [title]="template.description || template.title"
+          >
+            <div class="template-view__template-title">{{ template.title }}</div>
+            <div *ngIf="template.description" class="template-view__template-description">
+              {{ template.description }}
+            </div>
+          </button>
+        </div>
+
+        <ng-template #noResults>
+          <div class="template-view__empty">
+            <document-engine-icon name="search_off" class="template-view__empty-icon"></document-engine-icon>
+            <div class="template-view__empty-text">No templates found matching "{{ searchQuery }}"</div>
+          </div>
+        </ng-template>
+      </div>
+
+      <!-- Actions -->
+      <div class="template-view__actions">
+        <button type="button" documentEngineButton variant="secondary" (click)="close?.()">Close</button>
+      </div>
+    </div>
+  `, isInline: true, styles: [".template-view{display:flex;flex-direction:column;width:100%;max-width:28rem}.template-view__header{padding:.5rem 1rem;border-bottom:1px solid var(--border);font-weight:500}.template-view__search{padding:.75rem;border-bottom:1px solid var(--border)}.template-view__search-field{display:flex;flex-direction:column;gap:.25rem;width:100%}.template-view__search-input-wrapper{position:relative;display:flex;align-items:center}.template-view__search-icon{position:absolute;left:.75rem;color:var(--muted-foreground);pointer-events:none;z-index:1}.template-view__search-input-wrapper input{padding-left:2.5rem}.template-view__list-container{overflow-y:auto;max-height:20rem}.template-view__list{padding:.5rem 0}.template-view__template-item{display:flex;flex-direction:column;align-items:flex-start;padding:.75rem;width:100%;text-align:left;background-color:transparent;border:none;cursor:pointer;transition:background-color .2s;outline:none}.template-view__template-item:hover{background-color:var(--accent);color:var(--accent-foreground)}.template-view__template-item:focus{outline:none;box-shadow:0 0 0 2px var(--ring);box-shadow-offset:2px}.template-view__template-title{font-weight:500;font-size:.875rem;color:var(--foreground);margin-bottom:.25rem}.template-view__template-description{font-size:.75rem;color:var(--muted-foreground);line-height:1.4}.template-view__empty{padding:2rem 1rem;text-align:center;color:var(--muted-foreground)}.template-view__empty-icon{margin-bottom:.5rem;font-size:2rem;opacity:.5}.template-view__empty-text{font-size:.875rem}.template-view__actions{display:flex;justify-content:flex-end;padding:.75rem;border-top:1px solid var(--border)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: ButtonDirective, selector: "button[documentEngineButton]", inputs: ["variant", "size"] }, { kind: "directive", type: InputDirective, selector: "input[documentEngineInput]", inputs: ["class"] }, { kind: "directive", type: LabelDirective, selector: "label[documentEngineLabel]", inputs: ["class"] }, { kind: "component", type: IconComponent, selector: "document-engine-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: TiptapBubbleMenuDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'tiptap-bubble-menu[editor], [tiptapBubbleMenu][editor]',
-                    standalone: true,
-                }]
-        }], propDecorators: { props: [{
-                type: Input
-            }], editor: [{
-                type: Input
-            }], mountTo: [{
-                type: Input
-            }], shouldShow: [{
-                type: Input
-            }] } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: TemplateViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'document-engine-template-view', standalone: true, imports: [CommonModule, ReactiveFormsModule, ButtonDirective, InputDirective, LabelDirective, IconComponent], template: `
+    <div class="template-view">
+      <!-- Title -->
+      <div class="template-view__header">Templates</div>
+
+      <!-- Search Bar -->
+      <div class="template-view__search">
+        <div class="template-view__search-field">
+          <label documentEngineLabel for="search-input">Search templates</label>
+          <div class="template-view__search-input-wrapper">
+            <document-engine-icon name="search" class="template-view__search-icon"></document-engine-icon>
+            <input
+              documentEngineInput
+              id="search-input"
+              [formControl]="searchControl"
+              placeholder="Search templates..."
+              aria-label="Search templates"
+            />
+          </div>
+        </div>
+      </div>
+
+      <!-- Templates List -->
+      <div class="template-view__list-container">
+        <div *ngIf="filteredTemplates.length > 0; else noResults" class="template-view__list">
+          <button
+            *ngFor="let template of filteredTemplates"
+            type="button"
+            class="template-view__template-item"
+            (click)="insertTemplate(template)"
+            [attr.aria-label]="template.title + (template.description ? ' - ' + template.description : '')"
+            [title]="template.description || template.title"
+          >
+            <div class="template-view__template-title">{{ template.title }}</div>
+            <div *ngIf="template.description" class="template-view__template-description">
+              {{ template.description }}
+            </div>
+          </button>
+        </div>
+
+        <ng-template #noResults>
+          <div class="template-view__empty">
+            <document-engine-icon name="search_off" class="template-view__empty-icon"></document-engine-icon>
+            <div class="template-view__empty-text">No templates found matching "{{ searchQuery }}"</div>
+          </div>
+        </ng-template>
+      </div>
+
+      <!-- Actions -->
+      <div class="template-view__actions">
+        <button type="button" documentEngineButton variant="secondary" (click)="close?.()">Close</button>
+      </div>
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".template-view{display:flex;flex-direction:column;width:100%;max-width:28rem}.template-view__header{padding:.5rem 1rem;border-bottom:1px solid var(--border);font-weight:500}.template-view__search{padding:.75rem;border-bottom:1px solid var(--border)}.template-view__search-field{display:flex;flex-direction:column;gap:.25rem;width:100%}.template-view__search-input-wrapper{position:relative;display:flex;align-items:center}.template-view__search-icon{position:absolute;left:.75rem;color:var(--muted-foreground);pointer-events:none;z-index:1}.template-view__search-input-wrapper input{padding-left:2.5rem}.template-view__list-container{overflow-y:auto;max-height:20rem}.template-view__list{padding:.5rem 0}.template-view__template-item{display:flex;flex-direction:column;align-items:flex-start;padding:.75rem;width:100%;text-align:left;background-color:transparent;border:none;cursor:pointer;transition:background-color .2s;outline:none}.template-view__template-item:hover{background-color:var(--accent);color:var(--accent-foreground)}.template-view__template-item:focus{outline:none;box-shadow:0 0 0 2px var(--ring);box-shadow-offset:2px}.template-view__template-title{font-weight:500;font-size:.875rem;color:var(--foreground);margin-bottom:.25rem}.template-view__template-description{font-size:.75rem;color:var(--muted-foreground);line-height:1.4}.template-view__empty{padding:2rem 1rem;text-align:center;color:var(--muted-foreground)}.template-view__empty-icon{margin-bottom:.5rem;font-size:2rem;opacity:.5}.template-view__empty-text{font-size:.875rem}.template-view__actions{display:flex;justify-content:flex-end;padding:.75rem;border-top:1px solid var(--border)}\n"] }]
+        }] });
+
+const TemplateBubbleConfig = {
+    pluginKey: 'TemplateBubbleMenu',
+    maxWidth: '400px',
+    width: '400px',
+    views: [
+        {
+            id: 'templates',
+            component: TemplateViewComponent,
+            label: 'Templates',
+            isDefault: true,
+        },
+    ],
+};
+
+const FONT_SIZE_OPTIONS = [
+    { value: '12px', label: '12px' },
+    { value: '14px', label: '14px' },
+    { value: '16px', label: '16px' },
+    { value: '18px', label: '18px' },
+    { value: '20px', label: '20px' },
+];
+const LINE_HEIGHT_OPTIONS = [
+    { value: null, label: 'Default' },
+    { value: '1', label: '1' },
+    { value: '1.5', label: '1.5' },
+    { value: '2', label: '2' },
+    { value: '2.5', label: '2.5' },
+    { value: '3', label: '3' },
+];
+const TEXT_CASE_OPTIONS = [
+    { value: 'uppercase', label: 'UPPERCASE' },
+    { value: 'lowercase', label: 'lowercase' },
+    { value: 'capitalize', label: 'Capitalize' },
+];
+const HEADING_OPTIONS = [
+    { value: null, label: 'Normal text', class: '' },
+    { value: 1, label: 'Heading 1', class: 'h1' },
+    { value: 2, label: 'Heading 2', class: 'h2' },
+    { value: 3, label: 'Heading 3', class: 'h3' },
+];
+const TEXT_ALIGN_OPTIONS = [
+    { value: 'left', label: 'Align Left', icon: 'format_align_left' },
+    { value: 'center', label: 'Align Center', icon: 'format_align_center' },
+    { value: 'right', label: 'Align Right', icon: 'format_align_right' },
+    { value: 'justify', label: 'Align Justify', icon: 'format_align_justify' },
+];
+
+const LIST_STYLE_OPTIONS = [
+    { value: 'decimal', label: 'Decimal', example: '1.' },
+    { value: 'lower-alpha-dot', label: 'Lower Alpha', example: 'a.' },
+    { value: 'lower-alpha-parens', label: 'Lower Alpha (Parentheses)', example: '(a)' },
+    { value: 'lower-roman-parens', label: 'Lower Roman', example: '(i)' },
+];
 
 class EditorBubbleMenuComponent {
     editor;
@@ -5086,121 +5438,55 @@ class EditorBubbleMenuComponent {
         }
         return s;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: EditorBubbleMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: EditorBubbleMenuComponent, isStandalone: true, selector: "document-engine-editor-bubble-menu", inputs: { editor: "editor", config: "config" }, viewQueries: [{ propertyName: "viewContainer", first: true, predicate: ["viewContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "bubbleElement", first: true, predicate: ["bubbleElement"], descendants: true }], ngImport: i0, template: `
-    <div
-      #bubbleElement
-      class="bubble-menu-wrapper rounded border bg-card text-card-foreground border-border shadow-elevation-2 z-10"
-      tiptapBubbleMenu
-      [editor]="editor"
-      [props]="config.props!"
-      [mountTo]="mountTo"
-      [shouldShow]="shouldShowFn"
-    >
-      <!-- View component will be dynamically inserted here -->
-      <ng-container #viewContainer></ng-container>
-    </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TiptapBubbleMenuDirective, selector: "tiptap-bubble-menu[editor], [tiptapBubbleMenu][editor]", inputs: ["props", "editor", "mountTo", "shouldShow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: EditorBubbleMenuComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'document-engine-editor-bubble-menu',
-                    standalone: true,
-                    imports: [CommonModule, TiptapBubbleMenuDirective],
-                    template: `
-    <div
-      #bubbleElement
-      class="bubble-menu-wrapper rounded border bg-card text-card-foreground border-border shadow-elevation-2 z-10"
-      tiptapBubbleMenu
-      [editor]="editor"
-      [props]="config.props!"
-      [mountTo]="mountTo"
-      [shouldShow]="shouldShowFn"
-    >
-      <!-- View component will be dynamically inserted here -->
-      <ng-container #viewContainer></ng-container>
-    </div>
-  `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], propDecorators: { editor: [{
-                type: Input
-            }], config: [{
-                type: Input
-            }], viewContainer: [{
-                type: ViewChild,
-                args: ['viewContainer', { read: ViewContainerRef }]
-            }], bubbleElement: [{
-                type: ViewChild,
-                args: ['bubbleElement']
-            }] } });
-
-class EventManager {
-    document = inject(DOCUMENT);
-    keyToEscapeListener = new Map();
-    keyToOutsideListener = new Map();
-    isAttached(key) {
-        return this.keyToOutsideListener.has(key) || this.keyToEscapeListener.has(key);
-    }
-    attach(key, hostElement, cb, anchorElement) {
-        // Avoid duplicate listeners
-        this.detach(key);
-        const oldOutside = this.keyToOutsideListener.get(key);
-        if (!oldOutside) {
-            const handler = (event) => {
-                const target = event.target;
-                const path = event.composedPath?.();
-                // Check if click is inside bubble
-                const isInsideBubble = !!hostElement && ((!!target && hostElement.contains(target)) || (!!path && path.includes(hostElement)));
-                if (isInsideBubble)
-                    return;
-                // Check if click is on the anchor (toolbar button)
-                const isInsideAnchor = !!anchorElement && ((!!target && anchorElement.contains(target)) || (!!path && path.includes(anchorElement)));
-                if (isInsideAnchor)
-                    return;
-                // Check if click is inside a CDK overlay (e.g., MatSelect dropdown, MatMenu, etc.)
-                // These are rendered outside the bubble but should not close it
-                if (target instanceof Element) {
-                    const isInsideOverlay = target.closest('.cdk-overlay-container, .cdk-overlay-pane');
-                    if (isInsideOverlay)
-                        return;
-                }
-                cb(key);
-            };
-            this.keyToOutsideListener.set(key, handler);
-            this.document.addEventListener('pointerdown', handler, true);
-            this.document.addEventListener('mousedown', handler, true);
-            this.document.addEventListener('click', handler, true);
-        }
-        const oldEsc = this.keyToEscapeListener.get(key);
-        if (!oldEsc) {
-            const escHandler = (e) => e.key === 'Escape' && cb(key);
-            this.document.addEventListener('keydown', escHandler, true);
-            this.keyToEscapeListener.set(key, escHandler);
-        }
-    }
-    detach(key) {
-        const outside = this.keyToOutsideListener.get(key);
-        if (outside) {
-            this.document.removeEventListener('pointerdown', outside, true);
-            this.document.removeEventListener('mousedown', outside, true);
-            this.document.removeEventListener('click', outside, true);
-            this.keyToOutsideListener.delete(key);
-        }
-        const esc = this.keyToEscapeListener.get(key);
-        if (esc) {
-            this.document.removeEventListener('keydown', esc, true);
-            this.keyToEscapeListener.delete(key);
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: EventManager, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: EventManager, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: EditorBubbleMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: EditorBubbleMenuComponent, isStandalone: true, selector: "document-engine-editor-bubble-menu", inputs: { editor: "editor", config: "config" }, viewQueries: [{ propertyName: "viewContainer", first: true, predicate: ["viewContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "bubbleElement", first: true, predicate: ["bubbleElement"], descendants: true }], ngImport: i0, template: `
+    <div
+      #bubbleElement
+      class="bubble-menu-wrapper rounded border bg-card text-card-foreground border-border shadow-elevation-2 z-30"
+      tiptapBubbleMenu
+      [editor]="editor"
+      [props]="config.props!"
+      [mountTo]="mountTo"
+      [shouldShow]="shouldShowFn"
+    >
+      <!-- View component will be dynamically inserted here -->
+      <ng-container #viewContainer></ng-container>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TiptapBubbleMenuDirective, selector: "tiptap-bubble-menu[editor], [tiptapBubbleMenu][editor]", inputs: ["props", "editor", "mountTo", "shouldShow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: EventManager, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: EditorBubbleMenuComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'document-engine-editor-bubble-menu',
+                    standalone: true,
+                    imports: [CommonModule, TiptapBubbleMenuDirective],
+                    template: `
+    <div
+      #bubbleElement
+      class="bubble-menu-wrapper rounded border bg-card text-card-foreground border-border shadow-elevation-2 z-30"
+      tiptapBubbleMenu
+      [editor]="editor"
+      [props]="config.props!"
+      [mountTo]="mountTo"
+      [shouldShow]="shouldShowFn"
+    >
+      <!-- View component will be dynamically inserted here -->
+      <ng-container #viewContainer></ng-container>
+    </div>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { editor: [{
+                type: Input
+            }], config: [{
+                type: Input
+            }], viewContainer: [{
+                type: ViewChild,
+                args: ['viewContainer', { read: ViewContainerRef }]
+            }], bubbleElement: [{
+                type: ViewChild,
+                args: ['bubbleElement']
+            }] } });
 
 /**
  * A bubble menu wrapper specifically for toolbar buttons
@@ -5629,690 +5915,429 @@ class ToolbarComponent {
         else {
             this.editor.chain().focus().unsetFontSize().run();
         }
-        this.toolbarService.emit('setFontSize', size);
-    }
-    setLineHeight(lineHeight) {
-        if (lineHeight) {
-            this.editor.chain().focus().setLineHeight(lineHeight).run();
-        }
-        else {
-            this.editor.chain().focus().unsetLineHeight().run();
-        }
-        this.toolbarService.emit('setLineHeight', lineHeight);
-    }
-    setHeading(level) {
-        if (!level) {
-            this.editor.chain().focus().removeHeading().run();
-        }
-        else {
-            const levelNumber = parseInt(level, 10);
-            this.editor.chain().focus().toggleHeading({ level: levelNumber }).run();
-        }
-        this.toolbarService.emit('setHeading', level);
-    }
-    setTextAlign(align) {
-        if (align) {
-            this.editor
-                .chain()
-                .focus()
-                .setTextAlign(align)
-                .run();
-        }
-        else {
-            // Reset to default (left)
-            this.editor.chain().focus().setTextAlign('left').run();
-        }
-        this.toolbarService.emit('setTextAlign', align);
-    }
-    setListStyle(listStyleType) {
-        if (this.editor.isActive('customOrderedList')) {
-            // If there's an active ordered list, update its style
-            this.editor.chain().focus().setListStyle(listStyleType).run();
-        }
-        else {
-            // If no active list, create a new one with the selected style
-            this.editor.chain().focus().toggleOrderedList().run();
-            this.editor.chain().focus().setListStyle(listStyleType).run();
-        }
-        this.toolbarService.emit('setListStyle', listStyleType);
-    }
-    openColorBubble(event, type) {
-        const targetElement = (event.currentTarget || event.target);
-        this.colorBubbleMenu?.toggleBubble(targetElement, { type });
-        this.toolbarService.emit('openColorBubble', { type });
-    }
-    toggleLink() {
-        if (this.editor.isActive('link')) {
-            // If link is active, remove it
-            this.editor.chain().focus().unsetLink().run();
-        }
-        else {
-            // If no link, open the bubble menu
-            this.linkBubbleWrapper?.showBubble();
-        }
-        this.toolbarService.emit('toggleLink');
-    }
-    insertImage(event) {
-        const targetElement = (event.currentTarget || event.target);
-        this.imageBubbleMenu?.toggleBubble(targetElement);
-        this.toolbarService.emit('insertImage');
-    }
-    openSpecialCharsBubble(event) {
-        const targetElement = (event.currentTarget || event.target);
-        this.specialCharsBubbleMenu?.toggleBubble(targetElement);
-        this.toolbarService.emit('openSpecialCharsBubble');
-    }
-    openDynamicFieldsBubble(event) {
-        const targetElement = (event.currentTarget || event.target);
-        this.dynamicFieldsBubbleMenu?.toggleBubble(targetElement, {
-            categories: this.config?.dynamicFieldsCategories || [],
-        });
-        this.toolbarService.emit('openDynamicFieldsBubble');
-    }
-    openTemplateBubble(event) {
-        const targetElement = (event.currentTarget || event.target);
-        this.templateBubbleMenu?.toggleBubble(targetElement, {
-            templates: this.config?.templates || [],
-        });
-        this.toolbarService.emit('openTemplateBubble');
-    }
-    openCreateTableBubble(event) {
-        const targetElement = (event.currentTarget || event.target);
-        this.tableCreateBubbleMenu?.toggleBubble(targetElement);
-        this.toolbarService.emit('openCreateTableBubble');
-    }
-    // downloadAsMarkdown(filename?: string): void {
-    //   const fileName = filename ? `${filename}.md` : 'export.md';
-    //   const markdown = renderToMarkdown({
-    //     content: this.editor.getJSON(),
-    //     extensions: this.editor.options.extensions,
-    //     options: {
-    //       nodeMapping: {
-    //         pageBreak: () => 'Page break',
-    //       },
-    //     },
-    //   });
-    //   const blob = new Blob([markdown], { type: 'text/markdown' });
-    //   const url = URL.createObjectURL(blob);
-    //   const a = document.createElement('a');
-    //   a.href = url;
-    //   a.download = fileName;
-    //   a.click();
-    //   URL.revokeObjectURL(url);
-    // }
-    trackByValue(index, item) {
-        return item.value;
-    }
-    trackByIndex(index) {
-        return index;
-    }
-    get customToolbarButtons() {
-        return this.config?.customToolbarButtons || [];
-    }
-    handleCustomIconButton(button) {
-        if (button.type === 'icon-button') {
-            button.callback();
-            this.toolbarService.emit('customIconButton', { label: button.label, icon: button.icon });
-        }
-    }
-    handleCustomSelectButton(button, value) {
-        if (button.type === 'select-button') {
-            button.callback();
-            this.toolbarService.emit('customSelectButton', { label: button.label, value });
-        }
-    }
-    printValue() {
-        console.log('html', this.editor.getHTML());
-        console.log('json', this.editor.getJSON());
-        console.log('State', this.editor.state);
-        this.toolbarService.emit('printValue');
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: ToolbarComponent, isStandalone: true, selector: "document-engine-toolbar", inputs: { editor: "editor", capabilities: "capabilities", config: "config" }, outputs: { action: "action" }, viewQueries: [{ propertyName: "colorBubbleMenu", first: true, predicate: ["colorBubbleMenu"], descendants: true }, { propertyName: "linkBubbleWrapper", first: true, predicate: ["linkBubbleWrapper"], descendants: true }, { propertyName: "imageBubbleMenu", first: true, predicate: ["imageBubbleMenu"], descendants: true }, { propertyName: "specialCharsBubbleMenu", first: true, predicate: ["specialCharsBubbleMenu"], descendants: true }, { propertyName: "dynamicFieldsBubbleMenu", first: true, predicate: ["dynamicFieldsBubbleMenu"], descendants: true }, { propertyName: "templateBubbleMenu", first: true, predicate: ["templateBubbleMenu"], descendants: true }, { propertyName: "tableCreateBubbleMenu", first: true, predicate: ["tableCreateBubbleMenu"], descendants: true }], ngImport: i0, template: "<div class=\"document-engine-document-editor__toolbar\">\n  <div class=\"document-engine-document-editor__toolbar-content\">\n    <div class=\"document-engine-document-editor__toolbar-left\">\n      <!-- History: Undo/Redo -->\n      <div *ngIf=\"capabilities.hasHistory\" class=\"document-engine-document-editor__toolbar-group\" data-group=\"history\">\n        <button\n          documentEngineButton\n          size=\"icon\"\n          [disabled]=\"toolbarState.isReadOnly || !toolbarState.canUndo\"\n          (click)=\"runAndEmit('undo', editor.chain().focus().undo().run)\"\n          title=\"Undo (Ctrl+Z)\"\n        >\n          <document-engine-icon name=\"undo\"></document-engine-icon>\n        </button>\n\n        <button\n          documentEngineButton\n          size=\"icon\"\n          [disabled]=\"toolbarState.isReadOnly || !toolbarState.canRedo\"\n          (click)=\"runAndEmit('redo', editor.chain().focus().redo().run)\"\n          title=\"Redo\"\n        >\n          <document-engine-icon name=\"redo\"></document-engine-icon>\n        </button>\n      </div>\n\n      <!-- Text Formatting: Font Size, Line Height, Text Case, Heading -->\n      <div\n        *ngIf=\"capabilities.hasTextProperty\"\n        class=\"document-engine-document-editor__toolbar-group\"\n        data-group=\"text-property\"\n      >\n        <!-- Font Size -->\n        <document-engine-select\n          *ngIf=\"capabilities.hasFontSize\"\n          [value]=\"activeFontSize\"\n          placeholder=\"Font Size\"\n          labelMode=\"static\"\n          [disabled]=\"toolbarState.isReadOnly\"\n          title=\"Font Size\"\n        >\n          <document-engine-icon documentEngineSelectLabel name=\"format_size\"></document-engine-icon>\n\n          <button documentEngineSelectOption [value]=\"null\">Default</button>\n\n          <button\n            *ngFor=\"let option of fontSizeOptions; trackBy: trackByValue\"\n            documentEngineSelectOption\n            [value]=\"option.value\"\n            (click)=\"setFontSize(option.value)\"\n          >\n            {{ option.label }}\n          </button>\n        </document-engine-select>\n\n        <!-- Line Height -->\n        <document-engine-select\n          *ngIf=\"capabilities.hasLineHeight\"\n          [value]=\"activeLineHeight\"\n          placeholder=\"Line Height\"\n          labelMode=\"static\"\n          [disabled]=\"toolbarState.isReadOnly\"\n          title=\"Line Height\"\n        >\n          <document-engine-icon documentEngineSelectLabel name=\"format_line_spacing\"></document-engine-icon>\n\n          <button\n            *ngFor=\"let option of lineHeightOptions; trackBy: trackByValue\"\n            documentEngineSelectOption\n            [value]=\"option.value\"\n            (click)=\"setLineHeight(option.value)\"\n          >\n            {{ option.label }}\n          </button>\n        </document-engine-select>\n\n        <!-- Text Case -->\n        <document-engine-select\n          *ngIf=\"capabilities.hasTextCase\"\n          placeholder=\"Text Case\"\n          labelMode=\"static\"\n          [disabled]=\"toolbarState.isReadOnly\"\n          title=\"Text Case\"\n        >\n          <document-engine-icon documentEngineSelectLabel name=\"match_case\"></document-engine-icon>\n\n          <button\n            *ngFor=\"let option of textCaseOptions; trackBy: trackByValue\"\n            documentEngineSelectOption\n            [value]=\"option.value\"\n            (click)=\"runAndEmit('setTextCase', editor.chain().focus().textCase(option.value).run)\"\n          >\n            {{ option.label }}\n          </button>\n        </document-engine-select>\n\n        <!-- Heading -->\n        <document-engine-select\n          *ngIf=\"capabilities.hasHeading\"\n          [value]=\"activeHeading?.toString() || null\"\n          placeholder=\"Normal text\"\n          [disabled]=\"toolbarState.isReadOnly\"\n          title=\"Heading\"\n        >\n          <button\n            *ngFor=\"let option of headingOptions; trackBy: trackByValue\"\n            documentEngineSelectOption\n            [value]=\"option.value?.toString() || null\"\n            [class]=\"option.class\"\n            (click)=\"setHeading(option.value?.toString() || null)\"\n          >\n            {{ option.label }}\n          </button>\n        </document-engine-select>\n      </div>\n\n      <!-- Format Utilities: Reset Formatting & Colors -->\n      <div\n        *ngIf=\"capabilities.hasFormatUtilities\"\n        class=\"document-engine-document-editor__toolbar-group\"\n        data-group=\"format-utilities\"\n      >\n        <!-- Reset Formatting -->\n        <button\n          *ngIf=\"capabilities.hasResetFormat\"\n          documentEngineButton\n          size=\"icon\"\n          (click)=\"runAndEmit('resetFormat', editor.chain().focus().resetFormat().run)\"\n          [disabled]=\"toolbarState.isReadOnly || !toolbarState.canResetFormat\"\n          title=\"Clear Formatting\"\n        >\n          <document-engine-icon name=\"format_clear\"></document-engine-icon>\n        </button>\n\n        <!-- Colors: Text/Background -->\n        <button\n          *ngIf=\"capabilities.hasColors\"\n          documentEngineButton\n          size=\"icon\"\n          title=\"Text Color\"\n          [disabled]=\"toolbarState.isReadOnly\"\n          (click)=\"openColorBubble($event, 'text')\"\n        >\n          <document-engine-icon name=\"format_color_text\"></document-engine-icon>\n        </button>\n\n        <button\n          *ngIf=\"capabilities.hasColors\"\n          documentEngineButton\n          size=\"icon\"\n          title=\"Background Color\"\n          [disabled]=\"toolbarState.isReadOnly\"\n          (click)=\"openColorBubble($event, 'fill')\"\n        >\n          <document-engine-icon name=\"format_color_fill\"></document-engine-icon>\n        </button>\n      </div>\n\n      <!-- Text Styles: Bold/Italic/Underline/Strike -->\n      <div\n        *ngIf=\"capabilities.basicInline\"\n        class=\"document-engine-document-editor__toolbar-group\"\n        data-group=\"basic-inline\"\n      >\n        <button\n          *ngIf=\"capabilities.hasBold\"\n          documentEngineButton\n          size=\"icon\"\n          [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleBold\"\n          (click)=\"runAndEmit('toggleBold', editor.chain().focus().toggleBold().run)\"\n          [class.active]=\"editor.isActive('bold')\"\n          title=\"Bold\"\n        >\n          <document-engine-icon name=\"format_bold\"></document-engine-icon>\n        </button>\n\n        <button\n          *ngIf=\"capabilities.hasItalic\"\n          documentEngineButton\n          size=\"icon\"\n          [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleItalic\"\n          (click)=\"runAndEmit('toggleItalic', editor.chain().focus().toggleItalic().run)\"\n          [class.active]=\"editor.isActive('italic')\"\n          title=\"Italic\"\n        >\n          <document-engine-icon name=\"format_italic\"></document-engine-icon>\n        </button>\n\n        <button\n          *ngIf=\"capabilities.hasUnderline\"\n          documentEngineButton\n          size=\"icon\"\n          [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleUnderline\"\n          (click)=\"runAndEmit('toggleUnderline', editor.chain().focus().toggleUnderline().run)\"\n          [class.active]=\"editor.isActive('underline')\"\n          title=\"Underline\"\n        >\n          <document-engine-icon name=\"format_underline\"></document-engine-icon>\n        </button>\n\n        <button\n          *ngIf=\"capabilities.hasStrike\"\n          documentEngineButton\n          size=\"icon\"\n          [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleStrike\"\n          (click)=\"runAndEmit('toggleStrike', editor.chain().focus().toggleStrike().run)\"\n          [class.active]=\"editor.isActive('strike')\"\n          title=\"Strikethrough\"\n        >\n          <document-engine-icon name=\"format_strikethrough\"></document-engine-icon>\n        </button>\n      </div>\n\n      <!-- Text Styles: Sub/Super/Code/Link -->\n      <div\n        *ngIf=\"capabilities.advancedInline\"\n        class=\"document-engine-document-editor__toolbar-group\"\n        data-group=\"advanced-inline\"\n      >\n        <button\n          *ngIf=\"capabilities.hasSubscript\"\n          documentEngineButton\n          size=\"icon\"\n          [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleSubscript\"\n          (click)=\"runAndEmit('toggleSubscript', editor.chain().focus().toggleSubscript().run)\"\n          [class.active]=\"editor.isActive('subscript')\"\n          title=\"Subscript\"\n        >\n          <document-engine-icon name=\"subscript\"></document-engine-icon>\n        </button>\n\n        <button\n          *ngIf=\"capabilities.hasSuperscript\"\n          documentEngineButton\n          size=\"icon\"\n          [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleSuperscript\"\n          (click)=\"runAndEmit('toggleSuperscript', editor.chain().focus().toggleSuperscript().run)\"\n          [class.active]=\"editor.isActive('superscript')\"\n          title=\"Superscript\"\n        >\n          <document-engine-icon name=\"superscript\"></document-engine-icon>\n        </button>\n\n        <button\n          *ngIf=\"capabilities.hasCode\"\n          documentEngineButton\n          size=\"icon\"\n          [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleCode\"\n          (click)=\"runAndEmit('toggleCode', editor.chain().focus().toggleCode().run)\"\n          [class.active]=\"editor.isActive('code')\"\n          title=\"Code\"\n        >\n          <document-engine-icon name=\"code\"></document-engine-icon>\n        </button>\n\n        <button\n          *ngIf=\"capabilities.hasLink\"\n          documentEngineButton\n          size=\"icon\"\n          [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleLink\"\n          (click)=\"toggleLink()\"\n          [class.active]=\"editor.isActive('link')\"\n          [title]=\"editor.isActive('link') ? 'Unlink' : 'Link'\"\n        >\n          <document-engine-icon [name]=\"editor.isActive('link') ? 'link_off' : 'link'\"></document-engine-icon>\n        </button>\n      </div>\n\n      <!-- Alignment & Layout: Text Align, Indent, Lists -->\n      <div\n        *ngIf=\"capabilities.hasAlignmentLayout\"\n        class=\"document-engine-document-editor__toolbar-group\"\n        data-group=\"alignment-layout\"\n      >\n        <!-- Text Alignment -->\n        <document-engine-select\n          *ngIf=\"capabilities.hasTextAlign\"\n          [value]=\"activeTextAlign\"\n          (valueChange)=\"setTextAlign($event)\"\n          placeholder=\"Text Align\"\n          labelMode=\"static\"\n          [disabled]=\"toolbarState.isReadOnly\"\n          title=\"Text Align\"\n        >\n          <document-engine-icon documentEngineSelectLabel [name]=\"activeTextAlignIcon\"></document-engine-icon>\n\n          <button\n            *ngFor=\"let option of textAlignOptions; trackBy: trackByValue\"\n            documentEngineSelectOption\n            [value]=\"option.value\"\n          >\n            <document-engine-icon [name]=\"option.icon\"></document-engine-icon>\n            <span>{{ option.label }}</span>\n          </button>\n        </document-engine-select>\n\n        <!-- Indent -->\n        <button\n          *ngIf=\"capabilities.hasIndent\"\n          documentEngineButton\n          size=\"icon\"\n          [disabled]=\"toolbarState.isReadOnly || !toolbarState.canDecreaseIndent\"\n          (click)=\"runAndEmit('decreaseIndent', editor.chain().focus().decreaseIndent().run)\"\n          title=\"Decrease Indent\"\n        >\n          <document-engine-icon name=\"format_indent_decrease\"></document-engine-icon>\n        </button>\n\n        <button\n          *ngIf=\"capabilities.hasIndent\"\n          documentEngineButton\n          size=\"icon\"\n          [disabled]=\"toolbarState.isReadOnly || !toolbarState.canIncreaseIndent\"\n          (click)=\"runAndEmit('increaseIndent', editor.chain().focus().increaseIndent().run)\"\n          title=\"Increase Indent\"\n        >\n          <document-engine-icon name=\"format_indent_increase\"></document-engine-icon>\n        </button>\n\n        <!-- Lists: Bullet, Numbered (with style) -->\n        <button\n          *ngIf=\"capabilities.hasLists\"\n          documentEngineButton\n          size=\"icon\"\n          [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleBulletList\"\n          (click)=\"runAndEmit('toggleBulletList', editor.chain().focus().toggleBulletList().run)\"\n          [class.active]=\"editor.isActive('bulletList')\"\n          title=\"Bullet List\"\n        >\n          <document-engine-icon name=\"format_list_bulleted\"></document-engine-icon>\n        </button>\n\n        <!-- Numbered List with Style -->\n        <document-engine-select\n          *ngIf=\"capabilities.hasLists\"\n          placeholder=\"Numbered List\"\n          labelMode=\"static\"\n          [value]=\"\n            editor.isActive('customOrderedList')\n              ? editor.getAttributes('customOrderedList')['data-list-style-type'] || 'decimal'\n              : null\n          \"\n          [disabled]=\"toolbarState.isReadOnly\"\n          title=\"Numbered List\"\n        >\n          <document-engine-icon documentEngineSelectLabel name=\"format_list_numbered\"></document-engine-icon>\n\n          <button\n            *ngFor=\"let option of listStyleOptions; trackBy: trackByValue\"\n            documentEngineSelectOption\n            [value]=\"option.value\"\n            (click)=\"setListStyle(option.value)\"\n            [class.active]=\"\n              editor.isActive('customOrderedList') &&\n              editor.getAttributes('customOrderedList')['data-list-style-type'] === option.value\n            \"\n          >\n            <span>{{ option.example }}</span>\n            <span>{{ option.label }}</span>\n          </button>\n        </document-engine-select>\n      </div>\n\n      <!-- Block Types: Code Block, Blockquote -->\n      <div\n        *ngIf=\"capabilities.hasBlockTypes\"\n        class=\"document-engine-document-editor__toolbar-group\"\n        data-group=\"block-types\"\n      >\n        <!-- Blockquote -->\n        <button\n          *ngIf=\"capabilities.hasBlockquote\"\n          documentEngineButton\n          size=\"icon\"\n          [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleBlockquote\"\n          (click)=\"runAndEmit('toggleBlockquote', editor.chain().focus().toggleBlockquote().run)\"\n          [class.active]=\"editor.isActive('blockquote')\"\n          title=\"Quote\"\n        >\n          <document-engine-icon name=\"format_quote\"></document-engine-icon>\n        </button>\n      </div>\n\n      <!-- Insert Object: Table, Images, Special Chars, Page Break -->\n      <div\n        *ngIf=\"capabilities.hasInsertObject\"\n        class=\"document-engine-document-editor__toolbar-group\"\n        data-group=\"insert-object\"\n      >\n        <button\n          *ngIf=\"capabilities.hasTable\"\n          documentEngineButton\n          size=\"icon\"\n          [disabled]=\"toolbarState.isReadOnly\"\n          (click)=\"openCreateTableBubble($event)\"\n          [class.active]=\"editor.isActive('table')\"\n          title=\"Table\"\n        >\n          <document-engine-icon name=\"table_rows\"></document-engine-icon>\n        </button>\n\n        <button\n          *ngIf=\"capabilities.hasImages\"\n          documentEngineButton\n          size=\"icon\"\n          title=\"Insert Image\"\n          [disabled]=\"toolbarState.isReadOnly\"\n          (click)=\"insertImage($event)\"\n        >\n          <document-engine-icon name=\"photo\"></document-engine-icon>\n        </button>\n\n        <button\n          *ngIf=\"capabilities.hasSpecialChars\"\n          documentEngineButton\n          size=\"icon\"\n          title=\"Special Character\"\n          [disabled]=\"toolbarState.isReadOnly\"\n          (click)=\"openSpecialCharsBubble($event)\"\n        >\n          <document-engine-icon name=\"special_character\"></document-engine-icon>\n        </button>\n\n        <button\n          *ngIf=\"capabilities.hasPageBreak\"\n          documentEngineButton\n          size=\"icon\"\n          [disabled]=\"toolbarState.isReadOnly || !toolbarState.canInsertPageBreak\"\n          (click)=\"runAndEmit('insertPageBreak', editor.chain().focus().insertPageBreak().run)\"\n          title=\"Insert page break\"\n        >\n          <document-engine-icon name=\"insert_page_break\"></document-engine-icon>\n        </button>\n      </div>\n\n      <!-- Business Features: Templates, Dynamic Fields, Editable Region -->\n      <div\n        *ngIf=\"capabilities.hasBusinessFeatures\"\n        class=\"document-engine-document-editor__toolbar-group\"\n        data-group=\"business-features\"\n      >\n        <button\n          *ngIf=\"capabilities.hasDynamicFields\"\n          documentEngineButton\n          size=\"icon\"\n          title=\"Dynamic Field\"\n          [disabled]=\"toolbarState.isReadOnly\"\n          (click)=\"openDynamicFieldsBubble($event)\"\n        >\n          <document-engine-icon name=\"dynamic_form\"></document-engine-icon>\n        </button>\n\n        <button\n          *ngIf=\"capabilities.hasTemplates\"\n          documentEngineButton\n          size=\"icon\"\n          title=\"Template\"\n          [disabled]=\"toolbarState.isReadOnly\"\n          (click)=\"openTemplateBubble($event)\"\n        >\n          <document-engine-icon name=\"description\"></document-engine-icon>\n        </button>\n\n        <button\n          *ngIf=\"capabilities.hasEditableRegion\"\n          documentEngineButton\n          size=\"icon\"\n          [disabled]=\"!toolbarState.canToggleEditableRegion || toolbarState.isReadOnly\"\n          (click)=\"runAndEmit('toggleEditableRegion', editor.chain().focus().toggleEditableRegion().run)\"\n          [class.active]=\"editor.isActive('editableRegion')\"\n          title=\"Toggle editable region\"\n        >\n          <document-engine-icon name=\"restrict_edit\"></document-engine-icon>\n        </button>\n      </div>\n\n      <!-- Actions: Clear Content, Markdown -->\n      <div *ngIf=\"capabilities.hasActions\" class=\"document-engine-document-editor__toolbar-group\" data-group=\"actions\">\n        <button\n          *ngIf=\"capabilities.hasClearContent\"\n          documentEngineButton\n          size=\"icon\"\n          [disabled]=\"toolbarState.isReadOnly || !toolbarState.canClearContent\"\n          (click)=\"runAndEmit('clear', editor.chain().focus().clear().run)\"\n          title=\"Clear all content\"\n        >\n          <document-engine-icon name=\"clear_all\"></document-engine-icon>\n        </button>\n\n        <!-- <button\n          *ngIf=\"capabilities.hasMarkdown\"\n          documentEngineButton\n          size=\"icon\"\n          (click)=\"downloadAsMarkdown()\"\n          title=\"Download as Markdown\"\n        >\n          <document-engine-icon name=\"markdown\"></document-engine-icon>\n        </button> -->\n      </div>\n\n      <!-- Custom Toolbar Buttons -->\n      <div\n        *ngIf=\"customToolbarButtons.length > 0\"\n        class=\"document-engine-document-editor__toolbar-group\"\n        data-group=\"custom-buttons\"\n      >\n        <ng-container *ngFor=\"let button of customToolbarButtons; trackBy: trackByIndex\">\n          <!-- Icon Button -->\n          <button\n            *ngIf=\"button.type === 'icon-button'\"\n            documentEngineButton\n            size=\"icon\"\n            [disabled]=\"toolbarState.isReadOnly\"\n            (click)=\"handleCustomIconButton(button)\"\n            [title]=\"button.label || ''\"\n          >\n            <document-engine-icon [name]=\"button.icon\"></document-engine-icon>\n          </button>\n\n          <!-- Select Button -->\n          <document-engine-select\n            *ngIf=\"button.type === 'select-button'\"\n            [value]=\"null\"\n            labelMode=\"static\"\n            [disabled]=\"toolbarState.isReadOnly\"\n            [title]=\"button.label\"\n          >\n            <span documentEngineSelectLabel>{{ button.label }}</span>\n\n            <button\n              *ngFor=\"let option of button.options; trackBy: trackByValue\"\n              documentEngineSelectOption\n              [value]=\"option.value\"\n              (click)=\"handleCustomSelectButton(button, option.value)\"\n            >\n              {{ option.label }}\n            </button>\n          </document-engine-select>\n        </ng-container>\n      </div>\n    </div>\n\n    <!-- Right side actions -->\n    <div class=\"document-engine-document-editor__toolbar-right\">\n      <button\n        *ngIf=\"capabilities.hasPrintButton\"\n        documentEngineButton\n        size=\"icon\"\n        (click)=\"printValue()\"\n        title=\"Print Value\"\n      >\n        <document-engine-icon name=\"print\"></document-engine-icon>\n      </button>\n    </div>\n  </div>\n\n  <!-- Color Bubble Menu -->\n  <document-engine-toolbar-bubble-menu\n    #colorBubbleMenu\n    [editor]=\"editor\"\n    [config]=\"colorBubbleConfig\"\n  ></document-engine-toolbar-bubble-menu>\n\n  <!-- Link Bubble Menu -->\n  <document-engine-editor-bubble-menu\n    *ngIf=\"capabilities.hasLink\"\n    #linkBubbleWrapper\n    [editor]=\"editor\"\n    [config]=\"linkBubbleConfig\"\n  ></document-engine-editor-bubble-menu>\n\n  <!-- Table Bubble Menu -->\n  <document-engine-editor-bubble-menu\n    *ngIf=\"capabilities.hasTable\"\n    #tableBubbleWrapper\n    [editor]=\"editor\"\n    [config]=\"tableBubbleConfig\"\n  ></document-engine-editor-bubble-menu>\n\n  <!-- Image Bubble Menu -->\n  <document-engine-toolbar-bubble-menu\n    *ngIf=\"capabilities.hasImages\"\n    #imageBubbleMenu\n    [editor]=\"editor\"\n    [config]=\"imageBubbleConfig\"\n  ></document-engine-toolbar-bubble-menu>\n\n  <!-- Special Characters Bubble Menu -->\n  <document-engine-toolbar-bubble-menu\n    *ngIf=\"capabilities.hasSpecialChars\"\n    #specialCharsBubbleMenu\n    [editor]=\"editor\"\n    [config]=\"specialCharsBubbleConfig\"\n  ></document-engine-toolbar-bubble-menu>\n\n  <!-- Dynamic Fields Bubble Menu -->\n  <document-engine-toolbar-bubble-menu\n    *ngIf=\"capabilities.hasDynamicFields\"\n    #dynamicFieldsBubbleMenu\n    [editor]=\"editor\"\n    [config]=\"dynamicFieldsBubbleConfig\"\n  ></document-engine-toolbar-bubble-menu>\n\n  <!-- Template Bubble Menu -->\n  <document-engine-toolbar-bubble-menu\n    *ngIf=\"capabilities.hasTemplates\"\n    #templateBubbleMenu\n    [editor]=\"editor\"\n    [config]=\"templateBubbleConfig\"\n  ></document-engine-toolbar-bubble-menu>\n\n  <!-- Table Create Bubble Menu -->\n  <document-engine-toolbar-bubble-menu\n    *ngIf=\"capabilities.hasTable\"\n    #tableCreateBubbleMenu\n    [editor]=\"editor\"\n    [config]=\"tableCreateBubbleConfig\"\n  ></document-engine-toolbar-bubble-menu>\n</div>\n", styles: [":host{position:sticky;top:0;z-index:20}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "document-engine-icon", inputs: ["name"] }, { kind: "directive", type: ButtonDirective, selector: "button[documentEngineButton]", inputs: ["variant", "size"] }, { kind: "component", type: SelectComponent, selector: "document-engine-select", inputs: ["value", "disabled", "labelMode", "variant"], outputs: ["valueChange"] }, { kind: "directive", type: SelectLabelDirective, selector: "[documentEngineSelectLabel]" }, { kind: "directive", type: SelectOptionDirective, selector: "[documentEngineSelectOption]", inputs: ["value", "label", "disabled"] }, { kind: "component", type: ToolbarBubbleMenuComponent, selector: "document-engine-toolbar-bubble-menu", inputs: ["editor", "config"] }, { kind: "component", type: EditorBubbleMenuComponent, selector: "document-engine-editor-bubble-menu", inputs: ["editor", "config"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ToolbarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'document-engine-toolbar', standalone: true, imports: [
-                        CommonModule,
-                        IconComponent,
-                        ButtonDirective,
-                        SelectComponent,
-                        SelectLabelDirective,
-                        SelectOptionDirective,
-                        ToolbarBubbleMenuComponent,
-                        EditorBubbleMenuComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"document-engine-document-editor__toolbar\">\n  <div class=\"document-engine-document-editor__toolbar-content\">\n    <div class=\"document-engine-document-editor__toolbar-left\">\n      <!-- History: Undo/Redo -->\n      <div *ngIf=\"capabilities.hasHistory\" class=\"document-engine-document-editor__toolbar-group\" data-group=\"history\">\n        <button\n          documentEngineButton\n          size=\"icon\"\n          [disabled]=\"toolbarState.isReadOnly || !toolbarState.canUndo\"\n          (click)=\"runAndEmit('undo', editor.chain().focus().undo().run)\"\n          title=\"Undo (Ctrl+Z)\"\n        >\n          <document-engine-icon name=\"undo\"></document-engine-icon>\n        </button>\n\n        <button\n          documentEngineButton\n          size=\"icon\"\n          [disabled]=\"toolbarState.isReadOnly || !toolbarState.canRedo\"\n          (click)=\"runAndEmit('redo', editor.chain().focus().redo().run)\"\n          title=\"Redo\"\n        >\n          <document-engine-icon name=\"redo\"></document-engine-icon>\n        </button>\n      </div>\n\n      <!-- Text Formatting: Font Size, Line Height, Text Case, Heading -->\n      <div\n        *ngIf=\"capabilities.hasTextProperty\"\n        class=\"document-engine-document-editor__toolbar-group\"\n        data-group=\"text-property\"\n      >\n        <!-- Font Size -->\n        <document-engine-select\n          *ngIf=\"capabilities.hasFontSize\"\n          [value]=\"activeFontSize\"\n          placeholder=\"Font Size\"\n          labelMode=\"static\"\n          [disabled]=\"toolbarState.isReadOnly\"\n          title=\"Font Size\"\n        >\n          <document-engine-icon documentEngineSelectLabel name=\"format_size\"></document-engine-icon>\n\n          <button documentEngineSelectOption [value]=\"null\">Default</button>\n\n          <button\n            *ngFor=\"let option of fontSizeOptions; trackBy: trackByValue\"\n            documentEngineSelectOption\n            [value]=\"option.value\"\n            (click)=\"setFontSize(option.value)\"\n          >\n            {{ option.label }}\n          </button>\n        </document-engine-select>\n\n        <!-- Line Height -->\n        <document-engine-select\n          *ngIf=\"capabilities.hasLineHeight\"\n          [value]=\"activeLineHeight\"\n          placeholder=\"Line Height\"\n          labelMode=\"static\"\n          [disabled]=\"toolbarState.isReadOnly\"\n          title=\"Line Height\"\n        >\n          <document-engine-icon documentEngineSelectLabel name=\"format_line_spacing\"></document-engine-icon>\n\n          <button\n            *ngFor=\"let option of lineHeightOptions; trackBy: trackByValue\"\n            documentEngineSelectOption\n            [value]=\"option.value\"\n            (click)=\"setLineHeight(option.value)\"\n          >\n            {{ option.label }}\n          </button>\n        </document-engine-select>\n\n        <!-- Text Case -->\n        <document-engine-select\n          *ngIf=\"capabilities.hasTextCase\"\n          placeholder=\"Text Case\"\n          labelMode=\"static\"\n          [disabled]=\"toolbarState.isReadOnly\"\n          title=\"Text Case\"\n        >\n          <document-engine-icon documentEngineSelectLabel name=\"match_case\"></document-engine-icon>\n\n          <button\n            *ngFor=\"let option of textCaseOptions; trackBy: trackByValue\"\n            documentEngineSelectOption\n            [value]=\"option.value\"\n            (click)=\"runAndEmit('setTextCase', editor.chain().focus().textCase(option.value).run)\"\n          >\n            {{ option.label }}\n          </button>\n        </document-engine-select>\n\n        <!-- Heading -->\n        <document-engine-select\n          *ngIf=\"capabilities.hasHeading\"\n          [value]=\"activeHeading?.toString() || null\"\n          placeholder=\"Normal text\"\n          [disabled]=\"toolbarState.isReadOnly\"\n          title=\"Heading\"\n        >\n          <button\n            *ngFor=\"let option of headingOptions; trackBy: trackByValue\"\n            documentEngineSelectOption\n            [value]=\"option.value?.toString() || null\"\n            [class]=\"option.class\"\n            (click)=\"setHeading(option.value?.toString() || null)\"\n          >\n            {{ option.label }}\n          </button>\n        </document-engine-select>\n      </div>\n\n      <!-- Format Utilities: Reset Formatting & Colors -->\n      <div\n        *ngIf=\"capabilities.hasFormatUtilities\"\n        class=\"document-engine-document-editor__toolbar-group\"\n        data-group=\"format-utilities\"\n      >\n        <!-- Reset Formatting -->\n        <button\n          *ngIf=\"capabilities.hasResetFormat\"\n          documentEngineButton\n          size=\"icon\"\n          (click)=\"runAndEmit('resetFormat', editor.chain().focus().resetFormat().run)\"\n          [disabled]=\"toolbarState.isReadOnly || !toolbarState.canResetFormat\"\n          title=\"Clear Formatting\"\n        >\n          <document-engine-icon name=\"format_clear\"></document-engine-icon>\n        </button>\n\n        <!-- Colors: Text/Background -->\n        <button\n          *ngIf=\"capabilities.hasColors\"\n          documentEngineButton\n          size=\"icon\"\n          title=\"Text Color\"\n          [disabled]=\"toolbarState.isReadOnly\"\n          (click)=\"openColorBubble($event, 'text')\"\n        >\n          <document-engine-icon name=\"format_color_text\"></document-engine-icon>\n        </button>\n\n        <button\n          *ngIf=\"capabilities.hasColors\"\n          documentEngineButton\n          size=\"icon\"\n          title=\"Background Color\"\n          [disabled]=\"toolbarState.isReadOnly\"\n          (click)=\"openColorBubble($event, 'fill')\"\n        >\n          <document-engine-icon name=\"format_color_fill\"></document-engine-icon>\n        </button>\n      </div>\n\n      <!-- Text Styles: Bold/Italic/Underline/Strike -->\n      <div\n        *ngIf=\"capabilities.basicInline\"\n        class=\"document-engine-document-editor__toolbar-group\"\n        data-group=\"basic-inline\"\n      >\n        <button\n          *ngIf=\"capabilities.hasBold\"\n          documentEngineButton\n          size=\"icon\"\n          [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleBold\"\n          (click)=\"runAndEmit('toggleBold', editor.chain().focus().toggleBold().run)\"\n          [class.active]=\"editor.isActive('bold')\"\n          title=\"Bold\"\n        >\n          <document-engine-icon name=\"format_bold\"></document-engine-icon>\n        </button>\n\n        <button\n          *ngIf=\"capabilities.hasItalic\"\n          documentEngineButton\n          size=\"icon\"\n          [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleItalic\"\n          (click)=\"runAndEmit('toggleItalic', editor.chain().focus().toggleItalic().run)\"\n          [class.active]=\"editor.isActive('italic')\"\n          title=\"Italic\"\n        >\n          <document-engine-icon name=\"format_italic\"></document-engine-icon>\n        </button>\n\n        <button\n          *ngIf=\"capabilities.hasUnderline\"\n          documentEngineButton\n          size=\"icon\"\n          [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleUnderline\"\n          (click)=\"runAndEmit('toggleUnderline', editor.chain().focus().toggleUnderline().run)\"\n          [class.active]=\"editor.isActive('underline')\"\n          title=\"Underline\"\n        >\n          <document-engine-icon name=\"format_underline\"></document-engine-icon>\n        </button>\n\n        <button\n          *ngIf=\"capabilities.hasStrike\"\n          documentEngineButton\n          size=\"icon\"\n          [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleStrike\"\n          (click)=\"runAndEmit('toggleStrike', editor.chain().focus().toggleStrike().run)\"\n          [class.active]=\"editor.isActive('strike')\"\n          title=\"Strikethrough\"\n        >\n          <document-engine-icon name=\"format_strikethrough\"></document-engine-icon>\n        </button>\n      </div>\n\n      <!-- Text Styles: Sub/Super/Code/Link -->\n      <div\n        *ngIf=\"capabilities.advancedInline\"\n        class=\"document-engine-document-editor__toolbar-group\"\n        data-group=\"advanced-inline\"\n      >\n        <button\n          *ngIf=\"capabilities.hasSubscript\"\n          documentEngineButton\n          size=\"icon\"\n          [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleSubscript\"\n          (click)=\"runAndEmit('toggleSubscript', editor.chain().focus().toggleSubscript().run)\"\n          [class.active]=\"editor.isActive('subscript')\"\n          title=\"Subscript\"\n        >\n          <document-engine-icon name=\"subscript\"></document-engine-icon>\n        </button>\n\n        <button\n          *ngIf=\"capabilities.hasSuperscript\"\n          documentEngineButton\n          size=\"icon\"\n          [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleSuperscript\"\n          (click)=\"runAndEmit('toggleSuperscript', editor.chain().focus().toggleSuperscript().run)\"\n          [class.active]=\"editor.isActive('superscript')\"\n          title=\"Superscript\"\n        >\n          <document-engine-icon name=\"superscript\"></document-engine-icon>\n        </button>\n\n        <button\n          *ngIf=\"capabilities.hasCode\"\n          documentEngineButton\n          size=\"icon\"\n          [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleCode\"\n          (click)=\"runAndEmit('toggleCode', editor.chain().focus().toggleCode().run)\"\n          [class.active]=\"editor.isActive('code')\"\n          title=\"Code\"\n        >\n          <document-engine-icon name=\"code\"></document-engine-icon>\n        </button>\n\n        <button\n          *ngIf=\"capabilities.hasLink\"\n          documentEngineButton\n          size=\"icon\"\n          [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleLink\"\n          (click)=\"toggleLink()\"\n          [class.active]=\"editor.isActive('link')\"\n          [title]=\"editor.isActive('link') ? 'Unlink' : 'Link'\"\n        >\n          <document-engine-icon [name]=\"editor.isActive('link') ? 'link_off' : 'link'\"></document-engine-icon>\n        </button>\n      </div>\n\n      <!-- Alignment & Layout: Text Align, Indent, Lists -->\n      <div\n        *ngIf=\"capabilities.hasAlignmentLayout\"\n        class=\"document-engine-document-editor__toolbar-group\"\n        data-group=\"alignment-layout\"\n      >\n        <!-- Text Alignment -->\n        <document-engine-select\n          *ngIf=\"capabilities.hasTextAlign\"\n          [value]=\"activeTextAlign\"\n          (valueChange)=\"setTextAlign($event)\"\n          placeholder=\"Text Align\"\n          labelMode=\"static\"\n          [disabled]=\"toolbarState.isReadOnly\"\n          title=\"Text Align\"\n        >\n          <document-engine-icon documentEngineSelectLabel [name]=\"activeTextAlignIcon\"></document-engine-icon>\n\n          <button\n            *ngFor=\"let option of textAlignOptions; trackBy: trackByValue\"\n            documentEngineSelectOption\n            [value]=\"option.value\"\n          >\n            <document-engine-icon [name]=\"option.icon\"></document-engine-icon>\n            <span>{{ option.label }}</span>\n          </button>\n        </document-engine-select>\n\n        <!-- Indent -->\n        <button\n          *ngIf=\"capabilities.hasIndent\"\n          documentEngineButton\n          size=\"icon\"\n          [disabled]=\"toolbarState.isReadOnly || !toolbarState.canDecreaseIndent\"\n          (click)=\"runAndEmit('decreaseIndent', editor.chain().focus().decreaseIndent().run)\"\n          title=\"Decrease Indent\"\n        >\n          <document-engine-icon name=\"format_indent_decrease\"></document-engine-icon>\n        </button>\n\n        <button\n          *ngIf=\"capabilities.hasIndent\"\n          documentEngineButton\n          size=\"icon\"\n          [disabled]=\"toolbarState.isReadOnly || !toolbarState.canIncreaseIndent\"\n          (click)=\"runAndEmit('increaseIndent', editor.chain().focus().increaseIndent().run)\"\n          title=\"Increase Indent\"\n        >\n          <document-engine-icon name=\"format_indent_increase\"></document-engine-icon>\n        </button>\n\n        <!-- Lists: Bullet, Numbered (with style) -->\n        <button\n          *ngIf=\"capabilities.hasLists\"\n          documentEngineButton\n          size=\"icon\"\n          [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleBulletList\"\n          (click)=\"runAndEmit('toggleBulletList', editor.chain().focus().toggleBulletList().run)\"\n          [class.active]=\"editor.isActive('bulletList')\"\n          title=\"Bullet List\"\n        >\n          <document-engine-icon name=\"format_list_bulleted\"></document-engine-icon>\n        </button>\n\n        <!-- Numbered List with Style -->\n        <document-engine-select\n          *ngIf=\"capabilities.hasLists\"\n          placeholder=\"Numbered List\"\n          labelMode=\"static\"\n          [value]=\"\n            editor.isActive('customOrderedList')\n              ? editor.getAttributes('customOrderedList')['data-list-style-type'] || 'decimal'\n              : null\n          \"\n          [disabled]=\"toolbarState.isReadOnly\"\n          title=\"Numbered List\"\n        >\n          <document-engine-icon documentEngineSelectLabel name=\"format_list_numbered\"></document-engine-icon>\n\n          <button\n            *ngFor=\"let option of listStyleOptions; trackBy: trackByValue\"\n            documentEngineSelectOption\n            [value]=\"option.value\"\n            (click)=\"setListStyle(option.value)\"\n            [class.active]=\"\n              editor.isActive('customOrderedList') &&\n              editor.getAttributes('customOrderedList')['data-list-style-type'] === option.value\n            \"\n          >\n            <span>{{ option.example }}</span>\n            <span>{{ option.label }}</span>\n          </button>\n        </document-engine-select>\n      </div>\n\n      <!-- Block Types: Code Block, Blockquote -->\n      <div\n        *ngIf=\"capabilities.hasBlockTypes\"\n        class=\"document-engine-document-editor__toolbar-group\"\n        data-group=\"block-types\"\n      >\n        <!-- Blockquote -->\n        <button\n          *ngIf=\"capabilities.hasBlockquote\"\n          documentEngineButton\n          size=\"icon\"\n          [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleBlockquote\"\n          (click)=\"runAndEmit('toggleBlockquote', editor.chain().focus().toggleBlockquote().run)\"\n          [class.active]=\"editor.isActive('blockquote')\"\n          title=\"Quote\"\n        >\n          <document-engine-icon name=\"format_quote\"></document-engine-icon>\n        </button>\n      </div>\n\n      <!-- Insert Object: Table, Images, Special Chars, Page Break -->\n      <div\n        *ngIf=\"capabilities.hasInsertObject\"\n        class=\"document-engine-document-editor__toolbar-group\"\n        data-group=\"insert-object\"\n      >\n        <button\n          *ngIf=\"capabilities.hasTable\"\n          documentEngineButton\n          size=\"icon\"\n          [disabled]=\"toolbarState.isReadOnly\"\n          (click)=\"openCreateTableBubble($event)\"\n          [class.active]=\"editor.isActive('table')\"\n          title=\"Table\"\n        >\n          <document-engine-icon name=\"table_rows\"></document-engine-icon>\n        </button>\n\n        <button\n          *ngIf=\"capabilities.hasImages\"\n          documentEngineButton\n          size=\"icon\"\n          title=\"Insert Image\"\n          [disabled]=\"toolbarState.isReadOnly\"\n          (click)=\"insertImage($event)\"\n        >\n          <document-engine-icon name=\"photo\"></document-engine-icon>\n        </button>\n\n        <button\n          *ngIf=\"capabilities.hasSpecialChars\"\n          documentEngineButton\n          size=\"icon\"\n          title=\"Special Character\"\n          [disabled]=\"toolbarState.isReadOnly\"\n          (click)=\"openSpecialCharsBubble($event)\"\n        >\n          <document-engine-icon name=\"special_character\"></document-engine-icon>\n        </button>\n\n        <button\n          *ngIf=\"capabilities.hasPageBreak\"\n          documentEngineButton\n          size=\"icon\"\n          [disabled]=\"toolbarState.isReadOnly || !toolbarState.canInsertPageBreak\"\n          (click)=\"runAndEmit('insertPageBreak', editor.chain().focus().insertPageBreak().run)\"\n          title=\"Insert page break\"\n        >\n          <document-engine-icon name=\"insert_page_break\"></document-engine-icon>\n        </button>\n      </div>\n\n      <!-- Business Features: Templates, Dynamic Fields, Editable Region -->\n      <div\n        *ngIf=\"capabilities.hasBusinessFeatures\"\n        class=\"document-engine-document-editor__toolbar-group\"\n        data-group=\"business-features\"\n      >\n        <button\n          *ngIf=\"capabilities.hasDynamicFields\"\n          documentEngineButton\n          size=\"icon\"\n          title=\"Dynamic Field\"\n          [disabled]=\"toolbarState.isReadOnly\"\n          (click)=\"openDynamicFieldsBubble($event)\"\n        >\n          <document-engine-icon name=\"dynamic_form\"></document-engine-icon>\n        </button>\n\n        <button\n          *ngIf=\"capabilities.hasTemplates\"\n          documentEngineButton\n          size=\"icon\"\n          title=\"Template\"\n          [disabled]=\"toolbarState.isReadOnly\"\n          (click)=\"openTemplateBubble($event)\"\n        >\n          <document-engine-icon name=\"description\"></document-engine-icon>\n        </button>\n\n        <button\n          *ngIf=\"capabilities.hasEditableRegion\"\n          documentEngineButton\n          size=\"icon\"\n          [disabled]=\"!toolbarState.canToggleEditableRegion || toolbarState.isReadOnly\"\n          (click)=\"runAndEmit('toggleEditableRegion', editor.chain().focus().toggleEditableRegion().run)\"\n          [class.active]=\"editor.isActive('editableRegion')\"\n          title=\"Toggle editable region\"\n        >\n          <document-engine-icon name=\"restrict_edit\"></document-engine-icon>\n        </button>\n      </div>\n\n      <!-- Actions: Clear Content, Markdown -->\n      <div *ngIf=\"capabilities.hasActions\" class=\"document-engine-document-editor__toolbar-group\" data-group=\"actions\">\n        <button\n          *ngIf=\"capabilities.hasClearContent\"\n          documentEngineButton\n          size=\"icon\"\n          [disabled]=\"toolbarState.isReadOnly || !toolbarState.canClearContent\"\n          (click)=\"runAndEmit('clear', editor.chain().focus().clear().run)\"\n          title=\"Clear all content\"\n        >\n          <document-engine-icon name=\"clear_all\"></document-engine-icon>\n        </button>\n\n        <!-- <button\n          *ngIf=\"capabilities.hasMarkdown\"\n          documentEngineButton\n          size=\"icon\"\n          (click)=\"downloadAsMarkdown()\"\n          title=\"Download as Markdown\"\n        >\n          <document-engine-icon name=\"markdown\"></document-engine-icon>\n        </button> -->\n      </div>\n\n      <!-- Custom Toolbar Buttons -->\n      <div\n        *ngIf=\"customToolbarButtons.length > 0\"\n        class=\"document-engine-document-editor__toolbar-group\"\n        data-group=\"custom-buttons\"\n      >\n        <ng-container *ngFor=\"let button of customToolbarButtons; trackBy: trackByIndex\">\n          <!-- Icon Button -->\n          <button\n            *ngIf=\"button.type === 'icon-button'\"\n            documentEngineButton\n            size=\"icon\"\n            [disabled]=\"toolbarState.isReadOnly\"\n            (click)=\"handleCustomIconButton(button)\"\n            [title]=\"button.label || ''\"\n          >\n            <document-engine-icon [name]=\"button.icon\"></document-engine-icon>\n          </button>\n\n          <!-- Select Button -->\n          <document-engine-select\n            *ngIf=\"button.type === 'select-button'\"\n            [value]=\"null\"\n            labelMode=\"static\"\n            [disabled]=\"toolbarState.isReadOnly\"\n            [title]=\"button.label\"\n          >\n            <span documentEngineSelectLabel>{{ button.label }}</span>\n\n            <button\n              *ngFor=\"let option of button.options; trackBy: trackByValue\"\n              documentEngineSelectOption\n              [value]=\"option.value\"\n              (click)=\"handleCustomSelectButton(button, option.value)\"\n            >\n              {{ option.label }}\n            </button>\n          </document-engine-select>\n        </ng-container>\n      </div>\n    </div>\n\n    <!-- Right side actions -->\n    <div class=\"document-engine-document-editor__toolbar-right\">\n      <button\n        *ngIf=\"capabilities.hasPrintButton\"\n        documentEngineButton\n        size=\"icon\"\n        (click)=\"printValue()\"\n        title=\"Print Value\"\n      >\n        <document-engine-icon name=\"print\"></document-engine-icon>\n      </button>\n    </div>\n  </div>\n\n  <!-- Color Bubble Menu -->\n  <document-engine-toolbar-bubble-menu\n    #colorBubbleMenu\n    [editor]=\"editor\"\n    [config]=\"colorBubbleConfig\"\n  ></document-engine-toolbar-bubble-menu>\n\n  <!-- Link Bubble Menu -->\n  <document-engine-editor-bubble-menu\n    *ngIf=\"capabilities.hasLink\"\n    #linkBubbleWrapper\n    [editor]=\"editor\"\n    [config]=\"linkBubbleConfig\"\n  ></document-engine-editor-bubble-menu>\n\n  <!-- Table Bubble Menu -->\n  <document-engine-editor-bubble-menu\n    *ngIf=\"capabilities.hasTable\"\n    #tableBubbleWrapper\n    [editor]=\"editor\"\n    [config]=\"tableBubbleConfig\"\n  ></document-engine-editor-bubble-menu>\n\n  <!-- Image Bubble Menu -->\n  <document-engine-toolbar-bubble-menu\n    *ngIf=\"capabilities.hasImages\"\n    #imageBubbleMenu\n    [editor]=\"editor\"\n    [config]=\"imageBubbleConfig\"\n  ></document-engine-toolbar-bubble-menu>\n\n  <!-- Special Characters Bubble Menu -->\n  <document-engine-toolbar-bubble-menu\n    *ngIf=\"capabilities.hasSpecialChars\"\n    #specialCharsBubbleMenu\n    [editor]=\"editor\"\n    [config]=\"specialCharsBubbleConfig\"\n  ></document-engine-toolbar-bubble-menu>\n\n  <!-- Dynamic Fields Bubble Menu -->\n  <document-engine-toolbar-bubble-menu\n    *ngIf=\"capabilities.hasDynamicFields\"\n    #dynamicFieldsBubbleMenu\n    [editor]=\"editor\"\n    [config]=\"dynamicFieldsBubbleConfig\"\n  ></document-engine-toolbar-bubble-menu>\n\n  <!-- Template Bubble Menu -->\n  <document-engine-toolbar-bubble-menu\n    *ngIf=\"capabilities.hasTemplates\"\n    #templateBubbleMenu\n    [editor]=\"editor\"\n    [config]=\"templateBubbleConfig\"\n  ></document-engine-toolbar-bubble-menu>\n\n  <!-- Table Create Bubble Menu -->\n  <document-engine-toolbar-bubble-menu\n    *ngIf=\"capabilities.hasTable\"\n    #tableCreateBubbleMenu\n    [editor]=\"editor\"\n    [config]=\"tableCreateBubbleConfig\"\n  ></document-engine-toolbar-bubble-menu>\n</div>\n", styles: [":host{position:sticky;top:0;z-index:20}\n"] }]
-        }], propDecorators: { editor: [{
-                type: Input
-            }], capabilities: [{
-                type: Input
-            }], config: [{
-                type: Input
-            }], action: [{
-                type: Output
-            }], colorBubbleMenu: [{
-                type: ViewChild,
-                args: ['colorBubbleMenu']
-            }], linkBubbleWrapper: [{
-                type: ViewChild,
-                args: ['linkBubbleWrapper']
-            }], imageBubbleMenu: [{
-                type: ViewChild,
-                args: ['imageBubbleMenu']
-            }], specialCharsBubbleMenu: [{
-                type: ViewChild,
-                args: ['specialCharsBubbleMenu']
-            }], dynamicFieldsBubbleMenu: [{
-                type: ViewChild,
-                args: ['dynamicFieldsBubbleMenu']
-            }], templateBubbleMenu: [{
-                type: ViewChild,
-                args: ['templateBubbleMenu']
-            }], tableCreateBubbleMenu: [{
-                type: ViewChild,
-                args: ['tableCreateBubbleMenu']
-            }] } });
-
-/**
- * Character Count component for document editor footer
- * Displays character/word count with optional limit and color coding
- */
-class CharacterCountComponent {
-    cdr = inject(ChangeDetectorRef);
-    editor;
-    config;
-    mode = 'characters';
-    count = 0;
-    limit = null;
-    updateCount = () => {
-        if (!this.editor) {
-            return;
-        }
-        // Get count from editor storage if available
-        const characterCountStorage = this.editor.storage.characterCount;
-        if (characterCountStorage) {
-            if (this.mode === 'characters') {
-                this.count = characterCountStorage.characters?.() || 0;
-            }
-            else {
-                this.count = characterCountStorage.words?.() || 0;
-            }
+        this.toolbarService.emit('setFontSize', size);
+    }
+    setLineHeight(lineHeight) {
+        if (lineHeight) {
+            this.editor.chain().focus().setLineHeight(lineHeight).run();
         }
         else {
-            // Fallback: calculate from text
-            const text = this.editor.getText();
-            if (this.mode === 'characters') {
-                this.count = text.length;
-            }
-            else {
-                this.count = text.trim() ? text.trim().split(/\s+/).length : 0;
-            }
+            this.editor.chain().focus().unsetLineHeight().run();
         }
-        // Get limit from config
-        const characterCountConfig = this.config?.characterCount;
-        if (characterCountConfig && typeof characterCountConfig === 'object') {
-            this.limit = characterCountConfig.limit || null;
+        this.toolbarService.emit('setLineHeight', lineHeight);
+    }
+    setHeading(level) {
+        if (!level) {
+            this.editor.chain().focus().removeHeading().run();
         }
         else {
-            this.limit = null;
-        }
-        this.cdr.markForCheck();
-    };
-    ngOnInit() {
-        if (!this.editor) {
-            return;
+            const levelNumber = parseInt(level, 10);
+            this.editor.chain().focus().toggleHeading({ level: levelNumber }).run();
         }
-        // Subscribe to update events to keep count in sync
-        this.editor.on('update', this.updateCount);
-        this.editor.on('transaction', this.updateCount);
-        // Initialize count once
-        this.updateCount();
+        this.toolbarService.emit('setHeading', level);
     }
-    ngOnDestroy() {
-        if (this.editor) {
-            this.editor.off('update', this.updateCount);
-            this.editor.off('transaction', this.updateCount);
+    setTextAlign(align) {
+        if (align) {
+            this.editor
+                .chain()
+                .focus()
+                .setTextAlign(align)
+                .run();
         }
-    }
-    isNearLimit() {
-        if (!this.limit) {
-            return false;
+        else {
+            // Reset to default (left)
+            this.editor.chain().focus().setTextAlign('left').run();
         }
-        // Consider near limit when >= 90% of limit
-        return this.count >= this.limit * 0.9 && this.count < this.limit;
+        this.toolbarService.emit('setTextAlign', align);
     }
-    isOverLimit() {
-        if (!this.limit) {
-            return false;
+    setListStyle(listStyleType) {
+        if (this.editor.isActive('customOrderedList')) {
+            // If there's an active ordered list, update its style
+            this.editor.chain().focus().setListStyle(listStyleType).run();
         }
-        return this.count > this.limit;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: CharacterCountComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: CharacterCountComponent, isStandalone: true, selector: "document-engine-character-count", inputs: { editor: "editor", config: "config", mode: "mode" }, ngImport: i0, template: "<div class=\"document-engine-character-count\">\n  <span\n    class=\"document-engine-character-count__text\"\n    [class.document-engine-character-count__text--muted]=\"!isNearLimit() && !isOverLimit()\"\n    [class.document-engine-character-count__text--warning]=\"isNearLimit() && !isOverLimit()\"\n    [class.document-engine-character-count__text--error]=\"isOverLimit()\"\n  >\n    <ng-container *ngIf=\"mode === 'characters'\">\n      <ng-container *ngIf=\"limit; else noLimit\"> {{ count }} / {{ limit }} characters. </ng-container>\n      <ng-template #noLimit> {{ count }} {{ count === 1 ? 'character' : 'characters' }}. </ng-template>\n    </ng-container>\n    <ng-container *ngIf=\"mode === 'words'\"> {{ count }} {{ count === 1 ? 'word' : 'words' }}. </ng-container>\n  </span>\n</div>\n", styles: [".document-engine-character-count{display:flex;justify-content:flex-end}.document-engine-character-count__text{font-size:.875rem;transition:color .2s ease-in-out}.document-engine-character-count__text--muted{color:var(--muted-foreground, #6b7280)}.document-engine-character-count__text--warning{color:var(--warning, #d97706)}.document-engine-character-count__text--error{color:var(--destructive, #dc2626)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: CharacterCountComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'document-engine-character-count', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"document-engine-character-count\">\n  <span\n    class=\"document-engine-character-count__text\"\n    [class.document-engine-character-count__text--muted]=\"!isNearLimit() && !isOverLimit()\"\n    [class.document-engine-character-count__text--warning]=\"isNearLimit() && !isOverLimit()\"\n    [class.document-engine-character-count__text--error]=\"isOverLimit()\"\n  >\n    <ng-container *ngIf=\"mode === 'characters'\">\n      <ng-container *ngIf=\"limit; else noLimit\"> {{ count }} / {{ limit }} characters. </ng-container>\n      <ng-template #noLimit> {{ count }} {{ count === 1 ? 'character' : 'characters' }}. </ng-template>\n    </ng-container>\n    <ng-container *ngIf=\"mode === 'words'\"> {{ count }} {{ count === 1 ? 'word' : 'words' }}. </ng-container>\n  </span>\n</div>\n", styles: [".document-engine-character-count{display:flex;justify-content:flex-end}.document-engine-character-count__text{font-size:.875rem;transition:color .2s ease-in-out}.document-engine-character-count__text--muted{color:var(--muted-foreground, #6b7280)}.document-engine-character-count__text--warning{color:var(--warning, #d97706)}.document-engine-character-count__text--error{color:var(--destructive, #dc2626)}\n"] }]
-        }], propDecorators: { editor: [{
-                type: Input
-            }], config: [{
-                type: Input
-            }], mode: [{
-                type: Input
-            }] } });
-
-/**
- * Footer component for document editor
- * Container for footer components like character count
- */
-class FooterComponent {
-    editor;
-    config;
-    // @Input() editable = true;
-    hasCharacterCount() {
-        const config = this.config ?? {};
-        return config.characterCount !== false;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: FooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: FooterComponent, isStandalone: true, selector: "document-engine-footer", inputs: { editor: "editor", config: "config" }, ngImport: i0, template: "<div class=\"document-engine-document-editor__footer\">\n  <div class=\"document-engine-document-editor__footer-content\">\n    <div class=\"document-engine-document-editor__footer-left\">\n      <!-- Additional footer components can be added here -->\n    </div>\n\n    <div class=\"document-engine-document-editor__footer-right\">\n      <document-engine-character-count\n        *ngIf=\"hasCharacterCount()\"\n        [editor]=\"editor\"\n        [config]=\"config\"\n        mode=\"characters\"\n      ></document-engine-character-count>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CharacterCountComponent, selector: "document-engine-character-count", inputs: ["editor", "config", "mode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: FooterComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'document-engine-footer', standalone: true, imports: [CommonModule, CharacterCountComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"document-engine-document-editor__footer\">\n  <div class=\"document-engine-document-editor__footer-content\">\n    <div class=\"document-engine-document-editor__footer-left\">\n      <!-- Additional footer components can be added here -->\n    </div>\n\n    <div class=\"document-engine-document-editor__footer-right\">\n      <document-engine-character-count\n        *ngIf=\"hasCharacterCount()\"\n        [editor]=\"editor\"\n        [config]=\"config\"\n        mode=\"characters\"\n      ></document-engine-character-count>\n    </div>\n  </div>\n</div>\n" }]
-        }], propDecorators: { editor: [{
-                type: Input
-            }], config: [{
-                type: Input
-            }] } });
-
-/**
- * Document Editor Component
- * High-level wrapper that encapsulates TiptapEditor and DocumentEngineKit
- * Provides a simple API for consumers without exposing internal dependencies
- *
- * Usage:
- * <document-engine-editor
- *   #editor
- *   [config]="editorConfig"
- *
- *   (editorReady)="editor = docEditor.editor"
- * >
- *   <tiptap-editor
- *     [editor]="docEditor.editor"
- *     [(ngModel)]="content"
- *   ></tiptap-editor>
- * </document-engine-editor>
- */
-class DocumentEditorComponent {
-    ngZone = inject(NgZone);
-    config;
-    editorReady = new EventEmitter();
-    // Expose editor property for external access (re-export)
-    editor;
-    // Store merged config for toolbar and helper methods
-    get mergedConfig() {
-        return this._mergedConfig ?? this.getMergedConfig();
-    }
-    _mergedConfig;
-    // Capabilities instance for toolbar
-    capabilities;
-    updateCapabilities() {
-        this.capabilities = new EditorCapabilities(this.mergedConfig);
-    }
-    ngOnChanges(changes) {
-        if (!changes['config'])
-            return;
-        if (!this.editor)
-            return;
-        this._mergedConfig = this.getMergedConfig();
-        this.updateCapabilities();
-        this.editor.setEditable(this._mergedConfig.editable ?? true);
-    }
-    ngOnInit() {
-        this.initializeEditor();
+        else {
+            // If no active list, create a new one with the selected style
+            this.editor.chain().focus().toggleOrderedList().run();
+            this.editor.chain().focus().setListStyle(listStyleType).run();
+        }
+        this.toolbarService.emit('setListStyle', listStyleType);
     }
-    ngOnDestroy() {
-        if (this.editor)
-            this.editor.destroy();
+    openColorBubble(event, type) {
+        const targetElement = (event.currentTarget || event.target);
+        this.colorBubbleMenu?.toggleBubble(targetElement, { type });
+        this.toolbarService.emit('openColorBubble', { type });
     }
-    // Internal methods
-    initializeEditor() {
-        // Run editor initialization outside Angular zone for better performance
-        // Editor operations (especially typing) don't need to trigger Angular change detection
-        this.ngZone.runOutsideAngular(() => {
-            // Merge user config with default full-featured config
-            this._mergedConfig = this.getMergedConfig();
-            // Initialize editor with config
-            // Initial content will be set by TiptapEditorDirective via writeValue
-            this.editor = new Editor({
-                editable: this._mergedConfig.editable,
-                extensions: [DocumentEngineKit.configure(this._mergedConfig)],
-            });
-            // Emit editorReady event back inside Angular zone
-            this.ngZone.run(() => {
-                // Create capabilities instance after editor is initialized
-                this.updateCapabilities();
-                this.editorReady.emit(this.editor);
-            });
-        });
+    toggleLink() {
+        if (this.editor.isActive('link')) {
+            // If link is active, remove it
+            this.editor.chain().focus().unsetLink().run();
+        }
+        else {
+            // If no link, open the bubble menu
+            this.linkBubbleWrapper?.showBubble();
+        }
+        this.toolbarService.emit('toggleLink');
     }
-    /**
-     * Get merged config with all extensions enabled by default
-     * User config will override defaults
-     */
-    getMergedConfig() {
-        // Merge user config with defaults, preferring user config when provided
-        return this.mergeConfig(DefaultEditorConfig, this.config);
+    insertImage(event) {
+        const targetElement = (event.currentTarget || event.target);
+        this.imageBubbleMenu?.toggleBubble(targetElement);
+        this.toolbarService.emit('insertImage');
     }
-    /**
-     * Merge two config objects, preferring userConfig values when provided
-     */
-    mergeConfig(defaultConfig, userConfig) {
-        if (!userConfig)
-            return defaultConfig;
-        const merged = { ...defaultConfig };
-        const keys = Object.keys(userConfig);
-        for (const key of keys) {
-            const value = userConfig[key];
-            if (value !== undefined)
-                merged[key] = value;
-        }
-        return merged;
+    openSpecialCharsBubble(event) {
+        const targetElement = (event.currentTarget || event.target);
+        this.specialCharsBubbleMenu?.toggleBubble(targetElement);
+        this.toolbarService.emit('openSpecialCharsBubble');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DocumentEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: DocumentEditorComponent, isStandalone: false, selector: "document-engine-editor", inputs: { config: "config" }, outputs: { editorReady: "editorReady" }, host: { classAttribute: "no-twp" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"document-engine-document-editor\">\n  <document-engine-toolbar\n    *ngIf=\"mergedConfig.showToolbar\"\n    [editor]=\"editor\"\n    [capabilities]=\"capabilities\"\n    [config]=\"mergedConfig\"\n  ></document-engine-toolbar>\n\n  <div class=\"document-engine-document-editor__content\">\n    <ng-content></ng-content>\n  </div>\n\n  <document-engine-footer\n    *ngIf=\"editor && mergedConfig.showFooter\"\n    [editor]=\"editor\"\n    [config]=\"mergedConfig\"\n  ></document-engine-footer>\n</div>\n", styles: [":is() *,:is() *:before,:is() *:after{box-sizing:border-box}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ToolbarComponent, selector: "document-engine-toolbar", inputs: ["editor", "capabilities", "config"], outputs: ["action"] }, { kind: "component", type: FooterComponent, selector: "document-engine-footer", inputs: ["editor", "config"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DocumentEditorComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'document-engine-editor', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        class: 'no-twp',
-                    }, template: "<div class=\"document-engine-document-editor\">\n  <document-engine-toolbar\n    *ngIf=\"mergedConfig.showToolbar\"\n    [editor]=\"editor\"\n    [capabilities]=\"capabilities\"\n    [config]=\"mergedConfig\"\n  ></document-engine-toolbar>\n\n  <div class=\"document-engine-document-editor__content\">\n    <ng-content></ng-content>\n  </div>\n\n  <document-engine-footer\n    *ngIf=\"editor && mergedConfig.showFooter\"\n    [editor]=\"editor\"\n    [config]=\"mergedConfig\"\n  ></document-engine-footer>\n</div>\n", styles: [":is() *,:is() *:before,:is() *:after{box-sizing:border-box}\n"] }]
-        }], propDecorators: { config: [{
-                type: Input
-            }], editorReady: [{
-                type: Output
-            }] } });
-
-class DocumentEditorModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DocumentEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.10", ngImport: i0, type: DocumentEditorModule, declarations: [DocumentEditorComponent], imports: [CommonModule, ToolbarComponent, FooterComponent], exports: [DocumentEditorComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DocumentEditorModule, imports: [CommonModule, ToolbarComponent, FooterComponent] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DocumentEditorModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [DocumentEditorComponent],
-                    imports: [CommonModule, ToolbarComponent, FooterComponent],
-                    exports: [DocumentEditorComponent],
-                }]
-        }] });
-
-class AngularRenderer {
-    applicationRef;
-    componentRef;
-    constructor(ViewComponent, injector, props) {
-        this.applicationRef = injector.get(ApplicationRef);
-        this.componentRef = createComponent(ViewComponent, {
-            environmentInjector: this.applicationRef.injector,
-            elementInjector: injector,
+    openDynamicFieldsBubble(event) {
+        const targetElement = (event.currentTarget || event.target);
+        this.dynamicFieldsBubbleMenu?.toggleBubble(targetElement, {
+            categories: this.config?.dynamicFieldsCategories || [],
         });
-        // set input props to the component
-        this.updateProps(props);
-        this.applicationRef.attachView(this.componentRef.hostView);
+        this.toolbarService.emit('openDynamicFieldsBubble');
     }
-    get instance() {
-        return this.componentRef.instance;
+    openTemplateBubble(event) {
+        const targetElement = (event.currentTarget || event.target);
+        this.templateBubbleMenu?.toggleBubble(targetElement, {
+            templates: this.config?.templates || [],
+        });
+        this.toolbarService.emit('openTemplateBubble');
     }
-    get elementRef() {
-        return this.componentRef.injector.get(ElementRef);
+    openCreateTableBubble(event) {
+        const targetElement = (event.currentTarget || event.target);
+        this.tableCreateBubbleMenu?.toggleBubble(targetElement);
+        this.toolbarService.emit('openCreateTableBubble');
     }
-    get dom() {
-        return this.elementRef.nativeElement;
+    // downloadAsMarkdown(filename?: string): void {
+    //   const fileName = filename ? `${filename}.md` : 'export.md';
+    //   const markdown = renderToMarkdown({
+    //     content: this.editor.getJSON(),
+    //     extensions: this.editor.options.extensions,
+    //     options: {
+    //       nodeMapping: {
+    //         pageBreak: () => 'Page break',
+    //       },
+    //     },
+    //   });
+    //   const blob = new Blob([markdown], { type: 'text/markdown' });
+    //   const url = URL.createObjectURL(blob);
+    //   const a = document.createElement('a');
+    //   a.href = url;
+    //   a.download = fileName;
+    //   a.click();
+    //   URL.revokeObjectURL(url);
+    // }
+    trackByValue(index, item) {
+        return item.value;
     }
-    updateProps(props) {
-        Object.entries(props).forEach(([key, value]) => {
-            this.componentRef.setInput(key, value);
-        });
+    trackByIndex(index) {
+        return index;
     }
-    updateAttributes(attributes) {
-        Object.keys(attributes).forEach((key) => {
-            this.dom.setAttribute(key, attributes[key]);
-        });
+    get customToolbarButtons() {
+        return this.config?.customToolbarButtons || [];
     }
-    detectChanges() {
-        this.componentRef.changeDetectorRef.detectChanges();
+    handleCustomIconButton(button) {
+        if (button.type === 'icon-button') {
+            button.callback();
+            this.toolbarService.emit('customIconButton', { label: button.label, icon: button.icon });
+        }
     }
-    destroy() {
-        this.componentRef.destroy();
-        this.applicationRef.detachView(this.componentRef.hostView);
+    handleCustomSelectButton(button, value) {
+        if (button.type === 'select-button') {
+            button.callback();
+            this.toolbarService.emit('customSelectButton', { label: button.label, value });
+        }
     }
+    printValue() {
+        console.log('html', this.editor.getHTML());
+        console.log('json', this.editor.getJSON());
+        console.log('State', this.editor.state);
+        this.toolbarService.emit('printValue');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: ToolbarComponent, isStandalone: true, selector: "document-engine-toolbar", inputs: { editor: "editor", capabilities: "capabilities", config: "config" }, outputs: { action: "action" }, viewQueries: [{ propertyName: "colorBubbleMenu", first: true, predicate: ["colorBubbleMenu"], descendants: true }, { propertyName: "linkBubbleWrapper", first: true, predicate: ["linkBubbleWrapper"], descendants: true }, { propertyName: "imageBubbleMenu", first: true, predicate: ["imageBubbleMenu"], descendants: true }, { propertyName: "specialCharsBubbleMenu", first: true, predicate: ["specialCharsBubbleMenu"], descendants: true }, { propertyName: "dynamicFieldsBubbleMenu", first: true, predicate: ["dynamicFieldsBubbleMenu"], descendants: true }, { propertyName: "templateBubbleMenu", first: true, predicate: ["templateBubbleMenu"], descendants: true }, { propertyName: "tableCreateBubbleMenu", first: true, predicate: ["tableCreateBubbleMenu"], descendants: true }], ngImport: i0, template: "<div class=\"document-engine-document-editor__toolbar\">\n  <div class=\"document-engine-document-editor__toolbar-content\">\n    <div class=\"document-engine-document-editor__toolbar-left\">\n      <!-- History: Undo/Redo -->\n      <div *ngIf=\"capabilities.hasHistory\" class=\"document-engine-document-editor__toolbar-group\" data-group=\"history\">\n        <button\n          documentEngineButton\n          size=\"icon\"\n          [disabled]=\"toolbarState.isReadOnly || !toolbarState.canUndo\"\n          (click)=\"runAndEmit('undo', editor.chain().focus().undo().run)\"\n          title=\"Undo (Ctrl+Z)\"\n        >\n          <document-engine-icon name=\"undo\"></document-engine-icon>\n        </button>\n\n        <button\n          documentEngineButton\n          size=\"icon\"\n          [disabled]=\"toolbarState.isReadOnly || !toolbarState.canRedo\"\n          (click)=\"runAndEmit('redo', editor.chain().focus().redo().run)\"\n          title=\"Redo\"\n        >\n          <document-engine-icon name=\"redo\"></document-engine-icon>\n        </button>\n      </div>\n\n      <!-- Text Formatting: Font Size, Line Height, Text Case, Heading -->\n      <div\n        *ngIf=\"capabilities.hasTextProperty\"\n        class=\"document-engine-document-editor__toolbar-group\"\n        data-group=\"text-property\"\n      >\n        <!-- Font Size -->\n        <document-engine-select\n          *ngIf=\"capabilities.hasFontSize\"\n          [value]=\"activeFontSize\"\n          placeholder=\"Font Size\"\n          labelMode=\"static\"\n          [disabled]=\"toolbarState.isReadOnly\"\n          title=\"Font Size\"\n        >\n          <document-engine-icon documentEngineSelectLabel name=\"format_size\"></document-engine-icon>\n\n          <button documentEngineSelectOption [value]=\"null\">Default</button>\n\n          <button\n            *ngFor=\"let option of fontSizeOptions; trackBy: trackByValue\"\n            documentEngineSelectOption\n            [value]=\"option.value\"\n            (click)=\"setFontSize(option.value)\"\n          >\n            {{ option.label }}\n          </button>\n        </document-engine-select>\n\n        <!-- Line Height -->\n        <document-engine-select\n          *ngIf=\"capabilities.hasLineHeight\"\n          [value]=\"activeLineHeight\"\n          placeholder=\"Line Height\"\n          labelMode=\"static\"\n          [disabled]=\"toolbarState.isReadOnly\"\n          title=\"Line Height\"\n        >\n          <document-engine-icon documentEngineSelectLabel name=\"format_line_spacing\"></document-engine-icon>\n\n          <button\n            *ngFor=\"let option of lineHeightOptions; trackBy: trackByValue\"\n            documentEngineSelectOption\n            [value]=\"option.value\"\n            (click)=\"setLineHeight(option.value)\"\n          >\n            {{ option.label }}\n          </button>\n        </document-engine-select>\n\n        <!-- Text Case -->\n        <document-engine-select\n          *ngIf=\"capabilities.hasTextCase\"\n          placeholder=\"Text Case\"\n          labelMode=\"static\"\n          [disabled]=\"toolbarState.isReadOnly\"\n          title=\"Text Case\"\n        >\n          <document-engine-icon documentEngineSelectLabel name=\"match_case\"></document-engine-icon>\n\n          <button\n            *ngFor=\"let option of textCaseOptions; trackBy: trackByValue\"\n            documentEngineSelectOption\n            [value]=\"option.value\"\n            (click)=\"runAndEmit('setTextCase', editor.chain().focus().textCase(option.value).run)\"\n          >\n            {{ option.label }}\n          </button>\n        </document-engine-select>\n\n        <!-- Heading -->\n        <document-engine-select\n          *ngIf=\"capabilities.hasHeading\"\n          [value]=\"activeHeading?.toString() || null\"\n          placeholder=\"Normal text\"\n          [disabled]=\"toolbarState.isReadOnly\"\n          title=\"Heading\"\n        >\n          <button\n            *ngFor=\"let option of headingOptions; trackBy: trackByValue\"\n            documentEngineSelectOption\n            [value]=\"option.value?.toString() || null\"\n            [class]=\"option.class\"\n            (click)=\"setHeading(option.value?.toString() || null)\"\n          >\n            {{ option.label }}\n          </button>\n        </document-engine-select>\n      </div>\n\n      <!-- Format Utilities: Reset Formatting & Colors -->\n      <div\n        *ngIf=\"capabilities.hasFormatUtilities\"\n        class=\"document-engine-document-editor__toolbar-group\"\n        data-group=\"format-utilities\"\n      >\n        <!-- Reset Formatting -->\n        <button\n          *ngIf=\"capabilities.hasResetFormat\"\n          documentEngineButton\n          size=\"icon\"\n          (click)=\"runAndEmit('resetFormat', editor.chain().focus().resetFormat().run)\"\n          [disabled]=\"toolbarState.isReadOnly || !toolbarState.canResetFormat\"\n          title=\"Clear Formatting\"\n        >\n          <document-engine-icon name=\"format_clear\"></document-engine-icon>\n        </button>\n\n        <!-- Colors: Text/Background -->\n        <button\n          *ngIf=\"capabilities.hasColors\"\n          documentEngineButton\n          size=\"icon\"\n          title=\"Text Color\"\n          [disabled]=\"toolbarState.isReadOnly\"\n          (click)=\"openColorBubble($event, 'text')\"\n        >\n          <document-engine-icon name=\"format_color_text\"></document-engine-icon>\n        </button>\n\n        <button\n          *ngIf=\"capabilities.hasColors\"\n          documentEngineButton\n          size=\"icon\"\n          title=\"Background Color\"\n          [disabled]=\"toolbarState.isReadOnly\"\n          (click)=\"openColorBubble($event, 'fill')\"\n        >\n          <document-engine-icon name=\"format_color_fill\"></document-engine-icon>\n        </button>\n      </div>\n\n      <!-- Text Styles: Bold/Italic/Underline/Strike -->\n      <div\n        *ngIf=\"capabilities.basicInline\"\n        class=\"document-engine-document-editor__toolbar-group\"\n        data-group=\"basic-inline\"\n      >\n        <button\n          *ngIf=\"capabilities.hasBold\"\n          documentEngineButton\n          size=\"icon\"\n          [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleBold\"\n          (click)=\"runAndEmit('toggleBold', editor.chain().focus().toggleBold().run)\"\n          [class.active]=\"editor.isActive('bold')\"\n          title=\"Bold\"\n        >\n          <document-engine-icon name=\"format_bold\"></document-engine-icon>\n        </button>\n\n        <button\n          *ngIf=\"capabilities.hasItalic\"\n          documentEngineButton\n          size=\"icon\"\n          [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleItalic\"\n          (click)=\"runAndEmit('toggleItalic', editor.chain().focus().toggleItalic().run)\"\n          [class.active]=\"editor.isActive('italic')\"\n          title=\"Italic\"\n        >\n          <document-engine-icon name=\"format_italic\"></document-engine-icon>\n        </button>\n\n        <button\n          *ngIf=\"capabilities.hasUnderline\"\n          documentEngineButton\n          size=\"icon\"\n          [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleUnderline\"\n          (click)=\"runAndEmit('toggleUnderline', editor.chain().focus().toggleUnderline().run)\"\n          [class.active]=\"editor.isActive('underline')\"\n          title=\"Underline\"\n        >\n          <document-engine-icon name=\"format_underline\"></document-engine-icon>\n        </button>\n\n        <button\n          *ngIf=\"capabilities.hasStrike\"\n          documentEngineButton\n          size=\"icon\"\n          [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleStrike\"\n          (click)=\"runAndEmit('toggleStrike', editor.chain().focus().toggleStrike().run)\"\n          [class.active]=\"editor.isActive('strike')\"\n          title=\"Strikethrough\"\n        >\n          <document-engine-icon name=\"format_strikethrough\"></document-engine-icon>\n        </button>\n      </div>\n\n      <!-- Text Styles: Sub/Super/Code/Link -->\n      <div\n        *ngIf=\"capabilities.advancedInline\"\n        class=\"document-engine-document-editor__toolbar-group\"\n        data-group=\"advanced-inline\"\n      >\n        <button\n          *ngIf=\"capabilities.hasSubscript\"\n          documentEngineButton\n          size=\"icon\"\n          [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleSubscript\"\n          (click)=\"runAndEmit('toggleSubscript', editor.chain().focus().toggleSubscript().run)\"\n          [class.active]=\"editor.isActive('subscript')\"\n          title=\"Subscript\"\n        >\n          <document-engine-icon name=\"subscript\"></document-engine-icon>\n        </button>\n\n        <button\n          *ngIf=\"capabilities.hasSuperscript\"\n          documentEngineButton\n          size=\"icon\"\n          [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleSuperscript\"\n          (click)=\"runAndEmit('toggleSuperscript', editor.chain().focus().toggleSuperscript().run)\"\n          [class.active]=\"editor.isActive('superscript')\"\n          title=\"Superscript\"\n        >\n          <document-engine-icon name=\"superscript\"></document-engine-icon>\n        </button>\n\n        <button\n          *ngIf=\"capabilities.hasCode\"\n          documentEngineButton\n          size=\"icon\"\n          [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleCode\"\n          (click)=\"runAndEmit('toggleCode', editor.chain().focus().toggleCode().run)\"\n          [class.active]=\"editor.isActive('code')\"\n          title=\"Code\"\n        >\n          <document-engine-icon name=\"code\"></document-engine-icon>\n        </button>\n\n        <button\n          *ngIf=\"capabilities.hasLink\"\n          documentEngineButton\n          size=\"icon\"\n          [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleLink\"\n          (click)=\"toggleLink()\"\n          [class.active]=\"editor.isActive('link')\"\n          [title]=\"editor.isActive('link') ? 'Unlink' : 'Link'\"\n        >\n          <document-engine-icon [name]=\"editor.isActive('link') ? 'link_off' : 'link'\"></document-engine-icon>\n        </button>\n      </div>\n\n      <!-- Alignment & Layout: Text Align, Indent -->\n      <div\n        *ngIf=\"capabilities.hasAlignmentLayout\"\n        class=\"document-engine-document-editor__toolbar-group\"\n        data-group=\"alignment-layout\"\n      >\n        <!-- Text Alignment -->\n        <document-engine-select\n          *ngIf=\"capabilities.hasTextAlign\"\n          [value]=\"activeTextAlign\"\n          (valueChange)=\"setTextAlign($event)\"\n          placeholder=\"Text Align\"\n          labelMode=\"static\"\n          [disabled]=\"toolbarState.isReadOnly\"\n          title=\"Text Align\"\n        >\n          <document-engine-icon documentEngineSelectLabel [name]=\"activeTextAlignIcon\"></document-engine-icon>\n\n          <button\n            *ngFor=\"let option of textAlignOptions; trackBy: trackByValue\"\n            documentEngineSelectOption\n            [value]=\"option.value\"\n          >\n            <document-engine-icon [name]=\"option.icon\"></document-engine-icon>\n            <span>{{ option.label }}</span>\n          </button>\n        </document-engine-select>\n\n        <!-- Indent -->\n        <button\n          *ngIf=\"capabilities.hasIndent\"\n          documentEngineButton\n          size=\"icon\"\n          [disabled]=\"toolbarState.isReadOnly || !toolbarState.canDecreaseIndent\"\n          (click)=\"runAndEmit('decreaseIndent', editor.chain().focus().decreaseIndent().run)\"\n          title=\"Decrease Indent\"\n        >\n          <document-engine-icon name=\"format_indent_decrease\"></document-engine-icon>\n        </button>\n\n        <button\n          *ngIf=\"capabilities.hasIndent\"\n          documentEngineButton\n          size=\"icon\"\n          [disabled]=\"toolbarState.isReadOnly || !toolbarState.canIncreaseIndent\"\n          (click)=\"runAndEmit('increaseIndent', editor.chain().focus().increaseIndent().run)\"\n          title=\"Increase Indent\"\n        >\n          <document-engine-icon name=\"format_indent_increase\"></document-engine-icon>\n        </button>\n      </div>\n\n      <!-- Lists -->\n      <div\n        *ngIf=\"capabilities.hasAlignmentLayout\"\n        class=\"document-engine-document-editor__toolbar-group\"\n        data-group=\"alignment-layout\"\n      >\n        <!-- Lists: Bullet, Numbered (with style) -->\n        <button\n          *ngIf=\"capabilities.hasLists\"\n          documentEngineButton\n          size=\"icon\"\n          [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleBulletList\"\n          (click)=\"runAndEmit('toggleBulletList', editor.chain().focus().toggleBulletList().run)\"\n          [class.active]=\"editor.isActive('bulletList')\"\n          title=\"Bullet List\"\n        >\n          <document-engine-icon name=\"format_list_bulleted\"></document-engine-icon>\n        </button>\n\n        <!-- Numbered List with Style -->\n        <document-engine-select\n          *ngIf=\"capabilities.hasLists\"\n          placeholder=\"Numbered List\"\n          labelMode=\"static\"\n          [value]=\"\n            editor.isActive('customOrderedList')\n              ? editor.getAttributes('customOrderedList')['data-list-style-type'] || 'decimal'\n              : null\n          \"\n          [disabled]=\"toolbarState.isReadOnly\"\n          title=\"Numbered List\"\n        >\n          <document-engine-icon documentEngineSelectLabel name=\"format_list_numbered\"></document-engine-icon>\n\n          <button\n            *ngFor=\"let option of listStyleOptions; trackBy: trackByValue\"\n            documentEngineSelectOption\n            [value]=\"option.value\"\n            (click)=\"setListStyle(option.value)\"\n            [class.active]=\"\n              editor.isActive('customOrderedList') &&\n              editor.getAttributes('customOrderedList')['data-list-style-type'] === option.value\n            \"\n          >\n            <span>{{ option.example }}</span>\n            <span>{{ option.label }}</span>\n          </button>\n        </document-engine-select>\n      </div>\n\n      <!-- Block Types: Code Block, Blockquote -->\n      <div\n        *ngIf=\"capabilities.hasBlockTypes\"\n        class=\"document-engine-document-editor__toolbar-group\"\n        data-group=\"block-types\"\n      >\n        <!-- Blockquote -->\n        <button\n          *ngIf=\"capabilities.hasBlockquote\"\n          documentEngineButton\n          size=\"icon\"\n          [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleBlockquote\"\n          (click)=\"runAndEmit('toggleBlockquote', editor.chain().focus().toggleBlockquote().run)\"\n          [class.active]=\"editor.isActive('blockquote')\"\n          title=\"Quote\"\n        >\n          <document-engine-icon name=\"format_quote\"></document-engine-icon>\n        </button>\n      </div>\n\n      <!-- Insert Object: Table, Images, Special Chars, Page Break -->\n      <div\n        *ngIf=\"capabilities.hasInsertObject\"\n        class=\"document-engine-document-editor__toolbar-group\"\n        data-group=\"insert-object\"\n      >\n        <button\n          *ngIf=\"capabilities.hasTable\"\n          documentEngineButton\n          size=\"icon\"\n          [disabled]=\"toolbarState.isReadOnly\"\n          (click)=\"openCreateTableBubble($event)\"\n          [class.active]=\"editor.isActive('table')\"\n          title=\"Table\"\n        >\n          <document-engine-icon name=\"table_rows\"></document-engine-icon>\n        </button>\n\n        <button\n          *ngIf=\"capabilities.hasImages\"\n          documentEngineButton\n          size=\"icon\"\n          title=\"Insert Image\"\n          [disabled]=\"toolbarState.isReadOnly\"\n          (click)=\"insertImage($event)\"\n        >\n          <document-engine-icon name=\"photo\"></document-engine-icon>\n        </button>\n\n        <button\n          *ngIf=\"capabilities.hasSpecialChars\"\n          documentEngineButton\n          size=\"icon\"\n          title=\"Special Character\"\n          [disabled]=\"toolbarState.isReadOnly\"\n          (click)=\"openSpecialCharsBubble($event)\"\n        >\n          <document-engine-icon name=\"special_character\"></document-engine-icon>\n        </button>\n\n        <button\n          *ngIf=\"capabilities.hasPageBreak\"\n          documentEngineButton\n          size=\"icon\"\n          [disabled]=\"toolbarState.isReadOnly || !toolbarState.canInsertPageBreak\"\n          (click)=\"runAndEmit('insertPageBreak', editor.chain().focus().insertPageBreak().run)\"\n          title=\"Insert page break\"\n        >\n          <document-engine-icon name=\"insert_page_break\"></document-engine-icon>\n        </button>\n      </div>\n\n      <!-- Business Features: Templates, Dynamic Fields, Editable Region -->\n      <div\n        *ngIf=\"capabilities.hasBusinessFeatures\"\n        class=\"document-engine-document-editor__toolbar-group\"\n        data-group=\"business-features\"\n      >\n        <button\n          *ngIf=\"capabilities.hasDynamicFields\"\n          documentEngineButton\n          size=\"icon\"\n          title=\"Dynamic Field\"\n          [disabled]=\"toolbarState.isReadOnly\"\n          (click)=\"openDynamicFieldsBubble($event)\"\n        >\n          <document-engine-icon name=\"dynamic_form\"></document-engine-icon>\n        </button>\n\n        <button\n          *ngIf=\"capabilities.hasTemplates\"\n          documentEngineButton\n          size=\"icon\"\n          title=\"Template\"\n          [disabled]=\"toolbarState.isReadOnly\"\n          (click)=\"openTemplateBubble($event)\"\n        >\n          <document-engine-icon name=\"description\"></document-engine-icon>\n        </button>\n\n        <button\n          *ngIf=\"capabilities.hasEditableRegion\"\n          documentEngineButton\n          size=\"icon\"\n          [disabled]=\"!toolbarState.canToggleEditableRegion || toolbarState.isReadOnly\"\n          (click)=\"runAndEmit('toggleEditableRegion', editor.chain().focus().toggleEditableRegion().run)\"\n          [class.active]=\"editor.isActive('editableRegion')\"\n          title=\"Toggle editable region\"\n        >\n          <document-engine-icon name=\"restrict_edit\"></document-engine-icon>\n        </button>\n      </div>\n\n      <!-- Actions: Clear Content, Markdown -->\n      <div *ngIf=\"capabilities.hasActions\" class=\"document-engine-document-editor__toolbar-group\" data-group=\"actions\">\n        <button\n          *ngIf=\"capabilities.hasClearContent\"\n          documentEngineButton\n          size=\"icon\"\n          [disabled]=\"toolbarState.isReadOnly || !toolbarState.canClearContent\"\n          (click)=\"runAndEmit('clear', editor.chain().focus().clear().run)\"\n          title=\"Clear all content\"\n        >\n          <document-engine-icon name=\"clear_all\"></document-engine-icon>\n        </button>\n\n        <!-- <button\n          *ngIf=\"capabilities.hasMarkdown\"\n          documentEngineButton\n          size=\"icon\"\n          (click)=\"downloadAsMarkdown()\"\n          title=\"Download as Markdown\"\n        >\n          <document-engine-icon name=\"markdown\"></document-engine-icon>\n        </button> -->\n      </div>\n\n      <!-- Custom Toolbar Buttons -->\n      <div\n        *ngIf=\"customToolbarButtons.length > 0\"\n        class=\"document-engine-document-editor__toolbar-group\"\n        data-group=\"custom-buttons\"\n      >\n        <ng-container *ngFor=\"let button of customToolbarButtons; trackBy: trackByIndex\">\n          <!-- Icon Button -->\n          <button\n            *ngIf=\"button.type === 'icon-button'\"\n            documentEngineButton\n            size=\"icon\"\n            [disabled]=\"toolbarState.isReadOnly\"\n            (click)=\"handleCustomIconButton(button)\"\n            [title]=\"button.label || ''\"\n          >\n            <document-engine-icon [name]=\"button.icon\"></document-engine-icon>\n          </button>\n\n          <!-- Select Button -->\n          <document-engine-select\n            *ngIf=\"button.type === 'select-button'\"\n            [value]=\"null\"\n            labelMode=\"static\"\n            [disabled]=\"toolbarState.isReadOnly\"\n            [title]=\"button.label\"\n          >\n            <span documentEngineSelectLabel>{{ button.label }}</span>\n\n            <button\n              *ngFor=\"let option of button.options; trackBy: trackByValue\"\n              documentEngineSelectOption\n              [value]=\"option.value\"\n              (click)=\"handleCustomSelectButton(button, option.value)\"\n            >\n              {{ option.label }}\n            </button>\n          </document-engine-select>\n        </ng-container>\n      </div>\n    </div>\n\n    <!-- Right side actions -->\n    <div class=\"document-engine-document-editor__toolbar-right\">\n      <button\n        *ngIf=\"capabilities.hasPrintButton\"\n        documentEngineButton\n        size=\"icon\"\n        (click)=\"printValue()\"\n        title=\"Print Value\"\n      >\n        <document-engine-icon name=\"print\"></document-engine-icon>\n      </button>\n    </div>\n  </div>\n\n  <!-- Color Bubble Menu -->\n  <document-engine-toolbar-bubble-menu\n    #colorBubbleMenu\n    [editor]=\"editor\"\n    [config]=\"colorBubbleConfig\"\n  ></document-engine-toolbar-bubble-menu>\n\n  <!-- Link Bubble Menu -->\n  <document-engine-editor-bubble-menu\n    *ngIf=\"capabilities.hasLink\"\n    #linkBubbleWrapper\n    [editor]=\"editor\"\n    [config]=\"linkBubbleConfig\"\n  ></document-engine-editor-bubble-menu>\n\n  <!-- Table Bubble Menu -->\n  <document-engine-editor-bubble-menu\n    *ngIf=\"capabilities.hasTable\"\n    #tableBubbleWrapper\n    [editor]=\"editor\"\n    [config]=\"tableBubbleConfig\"\n  ></document-engine-editor-bubble-menu>\n\n  <!-- Image Bubble Menu -->\n  <document-engine-toolbar-bubble-menu\n    *ngIf=\"capabilities.hasImages\"\n    #imageBubbleMenu\n    [editor]=\"editor\"\n    [config]=\"imageBubbleConfig\"\n  ></document-engine-toolbar-bubble-menu>\n\n  <!-- Special Characters Bubble Menu -->\n  <document-engine-toolbar-bubble-menu\n    *ngIf=\"capabilities.hasSpecialChars\"\n    #specialCharsBubbleMenu\n    [editor]=\"editor\"\n    [config]=\"specialCharsBubbleConfig\"\n  ></document-engine-toolbar-bubble-menu>\n\n  <!-- Dynamic Fields Bubble Menu -->\n  <document-engine-toolbar-bubble-menu\n    *ngIf=\"capabilities.hasDynamicFields\"\n    #dynamicFieldsBubbleMenu\n    [editor]=\"editor\"\n    [config]=\"dynamicFieldsBubbleConfig\"\n  ></document-engine-toolbar-bubble-menu>\n\n  <!-- Template Bubble Menu -->\n  <document-engine-toolbar-bubble-menu\n    *ngIf=\"capabilities.hasTemplates\"\n    #templateBubbleMenu\n    [editor]=\"editor\"\n    [config]=\"templateBubbleConfig\"\n  ></document-engine-toolbar-bubble-menu>\n\n  <!-- Table Create Bubble Menu -->\n  <document-engine-toolbar-bubble-menu\n    *ngIf=\"capabilities.hasTable\"\n    #tableCreateBubbleMenu\n    [editor]=\"editor\"\n    [config]=\"tableCreateBubbleConfig\"\n  ></document-engine-toolbar-bubble-menu>\n</div>\n", styles: [":host{position:sticky;top:0;z-index:20}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "document-engine-icon", inputs: ["name"] }, { kind: "directive", type: ButtonDirective, selector: "button[documentEngineButton]", inputs: ["variant", "size"] }, { kind: "component", type: SelectComponent, selector: "document-engine-select", inputs: ["value", "disabled", "labelMode", "variant"], outputs: ["valueChange"] }, { kind: "directive", type: SelectLabelDirective, selector: "[documentEngineSelectLabel]" }, { kind: "directive", type: SelectOptionDirective, selector: "[documentEngineSelectOption]", inputs: ["value", "label", "disabled"] }, { kind: "component", type: ToolbarBubbleMenuComponent, selector: "document-engine-toolbar-bubble-menu", inputs: ["editor", "config"] }, { kind: "component", type: EditorBubbleMenuComponent, selector: "document-engine-editor-bubble-menu", inputs: ["editor", "config"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-
-class TiptapDraggableDirective {
-    draggable = true;
-    handle = '';
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: TiptapDraggableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.10", type: TiptapDraggableDirective, isStandalone: true, selector: "[tiptapDraggable]", host: { properties: { "attr.draggable": "this.draggable", "attr.data-drag-handle": "this.handle" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: TiptapDraggableDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[tiptapDraggable]',
-                }]
-        }], propDecorators: { draggable: [{
-                type: HostBinding,
-                args: ['attr.draggable']
-            }], handle: [{
-                type: HostBinding,
-                args: ['attr.data-drag-handle']
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ToolbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'document-engine-toolbar', standalone: true, imports: [
+                        CommonModule,
+                        IconComponent,
+                        ButtonDirective,
+                        SelectComponent,
+                        SelectLabelDirective,
+                        SelectOptionDirective,
+                        ToolbarBubbleMenuComponent,
+                        EditorBubbleMenuComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"document-engine-document-editor__toolbar\">\n  <div class=\"document-engine-document-editor__toolbar-content\">\n    <div class=\"document-engine-document-editor__toolbar-left\">\n      <!-- History: Undo/Redo -->\n      <div *ngIf=\"capabilities.hasHistory\" class=\"document-engine-document-editor__toolbar-group\" data-group=\"history\">\n        <button\n          documentEngineButton\n          size=\"icon\"\n          [disabled]=\"toolbarState.isReadOnly || !toolbarState.canUndo\"\n          (click)=\"runAndEmit('undo', editor.chain().focus().undo().run)\"\n          title=\"Undo (Ctrl+Z)\"\n        >\n          <document-engine-icon name=\"undo\"></document-engine-icon>\n        </button>\n\n        <button\n          documentEngineButton\n          size=\"icon\"\n          [disabled]=\"toolbarState.isReadOnly || !toolbarState.canRedo\"\n          (click)=\"runAndEmit('redo', editor.chain().focus().redo().run)\"\n          title=\"Redo\"\n        >\n          <document-engine-icon name=\"redo\"></document-engine-icon>\n        </button>\n      </div>\n\n      <!-- Text Formatting: Font Size, Line Height, Text Case, Heading -->\n      <div\n        *ngIf=\"capabilities.hasTextProperty\"\n        class=\"document-engine-document-editor__toolbar-group\"\n        data-group=\"text-property\"\n      >\n        <!-- Font Size -->\n        <document-engine-select\n          *ngIf=\"capabilities.hasFontSize\"\n          [value]=\"activeFontSize\"\n          placeholder=\"Font Size\"\n          labelMode=\"static\"\n          [disabled]=\"toolbarState.isReadOnly\"\n          title=\"Font Size\"\n        >\n          <document-engine-icon documentEngineSelectLabel name=\"format_size\"></document-engine-icon>\n\n          <button documentEngineSelectOption [value]=\"null\">Default</button>\n\n          <button\n            *ngFor=\"let option of fontSizeOptions; trackBy: trackByValue\"\n            documentEngineSelectOption\n            [value]=\"option.value\"\n            (click)=\"setFontSize(option.value)\"\n          >\n            {{ option.label }}\n          </button>\n        </document-engine-select>\n\n        <!-- Line Height -->\n        <document-engine-select\n          *ngIf=\"capabilities.hasLineHeight\"\n          [value]=\"activeLineHeight\"\n          placeholder=\"Line Height\"\n          labelMode=\"static\"\n          [disabled]=\"toolbarState.isReadOnly\"\n          title=\"Line Height\"\n        >\n          <document-engine-icon documentEngineSelectLabel name=\"format_line_spacing\"></document-engine-icon>\n\n          <button\n            *ngFor=\"let option of lineHeightOptions; trackBy: trackByValue\"\n            documentEngineSelectOption\n            [value]=\"option.value\"\n            (click)=\"setLineHeight(option.value)\"\n          >\n            {{ option.label }}\n          </button>\n        </document-engine-select>\n\n        <!-- Text Case -->\n        <document-engine-select\n          *ngIf=\"capabilities.hasTextCase\"\n          placeholder=\"Text Case\"\n          labelMode=\"static\"\n          [disabled]=\"toolbarState.isReadOnly\"\n          title=\"Text Case\"\n        >\n          <document-engine-icon documentEngineSelectLabel name=\"match_case\"></document-engine-icon>\n\n          <button\n            *ngFor=\"let option of textCaseOptions; trackBy: trackByValue\"\n            documentEngineSelectOption\n            [value]=\"option.value\"\n            (click)=\"runAndEmit('setTextCase', editor.chain().focus().textCase(option.value).run)\"\n          >\n            {{ option.label }}\n          </button>\n        </document-engine-select>\n\n        <!-- Heading -->\n        <document-engine-select\n          *ngIf=\"capabilities.hasHeading\"\n          [value]=\"activeHeading?.toString() || null\"\n          placeholder=\"Normal text\"\n          [disabled]=\"toolbarState.isReadOnly\"\n          title=\"Heading\"\n        >\n          <button\n            *ngFor=\"let option of headingOptions; trackBy: trackByValue\"\n            documentEngineSelectOption\n            [value]=\"option.value?.toString() || null\"\n            [class]=\"option.class\"\n            (click)=\"setHeading(option.value?.toString() || null)\"\n          >\n            {{ option.label }}\n          </button>\n        </document-engine-select>\n      </div>\n\n      <!-- Format Utilities: Reset Formatting & Colors -->\n      <div\n        *ngIf=\"capabilities.hasFormatUtilities\"\n        class=\"document-engine-document-editor__toolbar-group\"\n        data-group=\"format-utilities\"\n      >\n        <!-- Reset Formatting -->\n        <button\n          *ngIf=\"capabilities.hasResetFormat\"\n          documentEngineButton\n          size=\"icon\"\n          (click)=\"runAndEmit('resetFormat', editor.chain().focus().resetFormat().run)\"\n          [disabled]=\"toolbarState.isReadOnly || !toolbarState.canResetFormat\"\n          title=\"Clear Formatting\"\n        >\n          <document-engine-icon name=\"format_clear\"></document-engine-icon>\n        </button>\n\n        <!-- Colors: Text/Background -->\n        <button\n          *ngIf=\"capabilities.hasColors\"\n          documentEngineButton\n          size=\"icon\"\n          title=\"Text Color\"\n          [disabled]=\"toolbarState.isReadOnly\"\n          (click)=\"openColorBubble($event, 'text')\"\n        >\n          <document-engine-icon name=\"format_color_text\"></document-engine-icon>\n        </button>\n\n        <button\n          *ngIf=\"capabilities.hasColors\"\n          documentEngineButton\n          size=\"icon\"\n          title=\"Background Color\"\n          [disabled]=\"toolbarState.isReadOnly\"\n          (click)=\"openColorBubble($event, 'fill')\"\n        >\n          <document-engine-icon name=\"format_color_fill\"></document-engine-icon>\n        </button>\n      </div>\n\n      <!-- Text Styles: Bold/Italic/Underline/Strike -->\n      <div\n        *ngIf=\"capabilities.basicInline\"\n        class=\"document-engine-document-editor__toolbar-group\"\n        data-group=\"basic-inline\"\n      >\n        <button\n          *ngIf=\"capabilities.hasBold\"\n          documentEngineButton\n          size=\"icon\"\n          [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleBold\"\n          (click)=\"runAndEmit('toggleBold', editor.chain().focus().toggleBold().run)\"\n          [class.active]=\"editor.isActive('bold')\"\n          title=\"Bold\"\n        >\n          <document-engine-icon name=\"format_bold\"></document-engine-icon>\n        </button>\n\n        <button\n          *ngIf=\"capabilities.hasItalic\"\n          documentEngineButton\n          size=\"icon\"\n          [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleItalic\"\n          (click)=\"runAndEmit('toggleItalic', editor.chain().focus().toggleItalic().run)\"\n          [class.active]=\"editor.isActive('italic')\"\n          title=\"Italic\"\n        >\n          <document-engine-icon name=\"format_italic\"></document-engine-icon>\n        </button>\n\n        <button\n          *ngIf=\"capabilities.hasUnderline\"\n          documentEngineButton\n          size=\"icon\"\n          [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleUnderline\"\n          (click)=\"runAndEmit('toggleUnderline', editor.chain().focus().toggleUnderline().run)\"\n          [class.active]=\"editor.isActive('underline')\"\n          title=\"Underline\"\n        >\n          <document-engine-icon name=\"format_underline\"></document-engine-icon>\n        </button>\n\n        <button\n          *ngIf=\"capabilities.hasStrike\"\n          documentEngineButton\n          size=\"icon\"\n          [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleStrike\"\n          (click)=\"runAndEmit('toggleStrike', editor.chain().focus().toggleStrike().run)\"\n          [class.active]=\"editor.isActive('strike')\"\n          title=\"Strikethrough\"\n        >\n          <document-engine-icon name=\"format_strikethrough\"></document-engine-icon>\n        </button>\n      </div>\n\n      <!-- Text Styles: Sub/Super/Code/Link -->\n      <div\n        *ngIf=\"capabilities.advancedInline\"\n        class=\"document-engine-document-editor__toolbar-group\"\n        data-group=\"advanced-inline\"\n      >\n        <button\n          *ngIf=\"capabilities.hasSubscript\"\n          documentEngineButton\n          size=\"icon\"\n          [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleSubscript\"\n          (click)=\"runAndEmit('toggleSubscript', editor.chain().focus().toggleSubscript().run)\"\n          [class.active]=\"editor.isActive('subscript')\"\n          title=\"Subscript\"\n        >\n          <document-engine-icon name=\"subscript\"></document-engine-icon>\n        </button>\n\n        <button\n          *ngIf=\"capabilities.hasSuperscript\"\n          documentEngineButton\n          size=\"icon\"\n          [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleSuperscript\"\n          (click)=\"runAndEmit('toggleSuperscript', editor.chain().focus().toggleSuperscript().run)\"\n          [class.active]=\"editor.isActive('superscript')\"\n          title=\"Superscript\"\n        >\n          <document-engine-icon name=\"superscript\"></document-engine-icon>\n        </button>\n\n        <button\n          *ngIf=\"capabilities.hasCode\"\n          documentEngineButton\n          size=\"icon\"\n          [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleCode\"\n          (click)=\"runAndEmit('toggleCode', editor.chain().focus().toggleCode().run)\"\n          [class.active]=\"editor.isActive('code')\"\n          title=\"Code\"\n        >\n          <document-engine-icon name=\"code\"></document-engine-icon>\n        </button>\n\n        <button\n          *ngIf=\"capabilities.hasLink\"\n          documentEngineButton\n          size=\"icon\"\n          [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleLink\"\n          (click)=\"toggleLink()\"\n          [class.active]=\"editor.isActive('link')\"\n          [title]=\"editor.isActive('link') ? 'Unlink' : 'Link'\"\n        >\n          <document-engine-icon [name]=\"editor.isActive('link') ? 'link_off' : 'link'\"></document-engine-icon>\n        </button>\n      </div>\n\n      <!-- Alignment & Layout: Text Align, Indent -->\n      <div\n        *ngIf=\"capabilities.hasAlignmentLayout\"\n        class=\"document-engine-document-editor__toolbar-group\"\n        data-group=\"alignment-layout\"\n      >\n        <!-- Text Alignment -->\n        <document-engine-select\n          *ngIf=\"capabilities.hasTextAlign\"\n          [value]=\"activeTextAlign\"\n          (valueChange)=\"setTextAlign($event)\"\n          placeholder=\"Text Align\"\n          labelMode=\"static\"\n          [disabled]=\"toolbarState.isReadOnly\"\n          title=\"Text Align\"\n        >\n          <document-engine-icon documentEngineSelectLabel [name]=\"activeTextAlignIcon\"></document-engine-icon>\n\n          <button\n            *ngFor=\"let option of textAlignOptions; trackBy: trackByValue\"\n            documentEngineSelectOption\n            [value]=\"option.value\"\n          >\n            <document-engine-icon [name]=\"option.icon\"></document-engine-icon>\n            <span>{{ option.label }}</span>\n          </button>\n        </document-engine-select>\n\n        <!-- Indent -->\n        <button\n          *ngIf=\"capabilities.hasIndent\"\n          documentEngineButton\n          size=\"icon\"\n          [disabled]=\"toolbarState.isReadOnly || !toolbarState.canDecreaseIndent\"\n          (click)=\"runAndEmit('decreaseIndent', editor.chain().focus().decreaseIndent().run)\"\n          title=\"Decrease Indent\"\n        >\n          <document-engine-icon name=\"format_indent_decrease\"></document-engine-icon>\n        </button>\n\n        <button\n          *ngIf=\"capabilities.hasIndent\"\n          documentEngineButton\n          size=\"icon\"\n          [disabled]=\"toolbarState.isReadOnly || !toolbarState.canIncreaseIndent\"\n          (click)=\"runAndEmit('increaseIndent', editor.chain().focus().increaseIndent().run)\"\n          title=\"Increase Indent\"\n        >\n          <document-engine-icon name=\"format_indent_increase\"></document-engine-icon>\n        </button>\n      </div>\n\n      <!-- Lists -->\n      <div\n        *ngIf=\"capabilities.hasAlignmentLayout\"\n        class=\"document-engine-document-editor__toolbar-group\"\n        data-group=\"alignment-layout\"\n      >\n        <!-- Lists: Bullet, Numbered (with style) -->\n        <button\n          *ngIf=\"capabilities.hasLists\"\n          documentEngineButton\n          size=\"icon\"\n          [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleBulletList\"\n          (click)=\"runAndEmit('toggleBulletList', editor.chain().focus().toggleBulletList().run)\"\n          [class.active]=\"editor.isActive('bulletList')\"\n          title=\"Bullet List\"\n        >\n          <document-engine-icon name=\"format_list_bulleted\"></document-engine-icon>\n        </button>\n\n        <!-- Numbered List with Style -->\n        <document-engine-select\n          *ngIf=\"capabilities.hasLists\"\n          placeholder=\"Numbered List\"\n          labelMode=\"static\"\n          [value]=\"\n            editor.isActive('customOrderedList')\n              ? editor.getAttributes('customOrderedList')['data-list-style-type'] || 'decimal'\n              : null\n          \"\n          [disabled]=\"toolbarState.isReadOnly\"\n          title=\"Numbered List\"\n        >\n          <document-engine-icon documentEngineSelectLabel name=\"format_list_numbered\"></document-engine-icon>\n\n          <button\n            *ngFor=\"let option of listStyleOptions; trackBy: trackByValue\"\n            documentEngineSelectOption\n            [value]=\"option.value\"\n            (click)=\"setListStyle(option.value)\"\n            [class.active]=\"\n              editor.isActive('customOrderedList') &&\n              editor.getAttributes('customOrderedList')['data-list-style-type'] === option.value\n            \"\n          >\n            <span>{{ option.example }}</span>\n            <span>{{ option.label }}</span>\n          </button>\n        </document-engine-select>\n      </div>\n\n      <!-- Block Types: Code Block, Blockquote -->\n      <div\n        *ngIf=\"capabilities.hasBlockTypes\"\n        class=\"document-engine-document-editor__toolbar-group\"\n        data-group=\"block-types\"\n      >\n        <!-- Blockquote -->\n        <button\n          *ngIf=\"capabilities.hasBlockquote\"\n          documentEngineButton\n          size=\"icon\"\n          [disabled]=\"toolbarState.isReadOnly || !toolbarState.canToggleBlockquote\"\n          (click)=\"runAndEmit('toggleBlockquote', editor.chain().focus().toggleBlockquote().run)\"\n          [class.active]=\"editor.isActive('blockquote')\"\n          title=\"Quote\"\n        >\n          <document-engine-icon name=\"format_quote\"></document-engine-icon>\n        </button>\n      </div>\n\n      <!-- Insert Object: Table, Images, Special Chars, Page Break -->\n      <div\n        *ngIf=\"capabilities.hasInsertObject\"\n        class=\"document-engine-document-editor__toolbar-group\"\n        data-group=\"insert-object\"\n      >\n        <button\n          *ngIf=\"capabilities.hasTable\"\n          documentEngineButton\n          size=\"icon\"\n          [disabled]=\"toolbarState.isReadOnly\"\n          (click)=\"openCreateTableBubble($event)\"\n          [class.active]=\"editor.isActive('table')\"\n          title=\"Table\"\n        >\n          <document-engine-icon name=\"table_rows\"></document-engine-icon>\n        </button>\n\n        <button\n          *ngIf=\"capabilities.hasImages\"\n          documentEngineButton\n          size=\"icon\"\n          title=\"Insert Image\"\n          [disabled]=\"toolbarState.isReadOnly\"\n          (click)=\"insertImage($event)\"\n        >\n          <document-engine-icon name=\"photo\"></document-engine-icon>\n        </button>\n\n        <button\n          *ngIf=\"capabilities.hasSpecialChars\"\n          documentEngineButton\n          size=\"icon\"\n          title=\"Special Character\"\n          [disabled]=\"toolbarState.isReadOnly\"\n          (click)=\"openSpecialCharsBubble($event)\"\n        >\n          <document-engine-icon name=\"special_character\"></document-engine-icon>\n        </button>\n\n        <button\n          *ngIf=\"capabilities.hasPageBreak\"\n          documentEngineButton\n          size=\"icon\"\n          [disabled]=\"toolbarState.isReadOnly || !toolbarState.canInsertPageBreak\"\n          (click)=\"runAndEmit('insertPageBreak', editor.chain().focus().insertPageBreak().run)\"\n          title=\"Insert page break\"\n        >\n          <document-engine-icon name=\"insert_page_break\"></document-engine-icon>\n        </button>\n      </div>\n\n      <!-- Business Features: Templates, Dynamic Fields, Editable Region -->\n      <div\n        *ngIf=\"capabilities.hasBusinessFeatures\"\n        class=\"document-engine-document-editor__toolbar-group\"\n        data-group=\"business-features\"\n      >\n        <button\n          *ngIf=\"capabilities.hasDynamicFields\"\n          documentEngineButton\n          size=\"icon\"\n          title=\"Dynamic Field\"\n          [disabled]=\"toolbarState.isReadOnly\"\n          (click)=\"openDynamicFieldsBubble($event)\"\n        >\n          <document-engine-icon name=\"dynamic_form\"></document-engine-icon>\n        </button>\n\n        <button\n          *ngIf=\"capabilities.hasTemplates\"\n          documentEngineButton\n          size=\"icon\"\n          title=\"Template\"\n          [disabled]=\"toolbarState.isReadOnly\"\n          (click)=\"openTemplateBubble($event)\"\n        >\n          <document-engine-icon name=\"description\"></document-engine-icon>\n        </button>\n\n        <button\n          *ngIf=\"capabilities.hasEditableRegion\"\n          documentEngineButton\n          size=\"icon\"\n          [disabled]=\"!toolbarState.canToggleEditableRegion || toolbarState.isReadOnly\"\n          (click)=\"runAndEmit('toggleEditableRegion', editor.chain().focus().toggleEditableRegion().run)\"\n          [class.active]=\"editor.isActive('editableRegion')\"\n          title=\"Toggle editable region\"\n        >\n          <document-engine-icon name=\"restrict_edit\"></document-engine-icon>\n        </button>\n      </div>\n\n      <!-- Actions: Clear Content, Markdown -->\n      <div *ngIf=\"capabilities.hasActions\" class=\"document-engine-document-editor__toolbar-group\" data-group=\"actions\">\n        <button\n          *ngIf=\"capabilities.hasClearContent\"\n          documentEngineButton\n          size=\"icon\"\n          [disabled]=\"toolbarState.isReadOnly || !toolbarState.canClearContent\"\n          (click)=\"runAndEmit('clear', editor.chain().focus().clear().run)\"\n          title=\"Clear all content\"\n        >\n          <document-engine-icon name=\"clear_all\"></document-engine-icon>\n        </button>\n\n        <!-- <button\n          *ngIf=\"capabilities.hasMarkdown\"\n          documentEngineButton\n          size=\"icon\"\n          (click)=\"downloadAsMarkdown()\"\n          title=\"Download as Markdown\"\n        >\n          <document-engine-icon name=\"markdown\"></document-engine-icon>\n        </button> -->\n      </div>\n\n      <!-- Custom Toolbar Buttons -->\n      <div\n        *ngIf=\"customToolbarButtons.length > 0\"\n        class=\"document-engine-document-editor__toolbar-group\"\n        data-group=\"custom-buttons\"\n      >\n        <ng-container *ngFor=\"let button of customToolbarButtons; trackBy: trackByIndex\">\n          <!-- Icon Button -->\n          <button\n            *ngIf=\"button.type === 'icon-button'\"\n            documentEngineButton\n            size=\"icon\"\n            [disabled]=\"toolbarState.isReadOnly\"\n            (click)=\"handleCustomIconButton(button)\"\n            [title]=\"button.label || ''\"\n          >\n            <document-engine-icon [name]=\"button.icon\"></document-engine-icon>\n          </button>\n\n          <!-- Select Button -->\n          <document-engine-select\n            *ngIf=\"button.type === 'select-button'\"\n            [value]=\"null\"\n            labelMode=\"static\"\n            [disabled]=\"toolbarState.isReadOnly\"\n            [title]=\"button.label\"\n          >\n            <span documentEngineSelectLabel>{{ button.label }}</span>\n\n            <button\n              *ngFor=\"let option of button.options; trackBy: trackByValue\"\n              documentEngineSelectOption\n              [value]=\"option.value\"\n              (click)=\"handleCustomSelectButton(button, option.value)\"\n            >\n              {{ option.label }}\n            </button>\n          </document-engine-select>\n        </ng-container>\n      </div>\n    </div>\n\n    <!-- Right side actions -->\n    <div class=\"document-engine-document-editor__toolbar-right\">\n      <button\n        *ngIf=\"capabilities.hasPrintButton\"\n        documentEngineButton\n        size=\"icon\"\n        (click)=\"printValue()\"\n        title=\"Print Value\"\n      >\n        <document-engine-icon name=\"print\"></document-engine-icon>\n      </button>\n    </div>\n  </div>\n\n  <!-- Color Bubble Menu -->\n  <document-engine-toolbar-bubble-menu\n    #colorBubbleMenu\n    [editor]=\"editor\"\n    [config]=\"colorBubbleConfig\"\n  ></document-engine-toolbar-bubble-menu>\n\n  <!-- Link Bubble Menu -->\n  <document-engine-editor-bubble-menu\n    *ngIf=\"capabilities.hasLink\"\n    #linkBubbleWrapper\n    [editor]=\"editor\"\n    [config]=\"linkBubbleConfig\"\n  ></document-engine-editor-bubble-menu>\n\n  <!-- Table Bubble Menu -->\n  <document-engine-editor-bubble-menu\n    *ngIf=\"capabilities.hasTable\"\n    #tableBubbleWrapper\n    [editor]=\"editor\"\n    [config]=\"tableBubbleConfig\"\n  ></document-engine-editor-bubble-menu>\n\n  <!-- Image Bubble Menu -->\n  <document-engine-toolbar-bubble-menu\n    *ngIf=\"capabilities.hasImages\"\n    #imageBubbleMenu\n    [editor]=\"editor\"\n    [config]=\"imageBubbleConfig\"\n  ></document-engine-toolbar-bubble-menu>\n\n  <!-- Special Characters Bubble Menu -->\n  <document-engine-toolbar-bubble-menu\n    *ngIf=\"capabilities.hasSpecialChars\"\n    #specialCharsBubbleMenu\n    [editor]=\"editor\"\n    [config]=\"specialCharsBubbleConfig\"\n  ></document-engine-toolbar-bubble-menu>\n\n  <!-- Dynamic Fields Bubble Menu -->\n  <document-engine-toolbar-bubble-menu\n    *ngIf=\"capabilities.hasDynamicFields\"\n    #dynamicFieldsBubbleMenu\n    [editor]=\"editor\"\n    [config]=\"dynamicFieldsBubbleConfig\"\n  ></document-engine-toolbar-bubble-menu>\n\n  <!-- Template Bubble Menu -->\n  <document-engine-toolbar-bubble-menu\n    *ngIf=\"capabilities.hasTemplates\"\n    #templateBubbleMenu\n    [editor]=\"editor\"\n    [config]=\"templateBubbleConfig\"\n  ></document-engine-toolbar-bubble-menu>\n\n  <!-- Table Create Bubble Menu -->\n  <document-engine-toolbar-bubble-menu\n    *ngIf=\"capabilities.hasTable\"\n    #tableCreateBubbleMenu\n    [editor]=\"editor\"\n    [config]=\"tableCreateBubbleConfig\"\n  ></document-engine-toolbar-bubble-menu>\n</div>\n", styles: [":host{position:sticky;top:0;z-index:20}\n"] }]
+        }], propDecorators: { editor: [{
+                type: Input
+            }], capabilities: [{
+                type: Input
+            }], config: [{
+                type: Input
+            }], action: [{
+                type: Output
+            }], colorBubbleMenu: [{
+                type: ViewChild,
+                args: ['colorBubbleMenu']
+            }], linkBubbleWrapper: [{
+                type: ViewChild,
+                args: ['linkBubbleWrapper']
+            }], imageBubbleMenu: [{
+                type: ViewChild,
+                args: ['imageBubbleMenu']
+            }], specialCharsBubbleMenu: [{
+                type: ViewChild,
+                args: ['specialCharsBubbleMenu']
+            }], dynamicFieldsBubbleMenu: [{
+                type: ViewChild,
+                args: ['dynamicFieldsBubbleMenu']
+            }], templateBubbleMenu: [{
+                type: ViewChild,
+                args: ['templateBubbleMenu']
+            }], tableCreateBubbleMenu: [{
+                type: ViewChild,
+                args: ['tableCreateBubbleMenu']
             }] } });
 
 /**
- * Injection token for HTML preprocessor function.
- * Use this token to provide a custom function that processes HTML content
- * before it's set into the TipTap editor.
- *
- * This is optional - if not provided, the editor will use the HTML content as-is.
- *
- * @example
- * ```typescript
- * // In your component or module providers
- * {
- *   provide: EDITOR_HTML_PREPROCESSOR,
- *   useValue: (html: string) => {
- *     // Your custom preprocessing logic
- *     return html.replace(/old/g, 'new');
- *   }
- * }
- * ```
+ * Character Count component for document editor footer
+ * Displays character/word count with optional limit and color coding
  */
-const EDITOR_HTML_PREPROCESSOR = new InjectionToken('EDITOR_HTML_PREPROCESSOR');
-
-class TiptapEditorDirective {
-    elRef = inject(ElementRef);
-    renderer = inject(Renderer2);
-    changeDetectorRef = inject(ChangeDetectorRef);
-    htmlPreprocessor = inject(EDITOR_HTML_PREPROCESSOR, { optional: true });
-    _editor;
-    initialEditableState;
-    set editor(editor) {
-        this._editor = editor;
-        // Store initial editable state immediately when editor is set
-        // This ensures we capture the state before any Forms API calls
-        if (this.initialEditableState === undefined && editor) {
-            this.initialEditableState = editor.isEditable;
-        }
-    }
-    get editor() {
-        if (!this._editor) {
-            throw new Error('Editor must be set before use.');
+class CharacterCountComponent {
+    cdr = inject(ChangeDetectorRef);
+    editor;
+    config;
+    mode = 'characters';
+    count = 0;
+    limit = null;
+    updateCount = () => {
+        if (!this.editor) {
+            return;
         }
-        return this._editor;
-    }
-    outputFormat = 'html';
-    onChange = () => {
-        /** */
-    };
-    onTouched = () => {
-        /** */
-    };
-    // Writes a new value to the element.
-    // This methods is called when programmatic changes from model to view are requested.
-    writeValue(value) {
-        // Apply preprocessor if value is a string (HTML) and preprocessor is available
-        let processedValue = value;
-        if (typeof value === 'string' && this.htmlPreprocessor) {
-            processedValue = this.htmlPreprocessor(value);
+        // Get count from editor storage if available
+        const characterCountStorage = this.editor.storage.characterCount;
+        if (characterCountStorage) {
+            if (this.mode === 'characters') {
+                this.count = characterCountStorage.characters?.() || 0;
+            }
+            else {
+                this.count = characterCountStorage.words?.() || 0;
+            }
         }
-        this.editor.chain().setContent(processedValue, { emitUpdate: false }).run();
-    }
-    // Registers a callback function that is called when the control's value changes in the UI.
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    // Registers a callback function that is called by the forms API on initialization to update the form model on blur.
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    // Called by the forms api to enable or disable the element
-    setDisabledState(isDisabled) {
-        // Ensure we have captured the initial state (fallback in case setter wasn't called)
-        if (this.initialEditableState === undefined && this.editor) {
-            this.initialEditableState = this.editor.isEditable;
+        else {
+            // Fallback: calculate from text
+            const text = this.editor.getText();
+            if (this.mode === 'characters') {
+                this.count = text.length;
+            }
+            else {
+                this.count = text.trim() ? text.trim().split(/\s+/).length : 0;
+            }
         }
-        // Only apply disabled state if editor was initially editable
-        // If editor was configured as readonly (editable: false), preserve that state
-        if (this.initialEditableState === true) {
-            this.editor.setEditable(!isDisabled);
+        // Get limit from config
+        const characterCountConfig = this.config?.characterCount;
+        if (characterCountConfig && typeof characterCountConfig === 'object') {
+            this.limit = characterCountConfig.limit || null;
         }
-        // If initialEditableState === false, do nothing - preserve readonly state
-        this.renderer.setProperty(this.elRef.nativeElement, 'disabled', isDisabled);
-    }
-    handleChange = ({ editor, transaction }) => {
-        if (!transaction.docChanged)
-            return;
-        // Needed for ChangeDetectionStrategy.OnPush to get notified about changes
-        this.changeDetectorRef.markForCheck();
-        if (this.outputFormat === 'html') {
-            this.onChange(editor.getHTML());
-            return;
+        else {
+            this.limit = null;
         }
-        this.onChange(editor.getJSON());
+        this.cdr.markForCheck();
     };
     ngOnInit() {
-        const editor = this.editor;
-        // take the inner contents and clear the block
-        const { innerHTML } = this.elRef.nativeElement;
-        this.elRef.nativeElement.innerHTML = '';
-        // insert the editor in the dom
-        this.elRef.nativeElement.append(...Array.from(editor.options.element?.childNodes || []));
-        // update the options for the editor
-        editor.setOptions({ element: this.elRef.nativeElement });
-        // update content to the editor
-        if (innerHTML) {
-            // Apply preprocessor to initial content if available
-            const processedContent = this.htmlPreprocessor ? this.htmlPreprocessor(innerHTML) : innerHTML;
-            editor.chain().setContent(processedContent, { emitUpdate: false }).run();
+        if (!this.editor) {
+            return;
         }
-        // register blur handler to update `touched` property
-        editor.on('blur', () => {
-            this.onTouched();
-        });
-        // register update handler to listen to changes on update
-        editor.on('update', this.handleChange);
-        // Needed for ChangeDetectionStrategy.OnPush to get notified
-        editor.on('selectionUpdate', () => this.changeDetectorRef.markForCheck());
+        // Subscribe to update events to keep count in sync
+        this.editor.on('update', this.updateCount);
+        this.editor.on('transaction', this.updateCount);
+        // Initialize count once
+        this.updateCount();
     }
-    ngAfterViewInit() {
-        this.changeDetectorRef.detectChanges();
+    ngOnDestroy() {
+        if (this.editor) {
+            this.editor.off('update', this.updateCount);
+            this.editor.off('transaction', this.updateCount);
+        }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: TiptapEditorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.10", type: TiptapEditorDirective, isStandalone: true, selector: "tiptap[editor], [tiptap][editor], tiptap-editor[editor], [tiptapEditor][editor]", inputs: { editor: "editor", outputFormat: "outputFormat" }, host: { classAttribute: "tiptap-editor no-twp" }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => TiptapEditorDirective),
-                multi: true,
-            },
-        ], ngImport: i0 });
+    isNearLimit() {
+        if (!this.limit) {
+            return false;
+        }
+        // Consider near limit when >= 90% of limit
+        return this.count >= this.limit * 0.9 && this.count < this.limit;
+    }
+    isOverLimit() {
+        if (!this.limit) {
+            return false;
+        }
+        return this.count > this.limit;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: CharacterCountComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: CharacterCountComponent, isStandalone: true, selector: "document-engine-character-count", inputs: { editor: "editor", config: "config", mode: "mode" }, ngImport: i0, template: "<div class=\"document-engine-character-count\">\n  <span\n    class=\"document-engine-character-count__text\"\n    [class.document-engine-character-count__text--muted]=\"!isNearLimit() && !isOverLimit()\"\n    [class.document-engine-character-count__text--warning]=\"isNearLimit() && !isOverLimit()\"\n    [class.document-engine-character-count__text--error]=\"isOverLimit()\"\n  >\n    <ng-container *ngIf=\"mode === 'characters'\">\n      <ng-container *ngIf=\"limit; else noLimit\"> {{ count }} / {{ limit }} characters. </ng-container>\n      <ng-template #noLimit> {{ count }} {{ count === 1 ? 'character' : 'characters' }}. </ng-template>\n    </ng-container>\n    <ng-container *ngIf=\"mode === 'words'\"> {{ count }} {{ count === 1 ? 'word' : 'words' }}. </ng-container>\n  </span>\n</div>\n", styles: [".document-engine-character-count{display:flex;justify-content:flex-end}.document-engine-character-count__text{font-size:.875rem;transition:color .2s ease-in-out}.document-engine-character-count__text--muted{color:var(--muted-foreground, #6b7280)}.document-engine-character-count__text--warning{color:var(--warning, #d97706)}.document-engine-character-count__text--error{color:var(--destructive, #dc2626)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: TiptapEditorDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'tiptap[editor], [tiptap][editor], tiptap-editor[editor], [tiptapEditor][editor]',
-                    providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => TiptapEditorDirective),
-                            multi: true,
-                        },
-                    ],
-                    standalone: true,
-                    host: {
-                        ['class']: 'tiptap-editor no-twp',
-                    },
-                }]
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: CharacterCountComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'document-engine-character-count', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"document-engine-character-count\">\n  <span\n    class=\"document-engine-character-count__text\"\n    [class.document-engine-character-count__text--muted]=\"!isNearLimit() && !isOverLimit()\"\n    [class.document-engine-character-count__text--warning]=\"isNearLimit() && !isOverLimit()\"\n    [class.document-engine-character-count__text--error]=\"isOverLimit()\"\n  >\n    <ng-container *ngIf=\"mode === 'characters'\">\n      <ng-container *ngIf=\"limit; else noLimit\"> {{ count }} / {{ limit }} characters. </ng-container>\n      <ng-template #noLimit> {{ count }} {{ count === 1 ? 'character' : 'characters' }}. </ng-template>\n    </ng-container>\n    <ng-container *ngIf=\"mode === 'words'\"> {{ count }} {{ count === 1 ? 'word' : 'words' }}. </ng-container>\n  </span>\n</div>\n", styles: [".document-engine-character-count{display:flex;justify-content:flex-end}.document-engine-character-count__text{font-size:.875rem;transition:color .2s ease-in-out}.document-engine-character-count__text--muted{color:var(--muted-foreground, #6b7280)}.document-engine-character-count__text--warning{color:var(--warning, #d97706)}.document-engine-character-count__text--error{color:var(--destructive, #dc2626)}\n"] }]
         }], propDecorators: { editor: [{
                 type: Input
-            }], outputFormat: [{
+            }], config: [{
+                type: Input
+            }], mode: [{
                 type: Input
             }] } });
 
-class TiptapFloatingMenuDirective {
-    elRef;
-    constructor(elRef) {
-        this.elRef = elRef;
+/**
+ * Footer component for document editor
+ * Container for footer components like character count
+ */
+class FooterComponent {
+    editor;
+    config;
+    // @Input() editable = true;
+    hasCharacterCount() {
+        const config = this.config ?? {};
+        return config.characterCount !== false;
     }
-    pluginKey = 'TiptapFloatingMenu';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: FooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: FooterComponent, isStandalone: true, selector: "document-engine-footer", inputs: { editor: "editor", config: "config" }, ngImport: i0, template: "<div class=\"document-engine-document-editor__footer\">\n  <div class=\"document-engine-document-editor__footer-content\">\n    <div class=\"document-engine-document-editor__footer-left\">\n      <!-- Additional footer components can be added here -->\n    </div>\n\n    <div class=\"document-engine-document-editor__footer-right\">\n      <document-engine-character-count\n        *ngIf=\"hasCharacterCount()\"\n        [editor]=\"editor\"\n        [config]=\"config\"\n        mode=\"characters\"\n      ></document-engine-character-count>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CharacterCountComponent, selector: "document-engine-character-count", inputs: ["editor", "config", "mode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: FooterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'document-engine-footer', standalone: true, imports: [CommonModule, CharacterCountComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"document-engine-document-editor__footer\">\n  <div class=\"document-engine-document-editor__footer-content\">\n    <div class=\"document-engine-document-editor__footer-left\">\n      <!-- Additional footer components can be added here -->\n    </div>\n\n    <div class=\"document-engine-document-editor__footer-right\">\n      <document-engine-character-count\n        *ngIf=\"hasCharacterCount()\"\n        [editor]=\"editor\"\n        [config]=\"config\"\n        mode=\"characters\"\n      ></document-engine-character-count>\n    </div>\n  </div>\n</div>\n" }]
+        }], propDecorators: { editor: [{
+                type: Input
+            }], config: [{
+                type: Input
+            }] } });
+
+/**
+ * Document Editor Component
+ * High-level wrapper that encapsulates TiptapEditor and DocumentEngineKit
+ * Provides a simple API for consumers without exposing internal dependencies
+ *
+ * Usage:
+ * <document-engine-editor
+ *   #editor
+ *   [config]="editorConfig"
+ *
+ *   (editorReady)="editor = docEditor.editor"
+ * >
+ *   <tiptap-editor
+ *     [editor]="docEditor.editor"
+ *     [(ngModel)]="content"
+ *   ></tiptap-editor>
+ * </document-engine-editor>
+ */
+class DocumentEditorComponent {
+    ngZone = inject(NgZone);
+    contentWrapperClass = inject(EDITOR_CONTENT_WRAPPER_CLASS, { optional: true });
+    config;
+    editorReady = new EventEmitter();
+    // Expose editor property for external access (re-export)
     editor;
-    options = {};
-    shouldShow;
+    // Store merged config for toolbar and helper methods
+    get mergedConfig() {
+        return this._mergedConfig ?? this.getMergedConfig();
+    }
+    _mergedConfig;
+    // Capabilities instance for toolbar
+    capabilities;
+    updateCapabilities() {
+        this.capabilities = new EditorCapabilities(this.mergedConfig);
+    }
+    ngOnChanges(changes) {
+        if (!changes['config'])
+            return;
+        if (!this.editor)
+            return;
+        this._mergedConfig = this.getMergedConfig();
+        this.updateCapabilities();
+        this.editor.setEditable(this._mergedConfig.editable ?? true);
+    }
     ngOnInit() {
-        const editor = this.editor;
-        if (!editor) {
-            throw new Error('Required: Input `editor`');
-        }
-        const floatingMenuElement = this.elRef.nativeElement;
-        floatingMenuElement.style.visibility = 'hidden';
-        floatingMenuElement.style.position = 'absolute';
-        editor.registerPlugin(FloatingMenuPlugin({
-            pluginKey: this.pluginKey,
-            editor,
-            element: floatingMenuElement,
-            options: this.options,
-            shouldShow: this.shouldShow,
-        }));
+        this.initializeEditor();
     }
     ngOnDestroy() {
-        if (this.editor && this.pluginKey) {
-            this.editor.unregisterPlugin(this.pluginKey);
-        }
-        window.requestAnimationFrame(() => {
-            if (this.elRef.nativeElement.parentNode) {
-                this.elRef.nativeElement.parentNode.removeChild(this.elRef.nativeElement);
-            }
+        if (this.editor)
+            this.editor.destroy();
+    }
+    // Internal methods
+    initializeEditor() {
+        // Run editor initialization outside Angular zone for better performance
+        // Editor operations (especially typing) don't need to trigger Angular change detection
+        this.ngZone.runOutsideAngular(() => {
+            // Merge user config with default full-featured config
+            this._mergedConfig = this.getMergedConfig();
+            // Initialize editor with config
+            // Initial content will be set by TiptapEditorDirective via writeValue
+            this.editor = new Editor({
+                editable: this._mergedConfig.editable,
+                extensions: [DocumentEngineKit.configure(this._mergedConfig)],
+                editorProps: { attributes: { class: this.contentWrapperClass ?? '' } },
+            });
+            // Emit editorReady event back inside Angular zone
+            this.ngZone.run(() => {
+                // Create capabilities instance after editor is initialized
+                this.updateCapabilities();
+                this.editorReady.emit(this.editor);
+            });
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: TiptapFloatingMenuDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.10", type: TiptapFloatingMenuDirective, isStandalone: true, selector: "tiptap-floating-menu[editor], [tiptapFloatingMenu][editor]", inputs: { pluginKey: "pluginKey", editor: "editor", options: "options", shouldShow: "shouldShow" }, ngImport: i0 });
+    /**
+     * Get merged config with all extensions enabled by default
+     * User config will override defaults
+     */
+    getMergedConfig() {
+        // Merge user config with defaults, preferring user config when provided
+        return this.mergeConfig(DefaultEditorConfig, this.config);
+    }
+    /**
+     * Merge two config objects, preferring userConfig values when provided
+     */
+    mergeConfig(defaultConfig, userConfig) {
+        if (!userConfig)
+            return defaultConfig;
+        const merged = { ...defaultConfig };
+        const keys = Object.keys(userConfig);
+        for (const key of keys) {
+            const value = userConfig[key];
+            if (value !== undefined)
+                merged[key] = value;
+        }
+        return merged;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DocumentEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: DocumentEditorComponent, isStandalone: false, selector: "document-engine-editor", inputs: { config: "config" }, outputs: { editorReady: "editorReady" }, host: { classAttribute: "no-twp" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"document-engine-document-editor\">\n  <document-engine-toolbar\n    *ngIf=\"mergedConfig.showToolbar\"\n    [editor]=\"editor\"\n    [capabilities]=\"capabilities\"\n    [config]=\"mergedConfig\"\n  ></document-engine-toolbar>\n\n  <div class=\"document-engine-document-editor__content\">\n    <ng-content></ng-content>\n  </div>\n\n  <document-engine-footer\n    *ngIf=\"editor && mergedConfig.showFooter\"\n    [editor]=\"editor\"\n    [config]=\"mergedConfig\"\n  ></document-engine-footer>\n</div>\n", styles: [":is() *,:is() *:before,:is() *:after{box-sizing:border-box}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ToolbarComponent, selector: "document-engine-toolbar", inputs: ["editor", "capabilities", "config"], outputs: ["action"] }, { kind: "component", type: FooterComponent, selector: "document-engine-footer", inputs: ["editor", "config"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: TiptapFloatingMenuDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'tiptap-floating-menu[editor], [tiptapFloatingMenu][editor]',
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { pluginKey: [{
-                type: Input
-            }], editor: [{
-                type: Input
-            }], options: [{
-                type: Input
-            }], shouldShow: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DocumentEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'document-engine-editor', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'no-twp',
+                    }, template: "<div class=\"document-engine-document-editor\">\n  <document-engine-toolbar\n    *ngIf=\"mergedConfig.showToolbar\"\n    [editor]=\"editor\"\n    [capabilities]=\"capabilities\"\n    [config]=\"mergedConfig\"\n  ></document-engine-toolbar>\n\n  <div class=\"document-engine-document-editor__content\">\n    <ng-content></ng-content>\n  </div>\n\n  <document-engine-footer\n    *ngIf=\"editor && mergedConfig.showFooter\"\n    [editor]=\"editor\"\n    [config]=\"mergedConfig\"\n  ></document-engine-footer>\n</div>\n", styles: [":is() *,:is() *:before,:is() *:after{box-sizing:border-box}\n"] }]
+        }], propDecorators: { config: [{
                 type: Input
+            }], editorReady: [{
+                type: Output
             }] } });
 
+class DocumentEditorModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DocumentEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.10", ngImport: i0, type: DocumentEditorModule, declarations: [DocumentEditorComponent], imports: [CommonModule, ToolbarComponent, FooterComponent, TiptapEditorDirective], exports: [DocumentEditorComponent, TiptapEditorDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DocumentEditorModule, imports: [CommonModule, ToolbarComponent, FooterComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DocumentEditorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [DocumentEditorComponent],
+                    imports: [CommonModule, ToolbarComponent, FooterComponent, TiptapEditorDirective],
+                    exports: [DocumentEditorComponent, TiptapEditorDirective],
+                }]
+        }] });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ARCHIVE, ARROW_DROP_DOWN, AngularRenderer, ButtonDirective, CHECK, CLEAR_ALL, CLOSE, CODE, CharacterCountComponent, CheckboxComponent, ColorPickerComponent, ColorPickerViewComponent, DEFAULT, DEFAULT_TOOLBAR_STATE, DESCRIPTION, DYNAMIC_FORM, DocumentEditorComponent, DocumentEditorModule, DocumentEngineKit, DynamicFieldsViewComponent, EDIT, EDITOR_HTML_PREPROCESSOR, EditorBubbleMenuComponent, EditorCapabilities, ErrorMessageComponent, EventManager, FORMAT_ALIGN_CENTER, FORMAT_ALIGN_JUSTIFY, FORMAT_ALIGN_LEFT, FORMAT_ALIGN_RIGHT, FORMAT_BOLD, FORMAT_CLEAR, FORMAT_COLOR_FILL, FORMAT_COLOR_TEXT, FORMAT_INDENT_DECREASE, FORMAT_INDENT_INCREASE, FORMAT_ITALIC, FORMAT_LINE_SPACING, FORMAT_LIST_BULLETED, FORMAT_LIST_NUMBERED, FORMAT_QUOTE, FORMAT_SIZE, FORMAT_STRIKETHROUGH, FORMAT_UNDERLINE, FocusTrapService, FooterComponent, INSERT_PAGE_BREAK, IconComponent, IconRegistryService, ImageInsertViewComponent, InputDirective, LINK, LINK_OFF, LabelDirective, LinkEditViewComponent, LinkMainViewComponent, LinkPropertiesViewComponent, MARKDOWN, MATCH_CASE, PHOTO, PRINT, PopoverDirective, REDO, RESTRICT_EDIT, SEARCH, SEARCH_OFF, SETTINGS, SPECIAL_CHARACTER, SUBSCRIPT, SUPERSCRIPT, SelectComponent, SelectLabelDirective, SelectOptionDirective, SpecialCharactersViewComponent, TABLE_CELL_PROPERTY, TABLE_COLUMN, TABLE_MERGE_CELL, TABLE_PROPERTY, TABLE_ROW, TABLE_ROWS, TableCellStyleViewComponent, TableCreateViewComponent, TableMainViewComponent, TableStyleViewComponent, TemplateViewComponent, TiptapBubbleMenuDirective, TiptapDraggableDirective, TiptapEditorDirective, TiptapFloatingMenuDirective, ToggleGroupComponent, ToggleOptionDirective, ToolbarBubbleMenuComponent, ToolbarComponent, ToolbarService, UNDO, VERTICAL_ALIGN_BOTTOM, VERTICAL_ALIGN_CENTER, VERTICAL_ALIGN_TOP, buildToolbarState, selectionChangeHandler, shouldShowFnFactory, urlValidator };
+export { ARCHIVE, ARROW_DROP_DOWN, AngularRenderer, ButtonDirective, CHECK, CLEAR_ALL, CLOSE, CODE, CharacterCountComponent, CheckboxComponent, ColorPickerComponent, ColorPickerViewComponent, DEFAULT, DEFAULT_TOOLBAR_STATE, DESCRIPTION, DYNAMIC_FORM, DocumentEditorComponent, DocumentEditorModule, DocumentEngineKit, DynamicFieldsViewComponent, EDIT, EDITOR_CONTENT_WRAPPER_CLASS, EDITOR_HTML_PREPROCESSOR, EditorBubbleMenuComponent, EditorCapabilities, ErrorMessageComponent, EventManager, FORMAT_ALIGN_CENTER, FORMAT_ALIGN_JUSTIFY, FORMAT_ALIGN_LEFT, FORMAT_ALIGN_RIGHT, FORMAT_BOLD, FORMAT_CLEAR, FORMAT_COLOR_FILL, FORMAT_COLOR_TEXT, FORMAT_INDENT_DECREASE, FORMAT_INDENT_INCREASE, FORMAT_ITALIC, FORMAT_LINE_SPACING, FORMAT_LIST_BULLETED, FORMAT_LIST_NUMBERED, FORMAT_QUOTE, FORMAT_SIZE, FORMAT_STRIKETHROUGH, FORMAT_UNDERLINE, FocusTrapService, FooterComponent, INSERT_PAGE_BREAK, IconComponent, IconRegistryService, ImageInsertViewComponent, InputDirective, LINK, LINK_OFF, LabelDirective, LinkEditViewComponent, LinkMainViewComponent, LinkPropertiesViewComponent, MARKDOWN, MATCH_CASE, PHOTO, PRINT, PopoverDirective, REDO, RESTRICT_EDIT, SEARCH, SEARCH_OFF, SETTINGS, SPECIAL_CHARACTER, SUBSCRIPT, SUPERSCRIPT, SelectComponent, SelectLabelDirective, SelectOptionDirective, SpecialCharactersViewComponent, TABLE_CELL_PROPERTY, TABLE_COLUMN, TABLE_MERGE_CELL, TABLE_PROPERTY, TABLE_ROW, TABLE_ROWS, TableCellStyleViewComponent, TableCreateViewComponent, TableMainViewComponent, TableStyleViewComponent, TemplateViewComponent, TiptapBubbleMenuDirective, TiptapDraggableDirective, TiptapEditorDirective, TiptapFloatingMenuDirective, ToggleGroupComponent, ToggleOptionDirective, ToolbarBubbleMenuComponent, ToolbarComponent, ToolbarService, UNDO, VERTICAL_ALIGN_BOTTOM, VERTICAL_ALIGN_CENTER, VERTICAL_ALIGN_TOP, buildToolbarState, selectionChangeHandler, shouldShowFnFactory, urlValidator };
 //# sourceMappingURL=phuong-tran-redoc-document-engine-angular.mjs.map