feat(editor): multi-cursor editing MVP — select all occurrences + type into all (#196)

Variant A of #196: VS Code-style multi-cursor limited to "select all
occurrences of a word (or the selection) and type into all at once", built on
top of the existing SearchAndReplace mass-transaction machinery.

- New `MultiCursor` Tiptap extension (packages/editor-ext/src/lib/multi-cursor/):
  Cmd/Ctrl+Shift+L selects all occurrences, Cmd/Ctrl+D adds the next, typing /
  Backspace / Delete apply to every cursor in ONE reverse-order transaction (so a
  single undo reverts the whole multi-edit), Esc / click / navigation collapse.
- Cursors live in plugin state and are remapped on every docChanged — covering
  remote Yjs edits (applied as ordinary transactions) with no collab-specific code.
- Extracted a shared `findOccurrences` util so SearchAndReplace and MultiCursor
  no longer duplicate the occurrence walk (behaviour-preserving).
- Conscious v1 out-of-scope boundaries (Variant B) documented in the extension.

Registered in mainExtensions; carets styled distinctly from collaborative carets.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
agent_coder
2026-07-05 04:24:34 +03:00
committed by agent_coder
parent 3085ec1b50
commit 86b2d7b350
10 changed files with 1105 additions and 46 deletions
@@ -45,6 +45,7 @@ import {
TiptapPdf,
PageBreak,
SearchAndReplace,
MultiCursor,
Mention,
TableDndExtension,
TableHandleCommandsExtension,
@@ -447,6 +448,10 @@ export const mainExtensions = [
};
},
}).configure(),
// Multi-cursor editing (MVP / Variant A): select-all-occurrences + type into
// all at once. Does not depend on collaboration, so it lives in mainExtensions
// (available in both the plain and collaborative editors).
MultiCursor,
Columns,
Column,
AutoJoiner.configure({
@@ -1,5 +1,6 @@
@import "./core.css";
@import "./collaboration.css";
@import "./multi-cursor.css";
@import "./task-list.css";
@import "./placeholder.css";
@import "./drag-handle.css";
@@ -0,0 +1,60 @@
/*
* Multi-cursor (issue #196). Deliberately DISTINCT from the collaboration
* carets (collaboration.css) so a user never confuses their own multi-cursors
* with a co-author's caret: solid accent-blue carets + a translucent blue
* range highlight, versus the thin dark collaboration caret with a name label.
*/
/* A secondary caret rendered as a Decoration.widget at each cursor position. */
.multi-cursor__caret {
position: relative;
display: inline-block;
width: 0;
height: 1em;
vertical-align: text-bottom;
pointer-events: none;
}
.multi-cursor__caret::after {
content: "";
position: absolute;
left: -1px;
top: 0;
bottom: 0;
width: 2px;
background: #2b6cb0;
animation: multi-cursor-blink 1s steps(1) infinite;
}
/* Optional label class reserved for future per-cursor annotations. */
.multi-cursor__label {
position: absolute;
top: -1.4em;
left: -1px;
font-size: 0.7rem;
line-height: normal;
padding: 0.05rem 0.25rem;
border-radius: 3px 3px 3px 0;
background: #2b6cb0;
color: #fff;
white-space: nowrap;
user-select: none;
pointer-events: none;
}
/* Inline highlight for a multi-cursor RANGE (from < to). */
.multi-cursor__selection {
background: rgba(43, 108, 176, 0.28);
border-radius: 2px;
}
@keyframes multi-cursor-blink {
0%,
50% {
opacity: 1;
}
51%,
100% {
opacity: 0;
}
}