feat(json-crdt-peritext-ui): 🎸 swap selection edges on Meta + Meta key sequence

Author: streamich

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

@@ -173,16 +173,22 @@ export class PeritextEventDefaults implements PeritextEventHandlerMap {
   };
 
   public readonly cursor = ({detail}: CustomEvent<events.CursorDetail>) => {
-    const {at, move, add} = detail;
+    const {at, move, add, flip} = detail;
     if (at === void 0) {
       const selection = this.getSelSet(detail);
       this.moveSelSet(selection, detail);
 
       // Collapse cursors if there are no visible characters between edges.
-      if (move && move.length === 1 && move[0][0] === 'focus') {
+      // (Only for relative focus edge moves.)
+      if (move && move.length === 1 && move[0][0] === 'focus')
         for (const range of selection)
           if (range.length() === 0) range.collapseToStart();
-      }
+
+      // Swap anchor and focus edges.
+      if (flip)
+        for (const range of selection)
+          if (range instanceof Cursor) range.anchorSide = range.anchorSide === CursorAnchor.Start
+            ? CursorAnchor.End : CursorAnchor.Start;
     } else {
       const {txt} = this;
       const {editor} = txt;

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

@@ -247,6 +247,14 @@ export interface CursorDetail extends RangeEventDetail {
    * @default false
    */
   add?: boolean;
+
+  /**
+   * Swap cursor anchor and focus points. Performed after the move operations
+   * are applied to the selection set. The flip is applied only to the existing
+   * cursors in the selection set, not to the new cursor created by the `at`
+   * field.
+   */
+  flip?: boolean;
 }
 
 /**

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

@@ -111,6 +111,16 @@ export class ToolbarState implements UiLifeCycles {
     el.addEventListener('keydown', onKeyDown);
     document.addEventListener('keydown', onKeyDownDocument);
     et.addEventListener('cursor', onCursor);
+
+    const unsubscribeKeyHistory = dom.keys.history.subscribe(() => {
+      // Flip selection anchor and focus edges on quick [Meta, Meta] key sequence.
+      const keys = dom.keys.history.value;
+      const last = keys[keys.length - 1];
+      const beforeLast = keys[keys.length - 2];
+      if (last?.key === 'Meta' && beforeLast?.key === 'Meta')
+        if (last.ts - beforeLast.ts < 500) et.cursor({flip: true});
+    });
+
     return () => {
       changeUnsubscribe();
       unsubscribeMouseDown?.();
@@ -119,6 +129,7 @@ export class ToolbarState implements UiLifeCycles {
       el.removeEventListener('keydown', onKeyDown);
       document.removeEventListener('keydown', onKeyDownDocument);
       et.removeEventListener('cursor', onCursor);
+      unsubscribeKeyHistory();
     };
   }
 

src/json-crdt-peritext-ui/web/dom/KeyController.ts

@@ -4,7 +4,7 @@ import type {UiLifeCycles} from '../types';
 import type {DomController} from './DomController';
 
 class KeyPress {
-  public constructor(public readonly key: string, public readonly time: number) {}
+  public constructor(public readonly key: string, public readonly ts: number) {}
 }
 
 export interface KeyControllerOpts {}