Make frontmatter foldable

web/cm_plugins/block.ts

@@ -1,4 +1,4 @@
-import { Decoration, EditorState, syntaxTree } from "../deps.ts";
+import { Decoration, EditorState, foldedRanges, syntaxTree } from "../deps.ts";
 import {
   decoratorStateField,
   HtmlWidget,
@@ -8,6 +8,7 @@ import {
 
 function hideNodes(state: EditorState) {
   const widgets: any[] = [];
+  const foldRanges = foldedRanges(state);
   syntaxTree(state).iterate({
     enter(node) {
       if (
@@ -33,23 +34,36 @@ function hideNodes(state: EditorState) {
         node.name === "FrontMatterMarker"
       ) {
         const parent = node.node.parent!;
+
+        const folded = foldRanges.iter();
+        let shouldShowFrontmatterBanner = false;
+        while (folded.value) {
+          // Check if cursor is in the folded range
+          if (isCursorInRange(state, [folded.from, folded.to])) {
+            // console.log("Cursor is in folded area, ");
+            shouldShowFrontmatterBanner = true;
+            break;
+          }
+          folded.next();
+        }
         if (!isCursorInRange(state, [parent.from, parent.to])) {
           widgets.push(
             Decoration.line({
               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),
-            );
-          }
+          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),
+          );
         }
       }
     },