From 2a8cb58a82a5a4238fa36520f6fd112d9a3faaaf Mon Sep 17 00:00:00 2001
From: q <787025321@qq.com>
Date: Thu, 7 Aug 2025 15:29:06 +0800
Subject: [PATCH] feat: add copy page functions

---
 i18n/en/code.json                             |  24 ++++
 i18n/zh/code.json                             |  24 ++++
 src/components/CopyPageButton/index.tsx       | 117 ++++++++++++++++++
 .../CopyPageButton/styles.module.scss         |  18 +++
 src/css/markdown.scss                         |   1 -
 src/theme/DocItem/Content/index.tsx           |  48 +++++++
 src/theme/DocItem/Content/styles.module.css   |  15 +++
 .../DocRoot/Layout/Main/styles.module.css     |   1 -
 static/icons/copied.svg                       |   1 +
 static/icons/copy.svg                         |   1 +
 static/icons/down.svg                         |   1 +
 static/icons/markdown.svg                     |   1 +
 12 files changed, 250 insertions(+), 2 deletions(-)
 create mode 100644 src/components/CopyPageButton/index.tsx
 create mode 100644 src/components/CopyPageButton/styles.module.scss
 create mode 100644 src/theme/DocItem/Content/index.tsx
 create mode 100644 src/theme/DocItem/Content/styles.module.css
 create mode 100644 static/icons/copied.svg
 create mode 100644 static/icons/copy.svg
 create mode 100644 static/icons/down.svg
 create mode 100644 static/icons/markdown.svg

diff --git a/i18n/en/code.json b/i18n/en/code.json
index de4dd2f009..cbf0cef42d 100644
--- a/i18n/en/code.json
+++ b/i18n/en/code.json
@@ -780,5 +780,29 @@
   "Enterprise Features & Licensing": {
     "message": "Enterprise Features & Licensing",
     "description": "Enterprise Features & Licensing"
+  },
+  "Copy Page": {
+    "message": "Copy Page",
+    "description": "Copy Page"
+  },
+  "Copy page as Markdown for LLMs": {
+    "message": "Copy page as Markdown for LLMs",
+    "description": "Copy page as Markdown for LLMs"
+  },
+  "View as Markdown": {
+    "message": "View as Markdown",
+    "description": "View as Markdown"
+  },
+  "View this page as plain text": {
+    "message": "View this page as plain text",
+    "description": "View this page as plain text"
+  },
+  "Failed to copy markdown": {
+    "message": "Failed to copy markdown",
+    "description": "Failed to copy markdown"
+  },
+  "Copying...": {
+    "message": "Copying...",
+    "description": "Copying..."
   }
 }
diff --git a/i18n/zh/code.json b/i18n/zh/code.json
index ff69649140..784e0e3318 100644
--- a/i18n/zh/code.json
+++ b/i18n/zh/code.json
@@ -804,5 +804,29 @@
   "Enterprise Features & Licensing": {
     "message": "企业功能与许可",
     "description": "Enterprise Features & Licensing"
+  },
+  "Copy Page": {
+    "message": "复制页面",
+    "description": "Copy Page"
+  },
+  "Copy page as Markdown for LLMs": {
+    "message": "复制为 Markdown 格式，供大语言模型使用",
+    "description": "Copy page as Markdown for LLMs"
+  },
+  "View as Markdown": {
+    "message": "查看 Markdown 格式",
+    "description": "View as Markdown"
+  },
+  "View this page as plain text": {
+    "message": "查看纯文本",
+    "description": "View this page as plain text"
+  },
+  "Failed to copy markdown": {
+    "message": "无法复制 Markdown",
+    "description": "Failed to copy markdown"
+  },
+  "Copying...": {
+    "message": "正在复制...",
+    "description": "Copying..."
   }
 }
