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

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

renderWrapper() {
    const {type, node} = this.props
    const nodeRef = findDOMNode(node)
    const editModalLayout = get(type.options, 'editModal')
    const {title} = type
    if (editModalLayout === 'fullscreen') {
      return (
        
          {this.renderInput()}
        
      )
    }
    if (editModalLayout === 'fold') {
      return (
        <div>
          
            {this.renderInput()}
          
        </div>

const range = createRange(event)

    if (range === null) {
      return
    }

    const {rangeIsAtStart, rangeOffset} = range

    const node = document.getClosestBlock(key)

    if (!node) {
      this.resetDropTarget()
      return
    }

    const domNode = findDOMNode(node)
    if (rangeIsAtStart) {
      this.showBlockDragMarker('before', domNode)
    } else {
      this.showBlockDragMarker('after', domNode)
    }
    this._dropTarget = {node: node, isAtStart: rangeIsAtStart, offset: rangeOffset}
  }