feat: remove value option and add ValueSync, add options.reset for asyncOption

stream-pipe · stream-pipe · commit b6a49b3112c5 · 2025-12-23T13:22:49.000+08:00
diff --git a/common/changes/@coze-editor/core-plugins/fix-reset-language_2025-12-19-11-04.json b/common/changes/@coze-editor/core-plugins/fix-reset-language_2025-12-19-11-04.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@coze-editor/core-plugins",
+      "comment": "remove value option and add ValueSync, add options.reset for asyncOption",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@coze-editor/core-plugins",
+  "email": "stream-pipe@users.noreply.github.com"
+}
diff --git a/common/changes/@coze-editor/core/fix-reset-language_2025-12-19-11-04.json b/common/changes/@coze-editor/core/fix-reset-language_2025-12-19-11-04.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@coze-editor/core",
+      "comment": "remove value option and add ValueSync, add options.reset for asyncOption",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@coze-editor/core",
+  "email": "stream-pipe@users.noreply.github.com"
+}
diff --git a/common/changes/@coze-editor/extensions/fix-reset-language_2025-12-19-11-04.json b/common/changes/@coze-editor/extensions/fix-reset-language_2025-12-19-11-04.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@coze-editor/extensions",
+      "comment": "remove value option and add ValueSync, add options.reset for asyncOption",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@coze-editor/extensions",
+  "email": "stream-pipe@users.noreply.github.com"
+}
diff --git a/common/changes/@coze-editor/preset-code-languages/fix-reset-language_2025-12-19-11-04.json b/common/changes/@coze-editor/preset-code-languages/fix-reset-language_2025-12-19-11-04.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@coze-editor/preset-code-languages",
+      "comment": "remove value option and add ValueSync, add options.reset for asyncOption",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@coze-editor/preset-code-languages",
+  "email": "stream-pipe@users.noreply.github.com"
+}
diff --git a/common/changes/@coze-editor/preset-universal/fix-reset-language_2025-12-19-11-04.json b/common/changes/@coze-editor/preset-universal/fix-reset-language_2025-12-19-11-04.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@coze-editor/preset-universal",
+      "comment": "remove value option and add ValueSync, add options.reset for asyncOption",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@coze-editor/preset-universal",
+  "email": "stream-pipe@users.noreply.github.com"
+}
diff --git a/common/changes/@coze-editor/react-components/fix-reset-language_2025-12-19-11-04.json b/common/changes/@coze-editor/react-components/fix-reset-language_2025-12-19-11-04.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@coze-editor/react-components",
+      "comment": "remove value option and add ValueSync, add options.reset for asyncOption",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@coze-editor/react-components",
+  "email": "stream-pipe@users.noreply.github.com"
+}
diff --git a/packages/text-editor/core-plugins/src/option.ts b/packages/text-editor/core-plugins/src/option.ts
@@ -1,15 +1,9 @@
 //  Copyright (c) 2025 coze-dev
 //  SPDX-License-Identifier: MIT
 
-import { FacetCombineStrategy } from '@coze-editor/utils';
 import { placeholder as cmPlaceholder } from '@coze-editor/extension-placeholder';
