feat(json-crdt-peritext-ui): 🎸 adjust cursor on text insert/delte undo/redo

Author: streamich

src/json-crdt-peritext-ui/dom/annals/AnnalsController.ts

@@ -1,8 +1,8 @@
 import {WebUndo} from './WebUndo';
 import {printTree, type Printable} from 'tree-dump';
+import type {Patch} from '../../../json-crdt-patch';
 import type {Peritext} from '../../../json-crdt-extensions';
 import type {UiLifeCycles} from '../types';
-import type {Patch} from '../../../json-crdt-patch';
 import type {RedoCallback, RedoItem, UndoCallback, UndoCollector, UndoItem} from '../../types';
 import type {Log} from '../../../json-crdt/log/Log';
 import type {PeritextEventTarget} from '../../events/PeritextEventTarget';

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

@@ -1,4 +1,5 @@
 import {CursorAnchor} from '../../../json-crdt-extensions/peritext/slice/constants';
+import {placeCursor} from './annals';
 import type {Range} from '../../../json-crdt-extensions/peritext/rga/Range';
 import type {PeritextDataTransfer} from '../../../json-crdt-extensions/peritext/transfer/PeritextDataTransfer';
 import type {PeritextEventHandlerMap, PeritextEventTarget} from '../PeritextEventTarget';
@@ -377,5 +378,8 @@ export class PeritextEventDefaults implements PeritextEventHandlerMap {
   public readonly annals = (event: CustomEvent<events.AnnalsDetail>) => {
     const {batch} = event.detail;
     this.txt.model.applyBatch(batch);
+    const txt = this.txt;
+    const cursor = placeCursor(txt, batch);
+    if (cursor) txt.editor.cursor.setRange(cursor);
   };
 }

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

@@ -0,0 +1,40 @@
+import {Peritext} from '../../../json-crdt-extensions';
+import {Anchor} from '../../../json-crdt-extensions/peritext/rga/constants';
+import {DelOp, equal, InsArrOp, InsBinOp, InsStrOp, Patch, Timestamp} from '../../../json-crdt-patch';
+import type {Range} from '../../../json-crdt-extensions/peritext/rga/Range';
+
+/**
+ * Given an undo/redo patch/batch, calculates a good cursor position to place
+ * the cursor after the patch is applied, so that the user can continue typing
+ * from the same logical position.
+ *
+ * @param patch Undo/Redo patch
+ * @returns Range
+ */
+export const placeCursor = (txt: Peritext, batch: Patch[]): Range | undefined => {
+  const batchLength = batch.length;
+  for (let j = batchLength - 1; j >= 0; j--) {
+    const patch = batch[j];
+    const ops = patch.ops;
+    const length = ops.length;
+    for (let i = length - 1; i >= 0; i--) {
+      const op = ops[i];
+      if (op instanceof InsStrOp || op instanceof InsBinOp || op instanceof InsArrOp) {
+        const opId = op.id;
+        const lastCharId = new Timestamp(opId.sid, opId.time + op.span() - 1);
+        const point = txt.point(lastCharId, Anchor.After);
+        const cursor = txt.range(point);
+        return cursor;
+      } else if (op instanceof DelOp && equal(op.obj, txt.str.id)) {
+        const lastSpan = op.what[op.what.length - 1];
+        if (lastSpan) {
+          const point = txt.point(lastSpan, Anchor.Before);
+          point.halfstep(-1);
+          const cursor = txt.range(point);
+          return cursor;
+        }
+      }
+    }
+  }
+  return;
+};