1
2
3
4
5
6

[
  {
    type: string,
    children: []
  }
]

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

import React, { useMemo, useCallback } from 'react'
import { Editor, BaseEditor } from "slate";
import {
  Slate,
  Editable,
  withReact,
  ReactEditor
} from "slate-react";

const initialValue: Descendant[] = [
  {
    type: "paragraph",
    children: [
      {
        text: "With Slate you can build complex block types that have their own embedded content and behaviors, like rendering checkboxes inside check list items!",
      },  
    ],
  },
];

export const App = ({ p }: any) => {
 
  const editor: ReactEditor = useMemo(
    () => withHistory(withReact(createEditor())),
    []
  );

  return (
    <Slate editor={editor} value={initialValue}>
      <Editable
        placeholder="Get to work…"
      />
    </Slate>
  );
};

1
2
3
4
5
6
7
8
9

<Editable
    onKeyDown={event => {
      if (event.key === '&') {
        // 可以监听到对应的值
        event.preventDefault()
        editor.insertText('and')
      }
    }}
/>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

const renderElement = useCallback((props: any) => <Element {...props} />, []);



const Element = (
  props: JSX.IntrinsicAttributes & {
    attributes: any;
    children: any;
    element: any;
  }
) => {
  const { attributes, children, element } = props;
	// 根据不同的type类型渲染不同的元素
  switch (element.type) {
    case "check-list-item":
      return <CheckListItemElement {...props} />;
    case "pinyin":
      return <RenderHanzi {...props} />;
    default:
      return <DefaultElement {...attributes}>{children}</DefaultElement>;
  }
};

1
2
3
4

 <Editable
   			// ....
        renderElement={renderElement}
  />