Edit titles in their boxes, with vim keys inside the text

Titles are typed right in their boxes on the canvas: the box grows with
the text, the terminal's cursor sits in it (a bar while typing, a block
on the letter with vim keys), and the border turns the insert color.
`i`, `A` and Enter edit at the end, `I` at the start, `cc` and `S` type
the title anew. The document follows the text as it's typed, so the
layout stays current, and the whole edit is one undo step.

Esc gives vim's normal mode inside the text (TextEditor, in ui/): h l w
b e 0 ^ $, f t F T with ; and ,, the d c y operators with any of those
motions or the iw aw i" a" i( a( text objects, x X s S D C Y, r ~, p P,
counts, u and Ctrl-r for the edit's own changes, and `.` for the last
one, typing included. j k gg G and J work on lines, for bodies. It
follows vim where it's quirky too: cw acts like ce, dw stops at the end
of the line, Esc steps back onto the last letter. Keys have two new
tables, `text` and `insert`, and in text an operator takes motions as
targets (`dw`, `c$`, `2d3fx`), which which-key lists.

Rapid entry: after `o`, `O` or `a`, the new idea's title is typed at
once; Enter starts the next idea, Tab puts the one being typed under the
idea above, Shift-Tab takes it out a level, and Enter on an empty idea
stops. An idea left empty goes away without a trace in the undo history
(a group whose edits cancel out leaves no step); a title left empty
comes back as it was. Inside a title, `o` and `O` start a new sibling.

Registers are shared by the whole app, so text yanked in one title
pastes into another; `"a`-`"z` and `"_` work, and `"+` stays inside
cumulus until the app core connects the clipboard.

The mouse while editing: a click in the text moves the text cursor, a
click anywhere else keeps the text and finishes the edit, and a
double-click on a title starts editing at that letter.

`>>` and `<<` now move nodes: under the node above, as its last child,
or out a level, right after the old parent, with counts taking in the
next siblings.

The command line's input became TextInput, line-aware so the editor can
use it for bodies too; bodies themselves get edited in the Note view.
The example's tests type every key above into the app and check the
text and the cursor after each one against what vim does.

Co-Authored-By: Claude Opus 5.5 <[email protected]>

src/view/canvas/scene.rs

@@ -3,19 +3,23 @@
 //! the same scene, so what you click is what you see.
 
 use std::collections::BTreeMap;
+use std::ops::Range;
 
 use ratatui::layout::Size;
 use ratatui::style::Color;
 use unicode_width::UnicodeWidthStr;
 
-use super::boxes::{NodeBox, truncate};
+use super::boxes::{NodeBox, draft_box, truncate};
 use super::camera::{Camera, ScreenPos, ScreenRect, Zoom};
 use super::lines::{LineLayer, LineOwner, Paint};
 use super::route::{Bend, route};
+use crate::app::mode::Mode;
+use crate::app::text_edit::TextEdit;
 use crate::model::{Arrows, Border, Content, Document, Node, NodeId, Place, Visible};
 use crate::ui::glyphs::Glyphs;
+use crate::ui::text_editor::layout;
 use crate::ui::theme::{LineStyle, Theme};
-use crate::view::ViewSettings;
+use crate::view::ViewContext;
 
 /// How many columns of a title show at Far zoom.
 const FAR_TITLE_WIDTH: usize = 14;
@@ -53,6 +57,16 @@ pub(super) struct Mark {
     pub(super) color: Color,
 }
 
+/// The title being edited, as drawn: where the text cursor is, and how the
+/// text sits in its box, for clicks.
+#[derive(Debug, Clone, PartialEq, Eq)]
+struct Editing {
+    rect: ScreenRect,
+    text: String,
+    rows: Vec<Range<usize>>,
+    cursor: ScreenPos,
+}
+
 /// Everything the canvas draws in one frame.
 #[derive(Debug, Clone, Default)]
 pub struct Scene {
@@ -61,6 +75,9 @@ pub struct Scene {
     pub(super) glyphs: Glyphs,
     pub(super) accent: Color,
     pub(super) muted: Color,
+    /// The border of the cursor's box: the accent, or the typing color while
+    /// its title is typed.
+    cursor_color: Color,
     /// The nodes in drawing order: the cursor's last, on top.
     pub(super) nodes: Vec<SceneNode>,
     /// Where each node is in `nodes`.
@@ -70,19 +87,20 @@ pub struct Scene {
     covered: Vec<Option<usize>>,
     pub(super) lines: LineLayer,
     pub(super) marks: Vec<Mark>,
+    editing: Option<Editing>,
 }
 
 impl Scene {
     /// Works out the frame: which nodes show (folding, the cursor), where
-    /// they are on screen, and every line between them.
-    pub fn build(
-        doc: &Document,
-        cursor: NodeId,
-        camera: Camera,
-        size: Size,
-        theme: &Theme,
-        settings: &ViewSettings,
-    ) -> Scene {
+    /// they are on screen, and every line between them. A title being edited
+    /// shows as typed, with the text cursor in it.
+    pub fn build(ctx: &ViewContext<'_>, camera: Camera, size: Size) -> Scene {
+        let (doc, cursor, theme, settings) = (ctx.doc, ctx.cursor, ctx.theme, ctx.settings);
+        let edit = match ctx.mode {
+            Mode::Text(edit) => Some(edit),
+            _ => None,
+        };
+        let typing = edit.is_some_and(|edit| edit.editor.is_typing());
         let visible = Visible::new(doc, cursor, settings.focus);
         let mut scene = Scene {
             size,
@@ -90,6 +108,7 @@ impl Scene {
             glyphs: theme.glyphs,
             accent: theme.accent,
             muted: theme.muted,
+            cursor_color: if typing { theme.insert } else { theme.accent },
             covered: vec![None; size.area() as usize],
             lines: LineLayer::new(size),
             ..Scene::default()
@@ -98,8 +117,11 @@ impl Scene {
             let Some(node) = doc.node(id) else { continue };
             let style = theme.node_style(node, id == doc.root());
             let badge = visible.hidden.get(&id).map(|count| format!("+{count}")).unwrap_or_default();
-            let (rect, shape) =
-                shape(node, badge, style.border, camera, theme.glyphs, settings.max_node_width);
+            let max_width = settings.max_node_width;
+            let (rect, shape) = match edit.filter(|edit| edit.node == id && camera.zoom == Zoom::Normal) {
+                Some(edit) => scene.draft(node, edit, badge, style.border, camera, max_width),
+                None => shape(node, badge, style.border, camera, theme.glyphs, max_width),
+            };
             scene.nodes.push(SceneNode { id, rect, shape, color: style.color, selected: id == cursor });
         }
         // The cursor's node goes last, on top of any it overlaps.
@@ -139,6 +161,45 @@ impl Scene {
         self.lines.owner(at)
     }
 
+    /// The cell the text cursor is on, while a title is edited.
+    pub fn text_cursor(&self) -> Option<ScreenPos> {
+        self.editing.as_ref().map(|editing| editing.cursor)
+    }
+
+    /// Where a click lands in the title being edited, if it's in its box.
+    pub fn text_offset_at(&self, at: ScreenPos) -> Option<usize> {
+        let editing = self.editing.as_ref().filter(|editing| editing.rect.contains(at))?;
+        let row = usize::try_from(at.row - editing.rect.top() - 1).unwrap_or(0);
+        let column = usize::try_from(at.col - editing.rect.left() - 2).unwrap_or(0);
+        Some(layout::offset(&editing.text, &editing.rows, row, column))
+    }
+
+    /// The box of the node whose title is being edited, showing the text as
+    /// typed. Remembers where the text and its cursor are.
+    fn draft(
+        &mut self,
+        node: &Node,
+        edit: &TextEdit,
+        badge: String,
+        border: Border,
+        camera: Camera,
+        max_width: u16,
+    ) -> (ScreenRect, Shape) {
+        let text = edit.editor.text();
+        let draft = draft_box(node, text, edit.editor.cursor(), badge, max_width);
+        let at = camera.to_screen(node.pos);
+        let size = draft.node_box.rect.size;
+        let rect = ScreenRect::new(at.col, at.row, i32::from(size.width), i32::from(size.height));
+        let (row, column) = draft.cursor;
+        let cursor = ScreenPos::new(
+            rect.left() + 2 + i32::try_from(column).unwrap_or(0),
+            rect.top() + 1 + i32::try_from(row).unwrap_or(0),
+        );
+        self.editing = Some(Editing { rect, text: text.to_string(), rows: draft.rows, cursor });
+        let NodeBox { lines, tags, badge, .. } = draft.node_box;
+        (rect, Shape::Box { lines, tags, badge, border })
+    }
+
     /// The index (in `nodes`) of the topmost node on a cell.
     pub(super) fn covered_at(&self, at: ScreenPos) -> Option<usize> {
         covered_at(&self.covered, self.size, at)
@@ -158,13 +219,14 @@ impl Scene {
     }
 
     /// Adds the boxes' borders to the line layer, so lines joining them get
-    /// the right characters. The cursor's box is thick, in the accent color.
+    /// the right characters. The cursor's box is thick, in the accent color
+    /// (the typing color while its title is typed).
     fn add_borders(&mut self) {
-        let Scene { nodes, covered, lines, size, accent, .. } = self;
+        let Scene { nodes, covered, lines, size, cursor_color, .. } = self;
         for (index, node) in nodes.iter().enumerate() {
             let Shape::Box { border, .. } = &node.shape else { continue };
             let (border, color) =
-                if node.selected { (Border::Thick, *accent) } else { (*border, node.color) };
+                if node.selected { (Border::Thick, *cursor_color) } else { (*border, node.color) };
             let paint = Paint { color, owner: LineOwner::Border(node.id) };
             lines.add_border(node.rect, border, paint, |at| covered_at(covered, *size, at) == Some(index));
         }