feat(json-crdt-peritext-ui): 🎸 add support for tag updates in "marker" events

Author: streamich

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

@@ -14,6 +14,7 @@ import {MarkerOverlayPoint} from '../overlay/MarkerOverlayPoint';
 import {UndEndIterator, type UndEndNext} from '../../../util/iterator';
 import {tick, Timespan, type ITimespanStruct} from '../../../json-crdt-patch';
 import {CursorAnchor, SliceStacking, SliceHeaderMask, SliceHeaderShift, SliceTypeCon} from '../slice/constants';
+import {ArrApi} from '../../../json-crdt/model';
 import type {Point} from '../rga/Point';
 import type {Range} from '../rga/Range';
 import type {Printable} from 'tree-dump';
@@ -30,6 +31,7 @@ import type {
   ViewSlice,
   EditorUi,
   EditorSelection,
+  MarkerUpdateTarget,
 } from './types';
 import type {ApiOperation} from '../../../json-crdt/model/api/types';
 
@@ -951,18 +953,24 @@ export class Editor<T = string> implements Printable {
 
   public updMarkerSlice(
     marker: MarkerSlice<T>,
-    target: 'type',
+    target: MarkerUpdateTarget,
     ops: ApiOperation[],
   ): void {
-    const node = target === 'type' ? marker.nestedType().asArr() : void 0;
+    const node = target === 'type'
+    ? marker.nestedType().asArr()
+      : target[0] === 'tag'
+      ? marker.nestedType().tag(target[1]).asVec()
+        : target[0] === 'data'
+        ? marker.nestedType().tag(target[1])?.data()
+          : void 0;
     if (!node) return;
     for (const op of ops) node.op(op);
-    if (node.length() === 0) marker.del();
+    if (target === 'type' && node instanceof ArrApi &&  node.length() === 0) marker.del();
   }
 
   public updMarkerAt(
     point: Point<T>,
-    target: 'type',
+    target: MarkerUpdateTarget,
     ops: ApiOperation[],
     slices: EditorSlices<T> = this.saved,
   ): void {
@@ -974,7 +982,7 @@ export class Editor<T = string> implements Printable {
 
   public updMarker(
     selection: Range<T>[] | IterableIterator<Range<T>> = this.cursors(),
-    target: 'type',
+    target: MarkerUpdateTarget,
     ops: ApiOperation[],
     slices: EditorSlices<T> = this.saved,
   ): void {

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

@@ -52,3 +52,5 @@ export interface EditorUi<T = string> {
    */
   vert?(point: Point<T>, steps: number): Point<T> | undefined;
 }
+
+export type MarkerUpdateTarget = 'type' | ['tag', index?: number] | ['data', index?: number];

src/json-crdt-extensions/peritext/events/__tests__/marker.spec.ts

@@ -141,6 +141,43 @@ const testSuite = (getKit: () => Kit) => {
         expect(kit.toHtml()).toBe('<p>abcdefghijklmnopqrstuvwxyz</p>');
       });
     });
+
+    describe('tag', () => {
+      test('can update tag name', () => {
+        const kit = setup();
+        kit.et.cursor({at: [8]});
+        kit.et.marker({action: 'ins', type: SliceTypeCon.blockquote});
+        expect(kit.toHtml()).toBe('<p>abcdefgh</p><blockquote>ijklmnopqrstuvwxyz</blockquote>');
+        kit.et.marker({
+          action: 'upd',
+          target: ['tag', 0],
+          ops: [
+            ['replace', '/0', SliceTypeCon.p],
+          ],
+        });
+        expect(kit.toHtml()).toBe('<p>abcdefgh</p><p>ijklmnopqrstuvwxyz</p>');
+      });
+
+      test('can update discriminant', () => {
+        const kit = setup();
+        kit.et.cursor({at: [8]});
+        kit.et.marker({action: 'ins', type: SliceTypeCon.p});
+        expect(kit.toHtml()).toBe('<p>abcdefgh</p><p>ijklmnopqrstuvwxyz</p>');
+        const slice = kit.peritext.savedSlices.each().find((slice) => slice.type() === SliceTypeCon.p);
+        expect(slice?.nestedType().tag(0).discriminant()).toBe(0);
+        kit.et.cursor({at: [12]});
+        kit.et.marker({
+          action: 'upd',
+          target: ['tag', 0],
+          ops: [
+            ['replace', '/1', 1],
+          ],
+        });
+        expect(slice?.nestedType().tag(0).discriminant()).toBe(1);
+        slice?.nestedType().tag(0).setDiscriminant(2);
+        expect(slice?.nestedType().tag(0).discriminant()).toBe(2);
+      });
+    });
   });
 
   describe('scenarios', () => {

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

@@ -288,7 +288,7 @@ export class PeritextEventDefaults implements PeritextEventHandlerMap {
       case 'upd': {
         const {target, ops} = detail;
         if (target && ops) {
-          editor.updMarker(selection, target as any, ops);
+          editor.updMarker(selection, target, ops);
         }
         break;
       }

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

@@ -484,7 +484,7 @@ export interface MarkerDetail extends RangeEventDetail, SliceDetailPart {
    *   in the type array. The target node to which the operations are applied
    *   are enfored to be an "obj" node.
    */
-  target?: 'type' | ['tag', index: number] | ['data', index: number];
+  target?: 'type' | ['tag', index?: number] | ['data', index?: number];
 
   /**
    * The list of operations to perform on the target node, when the action is

src/json-crdt/model/api/nodes.ts

@@ -240,11 +240,9 @@ export class NodeApi<N extends JsonNode = JsonNode> implements Printable {
         if (index !== index) break ADD;
         if (index < 0) index = 0;
         if (index > length) index = length;
-        if (node instanceof ArrApi) {
-          node.ins(index, Array.isArray(value) ? value : [value]);
-        } else if (node instanceof StrApi) {
-          node.ins(index, value + '');
-        } else if (node instanceof BinApi) {
+        if (node instanceof ArrApi) node.ins(index, Array.isArray(value) ? value : [value]);
+        else if (node instanceof StrApi) node.ins(index, value + '');
+        else if (node instanceof BinApi) {
           if (!(value instanceof Uint8Array)) break ADD;
           node.ins(index, value);
         }
@@ -272,11 +270,11 @@ export class NodeApi<N extends JsonNode = JsonNode> implements Printable {
           index = ~~key;
           if (index + '' !== key) break REPLACE;
         }
-        if (index !== index || index < 0 || index > length - 1) break REPLACE;
-        node.upd(index, value);
-      } else if (node instanceof VecApi) {
-        node.set([[~~key, value]]);
-      } else break REPLACE;
+        if (index !== index || index < 0 || index > length) break REPLACE;
+        if (index === length) node.ins(index, [value]);
+        else node.upd(index, value);
+      } else if (node instanceof VecApi) node.set([[~~key, value]]);
+      else break REPLACE;
       return true;
     } catch {}
     return false;
@@ -343,7 +341,8 @@ export class NodeApi<N extends JsonNode = JsonNode> implements Printable {
   }
 
   public toString(tab: string = ''): string {
-    return 'api' + printTree(tab, [(tab) => this.node.toString(tab)]);
+    const name = this.constructor === NodeApi ? '*' : this.node.name();
+    return 'api(' + name + ')' + printTree(tab, [(tab) => this.node.toString(tab)]);
   }
 }