@acorex/components 21.0.0-next.42 → 21.0.0-next.44

package/fesm2022/acorex-components-wysiwyg.mjs

@@ -4,6 +4,7 @@ import * as i0 from '@angular/core';
 import { viewChild, ChangeDetectionStrategy, ViewEncapsulation, Component, signal, Injectable, input, inject, contentChild, PLATFORM_ID, afterNextRender, effect, forwardRef, HostBinding, NgModule } from '@angular/core';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import { classes } from 'polytype';
+import { QuillDeltaToHtmlConverter } from 'quill-delta-to-html';
 import { AXDecoratorColorIndicatorComponent, AXDecoratorModule } from '@acorex/components/decorators';
 import { AXButtonModule } from '@acorex/components/button';
 import { AXColorPaletteModule } from '@acorex/components/color-palette';
@@ -74,12 +75,12 @@ class AXWysiwygContainerComponent extends classes((MXInputBaseValueComponent), M
         this.container = contentChild(AXWysiwygViewComponent, ...(ngDevMode ? [{ debugName: "container" }] : []));
         this.toolbar = contentChild(AXWysiwygToolbarComponent, ...(ngDevMode ? [{ debugName: "toolbar" }] : []));
         this.platformId = inject(PLATFORM_ID);
+        this.changeHandlerTimer = null;
         this.#init = afterNextRender(async () => {
             if (!isPlatformBrowser(this.platformId))
                 return;
             const Quill = (await import('quill')).default;
             const icons = Quill.import('ui/icons');
-            this.quillConvertor = (await import('quill-delta-to-html')).QuillDeltaToHtmlConverter;
             icons['bold'] = '<ax-icon class="ax-icon ax-icon-bold"></ax-icon>';
             icons['italic'] = '<ax-icon class="ax-icon ax-icon-italic"></ax-icon>';
             icons['underline'] = '<ax-icon class="ax-icon ax-icon-under-line"></ax-icon>';
@@ -197,29 +198,33 @@ class AXWysiwygContainerComponent extends classes((MXInputBaseValueComponent), M
     #effect1;
     #effect2;
     #effect3;
-    /** @ignore */
-    async changeHandler() {
+    changeHandler() {
         if (this.disabled)
             return;
-        const value = this.wysiwyg()?.root.innerHTML;
-        if (value === '<p><br></p>' || !value) {
-            this.commitValue(null);
-            if (this.isEditorClean())
-                return;
-            this.isEditorClean.set(true);
-        }
-        else {
-            const delta = this.wysiwyg()?.getContents().ops;
-            const converter = new this.quillConvertor(delta, {
-                inlineStyles: true,
-                allowBackgroundClasses: true,
-            });
-            const html = converter.convert();
-            this.commitValue(html, true);
-            if (!this.isEditorClean())
-                return;
-            this.isEditorClean.set(false);
+        if (this.changeHandlerTimer) {
+            clearTimeout(this.changeHandlerTimer);
         }
+        this.changeHandlerTimer = setTimeout(() => {
+            const value = this.wysiwyg()?.root.innerHTML;
+            if (value === '<p><br></p>' || !value) {
+                this.commitValue(null);
+                if (this.isEditorClean())
+                    return;
+                this.isEditorClean.set(true);
+            }
+            else {
+                const delta = this.wysiwyg()?.getContents().ops;
+                const converter = new QuillDeltaToHtmlConverter(delta, {
+                    inlineStyles: true,
+                    allowBackgroundClasses: true,
+                });
+                const html = converter.convert();
+                this.commitValue(html, true);
+                if (!this.isEditorClean())
+                    return;
+                this.isEditorClean.set(false);
+            }
+        }, 300);
     }
     /** @ignore */
     ngOnDestroy() {