An example of using Tiptap in a class component?

[neongreen]

I have created a functional React component embedding Tiptap, but it always rerenders on keypress. I suspect it's an unfortunate interaction between functional components and refs.

I want to try rewriting my component to be a class, but useEditor cannot be used in class components. Are there any examples of embedding Tiptap into a class component in React?

For reference, my code is here:

// Takes content in HTML
let Tiptap = forwardRef((props: {
  content: string
  onSubmit: () => void
}, ref: React.ForwardedRef<TiptapMethods>) => {
  // TODO: why does it rerender on every keypress?
  const editor = useEditor({
    extensions: [
      StarterKit.configure({
        heading: { levels: [1, 2, 3] }
      }),
      Typography,
      Link,
      // TODO TrailingNode,
      SubmitShortcut.configure({ onSubmit: props.onSubmit }),
    ],
    editorProps: {
      attributes: {
        // form-control comes from Bootstrap
        class: 'tiptap form-control'
      }
    },
    content: props.content,
  })
  const editorRef: React.MutableRefObject<Editor | null> = useRef(null)
  useImperativeHandle(ref, () => ({
    clearContent: () => {
      editorRef.current?.commands.clearContent()
    },
    getMarkdown: () => {
      let html: string
      if (editorRef.current) html = editorRef.current?.getHTML()
      else throw new Error(`Could not fetch editor content`)
      return turndownService.turndown(html)
    }
  }))
  if (!editor) return null
  editorRef.current = editor
  return (
    <EditorContent editor={editor} />
  )
})
Tiptap.displayName = 'Tiptap'

[philippkuehn]

This is expected #2158 (comment)