Merge pull request #5 from craigraphics/save-file-computer

craigraphics · web-flow · commit 39a369c51fd8 · 2024-08-05T19:52:49.000-07:00
Ability to save markdown file to computer
diff --git a/index.html b/index.html
@@ -2,9 +2,9 @@
 <html lang="en" class="transition-colors duration-200">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/markdown.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>MarkItDown</title>
   </head>
   <body>
     <div id="root"></div>
diff --git a/public/markdown.svg b/public/markdown.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1097.9 1098.3">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #000;
+        font-family: MyriadPro-Regular, 'Myriad Pro';
+        font-size: 12px;
+      }
+
+      .cls-2 {
+        fill: gray;
+        fill-rule: evenodd;
+        stroke-width: 0px;
+      }
+    </style>
+  </defs>
+  <path class="cls-2" d="M88.1.6C48,4.3,19.1,26.9,4.4,65.9l-3.8,10.2L.1,542.7c-.3,325.1,0,470.3,1.4,478.5,4.9,32,29.8,60.7,62.9,72.6l11.1,3.9,468.4.5c327,.3,471,0,477.1-1.4,34.9-7.2,63.5-35,73.6-71.6,3.4-12.4,3.5-15.7,3.5-392.2V253.5l-5.5-5.5c-6.9-6.9-239.3-241.9-242.4-245.2-1.2-1.3-2.8-2.4-3.4-2.4C713.2-.2,95.7,0,88.1.6M123.5,90.2c-17.5,6.4-31.4,20.4-36.2,36.6-4.1,13.8-3.5,834.8.6,846.3,6.8,19,23.4,33.6,42,36.9,7,1.2,138.7,1.7,423.2,1.3l413.1-.5,11.1-4.1c13.1-4.9,24.8-15.6,30.7-28.2,5.6-11.8,5.9-34.5,5.4-388.7l-.4-297.1h-205.7V87.1h-337.9c-314.3.1-338.4.3-345.9,3M670.1,293.2c-1.7,2.8-57.5,100-63.2,110.1-2.4,4.2-12.1,20.7-21.6,36.6-9.5,15.9-20.6,34.8-24.5,42.1-4,7.2-7.7,13.1-8.3,13.1-.6,0-4.5-6-8.6-13.2-4.1-7.2-12.6-21.9-18.9-32.7-11-18.8-52.8-91.3-74.9-130.1-5.9-10.3-11.7-20.4-13-22.5l-2.3-3.8h-135.9v501.5h122.4v-156.8c.2-122,.6-156.1,2.2-153.7l7.7,11.9c3.1,4.8,7.4,11.9,9.5,15.6,4.3,7.7,28.9,48.4,39.6,65.4,3.8,6.1,12.2,19.7,18.5,30.2,6.4,10.5,14.8,24.3,18.8,30.6,3.9,6.3,11.1,18.2,15.9,26.4,8.9,15.2,16.2,25,18.5,25s95.5-149.7,101-161.5c.6-1.4,4.9-8.7,9.5-16.2,4.6-7.5,10.4-17.2,13-21.7,6.3-11,7.3-10.2,7,5.1-.1,7.2,0,77.6.1,156.4l.3,143.2h122.4l-.4-251.2-.4-251.2-66.6-.5c-52.7-.4-66.9,0-67.9,1.7"/>
+  <text class="cls-1" transform="translate(-3440.9 -86.7)"><tspan x="0" y="0">Lorem ipsum</tspan></text>
+</svg>
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/App.tsx b/src/App.tsx
@@ -3,6 +3,8 @@ import Markdown from 'react-markdown';
 import { ThemeProvider } from './context/ThemeContext';
 import ThemeToggle from './components/presentational/ThemeToggle';
 import MarkdownEditor from './components/MarkdownEditor';
+import { saveAsFile } from './utils/fileHelpers';
+
 import './App.css';
 
 function App() {
@@ -13,29 +15,47 @@ function App() {
     return () => clearTimeout(timeout);
   };
 
+  const handleSave = () => {
+    saveAsFile(userMarkdown, 'markdown-content.md', 'text/markdown');
+  };
+
   return (
     <ThemeProvider>
-      <main className="flex flex-col h-screen bg-white dark:bg-[#212424] text-gray-800 dark:text-gray-200 transition-colors duration-200">
-        <div className="container mx-auto px-4 py-8">
-          <div className="flex justify-between items-center mb-6">
-            <h1 className="text-4xl font-bold text-gray-900 dark:text-white">Markdown Online Formatter</h1>
+      <div className="flex flex-col h-screen bg-white dark:bg-[#212424] text-gray-800 dark:text-gray-200 transition-colors duration-200">
+        <nav className="bg-gray-100 dark:bg-gray-800 shadow-md">
+          <div className="container mx-auto px-4 py-3 flex justify-between items-center">
+            <h1 className="text-2xl font-bold text-gray-900 dark:text-white">MarkItDown</h1>
             <ThemeToggle />
           </div>
-          <p className="text-lg mb-6 text-gray-600 dark:text-gray-300 text-left">
-            This tool allows you to format text in real-time as you type. Enter your text in the field provided, and the
-            corresponding Markdown will be generated automatically. To apply formatting, simply select the text and
-            click the desired style button.
-          </p>
-        </div>
-
-        <div className="flex-grow flex flex-col md:flex-row gap-4 px-4 pb-4">
-          <MarkdownEditor onTextChange={handleTextChange} />
-
-          <div className="flex-1 p-4 bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-700  overflow-auto">
-            <Markdown className="prose dark:prose-invert max-w-none markdown-custom">{userMarkdown}</Markdown>
+        </nav>
+
+        <main className="flex-grow flex flex-col overflow-hidden">
+          <div className="container mx-auto px-4 py-6">
+            <h2 className="text-xl font-semibold mb-2">Markdown Online Formatter</h2>
+            <p className="text-sm mb-4 text-gray-600 dark:text-gray-300">
+              This tool allows you to format text in real-time as you type. Enter your text in the field provided, and
+              the corresponding Markdown will be generated automatically. To apply formatting, simply select the text
+              and click the desired style button.
+            </p>
+
+            <button
+              className="flex items-center justify-center flex-grow basis-0 min-w-[40px] h-8 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white font-medium rounded-md hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50 transition-colors duration-200 p-2"
+              onClick={handleSave}
+            >
+              Save as File
+            </button>
+          </div>
+
+          <div className="flex-grow flex flex-col md:flex-row gap-4 px-4 pb-4 overflow-auto">
+            <MarkdownEditor onTextChange={handleTextChange} />
+
+            <div className="flex-1 p-4 bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-700 overflow-auto">
+              <h3 className="dark:bg-gray-700 bg-gray-200 -m-4 mb-6 p-2 dark:text-gray-300 font-semibold">Preview</h3>
+              <Markdown className="prose dark:prose-invert max-w-none markdown-custom">{userMarkdown}</Markdown>
+            </div>
           </div>
-        </div>
-      </main>
+        </main>
+      </div>
     </ThemeProvider>
   );
 }
diff --git a/src/utils/fileHelpers.ts b/src/utils/fileHelpers.ts
@@ -0,0 +1,10 @@
+export const saveAsFile = (content: string, filename: string, contentType: string) => {
+  const a = document.createElement('a');
+  const file = new Blob([content], { type: contentType });
+
+  a.href = URL.createObjectURL(file);
+  a.download = filename;
+  a.click();
+
+  URL.revokeObjectURL(a.href);
+};
