blots-editor 0.0.4 → 0.0.5

package/dist/core/text/text-based-calculation.d.ts

@@ -0,0 +1,41 @@
+export type CursorCoordinates = {
+    line: number;
+    column: number;
+};
+export type TextCalcOptions = {
+    numberOfIndentationSpaces?: number;
+    cursorOffset?: number;
+    cursorHeightOffset?: number;
+    lineNumberRightSpacing?: number;
+};
+type ChangeListener = () => void;
+export declare class TextCalculation {
+    private _lines;
+    private _cursor;
+    private _scrollTop;
+    private _listeners;
+    readonly numberOfIndentationSpaces: number;
+    readonly cursorOffset: number;
+    readonly cursorHeightOffset: number;
+    readonly lineNumberRightSpacing: number;
+    constructor(text: string, options?: TextCalcOptions);
+    onChange(listener: ChangeListener): () => void;
+    private _notify;
+    get lines(): string[];
+    get cursor(): CursorCoordinates;
+    get lineCount(): number;
+    getLineNumberWidth(): number;
+    getCurrentLineText(): string;
+    getCursorX(lineNumberWidth: number): number;
+    updateScroll(height: number): number;
+    insertChar(char: string): void;
+    newLine(): void;
+    moveRight(): void;
+    moveLeft(): void;
+    moveUp(): void;
+    moveDown(): void;
+    backspace(): void;
+    indent(): void;
+    outdent(): void;
+}
+export {};

package/dist/core/text/text-based-calculation.js

