refactor: share canvas mention textarea

src/features/canvas/CanvasTextPromptComposer.tsx

@@ -1,6 +1,6 @@
 import { SendOutlined } from "@ant-design/icons";
-import type { CSSProperties, Dispatch, SetStateAction } from "react";
-import type { CanvasPromptMentionOption, CanvasPromptMentionState } from "./canvasTypes";
+import { useRef, type CSSProperties, type Dispatch, type SetStateAction } from "react";
+import type { CanvasNodeKind, CanvasPromptMentionOption, CanvasPromptMentionState } from "./canvasTypes";
 
 const MENTION_BOUNDARY_RE = /\s|[，。、；：！？?(){}[\]<>]/;
 const EMPTY_MENTION_STYLE: CSSProperties = { opacity: 0.5, pointerEvents: "none" };
@@ -12,11 +12,10 @@ const DEFAULT_MENTION_STATE: CanvasPromptMentionState = {
   activeIndex: 0,
 };
 
-interface CanvasTextPromptComposerProps {
+interface CanvasPromptMentionTextareaProps {
   nodeId: string;
-  prompt: string;
-  canGenerate: boolean;
-  isGenerating: boolean;
+  value: string;
+  placeholder: string;
   mentionOptions: CanvasPromptMentionOption[];
   mentionState?: CanvasPromptMentionState;
   onPromptChange: (nodeId: string, prompt: string) => void;
@@ -26,23 +25,24 @@ interface CanvasTextPromptComposerProps {
     nodeId: string,
     option: CanvasPromptMentionOption,
     textarea: HTMLTextAreaElement | null,
+    kind?: CanvasNodeKind,
   ) => void;
-  onGenerate: (nodeId: string) => void | Promise<void>;
+  mentionKind?: CanvasNodeKind;
 }
 
-export function CanvasTextPromptComposer({
+export function CanvasPromptMentionTextarea({
   nodeId,
-  prompt,
-  canGenerate,
-  isGenerating,
+  value,
+  placeholder,
   mentionOptions,
   mentionState = DEFAULT_MENTION_STATE,
   onPromptChange,
   onMentionStateChange,
   onCloseMention,
   onInsertMention,
-  onGenerate,
-}: CanvasTextPromptComposerProps) {
+  mentionKind,
+}: CanvasPromptMentionTextareaProps) {
+  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
   const filteredMentions = mentionState.open
     ? mentionOptions.filter((option) => !mentionState.query || option.searchText.includes(mentionState.query.toLowerCase()))
     : [];
@@ -88,7 +88,7 @@ export function CanvasTextPromptComposer({
       event.preventDefault();
       const option = filteredMentions[mentionState.activeIndex];
       if (option) {
-        onInsertMention(nodeId, option, event.currentTarget);
+        onInsertMention(nodeId, option, event.currentTarget, mentionKind);
       }
     } else if (event.key === "Escape") {
       event.preventDefault();
@@ -105,48 +105,93 @@ export function CanvasTextPromptComposer({
     });
   };
 
+  return (
+    <div className="studio-canvas-text-composer__input-wrap">
+      <textarea
+        ref={textareaRef}
+        value={value}
+        onMouseDown={(event) => event.stopPropagation()}
+        onChange={handlePromptChange}
+        onKeyDown={handlePromptKeyDown}
+        onSelect={handlePromptSelect}
+        placeholder={placeholder}
+      />
+      {mentionState.open ? (
+        <div className="studio-canvas-mention-panel">
+          {filteredMentions.length > 0 ? filteredMentions.map((option, index) => (
+            <button
+              key={option.token}
+              type="button"
+              className={`studio-canvas-mention-item${index === mentionState.activeIndex ? " is-active" : ""}`}
+              onMouseDown={(event) => {
+                event.preventDefault();
+                onInsertMention(nodeId, option, textareaRef.current, mentionKind);
+              }}
+            >
+              <span className="studio-canvas-mention-thumb">
+                {option.kind === "image" && option.previewUrl ? (
+                  <img src={option.previewUrl} alt="" />
+                ) : option.kind === "image" ? "🖼" : option.kind === "video" ? "🎬" : "📝"}
+              </span>
+              <span className="studio-canvas-mention-label">{option.nodeTitle}</span>
+              <span className="studio-canvas-mention-token">{option.token}</span>
+            </button>
+          )) : (
+            <div className="studio-canvas-mention-item" style={EMPTY_MENTION_STYLE}>
+              <span className="studio-canvas-mention-label">没有可引用的连接节点</span>
+            </div>
+          )}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+interface CanvasTextPromptComposerProps {
+  nodeId: string;
+  prompt: string;
+  canGenerate: boolean;
+  isGenerating: boolean;
+  mentionOptions: CanvasPromptMentionOption[];
+  mentionState?: CanvasPromptMentionState;
+  onPromptChange: (nodeId: string, prompt: string) => void;
+  onMentionStateChange: Dispatch<SetStateAction<Record<string, CanvasPromptMentionState>>>;
+  onCloseMention: (nodeId: string) => void;
+  onInsertMention: (
+    nodeId: string,
+    option: CanvasPromptMentionOption,
+    textarea: HTMLTextAreaElement | null,
+    kind?: CanvasNodeKind,
+  ) => void;
+  onGenerate: (nodeId: string) => void | Promise<void>;
+}
+
+export function CanvasTextPromptComposer({
+  nodeId,
+  prompt,
+  canGenerate,
+  isGenerating,
+  mentionOptions,
+  mentionState,
+  onPromptChange,
+  onMentionStateChange,
+  onCloseMention,
+  onInsertMention,
+  onGenerate,
+}: CanvasTextPromptComposerProps) {
   return (
     <div className="studio-canvas-text-composer">
-      <div className="studio-canvas-text-composer__input-wrap">
-        <textarea
-          value={prompt}
-          onMouseDown={(event) => event.stopPropagation()}
-          onChange={handlePromptChange}
-          onKeyDown={handlePromptKeyDown}
-          onSelect={handlePromptSelect}
-          placeholder="写下你想讲的故事、场景或角色设定。@引用连接的节点"
-        />
-        {mentionState.open ? (
-          <div className="studio-canvas-mention-panel">
-            {filteredMentions.length > 0 ? filteredMentions.map((option, index) => (
-              <button
-                key={option.token}
-                type="button"
-                className={`studio-canvas-mention-item${index === mentionState.activeIndex ? " is-active" : ""}`}
-                onMouseDown={(event) => {
-                  event.preventDefault();
-                  const textarea = event.currentTarget
-                    .closest(".studio-canvas-text-composer")
-                    ?.querySelector("textarea") ?? null;
-                  onInsertMention(nodeId, option, textarea);
-                }}
-              >
-                <span className="studio-canvas-mention-thumb">
-                  {option.kind === "image" && option.previewUrl ? (
-                    <img src={option.previewUrl} alt="" />
-                  ) : option.kind === "image" ? "🖼" : option.kind === "video" ? "🎬" : "📝"}
-                </span>
-                <span className="studio-canvas-mention-label">{option.nodeTitle}</span>
-                <span className="studio-canvas-mention-token">{option.token}</span>
-              </button>
-            )) : (
-              <div className="studio-canvas-mention-item" style={EMPTY_MENTION_STYLE}>
-                <span className="studio-canvas-mention-label">没有可引用的连接节点</span>
-              </div>
-            )}
-          </div>
-        ) : null}
-      </div>
+      <CanvasPromptMentionTextarea
+        nodeId={nodeId}
+        value={prompt}
+        placeholder="写下你想讲的故事、场景或角色设定。@引用连接的节点"
+        mentionOptions={mentionOptions}
+        mentionState={mentionState}
+        onPromptChange={onPromptChange}
+        onMentionStateChange={onMentionStateChange}
+        onCloseMention={onCloseMention}
+        onInsertMention={onInsertMention}
+      />
       <div className="studio-canvas-text-composer__footer">
         <button
           type="button"