How to use the @accordproject/markdown-slate.SlateTransformer function in @accordproject/markdown-slate

const onPaste = (event, editor, next) => {
    if (!isEditable(editor, 'paste')) {
      return false;
    }
    if (isEditable(editor, 'paste')) {
      event.preventDefault();
      const transfer = getEventTransfer(event);
      if (transfer.type === 'html') {
        const htmlTransformer = new HtmlTransformer();
        const slateTransformer = new SlateTransformer();
        // @ts-ignore
        const ciceroMark = htmlTransformer.toCiceroMark(transfer.html, 'json');
        const { document } = slateTransformer.fromCiceroMark(ciceroMark);
        editor.insertFragment(document);
        return;
      }
    }
    return next();
  };

export default async function onClauseUpdated(template, editorRef, clauseNode) {
  const clauseId = clauseNode.data.get('clauseid');
  try {
    const ciceroClause = new Clause(template);
    const templateUri = clauseNode.data.get('src');
    const value = {
      document: {
        nodes: clauseNode.nodes
      }
    };

    const slateTransformer = new SlateTransformer();
    const parseText = slateTransformer.toMarkdown(value, { wrapVariables: false });
    ciceroClause.parse(parseText);
    const parseResult = ciceroClause.getData();
    store.dispatch(parseClauseSuccess(clauseId, parseResult));

    if (template.grammarHasErgoExpression()) {
      // only replace node if template as computed expression
      const variableText = await ciceroClause.draft({ wrapVariables: false });
      const clauseMd = `\`\`\` 
  ${variableText}
  \`\`\``;
      const clauseValue = slateTransformer.fromMarkdown(clauseMd);
      const newClauseNode = clauseValue.toJSON().document.nodes[0];
      editorRef.current.replaceNodeByKey(clauseNode.key, newClauseNode);
    }
    return parseResult;

import * as clauseTemplatesActions from '../actions/clauseTemplatesActions';

/* Selectors */
import * as templatesSelectors from '../selectors/templatesSelectors';
import * as contractSelectors from '../selectors/contractSelectors';
import { addTemplateObjectToStore } from './templatesSaga';

/* Constants */
import {
  ADD_TO_CONTRACT,
  DOCUMENT_EDITED,
  PASTE_TO_CONTRACT,
  REMOVE_CLAUSE_FROM_CONTRACT
} from '../actions/constants';

const slateTransformer = new SlateTransformer();

// Temporary fix based on the following idea:
// if you apply “fromMarkdown” to the grammar before parsing,
// both will have the same whitespace processing done and parsing will work better
// markdown <-commonmark-> markdown AST
const roundTrip = (markdownText) => {
  const value = slateTransformer.fromMarkdown(markdownText);
  const markdownRound = slateTransformer.toMarkdown(value);
  return markdownRound;
};

/**
 * Saga to update the contract in the store if it has changed
 * Determines if heading or clause nodes exist
 * If so, populates an array to send to the store for navigation
 */

import React, { useState, useCallback } from 'react';
import {
  Divider, Grid, Segment
} from 'semantic-ui-react';

import ReactDOM from 'react-dom';
import { SlateTransformer } from '@accordproject/markdown-slate';

import './index.css';
import MarkdownAsInputEditor from '../../src/MarkdownAsInputEditor';
import SlateAsInputEditor from '../../src/SlateAsInputEditor';

import * as serviceWorker from './serviceWorker';
import 'semantic-ui-css/semantic.min.css';

const slateTransformer = new SlateTransformer();

const defaultMarkdown = `# My Heading

This is text. This is *italic* text. This is **bold** text. This is a [link](https://clause.io). This is \`inline code\`.

This is ***bold and italic*** text.

This is a
softbreak.

This is a  
linebreak.

![ap_logo](https://docs.accordproject.org/docs/assets/020/template.png "AP triangle")

> This is a quote.