Merge pull request #127 from stuartmaxwell:copy-markdown

Copy-markdown
stuartmaxwell · Oct 15, 2024 · f154afa · f154afa
2 parents 356bbe0 + d4be48a
commit f154afa
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 59 deletions.
diff --git a/markdown_editor/templates/markdown_editor/markdown_editor.html b/markdown_editor/templates/markdown_editor/markdown_editor.html
@@ -9,14 +9,11 @@
 {% block content %}
 
   <h1>Markdown Editor</h1>
-  <div class="grid">
-    <div>
-      <p aria-busy="true" id="loading" style="font-style: italic">Loading...</p>
-      <textarea id="editor" py-keyup="preview" rows="20" style="font-family: monospace; font-size: 0.75rem;"></textarea>
-    </div>
-    <div>
-      <div id="preview"></div>
-    </div>
+  <div id="markdown-editor">
+    <div><button id="copymarkdown">Copy Markdown</button> <span id="loading" aria-busy="true">Loading...</span></div>
+    <div><button id="copyhtml">Copy HTML</button></div>
+    <div id="editor" py-keyup="preview"></div>
+    <div id="preview"></div>
   </div>
 
   <script type="py" config='{"packages":["markdown", "pygments", "pymdown-extensions"]}'>
@@ -28,7 +25,7 @@ <h1>Markdown Editor</h1>
       }
     md = markdown.Markdown(extensions=["pymdownx.superfences", "pymdownx.highlight", "pymdownx.emoji", "tables", "toc"], output_format="html", extension_configs=extension_configs)
     def preview(event):
-      input = document.querySelector("#editor").value
+      input = document.querySelector("#editor").innerText
       output = document.querySelector("#preview")
       output.innerHTML = md.convert(input)
       md.reset()
@@ -37,6 +34,39 @@ <h1>Markdown Editor</h1>
   <script>
     window.addEventListener('py:ready', function() {
       document.getElementById('loading').style.display = 'none';
+      document.getElementById('editor').setAttribute('contenteditable', 'true');
+      document.getElementById('editor').focus();
+
+    });
+
+    document.getElementById('copyhtml').addEventListener('click', function() {
+      const editorContent = document.getElementById('preview').innerHTML;
+
+      navigator.clipboard.writeText(editorContent).then(function() {
+        console.log('Content copied to clipboard');
+        // Optionally, provide user feedback here
+        document.getElementById('copyhtml').innerText = 'Copied! 👍';
+        setTimeout(() => {
+          document.getElementById('copyhtml').innerText = 'Copy HTML';
+        }, 3000);
+      }).catch(function(err) {
+        console.error('Failed to copy: ', err);
+      });
+    });
+
+    document.getElementById('copymarkdown').addEventListener('click', function() {
+      const editorContent = document.getElementById('editor').innerText;
+
+      navigator.clipboard.writeText(editorContent).then(function() {
+        console.log('Content copied to clipboard');
+        // Optionally, provide user feedback here
+        document.getElementById('copymarkdown').innerText = 'Copied! 👍';
+        setTimeout(() => {
+          document.getElementById('copymarkdown').innerText = 'Copy Markdown';
+        }, 3000);
+      }).catch(function(err) {
+        console.error('Failed to copy: ', err);
+      });
     });
   </script>
 

diff --git a/static/css/styles.css b/static/css/styles.css
@@ -23,7 +23,7 @@
   font-family: "Fira Sans";
   src: url("/static/fonts/firasans-bold.woff2") format("woff2"),
     url("/static/fonts/firasans-bold.woff") format("woff");
-  font-weight: bold;
+  font-weight: 700;
   font-style: normal;
   font-display: fallback;
 }
@@ -32,68 +32,26 @@
   font-family: "Fira Sans";
   src: url("/static/fonts/firasans-bolditalic.woff2") format("woff2"),
     url("/static/fonts/firasans-bolditalic.woff") format("woff");
-  font-weight: bold;
+  font-weight: 700;
   font-style: italic;
   font-display: fallback;
 }
 
-body {
-  font-family: "Fira Sans", Helvetica, Arial, sans-serif;
+:root {
+  --pico-font-family-sans-serif: "Fira Sans", Helvetica, Arial, sans-serif;
+  --pico-form-element-spacing-vertical: 0.5em;
 }
 
 /* Typography */
-body,
-html {
-  font-size: 19px;
-}
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
-  font-family: "Fira Sans", Helvetica, Arial, sans-serif;
-  font-weight: bold;
   font-style: italic;
-  line-height: 1.2;
-}
-h1 {
-  font-size: 2.667em;
-}
-h2 {
-  font-size: 2em;
-}
-h3 {
-  font-size: 1.333em;
-}
-h4 {
-  font-size: 1em;
-}
-h5 {
-  font-size: 0.944em;
-}
-h6 {
-  font-size: 0.889em;
-}
-p {
-  font-size: 1em;
-}
-@media screen and (max-width: 800px) {
-  h1 {
-    font-size: 1.778em;
-  }
-  h2 {
-    font-size: 1.5em;
-  }
-  h3 {
-    font-size: 1.167em;
-  }
 }
 
-/* img {
-  max-width: 100%;
-  height: auto;
-} */
 @media (max-width: 576px) {
   .hide-at-xs {
     display: none;
@@ -133,14 +91,36 @@ article {
 
 /* Bigger, bolder font with italics for the brand class */
 .brand {
-  font-size: 2em;
+  font-size: 1.75em;
   font-weight: bold;
   font-style: italic;
 }
 
 /* Bigger, bolder font with italics for the nav-menu class */
 .nav-menu {
-  font-size: 1.333em;
+  font-size: 1.25em;
   font-weight: bold;
   font-style: italic;
 }
+
+/* Markdown Editor Styles */
+#markdown-editor {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(400px, auto));
+  grid-template-rows: min-content minmax(600px, auto);
+  gap: 0.5em;
+}
+
+#editor,
+#preview {
+  height: 100%;
+  padding: 0.5em;
+  border: #2e3440 1px solid;
+  border-radius: 0.5em;
+  filter: drop-shadow(2px 4px 6px hsl(220deg 60% 50% / 0.3));
+}
+
+#editor {
+  font-family: var(--pico-font-family-monospace);
+  font-size: 0.875em;
+}
diff --git a/templates/base.html b/templates/base.html
@@ -12,7 +12,7 @@
 
     <link href="{% static "css/pico.jade.min.css" %}" rel="stylesheet">
     <link href="{% static "css/pygments/nord.min.css" %}" rel="stylesheet">
-    <link href="{% static "css/styles.min.css" %}" rel="stylesheet">
+    <link href="{% static "css/styles.css" %}" rel="stylesheet">
 
     <link rel="alternate" type="application/rss+xml" title="Latest Posts" href="{% rss_url %}">