SSR rendering the content with `<NuxtImg>`

[Youhan]

Sorry, this is mostly a question, not an actual issue.

Assuming you can add an image uploader as a Tiptap custom extension to the editor, you could save the content as JSON in the DB and then use generateHTML from @tiptap/core to get the HTML and render it in SSR. (or just save the getHTML() output)

My question is how would you go about images using NuxtImg component? I assume the generateHTML uses the renderHTML methods in the extensions, but renderHTML could be something like the following which I don't know how we can tell to to use NuxtImg instead.

renderHTML({ HTMLAttributes }) {
    return [
      'img',
      mergeAttributes(
        HTMLAttributes,
        { class: 'border p-4 rounded-sm' },
      ),
    ]
  },

Do you know if there is way to alter the renderHTML method to use vue components instead and pass the attributes and props to them? or any other way around this?

[modbender]

Yeah that is a problem I also have no complete solution to yet.

The best I could think of was 2 ideas regarding this and both uses Nuxt Image composable useImage():

1. Process Image URL's before storing to HTML

• When you upload an image, you get the URL of image to be shown on editor which later will be stored to DB when you run getHTML().
• Intervene in between and modify the URL before it's shown on editor or after calling getHTML() to Nuxt Image Optimized URL.

[!TIP] I have been successful in doing this 1st method.

2. Process Image URL's after getting HTML data from Database

In this we need to

• Use a HTML parser like DOMParser.
• Load the HTML data you store in your DB.
• Find and replace all image URL with Nuxt Image optimized URL.

[Youhan]

I ended up saving the JSON in the DB and then created a Vue component to render the JSON. Let me know if interested to see the implementation. This way allows me to create interactive components in the editor and have dedicated vue component to render them. NuxtLink and Nuxt image are also made possible.

[modbender]

Sure please do provide it.

I'll soon be integrating an optional image uploader extension custom written by me.

[Youhan]

Here is what I have so far. The types are a bit messed up but I think you can get the idea of what it is doing. https://gist.github.com/Youhan/6822d81bc294fe02e12b78512ee08da8

It accepts a schema to know how to render the nodes or uses the default one.

the Schema stuff is inspired by Storyblok: https://github.com/storyblok/storyblok-js-client/blob/main/src/schema.ts

[Youhan]

As for Image I created a tiptap extension that works with paste:

And also has an uploader UI

and renders using NuxtImg.

[modbender]

I have already included drag and drop, copy paste... but can't include UI as it should be headless.

Anyway, Thank you for everything!