refactor: share canvas mention textarea

src/features/canvas/CanvasPage.tsx

@@ -186,7 +186,7 @@ import {
 } from "./canvasWorkflowDeserialize";
 import { CanvasNodeToolbar, CanvasNodeVideoPlayer, CanvasSelectChip } from "./canvasComponents";
 import type { CanvasNodeToolbarAction } from "./canvasComponents";
-import { CanvasTextPromptComposer } from "./CanvasTextPromptComposer";
+import { CanvasPromptMentionTextarea, CanvasTextPromptComposer } from "./CanvasTextPromptComposer";
 import { CanvasMultiGridPanel, CanvasUpscalePanel, CanvasInpaintPanel } from "./canvasToolPanels";
 import { CanvasSmoothedProgressRing } from "./CanvasSmoothedProgressRing";
 
@@ -198,7 +198,6 @@ const canvasEnterpriseVideoModelOptions: CanvasOption[] = ENTERPRISE_VIDEO_MODEL
 // --- Canvas generation keep-alive (survives page refresh / view switch) ---
 
 const MENTION_TOKEN_RE = /@(?:图片|视频|文本)\d+/g;
-const MENTION_BOUNDARY_RE = /\s|[，。、；：！？?(){}[\]<>]/;
 
 function buildNodeMentionOptions(
   kind: CanvasNodeKind,
@@ -4434,38 +4433,7 @@ function CanvasPage({
                     </button>
                   </div>
                 ) : null}
-                {imageNodeActive && !isCanvasNodeMoving && !imageNodeFocusActive ? (() => {
-                  const imgMentionOptions = buildNodeMentionOptions("image", imageNode.id, imageNodes, videoNodes, textNodes, getIncomingCanvasPorts, manualLinks);
-                  const imgMentionState = textNodeMentionStates[imageNode.id] || { open: false, query: "", start: 0, caret: 0, activeIndex: 0 };
-                  const imgFilteredMentions = imgMentionState.open
-                    ? imgMentionOptions.filter((o) => !imgMentionState.query || o.searchText.includes(imgMentionState.query.toLowerCase()))
-                    : [];
-
-                  const handleImagePromptChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-                    const value = e.target.value;
-                    const caret = e.target.selectionStart || 0;
-                    updateImageNodePrompt(imageNode.id, value);
-                    const beforeCaret = value.slice(0, caret);
-                    const atIdx = beforeCaret.lastIndexOf("@");
-                    if (atIdx >= 0) {
-                      const query = beforeCaret.slice(atIdx + 1);
-                      if (!MENTION_BOUNDARY_RE.test(query) && !query.includes(" ")) {
-                        setTextNodeMentionStates((prev) => ({ ...prev, [imageNode.id]: { open: true, query, start: atIdx, caret, activeIndex: 0 } }));
-                        return;
-                      }
-                    }
-                    closeTextNodeMention(imageNode.id);
-                  };
-
-                  const handleImagePromptKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-                    if (!imgMentionState.open || imgFilteredMentions.length === 0) return;
-                    if (e.key === "ArrowDown") { e.preventDefault(); setTextNodeMentionStates((prev) => ({ ...prev, [imageNode.id]: { ...imgMentionState, activeIndex: (imgMentionState.activeIndex + 1) % imgFilteredMentions.length } })); }
-                    else if (e.key === "ArrowUp") { e.preventDefault(); setTextNodeMentionStates((prev) => ({ ...prev, [imageNode.id]: { ...imgMentionState, activeIndex: (imgMentionState.activeIndex - 1 + imgFilteredMentions.length) % imgFilteredMentions.length } })); }
-                    else if (e.key === "Enter" || e.key === "Tab") { e.preventDefault(); const opt = imgFilteredMentions[imgMentionState.activeIndex]; if (opt) insertTextNodeMention(imageNode.id, opt, e.currentTarget, "image"); }
-                    else if (e.key === "Escape") { e.preventDefault(); closeTextNodeMention(imageNode.id); }
-                  };
-
-                  return (
+                {imageNodeActive && !isCanvasNodeMoving && !imageNodeFocusActive ? (
                 <div className="studio-canvas-image-composer">
                   <div className="studio-canvas-image-composer__tools">
                     <button
@@ -4586,28 +4554,18 @@ function CanvasPage({
                     </button>
                     <button type="button" className="studio-canvas-image-composer__expand" aria-label="展开">↗</button>
                   </div>
-                  <div className="studio-canvas-text-composer__input-wrap">
-                  <textarea
+                  <CanvasPromptMentionTextarea
+                    nodeId={imageNode.id}
                     value={imageNode.prompt}
-                    onMouseDown={(event) => event.stopPropagation()}
-                    onChange={handleImagePromptChange}
-                    onKeyDown={handleImagePromptKeyDown}
                     placeholder="描述你想要生成的画面内容，按/呼出指令，@引用素材"
+                    mentionOptions={buildNodeMentionOptions("image", imageNode.id, imageNodes, videoNodes, textNodes, getIncomingCanvasPorts, manualLinks)}
+                    mentionState={textNodeMentionStates[imageNode.id]}
+                    mentionKind="image"
+                    onPromptChange={updateImageNodePrompt}
+                    onMentionStateChange={setTextNodeMentionStates}
+                    onCloseMention={closeTextNodeMention}
+                    onInsertMention={insertTextNodeMention}
                   />
-                  {imgMentionState.open && (
-                    <div className="studio-canvas-mention-panel">
-                      {imgFilteredMentions.length > 0 ? imgFilteredMentions.map((opt, idx) => (
-                        <button key={opt.token} type="button" className={`studio-canvas-mention-item${idx === imgMentionState.activeIndex ? " is-active" : ""}`} onMouseDown={(e) => { e.preventDefault(); insertTextNodeMention(imageNode.id, opt, e.currentTarget.closest(".studio-canvas-image-composer")?.querySelector("textarea") || null, "image"); }}>
-                          <span className="studio-canvas-mention-thumb">{opt.kind === "image" && opt.previewUrl ? <img src={opt.previewUrl} alt="" /> : opt.kind === "image" ? "🖼" : opt.kind === "video" ? "🎬" : "📝"}</span>
-                          <span className="studio-canvas-mention-label">{opt.nodeTitle}</span>
-                          <span className="studio-canvas-mention-token">{opt.token}</span>
-                        </button>
-                      )) : (
-                        <div className="studio-canvas-mention-item" style={{ opacity: 0.5, pointerEvents: "none" }}><span className="studio-canvas-mention-label">没有可引用的连接节点</span></div>
-                      )}
-                    </div>
-                  )}
-                  </div>
                   <div className="studio-canvas-image-composer__footer">
                     <CanvasSelectChip
                       ariaLabel="选择生图模型"
@@ -4675,7 +4633,7 @@ function CanvasPage({
                     </button>
                   </div>
                 </div>
-                ); })() : null}
+                ) : null}
               </div>
             </div>
             );
@@ -4830,38 +4788,7 @@ function CanvasPage({
                     onMouseDown={(event) => handleNodeResizeStart(event, "video", videoNode.id, videoNode.size)}
                   />
                 </div>
-                {videoNodeActive && !isCanvasNodeMoving ? (() => {
-                  const vidMentionOptions = buildNodeMentionOptions("video", videoNode.id, imageNodes, videoNodes, textNodes, getIncomingCanvasPorts, manualLinks);
-                  const vidMentionState = textNodeMentionStates[videoNode.id] || { open: false, query: "", start: 0, caret: 0, activeIndex: 0 };
-                  const vidFilteredMentions = vidMentionState.open
-                    ? vidMentionOptions.filter((o) => !vidMentionState.query || o.searchText.includes(vidMentionState.query.toLowerCase()))
-                    : [];
-
-                  const handleVideoPromptChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-                    const value = e.target.value;
-                    const caret = e.target.selectionStart || 0;
-                    updateVideoNodePrompt(videoNode.id, value);
-                    const beforeCaret = value.slice(0, caret);
-                    const atIdx = beforeCaret.lastIndexOf("@");
-                    if (atIdx >= 0) {
-                      const query = beforeCaret.slice(atIdx + 1);
-                      if (!MENTION_BOUNDARY_RE.test(query) && !query.includes(" ")) {
-                        setTextNodeMentionStates((prev) => ({ ...prev, [videoNode.id]: { open: true, query, start: atIdx, caret, activeIndex: 0 } }));
-                        return;
-                      }
-                    }
-                    closeTextNodeMention(videoNode.id);
-                  };
-
-                  const handleVideoPromptKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-                    if (!vidMentionState.open || vidFilteredMentions.length === 0) return;
-                    if (e.key === "ArrowDown") { e.preventDefault(); setTextNodeMentionStates((prev) => ({ ...prev, [videoNode.id]: { ...vidMentionState, activeIndex: (vidMentionState.activeIndex + 1) % vidFilteredMentions.length } })); }
-                    else if (e.key === "ArrowUp") { e.preventDefault(); setTextNodeMentionStates((prev) => ({ ...prev, [videoNode.id]: { ...vidMentionState, activeIndex: (vidMentionState.activeIndex - 1 + vidFilteredMentions.length) % vidFilteredMentions.length } })); }
-                    else if (e.key === "Enter" || e.key === "Tab") { e.preventDefault(); const opt = vidFilteredMentions[vidMentionState.activeIndex]; if (opt) insertTextNodeMention(videoNode.id, opt, e.currentTarget, "video"); }
-                    else if (e.key === "Escape") { e.preventDefault(); closeTextNodeMention(videoNode.id); }
-                  };
-
-                  return (
+                {videoNodeActive && !isCanvasNodeMoving ? (
                 <div className="studio-canvas-video-composer">
                   <div className="studio-canvas-video-composer__tabs studio-canvas-video-composer__mode-tabs">
                     <button
@@ -4983,37 +4910,18 @@ function CanvasPage({
                     <button type="button">角色库</button>
                     <button type="button" className="is-active">文本</button>
                   </div>
-                  <div className="studio-canvas-text-composer__input-wrap">
-                  <textarea
+                  <CanvasPromptMentionTextarea
+                    nodeId={videoNode.id}
                     value={videoNode.prompt}
-                    onMouseDown={(event) => event.stopPropagation()}
-                    onChange={handleVideoPromptChange}
-                    onKeyDown={handleVideoPromptKeyDown}
                     placeholder="根据文字描述生成视频。"
+                    mentionOptions={buildNodeMentionOptions("video", videoNode.id, imageNodes, videoNodes, textNodes, getIncomingCanvasPorts, manualLinks)}
+                    mentionState={textNodeMentionStates[videoNode.id]}
+                    mentionKind="video"
+                    onPromptChange={updateVideoNodePrompt}
+                    onMentionStateChange={setTextNodeMentionStates}
+                    onCloseMention={closeTextNodeMention}
+                    onInsertMention={insertTextNodeMention}
                   />
-                  {vidMentionState.open ? (
-                    <div className="studio-canvas-mention-panel">
-                      {vidFilteredMentions.length > 0 ? vidFilteredMentions.map((opt, idx) => (
-                        <button
-                          key={opt.token}
-                          type="button"
-                          className={`studio-canvas-mention-item${idx === vidMentionState.activeIndex ? " is-active" : ""}`}
-                          onMouseDown={(ev) => { ev.preventDefault(); insertTextNodeMention(videoNode.id, opt, ev.currentTarget.closest(".studio-canvas-text-composer__input-wrap")?.querySelector("textarea")!, "video"); }}
-                        >
-                          <span className={`studio-canvas-mention-icon studio-canvas-mention-icon--${opt.kind}`}>
-                            {opt.kind === "image" ? "🖼" : opt.kind === "video" ? "🎬" : "📝"}
-                          </span>
-                          <span className="studio-canvas-mention-label">{opt.nodeTitle}</span>
-                          <span className="studio-canvas-mention-token">{opt.token}</span>
-                        </button>
-                      )) : (
-                        <div className="studio-canvas-mention-item" style={{ opacity: 0.5, pointerEvents: "none" }}>
-                          <span className="studio-canvas-mention-label">没有可引用的连接节点</span>
-                        </div>
-                      )}
-                    </div>
-                  ) : null}
-                  </div>
                   <div className="studio-canvas-video-composer__footer studio-canvas-video-composer__settings">
                     <CanvasSelectChip
                       ariaLabel="选择视频模型"
@@ -5097,7 +5005,7 @@ function CanvasPage({
                     </button>
                   </div>
                 </div>
-                ); })() : null}
+                ) : null}
               </div>
             </div>
             );