fix(editor): sync CodeMirror placeholder on language switch

Wrap the placeholder extension in a Compartment and reconfigure it
when the prop changes, so switching language updates the editor hint
without rebuilding the view.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: ystemsrx

src/editor.tsx

@@ -4,7 +4,7 @@
  */
 import { useEffect, useRef } from "react";
 import { EditorView, basicSetup } from "codemirror";
-import { EditorState } from "@codemirror/state";
+import { Compartment, EditorState } from "@codemirror/state";
 import { placeholder as placeholderExtension } from "@codemirror/view";
 import { sql, PostgreSQL } from "@codemirror/lang-sql";
 import type { ERNodeModel, GraphLike, GraphNodeLike } from "./types";
@@ -29,6 +29,8 @@ export const CodeEditor = ({ value, onChange, placeholder }: CodeEditorProps) =>
     // 把最新的 onChange 装进 ref，避免在外部回调变化时重建 EditorView。
     const onChangeRef = useRef(onChange);
     onChangeRef.current = onChange;
+    // 用 Compartment 包装 placeholder 扩展，便于语言切换时通过 reconfigure 热更新。
+    const placeholderCompartmentRef = useRef(new Compartment());
 
     useEffect(() => {
         if (!hostRef.current) return;
@@ -39,7 +41,9 @@ export const CodeEditor = ({ value, onChange, placeholder }: CodeEditorProps) =>
                 basicSetup,
                 sql({ dialect: PostgreSQL, upperCaseKeywords: false }),
                 EditorView.lineWrapping,
-                placeholderExtension(placeholder ?? ""),
+                placeholderCompartmentRef.current.of(
+                    placeholderExtension(placeholder ?? ""),
+                ),
                 EditorView.updateListener.of((update) => {
                     if (update.docChanged) {
                         onChangeRef.current(update.state.doc.toString());
@@ -54,10 +58,21 @@ export const CodeEditor = ({ value, onChange, placeholder }: CodeEditorProps) =>
             view.destroy();
             viewRef.current = null;
         };
-        // 仅初次挂载初始化；后续 value 变化由下方 effect 同步。placeholder 静态。
+        // 仅初次挂载初始化；后续 value / placeholder 变化由下方 effect 同步。
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
+    // placeholder 变化（如语言切换）时通过 Compartment 热替换扩展，避免重建编辑器。
+    useEffect(() => {
+        const view = viewRef.current;
+        if (!view) return;
+        view.dispatch({
+            effects: placeholderCompartmentRef.current.reconfigure(
+                placeholderExtension(placeholder ?? ""),
+            ),
+        });
+    }, [placeholder]);
+
     // 外部 value 变化时同步进 doc。等值则跳过，避免 dispatch 把光标重置。
     useEffect(() => {
         const view = viewRef.current;