trim option should exclude <pre>

[danielimmke]

Thank you for the project. Is it possible to have the trim: true option ignore everything inside <pre> elements given the nature of that element is to preserve whitespace? Would your merge a PR that does this?

[remarkablemark]

Thanks for the idea @danielimmke!

Unfortunately, it's not easy to preserve whitespace inside a <pre> element. The reason is because <pre> allows for phrasing content, which complicates the implementation.

For example, how can we handle the following?

const parse = require('html-react-parser');

parse(`
  <pre>
    hello <em>world <span>!</span> </em>
  </pre>
`, { trim: true });

html-dom-parser will parse each element (<pre>, <em>, <span>):

const { htmlToDOM } = require('html-react-parser');

htmlToDOM(`
  <pre>
    hello <em>world <span>!</span> </em>
  </pre>
`);

See Repl.it demo.

[danielimmke]

Thanks for the quick reply - maybe there's a better more generic way to handle this then. I still need to do trim: true for most of my content, but maybe could add an option to have the parser ignore the inside of a specific element (could pass a selector) and not attempt to parse/change anything inside it. I'm not sure if this is currently possible with the available options.

I'm using this inside a Gatsby project and <pre> is primarily used for code formatting so parsing it is definitely not ideal. It's an edge case but I could see a lot of other people running into it as well.

[remarkablemark]

Actually there is a way to disable trim for <pre> elements by using the replace option:

import parse, { domToReact } from 'html-react-parser';

const html = `
  <pre>
    <span>Whitespace is
      <strong>preserved</strong>!
    </span>
  </pre>
`;

const options = {
  replace: ({ name, children }) => {
    if (name === 'pre') {
      return domToReact(children, options);
    }
  },
};

parse(html, { ...options, trim: true });

See CodeSandbox demo.

[danielimmke]

Thanks, I will try that instead.