lunanting/lovart3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: allow typing after canvas object tags

Browse Source 
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
1 changed files with 12 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
components/canvas/CanvasChatPanel.tsx
View File

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