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

server/commands/commentCreator.test.ts

@@ -0,0 +1,31 @@
+import { Event } from "@server/models";
+import { buildDocument, buildUser } from "@server/test/factories";
+import { setupTestDatabase } from "@server/test/support";
+import commentCreator from "./commentCreator";
+
+setupTestDatabase();
+
+describe("commentCreator", () => {
+  const ip = "127.0.0.1";
+
+  it("should create comment", async () => {
+    const user = await buildUser();
+    const document = await buildDocument({
+      userId: user.id,
+      teamId: user.teamId,
+    });
+
+    const comment = await commentCreator({
+      documentId: document.id,
+      data: { text: "test" },
+      user,
+      ip,
+    });
+
+    const event = await Event.findOne();
+    expect(comment.documentId).toEqual(document.id);
+    expect(comment.createdById).toEqual(user.id);
+    expect(event!.name).toEqual("comments.create");
+    expect(event!.modelId).toEqual(comment.id);
+  });
+});

server/commands/commentCreator.ts

@@ -0,0 +1,62 @@
+import { Transaction } from "sequelize";
+import { Comment, User, Event } from "@server/models";
+
+type Props = {
+  id?: string;
+  /** The user creating the comment */
+  user: User;
+  /** The comment as data in Prosemirror schema format */
+  data: Record<string, any>;
+  /** The document to comment within */
+  documentId: string;
+  /** The parent comment we're replying to, if any */
+  parentCommentId?: string;
+  /** The IP address of the user creating the comment */
+  ip: string;
+  transaction?: Transaction;
+};
+
+/**
+ * This command creates a comment inside a document.
+ *
+ * @param Props The properties of the comment to create
+ * @returns Comment The comment that was created
+ */
+export default async function commentCreator({
+  id,
+  user,
+  data,
+  documentId,
+  parentCommentId,
+  ip,
+  transaction,
+}: Props): Promise<Comment> {
+  // TODO: Parse data to validate
+
+  const comment = await Comment.create(
+    {
+      id,
+      createdById: user.id,
+      documentId,
+      parentCommentId,
+      data,
+    },
+    { transaction }
+  );
+
+  comment.createdBy = user;
+
+  await Event.create(
+    {
+      name: "comments.create",
+      modelId: comment.id,
+      teamId: user.teamId,
+      actorId: user.id,
+      documentId,
+      ip,
+    },
+    { transaction }
+  );
+
+  return comment;
+}

server/commands/commentDestroyer.test.ts

@@ -0,0 +1,38 @@
+import { Comment, Event } from "@server/models";
+import { buildDocument, buildUser } from "@server/test/factories";
+import { setupTestDatabase } from "@server/test/support";
+import commentDestroyer from "./commentDestroyer";
+
+setupTestDatabase();
+
+describe("commentDestroyer", () => {
+  const ip = "127.0.0.1";
+
+  it("should destroy existing comment", async () => {
+    const user = await buildUser();
+    const document = await buildDocument({
+      userId: user.id,
+      teamId: user.teamId,
+    });
+
+    const comment = await Comment.create({
+      teamId: document.teamId,
+      documentId: document.id,
+      data: { text: "test" },
+      createdById: user.id,
+    });
+
+    await commentDestroyer({
+      comment,
+      user,
+      ip,
+    });
+
+    const count = await Comment.count();
+    expect(count).toEqual(0);
+
+    const event = await Event.findOne();
+    expect(event!.name).toEqual("comments.delete");
+    expect(event!.modelId).toEqual(comment.id);
+  });
+});

server/commands/commentDestroyer.ts

