@phuong-tran-redoc/document-engine-angular 0.0.23 → 0.0.25

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, ChangeDetectorRef, ElementRef, ViewEncapsulation, ChangeDetectionStrategy, Component, EventEmitter, Output, InjectionToken, HostListener, forwardRef, ContentChildren, ViewChild, ViewChildren, ViewContainerRef, EnvironmentInjector, NgZone, NgModule, ApplicationRef, createComponent, Renderer2 } from '@angular/core';
+import { HostBinding, Input, Directive, inject, Injectable, ChangeDetectorRef, ElementRef, ViewEncapsulation, ChangeDetectionStrategy, Component, EventEmitter, Output, InjectionToken, HostListener, forwardRef, ContentChildren, ViewChild, ViewChildren, NgZone, ViewContainerRef, EnvironmentInjector, NgModule, ApplicationRef, createComponent, Renderer2 } from '@angular/core';
 import { Extension, Editor } from '@tiptap/core';
 import Blockquote from '@tiptap/extension-blockquote';
 import Bold from '@tiptap/extension-bold';
@@ -837,7 +837,7 @@ class ColorPickerViewComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: ColorPickerViewComponent, isStandalone: true, selector: "document-engine-color-picker-view", ngImport: i0, template: `
     <div class="color-picker-view">
       <!-- Title -->
-      <div class="color-picker-view__title">{{ colorType === 'text' ? 'Text Color' : 'Background Color' }}noôi</div>
+      <div class="color-picker-view__title">{{ colorType === 'text' ? 'Text Color' : 'Background Color' }}</div>
 
       <!-- Color Picker Component -->
       <document-engine-color-picker
@@ -861,7 +861,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
             args: [{ selector: 'document-engine-color-picker-view', standalone: true, imports: [CommonModule, ButtonDirective, ColorPickerComponent], template: `
     <div class="color-picker-view">
       <!-- Title -->
-      <div class="color-picker-view__title">{{ colorType === 'text' ? 'Text Color' : 'Background Color' }}noôi</div>
+      <div class="color-picker-view__title">{{ colorType === 'text' ? 'Text Color' : 'Background Color' }}</div>
 
       <!-- Color Picker Component -->
       <document-engine-color-picker
