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

@@ -121,6 +121,7 @@
     position: relative;
     visibility: hidden;
   }
+
   .cm-task-checked {
     text-decoration: line-through !important;
   }
@@ -133,16 +134,23 @@
     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 {
@@ -170,7 +178,8 @@
       font-weight: bold;
     }
 
-    th, td {
+    th,
+    td {
       padding: 8px;
     }
 

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;
 }