@phuong-tran-redoc/document-engine-angular 0.0.24 → 0.0.26

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,16 +4813,16 @@ 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();
     }
     ngAfterViewInit() {
         const bubbleElement = this.bubbleElement?.nativeElement;
-        if (bubbleElement) {
-            this.focusTrap.attach(bubbleElement);
-        }
+        // if (bubbleElement) {
+        //   this.focusTrap.attach(bubbleElement);
+        // }
     }
     ngOnDestroy() {
         if (this.cleanupSelection) {
@@ -4929,8 +4930,11 @@ class EditorBubbleMenuComponent {
         // if (isAttached) {
         //   this.eventManager.detach(this.config.pluginKey);
         // }
+        // Reset force open state
+        this.forceOpen.value = false;
         this.destroyCurrentView();
         this.currentAttributes = {};
+        this.cdr.markForCheck();
     }
     /**
      * Select which view should be shown initially
@@ -4988,7 +4992,7 @@ class EditorBubbleMenuComponent {
             requestAnimationFrame(() => {
                 bubbleElement.setAttribute('data-visible', 'true');
                 // Re-setup focus trap after view is created (focusable elements may have changed)
-                this.focusTrap.reattach(bubbleElement, true);
+                // this.focusTrap.reattach(bubbleElement, true);
             });
         }
     }
@@ -5528,6 +5532,7 @@ function buildToolbarState(editor, config) {
  */
 class ToolbarComponent {
     cdr = inject(ChangeDetectorRef);
+    ngZone = inject(NgZone);
     toolbarService = inject(ToolbarService);
     editor;
     capabilities;
@@ -5565,30 +5570,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