Merge pull request #8 from vadimgierko/enable-copying-markdown-and-ht…

…ml-to-clipboard enable copying markdown and html to clipboard
vadimgierko · Sep 27, 2024 · 20f1919 · 20f1919
2 parents 9a41e10 + 043a988
commit 20f1919
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 6 deletions.
diff --git a/src/components/MarkdownEditor/index.js b/src/components/MarkdownEditor/index.js
@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import {
 	getMarkdownFromLocalStorage,
+	prerenderSanitizeHtml,
 	saveMarkdownInStorage,
 } from "@/utils/index";
 import MarkdownRenderer from "../MarkdownRenderer";
@@ -28,6 +29,17 @@ export default function MarkdownEditor({
 
 	const [localMarkdown, setLocalMarkdown] = useState();
 
+	async function copyToClipBoard(string) {
+		try {
+			await navigator.clipboard.writeText(string);
+			alert("Copied to clipboard");
+			console.log("Text copied to clipboard:");
+			console.log(string);
+		} catch (error) {
+			console.error("Failed to copy text: ", error);
+		}
+	}
+
 	// NEED TO FETCH FROM LOCAL STORAGE IN USE EFFECT
 	// BECAUSE IT RUNS ON CLIENT
 	useEffect(() => {
@@ -42,7 +54,7 @@ export default function MarkdownEditor({
 	return (
 		<div className="markdown-editor-component">
 			<div className="markdown-editor-navbar">
-				{/* SHOW EDITOR TOGGLE */}
+				{/* SHOW MARKDOWN EDITOR TOGGLE */}
 				<label className="me-1">
 					<input
 						type="checkbox"
@@ -55,9 +67,10 @@ export default function MarkdownEditor({
 								: showEditor
 						}
 					/>{" "}
-					editor
+					md editor
+					{/* editor */}
 				</label>
-				{/* SHOW RENDERER TOGGLE */}
+				{/* SHOW RENDERED HTML TOGGLE */}
 				<label className="me-1">
 					<input
 						type="checkbox"
@@ -72,15 +85,33 @@ export default function MarkdownEditor({
 					/>{" "}
 					renderer
 				</label>
+				<span
+					onClick={async () => {
+						await copyToClipBoard(localMarkdown);
+					}}
+					className="me-1"
+					style={{ cursor: "pointer" }}
+				>
+					<i className="bi bi-clipboard"></i> copy md
+				</span>
+				<span
+					style={{ cursor: "pointer" }}
+					onClick={async () => {
+						const htmlString = await prerenderSanitizeHtml(localMarkdown);
+						await copyToClipBoard(htmlString);
+					}}
+				>
+					<i className="bi bi-clipboard"></i> copy html
+				</span>
 				{/* CUSTOM RENDERER TOGGLE */}
-				<label className="">
+				{/* <label className="">
 					<input
 						type="checkbox"
 						checked={!isCustomRenderer}
 						onChange={toggleCustomRenderer}
 					/>{" "}
 					use react-markdown
-				</label>
+				</label> */}
 			</div>
 			<div
 				className={`markdown-editor-container ${

diff --git a/src/content/about.ts b/src/content/about.ts
@@ -57,6 +57,7 @@ I've added new editor/renderer features, upgraded tech stack (upgraded React and
 | inline CSS styles | ❌ | ✅ |
 | embed elements | ❌ | ✅ |
 | react-markdown/ custom renderer switching | ❌ | ✅ |
+| copy markdown or HTML to clipboard | ❌ | ✅ |
 
 ---
 

diff --git a/src/pages/editor/index.tsx b/src/pages/editor/index.tsx
@@ -4,7 +4,6 @@ export default function Editor({ pageData }: { pageData: PageData }) {
 	return <Page pageData={pageData} />;
 }
 
-// ❗✅ TODO: add getStaticProps here, even for editor
 export async function getStaticProps() {
 	const pageData: PageData = {
 		head: {

diff --git a/src/utils/index.js b/src/utils/index.js
@@ -14,6 +14,16 @@ export async function prerenderSanitizeHtml(markdown = "") {
 	return prerendered_sanitized_html;
 }
 
+export async function copyToClipBoard(string) {
+	try {
+		await navigator.clipboard.writeText(string);
+		console.log("Text copied to clipboard:");
+		console.log(string);
+	} catch (error) {
+		console.error("Failed to copy text: ", error);
+	}
+}
+
 //==================== LOCAL STORAGE =====================//
 
 export function getMarkdownFromLocalStorage() {