@acorex/components 20.1.26 → 20.1.28

package/fesm2022/acorex-components-wysiwyg.mjs

@@ -40,10 +40,6 @@ class AXWysiwygContainerComponent extends classes((MXInputBaseValueComponent), M
         this.service = inject(AXWysiwygService);
         /** @ignore */
         this.zone = inject(NgZone);
-        /** @ignore */
-        this.quillChangeTriggered = signal(false, ...(ngDevMode ? [{ debugName: "quillChangeTriggered" }] : []));
-        /** @ignore */
-        this.ngModelChangeTriggered = signal(false, ...(ngDevMode ? [{ debugName: "ngModelChangeTriggered" }] : []));
         /**
          * Specifies the placeholder text.
          *
@@ -51,11 +47,20 @@ class AXWysiwygContainerComponent extends classes((MXInputBaseValueComponent), M
         this.placeHolder = input(...(ngDevMode ? [undefined, { debugName: "placeHolder" }] : []));
         this.isQuillLoaded = signal(false, ...(ngDevMode ? [{ debugName: "isQuillLoaded" }] : []));
         this.#init = afterNextRender(() => {
+            this.disabledChange.subscribe((disabled) => {
+                if (disabled) {
+                    this.service.wysiwyg().quillObj().disable();
+                }
+                else {
+                    this.service.wysiwyg().quillObj().enable();
+                }
+            });
             const view = this.getHostElement().querySelector('ax-wysiwyg-view');
             this.zone.runOutsideAngular(async () => {
                 if (isBrowser()) {
                     const newWysiwyg = new AXWysiwyg();
                     await newWysiwyg.init(view);
+                    newWysiwyg.quillObj().disable();
                     this.service.wysiwyg.set(newWysiwyg);
                     this.isQuillLoaded.set(true);
                 }
@@ -73,7 +78,9 @@ class AXWysiwygContainerComponent extends classes((MXInputBaseValueComponent), M
         }, ...(ngDevMode ? [{ debugName: "#effect1" }] : []));
         this.#effect2 = effect(() => {
             if (this.isQuillLoaded() && this.value) {
-                this.service.wysiwyg().quillObj().root.innerHTML = this.value;
+                const quill = this.service.wysiwyg().quillObj();
+                const delta = quill.clipboard.convert({ html: this.value });
+                quill.setContents(delta);
             }
         }, ...(ngDevMode ? [{ debugName: "#effect2" }] : []));
         this.#effect3 = effect(() => {
@@ -90,7 +97,9 @@ class AXWysiwygContainerComponent extends classes((MXInputBaseValueComponent), M
                         this.emitOnBlurEvent();
                     }
                 });
-                this.service.wysiwyg()?.quillObj().enable();
+                setTimeout(() => {
+                    this.service.wysiwyg()?.quillObj().enable();
+                });
             }
         }, ...(ngDevMode ? [{ debugName: "#effect3" }] : []));
     }
@@ -100,48 +109,64 @@ class AXWysiwygContainerComponent extends classes((MXInputBaseValueComponent), M
     #effect3;
     /** @ignore */
     changeHandler() {
-        if (this.ngModelChangeTriggered())
-            return;
-        this.quillChangeTriggered.set(true);
         const value = this.service.wysiwyg()?.quillObj().root.innerHTML;
         if (value === '<p><br></p>' || !value) {
             this.commitValue(null);
-            this.quillChangeTriggered.set(false);
             if (this.service.isEditorClean())
                 return;
             this.service.isEditorClean.set(true);
         }
         else {
-            const delta = this.service.wysiwyg()?.quillObj().editor.delta.ops;
-            const cfg = { inlineStyles: true };
-            const converter = new QuillDeltaToHtmlConverter(delta, cfg);
+            const delta = this.service.wysiwyg()?.quillObj().getContents().ops;
+            const converter = new QuillDeltaToHtmlConverter(delta, {
+                inlineStyles: true,
+                allowBackgroundClasses: true,
+            });
             const html = converter.convert();
             this.commitValue(html, true);
-            this.quillChangeTriggered.set(false);
             if (!this.service.isEditorClean())
                 return;
             this.service.isEditorClean.set(false);
         }
     }
-    internalValueChanged(value) {
-        if (!this.isQuillLoaded())
-            return;
-        if (this.quillChangeTriggered())
-            return;
-        this.ngModelChangeTriggered.set(true);
-        this.service.wysiwyg().quillObj().root.innerHTML = value;
-        this.ngModelChangeTriggered.set(false);
-    }
     /** @ignore */
     ngOnDestroy() {
         this.service.wysiwyg()?.quillObj().off('text-change', this.changeHandler);
+        this.disabledChange.unsubscribe();
     }
+    /**
+     * Focuses the component.
+     *
+     * @returns void - No return value. The component gains focus.
+     */
     focus() {
         this.service.wysiwyg().focus();
     }
+    /**
+     * Removes focus from the component.
+     *
+     * @returns void - No return value. The component loses focus.
+     */
     blur() {
         this.service.wysiwyg().blur();
     }
+    /**
+     * Checks if the component is focused or has any focused element.
+     *
+     * @returns boolean - True if the component has focus.
+     */
+    hasFocus() {
+        return super.hasFocus();
+    }
+    /**
+     * Sets the disabled state of the component.
+     *
+     * @param isDisabled - Whether the component should be disabled.
+     * @returns void - No return value.
+     */
+    setDisabledState(isDisabled) {
+        super.setDisabledState(isDisabled);
+    }
     get __hostName() {
         return this.name;
     }
@@ -238,7 +263,7 @@ class AXWysiwygColorsComponent {
         /** @ignore */
         this.selectedColor = signal('rgb(151, 148, 148)', ...(ngDevMode ? [{ debugName: "selectedColor" }] : []));
         /** @ignore */
-        this.selectedHighlightColor = signal('rgba(223, 223, 24, 0.5)', ...(ngDevMode ? [{ debugName: "selectedHighlightColor" }] : []));
+        this.selectedHighlightColor = signal('rgba(223, 223, 24)', ...(ngDevMode ? [{ debugName: "selectedHighlightColor" }] : []));
         /** @ignore */
         this.userInteractColor = signal(false, ...(ngDevMode ? [{ debugName: "userInteractColor" }] : []));
         /** @ignore */
@@ -253,7 +278,7 @@ class AXWysiwygColorsComponent {
         };
         effect(() => {
             if (this.service.isEditorClean()) {
-                this.selectedHighlightColor.set('rgba(223, 223, 24, 0.5)');
+                this.selectedHighlightColor.set('rgba(223, 223, 24)');
                 this.selectedColor.set('rgb(151, 148, 148)');
             }
         });
@@ -277,7 +302,7 @@ class AXWysiwygColorsComponent {
         if (this.userInteractHighligh())
             return;
         this.userInteractHighligh.set(true);
-        this.service.wysiwyg().background('rgba(223, 223, 24, 0.5)');
+        this.service.wysiwyg().background('rgba(223, 223, 24)');
     }
     /** @ignore */
     initialColorHandler() {