fix: text not rendered on server-side rendering (#4796)

ianstormtaylor · Jan 20, 2022 · 5d8a160 · 5d8a160
1 parent a65aec1
commit 5d8a160
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/.changeset/orange-zoos-exercise.md b/.changeset/orange-zoos-exercise.md
@@ -0,0 +1,5 @@
+---
+'slate-react': patch
+---
+
+Fix text not rendered on server-side rendering
diff --git a/packages/slate-react/src/components/string.tsx b/packages/slate-react/src/components/string.tsx
@@ -1,7 +1,8 @@
-import React, { useRef, useLayoutEffect } from 'react'
+import React, { useRef } from 'react'
 import { Editor, Text, Path, Element, Node } from 'slate'
 
 import { ReactEditor, useSlateStatic } from '..'
+import { useIsomorphicLayoutEffect } from '../hooks/use-isomorphic-layout-effect'
 
 /**
  * Leaf content strings.
@@ -69,7 +70,7 @@ const TextString = (props: { text: string; isTrailing?: boolean }) => {
   // eg makes native spellcheck opt out from checking the text node.
 
   // useLayoutEffect: updating our span before browser paint
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     // null coalescing text to make sure we're not outputing "null" as a string in the extreme case it is nullish at runtime
     const textWithTrailing = `${text ?? ''}${isTrailing ? '\n' : ''}`