Using TipTap in react-native with react-native-pell-rich-editor

extractTextFromJSON.ts

// extracts text string from prosemirror json object
import { schema } from '~app/utils/prosemirror'

const extractTextFromJSON = json => {
  let text = ''
  schema.nodeFromJSON(json).descendants(node => {
    if (node.isText) {
      text += `${node.text} `
    }
  })
  return text.trim()
}
export default extractTextFromJSON

generateHTML.ts

import { DOMSerializer, Node } from 'prosemirror-model'
import { createHTMLDocument, VHTMLDocument } from 'zeed-dom'
import { schema } from '~app/utils/prosemirror'

const getHTMLFromFragment = (doc: Node) => {
  const document = DOMSerializer.fromSchema(schema).serializeFragment(
    doc.content,
    {
      document: createHTMLDocument() as unknown as Document
    }
  ) as unknown as VHTMLDocument

  return document.render()
}

const generateHtml = json => {
  if (!json || Object.keys(json).length === 0) return ''
  const contentNode = schema.nodeFromJSON(json)
  const htmlString = getHTMLFromFragment(contentNode)
  return htmlString
}

export default generateHtml

generateJSON.ts

import { DOMParser as ProseMirrorDOMParser } from 'prosemirror-model'
import { parseHTML } from 'zeed-dom'
import { schema } from '~app/utils/prosemirror' // pulled from schema.ts file

const generateJson = html => {
  const dom = parseHTML(html) as unknown as Node
  return ProseMirrorDOMParser.fromSchema(schema).parse(dom).toJSON()
}

export default generateJson

schema.ts

import { getSchema } from '@tiptap/core'

// These are the extensions we're using, you would include only your specific extensions
import Link from '@tiptap/extension-link'
import StarterKit from '@tiptap/starter-kit'
import Typography from '@tiptap/extension-typography'
import Highlight from '@tiptap/extension-highlight'
import Image from '@tiptap/extension-image'

// generate schema from extensions
const schema = getSchema([StarterKit, Link, Typography, Highlight, Image])

export default schema