Merge pull request #28032 from YangusKhan/master

[slate] Update typings to more closely match slate-0.33; add History class

types/slate-react/index.d.ts

@@ -33,7 +33,7 @@ export interface RenderNodeProps {
   editor: Editor;
   isSelected: boolean;
   key: string;
-  node: Block;
+  node: Node;
   parent: Node;
 }
 

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

@@ -1,8 +1,24 @@
-import { Editor, Plugin, EditorProps } from "slate-react";
+import { Editor, Plugin, EditorProps, RenderNodeProps } from "slate-react";
 import { Change, Value } from "slate";
 import * as React from "react";
 
 class MyPlugin implements Plugin {
+    renderNode(props: RenderNodeProps) {
+        const { node } = props;
+        if (node) {
+            switch (node.object) {
+                case "block":
+                    return <div id="slate-block-test"/>;
+                case "inline":
+                    return <span id="slate-inline-test">Hello world</span>;
+                case "text":
+                    return <p id="slate-text-test">Hello world</p>;
+                default:
+                    return undefined;
+            }
+        }
+    }
+
     onChange(change: Change): void {
         change.blur();
     }
@@ -23,6 +39,9 @@ class MyEditor extends React.Component<EditorProps, MyEditorState> {
     }
 
     render() {
-        return <Editor value={this.state.value} onChange={myPlugin.onChange} />;
+        return <Editor
+            value={this.state.value}
+            onChange={myPlugin.onChange}
+            renderNode={myPlugin.renderNode} />;
     }
 }

types/slate/index.d.ts

@@ -10,44 +10,47 @@
 // TypeScript Version: 2.3
 import * as Immutable from 'immutable';
 
