Undo frontmatter templates

web/cm_plugins/clean.ts

@@ -22,7 +22,7 @@ export function cleanModePlugins(client: Client) {
     hideMarksPlugin(),
     hideHeaderMarkPlugin(),
     cleanBlockPlugin(),
-    frontmatterPlugin(client),
+    frontmatterPlugin(),
     fencedCodePlugin(client),
     taskListPlugin({
       // TODO: Move this logic elsewhere?

web/cm_plugins/frontmatter.ts

@@ -1,79 +1,48 @@
-import { Client } from "../client.ts";
+import { Decoration, EditorState, foldedRanges, syntaxTree } from "../deps.ts";
-import { Decoration, EditorState, syntaxTree } from "../deps.ts";
-import { MarkdownWidget } from "./markdown_widget.ts";
 import { decoratorStateField, HtmlWidget, isCursorInRange } from "./util.ts";
 
-export function frontmatterPlugin(client: Client) {
+export function frontmatterPlugin() {
-  const panelWidgetHook = client.system.panelWidgetHook;
-  const frontmatterCallback = panelWidgetHook.callbacks.get("frontmatter");
   return decoratorStateField(
     (state: EditorState) => {
       const widgets: any[] = [];
+      const foldRanges = foldedRanges(state);
 
       syntaxTree(state).iterate({
         enter(node) {
           if (
-            node.name === "FrontMatter"
+            node.name === "FrontMatterMarker"
           ) {
-            if (!isCursorInRange(state, [node.from, node.to])) {
+            const parent = node.node.parent!;
-              if (frontmatterCallback) {
-                // Render as a widget
-                const text = state.sliceDoc(node.from, node.to);
-                const lineStrings = text.split("\n");
 
-                const lines: { from: number; to: number }[] = [];
+            const folded = foldRanges.iter();
-                let fromIt = node.from;
+            let shouldShowFrontmatterBanner = false;
-                for (const line of lineStrings) {
+            while (folded.value) {
-                  lines.push({
+              // Check if cursor is in the folded range
-                    from: fromIt,
+              if (isCursorInRange(state, [folded.from, folded.to])) {
-                    to: fromIt + line.length,
+                // console.log("Cursor is in folded area, ");
-                  });
+                shouldShowFrontmatterBanner = true;
-                  fromIt += line.length + 1;
+                break;
-                }
-
-                lines.slice(0, lines.length - 1).forEach((line) => {
-                  widgets.push(
-                    // Reusing line-table-outside here for laziness reasons
-                    Decoration.line({ class: "sb-line-table-outside" }).range(
-                      line.from,
-                    ),
-                  );
-                });
-
-                widgets.push(
-                  Decoration.widget({
-                    widget: new MarkdownWidget(
-                      undefined,
-                      client,
-                      `frontmatter:${client.currentPage}`,
-                      "",
-                      frontmatterCallback,
-                      "sb-markdown-frontmatter-widget",
-                    ),
-                    block: true,
-                  }).range(lines[lines.length - 1].from),
-                );
-              } else if (!frontmatterCallback) {
-                // Not rendering as a widget
-                widgets.push(
-                  Decoration.widget({
-                    widget: new HtmlWidget(
-                      `frontmatter`,
-                      "sb-frontmatter-marker",
-                    ),
-                  }).range(node.from),
-                );
-                widgets.push(
-                  Decoration.line({
-                    class: "sb-line-frontmatter-outside",
-                  }).range(node.from),
-                );
-                widgets.push(
-                  Decoration.line({
-                    class: "sb-line-frontmatter-outside",
-                  }).range(state.doc.lineAt(node.to).from),
-                );
               }
+              folded.next();
+            }
+            if (!isCursorInRange(state, [parent.from, parent.to])) {
+              widgets.push(
+                Decoration.line({
+                  class: "sb-line-frontmatter-outside",
+                }).range(node.from),
+              );
+              shouldShowFrontmatterBanner = true;
+            }
+            if (shouldShowFrontmatterBanner && 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/styles/colors.scss

@@ -172,8 +172,7 @@
     color: var(--editor-heading-meta-color);
   }
 
-  .sb-hashtag,
+  .sb-hashtag {
-  .sb-markdown-frontmatter-widget span.hashtag {
     color: var(--editor-hashtag-color);
     background-color: var(--editor-hashtag-background-color);
     border: 1px solid var(--editor-hashtag-border-color);
@@ -314,10 +313,6 @@
     color: var(--editor-frontmatter-color);
   }
 
-  .sb-markdown-frontmatter-widget {
-    background-color: var(--editor-frontmatter-background-color);
-  }
-
   .sb-frontmatter-marker {
     color: var(--editor-frontmatter-marker-color);
   }

web/styles/editor.scss

@@ -429,33 +429,9 @@
     margin-top: 10px;
   }
 
-  .sb-markdown-frontmatter-widget {
-    margin-bottom: -1.3ch;
-    padding: 8px;
 
-    .sb-banner {
-      position: absolute;
-      right: 5px;
-      bottom: 5px;
-      font-size: 80%;
-      color: var(--editor-frontmatter-marker-color);
-    }
-
-    span.hashtag {
-      border-radius: 6px;
-      padding: 0 3px;
-      margin: 0 1px 0 0;
-      font-size: 0.9em;
-    }
-  }
-
-  .sb-markdown-frontmatter-widget+.sb-frontmatter {
-    background-color: transparent;
-    color: transparent;
-  }
 
   .sb-markdown-widget,
-  .sb-markdown-frontmatter-widget,
   .sb-markdown-top-widget:has(*),
   .sb-markdown-bottom-widget:has(*) {
     overflow-y: auto;
@@ -579,6 +555,12 @@
     padding-right: 8px;
   }
 
+  .sb-frontmatter-marker {
+    float: right;
+    font-size: 80%;
+    padding-right: 7px;
+  }
+
   .cm-scroller {
     // Give some breathing space at the bottom of the screen
     padding-bottom: 20em;