import { Slate, withReact, Editable } from "slate-react";
import { createEditor, Editor, Transforms, Text } from "slate";
import React, { useMemo, useState, useCallback } from "react";
import { Button } from "antd";

// default Elements
const DefaultElements = (props) => (
  <p {...props.attributes}>{props.children}</p>
);

const Element = (props) => {
  const { element } = props;
  switch (element.type) {
    case "heading-one":
      return <RenderH1 {...props.attributes}>{props.children}</RenderH1>;
    default:
      return <DefaultElements {...props} />;
  }
};

const renderLeaf = useCallback((props) => {
  return <Leaf {...props}></Leaf>;
}, []);

const renderElement = useCallback(
  (props) => <Element {...props}></Element>,
  []
);
return (
  <Slate editor={editor} value={value} onChange={(newV) => setValue(newV)}>
    <TabBar editor={editor} />
    <Editable renderLeaf={renderLeaf} renderElement={renderElement} />
  </Slate>
);

function TabBar({ editor }) {
  return (
    <div
      style={{
        width: "100%",
        height: "60px;",
        padding: "5px",
        border: "1px solid #ccc",
      }}
    >
      <Button type="primary" onClick={(e) => toggleFormat(e, editor, "bold")}>
        加粗
      </Button>
    </div>
  );
}

// 下拉列表
const DropMenu = (props) => (
  <Menu onClick={(e) => toggleFormat(e.domEvent, props.editor, e.key)}>
    <Menu.Item key="p">
      <p>正文</p>
    </Menu.Item>
    <Menu.Item key="heading-one">
      <p>H1</p>
    </Menu.Item>
    <Menu.Item disabled key="heading-two">
      <p>H2</p>
    </Menu.Item>
    <Menu.Item danger key="h3">
      <p>H3</p>
    </Menu.Item>
  </Menu>
);

function TabBar({ editor }) {
  return (
    <div
      style={{
        width: "100%",
        height: "60px;",
        padding: "5px",
        border: "1px solid #ccc",
      }}
    >
      <Button type="primary" onClick={(e) => toggleFormat(e, editor, "bold")}>
        加粗
      </Button>

      <Dropdown overlay={<DropMenu editor={editor}></DropMenu>}>
        <Button type="primary">标题</Button>
      </Dropdown>
    </div>
  );
}

Transforms.setNodes(
  editor,
  { [format]: isActive ? false : true },
  { match: (n) => Text.isText(n), split: true }
);

// 标题
console.log(editor.selection, format, "当前选区"); // App.js:60 null "heading-one" "当前选区"

// 加粗
console.log(editor.selection, format, "当前选区"); // App.js:60 {anchor:{xx},focus:{xx}} 'bold'

<Editable
  renderLeaf={renderLeaf}
  renderElement={renderElement}
  onMouseLeave={(e) => saveCurrentRange(e, editor)}
/>;

function saveCurrentRange(e, editor) {
  e.preventDefault();
  selectionRange = editor.selection;
}

// 在 toggleFormat 方法中增加
if (format === "heading-one") {
  // 重新设置选区
  Transforms.select(editor, selectionRange);

  Transforms.setNodes(
    editor,
    { type: isActive ? "paragraph" : format },
    { match: (n) => Editor.isBlock(editor, n) }
  );
  return;
}

const Element = (props) => {
  const { element } = props;
  switch (element.type) {
    case "heading-one":
      return <RenderH1 {...props.attributes}>{props.children}</RenderH1>;
    case "image":
      return (
        <p>
          <div
            contentEditable={false}
            style={{ width: 150 + "px", height: 150 + "px" }}
          >
            <img src={element.url} width="100%" />
            {props.children}
          </div>
        </p>
      );

    default:
      return <DefaultElements {...props} />;
  }
};

