From 373229a04ae3998f080e02ea1652c2d071e4b2fd Mon Sep 17 00:00:00 2001
From: HouYunFei <1844025705@qq.com>
Date: Mon, 8 Jun 2026 15:11:16 +0800
Subject: [PATCH] fix(canvas): resolve text node editing issues and improve
 textarea rendering

---
 CHANGELOG.md                                  |  1 +
 docs/content/docs/progress/pending-test.mdx   |  1 +
 .../(user)/canvas/components/canvas-node.tsx  | 12 ++++---
 .../canvas-resource-mention-textarea.tsx      | 36 +++++++++++++++----
 4 files changed, 40 insertions(+), 10 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index dc95362..57a2833 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,7 @@
 
 + [新增] 新增图片切图功能。
 + [新增] 支持webdav同步数据。
++ [修复] 修复画布文字节点错误问题。
 
 ## v0.2.4 - 2026-06-04
 
diff --git a/docs/content/docs/progress/pending-test.mdx b/docs/content/docs/progress/pending-test.mdx
index f1a3adb..49b2d93 100644
--- a/docs/content/docs/progress/pending-test.mdx
+++ b/docs/content/docs/progress/pending-test.mdx
@@ -5,6 +5,7 @@ description: 当前版本已实现但仍需人工验证的变更项
 
 # 待测试
 
+- 修复画布文字节点编辑时双击进入编辑、全选文本出现重影和错位的问题；文字节点内容编辑框改为使用原生 textarea 文本渲染，仍保留 `@` 资源候选插入，需要验证编辑态选区、展示态文字换行和右上角“生图”按钮避让都正常。
 - 配置弹窗新增 WebDAV 同步配置，可填写 WebDAV 地址、远程目录、用户名和密码/应用密码，并选择“前端直连”或“Next.js 转发”；远端会按 `canvas/`、`assets/`、`image-workbench/`、`video-workbench/` 四个业务目录分别写入 `manifest.json` 清单和 `files/` 媒体目录，会合并画布项目、我的素材、生图/视频生成记录和引用到的本地媒体文件，四个业务分区会并发同步，并在同步中显示读取远端、检查媒体、上传新增媒体、上传清单等阶段和文件计数进度条；WebDAV 请求会做超时提示，目录已存在但 `MKCOL` 返回 `423 Locked` 时会复查目录存在后继续同步，需要在支持 CORS 的 NAS/WebDAV 服务和不支持 CORS 的 Koofr 转发模式下验证首次上传、第二台设备拉取合并、再次同步和认证失败提示。
 - 图片节点悬浮工具栏新增“切图”入口；点击后可输入行数和列数，预览切分网格，并在确认后把原图切成对应数量的图片子节点，按原图网格排列到画布右侧且自动与原图连线。
 - 画布生成配置节点的“生成配置/组装提示词”改为在节点下方打开独立输入浮层；浮层支持输入 `@` 从已连接图片、文本、视频、音频中选择引用，引用会以图片缩略图或文本标记展示，图片引用可放大预览；生成时再按当前引用解析为实际素材编号，不再提供或读取输入排序。
