修复 在受控组件中直接使用contentEditable 报错问题

components/ui/main-editor/HighlightText.tsx

@@ -17,13 +17,25 @@ interface HighlightTextOptions {
 }
 
 export function HighlightText(props: ReactNodeViewProps) {
-  const { text, color } = props.node.attrs as HighlightTextAttributes
+  const { text: initialText, color } = props.node.attrs as HighlightTextAttributes
+  const [text, setText] = useState(initialText)
+
+  const handleInput = (e: React.FormEvent<HTMLSpanElement>) => {
+    const newText = e.currentTarget.textContent || ''
+    setText(newText)
+    // 通知Tiptap更新内容
+    props.updateAttributes({
+      text: newText
+    })
+  }
 
   return (
     <NodeViewWrapper
       as="span"
       data-alt="highlight-text"
       contentEditable={true}
+      suppressContentEditableWarning={true}
+      onInput={handleInput}
       className={`relative inline text-${color}-400 hover:text-${color}-300 transition-colors duration-200`}
     >
       {text}