修复富文本编辑 删除报错问题

app/service/adapter/textToShot.ts

@@ -312,15 +312,17 @@ export class TextToShotAdapter {
   public static fromRoleToText(paragraphs: Paragraph[]): string {
     let text = '';
     paragraphs.forEach(paragraph => {
-      paragraph.content.forEach(node => {
-        if (node.type === 'highlightText') {
-          text += node.attrs.text;
-        } else if (node.type === 'text') {
-          text += node.text;
-        } else if (node.type === 'characterToken') {
-          text += node.attrs.name;
-        }
-      });
+      if (paragraph?.content) {
+        paragraph.content.forEach(node => {
+          if (node.type === 'highlightText') {
+            text += node.attrs.text;
+          } else if (node.type === 'text') {
+            text += node.text;
+          } else if (node.type === 'characterToken') {
+            text += node.attrs.name;
+          }
+        });
+      }
     });
     return text;
   }

components/ui/main-editor/MainEditor.tsx

@@ -13,35 +13,84 @@ export default function MainEditor({ content, onChangeContent }: MainEditorProps
   const [renderContent, setRenderContent] = useState<any[]>(content);
 
   useEffect(() => {
-    onChangeContent?.(renderContent);;
+    onChangeContent?.(renderContent);
   }, [renderContent]);
 
   const editor = useEditor({
     extensions: [
-      StarterKit,
+      StarterKit.configure({
+        paragraph: {
+          HTMLAttributes: {
+            class: 'paragraph'
+          }
+        },
+      }),
       HighlightTextExtension,
     ],
-    content: { type: 'doc', content: renderContent },
+    content: { 
+      type: 'doc', 
+      content: renderContent.length === 0 ? [{ type: 'paragraph', content: [] }] : renderContent 
+    },
     editorProps: {
       attributes: {
         class: 'prose prose-invert max-w-none focus:outline-none'
+      },
+      handleDOMEvents: {
+        keydown: (view, event) => {
+          // 如果内容为空且按下删除键或退格键，阻止默认行为
+          if (
+            (event.key === 'Backspace' || event.key === 'Delete') &&
+            editor?.isEmpty
+          ) {
+            event.preventDefault();
+            return true;
+          }
+          return false;
+        }
       }
     },
-    immediatelyRender: false,
     onCreate: ({ editor }) => {
-      editor.setOptions({ editable: true })
+      editor.setOptions({ editable: true });
     },
     onUpdate: ({ editor }) => {
-      const json = editor.getJSON();
-      flushSync(() => {
-        setRenderContent(json.content);
-      });
+      try {
+        const json = editor.getJSON();
+        // 确保至少有一个空段落
+        const safeContent = json.content.length === 0 
+          ? [{ type: 'paragraph', content: [] }] 
+          : json.content;
+        
+        flushSync(() => {
+          setRenderContent(safeContent);
+        });
+      } catch (error) {
+        console.error('Editor update error:', error);
+      }
     },
+    immediatelyRender: false, // 解决 SSR 水合问题
   });
 
+  // 监听编辑器内容变化，确保始终有一个段落
+  useEffect(() => {
+    const handleEmpty = () => {
+      if (editor?.isEmpty) {
+        editor.commands.setContent([{
+          type: 'paragraph',
+          content: []
+        }]);
+      }
+    };
+
+    editor?.on('update', handleEmpty);
+    return () => {
+      editor?.off('update', handleEmpty);
+    };
+  }, [editor]);
+
   if (!editor) {
-    return null
+    return null;
   }
+
   return (
     <EditorContent editor={editor} />
   );