From 5d8a16066949981ead34466af26bcb8e4ffa994b Mon Sep 17 00:00:00 2001
From: Sihong <sihonghehuey@gmail.com>
Date: Thu, 20 Jan 2022 18:32:15 +0800
Subject: [PATCH] fix: text not rendered on server-side rendering (#4796)

---
 .changeset/orange-zoos-exercise.md             | 5 +++++
 packages/slate-react/src/components/string.tsx | 5 +++--
 2 files changed, 8 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/orange-zoos-exercise.md

diff --git a/.changeset/orange-zoos-exercise.md b/.changeset/orange-zoos-exercise.md
new file mode 100644
index 000000000..6464d64d6
--- /dev/null
+++ 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
index 2e2dfe9cd..b77b14672 100644
--- 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' : ''}`