Reduce vertical jump for other blocks

web/cm_plugins/block.ts

@@ -1,6 +1,7 @@
 import { Decoration, EditorState, syntaxTree } from "../deps.ts";
 import {
   decoratorStateField,
+  HtmlWidget,
   invisibleDecoration,
   isCursorInRange,
 } from "./util.ts";
@@ -38,6 +39,17 @@ function hideNodes(state: EditorState) {
               class: "sb-line-frontmatter-outside",
             }).range(node.from),
           );
+          if (parent.from === node.from) {
+            // Only put this on the first line of the frontmatter
+            widgets.push(
+              Decoration.widget({
+                widget: new HtmlWidget(
+                  `frontmatter`,
+                  "sb-frontmatter-marker",
+                ),
+              }).range(node.from),
+            );
+          }
         }
       }
 

web/cm_plugins/clean.ts

@@ -16,7 +16,7 @@ import { cleanCommandLinkPlugin } from "./command_link.ts";
 export function cleanModePlugins(editor: Editor) {
   return [
     linkPlugin(editor),
-    directivePlugin(editor),
+    directivePlugin(),
     blockquotePlugin(),
     admonitionPlugin(editor),
     hideMarksPlugin(),

web/cm_plugins/directive.ts

@@ -3,12 +3,11 @@ import {
   directiveStartRegex,
 } from "../../plug-api/lib/query.ts";
 import { Decoration, EditorState, syntaxTree } from "../deps.ts";
-import type { Editor } from "../editor.tsx";
 import { decoratorStateField, HtmlWidget, isCursorInRange } from "./util.ts";
 
 // Does a few things: hides the directives when the cursor is not placed inside
 // Adds a class to the start and end of the directive when the cursor is placed inside
-export function directivePlugin(editor: Editor) {
+export function directivePlugin() {
   return decoratorStateField((state: EditorState) => {
     const widgets: any[] = [];
 
@@ -35,20 +34,12 @@ export function directivePlugin(editor: Editor) {
               console.error("Something went wrong with this directive");
               return;
             }
-            const [fullMatch, directiveName] = match;
+            const [_fullMatch, directiveName] = match;
             widgets.push(
               Decoration.widget({
                 widget: new HtmlWidget(
                   `#${directiveName}`,
                   "sb-directive-placeholder",
-                  (e) => {
-                    e.stopPropagation();
-                    editor.editorView?.dispatch({
-                      selection: {
-                        anchor: from + fullMatch.indexOf(directiveName),
-                      },
-                    });
-                  },
                 ),
               }).range(from),
             );
@@ -76,20 +67,12 @@ export function directivePlugin(editor: Editor) {
               console.error("Something went wrong with this directive");
               return;
             }
-            const [fullMatch, directiveName] = match;
+            const [_fullMatch, directiveName] = match;
             widgets.push(
               Decoration.widget({
                 widget: new HtmlWidget(
                   `/${directiveName}`,
                   "sb-directive-placeholder",
-                  (e) => {
-                    e.stopPropagation();
-                    editor.editorView?.dispatch({
-                      selection: {
-                        anchor: from + fullMatch.indexOf(directiveName),
-                      },
-                    });
-                  },
                 ),
               }).range(from),
             );

web/editor.tsx

@@ -111,7 +111,7 @@ import { CollabState } from "./cm_plugins/collab.ts";
 import { collabSyscalls } from "./syscalls/collab.ts";
 import { vim } from "./deps.ts";
 
-const frontMatterRegex = /^---\s*$(.*?)---\s*$/ms;
+const frontMatterRegex = /^---\n(.*?)---\n/ms;
 
 class PageState {
   constructor(
@@ -317,7 +317,7 @@ export class Editor {
         const match = frontMatterRegex.exec(pageText);
         if (match) {
           // Frontmatter found, put cursor after it
-          initialCursorPos = match[0].length + 1;
+          initialCursorPos = match[0].length;
         }
         // By default scroll to the top
         this.editorView.scrollDOM.scrollTop = 0;

web/styles/editor.scss

@@ -118,31 +118,39 @@
   }
 
   .cm-list-bullet {
-		position: relative;
-		visibility: hidden;
-	}
-	.cm-task-checked {
-	 	text-decoration: line-through !important;
+    position: relative;
+    visibility: hidden;
   }
 
-  .sb-checkbox > input[type=checkbox] {
+  .cm-task-checked {
+    text-decoration: line-through !important;
+  }
+
+  .sb-checkbox>input[type=checkbox] {
     width: 3ch;
   }
 
-	.cm-list-bullet::after {
-		visibility: visible;
-		position: absolute;
+  .cm-list-bullet::after {
+    visibility: visible;
+    position: absolute;
     color: rgb(150, 150, 150);
-		content: "\2022"; /* U+2022 BULLET */
-	}
+    content: "\2022";
+    /* U+2022 BULLET */
+  }
 
-  .sb-directive-start .sb-comment, .sb-directive-end .sb-comment {
+  .sb-directive-start .sb-comment,
+  .sb-directive-end .sb-comment {
     position: relative;
     left: -12px;
   }
 
-  .sb-line-frontmatter-outside, .sb-line-code-outside {
-    display: none;
+  .sb-line-frontmatter-outside,
+  .sb-line-code-outside {
+    .sb-meta {
+      color: transparent;
+    }
+
+    color: transparent;
   }
 
   .sb-blockquote-outside {
@@ -163,19 +171,20 @@
       width: 100%;
       border-spacing: 0;
     }
-    
+
     thead tr {
-        background-color: #333;
-        color: #eee;
-        font-weight: bold;
+      background-color: #333;
+      color: #eee;
+      font-weight: bold;
     }
-    
-    th, td {
-        padding: 8px;
+
+    th,
+    td {
+      padding: 8px;
     }
-    
+
     tbody tr:nth-of-type(even) {
-        background-color: #f3f3f3;
+      background-color: #f3f3f3;
     }
   }
 
@@ -183,13 +192,13 @@
     border-left: 1px solid rgb(74, 74, 74);
   }
 
-  .sb-line-blockquote.sb-line-ul.sb-line-li > .sb-quote.sb-meta:first-child {
+  .sb-line-blockquote.sb-line-ul.sb-line-li>.sb-quote.sb-meta:first-child {
     margin-left: -1ch;
   }
-  
+
 }
 
 .cm-scroller {
   // Give some breathing space at the bottom of the screen
   padding-bottom: 20em;
-}
+}

web/styles/theme.scss

@@ -374,11 +374,22 @@ sb-admonition-warning .sb-admonition-icon {
   color: rgb(255, 145, 0);
 }
 
+// Frontmatter
+
 .sb-frontmatter {
   background-color: rgba(255, 246, 189, 0.5);
   color: #676767;
 }
 
+.sb-frontmatter-marker {
+  color: #890000;
+  float: right;
+  font-size: 80%;
+  padding-right: 7px;
+  opacity: 0.25;
+}
+
+
 // Directives
 
 
@@ -416,7 +427,9 @@ sb-admonition-warning .sb-admonition-icon {
   .sb-directive-placeholder {
     color: var(--directive-font-color) !important;
     opacity: 0.25;
-    padding-left: 5ch;
+    padding-right: 7px;
+    float: right;
+    font-size: 80%;
   }
 
   * {
@@ -430,7 +443,9 @@ sb-admonition-warning .sb-admonition-icon {
   .sb-directive-placeholder {
     color: var(--directive-font-color) !important;
     opacity: 0.25;
-    padding-left: 5ch;
+    padding-right: 7px;
+    font-size: 80%;
+    float: right;
   }
 
   * {
@@ -446,6 +461,15 @@ sb-admonition-warning .sb-admonition-icon {
   font-weight: 900;
 }
 
+.sb-line-code-outside .sb-code-info {
+  display: block;
+  float: right;
+  color: #000;
+  opacity: .25;
+  font-size: 90%;
+  padding-right: 7px;
+}
+
 .sb-link {
   cursor: pointer;
 }