fix: move placeholder height calculation into layout effect

ianstormtaylor · Mar 17, 2023 · c83cbc2 · c83cbc2
1 parent f4f1845
commit c83cbc2
Showing 1 changed file with 14 additions and 6 deletions.
diff --git a/packages/slate-react/src/components/editable.tsx b/packages/slate-react/src/components/editable.tsx
@@ -153,6 +153,9 @@ export const Editable = (props: EditableProps) => {
   const [isComposing, setIsComposing] = useState(false)
   const ref = useRef<HTMLDivElement | null>(null)
   const deferredOperations = useRef<DeferredOperation[]>([])
+  const [placeholderHeight, setPlaceholderHeight] = useState<
+    number | undefined
+  >()
 
   const { onUserInput, receivedUserInput } = useTrackUserInput()
 
@@ -754,13 +757,13 @@ export const Editable = (props: EditableProps) => {
 
   const decorations = decorate([editor, []])
 
-  if (
+  const showPlaceholder =
     placeholder &&
     editor.children.length === 1 &&
     Array.from(Node.texts(editor)).length === 1 &&
     Node.string(editor) === '' &&
     !isComposing
-  ) {
+  if (showPlaceholder) {
     const start = Editor.start(editor, [])
     decorations.push({
       [PLACEHOLDER_SYMBOL]: true,
@@ -770,6 +773,15 @@ export const Editable = (props: EditableProps) => {
     })
   }
 
+  useIsomorphicLayoutEffect(() => {
+    const placeholderEl = EDITOR_TO_PLACEHOLDER_ELEMENT.get(editor)
+    if (placeholderEl && showPlaceholder) {
+      setPlaceholderHeight(placeholderEl.getBoundingClientRect()?.height)
+    } else {
+      setPlaceholderHeight(undefined)
+    }
+  }, [showPlaceholder])
+
   const { marks } = editor
   state.hasMarkPlaceholder = false
 
@@ -819,10 +831,6 @@ export const Editable = (props: EditableProps) => {
     })
   })
 
-  const placeholderHeight = EDITOR_TO_PLACEHOLDER_ELEMENT.get(
-    editor
-  )?.getBoundingClientRect()?.height
-
   return (
     <ReadOnlyContext.Provider value={readOnly}>
       <DecorateContext.Provider value={decorate}>