Linebreak is not rendered correct

[basler-timhermann]

Hi,

Linebraks are not rendered in the contentful-rich-text-vue-renderer. We tried something like this:

text: ({ marks, value }, key, markRenderer) => {
    **const textWithLineBreaks = value
      .split('\n')
      .map((str, index) => {
        return index > 0 ? ['<br>', str] : str;
      })
      .flat();**
    if (!marks.length) {
      // avoid hydration mismatches
      // XXX: why are "\r" included in response? not normalized in
      //  contentful? "\r" is not rendered on client side.
      return textWithLineBreaks?.toString()?.replaceAll('\r', '');
    }

    const marksReversed = [...marks].reverse();

    return marksReversed.reduce(
      // XXX: proper typing
      (aggregate: any, mark, i) =>
        markRenderer[mark.type]([aggregate], `${key}-${i}`, h),
      textWithLineBreaks
    );
  }

But then the break is rendered as string. In the 'rich-text-html-renderer' there is an option:

const options = {
  preserveWhitespace: true,
};

Can you please provide an option to render Linebreaks correct?

[tolgap]

Hi,

We have examples in our test suite that convert line breaks into <br> tags here: https://github.com/paramander/contentful-rich-text-vue-renderer/blob/master/src/index.test.js#L690

Here is the full commit that adds that test: https://github.com/paramander/contentful-rich-text-vue-renderer/commit/733893d526aea1f8eeb13d3000dcff067946f66b

Does this help?

By the way, I see you're struggling with \r\n line breaks. The test is splitting on \n only. So you would have to change that part to fit to your own solution.