Harden editor rendering, plugins, LSP, and undo

README.md

@@ -89,6 +89,13 @@ cursor_line = true
 [lsp]
 enabled = true
 
+[lsp.servers.typescript]
+command = "typescript-language-server"
+args = ["--stdio"]
+language_id = "typescript"
+file_extensions = ["ts", "tsx"]
+root_markers = ["package.json", ".git"]
+
 # Plugin settings
 [plugins]
 enabled = true

default_config.toml

@@ -62,7 +62,7 @@ Esc = { EnterMode = "Normal" }
 "n" = [ "FindNext" ]
 "N" = [ "FindPrevious" ]
 "a" = [ { EnterMode = "Insert" }, "MoveRight" ]
-"A" = [ { EnterMode = "Insert" }, "MoveToLineEnd" ]
+"A" = [ "MoveToLineEnd", "MoveRight", { EnterMode = "Insert" } ]
 "i" = { EnterMode = "Insert" }
 "I" = [ { EnterMode = "Insert" }, "MoveToFirstLineChar" ]
 ";" = { EnterMode = "Command" }
@@ -94,6 +94,7 @@ Esc = { EnterMode = "Normal" }
 # }
 "Ctrl-p" = "FilePicker"
 "Ctrl-z" = "Suspend"
+"Ctrl-e" = { PluginCommand = "NeoTree" }
 "K" = "Hover"
 # "W" = "ToggleWrap"
 # "L" = "DecreaseLeft"
@@ -138,6 +139,8 @@ Esc = { EnterMode = "Normal" }
 "j" = "MoveDown"
 "h" = "MoveLeft"
 "l" = "MoveRight"
+"$" = "MoveToLineEnd"
+"End" = "MoveToLineEnd"
 "y" = [ "Yank", { EnterMode = "Normal" } ]
 "x" = [ "Delete", { EnterMode = "Normal" } ]
 "p" = [ "Paste", { EnterMode = "Normal" } ]
@@ -152,6 +155,8 @@ Esc = { EnterMode = "Normal" }
 
 [keys.visual_block]
 Esc = { EnterMode = "Normal" }
+"$" = "MoveToLineEnd"
+"End" = "MoveToLineEnd"
 
 [keys.visual_line]
 Esc = { EnterMode = "Normal" }
@@ -162,3 +167,4 @@ Esc = { EnterMode = "Normal" }
 
 [plugins]
 buffer_picker = "buffer_picker.js"
+neotree = "neotree.js"

docs/PLUGIN_SYSTEM.md

@@ -149,8 +149,44 @@ red.openBuffer(name: string)
 
 // Draw text at specific coordinates
 red.drawText(x: number, y: number, text: string, style?: object)
+
+// Create and update a persistent side panel
+red.createPanel("tree", { side: "left", width: 32, title: "Files" })
+red.updatePanel("tree", [{
+  id: "/repo/src",
+  label: "src",
+  path: "/repo/src",
+  depth: 0,
+  expanded: true,
+  kind: "directory"
+}])
+red.focusPanel("tree")
+red.focusEditor()
+red.closePanel("tree")
+red.onPanelEvent("tree", (event) => {
+  // event.action is "up", "down", "expand", "collapse", or "activate"
+})
+```
+
+Panel rows are rendered by the editor and receive focused keyboard input
+while the panel is active. Plugins can call `focusEditor()` to return input
+to the editor after handling a panel action. Pressing `Esc` also returns
+focus to the editor.
+
+#### Filesystem
+```javascript
+const { entries, error } = await red.listDirectory(".")
+const watchId = red.watchDirectory(".", async (snapshot) => {
+  // snapshot has the same shape as listDirectory()
+})
+red.unwatchDirectory(watchId)
+red.openFile("src/main.rs")
 ```
 
+`listDirectory` returns entries sorted with directories before files. Plugins
+do not receive arbitrary filesystem access; they request directory listings
+and directory watches through editor-owned APIs.
+
 #### Buffer Manipulation
 ```javascript
 // Insert text at position
@@ -489,4 +525,4 @@ Areas identified for potential improvement:
 
 The Red editor's plugin system provides a robust foundation for extending editor functionality while maintaining security and performance. By leveraging Deno's runtime and a well-designed API, developers can create powerful plugins that integrate seamlessly with the editor's core functionality.
 
