@phuong-tran-redoc/document-engine-angular 0.1.0 → 0.1.2

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';
@@ -23,8 +25,6 @@ import Underline from '@tiptap/extension-underline';
 import { Dropcursor, Gapcursor, TrailingNode, UndoRedo, CharacterCount, Placeholder } from '@tiptap/extensions';
 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';
@@ -1034,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' },
@@ -6206,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
@@ -6415,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: [{
@@ -6428,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],
                 }]
         }] });