draft-js的常见对象类型

1. SelectionState

interface SelectionState {
	// 起始点的block_key
	anchorKey: string;
	// 起始点的分隔符index；比如 char,c之前的index为0，r之后的位置为4
	anchorOffset: number;
	// 结束点的block_key
	focusKey: string;
	// 结束点的分隔符index
	focusOffset: number;
	// 编辑器是否被focus；编辑器失去焦点，选中区域状态仍在
	hasFocus: boolean;
	// 是否从后向前选择
	isBackward: boolean;
	
	// 以下四种方法都是根据 isBackward 的值来确定start、end与anchor、focus的对应关系
	getStartKey: () => string;
	getStartOffset: () => number;
	getEndKey: () => string;
	getEndOffset: () => number;

	// 是否闭合：当anchorKey===focusKey && anchorOffset===focusOffset 时返回true
	isCollapsed: () => boolean;
	// 判断指定block的选中区域是否在[start,end]中
	hasEdgeWithin: (blockKey: string, start: number, end: number) => boolean;
}

2. EditorChangeType

type EditorChangeType =
	// 调整block的缩进
  | 'adjust-depth'
	// 改变char的entity
  | 'apply-entity'
  	// 用退格键删除一个字符
  | 'backspace-character'
  	// 改变block的data属性 或 修改entity的数据
  | 'change-block-data'
  	// 改变block的type属性
  | 'change-block-type'
  	// 改变char的inline-style
  | 'change-inline-style'
  	// 移除一个block
  | 'move-block'
  	// 用delete键删除一个字符
  | 'delete-character'
  	// 插入字符
  | 'insert-characters'
  	// 插入一块内容（如block)
  | 'insert-fragment'
  	// 重做
  | 'redo'
  	// 删除多个字符或block
  | 'remove-range'
  | 'spellcheck-change'
  	// 将一个block分割成两个
  | 'split-block'
  | 'undo';

3. EditorState

type BaseEditorStateConfig = {
  allowUndo?: boolean,
  decorator?: ?DraftDecoratorType,
  directionMap?: ?OrderedMap<string, string>,
  forceSelection?: boolean,
  inCompositionMode?: boolean,
  inlineStyleOverride?: ?DraftInlineStyle,
  lastChangeType?: ?EditorChangeType,
  nativelyRenderedContent?: ?ContentState,
  redoStack?: Stack<ContentState>,
  selection?: ?SelectionState,
  treeMap?: ?OrderedMap<string, List<any>>,
  undoStack?: Stack<ContentState>,
}

interface EditorState {
	/******** 创建 start **********/
	static createEmpty(decorator?: DraftDecoratorType): EditorState;
	// 根据字符串创建editorState
	static createWithText(text: string, decorator?: DraftDecoratorType): EditorState;
	static createWithContent(contentState: ContentState, decorator?: DraftDecoratorType): EditorState;
	// 可以配置更多内容
	static create(config: {
		...BaseEditorStateConfig,
		currentContent: ContentState
	}): EditorState;
	/******** 创建 end **********/

	// 序列化为js对象
	toJS(): Object;
	getCurrentContent(): ContentState;
	getUndoStack(): Stack<ContentState>;
	getLastChangeType(): ?EditorChangeType;
	// 当前被选中文本的style（以选择起始点的style优先级更高）
	getCurrentInlineStyle(): DraftInlineStyle;
	// 覆盖默认的行内样式
	static setInlineStyleOverride(
		editorState: EditorState,
		inlineStyleOverride: DraftInlineStyle,
  	);

	/******** 光标移动 start **********/
  	// 设置光标选择的位置；selectionState改变了，但编辑器上的光标位置没有变化
  	static acceptSelection(
    	editorState: EditorState;
    	selection: SelectionState;
  	): EditorState;
  	// 与acceptSelection的区别在于重置位置后是否更新在编辑器上
  	static forceSelection(
    	editorState: EditorState,
    	selection: SelectionState,
  	): EditorState;
  	// 将光标移动到文末
  	static moveSelectionToEnd(editorState: EditorState): EditorState;
  	static moveFocusToEnd(editorState: EditorState): EditorState;
  	/******** 光标移动 end **********/

	/******** 更新 start **********/
	// 更新editorState；EditorState.push最后也会用到这个函数
	static set(
    	editorState: EditorState,
    	put: {
    		...BaseEditorStateConfig,
    		currentContent?: ContentState}
		},
  	): EditorState;
  	// 更新editorState时常用的函数
  	static push(
    	editorState: EditorState,
    	contentState: ContentState,
    	changeType: EditorChangeType,
    	forceSelection: boolean = true,
  	): EditorState;
  	/******** 更新 end **********/
}

4. ContentState

interface ContentState {
	/********* 创建 start *******/
	static createFromText(
    	text: string,
    	delimiter?: string | RegExp = /\r\n?|\n/g,
  	): ContentState;
  	static createFromBlockArray(
    	blocks: Array<BlockNodeRecord> | {contentBlocks: Array<BlockNodeRecord>, ...},
    	entityMap: ?any,
  	): ContentState;
  	static fromJS(state: ContentStateRawType): ContentState;
  	/********* 创建 end *******/

	// 渲染动作之前的 SelectionState
	getSelectionBefore(): SelectionState;
	// 渲染动作之后的 SelectionState
	getSelectionAfter(): SelectionState

	// 创建一个entity，可以根据getLastCreatedEntityKey()拿到key
	createEntity(
		type: DraftEntityType,
	    mutability: DraftEntityMutability,
	    data?: Object,
	): ContentState;
  	// 获取entity
  	getAllEntities(): OrderedMap<string, DraftEntityInstance>;
	// 更新指定 entity 的数据
	mergeEntityData(
    	entityKey: string,
    	toMerge: {[key: string]: any, ...},
  	): ContentState;
  	// 替换指定 entity 的数据
  	replaceEntityData(
    	key: string,
    	newData: interface {[key: string]: any},
  	): ContentState
  	/******** 获取block start *****/
  	// 获取指定block之前的blockKey
  	getKeyBefore(key: string): ?string;
  	getBlockBefore(key: string): ?BlockNodeRecord;
  	getBlocksAsArray(): Array<BlockNodeRecord>;
  	getFirstBlock(): BlockNodeRecord;
  	getLastBlock(): BlockNodeRecord;
  	/******** 获取block end *****/
  	// 获取所有block的文本，以 delimiter || 换行符 连接
  	getPlainText(delimiter?: string): string;