From 11ef83b47fca84d1f908b5c9eeefada516fe9fed Mon Sep 17 00:00:00 2001 From: Bryan Haakman Date: Tue, 12 Oct 2021 02:38:02 +0200 Subject: [PATCH] Only use Slate Provider's value prop as initial state (#4540) * Only use value prop as initial state * Add onChange call back * add changeset --- .changeset/lovely-goats-argue.md | 5 +++++ packages/slate-react/src/components/slate.tsx | 10 +++++----- 2 files changed, 10 insertions(+), 5 deletions(-) create mode 100644 .changeset/lovely-goats-argue.md diff --git a/.changeset/lovely-goats-argue.md b/.changeset/lovely-goats-argue.md new file mode 100644 index 0000000000..efad563fbb --- /dev/null +++ b/.changeset/lovely-goats-argue.md @@ -0,0 +1,5 @@ +--- +'slate-react': minor +--- + +The Slate Provider's "value" prop is now only used as initial state for editor.children as was intended before. If your code relies on replacing editor.children you should do so by replacing it directly instead of relying on the "value" prop to do this for you. diff --git a/packages/slate-react/src/components/slate.tsx b/packages/slate-react/src/components/slate.tsx index a01b7c6e9b..85fb580f42 100644 --- a/packages/slate-react/src/components/slate.tsx +++ b/packages/slate-react/src/components/slate.tsx @@ -19,8 +19,8 @@ export const Slate = (props: { onChange: (value: Descendant[]) => void }) => { const { editor, children, onChange, value, ...rest } = props - const [key, setKey] = useState(0) - const context: [ReactEditor] = useMemo(() => { + + const [context, setContext] = React.useState<[ReactEditor]>(() => { if (!Node.isNodeList(value)) { throw new Error( `[Slate] value is invalid! Expected a list of elements` + @@ -35,12 +35,12 @@ export const Slate = (props: { editor.children = value Object.assign(editor, rest) return [editor] - }, [key, value, ...Object.values(rest)]) + }) const onContextChange = useCallback(() => { onChange(editor.children) - setKey(key + 1) - }, [key, onChange]) + setContext([editor]) + }, [onChange]) EDITOR_TO_ON_CHANGE.set(editor, onContextChange)