How to use the slate-react.getEventRange function in slate-react

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);

handleDragOverOtherNode = (event: DragEvent) => {
    if (!this.state.isDragging) {
      return
    }
    const targetDOMNode = event.target // Must not be .currentTarget!
    // As the event is registered on the editor parent node
    // ignore the event if it is coming from from the editor node itself
    if (targetDOMNode === this._editorNode) {
      this.restoreSelection()
      return
    }
    const {editor} = this.props
    const range = getEventRange(event, editor)
    if (range === null || (range.focus && range.focus.offset === undefined)) {
      this.restoreSelection()
      return
    }
    const targetNode = editor.value.document.getDescendant(range.focus.key)
    // If we are dragging over another inline return
    if (editor.value.document.getClosestInline(targetNode.key)) {
      this.restoreSelection()
      return
    }
    // If we are dragging over a custom type block return
    const block = editor.value.document.getClosestBlock(range.focus.key)
    if (block && block.type !== 'contentBlock') {
      return
    }
    this.moveCursor(range, targetNode)

handlePaste = (event, editor, next) => {
    const { value } = editor
    const { document, startBlock } = value

    const target = getEventRange(event, editor)
    const transfer = getEventTransfer(event)
    const { type, text } = transfer

    if (type === 'text' || type === 'fragment') {
      if (isImageUrl(text)) {
        return editor.command(insertImage, text, target)
      }

      if (isUrl(text)) {
        return editor.command(insertLink, text, target)
      }

      const parent = document.getParent(startBlock.key)
      // We're inside a table and pasting a fragment, for now lets
      // not allow embedded table pasting.
      if (type === 'fragment' && parent.type === 'table_cell') {

onDrop = (ev, change) => {
    const { schema } = this.props;
    console.log(ev, ev.dataTransfer.files);
    const type = ev.dataTransfer.getData('text');
    if (type && type.indexOf('x-slate:') === 0) {
      const range = getEventRange(ev, change.value);
      return addBlock(
        change.value,
        schema.nodes[type.substr('x-slate:'.length)].slate,
        schema,
        null,
        null,
        change.select(range),
      );
    }
  };

export const onDropOrPaste = (event, editor, next) => {
  const target = getEventRange(event, editor)

  if (!target && event.type === "drop") return next()

  const transfer = getEventTransfer(event)
  const { type, text } = transfer

  if (type === "text") {
    if (!isUrl(text)) return next()
    if (!isImage(text)) return next()
    editor.command(insertImage, text, target)
    return next()
  }

  return next()
}

edit = e => {
    const { editor } = this.props;
    e.preventDefault();
    this.target = getEventRange(e, editor.state.value);
    this.setState({ isEditing: true });
  };

edit = e => {
    const {editor} = this.props;
    e.preventDefault();
    this.target = getEventRange(e, editor.state.value)
    this.setState({
      isShow: true
    });
  };

const onPasteText = (e, change) => {
  const target = getEventRange(e, change.value)

  const transfer = getEventTransfer(e)
  const { text } = transfer
  if (!isUrl(text)) return null

  if (isImage(text)) {
    return change.call(insertImage, text, target)
  } else if (text.match(/youtube\.com|vimeo\.com/)) {
    return change.call(insertVideo, text)
  }
  return change.call(insertLink, text)
}

function onInsert(event, change, next) {
    const { editor } = change
    const transfer = getEventTransfer(event)
    const range = getEventRange(event, editor)

    switch (transfer.type) {
      case 'files':
        return onInsertFiles(event, change, next, transfer, range)
      case 'html':
        return onInsertHtml(event, change, next, transfer, range)
      case 'text':
        return onInsertText(event, change, next, transfer, range)
      default:
        return next()
    }
  }