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:
@@ -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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user