Search code examples
javascriptsalesforce-lightninglwc

Salesforce LWC bullet points not rendering in rich text component

I'm working with Lightning Web Components and trying to render a List inside the lightning-formatted-rich-text component. I need this component to be dynamic so calling out "ul" and "li" component isn't going to work.

HTML

<lightning-formatted-rich-text value={message}></lightning-formatted-rich-text>

JS

import BaseChatMessage from 'lightningsnapin/baseChatMessage';
import { track } from 'lwc';
export default class ChatMessageDefaultUI extends BaseChatMessage {
    
    @track message = '<ul><li>hello</li><li>is this working?</li></ul>';
}

I've tried css like below from a different answer and not seeing any difference

ul:not(.browser-default) li {
    list-style-type: disc;
}
Solution

  • I ran in to this issue when trying to parse a rich text object from Salesforce CMS (via JSON).

    It looks like lightning-formatted-text currently works best with (html-)decoded strings via the .js file or a html-encoded string parsed directly in the html-file.

    I ran some tests, where "richText1" renders with html code and the others as expected:

    //JS
richText1 = '&lt;h1&gt;TEST&lt;/h1&gt;'; 
richText2 = "<h1>TEST</h1>";

    <lightning-formatted-rich-text value={richText1}></lightning-formatted-rich-text>
<lightning-formatted-rich-text value={richText2}></lightning-formatted-rich-text>
<lightning-formatted-rich-text value="&lt;h1&gt;TEST&lt;/h1&gt;"></lightning-formatted-rich-text>

    In my case, it helped to html decode the string before using lightning-formatted-rich-text. See vsyncs tips here