From e743576043830ac8ebfd685febb276fde0ba54c3 Mon Sep 17 00:00:00 2001
From: Peter Stuifzand <peter@stuifzand.eu>
Date: Sun, 9 Jan 2022 23:46:24 +0100
Subject: [PATCH] Problem: block markdown is not supported

Solution: render cells as block markdown
---
 editor/src/editor.js   |  4 +--
 editor/src/styles.scss | 81 +++++++++++++++++++++++++++++++++---------
 2 files changed, 65 insertions(+), 20 deletions(-)

diff --git a/editor/src/editor.js b/editor/src/editor.js
index d93c569..63f452d 100644
--- a/editor/src/editor.js
+++ b/editor/src/editor.js
@@ -393,9 +393,7 @@ function Editor(holder, input) {
             //     converted = converted.replace('#[[DONE]]', '<input class="checkbox" type="checkbox" checked />')
             //     todo = false;
             // }
-            MD.options.html = true
-            converted = MD.renderInline(converted)
-            MD.options.html = false
+            converted = MD.render(converted)
         }
 
         try {
diff --git a/editor/src/styles.scss b/editor/src/styles.scss
index b36d7f7..3e41e5b 100644
--- a/editor/src/styles.scss
+++ b/editor/src/styles.scss
@@ -13,7 +13,7 @@
 @import url('https://rsms.me/inter/inter.css');
 
 html {
-font-family: 'Inter', sans-serif;
+  font-family: 'Inter', sans-serif;
 }
 
 body {
@@ -29,6 +29,7 @@ body {
     content: "[[";
     color: #ccc;
   }
+
   .content a.wiki-link::after {
     content: "]]";
     color: #ccc;
@@ -85,6 +86,7 @@ body {
 .list-item:hover .fold {
   visibility: visible;
 }
+
 .list-item.selected .fold {
   visibility: visible;
 }
@@ -217,11 +219,12 @@ mark {
     width: 100%;
 
     .wiki-link {
-        &::before, &::after {
-            content: '';
-        }
+      &::before, &::after {
+        content: '';
+      }
     }
   }
+
   .sidebar-right {
     width: 100%;
     padding: 0 12px;
@@ -242,6 +245,7 @@ mark {
     height: 32px;
     text-align: center;
   }
+
   .calendar-update:active {
     border: 3px solid #aaa;
     border-radius: 4px;
@@ -276,12 +280,15 @@ mark {
       margin-top: 6px;
     }
   }
+
   .week {
     background: #ebebff;
   }
+
   .week a {
     color: black;
   }
+
   .day a {
     position: absolute;
     top: 0;
@@ -290,11 +297,13 @@ mark {
     left: 0;
     color: black;
   }
+
   .day .day-text {
     font-size: 9pt;
     display: block;
     margin-top: 3px;
   }
+
   .day .day-count {
     position: absolute;
     width: 100%;
@@ -306,11 +315,14 @@ mark {
     right: 0;
     bottom: 0;
   }
+
   .today {
     font-weight: bold;
   }
+
   .current {
     background: #f0f0f0;
+
     &.has-content::after {
       font-weight: bold;
       content: '\00B7';
@@ -331,11 +343,13 @@ mark {
 .wiki-list-editor {
   max-width: 960px;
 }
+
 .wiki-list-editor {
   .table-wrapper {
     max-width: 960px;
     overflow-x: auto;
   }
+
   .table-wrapper td {
     white-space: pre;
     text-wrap: none;
@@ -350,6 +364,7 @@ mark {
   flex-grow: 1;
   min-height: 24px;
 }
+
 #autocomplete {
   z-index: 1;
   width: 640px;
@@ -360,25 +375,31 @@ mark {
   background: white;
   border: 1px solid #ccc;
 }
+
 #autocomplete li > a {
   display: block;
 }
+
 #autocomplete li div {
   font-size: 0.8em;
   display: block;
   color: black;
 }
+
 #autocomplete li {
   padding: 4px 16px;
   max-height: 5em;
   overflow: hidden;
 }
+
 #autocomplete li:hover {
   background: #fefefe;
 }
+
 #autocomplete li.selected {
   background: lightblue;
 }
+
 #link-complete {
   z-index: 1;
   width: 280px;
@@ -395,6 +416,7 @@ mark {
   padding: 4px 16px;
   white-space: nowrap;
 }
+
 #link-complete li.selected {
   background: lightblue;
 }
@@ -431,6 +453,7 @@ ins {
 .checklist--item-text {
   align-self: center;
 }
+
 html {
   font-family: 'Inter', sans-serif;
 }
@@ -458,14 +481,26 @@ input.input-line {
   align-items: center;
 }
 
-
 textarea {
   border: none;
   resize: none;
 }
 
 .list-item .content {
-  white-space: pre-wrap;
+  //white-space: pre-wrap;
+}
+
+.wiki-list-editor .content {
+  blockquote {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  h1, h2, h3, h4, h5, h6 {
+    margin-bottom: 0;
+  }
+  ul, ol {
+    margin-top: 0;
+  }
 }
 
 .hide {
@@ -475,15 +510,19 @@ textarea {
 .selected {
   background: lightblue;
 }
+
 .fold.closed + .marker {
   border-color: lightblue;
 }
+
 .selected .marker {
   border-color: lightblue;
 }
+
 #editor {
   width: 750px;
 }
+
 .editor.selected .marker {
   /*border-color: white;*/
 }
@@ -540,11 +579,13 @@ input.input-line, input.input-line:active {
 .breadcrumb li {
   max-width: 200px;
 }
+
 .breadcrumb li > a {
   text-overflow: ellipsis;
   overflow: hidden;
   display: block;
 }
+
 .searchbar {
   position: relative;
   display: flex;
@@ -558,12 +599,14 @@ input.input-line, input.input-line:active {
     width: 400px;
   }
 }
+
 .wiki-table .expression {
   display: none;
 }
 
 .todo--todo {
 }
+
 .todo--done {
   text-decoration: line-through;
   text-decoration-skip: leading-spaces;
@@ -572,45 +615,49 @@ input.input-line, input.input-line:active {
 
 
 .tabs {
-    width: 100%;
+  width: 100%;
 }
 
 .tab-bar {
-    display: flex;
-    border-bottom: 1px solid black;
+  display: flex;
+  border-bottom: 1px solid black;
 }
 
 .tab-bar .tab {
-    padding: 8px 16px;
-    cursor: pointer;
+  padding: 8px 16px;
+  cursor: pointer;
 
-    border-bottom: 3px solid white;
+  border-bottom: 3px solid white;
 }
+
 .tab-bar .tab:first-child {
-    margin-left: 24px;
+  margin-left: 24px;
 }
 
 .tab-bar .tab.tab-active {
-    border-bottom: 3px solid black;
+  border-bottom: 3px solid black;
 }
+
 .tab-bar .tab + .tab {
-    margin-left: 24px;
+  margin-left: 24px;
 }
 
 .tab-page {
-    display: none;
+  display: none;
 }
 
 .tab.tab-active {
 }
 
 .tab-page.tab-active {
-    display: block;
+  display: block;
 }
+
 .search.input {
   border: none;
   padding: 2px;
 }
+
 .search.input.is-error {
   outline: red solid 4px;
 }