@@ -0,0 +1,50 @@
+import { Transaction } from "sequelize";
+import { Event, Comment, User } from "@server/models";
+
+type Props = {
+  /** The user destroying the comment */
+  user: User;
+  /** The comment to destroy */
+  comment: Comment;
+  /** The IP address of the user */
+  ip: string;
+  transaction?: Transaction;
+};
+
+/**
+ * This command destroys a document comment. This just removes the comment itself and
+ * does not touch the document
+ *
+ * @param Props The properties of the comment to destroy
+ * @returns void
+ */
+export default async function commentDestroyer({
+  user,
+  comment,
+  ip,
+  transaction,
+}: Props): Promise<Comment> {
+  await comment.destroy({ transaction });
+
+  // Also destroy any child comments
+  const childComments = await Comment.findAll({
+    where: { parentCommentId: comment.id },
+    transaction,
+  });
+  await Promise.all(
+    childComments.map((childComment) => childComment.destroy({ transaction }))
+  );
+
+  await Event.create(
+    {
+      name: "comments.delete",
+      modelId: comment.id,
+      teamId: user.teamId,
+      actorId: user.id,
+      documentId: comment.documentId,
+      ip,
+    },
+    { transaction }
+  );
+  return comment;
+}

server/commands/commentUpdater.ts

@@ -0,0 +1,54 @@
+import { Transaction } from "sequelize";
+import { Event, Comment, User } from "@server/models";
+
+type Props = {
+  /** The user updating the comment */
+  user: User;
+  /** The user resolving the comment */
+  resolvedBy?: User;
+  /** The existing comment */
+  comment: Comment;
+  /** The index to comment the document at */
+  data: Record<string, any>;
+  /** The IP address of the user creating the comment */
+  ip: string;
+  transaction: Transaction;
+};
+
+/**
+ * This command updates a comment.
+ *
+ * @param Props The properties of the comment to update
+ * @returns Comment The updated comment
+ */
+export default async function commentUpdater({
+  user,
+  comment,
+  data,
+  resolvedBy,
+  ip,
+  transaction,
+}: Props): Promise<Comment> {
+  if (resolvedBy !== undefined) {
+    comment.resolvedBy = resolvedBy;
+  }
+  if (data !== undefined) {
+    comment.data = data;
+  }
+
+  await comment.save({ transaction });
+
+  await Event.create(
+    {
+      name: "comments.update",
+      modelId: comment.id,
+      teamId: user.teamId,
+      actorId: user.id,
+      documentId: comment.documentId,
+      ip,
+    },
+    { transaction }
+  );
+
+  return comment;
+}

server/editor/index.ts

@@ -1,8 +1,8 @@
 import { Schema } from "prosemirror-model";
 import ExtensionManager from "@shared/editor/lib/ExtensionManager";
-import fullPackage from "@shared/editor/packages/full";
+import extensionsPackage from "@shared/editor/packages/fullWithComments";
 
