Open kasvith opened 1 year ago
Related discussions https://github.com/ueberdosis/tiptap/discussions/3377
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?
@GitHubish i switched to remirror
Ah ok, I use Angular so I can't use on Remirror easily
Remirror has a react renderer, should work with tiptap also
@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 π
@rfgamaral we just started using tiptap, so it was an easy switch. Main thing i considered was the react renderer
Btw i think you can switch between them. Both are using Prosemirror
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 π
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)
@rfgamaral it seems Remirror React Renderer also rendering marks in the wrong way
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.
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
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 issuesgetHTML
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, usenext/image
)Whatβs the solution you would like to see?
A lightweight renderer library where clients can customize their Nodes and Marks
Something similar to
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?