Move live query and template rendering outside of iframe

web/styles/editor.scss

@@ -443,6 +443,91 @@
     line-height: 0;
   }
 
+  .sb-markdown-widget {
+    overflow-y: scroll;
+    margin: 0 0 -4ch 0;
+    border: 1px solid var(--editor-directive-background-color);
+    border-radius: 5px;
+    white-space: nowrap;
+    position: relative;
+
+    ul,
+    ol {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+
+    ul {
+      list-style: none;
+      padding-left: 1ch;
+    }
+
+    ul li::before {
+      content: "\2022";
+      /* Add content: \2022 is the CSS Code/unicode for a bullet */
+      color: var(--editor-list-bullet-color);
+      display: inline-block;
+      /* Needed to add space between the bullet and the text */
+      width: 1em;
+      /* Also needed for space (tweak if needed) */
+      // margin-left: -1em;
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5 {
+      margin: 0;
+    }
+
+    a.wiki-link {
+      border-radius: 5px;
+      padding: 0 5px;
+      color: var(--editor-wiki-link-page-color);
+      background-color: var(--editor-wiki-link-page-background-color);
+      text-decoration: none;
+    }
+
+    span.task-deadline {
+      background-color: rgba(22, 22, 22, 0.07);
+    }
+
+    tt {
+      background-color: var(--editor-code-background-color);
+    }
+
+    // Button bar
+    &:hover .button-bar,
+    &:active .button-bar {
+      display: block;
+    }
+
+    .button-bar {
+      position: absolute;
+      right: 6px;
+      top: 6px;
+      display: none;
+      background: var(--editor-directive-background-color);
+      padding-inline: 3px;
+      padding-bottom: 1px;
+      border-radius: 5px;
+
+      button {
+        border: none;
+        background: none;
+        cursor: pointer;
+        color: var(--root-color);
+      }
+    }
+
+    .edit-button,
+    .reload-button {
+      margin-left: -10px;
+    }
+
+  }
+
   .sb-fenced-code-iframe {
     background-color: transparent;