Tiptap: How do you render html without the Editor ?

[ThomasKientz]

Hi,

I don't find a clear way of how to consume the templates produced with the editor.

Once your users have created some nice templates with the editor (eg in a "Edit" page), how do you render them if you just want to display them without any editing functionalities (eg in a "Blog" page in a read only mode) ?

To avoid spin up again a full editor in read only mode (:editable="false"), I am trying to naively create a minimalist renderer component that takes in parameters the compiled template string (produced from getHTML()) and render it with all my custom nodes/components. But compiling templates downloaded from a backend on the fly its not straightforward.

How do you process for this kink of scenery ?

Thanks !

[BrianHung]

What's the issue with using serialized HTML from getHTML()? As long as you have the same css, I would guess the rendered HTML from that should appear the same although with no editing capabilities.

[ThomasKientz]

@BrianHung You mean with v-html ? Cause the serialized html can includes custom components (eg <div><custom-component /></div>). How do you do in this case ?

[ThomasKientz]

@BrianHung I think I got your answer wrong.

What's the issue with using serialized HTML from getHTML() ?

There is none.

If you store it in a DB and retrieve it later, how would you render it ?

[BrianHung]

@ThomasKientz

I think I understand your question better now: you want to render the HTML into normal Vue Components. I would look at Editor.js and try to isolate the parts which renders the components, like initNodeViews and DOMParser.fromSchema.

[ThomasKientz]

@BrianHung Yes, but I don't understand why I am the first to ask this, I must have missed something.

How do you (tiptap's users) consume the serialized HTML usually ? Editing is one part of the story, you have to consume the content next, don't you ?

[BrianHung]

I just use the editor to render the HTML and use read-only.

[ThomasKientz]

Ok got it. I don't know why it did not seem intuitive to me to use the editor to only display content at first glance. I am working on a CMS app where most of users are in a "consume only" mode. At first I thought that the serialized HTML was meant to be used with the v-html attribute but I am using custom components. Anyway, I will be using the editor with read-only. Thanks for the clarification.

[mojtabaahn]

I come here with same goal. to make components both for editing and reading modes.

I would appreciate anyone having experience confirming the approach @ThomasKientz is using.

Thanks

[hanspagel]

That’s what we made the read-only mode for, so it’s fine. 👍️

[jonathanmach]

Hi @ThomasKientz, would you care to share any experience you had with this suggested approach (ie. using the read-only mode)?
I was also trying to find something that would be responsible for rendering the JSON without the editor.

I tried to build a minimal project with TipTap using the read-only mode to see what would be the final bundle size and wasn't surprised to see a 316Kb(parsed), gzipped: 96Kb, since it packs everything required for the actual editor with all its editing functionality.
I feel like I'm after a lighter library that is simply responsible for rendering the JSON content to HTML on the client.
@hanspagel, would love to hear your thoughts on this!

Thanks so much in advance, guys!

[philippkuehn]

There are three ways:

1. you don't have any nodes with node views: you can simply store and render getHTML()

2. you have some nodes with complex node views: store the output of getJSON() and render the editor with editable: false

3. you have some nodes with complex node views and want to use getHTML() to render a string of HTML: provide always a correct toDOM() function. this function is used to generate the HTML and provides a proper copy/paste behavior for every node.

[jonathanmach]

Thanks for your input @philippkuehn!

It seems like the guys at Storyblok created a HTML render for ProseMirror JSON data:
https://github.com/storyblok/storyblok-js-client#method-storyblokrichtextresolverrender

Storyblok.richTextResolver.render(blok.richtext)

What they call richtext is just a ProseMirror JSON state.

And this is the parser logic: https://github.com/storyblok/storyblok-js-client/blob/933dc19369fd6b62db42595781a15b957b663e6a/source/richTextResolver.js#L20

This might be useful for anyone looking into writing their own lightweight renderer.

[philippkuehn]

Hey, in v2 there is also a generateHTML(json, extensions) method to generate HTML without an editor instance (so you can use it on a server).

[jonathanmach]

That's great news, thanks for sharing @philippkuehn.
I'm really excited and looking forward to the new version and hope to be able to contribute in any way 🚀

[ThomasKientz]

I ending up exporting html with getHtml() and rendering it with the editor and editable: false.

I am doing this, because I am using custom Vue components as nodes. So I can't render the html as is as I need a way to parse and render the customs nodes (eg <my-custom-component>some content</ my-custom-component>).

A lightweight reader components (to replace editable: false) would be awesome but I have go no time to implement it and I don't care about bundle size.