Find and preprocess markdown links with mustache replacements (#2638)

* Find and preprocess markdown links with mustache replacements

* Add tests for UsePropertyReplacment revision

* Add test validating url encoding of link content only

* Fix whitespace

* Revise regex to match and ignore whitespace between blocks

* Add tests to validate revised regular expression behavior

Author: jlewin

package-lock.json

@@ -128,6 +128,7 @@
     "@playwright/test": "^1.49.1",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^12.1.2",
+    "@testing-library/react-hooks": "^8.0.1",
     "@types/node": "^22.10.5",
     "@vitejs/plugin-react-swc": "^3.7.1",
     "@vitest/coverage-v8": "^3.1.4",

package.json

@@ -12,6 +12,11 @@ const usePropertyReplacement = (content, properties, allowPropertyReplacement =
 
   useEffect(() => {
     if (content && allowPropertyReplacement) {
+      // Preprocess markdown links that contain mustache replacements in the URL part
+      if (hasMarkdownLinkMustacheCharacters(content)) {
+        content = preProcessMarkdownLinks(content, properties);
+      }
+
       setReplacedContent(replacePropertyTags(content, properties));
     } else {
       setReplacedContent(content);
@@ -21,12 +26,37 @@ const usePropertyReplacement = (content, properties, allowPropertyReplacement =
   return replacedContent;
 };
 
-export const replacePropertyTags = (content, properties, errOnMissing = false) => {
+// Match and process markdown links that contain mustache {{...}} replacements in the URL part
+function preProcessMarkdownLinks(content, properties) {
+  const urlRegex = /\]\s*\(([^)]*\{\{[^}]*\}\}[^)]*)\)/g;
+
+  return content.replace(urlRegex, (match, url) => {
+    // Get the part before the opening parenthesis
+    const beforeParen = match.substring(0, match.indexOf('('));
+    // Transform the URL
+    const replacedContent = replacePropertyTags(url, properties, false, true);
+
+    // Return the unchanged part + transformed URL in parentheses
+    return `](${replacedContent})`;
+  });
+}
+
+// Lightweight check for markdown links plausibly requiring preprocessing
+const hasMarkdownLinkMustacheCharacters = (text) => {
+  return text.includes('[') && text.includes(']') &&
+         text.includes('{') && text.includes('}') &&
+         text.includes('(') && text.includes(')');
+};
+
+export const replacePropertyTags = (content, properties, errOnMissing = false, urlEncodeReplacement = false) => {
   return content.replace(/(^|[^{])\{\{([^{][^}]*)}}/g, (matched, firstChar, tagName) => {
     if (errOnMissing && !properties[tagName]) {
       throw new Error(`Missing replacement property: ${tagName}`);
     }
-    return firstChar + _get(properties, tagName, "");
+
+    // Conditionally url encode replacement value
+    const replacement = _get(properties, tagName, "");
+    return firstChar + (urlEncodeReplacement ? encodeURIComponent(replacement) : replacement);
   });
 };
 

src/hooks/UsePropertyReplacement/UsePropertyReplacement.js

@@ -0,0 +1,100 @@
+import { renderHook } from '@testing-library/react-hooks';
+import { describe, expect, it } from "vitest";
+import usePropertyReplacement from "./UsePropertyReplacement";
+
+describe("usePropertyReplacement additional tests", () => {
+  const properties = {
+    name: "Test Name",
+    id: "123",
+    nested: {
+      property: "nested value",
+      deep: {
+        key: "deep value"
+      }
+    },
+    special: "value with special characters: !@#$%^&*()"
+  };
+
+  it("url encodes markdown link replacements", () => {
+    const content = "[link](https://example.com/{{nested.deep.key}})";
+    const { result } = renderHook(() => usePropertyReplacement(content, properties));
+    expect(result.current).toBe("[link](https://example.com/deep%20value)");
+  });
+
+  it("performs basic url encoded replacement in markdown link", () => {
+    const content = "[link](https://example.com/{{name}})";
+    const expected = "[link](https://example.com/Test%20Name)";
+    const { result } = renderHook(() => usePropertyReplacement(content, properties));
+    expect(result.current).toBe(expected);
+  });
+
+  it("ignores whitespace between link text and URL in markdown link", () => {
+    const content = "[link]    (https://example.com/{{name}})";
+    const expected = "[link](https://example.com/Test%20Name)";
+    const { result } = renderHook(() => usePropertyReplacement(content, properties));
+    expect(result.current).toBe(expected);
+  });
+
+  it("falls through to preexisting replacement behavior for invalid link format", () => {
+    const content = "[link] hello there (https://example.com/{{name}})";
+    const expected = "[link] hello there (https://example.com/Test Name)";
+    const { result } = renderHook(() => usePropertyReplacement(content, properties));
+    expect(result.current).toBe(expected);
+  });
+
+  it("does not url encode standalone replacements outside markdown links", () => {
+    const content = "[link](https://example.com/) blab blah {{name}} blah [another link](https://example.com/)";
+    const expected = "[link](https://example.com/) blab blah Test Name blah [another link](https://example.com/)";
+    const { result } = renderHook(() => usePropertyReplacement(content, properties));
+    expect(result.current).toBe(expected);
+  });
+
+  it("does not url encode standalone replacements when no markdown links are present", () => {
+    const content = "hello there (foo {{name}})";
+    const expected = "hello there (foo Test Name)";
+    const { result } = renderHook(() => usePropertyReplacement(content, properties));
+    expect(result.current).toBe(expected);
+  });
+
+  it("only url encodes replacements in markdown links", () => {
+    const content = "{{nested.deep.key}} [link](https://example.com/{{nested.deep.key}})";
+    const { result } = renderHook(() => usePropertyReplacement(content, properties, true, false));
+    expect(result.current).toBe("deep value [link](https://example.com/deep%20value)");
+  });
+
+  it("handles empty properties object", () => {
+    const content = "Hello, {{name}}!";
+    const { result } = renderHook(() => usePropertyReplacement(content, {}));
+    expect(result.current).toBe("Hello, !");
+  });
+
+  it("honors allowPropertyReplacement = false when data missing", () => {
+    const content = "Hello, {{name}}!";
+    const { result } = renderHook(() => usePropertyReplacement(content, {}, false));
+    expect(result.current).toBe("Hello, {{name}}!");
+  });
+
+  it("honors allowPropertyReplacement = false when data present", () => {
+    const content = "Hello, {{name}}!";
+    const { result } = renderHook(() => usePropertyReplacement(content, properties, false));
+    expect(result.current).toBe("Hello, {{name}}!");
+  });
+
+  it("processes content with multiple nested properties", () => {
+    const content = "Nested: {{nested.property}}, Deep: {{nested.deep.key}}";
+    const { result } = renderHook(() => usePropertyReplacement(content, properties));
+    expect(result.current).toBe("Nested: nested value, Deep: deep value");
+  });
+
+  it("handles content with no mustache tags", () => {
+    const content = "This is plain text.";
+    const { result } = renderHook(() => usePropertyReplacement(content, properties));
+    expect(result.current).toBe(content);
+  });
+
+  it("handles content with special characters in property values", () => {
+    const content = "Special: {{special}}";
+    const { result } = renderHook(() => usePropertyReplacement(content, properties));
+    expect(result.current).toBe("Special: value with special characters: !@#$%^&*()");
+  });
+});