SPFx - Accessing/appending markup that has been entered in via a property pane text field to webpart

Question

I am currently working on an SPFx webpart.

Within my property pane I have:

PropertyPaneTextField('CreateNewVerticalNav', {
        label: 'Create New Vertical Nav',
        multiline: true,
        placeholder: 'Enter HTML...'
})

My idea here is to create a text area where markup can be entered.

I am currently accessing the entered in markup like such:

let inputNavHTML: string = this.properties.CreateNewVerticalNav;

$('#accordion-container').append(inputNavHTML);

The code above works as expected. As it produces:

However, I have read that all Property Pane properties need to be escaped with escape() to avoid script injections, but when I adjust the code like such:

let inputNavHTML: string = escape(this.properties.CreateNewVerticalNav);

The entered in markup doesn't append as expected. As it produces:

Has anyone been successful in allowing markup to be entered in their text areas and been able to append them to their webpart?

Thank you!

Answer 1

I logged escape(this.properties.multiLineText); to the console and below output is what it gave me when I entered <p style='color:red;'>hello</p> into the multi-line text property

<p style='color:red;'>hello</p>

The escape method would encode the following symbols: "&", "<", ">", '"', and "'"

So you need to replace these encoded values with the actual symbols using something like:

multiLineHtml = multiLineHtml.split('&lt;').join('<').split('&gt;').join('>').split('&#39;').join("'").split('&quot;').join('"');

You might want to use a better way to do the above string replacement. Assign this value to the div's innerHTML or whichever DOM element you want and it should render the html correctly.

Below is an image of my code and related output: