@davidsouther/vimput 0.0.0-stage → 0.0.0

package/package.json

@@ -1,6 +1,23 @@
 {
   "name": "@davidsouther/vimput",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.0.0",
+  "type": "module",
+  "description": "Vim-over-textarea utility.",
+  "license": "MIT",
+  "repository": "git+https://github.com/DavidSouther/agathon.git",
+  "sideEffects": false,
+  "files": [
+    "src",
+    "!src/**/*_test.ts"
+  ],
+  "exports": {
+    ".": "./src/vimput.ts",
+    "./*": "./src/*.ts"
+  },
+  "scripts": {
+    "test": "node --test \"src/**/*_test.ts\""
+  },
+  "dependencies": {
+    "@davidsouther/agathon": "*"
+  }
+}

package/src/index.ts

@@ -0,0 +1,9 @@
+import { NgModule } from "@angular/core";
+
+import { Vimput } from "./vimput";
+
+@NgModule({
+  declarations: [Vimput],
+  exports: [Vimput],
+})
+export class VimputModule {}

package/src/vimput.ts

@@ -0,0 +1,413 @@
+import { checkExhaustive } from "@davidsouther/agathon/assert";
+
+export const VimputMode = {
+  NORMAL: 0,
+  EDIT: 1,
+} as const;
+export type VimputMode = (typeof VimputMode)[keyof typeof VimputMode];
+
+export const Stride = {
+  LINE: 0,
+} as const;
+export type Stride = (typeof Stride)[keyof typeof Stride];
+
+export const Direction = {
+  BACKWARD: 0,
+  FORWARD: 1,
+} as const;
+export type Direction = (typeof Direction)[keyof typeof Direction];
+
+export const VimputCommandType = {
+  MOVE: 0,
+  EDIT: 1,
+  UPDATE: 2,
+  UNDO: 3,
+  REDO: 4,
+} as const;
+export type VimputCommandType = (typeof VimputCommandType)[keyof typeof VimputCommandType];
+
+export interface VimputMove {
+  type: typeof VimputCommandType.MOVE;
+  op(position: VimputPosition): void;
+}
+
+export interface VimputEdit {
+  type: typeof VimputCommandType.EDIT;
+  op(position: VimputPosition): string;
+  value?: string;
+}
+
+export interface VimputUpdate {
+  type: typeof VimputCommandType.UPDATE;
+  value: string;
+  index?: number;
+}
+
+export interface VimputHistory {
+  type: typeof VimputCommandType.UNDO | typeof VimputCommandType.REDO;
+}
+
+type VimputCommand = VimputMove | VimputEdit | VimputUpdate | VimputHistory;
+
+const Command = {
+  move(op: (position: VimputPosition) => void): VimputCommand {
+    return { type: VimputCommandType.MOVE, op };
+  },
+
+  edit(op: (position: VimputPosition) => string): VimputCommand {
+    return { type: VimputCommandType.EDIT, op };
+  },
+
+  update(value: string, index?: number): VimputCommand {
+    return { type: VimputCommandType.UPDATE, value, index };
+  },
+
+  history(type: typeof VimputCommandType.UNDO | typeof VimputCommandType.REDO): VimputCommand {
+    return { type };
+  },
+};
+
+const UNDO = VimputCommandType.UNDO;
+const REDO = VimputCommandType.REDO;
+
+export interface VimputState {
+  row: number;
+  col: number;
+  value: string;
+}
+
+/** Class to handle vim row/column position model over a TextArea value. */
+export class VimputPosition {
+  row = 0;
+  col = 0;
+
+  // Number of characters preceding this row
+  rows: number[] = [0];
+
+  value = "";
+
+  get length(): number {
+    return this.value.length;
+  }
+
+  get index(): number {
+    return this.textIndex(this.row, this.col);
+  }
+
+  constructor() {
+    this.update();
+  }
+
+  update(): void {
+    this.rows.splice(1, this.rows.length);
+
+    let row = 1,
+      index = 0,
+      next: number;
+    while ((next = this.value.indexOf("\n", index) + 1) > 0) {
+      this.rows[row++] = index = next;
+    }
+  }
+
+  /** Return the index in the value at the beginning of this row. */
+  lineIndex(row: number): number {
+    // Asking for a row off the end gets the total length of the string.
+    return this.rows[row] ?? this.length;
+  }
+
+  textIndex(row: number, col: number): number {
+    // Convert row/col to text index
+    let index = this.lineIndex(row);
+
+    index += col;
+    let next = (this.rows[row + 1] ?? 0) - 1;
+    next = next > -1 ? next : this.length;
+    // Col is after the line, so use the end of the line
+    return index > next ? next : index;
+  }
+
+  moveToIndex(index: number): void {
+    if (index > this.length) index = this.length;
+    let row = this.rows.findIndex((r) => r >= index);
+    if (row === -1) row = this.rows.length;
+    row = Math.max(0, row - 1);
+    let col = index - (this.rows[row] ?? this.length);
+    col = Math.max(0, col);
+    this.row = row;
+    this.col = col;
+  }
+
+  moveTo(row: number, col: number): void {
+    this.row = clamp(row, this.rows.length);
+    // Columns can keep their old position when moving up and down
+    this.col = Math.max(col, 0);
+  }
+
+  move(row: -1 | 0 | 1, col: -1 | 0 | 1): void {
+    const toRow = clamp(this.row + row, this.rows.length);
+    const cols = (this.rows[toRow + 1] ?? this.length) - this.rows[toRow] - 1;
+    // If moving cols, don't move off the current column to the right. If moving
+    // left, jump to the last column if starting off the right.
+    let toCol: number;
+    if (col === 0) {
+      toCol = this.col;
+    } else if (col === 1 && this.col > cols) {
+      toCol = this.col;
+    } else if (col === -1 && this.col > cols) {
+      toCol = cols - 1;
+    } else {
+      toCol = this.col + col;
+    }
+    this.moveTo(toRow, toCol);
+  }
+
+  jump(distance: Stride, direction: Direction): void {
+    switch (distance) {
+      case Stride.LINE:
+        switch (direction) {
+          case Direction.FORWARD:
+            this.col = this.rows[this.row + 1] - 1;
+            break;
+          case Direction.BACKWARD:
+            this.col = 0;
+            break;
+          default:
+            checkExhaustive(direction);
+        }
+        break;
+      default:
+        checkExhaustive(distance);
+    }
+  }
+}
+
+export class VimputManager {
+  position = new VimputPosition();
+
+  undo: VimputState[] = [];
+  redo: VimputState[] = [];
+
+  handleCommand(command: VimputCommand): void {
+    switch (command.type) {
+      case VimputCommandType.MOVE:
+        command.op(this.position);
+        break;
+      case VimputCommandType.EDIT:
+        this.position.value = command.op(this.position);
+        this.position.update();
+        break;
+      case VimputCommandType.UPDATE:
+        this.position.value = command.value;
+        this.position.update();
+        if (this.position.index) {
+          this.position.moveToIndex(this.position.index);
+        }
+        this.pushState();
+        break;
+      case VimputCommandType.UNDO:
+        if (this.undo.length > 0) {
+          // Don't remove the last state entry
+          const state = this.undo.length > 1 ? this.undo.shift()! : this.undo[0];
+          this.position.value = state.value;
+          this.redo.push(state);
+        }
+        break;
+      case VimputCommandType.REDO:
+        if (this.redo.length > 0) {
+          this.position.value = this.redo.pop()!.value;
+        }
+        break;
+      default:
+        checkExhaustive(command);
+    }
+  }
+
+  pushState(): void {
+    const first = this.undo.length === 0;
+    const { value, row, col } = this.position;
+    const top = this.undo[0];
+    if (first || value !== top.value || row !== top.row || col !== top.col) {
+      this.undo.unshift({ value, row, col });
+    }
+  }
+}
+
+/** Directive to add Vim bindings to an HTMLTextArea */
+export const useVimput = (el: HTMLTextAreaElement) => {
+  const [mode, setMode] = useState(VimputMode.NORMAL);
+
+  const listeners = useMemo(() => {
+    const manager = new VimputManager();
+    const focus = (): void => {
+      updateIndex();
+    };
+
+    const click = (): void => {
+      updateIndex();
+    };
+
+    const keyDown = (e: KeyboardEvent): void => {
+      if (e.ctrlKey || e.metaKey || e.altKey) return;
+      if (mode === VimputMode.EDIT) {
+        if (e.key === "Escape") {
+          setMode(VimputMode.NORMAL);
+          update();
+        }
+        if (e.key === "Tab") {
+          insert("\t");
+        }
+      }
+
+      if (mode === VimputMode.NORMAL) {
+        if (e.key === "Tab") return;
+        e.preventDefault();
+        normalMode(e);
+      }
+    };
+
+    const update = (): void => {
+      doUpdate(el.value);
+    };
+
+    const updateCaret = (): void => {
+      el.value = manager.position.value;
+      const index = manager.position.index;
+      el.setSelectionRange(index, index);
+    };
+
+    const updateIndex = (): void => {
+      doUpdate(el.value, el.selectionEnd);
+    };
+
+    const doUpdate = (value: string, index?: number): void => {
+      manager.handleCommand(Command.update(value, index));
+      updateCaret();
+    };
+
+    const command = (cmd: VimputCommand): void => {
+      manager.handleCommand(cmd);
+      updateCaret();
+    };
+
+    const moveTo = (row: number, col: number): void => {
+      command(Command.move((position) => position.moveTo(row, col)));
+    };
+
+    const move = (row: -1 | 0 | 1, col: -1 | 0 | 1): void => {
+      command(Command.move((position) => position.move(row, col)));
+    };
+
+    const jump = (distance: Stride, direction: Direction): void => {
+      command(Command.move((position) => position.jump(distance, direction)));
+    };
+
+    const insert = (s: string): void => {
+      command(Command.edit(({ value, index }) => splice(value, index, s)));
+    };
+
+    const doDelete = (n: number): void => {
+      command(Command.edit(({ value, index }) => splice(value, index, n)));
+    };
+
+    const normalMode = (e: KeyboardEvent): void => {
+      (operations[e.key] ?? (() => undefined))();
+    };
+
+    const operations = {
+      // TODO need to figure out how to do a block cursor. Until then, these do the
+      // same thing. That will probably require replacing the entire contenteditable
+      ["a"](): void {
+        setMode(VimputMode.EDIT);
+      },
+      ["i"](): void {
+        this.mode = VimputMode.EDIT;
+      },
+
+      ["h"](): void {
+        move(0, -1);
+      },
+      ["j"](): void {
+        move(1, 0);
+      },
+      ["k"](): void {
+        move(-1, 0);
+      },
+      ["l"](): void {
+        move(0, 1);
+      },
+
+      ["^"](): void {
+        jump(Stride.LINE, Direction.BACKWARD);
+      },
+      ["$"](): void {
+        jump(Stride.LINE, Direction.FORWARD);
+      },
+
+      ["x"](): void {
+        if (this.value[this.manager.position.index] !== "\n") this.delete(1);
+      },
+
+      ["u"](): void {
+        command(Command.history(UNDO));
+      },
+      ["U"](): void {
+        command(Command.history(REDO));
+      },
+
+      // TODO
+      // eEwWbB
+      // IAoO
+      // r
+      // %
+      // vV
+      // yp
+      // status line
+      // /find nN
+      // %s/find/replace
+      // '<,'>s/find/replace
+      // {n}command
+    };
+
+    return {
+      focus,
+      click,
+      keyDown,
+    };
+  });
+
+  useEffect(() => {
+    el.addEventListener("keydown", listeners.keyDown);
+    el.addEventListener("focus", listeners.focus);
+    el.addEventListener("click", listeners.click);
+    return () => {
+      el.removeEventListener("keydown", listeners.keyDown);
+      el.removeEventListener("focus", listeners.focus);
+      el.removeEventListener("click", listeners.click);
+    };
+  }, [el]);
+};
+
+function clamp(x: number, max: number, min = 0) {
+  return Math.min(max, Math.max(min, x));
+}
+
+/** splice a string using the same API as Array::splice */
+export function splice(
+  str: string,
+  pos: number,
+  len?: number | string,
+  ...insert: string[]
+): string {
+  if (typeof len === "string") {
+    insert.unshift(len);
+    len = 0;
+  } else if (len === undefined) {
+    len = 0;
+  }
+
+  const start = str.slice(0, pos);
+  const middle = insert.join("");
+  const end = str.slice(pos + len, str.length);
+  const value = start + middle + end;
+  return value;
+}

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.