From b33bdc208fb3670f4582311d0508d7fc7c8f0b83 Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Thu, 5 Feb 2026 18:28:02 +0800
Subject: [PATCH] fix: allow typing after canvas object tags

Insert a zero-width space after image and picked-object tags so the cursor can move past the tag and accept text.
---
 components/canvas/CanvasChatPanel.tsx | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/components/canvas/CanvasChatPanel.tsx b/components/canvas/CanvasChatPanel.tsx
index 13cbc15..8e5ba3a 100644
--- a/components/canvas/CanvasChatPanel.tsx
+++ b/components/canvas/CanvasChatPanel.tsx
@@ -227,18 +227,21 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
       <span class="text-xs text-foreground/80">${shortName}</span>
     `;
     
-    // 在光标位置插入，或添加到末尾
+    // 在光标位置插入，或添加到末尾，并在标签后插入一个零宽空格，方便光标落在标签后继续输入
     const selection = window.getSelection();
     if (selection && selection.rangeCount > 0 && editableDiv.contains(selection.anchorNode)) {
       const range = selection.getRangeAt(0);
       range.deleteContents();
+      const spaceNode = document.createTextNode("\u200b");
+      range.insertNode(spaceNode);
       range.insertNode(tagSpan);
-      range.setStartAfter(tagSpan);
-      range.setEndAfter(tagSpan);
+      range.setStartAfter(spaceNode);
+      range.setEndAfter(spaceNode);
       selection.removeAllRanges();
       selection.addRange(range);
     } else {
       editableDiv.appendChild(tagSpan);
+      editableDiv.appendChild(document.createTextNode("\u200b"));
     }
     
     console.log('[CanvasChat] 已插入图片标签:', url.substring(0, 50));
@@ -281,18 +284,21 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
       <span class="text-xs text-foreground/70">${objectPosition}</span>
     `;
     
-    // 在光标位置插入，或添加到末尾
+    // 在光标位置插入，或添加到末尾，并在标签后插入一个零宽空格，方便光标落在标签后继续输入
     const selection = window.getSelection();
     if (selection && selection.rangeCount > 0 && editableDiv.contains(selection.anchorNode)) {
       const range = selection.getRangeAt(0);
       range.deleteContents();
+      const spaceNode = document.createTextNode("\u200b");
+      range.insertNode(spaceNode);
       range.insertNode(tagSpan);
-      range.setStartAfter(tagSpan);
-      range.setEndAfter(tagSpan);
+      range.setStartAfter(spaceNode);
+      range.setEndAfter(spaceNode);
       selection.removeAllRanges();
       selection.addRange(range);
     } else {
       editableDiv.appendChild(tagSpan);
+      editableDiv.appendChild(document.createTextNode("\u200b"));
     }
     
     console.log('[CanvasChat] 已插入物品标签:', objectName, objectPosition);