Output as HTML

[jeremyzilar]

I just noticed that TipTap has an option to render the content as HTML as opposed to JSON. There are specific places where we can use that in our set up and was wondering if you'd consider adding that as an option on the field level?
https://tiptap.dev/docs/editor/guide/output

Also, if you can output HTML, is it possible to import HTML into this field? I know it wouldn't build the relations with other items, but being able to drop in a lot of HTML would be amazing. We are migrating to Directus from an old site that has a lot of HTML in the content body.

[formfcw]

Storing the editor content as HTML is not planned. Of course, you can render HTML from your JSON content.

For converting HTML to Tiptap/Prosemirror JSON, have a look at https://tiptap.dev/docs/editor/api/utilities/html

[m4rrc0]

You need to set the addAttributes method.

Damn... I totally missed that. Thank you @formfcw .

For anyone reading, it seems that renderHTML will only receive attributes that have been declared in addAttributes.
So the previous code I shared becomes:

import { generateHTML } from "@tiptap/html";
import { Node } from "@tiptap/core";

const renderToHtml = (contentJson) => {
	// contentJson = {
	// 	type: "doc",
	// 	content: [
	// 		{
	// 			type: "relation-block",
	// 			attrs: {
	// 				id: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxx",
	// 				junction: "prose_composers_nodes",
	// 				collection: "blocks_heading",
	// 			},
	// 		},
	// 	],
	// };
	const html = generateHTML(contentJson, [
		// other extensions …
		RelationBlock,
	]);

	return html;
};

const RelationBlock = Node.create({
	name: "relation-block",
        addAttributes() {
		return {
			id: { default: null },
			junction: { default: null },
			collection: { default: null },
		};
	},
	renderHTML({ HTMLAttributes }) {
		// HTMLAttributes = { id: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxx', junction: 'prose_composers_nodes', collection: 'heading_blocks' }
                // TODO: create your html elements according to your data
		return ["div", HTMLAttributes];
	},
});

[m4rrc0]

@formfcw , do you know a decent way of converting normal html to the array notation to be returned by renderHTML?
Something like this:

renderHTML({ HTMLAttributes }) {
	return covertHtml(`<div>Hello World</div>`) // converts to ["div", "Hello World"];
},

[formfcw]

The answer is close 🙈:

For converting HTML to Tiptap/Prosemirror JSON, have a look at https://tiptap.dev/docs/editor/api/utilities/html

… or regex

[m4rrc0]

I may not connect the dots like you do...

The answer is close 🙈:

I guess you are referring to the generateJSON utility? But the JSON returned is nothing like what renderHTML expects.

I found this stackoverflow question asking for the same thing, except the answer is... React. And may need a Tiptap Editor instance...? Not sure...

On the other hand, I noticed that returning a string from renderHTML actually kind of works... except it escapes the html.

renderHTML({ HTMLAttributes }) {
	return `<div>Hello World</div>` // will return "&lt;div&gt;Hello World&lt;/div&gt;"
}

So it seems my options are either:

1. manually parsing html (or JSON with the output of generateJSON)
2. using some kind of component library to wrap my html string (and avoid characters being escaped, and process it further if needed)
3. simply decode the output to unescape html characters I need to keep

I need to do some more testing and tinkering but I might just go with the later option and check for code injection on some other level.

If someone lands here looking for more info and I haven't posted further updates, feel free to ask.

[m4rrc0]

I think I will be going with a 4th option. 😂
Ultimately, I see little value in processing relation-blocks with Tiptap since I am only interested in rendering html from them on the server. So I am doing something in those lines to skip Tiptap completely for relation-blocks:

const flexible_editor_blocks = flexible_editor.content.map((blockRaw) => {
	let block = {};
	if (blockRaw.type === "relation-block") {
		// Do whatever you like however you like without Tiptap getting in the way
		block = normalizeBlock(blockRaw);
	} else {
		// Template is useful to actually render HTML. It seems to render text without this wrapper "doc" type
		const template = { type: "doc", content: [ blockRaw ] };
		block = {
			...blockRaw,
			html: renderToHtml(template),
		};
	}
	return block;
});

I don't have enough testing to see if I am missing some important Tiptap feature doing this but at first glance it seems way more satisfying.