@@ -0,0 +1,161 @@
+import stringWidth from "string-width";
+export class TextCalculation {
+    _lines;
+    _cursor;
+    _scrollTop;
+    _listeners = new Set();
+    numberOfIndentationSpaces;
+    cursorOffset;
+    cursorHeightOffset;
+    lineNumberRightSpacing;
+    constructor(text, options = {}) {
+        this._lines = text ? text.split(/\r?\n/) : [];
+        this._cursor = { line: 0, column: 0 };
+        this._scrollTop = 0;
+        this.numberOfIndentationSpaces = options.numberOfIndentationSpaces ?? 2;
+        this.cursorOffset = options.cursorOffset ?? 0;
+        this.cursorHeightOffset = options.cursorHeightOffset ?? 2;
+        this.lineNumberRightSpacing = Math.max(0, options.lineNumberRightSpacing ?? 1);
+    }
+    onChange(listener) {
+        this._listeners.add(listener);
+        return () => {
+            this._listeners.delete(listener);
+        };
+    }
+    _notify() {
+        this._listeners.forEach((fn) => fn());
+    }
+    get lines() {
+        return this._lines;
+    }
+    get cursor() {
+        return this._cursor;
+    }
+    get lineCount() {
+        return this._lines.length;
+    }
+    getLineNumberWidth() {
+        return Math.max(stringWidth(String(this._lines.length - 1)), 1);
+    }
+    getCurrentLineText() {
+        return this._lines[this._cursor.line] ?? "";
+    }
+    getCursorX(lineNumberWidth) {
+        const text = this.getCurrentLineText();
+        const clamped = Math.max(0, Math.min(text.length, this._cursor.column));
+        const visual = stringWidth(text.slice(0, clamped));
+        return (visual + lineNumberWidth + this.lineNumberRightSpacing + this.cursorOffset);
+    }
+    updateScroll(height) {
+        const effectiveH = height > 0 ? height : this._lines.length;
+        let vs = this._scrollTop;
+        if (this._cursor.line < vs) {
+            vs = this._cursor.line;
+        }
+        else if (this._cursor.line >= vs + effectiveH) {
+            vs = this._cursor.line - effectiveH + 1;
+        }
+        const maxScroll = Math.max(0, this._lines.length - effectiveH);
+        vs = Math.max(0, Math.min(vs, maxScroll));
+        this._scrollTop = vs;
+        return vs;
+    }
+    insertChar(char) {
+        const { line, column } = this._cursor;
+        this._lines[line] =
+            this._lines[line].slice(0, column) +
+                char +
+                this._lines[line].slice(column);
+        this._cursor = { line, column: column + char.length };
+        this._notify();
+    }
+    newLine() {
+        const { line, column } = this._cursor;
+        const current = this._lines[line];
+        this._lines[line] = current.slice(0, column);
+        this._lines.splice(line + 1, 0, current.slice(column));
+        this._cursor = { line: line + 1, column: 0 };
+        this._notify();
+    }
+    moveRight() {
+        const maxCol = this._lines[this._cursor.line]?.length ?? 0;
+        this._cursor = {
+            line: this._cursor.line,
+            column: Math.min(this._cursor.column + 1, maxCol),
+        };
+        this._notify();
+    }
+    moveLeft() {
+        this._cursor = {
+            line: this._cursor.line,
+            column: Math.max(this._cursor.column - 1, 0),
+        };
+        this._notify();
+    }
+    moveUp() {
+        const newLine = Math.max(this._cursor.line - 1, 0);
+        const maxCol = this._lines[newLine]?.length ?? 0;
+        this._cursor = {
+            line: newLine,
+            column: Math.min(maxCol, this._cursor.column),
+        };
+        this._notify();
+    }
+    moveDown() {
+        const newLine = Math.min(this._cursor.line + 1, this._lines.length - 1);
+        const maxCol = this._lines[newLine]?.length ?? 0;
+        this._cursor = {
+            line: newLine,
+            column: Math.min(maxCol, this._cursor.column),
+        };
+        this._notify();
+    }
+    backspace() {
+        const { line, column } = this._cursor;
+        if (column === 0 && line !== 0) {
+            const prevLen = this._lines[line - 1].length;
+            this._lines[line - 1] += this._lines[line];
+            this._lines.splice(line, 1);
+            this._cursor = { line: line - 1, column: prevLen };
+        }
+        else if (column > 0) {
+            this._lines[line] =
+                this._lines[line].slice(0, column - 1) +
+                    this._lines[line].slice(column);
+            this._cursor = { line, column: column - 1 };
+        }
+        this._notify();
+    }
+    indent() {
+        const { line } = this._cursor;
+        const spaces = " ".repeat(this.numberOfIndentationSpaces);
+        this._lines[line] = spaces + this._lines[line];
+        this._cursor = {
+            line,
+            column: this._cursor.column + this.numberOfIndentationSpaces,
+        };
+        this._notify();
+    }
+    outdent() {
+        const { line } = this._cursor;
+        const current = this._lines[line];
+        const leadingSpaces = current.match(/^ */)?.[0].length || 0;
+        const n = this.numberOfIndentationSpaces;
+        if (leadingSpaces >= n) {
+            this._lines[line] = current.slice(n);
+            this._cursor = {
+                line,
+                column: Math.max(0, this._cursor.column - n),
+            };
+        }
+        else if (leadingSpaces > 0) {
+            this._lines[line] = current.slice(leadingSpaces);
+            this._cursor = {
+                line,
+                column: Math.max(0, this._cursor.column - leadingSpaces),
+            };
+        }
+        this._notify();
+    }
+}

package/dist/core/view/editor.d.ts

@@ -1,42 +1,11 @@
 import React from "react";
 export type EditorContext = {
-    /**
-     * Used to externally get all current text, etc.
-     */
     onChance: () => void;
-    /**
-     * Original text, including some special symbols
-     */
     value: string;
-    /**
-     * What is the right margin of the left line number,
-     * which also affects the cursor position
-     */
     lineNumberRightSpacing?: number;
-    /**
-     * Cursor offset. The default value is 1.
-     * It is also recommended to be 1. Otherwise,
-     * it will cause the cursor visual position to exceed the limit.
-     */
     cursorOffset?: number;
-    /**
-     * Cursor height offset, default is 2
-     */
     cursorHeightOffset?: number;
-    /**
-     * Number of indentation spaces
-     * default is 2
-     */
     numberOfIndentationSpaces?: number;
 };