-const extensions = new ExtensionManager(fullPackage);
+const extensions = new ExtensionManager(extensionsPackage);
 
 export const schema = new Schema({
   nodes: extensions.nodes,

server/migrations/20220305195830-create-comments.js

@@ -0,0 +1,70 @@
+"use strict";
+
+module.exports = {
+  up: async (queryInterface, Sequelize) => {
+    await queryInterface.createTable("comments", {
+      id: {
+        type: Sequelize.UUID,
+        allowNull: false,
+        primaryKey: true
+      },
+      data: {
+        type: Sequelize.JSONB,
+        allowNull: false
+      },
+      documentId: {
+        type: Sequelize.UUID,
+        allowNull: false,
+        onDelete: "cascade",
+        references: {
+          model: "documents"
+        }
+      },
+      parentCommentId: {
+        type: Sequelize.UUID,
+        allowNull: true,
+        onDelete: "cascade",
+        references: {
+          model: "comments"
+        }
+      },
+      createdById: {
+        type: Sequelize.UUID,
+        allowNull: false,
+        references: {
+          model: "users"
+        }
+      },
+      resolvedAt: {
+        type: Sequelize.DATE,
+        allowNull: true
+      },
+      resolvedById: {
+        type: Sequelize.UUID,
+        allowNull: true,
+        references: {
+          model: "users"
+        }
+      },
+      createdAt: {
+        type: Sequelize.DATE,
+        allowNull: false
+      },
+      updatedAt: {
+        type: Sequelize.DATE,
+        allowNull: false
+      },
+      deletedAt: {
+        type: Sequelize.DATE,
+        allowNull: true
+      }
+    });
+
+    await queryInterface.addIndex("comments", ["documentId"]);
+    await queryInterface.addIndex("comments", ["createdAt"]);
+  },
+
+  down: async (queryInterface, Sequelize) => {
+    queryInterface.dropTable("comments");
+  }
+};

server/models/Comment.ts

@@ -0,0 +1,72 @@
+import {
+  DataType,
+  BelongsTo,
+  ForeignKey,
+  Column,
+  Table,
+  Scopes,
+  DefaultScope,
+} from "sequelize-typescript";
+import Document from "./Document";
+import User from "./User";
+import ParanoidModel from "./base/ParanoidModel";
+import Fix from "./decorators/Fix";
+
+@DefaultScope(() => ({
+  include: [
+    {
+      model: User,
+      as: "createdBy",
+      paranoid: false,
+    },
+  ],
+}))
+@Scopes(() => ({
+  withDocument: {
+    include: [
+      {
+        model: Document,
+        as: "document",
+        required: true,
+      },
+    ],
+  },
+}))
+@Table({ tableName: "comments", modelName: "comment" })
+@Fix
+class Comment extends ParanoidModel {
+  @Column(DataType.JSONB)
+  data: Record<string, any>;
+
+  // associations
+
+  @BelongsTo(() => User, "createdById")
+  createdBy: User;
+
+  @ForeignKey(() => User)
+  @Column(DataType.UUID)
+  createdById: string;
+
+  @BelongsTo(() => User, "resolvedById")
+  resolvedBy: User;
+
+  @ForeignKey(() => User)
+  @Column(DataType.UUID)
+  resolvedById: string;
+
+  @BelongsTo(() => Document, "documentId")
+  document: Document;
+
+  @ForeignKey(() => Document)
+  @Column(DataType.UUID)
+  documentId: string;
+
+  @BelongsTo(() => Comment, "parentCommentId")
+  parentComment: Comment;
+
+  @ForeignKey(() => Comment)
+  @Column(DataType.UUID)
+  parentCommentId: string;
+}
+
+export default Comment;

server/models/index.ts

@@ -12,6 +12,8 @@ export { default as CollectionGroup } from "./CollectionGroup";
 
 export { default as CollectionUser } from "./CollectionUser";
 
+export { default as Comment } from "./Comment";
+
 export { default as Document } from "./Document";
 
 export { default as Event } from "./Event";

server/policies/comment.ts

@@ -0,0 +1,19 @@
+import { Comment, User, Team } from "@server/models";
+import { allow } from "./cancan";
+
+allow(User, "createComment", Team, (user, team) => {
+  if (!team || user.isViewer || user.teamId !== team.id) {
+    return false;
+  }
+  return true;
+});
+
+allow(User, ["read", "update", "delete"], Comment, (user, comment) => {
+  if (!comment) {
+    return false;
+  }
+  if (user.isViewer) {
+    return false;
+  }
+  return user?.id === comment.createdById;
+});

server/policies/index.ts

@@ -4,6 +4,7 @@ import {
   Team,
   User,
   Collection,
+  Comment,
   Document,
   Group,
 } from "@server/models";
@@ -12,6 +13,7 @@ import "./apiKey";
 import "./attachment";
 import "./authenticationProvider";
 import "./collection";
+import "./comment";
 import "./document";
 import "./fileOperation";
 import "./integration";
@@ -47,9 +49,10 @@ export function serialize(
   model: User,
   target:
     | Attachment
+    | Collection
+    | Comment
     | FileOperation
     | Team
-    | Collection
     | Document
     | User
     | Group

server/presenters/comment.ts

@@ -0,0 +1,15 @@
+import { Comment } from "@server/models";
+import presentUser from "./user";
+
+export default function present(comment: Comment) {
+  return {
+    id: comment.id,
+    data: comment.data,
+    documentId: comment.documentId,
+    parentCommentId: comment.parentCommentId,
+    createdBy: presentUser(comment.createdBy),
+    createdById: comment.createdById,
+    createdAt: comment.createdAt,
+    updatedAt: comment.updatedAt,
+  };
+}

server/presenters/index.ts

@@ -4,6 +4,7 @@ import presentAuthenticationProvider from "./authenticationProvider";
 import presentAvailableTeam from "./availableTeam";
 import presentCollection from "./collection";
 import presentCollectionGroupMembership from "./collectionGroupMembership";
+import presentComment from "./comment";
 import presentDocument from "./document";
 import presentEvent from "./event";
 import presentFileOperation from "./fileOperation";
@@ -32,6 +33,7 @@ export {
   presentAvailableTeam,
   presentCollection,
   presentCollectionGroupMembership,
+  presentComment,
   presentDocument,
   presentEvent,
   presentFileOperation,

server/queues/processors/WebsocketsProcessor.ts

@@ -2,6 +2,7 @@ import { subHours } from "date-fns";
 import { Op } from "sequelize";
 import { Server } from "socket.io";
 import {
+  Comment,
   Document,
   Collection,
   FileOperation,
@@ -14,6 +15,7 @@ import {
   Subscription,
 } from "@server/models";
 import {
+  presentComment,
   presentCollection,
   presentDocument,
   presentFileOperation,
@@ -355,6 +357,35 @@ export default class WebsocketsProcessor {
           });
       }
 
+      case "comments.create":
+      case "comments.update": {
+        const comment = await Comment.scope([
+          "defaultScope",
+          "withDocument",
+        ]).findByPk(event.modelId);
+        if (!comment) {
+          return;
+        }
+        return socketio
+          .to(`collection-${comment.document.collectionId}`)
+          .emit(event.name, presentComment(comment));
+      }
+
+      case "comments.delete": {
+        const comment = await Comment.scope([
+          "defaultScope",
+          "withDocument",
+        ]).findByPk(event.modelId);
+        if (!comment) {
+          return;
+        }
+        return socketio
+          .to(`collection-${comment.document.collectionId}`)
+          .emit(event.name, {
+            modelId: event.modelId,
+          });
+      }
+
       case "stars.create":
       case "stars.update": {
         const star = await Star.findByPk(event.modelId);

server/routes/api/comments/comments.ts

@@ -0,0 +1,144 @@
+import Router from "koa-router";
+import { Transaction } from "sequelize";
+import commentCreator from "@server/commands/commentCreator";
+import commentDestroyer from "@server/commands/commentDestroyer";
+import commentUpdater from "@server/commands/commentUpdater";
+import auth from "@server/middlewares/authentication";
+import { transaction } from "@server/middlewares/transaction";
+import validate from "@server/middlewares/validate";
+import { Document, Comment } from "@server/models";
+import { authorize } from "@server/policies";
+import { presentComment, presentPolicies } from "@server/presenters";
+import { APIContext } from "@server/types";
+import pagination from "../middlewares/pagination";
+import * as T from "./schema";
+
+const router = new Router();
+
+router.post(
+  "comments.create",
+  auth(),
+  validate(T.CommentsCreateSchema),
+  transaction(),
+  async (ctx: APIContext<T.CommentsCreateReq>) => {
+    const { id, documentId, parentCommentId, data } = ctx.input.body;
+    const { user } = ctx.state.auth;
+    const { transaction } = ctx.state;
+
+    const document = await Document.findByPk(documentId, {
+      userId: user.id,
+      transaction,
+    });
+    authorize(user, "read", document);
+
+    const comment = await commentCreator({
+      id,
+      data,
+      parentCommentId,
+      documentId,
+      user,
+      ip: ctx.request.ip,
+      transaction,
+    });
+
+    ctx.body = {
+      data: presentComment(comment),
+      policies: presentPolicies(user, [comment]),
+    };
+  }
+);
+
+router.post(
+  "comments.list",
+  auth(),
+  pagination(),
+  validate(T.CollectionsListSchema),
+  async (ctx: APIContext<T.CollectionsListReq>) => {
+    const { sort, direction, documentId } = ctx.input.body;
+    const { user } = ctx.state.auth;
+
+    const document = await Document.findByPk(documentId, { userId: user.id });
+    authorize(user, "read", document);
+
+    const comments = await Comment.findAll({
+      where: { documentId },
+      order: [[sort, direction]],
+      offset: ctx.state.pagination.offset,
+      limit: ctx.state.pagination.limit,
+    });
+
+    ctx.body = {
+      pagination: ctx.state.pagination,
+      data: comments.map(presentComment),
+      policies: presentPolicies(user, comments),
+    };
+  }
+);
+
+router.post(
+  "comments.update",
+  auth(),
+  validate(T.CommentsUpdateSchema),
+  transaction(),
+  async (ctx: APIContext<T.CommentsUpdateReq>) => {
+    const { id, data } = ctx.input.body;
+    const { user } = ctx.state.auth;
+    const { transaction } = ctx.state;
+
+    const comment = await Comment.findByPk(id, {
+      transaction,
+      lock: {
+        level: transaction.LOCK.UPDATE,
+        of: Comment,
+      },
+    });
+    authorize(user, "update", comment);
+
+    await commentUpdater({
+      user,
+      comment,
+      data,
+      ip: ctx.request.ip,
+      transaction,
+    });
+
+    ctx.body = {
+      data: presentComment(comment),
+      policies: presentPolicies(user, [comment]),
+    };
+  }
+);
+
+router.post(
+  "comments.delete",
+  auth(),
+  validate(T.CommentsDeleteSchema),
+  transaction(),
+  async (ctx: APIContext<T.CommentsDeleteReq>) => {
+    const { id } = ctx.input.body;
+    const { user } = ctx.state.auth;
+    const { transaction } = ctx.state;
+
+    const comment = await Comment.unscoped().findByPk(id, {
+      transaction,
+      lock: Transaction.LOCK.UPDATE,
+    });
+    authorize(user, "delete", comment);
+
+    await commentDestroyer({
+      user,
+      comment,
+      ip: ctx.request.ip,
+      transaction,
+    });
+
+    ctx.body = {
+      success: true,
+    };
+  }
+);
+
+// router.post("comments.resolve", auth(), async (ctx) => {
+// router.post("comments.unresolve", auth(), async (ctx) => {
+
+export default router;

server/routes/api/comments/index.ts

@@ -0,0 +1 @@
+export { default } from "./comments";

server/routes/api/comments/schema.ts

@@ -0,0 +1,64 @@
+import { z } from "zod";
+import BaseSchema from "@server/routes/api/BaseSchema";
+
+const CollectionsSortParamsSchema = z.object({
+  /** Specifies the attributes by which documents will be sorted in the list */
+  sort: z
+    .string()
+    .refine((val) => ["createdAt", "updatedAt"].includes(val))
+    .default("createdAt"),
+
+  /** Specifies the sort order with respect to sort field */
+  direction: z
+    .string()
+    .optional()
+    .transform((val) => (val !== "ASC" ? "DESC" : val)),
+});
+
+export const CommentsCreateSchema = BaseSchema.extend({
+  body: z.object({
+    /** Allow creation with a specific ID */
+    id: z.string().uuid().optional(),
+
+    /** Create comment for this document */
+    documentId: z.string(),
+
+    /** Create comment under this parent */
+    parentCommentId: z.string().uuid().optional(),
+
+    /** Create comment with this data */
+    data: z.any(),
+  }),
+});
+
+export type CommentsCreateReq = z.infer<typeof CommentsCreateSchema>;
+
+export const CommentsUpdateSchema = BaseSchema.extend({
+  body: z.object({
+    /** Which comment to update */
+    id: z.string().uuid(),
+
+    /** Update comment with this data */
+    data: z.any(),
+  }),
+});
+
+export type CommentsUpdateReq = z.infer<typeof CommentsUpdateSchema>;
+
+export const CommentsDeleteSchema = BaseSchema.extend({
+  body: z.object({
+    /** Which comment to delete */
+    id: z.string().uuid(),
+  }),
+});
+
+export type CommentsDeleteReq = z.infer<typeof CommentsDeleteSchema>;
+
+export const CollectionsListSchema = BaseSchema.extend({
+  body: CollectionsSortParamsSchema.extend({
+    /** Id of a document to list comments for */
+    documentId: z.string(),
+  }),
+});
+
+export type CollectionsListReq = z.infer<typeof CollectionsListSchema>;

server/routes/api/index.ts

@@ -14,7 +14,8 @@ import attachments from "./attachments";
 import auth from "./auth";
 import authenticationProviders from "./authenticationProviders";
 import collections from "./collections";
-import utils from "./cron";
+import comments from "./comments/comments";
+import cron from "./cron";
 import developer from "./developer";
 import documents from "./documents";
 import events from "./events";
@@ -67,6 +68,7 @@ router.use("/", authenticationProviders.routes());
 router.use("/", events.routes());
 router.use("/", users.routes());
 router.use("/", collections.routes());
+router.use("/", comments.routes());
 router.use("/", documents.routes());
 router.use("/", pins.routes());
 router.use("/", revisions.routes());
@@ -80,7 +82,7 @@ router.use("/", teams.routes());
 router.use("/", integrations.routes());
 router.use("/", notificationSettings.routes());
 router.use("/", attachments.routes());
-router.use("/", utils.routes());
+router.use("/", cron.routes());
 router.use("/", groups.routes());
 router.use("/", fileOperationsRoute.routes());
 

server/routes/api/teams/schema.ts

@@ -40,6 +40,8 @@ export const TeamsUpdateSchema = BaseSchema.extend({
         publicBranding: z.boolean().optional(),
         /** Whether viewers should see download options. */
         viewersCanExport: z.boolean().optional(),
+        /** Whether commenting is enabled */
+        commenting: z.boolean().optional(),
         /** The custom theme for the team. */
         customTheme: z
           .object({

server/services/websockets.ts

@@ -284,6 +284,18 @@ async function authenticated(io: IO.Server, socket: SocketWithAuth) {
         documentId: event.documentId,
         isEditing: event.isEditing,
       });
+
+      socket.on("typing", async (event) => {
+        const room = `document-${event.documentId}`;
+
+        if (event.documentId && socket.rooms[room]) {
+          io.to(room).emit("user.typing", {
+            userId: user.id,
+            documentId: event.documentId,
+            commentId: event.commentId,
+          });
+        }
+      });
     }
   });
 }

server/types.ts

@@ -279,6 +279,13 @@ export type PinEvent = BaseEvent & {
   collectionId?: string;
 };
 
+export type CommentEvent = BaseEvent & {
+  name: "comments.create" | "comments.update" | "comments.delete";
+  modelId: string;
+  documentId: string;
+  actorId: string;
+};
+
 export type StarEvent = BaseEvent & {
   name: "stars.create" | "stars.update" | "stars.delete";
   modelId: string;
@@ -332,6 +339,7 @@ export type Event =
   | AuthenticationProviderEvent
   | DocumentEvent
   | PinEvent
+  | CommentEvent
   | StarEvent
   | CollectionEvent
   | FileOperationEvent