@phuong-tran-redoc/document-engine-angular 0.0.24 → 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';
@@ -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();
     }
@@ -5528,6 +5529,7 @@ function buildToolbarState(editor, config) {
  */
 class ToolbarComponent {
     cdr = inject(ChangeDetectorRef);
+    ngZone = inject(NgZone);
     toolbarService = inject(ToolbarService);
     editor;
     capabilities;
@@ -5565,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