Updated ColorPicker option

bigbinary · Dec 8, 2023 · 6e66fd2 · 6e66fd2
1 parent 0372b38
commit 6e66fd2
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 31 deletions.
diff --git a/src/components/Editor/Menu/Fixed/TextColorOption.jsx b/src/components/Editor/Menu/Fixed/TextColorOption.jsx
@@ -1,34 +1,29 @@
 import React, { useEffect, useRef, useState } from "react";
 
-import { useFuncDebounce, useOnClickOutside } from "neetocommons/react-utils";
+import { useOnClickOutside } from "neetocommons/react-utils";
 import { withEventTargetValue } from "neetocommons/utils";
-import { Customize } from "neetoicons";
+import { Check, Close, Customize, Refresh } from "neetoicons";
 import { Button, Dropdown, Input } from "neetoui";
 import { not } from "ramda";
 import { HexColorPicker } from "react-colorful";
 import { useTranslation } from "react-i18next";
 
 const TextColorOption = ({ editor, tooltipContent }) => {
   const [isOpen, setIsOpen] = useState(false);
-  const [color, setColor] = useState(editor.getAttributes("textStyle").color);
+  const [color, setColor] = useState(null);
 
   const dropdownWrapperRef = useRef(null);
   const { t } = useTranslation();
 
-  const handleDebouncedClose = useFuncDebounce(
-    color => editor.commands.setColor(color),
-    300
-  );
-
-  const handleReset = () => {
-    editor.commands.unsetColor();
+  const handleSave = () => {
+    editor.chain().focus().setColor(color).run();
     setIsOpen(false);
-    editor.commands.focus();
   };
 
-  const handleColorChange = color => {
-    setColor(color);
-    handleDebouncedClose(color);
+  const handleUnset = () => {
+    editor.chain().focus().unsetColor().run();
+    setColor(null);
+    setIsOpen(false);
   };
 
   useOnClickOutside(dropdownWrapperRef, event => {
@@ -40,18 +35,13 @@ const TextColorOption = ({ editor, tooltipContent }) => {
   });
 
   useEffect(() => {
-    editor.commands.setHighlightInternal("#ACCEF7");
-
-    if (!isOpen) {
-      editor.commands.unsetHighlightInternal();
-      editor.commands.removeEmptyTextStyle();
-    }
-  }, [isOpen]);
+    setColor(editor.getAttributes("textStyle").color);
+  }, [isOpen, editor.getAttributes("textStyle").color]);
 
   return (
     <div ref={dropdownWrapperRef}>
       <Dropdown
-        buttonStyle={isOpen ? "secondary" : "text"}
+        buttonStyle={isOpen || color ? "secondary" : "text"}
         icon={Customize}
         {...{ isOpen }}
         buttonProps={{
@@ -65,10 +55,7 @@ const TextColorOption = ({ editor, tooltipContent }) => {
           setIsOpen(not);
         }}
       >
-        <HexColorPicker
-          color={color || "#000000"}
-          onChange={handleColorChange}
-        />
+        <HexColorPicker color={color || "#000000"} onChange={setColor} />
         <div className="neeto-editor-text-color-option__options-group">
           <Input
             autoFocus
@@ -77,13 +64,39 @@ const TextColorOption = ({ editor, tooltipContent }) => {
             size="small"
             value={color}
             onChange={withEventTargetValue(setColor)}
+            onClick={event => event.stopPropagation()}
+          />
+          <Button
+            icon={Check}
+            size="small"
+            tooltipProps={{
+              content: t("neetoEditor.common.save"),
+              position: "top",
+            }}
+            onClick={handleSave}
+          />
+          <Button
+            icon={Close}
+            size="small"
+            style="text"
+            tooltipProps={{
+              content: t("neetoEditor.common.close"),
+              position: "top",
+            }}
+            onClick={() => {
+              editor.commands.focus();
+              setIsOpen(false);
+            }}
           />
           <Button
-            className="neeto-editor-text-color-option__options-group__reset-button"
-            label={t("neetoEditor.common.reset")}
+            icon={Refresh}
             size="small"
             style="text"
-            onClick={handleReset}
+            tooltipProps={{
+              content: t("neetoEditor.common.resetToDefault"),
+              position: "top",
+            }}
+            onClick={handleUnset}
           />
         </div>
       </Dropdown>

diff --git a/src/styles/editor/_menu.scss b/src/styles/editor/_menu.scss
@@ -126,7 +126,7 @@
     align-items: center;
 
     &__input {
-      max-width: 130px;
+      max-width: 120px;
     }
 
     &__reset-button {
@@ -135,6 +135,10 @@
   }
 }
 
+.react-colorful {
+  width: 100% !important;
+}
+
 .neeto-editor-menu__item {
   display: flex;
   flex-direction: row;

diff --git a/src/translations/en.json b/src/translations/en.json
@@ -13,7 +13,10 @@
       "text": "Text:",
       "done": "Done",
       "url": "Url:",
-      "editLink": "Edit link"
+      "editLink": "Edit link",
+      "save": "Save",
+      "close": "Close",
+      "resetToDefault": "Reset to default"
     },
     "attachments": {
       "actionsBlocked": "You are not permitted to update or delete attachments",