How to use the simple-markdown.outputFor function in simple-markdown

import React from 'react'
import classNames from 'classnames'
import { getSizeClass, getRegex, replaceColons } from '../conversations/emoji'
import { rules } from './MessageMarkdown'
import SimpleMarkdown from 'simple-markdown'

const emojiRegex = getRegex()
const parser = SimpleMarkdown.parserFor(rules)
const ast2react = SimpleMarkdown.outputFor(rules, 'react')

export default function MessageBody (props) {
  const { text, disableJumbomoji, preview } = props
  // if text is only emojis and Jumbomoji is enabled
  const emojifiedText = trim(text.replace(/:[\w\d_\-+]*:/g, replaceColons))
  if (
    emojifiedText.length < 50 &&
    !disableJumbomoji &&
    emojifiedText.replace(emojiRegex, '') === ''
  ) {
    const sizeClass = disableJumbomoji ? '' : getSizeClass(emojifiedText)
    return (
      <span>
        {emojifiedText}
      </span>
    )

spoiler: {
    order: 0,
    match: (source) => /^\|\|([\s\S]+?)\|\|/.exec(source),
    parse(capture, parse, state) {
      return {
        content: parse(capture[1], state),
      }
    },
    html(node, output, state) {
      return htmlTag('span', htmlTag('span', output(node.content, state), {}, state), { class: 'spoiler' }, state)
    },
  },
}

const parser = md.parserFor(rules)
const htmlOutput = md.outputFor(rules, 'html')

@Component({
  name: 'neko-markdown',
})
export default class extends Vue {
  @Prop({ required: true })
  source!: string

  render(h: any) {
    const state: MarkdownState = {
      inline: true,
      inQuote: false,
      escapeHTML: true,
      cssModuleNames: null,
    }
    return h({ template: `<div>${htmlOutput(parser(this.source, state), state)}</div>` })

output: function(node, outputter) {
          return React.createElement(
            "p",
            null,
            outputter(node.content)
          );
        }
    })
});

var rawBuiltParser = SimpleMarkdown.parserFor(rules);
var parse = function(source) {
  var blockSource = source + "\n\n";
  return rawBuiltParser(blockSource, {inline: false});
};
var output = SimpleMarkdown.outputFor(SimpleMarkdown.ruleOutput(rules));

module.exports = {
    parse: parse,
    output: output
};

react: null,
  },
  channelMention: {
    order: defaultRules.text.order,
    match: inlineRegex(/^<#\d+>/),
    parse: () => ({
      type: "mention",
      content: "#unknown-channel",
    }),
    react: null,
  },
}

const parseInline = parserFor(inlineRules, { inline: true })
const parseBlock = parserFor(blockRules, { inline: true })
const reactOutput = outputFor({ ...inlineRules, ...blockRules }, "react")

const ellipsize = (text: string, length: number) => {
  const shortenedText = text.replace(/\s+/g, " ")
  return shortenedText.length <= length
    ? shortenedText
    : `${shortenedText.slice(0, length)}…`
}

const now = () => (typeof performance === "undefined" ? 0 : performance.now())

export const parseMarkup = (
  content: string,
  options?: { inline?: boolean; jumboable?: boolean },
) => {
  const { inline = false, jumboable = false } = options ?? {}