feat(json-crdt-peritext-ui): 🎸 improve "delete" event interface

Author: streamich

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

@@ -44,6 +44,7 @@ export class PeritextEventTarget extends SubscriptionEventTarget<PeritextEventMa
     this.dispatch('insert', {text});
   }
 
+  public delete(len: number, unit?: SelectionMoveInstruction[1]): void;
   public delete(
     edge: SelectionMoveInstruction[0],
     unit: SelectionMoveInstruction[1],
@@ -52,11 +53,13 @@ export class PeritextEventTarget extends SubscriptionEventTarget<PeritextEventMa
   ): void;
   public delete(detail?: DeleteDetail): void;
   public delete(a: any = {}, b?: any, len?: any, collapse?: any): void {
-    if (typeof a === 'string') {
+    if (typeof a === 'number') {
+      this.dispatch('delete', {move: [['focus', b ?? 'char', a]]});
+    } else if (typeof a === 'string') {
       const move: SelectionMoveInstruction[] = [[a as SelectionMoveInstruction[0], b, len, collapse]];
       this.dispatch('delete', {move});
     } else {
-      this.dispatch('delete', {move: a, at: b});
+      this.dispatch('delete', a);
     }
   }
 

src/json-crdt-peritext-ui/events/__tests__/delete.spec.ts

@@ -155,8 +155,12 @@ const testSuite = (getKit: () => Kit) => {
       kit.et.insert(' ');
       kit.editor.cursor.setAt(8);
       expect(kit.editor.text()).toBe('abcde fghij klmnopqrstuvwxyz');
-      const DIRECTION = 0;
-      kit.et.delete(DIRECTION, 'word');
+        kit.et.delete({
+          move: [
+            ['start', 'word', -1],
+            ['end', 'word', 1],
+          ],
+      });
       expect(kit.editor.text()).toBe('abcde  klmnopqrstuvwxyz');
     });
 
@@ -168,15 +172,36 @@ const testSuite = (getKit: () => Kit) => {
       kit.et.insert(' ');
       kit.editor.delCursors();
       expect(kit.editor.text()).toBe('abcde fghij klmnopqrstuvwxyz');
-      kit.et.delete(0, 'word', 8);
+      kit.et.delete({
+        at: [8],
+        move: [
+          ['start', 'word', -1],
+          ['end', 'word', 1],
+        ],
+        add: true,
+      });
       expect(kit.editor.text()).toBe('abcde  klmnopqrstuvwxyz');
       expect(kit.editor.cursor.start.viewPos()).toBe(6);
       expect(kit.editor.cursor.isCollapsed()).toBe(true);
-      kit.et.delete(0, 'word', 3);
+      kit.et.delete({
+        at: [0],
+        move: [
+          ['start', 'word', -1],
+          ['end', 'word', 1],
+        ],
+        add: true,
+      });
       expect(kit.editor.text()).toBe('  klmnopqrstuvwxyz');
       expect(kit.editor.cursor.start.viewPos()).toBe(0);
       expect(kit.editor.cursor.isCollapsed()).toBe(true);
-      kit.et.delete(0, 'word', 10);
+      kit.et.delete({
+        at: [10],
+        move: [
+          ['start', 'word', -1],
+          ['end', 'word', 1],
+        ],
+        add: true,
+      });
       expect(kit.editor.text()).toBe('  ');
       expect(kit.editor.cursor.start.viewPos()).toBe(2);
       expect(kit.editor.cursor.isCollapsed()).toBe(true);
@@ -216,8 +241,12 @@ const testSuite = (getKit: () => Kit) => {
       kit.et.insert('\n');
       kit.editor.cursor.setAt(8);
       expect(kit.editor.text()).toBe('abcde\nfghij\nklmnopqrstuvwxyz');
-      const DIRECTION = 0;
-      kit.et.delete(DIRECTION, 'line');
+      kit.et.delete({
+        move: [
+          ['start', 'line', -1],
+          ['end', 'line', 1],
+        ],
+      });
       expect(kit.editor.text()).toBe('abcde\n\nklmnopqrstuvwxyz');
     });
   });

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

@@ -133,7 +133,7 @@ export class PeritextEventDefaults implements PeritextEventHandlerMap {
   };
 
   public readonly delete = ({detail}: CustomEvent<events.DeleteDetail>) => {
-    const {move} = detail;
+    const {move, add, at} = detail;
     const set = [...this.getSelSet(detail)];
     const editor = this.txt.editor;
     let deleted: boolean = false;
@@ -158,6 +158,7 @@ export class PeritextEventDefaults implements PeritextEventHandlerMap {
       start.refAfter();
       range.set(start);
     }
+    if (add && at) editor.cursor.setRange(set[0]);
     this.undo?.capture();
   };
 

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

@@ -146,7 +146,13 @@ export interface InsertDetail extends RangeEventDetail {
  * are collapsed to a single point, while deleting all text and any annotations
  * contained in the selections.
  */
-export interface DeleteDetail extends RangeEventDetail {}
+export interface DeleteDetail extends RangeEventDetail {
+  /**
+   * If true and `at` is specified, the resulting `at` range will be set
+   * as the document cursor.
+   */
+  add?: boolean;
+}
 
 /**
  * The `cursor` event is emitted when caret or selection is changed. The event