✨🚧Supported editAlign in TextEditorPlugin

carefree0910 · May 21, 2023 · 6e3e7b0 · 6e3e7b0
1 parent d9bf591
commit 6e3e7b0
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 2 deletions.
diff --git a/cfdraw/.web/src/lang/ui.ts b/cfdraw/.web/src/lang/ui.ts
@@ -8,6 +8,7 @@ export enum UI_Words {
   "task-working-caption" = "task-working-caption",
   "list-field-empty-caption" = "list-field-empty-caption",
   "add-object-to-list-tooltip" = "add-object-to-list-tooltip",
+  "text-editor-align-label" = "text-editor-align-label",
 }
 
 export const uiLangRecords: Record<Lang, Record<UI_Words, string>> = {
@@ -19,6 +20,7 @@ export const uiLangRecords: Record<Lang, Record<UI_Words, string>> = {
     [UI_Words["task-working-caption"]]: "执行中",
     [UI_Words["list-field-empty-caption"]]: "无",
     [UI_Words["add-object-to-list-tooltip"]]: "添加",
+    [UI_Words["text-editor-align-label"]]: "对齐方式",
   },
   en: {
     [UI_Words["submit-task"]]: "Submit",
@@ -28,5 +30,6 @@ export const uiLangRecords: Record<Lang, Record<UI_Words, string>> = {
     [UI_Words["task-working-caption"]]: "Working",
     [UI_Words["list-field-empty-caption"]]: "Empty",
     [UI_Words["add-object-to-list-tooltip"]]: "Add",
+    [UI_Words["text-editor-align-label"]]: "Align",
   },
 };
diff --git a/cfdraw/.web/src/plugins/_react/TextEditorPlugin.tsx b/cfdraw/.web/src/plugins/_react/TextEditorPlugin.tsx
@@ -3,26 +3,35 @@ 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 { Lang, TextAlign, allTextAlign, getRandomHash } from "@carefree0910/core";
 import { langStore, selectingNodesStore, translate, useEditText } from "@carefree0910/business";
 
 import type { IPlugin } from "@/schema/plugins";
+import { UI_Words } from "@/lang/ui";
 import { NodeEditor_Words } from "@/lang/nodeEditor";
+import { CFSrollableSelect, ICFSelect } from "@/components/CFSelect";
 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";
 
+const textAlignDict: Record<TextAlign, Record<Lang, string>> = {
+  left: { zh: "左对齐", en: "Left" },
+  center: { zh: "居中", en: "Center" },
+  right: { zh: "右对齐", en: "Right" },
+  justify: { zh: "两端对齐", en: "Justify" },
+};
+
 const TextEditorPlugin = ({ pluginInfo: { node }, ...props }: IPlugin) => {
   const id = useMemo(() => `textEditor_${getRandomHash()}`, []);
   const lang = langStore.tgt;
   const [content, setContent] = useState("");
   const [fontSize, setFontSize] = useState(0);
 
   const textParams = selectingNodesStore.info.textParams;
-  const { editColor, editContent, editFontSize } = useEditText();
+  const { editColor, editContent, editFontSize, editAlign } = useEditText();
   useEffect(() => {
     if (node?.type === "text") {
       setContent(node.params.content);
@@ -37,10 +46,16 @@ const TextEditorPlugin = ({ pluginInfo: { node }, ...props }: IPlugin) => {
     console.log(">>> onChangeComplete");
     editColor({ trace: true })(color.hex);
   };
+  const onChangeAlign: ICFSelect<TextAlign, false>["onChange"] = (e) => {
+    if (!!e) {
+      editAlign({ trace: true })(e.value);
+    }
+  };
 
   if (node?.type !== "text" || !textParams) return null;
 
   const textColor = textParams.color;
+  const textAlign = textParams.align ?? "left";
 
   return (
     <Render id={id} {...props}>
@@ -69,6 +84,23 @@ const TextEditorPlugin = ({ pluginInfo: { node }, ...props }: IPlugin) => {
           />
         </Flex>
         <CFDivider />
+        <CFSrollableSelect<TextAlign, false>
+          label={translate(UI_Words["text-editor-align-label"], lang)}
+          height="36px"
+          flexProps={{ h: "36px" }}
+          labelProps={{ mx: "6px" }}
+          boxProps={{ flex: 1 }}
+          value={{
+            value: textAlign,
+            label: textAlignDict[textAlign][lang],
+          }}
+          options={allTextAlign.map((align) => ({
+            value: align,
+            label: textAlignDict[align][lang],
+          }))}
+          onChange={onChangeAlign}
+        />
+        <CFDivider />
         <Textarea
           flex={1}
           value={content}