@@ -4776,6 +4776,7 @@ class EditorBubbleMenuComponent {
     viewContainer;
     bubbleElement;
     cdr = inject(ChangeDetectorRef);
+    ngZone = inject(NgZone);
     document = inject(DOCUMENT);
     focusTrap = inject(FocusTrapService);
     currentViewRef = null;
@@ -4812,8 +4813,8 @@ class EditorBubbleMenuComponent {
         this.cleanupSelection = selectionChangeHandler({
             editor,
             target: config.target,
-            onActive: (attrs) => this.handleActivate(attrs),
-            onInactive: () => this.handleDeactivate(),
+            onActive: (attrs) => this.ngZone.run(() => this.handleActivate(attrs)),
+            onInactive: () => this.ngZone.run(() => this.handleDeactivate()),
         });
         this.addDocumentClickHandler();
     }
@@ -5397,12 +5398,11 @@ class ToolbarBubbleMenuComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: ToolbarBubbleMenuComponent, isStandalone: true, selector: "document-engine-toolbar-bubble-menu", inputs: { editor: "editor", config: "config" }, viewQueries: [{ propertyName: "bubbleElement", first: true, predicate: ["bubbleElement"], descendants: true }, { propertyName: "viewContainer", first: true, predicate: ["viewContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: `
     <div
       #bubbleElement
-      class="toolbar-bubble-menu rounded border bg-card text-card-foreground border-border shadow-elevation-2 absolute z-50"
+      class="toolbar-bubble-menu rounded border bg-card text-card-foreground border-border shadow-elevation-2 z-50"
       [class.hidden]="!isVisible"
       [style.width]="config.width || 'auto'"
       [style.maxWidth]="config.maxWidth || '320px'"
     >
-      <!-- View component will be dynamically inserted here -->
       <ng-container #viewContainer></ng-container>
     </div>
   `, isInline: true, styles: [".toolbar-bubble-menu{opacity:0;transform:translateY(-10px);transition:opacity .2s ease-out,transform .2s ease-out;pointer-events:none}.toolbar-bubble-menu:not(.hidden){opacity:1;transform:translateY(0);pointer-events:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -5412,12 +5412,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
             args: [{ selector: 'document-engine-toolbar-bubble-menu', standalone: true, imports: [CommonModule], template: `
     <div
       #bubbleElement
-      class="toolbar-bubble-menu rounded border bg-card text-card-foreground border-border shadow-elevation-2 absolute z-50"
+      class="toolbar-bubble-menu rounded border bg-card text-card-foreground border-border shadow-elevation-2 z-50"
       [class.hidden]="!isVisible"
       [style.width]="config.width || 'auto'"
       [style.maxWidth]="config.maxWidth || '320px'"
     >
-      <!-- View component will be dynamically inserted here -->
       <ng-container #viewContainer></ng-container>
     </div>
   `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".toolbar-bubble-menu{opacity:0;transform:translateY(-10px);transition:opacity .2s ease-out,transform .2s ease-out;pointer-events:none}.toolbar-bubble-menu:not(.hidden){opacity:1;transform:translateY(0);pointer-events:auto}\n"] }]
@@ -5530,6 +5529,7 @@ function buildToolbarState(editor, config) {
  */
 class ToolbarComponent {
     cdr = inject(ChangeDetectorRef);
+    ngZone = inject(NgZone);
     toolbarService = inject(ToolbarService);
     editor;
     capabilities;
@@ -5567,30 +5567,32 @@ class ToolbarComponent {
         trailing: false,
     });
     updateToolbarState = () => {
-        if (!this.editor)
-            return;
-        // Update toolbar state (can* properties)
-        this.toolbarState = buildToolbarState(this.editor, this.config);
-        // Update active font size and line height
-        const attrs = this.editor.getAttributes('textStyle');
-        const size = attrs?.['fontSize'] || null;
-        this.activeFontSize = size;
-        const lineHeight = attrs?.['lineHeight'] || null;
-        this.activeLineHeight = lineHeight;
-        // Update active heading
-        let headingLevel = null;
-        for (const option of this.headingOptions) {
-            if (this.editor.isActive('heading', { level: option.value })) {
-                headingLevel = option.value;
-                break;
+        this.ngZone.run(() => {
+            if (!this.editor)
+                return;
+            // Update toolbar state (can* properties)
+            this.toolbarState = buildToolbarState(this.editor, this.config);
+            // Update active font size and line height
+            const attrs = this.editor.getAttributes('textStyle');
+            const size = attrs?.['fontSize'] || null;
+            this.activeFontSize = size;
+            const lineHeight = attrs?.['lineHeight'] || null;
+            this.activeLineHeight = lineHeight;
+            // Update active heading
+            let headingLevel = null;
+            for (const option of this.headingOptions) {
+                if (this.editor.isActive('heading', { level: option.value })) {
+                    headingLevel = option.value;
+                    break;
+                }
             }
-        }
-        this.activeHeading = headingLevel;
-        // Update active text align
-        const alignOption = this.textAlignOptions.find((option) => this.editor.isActive({ textAlign: option.value }));
-        this.activeTextAlign = alignOption?.value || null;
-        this.activeTextAlignIcon = alignOption?.icon || 'format_align_left';
-        this.cdr.markForCheck();
+            this.activeHeading = headingLevel;
+            // Update active text align
+            const alignOption = this.textAlignOptions.find((option) => this.editor.isActive({ textAlign: option.value }));
+            this.activeTextAlign = alignOption?.value || null;
+            this.activeTextAlignIcon = alignOption?.icon || 'format_align_left';
+            this.cdr.markForCheck();
+        });
     };
     ngOnInit() {
         // Subscribe to selectionUpdate to keep toolbar state in sync when cursor/selection changes