How to use slate-react - 10 common examples

onDrop(event, change, editor) {
      const transfer = getEventTransfer(event);
      const range = getEventRange(event, change.value);
      switch (transfer.type) {
        case 'text': {
          const { text } = transfer;
          if (!isUrl(text))
            return;
          if (text.endsWith("png?raw=1") || text.endsWith("png?raw=1")
            || text.endsWith("jpg?raw=1") || text.endsWith("JPG?raw=1") ) {
            // a special URL from seafile server
            var node = Inline.create({
              type: 'image',
              isVoid: true,
              data: {
                src: text
              }
            });

function onPaste(event, editor, next: (arg0: void) => void) {
    event.preventDefault()
    onProgress({status: 'start'})
    const transfer = getEventTransfer(event)
    const {fragment, html, text} = transfer
    const {type} = transfer
    if (type === 'fragment') {
      onProgress({status: 'fragment'})
      // Check if we have all block types in the schema,
      // otherwise, use html version
      const allSchemaBlockTypes = blockContentType.of
        .map(ofType => ofType.name)
        .concat('contentBlock')
      const allBlocksHasSchemaDef = fragment.nodes
        .map(node => node.type)
        .every(nodeType => allSchemaBlockTypes.includes(nodeType))
      if (allBlocksHasSchemaDef) {
        ensureNoPlaceholder(editor)
        const {focusBlock} = editor.value
        const newNodesList = Block.createList(fragment.nodes.map(node => processNode(node, editor)))

onPaste = (e, change) => {
    const transfer = getEventTransfer(e);
    const { type } = transfer;
    switch (type) {
      // case 'files': return this.handleOnDrop(files);
      case 'text': return onPasteText(e, change);
      case 'html': return onPasteHtml(e, change);
      default: break;
    }
  }

function scrollIntoView(node: SlateNode, opts: any = {}) {
  const element = findDOMNode(node) // eslint-disable-line react/no-find-dom-node
  element.scrollIntoView({
    behavior: opts.behavior || 'instant',
    block: opts.block || 'center',
    inline: opts.inline || 'nearest'
  })
}
export default class Editor extends React.Component {

handleOutsideMouseClick = (ev: SyntheticMouseEvent<>) => {
    // check if we're clicking inside the link toolbar
    const element = findDOMNode(this.wrapper);
    if (
      !element ||
      (ev.target instanceof HTMLElement && element.contains(ev.target)) ||
      (ev.button && ev.button !== 0)
    ) {
      return;
    }

    // check if we're clicking inside the link text
    try {
      const linkElement = slateFindDOMNode(this.props.link);

      if (
        !linkElement ||
        (ev.target instanceof HTMLElement && linkElement.contains(ev.target)) ||
        (ev.button && ev.button !== 0)
      ) {
        return;
      }
    } catch (err) {
      // errors finding dom node result in toolbar closing
    }

    // otherwise, we're clicking outside
    ev.preventDefault();
    this.save(this.input ? this.input.value : "");
  };

onFocus,
      renderCustomMarkers,
      renderBlockActions,
      onPatch,
      fullscreen,
      editor
    } = this.props
    const markers = this.props.markers.filter(
      marker => marker.path[0] && getKey(marker.path[0]) && getKey(marker.path[0]) === node.key
    )
    if (markers.length === 0 && !renderBlockActions) {
      return null
    }
    let element
    try {
      element = findDOMNode(node) // eslint-disable-line react/no-find-dom-node
    } catch (err) {
      return null
    }
    const rect = element.getBoundingClientRect()
    let actions = null
    const value = this.props.value || []
    if (renderBlockActions) {
      const block = value.find(blk => blk._key == node.key)
      const RenderComponent = renderBlockActions
      if (block) {
        actions = (

.getRangeAt(0)
          .getBoundingClientRect();
        this.setState({
          left: rect.left,
          top: window.pageYOffset + rect.bottom,
        });
        break;
      }
      case 'link': {
        break;
      }
      case 'linkPreview': {
        const { linkNode } = this.state;
        if (!linkNode) return;
        // eslint-disable-next-line react/no-find-dom-node
        const rect = findDOMNode(linkNode).getBoundingClientRect();
        this.setState({
          left: rect.left,
          top: window.pageYOffset + rect.bottom,
        });
        break;
      }
      case null:
        break;
      default:
        // eslint-disable-next-line no-unused-expressions
        (this.state.view: empty);
    }
  }

getRect() {
    // eslint-disable-next-line react/no-find-dom-node
    return findDOMNode(this.props.node.key).getBoundingClientRect();
  }

function createEditor(plugins: TextConfig['plugins']): Editor {
  let editor = withEdtr(withReact(createSlateEditor()))
  plugins.forEach(withPlugin => {
    editor = withPlugin(editor)
  })
  return editor

  function withEdtr(editor: T): T & Editor {
    const e = editor as T & Editor
    e.controls = []
    e.onKeyDown = () => {}
    e.renderEditable = ({ children }) => {
      return children
    }
    // eslint-disable-next-line react/display-name
    e.renderElement = ({ attributes, children }) => {
      return <div>{children}</div>
    }

onDrop(event, change, editor) {
      const transfer = getEventTransfer(event);
      const range = getEventRange(event, change.value);
      switch (transfer.type) {
        case 'text': {
          const { text } = transfer;
          if (!isUrl(text))
            return;
          if (text.endsWith("png?raw=1") || text.endsWith("png?raw=1")
            || text.endsWith("jpg?raw=1") || text.endsWith("JPG?raw=1") ) {
            // a special URL from seafile server
            var node = Inline.create({
              type: 'image',
              isVoid: true,
              data: {
                src: text
              }
            });
            change.insertInline(node);