Markdown!

app/index.html

@@ -8,6 +8,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
     <link rel="stylesheet" type="text/css" href="../static/css/style.css" />
     <script type="text/javascript" src="../static/js/crypto-js.js"></script>
+    <script type="text/javascript" src="../static/js/marked.js"></script>
     <link rel="icon" href="../static/svg/favicon.svg">
     <script>
     if (window.location.href.endsWith('/index.html')) {
@@ -29,6 +30,7 @@
     <div class="bottomBar">
         <button id="removeBox" class="removeButton"></button>
         <button id="wordCountBox">0 words</button>
+        <button onclick="toggleMarkdown()">Toggle Markdown</button>
         <div class="textManipulator">
             <button id="textMinusBox">-</button>
             <button id="textSizeBox">16px</button>
@@ -78,7 +80,10 @@
         </div>
     </div>
 
-    <textarea id="noteBox" class="noteBox"></textarea>
+    <div class="noteBox">
+        <textarea id="noteBox" class="noteBoxText"></textarea>
+        <iframe src="about:blank" id="markdown" style="display: none;" sandbox="allow-same-origin allow-scripts"></iframe>
+    </div>
 
     <script type="text/javascript" src="../static/js/main.js"></script>
     <script>

static/css/style.css

@@ -345,6 +345,20 @@ body {
     width: calc(100% - 180px - 7px - 6px);
     height: calc(100% - 50px - 6px - 8px - 30px);
     font-family: "Inter", sans-serif;
+    display: flex;
+}
+
+.noteBoxText {
+    background-color: var(--editor);
+    color: var(--text-color);
+    border: none;
+    width: 100%;
+}
+
+iframe#markdown {
+    width: 100%;
+    border: none;
+    border-left: solid var(--bar) 1px;
 }
 
 .noteBox:focus {

static/js/main.js

@@ -31,6 +31,7 @@ function truncateString(str, num) {
 
 let secretkey = localStorage.getItem("DONOTSHARE-secretkey")
 let password = localStorage.getItem("DONOTSHARE-password")
+let currentFontSize = 16
 
 let usernameBox = document.getElementById("usernameBox")
 let optionsCoverDiv = document.getElementById("optionsCoverDiv")
@@ -58,6 +59,7 @@ let noteBox = document.getElementById("noteBox")
 let loadingStuff = document.getElementById("loadingStuff")
 let burgerButton = document.getElementById("burgerButton")
 let exportNotesButton = document.getElementById("exportNotesButton")
+let markdown = document.getElementById('markdown');
 
 let selectedNote = 0
 let timer
@@ -180,9 +182,11 @@ closeErrorButton.addEventListener("click", (event) => {
 });
 
 function updateFont() {
-    let currentFontSize = localStorage.getItem("SETTING-fontsize")
+    currentFontSize = localStorage.getItem("SETTING-fontsize")
     noteBox.style.fontSize = currentFontSize + "px"
     textSizeBox.innerText = currentFontSize + "px"
+    var style = "<style>body { color: " + getComputedStyle(document.documentElement).getPropertyValue('--text-color') + "; font-size: " + currentFontSize + "px; }</style>";
+    markdown.contentWindow.document.head.innerHTML = style;
 }
 
 async function waitforedit() {
@@ -394,6 +398,10 @@ function updateWordCount() {
     wordCountBox.innerText = wordCount + " words"
 }
 
+function renderMarkDown() {
+    markdown.contentWindow.document.body.innerHTML = marked.parse(noteBox.value)
+}
+
 function selectNote(nameithink) {
     document.querySelectorAll(".noteButton").forEach((el) => el.classList.remove("selected"));
     let thingArray = Array.from(document.querySelectorAll(".noteButton")).find(el => el.id == nameithink);
@@ -428,9 +436,11 @@ function selectNote(nameithink) {
 
                 noteBox.value = originalText
                 updateWordCount()
+                renderMarkDown()
 
                 noteBox.addEventListener("input", (event) => {
                     updateWordCount()
+                    renderMarkDown()
                     clearTimeout(timer);
                     timer = setTimeout(() => {
                         let encryptedTitle = "New note"
@@ -490,6 +500,7 @@ function updateNotes() {
                 noteBox.value = ""
                 clearTimeout(timer)
                 updateWordCount()
+                renderMarkDown()
 
                 let responseData = await response.json()
                 for (let i in responseData) {
@@ -626,6 +637,14 @@ function firstNewVersion() {
     }
 }
 
+function toggleMarkdown() {
+    if (markdown.style.display === 'none') {
+        markdown.style.display = 'inherit';
+    } else {
+        markdown.style.display = 'none';
+    }
+}
+
 exportNotesButton.addEventListener("click", (event) => {
     exportNotesButton.innerText = "Downloading..."
     exportNotes()
@@ -654,6 +673,11 @@ removeBox.addEventListener("click", (event) => {
     }
 });
 
+document.addEventListener("DOMContentLoaded", function() {
+    var style = "<style>body { color: " + getComputedStyle(document.documentElement).getPropertyValue('--text-color') + "; }</style>";
+    markdown.contentWindow.document.head.innerHTML = style;
+});
+
 if (isFirstTimeVisitor() && /Android|iPhone|iPod/i.test(navigator.userAgent)) {
     displayError("To use Burgernotes:\n  Swipe Right on a note to open it\n  Swipe left in the text boxes to return to notes\n  Click on a note to highlight it")
 }
@@ -662,4 +686,4 @@ if (firstNewVersion()) {
     displayError("What's new in Burgernotes 1.2-1?\nNotes now support live editing\nFixed various bugs and issues in the client")
 }
 
-waitforedit()
+//waitforedit()