diff --git a/designer/client/src/components/graph/EspNode/stickyNote.ts b/designer/client/src/components/graph/EspNode/stickyNote.ts
index afcfc78f0ac..79be1017419 100644
--- a/designer/client/src/components/graph/EspNode/stickyNote.ts
+++ b/designer/client/src/components/graph/EspNode/stickyNote.ts
@@ -56,28 +56,39 @@ const renderer = new marked.Renderer();
renderer.link = function (href, title, text) {
return `${text}`;
};
+
+renderer.hr = function () {
+ return `----`; // SVG doesn't support HTML hr inside foreignObject
+};
+
renderer.image = function (href, title, text) {
- // SVG don't support HTML img inside foreignObject
+ // SVG doesn't support HTML img inside foreignObject
return `${text} (attached img)`;
};
-const foreignObject = (stickyNote: StickyNote): MarkupNodeJSON => {
- let parsed;
- try {
- parsed = DOMPurify.sanitize(marked.parse(stickyNote.content, { renderer }), { ADD_ATTR: ["target"] });
- } catch (error) {
- console.error("Failed to parse markdown:", error);
- parsed = "Error: Could not parse markdown content. See error logs in console";
- }
- const singleMarkupNode = util.svg/* xml */ `
+const prepareSvgObject = (content: string) =>
+ util.svg/* xml */ `
- `[0];
- return singleMarkupNode as MarkupNodeJSON;
+ `[0] as MarkupNodeJSON;
+
+const escapeHtmlContent = (content: string) =>
+ content.replace(/&/g, "&").replace(//g, ">").replace(/"/g, """).replace(/'/g, "'");
+
+const foreignObject = (stickyNote: StickyNote): MarkupNodeJSON => {
+ try {
+ const contentWithHtmlTagsSanitized = escapeHtmlContent(stickyNote.content);
+ let parsed = DOMPurify.sanitize(marked.parse(contentWithHtmlTagsSanitized, { renderer }), { ADD_ATTR: ["target"] });
+ parsed = parsed.replace(/
/g, "
"); // SVG does not allow tag without closing and DOMPurify always remove closing tag.
+ return prepareSvgObject(parsed);
+ } catch (error) {
+ console.error("Error: Could not parse markdown:", error);
+ return prepareSvgObject("[!] Could not parse markdown content [!]\n
" + escapeHtmlContent(stickyNote.content));
+ }
};
export const stickyNotePath = "M 0 0 L 19 0 L 19 19 L 0 19 L 0 0";