feat(json-crdt-extensions): 🎸 improve marker point treatment in overlay

Author: streamich

src/json-crdt-extensions/peritext/__tests__/Peritext.overlay.spec.ts

@@ -19,11 +19,13 @@ const setup = () => {
 test('can insert markers', () => {
   const {peritext} = setup();
   const {editor} = peritext;
-  expect(size(peritext.overlay.root)).toBe(0);
+  expect(peritext.overlay.all().length).toBe(0);
   editor.cursor.setAt(0);
+  peritext.refresh();
+  expect(peritext.overlay.all().length).toBe(1);
   editor.insMarker(['p'], '<p>');
   peritext.refresh();
-  expect(size(peritext.overlay.root)).toBe(1);
+  expect(size(peritext.overlay.root)).toBe(2);
   editor.cursor.setAt(9);
   editor.insMarker(['p'], '<p>');
   peritext.refresh();

src/json-crdt-extensions/peritext/overlay/MarkerOverlayPoint.ts

@@ -46,6 +46,10 @@ export class MarkerOverlayPoint<T = string> extends OverlayPoint<T> {
   }
 
   public toString(tab: string = '', lite?: boolean): string {
-    return super.toString(tab, lite) + (lite ? '' : printTree(tab, [(tab) => this.marker.toString(tab)]));
+    return this.toStringName(tab, lite) + (lite ? '' : printTree(tab, [
+      (tab) => this.marker.toString(tab),
+      ...this.layers.map((slice) => (tab: string) => slice.toString(tab)),
+      ...this.markers.map((slice) => (tab: string) => slice.toString(tab)),
+    ]));
   }
 }

src/json-crdt-extensions/peritext/overlay/Overlay.ts

@@ -124,7 +124,7 @@ export class Overlay<T = string> implements Printable, Stateful {
       if (predicate(point)) return point;
       point = next(point);
     }
-    return undefined;
+    return;
   }
 
   public chunkSlices0(
@@ -372,25 +372,30 @@ export class Overlay<T = string> implements Printable, Stateful {
   }
 
   private insSlice(slice: Slice<T>): [start: OverlayPoint<T>, end: OverlayPoint<T>] {
-    console.log('ins slice', slice+'')
+    // TODO: Test cases where the inserted slice is collapsed to one point.
     const x0 = slice.start;
     const x1 = slice.end;
     const [start, isStartNew] = this.upsertPoint(x0);
     const [end, isEndNew] = this.upsertPoint(x1);
+    const isCollapsed = x0.cmp(x1) === 0;
     start.refs.push(new OverlayRefSliceStart(slice));
     end.refs.push(new OverlayRefSliceEnd(slice));
     if (isStartNew) {
       const beforeStartPoint = prev(start);
       if (beforeStartPoint) start.layers.push(...beforeStartPoint.layers);
     }
-    if (isEndNew) {
-      const beforeEndPoint = prev(end);
-      if (beforeEndPoint) end.layers.push(...beforeEndPoint.layers);
+    if (!isCollapsed) {
+
+      if (isEndNew) {
+        const beforeEndPoint = prev(end);
+        if (beforeEndPoint) end.layers.push(...beforeEndPoint.layers);
+      }
+      let curr: OverlayPoint<T> | undefined = start;
+      do curr.addLayer(slice); while ((curr = next(curr)) && (curr !== end));
+    } else {
+      // TODO: review if this is needed:
+      start.addMarker(slice);
     }
-    let curr: OverlayPoint<T> | undefined = start;
-    do curr.addLayer(slice); while ((curr = next(curr)) && (curr !== end));
-    const isCollapsed = x0.cmp(x1) === 0;
-    if (isCollapsed) start.addMarker(slice);
     return [start, end];
   }
 
@@ -448,7 +453,7 @@ export class Overlay<T = string> implements Printable, Stateful {
       else insertLeft(point, pivot);
     }
     if (this.root !== point) this.root = splay(this.root!, point, 10);
-    return undefined;
+    return;
   }
 
   private delPoint(point: OverlayPoint<T>): void {

src/json-crdt-extensions/peritext/overlay/__tests__/Overlay.spec.ts

@@ -200,22 +200,21 @@ describe('slices', () => {
       expect(point2.anchor).toBe(Anchor.After);
     });
 
-    test.only('intersecting slice before split, should not update the split', () => {
+    test('intersecting slice before split, should not update the split', () => {
       const {peritext} = setup();
       peritext.editor.cursor.setAt(6);
       peritext.editor.insMarker(['p']);
       peritext.refresh();
-      console.log(peritext + '');
       const point = peritext.overlay.find((point) => point instanceof MarkerOverlayPoint)!;
       expect(point.layers.length).toBe(0);
-      // peritext.editor.cursor.setAt(2, 2);
-      // peritext.editor.insStackSlice('<i>');
-      // peritext.refresh();
-      // expect(point.layers.length).toBe(0);
-      // peritext.editor.cursor.setAt(2, 1);
-      // peritext.editor.insStackSlice('<b>');
-      // peritext.refresh();
-      // expect(point.layers.length).toBe(0);
+      peritext.editor.cursor.setAt(2, 2);
+      peritext.editor.insStackSlice('<i>');
+      peritext.refresh();
+      expect(point.layers.length).toBe(0);
+      peritext.editor.cursor.setAt(2, 1);
+      peritext.editor.insStackSlice('<b>');
+      peritext.refresh();
+      expect(point.layers.length).toBe(0);
     });
   });
 

src/json-crdt-extensions/peritext/rga/Point.ts

@@ -138,7 +138,8 @@ export class Point<T = string> implements Pick<Stateful, 'refresh'>, Printable {
    */
   public viewPos(): number {
     const pos = this.pos();
-    if (pos < 0) return this.isAbsStart() ? 0 : this.rga.length();
+    const isAbs = equal(this.rga.id, this.id);
+    if (isAbs) return this.anchor === Anchor.After ? 0 : this.rga.length();
     return this.anchor === Anchor.Before ? pos : pos + 1;
   }