@phuong-tran-redoc/document-engine-angular 0.0.41 → 0.1.1

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

@@ -1,5 +1,7 @@
+import * as i1 from '@angular/common';
+import { DOCUMENT, CommonModule } from '@angular/common';
 import * as i0 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 { inject, ElementRef, Input, Directive, Injectable, ApplicationRef, createComponent, HostBinding, InjectionToken, Renderer2, ChangeDetectorRef, forwardRef, ChangeDetectionStrategy, Component, ViewEncapsulation, 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';
@@ -21,10 +23,8 @@ import { TextAlign } from '@tiptap/extension-text-align';
 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 { ResetOnEnter, EditableRegion, RestrictedEditing, CustomOrderedList, StyledTableKit, ImageRef, 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 { DOCUMENT, CommonModule } from '@angular/common';
 import * as i2 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule, FormControl, ReactiveFormsModule, FormBuilder, Validators, NonNullableFormBuilder } from '@angular/forms';
 import { FloatingMenuPlugin } from '@tiptap/extension-floating-menu';
@@ -104,6 +104,7 @@ const DocumentEngineKit = Extension.create({
         add(options.superscript, Superscript);
         add(options.textAlign, TextAlign, DEFAULT_TEXT_ALIGN);
         add(options.image, Image);
+        add(options.imageRef, ImageRef);
         add(options.placeholder, Placeholder, DEFAULT_PLACEHOLDER);
         add(options.pageBreak, PageBreak);
         add(options.resetFormat, ResetFormat);
@@ -1033,6 +1034,118 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
                 type: Input
             }] } });
 
