Collaboration - What's the advised way of extracting HTML server-side when saving to DB?

[ocostello]

Problem

We have a node.js websocket server running to maintain collaboration on-premise in our tiptap editor. When a user leaves the page we want to save the HTML content to a mongodb db but can't tell from the docs how you recommend us to extract this when all we have access to there is the ydoc.

Attempted fixes

There's a method in @tiptap/html - getHTMLFromFragment which seems useful but isn't exported, I've copied this code to try and get something working, which seems to operate fine on simple text content but fails whenever the editor contains a list/bullets.

Code:

function getHTMLFromYdoc( ydoc ) {

	try {
		const fragment = ydoc.get( 'prosemirror', Y.XmlFragment );
		const rootNode = yXmlFragmentToProseMirrorRootNode( fragment, schema );

		// The rest of this method replicates the getHTMLFromFragment method from @tiptap/html which is unexported
		const zeedDocument = DOMSerializer.fromSchema( schema ).serializeFragment( rootNode, {
			document: createHTMLDocument(),
		} );

		return zeedDocument.render();
	} catch ( err ) {
		console.error( 'error getting html from ydoc', err );
		return '';
	}

Error:

error getting html from ydoc TypeError: text.toDelta is not a function
    at createTextNodesFromYText (/opt/bipsync/release/development/node_modules/y-prosemirror/dist/y-prosemirror.cjs:811:23)
    at createChildren (/opt/bipsync/release/development/node_modules/y-prosemirror/dist/y-prosemirror.cjs:743:18)
    at Array.forEach (<anonymous>)
    at createNodeFromYElement (/opt/bipsync/release/development/node_modules/y-prosemirror/dist/y-prosemirror.cjs:761:18)
    at /opt/bipsync/release/development/node_modules/y-prosemirror/dist/y-prosemirror.cjs:1441:5
    at Array.map (<anonymous>)
    at yXmlFragmentToProseMirrorFragment (/opt/bipsync/release/development/node_modules/y-prosemirror/dist/y-prosemirror.cjs:1440:50)
    at yXmlFragmentToProseMirrorRootNode (/opt/bipsync/release/development/node_modules/y-prosemirror/dist/y-prosemirror.cjs:1457:35)
    at getHTMLFromYdoc (/opt/bipsync/release/development/collaboration/index.js:146:20)
    at Object.writeState (/opt/bipsync/release/development/collaboration/index.js:116:16)

Summary

It seems like people would often want to be saving HTML content server-side and not have access to the editor instance, what is the standard practise for extracting the HTML (or JSON, seeing as @tiptap/html can convert from that)

Note

I have seen the docs below, but neither answer my usecase:

• https://tiptap.dev/docs/guides/output-json-html
• https://tiptap.dev/docs/editor/api/utilities/html

[Philipinho]

I assume you are using Hocuspocus as your YJS websocket backend.

Convert the ydoc state to Tiptap JSON using the TiptapTransformer from the @hocuspocus/transformer package.

import { TiptapTransformer } from '@hocuspocus/transformer';

async onStoreDocument(data: onStoreDocumentPayload) {
    const { documentName, document, context } = data;
    
    const tiptapJson = TiptapTransformer.fromYdoc(document, 'default');
}

Then pass your Tiptap extensions schema to the generateHTML function from @tiptap/html.

const html = generateHTML(tiptapJson, tiptapExtensions);

[ocostello]

We're not using hocuspocus as our websocket backend, it's custom.

Under the hood their solution uses yDocToProsemirrorJSON which is deprecated so I've been avoiding using it myself