-import {
-  EditorView,
-  ViewPlugin,
-  type ViewUpdate,
-  lineNumbers as cmLineNumbers,
-} from '@codemirror/view';
-import { EditorState, Facet, Prec } from '@codemirror/state';
+import { EditorView, lineNumbers as cmLineNumbers } from '@codemirror/view';
+import { EditorState, Prec } from '@codemirror/state';
 
 export const fontSize = (value?: number) => {
   if (typeof value === 'undefined') {
@@ -146,32 +140,3 @@ export const lineNumbers = (enable?: boolean) =>
 
 export const lineWrapping = (enable: boolean) =>
   enable ? EditorView.lineWrapping : [];
-
-const valueFacet = Facet.define<string, string>({
-  combine: FacetCombineStrategy.Last,
-});
-export const valueExtension = ViewPlugin.fromClass(
-  class {
-    update(update: ViewUpdate) {
-      const currentValue = update.state.doc.toString();
-      const newValue = update.state.facet(valueFacet);
-
-      if (
-        typeof newValue === 'string' &&
-        newValue &&
-        newValue !== currentValue
-      ) {
-        queueMicrotask(() => {
-          update.view.dispatch({
-            changes: {
-              from: 0,
-              to: currentValue.length,
-              insert: newValue,
-            },
-          });
-        });
-      }
-    }
-  },
-);
-export const value = (v: string) => valueFacet.of(v);
diff --git a/packages/text-editor/core/src/async-option.ts b/packages/text-editor/core/src/async-option.ts
@@ -15,6 +15,7 @@ function last<T>(values: readonly T[]): T {
 function asyncOption<Name extends string, Value>(
   name: Name,
   handler: (value: Value) => Promise<Extension>,
+  options?: { reset?: boolean },
 ): [ExtensionPluginSpec, OptionPluginSpec<Name, Value>] {
   const facet = Facet.define<Value, Value>({
     combine: last,
@@ -36,10 +37,20 @@ function asyncOption<Name extends string, Value>(
 
       apply(view: EditorView) {
         const value = view.state.facet(facet);
+        if (options?.reset === true) {
+          queueMicrotask(() => {
+            view.dispatch({
+              effects: compartment.reconfigure([]),
+            });
+          });
+        }
+
         handler(value).then(ext => {
           if (view.state.facet(facet) === value) {
-            view.dispatch({
-              effects: compartment.reconfigure(ext),
+            queueMicrotask(() => {
+              view.dispatch({
+                effects: compartment.reconfigure(ext),
+              });
             });
           }
         });
diff --git a/packages/text-editor/dev/src/pages/highlight/examples.tsx b/packages/text-editor/dev/src/pages/highlight/examples.tsx
@@ -17,6 +17,7 @@ function App() {
   return (
     <div>
       <h1>Hello World</h1>
+      {/* hello() */}
     </div>
   );
 }
@@ -31,6 +32,7 @@ export default App;
 function App() {
   return (
     <div>
+      {/* hello() */}
       <h1>Hello World</h1>
     </div>
   );
@@ -51,6 +53,7 @@ export default App;
 </head>
 <body>
   <h1>Hello World</h1>
+  <!-- hello() -->
 </body>
 </html>
 `,
@@ -83,7 +86,7 @@ This is a markdown example.
     path: 'a.md',
   },
   {
-    code: 'const a = 1;',
+    code: 'const a = (1);',
     path: 'a.js',
   },
   {
diff --git a/packages/text-editor/dev/src/pages/highlight/index.tsx b/packages/text-editor/dev/src/pages/highlight/index.tsx
@@ -3,18 +3,19 @@ import universalCode from '@coze-editor/editor/preset-universal-code';
 import autoLanguage from '@coze-editor/editor/preset-code-languages';
 import { useState } from 'react';
 import { examples } from './examples';
-import { createEditor } from '@coze-editor/editor/react';
+import { createEditor, ValueSync } from '@coze-editor/editor/react';
 
-const CodeHighlight = createEditor(
-  [...universal, ...universalCode, ...autoLanguage],
-  {
-    defaultOptions: {
-      fontSize: 15,
-      readOnly: true,
-      editable: false,
-    },
-  },
-);
+const CodeHighlight = createEditor([
+  ...universal,
+  ...universalCode,
+  ...autoLanguage,
+], {
+  defaultOptions: {
+    fontSize: 15,
+    readOnly: true,
+    editable: false,
+  }
+})
 
 const HighlightPage = () => {
   const [code, setCode] = useState('const a = 1;');
@@ -46,14 +47,15 @@ const HighlightPage = () => {
           },
         }}
         options={{
-          value: code,
           path: path,
           activeLine: false,
         }}
         didMount={api => {
           console.log('didMount', api);
         }}
-      />
+      >
+        <ValueSync value={code}></ValueSync>
+      </CodeHighlight>
     </div>
   );
 };
diff --git a/packages/text-editor/extensions/src/brackets/colorization.ts b/packages/text-editor/extensions/src/brackets/colorization.ts
@@ -39,7 +39,12 @@ const ColorizationBracketsPlugin = ViewPlugin.fromClass(
       const { doc } = view.state;
       const decorations: any[] = [];
       const stack: { type: string; from: number }[] = [];
-      const limitNodeType = ['Comment', 'String', 'LineComment'];
+      const limitNodeType = [
+        'Comment',
+        'String',
+        'LineComment',
+        'BlockComment',
+      ];
 
       const tree = syntaxTree(view.state);
 
diff --git a/packages/text-editor/preset-code-languages/src/preset.ts b/packages/text-editor/preset-code-languages/src/preset.ts
@@ -3,5 +3,7 @@ import { asyncOption } from '@coze-editor/core';
 import { getLanguage } from './languages';
 
 export const preset = [
-  ...asyncOption('path', async (path: string) => getLanguage(path)),
+  ...asyncOption('path', (path: string) => getLanguage(path), {
+    reset: true,
+  }),
 ];
diff --git a/packages/text-editor/preset-universal/src/index.ts b/packages/text-editor/preset-universal/src/index.ts
@@ -30,8 +30,6 @@ import {
   transformTextInSelection,
   getLineInfoAtPosition,
   getSelection,
-  valueExtension,
-  value,
 } from '@coze-editor/core-plugins';
 import {
   option,
@@ -53,8 +51,6 @@ const preset = [
   option('height', height),
   option('minHeight', minHeight),
   option('maxHeight', maxHeight),
-  extension(valueExtension),
-  option('value', value),
 
   api('getValue', getValue),
   api('setValue', setValue),
diff --git a/packages/text-editor/react-components/src/index.ts b/packages/text-editor/react-components/src/index.ts
@@ -47,3 +47,5 @@ export {
 } from './embeded-line-view';
 
 export { PrefixElement } from './prefix-element';
+
+export { ValueSync } from './value-sync';
diff --git a/packages/text-editor/react-components/src/value-sync.tsx b/packages/text-editor/react-components/src/value-sync.tsx
@@ -0,0 +1,28 @@
+import { useEffect } from 'react';
+
+import { type BuiltinEditorAPI, useEditor } from '@coze-editor/react';
+
+function ValueSync({ value }: { value: string }) {
+  const editor = useEditor<BuiltinEditorAPI | null>();
+
+  useEffect(() => {
+    if (!editor) {
+      return;
+    }
+
+    const { doc } = editor.$view.state;
+    if (typeof value === 'string' && value !== doc.toString()) {
+      editor.$view.dispatch({
+        changes: {
+          from: 0,
+          to: doc.length,
+          insert: value,
+        },
+      });
+    }
+  }, [editor, value]);
+
+  return null;
+}
+
+export { ValueSync };