+/**
+ * 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;
+            }
+        }
+        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;
+            }
+        }
+        // Get limit from config
+        const characterCountConfig = this.config?.characterCount;
+        if (characterCountConfig && typeof characterCountConfig === 'object') {
+            this.limit = characterCountConfig.limit || null;
+        }
+        else {
+            this.limit = null;
+        }
+        this.cdr.markForCheck();
+    };
+    ngOnInit() {
+        if (!this.editor) {
+            return;
+        }
+        // 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();
+    }
+    ngOnDestroy() {
+        if (this.editor) {
+            this.editor.off('update', this.updateCount);
+            this.editor.off('transaction', this.updateCount);
+        }
+    }
+    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: 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
+            }] } });
+
 const COLORS = Color.fromArray([
     { name: 'Black', value: '#000000', type: 'hex' },
     { name: 'Dim gray', value: '#696969', type: 'hex' },
@@ -1920,6 +2033,39 @@ const DynamicFieldsBubbleConfig = {
     ],
 };
 
+/**
+ * Whether a picker result is worth inserting. A `null`/`undefined` result (or one
+ * with neither an `id` nor a `url`) is treated as a cancel — insert nothing.
+ */
+function isInsertableResult(result) {
+    return !!result && (!!result.id || !!result.url);
+}
+/** Read the consumer's `onPick` media hook off the `image` extension options, if any. */
+function getImagePickHook(editor) {
+    const ext = editor.extensionManager.extensions.find((e) => e.name === 'image');
+    return ext?.options?.onPick;
+}
+/**
+ * Insert a picked media result: an `image-ref` node when that node is enabled
+ * (preferred — URL-free), otherwise a plain image from the resolved URL. Returns
+ * `true` when something was actually inserted, `false` when the result had
+ * nothing usable (id-only with no `imageRef` node, and no url) — so the caller can
+ * avoid closing the view as if an insert had happened.
+ */
+function insertMediaResult(editor, result) {
+    const hasImageRef = editor.extensionManager.extensions.some((e) => e.name === 'imageRef');
+    const chain = editor.chain().focus();
+    if (hasImageRef && result.id) {
+        chain.insertImageRef({ imageId: result.id, caption: result.alt ?? null }).run();
+        return true;
+    }
+    if (result.url) {
+        chain.setImage({ src: result.url, alt: result.alt ?? '' }).run();
+        return true;
+    }
+    return false;
+}
+
 const urlValidator = (control) => {
     const value = (control.value ?? '').trim();
     if (!value)
@@ -1968,9 +2114,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
             }] } });
 
 /**
- * Temporary image insert view for bubble menu
- * Provides URL input for inserting images via link
- * This is a temporary solution until full upload flow is implemented
+ * Image insert view for the bubble menu.
+ *
+ * Two modes:
+ *  - When the editor's `image` config supplies an async `onPick` hook, the view
+ *    delegates selection to the consumer's media picker and inserts the result
+ *    (an `image-ref` node when that node is enabled, else a plain image).
+ *  - Otherwise it falls back to the built-in raw-URL input form.
  */
 class ImageInsertViewComponent {
     fb = inject(FormBuilder);
@@ -1978,11 +2128,22 @@ class ImageInsertViewComponent {
     editor;
     close;
     goBack;
+    /** True while the consumer's `onPick` promise is in flight. */
+    loading = false;
     imageForm = this.fb.nonNullable.group({
         url: this.fb.control('', [Validators.required, urlValidator]),
         alt: this.fb.control(''),
     });
+    /** The consumer's media picker, read off the `image` extension options (if any). */
+    get onPick() {
+        return this.editor ? getImagePickHook(this.editor) : undefined;
+    }
+    /** Whether to show the picker mode (vs the raw-URL fallback form). */
+    get hasPicker() {
+        return typeof this.onPick === 'function';
+    }
     onActivate() {
+        this.loading = false;
         this.imageForm.reset();
         this.imageForm.controls.url.markAsUntouched();
         this.cdr.markForCheck();
@@ -1999,6 +2160,30 @@ class ImageInsertViewComponent {
         this.editor.chain().focus().setImage({ src: url, alt }).run();
         this.close?.();
     }
+    /** Delegate selection to the consumer's media picker, then insert the result. */
+    async pickImage() {
+        const onPick = this.onPick;
+        if (!onPick || !this.editor || this.loading)
+            return;
+        this.loading = true;
+        this.cdr.markForCheck();
+        try {
+            const result = await onPick();
+            // Reject / resolve-nothing is a deliberate no-op (consumer cancelled). Only
+            // close when something was actually inserted — an id-only result with no
+            // `image-ref` node inserts nothing and must leave the view open.
+            if (this.editor && isInsertableResult(result) && insertMediaResult(this.editor, result)) {
+                this.close?.();
+            }
+        }
+        catch {
+            // Swallow: a rejected picker (e.g. dialog dismissed) must not crash the editor.
+        }
+        finally {
+            this.loading = false;
+            this.cdr.markForCheck();
+        }
+    }
     cancel() {
         this.close?.();
     }
@@ -2008,7 +2193,23 @@ class ImageInsertViewComponent {
       <!-- Title -->
       <div class="image-insert-view__header">Insert Image</div>
 
-      <!-- Content -->
+      <!-- Picker mode: delegate selection to the consumer's media library -->
+      <ng-container *ngIf="hasPicker; else urlForm">
+        <div class="image-insert-view__content">
+          <p class="image-insert-view__hint">Choose an image from your media library.</p>
+        </div>
+        <div class="image-insert-view__actions">
+          <button type="button" documentEngineButton variant="ghost" [disabled]="loading" (click)="cancel()">
+            Cancel
+          </button>
+          <button type="button" documentEngineButton variant="default" [disabled]="loading" (click)="pickImage()">
+            {{ loading ? 'Loading…' : 'Choose from library' }}
+          </button>
+        </div>
+      </ng-container>
+
+      <!-- Fallback: built-in raw-URL input form -->
+      <ng-template #urlForm>
       <form [formGroup]="imageForm" (ngSubmit)="insertImage()">
         <div class="image-insert-view__content">
           <!-- Image URL input -->
@@ -2048,8 +2249,9 @@ class ImageInsertViewComponent {
           <button type="submit" documentEngineButton variant="default" [disabled]="!canInsert()">Insert Image</button>
         </div>
       </form>
+      </ng-template>
     </div>
-  `, isInline: true, styles: [".image-insert-view{display:flex;flex-direction:column;min-width:320px}.image-insert-view__header{padding:.5rem 1rem;border-bottom:1px solid var(--border);font-weight:500;font-size:.875rem}.image-insert-view__content{display:flex;flex-direction:column;gap:.75rem;padding:1rem .5rem}.image-insert-view__field{display:flex;flex-direction:column;gap:.25rem;width:100%}.image-insert-view__actions{display:flex;gap:.5rem;justify-content:flex-end;padding:.5rem;border-top:1px solid var(--border)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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: ErrorMessageComponent, selector: "document-engine-error-message", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".image-insert-view{display:flex;flex-direction:column;min-width:320px}.image-insert-view__header{padding:.5rem 1rem;border-bottom:1px solid var(--border);font-weight:500;font-size:.875rem}.image-insert-view__content{display:flex;flex-direction:column;gap:.75rem;padding:1rem .5rem}.image-insert-view__hint{margin:0;font-size:.8125rem;color:var(--muted-foreground)}.image-insert-view__field{display:flex;flex-direction:column;gap:.25rem;width:100%}.image-insert-view__actions{display:flex;gap:.5rem;justify-content:flex-end;padding:.5rem;border-top:1px solid var(--border)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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: ErrorMessageComponent, selector: "document-engine-error-message", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ImageInsertViewComponent, decorators: [{
             type: Component,
@@ -2058,7 +2260,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
       <!-- Title -->
       <div class="image-insert-view__header">Insert Image</div>
 
-      <!-- Content -->
+      <!-- Picker mode: delegate selection to the consumer's media library -->
+      <ng-container *ngIf="hasPicker; else urlForm">
+        <div class="image-insert-view__content">
+          <p class="image-insert-view__hint">Choose an image from your media library.</p>
+        </div>
+        <div class="image-insert-view__actions">
+          <button type="button" documentEngineButton variant="ghost" [disabled]="loading" (click)="cancel()">
+            Cancel
+          </button>
+          <button type="button" documentEngineButton variant="default" [disabled]="loading" (click)="pickImage()">
+            {{ loading ? 'Loading…' : 'Choose from library' }}
+          </button>
+        </div>
+      </ng-container>
+
+      <!-- Fallback: built-in raw-URL input form -->
+      <ng-template #urlForm>
       <form [formGroup]="imageForm" (ngSubmit)="insertImage()">
         <div class="image-insert-view__content">
           <!-- Image URL input -->
@@ -2098,8 +2316,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
           <button type="submit" documentEngineButton variant="default" [disabled]="!canInsert()">Insert Image</button>
         </div>
       </form>
+      </ng-template>
     </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".image-insert-view{display:flex;flex-direction:column;min-width:320px}.image-insert-view__header{padding:.5rem 1rem;border-bottom:1px solid var(--border);font-weight:500;font-size:.875rem}.image-insert-view__content{display:flex;flex-direction:column;gap:.75rem;padding:1rem .5rem}.image-insert-view__field{display:flex;flex-direction:column;gap:.25rem;width:100%}.image-insert-view__actions{display:flex;gap:.5rem;justify-content:flex-end;padding:.5rem;border-top:1px solid var(--border)}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".image-insert-view{display:flex;flex-direction:column;min-width:320px}.image-insert-view__header{padding:.5rem 1rem;border-bottom:1px solid var(--border);font-weight:500;font-size:.875rem}.image-insert-view__content{display:flex;flex-direction:column;gap:.75rem;padding:1rem .5rem}.image-insert-view__hint{margin:0;font-size:.8125rem;color:var(--muted-foreground)}.image-insert-view__field{display:flex;flex-direction:column;gap:.25rem;width:100%}.image-insert-view__actions{display:flex;gap:.5rem;justify-content:flex-end;padding:.5rem;border-top:1px solid var(--border)}\n"] }]
         }] });
 
 const ImageBubbleConfig = {
@@ -5340,7 +5559,7 @@ class EditorBubbleMenuComponent {
         // Activate new view
         this.activateView(this.currentViewRef);
         // Trigger change detection for the child component to render immediately
-        // This is especially important for Angular v14 compatibility
+        // (the view is created imperatively, so it is outside Angular's normal CD pass)
         this.cdr.markForCheck();
         // Mark bubble as visible for transition handling
         const bubbleElement = this.bubbleElement?.nativeElement;
@@ -6099,118 +6318,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
                 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;
-            }
-        }
-        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;
-            }
-        }
-        // Get limit from config
-        const characterCountConfig = this.config?.characterCount;
-        if (characterCountConfig && typeof characterCountConfig === 'object') {
-            this.limit = characterCountConfig.limit || null;
-        }
-        else {
-            this.limit = null;
-        }
-        this.cdr.markForCheck();
-    };
-    ngOnInit() {
-        if (!this.editor) {
-            return;
-        }
-        // 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();
-    }
-    ngOnDestroy() {
-        if (this.editor) {
-            this.editor.off('update', this.updateCount);
-            this.editor.off('transaction', this.updateCount);
-        }
-    }
-    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: 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
@@ -6308,11 +6415,11 @@ class DocumentEditorComponent {
         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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: DocumentEditorComponent, isStandalone: true, 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: "ngmodule", type: CommonModule }, { 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: {
+            args: [{ selector: 'document-engine-editor', imports: [CommonModule, ToolbarComponent, FooterComponent], 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: [{
@@ -6321,16 +6428,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
                 type: Output
             }] } });
 
+/**
+ * Back-compat shim for NgModule-based consumers. `DocumentEditorComponent` is now
+ * standalone (and `@defer`-friendly); standalone consumers should import it (and
+ * `TiptapEditorDirective`) directly instead of this module.
+ */
 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] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.10", ngImport: i0, type: DocumentEditorModule, imports: [DocumentEditorComponent, TiptapEditorDirective], exports: [DocumentEditorComponent, TiptapEditorDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DocumentEditorModule, imports: [DocumentEditorComponent] });
 }
 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],
+                    imports: [DocumentEditorComponent, TiptapEditorDirective],
                     exports: [DocumentEditorComponent, TiptapEditorDirective],
                 }]
         }] });