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' : ''}`