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.
This commit is contained in:
Your Name 2026-02-05 18:28:02 +08:00
parent 9fae58cfd3
commit b33bdc208f

View File

@ -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);