diff --git a/src/components/CopyPageButton/index.tsx b/src/components/CopyPageButton/index.tsx
new file mode 100644
index 0000000000..ef8805d75f
--- /dev/null
+++ b/src/components/CopyPageButton/index.tsx
@@ -0,0 +1,117 @@
+import React, { useState, useMemo, useCallback } from "react";
+import { Button, Dropdown, Flex, Spin } from "antd";
+import styles from "./styles.module.scss";
+import DownArrow from "@site/static/icons/down.svg";
+import MarkdownSvg from "@site/static/icons/markdown.svg";
+import CopySvg from "@site/static/icons/copy.svg";
+import CopiedSvg from "@site/static/icons/copied.svg";
+import { useDoc } from "@docusaurus/plugin-content-docs/client";
+import axios from "axios";
+import $t from "@site/src/utils/tools";
+// mark
+// import TurndownService from "turndown";
+// const turndownService = new TurndownService();
+// const getPageContentAsHtml = (): string | null => {
+//   const contentElement = document.querySelector("article");
+//   return contentElement ? contentElement.innerHTML : null;
+// };
+
+// const convertHtmlToMarkdown = (html: string): string => {
+//   return turndownService.turndown(html);
+// };
+const CopyDropdownButton: React.FC = () => {
+  const [loading, setLoading] = useState(false);
+  const [isCopied, setIsCopied] = useState(false);
+  const { metadata } = useDoc();
+  const sourceUrl = useMemo(() => {
+    return (
+      metadata?.source?.replace(
+        "@site",
+        "https://raw.githubusercontent.com/databendlabs/databend-docs/refs/heads/main"
+      ) || ""
+    );
+  }, [metadata]);
+  const handleCopy = useCallback((url: string) => {
+    if (!url) return;
+    setLoading(true);
+    axios
+      .get(url)
+      .then((response) => {
+        setIsCopied(true);
+        if (response.status === 200) {
+          navigator.clipboard.writeText(response.data);
+        } else {
+          alert($t("Failed to copy markdown"));
+        }
+      })
+      .finally(() => {
+        setLoading(false);
+        setTimeout(() => {
+          setIsCopied(false);
+        }, 3000);
+      });
+  }, []);
+  const menu = useMemo(() => {
+    const items = [
+      {
+        key: "copy",
+        icon: <CopySvg width={16} />,
+        label: $t("Copy Page"),
+        description: $t("Copy page as Markdown for LLMs"),
+      },
+      {
+        key: "markdown",
+        icon: <MarkdownSvg width={18} />,
+        label: $t("View as Markdown"),
+        description: $t("View this page as plain text"),
+      },
+    ];
+
+    return {
+      items: items.map(({ key, icon, label, description }) => ({
+        key,
+        label: (
+          <div>
+            <div style={{ fontWeight: 500 }}>{label}</div>
+            <div style={{ fontSize: 12, color: "#888" }}>{description}</div>
+          </div>
+        ),
+        icon: <Button icon={icon} />,
+      })),
+      onClick: ({ key }: { key: string }) => {
+        if (key === "copy") handleCopy(sourceUrl);
+        if (key === "markdown") window.open(sourceUrl, "_blank");
+      },
+    };
+  }, [sourceUrl, handleCopy]);
+  const renderButtonContent = useMemo(
+    () => (
+      <Flex align="center" gap={6}>
+        {loading ? (
+          <Spin size="small" />
+        ) : isCopied ? (
+          <CopiedSvg width={16} />
+        ) : (
+          <CopySvg width={16} />
+        )}
+        <span>{loading ? $t("Copying...") : $t("Copy Page")}</span>
+      </Flex>
+    ),
+    [loading, isCopied]
+  );
+
+  return (
+    <Dropdown.Button
+      onClick={() => handleCopy(sourceUrl)}
+      menu={menu}
+      placement="bottomRight"
+      icon={<DownArrow width={18} height={"auto"} />}
+      className={styles.buttonCainter}
+      trigger={["click"]}
+    >
+      {renderButtonContent}
+    </Dropdown.Button>
+  );
+};
+
+export default CopyDropdownButton;
diff --git a/src/components/CopyPageButton/styles.module.scss b/src/components/CopyPageButton/styles.module.scss
new file mode 100644
index 0000000000..df51154bd6
--- /dev/null
+++ b/src/components/CopyPageButton/styles.module.scss
@@ -0,0 +1,18 @@
+.buttonCainter {
+  max-width: 140px;
+  button {
+    font-weight: 500;
+    border: 1px solid var(--color-border) !important;
+    background-color: var(--color-bg-1) !important;
+    color: var(--color-text-0) !important;
+    &:hover {
+      background-color: var(--color-fill-1) !important;
+    }
+    &:last-child {
+      svg {
+        position: relative;
+        top: 2px;
+      }
+    }
+  }
+}
diff --git a/src/css/markdown.scss b/src/css/markdown.scss
index a33d9a3bbe..17930c1308 100644
--- a/src/css/markdown.scss
+++ b/src/css/markdown.scss
@@ -222,7 +222,6 @@
     &:hover {
       background-color: var(--bg-hover-copy);
       opacity: 1;
-      color: #fff !important;
     }
   }
   .theme-code-block:hover {
diff --git a/src/theme/DocItem/Content/index.tsx b/src/theme/DocItem/Content/index.tsx
new file mode 100644
index 0000000000..c076ecd35c
--- /dev/null
+++ b/src/theme/DocItem/Content/index.tsx
@@ -0,0 +1,48 @@
+import React, { type ReactNode } from "react";
+import clsx from "clsx";
+import { ThemeClassNames } from "@docusaurus/theme-common";
+import { useDoc } from "@docusaurus/plugin-content-docs/client";
+import Heading from "@theme/Heading";
+import MDXContent from "@theme/MDXContent";
+import type { Props } from "@theme/DocItem/Content";
+import styles from "./styles.module.css";
+import CopyPageButton from "@site/src/components/CopyPageButton";
+
+/**
+ Title can be declared inside md content or declared through
+ front matter and added manually. To make both cases consistent,
+ the added title is added under the same div.markdown block
+ See https://github.com/facebook/docusaurus/pull/4882#issuecomment-853021120
+
+ We render a "synthetic title" if:
+ - user doesn't ask to hide it with front matter
+ - the markdown content does not already contain a top-level h1 heading
+*/
+function useSyntheticTitle(): string | null {
+  const { metadata, frontMatter, contentTitle } = useDoc();
+  const shouldRender =
+    !frontMatter.hide_title && typeof contentTitle === "undefined";
+  if (!shouldRender) {
+    return null;
+  }
+  return metadata.title;
+}
+
+export default function DocItemContent({ children }: Props): ReactNode {
+  const syntheticTitle = useSyntheticTitle();
+  return (
+    <div className={clsx(ThemeClassNames.docs.docMarkdown, "markdown")}>
+      <section className={styles.headerSection}>
+        {syntheticTitle ? (
+          <header>
+            <Heading as="h1">{syntheticTitle}</Heading>
+          </header>
+        ) : (
+          <i />
+        )}
+        <CopyPageButton />
+      </section>
+      <MDXContent>{children}</MDXContent>
+    </div>
+  );
+}
diff --git a/src/theme/DocItem/Content/styles.module.css b/src/theme/DocItem/Content/styles.module.css
new file mode 100644
index 0000000000..6c883490fa
--- /dev/null
+++ b/src/theme/DocItem/Content/styles.module.css
@@ -0,0 +1,15 @@
+.headerSection {
+  display: flex;
+  justify-content: space-between;
+  align-items: "flex-start";
+  width: 100%;
+  padding-right: 12px;
+}
+
+@media (max-width: 900px) {
+  .headerSection {
+    flex-direction: column-reverse;
+    align-items: flex-start;
+    justify-conten: flex-start;
+  }
+}
diff --git a/src/theme/DocRoot/Layout/Main/styles.module.css b/src/theme/DocRoot/Layout/Main/styles.module.css
index 096eb06490..224ab937bc 100644
--- a/src/theme/DocRoot/Layout/Main/styles.module.css
+++ b/src/theme/DocRoot/Layout/Main/styles.module.css
@@ -2,7 +2,6 @@
   display: flex;
   width: 100%;
 }
