Update slate-react types for v0.22 (#35639)

types/slate-react/index.d.ts

@@ -1,4 +1,4 @@
-// Type definitions for slate-react 0.21
+// Type definitions for slate-react 0.22
 // Project: https://github.com/ianstormtaylor/slate
 // Definitions by: Andy Kent <https://github.com/andykent>
 //                 Jamie Talbot <https://github.com/majelbstoat>
@@ -58,11 +58,22 @@ export interface RenderNodeProps {
   isFocused: boolean;
   isSelected: boolean;
   key: string;
-  node: Block | Inline;
   parent: Node;
   readOnly: boolean;
 }
 
+export interface RenderBlockProps extends RenderNodeProps {
+    node: Block;
+}
+
+export interface RenderDocumentProps extends RenderNodeProps {
+    node: Document;
+}
+
+export interface RenderInlineProps extends RenderNodeProps {
+    node: Inline;
+}
+
 export type EventHook = (
     event: Event,
     editor: CoreEditor,
@@ -73,7 +84,9 @@ export interface Plugin {
     decorateNode?: (node: Node, editor: CoreEditor, next: () => any) => any;
     renderEditor?: (props: EditorProps, editor: CoreEditor, next: () => any) => any;
     renderMark?: (props: RenderMarkProps, editor: CoreEditor, next: () => any) => any;
-    renderNode?: (props: RenderNodeProps, editor: CoreEditor, next: () => any) => any;
+    renderBlock?: (props: RenderBlockProps, editor: CoreEditor, next: () => any) => any;
+    renderDocument?: (props: RenderDocumentProps, editor: CoreEditor, next: () => any) => any;
+    renderInline?: (props: RenderInlineProps, editor: CoreEditor, next: () => any) => any;
     shouldNodeComponentUpdate?: (previousProps: RenderNodeProps, props: RenderNodeProps, editor: CoreEditor, next: () => any) => any;
 
     onBeforeInput?: EventHook;

types/slate-react/slate-react-tests.tsx

@@ -1,15 +1,24 @@
-import { Editor, Plugin, EditorProps, RenderNodeProps } from "slate-react";
+import { Editor, Plugin, EditorProps, RenderBlockProps, RenderInlineProps } from "slate-react";
 import { Value, Editor as Controller, Operation, Point, Range, Inline, Mark, Document, Decoration } from "slate";
 import * as React from "react";
 import * as Immutable from "immutable";
 
 class MyPlugin implements Plugin {
-    renderNode(props: RenderNodeProps, editor: Controller, next: () => void) {
+    renderBlock(props: RenderBlockProps, editor: Controller, next: () => void) {
         const { node } = props;
         if (node) {
             switch (node.object) {
                 case "block":
                     return <div id="slate-block-test"/>;
+                default:
+                    return undefined;
+            }
+        }
+    }
+    renderInline(props: RenderInlineProps, editor: Controller, next: () => void) {
+        const { node } = props;
+        if (node) {
+            switch (node.object) {
                 case "inline":
                     return <span id="slate-inline-test">Hello world</span>;
                 default:
@@ -40,7 +49,8 @@ class MyEditor extends React.Component<EditorProps, MyEditorState> {
     render() {
         return <Editor
             value={this.state.value}
-            renderNode={ myPlugin.renderNode }
+            renderBlock={ myPlugin.renderBlock }
+            renderInline={ myPlugin.renderInline }
             onChange={ myPlugin.onChange }/>;
     }
 }