blots-editor 0.0.1 → 0.0.3

package/README.md

@@ -0,0 +1,25 @@
+# blots-editor
+
+> A lightweight Markdown editor for the terminal — built on [ink-cartridge](https://github.com/BAIGAOa/ink-cartridge).
+
+## About
+
+blots-editor is both a **real product** and a **real-world testbed** for ink-cartridge. Every screen, keyboard shortcut, and overlay exercises the framework's screen management and keyboard engine in a concrete application — catching edge cases that unit tests alone can't.
+
+Built with [Ink](https://github.com/vadimdemedes/ink) + [React](https://react.dev).
+
+## Install
+
+```bash
+npm install -g blots-editor
+```
+
+## Usage
+
+```bash
+blots-editor              
+```
+
+## License
+
+MIT

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

@@ -0,0 +1,42 @@
+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;

package/dist/core/view/editor.js

@@ -0,0 +1,192 @@
+import { Box, Text, 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 stringWidth(String(value.length - 1));
+    }, [stringWidth, cursor.line]);
+    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;
+            });
+        }));
+        return () => {
+            removeWildcardPrecedence();
+            unBinds.forEach((each) => each());
+        };
+    }, [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: Math.max(currentLineNumberLength - 1, 1), justifyContent: "flex-end", marginRight: checkedLineNumberRightSpacing },
+                React.createElement(Text, { bold: true }, number)),
+            React.createElement(Text, null, each)));
+    })));
+}

package/dist/core/view/information-bar.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+export type Information = {
+    /**
+     * current mode
+     */
+    mode: string;
+};
+export declare function InformationBar({ mode }: Information): React.JSX.Element;

package/dist/core/view/information-bar.js

@@ -0,0 +1,6 @@
+import { Box, Text } from "ink";
+import React from "react";
+export function InformationBar({ mode }) {
+    return React.createElement(Box, { width: "100%", height: 1, backgroundColor: "blue", flexDirection: 'row', paddingLeft: 2 },
+        React.createElement(Text, { color: 'white', bold: true }, mode));
+}

package/dist/index.d.ts

@@ -1 +1 @@
-export declare const VERSION = "0.0.1";
+export {};

package/dist/index.js

@@ -1,3 +1,16 @@
-// blots-editor — a lightweight Markdown editor for the terminal.
-// Built on ink-cartridge's screen and keyboard systems.
-export const VERSION = '0.0.1';
+import { Box, render } from "ink";
+import React from "react";
+import { InformationBar } from "./core/view/information-bar.js";
+import { CurrentScreen, KeyboardProvider, registerComponent, ScenarioManagementProvider, } from "ink-cartridge";
+import { Editor } from "./core/view/editor.js";
+function App() {
+    return (React.createElement(Box, { flexDirection: "column", height: "100%", width: "100%" },
+        React.createElement(Box, { flexGrow: 1 },
+            React.createElement(InformationBar, { mode: "NONE" })),
+        React.createElement(Box, { height: "100%", width: "100%" },
+            React.createElement(Editor, { value: "\u4F60\u597D", onChance: () => { } }))));
+}
+registerComponent(App, {});
+render(React.createElement(ScenarioManagementProvider, { defaultScreen: App, fullScreen: true },
+    React.createElement(KeyboardProvider, { autoTab: false },
+        React.createElement(CurrentScreen, null))));

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "blots-editor",
-	"version": "0.0.1",
+	"version": "0.0.3",
 	"description": "A lightweight Markdown editor for the terminal, built on ink-cartridge",
 	"type": "module",
 	"main": "./dist/index.js",
@@ -25,6 +25,7 @@
 	},
 	"scripts": {
 		"build": "tsc",
+		"start": "tsx src/index.tsx",
 		"clean": "rm -rf dist",
 		"test": "vitest run",
 		"test:watch": "vitest"
@@ -49,7 +50,8 @@
 		"react": ">=18"
 	},
 	"dependencies": {
-		"ink-cartridge": "*"
+		"ink-cartridge": "*",
+		"string-width": "^8.2.2"
 	},
 	"devDependencies": {
 		"@types/node": "^20.19.39",