-export type CursorCoordinates = {
-    /**
-     * How many rows are currently in
-     */
-    line: number;
-    /**
-     * How many columns are currently in
-     */
-    column: number;
-};
-export declare function Editor({ value: line, lineNumberRightSpacing, cursorOffset, cursorHeightOffset, numberOfIndentationSpaces, }: EditorContext): React.JSX.Element;
+export type { CursorCoordinates } from "../text/text-based-calculation.js";
+export declare function Editor({ value: initialText, lineNumberRightSpacing, cursorOffset, cursorHeightOffset, numberOfIndentationSpaces, }: EditorContext): React.JSX.Element;

package/dist/core/view/editor.js

@@ -1,192 +1,55 @@
-import { Box, Text, useCursor } from "ink";
+import { Box, Text, useBoxMetrics, useCursor } from "ink";
 import { useKeyboard } from "ink-cartridge";
-import React, { useEffect, useMemo, useRef, useState } from "react";
-import stringWidth from "string-width";
-function splitTextByLines(text) {
-    if (!text)
-        return [];
-    return text.split(/\r?\n/);
-}
-function insertStr(original, index, insertText) {
-    return original.slice(0, index) + insertText + original.slice(index);
-}
-function deleteCharAt(original, index, length = 1) {
-    return original.slice(0, index) + original.slice(index + length);
-}
-function splitString(string, index) {
-    return [string.slice(0, index), string.slice(index)];
-}
-export function Editor({ value: line, lineNumberRightSpacing = 1, cursorOffset = 1, cursorHeightOffset = 2, numberOfIndentationSpaces = 2, }) {
-    const [value, setValue] = useState(() => {
-        const lines = splitTextByLines(line);
-        return lines;
-    });
-    const [cursor, setCursor] = useState({
-        line: 0,
-        column: 0,
-    });
-    const checkedLineNumberRightSpacing = useMemo(() => {
-        return Math.max(0, lineNumberRightSpacing);
-    }, [lineNumberRightSpacing]);
-    const currentLineNumberLength = useMemo(() => {
-        return Math.max(stringWidth(String(value.length - 1)), 1);
-    }, [stringWidth, cursor.line]);
+import React, { useEffect, useRef, useState } from "react";
+import { TextCalculation } from "../text/text-based-calculation.js";
+export function Editor({ value: initialText, lineNumberRightSpacing, cursorOffset, cursorHeightOffset, numberOfIndentationSpaces, }) {
+    const calcRef = useRef(null);
+    if (!calcRef.current) {
+        calcRef.current = new TextCalculation(initialText, {
+            lineNumberRightSpacing,
+            cursorOffset,
+            cursorHeightOffset,
+            numberOfIndentationSpaces,
+        });
+    }
+    const calc = calcRef.current;
+    const [, forceUpdate] = useState(0);
+    useEffect(() => {
+        return calc.onChange(() => forceUpdate((n) => n + 1));
+    }, [calc]);
     const { setCursorPosition } = useCursor();
-    const boxRef = useRef(null);
     const { boundKeyboard, enableWildcardPriority } = useKeyboard();
     useEffect(() => {
-        const removeWildcardPrecedence = enableWildcardPriority();
-        const unBinds = [];
-        unBinds.push(boundKeyboard(["*"], (input, _key) => {
-            const cur = cursor;
-            setValue((prev) => {
-                const newValue = [...prev];
-                const newStr = insertStr(newValue[cur.line], cur.column, input);
-                newValue[cur.line] = newStr;
-                return newValue;
-            });
-            setCursor((prev) => {
-                return {
-                    line: prev.line,
-                    column: prev.column + input.length,
-                };
-            });
-        }));
-        unBinds.push(boundKeyboard(["return"], () => {
-            const cur = cursor;
-            setValue((prev) => {
-                const newLine = [...prev];
-                const newStr = splitString(newLine[cur.line], cur.column);
-                newLine.splice(cur.line, 1);
-                newLine.splice(cur.line, 0, newStr[0]);
-                newLine.splice(cur.line + 1, 0, newStr[1]);
-                return newLine;
-            });
-            setCursor((prev) => {
-                return {
-                    line: prev.line + 1,
-                    column: 0,
-                };
-            });
-        }));
-        unBinds.push(boundKeyboard(["right"], () => {
-            setCursor((prev) => ({
-                line: prev.line,
-                column: Math.min(prev.column + 1, value[cursor.line].length),
-            }));
-        }));
-        unBinds.push(boundKeyboard(["left"], () => {
-            setCursor((prev) => ({
-                line: prev.line,
-                column: Math.max(prev.column - 1, 0),
-            }));
-        }));
-        unBinds.push(boundKeyboard(["backspace", "delete"], () => {
-            let wrap = false;
-            let lastLineLenth = null;
-            setValue((prev) => {
-                const newValue = [...prev];
-                if (cursor.column === 0 && cursor.line !== 0) {
-                    wrap = true;
-                    lastLineLenth = newValue[cursor.line - 1].length;
-                    const newStr = insertStr(newValue[cursor.line - 1], newValue[cursor.line - 1].length, newValue[cursor.line]);
-                    newValue[cursor.line - 1] = newStr;
-                    newValue.splice(cursor.line, 1);
-                }
-                else {
-                    const newStr = cursor.column === 0
-                        ? newValue[cursor.line]
-                        : deleteCharAt(newValue[cursor.line], cursor.column - 1);
-                    newValue[cursor.line] = newStr;
-                }
-                return newValue;
-            });
-            setCursor((prev) => {
-                return {
-                    line: wrap ? prev.line - 1 : prev.line,
-                    column: lastLineLenth
-                        ? lastLineLenth
-                        : Math.max(prev.column - 1, 0),
-                };
-            });
-        }));
-        unBinds.push(boundKeyboard(["up"], () => {
-            setCursor((prev) => {
-                return {
-                    line: Math.max(prev.line - 1, 0),
-                    column: Math.min(value[Math.max(prev.line - 1, 0)].length, prev.column),
-                };
-            });
-        }));
-        unBinds.push(boundKeyboard(["down"], () => {
-            setCursor((prev) => {
-                return {
-                    line: Math.min(prev.line + 1, value.length - 1),
-                    column: Math.min(value[Math.min(prev.line + 1, value.length - 1)].length, prev.column),
-                };
-            });
-        }));
-        unBinds.push(boundKeyboard(["tab"], () => {
-            setValue((prev) => {
-                const newValue = [...prev];
-                newValue[cursor.line] = insertStr(newValue[cursor.line], cursor.column, " ".repeat(numberOfIndentationSpaces));
-                return newValue;
-            });
-            setCursor((prev) => ({
-                line: prev.line,
-                column: prev.column + numberOfIndentationSpaces,
-            }));
-        }));
-        unBinds.push(boundKeyboard(["shift+tab"], () => {
-            setValue((prev) => {
-                const newValue = [...prev];
-                const currentLine = newValue[cursor.line];
-                const leadingSpaces = currentLine.match(/^ */)?.[0].length || 0;
-                if (leadingSpaces >= numberOfIndentationSpaces) {
-                    newValue[cursor.line] = deleteCharAt(currentLine, 0, numberOfIndentationSpaces);
-                    setCursor((prevCursor) => ({
-                        line: prevCursor.line,
-                        column: Math.max(0, prevCursor.column - numberOfIndentationSpaces),
-                    }));
-                }
-                else if (leadingSpaces > 0) {
-                    newValue[cursor.line] = deleteCharAt(currentLine, 0, leadingSpaces);
-                    setCursor((prevCursor) => ({
-                        line: prevCursor.line,
-                        column: Math.max(0, prevCursor.column - leadingSpaces),
-                    }));
-                }
-                return newValue;
-            });
-        }));
+        const removeWildcard = enableWildcardPriority();
+        const unbinds = [];
+        unbinds.push(boundKeyboard(["*"], (input) => calc.insertChar(input)));
+        unbinds.push(boundKeyboard(["return"], () => calc.newLine()));
+        unbinds.push(boundKeyboard(["right"], () => calc.moveRight()));
+        unbinds.push(boundKeyboard(["left"], () => calc.moveLeft()));
+        unbinds.push(boundKeyboard(["backspace", "delete"], () => calc.backspace()));
+        unbinds.push(boundKeyboard(["up"], () => calc.moveUp()));
+        unbinds.push(boundKeyboard(["down"], () => calc.moveDown()));
+        unbinds.push(boundKeyboard(["tab"], () => calc.indent()));
+        unbinds.push(boundKeyboard(["shift+tab"], () => calc.outdent()));
         return () => {
-            removeWildcardPrecedence();
-            unBinds.forEach((each) => each());
+            removeWildcard();
+            unbinds.forEach((fn) => fn());
         };
-    }, [boundKeyboard, cursor.column, cursor.line, enableWildcardPriority]);
-    const currentLineText = useMemo(() => value[cursor.line] ?? "", [value, cursor.line]);
-    const clampedColumn = useMemo(() => Math.max(0, Math.min(currentLineText.length, cursor.column)), [cursor.column, currentLineText]);
-    const visualColumn = useMemo(() => stringWidth(currentLineText.slice(0, clampedColumn)), [stringWidth, currentLineText, clampedColumn]);
-    const x = useMemo(() => visualColumn +
-        currentLineNumberLength +
-        checkedLineNumberRightSpacing +
-        cursorOffset, [
-        visualColumn,
-        currentLineNumberLength,
-        checkedLineNumberRightSpacing,
-        cursorOffset,
-    ]);
-    const y = useMemo(() => cursor.line + cursorHeightOffset, [cursor.line, cursorHeightOffset]);
-    // Testing has revealed a flaw in the cursor operations provided by ink.
-    // It could also be due to a specific device.
-    // On arm64-based devices—such as when running in Termux—this causes cursor misalignment.
-    // The cursor works normally everywhere else.
-    // I also don't know how to solve this problem elegantly.
-    setCursorPosition({ x: x, y: y });
-    return (React.createElement(Box, { ref: boxRef, height: "100%", width: "100%", backgroundColor: "#1e1e1e", flexDirection: "column" }, value.map((each, number) => {
-        return (React.createElement(Box, { key: number, flexDirection: "row" },
-            React.createElement(Box, { width: currentLineNumberLength, justifyContent: "flex-end", marginRight: checkedLineNumberRightSpacing },
-                React.createElement(Text, { bold: true }, number)),
+    }, [boundKeyboard, enableWildcardPriority, calc]);
+    const ref = useRef(null);
+    const { height } = useBoxMetrics(ref);
+    const lineNumberWidth = calc.getLineNumberWidth();
+    const visibleStart = calc.updateScroll(height);
+    const effectiveH = height > 0 ? height : calc.lineCount;
+    const visibleLines = calc.lines.slice(visibleStart, visibleStart + effectiveH);
+    const cursorX = calc.getCursorX(lineNumberWidth);
+    const cursorY = calc.cursor.line - visibleStart + calc.cursorHeightOffset;
+    setCursorPosition({ x: cursorX, y: cursorY });
+    return (React.createElement(Box, { ref: ref, height: "100%", width: "100%", backgroundColor: "#1e1e1e", flexDirection: "column" }, visibleLines.map((each, i) => {
+        const lineNumber = visibleStart + i;
+        return (React.createElement(Box, { key: lineNumber, flexDirection: "row" },
+            React.createElement(Box, { width: lineNumberWidth, justifyContent: "flex-end", marginRight: calc.lineNumberRightSpacing },
+                React.createElement(Text, { bold: calc.cursor.line === lineNumber }, lineNumber)),
             React.createElement(Text, null, each)));
     })));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "blots-editor",
-	"version": "0.0.4",
+	"version": "0.0.5",
 	"description": "A lightweight Markdown editor for the terminal, built on ink-cartridge",
 	"type": "module",
 	"main": "./dist/index.js",