feat: Comments (#4911)

* Comment model

* Framework, model, policy, presenter, api endpoint etc

* Iteration, first pass of UI

* fixes, refactors

* Comment commands

* comment socket support

* typing indicators

* comment component, styling

* wip

* right sidebar resize

* fix: CMD+Enter submit

* Add usePersistedState
fix: Main page scrolling on comment highlight

* drafts

* Typing indicator

* refactor

* policies

* Click thread to highlight
Improve comment timestamps

* padding

* Comment menu v1

* Change comments to use editor

* Basic comment editing

* fix: Hide commenting button when disabled at team level

* Enable opening sidebar without mark

* Move selected comment to location state

* Add comment delete confirmation

* Add comment count to document meta

* fix: Comment sidebar togglable
Add copy link to comment

* stash

* Restore History changes

* Refactor right sidebar to allow for comment animation

* Update to new router best practices

* stash

* Various improvements

* stash

* Handle click outside

* Fix incorrect placeholder in input
fix: Input box appearing on other sessions erroneously

* stash

* fix: Don't leave orphaned child comments

* styling

* stash

* Enable comment toggling again

* Edit styling, merge conflicts

* fix: Cannot navigate from insights to comments

* Remove draft comment mark on click outside

* Fix: Empty comment sidebar, tsc

* Remove public toggle

* fix: All comments are recessed
fix: Comments should not be printed

* fix: Associated mark should be removed on comment delete

* Revert unused changes

* Empty state, basic RTL support

* Create dont toggle comment mark

* Make it feel more snappy

* Highlight active comment in text

* fix animation

* RTL support

* Add reply CTA

* Translations

app/models/BaseModel.ts

@@ -1,5 +1,5 @@
 import { pick } from "lodash";
-import { set, computed, observable } from "mobx";
+import { set, observable } from "mobx";
 import { getFieldsForModel } from "./decorators/Field";
 
 export default abstract class BaseModel {
@@ -9,6 +9,9 @@ export default abstract class BaseModel {
   @observable
   isSaving: boolean;
 
+  @observable
+  isNew: boolean;
+
   createdAt: string;
 
   updatedAt: string;
@@ -17,6 +20,7 @@ export default abstract class BaseModel {
 
   constructor(fields: Record<string, any>, store: any) {
     this.updateFromJson(fields);
+    this.isNew = !this.id;
     this.store = store;
   }
 
@@ -32,10 +36,19 @@ export default abstract class BaseModel {
         params = this.toAPI();
       }
 
-      const model = await this.store.save({ ...params, id: this.id }, options);
+      const model = await this.store.save(
+        {
+          ...params,
+          id: this.id,
+        },
+        {
+          ...options,
+          isNew: this.isNew,
+        }
+      );
 
       // if saving is successful set the new values on the model itself
-      set(this, { ...params, ...model });
+      set(this, { ...params, ...model, isNew: false });
 
       this.persistedAttributes = this.toAPI();
 
@@ -46,7 +59,8 @@ export default abstract class BaseModel {
   };
 
   updateFromJson = (data: any) => {
-    set(this, data);
+    //const isNew = !data.id && !this.id && this.isNew;
+    set(this, { ...data, isNew: false });
     this.persistedAttributes = this.toAPI();
   };
 
@@ -94,7 +108,9 @@ export default abstract class BaseModel {
       if (
         // eslint-disable-next-line no-prototype-builtins
         this.hasOwnProperty(property) &&
-        !["persistedAttributes", "store", "isSaving"].includes(property)
+        !["persistedAttributes", "store", "isSaving", "isNew"].includes(
+          property
+        )
       ) {
         output[property] = this[property];
       }
@@ -121,15 +137,5 @@ export default abstract class BaseModel {
     );
   }
 
-  /**
-   * Returns a boolean indicating whether the model has been persisted to db
-   *
-   * @returns boolean true if the model has never been persisted
-   */
-  @computed
-  get isNew(): boolean {
-    return !this.id;
-  }
-
   protected persistedAttributes: Partial<BaseModel> = {};
 }

app/models/Comment.ts

@@ -0,0 +1,66 @@
+import { subSeconds } from "date-fns";
+import { computed, observable } from "mobx";
+import { now } from "mobx-utils";
+import User from "~/models/User";
+import BaseModel from "./BaseModel";
+import Field from "./decorators/Field";
+
+class Comment extends BaseModel {
+  /**
+   * Map to keep track of which users are currently typing a reply in this
+   * comments thread.
+   */
+  @observable
+  typingUsers: Map<string, Date> = new Map();
+
+  @Field
+  @observable
+  id: string;
+
+  /**
+   * The Prosemirror data representing the comment content
+   */
+  @Field
+  @observable
+  data: Record<string, any>;
+
+  /**
+   * If this comment is a reply then the parent comment will be set, otherwise
+   * it is a top thread.
+   */
+  @Field
+  @observable
+  parentCommentId: string;
+
+  /**
+   * The document to which this comment belongs.
+   */
+  @Field
+  @observable
+  documentId: string;
+
+  createdAt: string;
+
+  createdBy: User;
+
+  createdById: string;
+
+  resolvedAt: string;
+
+  resolvedBy: User;
+
+  updatedAt: string;
+
+  /**
+   * An array of users that are currently typing a reply in this comments thread.
+   */
+  @computed
+  get currentlyTypingUsers(): User[] {
+    return Array.from(this.typingUsers.entries())
+      .filter(([, lastReceivedDate]) => lastReceivedDate > subSeconds(now(), 3))
+      .map(([userId]) => this.store.rootStore.users.get(userId))
+      .filter(Boolean);
+  }
+}
+
+export default Comment;

app/models/Team.ts

@@ -29,6 +29,10 @@ class Team extends BaseModel {
   @observable
   collaborativeEditing: boolean;
 
+  @Field
+  @observable
+  commenting: boolean;
+
   @Field
   @observable
   documentEmbeds: boolean;