Merge pull request #485 from easyops-cn/steve/markdown-link

feat(): support external links

Author: weareoutman

bricks/markdown/package.json

@@ -31,6 +31,8 @@
     "build:main": "cross-env NODE_ENV=production build-next-bricks",
     "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir dist-types --project tsconfig.json",
     "build:manifest": "cross-env NODE_ENV=production build-next-bricks --manifest-only",
+    "test": "cross-env NODE_ENV='test' test-next",
+    "test:ci": "cross-env NODE_ENV='test' CI=true test-next",
     "prepublishOnly": "cp package.json package.json.bak && npm pkg delete dependencies",
     "postpublish": "mv package.json.bak package.json"
   },
@@ -53,6 +55,7 @@
     "@next-api-sdk/object-store-sdk": "1.1.0",
     "@next-core/element": "^1.2.19",
     "@next-core/react-element": "^1.0.38",
+    "@next-core/runtime": "^1.71.4",
     "@next-core/theme": "^1.6.1",
     "@next-shared/form": "^0.10.1",
     "@next-shared/markdown": "^0.7.4",

bricks/markdown/src/markdown-display/index.spec.tsx

@@ -1,32 +1,158 @@
-import React from "react";
-import { describe, test, expect, jest } from "@jest/globals";
+import { describe, test, expect } from "@jest/globals";
 import { act } from "react-dom/test-utils";
 import "./";
 import type { MarkdownDisplay } from "./index.js";
 
-jest.mock("@next-shared/markdown", () => ({
-  MarkdownComponent: jest.fn((props: { content?: string }) => (
-    <div>{props.content}</div>
-  )),
-}));
 jest.mock("@next-core/theme", () => ({}));
 
