Compass/web/components/editor/nodeview-middleware.tsx

import {Extensions} from '@tiptap/core'
import {NodeViewWrapper, ReactNodeViewRenderer} from '@tiptap/react'
import clsx from 'clsx'

import {getField} from './utils'

export const nodeViewMiddleware = (extensions: Extensions) => {
  return extensions.map((e) => {
    const renderReact = getField(e, 'renderReact')
    if (renderReact) {
      return e
        .extend({
          addNodeView: () =>
            ReactNodeViewRenderer((props: any) => (
              <NodeViewWrapper
                className={clsx(e.name, 'contents', props.selected && '[&>*]:outline-dotted')}
              >
                {renderReact(
                  {
                    ...props.node.attrs,
                    deleteNode: props.deleteNode,
                  },
                  props.children,
                )}
              </NodeViewWrapper>
            )),
        })
        .configure(e.options)
    } else {
      return e
    }
  })
}