Implement Protocol Changes for Tree.RemoveStyle

src/api/converter.ts

@@ -445,10 +445,15 @@ function toOperation(operation: Operation): PbOperation {
     pbTreeStyleOperation.from = toTreePos(treeStyleOperation.getFromPos());
     pbTreeStyleOperation.to = toTreePos(treeStyleOperation.getToPos());
 
-    const attributesMap = pbTreeStyleOperation.attributes;
+    const attributesToRemove = treeStyleOperation.getAttributesToRemove();
+    if (attributesToRemove.length > 0) {
+      pbTreeStyleOperation.attributesToRemove = attributesToRemove;
+    } else {
+      const attributesMap = pbTreeStyleOperation.attributes;
 
-    for (const [key, value] of treeStyleOperation.getAttributes()) {
-      attributesMap[key] = value;
+      for (const [key, value] of treeStyleOperation.getAttributes()) {
+        attributesMap[key] = value;
+      }
     }
     pbTreeStyleOperation.executedAt = toTimeTicket(
       treeStyleOperation.getExecutedAt(),
@@ -1176,18 +1181,30 @@ function fromOperations(pbOperations: Array<PbOperation>): Array<Operation> {
       const pbTreeStyleOperation = pbOperation.body.value;
       const attributes = new Map();
 
-      Object.entries(pbTreeStyleOperation!.attributes).forEach(
-        ([key, value]) => {
-          attributes.set(key, value);
-        },
-      );
-      operation = TreeStyleOperation.create(
-        fromTimeTicket(pbTreeStyleOperation!.parentCreatedAt)!,
-        fromTreePos(pbTreeStyleOperation!.from!),
-        fromTreePos(pbTreeStyleOperation!.to!),
-        attributes,
-        fromTimeTicket(pbTreeStyleOperation!.executedAt)!,
-      );
+      const attributesToRemove = pbTreeStyleOperation.attributesToRemove;
+      if (attributesToRemove.length > 0) {
+        operation = TreeStyleOperation.createTreeRemoveStyleOperation(
+          fromTimeTicket(pbTreeStyleOperation!.parentCreatedAt)!,
+          fromTreePos(pbTreeStyleOperation!.from!),
+          fromTreePos(pbTreeStyleOperation!.to!),
+          attributesToRemove,
+          fromTimeTicket(pbTreeStyleOperation!.executedAt)!,
+        );
+      } else {
+        Object.entries(pbTreeStyleOperation!.attributes).forEach(
+          ([key, value]) => {
+            attributes.set(key, value);
+          },
+        );
+
+        operation = TreeStyleOperation.create(
+          fromTimeTicket(pbTreeStyleOperation!.parentCreatedAt)!,
+          fromTreePos(pbTreeStyleOperation!.from!),
+          fromTreePos(pbTreeStyleOperation!.to!),
+          attributes,
+          fromTimeTicket(pbTreeStyleOperation!.executedAt)!,
+        );
+      }
     } else {
       throw new YorkieError(Code.Unimplemented, `unimplemented operation`);
     }

src/api/yorkie/v1/resources.proto

@@ -133,6 +133,7 @@ message Operation {
     TreePos to = 3;
     map<string, string> attributes = 4;
     TimeTicket executed_at = 5;
+    repeated string attributes_to_remove = 6;
   }
 
   oneof body {

src/api/yorkie/v1/resources_pb.d.ts

@@ -783,6 +783,11 @@ export declare class Operation_TreeStyle extends Message<Operation_TreeStyle> {
    */
   executedAt?: TimeTicket;
 
+  /**
+   * @generated from field: repeated string attributes_to_remove = 6;
+   */
+  attributesToRemove: string[];
+
   constructor(data?: PartialMessage<Operation_TreeStyle>);
 
   static readonly runtime: typeof proto3;

src/api/yorkie/v1/resources_pb.js

@@ -285,6 +285,7 @@ const Operation_TreeStyle = proto3.makeMessageType(
     { no: 3, name: "to", kind: "message", T: TreePos },
     { no: 4, name: "attributes", kind: "map", K: 9 /* ScalarType.STRING */, V: {kind: "scalar", T: 9 /* ScalarType.STRING */} },
     { no: 5, name: "executed_at", kind: "message", T: TimeTicket },
+    { no: 6, name: "attributes_to_remove", kind: "scalar", T: 9 /* ScalarType.STRING */, repeated: true },
   ],
   {localName: "Operation_TreeStyle"},
 );

src/document/operation/tree_style_operation.ts

@@ -185,7 +185,7 @@ export class TreeStyleOperation extends Operation {
    * `getAttributes` returns the attributes of Style.
    */
   public getAttributes(): Map<string, string> {
-    return this.attributes!;
+    return this.attributes;
   }
 
   /**

src/util/index_tree.ts

@@ -809,7 +809,7 @@ export class IndexTree<T extends IndexTreeNode<T>> {
       path.push(sizeOfLeftSiblings + treePos.offset);
       node = node.parent!;
     } else if (node.hasTextChild()) {
-      // TODO(hackerwins): The function does not consider the situation 
+      // TODO(hackerwins): The function does not consider the situation
       // where Element and Text nodes are mixed in the Element's Children.
       const sizeOfLeftSiblings = addSizeOfLeftSiblings(
         node! as T,

test/integration/tree_test.ts

@@ -1334,6 +1334,42 @@ describe('Tree.style', function () {
     });
   });
 
+  it('Can sync its content with remove style', async function ({ task }) {
+    await withTwoClientsAndDocuments<{ t: Tree }>(async (c1, d1, c2, d2) => {
+      d1.update((root) => {
+        root.t = new Tree({
+          type: 'doc',
+          children: [
+            {
+              type: 'p',
+              children: [{ type: 'text', value: 'hello' }],
+              attributes: { italic: 'true' },
+            },
+          ],
+        });
+      });
+      await c1.sync();
+      await c2.sync();
+      assert.equal(
+        d1.getRoot().t.toXML(),
+        /*html*/ `<doc><p italic="true">hello</p></doc>`,
+      );
+      assert.equal(
+        d2.getRoot().t.toXML(),
+        /*html*/ `<doc><p italic="true">hello</p></doc>`,
+      );
+
+      d1.update((root) => {
+        root.t.removeStyle(0, 1, ['italic']);
+      });
+      await c1.sync();
+      await c2.sync();
+
+      assert.equal(d1.getRoot().t.toXML(), /*html*/ `<doc><p>hello</p></doc>`);
+      assert.equal(d2.getRoot().t.toXML(), /*html*/ `<doc><p>hello</p></doc>`);
+    }, task.name);
+  });
+
   it('Should return correct range path within doc.subscribe', async function ({
     task,
   }) {