feat(json-crdt-peritext-ui): 🎸 introduce selections in "marker" events

Author: streamich

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

@@ -853,22 +853,22 @@ export class Editor<T = string> implements Printable {
     return true;
   }
 
-  public split(type?: SliceType, data?: unknown, slices: EditorSlices<T> = this.saved): void {
+  public split(type?: SliceType, data?: unknown, selection: Range<T>[] | IterableIterator<Range<T>> = this.cursors(), slices: EditorSlices<T> = this.saved): void {
     if (type === void 0) {
-      for (let i = this.cursors0(), cursor = i(); cursor; cursor = i()) {
-        this.collapseCursor(cursor);
-        const didInsertMarker = this.splitAt(cursor.start, slices);
-        if (didInsertMarker) cursor.move(1);
+      for (const range of selection) {
+        this.collapseCursor(range);
+        const didInsertMarker = this.splitAt(range.start, slices);
+        if (didInsertMarker && range instanceof Cursor) range.move(1);
       }
     } else {
-      for (let i = this.cursors0(), cursor = i(); cursor; cursor = i()) {
-        this.collapseCursor(cursor);
+      for (const range of selection) {
+        this.collapseCursor(range);
         if (type === void 0) {
           // TODO: detect current block type
           type = CommonSliceType.p;
         }
         slices.insMarker(type, data);
-        cursor.move(1);
+        if (range instanceof Cursor) range.move(1);
       }
     }
   }
@@ -920,11 +920,12 @@ export class Editor<T = string> implements Printable {
   public tglMarker(
     type: SliceType,
     data?: unknown,
+    selection: Range<T>[] | IterableIterator<Range<T>> = this.cursors(),
     slices: EditorSlices<T> = this.saved,
     def: SliceTypeStep = SliceTypeCon.p,
   ): void {
-    for (let i = this.cursors0(), cursor = i(); cursor; cursor = i())
-      this.tglMarkerAt(cursor.start, type, data, slices, def);
+    for (const range of selection)
+      this.tglMarkerAt(range.start, type, data, slices, def);
   }
 
   /**
@@ -935,15 +936,15 @@ export class Editor<T = string> implements Printable {
    * @param slices The slices set to use, if new marker is inserted at the start
    *     of the document.
    */
-  public updMarker(type: SliceType, data?: unknown, slices: EditorSlices<T> = this.saved): void {
-    for (let i = this.cursors0(), cursor = i(); cursor; cursor = i())
-      this.updMarkerAt(cursor.start, type, data, slices);
+  public updMarker(type: SliceType, data?: unknown, selection: Range<T>[] | IterableIterator<Range<T>> = this.cursors(), slices: EditorSlices<T> = this.saved): void {
+    for (const range of selection)
+      this.updMarkerAt(range.start, type, data, slices);
   }
 
-  public delMarker(): void {
+  public delMarker(selection: Range<T>[] | IterableIterator<Range<T>> = this.cursors()): void {
     const markerPoints = new Set<MarkerOverlayPoint<T>>();
-    for (let i = this.cursors0(), cursor = i(); cursor; cursor = i()) {
-      const markerPoint = this.txt.overlay.getOrNextLowerMarker(cursor.start);
+    for (const range of selection) {
+      const markerPoint = this.txt.overlay.getOrNextLowerMarker(range.start);
       if (markerPoint) markerPoints.add(markerPoint);
     }
     for (const markerPoint of markerPoints) {

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

@@ -198,26 +198,28 @@ export class PeritextEventDefaults implements PeritextEventHandlerMap {
     this.undo?.capture();
   };
 
-  public readonly marker = (event: CustomEvent<events.MarkerDetail>) => {
-    const {action, type, data} = event.detail;
+  public readonly marker = ({detail}: CustomEvent<events.MarkerDetail>) => {
+    const selection = [...this.getSelSet(detail)];
+    this.moveSelSet(selection, detail);
+    const {action, type, data} = detail;
     const editor = this.txt.editor;
     switch (action) {
       case 'ins': {
-        editor.split(type, data);
+        editor.split(type, data, selection);
         break;
       }
       case 'tog': {
         if (type === undefined) throw new Error('TYPE_REQUIRED');
-        editor.tglMarker(type, data);
+        editor.tglMarker(type, data, selection);
         break;
       }
       case 'upd': {
         if (type === undefined) throw new Error('TYPE_REQUIRED');
-        editor.updMarker(type, data);
+        editor.updMarker(type, data, selection);
         break;
       }
       case 'del': {
-        editor.delMarker();
+        editor.delMarker(selection);
         break;
       }
     }

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

@@ -299,7 +299,7 @@ export interface FormatDetail extends SelectionDetailPart, SelectionMoveDetailPa
  * block. Removing a marker results into a "join" action, which merges two
  * adjacent blocks into one.
  */
-export interface MarkerDetail {
+export interface MarkerDetail extends SelectionDetailPart, SelectionMoveDetailPart {
   /**
    * The action to perform.
    *