-For questions or contributions to the plugin system, please refer to the main Red editor repository and its contribution guidelines.
+For questions or contributions to the plugin system, please refer to the main Red editor repository and its contribution guidelines.

plugins/neotree.js

@@ -0,0 +1,149 @@
+const PANEL_ID = "neotree";
+const ROOT = ".";
+
+let redApi = null;
+const watches = new Map();
+
+export async function activate(red) {
+  redApi = red;
+  const expanded = new Set([ROOT]);
+  const children = new Map();
+  let created = false;
+
+  async function loadDirectory(path) {
+    const result = await red.listDirectory(path);
+    if (result.error) {
+      red.logWarn("NeoTree failed to list directory", path, result.error);
+      children.set(path, []);
+      return [];
+    }
+    children.set(path, result.entries);
+    return result.entries;
+  }
+
+  function watchDirectory(path) {
+    if (watches.has(path)) return;
+    const watchId = red.watchDirectory(path, async () => {
+      await loadDirectory(path);
+      await refresh();
+    });
+    watches.set(path, watchId);
+  }
+
+  async function ensureLoaded(path) {
+    if (!children.has(path)) {
+      await loadDirectory(path);
+    }
+    watchDirectory(path);
+    return children.get(path) || [];
+  }
+
+  async function buildRows(path, depth = 0, rows = []) {
+    const entries = await ensureLoaded(path);
+    for (const entry of entries) {
+      if (entry.kind !== "directory" && entry.kind !== "file") {
+        continue;
+      }
+
+      const isDirectory = entry.kind === "directory";
+      rows.push({
+        id: entry.path,
+        label: entry.name,
+        path: entry.path,
+        depth,
+        expanded: isDirectory ? expanded.has(entry.path) : false,
+        kind: isDirectory ? "directory" : "file",
+      });
+
+      if (isDirectory && expanded.has(entry.path)) {
+        await buildRows(entry.path, depth + 1, rows);
+      }
+    }
+    return rows;
+  }
+
+  async function refresh() {
+    const rows = await buildRows(ROOT);
+    red.updatePanel(PANEL_ID, rows);
+  }
+
+  function stopWatchingDirectories() {
+    for (const watchId of watches.values()) {
+      red.unwatchDirectory(watchId);
+    }
+    watches.clear();
+  }
+
+  function close() {
+    if (!created) return;
+    stopWatchingDirectories();
+    red.closePanel(PANEL_ID);
+    red.focusEditor();
+    created = false;
+  }
+
+  async function show() {
+    if (!created) {
+      red.createPanel(PANEL_ID, {
+        side: "left",
+        width: 32,
+        title: "Files",
+      });
+      created = true;
+    }
+
+    await ensureLoaded(ROOT);
+    await refresh();
+    red.focusPanel(PANEL_ID);
+  }
+
+  async function toggleDirectory(path, forceExpand = null) {
+    const shouldExpand = forceExpand ?? !expanded.has(path);
+    if (shouldExpand) {
+      expanded.add(path);
+      await ensureLoaded(path);
+    } else {
+      expanded.delete(path);
+    }
+    await refresh();
+  }
+
+  red.addCommand("NeoTree", async () => {
+    if (created) {
+      close();
+    } else {
+      await show();
+    }
+  });
+
+  red.onPanelEvent(PANEL_ID, async (event) => {
+    const row = event.row;
+    if (!row) return;
+
+    if (event.action === "activate") {
+      if (row.kind === "directory") {
+        await toggleDirectory(row.path);
+      } else if (row.path) {
+        red.openFile(row.path);
+        red.focusEditor();
+      }
+      return;
+    }
+
+    if (row.kind === "directory" && event.action === "expand") {
+      await toggleDirectory(row.path, true);
+    }
+
+    if (row.kind === "directory" && event.action === "collapse") {
+      await toggleDirectory(row.path, false);
+    }
+  });
+}
+
+export async function deactivate() {
+  if (!redApi) return;
+  for (const watchId of watches.values()) redApi.unwatchDirectory(watchId);
+  watches.clear();
+  redApi.closePanel(PANEL_ID);
+  redApi = null;
+}