Search Kit: HTML markup is visible to the end user
Overview
Currently, if you create a Form from a SearchKit search, HTML markup stored in displayed fields will be shown to the user. For example, Activity Details generally contain markup, so the end user will see something like "<p>Example details</p>".
Example use-case
- Create a new SearchKit search
- Search for: Activities
- Where: Details contains <p>
- Add Details column to the output table
- Save
- press Search
- Observe that HTML markup is visible
- click "Create form for search results table"
- Assign a Title and Page route
- Save
- Click View Page
- Observe that HTML markup is also visible in the Form
Current behaviour
HTML is shown to the end user.
Proposed behaviour
Ideally, the HTML would be rendered. Failing that, simply stripping out HTML tags would provide a better user experience.
Comments
There was a small amount of discussion about this in the chat, in which it was noted that it would be good if the schema knew which fields could contain HTML:
https://chat.civicrm.org/civicrm/pl/1f67mo4kkfgbbbuaksf9i1rceh
In a development environment, I tried replacing this line:
As a proof of concept, I added some code which strips out all HTML tags if the string begins with "<", but this is obviously improper. I didn't find a way to get it to render the HTML by intervening at that point. For reference, this is the code I inserted in place of line 173, but I'm not suggesting this as a solution:
let stringData = angular.isArray(colData.val) ? colData.val.join(', ') : colData.val;
if (typeof(stringData) == "string" && stringData.startsWith('<')) {
let cleanText = stringData.replace(/<\/?[^>]+(>|$)/g, "");
return cleanText;
}
else {
return stringData;
}
I tried a few variations on this suggestion for rendering HTML instead of displaying it verbatim, but in that context, my attempts just resulted in the addition of more HTML tags to the output:
https://stackoverflow.com/questions/50749487/rendering-data-with-html-tags-rendering-them