fix: 文本编辑时实时同步底层渲染

Author: PANDAJSR

src/components/SlideRenderer.tsx

@@ -63,6 +63,7 @@ export function SlideRenderer({
   const isDraggingRef = useRef(false)
   const isResizingRef = useRef(false)
   const [editingTextElementId, setEditingTextElementId] = useState<string | null>(null)
+  const [draftTextLinesMap, setDraftTextLinesMap] = useState<Record<string, TextLine[]>>({})
   const backgroundImageUrl = slide.backgroundImage ? resourceMap[slide.backgroundImage] : null
   const scaledWidth = slide.width * scale
   const scaledHeight = slide.height * scale
@@ -113,16 +114,19 @@ export function SlideRenderer({
   useEffect(() => {
     if (!isEditMode) {
       setEditingTextElementId(null)
+      setDraftTextLinesMap({})
     }
   }, [isEditMode, slide.id])
 
   useEffect(() => {
     if (!selectedElementId) {
       setEditingTextElementId(null)
+      setDraftTextLinesMap({})
       return
     }
     if (editingTextElementId && selectedElementId !== editingTextElementId) {
       setEditingTextElementId(null)
+      setDraftTextLinesMap({})
     }
   }, [editingTextElementId, selectedElementId])
 
@@ -309,6 +313,9 @@ export function SlideRenderer({
         {slide.elements.map(element => {
           if (elementRenderStates[element.id] === false) return null
           const bounds = resolveElementBounds(element)
+          const renderedElement = element.type === 'text' && draftTextLinesMap[element.id]
+            ? { ...element, textLines: draftTextLinesMap[element.id] }
+            : element
           return (
             <div
               key={element.id}
@@ -345,7 +352,7 @@ export function SlideRenderer({
                 }}
               >
                 <ElementRenderer
-                  element={element}
+                  element={renderedElement}
                   scale={1}
                   resourceMap={resourceMap}
                   slideIndex={slideIndex}
@@ -356,9 +363,27 @@ export function SlideRenderer({
                 <EditableTextOverlay
                   element={element}
                   onCancel={() => {
+                    setDraftTextLinesMap(prev => {
+                      if (!prev[element.id]) return prev
+                      const next = { ...prev }
+                      delete next[element.id]
+                      return next
+                    })
                     setEditingTextElementId(null)
                   }}
+                  onLiveChange={nextTextLines => {
+                    setDraftTextLinesMap(prev => ({
+                      ...prev,
+                      [element.id]: nextTextLines
+                    }))
+                  }}
                   onCommit={nextTextLines => {
+                    setDraftTextLinesMap(prev => {
+                      if (!prev[element.id]) return prev
+                      const next = { ...prev }
+                      delete next[element.id]
+                      return next
+                    })
                     onEditTextUpdate?.(element.id, nextTextLines)
                     setEditingTextElementId(null)
                   }}

src/components/slide-renderer/EditableTextOverlay.tsx

@@ -8,6 +8,7 @@ interface EditableTextOverlayProps {
   element: TextElement
   onCommit: (nextTextLines: TextLine[]) => void
   onCancel: () => void
+  onLiveChange?: (nextTextLines: TextLine[]) => void
 }
 
 interface TextSegment {
@@ -156,7 +157,7 @@ function buildEditableTextLines(root: HTMLDivElement, sourceLines: TextLine[]):
   return nextLines
 }
 
-export function EditableTextOverlay({ element, onCommit, onCancel }: EditableTextOverlayProps) {
+export function EditableTextOverlay({ element, onCommit, onCancel, onLiveChange }: EditableTextOverlayProps) {
   const editorRef = useRef<HTMLDivElement | null>(null)
   const hasCommittedRef = useRef(false)
 
@@ -206,6 +207,13 @@ export function EditableTextOverlay({ element, onCommit, onCancel }: EditableTex
     commit()
   }
 
+  const handleInput = () => {
+    const editor = editorRef.current
+    if (!editor || !onLiveChange) return
+    const nextTextLines = buildEditableTextLines(editor, element.textLines)
+    onLiveChange(nextTextLines)
+  }
+
   const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
     if (event.key === 'Escape') {
       event.preventDefault()
@@ -238,6 +246,7 @@ export function EditableTextOverlay({ element, onCommit, onCancel }: EditableTex
         suppressContentEditableWarning
         spellCheck={false}
         onBlur={handleBlur}
+        onInput={handleInput}
         onKeyDown={handleKeyDown}
         style={{
           width: '100%',