poc: Add indentMultiplier configuration for customizable indentation in editor (#1212)

plugs/editor/editor.plug.yaml

@@ -67,6 +67,9 @@ config:
       type: array
       items:
         type: string
+    indentMultiplier:
+      type: number
+      nullable: true
 functions:
   setEditorMode:
     path: "./editor.ts:setEditorMode"

type/config.ts

@@ -51,6 +51,7 @@ export type Config = {
   emoji?: EmojiConfig;
   autoCloseBrackets: string;
   smartQuotes?: SmartQuotesConfig;
+  indentMultiplier?: number;
 
   schema: SchemaConfig;
 
@@ -73,6 +74,7 @@ export const defaultConfig: Config = {
   defaultLinkStyle: "wikilink", // wikilink [[]] or markdown []()
   actionButtons: [], // Actually defaults to defaultActionButtons
   autoCloseBrackets: "([{`",
+  indentMultiplier: 1,
 
   schema: {
     config: {

web/client.ts

@@ -4,7 +4,7 @@ import type {
 } from "@codemirror/autocomplete";
 import type { Compartment, EditorState } from "@codemirror/state";
 import { EditorView } from "@codemirror/view";
-import { syntaxTree } from "@codemirror/language";
+import { indentUnit, syntaxTree } from "@codemirror/language";
 import { compile as gitIgnoreCompiler } from "gitignore-parser";
 import type { SyntaxNode } from "@lezer/common";
 import { Space } from "../common/space.ts";
@@ -119,6 +119,7 @@ export class Client implements ConfigContainer {
   // CodeMirror editor
   editorView!: EditorView;
   keyHandlerCompartment?: Compartment;
+  indentUnitCompartment?: Compartment;
 
   private pageNavigator!: PathPageNavigator;
 
@@ -1173,6 +1174,17 @@ export class Client implements ConfigContainer {
         console.error,
       );
     }
+
+    const indentMultiplier = this.config.indentMultiplier ?? 1;
+    this.editorView.dispatch({
+      effects: this.indentUnitCompartment?.reconfigure(
+        indentUnit.of("  ".repeat(indentMultiplier)),
+      ), // Change the indentation unit to 2 spaces
+    });
+    document.documentElement.style.setProperty(
+      "--editor-indent-multiplier",
+      indentMultiplier.toString(),
+    );
   }
 
   tweakEditorDOM(contentDOM: HTMLElement) {

web/editor_state.ts

@@ -16,6 +16,7 @@ import {
 import {
   codeFolding,
   indentOnInput,
+  indentUnit,
   LanguageDescription,
   LanguageSupport,
   syntaxHighlighting,
@@ -67,6 +68,11 @@ export function createEditorState(
     createKeyBindings(client),
   );
 
+  client.indentUnitCompartment = new Compartment();
+  const indentUnits = client.indentUnitCompartment.of(
+    indentUnit.of("  "),
+  );
+
   return EditorState.create({
     doc: text,
     extensions: [
@@ -135,6 +141,7 @@ export function createEditorState(
       codeFolding({
         placeholderText: "…",
       }),
+      indentUnits,
       indentOnInput(),
       ...cleanModePlugins(client),
       EditorView.lineWrapping,

web/styles/editor.scss

@@ -91,25 +91,39 @@
 
   // Indentation of follow-up lines
   @mixin lineOverflow($baseIndent, $bulletIndent: 0) {
-    text-indent: -1 * ($baseIndent + 2ch);
-    padding-left: $baseIndent + 2ch;
+    text-indent: calc(
+      -1 * (#{$baseIndent}ch * var(--editor-indent-multiplier) + 2ch)
+    );
+    padding-left: calc(
+      #{$baseIndent}ch * var(--editor-indent-multiplier) + 2ch
+    );
 
     &.sb-line-task {
-      text-indent: -1 * ($baseIndent + 5ch);
-      padding-left: $baseIndent + 5ch;
+      text-indent: calc(
+        -1 * (#{$baseIndent}ch * var(--editor-indent-multiplier) + 5ch)
+      );
+      padding-left: calc(
+        #{$baseIndent}ch * var(--editor-indent-multiplier) + 5ch
+      );
 
       .cm-list-bullet::after {
-        left: ($baseIndent + 5ch);
+        left: calc(#{$baseIndent}ch * var(--editor-indent-multiplier) + 5ch);
       }
     }
 
     &.sb-line-blockquote {
-      text-indent: -1 * ($baseIndent + 4ch);
-      padding-left: $baseIndent + 4ch;
+      text-indent: calc(
+        -1 * (#{$baseIndent}ch * var(--editor-indent-multiplier) + 4ch)
+      );
+      padding-left: calc(
+        #{$baseIndent}ch * var(--editor-indent-multiplier) + 4ch
+      );
     }
 
     .cm-list-bullet::after {
-      left: ($baseIndent + $bulletIndent + 2ch);
+      left: calc(
+        #{$baseIndent}ch * var(--editor-indent-multiplier) + #{$bulletIndent}ch + 2ch
+      );
     }
   }
 

web/styles/theme.scss

@@ -9,6 +9,7 @@ html {
   --meta-subtle-color: #959595;
   --subtle-color: #676767;
   --subtle-background-color: rgba(72, 72, 72, 0.1);
+  --editor-indent-multiplier: 1;
 
   --root-background-color: #fff;
   --root-color: inherit;
@@ -124,10 +125,9 @@ html {
   --editor-directive-color: #696969;
   --editor-directive-background-color: #ebebeb7d;
 
-  --ui-font:
-    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
-    Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-    "Segoe UI Symbol", "Noto Color Emoji";
+  --ui-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   --editor-font: "iA-Mono", "Menlo";
   --editor-width: 800px;
 }