Provide a lightweight React Renderer without Editor

[kasvith]

What problem are you facing?

Rendering JSON document generated by tiptap on client-facing app. Currently given solutions like getHTML or rendering an non editable tiptap instance have several issues

• getHTML will return the HTML, but on the client side often we will have to use the schema to modify nodes(eg: for example appending CDN path for image, use next/image)
• Editable tiptap is bulky

What’s the solution you would like to see?

A lightweight renderer library where clients can customize their Nodes and Marks

Something similar to

• https://github.com/hygraph/rich-text
• https://github.com/claus/storyblok-rich-text-react-renderer#readme

What alternatives did you consider?

Writing my own renderer, but this ProseMirror schema is not easy to render with marks

Anything to add? (optional)

No response

Are you sponsoring us?

• Yes, I’m a sponsor. 💖

[kasvith]

Related discussions #3377

[GitHubish]

If it helps in the discussion, today I made my own viewer but of course it doesn't handle all cases. But to display the rich content in a viewer without the editor here is the code I run :

//Example simplified version
generatePreview(content: JSONContent) {
    const extensions: Extensions = this.extensions; //Document, Dropcursor, Gapcursor,  History, Text, HardBreak, Paragraph... CustomMention, Others custom extensions
    const schema = getSchema(extensions);
    const html = generateHTML(content, extensions);
    container.innerHTML = html;
  }

@kasvith have you realized a similar solution?

[kasvith]

@GitHubish i switched to remirror

[GitHubish]

Ah ok, I use Angular so I can't use on Remirror easily

[kasvith]

Remirror has a react renderer, should work with tiptap also

[rfgamaral]

@kasvith Care to elaborate why you switched to remirror? How hard was it for you? Did you have to port custom extensions? I'm curious 🙂

[kasvith]

@rfgamaral we just started using tiptap, so it was an easy switch. Main thing i considered was the react renderer

[kasvith]

Btw i think you can switch between them. Both are using Prosemirror

[rfgamaral]

Btw i think you can switch between them. Both are using Prosemirror

We have lots of custom extensions built on top of Tiptap architecture, so that wouldn't be an easy feat. Either way, I was just curious. Thanks for clarifying 👍

[kasvith]

Btw i think you can switch between them. Both are using Prosemirror

We have lots of custom extensions built on top of Tiptap architecture, so that wouldn't be an easy feat. Either way, I was just curious. Thanks for clarifying 👍

I think even you may able to leverage React Renderer in Remirror. Since both produces same output in JSON format(some tag names might be different)

[kasvith]

@rfgamaral it seems Remirror React Renderer also rendering marks in the wrong way

[nickluger]

Discovered this lil tool here today, which really solves the problem, works great and has TS types on top 💙

https://github.com/troop-dev/tiptap-react-render

Code seems lightweight enough.

[github-actions[bot]]

This issue is stale because it has been open 45 days with no activity. Remove stale label or comment or this will be closed in 7 days