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/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({