feat(canvas): refine connections, text styles and icon editing

src/components/canvas/plain-text-node.tsx

@@ -1,17 +1,20 @@
 "use client";
 
+import { GripVertical } from "lucide-react";
 import { useContext } from "react";
 import type { NodeProps } from "@xyflow/react";
 import type { CanvasNode } from "@/lib/canvas";
 import { NodeEditing, TransformableNode } from "./transformable-node";
+import { textAppearance } from "./text-appearance";
 import styles from "./canvas.module.css";
 
 export function PlainTextNode(props: NodeProps<CanvasNode>) {
   const editing = useContext(NodeEditing);
   return (
     <TransformableNode {...props}>
+      <span className={styles.textDragHandle} title="拖动移动纯文本" aria-label="拖动移动纯文本"><GripVertical size={14} /></span>
       <textarea className={`${styles.plainText} nodrag nowheel`} aria-label="纯文本" placeholder="写下文字…"
-        style={{ fontSize: props.data.fontSize || 24 }} value={props.data.text} maxLength={100000}
+        style={textAppearance(props.data)} value={props.data.text} maxLength={100000}
         onFocus={editing.begin} onChange={(event) => editing.edit(props.id, event.target.value)} />
     </TransformableNode>
   );