How to safely render TipTap content

[MartinMuzatko]

Hello! I wonder how to safely render user generated content with @mantine/tiptap.

There is https://tiptap.dev/docs/editor/api/utilities/html to generate HTML from tiptaps JSON representation of the content.

By default mantine's RTE produces HTML for the content property. Should Mantine concern itself with providing an official way of rendering content created by the RTE? Can I trust the content generated by tiptap? Then there is still the problem with how I should persist the content to my database (which mantine shouldn't concern itself with). But theoretically, people could write any kind of <script> to the content property of my Rest API endpoint. (Should maybe my server run dompurify on the html I receive from the user?) Or should I use the JSON representation of tiptap and store that in the database instead? And if so: How do I configure @mantine/tiptap to give me JSON instead of HTML? :)

On a related note: what css class would I need to use to have the same styles as are used within the RTE when rendering the html without the editor?

What are your experiences? Please kindly share them. Thank you so much!

[atareversei]

Hi! I've used the RTE in my project maybe a year ago, so I don't remember all the details but in this project I used the JSON output because it was easier to reason about it in the backend (checking for scripts and other modifications), and when I was receiving it back in my client I would use generateHTML from the tiptap library to produce DOM nodes and render it on the screen. Your client should trust the data receiving from the authentic backend, so the checks should happen in the backend not the client. ...And as far as I remember you can't actually render scripts, Tiptap itself strips it away, ⚠️ but check it for yourself.

const html = '<p>Example <strong>Text</strong><script>alert("haha")</script></p>';

export default function Debug() {
  const output = generateJSON(html, [Document, Paragraph, Text, Bold]);

  return (
    <pre>
      <code dir="ltr">{JSON.stringify(output, null, 2)}</code>
    </pre>
  );
}


/*
output:

{
  "type": "doc",
  "content": [
    {
      "type": "paragraph",
      "content": [
        { "type": "text", "text": "Example " },
        { "type": "text", "marks": [{ "type": "bold" }], "text": "Text" }
      ]
    }
  ]
}

*/

Getting JSON from the Editor

const editor = useEditor({
    extensions: [
      // ...
    ],
    onUpdate(props) {
      inputProps.onChange(() => props.editor.getJSON()); // getting JSON from the editor
    },

    content: inputProps.value, // setting the data
  });

One Little Problem with generateHTML and Copied Texts

If your JSON is malformed or has tags that are unknown to the RTE (tags that you have not added plugins/extensions to support them), it will crash, so you have to check for it manually. More info.

[MartinMuzatko]

Thank you! That's exactly what I need :)
Also with the Typography component introduced recently, I can also style the content properly.

[atareversei]

You're welcome!

For the styling part I didn't do anything fancy, the default look of Mantine was ok for me, so I basically did something like:

  const content = <div dangerouslySetInnerHTML={{ __html: toBeRendered }} />;

  if (background) {
    return (
      <Paper p="md" radius="lg" className={c.container} withBorder>
        {content}
      </Paper>
    );
  }
  return content;

If you want to style it differently, I think you can add a className to the div wrapping the content and target the tags you want using the class.

/* example of padding the lists on the starting side for the rendered content */
.wrapper ol, .wrapper ul {
  padding-inline-start: var(--app-size-sm);
}

[MartinMuzatko]

With the new <Typography> component this is also not a problem anymore :) thanks!