✨🚧Enhanced TextEditorPlugin

Now colors of texts can be modified!
carefree0910 · May 18, 2023 · 010d7e5 · 010d7e5
1 parent 89e695e
commit 010d7e5
Showing 1 changed file with 37 additions and 15 deletions.
diff --git a/cfdraw/.web/src/plugins/_react/TextEditorPlugin.tsx b/cfdraw/.web/src/plugins/_react/TextEditorPlugin.tsx
@@ -1,15 +1,17 @@
+import type { ColorChangeHandler } from "react-color";
 import { useEffect, useMemo, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { Flex, Textarea } from "@chakra-ui/react";
 
 import { getRandomHash } from "@carefree0910/core";
-import { langStore, translate, useEditText } from "@carefree0910/business";
+import { langStore, selectingNodesStore, translate, useEditText } from "@carefree0910/business";
 
 import type { IPlugin } from "@/schema/plugins";
 import { NodeEditor_Words } from "@/lang/nodeEditor";
 import CFSlider from "@/components/CFSlider";
 import CFDivider from "@/components/CFDivider";
 import CFHeading from "@/components/CFHeading";
+import CFColorPicker from "@/components/CFColorPicker";
 import { drawboardPluginFactory } from "../utils/factory";
 import Render from "../components/Render";
 
@@ -18,33 +20,53 @@ const TextEditorPlugin = ({ pluginInfo: { node }, ...props }: IPlugin) => {
   const lang = langStore.tgt;
   const [content, setContent] = useState("");
   const [fontSize, setFontSize] = useState(0);
-  const { editContent, editFontSize } = useEditText();
+
+  const textParams = selectingNodesStore.info.textParams;
+  const { editColor, editContent, editFontSize } = useEditText();
   useEffect(() => {
     if (node?.type === "text") {
       setContent(node.params.content);
       setFontSize(node.params.fontSize);
     }
   }, [node]);
 
-  if (node?.type !== "text") return null;
+  const onChange: ColorChangeHandler = (color) => {
+    editColor({ trace: false })(color.hex);
+  };
+  const onChangeComplete: ColorChangeHandler = (color) => {
+    console.log(">>> onChangeComplete");
+    editColor({ trace: true })(color.hex);
+  };
+
+  if (node?.type !== "text" || !textParams) return null;
 
   return (
     <Render id={id} {...props}>
       <CFHeading>{translate(NodeEditor_Words["text-editor-plugin-header"], lang)}</CFHeading>
       <CFDivider />
       <Flex direction="column" w="100%" h="100%">
-        <CFSlider
-          min={12}
-          max={1024}
-          precision={0}
-          value={fontSize}
-          scale="logarithmic"
-          onSliderChange={(value) => {
-            setFontSize(value);
-            editFontSize({ trace: false })(value);
-          }}
-          onBlur={() => editFontSize({ trace: true })(fontSize)}
-        />
+        <Flex w="100%">
+          <CFSlider
+            flex={1}
+            min={12}
+            max={1024}
+            precision={0}
+            value={fontSize}
+            scale="logarithmic"
+            onSliderChange={(value) => {
+              setFontSize(value);
+              editFontSize({ trace: false })(value);
+            }}
+            onBlur={() => editFontSize({ trace: true })(fontSize)}
+          />
+          <CFColorPicker
+            color={textParams.color}
+            onChange={onChange}
+            onChangeComplete={onChangeComplete}
+            disableAlpha
+            thumbnailProps={{ ml: "12px" }}
+          />
+        </Flex>
         <CFDivider />
         <Textarea
           flex={1}