diff --git a/.changeset/fuzzy-yaks-drive.md b/.changeset/fuzzy-yaks-drive.md new file mode 100644 index 000000000..71102f33d --- /dev/null +++ b/.changeset/fuzzy-yaks-drive.md @@ -0,0 +1,5 @@ +--- +'slate-react': patch +--- + +Added invariants when passing invalud `value` or `editor` props to ``. diff --git a/packages/slate-react/package.json b/packages/slate-react/package.json index 31e84f9a3..abf111c2d 100644 --- a/packages/slate-react/package.json +++ b/packages/slate-react/package.json @@ -20,7 +20,8 @@ "is-hotkey": "^0.1.6", "is-plain-object": "^3.0.0", "lodash": "^4.17.4", - "scroll-into-view-if-needed": "^2.2.20" + "scroll-into-view-if-needed": "^2.2.20", + "tiny-invariant": "1.0.6" }, "devDependencies": { "slate": "^0.61.3", diff --git a/packages/slate-react/src/components/slate.tsx b/packages/slate-react/src/components/slate.tsx index 89228acb6..03f6cac15 100644 --- a/packages/slate-react/src/components/slate.tsx +++ b/packages/slate-react/src/components/slate.tsx @@ -1,5 +1,6 @@ import React, { useMemo, useState, useCallback, useEffect } from 'react' -import { Node, Element, Descendant } from 'slate' +import { Editor, Node, Element, Descendant } from 'slate' +import invariant from 'tiny-invariant' import { ReactEditor } from '../plugin/react-editor' import { FocusedContext } from '../hooks/use-focused' @@ -21,6 +22,17 @@ export const Slate = (props: { const { editor, children, onChange, value, ...rest } = props const [key, setKey] = useState(0) const context: [ReactEditor] = useMemo(() => { + invariant( + Node.isNodeList(value), + `[Slate] value is invalid! Expected a list of elements but got: ${JSON.stringify( + value + )}` + ) + invariant( + Editor.isEditor(editor), + `[Slate] editor is invalid! you passed: ${JSON.stringify(editor)}` + ) + editor.children = value Object.assign(editor, rest) return [editor]