update typings to 0.33. add History class. change RenderNodeProps to accept a Node instead of Block. add methods to Data class.

This commit is contained in:
YangusKhan
2018-08-10 09:26:20 -06:00
parent 89ff3d3352
commit c3101e546f
4 changed files with 135 additions and 52 deletions

View File

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

View File

@@ -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} />;
}
}

View File

@@ -5,48 +5,54 @@
// Jan Löbel <https://github.com/JanLoebel>
// Brandon Shelton <https://github.com/YangusKhan>
// Kalley Powell <https://github.com/kalley>
// Francesco Agnoletto <https://github.com/Kornil>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 2.3
import * as Immutable from 'immutable';
export interface Data {
type StringObject = Record<string, any>;
export class Data {
[key: string]: any;
static create(options: Data): Data;
static fromJSON(object: StringObject): Data;
static fromJS(object: StringObject): 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;
@@ -54,9 +60,9 @@ export interface Rules {
normalize?: (
change: Change,
reason: InvalidReason,
context: { [key: string]: any }
context: StringObject
) => void;
parent?: KindsAndTypes;
parent?: ObjectsAndTypes;
text?: RegExp;
}
@@ -73,17 +79,37 @@ export class Schema extends Immutable.Record({}) {
static create(properties: SchemaProperties | Schema): Schema;
static fromJSON(object: SchemaProperties): Schema;
static fromJS(object: SchemaProperties): Schema;
static isSchema(maybeSchema: any): maybeSchema is Schema;
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?: StringObject;
decorations?: Immutable.List<Range> | null;
}
@@ -92,7 +118,7 @@ export interface ValueJSON {
selection?: Range;
history?: History;
schema?: Schema;
data?: Data;
data?: StringObject;
decorations?: Immutable.List<Range> | null;
object?: 'value';
}
@@ -102,7 +128,7 @@ export class Value extends Immutable.Record({}) {
selection: Range;
history: History;
schema: Schema;
data: Data;
data: StringObject;
object: 'value';
decorations: Immutable.List<Range> | null;
@@ -148,6 +174,7 @@ export class Value extends Immutable.Record({}) {
static create(properties?: ValueProperties | Value): Value;
static fromJSON(properties: ValueJSON): Value;
static fromJS(properties: ValueJSON): Value;
static isValue(maybeValue: any): maybeValue is Value;
change(): Change;
@@ -157,17 +184,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> | StringObject;
}
export interface DocumentJSON {
nodes?: NodeJSON[];
key?: string;
data?: { [key: string]: any };
data?: StringObject;
object?: 'document';
}
export class Document<DataMap = { [key: string]: any }> extends BaseNode<
export class Document<DataMap = StringObject> extends BaseNode<
DataMap
> {
object: 'document';
@@ -176,7 +203,8 @@ 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 fromJSON(properties: DocumentJSON | Document): Document;
static fromJS(properties: DocumentJSON | Document): Document;
static isDocument(maybeDocument: any): maybeDocument is Document;
toJSON(): DocumentJSON;
@@ -187,7 +215,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> | StringObject;
}
export interface BlockJSON {
@@ -195,7 +223,7 @@ export interface BlockJSON {
key?: string;
nodes?: NodeJSON[];
isVoid?: boolean;
data?: { [key: string]: any };
data?: StringObject;
object: 'block';
}
@@ -208,7 +236,8 @@ export class Block extends BaseNode {
static createList(
array: (BlockProperties[] | Block[] | string[])
): Immutable.List<Block>;
static fromJSON(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;
@@ -219,7 +248,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> | StringObject;
}
export interface InlineJSON {
@@ -227,7 +256,7 @@ export interface InlineJSON {
key?: string;
nodes?: NodeJSON[];
isVoid?: boolean;
data?: { [key: string]: any };
data?: StringObject;
object: 'inline';
}
@@ -240,13 +269,15 @@ export class Inline extends BaseNode {
static createList(
array: (InlineProperties[] | Inline[] | string[])
): Immutable.List<Inline>;
static fromJSON(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;
}
@@ -270,7 +301,8 @@ export class Text extends Immutable.Record({}) {
text: string;
static create(properties: TextProperties | Text | string): Text;
static fromJSON(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;
@@ -280,7 +312,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 = StringObject> extends Immutable.Record(
{}
) {
data: Immutable.Map<keyof DataMap, DataMap[keyof DataMap]>;
@@ -343,6 +375,7 @@ export class Character extends Immutable.Record({}) {
array: (CharacterProperties[] | Character[] | string[])
): Immutable.List<Character>;
static fromJSON(properties: CharacterProperties | Character): Character;
static fromJS(properties: CharacterProperties | Character): Character;
static isCharacter(maybeCharacter: any): maybeCharacter is Character;
toJSON(): CharacterProperties;
@@ -350,12 +383,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> | StringObject;
}
export interface MarkJSON {
type: string;
data?: { [key: string]: any };
data?: StringObject;
}
export class Mark extends Immutable.Record({}) {
@@ -368,6 +401,7 @@ export class Mark extends Immutable.Record({}) {
array: (MarkProperties[] | Mark[] | string[])
): Immutable.Set<Mark>;
static fromJSON(properties: MarkJSON | Mark): Mark;
static fromJS(properties: MarkJSON | Mark): Mark;
static isMark(maybeMark: any): maybeMark is Mark;
toJSON(): MarkProperties;
@@ -379,6 +413,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;
@@ -577,6 +612,7 @@ export class Range extends Immutable.Record({}) {
static create(properties: RangeProperties | Range): Range;
static fromJSON(properties: RangeJSON): Range;
static fromJS(properties: RangeJSON): Range;
static isRange(maybeRange: any): maybeRange is Range;
toJSON(): RangeProperties;

View File

@@ -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
],
});