diff --git a/web/src/app/(user)/canvas/components/canvas-node.tsx b/web/src/app/(user)/canvas/components/canvas-node.tsx
index 722af7c..0fd9cd8 100644
--- a/web/src/app/(user)/canvas/components/canvas-node.tsx
+++ b/web/src/app/(user)/canvas/components/canvas-node.tsx
@@ -391,6 +391,9 @@ function UnknownNodeContent({ theme }: Pick<NodeContentRendererProps, "theme">)
 }
 
 function TextContent({ node, theme, isEditingContent, textareaRef, mentionReferences, onContentChange, onStopEditing, onGenerateImage }: NodeContentRendererProps) {
+    const fontSize = node.metadata?.fontSize || 14;
+    const textStyle = { fontSize: `${fontSize}px`, lineHeight: `${Math.round(fontSize * 1.65)}px`, color: theme.node.text, boxSizing: "border-box" } as React.CSSProperties;
+
     return (
         <div className="flex h-full w-full flex-col overflow-hidden pt-8">
             <button
@@ -412,10 +415,11 @@ function TextContent({ node, theme, isEditingContent, textareaRef, mentionRefere
             {isEditingContent ? (
                 <CanvasResourceMentionTextarea
                     ref={textareaRef}
-                    className="thin-scrollbar block h-full w-full resize-none overflow-y-auto whitespace-pre-wrap break-words border-none bg-transparent pl-4 pr-14 pt-0 pb-4 m-0 font-mono leading-relaxed outline-none select-text appearance-none"
-                    style={{ fontSize: `${node.metadata?.fontSize || 14}px`, color: theme.node.text }}
+                    className="thin-scrollbar block h-full w-full resize-none overflow-y-auto whitespace-pre-wrap break-words border-none bg-transparent pl-4 pr-14 pt-0 pb-4 m-0 font-mono outline-none select-text appearance-none"
+                    style={textStyle}
                     value={node.metadata?.content || ""}
                     references={mentionReferences}
+                    highlightLabels={false}
                     onChange={(value) => onContentChange(node.id, value)}
                     onBlur={onStopEditing}
                     onKeyDown={(event) => {
@@ -427,8 +431,8 @@ function TextContent({ node, theme, isEditingContent, textareaRef, mentionRefere
                 />
             ) : (
                 <div
-                    className="thin-scrollbar block h-full w-full overflow-y-auto whitespace-pre-wrap break-words bg-transparent pl-4 pr-14 pt-0 pb-4 font-mono leading-relaxed"
-                    style={{ fontSize: `${node.metadata?.fontSize || 14}px`, color: theme.node.text }}
+                    className="thin-scrollbar block h-full w-full overflow-y-auto whitespace-pre-wrap break-words bg-transparent pl-4 pr-14 pt-0 pb-4 font-mono"
+                    style={textStyle}
                     onWheel={(event) => event.stopPropagation()}
                 >
                     {node.metadata?.content || <span style={{ color: theme.node.placeholder }}>双击编辑文字</span>}
diff --git a/web/src/app/(user)/canvas/components/canvas-resource-mention-textarea.tsx b/web/src/app/(user)/canvas/components/canvas-resource-mention-textarea.tsx
index 3289948..3b13088 100644
--- a/web/src/app/(user)/canvas/components/canvas-resource-mention-textarea.tsx
+++ b/web/src/app/(user)/canvas/components/canvas-resource-mention-textarea.tsx
@@ -20,14 +20,16 @@ type Props = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange" | "val
     onChange: (value: string) => void;
     onSubmit?: () => void;
     containerClassName?: string;
+    highlightLabels?: boolean;
 };
 
-export const CanvasResourceMentionTextarea = forwardRef<HTMLTextAreaElement, Props>(function CanvasResourceMentionTextarea({ value, references, onChange, onSubmit, onKeyDown, className, containerClassName, style, ...props }, forwardedRef) {
+export const CanvasResourceMentionTextarea = forwardRef<HTMLTextAreaElement, Props>(function CanvasResourceMentionTextarea({ value, references, onChange, onSubmit, onKeyDown, className, containerClassName, style, highlightLabels = true, ...props }, forwardedRef) {
     const theme = canvasThemes[useThemeStore((state) => state.theme)];
     const textareaRef = useRef<HTMLTextAreaElement | null>(null);
     const overlayRef = useRef<HTMLDivElement | null>(null);
     const [mention, setMention] = useState<MentionState | null>(null);
     const [activeIndex, setActiveIndex] = useState(0);
+    const [hasSelection, setHasSelection] = useState(false);
     const candidates = useMemo(() => {
         if (!mention) return [];
         const query = mention.query.trim().toLowerCase();
@@ -35,7 +37,7 @@ export const CanvasResourceMentionTextarea = forwardRef<HTMLTextAreaElement, Pro
         if (!query) return activeReferences;
         return activeReferences.filter((item) => `${item.label} ${item.title} ${item.kind} ${item.text || ""}`.toLowerCase().includes(query));
     }, [mention, references]);
-    const activeLabels = useMemo(() => Array.from(new Set(references.filter((item) => item.active).map((item) => item.label))).sort((a, b) => b.length - a.length), [references]);
+    const activeLabels = useMemo(() => (highlightLabels ? Array.from(new Set(references.filter((item) => item.active).map((item) => item.label))).sort((a, b) => b.length - a.length) : []), [highlightLabels, references]);
 
     const updateValue = (next: string, selectionStart?: number) => {
         onChange(next);
@@ -78,17 +80,23 @@ export const CanvasResourceMentionTextarea = forwardRef<HTMLTextAreaElement, Pro
         overlayRef.current.scrollLeft = textareaRef.current.scrollLeft;
     };
 
+    const updateSelectionState = () => {
+        const textarea = textareaRef.current;
+        setHasSelection(Boolean(textarea && textarea.selectionStart !== textarea.selectionEnd));
+    };
+
+    const showOverlay = Boolean(activeLabels.length && !hasSelection);
     const mergedStyle = {
         ...(style || {}),
-        color: activeLabels.length ? "transparent" : style?.color,
+        color: showOverlay ? "transparent" : style?.color,
         caretColor: style?.color || theme.node.text,
-        ...(activeLabels.length ? { background: "transparent", backgroundColor: "transparent" } : {}),
+        ...(showOverlay ? { background: "transparent", backgroundColor: "transparent" } : {}),
     } as CSSProperties;
     const menu = mention && candidates.length && textareaRef.current ? <MentionMenu textarea={textareaRef.current} references={candidates} activeIndex={Math.min(activeIndex, candidates.length - 1)} theme={theme} onSelect={insertReference} /> : null;
 
     return (
         <div className={`relative h-full w-full ${containerClassName || ""}`}>
-            {activeLabels.length ? (
+            {showOverlay ? (
                 <div ref={overlayRef} className={`${className || ""} pointer-events-none absolute inset-0 overflow-hidden whitespace-pre-wrap break-words`} style={{ ...style, color: theme.node.text }}>
                     <MentionHighlightText value={value || props.placeholder?.toString() || ""} labels={activeLabels} placeholder={!value} />
                 </div>
@@ -107,7 +115,22 @@ export const CanvasResourceMentionTextarea = forwardRef<HTMLTextAreaElement, Pro
                     const next = event.target.value;
                     onChange(next);
                     syncMention(next, event.target.selectionStart);
-                    requestAnimationFrame(syncOverlayScroll);
+                    requestAnimationFrame(() => {
+                        syncOverlayScroll();
+                        updateSelectionState();
+                    });
+                }}
+                onSelect={(event) => {
+                    updateSelectionState();
+                    props.onSelect?.(event);
+                }}
+                onKeyUp={(event) => {
+                    updateSelectionState();
+                    props.onKeyUp?.(event);
+                }}
+                onPointerUp={(event) => {
+                    updateSelectionState();
+                    props.onPointerUp?.(event);
                 }}
                 onKeyDown={(event) => {
                     if (mention && candidates.length) {
@@ -144,6 +167,7 @@ export const CanvasResourceMentionTextarea = forwardRef<HTMLTextAreaElement, Pro
                     props.onScroll?.(event);
                 }}
                 onBlur={(event) => {
+                    setHasSelection(false);
                     window.setTimeout(closeMention, 120);
                     props.onBlur?.(event);
                 }}