diff --git a/core/new-gui/package.json b/core/new-gui/package.json
index 365a6d4a465..0f04564dda1 100644
--- a/core/new-gui/package.json
+++ b/core/new-gui/package.json
@@ -4,7 +4,7 @@
   "license": "MIT",
   "scripts": {
     "ng": "nx",
-    "start": "ng serve",
+    "start": "concurrently --kill-others \"npx y-websocket\" \"ng serve\"",
     "build": "ng build --configuration production --progress=false --source-map=false",
     "analyze": "ng build --configuration production --stats-json && webpack-bundle-analyzer dist/stats.json",
     "test": "ng test",
@@ -67,7 +67,7 @@
     "jwt-decode": "~3.1.2",
     "lodash-es": "~4.17.21",
     "mapbox-gl": "~2.7.0",
-    "monaco-editor": "~0.32.1",
+    "monaco-editor": "^0.34.0",
     "ng-dynamic-component": "~10.1.0",
     "ng-gapi": "~0.0.94",
     "ng-zorro-antd": "13.2.2",
@@ -78,11 +78,19 @@
     "ngx-monaco-editor": "~9.0.0",
     "ngx-popper": "~7.0.0",
     "popper.js": "~1.16.1",
+    "quill": "^1.3.7",
+    "quill-cursors": "^3.1.2",
     "ring-buffer-ts": "~1.0.3",
     "rxjs": "~7.5.5",
     "tinyqueue": "~2.0.3",
     "tslib": "~2.3.1",
     "uuid": "~8.3.2",
+    "y-indexeddb": "^9.0.7",
+    "y-monaco": "^0.1.4",
+    "y-protocols": "^1.0.5",
+    "y-quill": "^0.1.5",
+    "y-websocket": "^1.4.0",
+    "yjs": "^13.5.34",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
@@ -114,8 +122,10 @@
     "@types/json-schema": "~7.0.9",
     "@types/lodash": "~4.14.179",
     "@types/uuid": "~8.3.4",
+    "@types/quill": "^2.0.9",
     "@typescript-eslint/eslint-plugin": "~5.14.0",
     "@typescript-eslint/parser": "~5.14.0",
+    "concurrently": "^7.4.0",
     "cypress": "~9.5.1",
     "eslint": "~7.32.0",
     "eslint-plugin-import": "latest",
diff --git a/core/new-gui/proxy.config.json b/core/new-gui/proxy.config.json
index dc65b2a7912..3f956b2e992 100755
--- a/core/new-gui/proxy.config.json
+++ b/core/new-gui/proxy.config.json
@@ -9,5 +9,11 @@
     "secure": false,
     "changeOrigin": false,
     "ws": true
+  },
+  "/rtc": {
+    "target": "http://localhost:1234",
+    "ws": true,
+    "secure": false,
+    "changeOrigin": false
   }
 }
diff --git a/core/new-gui/src/app/common/service/user/stub-user.service.ts b/core/new-gui/src/app/common/service/user/stub-user.service.ts
index d2af59fa62c..e5d60e0316d 100644
--- a/core/new-gui/src/app/common/service/user/stub-user.service.ts
+++ b/core/new-gui/src/app/common/service/user/stub-user.service.ts
@@ -48,4 +48,8 @@ export class StubUserService implements PublicInterfaceOf<UserService> {
   userChanged(): Observable<User | undefined> {
     return this.userChangeSubject.asObservable();
   }
+
+  getCurrentUser(): User | undefined {
+    return this.user;
+  }
 }
diff --git a/core/new-gui/src/app/common/service/user/user.service.ts b/core/new-gui/src/app/common/service/user/user.service.ts
index f78426458e3..d87d8c56edc 100644
--- a/core/new-gui/src/app/common/service/user/user.service.ts
+++ b/core/new-gui/src/app/common/service/user/user.service.ts
@@ -22,6 +22,10 @@ export class UserService {
     }
   }
 
