Add copy markdown button

packages/docusaurus-plugin-openapi-docs/src/index.ts

@@ -236,6 +236,8 @@ show_extensions: true
 {{/frontMatter.show_extensions}}
 ---
 
+export const rawMarkdown = '{{{markdown_b64}}}';
+
 {{{markdown}}}
       `;
 
@@ -250,6 +252,8 @@ hide_title: true
 custom_edit_url: null
 ---
 
+export const rawMarkdown = '{{{markdown_b64}}}';
+
 {{{markdown}}}
 
 \`\`\`mdx-code-block
@@ -269,6 +273,8 @@ description: "{{{frontMatter.description}}}"
 custom_edit_url: null
 ---
 
+export const rawMarkdown = '{{{markdown_b64}}}';
+
 {{{markdown}}}
 
 \`\`\`mdx-code-block
@@ -295,6 +301,8 @@ sample: {{{frontMatter.sample}}}
 custom_edit_url: null
 ---
 
+export const rawMarkdown = '{{{markdown_b64}}}';
+
 {{{markdown}}}
             `;
 
@@ -329,6 +337,8 @@ custom_edit_url: null
         }
         const markdown = pageGeneratorByType[item.type](item as any);
         item.markdown = markdown;
+        const markdown_b64 = Buffer.from(markdown).toString("base64");
+        (item as any).markdown_b64 = markdown_b64;
         if (item.type === "api") {
           // opportunity to compress JSON
           // const serialize = (o: any) => {

packages/docusaurus-plugin-openapi-docs/src/types.ts

@@ -126,6 +126,7 @@ export interface ApiPageMetadata extends ApiMetadataBase {
   type: "api";
   api: ApiItem;
   markdown?: string;
+  markdown_b64?: string;
 }
 
 export interface ApiItem extends OperationObject {
@@ -145,6 +146,7 @@ export interface InfoPageMetadata extends ApiMetadataBase {
   type: "info";
   info: ApiInfo;
   markdown?: string;
+  markdown_b64?: string;
   securitySchemes?: {
     [key: string]: SecuritySchemeObject;
   };
@@ -154,19 +156,22 @@ export interface TagPageMetadata extends ApiMetadataBase {
   type: "tag";
   tag: TagObject;
   markdown?: string;
+  markdown_b64?: string;
 }
 
 export interface SchemaPageMetadata extends ApiMetadataBase {
   type: "schema";
   schema: SchemaObject;
   markdown?: string;
+  markdown_b64?: string;
 }
 
 export interface TagGroupPageMetadata extends ApiMetadataBase {
   type: "tagGroup";
   name: string;
   tags: TagObject[];
   markdown?: string;
+  markdown_b64?: string;
 }
 
 export type ApiInfo = InfoObject;

packages/docusaurus-theme-openapi-docs/src/theme-openapi.d.ts

@@ -275,6 +275,15 @@ declare module "@theme/ApiExplorer/Server" {
   export default function Server(): JSX.Element;
 }
 
+declare module "@theme/CopyMarkdownButton" {
+  export interface CopyMarkdownButtonProps {
+    markdown: string | undefined;
+  }
+  export default function CopyMarkdownButton(
+    props: CopyMarkdownButtonProps
+  ): JSX.Element;
+}
+
 declare module "@theme/ApiExplorer/ApiCodeBlock" {
   export default function ApiCodeBlock(): JSX.Element;
 }

packages/docusaurus-theme-openapi-docs/src/theme/ApiItem/index.tsx

@@ -21,6 +21,7 @@ import type { Props } from "@theme/DocItem";
 import DocItemMetadata from "@theme/DocItem/Metadata";
 import SkeletonLoader from "@theme/SkeletonLoader";
 import clsx from "clsx";
+import CopyMarkdownButton from "@theme/CopyMarkdownButton";
 import {
   ParameterObject,
   ServerObject,
@@ -159,6 +160,7 @@ export default function ApiItem(props: Props): JSX.Element {
   }
 
   if (api) {
+    const { rawMarkdown } = MDXComponent as any;
     return (
       <DocProvider content={props.content}>
         <HtmlClassNameProvider className={docHtmlClassName}>
@@ -167,6 +169,7 @@ export default function ApiItem(props: Props): JSX.Element {
             <Provider store={store2}>
               <div className={clsx("row", "theme-api-markdown")}>
                 <div className="col col--7 openapi-left-panel__container">
+                  <CopyMarkdownButton markdown={rawMarkdown} />
                   <MDXComponent />
                 </div>
                 <div className="col col--5 openapi-right-panel__container">
@@ -183,13 +186,15 @@ export default function ApiItem(props: Props): JSX.Element {
       </DocProvider>
     );
   } else if (schema) {
+    const { rawMarkdown } = MDXComponent as any;
     return (
       <DocProvider content={props.content}>
         <HtmlClassNameProvider className={docHtmlClassName}>
           <DocItemMetadata />
           <DocItemLayout>
             <div className={clsx("row", "theme-api-markdown")}>
               <div className="col col--7 openapi-left-panel__container schema">
+                <CopyMarkdownButton markdown={rawMarkdown} />
                 <MDXComponent />
               </div>
               <div className="col col--5 openapi-right-panel__container">

packages/docusaurus-theme-openapi-docs/src/theme/CopyMarkdownButton/_CopyMarkdownButton.scss

@@ -0,0 +1,39 @@
+.openapi-copy-markdown-btn-icons {
+  position: relative;
+  width: 1.125rem;
+  height: 1.125rem;
+  margin-right: 0.25rem;
+}
+
+.openapi-copy-markdown-btn-icon,
+.openapi-copy-markdown-btn-icon--success {
+  position: absolute;
+  top: 0;
+  left: 0;
+  fill: currentColor;
+  opacity: inherit;
+  width: inherit;
+  height: inherit;
+  transition: all 0.15s ease;
+}
+
+.openapi-copy-markdown-btn-icon--success {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) scale(0.33);
+  opacity: 0;
+  color: #00d600;
+}
+
+.openapi-copy-markdown-btn--copied {
+  .openapi-copy-markdown-btn-icon {
+    transform: scale(0.33);
+    opacity: 0;
+  }
+
+  .openapi-copy-markdown-btn-icon--success {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 1;
+    transition-delay: 0.075s;
+  }
+}

packages/docusaurus-theme-openapi-docs/src/theme/CopyMarkdownButton/index.tsx

@@ -0,0 +1,59 @@
+import React, { useCallback, useRef, useState, useEffect } from "react";
+import clsx from "clsx";
+import copy from "copy-text-to-clipboard";
+
+interface CopyMarkdownButtonProps {
+  markdown: string | undefined;
+}
+
+export default function CopyMarkdownButton({ markdown }: CopyMarkdownButtonProps) {
+  const [isCopied, setIsCopied] = useState(false);
+  const copyTimeout = useRef<number | undefined>(undefined);
+
+  const handleCopy = useCallback(() => {
+    if (!markdown) return;
+    try {
+      const decoded = atob(markdown);
+      copy(decoded);
+      setIsCopied(true);
+      copyTimeout.current = window.setTimeout(() => {
+        setIsCopied(false);
+      }, 1000);
+    } catch {
+      // ignore decoding errors
+    }
+  }, [markdown]);
+
+  useEffect(() => () => window.clearTimeout(copyTimeout.current), []);
+
+  if (!markdown) return null;
+
+  return (
+    <button
+      type="button"
+      aria-label="Copy markdown to clipboard"
+      title="Copy markdown"
+      className={clsx(
+        "button button--sm button--secondary margin-bottom--sm openapi-copy-markdown-btn",
+        isCopied && "openapi-copy-markdown-btn--copied"
+      )}
+      onClick={handleCopy}
+    >
+      <span className="openapi-copy-markdown-btn-icons" aria-hidden="true">
+        <svg
+          className="openapi-copy-markdown-btn-icon"
+          viewBox="0 0 24 24"
+        >
+          <path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" />
+        </svg>
+        <svg
+          className="openapi-copy-markdown-btn-icon--success"
+          viewBox="0 0 24 24"
+        >
+          <path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" />
+        </svg>
+      </span>
+      {isCopied ? "Copied" : "Copy Markdown"}
+    </button>
+  );
+}

packages/docusaurus-theme-openapi-docs/src/theme/styles.scss

@@ -27,6 +27,7 @@
 @use "./ApiExplorer/ApiCodeBlock/ExpandButton/ExpandButton";
 @use "./ApiExplorer/ApiCodeBlock/Line/Line";
 @use "./ApiExplorer/ApiCodeBlock/WordWrapButton/WordWrapButton";
+@use "./CopyMarkdownButton/CopyMarkdownButton";
 
 /* Schema Styling */
 @use "./ParamsItem/ParamsItem";