add guard checks for value and editor in <Slate /> (#3326)

* add guard checks for value and editor in <Slate />

* adding tiny-invariant to slate-react; refactoring errors

* import Editor for guard check

* Create fuzzy-yaks-drive.md

Co-authored-by: Cameron Ackerman <cameron_ackerman@selinc.com>
Co-authored-by: Ian Storm Taylor <ian@ianstormtaylor.com>

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",

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]