feat(json-crdt-peritext-ui): 🎸 improve generic "change" event dispatch

streamich · Nov 3, 2024 · 3a28733 · 3a28733
1 parent 35610db
commit 3a28733
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 13 deletions.
diff --git a/src/json-crdt-peritext-ui/events/PeritextEventDefaults.ts b/src/json-crdt-peritext-ui/events/PeritextEventDefaults.ts
@@ -23,13 +23,16 @@ export class PeritextEventDefaults implements PeritextEventHandlerMap {
   public readonly insert = (event: CustomEvent<events.InsertDetail>) => {
     const text = event.detail.text;
     this.txt.editor.insert(text);
-    this.et.change(event);
   };
 
   public readonly delete = (event: CustomEvent<events.DeleteDetail>) => {
-    const {len = -1, unit = 'char'} = event.detail;
-    this.txt.editor.delete(len, unit);
-    this.et.change(event);
+    const {len = -1, unit = 'char', at} = event.detail;
+    const editor = this.txt.editor;
+    if (at !== undefined) {
+      const point = editor.point(at);
+      editor.cursor.set(point);
+    }
+    editor.delete(len, unit);
   };
 
   public readonly cursor = (event: CustomEvent<events.CursorDetail>) => {
@@ -62,15 +65,13 @@ export class PeritextEventDefaults implements PeritextEventHandlerMap {
           }
         }
       }
-      this.et.change(event);
       return;
     }
 
     // If `edge` is specified.
     const isSpecificEdgeSelected = edge === 'focus' || edge === 'anchor';
     if (isSpecificEdgeSelected) {
       editor.move(len, unit ?? 'char', edge === 'focus' ? 0 : 1, false);
-      this.et.change(event);
       return;
     }
 
@@ -82,14 +83,12 @@ export class PeritextEventDefaults implements PeritextEventHandlerMap {
         if (len > 0) cursor.collapseToEnd();
         else cursor.collapseToStart();
       }
-      this.et.change(event);
       return;
     }
 
     // If `unit` is specified.
     if (unit) {
       editor.select(unit);
-      this.et.change(event);
       return;
     }
   };
@@ -108,7 +107,6 @@ export class PeritextEventDefaults implements PeritextEventHandlerMap {
       default:
         slices.insOverwrite(type, data);
     }
-    this.et.change(event);
   };
 
   public readonly marker = (event: CustomEvent<events.MarkerDetail>) => {

diff --git a/src/json-crdt-peritext-ui/events/PeritextEventTarget.ts b/src/json-crdt-peritext-ui/events/PeritextEventTarget.ts
@@ -5,21 +5,24 @@ export type PeritextEventHandlerMap = {
   [K in keyof PeritextEventMap]: (event: CustomEvent<PeritextEventMap[K]>) => void;
 };
 
-let id = 0;
+let __id = 0;
 
 export class PeritextEventTarget extends TypedEventTarget<PeritextEventMap> {
-  public readonly id: number = id++;
+  public readonly id: number = __id++;
 
   public defaults: Partial<PeritextEventHandlerMap> = {};
 
-  public dispatch<K extends keyof PeritextEventMap>(type: K, detail: PeritextEventMap[K]): void {
+  public dispatch<K extends keyof Omit<PeritextEventMap, 'change'>>(type: K, detail: Omit<PeritextEventMap, 'change'>[K]): void {
     const event = new CustomEvent<PeritextEventMap[K]>(type, {detail});
     this.dispatchEvent(event);
     if (!event.defaultPrevented) this.defaults[type]?.(event);
+    this.change(event);
   }
 
   public change(ev?: CustomEvent<any>): void {
-    this.dispatch('change', {ev});
+    const event = new CustomEvent<PeritextEventMap['change']>('change', {detail: {ev}});
+    this.dispatchEvent(event);
+    if (!event.defaultPrevented) this.defaults.change?.(event);
   }
 
   public insert(text: string): void {