feat(editor): add editor.refreshDrawSelection()

common/changes/@coze-editor/preset-chat/feature-add-refresh-draw-selection_2026-07-15-09-30.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@coze-editor/preset-chat",
+      "comment": "add editor.refreshDrawSelection",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@coze-editor/preset-chat",
+  "email": "stream-pipe@users.noreply.github.com"
+}

packages/text-editor/dev/src/index.tsx

@@ -1,5 +1,5 @@
 import { createRoot } from 'react-dom/client';
-import Page from './pages/prefix';
+import Page from './pages/chat';
 import './index.css';
 
 createRoot(document.getElementById('app')!).render(<Page />);

packages/text-editor/dev/src/pages/chat/elements.tsx

@@ -1,7 +1,7 @@
 import { EditorAPI, useCurrentElement } from '@coze-editor/editor/preset-chat';
 import { useEditor } from '@coze-editor/editor/react';
 import { Popover } from '@douyinfe/semi-ui';
-import { SVGProps, useContext } from 'react';
+import { SVGProps, useContext, useEffect } from 'react';
 import { UploadingContext } from './upload';
 
 function GravityUiCode(props: SVGProps<SVGSVGElement>) {
@@ -117,7 +117,15 @@ function LineMdUploadingLoop(props: SVGProps<SVGSVGElement>) {
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function UploadFile({ filename, array }: { filename: string; array: any[] }) {
   const uploading = useContext(UploadingContext)
+  const editor = useEditor<EditorAPI | null>();
   console.log('array', array)
+
+  useEffect(() => {
+    if (uploading === false) {
+      editor?.refreshDrawSelection();
+    }
+  }, [uploading])
+
   return <span
     className="inline-block items-center border border-solid border-gray-200 rounded-[3px] px-[5px] py-0 mx-[3px] select-none text-xs"
   >

packages/text-editor/dev/src/pages/chat/index.tsx

@@ -1,7 +1,7 @@
 import preset, { schemaUtils, type EditorAPI } from '@coze-editor/editor/preset-chat'
 import { type EditorAPI as CodeEditorAPI } from '@coze-editor/editor/preset-code'
 import { EditorProvider, PositionMirror, Renderer, useEditor, useMouseSelectionPopup } from '@coze-editor/editor/react'
-import { EditorView } from '@codemirror/view'
+import { drawSelection, EditorView } from '@codemirror/view'
 import { useRef, useState } from 'react'
 import { Extension } from '@codemirror/state';
 import { astDebugger } from '@coze-editor/editor';
@@ -15,6 +15,7 @@ import { UploadContext, UploadFile } from './upload'
 const extensions: Extension[] = [
   astDebugger,
   EditorView.lineWrapping,
+  drawSelection(),
 ];
 
 const defaultValue = schemaUtils.fromJSON([

packages/text-editor/dev/src/pages/chat/upload.tsx

@@ -20,7 +20,7 @@ function UploadFile() {
     editor.insertElement({
       tagName: 'upload',
       attributes: {
-        filename: 'my.pdf',
+        filename: 'myloooooooooooooooongpdf.pdf',
         array: [
           { foo: 1 },
           true,
@@ -29,6 +29,8 @@ function UploadFile() {
       },
     })
 
+    editor.focus()
+
     await delay(2000)
 
     setUploading(false)

packages/text-editor/preset-chat/src/plugins.ts

@@ -47,6 +47,16 @@ function insertElement({ view }: { view: EditorView }) {
   };
 }
 
+// 如果用了 drawSelection 且 widget 内的 React 组件宽度发生变化，光标位置会异常
+// 原因：drawSelection 感知不到 react 组件渲染导致的光标位置变化，需手动通知
+function refreshDrawSelection({ view }: { view: EditorView }) {
+  return () => {
+    view.dispatch({
+      selection: view.state.selection,
+    });
+  };
+}
+
 const plugins = [
   extension([
     focusedField,
@@ -60,6 +70,7 @@ const plugins = [
     chatExtension(),
   ]),
   api('insertElement', insertElement),
+  api('refreshDrawSelection', refreshDrawSelection),
   option('elements', (elements: ElementsDefinition) =>
     elementsFacet.of(elements),
   ),