-
 @media (min-width: 997px) {
   .docMainContainer {
     flex-grow: 1;
diff --git a/static/icons/copied.svg b/static/icons/copied.svg
new file mode 100644
index 0000000000..1742fd0e3a
--- /dev/null
+++ b/static/icons/copied.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1754549899320" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13628" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M705.194667 957.303467H139.810133A105.745067 105.745067 0 0 1 34.133333 851.626667V267.400533c0-58.368 47.377067-105.745067 105.6768-105.745066H705.194667c58.368 0 105.745067 47.377067 105.745066 105.745066v584.226134c0 58.299733-47.650133 105.6768-105.745066 105.6768zM139.810133 224.4608a43.076267 43.076267 0 0 0-42.871466 42.939733v584.226134c0 23.552 19.319467 42.871467 42.871466 42.871466H705.194667a43.076267 43.076267 0 0 0 42.939733-42.871466V267.400533a43.076267 43.076267 0 0 0-42.939733-42.939733H139.810133z" p-id="13629"></path><path d="M879.957333 863.6416h-68.266666a31.470933 31.470933 0 0 1-31.402667-31.402667c0-17.271467 14.1312-31.402667 31.402667-31.402666h68.266666c25.941333 0 47.104-21.162667 47.104-47.104V109.909333c0-25.941333-21.162667-47.104-47.104-47.104H287.402667c-25.941333 0-47.104 21.162667-47.104 47.104v60.416c0 17.271467-14.1312 31.402667-31.402667 31.402667a31.470933 31.470933 0 0 1-31.402667-31.402667V109.909333C177.493333 49.152 226.645333 0 287.402667 0h592.554666C940.714667 0 989.866667 49.152 989.866667 109.909333v644.096c0 60.416-49.425067 109.636267-109.909334 109.636267z" p-id="13630"></path><path d="M359.082667 746.9056a33.655467 33.655467 0 0 1-23.3472-9.284267L180.906667 589.141333a33.792 33.792 0 1 1 47.035733-48.674133l131.618133 126.5664 265.216-248.354133a33.792 33.792 0 1 1 46.148267 49.493333L382.293333 738.235733a36.386133 36.386133 0 0 1-23.3472 8.669867z" p-id="13631"></path></svg>
\ No newline at end of file
diff --git a/static/icons/copy.svg b/static/icons/copy.svg
new file mode 100644
index 0000000000..6c755bb849
--- /dev/null
+++ b/static/icons/copy.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1754548190020" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12533" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M337.322667 149.333333a17.322667 17.322667 0 0 0-17.322667 17.322667v98.56a42.666667 42.666667 0 0 1-85.333333 0v-98.56A102.656 102.656 0 0 1 337.322667 64h520.021333A102.656 102.656 0 0 1 960 166.656v520.021333a102.656 102.656 0 0 1-102.656 102.656h-99.669333a42.666667 42.666667 0 1 1 0-85.333333h99.669333a17.322667 17.322667 0 0 0 17.322667-17.322667V166.656a17.322667 17.322667 0 0 0-17.322667-17.322667H337.322667z" fill="#333333" p-id="12534"></path><path d="M64 337.322667A102.656 102.656 0 0 1 166.656 234.666667h520.021333A102.656 102.656 0 0 1 789.333333 337.322667v520.021333a102.656 102.656 0 0 1-102.656 102.656H166.656A102.656 102.656 0 0 1 64 857.344V337.322667zM166.656 320a17.322667 17.322667 0 0 0-17.322667 17.322667v520.021333c0 9.557333 7.765333 17.322667 17.322667 17.322667h520.021333a17.322667 17.322667 0 0 0 17.322667-17.322667V337.322667a17.322667 17.322667 0 0 0-17.322667-17.322667H166.656z" fill="#333333" p-id="12535"></path></svg>
\ No newline at end of file
diff --git a/static/icons/down.svg b/static/icons/down.svg
new file mode 100644
index 0000000000..9b9537721f
--- /dev/null
+++ b/static/icons/down.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1754542988842" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13723" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M225.834667 353.834667a42.666667 42.666667 0 0 1 60.330666 0L512 579.669333l225.834667-225.834666a42.666667 42.666667 0 1 1 60.330666 60.330666l-256 256a42.666667 42.666667 0 0 1-60.330666 0l-256-256a42.666667 42.666667 0 0 1 0-60.330666z" fill="#333333" p-id="13724"></path></svg>
\ No newline at end of file
diff --git a/static/icons/markdown.svg b/static/icons/markdown.svg
new file mode 100644
index 0000000000..8a7df5b37d
--- /dev/null
+++ b/static/icons/markdown.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1754546666616" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14803" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M85.333333 682.666667V341.333333h85.333334l128 128 128-128h85.333333v341.333334h-85.333333v-220.586667l-128 128-128-128V682.666667H85.333333m597.333334-341.333334h128v170.666667h106.666666l-170.666666 192-170.666667-192H682.666667V341.333333z" fill="" p-id="14804"></path></svg>
\ No newline at end of file