const onDOMBeforeInput = useCallback(
    (event: InputEvent) => {
      if (
        !readOnly &&
        hasEditableTarget(editor, event.target) &&
        !isDOMEventHandled(event, propsOnDOMBeforeInput)
      ) {
        const { selection } = editor
        const { inputType: type } = event
        const data = (event as any).dataTransfer || event.data || undefined

        // These two types occur while a user is composing text and can't be
        // cancelled. Let them through and wait for the composition to end.
        if (
          type === 'insertCompositionText' ||
          type === 'deleteCompositionText'
        ) {
          return
        }

        event.preventDefault()
        ...
        switch (type) {
            ...
         // 针对不同的type 做不同的处理
          case 'insertFromComposition':
          case 'insertFromDrop':
          case 'insertFromPaste':
          case 'insertFromYank':
          case 'insertReplacementText':
          case 'insertText': {
            if (type === 'insertFromComposition') {
              // COMPAT: in Safari, `compositionend` is dispatched after the
              // `beforeinput` for "insertFromComposition". But if we wait for it
              // then we will abort because we're still composing and the selection
              // won't be updated properly.
              // https://www.w3.org/TR/input-events-2/
              state.isComposing = false
            }

            const window = ReactEditor.getWindow(editor)
            if (data instanceof window.DataTransfer) {
              ReactEditor.insertData(editor, data as DataTransfer)
            } else if (typeof data === 'string') {
              Editor.insertText(editor, data)
            }

            break
          }
        }
      }
    },
    [readOnly, propsOnDOMBeforeInput] insertCompositionText
  )

onCompositionStart={useCallback(
            (event: React.CompositionEvent<HTMLDivElement>) => {
              if (
                hasEditableTarget(editor, event.target) &&
                !isEventHandled(event, attributes.onCompositionStart)
              ) {
                const { selection } = editor
                if (selection && Range.isExpanded(selection)) {
                  Editor.deleteFragment(editor)
                }
              }
            },
            [attributes.onCompositionStart]
          )}


 onCompositionUpdate={useCallback(
            (event: React.CompositionEvent<HTMLDivElement>) => {
              if (
                hasEditableTarget(editor, event.target) &&
                !isEventHandled(event, attributes.onCompositionUpdate)
              ) {
                state.isComposing = true
              }
            },
            [attributes.onCompositionUpdate]
          )}

 onCompositionEnd={useCallback(
            (event: React.CompositionEvent<HTMLDivElement>) => {
              if (
                hasEditableTarget(editor, event.target) &&
                !isEventHandled(event, attributes.onCompositionEnd)
              ) {
                state.isComposing = false

                // COMPAT: In Chrome, `beforeinput` events for compositions
                // aren't correct and never fire the "insertFromComposition"
                // type that we need. So instead, insert whenever a composition
                // ends since it will already have been committed to the DOM.
                if (!IS_SAFARI && !IS_FIREFOX && event.data) {
                  Editor.insertText(editor, event.data)
                }
              }
            },
            [attributes.onCompositionEnd]
          )}

const [value, setValue] = useState([
  {
    type: "paragraph",
    children: [
      {
        type: "paragraph",
        children: [
          { type: "paragraph", children: [{ text: "3层" }] },
          { text: "3-3层" },
        ],
      },
    ],
  },
  {
    type: "image",
    url: "https://ww2.sinaimg.cn/bmiddle/8082a612gy1gqmf4ytu6dj20n0183aez.jpg",
    // children: [{ text: '' }]
  },
  { type: "paragraph", children: [{ text: "图片后面得动i" }] },
]);

路径  slate-main\packages\slate-react\src\components\slate.tsx

 const context: [ReactEditor] = useMemo(() => {
    invariant(
      Node.isNodeList(value),
      `[Slate] value is invalid! Expected a list of elements but got: ${JSON.stringify(
        value
      )}`
    )
    invariant(
      Editor.isEditor(editor),
      `[Slate] editor is invalid! you passed: ${JSON.stringify(editor)}`
    )

    editor.children = value
    Object.assign(editor, rest)
    return [editor]
  }, [key, value, ...Object.values(rest)])

路径 slate-main\packages\slate\src\interfaces\node.ts

isNodeList(value: any): value is Node[] {
    if (!Array.isArray(value)) {
      return false
    }
    const cachedResult = IS_NODE_LIST_CACHE.get(value)
    if (cachedResult !== undefined) {
      return cachedResult
    }
    const isNodeList = value.every(val => Node.isNode(val))
    IS_NODE_LIST_CACHE.set(value, isNodeList)
    return isNodeList
  },

 /**
   * Check if a value implements the `Node` interface.
   */

  isNode(value: any): value is Node {
    return (
      Text.isText(value) || Element.isElement(value) || Editor.isEditor(value)
    )
  },

     /**
   * Check if a value implements the `Text` interface.
   */

 isText(value: any): value is Text {
    return isPlainObject(value) && typeof value.text === 'string'
  },