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 */ `
-
${parsed}
+
${content}
- `[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";