Creating preformatted text in TipTap

Question

I am using the TipTap editor as a text editor for a web app. At the moment, any text that I enter into the editor is stripped of its whitespace. This is a problem for users who want to create simple, spatially-formatted content.

Is there any way to use the (preformatted) HTML tag in TipTap? (Other than the code-block extension, since that precludes any other kind of styling.)

Answer 1

You should be able to use prosemirrors ParseOptions when you set up your editor

const editor = useEditor({
  // You extions and other config here
  parseOptions: {
    preserveWhitespace: "full",
  },
});

If that does not work for what you need, I would recommend to extend paragraph.