+async function waitForContent(
+  element: MarkdownDisplay,
+  selector: string,
+  timeout = 5000
+): Promise<Element> {
+  const startTime = Date.now();
+  while (Date.now() - startTime < timeout) {
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 50));
+    });
+    const found = element.shadowRoot?.querySelector(selector);
+    if (found) {
+      return found;
+    }
+  }
+  throw new Error(`Timeout waiting for selector: ${selector}`);
+}
+
 describe("eo-markdown-display", () => {
-  test("basic usage", async () => {
+  test("should render with content", async () => {
     const element = document.createElement(
       "eo-markdown-display"
     ) as MarkdownDisplay;
+    element.content = "# Hello World";
+
+    act(() => {
+      document.body.appendChild(element);
+    });
+
+    const h1 = await waitForContent(element, "h1");
+    expect(h1?.textContent).toBe("Hello World");
+
+    act(() => {
+      document.body.removeChild(element);
+    });
+  });
+
+  test("should render external links with target blank and icon", async () => {
+    const element = document.createElement(
+      "eo-markdown-display"
+    ) as MarkdownDisplay;
+    element.content = "[External Link](https://example.com)";
+
+    act(() => {
+      document.body.appendChild(element);
+    });
+
+    const link = await waitForContent(element, "a");
+    expect(link.getAttribute("target")).toBe("_blank");
+    expect(link.getAttribute("rel")).toBe("nofollow noopener noreferrer");
 
-    expect(element.shadowRoot).toBeFalsy();
+    // Should have external link icon
+    const icon = link.querySelector("eo-icon");
+    expect(icon?.getAttribute("lib")).toBe("lucide");
+    expect(icon?.getAttribute("icon")).toBe("external-link");
+
+    act(() => {
+      document.body.removeChild(element);
+    });
+  });
+
+  test("should render internal links without target blank", async () => {
+    const element = document.createElement(
+      "eo-markdown-display"
+    ) as MarkdownDisplay;
+    element.content = "[Internal Link](/some/path)";
 
     act(() => {
       document.body.appendChild(element);
     });
-    expect(element.shadowRoot?.childNodes.length).toBeGreaterThan(1);
+
+    const link = await waitForContent(element, "a");
+    expect(link.getAttribute("target")).toBeNull();
+    expect(link.getAttribute("rel")).toBeNull();
+
+    // Should not have external link icon
+    const icon = link.querySelector("eo-icon");
+    expect(icon).toBeNull();
+
+    act(() => {
+      document.body.removeChild(element);
+    });
+  });
+
+  test("should not add icon to external links with images", async () => {
+    const element = document.createElement(
+      "eo-markdown-display"
+    ) as MarkdownDisplay;
+    element.content =
+      "[![Image](https://example.com/image.png)](https://example.com)";
+
+    act(() => {
+      document.body.appendChild(element);
+    });
+
+    const link = await waitForContent(element, "a");
+    expect(link.getAttribute("target")).toBe("_blank");
+
+    // Should not have external link icon since it contains an image
+    const icon = link.querySelector("eo-icon");
+    expect(icon).toBeNull();
+
+    act(() => {
+      document.body.removeChild(element);
+    });
+  });
+
+  test("should render code blocks with syntax highlighting", async () => {
+    const element = document.createElement(
+      "eo-markdown-display"
+    ) as MarkdownDisplay;
+    element.content = "```js\nconst a = 1;\n```";
+
+    act(() => {
+      document.body.appendChild(element);
+    });
+
+    // Should use presentational.code-wrapper for code blocks
+    const codeWrapper = await waitForContent(
+      element,
+      "presentational\\.code-wrapper"
+    );
+    expect(codeWrapper).toBeTruthy();
+
+    act(() => {
+      document.body.removeChild(element);
+    });
+  });
+
+  test("should pass themeVariant to code wrapper", async () => {
+    const element = document.createElement(
+      "eo-markdown-display"
+    ) as MarkdownDisplay;
+    element.content = "```js\nconst a = 1;\n```";
+    element.themeVariant = "elevo";
+
+    act(() => {
+      document.body.appendChild(element);
+    });
+
+    const codeWrapper = await waitForContent(
+      element,
+      "presentational\\.code-wrapper"
+    );
+    expect(codeWrapper.getAttribute("themeVariant")).toBe("elevo");
 
     act(() => {
       document.body.removeChild(element);
     });
-    expect(element.shadowRoot?.childNodes.length).toBe(0);
   });
 });

bricks/markdown/src/markdown-display/index.tsx

@@ -1,11 +1,14 @@
 import React, { useMemo } from "react";
 import { createDecorators } from "@next-core/element";
 import { ReactNextElement, wrapBrick } from "@next-core/react-element";
+import { getBasePath } from "@next-core/runtime";
 import { useCurrentTheme } from "@next-core/react-runtime";
 import "@next-core/theme";
 import {
   MarkdownComponent,
+  type Element,
   type MarkdownComponentProps,
+  type RehypeExternalLinksOptions,
 } from "@next-shared/markdown";
 import {
   CodeWrapper,
@@ -25,6 +28,31 @@ export interface MarkdownDisplayProps {
   themeVariant?: "default" | "elevo";
 }
 
+const externalLinks: RehypeExternalLinksOptions = {
+  target: "_blank",
+  rel: ["nofollow", "noopener", "noreferrer"],
+  test: (element: Element) => {
+    return isExternalLink(element.properties.href);
+  },
+  content(element) {
+    if (containsImg(element)) {
+      return;
+    }
+    return {
+      type: "element",
+      tagName: "eo-icon",
+      properties: {
+        lib: "lucide",
+        icon: "external-link",
+      },
+      children: [],
+    };
+  },
+  contentProperties: {
+    className: "external-link-icon",
+  },
+};
+
 /**
  * 用于展示 markdown 内容的构件。
  */
@@ -85,6 +113,28 @@ function MarkdownDisplayComponent({
       content={content}
       components={components}
       shiki={shikiOptions}
+      externalLinks={externalLinks}
     />
   );
 }
+
+function containsImg(element: Element): boolean {
+  return element.children.some((child) => {
+    if (child.type === "element") {
+      return child.tagName === "img" || containsImg(child);
+    }
+    return false;
+  });
+}
+
+function isExternalLink(href: unknown): boolean {
+  if (typeof href !== "string") {
+    return false;
+  }
+  try {
+    const url = new URL(href, `${location.origin}${getBasePath()}`);
+    return url.origin !== location.origin;
+  } catch {
+    return true;
+  }
+}

bricks/markdown/src/markdown-display/styles.shadow.css

@@ -24,3 +24,17 @@ blockquote {
   margin-left: 0;
   margin-right: 0;
 }
+
+a {
+  color: var(--antd-btn-link-color);
+  text-decoration: none;
+
+  &:hover {
+    color: var(--antd-btn-link-hover-color);
+  }
+}
+
+.external-link-icon {
+  margin-left: 3px;
+  color: var(--text-color-disabled);
+}

bricks/markdown/test.config.js

@@ -0,0 +1,36 @@
+// @ts-check
+/** @type {import("@next-core/test-next").TestNextConfig} */
+export default {
+  transformModulePatterns: [
+    "(?:hast|unist|mdast|estree)-util-(?:[^/]+)/",
+    "unified/",
+    "bail/",
+    "devlop/",
+    "is-plain-obj/",
+    "trough/",
+    "vfile/",
+    "vfile-message/",
+    "decode-named-character-reference/",
+    "ccount/",
+    "escape-string-regexp/",
+    "markdown-table/",
+    "longest-streak/",
+    "zwitch/",
+    "trim-lines/",
+    "property-information/",
+    "is-absolute-url/",
+    "space-separated-tokens/",
+    "comma-separated-tokens/",
+    "micromark/",
+    "micromark-(?:[^/]+)/",
+    "remark-(?:[^/]+)/",
+    "rehype-(?:[^/]+)/",
+    "@shikijs/",
+    "shiki/",
+    "html-void-elements/",
+    "hastscript/",
+    "web-namespaces/",
+    "stringify-entities/",
+    "character-entities-(?:[^/]+)/",
+  ],
+};

shared/markdown/package.json

@@ -40,6 +40,7 @@
     "hast-util-to-string": "^3.0.0",
     "mermaid": "^11.9.0",
     "react": "0.0.0-experimental-ee8509801-20230117",
+    "rehype-external-links": "^3.0.0",
     "rehype-react": "^8.0.0",
     "remark-gfm": "^4.0.1",
     "remark-parse": "^11.0.0",

shared/markdown/src/MarkdownComponent.tsx

@@ -4,6 +4,9 @@ import { unified } from "unified";
 import remarkParse from "remark-parse";
 import remarkGfm from "remark-gfm";
 import remarkToRehype from "remark-rehype";
+import rehypeExternalLinks, {
+  type Options as RehypeExternalLinksOptions,
+} from "rehype-external-links";
 import rehypeReact, { Options as RehypeReactOptions } from "rehype-react";
 import type { Components } from "hast-util-to-jsx-runtime";
 import rehypeShikiFromHighlighter from "@shikijs/rehype/core";
@@ -15,13 +18,16 @@ import { getCodeLanguage } from "./utils.js";
 
 const production = { Fragment, jsx, jsxs };
 
+export type { RehypeExternalLinksOptions, Element };
+
 export interface MarkdownComponentProps {
   content?: string;
   components?: Partial<Components>;
   shiki?: {
     /** @default "dark-plus" */
     theme?: "light-plus" | "dark-plus";
   };
+  externalLinks?: RehypeExternalLinksOptions;
 }
 
 export async function preloadHighlighter(
@@ -62,6 +68,7 @@ export function MarkdownComponent({
   content,
   components,
   shiki,
+  externalLinks,
 }: MarkdownComponentProps): JSX.Element | null {
   const [reactContent, setReactContent] = useState<JSX.Element | null>(null);
   const theme = shiki?.theme ?? "dark-plus";
@@ -80,6 +87,7 @@ export function MarkdownComponent({
           .use(remarkParse)
           .use(remarkGfm)
           .use(remarkToRehype)
+          .use(rehypeExternalLinks, externalLinks)
           .use(rehypeMermaid)
           .use(rehypeFallbackLanguage)
           .use(rehypeShikiFromHighlighter, highlighter as any, {
@@ -111,7 +119,7 @@ export function MarkdownComponent({
     return () => {
       ignore = true;
     };
-  }, [components, content, theme]);
+  }, [components, content, externalLinks, theme]);
 
   return reactContent;
 }