Implements #51: Folding commands

common/deps.ts

@@ -51,6 +51,7 @@ export {
   drawSelection,
   dropCursor,
   EditorView,
+  gutter,
   highlightSpecialChars,
   keymap,
   placeholder,
@@ -74,11 +75,14 @@ export {
 } from "@codemirror/state";
 export type { ChangeSpec, Extension, StateCommand } from "@codemirror/state";
 export {
+  codeFolding,
   defaultHighlightStyle,
   defineLanguageFacet,
+  foldAll,
+  foldCode,
   foldedRanges,
+  foldGutter,
   foldInside,
-  foldNodeProp,
   HighlightStyle,
   indentNodeProp,
   indentOnInput,
@@ -90,6 +94,8 @@ export {
   StreamLanguage,
   syntaxHighlighting,
   syntaxTree,
+  unfoldAll,
+  unfoldCode,
 } from "@codemirror/language";
 
 export { yaml as yamlLanguage } from "https://esm.sh/@codemirror/legacy-modes@6.3.2/mode/yaml?external=@codemirror/language";

plug-api/silverbullet-syscall/editor.ts

@@ -128,3 +128,21 @@ export function setUiOption(key: string, value: any): Promise<void> {
 export function vimEx(exCommand: string): Promise<any> {
   return syscall("editor.vimEx", exCommand);
 }
+
+// Folding
+
+export function fold() {
+  return syscall("editor.fold");
+}
+
+export function unfold() {
+  return syscall("editor.unfold");
+}
+
+export function foldAll() {
+  return syscall("editor.foldAll");
+}
+
+export function unfoldAll() {
+  return syscall("editor.unfoldAll");
+}

plugs/core/core.plug.yaml

@@ -369,6 +369,30 @@ functions:
     path: ./embed.ts:embedWidget
     codeWidget: embed
 
+  # Folding commands
+  foldCommand:
+    path: ./editor.ts:foldCommand
+    command:
+      name: "Fold: Fold"
+      mac: "Cmd-Alt-["
+      key: "Ctrl-Shift-["
+  unfoldCommand:
+    path: ./editor.ts:unfoldCommand
+    command:
+      name: "Fold: Unfold"
+      mac: "Cmd-Alt-]"
+      key: "Ctrl-Shift-]"
+  foldAllCommand:
+    path: ./editor.ts:foldAllCommand
+    command:
+      name: "Fold: Fold All"
+      key: "Ctrl-Alt-["
+  unfoldAllCommand:
+    path: ./editor.ts:unfoldAllCommand
+    command:
+      name: "Fold: Unfold All"
+      key: "Ctrl-Alt-]"
+
   # Random stuff
   statsCommand:
     path: ./stats.ts:statsCommand

plugs/core/editor.ts

@@ -17,3 +17,19 @@ export async function toggleDarkMode() {
   await editor.setUiOption("darkMode", darkMode);
   await store.set("darkMode", darkMode);
 }
+
+export async function foldCommand() {
+  await editor.fold();
+}
+
+export async function unfoldCommand() {
+  await editor.unfold();
+}
+
+export async function foldAllCommand() {
+  await editor.foldAll();
+}
+
+export async function unfoldAllCommand() {
+  await editor.unfoldAll();
+}

web/editor.tsx

@@ -84,6 +84,7 @@ import { Panel } from "./components/panel.tsx";
 import { TopBar } from "./components/top_bar.tsx";
 import {
   BookIcon,
+  codeFolding,
   HomeIcon,
   preactRender,
   TerminalIcon,
@@ -879,6 +880,9 @@ export class Editor {
         history(),
         drawSelection(),
         dropCursor(),
+        codeFolding({
+          placeholderText: "…",
+        }),
         indentOnInput(),
         ...cleanModePlugins(this),
         EditorView.lineWrapping,
@@ -914,6 +918,7 @@ export class Editor {
             run: (): boolean => {
               this.viewDispatch({ type: "start-navigate" });
               this.space.updatePageList();
+
               return true;
             },
           },

web/styles/editor.scss

@@ -21,6 +21,18 @@
     max-width: 100%;
   }
 
+  // Gutter styling
+  .cm-gutters {
+    background-color: transparent;
+    border-right: none;
+
+  }
+
+  .cm-foldPlaceholder {
+    background-color: transparent;
+    border: 0;
+  }
+
 
   // Indentation of follow-up lines
   @mixin lineOverflow($baseIndent, $bulletIndent: 0) {

web/syscalls/editor.ts

@@ -1,5 +1,14 @@
 import { Editor } from "../editor.tsx";
-import { EditorView, Transaction, Vim, vimGetCm } from "../deps.ts";
+import {
+  EditorView,
+  foldAll,
+  foldCode,
+  Transaction,
+  unfoldAll,
+  unfoldCode,
+  Vim,
+  vimGetCm,
+} from "../deps.ts";
 import { SysCallMapping } from "../../plugos/system.ts";
 import type { FilterOption } from "../types.ts";
 
@@ -172,6 +181,19 @@ export function editorSyscalls(editor: Editor): SysCallMapping {
       const cm = vimGetCm(editor.editorView!)!;
       return Vim.handleEx(cm, exCommand);
     },
+    // Folding
+    "editor.fold": () => {
+      foldCode(editor.editorView!);
+    },
+    "editor.unfold": () => {
+      unfoldCode(editor.editorView!);
+    },
+    "editor.foldAll": () => {
+      foldAll(editor.editorView!);
+    },
+    "editor.unfoldAll": () => {
+      unfoldAll(editor.editorView!);
+    },
   };
 
   return syscalls;