add keyboard shortcuts

docs/reference/editor.md

@@ -0,0 +1,20 @@
+---
+description: "Keyboard shortcuts supported by Paisa's Editor"
+---
+
+# Editor
+
+Paisa uses [codemirror](https://codemirror.net/) that comes with a [standard](https://codemirror.net/docs/ref/#commands.standardKeymap) set of
+keyboard shortcuts. In addition to that, Paisa has few more shortcuts,
+which are listed below.
+
+## Keyboard shortcuts
+
+| Linux            | Mac              | Windows          | Description       |
+|------------------|------------------|------------------|-------------------|
+| ++ctrl+s++       | ++ctrl+s++       | ++ctrl+s++       | Save file         |
+| ++ctrl+shift+i++ | ++ctrl+shift+i++ | ++ctrl+shift+i++ | Prettify          |
+| ++ctrl+f++       | ++cmd+f++        | ++ctrl+f++       | Open search panel |
+| ++ctrl+z++       | ++cmd+z++        | ++ctrl+z++       | Undo              |
+| ++ctrl+y++       | ++cmd+y++        | ++ctrl+y++       | Redo              |
+

mkdocs.yml

@@ -24,6 +24,7 @@ nav:
         - reference/goals/retirement.md
         - reference/goals/savings.md
     - reference/ledger-cli.md
+    - reference/editor.md
     - reference/analysis.md
     - 'Tax':
       - reference/tax/index.md
@@ -66,6 +67,7 @@ theme:
     - search.highlight
 
 markdown_extensions:
+  - pymdownx.keys
   - footnotes
   - pymdownx.tabbed:
       alternate_style: true

src/lib/editor.ts

@@ -1,11 +1,11 @@
 import { ajax } from "$lib/utils";
 import { ledger } from "$lib/parser";
 import { StreamLanguage } from "@codemirror/language";
-import { keymap } from "@codemirror/view";
+import { keymap, type KeyBinding } from "@codemirror/view";
 import { EditorState as State } from "@codemirror/state";
 import { EditorView } from "codemirror";
 import { basicSetup } from "./editor/base";
-import { insertTab, history, undoDepth, redoDepth } from "@codemirror/commands";
+import { history, undoDepth, redoDepth } from "@codemirror/commands";
 import { linter, lintGutter, type Diagnostic } from "@codemirror/lint";
 import _ from "lodash";
 import { editorState, initialEditorState } from "../store";
@@ -61,13 +61,14 @@ export function createEditor(
   opts: {
     autocompletions?: Record<string, string[]>;
     readonly?: boolean;
+    keybindings?: readonly KeyBinding[];
   }
 ) {
   editorState.set(initialEditorState);
 
   return new EditorView({
     extensions: [
-      keymap.of([{ key: "Tab", run: insertTab }]),
+      keymap.of(opts.keybindings || []),
       basicSetup,
       State.readOnly.of(!!opts.readonly),
       EditorView.contentAttributes.of({ "data-enable-grammarly": "false" }),
@@ -122,7 +123,15 @@ export function moveToLine(editor: EditorView, lineNumber: number, cursor = fals
 }
 
 export function updateContent(editor: EditorView, content: string) {
+  const head = editor.state.selection.main.head;
+  const line = editor.state.doc.lineAt(head);
+  const lineNumber = line.number;
+  const column = head - line.from;
   editor.dispatch(
     editor.state.update({ changes: { from: 0, to: editor.state.doc.length, insert: content } })
   );
+
+  const newLine = editor.state.doc.line(lineNumber);
+  const newColumn = Math.min(newLine.from + column, newLine.to);
+  editor.dispatch({ selection: { anchor: newColumn, head: newColumn } });
 }

src/routes/ledger/editor/[slug]/+page.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
   import { createEditor, editorState, moveToEnd, moveToLine, updateContent } from "$lib/editor";
+  import { insertTab } from "@codemirror/commands";
   import { ajax, buildLedgerTree, type LedgerFile } from "$lib/utils";
   import { redo, undo } from "@codemirror/commands";
+  import type { KeyBinding } from "@codemirror/view";
   import * as toast from "bulma-toast";
   import type { EditorView } from "codemirror";
   import { format } from "$lib/journal";
@@ -24,6 +26,27 @@
   let selectedVersion: string = null;
   let lineNumber = 0;
 
+  function command(fn: Function) {
+    return () => {
+      fn();
+      return true;
+    };
+  }
+
+  const keybindings: readonly KeyBinding[] = [
+    { key: "Tab", run: insertTab },
+    {
+      key: "Ctrl-s",
+      run: command(save),
+      preventDefault: true
+    },
+    {
+      key: "Ctrl-I",
+      run: command(pretty),
+      preventDefault: true
+    }
+  ];
+
   let cancelled = false;
   beforeNavigate(async ({ cancel }) => {
     if ($editorState.hasUnsavedChanges) {
@@ -130,6 +153,7 @@
       }
 
       editor = createEditor(selectedFile.content, editorDom, {
+        keybindings,
         autocompletions: {
           string: accounts,
           strong: payees,