#how to convert with HTMLConverterFeature so it will conver /n to <br>?

26 messages · Page 1 of 1 (latest)

tribal dirge
#

currently when converting lexical to html with HTMLConverterFeatureit ignoers the \n on my text objects.

i would like to convert thos \n to a <br> so can be displayed on frontend.

vital thistleBOT
#
New Community-Help Thread Created!

Help is on the way! To mark it as solved, use the /solve command. In the meantime, here are some existing threads that may help you:

Documentation:

karmic edge
#

you can achieve this by quickly modifying the parser on text objects

#

so once you know that the lexical represents text

#

you can just treat it like a string, and split on '\n'

#

that result is now an array, so you intersperse a <br> for every item in that array

karmic edge
#

@tribal dirge did you implement this yet?

#

or do u need help

tribal dirge
#

not really. i did a hack on the react app for something like this:

            <div
              dangerouslySetInnerHTML={{ __html: product.descriptionHtml.replace(/\n/g, '<br>') }}
            />
limpid nexus
#

so you need to provide a renderer that handles line breaks

#

(my renderer example handles linebreaks)

karmic edge
tribal dirge
#

@limpid nexus as a newbie on payload, do you have a code example of this renderer?

limpid nexus
tribal dirge
#

below is my collection:

    {
      name: 'description',
      type: 'richText',
      editor: lexicalEditor({
        features: ({ defaultFeatures }:any) => [
          ...defaultFeatures,
          // The HTMLConverter Feature is the feature which manages the HTML serializers.
          // If you do not pass any arguments to it, it will use the default serializers.
          HTMLConverterFeature({}),
        ],
        
      }),

    },
    lexicalHTML('description', { name: 'descriptionHtml' }),
limpid nexus
sacred panther
#

here's my custom converter that does what you're asking, L15-17

// custom paragraph converter that respects align and indent https://github.com/payloadcms/payload/issues/5146
export const FormattedParagraphHTMLConverter: HTMLConverter<any> = {
  async converter({ converters, node, parent }) {
    const childrenText = await convertLexicalNodesToHTML({
      converters,
      lexicalNodes: node.children,
      parent: {
        ...node,
        parent,
      },
    })

    // nb without this, we get `<p></p>` between each paragraph, impossible to do a hard newline
    // might be a payload lexical bug?
    if (/^\s*$/.test(childrenText)) {
      return '<br>'
    }

    const pTag = styleOpeningTagForNode(node, 'p')

    return `${pTag}${childrenText}</p>`
  },
  nodeTypes: ['paragraph', 'linebreak', 'customParagraph'],
}
limpid nexus
#

I have a linebreak converter that only handles linebreaks

tribal dirge
sacred panther
#

in my case (and maybe OP's), certain linebreaks within a paragraph were getting converted to empty paragraphs rather than linebreaks during HTML conversion. I added this fix early on in my project and never really revisited. in hindsight it feels a little funky, i wonder if there's a more "proper" fix

limpid nexus
#

I wonder if this is a behavior that can be a toggle option

sacred panther
#

Ya im planning on polishing / organizing my random collection of fixes like this and publishing to npm, maybe with some option like that

#

I think this issue may be related to importing from google docs

limpid nexus