+  public getCurrentUser(): User | undefined {
+    return this.currentUser;
+  }
+
   public login(username: string, password: string): Observable<void> {
     // validate the credentials with backend
     return this.authService
@@ -56,7 +60,14 @@ export class UserService {
    * @param user
    */
   private changeUser(user: User | undefined): void {
-    this.currentUser = user;
+    if (user) {
+      const r = Math.floor(Math.random() * 155);
+      const g = Math.floor(Math.random() * 155);
+      const b = Math.floor(Math.random() * 155);
+      this.currentUser = { ...user, color: "rgba(" + r + "," + g + "," + b + ",0.8)" };
+    } else {
+      this.currentUser = user;
+    }
     this.userChangeSubject.next(this.currentUser);
   }
 
diff --git a/core/new-gui/src/app/common/type/user.ts b/core/new-gui/src/app/common/type/user.ts
index abaf31e8aa7..1ef8ee9be4b 100644
--- a/core/new-gui/src/app/common/type/user.ts
+++ b/core/new-gui/src/app/common/type/user.ts
@@ -1,6 +1,8 @@
+import { Point } from "../../workspace/types/workflow-common.interface";
+
 /**
  * This interface stores the information about the user account.
- * These information is used to identify users and to save their data
+ * Such information is used to identify users and to save their data
  * Corresponds to `core/amber/src/main/scala/edu/uci/ics/texera/web/resource/auth/UserResource.scala`
  */
 export interface User
@@ -8,4 +10,20 @@ export interface User
     name: string;
     uid: number;
     googleId?: string;
+    color?: string;
   }> {}
+
+/**
+ * This interface is for user-presence information in shared-editing.
+ */
+export interface UserState {
+  user: User;
+  clientId: String;
+  isActive: boolean;
+  userCursor: Point;
+  highlighted?: string[];
+  unhighlighted?: string[];
+  currentlyEditing?: string;
+  changed?: string;
+  editingCode?: boolean;
+}
diff --git a/core/new-gui/src/app/workspace/component/code-editor-dialog/code-editor-dialog.component.ts b/core/new-gui/src/app/workspace/component/code-editor-dialog/code-editor-dialog.component.ts
index f7de0cfb542..9e51180bb81 100644
--- a/core/new-gui/src/app/workspace/component/code-editor-dialog/code-editor-dialog.component.ts
+++ b/core/new-gui/src/app/workspace/component/code-editor-dialog/code-editor-dialog.component.ts
@@ -1,7 +1,6 @@
 import { Component, Inject } from "@angular/core";
 import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material/dialog";
 import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
-import { WorkflowCollabService } from "../../service/workflow-collab/workflow-collab.service";
 import { WorkflowActionService } from "../../service/workflow-graph/model/workflow-action.service";
 import { OperatorPredicate } from "../../types/workflow-common.interface";
 
@@ -25,30 +24,16 @@ export class CodeEditorDialogComponent {
     language: "python",
     fontSize: "11",
     automaticLayout: true,
-    readOnly: true,
+    readOnly: false,
   };
   code: string;
 
-  public lockGranted: boolean = false;
-
   constructor(
     private dialogRef: MatDialogRef<CodeEditorDialogComponent>,
     @Inject(MAT_DIALOG_DATA) code: any,
-    private workflowActionService: WorkflowActionService,
-    private workflowCollabService: WorkflowCollabService
+    private workflowActionService: WorkflowActionService
   ) {
     this.code = code;
-    this.handleLockChange();
-  }
-
-  private handleLockChange(): void {
-    this.workflowCollabService
-      .getLockStatusStream()
-      .pipe(untilDestroyed(this))
-      .subscribe((lockGranted: boolean) => {
-        this.lockGranted = lockGranted;
-        this.editorOptions.readOnly = !this.lockGranted;
-      });
   }
 
   onCodeChange(code: string): void {
diff --git a/core/new-gui/src/app/workspace/component/codearea-custom-template/codearea-custom-template.component.html b/core/new-gui/src/app/workspace/component/codearea-custom-template/codearea-custom-template.component.html
index b728e427dc1..4c2bdd442be 100644
--- a/core/new-gui/src/app/workspace/component/codearea-custom-template/codearea-custom-template.component.html
+++ b/core/new-gui/src/app/workspace/component/codearea-custom-template/codearea-custom-template.component.html
@@ -1,13 +1,5 @@
 <div class="attribute-container">
-  <button
-    (click)="onClickEditor()"
-    class="code-button"
-    nz-button
-    nzShape="round"
-    nzType="primary"
-    [ngClass]="{ 'readonly': !lockGranted }"
-  >
-    <div *ngIf="lockGranted">Edit code content</div>
-    <div *ngIf="!lockGranted">View code content</div>
+  <button (click)="onClickEditor()" class="code-button" nz-button nzShape="round" nzType="primary">
+    <div>Edit code content</div>
   </button>
 </div>
diff --git a/core/new-gui/src/app/workspace/component/codearea-custom-template/codearea-custom-template.component.scss b/core/new-gui/src/app/workspace/component/codearea-custom-template/codearea-custom-template.component.scss
index 76aa34efcc0..826ec4f5398 100644
--- a/core/new-gui/src/app/workspace/component/codearea-custom-template/codearea-custom-template.component.scss
+++ b/core/new-gui/src/app/workspace/component/codearea-custom-template/codearea-custom-template.component.scss
@@ -4,15 +4,4 @@
 
 .attribute-container {
   text-align: center;
-  .code-button {
-    &.readonly {
-      color: black;
-      background-color: blanchedalmond;
-      border-color: blanchedalmond;
-
-      &:hover {
-        background-color: #fff0d9;
-      }
-    }
-  }
 }
diff --git a/core/new-gui/src/app/workspace/component/codearea-custom-template/codearea-custom-template.component.ts b/core/new-gui/src/app/workspace/component/codearea-custom-template/codearea-custom-template.component.ts
index 225247a1185..58f7c07376e 100644
--- a/core/new-gui/src/app/workspace/component/codearea-custom-template/codearea-custom-template.component.ts
+++ b/core/new-gui/src/app/workspace/component/codearea-custom-template/codearea-custom-template.component.ts
@@ -2,9 +2,6 @@ import { Component } from "@angular/core";
 import { FieldType } from "@ngx-formly/core";
 import { MatDialog, MatDialogRef } from "@angular/material/dialog";
 import { CodeEditorDialogComponent } from "../code-editor-dialog/code-editor-dialog.component";
-import { WorkflowCollabService } from "../../service/workflow-collab/workflow-collab.service";
-import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
-import { WorkflowActionService } from "../../service/workflow-graph/model/workflow-action.service";
 
 /**
  * CodeareaCustomTemplateComponent is the custom template for 'codearea' type of formly field.
@@ -15,56 +12,24 @@ import { WorkflowActionService } from "../../service/workflow-graph/model/workfl
  * Clicking on the 'Edit code content' button will create a new dialogue with CodeEditorComponent
  * as its content. The data of this field will be sent to this dialogue, which contains a Monaco editor.
  */
-@UntilDestroy()
 @Component({
   selector: "texera-codearea-custom-template",
   templateUrl: "./codearea-custom-template.component.html",
   styleUrls: ["./codearea-custom-template.component.scss"],
 })
 export class CodeareaCustomTemplateComponent extends FieldType {
-  lockGranted: boolean = false;
   dialogRef: MatDialogRef<CodeEditorDialogComponent> | undefined;
 
-  constructor(
-    public dialog: MatDialog,
-    public workflowCollabService: WorkflowCollabService,
-    public workflowActionService: WorkflowActionService
-  ) {
+  constructor(public dialog: MatDialog) {
     super();
-    this.handleLockChange();
-    this.handleCodeChange();
   }
 
+  /**
+   * Opens the code editor.
+   */
   onClickEditor(): void {
     this.dialogRef = this.dialog.open(CodeEditorDialogComponent, {
       data: this.formControl?.value || "",
     });
   }
-
-  private handleLockChange(): void {
-    this.workflowCollabService
-      .getLockStatusStream()
-      .pipe(untilDestroyed(this))
-      .subscribe((lockGranted: boolean) => {
-        this.lockGranted = lockGranted;
-      });
-  }
-
-  private handleCodeChange(): void {
-    this.workflowActionService
-      .getTexeraGraph()
-      .getOperatorPropertyChangeStream()
-      .pipe(untilDestroyed(this))
-      .subscribe(({ operator }) => {
-        if (this.dialogRef != undefined && !this.lockGranted) {
-          // here the assumption is the operator being edited must be highlighted
-          const currentOperatorId: string = this.workflowActionService
-            .getJointGraphWrapper()
-            .getCurrentHighlightedOperatorIDs()[0];
-          if (currentOperatorId === operator.operatorID) {
-            this.dialogRef.componentInstance.code = operator.operatorProperties["code"];
-          }
-        }
-      });
-  }
 }
diff --git a/core/new-gui/src/app/workspace/component/navigation/navigation.component.html b/core/new-gui/src/app/workspace/component/navigation/navigation.component.html
index 608259a5c98..558944c1eff 100644
--- a/core/new-gui/src/app/workspace/component/navigation/navigation.component.html
+++ b/core/new-gui/src/app/workspace/component/navigation/navigation.component.html
@@ -7,23 +7,6 @@
       src="assets/logos/full_logo_small.png?v=1"
     />
 
-    <div *ngIf="userSystemEnabled && workflowCollabEnabled" class="texera-navigation-lockholder-status">
-      <button
-        (click)="onClickAcquireLock()"
-        nz-button
-        [disabled]="lockGranted || workflowReadonly"
-        title="acquire lock"
-        class="lockholder-status"
-        [ngClass]="{ 'clickable': !lockGranted && !workflowReadonly }"
-      >
-        <i *ngIf="lockGranted && !workflowReadonly" nz-icon nzTheme="outline" nzType="lock"></i>
-        <i *ngIf="!lockGranted || workflowReadonly" nz-icon nzTheme="outline" nzType="unlock"></i>
-        <span *ngIf="lockGranted && !workflowReadonly"> {{ "You can edit now" }} </span>
-        <span *ngIf="!lockGranted && !workflowReadonly"> {{ "Readonly - click to edit" }} </span>
-        <span *ngIf="workflowReadonly"> {{ "Readonly - cannot edit" }} </span>
-      </button>
-    </div>
-
     <!-- workflow metadata display -->
     <div *ngIf="userSystemEnabled" class="texera-navigation-workflow-metadata">
       <button
@@ -41,7 +24,6 @@
           *ngIf="!displayParticularWorkflowVersion"
           (change)="onWorkflowNameChange()"
           [(ngModel)]="currentWorkflowName"
-          [disabled]="!lockGranted"
           class="workflow-name"
           placeholder="Untitled Workflow"
         />
@@ -49,13 +31,7 @@
           {{particularVersionDate}}
         </span>
       </label>
-      <button
-        *ngIf="displayParticularWorkflowVersion"
-        [disabled]="!lockGranted"
-        nz-button
-        nzType="primary"
-        (click)="revertToVersion()"
-      >
+      <button *ngIf="displayParticularWorkflowVersion" nz-button nzType="primary" (click)="revertToVersion()">
         Restore this version
       </button>
       <button
@@ -86,18 +62,18 @@
         <button
           (click)="persistWorkflow()"
           *ngIf="userSystemEnabled"
-          [disabled]="!userService.isLogin() || isSaving || !lockGranted"
+          [disabled]="!userService.isLogin() || isSaving"
           nz-button
           title="save"
         >
           <i *ngIf="!isSaving" nz-icon nzTheme="outline" nzType="save"></i>
           <i *ngIf="isSaving" [nzSpin]="true" [nzType]="'sync'" nz-icon nzTheme="outline"></i>
         </button>
-        <button (click)="onClickDeleteAllOperators()" [disabled]="!lockGranted" nz-button title="delete all">
+        <button (click)="onClickDeleteAllOperators()" nz-button title="delete all">
           <i nz-icon nzTheme="outline" nzType="delete"></i>
         </button>
-        <nz-upload [nzDisabled]="!lockGranted" [nzBeforeUpload]="onClickImportWorkflow">
-          <button nz-button [disabled]="!lockGranted" title="import workflow">
+        <nz-upload [nzBeforeUpload]="onClickImportWorkflow">
+          <button nz-button title="import workflow">
             <i nz-icon nzTheme="outline" nzType="upload"></i>
           </button>
         </nz-upload>
@@ -121,7 +97,7 @@
         <button (click)="onClickRestoreZoomOffsetDefault()" nz-button title="reset zoom">
           <i nz-icon nzTheme="outline" nzType="fullscreen"></i>
         </button>
-        <button nz-button (click)="onClickAutoLayout()" [disabled]="!lockGranted" title="auto layout">
+        <button nz-button (click)="onClickAutoLayout()" title="auto layout">
           <i nz-icon nzType="partition" nzTheme="outline"></i>
         </button>
         <button (click)="onClickAddCommentBox()" nz-button title="add a comment">
@@ -154,26 +130,10 @@
             <!--            </li>-->
           </ul>
         </nz-dropdown-menu>
-        <!-- <button
-          (click)="onClickGroupOperators()"
-          [disabled]="!highlightedElementsGroupable()"
-          nz-button
-          title="group"
-        >
-          <i nz-icon nzTheme="outline" nzType="group"></i>
-        </button>
-        <button
-          (click)="onClickUngroupOperators()"
-          [disabled]="!highlightedElementsUngroupable()"
-          nz-button
-          title="ungroup"
-        >
-          <i nz-icon nzTheme="outline" nzType="ungroup"></i>
-        </button> -->
         <button
           (click)="operatorMenu.disableHighlightedOperators()"
           *ngIf="operatorMenu.isDisableOperator || !operatorMenu.isDisableOperatorClickable"
-          [disabled]="!operatorMenu.isDisableOperatorClickable || !lockGranted"
+          [disabled]="!operatorMenu.isDisableOperatorClickable"
           nz-button
           title="disable operators"
         >
@@ -182,7 +142,7 @@
         <button
           (click)="operatorMenu.disableHighlightedOperators()"
           *ngIf="!operatorMenu.isDisableOperator && operatorMenu.isDisableOperatorClickable"
-          [disabled]="!operatorMenu.isDisableOperatorClickable || !lockGranted"
+          [disabled]="!operatorMenu.isDisableOperatorClickable"
           nz-button
           title="operators disabled, click to re-enable"
         >
@@ -190,7 +150,7 @@
         </button>
         <button
           *ngIf="operatorMenu.operatorCacheEnabled && (operatorMenu.isCacheOperator || ! operatorMenu.isCacheOperatorClickable)"
-          [disabled]="! operatorMenu.isCacheOperatorClickable || !lockGranted"
+          [disabled]="! operatorMenu.isCacheOperatorClickable"
           (click)="operatorMenu.cacheHighlightedOperators()"
           nz-button
           title="cache operators"
@@ -199,7 +159,7 @@
         </button>
         <button
           *ngIf="operatorMenu.operatorCacheEnabled && (! operatorMenu.isCacheOperator && operatorMenu.isCacheOperatorClickable)"
-          [disabled]="! operatorMenu.isCacheOperatorClickable || !lockGranted"
+          [disabled]="! operatorMenu.isCacheOperatorClickable"
           (click)="operatorMenu.cacheHighlightedOperators()"
           nz-button
           title="operators cached, click to remove cache"
@@ -224,7 +184,7 @@
       <nz-button-group nzSize="large">
         <button
           (click)="undoRedoService.undoAction()"
-          [disabled]="displayParticularWorkflowVersion || !undoRedoService.canUndo() || !lockGranted"
+          [disabled]="displayParticularWorkflowVersion || !undoRedoService.canUndo()"
           class="animate-to-reveal-stop-button"
           nz-button
           nzType="default"
@@ -233,7 +193,7 @@
         </button>
         <button
           (click)="undoRedoService.redoAction()"
-          [disabled]="displayParticularWorkflowVersion || !undoRedoService.canRedo() || !lockGranted"
+          [disabled]="displayParticularWorkflowVersion || !undoRedoService.canRedo()"
           class="animate-to-reveal-stop-button"
           nz-button
           nzType="default"
@@ -246,8 +206,7 @@
           [disabled]="
 						executionState === ExecutionState.Uninitialized ||
 						executionState === ExecutionState.Completed ||
-						executionState === ExecutionState.Aborted ||
-            !lockGranted
+						executionState === ExecutionState.Aborted
 					"
           class="texera-navigation-stop-button"
           nz-button
@@ -259,7 +218,7 @@
         </button>
         <button
           (click)="onClickRunHandler()"
-          [disabled]="runDisable || !workflowWebsocketService.isConnected || displayParticularWorkflowVersion|| !lockGranted"
+          [disabled]="runDisable || !workflowWebsocketService.isConnected || displayParticularWorkflowVersion"
           class="texera-navigation-run-button animate-to-reveal-stop-button"
           nz-button
           nzType="primary"
diff --git a/core/new-gui/src/app/workspace/component/navigation/navigation.component.ts b/core/new-gui/src/app/workspace/component/navigation/navigation.component.ts
index edf72f9cb58..359d4b3769e 100644
--- a/core/new-gui/src/app/workspace/component/navigation/navigation.component.ts
+++ b/core/new-gui/src/app/workspace/component/navigation/navigation.component.ts
@@ -22,7 +22,6 @@ import { isSink } from "../../service/workflow-graph/model/workflow-graph";
 import { WorkflowVersionService } from "../../../dashboard/service/workflow-version/workflow-version.service";
 import { concatMap, catchError } from "rxjs/operators";
 import { UserProjectService } from "src/app/dashboard/service/user-project/user-project.service";
-import { WorkflowCollabService } from "../../service/workflow-collab/workflow-collab.service";
 import { NzUploadFile } from "ng-zorro-antd/upload";
 import { saveAs } from "file-saver";
 import { NotificationService } from "src/app/common/service/notification/notification.service";
@@ -69,15 +68,10 @@ export class NavigationComponent implements OnInit {
 
   // whether user dashboard is enabled and accessible from the workspace
   public userSystemEnabled: boolean = environment.userSystemEnabled;
-  public workflowCollabEnabled: boolean = environment.workflowCollabEnabled;
-  public lockGranted: boolean = true;
-  public workflowReadonly: boolean = false;
   // flag to display a particular version in the current canvas
   public displayParticularWorkflowVersion: boolean = false;
   public onClickRunHandler: () => void;
 
-  public static readonly COLLAB_RELOAD_WAIT_TIME = 500;
-
   constructor(
     public executeWorkflowService: ExecuteWorkflowService,
     public workflowActionService: WorkflowActionService,
@@ -90,7 +84,6 @@ export class NavigationComponent implements OnInit {
     public userService: UserService,
     private datePipe: DatePipe,
     public workflowResultExportService: WorkflowResultExportService,
-    public workflowCollabService: WorkflowCollabService,
     public workflowUtilService: WorkflowUtilService,
     private userProjectService: UserProjectService,
     private notificationService: NotificationService,
@@ -128,8 +121,6 @@ export class NavigationComponent implements OnInit {
 
     this.registerWorkflowMetadataDisplayRefresh();
     this.handleWorkflowVersionDisplay();
-    this.handleLockChange();
-    this.handleWorkflowAccessChange();
   }
 
   // apply a behavior to the run button via bound variables
@@ -357,16 +348,12 @@ export class NavigationComponent implements OnInit {
           lastModifiedTime: undefined,
         };
 
-        // enable workspace for modification
-        this.workflowActionService.toggleLockListen(false);
         this.workflowActionService.enableWorkflowModification();
         // load the fetched workflow
         this.workflowActionService.reloadWorkflow(workflow, true);
         // clear stack
         this.undoRedoService.clearUndoStack();
         this.undoRedoService.clearRedoStack();
-        this.workflowActionService.toggleLockListen(true);
-        this.workflowActionService.syncLock();
       } catch (error) {
         this.notificationService.error(
           "An error occurred when importing the workflow. Please import a workflow json file."
@@ -391,89 +378,44 @@ export class NavigationComponent implements OnInit {
     return this.workflowActionService.getTexeraGraph().getAllOperators().length > 0;
   }
 
-  /**
-   * Groups highlighted operators on the graph.
-   */
-  public onClickGroupOperators(): void {
-    const highlightedOperators = this.workflowActionService.getJointGraphWrapper().getCurrentHighlightedOperatorIDs();
-    if (this.highlightedElementsGroupable()) {
-      const group = this.workflowActionService.getOperatorGroup().getNewGroup(highlightedOperators);
-      this.workflowActionService.addGroups(group);
-    }
-  }
-
-  /**
-   * Returns true if currently highlighted elements are all operators
-   * and if they are groupable.
-   */
-  public highlightedElementsGroupable(): boolean {
-    const highlightedOperators = this.workflowActionService.getJointGraphWrapper().getCurrentHighlightedOperatorIDs();
-    return (
-      this.workflowActionService.getJointGraphWrapper().getCurrentHighlightedGroupIDs().length === 0 &&
-      this.workflowActionService.getOperatorGroup().operatorsGroupable(highlightedOperators)
-    );
-  }
-
-  /**
-   * Ungroups highlighted groups on the graph.
-   */
-  public onClickUngroupOperators(): void {
-    const highlightedGroups = this.workflowActionService.getJointGraphWrapper().getCurrentHighlightedGroupIDs();
-    if (this.highlightedElementsUngroupable()) {
-      this.workflowActionService.unGroupGroups(...highlightedGroups);
-    }
-  }
-
-  /**
-   * Returns true if currently highlighted elements are all groups.
-   */
-  public highlightedElementsUngroupable(): boolean {
-    return (
-      this.workflowActionService.getJointGraphWrapper().getCurrentHighlightedGroupIDs().length > 0 &&
-      this.workflowActionService.getJointGraphWrapper().getCurrentHighlightedOperatorIDs().length === 0
-    );
-  }
-
   public persistWorkflow(): void {
-    if (this.workflowCollabService.isLockGranted()) {
-      this.isSaving = true;
-      if (this.pid === 0) {
-        this.workflowPersistService
-          .persistWorkflow(this.workflowActionService.getWorkflow())
-          .pipe(untilDestroyed(this))
-          .subscribe(
-            (updatedWorkflow: Workflow) => {
-              this.workflowActionService.setWorkflowMetadata(updatedWorkflow);
-              this.isSaving = false;
-            },
-            (error: unknown) => {
-              alert(error);
-              this.isSaving = false;
-            }
-          );
-      } else {
-        // add workflow to project, backend will create new mapping if not already added
-        this.workflowPersistService
-          .persistWorkflow(this.workflowActionService.getWorkflow())
-          .pipe(
-            concatMap((updatedWorkflow: Workflow) => {
-              this.workflowActionService.setWorkflowMetadata(updatedWorkflow);
-              this.isSaving = false;
-              return this.userProjectService.addWorkflowToProject(this.pid, updatedWorkflow.wid!);
-            }),
-            catchError((err: unknown) => {
-              throw err;
-            }),
-            untilDestroyed(this)
-          )
-          .subscribe(
-            () => {},
-            (error: unknown) => {
-              alert(error);
-              this.isSaving = false;
-            }
-          );
-      }
+    this.isSaving = true;
+    if (this.pid === 0) {
+      this.workflowPersistService
+        .persistWorkflow(this.workflowActionService.getWorkflow())
+        .pipe(untilDestroyed(this))
+        .subscribe(
+          (updatedWorkflow: Workflow) => {
+            this.workflowActionService.setWorkflowMetadata(updatedWorkflow);
+            this.isSaving = false;
+          },
+          (error: unknown) => {
+            alert(error);
+            this.isSaving = false;
+          }
+        );
+    } else {
+      // add workflow to project, backend will create new mapping if not already added
+      this.workflowPersistService
+        .persistWorkflow(this.workflowActionService.getWorkflow())
+        .pipe(
+          concatMap((updatedWorkflow: Workflow) => {
+            this.workflowActionService.setWorkflowMetadata(updatedWorkflow);
+            this.isSaving = false;
+            return this.userProjectService.addWorkflowToProject(this.pid, updatedWorkflow.wid!);
+          }),
+          catchError((err: unknown) => {
+            throw err;
+          }),
+          untilDestroyed(this)
+        )
+        .subscribe(
+          () => {},
+          (error: unknown) => {
+            alert(error);
+            this.isSaving = false;
+          }
+        );
     }
   }
 
@@ -492,10 +434,6 @@ export class NavigationComponent implements OnInit {
     this.location.go("/");
   }
 
-  onClickAcquireLock() {
-    this.workflowCollabService.acquireLock();
-  }
-
   registerWorkflowMetadataDisplayRefresh() {
     this.workflowActionService
       .workflowMetaDataChanged()
@@ -547,27 +485,5 @@ export class NavigationComponent implements OnInit {
     this.workflowVersionService.revertToVersion();
     // after swapping the workflows to point to the particular version, persist it in DB
     this.persistWorkflow();
-    setTimeout(() => {
-      this.workflowCollabService.requestOthersToReload();
-    }, NavigationComponent.COLLAB_RELOAD_WAIT_TIME);
-  }
-
-  private handleLockChange(): void {
-    this.workflowCollabService
-      .getLockStatusStream()
-      .pipe(untilDestroyed(this))
-      .subscribe((lockGranted: boolean) => {
-        this.lockGranted = lockGranted;
-        this.changeDetectionRef.detectChanges();
-      });
-  }
-
-  private handleWorkflowAccessChange(): void {
-    this.workflowCollabService
-      .getWorkflowAccessStream()
-      .pipe(untilDestroyed(this))
-      .subscribe((workflowReadonly: boolean) => {
-        this.workflowReadonly = workflowReadonly;
-      });
   }
 }
diff --git a/core/new-gui/src/app/workspace/component/property-editor/operator-property-edit-frame/operator-property-edit-frame.component.html b/core/new-gui/src/app/workspace/component/property-editor/operator-property-edit-frame/operator-property-edit-frame.component.html
index c746c312a98..51654bae6aa 100644
--- a/core/new-gui/src/app/workspace/component/property-editor/operator-property-edit-frame/operator-property-edit-frame.component.html
+++ b/core/new-gui/src/app/workspace/component/property-editor/operator-property-edit-frame/operator-property-edit-frame.component.html
@@ -1,7 +1,7 @@
 <div *ngIf="!editingTitle" id="formly-title">
   <h3 *ngIf="!editingTitle && formTitle" class="texera-workspace-property-editor-title">{{ formTitle }}</h3>
   <button
-    (click)="editingTitle=true"
+    (click)="editingTitle=true; connectQuillToText()"
     nz-button
     nz-tooltip="Customize Operator Name"
     nzSize="small"
@@ -13,14 +13,12 @@ <h3 *ngIf="!editingTitle && formTitle" class="texera-workspace-property-editor-t
   </button>
 </div>
 
-<input
-  #customName
-  (focusout)="confirmChangeOperatorCustomName(customName.value)"
-  (keyup.enter)="confirmChangeOperatorCustomName(customName.value)"
-  *ngIf="editingTitle"
-  placeholder="{{formTitle}}"
-  value="{{formTitle}}"
-/>
+<div
+  id="customName"
+  [hidden]="!editingTitle"
+  (focusout)="disconnectQuillFromText()"
+  (keyup.enter)="disconnectQuillFromText()"
+></div>
 
 <form
   *ngIf="formlyFields && formlyFormGroup"
diff --git a/core/new-gui/src/app/workspace/component/property-editor/operator-property-edit-frame/operator-property-edit-frame.component.ts b/core/new-gui/src/app/workspace/component/property-editor/operator-property-edit-frame/operator-property-edit-frame.component.ts
index 601bf3299bd..4d257e76ac3 100644
--- a/core/new-gui/src/app/workspace/component/property-editor/operator-property-edit-frame/operator-property-edit-frame.component.ts
+++ b/core/new-gui/src/app/workspace/component/property-editor/operator-property-edit-frame/operator-property-edit-frame.component.ts
@@ -7,7 +7,7 @@ import Ajv from "ajv";
 import { FormlyJsonschema } from "@ngx-formly/core/json-schema";
 import { WorkflowActionService } from "../../../service/workflow-graph/model/workflow-action.service";
 import { cloneDeep, isEqual } from "lodash-es";
-import { CustomJSONSchema7, HideType, hideTypes } from "../../../types/custom-json-schema.interface";
+import { CustomJSONSchema7, hideTypes } from "../../../types/custom-json-schema.interface";
 import { isDefined } from "../../../../common/util/predicate";
 import { ExecutionState } from "src/app/workspace/types/execute-workflow.interface";
 import { DynamicSchemaService } from "../../../service/dynamic-schema/dynamic-schema.service";
@@ -31,18 +31,22 @@ import { filter } from "rxjs/operators";
 import { NotificationService } from "../../../../common/service/notification/notification.service";
 import { PresetWrapperComponent } from "src/app/common/formly/preset-wrapper/preset-wrapper.component";
 import { environment } from "src/environments/environment";
-import { WorkflowCollabService } from "../../../service/workflow-collab/workflow-collab.service";
 import { WorkflowVersionService } from "../../../../dashboard/service/workflow-version/workflow-version.service";
-import { DashboardUserFileEntry, UserFile } from "../../../../dashboard/type/dashboard-user-file-entry";
 import { UserFileService } from "../../../../dashboard/service/user-file/user-file.service";
 import { AccessEntry } from "../../../../dashboard/type/access.interface";
 import { WorkflowAccessService } from "../../../../dashboard/service/workflow-access/workflow-access.service";
 import { Workflow } from "../../../../common/type/workflow";
+import { QuillBinding } from "y-quill";
+import Quill from "quill";
+import QuillCursors from "quill-cursors";
+import * as Y from "yjs";
 
 export type PropertyDisplayComponent = TypeCastingDisplayComponent;
 
 export type PropertyDisplayComponentConfig = DynamicComponentConfig<PropertyDisplayComponent>;
 
+Quill.register("modules/cursors", QuillCursors);
+
 /**
  * Property Editor uses JSON Schema to automatically generate the form from the JSON Schema of an operator.
  * For example, the JSON Schema of Sentiment Analysis could be:
@@ -103,12 +107,13 @@ export class OperatorPropertyEditFrameComponent implements OnInit, OnChanges, On
 
   // for display component of some extra information
   extraDisplayComponentConfig?: PropertyDisplayComponentConfig;
-
-  // used to tear down subscriptions that takeUntil(teardownObservable)
-  private teardownObservable: Subject<void> = new Subject();
   public lockGranted: boolean = true;
   public allUserWorkflowAccess: ReadonlyArray<AccessEntry> = [];
   public operatorVersion: string = "";
+  quillBinding?: QuillBinding;
+  quill!: Quill;
+  // used to tear down subscriptions that takeUntil(teardownObservable)
+  private teardownObservable: Subject<void> = new Subject();
 
   constructor(
     private formlyJsonschema: FormlyJsonschema,
@@ -117,7 +122,6 @@ export class OperatorPropertyEditFrameComponent implements OnInit, OnChanges, On
     private dynamicSchemaService: DynamicSchemaService,
     private schemaPropagationService: SchemaPropagationService,
     private notificationService: NotificationService,
-    private workflowCollabService: WorkflowCollabService,
     private changeDetectorRef: ChangeDetectorRef,
     private workflowVersionService: WorkflowVersionService,
     private userFileService: UserFileService,
@@ -158,8 +162,6 @@ export class OperatorPropertyEditFrameComponent implements OnInit, OnChanges, On
 
     this.registerOperatorDisplayNameChangeHandler();
 
-    this.registerLockChangeHandler();
-
     let workflow = this.workflowActionService.getWorkflow();
     if (workflow) this.refreshGrantedList(workflow);
   }
@@ -360,26 +362,6 @@ export class OperatorPropertyEditFrameComponent implements OnInit, OnChanges, On
       });
   }
 
-  private registerOperatorDisplayNameChangeHandler(): void {
-    this.workflowActionService
-      .getTexeraGraph()
-      .getOperatorDisplayNameChangedStream()
-      .pipe(untilDestroyed(this))
-      .subscribe(({ operatorID, newDisplayName }) => {
-        if (operatorID === this.currentOperatorId) this.formTitle = newDisplayName;
-      });
-  }
-
-  private registerLockChangeHandler(): void {
-    this.workflowCollabService
-      .getLockStatusStream()
-      .pipe(untilDestroyed(this))
-      .subscribe((lockGranted: boolean) => {
-        this.lockGranted = lockGranted;
-        this.changeDetectorRef.detectChanges();
-      });
-  }
-
   setFormlyFormBinding(schema: CustomJSONSchema7) {
     var operatorPropertyDiff = this.workflowVersionService.operatorPropertyDiff;
     if (this.currentOperatorId != undefined && operatorPropertyDiff[this.currentOperatorId] != undefined) {
@@ -505,19 +487,80 @@ export class OperatorPropertyEditFrameComponent implements OnInit, OnChanges, On
     }
   }
 
-  confirmChangeOperatorCustomName(customDisplayName: string) {
+  /**
+   * Connects the actual y-text structure of this operator's name to the editor's awareness manager.
+   */
+  connectQuillToText() {
+    this.registerQuillBinding();
+    const currentOperatorSharedType = this.workflowActionService
+      .getTexeraGraph()
+      .getSharedOperatorType(<string>this.currentOperatorId);
     if (this.currentOperatorId) {
-      const currentOperatorSchema = this.dynamicSchemaService.getDynamicSchema(this.currentOperatorId);
-      const userFriendlyName = currentOperatorSchema.additionalMetadata.userFriendlyName;
-      // fall back to the original userFriendlyName if no valid name is provided
-      const newDisplayName =
-        customDisplayName === "" || customDisplayName === undefined
-          ? currentOperatorSchema.additionalMetadata.userFriendlyName
-          : customDisplayName;
-      this.workflowActionService.setOperatorCustomName(this.currentOperatorId, newDisplayName, userFriendlyName);
-      this.formTitle = newDisplayName;
+      if (!currentOperatorSharedType.has("customDisplayName")) {
+        currentOperatorSharedType.set("customDisplayName", new Y.Text());
+      }
+      const ytext = currentOperatorSharedType.get("customDisplayName");
+      this.quillBinding = new QuillBinding(
+        ytext as Y.Text,
+        this.quill,
+        this.workflowActionService.getTexeraGraph().getSharedModelAwareness()
+      );
     }
+  }
 
+  /**
+   * Stop editing title and hide the editor.
+   */
+  disconnectQuillFromText() {
+    this.quill.blur();
+    this.quillBinding = undefined;
     this.editingTitle = false;
   }
+
+  private registerOperatorDisplayNameChangeHandler(): void {
+    this.workflowActionService
+      .getTexeraGraph()
+      .getOperatorDisplayNameChangedStream()
+      .pipe(untilDestroyed(this))
+      .subscribe(({ operatorID, newDisplayName }) => {
+        if (operatorID === this.currentOperatorId) this.formTitle = newDisplayName;
+      });
+  }
+
+  /**
+   * Initializes shared text editor.
+   * @private
+   */
+  private registerQuillBinding() {
+    // Operator name editor
+    const element = document.getElementById("customName") as Element;
+    this.quill = new Quill(element, {
+      modules: {
+        cursors: true,
+        toolbar: false,
+        history: {
+          // Local undo shouldn't undo changes
+          // from remote users
+          userOnly: true,
+        },
+        // Disable newline on enter and instead quit editing
+        keyboard: {
+          bindings: {
+            enter: {
+              key: 13,
+              handler: () => this.disconnectQuillFromText(),
+            },
+            shift_enter: {
+              key: 13,
+              shiftKey: true,
+              handler: () => this.disconnectQuillFromText(),
+            },
+          },
+        },
+      },
+      formats: [],
+      placeholder: "Start collaborating...",
+      theme: "snow",
+    });
+  }
 }
diff --git a/core/new-gui/src/app/workspace/component/property-editor/property-editor.component.ts b/core/new-gui/src/app/workspace/component/property-editor/property-editor.component.ts
index 35701bbe34c..883aeeafca4 100644
--- a/core/new-gui/src/app/workspace/component/property-editor/property-editor.component.ts
+++ b/core/new-gui/src/app/workspace/component/property-editor/property-editor.component.ts
@@ -10,6 +10,7 @@ import {
   WorkflowVersionService,
 } from "src/app/dashboard/service/workflow-version/workflow-version.service";
 import { VersionsListDisplayComponent } from "./versions-display/versions-display.component";
+import { filter } from "rxjs/operators";
 
 export type PropertyEditFrameComponent =
   | OperatorPropertyEditFrameComponent
@@ -73,7 +74,10 @@ export class PropertyEditorComponent implements OnInit {
       this.workflowActionService.getJointGraphWrapper().getJointCommentBoxUnhighlightStream(),
       this.workflowVersionService.workflowVersionsDisplayObservable()
     )
-      .pipe(untilDestroyed(this))
+      .pipe(
+        filter(() => this.workflowActionService.getTexeraGraph().getSyncTexeraGraph()),
+        untilDestroyed(this)
+      )
       .subscribe(event => {
         const isDisplayWorkflowVersions = event.length === 1 && event[0] === DISPLAY_WORKFLOW_VERIONS_EVENT;
 
diff --git a/core/new-gui/src/app/workspace/component/workflow-editor/comment-box-modal/nz-modal-comment-box.component.html b/core/new-gui/src/app/workspace/component/workflow-editor/comment-box-modal/nz-modal-comment-box.component.html
index c3d99b53f7d..4ad30233146 100644
--- a/core/new-gui/src/app/workspace/component/workflow-editor/comment-box-modal/nz-modal-comment-box.component.html
+++ b/core/new-gui/src/app/workspace/component/workflow-editor/comment-box-modal/nz-modal-comment-box.component.html
@@ -1,16 +1,16 @@
 <div class="modal-body">
   <nz-list [nzItemLayout]="'horizontal'">
-    <nz-list-item *ngFor="let item of commentBox.comments" [nzNoFlex]="false">
-      <nz-comment [nzAuthor]="item.creatorName" [nzDatetime]="toRelative(item.creationTime)">
-        <nz-avatar nz-comment-avatar [nzText]="item.creatorName.substring(0,1)"></nz-avatar>
+    <nz-list-item *ngFor="let item of commentBox.get('comments')" [nzNoFlex]="false">
+      <nz-comment [nzAuthor]="item['creatorName']" [nzDatetime]="toRelative(item.creationTime)">
+        <nz-avatar nz-comment-avatar [nzText]="item['creatorName'].substring(0,1)"></nz-avatar>
         <nz-comment-content class="commentContent">
-          <p [attr.id]="'comment' + item.creatorName + item.creationTime">{{ item.content }}</p>
+          <p [attr.id]="'comment' + item['creatorName'] + item.creationTime">{{ item.content }}</p>
           <nz-input-group nzSearch [nzAddOnAfter]="suffixIconButton">
             <textarea
               display="none"
               hidden="hidden"
               ng-show="false"
-              [attr.id]="'txarea' + item.creatorName + item.creationTime"
+              [attr.id]="'txarea' + item['creatorName'] + item.creationTime"
               type="text"
               placeholder="edit comment"
               [(ngModel)]="editValue"
@@ -20,7 +20,7 @@
           </nz-input-group>
           <ng-template #suffixIconButton>
             <button
-              [attr.id]="'editbtn' + item.creatorName + item.creationTime"
+              [attr.id]="'editbtn' + item['creatorName'] + item.creationTime"
               display="none"
               hidden="hidden"
               ng-show="false"
@@ -28,7 +28,7 @@
               nzType="primary"
               [nzLoading]="submitting"
               [disabled]="!user || !editValue"
-              (click)="editComment(item.creatorID, item.creatorName, item.creationTime)"
+              (click)="editComment(item['creatorID'], item['creatorName'], item.creationTime)"
             >
               <i nz-icon nzType="send"></i>
             </button>
@@ -37,12 +37,14 @@
       </nz-comment>
       <ul nz-list-item-actions>
         <nz-list-item-action
-          ><a (click)="deleteComment(item.creatorID, item.creationTime)">delete</a></nz-list-item-action
+          ><a (click)="deleteComment(item['creatorID'], item.creationTime)">delete</a></nz-list-item-action
         >
         <nz-list-item-action
-          ><a (click)="toggleEditInput(item.creatorName, item.creationTime)">edit</a></nz-list-item-action
+          ><a (click)="toggleEditInput(item['creatorName'], item.creationTime)">edit</a></nz-list-item-action
+        >
+        <nz-list-item-action
+          ><a (click)="replyToComment(item['creatorName'], item.content)">reply</a></nz-list-item-action
         >
-        <nz-list-item-action><a (click)="replyToComment(item.creatorName, item.content)">reply</a></nz-list-item-action>
       </ul>
     </nz-list-item>
   </nz-list>
diff --git a/core/new-gui/src/app/workspace/component/workflow-editor/comment-box-modal/nz-modal-comment-box.component.ts b/core/new-gui/src/app/workspace/component/workflow-editor/comment-box-modal/nz-modal-comment-box.component.ts
index 4949e47efab..72b95fe6a85 100644
--- a/core/new-gui/src/app/workspace/component/workflow-editor/comment-box-modal/nz-modal-comment-box.component.ts
+++ b/core/new-gui/src/app/workspace/component/workflow-editor/comment-box-modal/nz-modal-comment-box.component.ts
@@ -1,6 +1,6 @@
 import { Component, HostListener, Inject, Input, LOCALE_ID } from "@angular/core";
 import { NzModalRef } from "ng-zorro-antd/modal";
-import { CommentBox } from "src/app/workspace/types/workflow-common.interface";
+import { CommentBox, Comment } from "src/app/workspace/types/workflow-common.interface";
 import { WorkflowActionService } from "src/app/workspace/service/workflow-graph/model/workflow-action.service";
 import { UserService } from "src/app/common/service/user/user.service";
 import { NotificationService } from "../../../../common/service/notification/notification.service";
@@ -8,6 +8,8 @@ import { User } from "src/app/common/type/user";
 import { untilDestroyed } from "@ngneat/until-destroy";
 import { UntilDestroy } from "@ngneat/until-destroy";
 import { formatDate } from "@angular/common";
+import { Array as YArray } from "yjs";
+import { YType } from "../../../types/shared-editing.interface";
 
 @UntilDestroy()
 @Component({
@@ -16,7 +18,7 @@ import { formatDate } from "@angular/common";
   styleUrls: ["./nz-modal-comment-box.component.scss"],
 })
 export class NzModalCommentBoxComponent {
-  @Input() commentBox!: CommentBox;
+  @Input() commentBox!: YType<CommentBox>;
   public user?: User;
 
   constructor(
@@ -53,7 +55,7 @@ export class NzModalCommentBoxComponent {
     const creatorID = this.user.uid;
     this.workflowActionService.addComment(
       { content, creatorName, creatorID, creationTime },
-      this.commentBox.commentBoxID
+      this.commentBox.get("commentBoxID").toJSON() as string
     );
   }
 
@@ -61,7 +63,11 @@ export class NzModalCommentBoxComponent {
     if (!this.user) {
       return;
     }
-    this.workflowActionService.deleteComment(creatorID, creationTime, this.commentBox.commentBoxID);
+    this.workflowActionService.deleteComment(
+      creatorID,
+      creationTime,
+      this.commentBox.get("commentBoxID").toJSON() as string
+    );
   }
 
   public toggleEditInput(creatorName: string, creationTime: string): void {
@@ -93,7 +99,12 @@ export class NzModalCommentBoxComponent {
     }
     const newContent = this.editValue;
     this.editValue = "";
-    this.workflowActionService.editComment(creatorID, creationTime, this.commentBox.commentBoxID, newContent);
+    this.workflowActionService.editComment(
+      creatorID,
+      creationTime,
+      this.commentBox.get("commentBoxID").toJSON() as string,
+      newContent
+    );
     const currTxArea = document.getElementById("txarea" + creatorName + creationTime);
     const btn = document.getElementById("editbtn" + creatorName + creationTime);
     if (currTxArea == null || btn == null) {
diff --git a/core/new-gui/src/app/workspace/component/workflow-editor/workflow-editor.component.ts b/core/new-gui/src/app/workspace/component/workflow-editor/workflow-editor.component.ts
index d3c795696bc..31a7969a464 100644
--- a/core/new-gui/src/app/workspace/component/workflow-editor/workflow-editor.component.ts
+++ b/core/new-gui/src/app/workspace/component/workflow-editor/workflow-editor.component.ts
@@ -26,10 +26,12 @@ import { OperatorLink, Point } from "../../types/workflow-common.interface";
 import { auditTime, filter, map, takeUntil } from "rxjs/operators";
 import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
 import { UndoRedoService } from "../../service/undo-redo/undo-redo.service";
-import { WorkflowCollabService } from "../../service/workflow-collab/workflow-collab.service";
 import { WorkflowVersionService } from "../../../dashboard/service/workflow-version/workflow-version.service";
 import { OperatorMenuService } from "../../service/operator-menu/operator-menu.service";
 import { NzContextMenuService, NzDropdownMenuComponent } from "ng-zorro-antd/dropdown";
+import MouseMoveEvent = JQuery.MouseMoveEvent;
+import MouseLeaveEvent = JQuery.MouseLeaveEvent;
+import MouseEnterEvent = JQuery.MouseEnterEvent;
 
 // jointjs interactive options for enabling and disabling interactivity
 // https://resources.jointjs.com/docs/jointjs/v3.2/joint.html#dia.Paper.prototype.options.interactive
@@ -83,6 +85,8 @@ export class WorkflowEditorComponent implements AfterViewInit, OnDestroy {
 
   private _onProcessKeyboardActionObservable: Subject<void> = new Subject();
 
+  private coeditorCurrentlyEditingMap = new Map<string, string | undefined>();
+
   constructor(
     private workflowActionService: WorkflowActionService,
     private dynamicSchemaService: DynamicSchemaService,
@@ -97,7 +101,6 @@ export class WorkflowEditorComponent implements AfterViewInit, OnDestroy {
     private changeDetectorRef: ChangeDetectorRef,
     private undoRedoService: UndoRedoService,
     private workflowVersionService: WorkflowVersionService,
-    private workflowCollabService: WorkflowCollabService,
     private operatorMenu: OperatorMenuService,
     private nzContextMenu: NzContextMenuService
   ) {}
@@ -127,8 +130,6 @@ export class WorkflowEditorComponent implements AfterViewInit, OnDestroy {
     this.handleDisableOperator();
     this.registerOperatorDisplayNameChangeHandler();
     this.handleViewDeleteLink();
-    this.handleViewCollapseGroup();
-    this.handleViewExpandGroup();
     this.handlePaperPan();
     this.handleGroupResize();
     this.handleViewMouseoverOperator();
@@ -171,7 +172,7 @@ export class WorkflowEditorComponent implements AfterViewInit, OnDestroy {
       .getDisplayParticularVersionStream()
       .pipe(takeUntil(this._onProcessKeyboardActionObservable))
       .subscribe(displayParticularWorkflowVersion => {
-        if (!displayParticularWorkflowVersion && this.workflowCollabService.isLockGranted()) {
+        if (!displayParticularWorkflowVersion) {
           // cmd/ctrl+z undo ; ctrl+y or cmd/ctrl + shift+z for redo
           if ((event.metaKey || event.ctrlKey) && !event.shiftKey && event.key.toLowerCase() === "z") {
             // UNDO
@@ -694,9 +695,9 @@ export class WorkflowEditorComponent implements AfterViewInit, OnDestroy {
     )
       .pipe(untilDestroyed(this))
       .subscribe(elementIDs =>
-        elementIDs.forEach(elementID =>
-          this.getJointPaper().findViewByModel(elementID).highlight("rect.body", { highlighter: highlightOptions })
-        )
+        elementIDs.forEach(elementID => {
+          this.getJointPaper().findViewByModel(elementID).highlight("rect.body", { highlighter: highlightOptions });
+        })
       );
 
     // unhighlight on OperatorUnhighlightStream or GroupUnhighlightStream
@@ -724,7 +725,7 @@ export class WorkflowEditorComponent implements AfterViewInit, OnDestroy {
   }
 
   private openCommentBox(commentBoxID: string): void {
-    const commentBox = this.workflowActionService.getTexeraGraph().getCommentBox(commentBoxID);
+    const commentBox = this.workflowActionService.getTexeraGraph().getSharedCommentBoxType(commentBoxID);
     const modalRef: NzModalRef = this.nzModalService.create({
       // modal title
       nzTitle: "Comments",
@@ -863,46 +864,6 @@ export class WorkflowEditorComponent implements AfterViewInit, OnDestroy {
       });
   }
 
-  /**
-   * Handles the event where the Collapse button is clicked for a Group,
-   *  and call groupOperator to collapse the corresponding group.
-   *
-   * JointJS doesn't have collapse button built-in with a group element,
-   *  the collapse button is Texera's own customized element.
-   * Therefore JointJS doesn't come with default handler for collapse a group,
-   *  we need to handle the callback event `element:collapse`.
-   * The name of this callback event is registered in `JointUIService.getCustomGroupStyleAttrs`
-   */
-  private handleViewCollapseGroup(): void {
-    fromJointPaperEvent(this.getJointPaper(), "element:collapse")
-      .pipe(map(value => value[0]))
-      .pipe(untilDestroyed(this))
-      .subscribe(elementView => {
-        const groupID = elementView.model.id.toString();
-        this.workflowActionService.collapseGroups(groupID);
-      });
-  }
-
-  /**
-   * Handles the event where the Expand button is clicked for a Group,
-   *  and call groupOperator to expand the corresponding group.
-   *
-   * JointJS doesn't have expand button built-in with a group element,
-   *  the expand button is Texera's own customized element.
-   * Therefore JointJS doesn't come with default handler for expand a group,
-   *  we need to handle the callback event `element:expand`.
-   * The name of this callback event is registered in `JointUIService.getCustomGroupStyleAttrs`
-   */
-  private handleViewExpandGroup(): void {
-    fromJointPaperEvent(this.getJointPaper(), "element:expand")
-      .pipe(map(value => value[0]))
-      .pipe(untilDestroyed(this))
-      .subscribe(elementView => {
-        const groupID = elementView.model.id.toString();
-        this.workflowActionService.expandGroups(groupID);
-      });
-  }
-
   /**
    * if the operator is valid , the border of the box will be default
    */
@@ -1146,8 +1107,8 @@ export class WorkflowEditorComponent implements AfterViewInit, OnDestroy {
         this.workflowActionService
           .getJointGraphWrapper()
           .setMultiSelectMode(allOperators.length + allGroups.length > 1);
-        this.workflowActionService.highlightOperators(allOperators.length + allGroups.length > 1, ...allOperators);
         this.workflowActionService.highlightLinks(allLinks.length > 1, ...allLinks);
+        this.workflowActionService.highlightOperators(allOperators.length + allGroups.length > 1, ...allOperators);
         this.workflowActionService.getJointGraphWrapper().highlightGroups(...allGroups);
       });
   }
diff --git a/core/new-gui/src/app/workspace/component/workspace.component.ts b/core/new-gui/src/app/workspace/component/workspace.component.ts
index 4ffc684c1f9..85c52bae261 100644
--- a/core/new-gui/src/app/workspace/component/workspace.component.ts
+++ b/core/new-gui/src/app/workspace/component/workspace.component.ts
@@ -21,7 +21,6 @@ import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
 import { OperatorCacheStatusService } from "../service/workflow-status/operator-cache-status.service";
 import { of } from "rxjs";
 import { isDefined } from "../../common/util/predicate";
-import { WorkflowCollabService } from "../service/workflow-collab/workflow-collab.service";
 import { UserProjectService } from "src/app/dashboard/service/user-project/user-project.service";
 
 export const SAVE_DEBOUNCE_TIME_IN_MS = 300;
@@ -55,7 +54,6 @@ export class WorkspaceComponent implements AfterViewInit, OnInit, OnDestroy {
     private workflowWebsocketService: WorkflowWebsocketService,
     private workflowActionService: WorkflowActionService,
     private workflowConsoleService: WorkflowConsoleService,
-    private workflowCollabService: WorkflowCollabService,
     private location: Location,
     private route: ActivatedRoute,
     private operatorMetadataService: OperatorMetadataService,
@@ -107,7 +105,6 @@ export class WorkspaceComponent implements AfterViewInit, OnInit, OnDestroy {
     } else {
       let wid = this.route.snapshot.params.id ?? 0;
       this.workflowWebsocketService.openWebsocket(wid);
-      this.workflowCollabService.openWebsocket(wid);
     }
 
     this.registerLoadOperatorMetadata();
@@ -116,8 +113,8 @@ export class WorkspaceComponent implements AfterViewInit, OnInit, OnDestroy {
   }
 
   ngOnDestroy() {
+    this.workflowActionService.destroySharedModel();
     this.workflowWebsocketService.closeWebsocket();
-    this.workflowCollabService.closeWebsocket();
   }
 
   registerResultPanelToggleHandler() {
@@ -143,11 +140,7 @@ export class WorkspaceComponent implements AfterViewInit, OnInit, OnDestroy {
       .pipe(debounceTime(SAVE_DEBOUNCE_TIME_IN_MS))
       .pipe(untilDestroyed(this))
       .subscribe(() => {
-        if (
-          this.userService.isLogin() &&
-          this.workflowPersistService.isWorkflowPersistEnabled() &&
-          this.workflowCollabService.isLockGranted()
-        ) {
+        if (this.userService.isLogin() && this.workflowPersistService.isWorkflowPersistEnabled()) {
           this.workflowPersistService
             .persistWorkflow(this.workflowActionService.getWorkflow())
             .pipe(untilDestroyed(this))
@@ -168,26 +161,21 @@ export class WorkspaceComponent implements AfterViewInit, OnInit, OnDestroy {
       .pipe(untilDestroyed(this))
       .subscribe(
         (workflow: Workflow) => {
-          // enable workspace for modification
-          this.workflowActionService.toggleLockListen(false);
+          this.workflowActionService.setNewSharedModel(wid, this.userService.getCurrentUser());
           this.workflowActionService.enableWorkflowModification();
           // load the fetched workflow
           this.workflowActionService.reloadWorkflow(workflow);
           // clear stack
           this.undoRedoService.clearUndoStack();
           this.undoRedoService.clearRedoStack();
-          this.workflowActionService.toggleLockListen(true);
-          this.workflowActionService.syncLock();
         },
         () => {
+          this.workflowActionService.resetAsNewWorkflow();
           // enable workspace for modification
           this.workflowActionService.enableWorkflowModification();
-          // clear the current workflow
-          this.workflowActionService.reloadWorkflow(undefined);
           // clear stack
           this.undoRedoService.clearUndoStack();
           this.undoRedoService.clearRedoStack();
-
           this.message.error("You don't have access to this workflow, please log in with an appropriate account");
         }
       );
@@ -209,12 +197,7 @@ export class WorkspaceComponent implements AfterViewInit, OnInit, OnDestroy {
               .pipe(untilDestroyed(this))
               .subscribe(() => {
                 this.loadWorkflowWithId(wid);
-                this.workflowCollabService.reopenWebsocket(wid);
               });
-            this.workflowCollabService
-              .getRestoreVersionStream()
-              .pipe(untilDestroyed(this))
-              .subscribe(() => this.loadWorkflowWithId(wid));
           } else {
             // no workflow to load, pending to create a new workflow
           }
@@ -243,7 +226,6 @@ export class WorkspaceComponent implements AfterViewInit, OnInit, OnDestroy {
       .pipe(untilDestroyed(this))
       .subscribe(wid => {
         this.workflowWebsocketService.reopenWebsocket(wid);
-        this.workflowCollabService.reopenWebsocket(wid);
       });
   }
 }
diff --git a/core/new-gui/src/app/workspace/service/execute-workflow/execute-workflow.service.ts b/core/new-gui/src/app/workspace/service/execute-workflow/execute-workflow.service.ts
index 22ba6c4899f..1b175fc955a 100644
--- a/core/new-gui/src/app/workspace/service/execute-workflow/execute-workflow.service.ts
+++ b/core/new-gui/src/app/workspace/service/execute-workflow/execute-workflow.service.ts
@@ -21,7 +21,6 @@ import {
 import { isEqual } from "lodash-es";
 import { PAGINATION_INFO_STORAGE_KEY, ResultPaginationInfo } from "../../types/result-table.interface";
 import { sessionGetObject, sessionSetObject } from "../../../common/util/storage";
-import { WorkflowCollabService } from "../workflow-collab/workflow-collab.service";
 import { Version as version } from "src/environments/version";
 import { NotificationService } from "src/app/common/service/notification/notification.service";
 import { WorkflowSnapshotService } from "src/app/dashboard/service/workflow-snapshot/workflow-snapshot.service";
@@ -76,7 +75,6 @@ export class ExecuteWorkflowService {
   constructor(
     private workflowActionService: WorkflowActionService,
     private workflowWebsocketService: WorkflowWebsocketService,
-    private workflowCollabService: WorkflowCollabService,
     private workflowSnapshotService: WorkflowSnapshotService,
     private notificationService: NotificationService,
     private workflowPersistService: WorkflowPersistService
@@ -400,10 +398,7 @@ export class ExecuteWorkflowService {
       case ExecutionState.Aborted:
       case ExecutionState.Uninitialized:
       case ExecutionState.BreakpointTriggered:
-        this.workflowActionService.toggleLockListen(true);
-        if (this.workflowCollabService.isLockGranted()) {
-          this.workflowActionService.enableWorkflowModification();
-        }
+        this.workflowActionService.enableWorkflowModification();
         return;
       case ExecutionState.Paused:
       case ExecutionState.Pausing:
@@ -411,7 +406,6 @@ export class ExecuteWorkflowService {
       case ExecutionState.Resuming:
       case ExecutionState.Running:
       case ExecutionState.Initializing:
-        this.workflowActionService.toggleLockListen(false);
         this.workflowActionService.disableWorkflowModification();
         return;
       default:
diff --git a/core/new-gui/src/app/workspace/service/undo-redo/undo-redo.service.ts b/core/new-gui/src/app/workspace/service/undo-redo/undo-redo.service.ts
index 1a0ae9a495d..dd85c1aed71 100644
--- a/core/new-gui/src/app/workspace/service/undo-redo/undo-redo.service.ts
+++ b/core/new-gui/src/app/workspace/service/undo-redo/undo-redo.service.ts
@@ -1,13 +1,10 @@
 import { Injectable } from "@angular/core";
-import { Observable, Subject } from "rxjs";
-import { nonNull } from "../../../common/util/assert";
-import { Command, CommandMessage } from "../../types/command.interface";
-import { WorkflowCollabService } from "./../workflow-collab/workflow-collab.service";
+import * as Y from "yjs";
 
-/* TODO LIST FOR BUGS
-1. Problem with repeatedly adding and deleting a link without letting go, unintended behavior
-2. See if there's a way to only store a previous version of an operator's properties
-after a certain period of time so we don't undo one character at a time */
+/**
+ * After the introduction of shared-editing, this service basically wraps the internal yjs undo-redo manager, except it
+ * also adds some of our custom conditions for being able to undo/redo.
+ */
 
 @Injectable({
   providedIn: "root",
@@ -17,79 +14,44 @@ export class UndoRedoService {
   public listenJointCommand: boolean = true;
   // private testGraph: WorkflowGraphReadonly;
 
-  private undoStack: Command[] = [];
-  private redoStack: Command[] = [];
+  private undoManager?: Y.UndoManager;
 
   private workFlowModificationEnabled = true;
 
-  private canUndoStream = new Subject<boolean>();
-  private canRedoStream = new Subject<boolean>();
-
-  constructor(private workflowCollabService: WorkflowCollabService) {
-    this.listenToRemoteChange();
+  public setUndoManager(undoManager: Y.UndoManager) {
+    this.undoManager = undoManager;
   }
 
   public enableWorkFlowModification() {
     this.workFlowModificationEnabled = true;
   }
+
   public disableWorkFlowModification() {
     this.workFlowModificationEnabled = false;
   }
 
-  public checkWorkFlowModificationEnabled(): boolean {
-    return this.workFlowModificationEnabled;
-  }
-
   public undoAction(): void {
-    // We have a toggle to let our service know to add to the redo stack
-    if (this.undoStack.length > 0) {
-      if (!this.workFlowModificationEnabled && this.undoStack[this.undoStack.length - 1].modifiesWorkflow) {
-        console.error("attempted to undo a workflow-modifying command while workflow modification is disabled");
-        return;
-      }
-
-      const command = nonNull(this.undoStack.pop());
-      this.setListenJointCommand(false);
-      if (command.undo) command.undo();
-      this.redoStack.push(command);
-      this.setListenJointCommand(true);
-      this.canUndoStream.next(this.canUndo());
-      const commandMessage: CommandMessage = { action: "undoredo", parameters: [], type: "undo" };
-      this.workflowCollabService.propagateChange(commandMessage);
-      console.log("service can undo", this.canUndo());
+    if (!this.workFlowModificationEnabled) {
+      console.error("attempted to undo a workflow-modifying command while workflow modification is disabled");
+      return;
     }
-  }
-
-  public redoAction(): void {
-    // need to figure out what to keep on the stack and off
-    if (this.redoStack.length > 0) {
-      if (!this.workFlowModificationEnabled && this.redoStack[this.redoStack.length - 1].modifiesWorkflow) {
-        console.error("attempted to redo a workflow-modifying command while workflow modification is disabled");
-        return;
-      }
-      const command = nonNull(this.redoStack.pop());
+    if (this.undoManager && this.undoManager.canUndo()) {
       this.setListenJointCommand(false);
-      if (command.redo) {
-        command.redo();
-      } else {
-        command.execute();
-      }
-      this.undoStack.push(command);
+      this.undoManager.undo();
       this.setListenJointCommand(true);
-      this.canRedoStream.next(this.canRedo());
-      const commandMessage: CommandMessage = { action: "undoredo", parameters: [], type: "redo" };
-      this.workflowCollabService.propagateChange(commandMessage);
-      console.log("service can redo", this.canRedo());
     }
   }
 
-  public addCommand(command: Command): void {
-    // if undo and redo modifications are disabled, then don't add to the stack
+  public redoAction(): void {
     if (!this.workFlowModificationEnabled) {
+      console.error("attempted to redo a workflow-modifying command while workflow modification is disabled");
       return;
     }
-    this.undoStack.push(command);
-    this.redoStack = [];
+    if (this.undoManager && this.undoManager.canRedo()) {
+      this.setListenJointCommand(false);
+      this.undoManager.redo();
+      this.setListenJointCommand(true);
+    }
   }
 
   public setListenJointCommand(toggle: boolean): void {
@@ -97,57 +59,28 @@ export class UndoRedoService {
   }
 
   public getUndoLength(): number {
-    return this.undoStack.length;
+    return <number>this.undoManager?.undoStack.length;
   }
 
   public getRedoLength(): number {
-    return this.redoStack.length;
+    return <number>this.undoManager?.redoStack.length;
   }
 
   public canUndo(): boolean {
-    return (
-      this.undoStack.length > 0 &&
-      (this.workFlowModificationEnabled || !this.undoStack[this.undoStack.length - 1].modifiesWorkflow)
-    );
-  }
-
-  public getCanUndoStream(): Observable<boolean> {
-    return this.canUndoStream.asObservable();
+    if (this.undoManager) return this.workFlowModificationEnabled && this.undoManager?.canUndo();
+    else return false;
   }
 
   public canRedo(): boolean {
-    return (
-      this.redoStack.length > 0 &&
-      (this.workFlowModificationEnabled || !this.redoStack[this.redoStack.length - 1].modifiesWorkflow)
-    );
-  }
-
-  public getCanRedoStream(): Observable<boolean> {
-    return this.canRedoStream.asObservable();
+    if (this.undoManager) return this.workFlowModificationEnabled && this.undoManager?.canRedo();
+    else return false;
   }
 
   public clearUndoStack(): void {
-    this.undoStack = [];
+    this.undoManager?.clear(true, false);
   }
 
   public clearRedoStack(): void {
-    this.redoStack = [];
-  }
-
-  private listenToRemoteChange(): void {
-    this.workflowCollabService.getChangeStream().subscribe(message => {
-      const previousModificationEnabledStatus = this.workFlowModificationEnabled;
-      this.enableWorkFlowModification();
-      if (message.type === "undo") {
-        this.workflowCollabService.handleRemoteChange(() => {
-          this.undoAction();
-        });
-      } else if (message.type === "redo") {
-        this.workflowCollabService.handleRemoteChange(() => {
-          this.redoAction();
-        });
-      }
-      if (!previousModificationEnabledStatus) this.disableWorkFlowModification();
-    });
+    this.undoManager?.clear(false, true);
   }
 }
diff --git a/core/new-gui/src/app/workspace/service/workflow-collab/workflow-collab.service.ts b/core/new-gui/src/app/workspace/service/workflow-collab/workflow-collab.service.ts
deleted file mode 100644
index 2c7bc0ff1b0..00000000000
--- a/core/new-gui/src/app/workspace/service/workflow-collab/workflow-collab.service.ts
+++ /dev/null
@@ -1,292 +0,0 @@
-import { Injectable } from "@angular/core";
-import { webSocket, WebSocketSubject } from "rxjs/webSocket";
-import { environment } from "../../../../environments/environment";
-import { Subject, Observable, timer, Subscription, interval, ReplaySubject } from "rxjs";
-import { getWebsocketUrl } from "src/app/common/util/url";
-import { AuthService } from "src/app/common/service/user/auth.service";
-import { delayWhen, filter, map, retryWhen, tap } from "rxjs/operators";
-import {
-  CollabWebsocketEvent,
-  CollabWebsocketRequest,
-  CollabWebsocketEventTypes,
-  CollabWebsocketEventTypeMap,
-  CollabWebsocketRequestTypes,
-  CollabWebsocketRequestTypeMap,
-} from "../../types/collab-websocket.interface";
-import { CommandMessage } from "../../types/command.interface";
-
-export const WS_HEARTBEAT_INTERVAL_MS = 10000;
-export const WS_RECONNECT_INTERVAL_MS = 3000;
-
-/**
- *
- * WorkflowCollabService manages core functionalities related to workflow collaboration. It will only work when the user
- * system is enabled. For now it supports locking the currently-editing workflow so that its changes can be seen by other
- * clients of the same workflow, but cannot edit it.
- */
-
-@Injectable({
-  providedIn: "root",
-})
-export class WorkflowCollabService {
-  private static readonly TEXERA_COLLAB_ENDPOINT = "wsapi/collab";
-
-  private propagationEnabled: boolean = false; // Only pertains to commandMessage propagation
-  private lockGranted: boolean = true;
-  private connected: boolean = false; // Might be used in the future
-  private workflowReadonly: boolean = false; // Whether this workflow is shared from other users and is read only.
-
-  private websocket?: WebSocketSubject<CollabWebsocketEvent | CollabWebsocketRequest>;
-  private wsWithReconnectSubscription?: Subscription;
-
-  private readonly webSocketEventSubject: Subject<CollabWebsocketEvent> = new Subject();
-  private readonly commandMessageSubject: Subject<CommandMessage> = new Subject<CommandMessage>();
-  private readonly lockGrantedSubject: ReplaySubject<boolean> = new ReplaySubject(1);
-  private readonly restoreVersionSubject: ReplaySubject<boolean> = new ReplaySubject(1);
-  private readonly workflowAccessSubject: ReplaySubject<boolean> = new ReplaySubject(1);
-
-  constructor() {
-    // In case collab is not enabled, lock should always be granted.
-    this.setLockStatus(true);
-
-    if (this.isCollabEnabled()) {
-      this.setPropagationEnabled(true);
-      interval(WS_HEARTBEAT_INTERVAL_MS).subscribe(_ => this.send("HeartBeatRequest", {}));
-
-      this.subscribeToEvent("CommandEvent").subscribe(commandEvent => {
-        const message = JSON.parse(commandEvent.commandMessage) as CommandMessage;
-        this.commandMessageSubject.next(message);
-      });
-
-      this.subscribeToEvent("LockGrantedEvent").subscribe(_ => {
-        this.setLockStatus(true);
-      });
-
-      this.subscribeToEvent("LockRejectedEvent").subscribe(_ => {
-        this.setLockStatus(false);
-      });
-
-      this.subscribeToEvent("ReleaseLockEvent").subscribe(_ => {
-        this.setLockStatus(false);
-      });
-
-      this.subscribeToEvent("RestoreVersionEvent").subscribe(_ => {
-        this.restoreVersionSubject.next(true);
-      });
-
-      this.subscribeToEvent("WorkflowAccessEvent").subscribe(WorkflowAccessEvent => {
-        this.setWorkflowAccess(WorkflowAccessEvent.workflowReadonly);
-      });
-    }
-  }
-
-  /**
-   * Gets whether to use service and connect to the endpoint.
-   */
-  public isCollabEnabled(): boolean {
-    return environment.workflowCollabEnabled;
-  }
-
-  /**
-   * Opens the websocket and connects to the server ws endpoint. Must be used with a wId.
-   */
-  public openWebsocket(wId: number) {
-    if (this.isCollabEnabled()) {
-      this.setLockStatus(true);
-      const websocketUrl =
-        getWebsocketUrl(WorkflowCollabService.TEXERA_COLLAB_ENDPOINT) +
-        (environment.userSystemEnabled && AuthService.getAccessToken() !== null
-          ? "?access-token=" + AuthService.getAccessToken()
-          : "");
-      this.websocket = webSocket<CollabWebsocketEvent | CollabWebsocketRequest>(websocketUrl);
-
-      // setup reconnection logic
-      const wsWithReconnect = this.websocket.pipe(
-        retryWhen(errors =>
-          errors.pipe(
-            tap(_ => (this.connected = false)), // update connection status
-            tap(_ =>
-              console.log(`websocket connection lost, reconnecting in ${WS_RECONNECT_INTERVAL_MS / 1000} seconds`)
-            ),
-            delayWhen(_ => timer(WS_RECONNECT_INTERVAL_MS)), // reconnect after delay
-            tap(_ => {
-              this.send("WIdRequest", { wId }); // Informs the websocket server of this client's wid
-              this.send("HeartBeatRequest", {}); // try to send heartbeat immediately after reconnect
-              this.send("TryLockRequest", {}); // Asks server about lock status
-            })
-          )
-        )
-      );
-
-      // set up event listener on re-connectable websocket observable
-      this.wsWithReconnectSubscription = wsWithReconnect.subscribe(event =>
-        this.webSocketEventSubject.next(event as CollabWebsocketEvent)
-      );
-
-      // inform wId and try to see if lock can be granted
-      this.send("WIdRequest", { wId });
-      this.send("TryLockRequest", {});
-
-      // refresh connection status
-      this.websocketEvent().subscribe(_ => (this.connected = true));
-    }
-  }
-
-  /**
-   * On wid change, reopen the websocket so that server can get the new wid.
-   */
-  public reopenWebsocket(wId: number) {
-    if (this.isCollabEnabled()) {
-      this.closeWebsocket();
-      this.openWebsocket(wId);
-    }
-  }
-
-  /**
-   * Closes the websocket.
-   */
-  public closeWebsocket() {
-    if (this.isCollabEnabled()) {
-      this.wsWithReconnectSubscription?.unsubscribe();
-      this.websocket?.complete();
-    }
-  }
-
-  /**
-   * Gets the event received from the websocket server.
-   */
-  public websocketEvent(): Observable<CollabWebsocketEvent> {
-    return this.webSocketEventSubject;
-  }
-
-  /**
-   * Subscribe to a particular type of workflow websocket event
-   */
-  public subscribeToEvent<T extends CollabWebsocketEventTypes>(
-    type: T
-  ): Observable<{ type: T } & CollabWebsocketEventTypeMap[T]> {
-    return this.websocketEvent().pipe(
-      filter(event => event.type === type),
-      map(event => event as { type: T } & CollabWebsocketEventTypeMap[T])
-    );
-  }
-
-  /**
-   * Sends a request to ws server.
-   */
-  public send<T extends CollabWebsocketRequestTypes>(type: T, payload: CollabWebsocketRequestTypeMap[T]): void {
-    const request = {
-      type,
-      ...payload,
-    } as any as CollabWebsocketRequest;
-    this.websocket?.next(request);
-  }
-
-  /**
-   * Changes whether to propagate updates (changes in the workflow) to other clients.
-   * If set to false, no command will be sent.
-   */
-  public setPropagationEnabled(enabled: boolean): void {
-    this.propagationEnabled = enabled;
-  }
-
-  /**
-   * Gets whether command propagation is enabled.
-   */
-  public isPropagationEnabled(): boolean {
-    return this.propagationEnabled;
-  }
-
-  /**
-   * Gets current lock status.
-   */
-  public isLockGranted(): boolean {
-    if (this.isCollabEnabled()) return this.lockGranted;
-    else return true;
-  }
-
-  /**
-   * Sets lock and the lock subject so that it can be observed.
-   */
-  public setLockStatus(granted: boolean): void {
-    this.lockGranted = granted;
-    this.lockGrantedSubject.next(this.lockGranted);
-  }
-
-  /**
-   * Sets the workflowReadOnly status to true. Should not be further modified.
-   */
-  public setWorkflowAccess(isReadonly: boolean): void {
-    this.workflowReadonly = isReadonly;
-    this.workflowAccessSubject.next(isReadonly);
-    if (isReadonly) this.setLockStatus(false);
-  }
-
-  /**
-   * Executes changes received from other clients and preventing further propagation.
-   * Whenever a remote change needs to be executed, the executor must use call collabService to use this method
-   * instead of directly executing, and should provide the executed action as the callback function.
-   */
-  public handleRemoteChange(callback: Function): void {
-    this.setPropagationEnabled(false);
-    callback();
-    this.setPropagationEnabled(true);
-  }
-
-  // Below are the requests that can be sent by other services.
-
-  /**
-   * Propagates a specific change to other active clients of the same wid.
-   */
-  public propagateChange(change: CommandMessage): void {
-    if (this.isCollabEnabled() && this.isPropagationEnabled() && this.isLockGranted() && !this.workflowReadonly) {
-      const commandMessage = JSON.stringify(change);
-      this.send("CommandRequest", { commandMessage });
-    }
-  }
-
-  /**
-   * Request to be the lockholder
-   */
-  public acquireLock(): void {
-    this.send("AcquireLockRequest", {});
-  }
-
-  /**
-   * Whenever whole workflow needs to restore a version, should also tell other clients to reload.
-   */
-  public requestOthersToReload(): void {
-    this.send("RestoreVersionRequest", {});
-  }
-
-  // Below are the events that need to be observed by relevant services/components.
-
-  /**
-   * Gets an observable for changes from other clients so that they can be applied to this client.
-   */
-  public getChangeStream(): Observable<CommandMessage> {
-    return this.commandMessageSubject.asObservable();
-  }
-
-  /**
-   * Gets an observable for changes on the lock status, should be enforced on anything
-   * that needs to be enabled/disabled depending on the lock.
-   */
-  public getLockStatusStream(): Observable<boolean> {
-    return this.lockGrantedSubject.asObservable();
-  }
-
-  /**
-   * Gets an observable for reloading requests.
-   */
-  public getRestoreVersionStream(): Observable<boolean> {
-    return this.restoreVersionSubject.asObservable();
-  }
-
-  /**
-   * Gets an observable for whether the workflow is readonly.
-   */
-  public getWorkflowAccessStream(): Observable<boolean> {
-    return this.workflowAccessSubject.asObservable();
-  }
-}
diff --git a/core/new-gui/src/app/workspace/service/workflow-graph/model/joint-graph-wrapper.ts b/core/new-gui/src/app/workspace/service/workflow-graph/model/joint-graph-wrapper.ts
index de51736447a..195118684f9 100644
--- a/core/new-gui/src/app/workspace/service/workflow-graph/model/joint-graph-wrapper.ts
+++ b/core/new-gui/src/app/workspace/service/workflow-graph/model/joint-graph-wrapper.ts
@@ -1,10 +1,11 @@
-import { fromEvent, Observable, ReplaySubject, Subject, merge } from "rxjs";
+import { fromEvent, merge, Observable, ReplaySubject, Subject } from "rxjs";
 import { bufferToggle, filter, map, mergeMap, startWith, windowToggle } from "rxjs/operators";
 import { OperatorLink, Point } from "../../../types/workflow-common.interface";
 import * as joint from "jointjs";
 import * as dagre from "dagre";
 import * as graphlib from "graphlib";
 import { ObservableContextManager } from "src/app/common/util/context";
+import { dia } from "jointjs/types/joint";
 
 type operatorIDsType = { operatorIDs: string[] };
 type linkIDType = { linkID: string };
diff --git a/core/new-gui/src/app/workspace/service/workflow-graph/model/shared-model-change-handler.ts b/core/new-gui/src/app/workspace/service/workflow-graph/model/shared-model-change-handler.ts
new file mode 100644
index 00000000000..4695619f857
--- /dev/null
+++ b/core/new-gui/src/app/workspace/service/workflow-graph/model/shared-model-change-handler.ts
@@ -0,0 +1,342 @@
+import { WorkflowGraph } from "./workflow-graph";
+import { JointGraphWrapper } from "./joint-graph-wrapper";
+import * as Y from "yjs";
+import {
+  Breakpoint,
+  CommentBox,
+  OperatorLink,
+  OperatorPredicate,
+  Point,
+} from "../../../types/workflow-common.interface";
+import { JointUIService } from "../../joint-ui/joint-ui.service";
+import * as joint from "jointjs";
+import { environment } from "../../../../../environments/environment";
+import { YType } from "../../../types/shared-editing.interface";
+
+/**
+ * SyncJointModelService listens to changes to the TexeraGraph (SharedModel) and updates Joint graph correspondingly,
+ * regardless of whether the changes are local or from other co-editors.
+ *
+ * In all the handlers, this service will also trigger the necessary subjects, which were written in
+ * <code>{@link WorkflowGraph}</code> in previous implementations and now all migrated here.
+ *
+ */
+
+export class SharedModelChangeHandler {
+  constructor(
+    private texeraGraph: WorkflowGraph,
+    private jointGraph: joint.dia.Graph,
+    private jointGraphWrapper: JointGraphWrapper,
+    private jointUIService: JointUIService
+  ) {
+    this.handleOperatorAddAndDelete();
+    this.handleLinkAddAndDelete();
+    this.handleElementPositionChange();
+    this.handleCommentBoxAddAndDelete();
+    this.handleBreakpointAddAndDelete();
+    this.handleOperatorDeep();
+    this.handleCommentBoxDeep();
+    this.texeraGraph.newYDocLoadedSubject.subscribe(_ => {
+      this.handleOperatorAddAndDelete();
+      this.handleLinkAddAndDelete();
+      this.handleElementPositionChange();
+      this.handleCommentBoxAddAndDelete();
+      this.handleBreakpointAddAndDelete();
+      this.handleOperatorDeep();
+      this.handleCommentBoxDeep();
+    });
+  }
+
+  /**
+   * Reflects add and delete operator changes from TexeraGraph onto JointGraph.
+   * @private
+   */
+  private handleOperatorAddAndDelete(): void {
+    // A new key in the map means a new operator
+    this.texeraGraph.sharedModel.operatorIDMap.observe((event: Y.YMapEvent<YType<OperatorPredicate>>) => {
+      const jointElementsToAdd: joint.dia.Element[] = [];
+      const newOpIDs: string[] = [];
+      event.changes.keys.forEach((change, key) => {
+        if (change.action === "add") {
+          const newOperator = this.texeraGraph.sharedModel.operatorIDMap.get(key) as YType<OperatorPredicate>;
+          // Also find its position
+          if (this.texeraGraph.sharedModel.elementPositionMap?.has(key)) {
+            const newPos = this.texeraGraph.sharedModel.elementPositionMap?.get(key) as Point;
+            // Add the operator into joint graph
+            const jointOperator = this.jointUIService.getJointOperatorElement(newOperator.toJSON(), newPos);
+            jointElementsToAdd.push(jointOperator);
+            newOpIDs.push(key);
+          } else {
+            throw new Error(`operator with key ${key} does not exist in position map`);
+          }
+        }
+        if (change.action === "delete") {
+          // Disables JointGraph -> TexeraGraph sync temporarily
+          this.texeraGraph.setSyncTexeraGraph(false);
+          // Unhighlight every operator and link to prevent sync error.
+          if (event.transaction.local) {
+            this.jointGraphWrapper.unhighlightElements({
+              operators: this.jointGraphWrapper.getCurrentHighlightedOperatorIDs(),
+              links: this.jointGraphWrapper.getCurrentHighlightedLinkIDs(),
+              groups: [],
+              commentBoxes: [],
+            });
+          }
+          this.jointGraph.getCell(key).remove();
+          // Emit the event streams here, after joint graph is synced.
+          this.texeraGraph.setSyncTexeraGraph(true);
+          this.texeraGraph.operatorDeleteSubject.next({ deletedOperatorID: key });
+        }
+      });
+
+      if (environment.asyncRenderingEnabled) {
+        // Group add
+        this.jointGraphWrapper.jointGraphContext.withContext({ async: true }, () => {
+          this.jointGraph.addCells(jointElementsToAdd);
+        });
+      } else {
+        // Add one by one
+        for (let i = 0; i < jointElementsToAdd.length; i++) {
+          this.jointGraph.addCell(jointElementsToAdd[i]);
+        }
+      }
+
+      // Emit the event streams here, after joint graph is synced and before highlighting.
+      for (let i = 0; i < newOpIDs.length; i++) {
+        const newOpID = newOpIDs[i];
+        const newOperator = this.texeraGraph.sharedModel.operatorIDMap.get(newOpID) as YType<OperatorPredicate>;
+        this.texeraGraph.operatorAddSubject.next(newOperator.toJSON());
+      }
+
+      if (event.transaction.local) {
+        // Only highlight when this is added by current user.
+        this.jointGraphWrapper.setMultiSelectMode(newOpIDs.length > 1);
+        this.jointGraphWrapper.highlightOperators(...newOpIDs);
+      }
+    });
+  }
+
+  /**
+   * Syncs link add and delete.
+   * @private
+   */
+  private handleLinkAddAndDelete(): void {
+    this.texeraGraph.sharedModel.operatorLinkMap.observe((event: Y.YMapEvent<OperatorLink>) => {
+      const jointElementsToAdd: joint.dia.Link[] = [];
+      const linksToAdd: OperatorLink[] = [];
+      const keysToDelete: string[] = [];
+      const linksToDelete: OperatorLink[] = [];
+      event.changes.keys.forEach((change, key) => {
+        if (change.action === "add") {
+          const newLink = this.texeraGraph.sharedModel.operatorLinkMap.get(key) as OperatorLink;
+          const jointLinkCell = JointUIService.getJointLinkCell(newLink);
+          jointElementsToAdd.push(jointLinkCell);
+          linksToAdd.push(newLink);
+        }
+        if (change.action === "delete") {
+          keysToDelete.push(key);
+          linksToDelete.push(change.oldValue);
+        }
+      });
+
+      // Disables JointGraph -> TexeraGraph sync temporarily
+      this.texeraGraph.setSyncTexeraGraph(false);
+      for (let i = 0; i < keysToDelete.length; i++) {
+        if (this.texeraGraph.getSyncJointGraph() && this.jointGraph.getCell(keysToDelete[i]))
+          this.jointGraph.getCell(keysToDelete[i]).remove();
+      }
+      if (environment.asyncRenderingEnabled) {
+        this.jointGraphWrapper.jointGraphContext.withContext({ async: true }, () => {
+          this.jointGraph.addCells(jointElementsToAdd.filter(x => x !== undefined));
+        });
+      } else {
+        for (let i = 0; i < jointElementsToAdd.length; i++) {
+          this.jointGraph.addCell(jointElementsToAdd[i]);
+        }
+      }
+      this.texeraGraph.setSyncTexeraGraph(true);
+
+      // Emit event streams and highlight
+      for (let i = 0; i < linksToAdd.length; i++) {
+        const link = linksToAdd[i];
+        this.texeraGraph.linkAddSubject.next(link);
+      }
+
+      for (let i = 0; i < linksToDelete.length; i++) {
+        const link = linksToDelete[i];
+        this.texeraGraph.linkDeleteSubject.next({ deletedLink: link });
+      }
+
+      // Uncomment this if you also want link to be highlighted when adding but this conflicts with test cases.
+      // if (event.transaction.local) {
+      //   this.jointGraphWrapper.setMultiSelectMode(this.jointGraphWrapper.getCurrentHighlightedOperatorIDs().length + linksToAdd.length > 1);
+      //   // Only highlight when this is added by current user.
+      //   this.jointGraphWrapper.highlightLinks(...linksToAdd.map(link => link.linkID));
+      // }
+    });
+  }
+
+  /**
+   * Syncs element positions. Will temporarily block local updates.
+   * @private
+   */
+  private handleElementPositionChange(): void {
+    this.texeraGraph.sharedModel.elementPositionMap?.observe((event: Y.YMapEvent<Point>) => {
+      event.changes.keys.forEach((change, key) => {
+        if (change.action === "update") {
+          this.texeraGraph.setSyncTexeraGraph(false);
+          const newPosition = this.texeraGraph.sharedModel.elementPositionMap?.get(key);
+          if (newPosition) {
+            this.jointGraphWrapper.setListenPositionChange(false);
+            this.jointGraphWrapper.setAbsolutePosition(key, newPosition.x, newPosition.y);
+            this.jointGraphWrapper.setListenPositionChange(true);
+          }
+          this.texeraGraph.setSyncTexeraGraph(true);
+        }
+      });
+    });
+  }
+
+  /**
+   * Syncs the addition and deletion of comment boxes.
+   * @private
+   */
+  private handleCommentBoxAddAndDelete(): void {
+    this.texeraGraph.sharedModel.commentBoxMap.observe((event: Y.YMapEvent<YType<CommentBox>>) => {
+      event.changes.keys.forEach((change, key) => {
+        if (change.action === "add") {
+          const commentBox = this.texeraGraph.sharedModel.commentBoxMap.get(key) as YType<CommentBox>;
+          const commentElement = this.jointUIService.getCommentElement(commentBox.toJSON());
+          this.jointGraph.addCell(commentElement);
+          this.texeraGraph.commentBoxAddSubject.next(commentBox.toJSON());
+        }
+        if (change.action === "delete") {
+          this.jointGraph.getCell(key).remove();
+        }
+      });
+    });
+  }
+
+  /**
+   * Syncs the addition and deletion of breakpoints.
+   * @private
+   */
+  private handleBreakpointAddAndDelete(): void {
+    this.texeraGraph.sharedModel.linkBreakpointMap.observe((event: Y.YMapEvent<Breakpoint>) => {
+      event.changes.keys.forEach((change, key) => {
+        const oldBreakpoint = change.oldValue as Breakpoint | undefined;
+        if (change.action === "add") {
+          this.jointGraphWrapper.showLinkBreakpoint(key);
+          this.texeraGraph.breakpointChangeStream.next({ oldBreakpoint, linkID: key });
+        }
+        if (change.action === "delete") {
+          if (this.texeraGraph.sharedModel.operatorLinkMap.has(key)) {
+            this.jointGraphWrapper.hideLinkBreakpoint(key);
+            this.texeraGraph.breakpointChangeStream.next({ oldBreakpoint, linkID: key });
+          }
+        }
+      });
+    });
+  }
+
+  /**
+   * Syncs changes that are on nested-structures of operators, including changes on:
+   *  - <code>customDisplayName</code>
+   *  - <code>operatorProperties</code>
+   *  - <code>isCached</code>
+   *  - <code>isDisabled</code>
+   * @private
+   */
+  private handleOperatorDeep(): void {
+    this.texeraGraph.sharedModel.operatorIDMap.observeDeep((events: Y.YEvent<Y.Map<any>>[]) => {
+      events.forEach(event => {
+        if (event.target !== this.texeraGraph.sharedModel.operatorIDMap) {
+          const operatorID = event.path[0] as string;
+          if (event.path.length === 1) {
+            // Changes one level below the operatorPredicate type
+            for (const entry of event.changes.keys.entries()) {
+              const contentKey = entry[0];
+              if (contentKey === "isCached") {
+                const newCachedStatus = this.texeraGraph.sharedModel.operatorIDMap
+                  .get(operatorID)
+                  ?.get("isCached") as boolean;
+                if (newCachedStatus) {
+                  this.texeraGraph.cachedOperatorChangedSubject.next({
+                    newCached: [operatorID],
+                    newUnCached: [],
+                  });
+                } else {
+                  this.texeraGraph.cachedOperatorChangedSubject.next({
+                    newCached: [],
+                    newUnCached: [operatorID],
+                  });
+                }
+              } else if (contentKey === "isDisabled") {
+                const newDisabledStatus = this.texeraGraph.sharedModel.operatorIDMap
+                  .get(operatorID)
+                  ?.get("isDisabled") as boolean;
+                if (newDisabledStatus) {
+                  this.texeraGraph.disabledOperatorChangedSubject.next({
+                    newDisabled: [operatorID],
+                    newEnabled: [],
+                  });
+                } else {
+                  this.texeraGraph.disabledOperatorChangedSubject.next({
+                    newDisabled: [],
+                    newEnabled: [operatorID],
+                  });
+                }
+              } else if (contentKey === "operatorProperties") {
+                const operator = this.texeraGraph.getOperator(operatorID);
+                this.texeraGraph.operatorPropertyChangeSubject.next({ operator: operator });
+              }
+            }
+          } else if (event.path[event.path.length - 1] === "customDisplayName") {
+            const newName = this.texeraGraph.sharedModel.operatorIDMap
+              .get(operatorID)
+              ?.get("customDisplayName") as Y.Text;
+            this.texeraGraph.operatorDisplayNameChangedSubject.next({
+              operatorID: operatorID,
+              newDisplayName: newName.toJSON(),
+            });
+          } else if (event.path.includes("operatorProperties")) {
+            const operator = this.texeraGraph.getOperator(operatorID);
+            this.texeraGraph.operatorPropertyChangeSubject.next({ operator: operator });
+          }
+        }
+      });
+    });
+  }
+
+  /**
+   * Syncs changes that are on nested-structures of comment boxes, including changes of:
+   *  - adding comments
+   *  - deleting comments
+   *  - editing comments (processed as deleting and then adding in-place)
+   * @private
+   */
+  private handleCommentBoxDeep(): void {
+    this.texeraGraph.sharedModel.commentBoxMap.observeDeep((events: Y.YEvent<any>[]) => {
+      events.forEach(event => {
+        if (event.target !== this.texeraGraph.sharedModel.commentBoxMap) {
+          const commentBox: CommentBox = this.texeraGraph.getCommentBox(event.path[0] as string);
+          if (event.path.length === 2 && event.path[event.path.length - 1] === "comments") {
+            const addedComments = Array.from(event.changes.added.values());
+            const deletedComments = Array.from(event.changes.deleted.values());
+            if (addedComments.length == deletedComments.length) {
+              this.texeraGraph.commentBoxEditCommentSubject.next({ commentBox: commentBox });
+            } else {
+              if (addedComments.length > 0) {
+                const newComment = addedComments[0].content.getContent()[0];
+                this.texeraGraph.commentBoxAddCommentSubject.next({ addedComment: newComment, commentBox: commentBox });
+              }
+              if (deletedComments.length > 0) {
+                this.texeraGraph.commentBoxDeleteCommentSubject.next({ commentBox: commentBox });
+              }
+            }
+          }
+        }
+      });
+    });
+  }
+}
diff --git a/core/new-gui/src/app/workspace/service/workflow-graph/model/shared-model.ts b/core/new-gui/src/app/workspace/service/workflow-graph/model/shared-model.ts
new file mode 100644
index 00000000000..ac24961ab36
--- /dev/null
+++ b/core/new-gui/src/app/workspace/service/workflow-graph/model/shared-model.ts
@@ -0,0 +1,110 @@
+import * as Y from "yjs";
+import { WebsocketProvider } from "y-websocket";
+import { Awareness } from "y-protocols/awareness";
+import {
+  Breakpoint,
+  CommentBox,
+  OperatorLink,
+  OperatorPredicate,
+  Point,
+} from "../../../types/workflow-common.interface";
+import { User, UserState } from "../../../../common/type/user";
+import { getWebsocketUrl } from "../../../../common/util/url";
+import { v4 as uuid } from "uuid";
+import { YType } from "../../../types/shared-editing.interface";
+
+/**
+ * SharedModel encapsulates everything related to real-time shared editing for the current workflow.
+ * Most of the yjs-related implementations are within this class.
+ */
+export class SharedModel {
+  public yDoc: Y.Doc = new Y.Doc();
+  public wsProvider: WebsocketProvider;
+  public awareness: Awareness;
+  public operatorIDMap: Y.Map<YType<OperatorPredicate>>;
+  public commentBoxMap: Y.Map<YType<CommentBox>>;
+  public operatorLinkMap: Y.Map<OperatorLink>;
+  public elementPositionMap: Y.Map<Point>;
+  public linkBreakpointMap: Y.Map<Breakpoint>;
+  public undoManager: Y.UndoManager;
+  public clientId: string;
+
+  /**
+   * Initializes yjs-related structures and join the shared-editing room. A room number is required for initialization.
+   * When wid is present, it will be used as part of the room number to enable shared editing.
+   * When no wid is provided (new workflow canvas, landing page, etc.), a random room number will be assigned so that
+   * users don't interfere with each other.
+   * @param wid workflow ID number, used as part of the address for the shared-editing room.
+   * @param user current (local) user info, used for initializing local awareness (user presence).
+   */
+  constructor(public wid?: number, public user?: User) {
+    // Initialize Y-structures.
+    this.operatorIDMap = this.yDoc.getMap("operatorIDMap");
+    this.commentBoxMap = this.yDoc.getMap("commentBoxMap");
+    this.operatorLinkMap = this.yDoc.getMap("operatorLinkMap");
+    this.elementPositionMap = this.yDoc.getMap("elementPositionMap");
+    this.linkBreakpointMap = this.yDoc.getMap("linkBreakPointMap");
+
+    // Initialize Y-undo manager by aggregating intended  Y-structures. Only structures included here will be undoable.
+    this.undoManager = new Y.UndoManager(
+      [this.operatorIDMap, this.elementPositionMap, this.operatorLinkMap, this.commentBoxMap, this.linkBreakpointMap],
+      {
+        captureTimeout: 100,
+      }
+    );
+
+    // Generate editing room number.
+    const websocketUrl = getWebsocketUrl("rtc");
+    const suffix = wid ? `${wid}` : uuid();
+    this.wsProvider = new WebsocketProvider(websocketUrl, suffix, this.yDoc);
+
+    // Initialize local user awareness information.
+    this.awareness = this.wsProvider.awareness;
+    this.clientId = this.awareness.clientID.toString();
+    if (this.user) {
+      const userState: UserState = {
+        user: { ...this.user },
+        clientId: this.clientId,
+        isActive: true,
+        userCursor: { x: 0, y: 0 },
+      };
+      this.awareness.setLocalState(userState);
+    }
+  }
+
+  /**
+   * Updates a particular field of local awareness state info. Will only execute update when user info is provided.
+   * @param field the name of the particular state info.
+   * @param value the updated state info.
+   */
+  public updateAwareness(field: keyof UserState, value: any): void {
+    if (this.user) this.awareness.setLocalStateField(field, value);
+  }
+
+  /**
+   * Groups a bunch of actions into one atomic transaction, so that they can be undone/redone in one call.
+   * @param callback Put whatever need to be atomically done within this callback function.
+   */
+  public transact(callback: Function) {
+    try {
+      if (this.wsProvider.shouldConnect) {
+        this.yDoc.transact(() => callback());
+      } else {
+        callback();
+      }
+    } catch (e) {
+      throw e;
+    }
+  }
+
+  /**
+   * Destroys internal structures related to Yjs and quit the editing room.
+   */
+  public destroy(): void {
+    this.awareness.destroy();
+    try {
+      if (this.wsProvider.shouldConnect && this.wsProvider.wsconnected) this.wsProvider.disconnect();
+    } catch (e) {}
+    this.yDoc.destroy();
+  }
+}
diff --git a/core/new-gui/src/app/workspace/service/workflow-graph/model/sync-texera-model.ts b/core/new-gui/src/app/workspace/service/workflow-graph/model/sync-texera-model.ts
index 6ca19f72115..ffab1f2916c 100644
--- a/core/new-gui/src/app/workspace/service/workflow-graph/model/sync-texera-model.ts
+++ b/core/new-gui/src/app/workspace/service/workflow-graph/model/sync-texera-model.ts
@@ -8,7 +8,6 @@ import { filter, map, tap } from "rxjs/operators";
 /**
  * SyncTexeraModel subscribes to the graph change events from JointJS,
  *  then sync the changes to the TexeraGraph:
- *    - delete operator
  *    - link events: link add/delete/change
  *
  * For details of handling each JointJS event type, see the comments below for each function.
@@ -22,31 +21,9 @@ export class SyncTexeraModel {
     private jointGraphWrapper: JointGraphWrapper,
     private operatorGroup: OperatorGroup
   ) {
-    this.handleJointOperatorDelete();
     this.handleJointLinkEvents();
   }
 
-  /**
-   * Handles JointJS operator element delete events:
-   *  deletes the corresponding operator in Texera workflow graph.
-   *
-   * Deletion of an operator will also cause its connected links to be deleted as well,
-   *  JointJS automatically handles this logic,
-   *  therefore we don't handle it to avoid inconsistency (deleting already deleted link).
-   *
-   * When an operator is deleted, JointJS will trigger the corresponding
-   *  link delete events and cause texera link to be deleted.
-   */
-  private handleJointOperatorDelete(): void {
-    this.jointGraphWrapper
-      .getJointElementCellDeleteStream()
-      .pipe(
-        map(element => element.id.toString()),
-        filter(elementID => this.texeraGraph.hasOperator(elementID) && this.operatorGroup.getSyncTexeraGraph())
-      )
-      .subscribe(elementID => this.texeraGraph.deleteOperator(elementID));
-  }
-
   /**
    * Handles JointJS link events:
    * JointJS link events reflect the changes to the link View in the UI.
@@ -75,7 +52,12 @@ export class SyncTexeraModel {
     this.jointGraphWrapper
       .getJointLinkCellAddStream()
       .pipe(
-        filter(link => this.isValidJointLink(link) && this.operatorGroup.getSyncTexeraGraph()),
+        filter(
+          link =>
+            this.isValidJointLink(link) &&
+            this.operatorGroup.getSyncTexeraGraph() &&
+            this.texeraGraph.getSyncTexeraGraph()
+        ),
         map(link => SyncTexeraModel.getOperatorLink(link))
       )
       .subscribe(link => this.texeraGraph.addLink(link));
@@ -88,7 +70,12 @@ export class SyncTexeraModel {
     this.jointGraphWrapper
       .getJointLinkCellDeleteStream()
       .pipe(
-        filter(link => this.isValidJointLink(link) && this.operatorGroup.getSyncTexeraGraph()),
+        filter(
+          link =>
+            this.isValidJointLink(link) &&
+            this.operatorGroup.getSyncTexeraGraph() &&
+            this.texeraGraph.getSyncTexeraGraph()
+        ),
         map(link => SyncTexeraModel.getOperatorLink(link))
       )
       .subscribe(link => this.texeraGraph.deleteLinkWithID(link.linkID));
@@ -101,12 +88,15 @@ export class SyncTexeraModel {
     this.jointGraphWrapper
       .getJointLinkCellChangeStream()
       .pipe(
-        filter(() => this.operatorGroup.getSyncTexeraGraph()),
+        filter(() => this.operatorGroup.getSyncTexeraGraph() && this.texeraGraph.getSyncTexeraGraph()),
         // we intentionally want the side effect (delete the link) to happen **before** other operations in the chain
         tap(link => {
           const linkID = link.id.toString();
           if (this.texeraGraph.hasLinkWithID(linkID)) {
+            const previousSyncJointGraph = this.texeraGraph.getSyncJointGraph();
+            this.texeraGraph.setSyncJointGraph(false);
             this.texeraGraph.deleteLinkWithID(linkID);
+            this.texeraGraph.setSyncJointGraph(previousSyncJointGraph);
           }
         }),
         filter(link => this.isValidJointLink(link)),
diff --git a/core/new-gui/src/app/workspace/service/workflow-graph/model/workflow-action.service.ts b/core/new-gui/src/app/workspace/service/workflow-graph/model/workflow-action.service.ts
index 8532f8d0ca1..69e7ce43414 100644
--- a/core/new-gui/src/app/workspace/service/workflow-graph/model/workflow-action.service.ts
+++ b/core/new-gui/src/app/workspace/service/workflow-graph/model/workflow-action.service.ts
@@ -1,19 +1,18 @@
 import { Injectable } from "@angular/core";
 
 import * as joint from "jointjs";
-import { cloneDeep } from "lodash-es";
 import { BehaviorSubject, merge, Observable, Subject } from "rxjs";
 import { Workflow, WorkflowContent } from "../../../../common/type/workflow";
 import { mapToRecord, recordToMap } from "../../../../common/util/map";
 import { WorkflowMetadata } from "../../../../dashboard/type/workflow-metadata.interface";
 import {
   Breakpoint,
+  Comment,
+  CommentBox,
   OperatorLink,
   OperatorPort,
   OperatorPredicate,
   Point,
-  CommentBox,
-  Comment,
 } from "../../../types/workflow-common.interface";
 import { JointUIService } from "../../joint-ui/joint-ui.service";
 import { OperatorMetadataService } from "../../operator-metadata/operator-metadata.service";
@@ -24,33 +23,27 @@ import { Group, OperatorGroup, OperatorGroupReadonly } from "./operator-group";
 import { SyncOperatorGroup } from "./sync-operator-group";
 import { SyncTexeraModel } from "./sync-texera-model";
 import { WorkflowGraph, WorkflowGraphReadonly } from "./workflow-graph";
-import { auditTime, debounceTime, filter } from "rxjs/operators";
-import { WorkflowCollabService } from "../../workflow-collab/workflow-collab.service";
-import { Command, commandFuncs, CommandMessage } from "src/app/workspace/types/command.interface";
+import { filter } from "rxjs/operators";
 import { isDefined } from "../../../../common/util/predicate";
 import { environment } from "../../../../../environments/environment";
-
-type OperatorPosition = {
-  position: Point;
-  layer: number;
-};
-
-type GroupInfo = {
-  group: Group;
-  layer: number;
-};
+import { User } from "../../../../common/type/user";
+import { SharedModelChangeHandler } from "./shared-model-change-handler";
 
 /**
  *
- * WorkflowActionService exposes functions (actions) to modify the workflow graph model of both JointJS and Texera,
+ * WorkflowActionService exposes functions (actions) to modify the workflow graph model of Texera,
  *  such as addOperator, deleteOperator, addLink, deleteLink, etc.
- * WorkflowActionService performs checks the validity of these actions,
- *  for example, throws an error if deleting an nonsexist operator
+ *
+ * WorkflowActionService bundles a series of steps into atomic actions, like adding an operator and its outgoing link.
+ *  It also checks the validity of these actions, for example, throws an error if deleting a nonsexist operator.
  *
  * All changes(actions) to the workflow graph should be called through WorkflowActionService,
- *  then WorkflowActionService will propagate these actions to JointModel and Texera Model automatically.
  *
- * For an overview of the services in WorkflowGraphModule, see workflow-graph-design.md
+ * With the introduction of shared editing using yjs, WorkflowActionService will only make changes to its internal
+ *  <code>{@link WorkflowGraph}</code>, and <code>{@link SharedModelChangeHandler}</code> will listen to changes to the
+ *  WorkflowGraph to update JointGraph.
+ *
+ * For an overview of the services and updates with shared editing in WorkflowGraphModule, see workflow-graph-design.md.
  *
  */
 
@@ -70,14 +63,14 @@ export class WorkflowActionService {
   private readonly texeraGraph: WorkflowGraph;
   private readonly jointGraph: joint.dia.Graph;
   private readonly jointGraphWrapper: JointGraphWrapper;
-  private readonly operatorGroup: OperatorGroup;
   private readonly syncTexeraModel: SyncTexeraModel;
   private readonly syncOperatorGroup: SyncOperatorGroup;
+  private readonly operatorGroup: OperatorGroup;
+  private readonly sharedModelChangeHandler: SharedModelChangeHandler;
   // variable to temporarily hold the current workflow to switch view to a particular version
   private tempWorkflow?: Workflow;
   private workflowModificationEnabled = true;
   private enableModificationStream = new BehaviorSubject<boolean>(true);
-  private lockListenEnabled = true;
 
   private workflowMetadata: WorkflowMetadata;
   private workflowMetadataChangeSubject: Subject<void> = new Subject<void>();
@@ -86,8 +79,7 @@ export class WorkflowActionService {
     private operatorMetadataService: OperatorMetadataService,
     private jointUIService: JointUIService,
     private undoRedoService: UndoRedoService,
-    private workflowUtilService: WorkflowUtilService,
-    private workflowCollabService: WorkflowCollabService
+    private workflowUtilService: WorkflowUtilService
   ) {
     this.texeraGraph = new WorkflowGraph();
     this.jointGraph = new joint.dia.Graph();
@@ -100,37 +92,22 @@ export class WorkflowActionService {
       this.jointUIService
     );
     this.syncTexeraModel = new SyncTexeraModel(this.texeraGraph, this.jointGraphWrapper, this.operatorGroup);
+    this.sharedModelChangeHandler = new SharedModelChangeHandler(
+      this.texeraGraph,
+      this.jointGraph,
+      this.jointGraphWrapper,
+      this.jointUIService
+    );
     this.syncOperatorGroup = new SyncOperatorGroup(this.texeraGraph, this.jointGraphWrapper, this.operatorGroup);
     this.workflowMetadata = WorkflowActionService.DEFAULT_WORKFLOW;
+    this.undoRedoService.setUndoManager(this.texeraGraph.sharedModel.undoManager);
 
-    this.handleJointLinkAdd();
-    this.handleJointOperatorDrag();
-    this.handleJointOperatorDragPropagation();
-    this.handleHighlightedElementPositionChange();
-    this.listenToRemoteChange();
-    this.listenToLockChange();
+    this.handleJointElementDrag();
   }
 
   /**
-   * Dummy method used to send a CommandMessage for undo or redo.
+   * Workflow modification lock interface (allows or prevents commands that would modify the workflow graph).
    */
-  public undoredo(): void {}
-
-  /**
-   * Used for temporarily enabling or disabling propagation of changes so that reload won't affect other clients.
-   */
-  public toggleSendData(toggle: boolean): void {
-    this.workflowCollabService.setPropagationEnabled(toggle);
-  }
-
-  /**
-   * Used for temporarily blocking any changes to the lock so that reload can be successfully executed.
-   */
-  public toggleLockListen(toggle: boolean): void {
-    this.lockListenEnabled = toggle;
-  }
-
-  // workflow modification lock interface (allows or prevents commands that would modify the workflow graph)
   public enableWorkflowModification() {
     if (this.workflowModificationEnabled) {
       return;
@@ -157,210 +134,6 @@ export class WorkflowActionService {
     return this.enableModificationStream.asObservable();
   }
 
-  public handleJointLinkAdd(): void {
-    this.texeraGraph
-      .getLinkAddStream()
-      .pipe(filter(() => this.undoRedoService.listenJointCommand))
-      .subscribe(link => {
-        const command: Command = {
-          modifiesWorkflow: true,
-          execute: () => {},
-          undo: () => this.deleteLinkWithIDInternal(link.linkID),
-          redo: () => this.addLinksInternal([link]),
-        };
-        const commandMessage: CommandMessage = { action: "addLink", parameters: [link], type: "execute" };
-        this.executeStoreAndPropagateCommand(command, commandMessage);
-      });
-  }
-
-  public handleJointOperatorDrag(): void {
-    // save first event as starting position
-    // compare starting position to final position at last event
-    // command saves just the delta for undo/redo purposes
-    let oldPosition: Point = { x: 0, y: 0 };
-    let gotOldPosition = false;
-    let dragRoot: string; // element that was clicked to start the drag
-
-    // save starting position
-    this.jointGraphWrapper
-      .getElementPositionChangeEvent()
-      .pipe(
-        filter(() => !gotOldPosition),
-        filter(() => this.undoRedoService.listenJointCommand)
-      )
-      .subscribe(event => {
-        oldPosition = event.oldPosition;
-        gotOldPosition = true;
-        dragRoot = event.elementID;
-      });
-
-    // get final event and compare positions
-    this.jointGraphWrapper
-      .getElementPositionChangeEvent()
-      .pipe(
-        filter(() => this.undoRedoService.listenJointCommand),
-        filter(value => value.elementID === dragRoot),
-        debounceTime(100) // emit only when no further events have occurred in 100ms
-      )
-      .subscribe(event => {
-        gotOldPosition = false;
-        const offsetX = event.newPosition.x - oldPosition.x;
-        const offsetY = event.newPosition.y - oldPosition.y;
-        // remember currently highlighted operators and groups
-        const currentHighlightedOperators = new Set(this.jointGraphWrapper.getCurrentHighlightedOperatorIDs().slice());
-        const currentHighlightedGroups = this.jointGraphWrapper.getCurrentHighlightedGroupIDs().slice();
-
-        // un-remember child operators of groups (they will move with the group's movement, so we must avoid moving them twice)
-        currentHighlightedGroups.forEach(groupID => {
-          this.operatorGroup.getGroup(groupID).operators.forEach((operatorInfo, operatorID) => {
-            currentHighlightedOperators.delete(operatorID);
-          });
-        });
-
-        const command: Command = {
-          modifiesWorkflow: true,
-          execute: () => {},
-          undo: () => {
-            this.jointGraphWrapper.unhighlightOperators(...this.jointGraphWrapper.getCurrentHighlightedOperatorIDs());
-            this.jointGraphWrapper.unhighlightGroups(...this.jointGraphWrapper.getCurrentHighlightedGroupIDs());
-            this.jointGraphWrapper.setMultiSelectMode(
-              currentHighlightedOperators.size + currentHighlightedGroups.length > 1
-            );
-            currentHighlightedOperators.forEach(operatorID => {
-              this.jointGraphWrapper.highlightOperators(operatorID);
-              this.jointGraphWrapper.setElementPosition(operatorID, -offsetX, -offsetY);
-            });
-            currentHighlightedGroups.forEach(groupID => {
-              this.jointGraphWrapper.highlightGroups(groupID);
-              this.jointGraphWrapper.setElementPosition(groupID, -offsetX, -offsetY);
-            });
-          },
-          redo: () => {
-            this.jointGraphWrapper.unhighlightOperators(...this.jointGraphWrapper.getCurrentHighlightedOperatorIDs());
-            this.jointGraphWrapper.unhighlightGroups(...this.jointGraphWrapper.getCurrentHighlightedGroupIDs());
-            this.jointGraphWrapper.setMultiSelectMode(
-              currentHighlightedOperators.size + currentHighlightedGroups.length > 1
-            );
-            currentHighlightedOperators.forEach(operatorID => {
-              this.jointGraphWrapper.highlightOperators(operatorID);
-              this.jointGraphWrapper.setElementPosition(operatorID, offsetX, offsetY);
-            });
-            currentHighlightedGroups.forEach(groupID => {
-              this.jointGraphWrapper.highlightGroups(groupID);
-              this.jointGraphWrapper.setElementPosition(groupID, offsetX, offsetY);
-            });
-          },
-        };
-        this.executeStoreAndPropagateCommand(command);
-      });
-  }
-
-  /**
-   * Propagates dragging event (no execution locally). Separate from undo-redo to achieve higher FPS.
-   */
-  public handleJointOperatorDragPropagation(): void {
-    let oldPosition: Point = { x: 0, y: 0 };
-    let gotOldPosition = false;
-    let dragRoot: string; // element that was clicked to start the drag
-
-    // save starting position
-    this.jointGraphWrapper
-      .getElementPositionChangeEvent()
-      .pipe(
-        filter(() => !gotOldPosition),
-        filter(() => this.undoRedoService.listenJointCommand)
-      )
-      .subscribe(event => {
-        oldPosition = event.oldPosition;
-        gotOldPosition = true;
-        dragRoot = event.elementID;
-      });
-
-    this.jointGraphWrapper
-      .getElementPositionChangeEvent()
-      .pipe(
-        filter(value => value.elementID === dragRoot),
-        auditTime(30) // emit frequently to achieve "30fps"
-      )
-      .subscribe(event => {
-        gotOldPosition = false;
-        const offsetX = event.newPosition.x - oldPosition.x;
-        const offsetY = event.newPosition.y - oldPosition.y;
-        // remember currently highlighted operators and groups
-        const currentHighlightedOperators = new Set(this.jointGraphWrapper.getCurrentHighlightedOperatorIDs().slice());
-        // Send command message here since this is where change first gets detected
-        const currentHighlightedOpIDs = Array.from(currentHighlightedOperators);
-        if (currentHighlightedOpIDs.includes(dragRoot)) {
-          const commandMessage: CommandMessage = {
-            action: "changeOperatorPosition",
-            parameters: [currentHighlightedOpIDs, offsetX, offsetY],
-            type: "execute",
-          };
-          this.workflowCollabService.propagateChange(commandMessage);
-        } else {
-          // Assume for now if not dragging an operator then it is a comment box.
-          // TODO: unify with operator position change and handle highlighting issues.
-          const commandMessage: CommandMessage = {
-            action: "changeCommentBoxPosition",
-            parameters: [dragRoot, offsetX, offsetY],
-            type: "execute",
-          };
-          this.workflowCollabService.propagateChange(commandMessage);
-        }
-      });
-  }
-
-  /**
-   * Subscribes to element position change event stream,
-   *  checks if the element (operator or group) is moved by user and
-   *  if the moved element is currently highlighted,
-   *  if it is, moves other highlighted elements (operators and groups) along with it,
-   *    links will automatically move with operators.
-   *
-   * If a group is highlighted, we consider the whole group as highlighted, including all the
-   *  operators embedded in the group and regardless of whether or not they're actually highlighted.
-   *  Thus, when a highlighted group moves, all its embedded operators move along with it.
-   */
-  public handleHighlightedElementPositionChange(): void {
-    this.jointGraphWrapper
-      .getElementPositionChangeEvent()
-      .pipe(
-        filter(() => this.jointGraphWrapper.getListenPositionChange()),
-        filter(() => this.undoRedoService.listenJointCommand),
-        filter(
-          movedElement =>
-            this.jointGraphWrapper.getCurrentHighlightedOperatorIDs().includes(movedElement.elementID) ||
-            this.jointGraphWrapper.getCurrentHighlightedGroupIDs().includes(movedElement.elementID)
-        )
-      )
-      .subscribe(movedElement => {
-        const selectedElements = this.jointGraphWrapper.getCurrentHighlightedGroupIDs().slice(); // operators added to this list later
-        const movedGroup = this.operatorGroup.getGroupByOperator(movedElement.elementID);
-
-        if (movedGroup && selectedElements.includes(movedGroup.groupID)) {
-          movedGroup.operators.forEach((operatorInfo, operatorID) => selectedElements.push(operatorID));
-          selectedElements.splice(selectedElements.indexOf(movedGroup.groupID), 1);
-        }
-        this.jointGraphWrapper.getCurrentHighlightedOperatorIDs().forEach(operatorID => {
-          const group = this.operatorGroup.getGroupByOperator(operatorID);
-          // operators move with their groups,
-          // do not add elements that are in a group that will also be moved
-          if (!group || !this.jointGraphWrapper.getCurrentHighlightedGroupIDs().includes(group.groupID)) {
-            selectedElements.push(operatorID);
-          }
-        });
-        const offsetX = movedElement.newPosition.x - movedElement.oldPosition.x;
-        const offsetY = movedElement.newPosition.y - movedElement.oldPosition.y;
-        this.jointGraphWrapper.setListenPositionChange(false);
-        this.undoRedoService.setListenJointCommand(false);
-        selectedElements
-          .filter(elementID => elementID !== movedElement.elementID)
-          .forEach(elementID => this.jointGraphWrapper.setElementPosition(elementID, offsetX, offsetY));
-        this.jointGraphWrapper.setListenPositionChange(true);
-        this.undoRedoService.setListenJointCommand(true);
-      });
-  }
-
   /**
    * Gets the read-only version of the TexeraGraph
    *  to access the properties and event streams.
@@ -392,6 +165,10 @@ export class WorkflowActionService {
     return this.operatorGroup;
   }
 
+  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+  //                                      Below are all the actions available.                                        //
+  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
   /**
    * Adds an operator to the workflow graph at a point.
    * Throws an Error if the operator ID already existed in the Workflow Graph.
@@ -400,102 +177,50 @@ export class WorkflowActionService {
    * @param point
    */
   public addOperator(operator: OperatorPredicate, point: Point): void {
-    // remember currently highlighted operators and groups
-    const currentHighlights = this.jointGraphWrapper.getCurrentHighlights();
+    // turn off multiselect since there's only one operator added
+    this.jointGraphWrapper.setMultiSelectMode(false);
+    // check that the operator doesn't exist
+    this.texeraGraph.assertOperatorNotExists(operator.operatorID);
+    // check that the operator type exists
+    if (!this.operatorMetadataService.operatorTypeExists(operator.operatorType)) {
+      throw new Error(`operator type ${operator.operatorType} is invalid`);
+    }
 
-    const command: Command = {
-      modifiesWorkflow: true,
-      execute: () => {
-        // turn off multiselect since there's only one operator added
-        this.jointGraphWrapper.setMultiSelectMode(false);
-        // add operator
-        this.addOperatorsInternal([{ operator, point }]);
-        // highlight the newly added operator
-        this.jointGraphWrapper.highlightOperators(operator.operatorID);
-      },
-      undo: () => {
-        // remove the operator from JointJS
-        this.deleteOperatorInternal(operator.operatorID);
-        // restore previous highlights
-        this.jointGraphWrapper.unhighlightElements(this.jointGraphWrapper.getCurrentHighlights());
-        this.jointGraphWrapper.setMultiSelectMode(
-          currentHighlights.operators.length + currentHighlights.groups.length + currentHighlights.links.length > 1
-        );
-        this.jointGraphWrapper.highlightElements(currentHighlights);
-      },
-    };
-    const commandMessage: CommandMessage = { action: "addOperator", parameters: [operator, point], type: "execute" };
-    this.executeStoreAndPropagateCommand(command, commandMessage);
+    this.texeraGraph.bundleActions(() => {
+      // add operator to texera graph
+      this.texeraGraph.addOperator(operator);
+      this.texeraGraph.sharedModel.elementPositionMap?.set(operator.operatorID, point);
+    });
   }
 
   /**
-   * Deletes an operator from the workflow graph
+   * Deletes an operator from the workflow graph, also deleting associated links.
    * Throws an Error if the operator ID doesn't exist in the Workflow Graph.
    * @param operatorID
    */
   public deleteOperator(operatorID: string): void {
-    const operator = this.getTexeraGraph().getOperator(operatorID);
-    const point = this.getOperatorGroup().getOperatorPositionByGroup(operatorID);
-    const layer = this.getOperatorGroup().getOperatorLayerByGroup(operatorID);
-
-    const linksToDelete = new Map<OperatorLink, number>();
-    this.getTexeraGraph()
-      .getAllLinks()
-      .filter(link => link.source.operatorID === operatorID || link.target.operatorID === operatorID)
-      .forEach(link => linksToDelete.set(link, this.getOperatorGroup().getLinkLayerByGroup(link.linkID)));
-
-    const group = cloneDeep(this.getOperatorGroup().getGroupByOperator(operatorID));
-    const groupLayer = group ? this.getJointGraphWrapper().getCellLayer(group.groupID) : undefined;
-
-    const command: Command = {
-      modifiesWorkflow: true,
-      execute: () => {
-        linksToDelete.forEach((linkLayer, link) => this.deleteLinkWithIDInternal(link.linkID));
-        this.deleteOperatorInternal(operatorID);
-        if (group && this.getOperatorGroup().getGroup(group.groupID).operators.size < 2) {
-          this.unGroupInternal(group.groupID);
-        }
-      },
-      undo: () => {
-        this.addOperatorsInternal([{ operator, point }]);
-        this.getJointGraphWrapper().setCellLayer(operatorID, layer);
-        linksToDelete.forEach((linkLayer, link) => {
-          this.addLinksInternal([link]);
-          this.getJointGraphWrapper().setCellLayer(link.linkID, linkLayer);
-        });
-        if (group && this.getOperatorGroup().hasGroup(group.groupID)) {
-          this.getOperatorGroup().addOperatorToGroup(operatorID, group.groupID);
-        } else if (group && groupLayer) {
-          this.addGroupInternal(cloneDeep(group));
-          this.getJointGraphWrapper().setCellLayer(group.groupID, groupLayer);
-        }
-        if (!group || !group.collapsed) {
-          // turn off multiselect since only the deleted operator will be added
-          this.getJointGraphWrapper().setMultiSelectMode(false);
-          this.getJointGraphWrapper().highlightOperators(operatorID);
-        }
-      },
-    };
-
-    const commandMessage: CommandMessage = { action: "deleteOperator", parameters: [operatorID], type: "execute" };
-    this.executeStoreAndPropagateCommand(command, commandMessage);
+    this.unhighlightOperators(operatorID);
+    this.texeraGraph.bundleActions(() => {
+      const linksToDelete = new Map<OperatorLink, number>();
+      this.getTexeraGraph()
+        .getAllLinks()
+        .filter(link => link.source.operatorID === operatorID || link.target.operatorID === operatorID)
+        .forEach(link => linksToDelete.set(link, this.getOperatorGroup().getLinkLayerByGroup(link.linkID)));
+      linksToDelete.forEach((linkLayer, link) => this.deleteLinkWithID(link.linkID));
+      this.texeraGraph.assertOperatorExists(operatorID);
+      this.texeraGraph.deleteOperator(operatorID);
+    });
   }
 
+  /**
+   * Unhighlight currently selected elements and adds a comment box.
+   * @param commentBox
+   */
   public addCommentBox(commentBox: CommentBox): void {
     const currentHighlights = this.jointGraphWrapper.getCurrentHighlights();
-    const command: Command = {
-      modifiesWorkflow: true,
-      execute: () => {
-        this.jointGraphWrapper.unhighlightElements(currentHighlights);
-        this.jointGraphWrapper.setMultiSelectMode(false);
-        this.addCommentBoxInternal(commentBox);
-      },
-      undo: () => {
-        this.deleteCommentBoxInternal(commentBox.commentBoxID);
-      },
-    };
-    const commandMessage: CommandMessage = { action: "addCommentBox", parameters: [commentBox], type: "execute" };
-    this.executeStoreAndPropagateCommand(command, commandMessage);
+    this.jointGraphWrapper.unhighlightElements(currentHighlights);
+    this.jointGraphWrapper.setMultiSelectMode(false);
+    this.texeraGraph.addCommentBox(commentBox);
   }
 
   /**
@@ -515,90 +240,34 @@ export class WorkflowActionService {
   ): void {
     // remember currently highlighted operators and groups
     const currentHighlights = this.jointGraphWrapper.getCurrentHighlights();
-
-    const command: Command = {
-      modifiesWorkflow: true,
-      execute: () => {
-        // unhighlight previous highlights
-        this.jointGraphWrapper.unhighlightElements(currentHighlights);
-        this.jointGraphWrapper.setMultiSelectMode(operatorsAndPositions.length > 1);
-        this.addOperatorsInternal(operatorsAndPositions.map(o => ({ operator: o.op, point: o.pos })));
-        operatorsAndPositions.forEach(o => {
-          this.jointGraphWrapper.highlightOperators(o.op.operatorID);
-        });
-        if (links) {
-          this.addLinksInternal(links);
-          if (breakpoints !== undefined) {
-            breakpoints.forEach((breakpoint, linkID) => this.setLinkBreakpointInternal(linkID, breakpoint));
-          }
-          for (let link of links) {
-            this.jointGraphWrapper.highlightLinks(link.linkID);
-          }
-        }
-
-        if (groups) {
-          groups.forEach(group => {
-            // make a copy, because groups can be mutated after being given to operatorGroup (deletion for example)
-            const groupCopy = cloneDeep(group);
-            this.addGroupInternal(groupCopy);
-            this.operatorGroup.moveGroupToLayer(groupCopy, this.operatorGroup.getHighestLayer() + 1);
-          });
-        }
-      },
-      undo: () => {
-        if (groups) {
-          groups.forEach(group => {
-            this.unGroupInternal(group.groupID);
-          });
-        }
-
-        // remove links
-        if (links) {
-          links.forEach(l => this.deleteLinkWithIDInternal(l.linkID));
+    // unhighlight previous highlights
+    this.jointGraphWrapper.unhighlightElements(currentHighlights);
+    this.jointGraphWrapper.setMultiSelectMode(operatorsAndPositions.length > 1);
+    this.texeraGraph.bundleActions(() => {
+      for (const operatorsAndPosition of operatorsAndPositions) {
+        this.addOperator(operatorsAndPosition.op, operatorsAndPosition.pos);
+      }
+      if (links) {
+        for (let i = 0; i < links.length; i++) {
+          this.addLink(links[i]);
         }
-        // remove the operators from JointJS
-        operatorsAndPositions.forEach(o => this.deleteOperatorInternal(o.op.operatorID));
         if (breakpoints !== undefined) {
-          breakpoints.forEach((breakpoint, linkID) => this.setLinkBreakpointInternal(linkID, undefined));
+          breakpoints.forEach((breakpoint, linkID) => this.setLinkBreakpoint(linkID, breakpoint));
         }
-        // restore previous highlights
-        this.jointGraphWrapper.unhighlightElements(this.jointGraphWrapper.getCurrentHighlights());
-        this.jointGraphWrapper.setMultiSelectMode(
-          currentHighlights.operators.length + currentHighlights.groups.length + currentHighlights.links.length > 1
-        );
-        this.jointGraphWrapper.highlightElements(currentHighlights);
-      },
-    };
-    const operators: OperatorPredicate[] = [];
-    operatorsAndPositions.forEach(o => {
-      operators.push(o.op);
+      }
+      if (isDefined(commentBoxes)) {
+        commentBoxes.forEach(commentBox => this.addCommentBox(commentBox));
+      }
     });
-
-    const commandMessage: CommandMessage = {
-      action: "addOperatorsAndLinks",
-      parameters: [operatorsAndPositions, links],
-      type: "execute",
-    };
-    this.executeStoreAndPropagateCommand(command, commandMessage);
-
-    if (isDefined(commentBoxes)) {
-      commentBoxes.forEach(commentBox => this.addCommentBox(commentBox));
-    }
   }
 
+  /**
+   * Deletes a comment box.
+   * @param commentBoxID
+   */
   public deleteCommentBox(commentBoxID: string): void {
-    const commentBox = this.getTexeraGraph().getCommentBox(commentBoxID);
-    const command: Command = {
-      modifiesWorkflow: true,
-      execute: () => {
-        this.deleteCommentBoxInternal(commentBoxID);
-      },
-      undo: () => {
-        this.addCommentBoxInternal(commentBox);
-      },
-    };
-    const commandMessage: CommandMessage = { action: "deleteCommentBox", parameters: [commentBoxID], type: "execute" };
-    this.executeStoreAndPropagateCommand(command, commandMessage);
+    this.texeraGraph.assertCommentBoxExists(commentBoxID);
+    this.texeraGraph.deleteCommentBox(commentBoxID);
   }
 
   /**
@@ -624,110 +293,26 @@ export class WorkflowActionService {
       )
     );
 
-    // save operators to be deleted and their current positions
-    const operatorsAndPositions = new Map<OperatorPredicate, OperatorPosition>();
-
-    operatorIDsCopy.forEach(operatorID =>
-      operatorsAndPositions.set(this.getTexeraGraph().getOperator(operatorID), {
-        position: this.getOperatorGroup().getOperatorPositionByGroup(operatorID),
-        layer: this.getOperatorGroup().getOperatorLayerByGroup(operatorID),
-      })
-    );
-
     // save links to be deleted, including links explicitly deleted and implicitly deleted with their operators
     const linksToDelete = new Map<OperatorLink, number>();
-    // delete links required by this command
-    linkIDs
-      .map(linkID => this.getTexeraGraph().getLinkWithID(linkID))
-      .forEach(link => linksToDelete.set(link, this.getOperatorGroup().getLinkLayerByGroup(link.linkID)));
-    // delete links related to the deleted operator
-    this.getTexeraGraph()
-      .getAllLinks()
-      .filter(
-        link => operatorIDsCopy.includes(link.source.operatorID) || operatorIDsCopy.includes(link.target.operatorID)
-      )
-      .forEach(link => linksToDelete.set(link, this.getOperatorGroup().getLinkLayerByGroup(link.linkID)));
-
-    // save groups that deleted operators reside in
-    const groups = new Map<string, GroupInfo>();
-    operatorIDsCopy.forEach(operatorID => {
-      const group = cloneDeep(this.getOperatorGroup().getGroupByOperator(operatorID));
-      if (group) {
-        groups.set(operatorID, {
-          group,
-          layer: this.getJointGraphWrapper().getCellLayer(group.groupID),
-        });
-      }
-    });
-
-    // remember currently highlighted operators and groups
-    const currentHighlights = this.jointGraphWrapper.getCurrentHighlights();
-
-    const command: Command = {
-      modifiesWorkflow: true,
-      execute: () => {
-        (groupIDs ?? []).forEach(groupID => {
-          this.unGroupInternal(groupID);
-        });
-        linksToDelete.forEach((layer, link) => this.deleteLinkWithIDInternal(link.linkID));
-        operatorIDsCopy.forEach(operatorID => {
-          this.deleteOperatorInternal(operatorID);
-          // if the group has less than 2 operators left, delete the group
-          const groupInfo = groups.get(operatorID);
-          if (
-            groupInfo &&
-            this.getOperatorGroup().hasGroup(groupInfo.group.groupID) &&
-            this.getOperatorGroup().getGroup(groupInfo.group.groupID).operators.size < 2
-          ) {
-            this.unGroupInternal(groupInfo.group.groupID);
-          }
-        });
-      },
-      undo: () => {
-        operatorsAndPositions.forEach((pos, operator) => {
-          this.addOperatorsInternal([{ operator: operator, point: pos.position }]);
-          this.getJointGraphWrapper().setCellLayer(operator.operatorID, pos.layer);
-          // if the group still exists, add the operator back to the group
-          const groupInfo = groups.get(operator.operatorID);
-          if (groupInfo && this.getOperatorGroup().hasGroup(groupInfo.group.groupID)) {
-            this.getOperatorGroup().addOperatorToGroup(operator.operatorID, groupInfo.group.groupID);
-          }
-        });
-        linksToDelete.forEach((layer, link) => {
-          this.addLinksInternal([link]);
-          // if the link is added to a collapsed group, change its saved layer in the group
-          const group = this.getOperatorGroup().getGroupByLink(link.linkID);
-          if (group && group.collapsed) {
-            const linkInfo = group.links.get(link.linkID);
-            if (linkInfo) {
-              linkInfo.layer = layer;
-            }
-          } else {
-            this.getJointGraphWrapper().setCellLayer(link.linkID, layer);
-          }
-        });
-        // add back groups that were deleted when deleting operators
-        groups.forEach(groupInfo => {
-          if (!this.getOperatorGroup().hasGroup(groupInfo.group.groupID)) {
-            this.addGroupInternal(cloneDeep(groupInfo.group));
-            this.getJointGraphWrapper().setCellLayer(groupInfo.group.groupID, groupInfo.layer);
-          }
-        });
-        // restore previous highlights
-        this.jointGraphWrapper.unhighlightElements(this.jointGraphWrapper.getCurrentHighlights());
-        this.jointGraphWrapper.setMultiSelectMode(
-          currentHighlights.operators.length + currentHighlights.groups.length + currentHighlights.links.length > 1
-        );
-        this.jointGraphWrapper.highlightElements(currentHighlights);
-      },
-    };
 
-    const commandMessage: CommandMessage = {
-      action: "deleteOperatorsAndLinks",
-      parameters: [operatorIDs, linkIDs],
-      type: "execute",
-    };
-    this.executeStoreAndPropagateCommand(command, commandMessage);
+    this.texeraGraph.bundleActions(() => {
+      // delete links required by this command
+      linkIDs
+        .map(linkID => this.getTexeraGraph().getLinkWithID(linkID))
+        .forEach(link => linksToDelete.set(link, this.getOperatorGroup().getLinkLayerByGroup(link.linkID)));
+      // delete links related to the deleted operator
+      this.getTexeraGraph()
+        .getAllLinks()
+        .filter(
+          link => operatorIDsCopy.includes(link.source.operatorID) || operatorIDsCopy.includes(link.target.operatorID)
+        )
+        .forEach(link => linksToDelete.set(link, this.getOperatorGroup().getLinkLayerByGroup(link.linkID)));
+      linksToDelete.forEach((layer, link) => this.deleteLinkWithID(link.linkID));
+      operatorIDsCopy.forEach(operatorID => {
+        this.deleteOperator(operatorID);
+      });
+    });
   }
 
   /**
@@ -737,26 +322,26 @@ export class WorkflowActionService {
    */
   // Originally: drag Operator
   public autoLayoutWorkflow(): void {
-    // remeber old position
-    const operatorPositions: { [key: string]: Point } = {};
-    this.texeraGraph
-      .getAllOperators()
-      .forEach(
-        op => (operatorPositions[op.operatorID] = this.getJointGraphWrapper().getElementPosition(op.operatorID))
-      );
-    const command: Command = {
-      modifiesWorkflow: true,
-      execute: () => {
-        this.jointGraphWrapper.autoLayoutJoint();
-      },
-      undo: () => {
-        Object.entries(operatorPositions).forEach(opPosition => {
-          this.jointGraphWrapper.setAbsolutePosition(opPosition[0], opPosition[1].x, opPosition[1].y);
-        });
-      },
-    };
-    const commandMessage: CommandMessage = { action: "autoLayoutWorkflow", parameters: [], type: "execute" };
-    this.executeStoreAndPropagateCommand(command, commandMessage);
+    // This also changes element positions, but we handle this separately.
+    this.texeraGraph.bundleActions(() => {
+      this.undoRedoService.setListenJointCommand(false);
+      this.jointGraphWrapper.autoLayoutJoint();
+      for (const operator of this.texeraGraph.getAllOperators()) {
+        const operatorID = operator.operatorID;
+        const newPosition = this.jointGraphWrapper.getElementPosition(operatorID);
+        if (this.texeraGraph.sharedModel.elementPositionMap.get(operatorID) !== newPosition) {
+          this.texeraGraph.sharedModel.elementPositionMap.set(operatorID, newPosition);
+        }
+      }
+      for (const commentBox of this.texeraGraph.getAllCommentBoxes()) {
+        const commentBoxID = commentBox.commentBoxID;
+        const newPosition = this.jointGraphWrapper.getElementPosition(commentBoxID);
+        if (this.texeraGraph.sharedModel.elementPositionMap.get(commentBoxID) !== newPosition) {
+          this.texeraGraph.sharedModel.elementPositionMap.set(commentBoxID, newPosition);
+        }
+      }
+      this.undoRedoService.setListenJointCommand(true);
+    });
   }
 
   /**
@@ -765,13 +350,9 @@ export class WorkflowActionService {
    * @param link
    */
   public addLink(link: OperatorLink): void {
-    const command: Command = {
-      modifiesWorkflow: true,
-      execute: () => this.addLinksInternal([link]),
-      undo: () => this.deleteLinkWithIDInternal(link.linkID),
-    };
-    const commandMessage: CommandMessage = { action: "addLink", parameters: [link], type: "execute" };
-    this.executeStoreAndPropagateCommand(command, commandMessage);
+    this.texeraGraph.assertLinkNotExists(link);
+    this.texeraGraph.assertLinkIsValid(link);
+    this.texeraGraph.addLink(link);
   }
 
   /**
@@ -780,253 +361,159 @@ export class WorkflowActionService {
    * @param linkID
    */
   public deleteLinkWithID(linkID: string): void {
-    const link = this.getTexeraGraph().getLinkWithID(linkID);
-    const layer = this.getJointGraphWrapper().getCellLayer(linkID);
-    const command: Command = {
-      modifiesWorkflow: true,
-      execute: () => this.deleteLinkWithIDInternal(linkID),
-      undo: () => {
-        this.addLinksInternal([link]);
-        const group = this.getOperatorGroup().getGroupByLink(linkID);
-        if (group && group.collapsed) {
-          const linkInfo = group.links.get(linkID);
-          if (linkInfo) {
-            linkInfo.layer = layer;
-          }
-        } else {
-          this.getJointGraphWrapper().setCellLayer(linkID, layer);
-        }
-      },
-    };
-    const commandMessage: CommandMessage = { action: "deleteLinkWithID", parameters: [linkID], type: "execute" };
-    this.executeStoreAndPropagateCommand(command, commandMessage);
+    this.texeraGraph.assertLinkWithIDExists(linkID);
+    this.unhighlightLinks(linkID);
+    this.texeraGraph.deleteLinkWithID(linkID);
   }
 
+  /**
+   * Deletes a link based on the source and target port.
+   * @param source
+   * @param target
+   */
   public deleteLink(source: OperatorPort, target: OperatorPort): void {
     const link = this.getTexeraGraph().getLink(source, target);
     this.deleteLinkWithID(link.linkID);
   }
 
   /**
-   * Adds given groups to the workflow graph.
-   * @param groups
+   * Replaces the property object with a new one. This is a coarse-grained method for shared-editing.
+   * @param operatorID
+   * @param newProperty
    */
-  public addGroups(...groups: readonly Group[]): void {
-    const command: Command = {
-      modifiesWorkflow: false,
-      execute: () => {
-        groups.forEach(group => {
-          // make a copy, because groups can be mutated after being given to operatorGroup (deletion for example)
-          const groupCopy = cloneDeep(group);
-          this.addGroupInternal(groupCopy);
-          this.operatorGroup.moveGroupToLayer(groupCopy, this.operatorGroup.getHighestLayer() + 1);
-        });
-      },
-      undo: () => {
-        groups.forEach(group => {
-          this.unGroupInternal(group.groupID);
-        });
-      },
-    };
-    this.executeStoreAndPropagateCommand(command);
+  public setOperatorProperty(operatorID: string, newProperty: object): void {
+    this.texeraGraph.bundleActions(() => {
+      this.texeraGraph.setOperatorProperty(operatorID, newProperty);
+      // unhighlight everything but the operator being modified
+      const currentHighlightedOperators = <string[]>this.jointGraphWrapper.getCurrentHighlightedOperatorIDs().slice();
+      if (!currentHighlightedOperators.includes(operatorID)) {
+        this.jointGraphWrapper.setMultiSelectMode(false);
+        this.jointGraphWrapper.highlightOperators(operatorID);
+      }
+    });
   }
 
   /**
-   * ungroups given groups from the workflow graph.
-   * @param groupIDs
+   * set a given link's breakpoint properties to specific values
    */
-  public unGroupGroups(...groupIDs: readonly string[]): void {
-    const groups = groupIDs.map(groupID => cloneDeep(this.operatorGroup.getGroup(groupID)));
-
-    const command: Command = {
-      modifiesWorkflow: false,
-      execute: () => groupIDs.forEach(groupID => this.unGroupInternal(groupID)),
-      undo: () => {
-        groups.forEach(group => {
-          // make a copy, because groups can be mutated after being given to operatorGroup (deletion for example)
-          const groupCopy = cloneDeep(group);
-          this.addGroupInternal(groupCopy);
-          this.operatorGroup.moveGroupToLayer(groupCopy, this.operatorGroup.getHighestLayer() + 1);
-        });
-      },
-    };
-    this.executeStoreAndPropagateCommand(command);
+  public setLinkBreakpoint(linkID: string, newBreakpoint: Breakpoint | undefined): void {
+    this.texeraGraph.bundleActions(() => {
+      this.texeraGraph.setLinkBreakpoint(linkID, newBreakpoint);
+    });
   }
 
   /**
-   * Collapses given groups on the graph.
-   * @param groupIDs
+   * Set the link's breakpoint property to empty to remove the breakpoint
+   *
+   * @param linkID
    */
-  public collapseGroups(...groupIDs: readonly string[]): void {
-    const command: Command = {
-      modifiesWorkflow: false,
-      execute: () => groupIDs.forEach(groupID => this.collapseGroupInternal(groupID)),
-      undo: () => groupIDs.forEach(groupID => this.expandGroupInternal(groupID)),
-    };
-    this.executeStoreAndPropagateCommand(command);
+  public removeLinkBreakpoint(linkID: string): void {
+    this.texeraGraph.bundleActions(() => {
+      this.setLinkBreakpoint(linkID, undefined);
+    });
   }
 
-  /**
-   * Expands given groups on the graph.
-   * @param groupIDs
-   */
-  public expandGroups(...groupIDs: string[]): void {
-    const command: Command = {
-      modifiesWorkflow: false,
-      execute: () => groupIDs.forEach(groupID => this.expandGroupInternal(groupID)),
-      undo: () => groupIDs.forEach(groupID => this.collapseGroupInternal(groupID)),
-    };
-    this.executeStoreAndPropagateCommand(command);
+  public addComment(comment: Comment, commentBoxID: string): void {
+    this.texeraGraph.bundleActions(() => {
+      this.texeraGraph.addCommentToCommentBox(comment, commentBoxID);
+    });
   }
 
-  /**
-   * Deletes given groups and all operators embedded in them.
-   * @param groupID
-   */
-  public deleteGroupsAndOperators(...groupIDs: readonly string[]): void {
-    // save all explicitly deleted group operators and links
-    // this is necessary because deleteGroupAndOperatorsInternal deletes operators and links,
-    // trying to add back a group whose operators are gone will cause an error (referencing a deleted operator)
-    const operators = groupIDs.map(groupID => Array.from(this.operatorGroup.getGroup(groupID).operators.values()));
-    const links = groupIDs.map(groupID => Array.from(this.operatorGroup.getGroup(groupID).links.values()));
-    const inLinks = groupIDs.map(groupID =>
-      this.operatorGroup.getGroup(groupID).inLinks.map(linkID => this.texeraGraph.getLinkWithID(linkID))
-    );
-    const outLinks = groupIDs.map(groupID =>
-      this.operatorGroup.getGroup(groupID).outLinks.map(linkID => this.texeraGraph.getLinkWithID(linkID))
-    );
+  public deleteComment(creatorID: number, creationTime: string, commentBoxID: string): void {
+    this.texeraGraph.bundleActions(() => {
+      this.texeraGraph.deleteCommentFromCommentBox(creatorID, creationTime, commentBoxID);
+    });
+  }
 
-    const command: Command = {
-      modifiesWorkflow: true,
-      execute: () => groupIDs.forEach(groupID => this.deleteGroupAndOperatorsInternal(groupID)),
-      undo: () => {
-        for (let i = 0; i < groupIDs.length; i++) {
-          // add back operators and links of deleted groups
-          operators[i].forEach(operatorInfo =>
-            this.addOperatorsInternal([{ operator: operatorInfo.operator, point: operatorInfo.position }])
-          );
-          links[i].forEach(linkInfo => this.addLinksInternal([linkInfo.link]));
-          inLinks[i].forEach(operatorLink => this.addLinksInternal([operatorLink]));
-          outLinks[i].forEach(operatorLink => this.addLinksInternal([operatorLink]));
-
-          // re-create group with same operators and ID
-          const recreatedGroup = this.operatorGroup.getNewGroup(
-            operators[i].map(operatorInfo => operatorInfo.operator.operatorID),
-            groupIDs[i]
-          );
-
-          // add back group as if normal
-          this.addGroupInternal(recreatedGroup);
-          this.operatorGroup.moveGroupToLayer(recreatedGroup, this.operatorGroup.getHighestLayer() + 1);
-        }
-      },
-    };
-    this.executeStoreAndPropagateCommand(command);
+  public editComment(creatorID: number, creationTime: string, commentBoxID: string, newContent: string): void {
+    this.texeraGraph.bundleActions(() => {
+      this.texeraGraph.editCommentInCommentBox(creatorID, creationTime, commentBoxID, newContent);
+    });
   }
 
-  public setOperatorProperty(operatorID: string, newProperty: object): void {
-    const prevProperty = this.getTexeraGraph().getOperator(operatorID).operatorProperties;
-    const group = this.getOperatorGroup().getGroupByOperator(operatorID);
-    const command: Command = {
-      modifiesWorkflow: true,
-      execute: () => {
-        this.setOperatorPropertyInternal(operatorID, newProperty);
-
-        // unhighlight everything but the operator being modified
-        const currentHighlightedOperators = <string[]>this.jointGraphWrapper.getCurrentHighlightedOperatorIDs().slice();
-        if ((!group || !group.collapsed) && !currentHighlightedOperators.includes(operatorID)) {
-          this.jointGraphWrapper.setMultiSelectMode(false);
-          this.jointGraphWrapper.highlightOperators(operatorID);
-        } else if (!group || !group.collapsed) {
-          currentHighlightedOperators.splice(currentHighlightedOperators.indexOf(operatorID), 1);
-          this.jointGraphWrapper.unhighlightOperators(...currentHighlightedOperators);
-          this.jointGraphWrapper.unhighlightGroups(...this.jointGraphWrapper.getCurrentHighlightedGroupIDs());
-        }
-      },
-      undo: () => {
-        this.setOperatorPropertyInternal(operatorID, prevProperty);
-
-        // unhighlight everything but the operator being modified
-        const currentHighlightedOperators = <string[]>this.jointGraphWrapper.getCurrentHighlightedOperatorIDs().slice();
-        if ((!group || !group.collapsed) && !currentHighlightedOperators.includes(operatorID)) {
-          this.jointGraphWrapper.setMultiSelectMode(false);
-          this.jointGraphWrapper.highlightOperators(operatorID);
-        } else if (!group || !group.collapsed) {
-          currentHighlightedOperators.splice(currentHighlightedOperators.indexOf(operatorID), 1);
-          this.jointGraphWrapper.unhighlightOperators(...currentHighlightedOperators);
-          this.jointGraphWrapper.unhighlightGroups(...this.jointGraphWrapper.getCurrentHighlightedGroupIDs());
-        }
-      },
-    };
-    const commandMessage: CommandMessage = {
-      action: "setOperatorProperty",
-      parameters: [operatorID, newProperty],
-      type: "execute",
-    };
-    this.executeStoreAndPropagateCommand(command, commandMessage);
+  public highlightOperators(multiSelect: boolean, ...ops: string[]): void {
+    this.getJointGraphWrapper().setMultiSelectMode(multiSelect);
+    this.getJointGraphWrapper().highlightOperators(...ops);
   }
 
-  public changeOperatorPosition(currentHighlighted: string[], offsetX: number, offsetY: number) {
-    const command: Command = {
-      modifiesWorkflow: true,
-      execute: () => {
-        this.changeOperatorPositionInternal(currentHighlighted, offsetX, offsetY);
-      },
-      undo: () => {
-        this.changeOperatorPositionInternal(currentHighlighted, -offsetX, -offsetY);
-      },
-    };
-    this.executeStoreAndPropagateCommand(command);
+  public unhighlightOperators(...ops: string[]): void {
+    this.getJointGraphWrapper().unhighlightOperators(...ops);
   }
 
-  public changeCommentBoxPosition(commentBoxID: string, offsetX: number, offsetY: number) {
-    const command: Command = {
-      modifiesWorkflow: true,
-      execute: () => {
-        this.changeCommentBoxPositionInternal(commentBoxID, offsetX, offsetY);
-      },
-      undo: () => {
-        this.changeCommentBoxPositionInternal(commentBoxID, -offsetX, -offsetY);
-      },
-    };
-    this.executeStoreAndPropagateCommand(command);
+  public highlightLinks(multiSelect: boolean, ...links: string[]): void {
+    this.getJointGraphWrapper().setMultiSelectMode(multiSelect);
+    this.getJointGraphWrapper().highlightLinks(...links);
   }
 
-  /**
-   * set a given link's breakpoint properties to specific values
-   */
-  public setLinkBreakpoint(linkID: string, newBreakpoint: Breakpoint | undefined): void {
-    if (newBreakpoint == null) newBreakpoint = undefined;
-    const prevBreakpoint = this.getTexeraGraph().getLinkBreakpoint(linkID);
-    const command: Command = {
-      modifiesWorkflow: true,
-      execute: () => {
-        this.setLinkBreakpointInternal(linkID, newBreakpoint);
-      },
-      undo: () => {
-        this.setLinkBreakpointInternal(linkID, prevBreakpoint);
-      },
-    };
+  public unhighlightLinks(...links: string[]): void {
+    this.getJointGraphWrapper().unhighlightLinks(...links);
+  }
 
-    const commandMessage: CommandMessage = {
-      action: "setLinkBreakpoint",
-      parameters: [linkID, newBreakpoint],
-      type: "execute",
-    };
-    this.executeStoreAndPropagateCommand(command, commandMessage);
+  public disableOperators(ops: readonly string[]): void {
+    this.texeraGraph.bundleActions(() => {
+      ops.forEach(op => {
+        this.getTexeraGraph().disableOperator(op);
+      });
+    });
   }
 
+  public enableOperators(ops: readonly string[]): void {
+    this.texeraGraph.bundleActions(() => {
+      ops.forEach(op => {
+        this.getTexeraGraph().enableOperator(op);
+      });
+    });
+  }
+
+  public cacheOperators(ops: readonly string[]): void {
+    this.texeraGraph.bundleActions(() => {
+      ops.forEach(op => {
+        this.getTexeraGraph().cacheOperator(op);
+      });
+    });
+  }
+
+  public unCacheOperators(ops: readonly string[]): void {
+    this.texeraGraph.bundleActions(() => {
+      ops.forEach(op => {
+        this.getTexeraGraph().unCacheOperator(op);
+      });
+    });
+  }
+
+  public setOperatorVersion(operatorId: string, newVersion: string): void {
+    this.getTexeraGraph().changeOperatorVersion(operatorId, newVersion);
+  }
+
+  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+  //                             Below are workflow-level and metadata-related methods.                               //
+  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
   /**
-   * Set the link's breakpoint property to empty to remove the breakpoint
+   * Refreshes the internal shared model and joins a new shared-editing room.
    *
-   * @param linkID
+   * This method also updates the undo manager.
+   * @param workflowId optional, but needed if you want to join shared editing.
+   * @param user optional, but needed if you want to have user presence.
    */
-  public removeLinkBreakpoint(linkID: string): void {
-    this.setLinkBreakpoint(linkID, undefined);
+  public setNewSharedModel(workflowId?: number, user?: User) {
+    this.texeraGraph.loadNewYModel(workflowId, user);
+    this.undoRedoService.setUndoManager(this.texeraGraph.sharedModel.undoManager);
+  }
+
+  /**
+   * Destroys shared-editing related structures and quits the shared editing session.
+   */
+  public destroySharedModel(): void {
+    this.texeraGraph.destroyYModel();
   }
 
   /**
    * Reload the given workflow, update workflowMetadata and workflowContent.
+   * This method is based on the assumption that this is on a new SharedModel.
+   *
+   * <b>Warning: this resets the workflow but not the SharedModel, so make sure to quit the shared-editing session
+   * (<code>{@link destroySharedModel}</code>) before using this method.</b>
    */
   public reloadWorkflow(workflow: Workflow | undefined, asyncRendering = environment.asyncRenderingEnabled): void {
     this.jointGraphWrapper.jointGraphContext.withContext({ async: asyncRendering }, () => {
@@ -1045,6 +532,7 @@ export class WorkflowActionService {
         .forEach(commentBox => this.deleteCommentBox(commentBox.commentBoxID));
 
       if (workflow === undefined) {
+        this.setNewSharedModel();
         return;
       }
 
@@ -1054,7 +542,7 @@ export class WorkflowActionService {
       workflowContent.operators.forEach(op => {
         const opPosition = workflowContent.operatorPositions[op.operatorID];
         if (!opPosition) {
-          throw new Error("position error");
+          throw new Error(`position error: ${op.operatorID}`);
         }
         operatorsAndPositions.push({ op: op, pos: opPosition });
       });
@@ -1086,7 +574,12 @@ export class WorkflowActionService {
       // restore the view point
       this.getJointGraphWrapper().restoreDefaultZoomAndOffset();
     });
-    this.toggleSendData(true);
+
+    // After reloading a workflow, need to clear undo/redo stacks because some of the actions involved in reloading
+    // may remain in the undo manager.
+
+    this.undoRedoService.clearUndoStack();
+    this.undoRedoService.clearRedoStack();
   }
 
   public workflowChanged(): Observable<unknown> {
@@ -1118,6 +611,10 @@ export class WorkflowActionService {
     return this.workflowMetadataChangeSubject.asObservable();
   }
 
+  /**
+   * This is not included in shared editing.
+   * @param workflowMetaData
+   */
   public setWorkflowMetadata(workflowMetaData: WorkflowMetadata | undefined): void {
     if (this.workflowMetadata === workflowMetaData) {
       return;
@@ -1157,11 +654,16 @@ export class WorkflowActionService {
     texeraGraph
       .getAllOperators()
       .forEach(
-        op => (operatorPositions[op.operatorID] = this.getJointGraphWrapper().getElementPosition(op.operatorID))
+        op =>
+          (operatorPositions[op.operatorID] = this.texeraGraph.sharedModel.elementPositionMap?.get(
+            op.operatorID
+          ) as Point)
       );
     commentBoxes.forEach(
       commentBox =>
-        (commentBox.commentBoxPosition = this.getJointGraphWrapper().getElementPosition(commentBox.commentBoxID))
+        (commentBox.commentBoxPosition = this.texeraGraph.sharedModel.elementPositionMap?.get(
+          commentBox.commentBoxID
+        ) as Point)
     );
     const workflowContent: WorkflowContent = {
       operators,
@@ -1181,505 +683,110 @@ export class WorkflowActionService {
     };
   }
 
-  public addComment(comment: Comment, commentBoxID: string): void {
-    this.texeraGraph.addCommentToCommentBox(comment, commentBoxID);
-    const commandMessage: CommandMessage = {
-      action: "addComment",
-      parameters: [comment, commentBoxID],
-      type: "execute",
-    };
-    this.workflowCollabService.propagateChange(commandMessage);
-  }
-
-  public deleteComment(creatorID: number, creationTime: string, commentBoxID: string): void {
-    this.texeraGraph.deleteCommentFromCommentBox(creatorID, creationTime, commentBoxID);
-    const commandMessage: CommandMessage = {
-      action: "deleteComment",
-      parameters: [creatorID, creationTime, commentBoxID],
-      type: "execute",
-    };
-    this.workflowCollabService.propagateChange(commandMessage);
-  }
-
-  public editComment(creatorID: number, creationTime: string, commentBoxID: string, newContent: string): void {
-    this.texeraGraph.editCommentInCommentBox(creatorID, creationTime, commentBoxID, newContent);
-    const commandMessage: CommandMessage = {
-      action: "editComment",
-      parameters: [creatorID, creationTime, commentBoxID, newContent],
-      type: "execute",
-    };
-    this.workflowCollabService.propagateChange(commandMessage);
-  }
-
+  /**
+   * Used for previewing a version. Will clean-up shared editing session before doing so.
+   * @param workflow
+   */
   public setTempWorkflow(workflow: Workflow): void {
+    if (this.texeraGraph.sharedModel.wsProvider.shouldConnect) {
+      this.destroySharedModel();
+    }
     this.tempWorkflow = workflow;
   }
 
+  /**
+   * Used for ending version preview. Will re-connect to shared editing session after doing so.
+   */
   public resetTempWorkflow(): void {
     this.tempWorkflow = undefined;
+    this.texeraGraph.sharedModel.wsProvider.connect();
   }
 
   public getTempWorkflow(): Workflow | undefined {
     return this.tempWorkflow;
   }
 
-  public setOperatorCustomName(operatorId: string, newDisplayName: string, userFriendlyName: string): void {
-    const previousDisplayName = this.getTexeraGraph().getOperator(operatorId).customDisplayName;
-    const previousName = previousDisplayName === undefined ? userFriendlyName : previousDisplayName;
-    const command: Command = {
-      modifiesWorkflow: true,
-      execute: () => {
-        this.getTexeraGraph().changeOperatorDisplayName(operatorId, newDisplayName);
-      },
-      undo: () => {
-        this.getTexeraGraph().changeOperatorDisplayName(operatorId, previousName);
-      },
-    };
-    const commandMessage: CommandMessage = {
-      action: "setOperatorCustomName",
-      parameters: [operatorId, newDisplayName, userFriendlyName],
-      type: "execute",
-    };
-    this.executeStoreAndPropagateCommand(command, commandMessage);
-  }
-
-  public setOperatorVersion(operatorId: string, newVersion: string): void {
-    const command: Command = {
-      modifiesWorkflow: true,
-      execute: () => {
-        this.getTexeraGraph().changeOperatorVersion(operatorId, newVersion);
-      },
-      undo: () => {
-        this.getTexeraGraph().changeOperatorVersion(operatorId, newVersion);
-      },
-    };
-    const commandMessage: CommandMessage = {
-      action: "setOperatorVersion",
-      parameters: [operatorId, newVersion],
-      type: "execute",
-    };
-    this.executeStoreAndPropagateCommand(command, commandMessage);
-  }
-
+  /**
+   * This is not included in shared editing.
+   * @param name
+   */
   public setWorkflowName(name: string): void {
-    const previousName = this.workflowMetadata.name;
-    const command: Command = {
-      modifiesWorkflow: true,
-      execute: () => {
-        this.workflowMetadata.name = name.trim().length > 0 ? name : WorkflowActionService.DEFAULT_WORKFLOW_NAME;
-        this.workflowMetadataChangeSubject.next();
-      },
-      undo: () => {
-        this.workflowMetadata.name = previousName;
-        this.workflowMetadataChangeSubject.next();
-      },
-    };
-    const commandMessage: CommandMessage = { action: "setWorkflowName", parameters: [name], type: "execute" };
-    this.executeStoreAndPropagateCommand(command, commandMessage);
+    this.workflowMetadata.name = name.trim().length > 0 ? name : WorkflowActionService.DEFAULT_WORKFLOW_NAME;
+    this.workflowMetadataChangeSubject.next();
   }
 
+  /**
+   * Need to quit shared-editing room at first.
+   */
   public resetAsNewWorkflow() {
+    this.destroySharedModel();
     this.reloadWorkflow(undefined);
-    this.undoRedoService.clearUndoStack();
-    this.undoRedoService.clearRedoStack();
-    const commandMessage: CommandMessage = {
-      action: "resetAsNewWorkflow",
-      parameters: [],
-      type: "execute",
-    };
-    this.workflowCollabService.propagateChange(commandMessage);
-  }
-
-  public highlightOperators(multiSelect: boolean, ...ops: string[]): void {
-    const command: Command = {
-      modifiesWorkflow: false,
-      execute: () => {
-        this.getJointGraphWrapper().setMultiSelectMode(multiSelect);
-        this.getJointGraphWrapper().highlightOperators(...ops);
-      },
-    };
-    const commandMessage: CommandMessage = {
-      action: "highlightOperators",
-      parameters: [multiSelect, ...ops],
-      type: "execute",
-    };
-    this.executeStoreAndPropagateCommand(command, commandMessage);
-  }
-
-  public unhighlightOperators(...ops: string[]): void {
-    const command: Command = {
-      modifiesWorkflow: false,
-      execute: () => this.getJointGraphWrapper().unhighlightOperators(...ops),
-    };
-    const commandMessage: CommandMessage = { action: "unhighlightOperators", parameters: [...ops], type: "execute" };
-    this.executeStoreAndPropagateCommand(command, commandMessage);
-  }
-
-  public highlightLinks(multiSelect: boolean, ...links: string[]): void {
-    const command: Command = {
-      modifiesWorkflow: false,
-      execute: () => {
-        this.getJointGraphWrapper().setMultiSelectMode(multiSelect);
-        this.getJointGraphWrapper().highlightLinks(...links);
-      },
-    };
-    const commandMessage: CommandMessage = {
-      action: "highlightLinks",
-      parameters: [multiSelect, ...links],
-      type: "execute",
-    };
-    this.executeStoreAndPropagateCommand(command, commandMessage);
-  }
-
-  public unhighlightLinks(...links: string[]): void {
-    const command: Command = {
-      modifiesWorkflow: false,
-      execute: () => this.getJointGraphWrapper().unhighlightLinks(...links),
-    };
-    const commandMessage: CommandMessage = { action: "unhighlightLinks", parameters: [...links], type: "execute" };
-    this.executeStoreAndPropagateCommand(command, commandMessage);
-  }
-
-  public disableOperators(ops: readonly string[]): void {
-    const command: Command = {
-      modifiesWorkflow: true,
-      execute: () =>
-        ops.forEach(op => {
-          this.getTexeraGraph().disableOperator(op);
-        }),
-      undo: () =>
-        ops.forEach(op => {
-          this.getTexeraGraph().enableOperator(op);
-        }),
-    };
-    const commandMessage: CommandMessage = { action: "disableOperators", parameters: [ops], type: "execute" };
-    this.executeStoreAndPropagateCommand(command, commandMessage);
-  }
-
-  public enableOperators(ops: readonly string[]): void {
-    const command: Command = {
-      modifiesWorkflow: true,
-      execute: () =>
-        ops.forEach(op => {
-          this.getTexeraGraph().enableOperator(op);
-        }),
-      undo: () =>
-        ops.forEach(op => {
-          this.getTexeraGraph().disableOperator(op);
-        }),
-    };
-    const commandMessage: CommandMessage = { action: "enableOperators", parameters: [ops], type: "execute" };
-    this.executeStoreAndPropagateCommand(command, commandMessage);
-  }
-
-  public cacheOperators(ops: readonly string[]): void {
-    const command: Command = {
-      modifiesWorkflow: true,
-      execute: () =>
-        ops.forEach(op => {
-          this.getTexeraGraph().cacheOperator(op);
-        }),
-      undo: () =>
-        ops.forEach(op => {
-          this.getTexeraGraph().unCacheOperator(op);
-        }),
-    };
-    const commandMessage: CommandMessage = { action: "cacheOperators", parameters: [ops], type: "execute" };
-    this.executeStoreAndPropagateCommand(command, commandMessage);
-  }
-
-  public unCacheOperators(ops: readonly string[]): void {
-    const command: Command = {
-      modifiesWorkflow: true,
-      execute: () =>
-        ops.forEach(op => {
-          this.getTexeraGraph().unCacheOperator(op);
-        }),
-      undo: () =>
-        ops.forEach(op => {
-          this.getTexeraGraph().cacheOperator(op);
-        }),
-    };
-    const commandMessage: CommandMessage = { action: "unCacheOperators", parameters: [ops], type: "execute" };
-    this.executeStoreAndPropagateCommand(command, commandMessage);
-  }
-
-  private addCommentBoxInternal(commentBox: CommentBox): void {
-    const commentElement = this.jointUIService.getCommentElement(commentBox);
-    this.jointGraph.addCell(commentElement);
-    this.texeraGraph.addCommentBox(commentBox);
-  }
-
-  private addOperatorsInternal(operatorsAndPositions: readonly { operator: OperatorPredicate; point: Point }[]): void {
-    const operatorJointElements: joint.dia.Element[] = new Array(operatorsAndPositions.length);
-
-    for (let i = 0; i < operatorsAndPositions.length; i++) {
-      let operator = operatorsAndPositions[i].operator;
-      let point = operatorsAndPositions[i].point;
-
-      // check that the operator doesn't exist
-      this.texeraGraph.assertOperatorNotExists(operator.operatorID);
-      // check that the operator type exists
-      if (!this.operatorMetadataService.operatorTypeExists(operator.operatorType)) {
-        throw new Error(`operator type ${operator.operatorType} is invalid`);
-      }
-
-      // get the JointJS UI element for operator
-      operatorJointElements[i] = this.jointUIService.getJointOperatorElement(operator, point);
-    }
-
-    // add operator to joint graph first
-    // if jointJS throws an error, it won't cause the inconsistency in texera graph
-
-    if (environment.asyncRenderingEnabled) {
-      // addCells emits jointjs events asynchronously, async context ensures safety for event listeners which expect synchrony
-      this.jointGraphWrapper.jointGraphContext.withContext({ async: true }, () => {
-        this.jointGraph.addCells(operatorJointElements);
-      });
-    } else {
-      for (let i = 0; i < operatorsAndPositions.length; i++) {
-        this.jointGraph.addCell(operatorJointElements[i]);
-      }
-    }
-
-    for (let i = 0; i < operatorsAndPositions.length; i++) {
-      let operator = operatorsAndPositions[i].operator;
-      this.jointGraphWrapper.setCellLayer(operator.operatorID, this.operatorGroup.getHighestLayer() + 1);
-      // add operator to texera graph
-      this.texeraGraph.addOperator(operator);
-    }
-  }
-
-  private deleteOperatorInternal(operatorID: string): void {
-    this.texeraGraph.assertOperatorExists(operatorID);
-    const group = this.operatorGroup.getGroupByOperator(operatorID);
-    if (group && group.collapsed) {
-      this.texeraGraph.deleteOperator(operatorID);
-    } else {
-      // remove the operator from JointJS
-      this.jointGraph.getCell(operatorID).remove();
-      // JointJS operator delete event will propagate and trigger Texera operator delete
-    }
-  }
-
-  private addLinksInternal(links: readonly OperatorLink[]): void {
-    const jointLinkCells: joint.dia.Link[] = new Array(links.length);
-
-    for (let i = 0; i < links.length; i++) {
-      let link = links[i];
-
-      this.texeraGraph.assertLinkNotExists(link);
-      this.texeraGraph.assertLinkIsValid(link);
-
-      const sourceGroup = this.operatorGroup.getGroupByOperator(link.source.operatorID);
-      const targetGroup = this.operatorGroup.getGroupByOperator(link.target.operatorID);
-
-      if (sourceGroup && targetGroup && sourceGroup.groupID === targetGroup.groupID && sourceGroup.collapsed) {
-        this.texeraGraph.addLink(link);
-      } else {
-        // if a group is collapsed, jointjs target is the group not the operator
-        const jointLinkCell = JointUIService.getJointLinkCell(link);
-        if (sourceGroup && sourceGroup.collapsed) {
-          jointLinkCell.set("source", { id: sourceGroup.groupID });
-        }
-        if (targetGroup && targetGroup.collapsed) {
-          jointLinkCell.set("target", { id: targetGroup.groupID });
-        }
-
-        jointLinkCells[i] = jointLinkCell;
-      }
-    }
-
-    this.operatorGroup.setSyncTexeraGraph(false);
-
-    if (environment.asyncRenderingEnabled) {
-      // addCells emits jointjs events asynchronously, async context ensures safety for event listeners which expect synchrony
-      this.jointGraphWrapper.jointGraphContext.withContext({ async: true }, () => {
-        this.jointGraph.addCells(jointLinkCells.filter(x => x !== undefined));
-      });
-    } else {
-      for (let i = 0; i < links.length; i++) {
-        this.jointGraph.addCell(jointLinkCells[i]);
-      }
-    }
-
-    for (let i = 0; i < links.length; i++) {
-      // this.jointGraph.addCell(jointLinkCells[i]);
-      this.texeraGraph.addLink(links[i]);
-      this.jointGraphWrapper.setCellLayer(links[i].linkID, this.operatorGroup.getHighestLayer() + 1);
-    }
-    this.operatorGroup.setSyncTexeraGraph(true);
   }
 
-  private deleteLinkWithIDInternal(linkID: string): void {
-    this.texeraGraph.assertLinkWithIDExists(linkID);
-
-    const group = this.operatorGroup.getGroupByLink(linkID);
-    if (group && group.collapsed) {
-      this.texeraGraph.deleteLinkWithID(linkID);
-    } else {
-      this.jointGraph.getCell(linkID).remove();
-      // JointJS link delete event will propagate and trigger Texera link delete
-    }
-  }
-
-  private addGroupInternal(group: Group): void {
-    this.operatorGroup.assertGroupNotExists(group.groupID);
-    this.operatorGroup.assertGroupIsValid(group);
-
-    // get the JointJS UI element for the group and add it to joint graph
-    const groupJointElement = this.jointUIService.getJointGroupElement(
-      group,
-      this.operatorGroup.getGroupBoundingBox(group)
-    );
-    this.jointGraph.addCell(groupJointElement);
-
-    // add the group to group ID map
-    this.operatorGroup.addGroup(group);
-
-    // collapse the group if it's specified as collapsed
-    if (group.collapsed) {
-      this.operatorGroup.setGroupCollapsed(group.groupID, false);
-      this.collapseGroupInternal(group.groupID);
-    }
-  }
-
-  private unGroupInternal(groupID: string): void {
-    const group = this.operatorGroup.getGroup(groupID);
-
-    // if the group is collapsed, expand it before ungrouping
-    if (group.collapsed) {
-      this.expandGroupInternal(groupID);
-    }
-
-    // delete the group from joint graph
-    const groupJointElement = this.jointGraph.getCell(groupID);
-    groupJointElement.remove();
-
-    // delete the group from group ID map
-    this.operatorGroup.unGroup(groupID);
-  }
-
-  private collapseGroupInternal(groupID: string): void {
-    const group = this.operatorGroup.getGroup(groupID);
-    this.operatorGroup.assertGroupNotCollapsed(group);
-
-    // collapse the group on joint graph
-    this.jointGraphWrapper.setElementSize(groupID, 170, 30);
-    this.operatorGroup.hideOperatorsAndLinks(group);
-
-    // update the group in OperatorGroup
-    this.operatorGroup.collapseGroup(groupID);
-  }
-
-  private expandGroupInternal(groupID: string): void {
-    const group = this.operatorGroup.getGroup(groupID);
-    this.operatorGroup.assertGroupIsCollapsed(group);
-
-    // expand the group on joint graph
-    this.operatorGroup.repositionGroup(group);
-    this.operatorGroup.showOperatorsAndLinks(group);
-
-    // update the group in OperatorGroup
-    this.operatorGroup.expandGroup(groupID);
-  }
-
-  private deleteGroupAndOperatorsInternal(groupID: string): void {
-    const group = this.operatorGroup.getGroup(groupID);
-    // delete operators and links from the group
-    group.links.forEach((linkInfo, linkID) => this.deleteLinkWithIDInternal(linkID));
-    group.inLinks.forEach(linkID => this.deleteLinkWithIDInternal(linkID));
-    group.outLinks.forEach(linkID => this.deleteLinkWithIDInternal(linkID));
-    group.operators.forEach((operatorInfo, operatorID) => this.deleteOperatorInternal(operatorID));
-    // delete the group from joint graph and group ID map
-    this.jointGraph.getCell(groupID).remove();
-    this.operatorGroup.unGroup(groupID);
-  }
-
-  // use this to modify properties
-  private setOperatorPropertyInternal(operatorID: string, newProperty: object) {
-    this.texeraGraph.setOperatorProperty(operatorID, newProperty);
-  }
-
-  private deleteCommentBoxInternal(commentBoxID: string): void {
-    this.texeraGraph.assertCommentBoxExists(commentBoxID);
-    this.texeraGraph.deleteCommentBox(commentBoxID);
-    this.jointGraph.getCell(commentBoxID).remove();
-  }
-
-  private changeOperatorPositionInternal(currentHighlighted: string[], offsetX: number, offsetY: number) {
-    this.jointGraphWrapper.setMultiSelectMode(currentHighlighted.length > 1);
-    currentHighlighted.forEach(operatorID => {
-      this.jointGraphWrapper.highlightOperators(operatorID);
-      this.jointGraphWrapper.setElementPosition(operatorID, offsetX, offsetY);
-    });
-  }
-
-  private changeCommentBoxPositionInternal(commentBoxID: string, offsetX: number, offsetY: number) {
-    this.jointGraphWrapper.setElementPosition(commentBoxID, offsetX, offsetY);
-  }
-
-  private executeStoreAndPropagateCommand(command: Command, message?: CommandMessage | undefined): void {
-    // if command would modify workflow (adding link, operator, changing operator properties), throw an error
-    // non-modifying commands include dragging an operator.
-    if (command.modifiesWorkflow && !this.workflowModificationEnabled) {
-      console.error("attempted to execute workflow action when workflow service is disabled");
-      return;
-    }
-
-    this.undoRedoService.setListenJointCommand(false);
-    command.execute();
-    if (command.undo) this.undoRedoService.addCommand(command);
-    this.undoRedoService.setListenJointCommand(true);
-
-    if (message) this.workflowCollabService.propagateChange(message);
-  }
-
-  private setLinkBreakpointInternal(linkID: string, newBreakpoint: Breakpoint | undefined): void {
-    this.texeraGraph.setLinkBreakpoint(linkID, newBreakpoint);
-    if (newBreakpoint === undefined || Object.keys(newBreakpoint).length === 0) {
-      this.getJointGraphWrapper().hideLinkBreakpoint(linkID);
-    } else {
-      this.getJointGraphWrapper().showLinkBreakpoint(linkID);
-    }
-  }
-
-  private listenToRemoteChange(): void {
-    this.workflowCollabService.getChangeStream().subscribe(message => {
-      if (message.type === "execute") {
-        this.workflowCollabService.handleRemoteChange(() => {
-          const func: commandFuncs = message.action;
-          const previousModificationEnabledStatus = this.workflowModificationEnabled;
-          this.enableWorkflowModification();
-          (this[func] as any).apply(this, message.parameters);
-          if (!previousModificationEnabledStatus) this.disableWorkflowModification();
-        });
-      }
-    });
-  }
+  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+  //                                          Below are private methods.                                              //
+  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
   /**
-   * Handles lock status change.
+   * Subscribes to element position changes from joint graph and updates them in TexeraGraph.
+   *
+   * Also subscribes to element position change event stream,
+   *  checks if the element (operator) is moved by user and
+   *  if the moved element is currently highlighted,
+   *  if it is, moves other highlighted elements (operators) along with it,
+   *    links will automatically move with operators.
+   *
+   *  The subscriptions need and only need to be initiated once,
+   *    unlike observers in <code>{@link SharedModelChangeHandler}</code>.
+   * @private
    */
-  private listenToLockChange(): void {
-    this.workflowCollabService.getLockStatusStream().subscribe(isLockGranted => {
-      if (this.lockListenEnabled) {
-        if (isLockGranted) this.enableWorkflowModification();
-        else this.disableWorkflowModification();
-      }
-    });
-  }
+  private handleJointElementDrag(): void {
+    this.jointGraphWrapper
+      .getElementPositionChangeEvent()
+      .pipe(
+        filter(() => this.jointGraphWrapper.getListenPositionChange()),
+        filter(() => this.undoRedoService.listenJointCommand),
+        filter(() => this.texeraGraph.getSyncTexeraGraph()),
+        filter(
+          movedElement =>
+            this.jointGraphWrapper.getCurrentHighlightedOperatorIDs().includes(movedElement.elementID) ||
+            movedElement.elementID.includes("commentBox")
+          // TODO: this condition is ad-hoc because highlighting for commentBox is not properly implemented.
+        )
+      )
+      .subscribe(movedElement => {
+        this.texeraGraph.bundleActions(() => {
+          if (
+            this.texeraGraph.sharedModel.elementPositionMap.get(movedElement.elementID) !== movedElement.newPosition
+          ) {
+            // The position of comment box is included in its object, so we only set it here for persistence.
+            if (movedElement.elementID.includes("commentBox")) {
+              this.texeraGraph.sharedModel.commentBoxMap
+                .get(movedElement.elementID)
+                ?.set("commentBoxPosition", movedElement.newPosition);
+            }
 
-  /**
-   * Used after temporarily blocking lock changes.
-   */
-  public syncLock(): void {
-    if (this.lockListenEnabled) {
-      if (this.workflowCollabService.isLockGranted()) {
-        this.enableWorkflowModification();
-      } else {
-        this.disableWorkflowModification();
-      }
-    }
+            // For syncing ops/comment boxes in shared editing
+            this.texeraGraph.sharedModel.elementPositionMap.set(movedElement.elementID, movedElement.newPosition);
+            // For moving all highlighted operators
+            const selectedElements = this.jointGraphWrapper.getCurrentHighlightedOperatorIDs();
+            const offsetX = movedElement.newPosition.x - movedElement.oldPosition.x;
+            const offsetY = movedElement.newPosition.y - movedElement.oldPosition.y;
+            this.jointGraphWrapper.setListenPositionChange(false);
+            this.undoRedoService.setListenJointCommand(false);
+            selectedElements
+              .filter(elementID => elementID !== movedElement.elementID)
+              .forEach(elementID => {
+                this.jointGraphWrapper.setElementPosition(elementID, offsetX, offsetY);
+                this.texeraGraph.sharedModel.elementPositionMap.set(
+                  elementID,
+                  this.jointGraphWrapper.getElementPosition(elementID)
+                );
+              });
+            this.jointGraphWrapper.setListenPositionChange(true);
+            this.undoRedoService.setListenJointCommand(true);
+          }
+        });
+      });
   }
 }
diff --git a/core/new-gui/src/app/workspace/service/workflow-graph/model/workflow-graph.ts b/core/new-gui/src/app/workspace/service/workflow-graph/model/workflow-graph.ts
index e5dfdcbaac4..a20e0b13ef9 100644
--- a/core/new-gui/src/app/workspace/service/workflow-graph/model/workflow-graph.ts
+++ b/core/new-gui/src/app/workspace/service/workflow-graph/model/workflow-graph.ts
@@ -1,25 +1,42 @@
-import { Subject } from "rxjs";
-import { Observable } from "rxjs";
+import { Observable, Subject } from "rxjs";
 import {
-  OperatorPredicate,
-  OperatorLink,
-  OperatorPort,
   Breakpoint,
-  Point,
-  CommentBox,
   Comment,
+  CommentBox,
+  OperatorLink,
+  OperatorPort,
+  OperatorPredicate,
 } from "../../../types/workflow-common.interface";
 import { isEqual } from "lodash-es";
+import { SharedModel } from "./shared-model";
+import { User } from "../../../../common/type/user";
+import { createYTypeFromObject, YType } from "../../../types/shared-editing.interface";
+import { Awareness } from "y-protocols/awareness";
 
 // define the restricted methods that could change the graph
 type restrictedMethods =
+  | "sharedModel"
+  | "newYDocLoadedSubject"
   | "addOperator"
   | "deleteOperator"
   | "addLink"
   | "deleteLink"
   | "deleteLinkWithID"
   | "setOperatorProperty"
-  | "setLinkBreakpoint";
+  | "setLinkBreakpoint"
+  | "operatorAddSubject"
+  | "operatorDeleteSubject"
+  | "cachedOperatorChangedSubject"
+  | "operatorDisplayNameChangedSubject"
+  | "linkAddSubject"
+  | "linkDeleteSubject"
+  | "operatorPropertyChangeSubject"
+  | "breakpointChangeStream"
+  | "commentBoxAddSubject"
+  | "commentBoxDeleteSubject"
+  | "commentBoxAddCommentSubject"
+  | "commentBoxDeleteCommentSubject"
+  | "commentBoxEditCommentSubject";
 
 /**
  * WorkflowGraphReadonly is a type that only contains the readonly methods of WorkflowGraph.
@@ -52,116 +69,227 @@ export function isPythonUdf(operator: OperatorPredicate): boolean {
  *
  */
 export class WorkflowGraph {
-  private readonly operatorIDMap = new Map<string, OperatorPredicate>();
-  private readonly operatorLinkMap = new Map<string, OperatorLink>();
-  private readonly commentBoxMap = new Map<string, CommentBox>();
-  private readonly linkBreakpointMap = new Map<string, Breakpoint>();
+  public sharedModel: SharedModel = new SharedModel();
+  public newYDocLoadedSubject = new Subject();
 
-  private readonly operatorAddSubject = new Subject<OperatorPredicate>();
+  public readonly operatorAddSubject = new Subject<OperatorPredicate>();
 
-  private readonly operatorDeleteSubject = new Subject<{
+  public readonly operatorDeleteSubject = new Subject<{
     deletedOperatorID: string;
   }>();
-  private readonly disabledOperatorChangedSubject = new Subject<{
+  public readonly disabledOperatorChangedSubject = new Subject<{
     newDisabled: string[];
     newEnabled: string[];
   }>();
-  private readonly cachedOperatorChangedSubject = new Subject<{
+  public readonly cachedOperatorChangedSubject = new Subject<{
     newCached: string[];
     newUnCached: string[];
   }>();
-  private readonly operatorDisplayNameChangedSubject = new Subject<{
+  public readonly operatorDisplayNameChangedSubject = new Subject<{
     operatorID: string;
     newDisplayName: string;
   }>();
-  private readonly operatorVersionChangedSubject = new Subject<{
+  public readonly linkAddSubject = new Subject<OperatorLink>();
+  public readonly linkDeleteSubject = new Subject<{
+    deletedLink: OperatorLink;
+  }>();
+  public readonly operatorVersionChangedSubject = new Subject<{
     operatorID: string;
     newOperatorVersion: string;
   }>();
-  private readonly linkAddSubject = new Subject<OperatorLink>();
-  private readonly linkDeleteSubject = new Subject<{
-    deletedLink: OperatorLink;
-  }>();
-  private readonly operatorPropertyChangeSubject = new Subject<{
-    oldProperty: object;
+  public readonly operatorPropertyChangeSubject = new Subject<{
     operator: OperatorPredicate;
   }>();
-  private readonly breakpointChangeStream = new Subject<{
+  public readonly breakpointChangeStream = new Subject<{
     oldBreakpoint: object | undefined;
     linkID: string;
   }>();
-  private readonly commentBoxAddSubject = new Subject<CommentBox>();
-  private readonly commentBoxDeleteSubject = new Subject<{ deletedCommentBox: CommentBox }>();
-  private readonly commentBoxAddCommentSubject = new Subject<{ addedComment: Comment; commentBox: CommentBox }>();
-  private readonly commentBoxDeleteCommentSubject = new Subject<{ commentBox: CommentBox }>();
-  private readonly commentBoxEditCommentSubject = new Subject<{ commentBox: CommentBox }>();
+  public readonly commentBoxAddSubject = new Subject<CommentBox>();
+  public readonly commentBoxDeleteSubject = new Subject<{ deletedCommentBox: CommentBox }>();
+  public readonly commentBoxAddCommentSubject = new Subject<{ addedComment: Comment; commentBox: CommentBox }>();
+  public readonly commentBoxDeleteCommentSubject = new Subject<{ commentBox: CommentBox }>();
+  public readonly commentBoxEditCommentSubject = new Subject<{ commentBox: CommentBox }>();
+  private syncTexeraGraph = true;
+  private syncJointGraph = true;
 
   constructor(
     operatorPredicates: OperatorPredicate[] = [],
     operatorLinks: OperatorLink[] = [],
     commentBoxes: CommentBox[] = []
   ) {
-    operatorPredicates.forEach(op => this.operatorIDMap.set(op.operatorID, op));
-    operatorLinks.forEach(link => this.operatorLinkMap.set(link.linkID, link));
-    commentBoxes.forEach(commentBox => this.commentBoxMap.set(commentBox.commentBoxID, commentBox));
+    operatorPredicates.forEach(op => this.sharedModel.operatorIDMap.set(op.operatorID, createYTypeFromObject(op)));
+    operatorLinks.forEach(link => this.sharedModel.operatorLinkMap.set(link.linkID, link));
+    commentBoxes.forEach(commentBox =>
+      this.sharedModel.commentBoxMap.set(commentBox.commentBoxID, createYTypeFromObject(commentBox))
+    );
+    this.newYDocLoadedSubject.next(undefined);
   }
 
+  /**
+   * Returns the boolean value that indicates whether
+   * or not sync JointJS changes to texera graph.
+   */
+  public getSyncTexeraGraph(): boolean {
+    return this.syncTexeraGraph;
+  }
+
+  public setSyncJointGraph(syncJointGraph: boolean): void {
+    this.syncJointGraph = syncJointGraph;
+  }
+
+  public getSyncJointGraph(): boolean {
+    return this.syncJointGraph;
+  }
+
+  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+  //                                     Below are shared-editing-related methods.                                    //
+  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+  /**
+   * Exposes a shared operator type for fine-grained control. Do not use if not familiar with yjs.
+   * @param operatorID
+   */
+  public getSharedOperatorType(operatorID: string): YType<OperatorPredicate> {
+    this.assertOperatorExists(operatorID);
+    return this.sharedModel.operatorIDMap.get(operatorID) as YType<OperatorPredicate>;
+  }
+
+  /**
+   * Exposes a shared comment box type for fine-grained control. Do not use if not familiar with yjs.
+   * @param commentBoxID
+   */
+  public getSharedCommentBoxType(commentBoxID: string): YType<CommentBox> {
+    this.assertCommentBoxExists(commentBoxID);
+    return this.sharedModel.commentBoxMap.get(commentBoxID) as YType<CommentBox>;
+  }
+
+  /**
+   * Get the awareness API to connect a shared type to other third-party shared-editing libraries.
+   */
+  public getSharedModelAwareness(): Awareness {
+    return this.sharedModel.awareness;
+  }
+
+  /**
+   * Replaces current <code>{@link sharedModel}</code>  with a new one and destroy the old model if any.
+   * @param workflowId optional, but needed if you want to join shared editing.
+   * @param user optional, but needed if you want to have user presence.
+   */
+  public loadNewYModel(workflowId?: number, user?: User) {
+    this.destroyYModel();
+    this.sharedModel = new SharedModel(workflowId, user);
+    this.newYDocLoadedSubject.next(undefined);
+  }
+
+  /**
+   * Destroys shared-editing related structures and quits the shared editing session.
+   */
+  public destroyYModel(): void {
+    this.sharedModel.destroy();
+  }
+
+  /**
+   * Sets the boolean value that specifies whether sync JointJS changes to texera graph.
+   */
+  public setSyncTexeraGraph(syncTexeraGraph: boolean): void {
+    this.syncTexeraGraph = syncTexeraGraph;
+  }
+
+  /**
+   * Groups a bunch of actions into one atomic transaction, so that they can be undone/redone in one call.
+   * @param callback Put whatever need to be atomically done within this callback function.
+   */
+  public bundleActions(callback: Function) {
+    this.sharedModel.transact(callback);
+  }
+
+  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+  //                                           Below are action methods.                                              //
+  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
   /**
    * Adds a new operator to the graph.
    * Throws an error the operator has a duplicate operatorID with an existing operator.
-   * @param operator OperatorPredicate
+   * @param operator <code>{@link OperatorPredicate}</code> will be converted to a <code>{@link YType}</code> brefore
+   * adding to the internal Y-graph.
    */
   public addOperator(operator: OperatorPredicate): void {
     this.assertOperatorNotExists(operator.operatorID);
-    this.operatorIDMap.set(operator.operatorID, operator);
-    this.operatorAddSubject.next(operator);
+    const newOp = createYTypeFromObject(operator);
+    this.sharedModel.operatorIDMap.set(operator.operatorID, newOp);
   }
 
+  /**
+   * Adds a comment box to the graph.
+   * @param commentBox <code>{@link CommentBox}</code> will be converted to a <code>{@link YType}</code> before adding
+   * to the internal Y-graph.
+   */
   public addCommentBox(commentBox: CommentBox): void {
     this.assertCommentBoxNotExists(commentBox.commentBoxID);
-    this.commentBoxMap.set(commentBox.commentBoxID, commentBox);
-    this.commentBoxAddSubject.next(commentBox);
+    const newCommentBox = createYTypeFromObject(commentBox);
+    this.sharedModel.commentBoxMap.set(commentBox.commentBoxID, newCommentBox);
   }
 
+  /**
+   * Adds a single comment to an existing comment box.
+   * @param comment the comment's content encapsulated in the <code>{@link Comment}</code> structure. It will be added
+   * as-is to the list of comments, i.e., it won't be converted to <code>{@link YType}</code>.
+   * @param commentBoxID the id of the comment box to add comment to.
+   */
   public addCommentToCommentBox(comment: Comment, commentBoxID: string): void {
     this.assertCommentBoxExists(commentBoxID);
-    const commentBox = this.commentBoxMap.get(commentBoxID);
+    const commentBox = this.sharedModel.commentBoxMap.get(commentBoxID) as YType<CommentBox>;
     if (commentBox != null) {
-      commentBox.comments.push(comment);
-      this.commentBoxAddCommentSubject.next({ addedComment: comment, commentBox: commentBox });
+      commentBox.get("comments").push([comment]);
     }
   }
 
+  /**
+   * Searches the comment list by <code>creatorID</code> and <code>creationTime</code> and deletes the comment if found.
+   * The deletion is on a y-list.
+   * @param creatorID
+   * @param creationTime
+   * @param commentBoxID
+   */
   public deleteCommentFromCommentBox(creatorID: number, creationTime: string, commentBoxID: string): void {
     this.assertCommentBoxExists(commentBoxID);
-    const commentBox = this.commentBoxMap.get(commentBoxID);
+    const commentBox = this.sharedModel.commentBoxMap.get(commentBoxID) as YType<CommentBox>;
     if (commentBox != null) {
-      commentBox.comments.forEach((comment, index) => {
+      commentBox.get("comments").forEach((comment, index) => {
         if (comment.creatorID === creatorID && comment.creationTime === creationTime) {
-          commentBox.comments.splice(index, 1);
+          commentBox.get("comments").delete(index);
         }
       });
-      this.commentBoxDeleteCommentSubject.next({ commentBox: commentBox });
     }
   }
 
+  /**
+   * Edits a given comment. Due to yjs's limitation, the modification is actually done by
+   * deleting and adding (in place).
+   * @param creatorID
+   * @param creationTime
+   * @param commentBoxID
+   * @param content
+   */
   public editCommentInCommentBox(creatorID: number, creationTime: string, commentBoxID: string, content: string): void {
     this.assertCommentBoxExists(commentBoxID);
-    const commentBox = this.commentBoxMap.get(commentBoxID);
+    const commentBox = this.sharedModel.commentBoxMap.get(commentBoxID);
     if (commentBox != null) {
-      commentBox.comments.forEach((comment, index) => {
+      commentBox.get("comments").forEach((comment, index) => {
         if (comment.creatorID === creatorID && comment.creationTime === creationTime) {
           let creatorName = comment.creatorName;
           let newComment: Comment = { content, creationTime, creatorName, creatorID };
-          commentBox.comments[index] = newComment;
+          this.sharedModel.yDoc.transact(() => {
+            commentBox.get("comments").delete(index);
+            commentBox.get("comments").insert(index, [newComment]);
+          });
         }
       });
-      this.commentBoxEditCommentSubject.next({ commentBox: commentBox });
     }
   }
 
   /**
-   * Deletes the operator from the graph by its ID.
+   * Deletes the operator from the graph by its ID. The deletion is on a y-map.
    * Throws an Error if the operator doesn't exist.
    * @param operatorID operator ID
    */
@@ -170,19 +298,25 @@ export class WorkflowGraph {
     if (!operator) {
       throw new Error(`operator with ID ${operatorID} doesn't exist`);
     }
-    this.operatorIDMap.delete(operatorID);
-    this.operatorDeleteSubject.next({ deletedOperatorID: operator.operatorID });
+    this.sharedModel.operatorIDMap.delete(operatorID);
   }
 
+  /**
+   * Deletes the comment box from the model's <code>{@link commentBoxMap}</code>.
+   * @param commentBoxID
+   */
   public deleteCommentBox(commentBoxID: string): void {
     const commentBox = this.getCommentBox(commentBoxID);
     if (!commentBox) {
       throw new Error(`CommentBox with ID ${commentBoxID} does not exist`);
     }
-    this.commentBoxMap.delete(commentBoxID);
-    this.commentBoxDeleteSubject.next({ deletedCommentBox: commentBox });
+    this.sharedModel.commentBoxMap.delete(commentBoxID);
   }
 
+  /**
+   * Disables the operator by setting the <code>isDisabled</code> attribute in the corresponding operator from the map.
+   * @param operatorID
+   */
   public disableOperator(operatorID: string): void {
     const operator = this.getOperator(operatorID);
     if (!operator) {
@@ -191,13 +325,13 @@ export class WorkflowGraph {
     if (this.isOperatorDisabled(operatorID)) {
       return;
     }
-    this.operatorIDMap.set(operatorID, { ...operator, isDisabled: true });
-    this.disabledOperatorChangedSubject.next({
-      newDisabled: [operatorID],
-      newEnabled: [],
-    });
+    this.sharedModel.operatorIDMap.get(operatorID)?.set("isDisabled", true);
   }
 
+  /**
+   * Enables the operator by setting the <code>isDisabled</code> attribute in the corresponding operator from the map.
+   * @param operatorID
+   */
   public enableOperator(operatorID: string): void {
     const operator = this.getOperator(operatorID);
     if (!operator) {
@@ -206,37 +340,26 @@ export class WorkflowGraph {
     if (!this.isOperatorDisabled(operatorID)) {
       return;
     }
-    this.operatorIDMap.set(operatorID, { ...operator, isDisabled: false });
-    this.disabledOperatorChangedSubject.next({
-      newDisabled: [],
-      newEnabled: [operatorID],
-    });
-  }
-
-  public changeOperatorDisplayName(operatorID: string, newDisplayName: string): void {
-    const operator = this.getOperator(operatorID);
-    if (operator.customDisplayName === newDisplayName) {
-      return;
-    }
-    this.operatorIDMap.set(operatorID, {
-      ...operator,
-      customDisplayName: newDisplayName,
-    });
-    this.operatorDisplayNameChangedSubject.next({ operatorID, newDisplayName });
+    this.sharedModel.operatorIDMap.get(operatorID)?.set("isDisabled", false);
   }
 
+  /**
+   * Will use string instead of Y.Text since this is not supposed to be shared-editable. Also the event stream
+   * is emitted synchronously since this does not need to be shared-edited.
+   */
   public changeOperatorVersion(operatorID: string, newOperatorVersion: string): void {
     const operator = this.getOperator(operatorID);
     if (operator.operatorVersion === newOperatorVersion) {
       return;
     }
-    this.operatorIDMap.set(operatorID, {
-      ...operator,
-      operatorVersion: newOperatorVersion,
-    });
+    this.sharedModel.operatorIDMap.get(operatorID)?.set("operatorVersion", newOperatorVersion as any);
     this.operatorVersionChangedSubject.next({ operatorID, newOperatorVersion });
   }
 
+  /**
+   * This method gets this status from readonly object version of the operator data as opposed to y-type data.
+   * @param operatorID
+   */
   public isOperatorDisabled(operatorID: string): boolean {
     const operator = this.getOperator(operatorID);
     if (!operator) {
@@ -245,10 +368,21 @@ export class WorkflowGraph {
     return operator.isDisabled ?? false;
   }
 
+  /**
+   * Gets disabled operators by filtering from all <code>operatorIDs</code> in the <code>OperatorIDMap</code>.
+   */
   public getDisabledOperators(): ReadonlySet<string> {
-    return new Set(Array.from(this.operatorIDMap.keys()).filter(op => this.isOperatorDisabled(op)));
+    return new Set(
+      Array.from(this.sharedModel.operatorIDMap.keys() as IterableIterator<string>).filter(op =>
+        this.isOperatorDisabled(op)
+      )
+    );
   }
 
+  /**
+   * Changes <code>isCached</code> status which is an atomic boolean value as opposed to y-type data.
+   * @param operatorID
+   */
   public cacheOperator(operatorID: string): void {
     const operator = this.getOperator(operatorID);
     if (!operator) {
@@ -260,13 +394,13 @@ export class WorkflowGraph {
     if (this.isOperatorCached(operatorID)) {
       return;
     }
-    this.operatorIDMap.set(operatorID, { ...operator, isCached: true });
-    this.cachedOperatorChangedSubject.next({
-      newCached: [operatorID],
-      newUnCached: [],
-    });
+    this.sharedModel.operatorIDMap.get(operatorID)?.set("isCached", true);
   }
 
+  /**
+   * Changes <code>isCached</code> status which is an atomic boolean value as opposed to y-type data.
+   * @param operatorID
+   */
   public unCacheOperator(operatorID: string): void {
     const operator = this.getOperator(operatorID);
     if (!operator) {
@@ -275,13 +409,13 @@ export class WorkflowGraph {
     if (!this.isOperatorCached(operatorID)) {
       return;
     }
-    this.operatorIDMap.set(operatorID, { ...operator, isCached: false });
-    this.cachedOperatorChangedSubject.next({
-      newCached: [],
-      newUnCached: [operatorID],
-    });
+    this.sharedModel.operatorIDMap.get(operatorID)?.set("isCached", false);
   }
 
+  /**
+   * This method gets this status from readonly object version of the operator data as opposed to y-type data.
+   * @param operatorID
+   */
   public isOperatorCached(operatorID: string): boolean {
     const operator = this.getOperator(operatorID);
     if (!operator) {
@@ -291,7 +425,11 @@ export class WorkflowGraph {
   }
 
   public getCachedOperators(): ReadonlySet<string> {
-    return new Set(Array.from(this.operatorIDMap.keys()).filter(op => this.isOperatorCached(op)));
+    return new Set(
+      Array.from(this.sharedModel.operatorIDMap.keys() as IterableIterator<string>).filter(op =>
+        this.isOperatorCached(op)
+      )
+    );
   }
 
   /**
@@ -299,47 +437,69 @@ export class WorkflowGraph {
    * @param operatorID operator ID
    */
   public hasOperator(operatorID: string): boolean {
-    return this.operatorIDMap.has(operatorID);
+    return this.sharedModel.operatorIDMap.has(operatorID) as boolean;
   }
 
+  /**
+   * Returns whether the comment box exists in the graph.
+   * @param commentBoxId
+   */
   public hasCommentBox(commentBoxId: string): boolean {
-    return this.commentBoxMap.has(commentBoxId);
+    return this.sharedModel.commentBoxMap.has(commentBoxId);
   }
 
   /**
-   * Gets the operator with the operatorID.
+   * Gets the operator with the operatorID. The object version of the operator is returned, as opposed to y-type data.
    * Throws an Error if the operator doesn't exist.
    * @param operatorID operator ID
    */
   public getOperator(operatorID: string): OperatorPredicate {
-    const operator = this.operatorIDMap.get(operatorID);
-    if (!operator) {
+    if (!this.sharedModel.operatorIDMap.has(operatorID)) {
       throw new Error(`operator ${operatorID} does not exist`);
     }
+    const yoperator = this.sharedModel.operatorIDMap.get(operatorID) as YType<OperatorPredicate>;
+    const operator = yoperator.toJSON();
     return operator;
   }
 
+  /**
+   * Gets the comment box with the commentBoxID. The object version is returned, as opposed to y-type data.
+   * Throws an Error if the comment box doesn't exist.
+   * @param commentBoxID
+   */
   public getCommentBox(commentBoxID: string): CommentBox {
-    const commentBox = this.commentBoxMap.get(commentBoxID);
+    const commentBox = this.sharedModel.commentBoxMap.get(commentBoxID) as YType<CommentBox>;
     if (!commentBox) {
       throw new Error(`commentBox ${commentBoxID} does not exist`);
     }
-    return commentBox;
+    return commentBox.toJSON();
   }
 
   /**
-   * Returns an array of all operators in the graph
+   * Returns an array of all operators in the graph.
    */
   public getAllOperators(): OperatorPredicate[] {
-    return Array.from(this.operatorIDMap.values());
+    return Array.from(this.sharedModel.operatorIDMap.values() as IterableIterator<YType<OperatorPredicate>>).map(v =>
+      v.toJSON()
+    );
   }
 
+  /**
+   * Returns an array of all enabled operators in the graph.
+   */
   public getAllEnabledOperators(): ReadonlyArray<OperatorPredicate> {
-    return Array.from(this.operatorIDMap.values()).filter(op => !this.isOperatorDisabled(op.operatorID));
+    return Array.from(this.sharedModel.operatorIDMap.values() as IterableIterator<YType<OperatorPredicate>>)
+      .map(v => v.toJSON())
+      .filter(op => !this.isOperatorDisabled(op.operatorID));
   }
 
+  /**
+   * Returns an array of all the comment boxes in the graph.
+   */
   public getAllCommentBoxes(): CommentBox[] {
-    return Array.from(this.commentBoxMap.values());
+    return Array.from(this.sharedModel.commentBoxMap.values() as IterableIterator<YType<CommentBox>>).map(v =>
+      v.toJSON()
+    );
   }
 
   /**
@@ -352,8 +512,7 @@ export class WorkflowGraph {
   public addLink(link: OperatorLink): void {
     this.assertLinkNotExists(link);
     this.assertLinkIsValid(link);
-    this.operatorLinkMap.set(link.linkID, link);
-    this.linkAddSubject.next(link);
+    this.sharedModel.operatorLinkMap.set(link.linkID, link);
   }
 
   /**
@@ -366,10 +525,9 @@ export class WorkflowGraph {
     if (!link) {
       throw new Error(`link with ID ${linkID} doesn't exist`);
     }
-    this.operatorLinkMap.delete(linkID);
-    this.linkDeleteSubject.next({ deletedLink: link });
+    this.sharedModel.operatorLinkMap.delete(linkID);
     // delete its breakpoint
-    this.linkBreakpointMap.delete(linkID);
+    this.sharedModel.linkBreakpointMap.delete(linkID);
   }
 
   /**
@@ -384,10 +542,9 @@ export class WorkflowGraph {
       throw new Error(`link from ${source.operatorID}.${source.portID}
         to ${target.operatorID}.${target.portID} doesn't exist`);
     }
-    this.operatorLinkMap.delete(link.linkID);
-    this.linkDeleteSubject.next({ deletedLink: link });
+    this.sharedModel.operatorLinkMap.delete(link.linkID);
     // delete its breakpoint
-    this.linkBreakpointMap.delete(link.linkID);
+    this.sharedModel.linkBreakpointMap.delete(link.linkID);
   }
 
   /**
@@ -395,11 +552,11 @@ export class WorkflowGraph {
    * @param linkID link ID
    */
   public hasLinkWithID(linkID: string): boolean {
-    return this.operatorLinkMap.has(linkID);
+    return this.sharedModel.operatorLinkMap.has(linkID);
   }
 
   /**
-   * Returns wheter the graph contains the link with the source and target
+   * Returns whether the graph contains the link with the source and target
    * @param source source operator and port of the link
    * @param target target operator and port of the link
    */
@@ -423,7 +580,7 @@ export class WorkflowGraph {
    * @param linkID link ID
    */
   public getLinkWithID(linkID: string): OperatorLink {
-    const link = this.operatorLinkMap.get(linkID);
+    const link = this.sharedModel.operatorLinkMap.get(linkID);
     if (!link) {
       throw new Error(`link ${linkID} does not exist`);
     }
@@ -451,15 +608,18 @@ export class WorkflowGraph {
    * Returns an array of all the links in the graph.
    */
   public getAllLinks(): OperatorLink[] {
-    return Array.from(this.operatorLinkMap.values());
+    return Array.from(this.sharedModel.operatorLinkMap.values());
   }
 
+  /**
+   * Returns an array of all the enabled links in the graph.
+   */
   public getAllEnabledLinks(): ReadonlyArray<OperatorLink> {
-    return Array.from(this.operatorLinkMap.values()).filter(link => this.isLinkEnabled(link.linkID));
+    return Array.from(this.sharedModel.operatorLinkMap.values()).filter(link => this.isLinkEnabled(link.linkID));
   }
 
   /**
-   * Return an array of all input links of an operator in the graph.
+   * Returns an array of all input links of an operator in the graph.
    * @param operatorID
    */
   public getInputLinksByOperatorId(operatorID: string): OperatorLink[] {
@@ -467,7 +627,7 @@ export class WorkflowGraph {
   }
 
   /**
-   * Returna an array of all output links of an operator in the graph.
+   * Returns an array of all output links of an operator in the graph.
    * @param operatorID
    */
   public getOutputLinksByOperatorId(operatorID: string): OperatorLink[] {
@@ -476,27 +636,21 @@ export class WorkflowGraph {
 
   /**
    * Sets the property of the operator to use the newProperty object.
+   * Will create a new y-object based on the new property, so <b>the old y-object will be replaced</b> and as such
+   * fine-grained shared-editing will <b>NOT</b> be enabled.
+   *
+   * Also updates local awareness for changed property status.
    *
    * Throws an error if the operator doesn't exist.
    * @param operatorID operator ID
-   * @param newProperty new property to set
+   * @param newProperty new property to set, the new y-object created from this will replace the old structure.
    */
   public setOperatorProperty(operatorID: string, newProperty: object): void {
-    const originalOperatorData = this.operatorIDMap.get(operatorID);
-    if (originalOperatorData === undefined) {
+    if (!this.hasOperator(operatorID)) {
       throw new Error(`operator with ID ${operatorID} doesn't exist`);
     }
-    const oldProperty = originalOperatorData.operatorProperties;
-
-    // constructor a new copy with new operatorProperty and all other original attributes
-    const operator = {
-      ...originalOperatorData,
-      operatorProperties: newProperty,
-    };
     // set the new copy back to the operator ID map
-    this.operatorIDMap.set(operatorID, operator);
-
-    this.operatorPropertyChangeSubject.next({ oldProperty, operator });
+    this.sharedModel.operatorIDMap.get(operatorID)?.set("operatorProperties", createYTypeFromObject(newProperty));
   }
 
   /**
@@ -508,13 +662,11 @@ export class WorkflowGraph {
    */
   public setLinkBreakpoint(linkID: string, breakpoint: Breakpoint | undefined): void {
     this.assertLinkWithIDExists(linkID);
-    const oldBreakpoint = this.linkBreakpointMap.get(linkID);
     if (breakpoint === undefined || Object.keys(breakpoint).length === 0) {
-      this.linkBreakpointMap.delete(linkID);
+      this.sharedModel.linkBreakpointMap.delete(linkID);
     } else {
-      this.linkBreakpointMap.set(linkID, breakpoint);
+      this.sharedModel.linkBreakpointMap.set(linkID, breakpoint);
     }
-    this.breakpointChangeStream.next({ oldBreakpoint, linkID });
   }
 
   /**
@@ -524,16 +676,22 @@ export class WorkflowGraph {
    * @param linkID
    */
   public getLinkBreakpoint(linkID: string): Breakpoint | undefined {
-    return this.linkBreakpointMap.get(linkID);
+    return this.sharedModel.linkBreakpointMap.get(linkID);
   }
 
+  /**
+   * Returns all link breakpoints as a readonly map. This returns the internal YMap directly.
+   */
   public getAllLinkBreakpoints(): ReadonlyMap<string, Breakpoint> {
-    return this.linkBreakpointMap;
+    return this.sharedModel.linkBreakpointMap;
   }
 
+  /**
+   * Returns breakpoints filtered by enabled status. This returns a new map from the internal YMap.
+   */
   public getAllEnabledLinkBreakpoints(): ReadonlyMap<string, Breakpoint> {
     const enabledBreakpoints = new Map();
-    this.linkBreakpointMap.forEach((breakpoint, linkID) => {
+    this.sharedModel.linkBreakpointMap.forEach((breakpoint, linkID) => {
       if (this.isLinkEnabled(linkID)) {
         enabledBreakpoints.set(linkID, breakpoint);
       }
@@ -550,7 +708,8 @@ export class WorkflowGraph {
 
   /**
    * Gets the observable event stream of an operator being deleted from the graph.
-   * The observable value is the deleted operator.
+   * The observable value is only the deleted operator's ID since a deleted YMap
+   * (the internal structure of the operator) cannot be retrieved.
    */
   public getOperatorDeleteStream(): Observable<{
     deletedOperatorID: string;
@@ -626,7 +785,6 @@ export class WorkflowGraph {
    * The observable value includes the old property that is replaced, and the operator with new property.
    */
   public getOperatorPropertyChangeStream(): Observable<{
-    oldProperty: object;
     operator: OperatorPredicate;
   }> {
     return this.operatorPropertyChangeSubject.asObservable();
diff --git a/core/new-gui/src/app/workspace/types/command.interface.ts b/core/new-gui/src/app/workspace/types/command.interface.ts
deleted file mode 100644
index 3a339b68e01..00000000000
--- a/core/new-gui/src/app/workspace/types/command.interface.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-import { WorkflowActionService } from "../service/workflow-graph/model/workflow-action.service";
-
-export type commandFuncs =
-  | "undoredo"
-  | "addOperator"
-  | "deleteOperator"
-  | "addOperatorsAndLinks"
-  | "deleteOperatorsAndLinks"
-  | "changeOperatorPosition"
-  | "autoLayoutWorkflow"
-  | "setOperatorProperty"
-  | "addLink"
-  | "deleteLink"
-  | "deleteLinkWithID"
-  | "resetAsNewWorkflow"
-  | "setLinkBreakpoint"
-  | "disableOperators"
-  | "enableOperators"
-  | "cacheOperators"
-  | "unCacheOperators"
-  | "setWorkflowName"
-  | "setOperatorCustomName"
-  | "highlightOperators"
-  | "unhighlightOperators"
-  | "highlightLinks"
-  | "unhighlightLinks"
-  | "addCommentBox"
-  | "deleteCommentBox"
-  | "changeCommentBoxPosition"
-  | "addComment"
-  | "editComment"
-  | "deleteComment"
-  | "setOperatorVersion";
-
-// keyof yields permitted property names for T. When we pass function, it'll return value of that function?
-// For this type, we index T with the property names for T, which results in us getting the values.
-/**
- * type Foo = { a: string, b: number };
- * type ValueOfFoo = ValueOf<Foo>; // string | number
- * ValueOf<Foo> = Foo[a | b] = string | number
- */
-type ValueOf<T> = T[keyof T];
-
-// Pick<WorkflowActionService, commandFuncs>: from WorkflowActionService, pick a set of properties whose keys
-// are in commandFuncs. commandFuncs are names of functions, so this pick will only allow existing func names.
-// So when we make CommandMessage, the function will get inferred from action. Then, it'll require that
-// parameters are the parameters for WorkflowActionService[P], or that function.
-
-// P in keyof Pick: P will be one of the properties that exists in there(set of properties from service).
-// If we have a name in commandFuncs that doesn't match a property in service, we get error. P picks one of them
-export type CommandMessage =
-  | ValueOf<{
-      [P in keyof Pick<WorkflowActionService, commandFuncs>]: {
-        action: P;
-        parameters: Parameters<WorkflowActionService[P]>;
-        type: string;
-      };
-    }>
-  | ValueOf<{
-      [P in keyof Pick<WorkflowActionService, commandFuncs>]: {
-        action: P;
-        parameters: Parameters<WorkflowActionService[P]>;
-        type: string;
-      };
-    }>;
-
-export interface Command {
-  modifiesWorkflow: boolean;
-
-  execute(): void;
-
-  undo?(): void;
-
-  redo?(): void;
-}
diff --git a/core/new-gui/src/app/workspace/types/shared-editing.interface.ts b/core/new-gui/src/app/workspace/types/shared-editing.interface.ts
new file mode 100644
index 00000000000..83ae45746ec
--- /dev/null
+++ b/core/new-gui/src/app/workspace/types/shared-editing.interface.ts
@@ -0,0 +1,130 @@
+import * as Y from "yjs";
+import * as _ from "lodash";
+
+export type YTextify<T> = T extends string ? Y.Text : T;
+export type YArrayify<T> = T extends Array<any> ? Y.Array<any> : T;
+
+/**
+ * <code>YType<T></code> is the yjs-object version of a normal js object with type <code>T</code>.
+ *
+ * Additionally, <code>YType</code> preserves <code>keyof</code> requirements from the original object.
+ *
+ * <code>toJSON()</code> converts the <code>YType</code> back to a normal js object.
+ */
+export type YType<T> = Omit<Y.AbstractType<any>, "get" | "set" | "has" | "toJSON"> & {
+  get<TKey extends keyof T>(key: TKey): YArrayify<YTextify<T[TKey]>>;
+  set<TKey extends keyof T>(key: TKey, value: YArrayify<YTextify<T[TKey]>>): void;
+  has<TKey extends keyof T>(key: TKey): boolean;
+  toJSON(): T;
+};
+
+/** Creates a <code>YType</code> given a normal object. Returns either a <code>YType</code>,
+ *  or the original object if it is a primitive type other than string, because string will be converted to
+ *  <code>Y.Text</code>.
+ *  @param obj: a normal object, could be either a string, an array, or a complicated object with its own attributes.
+ *  Note it is NOT supposed to be a primitive type (if you pass a primitive type into this function the TS code will not
+ *  compile), but we handle the case of primitive type and return it as-is because we do the conversion recursively
+ *  to the deepest level in the obj using this same function, so during runtime this function <b>might</b> be called
+ *  on primitive types.
+ */
+export function createYTypeFromObject<T extends object>(obj: T): YType<T> {
+  if (obj === null) return obj;
+  const originalType = typeof (obj as any);
+  switch (originalType) {
+    case "bigint":
+    case "boolean":
+    case "function":
+    case "number":
+    case "symbol":
+    case "undefined":
+      return obj as any;
+    case "string":
+      return new Y.Text(obj as unknown as string) as unknown as YType<T>;
+    case "object": {
+      const objType = obj.constructor.name;
+      if (objType === "String") {
+        return new Y.Text(obj as unknown as string) as unknown as YType<T>;
+      } else if (objType === "Array") {
+        const yArray = new Y.Array();
+        // Create YType for each array item and push
+        for (const item of obj as any) {
+          yArray.push([createYTypeFromObject(item) as unknown]);
+        }
+        return yArray as unknown as YType<T>;
+      } else if (objType === "Object") {
+        // return new
+        const yMap = new Y.Map();
+        Object.keys(obj).forEach((k: string) => {
+          const value = obj[k as keyof T] as any as object;
+          if (value !== undefined) {
+            yMap.set(k, createYTypeFromObject(value));
+          }
+        });
+        return yMap as unknown as YType<T>;
+      } else {
+        // All other objects that cannot be processed.
+        throw TypeError(`Cannot create YType from ${objType}!`);
+      }
+    }
+  }
+}
+
+/**
+ * Updates a <code>YType</code> in-place given a new <b>normal object</b> version of this <code>YType</code>.
+ * @param oldYObj The old <code>YType</code> to be updated.
+ * @param newObj The new normal object, must be the same template type as the <code>YType</code> to be updated.
+ */
+export function updateYTypeFromObject<T extends object>(oldYObj: YType<T>, newObj: T) {
+  const newObjType = newObj.constructor.name;
+  const oldObjType = oldYObj.toJSON().constructor.name;
+  if (newObjType !== oldObjType) throw TypeError(`Type ${newObjType} cannot be used to update YType of ${oldObjType}`);
+  if (newObjType === "String") {
+    const yText = oldYObj as unknown as Y.Text;
+    if (yText.toJSON() !== (newObj as unknown as string)) {
+      // Inplace update.
+      yText.delete(0, yText.length);
+      yText.insert(0, newObj as unknown as string);
+    }
+  } else if (newObjType === "Array") {
+    const oldYObjAsYArray = oldYObj as unknown as Y.Array<any>;
+    const newObjAsArr = newObj as any[];
+    const newArrLen = newObjAsArr.length;
+    const oldObjAsArr = oldYObjAsYArray.toJSON();
+    const oldArrLen = oldObjAsArr.length;
+    for (let i = 0; i < newArrLen; i++) {
+      if (i >= oldArrLen) {
+        oldYObjAsYArray.push([createYTypeFromObject(newObjAsArr[i])]);
+      } else {
+        if (!_.isEqual(oldObjAsArr[i], newObjAsArr[i])) {
+          try {
+            updateYTypeFromObject(oldYObjAsYArray.get(i), newObjAsArr[i]);
+          } catch (e) {
+            if (e instanceof TypeError) {
+              oldYObjAsYArray.delete(i, 1);
+              oldYObjAsYArray.insert(i, [createYTypeFromObject(newObjAsArr[i])]);
+            }
+          }
+        }
+      }
+    }
+  } else if (newObjType === "Object") {
+    const oldYObjAsYMap = oldYObj as unknown as Y.Map<any>;
+    const oldObj = oldYObjAsYMap.toJSON() as T;
+    Object.keys(newObj).forEach((k: string) => {
+      const newValue = newObj[k as keyof T] as any;
+      if (newValue) {
+        if (!_.isEqual(oldObj[k as keyof T], newValue)) {
+          try {
+            updateYTypeFromObject(oldYObjAsYMap.get(k), newValue);
+          } catch (e) {
+            if (e instanceof TypeError) {
+              oldYObjAsYMap.set(k, createYTypeFromObject(newValue));
+            }
+          }
+        }
+      }
+    });
+  } else {
+    throw TypeError(`Cannot update YType on ${newObjType}!`);
+  }
+}
diff --git a/core/new-gui/yarn.lock b/core/new-gui/yarn.lock
index c5fcacd424c..b81ccf0bea7 100644
--- a/core/new-gui/yarn.lock
+++ b/core/new-gui/yarn.lock
@@ -3502,6 +3502,14 @@
   resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.7.tgz#63bb7d067db107cc1e457c303bc25d511febf6cb"
   integrity sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==
 
+"@types/quill@^2.0.9":
+  version "2.0.9"
+  resolved "https://registry.yarnpkg.com/@types/quill/-/quill-2.0.9.tgz#71e2cd9069690eeb01b0c7318ff7eb2bb9e2044a"
+  integrity sha512-/n40Ypp+jF3GDLqB/5z1P+Odq1K98txXbBgRDkG6Z90LGC1AwQPtZWNeOdDg0yUlgBSUASmpeDn3eBPUuPXtuw==
+  dependencies:
+    parchment "^1.1.2"
+    quill-delta "^4.0.1"
+
 "@types/range-parser@*":
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.4.tgz#cd667bcfdd025213aafb7ca5915a932590acdcdc"
@@ -3990,6 +3998,28 @@ abbrev@1:
   resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
   integrity sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==
 
+abstract-leveldown@^6.2.1:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/abstract-leveldown/-/abstract-leveldown-6.3.0.tgz#d25221d1e6612f820c35963ba4bd739928f6026a"
+  integrity sha512-TU5nlYgta8YrBMNpc9FwQzRbiXsj49gsALsXadbGHt9CROPzX5fB0rWDR5mtdpOOKa5XqRFpbj1QroPAoPzVjQ==
+  dependencies:
+    buffer "^5.5.0"
+    immediate "^3.2.3"
+    level-concat-iterator "~2.0.0"
+    level-supports "~1.0.0"
+    xtend "~4.0.0"
+
+abstract-leveldown@~6.2.1, abstract-leveldown@~6.2.3:
+  version "6.2.3"
+  resolved "https://registry.yarnpkg.com/abstract-leveldown/-/abstract-leveldown-6.2.3.tgz#036543d87e3710f2528e47040bc3261b77a9a8eb"
+  integrity sha512-BsLm5vFMRUrrLeCcRc+G0t2qOaTzpoJQLOubq2XM72eNpjF5UdU5o/5NvlNhx95XHcAvcl8OMXr4mlg/fRgUXQ==
+  dependencies:
+    buffer "^5.5.0"
+    immediate "^3.2.3"
+    level-concat-iterator "~2.0.0"
+    level-supports "~1.0.0"
+    xtend "~4.0.0"
+
 accepts@~1.3.4, accepts@~1.3.5, accepts@~1.3.8:
   version "1.3.8"
   resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.8.tgz#0bf0be125b67014adcb0b0921e62db7bffe16b2e"
@@ -4414,6 +4444,11 @@ astral-regex@^2.0.0:
   resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-2.0.0.tgz#483143c567aeed4785759c0865786dc77d7d2e31"
   integrity sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==
 
+async-limiter@~1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.1.tgz#dd379e94f0db8310b08291f9d64c3209766617fd"
+  integrity sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==
+
 async@^2.6.4:
   version "2.6.4"
   resolved "https://registry.yarnpkg.com/async/-/async-2.6.4.tgz#706b7ff6084664cd7eae713f6f965433b5504221"
@@ -5088,6 +5123,15 @@ cliui@^7.0.2:
     strip-ansi "^6.0.0"
     wrap-ansi "^7.0.0"
 
+cliui@^8.0.1:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-8.0.1.tgz#0c04b075db02cbfe60dc8e6cf2f5486b1a3608aa"
+  integrity sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==
+  dependencies:
+    string-width "^4.2.0"
+    strip-ansi "^6.0.1"
+    wrap-ansi "^7.0.0"
+
 clone-deep@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/clone-deep/-/clone-deep-4.0.1.tgz#c19fd9bdbbf85942b4fd979c84dcf7d5f07c2387"
@@ -5102,6 +5146,11 @@ clone@^1.0.2:
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
   integrity sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==
 
+clone@^2.1.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f"
+  integrity sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==
+
 clonedeep@~2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/clonedeep/-/clonedeep-2.0.0.tgz#8ceca0777f477bbf31fe8c871aaf63a390bbc272"
@@ -5248,6 +5297,21 @@ concat-map@0.0.1:
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
   integrity sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==
 
+concurrently@^7.4.0:
+  version "7.4.0"
+  resolved "https://registry.yarnpkg.com/concurrently/-/concurrently-7.4.0.tgz#bb0e344964bc172673577c420db21e963f2f7368"
+  integrity sha512-M6AfrueDt/GEna/Vg9BqQ+93yuvzkSKmoTixnwEJkH0LlcGrRC2eCmjeG1tLLHIYfpYJABokqSGyMcXjm96AFA==
+  dependencies:
+    chalk "^4.1.0"
+    date-fns "^2.29.1"
+    lodash "^4.17.21"
+    rxjs "^7.0.0"
+    shell-quote "^1.7.3"
+    spawn-command "^0.0.2-1"
+    supports-color "^8.1.0"
+    tree-kill "^1.2.2"
+    yargs "^17.3.1"
+
 connect-history-api-fallback@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/connect-history-api-fallback/-/connect-history-api-fallback-1.6.0.tgz#8b32089359308d111115d81cad3fceab888f97bc"
@@ -6112,6 +6176,11 @@ date-fns@^2.16.1:
   resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.29.2.tgz#0d4b3d0f3dff0f920820a070920f0d9662c51931"
   integrity sha512-0VNbwmWJDS/G3ySwFSJA3ayhbURMTJLtwM2DTxf9CWondCnh6DTNlO9JgRSq6ibf4eD0lfMJNBxUdEAHHix+bA==
 
+date-fns@^2.29.1:
+  version "2.29.3"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.29.3.tgz#27402d2fc67eb442b511b70bbdf98e6411cd68a8"
+  integrity sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==
+
 date-format@^4.0.13:
   version "4.0.13"
   resolved "https://registry.yarnpkg.com/date-format/-/date-format-4.0.13.tgz#87c3aab3a4f6f37582c5f5f63692d2956fa67890"
@@ -6241,6 +6310,14 @@ defaults@^1.0.3:
   dependencies:
     clone "^1.0.2"
 
+deferred-leveldown@~5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/deferred-leveldown/-/deferred-leveldown-5.3.0.tgz#27a997ad95408b61161aa69bd489b86c71b78058"
+  integrity sha512-a59VOT+oDy7vtAbLRCZwWgxu2BaCfd5Hk7wxJd48ei7I+nsg8Orlb9CLG0PMZienk9BSUKgeAqkO2+Lw+1+Ukw==
+  dependencies:
+    abstract-leveldown "~6.2.1"
+    inherits "^2.0.3"
+
 define-lazy-prop@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz#3f7ae421129bcaaac9bc74905c98a0009ec9ee7f"
@@ -6504,6 +6581,16 @@ encodeurl@~1.0.2:
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
   integrity sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==
 
+encoding-down@^6.3.0:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/encoding-down/-/encoding-down-6.3.0.tgz#b1c4eb0e1728c146ecaef8e32963c549e76d082b"
+  integrity sha512-QKrV0iKR6MZVJV08QY0wp1e7vF6QbhnbQhb07bwpEyuz4uZiZgPlEGdkCROuFkUwdxlFaiPIhjyarH1ee/3vhw==
+  dependencies:
+    abstract-leveldown "^6.2.1"
+    inherits "^2.0.3"
+    level-codec "^9.0.0"
+    level-errors "^2.0.0"
+
 encoding@^0.1.12, encoding@^0.1.13:
   version "0.1.13"
   resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.13.tgz#56574afdd791f54a8e9b2785c0582a2d26210fa9"
@@ -6574,7 +6661,7 @@ err-code@^2.0.2:
   resolved "https://registry.yarnpkg.com/err-code/-/err-code-2.0.3.tgz#23c2f3b756ffdfc608d30e27c9a941024807e7f9"
   integrity sha512-2bmlRpNKBxT/CRmPOlyISQpNj+qSeYvcym/uT0Jx2bMOlKLtSy1ZmLuVxSEKKyor/N5yhvp/ZiG1oE3DEYMSFA==
 
-errno@^0.1.1:
+errno@^0.1.1, errno@~0.1.1:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.8.tgz#8bb3e9c7d463be4976ff888f76b4809ebc2e811f"
   integrity sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==
@@ -7165,6 +7252,11 @@ eventemitter2@^6.4.3:
   resolved "https://registry.yarnpkg.com/eventemitter2/-/eventemitter2-6.4.7.tgz#a7f6c4d7abf28a14c1ef3442f21cb306a054271d"
   integrity sha512-tYUSVOGeQPKt/eC1ABfhHy5Xd96N3oIijJvN3O9+TsC28T5V9yX9oEfEK5faP0EFSNVOG97qtAS68GBrQB2hDg==
 
+eventemitter3@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-2.0.3.tgz#b5e1079b59fb5e1ba2771c0a993be060a58c99ba"
+  integrity sha512-jLN68Dx5kyFHaePoXWPsCGW5qdyZQtLYHkxkg02/Mz6g0kYpDx4FyP6XfArhQdlOC4b8Mv+EMxPo/8La7Tzghg==
+
 eventemitter3@^4.0.0:
   version "4.0.7"
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f"
@@ -7278,7 +7370,7 @@ ext@^1.1.2:
   dependencies:
     type "^2.5.0"
 
-extend@^3.0.0, extend@~3.0.2:
+extend@^3.0.0, extend@^3.0.2, extend@~3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
   integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==
@@ -7323,7 +7415,12 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
-fast-diff@^1.1.2:
+fast-diff@1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.1.2.tgz#4b62c42b8e03de3f848460b639079920695d0154"
+  integrity sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig==
+
+fast-diff@1.2.0, fast-diff@^1.1.2:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03"
   integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==
@@ -8317,6 +8414,11 @@ image-size@~0.5.0:
   resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.5.5.tgz#09dfd4ab9d20e29eb1c3e80b8990378df9e3cb9c"
   integrity sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==
 
+immediate@^3.2.3:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.3.0.tgz#1aef225517836bcdf7f2a2de2600c79ff0269266"
+  integrity sha512-HR7EVodfFUdQCTIeySw+WDRFJlPcLOJbXfwwZ7Oom6tjsvZ3bOkCDJHehQC3nxJrv7+f9XecwazynjU8e4Vw3Q==
+
 immediate@~3.0.5:
   version "3.0.6"
   resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.0.6.tgz#9db1dbd0faf8de6fbe0f5dd5e56bb606280de69b"
@@ -8716,6 +8818,11 @@ isobject@^3.0.1:
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
   integrity sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==
 
+isomorphic.js@^0.2.4:
+  version "0.2.5"
+  resolved "https://registry.yarnpkg.com/isomorphic.js/-/isomorphic.js-0.2.5.tgz#13eecf36f2dba53e85d355e11bf9d4208c6f7f88"
+  integrity sha512-PIeMbHqMt4DnUP3MA/Flc0HElYjMXArsw1qwJZcm9sqR8mq3l8NYizFMty0pWwE/tzIGH3EKK5+jes5mAr85yw==
+
 isstream@~0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
@@ -9552,6 +9659,88 @@ less@4.1.2:
     needle "^2.5.2"
     source-map "~0.6.0"
 
+level-codec@^9.0.0:
+  version "9.0.2"
+  resolved "https://registry.yarnpkg.com/level-codec/-/level-codec-9.0.2.tgz#fd60df8c64786a80d44e63423096ffead63d8cbc"
+  integrity sha512-UyIwNb1lJBChJnGfjmO0OR+ezh2iVu1Kas3nvBS/BzGnx79dv6g7unpKIDNPMhfdTEGoc7mC8uAu51XEtX+FHQ==
+  dependencies:
+    buffer "^5.6.0"
+
+level-concat-iterator@~2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/level-concat-iterator/-/level-concat-iterator-2.0.1.tgz#1d1009cf108340252cb38c51f9727311193e6263"
+  integrity sha512-OTKKOqeav2QWcERMJR7IS9CUo1sHnke2C0gkSmcR7QuEtFNLLzHQAvnMw8ykvEcv0Qtkg0p7FOwP1v9e5Smdcw==
+
+level-errors@^2.0.0, level-errors@~2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/level-errors/-/level-errors-2.0.1.tgz#2132a677bf4e679ce029f517c2f17432800c05c8"
+  integrity sha512-UVprBJXite4gPS+3VznfgDSU8PTRuVX0NXwoWW50KLxd2yw4Y1t2JUR5In1itQnudZqRMT9DlAM3Q//9NCjCFw==
+  dependencies:
+    errno "~0.1.1"
+
+level-iterator-stream@~4.0.0:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/level-iterator-stream/-/level-iterator-stream-4.0.2.tgz#7ceba69b713b0d7e22fcc0d1f128ccdc8a24f79c"
+  integrity sha512-ZSthfEqzGSOMWoUGhTXdX9jv26d32XJuHz/5YnuHZzH6wldfWMOVwI9TBtKcya4BKTyTt3XVA0A3cF3q5CY30Q==
+  dependencies:
+    inherits "^2.0.4"
+    readable-stream "^3.4.0"
+    xtend "^4.0.2"
+
+level-js@^5.0.0:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/level-js/-/level-js-5.0.2.tgz#5e280b8f93abd9ef3a305b13faf0b5397c969b55"
+  integrity sha512-SnBIDo2pdO5VXh02ZmtAyPP6/+6YTJg2ibLtl9C34pWvmtMEmRTWpra+qO/hifkUtBTOtfx6S9vLDjBsBK4gRg==
+  dependencies:
+    abstract-leveldown "~6.2.3"
+    buffer "^5.5.0"
+    inherits "^2.0.3"
+    ltgt "^2.1.2"
+
+level-packager@^5.1.0:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/level-packager/-/level-packager-5.1.1.tgz#323ec842d6babe7336f70299c14df2e329c18939"
+  integrity sha512-HMwMaQPlTC1IlcwT3+swhqf/NUO+ZhXVz6TY1zZIIZlIR0YSn8GtAAWmIvKjNY16ZkEg/JcpAuQskxsXqC0yOQ==
+  dependencies:
+    encoding-down "^6.3.0"
+    levelup "^4.3.2"
+
+level-supports@~1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/level-supports/-/level-supports-1.0.1.tgz#2f530a596834c7301622521988e2c36bb77d122d"
+  integrity sha512-rXM7GYnW8gsl1vedTJIbzOrRv85c/2uCMpiiCzO2fndd06U/kUXEEU9evYn4zFggBOg36IsBW8LzqIpETwwQzg==
+  dependencies:
+    xtend "^4.0.2"
+
+level@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/level/-/level-6.0.1.tgz#dc34c5edb81846a6de5079eac15706334b0d7cd6"
+  integrity sha512-psRSqJZCsC/irNhfHzrVZbmPYXDcEYhA5TVNwr+V92jF44rbf86hqGp8fiT702FyiArScYIlPSBTDUASCVNSpw==
+  dependencies:
+    level-js "^5.0.0"
+    level-packager "^5.1.0"
+    leveldown "^5.4.0"
+
+leveldown@^5.4.0:
+  version "5.6.0"
+  resolved "https://registry.yarnpkg.com/leveldown/-/leveldown-5.6.0.tgz#16ba937bb2991c6094e13ac5a6898ee66d3eee98"
+  integrity sha512-iB8O/7Db9lPaITU1aA2txU/cBEXAt4vWwKQRrrWuS6XDgbP4QZGj9BL2aNbwb002atoQ/lIotJkfyzz+ygQnUQ==
+  dependencies:
+    abstract-leveldown "~6.2.1"
+    napi-macros "~2.0.0"
+    node-gyp-build "~4.1.0"
+
+levelup@^4.3.2:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/levelup/-/levelup-4.4.0.tgz#f89da3a228c38deb49c48f88a70fb71f01cafed6"
+  integrity sha512-94++VFO3qN95cM/d6eBXvd894oJE0w3cInq9USsyQzzoJxmiYzPAocNcuGCPGGjoXqDVJcr3C1jzt1TSjyaiLQ==
+  dependencies:
+    deferred-leveldown "~5.3.0"
+    level-errors "~2.0.0"
+    level-iterator-stream "~4.0.0"
+    level-supports "~1.0.0"
+    xtend "~4.0.0"
+
 leven@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/leven/-/leven-3.1.0.tgz#77891de834064cccba82ae7842bb6b14a13ed7f2"
@@ -9573,6 +9762,13 @@ levn@^0.4.1:
     prelude-ls "^1.2.1"
     type-check "~0.4.0"
 
+lib0@^0.2.31, lib0@^0.2.35, lib0@^0.2.42, lib0@^0.2.43, lib0@^0.2.49, lib0@^0.2.52:
+  version "0.2.52"
+  resolved "https://registry.yarnpkg.com/lib0/-/lib0-0.2.52.tgz#f07c975673ab3273e676712860d941f996e5fe79"
+  integrity sha512-CjxlM7UgICfN6b2OPALBXchIBiNk6jE+1g7JP8ha+dh1xKRDSYpH0WQl1+rMqCju49xUnwPG34v4CR5/rPOZhg==
+  dependencies:
+    isomorphic.js "^0.2.4"
+
 license-webpack-plugin@4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/license-webpack-plugin/-/license-webpack-plugin-4.0.2.tgz#1e18442ed20b754b82f1adeff42249b81d11aec6"
@@ -9659,11 +9855,21 @@ lodash.camelcase@^4.3.0:
   resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
   integrity sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==
 
+lodash.clonedeep@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
+  integrity sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==
+
 lodash.debounce@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
   integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==
 
+lodash.isequal@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
+  integrity sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==
+
 lodash.memoize@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
@@ -9765,6 +9971,11 @@ lru-cache@^7.7.1:
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-7.14.0.tgz#21be64954a4680e303a09e9468f880b98a0b3c7f"
   integrity sha512-EIRtP1GrSJny0dqb50QXRUNBxHJhcpxHC++M5tD7RYbvLLn5KVWKsbyswSSqDuU15UFi3bgTQIY8nhDMeF6aDQ==
 
+ltgt@^2.1.2:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/ltgt/-/ltgt-2.2.1.tgz#f35ca91c493f7b73da0e07495304f17b31f87ee5"
+  integrity sha512-AI2r85+4MquTw9ZYqabu4nMwy9Oftlfa/e/52t9IjtfG+mGBbTNdAoZ3RQKLHR6r0wQnwZnPIEh/Ya6XTWAKNA==
+
 magic-string@0.25.2:
   version "0.25.2"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.2.tgz#139c3a729515ec55e96e69e82a11fe890a293ad9"
@@ -10160,10 +10371,10 @@ moment-timezone@^0.5.33:
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.4.tgz#3dbe052889fe7c1b2ed966fcb3a77328964ef108"
   integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==
 
-monaco-editor@~0.32.1:
-  version "0.32.1"
-  resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.32.1.tgz#75a9bba379a923fd8e9ce99cddcab3a4e7657615"
-  integrity sha512-LUt2wsUvQmEi2tfTOK+tjAPvt7eQ+K5C4rZPr6SeuyzjAuAHrIvlUloTcOiGjZW3fn3a/jFQCONrEJbNOaCqbA==
+monaco-editor@^0.34.0:
+  version "0.34.0"
+  resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.34.0.tgz#b1749870a1f795dbfc4dc03d8e9b646ddcbeefa7"
+  integrity sha512-VF+S5zG8wxfinLKLrWcl4WUizMx+LeJrG4PM/M78OhcwocpV0jiyhX/pG6Q9jIOhrb/ckYi6nHnaR5OojlOZCQ==
 
 mrmime@^1.0.0:
   version "1.0.1"
@@ -10226,6 +10437,11 @@ nanoid@^3.1.30, nanoid@^3.3.4:
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
   integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==
 
+napi-macros@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/napi-macros/-/napi-macros-2.0.0.tgz#2b6bae421e7b96eb687aa6c77a7858640670001b"
+  integrity sha512-A0xLykHtARfueITVDernsAWdtIMbOJgKgcluwENp3AlsKN/PloyO10HtmoqnFAQAcxPkgZN7wdfPfEd0zNGxbg==
+
 natural-compare@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
@@ -10354,6 +10570,11 @@ node-gyp-build@^4.2.2, node-gyp-build@^4.3.0:
   resolved "https://registry.yarnpkg.com/node-gyp-build/-/node-gyp-build-4.5.0.tgz#7a64eefa0b21112f89f58379da128ac177f20e40"
   integrity sha512-2iGbaQBV+ITgCz76ZEjmhUKAKVf7xfY1sRl4UiKQspfZMH2h06SyhNsnSVy50cwkFQDGLyif6m/6uFXHkOZ6rg==
 
+node-gyp-build@~4.1.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/node-gyp-build/-/node-gyp-build-4.1.1.tgz#d7270b5d86717068d114cc57fff352f96d745feb"
+  integrity sha512-dSq1xmcPDKPZ2EED2S6zw/b9NKsqzXRE6dVr8TVQnI3FJOTteUMuqF3Qqs6LZg+mLGYJWqQzMbIjMtJqTv87nQ==
+
 node-gyp@^8.2.0:
   version "8.4.1"
   resolved "https://registry.yarnpkg.com/node-gyp/-/node-gyp-8.4.1.tgz#3d49308fc31f768180957d6b5746845fbd429937"
@@ -10779,6 +11000,11 @@ pako@^1.0.3, pako@~1.0.2:
   resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"
   integrity sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==
 
+parchment@^1.1.2, parchment@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/parchment/-/parchment-1.1.4.tgz#aeded7ab938fe921d4c34bc339ce1168bc2ffde5"
+  integrity sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg==
+
 parent-module@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"
@@ -11512,6 +11738,41 @@ quickselect@^2.0.0:
   resolved "https://registry.yarnpkg.com/quickselect/-/quickselect-2.0.0.tgz#f19680a486a5eefb581303e023e98faaf25dd018"
   integrity sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw==
 
+quill-cursors@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/quill-cursors/-/quill-cursors-3.1.2.tgz#e6be37fa33330dce05fb32ec4b0d06c8e2c504c9"
+  integrity sha512-oyANfYhqYiRp7OIrX/BurBPb0bvcpqSiS042fGm+T9FNy9UR6MCBzXpCyG7RmnK6OrV2idsdxMbogJ1XSktN5Q==
+
+quill-delta@^3.6.2:
+  version "3.6.3"
+  resolved "https://registry.yarnpkg.com/quill-delta/-/quill-delta-3.6.3.tgz#b19fd2b89412301c60e1ff213d8d860eac0f1032"
+  integrity sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg==
+  dependencies:
+    deep-equal "^1.0.1"
+    extend "^3.0.2"
+    fast-diff "1.1.2"
+
+quill-delta@^4.0.1:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/quill-delta/-/quill-delta-4.2.2.tgz#015397d046e0a3bed087cd8a51f98c11a1b8f351"
+  integrity sha512-qjbn82b/yJzOjstBgkhtBjN2TNK+ZHP/BgUQO+j6bRhWQQdmj2lH6hXG7+nwwLF41Xgn//7/83lxs9n2BkTtTg==
+  dependencies:
+    fast-diff "1.2.0"
+    lodash.clonedeep "^4.5.0"
+    lodash.isequal "^4.5.0"
+
+quill@^1.3.7:
+  version "1.3.7"
+  resolved "https://registry.yarnpkg.com/quill/-/quill-1.3.7.tgz#da5b2f3a2c470e932340cdbf3668c9f21f9286e8"
+  integrity sha512-hG/DVzh/TiknWtE6QmWAF/pxoZKYxfe3J/d/+ShUWkDvvkZQVTPeVmUJVu1uE6DDooC4fWTiCLh84ul89oNz5g==
+  dependencies:
+    clone "^2.1.1"
+    deep-equal "^1.0.1"
+    eventemitter3 "^2.0.3"
+    extend "^3.0.2"
+    parchment "^1.1.4"
+    quill-delta "^3.6.2"
+
 randombytes@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
@@ -11915,6 +12176,13 @@ rxjs@6.6.7, rxjs@^6.4.0, rxjs@^6.5.2, rxjs@^6.5.4:
   dependencies:
     tslib "^1.9.0"
 
+rxjs@^7.0.0:
+  version "7.5.7"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.5.7.tgz#2ec0d57fdc89ece220d2e702730ae8f1e49def39"
+  integrity sha512-z9MzKh/UcOqB3i20H6rtrlaE/CgjLOvheWK/9ILrbhROGTweAi1BaFsTT9FbwZi5Trr1qNRs+MXkhmR06awzQA==
+  dependencies:
+    tslib "^2.1.0"
+
 rxjs@^7.2.0, rxjs@^7.5.1, rxjs@~7.5.5:
   version "7.5.6"
   resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.5.6.tgz#0446577557862afd6903517ce7cae79ecb9662bc"
@@ -12182,6 +12450,11 @@ shebang-regex@^3.0.0:
   resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
   integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
 
+shell-quote@^1.7.3:
+  version "1.7.3"
+  resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.7.3.tgz#aa40edac170445b9a431e17bb62c0b881b9c4123"
+  integrity sha512-Vpfqwm4EnqGdlsBFNmHhxhElJYrdfcxPThu+ryKS5J8L/fhAwLazFZtq+S+TWZ9ANj2piSQLGj6NQg+lKPmxrw==
+
 side-channel@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.4.tgz#efce5c8fdc104ee751b25c58d4290011fa5ea2cf"
@@ -12375,6 +12648,11 @@ sourcemap-codec@1.4.8, sourcemap-codec@^1.4.4, sourcemap-codec@^1.4.8:
   resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
   integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
 
+spawn-command@^0.0.2-1:
+  version "0.0.2-1"
+  resolved "https://registry.yarnpkg.com/spawn-command/-/spawn-command-0.0.2-1.tgz#62f5e9466981c1b796dc5929937e11c9c6921bd0"
+  integrity sha512-n98l9E2RMSJ9ON1AKisHzz7V42VDiBQGY6PB1BwRglz99wpVsSuGzQ+jOi6lFXBGVTCrRpltvjm+/XA+tpeJrg==
+
 spdx-exceptions@^2.1.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz#3f28ce1a77a00372683eade4a433183527a2163d"
@@ -12649,7 +12927,7 @@ supports-color@^7.0.0, supports-color@^7.1.0:
   dependencies:
     has-flag "^4.0.0"
 
-supports-color@^8.0.0, supports-color@^8.1.1:
+supports-color@^8.0.0, supports-color@^8.1.0, supports-color@^8.1.1:
   version "8.1.1"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-8.1.1.tgz#cd6fc17e28500cff56c1b86c0a7fd4a54a73005c"
   integrity sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==
@@ -12913,7 +13191,7 @@ tr46@^2.1.0:
   dependencies:
     punycode "^2.1.1"
 
-tree-kill@1.2.2:
+tree-kill@1.2.2, tree-kill@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/tree-kill/-/tree-kill-1.2.2.tgz#4ca09a9092c88b73a7cdc5e8a01b507b0790a0cc"
   integrity sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==
@@ -13625,6 +13903,13 @@ write@1.0.3:
   dependencies:
     mkdirp "^0.5.1"
 
+ws@^6.2.1:
+  version "6.2.2"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-6.2.2.tgz#dd5cdbd57a9979916097652d78f1cc5faea0c32e"
+  integrity sha512-zmhltoSR8u1cnDsD43TX59mzoMZsLKqUweyYBAIvTngR3shc0W6aOZylZmq/7hqyVxPdi+5Ud2QInblgyE72fw==
+  dependencies:
+    async-limiter "~1.0.0"
+
 ws@^7.3.1, ws@^7.4.6:
   version "7.5.9"
   resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.9.tgz#54fa7db29f4c7cec68b1ddd3a89de099942bb591"
@@ -13663,6 +13948,60 @@ xmlchars@^2.2.0:
   resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb"
   integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==
 
+xtend@^4.0.2, xtend@~4.0.0:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
+  integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
+
+y-indexeddb@^9.0.7:
+  version "9.0.9"
+  resolved "https://registry.yarnpkg.com/y-indexeddb/-/y-indexeddb-9.0.9.tgz#fd360f6b62ce1b2d4127671fe73b4feb08de70b2"
+  integrity sha512-GcJbiJa2eD5hankj46Hea9z4hbDnDjvh1fT62E5SpZRsv8GcEemw34l1hwI2eknGcv5Ih9JfusT37JLx9q3LFg==
+  dependencies:
+    lib0 "^0.2.35"
+
+y-leveldb@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/y-leveldb/-/y-leveldb-0.1.1.tgz#c2c35bc2b12a6c195b807a127c56c7c5a50cc610"
+  integrity sha512-L8Q0MQmxCQ0qWIOuPzLbWn95TNhrCI7M6LaHnilU4I2IX08e4Dmfg5Tgy4JZ3tnl2aiuZyDOJplHl/msIB/IsA==
+  dependencies:
+    level "^6.0.1"
+    lib0 "^0.2.31"
+
+y-monaco@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/y-monaco/-/y-monaco-0.1.4.tgz#1dd9ff4d11f638d7d92b8055bbded4403ea6d2b8"
+  integrity sha512-RzAvjKJ2yt3VjlKK55U8STJyd1gz5/Qm6pjt7SAVb+k+g+KaSeTuSBGt+lURN+dzzSNs73ZkIAerW3JM0mzBSw==
+  dependencies:
+    lib0 "^0.2.43"
+
+y-protocols@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/y-protocols/-/y-protocols-1.0.5.tgz#91d574250060b29fcac8f8eb5e276fbad594245e"
+  integrity sha512-Wil92b7cGk712lRHDqS4T90IczF6RkcvCwAD0A2OPg+adKmOe+nOiT/N2hvpQIWS3zfjmtL4CPaH5sIW1Hkm/A==
+  dependencies:
+    lib0 "^0.2.42"
+
+y-quill@^0.1.5:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/y-quill/-/y-quill-0.1.5.tgz#533a302af96e809597727daf52c3a240e4e55144"
+  integrity sha512-bNFkc69yZxe6xrkhiPoHx2RvwR5KdKxpO9UYZVsn9NCv6eXHIYQVTrkSu6rtZ9gNw8ZEBnCVJAl4jpj0+L+IcA==
+  dependencies:
+    lib0 "^0.2.42"
+    y-protocols "^1.0.5"
+
+y-websocket@^1.4.0:
+  version "1.4.5"
+  resolved "https://registry.yarnpkg.com/y-websocket/-/y-websocket-1.4.5.tgz#8da81b466997bcc4660059f542d0a6ce62581478"
+  integrity sha512-5d9LTSy0GQKqSd/FKRo5DMBlsiTlCipbKcIgPLlno+5xHtfT8bm3uQdcbY9JvLfckojilLZWauXJu0vzDZX05w==
+  dependencies:
+    lib0 "^0.2.52"
+    lodash.debounce "^4.0.8"
+    y-protocols "^1.0.5"
+  optionalDependencies:
+    ws "^6.2.1"
+    y-leveldb "^0.1.0"
+
 y18n@^4.0.0:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.3.tgz#b5f259c82cd6e336921efd7bfd8bf560de9eeedf"
@@ -13778,6 +14117,19 @@ yargs@^17.0.0, yargs@^17.2.1, yargs@^17.4.0:
     y18n "^5.0.5"
     yargs-parser "^21.0.0"
 
+yargs@^17.3.1:
+  version "17.6.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-17.6.0.tgz#e134900fc1f218bc230192bdec06a0a5f973e46c"
+  integrity sha512-8H/wTDqlSwoSnScvV2N/JHfLWOKuh5MVla9hqLjK3nsfyy6Y4kDSYSvkU5YCUEPOSnRXfIyx3Sq+B/IWudTo4g==
+  dependencies:
+    cliui "^8.0.1"
+    escalade "^3.1.1"
+    get-caller-file "^2.0.5"
+    require-directory "^2.1.1"
+    string-width "^4.2.3"
+    y18n "^5.0.5"
+    yargs-parser "^21.0.0"
+
 yauzl@^2.10.0:
   version "2.10.0"
   resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.10.0.tgz#c7eb17c93e112cb1086fa6d8e51fb0667b79a5f9"
@@ -13786,6 +14138,13 @@ yauzl@^2.10.0:
     buffer-crc32 "~0.2.3"
     fd-slicer "~1.1.0"
 
+yjs@^13.5.34:
+  version "13.5.41"
+  resolved "https://registry.yarnpkg.com/yjs/-/yjs-13.5.41.tgz#105041cd56bdef154704441c381d80723e072bbe"
+  integrity sha512-4eSTrrs8OeI0heXKKioRY4ag7V5Bk85Z4MeniUyown3o3y0G7G4JpAZWrZWfTp7pzw2b53GkAQWKqHsHi9j9JA==
+  dependencies:
+    lib0 "^0.2.49"
+
 yn@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/yn/-/yn-2.0.0.tgz#e5adabc8acf408f6385fc76495684c88e6af689a"
diff --git a/core/scripts/deploy-daemon.sh b/core/scripts/deploy-daemon.sh
index 07d9b02707f..63970c9b7e4 100755
--- a/core/scripts/deploy-daemon.sh
+++ b/core/scripts/deploy-daemon.sh
@@ -38,3 +38,8 @@ echo "${green}Starting TexeraRunWorker in daemon...${reset}"
 setsid nohup ./scripts/worker.sh >/dev/null 2>&1 &
 sleep 0.2 # wait for 200ms to get the pid
 echo "${green}TexeraRunWorker launched at $(pgrep -f TexeraRunWorker)${reset}"
+
+echo "${green}Starting shared editing server...${reset}"
+setsid nohup npx y-websocket >/dev/null 2>&1 &
+sleep 2
+echo "${green}y-websocket-server launched at $(pgrep -f y-websocket-server)${reset}"
diff --git a/core/scripts/terminate-daemon.sh b/core/scripts/terminate-daemon.sh
index 530a52c9bef..726f5200bad 100755
--- a/core/scripts/terminate-daemon.sh
+++ b/core/scripts/terminate-daemon.sh
@@ -2,6 +2,10 @@ red=`tput setaf 1`
 green=`tput setaf 2`
 reset=`tput sgr0`
 
+echo "${red}Terminating y-websocket-server at $(pgrep -f y-websocket-server)...${reset}"
+kill -9 $(pgrep -f y-websocket-server)
+echo "${green}Terminated.${reset}"
+
 echo "${red}Terminating TexeraWebApplication at $(pgrep -f TexeraWebApplication)...${reset}"
 kill -9 $(pgrep -f TexeraWebApplication)
 echo "${green}Terminated.${reset}"