-export interface Data {
+export class Data {
   [key: string]: any;
+  static create(options: Data): Data;
+  static fromJSON(object: Record<string, any>): Data;
+  static fromJS(object: Record<string, any>): Data;
 }
 
 export interface RulesByNodeType {
   [key: string]: Rules;
 }
 
-export interface KindsAndTypes {
-  kinds?: string[];
+export interface ObjectsAndTypes {
+  objects?: string[];
   types?: string[];
 }
 
 export type InvalidReason =
-  | 'child_kind_invalid'
+  | 'child_object_invalid'
   | 'child_required'
   | 'child_type_invalid'
   | 'child_unknown'
-  | 'first_child_kind_invalid'
+  | 'first_child_object_invalid'
   | 'first_child_type_invalid'
-  | 'last_child_kind_invalid'
+  | 'last_child_object_invalid'
   | 'last_child_type_invalid'
   | 'node_data_invalid'
   | 'node_is_void_invalid'
   | 'node_mark_invalid'
   | 'node_text_invalid'
-  | 'parent_kind_invalid'
+  | 'parent_object_invalid'
   | 'parent_type_invalid';
 
 export interface Rules {
   data?: {
     [key: string]: (v: any) => boolean;
   };
-  first?: KindsAndTypes;
+  first?: ObjectsAndTypes;
   isVoid?: boolean;
-  last?: KindsAndTypes;
+  last?: ObjectsAndTypes;
   nodes?: Array<{
-    kinds?: string[];
+    objects?: string[];
     types?: string[];
     min?: number;
     max?: number;
@@ -55,9 +58,9 @@ export interface Rules {
   normalize?: (
     change: Change,
     reason: InvalidReason,
-    context: { [key: string]: any }
+    context: Record<string, any>
   ) => void;
-  parent?: KindsAndTypes;
+  parent?: ObjectsAndTypes;
   text?: RegExp;
 }
 
@@ -80,12 +83,31 @@ export class Schema extends Immutable.Record({}) {
   toJSON(): SchemaProperties;
 }
 
+export interface HistoryJSON {
+  object?: 'history';
+  redos?: Immutable.Stack<Operation>;
+  undos?: Immutable.Stack<Operation>;
+}
+
+export class History extends Immutable.Record({ redos: Immutable.Stack(), undos: Immutable.Stack() }) {
+  object: 'history';
+
+  static create(properties: HistoryJSON | History): History;
+  static createOperationsList(operations: Operation[] | Immutable.List<Operation>): Immutable.List<Operation>;
+  static fromJSON(object: HistoryJSON): History;
+  static fromJS(object: HistoryJSON): History;
+  static isHistory(maybeHistory: any): maybeHistory is History;
+
+  save(operation: Operation, options: { merge?: boolean, skip?: boolean }): History;
+  toJSON(): HistoryJSON;
+}
+
 export interface ValueProperties {
   document?: Document;
   selection?: Range;
   history?: History;
   schema?: Schema;
-  data?: Data;
+  data?: Record<string, any>;
   decorations?: Immutable.List<Range> | null;
 }
 
@@ -94,7 +116,7 @@ export interface ValueJSON {
   selection?: Range;
   history?: History;
   schema?: Schema;
-  data?: Data;
+  data?: Record<string, any>;
   decorations?: Immutable.List<Range> | null;
   object?: 'value';
 }
@@ -104,7 +126,7 @@ export class Value extends Immutable.Record({}) {
   selection: Range;
   history: History;
   schema: Schema;
-  data: Data;
+  data: Record<string, any>;
   object: 'value';
   decorations: Immutable.List<Range> | null;
 
@@ -160,17 +182,17 @@ export class Value extends Immutable.Record({}) {
 export interface DocumentProperties {
   nodes?: Immutable.List<Node> | Node[];
   key?: string;
-  data?: Immutable.Map<string, any> | { [key: string]: any };
+  data?: Immutable.Map<string, any> | Record<string, any>;
 }
 
 export interface DocumentJSON {
   nodes?: NodeJSON[];
   key?: string;
-  data?: { [key: string]: any };
+  data?: Record<string, any>;
   object?: 'document';
 }
 
-export class Document<DataMap = { [key: string]: any }> extends BaseNode<
+export class Document<DataMap = Record<string, any>> extends BaseNode<
   DataMap
 > {
   object: 'document';
@@ -179,8 +201,9 @@ export class Document<DataMap = { [key: string]: any }> extends BaseNode<
   static create(
     properties: DocumentProperties | Document | Immutable.List<Node> | Node[]
   ): Document;
-  static fromJSON(properties: DocumentProperties | Document): Document;
-  static fromJS(properties: DocumentProperties | Document): Document;
+
+  static fromJSON(properties: DocumentJSON | Document): Document;
+  static fromJS(properties: DocumentJSON | Document): Document;
   static isDocument(maybeDocument: any): maybeDocument is Document;
 
   toJSON(): DocumentJSON;
@@ -191,7 +214,7 @@ export interface BlockProperties {
   key?: string;
   nodes?: Immutable.List<Node>;
   isVoid?: boolean;
-  data?: Immutable.Map<string, any> | { [key: string]: any };
+  data?: Immutable.Map<string, any> | Record<string, any>;
 }
 
 export interface BlockJSON {
@@ -199,7 +222,7 @@ export interface BlockJSON {
   key?: string;
   nodes?: NodeJSON[];
   isVoid?: boolean;
-  data?: { [key: string]: any };
+  data?: Record<string, any>;
   object: 'block';
 }
 
@@ -212,8 +235,8 @@ export class Block extends BaseNode {
   static createList(
     array: (BlockProperties[] | Block[] | string[])
   ): Immutable.List<Block>;
-  static fromJSON(properties: BlockProperties | Block): Block;
-  static fromJS(properties: BlockProperties | Block): Block;
+  static fromJSON(properties: BlockJSON | Block): Block;
+  static fromJS(properties: BlockJSON | Block): Block;
   static isBlock(maybeBlock: any): maybeBlock is Block;
 
   toJSON(): BlockJSON;
@@ -224,7 +247,7 @@ export interface InlineProperties {
   key?: string;
   nodes?: Immutable.List<Node>;
   isVoid?: boolean;
-  data?: Immutable.Map<string, any> | { [key: string]: any };
+  data?: Immutable.Map<string, any> | Record<string, any>;
 }
 
 export interface InlineJSON {
@@ -232,7 +255,7 @@ export interface InlineJSON {
   key?: string;
   nodes?: NodeJSON[];
   isVoid?: boolean;
-  data?: { [key: string]: any };
+  data?: Record<string, any>;
   object: 'inline';
 }
 
@@ -245,14 +268,15 @@ export class Inline extends BaseNode {
   static createList(
     array: (InlineProperties[] | Inline[] | string[])
   ): Immutable.List<Inline>;
-  static fromJSON(properties: InlineProperties | Inline): Inline;
-  static fromJS(properties: InlineProperties | Inline): Inline;
+  static fromJSON(properties: InlineJSON | Inline): Inline;
+  static fromJS(properties: InlineJSON | Inline): Inline;
   static isInline(maybeInline: any): maybeInline is Inline;
 
   toJSON(): InlineJSON;
 }
 
 export interface Leaf {
+  object: 'leaf';
   marks?: Mark[];
   text: string;
 }
@@ -276,8 +300,8 @@ export class Text extends Immutable.Record({}) {
   text: string;
 
   static create(properties: TextProperties | Text | string): Text;
-  static fromJSON(properties: TextProperties | Text): Text;
-  static fromJS(properties: TextProperties | Text): Text;
+  static fromJSON(properties: TextJSON | Text): Text;
+  static fromJS(properties: TextJSON | Text): Text;
   static isText(maybeText: any): maybeText is Text;
 
   toJSON(): TextJSON;
@@ -287,7 +311,7 @@ export type Node = Document | Block | Inline | Text;
 export type NodeJSON = DocumentJSON | BlockJSON | InlineJSON | TextJSON;
 
 // tslint:disable-next-line strict-export-declare-modifiers
-declare class BaseNode<DataMap = { [key: string]: any }> extends Immutable.Record(
+declare class BaseNode<DataMap = Record<string, any>> extends Immutable.Record(
   {}
 ) {
   data: Immutable.Map<keyof DataMap, DataMap[keyof DataMap]>;
@@ -358,12 +382,12 @@ export class Character extends Immutable.Record({}) {
 
 export interface MarkProperties {
   type: string;
-  data?: Immutable.Map<string, any> | { [key: string]: any };
+  data?: Immutable.Map<string, any> | Record<string, any>;
 }
 
 export interface MarkJSON {
   type: string;
-  data?: { [key: string]: any };
+  data?: Record<string, any>;
 }
 
 export class Mark extends Immutable.Record({}) {
@@ -388,6 +412,7 @@ export class Change extends Immutable.Record({}) {
   operations: Immutable.List<Operation>;
 
   call(customChange: (change: Change, ...args: any[]) => Change): Change;
+  withoutNormalization(customChange: (change: Change) => void): Change;
 
   applyOperations(operations: Operation[]): Change;
   applyOperation(operation: Operation): Change;

types/slate/slate-tests.ts

@@ -1,21 +1,49 @@
-import { Value } from "slate";
+import { Value, Data, NodeJSON, Document } from "slate";
 
-const value = Value.create();
-value.change()
-	.focus()
-	.selectAll()
-	.delete()
-	.insertText('A bit of rich text, followed by...')
-	.moveOffsetsTo(10, 14)
-	.addMark('bold')
-	.collapseToEndOfNextBlock()
-	.insertBlock({
-		type: 'image',
-		isVoid: true,
-		data: {
-		  src: 'http://placekitten.com/200/300',
-		  alt: 'Kittens',
-		  className: 'img-responsive',
-		},
-	})
-	.insertBlock('paragraph');
+const data = Data.create({ foo: "bar "});
+const value = Value.create({ data });
+const change = value.change()
+.focus()
+.selectAll()
+.delete()
+.insertText('A bit of rich text, followed by...')
+.moveOffsetsTo(10, 14)
+.addMark('bold')
+.collapseToEndOfNextBlock()
+.insertBlock({
+	type: 'image',
+	isVoid: true,
+	data: {
+		src: 'http://placekitten.com/200/300',
+		alt: 'Kittens',
+		className: 'img-responsive',
+	},
+})
+.insertBlock('paragraph');
+
+const node: NodeJSON = {
+	object: "block",
+	type: "paragraph",
+	isVoid: false,
+	data: {},
+	nodes: [
+		{
+			object: "text",
+			leaves: [
+				{
+					object: 'leaf',
+					text: "example",
+					marks: [],
+				}
+			]
+		}
+	]
+};
+
+const doc = Document.fromJSON({
+	object: "document",
+	data: {},
+	nodes: [
+		node
+	],
+});