feat(json-crdt-peritext-ui): 🎸 implement multi-cursor block-merge

Author: streamich

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

@@ -912,6 +912,18 @@ export class Editor<T = string> implements Printable {
       this.updMarkerAt(cursor.start, type, data, slices);
   }
 
+  public delMarker(): 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);
+      if (markerPoint) markerPoints.add(markerPoint);
+    }
+    for (const markerPoint of markerPoints) {
+      const boundary = markerPoint.marker.boundary();
+      this.delRange(boundary);
+    }
+  }
+
   // ---------------------------------------------------------- export / import
 
   public export(range: Range<T>): ViewRange {

src/json-crdt-extensions/peritext/slice/MarkerSlice.ts

@@ -1,9 +1,22 @@
+import {Anchor} from '../rga/constants';
 import {PersistedSlice} from './PersistedSlice';
+import type {Range} from '../rga/Range';
 
 /**
  * Represents a block split in the text, i.e. it is a *marker* that shows
  * where a block was split. Markers also insert one "\n" new line character.
  * Both marker ends are attached to the "before" anchor fo the "\n" new line
  * character, i.e. it is *collapsed* to the "before" anchor.
  */
-export class MarkerSlice<T = string> extends PersistedSlice<T> {}
+export class MarkerSlice<T = string> extends PersistedSlice<T> {
+  /**
+   * Returns the {@link Range} which exactly contains the block boundary of this
+   * marker.
+   */
+  public boundary(): Range<T> {
+    const start = this.start;
+    const end = start.clone();
+    end.anchor = Anchor.After;
+    return this.txt.range(start, end);
+  }
+}

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

@@ -200,6 +200,10 @@ export class PeritextEventDefaults implements PeritextEventHandlerMap {
         if (type !== void 0) editor.updMarker(type, data);
         break;
       }
+      case 'del': {
+        editor.delMarker();
+        break;
+      }
     }
     this.undo?.capture();
   };

src/json-crdt-peritext-ui/plugins/minimal/TopToolbar/index.tsx

@@ -74,6 +74,9 @@ export const TopToolbar: React.FC<TopToolbarProps> = ({ctx}) => {
       {button('Clear', () => {
         ctx.dom?.et.format({behavior: 'clear'});
       })}
+      {button('Delete block split', () => {
+        ctx.dom?.et.marker({action: 'del'});
+      })}
       <ButtonSeparator />
       {blockGroupButtom(CommonSliceType.p, 'Paragraph')}
       {blockGroupButtom(CommonSliceType.blockquote, 'Blockquote')}

src/json-crdt-peritext-ui/plugins/toolbar/TopToolbar/index.tsx

@@ -77,6 +77,9 @@ export const TopToolbar: React.FC<TopToolbarProps> = ({ctx}) => {
       {button('Clear', () => {
         ctx.dom?.et.format({behavior: 'clear'});
       })}
+      {button('Delete block split', () => {
+        ctx.dom?.et.marker({action: 'del'});
+      })}
       <ButtonSeparator />
       {blockGroupButton(CommonSliceType.p, 'Paragraph')}
       {blockGroupButton(CommonSliceType.blockquote, 'Blockquote')}