diff --git a/plugs/editor/editor.plug.yaml b/plugs/editor/editor.plug.yaml index 3a1d2ec1..e5a2d100 100644 --- a/plugs/editor/editor.plug.yaml +++ b/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" diff --git a/type/config.ts b/type/config.ts index 2d9905b9..77a3ce49 100644 --- a/type/config.ts +++ b/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: { diff --git a/web/client.ts b/web/client.ts index 86f3b7f3..84ea7de4 100644 --- a/web/client.ts +++ b/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) { diff --git a/web/editor_state.ts b/web/editor_state.ts index 26203297..9cc2940a 100644 --- a/web/editor_state.ts +++ b/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, diff --git a/web/styles/editor.scss b/web/styles/editor.scss index 857e6ca8..787ef039 100644 --- a/web/styles/editor.scss +++ b/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 + ); } } diff --git a/web/styles/theme.scss b/web/styles/theme.scss index 0be35033..4bd892a6 100644 --- a/web/styles/theme.scss +++ b/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; }