chore(rich-text-web): update createColorPicker onChange behavior

Author: samuelreichert

packages/pluggableWidgets/rich-text-web/package.json

@@ -45,7 +45,7 @@
     "dependencies": {
         "@codemirror/lang-html": "^6.4.9",
         "@floating-ui/react": "^0.26.27",
-        "@melloware/coloris": "^0.24.0",
+        "@melloware/coloris": "^0.24.2",
         "@uiw/codemirror-theme-github": "^4.21.25",
         "@uiw/react-codemirror": "^4.21.25",
         "classnames": "^2.2.6",

packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/ui/table-properties-form.ts

@@ -85,7 +85,6 @@ class TablePropertiesForm {
         this.borderForm = [];
         this.saveButton = null;
         this.form = this.createPropertiesForm(options);
-        this.createColorPicker();
     }
 
     checkBtnsAction(status: string) {
@@ -159,7 +158,7 @@ class TablePropertiesForm {
         const input = this.createColorInput(child);
         const inputEl = input.querySelector("input");
         if (inputEl) {
-            this.setColorPicker(inputEl);
+            this.createColorPicker(inputEl);
         }
         container.appendChild(input);
         return container;
@@ -187,12 +186,12 @@ class TablePropertiesForm {
         return container;
     }
 
-    createColorPicker(): void {
+    createColorPicker(input: HTMLInputElement) {
         Coloris.init();
         Coloris({
+            el: input,
             clearButton: true,
             closeButton: true,
-            // @ts-ignore
             onChange: (color: string, input: HTMLElement): void => {
                 const propertyName = input.getAttribute("data-property") ?? "";
                 this.setAttribute(propertyName, color, input);
@@ -202,10 +201,6 @@ class TablePropertiesForm {
         });
     }
 
-    setColorPicker(input: HTMLInputElement) {
-        Coloris.coloris({ el: input });
-    }
-
     createDropdown(value: string) {
         const ownerDocument = this.tableMenus.quill.root.ownerDocument;
         const dropdown = ownerDocument.createElement("div");