Convert Tiptap JSON to HTML

Hi there!

I’m very new to Tiptap, so please bare with me :wink:

I’m working with an API that returns content formated as Tiptap (ProseMinor) JSON. I don’t intent to use the editor or anything fancy, I just want to convert the JSON to HTML.

I came across the generateHTML() function decribed here, but I’m struggling to make it work.

I’m under the impression there’s a node in the JSON that’s not recognized by the fucntion.

Here a simplfied version of the code:

import jsonData from "./response.json" assert { type: "json" };

import Bold from "@tiptap/extension-bold";
import Document from "@tiptap/extension-document";
import Paragraph from "@tiptap/extension-paragraph";
import Text from "@tiptap/extension-text";
import { generateHTML } from "@tiptap/html";

const communityData = jsonData.records;

const originalText = generateHTML(JSON.stringify(communityData[0].tiptap_body.body), [
    Document,
    Paragraph,
    Text,
    Bold,
  ]);

Here’s a sample of the JSON response I’m getting:

"tiptap_body": {
        "body": {
          "type": "doc",
          "content": [
            {
              "type": "paragraph",
              "content": [
                {
                  "text": "3D isometric button made entirely in Framer with the new update of the transforms properties.",
                  "type": "text",
                  "circle_ios_fallback_text": "3D isometric button made entirely in Framer with the new update of the transforms properties."
                }
              ]
            },
            {
              "type": "paragraph",
              "content": [
                {
                  "text": "Demo \u0026 Remix",
                  "type": "text",
                  "marks": [
                    {
                      "type": "link",
                      "attrs": {
                        "rel": "noopener noreferrer nofollow",
                        "href": "https://www.eleveight.supply/remixes/3dbutton",
                        "class": null,
                        "target": "_blank"
                      }
                    }
                  ],
                  "circle_ios_fallback_text": "Demo \u0026 Remix"
                }
              ]
            },
            {
              "type": "file",
              "attrs": {
                "signed_id": "eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBCRnlmaHdJPSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--526ea713a2d332fc58847012e230c03c569c0002"
              }
            }
          ]
        },

And the error I’m getting:

file:///Users/gvd/hall/backend/node_modules/prosemirror-model/dist/index.js:2441 throw new RangeError("Unknown node type: " + name); ^

RangeError: Unknown node type: undefined at Schema.nodeType (file:///Users/gvd/hall/backend/node_modules/prosemirror-model/dist/index.js:2441:19) at Node.fromJSON (file:///Users/gvd/hall/backend/node_modules/prosemirror-model/dist/index.js:1518:23) at generateHTML (file:///Users/gvd/hall/backend/node_modules/@tiptap/html/dist/index.js:22:30) at file:///gvd/hall/backend/enrich.js:52:24 at ModuleJob.run (node:internal/modules/esm/module_job:192:25) at async DefaultModuleLoader.import (node:internal/modules/esm/loader:228:24) at async loadESM (node:internal/process/esm_loader:40:7) at async handleMainPromise (node:internal/modules/run_main:66:12)

I’m suspecting the "type": "file" in the JSON migh be the culprit. But I’m not sure since I’m not experienced with tiptap and to be honest it’s the first time I’m using it.

Any help and clarification will be very much appreciated!

You’ll likely have better luck on a TipTap-specific forum like their Discord channel or their GitHub Discussions.