Update EditReverse operation to support undo and redo on Text.edit

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">
@@ -332,7 +337,9 @@ <h4 class="title">
           await client.activate();
 
           // 03-1. create a document then attach it into the client.
-          const doc = new yorkie.Document('codemirror');
+          const doc = new yorkie.Document('codemirror', {
+            disableGC: true,
+          });
           doc.subscribe('presence', (event) => {
             if (event.type === 'presence-changed') return;
             displayUsers(doc.getPresences(), client.getID());
@@ -367,9 +374,27 @@ <h4 class="title">
               displayRemoteSelection(codemirror, doc, event.value);
             }
           });
+          doc.subscribe('my-presence', (event) => {
+            if (
+              event.type === 'presence-changed' &&
+              event.message === 'YORKIE_HISTORY'
+            ) {
+              const [fromIdx, toIdx] = doc
+                .getRoot()
+                .content.posRangeToIndexRange(event.value.presence.selection);
+
+              const from = codemirror.posFromIndex(fromIdx);
+              const to = codemirror.posFromIndex(toIdx);
+              codemirror.setSelection(from, to, { origin: 'yorkie' });
+            }
+          });
 
           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 +422,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');
           });
@@ -422,13 +450,12 @@ <h4 class="title">
             // NOTE: The following conditional statement ignores cursor changes
             //       that occur while applying remote changes to CodeMirror
             //       and handles only movement by keyboard and mouse.
-            if (change.origin === undefined) {
+            console.log(change.origin);
+            if (change.origin === undefined || change.origin === 'yorkie') {
               return;
             }
-
             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 +482,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,34 @@ 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()),
+    );
+
+    const pbDeletedIDs = [];
+    const deletedIDs = editReverseOperation.getDeletedIDs();
+    for (const deletedID of deletedIDs) {
+      pbDeletedIDs.push(toTextNodePos(deletedID));
+    }
+    const pbInsertedIDs = [];
+    const insertedIDs = editReverseOperation.getInsertedIDs();
+    for (const insertedID of insertedIDs) {
+      pbInsertedIDs.push(toTextNodePos(insertedID));
+    }
+    pbEditReverseOperation.setDeletedIdsList(pbDeletedIDs);
+    pbEditReverseOperation.setInsertedIdsList(pbInsertedIDs);
+
+    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 +1097,42 @@ 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 attributes = new Map();
+      pbEditReverseOperation!.getAttributesMap().forEach((value, key) => {
+        attributes.set(key, value);
+      });
+
+      const pbDeletedIDs = pbEditReverseOperation!.getDeletedIdsList()!;
+      const deletedIDs = [];
+      for (const pbDeletedID of pbDeletedIDs) {
+        deletedIDs.push(fromTextNodePos(pbDeletedID));
+      }
+      const pbInsertedIDs = pbEditReverseOperation!.getInsertedIdsList()!;
+      const insertedIDs = [];
+      for (const pbInsertedID of pbInsertedIDs) {
+        insertedIDs.push(fromTextNodePos(pbInsertedID));
+      }
+
+      operation = EditReverseOperation.create({
+        parentCreatedAt: fromTimeTicket(
+          pbEditReverseOperation!.getParentCreatedAt(),
+        )!,
+        deletedIDs,
+        insertedIDs,
+        attributes,
+        executedAt: fromTimeTicket(pbEditReverseOperation!.getExecutedAt())!,
+      });
     } else if (pbOperation.hasStyle()) {
       const pbStyleOperation = pbOperation.getStyle();
       const createdAtMapByActor = new Map();

src/api/yorkie/v1/resources.proto

@@ -133,6 +133,13 @@ message Operation {
     map<string, string> attributes = 4;
     TimeTicket executed_at = 5;
   }
+  message EditReverse {
+    TimeTicket parent_created_at = 1;
+    repeated TextNodePos deleted_ids = 2;
+    repeated TextNodePos inserted_ids = 3;
+    TimeTicket executed_at = 4;
+    map<string, string> attributes = 5;
+  }
 
   oneof body {
     Set set = 1;
@@ -145,6 +152,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,49 @@ export namespace Operation {
   }
 
 
+  export class EditReverse extends jspb.Message {
+    getParentCreatedAt(): TimeTicket | undefined;
+    setParentCreatedAt(value?: TimeTicket): EditReverse;
+    hasParentCreatedAt(): boolean;
+    clearParentCreatedAt(): EditReverse;
+
+    getDeletedIdsList(): Array<TextNodePos>;
+    setDeletedIdsList(value: Array<TextNodePos>): EditReverse;
+    clearDeletedIdsList(): EditReverse;
+    addDeletedIds(value?: TextNodePos, index?: number): TextNodePos;
+
+    getInsertedIdsList(): Array<TextNodePos>;
+    setInsertedIdsList(value: Array<TextNodePos>): EditReverse;
+    clearInsertedIdsList(): EditReverse;
+    addInsertedIds(value?: TextNodePos, index?: number): TextNodePos;
+
+    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,
+      deletedIdsList: Array<TextNodePos.AsObject>,
+      insertedIdsList: Array<TextNodePos.AsObject>,
+      executedAt?: TimeTicket.AsObject,
+      attributesMap: Array<[string, string]>,
+    }
+  }
+
+
   export enum BodyCase { 
     BODY_NOT_SET = 0,
     SET = 1,
@@ -639,6 +688,7 @@ export namespace Operation {
     INCREASE = 8,
     TREE_EDIT = 9,
     TREE_STYLE = 10,
+    EDIT_REVERSE = 11,
   }
 }