Added copy as markdown functionality on docs. (#1066)

* Add copy as markdown button on docs.

* Fixes after review.

package.json

@@ -28,6 +28,7 @@
     "@docusaurus/theme-mermaid": "3.5.2",
     "@fortawesome/fontawesome-svg-core": "6.5.2",
     "@fortawesome/free-brands-svg-icons": "6.5.2",
+    "@fortawesome/free-regular-svg-icons": "^6.7.2",
     "@fortawesome/free-solid-svg-icons": "6.5.2",
     "@fortawesome/react-fontawesome": "0.2.2",
     "@mdx-js/react": "3.0.1",

src/components/CopyMarkdownButton/index.jsx

@@ -0,0 +1,45 @@
+import React, { useState } from "react";
+import { useLocation } from "@docusaurus/router";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faClone } from "@fortawesome/free-regular-svg-icons";
+import { faCheck } from "@fortawesome/free-solid-svg-icons";
+
+const CopyMarkdownButton = () => {
+  const [ isCopied, setIsCopied ] = useState(false);
+  const location = useLocation();
+
+  if(location.pathname === '/'){
+    return;
+  }
+
+  const url = `https://raw.githubusercontent.com/multiversx/mx-docs/refs/heads/main/docs${location.pathname}.md`;
+
+  const copyMarkdownToClipboard = async () => {
+    try {
+      const response = await fetch(url);
+      if (!response.ok) {
+        throw new Error("Markdown file not found!");
+      }
+
+      const markdown = await response.text();
+      await navigator.clipboard.writeText(markdown);
+      setIsCopied(true);
+
+      setTimeout(() => {
+        setIsCopied(false);
+      }, 1000);
+    } catch (error) {
+      console.error("Error copying markdown: ", error);
+    }  
+};
+
+  return (
+   <FontAwesomeIcon 
+   className={`copy-as-markdown-button ${isCopied ? 'check' : ''}`}
+   onClick={copyMarkdownToClipboard}
+   icon={!isCopied ? faClone : faCheck}
+   />
+  );
+};
+
+export default CopyMarkdownButton;

src/css/custom.css

@@ -494,6 +494,35 @@ body.no-scroll {
 display: none;
 } */
 
+.copy-as-markdown-button {
+  position: absolute;
+  right: 0;
+  top: -7.3rem;
+  color: #737373;
+  cursor: pointer;
+}
+
+.copy-as-markdown-button:hover {
+  color: #23f7dd;
+  transition: color 0.2s;
+}
+
+.copy-as-markdown-button.check {
+  color: #23f7dd;
+}
+
+@media (max-width: 996px) {
+  .copy-as-markdown-button {
+    top: -10.6rem;
+  }
+}
+
+@media (max-width: 375px) {
+  .copy-as-markdown-button {
+    top: -13rem;
+  }
+}
+
 /* -------------------- End Docsearch ------------------- */
 
 /* ====================================== GLOBAL ================================ */

src/theme/MDXContent/index.js

@@ -0,0 +1,12 @@
+import React from "react";
+import MDXContent from "@theme-original/MDXContent";
+import CopyMarkdownButton from "@site/src/components/CopyMarkdownButton";
+
+const MDXContentWrapper = (props) => (
+  <div className="relative">
+    <CopyMarkdownButton />
+    <MDXContent {...props} />
+  </div>
+);
+
+export default MDXContentWrapper;