@truedat/core 8.3.5 → 8.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/core",
-  "version": "8.3.5",
+  "version": "8.4.1",
   "description": "Truedat Web Core",
   "sideEffects": false,
   "module": "src/index.js",
@@ -51,7 +51,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@truedat/test": "8.3.5",
+    "@truedat/test": "8.4.1",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "redux-saga-test-plan": "^4.0.6"
@@ -66,6 +66,7 @@
     "@tiptap/starter-kit": "^3.20.0",
     "@xyflow/react": "^12.6.4",
     "axios": "^1.13.5",
+    "dompurify": "^3.3.3",
     "elkjs": "^0.10.0",
     "graphql": "^16.11.0",
     "immutable": "^4.3.7",
@@ -96,5 +97,5 @@
     "swr": "^2.3.3",
     "turndown": "^7.2.2"
   },
-  "gitHead": "12d1969c3403861d360fbdc24fd270ab1fece070"
+  "gitHead": "fc56d67c36dfe2d5db692b26ebdd2071b7518e1f"
 }

package/src/components/Markdown.js

@@ -8,6 +8,7 @@ import Heading from "@tiptap/extension-heading";
 import { Menu, Icon } from "semantic-ui-react";
 import { FormattedMessage } from "react-intl";
 import { marked } from "marked";
+import DOMPurify from "dompurify";
 import TurndownService from "turndown";
 import TextPromptModal from "./TextPromptModal";
 
@@ -74,12 +75,20 @@ const validateUrl = (value, allowEmpty = false) => {
   return { valid: true, value: urlWithProtocol };
 };
 
+function stripOuterCodeFence(text) {
+  const match = text.match(/^\s*```(?:markdown)?\s*\n([\s\S]*?)\n\s*```\s*$/);
+  return match ? match[1] : text;
+}
+
 function markdownToHtml(markdown) {
   if (!markdown || (typeof markdown === "string" && markdown.trim() === "")) {
     return "<p></p>";
   }
-  return marked
-    .parse(markdown, { async: false })
+
+  const cleaned = stripOuterCodeFence(markdown);
+
+  const withLinks = marked
+    .parse(cleaned, { async: false })
     .replace(
       /<a (?=[^>]*href=)/gi,
       `<a target="_blank" rel="noopener noreferrer" `,
@@ -88,6 +97,10 @@ function markdownToHtml(markdown) {
       /href="(?!https?:\/\/|mailto:)([^"]+)"/gi,
       (match, url) => `href="https://${url}"`,
     );
+
+  const safeHtml = DOMPurify.sanitize(withLinks, { ADD_ATTR: ["target"] });
+
+  return safeHtml;
 }
 
 function htmlToMarkdown(html) {

package/src/components/__tests__/Markdown.spec.js

@@ -106,6 +106,21 @@ describe("<MarkdownReader />", () => {
     );
     expect(rendered.container).toMatchSnapshot();
   });
+
+  it("renders MarkdownReader headings and links", () => {
+    const content = "## Title\n\n[link](https://example.com)";
+    const { container } = render(<MarkdownReader content={content} />);
+    const reader = container.querySelector(".markdown-reader");
+    expect(reader).toBeInTheDocument();
+
+    const anchor = container.querySelector("a");
+    expect(anchor).toBeInTheDocument();
+    expect(anchor.getAttribute("href")).toBe("https://example.com");
+    expect(anchor.getAttribute("target")).toBe("_blank");
+    expect(anchor.getAttribute("rel")).toBe("noopener noreferrer");
+
+    expect(reader.innerHTML).toBe(markdownToHtml(content));
+  });
 });
 
 describe("<MarkdownEditor />", () => {
@@ -137,4 +152,17 @@ describe("<MarkdownEditor />", () => {
     const editable = rendered.container.querySelector(".tiptap");
     expect(editable).toBeInTheDocument();
   });
+
+  it("renders MarkdownEditor formatted HTML from markdown value", async () => {
+    const value = "**Bold** text";
+    const { container } = render(<MarkdownEditor value={value} />);
+
+    await waitFor(() => {
+      const editable = container.querySelector(".tiptap");
+      expect(editable).toBeInTheDocument();
+    });
+
+    const tiptap = container.querySelector(".tiptap");
+    expect(tiptap.innerHTML).toBe("<p><strong>Bold</strong> text</p>");
+  });
 });

package/src/services/__tests__/i18nContent.spec.js

@@ -152,6 +152,7 @@ describe("services: i18nContent", () => {
     it("should identify translatable fields", () => {
       expect(isTranslatableField({ widget: "string" })).toBe(true);
       expect(isTranslatableField({ widget: "enriched_text" })).toBe(true);
+      expect(isTranslatableField({ widget: "markdown" })).toBe(true);
       expect(isTranslatableField({ widget: "textarea" })).toBe(true);
     });
 

package/src/services/i18nContent.js

@@ -1,6 +1,6 @@
 import _ from "lodash/fp";
 
-const translatableFieldWidgets = ["enriched_text", "string", "textarea"];
+const translatableFieldWidgets = ["enriched_text", "markdown", "string", "textarea"];
 
 export const splitTranslatableFields = (template) =>
   _.flow(
@@ -21,6 +21,10 @@ export const splitTranslatableFields = (template) =>
                   (w) => w == "enriched_text",
                   _.constant({ value: {}, origin: "user" }),
                 ],
+                [
+                  (w) => w == "markdown",
+                  _.constant({ value: "", origin: "user" }),
+                ],
                 [
                   (w) => w == "string",
                   _.constant({ value: "", origin: "user" }),