fix(json-crdt-peritext-ui): 🐛 make multi-cursor work again

Author: streamich

src/json-crdt-extensions/peritext/editor/Editor.ts

@@ -115,6 +115,10 @@ export class Editor<T = string> implements Printable {
     };
   }
 
+  public mainCursor(): Cursor<T> | undefined {
+    return this.cursors0()();
+  }
+
   public cursors() {
     return new UndefEndIter(this.cursors0());
   }

src/json-crdt-peritext-ui/events/defaults/PeritextEventDefaults.ts

@@ -111,10 +111,11 @@ export class PeritextEventDefaults implements PeritextEventHandlerMap {
 
   public readonly change = (event: CustomEvent<events.ChangeDetail>) => {};
 
-  public readonly insert = (event: CustomEvent<events.InsertDetail>) => {
-    const text = event.detail.text;
-    const editor = this.txt.editor;
-    editor.insert(text);
+  public readonly insert = ({detail}: CustomEvent<events.InsertDetail>) => {
+    const {move, text} = detail;
+    const set = [...this.getSelSet(detail)];
+    if (move) this.moveSelSet(set, detail);
+    this.txt.editor.insert(text, set);
     this.undo?.capture();
   };
 
@@ -132,7 +133,10 @@ export class PeritextEventDefaults implements PeritextEventHandlerMap {
         range.set(start);
       }
     }
-    if (deleted) return;
+    if (deleted) {
+      this.undo?.capture();
+      return;
+    }
     if (move) this.moveSelSet(set, detail);
     for (const range of set) {
       editor.delRange(range);
@@ -141,6 +145,7 @@ export class PeritextEventDefaults implements PeritextEventHandlerMap {
       start.refAfter();
       range.set(start);
     }
+    this.undo?.capture();
   };
 
   public readonly cursor = ({detail}: CustomEvent<events.CursorDetail>) => {
@@ -155,7 +160,6 @@ export class PeritextEventDefaults implements PeritextEventHandlerMap {
           break;
         }
       } else {
-        editor.delCursors();
         for (const range of set) {
           editor.cursor.setRange(range);
           break;

src/json-crdt-peritext-ui/events/types.ts

@@ -120,12 +120,17 @@ export type SelectionMoveInstruction = [
 /**
  * Event dispatched to insert text into the document.
  */
-export interface InsertDetail {
+export interface InsertDetail extends SelectionDetailPart, SelectionMoveDetailPart {
   text: string;
 }
 
 /**
- * Event dispatched to delete text from the document.
+ * Event dispatched to delete text from the document. The deletion happens by
+ * collapsing all selections to a single point and deleting the text and any
+ * annotations contained in the selections. If all selections are already
+ * collapsed, the moves specified in `move` are performed and all selections
+ * are collapsed to a single point, while deleting all text and any annotations
+ * contained in the selections.
  */
 export interface DeleteDetail extends SelectionDetailPart, SelectionMoveDetailPart {}
 

src/json-crdt-peritext-ui/plugins/minimal/TopToolbar/index.tsx

@@ -18,7 +18,8 @@ export const TopToolbar: React.FC<TopToolbarProps> = ({ctx}) => {
 
   if (!ctx.dom) return null;
 
-  const [complete] = editor.hasCursor() ? peritext.overlay.stat(editor.cursor) : [new Set()];
+  const cursor = editor.mainCursor();
+  const [complete] = cursor ? peritext.overlay.stat(cursor) : [new Set()];
 
   const inlineGroupButton = (type: string | number, name: React.ReactNode) => (
     <Button

src/json-crdt-peritext-ui/plugins/toolbar/TopToolbar/index.tsx

@@ -21,7 +21,8 @@ export const TopToolbar: React.FC<TopToolbarProps> = ({ctx}) => {
 
   if (!ctx.dom) return null;
 
-  const [complete] = editor.hasCursor() ? peritext.overlay.stat(editor.cursor) : [new Set()];
+  const cursor = editor.mainCursor();
+  const [complete] = cursor ? peritext.overlay.stat(cursor) : [new Set()];
 
   const inlineGroupButton = (type: string | number, name: React.ReactNode) => (
     <Button

src/json-crdt-peritext-ui/plugins/toolbar/state/index.tsx

@@ -75,12 +75,13 @@ export class ToolbarState implements UiLifeCycles {
     const {activeLeafBlockId$, txt} = this;
     const {overlay, editor} = txt;
     const value = activeLeafBlockId$.getValue();
-    if (editor.cursorCard() !== 1 || !editor.cursor.isCollapsed()) {
+    const cardinality = editor.cursorCard();
+    if (cardinality !== 1 || (cardinality === 1 && !editor.mainCursor()?.isCollapsed())) {
       if (value) activeLeafBlockId$.next(null);
       return;
     }
-    const focus = editor.cursor.focus();
-    const marker = overlay.getOrNextLowerMarker(focus);
+    const focus = editor.mainCursor()?.focus();
+    const marker = focus ? overlay.getOrNextLowerMarker(focus) : void 0;
     const markerId = marker?.marker.start.id ?? txt.str.id;
     const doSet = !value || compare(value, markerId) !== 0;
     if (doSet) activeLeafBlockId$.next(markerId);