Support multi-user undo and redo

public/devtool/text.css

@@ -75,6 +75,12 @@
   height: 100%;
 }
 
+.layout > .content > .editor-area .editor-control {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
+
 .layout > .content > .editor-area > .data-area {
   display: flex;
 }

public/index.html

@@ -17,6 +17,7 @@
     <div class="layout">
       <div class="toolbar">
         <div class="left-tools tools">
+          <!-- yorkie logo  -->
           <svg
             xmlns="http://www.w3.org/2000/svg"
             width="100"
@@ -116,6 +117,10 @@
         <div class="editor-area">
           <div class="codemirror-area">
             <textarea id="textarea" cols="30" rows="10"></textarea>
+            <div class="editor-control">
+              <button class="undo-button">undo</button>
+              <button class="redo-button">redo</button>
+            </div>
           </div>
           <div class="data-area" id="view-text">
             <div class="text-view-area">
@@ -367,9 +372,24 @@ <h4 class="title">
               displayRemoteSelection(codemirror, doc, event.value);
             }
           });
+          doc.subscribe('my-presence', (event) => {
+            if (event.type === 'presence-changed') {
+              const [from, to] = doc
+                .getRoot()
+                .content.posRangeToIndexRange(event.value.presence.selection);
+
+              // TODO(chacha912): Update my selection when the selection
+              // changes through undo and redo.
+              console.log('my selection', from, to);
+            }
+          });
 
           doc.subscribe('$.content', (event) => {
-            if (event.type === 'remote-change') {
+            if (
+              event.type === 'remote-change' ||
+              (event.type === 'local-change' &&
+                event.value.message === 'YORKIE_HISTORY')
+            ) {
               const { actor, operations } = event.value;
               handleOperations(operations, actor);
 
@@ -397,9 +417,12 @@ <h4 class="title">
 
             doc.update((root, presence) => {
               const range = root.content.edit(from, to, content);
-              presence.set({
-                selection: root.content.indexRangeToPosRange(range),
-              });
+              presence.set(
+                {
+                  selection: root.content.indexRangeToPosRange(range),
+                },
+                { addToHistory: true },
+              );
             }, `update content by ${client.getID()}`);
             console.log(`%c local: ${from}-${to}: ${content}`, 'color: green');
           });
@@ -428,7 +451,6 @@ <h4 class="title">
 
             const from = cm.indexFromPos(change.ranges[0].anchor);
             const to = cm.indexFromPos(change.ranges[0].head);
-
             doc.update((root, presence) => {
               presence.set({
                 selection: root.content.indexRangeToPosRange([from, to]),
@@ -455,6 +477,30 @@ <h4 class="title">
             }
           }
 
+          // Undo and Redo
+          document
+            .querySelector('.undo-button')
+            .addEventListener('click', () => {
+              console.log('undo op', doc.getUndoStackForTest().at(-1));
+              doc.undo();
+            });
+          document
+            .querySelector('.redo-button')
+            .addEventListener('click', () => {
+              console.log('redo op', doc.getRedoStackForTest().at(-1));
+              doc.redo();
+            });
+          codemirror.addKeyMap({
+            'Cmd-Z': (cm) => {
+              console.log('undo op', doc.getUndoStackForTest().at(-1));
+              doc.history.undo();
+            },
+            'Shift-Cmd-Z': (cm) => {
+              console.log('redo op', doc.getRedoStackForTest().at(-1));
+              doc.history.redo();
+            },
+          });
+
           // 05. synchronize text of document and codemirror.
           codemirror.setValue(doc.getRoot().content.toString());
           devtool.displayLog(doc, codemirror);

src/api/converter.ts

@@ -33,6 +33,7 @@ import { AddOperation } from '@yorkie-js-sdk/src/document/operation/add_operatio
 import { MoveOperation } from '@yorkie-js-sdk/src/document/operation/move_operation';
 import { RemoveOperation } from '@yorkie-js-sdk/src/document/operation/remove_operation';
 import { EditOperation } from '@yorkie-js-sdk/src/document/operation/edit_operation';
+import { EditReverseOperation } from '@yorkie-js-sdk/src/document/operation/edit_reverse_operation';
 import { StyleOperation } from '@yorkie-js-sdk/src/document/operation/style_operation';
 import { TreeEditOperation } from '@yorkie-js-sdk/src/document/operation/tree_edit_operation';
 import { ChangeID } from '@yorkie-js-sdk/src/document/change/change_id';
@@ -339,8 +340,10 @@ function toOperation(operation: Operation): PbOperation {
     pbEditOperation.setFrom(toTextNodePos(editOperation.getFromPos()));
     pbEditOperation.setTo(toTextNodePos(editOperation.getToPos()));
     const pbCreatedAtMapByActor = pbEditOperation.getCreatedAtMapByActorMap();
-    for (const [key, value] of editOperation.getMaxCreatedAtMapByActor()) {
-      pbCreatedAtMapByActor.set(key, toTimeTicket(value)!);
+    if (editOperation.getMaxCreatedAtMapByActor()) {
+      for (const [key, value] of editOperation.getMaxCreatedAtMapByActor()!) {
+        pbCreatedAtMapByActor.set(key, toTimeTicket(value)!);
+      }
     }
     pbEditOperation.setContent(editOperation.getContent());
     const pbAttributes = pbEditOperation.getAttributesMap();
@@ -349,6 +352,33 @@ function toOperation(operation: Operation): PbOperation {
     }
     pbEditOperation.setExecutedAt(toTimeTicket(editOperation.getExecutedAt()));
     pbOperation.setEdit(pbEditOperation);
+  } else if (operation instanceof EditReverseOperation) {
+    const editReverseOperation = operation as EditReverseOperation;
+    const pbEditReverseOperation = new PbOperation.EditReverse();
+    pbEditReverseOperation.setParentCreatedAt(
+      toTimeTicket(editReverseOperation.getParentCreatedAt()),
+    );
+    pbEditReverseOperation.setFromIdx(editReverseOperation.getFromIdx());
+    pbEditReverseOperation.setToIdx(editReverseOperation.getToIdx());
+    const pbCreatedAtMapByActor =
+      pbEditReverseOperation.getCreatedAtMapByActorMap();
+    if (editReverseOperation.getMaxCreatedAtMapByActor()) {
+      for (const [
+        key,
+        value,
+      ] of editReverseOperation.getMaxCreatedAtMapByActor()!) {
+        pbCreatedAtMapByActor.set(key, toTimeTicket(value)!);
+      }
+    }
+    pbEditReverseOperation.setContent(editReverseOperation.getContent());
+    const pbAttributes = pbEditReverseOperation.getAttributesMap();
+    for (const [key, value] of editReverseOperation.getAttributes()) {
+      pbAttributes.set(key, value);
+    }
+    pbEditReverseOperation.setExecutedAt(
+      toTimeTicket(editReverseOperation.getExecutedAt()),
+    );
+    pbOperation.setEditReverse(pbEditReverseOperation);
   } else if (operation instanceof StyleOperation) {
     const styleOperation = operation as StyleOperation;
     const pbStyleOperation = new PbOperation.Style();
@@ -1066,15 +1096,38 @@ function fromOperations(pbOperations: Array<PbOperation>): Array<Operation> {
       pbEditOperation!.getAttributesMap().forEach((value, key) => {
         attributes.set(key, value);
       });
-      operation = EditOperation.create(
-        fromTimeTicket(pbEditOperation!.getParentCreatedAt())!,
-        fromTextNodePos(pbEditOperation!.getFrom()!),
-        fromTextNodePos(pbEditOperation!.getTo()!),
-        createdAtMapByActor,
-        pbEditOperation!.getContent(),
+      operation = EditOperation.create({
+        parentCreatedAt: fromTimeTicket(pbEditOperation!.getParentCreatedAt())!,
+        fromPos: fromTextNodePos(pbEditOperation!.getFrom()!),
+        toPos: fromTextNodePos(pbEditOperation!.getTo()!),
+        content: pbEditOperation!.getContent(),
         attributes,
-        fromTimeTicket(pbEditOperation!.getExecutedAt())!,
-      );
+        executedAt: fromTimeTicket(pbEditOperation!.getExecutedAt())!,
+        maxCreatedAtMapByActor: createdAtMapByActor,
+      });
+    } else if (pbOperation.hasEditReverse()) {
+      const pbEditReverseOperation = pbOperation.getEditReverse();
+      const createdAtMapByActor = new Map();
+      pbEditReverseOperation!
+        .getCreatedAtMapByActorMap()
+        .forEach((value, key) => {
+          createdAtMapByActor.set(key, fromTimeTicket(value));
+        });
+      const attributes = new Map();
+      pbEditReverseOperation!.getAttributesMap().forEach((value, key) => {
+        attributes.set(key, value);
+      });
+      operation = EditReverseOperation.create({
+        parentCreatedAt: fromTimeTicket(
+          pbEditReverseOperation!.getParentCreatedAt(),
+        )!,
+        fromIdx: pbEditReverseOperation!.getFromIdx()!,
+        toIdx: pbEditReverseOperation!.getToIdx()!,
+        content: pbEditReverseOperation!.getContent(),
+        attributes,
+        executedAt: fromTimeTicket(pbEditReverseOperation!.getExecutedAt())!,
+        maxCreatedAtMapByActor: createdAtMapByActor,
+      });
     } else if (pbOperation.hasStyle()) {
       const pbStyleOperation = pbOperation.getStyle();
       const createdAtMapByActor = new Map();
@@ -1198,7 +1251,11 @@ function fromObject(pbObject: PbJSONElement.JSONObject): CRDTObject {
   const rht = new ElementRHT();
   for (const pbRHTNode of pbObject.getNodesList()) {
     // eslint-disable-next-line
-    rht.set(pbRHTNode.getKey(), fromElement(pbRHTNode.getElement()!));
+    rht.set(
+      pbRHTNode.getKey(),
+      fromElement(pbRHTNode.getElement()!),
+      fromTimeTicket(pbObject.getCreatedAt())!,
+    );
   }
 
   const obj = new CRDTObject(fromTimeTicket(pbObject.getCreatedAt())!, rht);

src/api/yorkie/v1/resources.proto

@@ -133,6 +133,15 @@ message Operation {
     map<string, string> attributes = 4;
     TimeTicket executed_at = 5;
   }
+  message EditReverse {
+    TimeTicket parent_created_at = 1;
+    int32 from_idx = 2;
+    int32 to_idx = 3;
+    map<string, TimeTicket> created_at_map_by_actor = 4;
+    string content = 5;
+    TimeTicket executed_at = 6;
+    map<string, string> attributes = 7;
+  }
 
   oneof body {
     Set set = 1;
@@ -145,6 +154,7 @@ message Operation {
     Increase increase = 8;
     TreeEdit tree_edit = 9;
     TreeStyle tree_style = 10;
+    EditReverse edit_reverse = 11;
   }
 }
 

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

@@ -193,6 +193,11 @@ export class Operation extends jspb.Message {
   hasTreeStyle(): boolean;
   clearTreeStyle(): Operation;
 
+  getEditReverse(): Operation.EditReverse | undefined;
+  setEditReverse(value?: Operation.EditReverse): Operation;
+  hasEditReverse(): boolean;
+  clearEditReverse(): Operation;
+
   getBodyCase(): Operation.BodyCase;
 
   serializeBinary(): Uint8Array;
@@ -215,6 +220,7 @@ export namespace Operation {
     increase?: Operation.Increase.AsObject,
     treeEdit?: Operation.TreeEdit.AsObject,
     treeStyle?: Operation.TreeStyle.AsObject,
+    editReverse?: Operation.EditReverse.AsObject,
   }
 
   export class Set extends jspb.Message {
@@ -627,6 +633,53 @@ export namespace Operation {
   }
 
 
+  export class EditReverse extends jspb.Message {
+    getParentCreatedAt(): TimeTicket | undefined;
+    setParentCreatedAt(value?: TimeTicket): EditReverse;
+    hasParentCreatedAt(): boolean;
+    clearParentCreatedAt(): EditReverse;
+
+    getFromIdx(): number;
+    setFromIdx(value: number): EditReverse;
+
+    getToIdx(): number;
+    setToIdx(value: number): EditReverse;
+
+    getCreatedAtMapByActorMap(): jspb.Map<string, TimeTicket>;
+    clearCreatedAtMapByActorMap(): EditReverse;
+
+    getContent(): string;
+    setContent(value: string): EditReverse;
+
+    getExecutedAt(): TimeTicket | undefined;
+    setExecutedAt(value?: TimeTicket): EditReverse;
+    hasExecutedAt(): boolean;
+    clearExecutedAt(): EditReverse;
+
+    getAttributesMap(): jspb.Map<string, string>;
+    clearAttributesMap(): EditReverse;
+
+    serializeBinary(): Uint8Array;
+    toObject(includeInstance?: boolean): EditReverse.AsObject;
+    static toObject(includeInstance: boolean, msg: EditReverse): EditReverse.AsObject;
+    static serializeBinaryToWriter(message: EditReverse, writer: jspb.BinaryWriter): void;
+    static deserializeBinary(bytes: Uint8Array): EditReverse;
+    static deserializeBinaryFromReader(message: EditReverse, reader: jspb.BinaryReader): EditReverse;
+  }
+
+  export namespace EditReverse {
+    export type AsObject = {
+      parentCreatedAt?: TimeTicket.AsObject,
+      fromIdx: number,
+      toIdx: number,
+      createdAtMapByActorMap: Array<[string, TimeTicket.AsObject]>,
+      content: string,
+      executedAt?: TimeTicket.AsObject,
+      attributesMap: Array<[string, string]>,
+    }
+  }
+
+
   export enum BodyCase { 
     BODY_NOT_SET = 0,
     SET = 1,
@@ -639,6 +692,7 @@ export namespace Operation {
     INCREASE = 8,
     TREE_EDIT = 9,
     TREE_STYLE = 10,
+    EDIT_REVERSE = 11,
   }
 }