feat(json-crdt-extensions): 🎸 add "format" event "set" action

Author: streamich

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

@@ -202,6 +202,41 @@ const testSuite = (getKit: () => Kit) => {
     });
   });
 
+  describe('"set" action', () => {
+    test('can overwrite formatting data', () => {
+      const kit = setup();
+      kit.et.cursor({at: [10, 20]});
+      kit.et.format({action: 'ins', type: SliceTypeCon.col, data: {color: 'green', opacity: .5}});
+      expect(kit.toHtml()).toBe('<p>abcdefghij<col data-attr=\'{"color":"green","opacity":0.5}\'>klmnopqrst</col>uvwxyz</p>');
+      const slice = kit.peritext.savedSlices.each().find(({type}) => type === SliceTypeCon.col)!;
+      expect(slice.data()).toEqual({color: 'green', opacity: 0.5});
+      kit.et.format({action: 'set', slice, data: {"color":"red"}});
+      expect(slice.data()).toEqual({color: 'red'});
+    });
+
+    test('can overwrite formatting data with non-object', () => {
+      const kit = setup();
+      kit.et.cursor({at: [10, 20]});
+      kit.et.format({action: 'ins', type: SliceTypeCon.col, data: {color: 'green', opacity: .5}});
+      expect(kit.toHtml()).toBe('<p>abcdefghij<col data-attr=\'{"color":"green","opacity":0.5}\'>klmnopqrst</col>uvwxyz</p>');
+      const slice = kit.peritext.savedSlices.each().find(({type}) => type === SliceTypeCon.col)!;
+      expect(slice.data()).toEqual({color: 'green', opacity: 0.5});
+      kit.et.format({action: 'set', slice, data: 123});
+      expect(slice.data()).toEqual(123);
+    });
+
+    test('can overwrite non-object with object', () => {
+      const kit = setup();
+      kit.et.cursor({at: [10, 20]});
+      kit.et.format({action: 'ins', type: SliceTypeCon.col, data: true});
+      expect(kit.toHtml()).toBe('<p>abcdefghij<col data-attr=\'true\'>klmnopqrst</col>uvwxyz</p>');
+      const slice = kit.peritext.savedSlices.each().find(({type}) => type === SliceTypeCon.col)!;
+      expect(slice.data()).toEqual(true);
+      kit.et.format({action: 'set', slice, data: {col: '#fff'}});
+      expect(slice.data()).toEqual({col: '#fff'});
+    });
+  });
+
   describe('data', () => {
     test('can retrive formatting data, when specified as "obj"', () => {
       const kit = setup();

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

@@ -248,12 +248,14 @@ export class PeritextEventDefaults implements PeritextEventHandlerMap {
         else slices.insErase(tag, detail.data, selection);
         break;
       }
-      case 'upd': {
+      case 'upd':
+      case 'set': {
         const {slice} = detail;
         if (slice) {
           const persistedSlice = slice instanceof PersistedSlice ? slice : this.txt.getSlice(slice);
           if (persistedSlice instanceof PersistedSlice) {
-            persistedSlice.mergeData(detail.data);
+            if (action === 'set') persistedSlice.setData(detail.data);
+            else persistedSlice.mergeData(detail.data);
           }
         }
         break;

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

@@ -298,8 +298,10 @@ export interface FormatDetail extends RangeEventDetail, SliceDetailPart {
    *   updated to the specified slice. If the `slice` field is not specified,
    *   the `data` will be updated on the first annotation in the selection set
    *   with the same `type`.
+   * - The `'set'` action ovewrites the formatting data of the slice specified
+   *   by the `slice` field with the `data` field.
    */
-  action: 'ins' | 'tog' | 'del' | 'erase' | 'upd';
+  action: 'ins' | 'tog' | 'del' | 'erase' | 'upd' | 'set';
 
   /**
    * Type of the annotation. The type is used to determine the visual style of

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

@@ -174,18 +174,30 @@ export class PersistedSlice<T = string> extends Range<T> implements MutableSlice
     return this.dataNode() as unknown as ObjApi<ObjNode>;
   }
 
+  /**
+   * Overwrites the data of this slice with the given data.
+   *
+   * @param data Data to set for this slice. The data can be any JSON value, but
+   *     it is recommended to use an object.
+   */
+  public setData(data: unknown): void {
+    this.tupleApi().set([[SliceTupleIndex.Data, s.jsonCon(data)]]);
+  }
+
+  /**
+   * Merges object data into the slice's data using JSON CRDT diffing.
+   *
+   * @param data Data to merge into the slice. If the data is an object, it will be
+   *     merged with the existing data of the slice using JSON CRDT diffing.
+   */
   public mergeData(data: unknown): void {
     const {model} = this;
     const diff = new JsonCrdtDiff(model);
     if (this.dataNode() instanceof ObjApi && !!data && typeof data === 'object' && !Array.isArray(data)) {
       const dataNode = this.dataAsObj();
       const patch = diff.diff(dataNode.node, data);
       model.applyPatch(patch);
-    } else {
-      this.tupleApi().set([
-        [SliceTupleIndex.Data, s.jsonCon(data)],
-      ]);
-    }
+    } else this.setData(data);
   }
 
   public getStore(): Slices<T> | undefined {