tiptap

tiptap.js

export const tiptapToHtml = ({ string, idToLabel, enableSuggestions, controls }) => {
  try {
    if (!string) {
      return "";
    }

    const htmlContent = sanitize(
      generateHTML(JSON.parse(string), editorConfig({ controls, suggestionItems: () => [], idToLabel, enableSuggestions }).extensions),
      {
        allowedTags: ["p", "span", "a", "iframe", "img", ...getControls(controls)],
        allowedAttributes: {
          a: ["href", "data-type"],
          iframe: ["src"],
          img: ["src", "class", "srcset", "alt", "title", "width", "height", "loading"],
          span: ["data-id", "data-type"]
        },
        selfClosing: ["img"],
        allowedClasses: {
          "*": ["text-primary", "text-4xl", "text-3xl", "text-2xl", "text-xl", "my-4", "mb-2", "mt-2", "wordbreak"],
          ol: [
            "list-decimal",
            "list-disc",
            "mb-2",
            "pl-1",
            "ml-4",
            "text-primary-text-color",
            "marker:text-primary",
            "marker:italic",
            "marker:font-bold"
          ],
          ul: [
            "list-decimal",
            "list-disc",
            "mb-2",
            "pl-1",
            "ml-4",
            "text-primary-text-color",
            "marker:text-primary",
            "marker:italic",
            "marker:font-bold"
          ],
          iframe: ["aspect-video", "w-full", "h-full"],
          img: ["block", "w-full", "h-full", "object-cover", "object-center", "mx-auto", "p-2", "border", "border-primary-background-color"]
        },
        allowedIframeHostnames: ["www.youtube.com"]
      }
    );

    return { htmlContent };
  } catch (error) {
    return { htmlContent: "" };
  }
};