富文本总结（二）：Slate概念

interface Editor {
  children: Node[] //节点的结构 
  selection: Range | null/ // 选区
  operations: Operation[] //即将执行的操作
  marks: Omit<Text, 'text'> | null // text的标记

  // Schema-specific node behaviors. 节点行为
  isInline: (element: Element) => boolean // 是否为内联节点。
  isVoid: (element: Element) => boolean // 是否为空节点。
  normalizeNode: (entry: NodeEntry) => void //进行格式化。
  onChange: () => void //修改事件

  // Overrideable core actions.
  addMark: (key: string, value: any) => void  //增加标记
  apply: (operation: Operation) => void // 应用操作。
  deleteBackward: (unit: 'character' | 'word' | 'line' | 'block') => void  // 从当前选定的内容向后删除编辑器中的内容。
  deleteForward: (unit: 'character' | 'word' | 'line' | 'block') => void //  从当前选定的内容向钱删除编辑器中的内容。
  deleteFragment: () => void //删除当前选定内容
  insertBreak: () => void //插入换行符
  insertFragment: (fragment: Node[]) => void //在当前选定内容除插入一个片段
  insertNode: (node: Node) => void //插入节点
  insertText: (text: string) => void //插入文本
  removeMark: (key: string) => void //删除标记
}

const editor = {
  children: [
    {
      type: 'paragraph',
      children: [
        {
          text: 'A line of text!',
        },
      ],
    },
  ],
}

type Node = Editor | Element | Text;
interface Editor{
    children:Node[]
}
interface Element{
    children:Node[]
    [key:string]:unknown
}
interface Text{
    text:string,
    [key:string]:unknown
}

/**
 * `Path` arrays are a list of indexes that describe a node's exact position in
 * a Slate node tree. Although they are usually relative to the root `Editor`
 * object, they can be relative to any `Node` object.
 */

export type Path = number[]

const editor = {
    children: [
        // Path: [0]
        {
            type: 'paragraph',
            children: [
                // Path: [0, 0]
                {
                    text: 'A line of text!',
                },
                // Path: [0, 1]
                {
                    text: 'Another line of text!',
                    bold: true,
                },
            ],
            },
		// Path: [1]
		{
			type: 'paragraph',
			children: [
				// Path: [1, 0]
				{
					text: 'A line of text!',
				},
			],
		},
    ],
}

/**
 * `Point` objects refer to a specific location in a text node in a Slate
 * document. Its path refers to the location of the node in the tree, and its
 * offset refers to the distance into the node's string of text. Points can
 * only refer to `Text` nodes.
 */

export interface BasePoint {
  path: Path
  offset: number
}

const editor = {
    children: [
        {
            type: 'paragraph',
            children: [
                {
                    //  "!" is { path: [0, 0], offset: 14 }
                    text: 'A line of text!',
                },
            ],
        },
		{
			type: 'paragraph',
			children: [
				{
					// The point of the character "l" is { path: [1, 0], offset: 2 }
					text: 'A line of text!',
				},
			],
		},
    ],
  
}

/**
 * `Range` objects are a set of points that refer to a specific span of a Slate
 * document. They can define a span inside a single node or a can span across
 * multiple nodes.
 */

export interface BaseRange {
  anchor: Point
  focus: Point
}

// mynameisbhwa233

{
	anchor: {
		path: [0, 0],
		offset: 0,	
	},
	focus: {
		path: [0, 0],
		offset:5,
	},
}
// 表示选取内容为：myname

/**
 * The `Span` interface is a low-level way to refer to locations in nodes
 * without using `Point` which requires leaf text nodes to be present.
 */

export type Span = [Path, Path]

/**
 * The `Location` interface is a union of the ways to refer to a specific
 * location in a Slate document: paths, points or ranges.
 *
 * Methods will often accept a `Location` instead of requiring only a `Path`,
 * `Point` or `Range`. This eliminates the need for developers to manage
 * converting between the different interfaces in their own code base.
 */
export type Location = Path | Point | Range

export interface PathRef {
  current: Path | null 
  affinity: 'forward' | 'backward' | null
  unref(): Path | null
}

export interface PointRef {
  current: Point | null
  affinity: 'forward' | 'backward' | null
  unref(): Point | null
}

export interface RangeRef {
  current: Range | null
  affinity: 'forward' | 'backward' | 'outward' | 'inward' | null
  unref(): Range | null
}

export interface EditorInterface {
	pathRef: (
    editor: Editor,
    path: Path,
    options?: {
      affinity?: 'backward' | 'forward' | null
    }
  ) => PathRef
	pointRef: (
    editor: Editor,
    point: Point,
    options?: {
      affinity?: 'backward' | 'forward' | null
    }
  ) => PointRef
	rangeRef: (
    editor: Editor,
    range: Range,
    options?: {
      affinity?: 'backward' | 'forward' | 'outward' | 'inward' | null
    }
  ) => RangeRef
}

export interface EditorInterface {
	pathRefs: (editor: Editor) => Set<PathRef>
	pointRefs: (editor: Editor) => Set<PointRef>
	rangeRefs: (editor: Editor) => Set<RangeRef>
}

editor.apply({
  type: 'insert_text',
  path: [0, 0],
  offset: 15,
  text: 'A new string of text to be inserted.',
})

editor.apply({
  type: 'remove_node',
  path: [0, 0],
  node: {
    text: 'A line of text!',
  },
})

editor.apply({
  type: 'set_selection',
  properties: {
    anchor: { path: [0, 0], offset: 0 },
  },
  newProperties: {
    anchor: { path: [0, 0], offset: 15 },
  },
})

const initialValue: Descendant[] = [
  //是block节点，正常。
  {
    type: 'paragraph',
    children: [
      { text: 'This is editable plain text, just like a <textarea>!' },
      {
        type: 'link',
        url: 'www.baidu.com',
        text: '123',
      },
    ],
  },
  // 是text节点，会被直接删除。
  { text: 'This is editable plain text, just like a <textarea>!' }, 
];