feat(json-crdt-peritext-ui): 🎸 add support for selections to "format" events

Author: streamich

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

@@ -177,7 +177,7 @@ export class Editor<T = string> implements Printable {
    * the contents is removed and the cursor is set at the start of the range
    * as caret.
    */
-  public collapseCursor(cursor: Cursor<T>): void {
+  public collapseCursor(cursor: Range<T>): void {
     this.delRange(cursor);
     cursor.collapseToStart();
   }
@@ -630,11 +630,11 @@ export class Editor<T = string> implements Printable {
 
   // --------------------------------------------------------------- formatting
 
-  public eraseFormatting(store: EditorSlices<T> = this.saved): void {
+  public eraseFormatting(store: EditorSlices<T> = this.saved, selection: Range<T>[] | IterableIterator<Range<T>> = this.cursors()): void {
     const overlay = this.txt.overlay;
-    for (let i = this.cursors0(), cursor = i(); cursor; cursor = i()) {
+    for (const range of selection) {
       overlay.refresh();
-      const contained = overlay.findContained(cursor);
+      const contained = overlay.findContained(range);
       for (const slice of contained) {
         if (slice instanceof PersistedSlice) {
           switch (slice.behavior) {
@@ -646,7 +646,7 @@ export class Editor<T = string> implements Printable {
         }
       }
       overlay.refresh();
-      const overlapping = overlay.findOverlapping(cursor);
+      const overlapping = overlay.findOverlapping(range);
       for (const slice of overlapping) {
         switch (slice.behavior) {
           case SliceBehavior.One:
@@ -658,11 +658,11 @@ export class Editor<T = string> implements Printable {
     }
   }
 
-  public clearFormatting(store: EditorSlices<T> = this.saved): void {
+  public clearFormatting(store: EditorSlices<T> = this.saved, selection: Range<T>[] | IterableIterator<Range<T>> = this.cursors()): void {
     const overlay = this.txt.overlay;
     overlay.refresh();
-    for (let i = this.cursors0(), cursor = i(); cursor; cursor = i()) {
-      const overlapping = overlay.findOverlapping(cursor);
+    for (const range of selection) {
+      const overlapping = overlay.findOverlapping(range);
       for (const slice of overlapping) store.del(slice.id);
     }
   }
@@ -709,18 +709,19 @@ export class Editor<T = string> implements Printable {
     type: CommonSliceType | string | number,
     data?: unknown,
     store: EditorSlices<T> = this.saved,
+    selection: Range<T>[] | IterableIterator<Range<T>> = this.cursors(),
   ): void {
     // TODO: handle mutually exclusive slices (<sub>, <sub>)
     this.txt.overlay.refresh();
-    CURSORS: for (let i = this.cursors0(), cursor = i(); cursor; cursor = i()) {
-      if (cursor.isCollapsed()) {
+    SELECTION: for (const range of selection) {
+      if (range.isCollapsed()) {
         const pending = this.pending.value;
         if (pending.has(type)) pending.delete(type);
         else pending.set(type, data);
         this.pending.next(pending);
-        continue CURSORS;
+        continue SELECTION;
       }
-      this.toggleRangeExclFmt(cursor, type, data, store);
+      this.toggleRangeExclFmt(range, type, data, store);
     }
   }
 

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

@@ -4,37 +4,37 @@ import type {SliceType} from '../slice/types';
 import type {MarkerSlice} from '../slice/MarkerSlice';
 import type {Slices} from '../slice/Slices';
 import type {ITimestampStruct} from '../../../json-crdt-patch';
-import type {Cursor} from './Cursor';
+import type {Range} from '../rga/Range';
 
 export class EditorSlices<T = string> {
   constructor(
     protected readonly txt: Peritext<T>,
     public readonly slices: Slices<T>,
   ) {}
 
-  protected insAtCursors<S extends PersistedSlice<T>>(callback: (cursor: Cursor<T>) => S): S[] {
+  protected insAtCursors<S extends PersistedSlice<T>>(selection: Range<T>[] | IterableIterator<Range<T>>, callback: (range: Range<T>) => S): S[] {
     const slices: S[] = [];
-    this.txt.editor.forCursor((cursor) => {
+    for (const cursor of selection) {
       const slice = callback(cursor);
       slices.push(slice);
-    });
+    }
     return slices;
   }
 
-  public insStack(type: SliceType, data?: unknown | ITimestampStruct): PersistedSlice<T>[] {
-    return this.insAtCursors((cursor) => this.slices.insStack(cursor.range(), type, data));
+  public insStack(type: SliceType, data?: unknown | ITimestampStruct, selection: Range<T>[] | IterableIterator<Range<T>> = this.txt.editor.cursors()): PersistedSlice<T>[] {
+    return this.insAtCursors(selection, (cursor) => this.slices.insStack(cursor.range(), type, data));
   }
 
-  public insOne(type: SliceType, data?: unknown | ITimestampStruct): PersistedSlice<T>[] {
-    return this.insAtCursors((cursor) => this.slices.insOne(cursor.range(), type, data));
+  public insOne(type: SliceType, data?: unknown | ITimestampStruct, selection: Range<T>[] | IterableIterator<Range<T>> = this.txt.editor.cursors()): PersistedSlice<T>[] {
+    return this.insAtCursors(selection, (cursor) => this.slices.insOne(cursor.range(), type, data));
   }
 
-  public insErase(type: SliceType, data?: unknown | ITimestampStruct): PersistedSlice<T>[] {
-    return this.insAtCursors((cursor) => this.slices.insErase(cursor.range(), type, data));
+  public insErase(type: SliceType, data?: unknown | ITimestampStruct, selection: Range<T>[] | IterableIterator<Range<T>> = this.txt.editor.cursors()): PersistedSlice<T>[] {
+    return this.insAtCursors(selection, (cursor) => this.slices.insErase(cursor.range(), type, data));
   }
 
-  public insMarker(type: SliceType, data?: unknown, separator?: string): MarkerSlice<T>[] {
-    return this.insAtCursors((cursor) => {
+  public insMarker(type: SliceType, data?: unknown, separator?: string, selection: Range<T>[] | IterableIterator<Range<T>> = this.txt.editor.cursors()): MarkerSlice<T>[] {
+    return this.insAtCursors(selection, (cursor) => {
       this.txt.editor.collapseCursor(cursor);
       const after = cursor.start.clone();
       after.refAfter();

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

@@ -168,28 +168,30 @@ export class PeritextEventDefaults implements PeritextEventHandlerMap {
     }
   };
 
-  public readonly format = (event: CustomEvent<events.FormatDetail>) => {
-    const {type, store = 'saved', behavior = 'one', data} = event.detail;
+  public readonly format = ({detail}: CustomEvent<events.FormatDetail>) => {
+    const selection = [...this.getSelSet(detail)];
+    this.moveSelSet(selection, detail);
+    const {type, store = 'saved', behavior = 'one', data} = detail;
     const editor = this.txt.editor;
     const slices: EditorSlices = store === 'saved' ? editor.saved : store === 'extra' ? editor.extra : editor.local;
     switch (behavior) {
       case 'many': {
         if (type === undefined) throw new Error('TYPE_REQUIRED');
-        slices.insStack(type, data);
+        slices.insStack(type, data, selection);
         break;
       }
       case 'one': {
         if (type === undefined) throw new Error('TYPE_REQUIRED');
-        editor.toggleExclFmt(type, data, slices);
+        editor.toggleExclFmt(type, data, slices, selection);
         break;
       }
       case 'erase': {
-        if (type === undefined) editor.eraseFormatting(slices);
-        else slices.insErase(type, data);
+        if (type === undefined) editor.eraseFormatting(slices, selection);
+        else slices.insErase(type, data, selection);
         break;
       }
       case 'clear': {
-        editor.clearFormatting(slices);
+        editor.clearFormatting(slices, selection);
         break;
       }
     }

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

@@ -232,7 +232,7 @@ export interface CursorDetail extends SelectionDetailPart, SelectionMoveDetailPa
 /**
  * Event dispatched to insert an inline rich-text annotation into the document.
  */
-export interface FormatDetail {
+export interface FormatDetail extends SelectionDetailPart, SelectionMoveDetailPart {
   /**
    * Type of the annotation. The type is used to determine the visual style of
    * the annotation, for example, the type `'bold'` may render the text in bold.