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
2023-02-25 15:03:05 -05:00
parent 59e25a0ef0
commit fc8c20149f
89 changed files with 2909 additions and 315 deletions
--- a/app/menus/CommentMenu.tsx
+++ b/app/menus/CommentMenu.tsx
@@ -0,0 +1,82 @@
+import copy from "copy-to-clipboard";
+import { observer } from "mobx-react";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { useMenuState } from "reakit/Menu";
+import Comment from "~/models/Comment";
+import CommentDeleteDialog from "~/components/CommentDeleteDialog";
+import ContextMenu from "~/components/ContextMenu";
+import MenuItem from "~/components/ContextMenu/MenuItem";
+import OverflowMenuButton from "~/components/ContextMenu/OverflowMenuButton";
+import Separator from "~/components/ContextMenu/Separator";
+import usePolicy from "~/hooks/usePolicy";
+import useStores from "~/hooks/useStores";
+import useToasts from "~/hooks/useToasts";
+import { commentPath, urlify } from "~/utils/routeHelpers";
+
+type Props = {
+  /** The comment to associate with the menu */
+  comment: Comment;
+  /** CSS class name */
+  className?: string;
+  /** Callback when the "Edit" is selected in the menu */
+  onEdit: () => void;
+  /** Callback when the comment has been deleted */
+  onDelete: () => void;
+};
+
+function CommentMenu({ comment, onEdit, onDelete, className }: Props) {
+  const menu = useMenuState({
+    modal: true,
+  });
+  const { showToast } = useToasts();
+  const { documents, dialogs } = useStores();
+  const { t } = useTranslation();
+  const can = usePolicy(comment.id);
+  const document = documents.get(comment.documentId);
+
+  const handleDelete = React.useCallback(() => {
+    dialogs.openModal({
+      title: t("Delete comment"),
+      isCentered: true,
+      content: <CommentDeleteDialog comment={comment} onSubmit={onDelete} />,
+    });
+  }, [dialogs, comment, onDelete, t]);
+
+  const handleCopyLink = React.useCallback(() => {
+    if (document) {
+      copy(urlify(commentPath(document, comment)));
+      showToast(t("Link copied"));
+    }
+  }, [t, document, comment, showToast]);
+
+  return (
+    <>
+      <OverflowMenuButton
+        aria-label={t("Show menu")}
+        className={className}
+        {...menu}
+      />
+      <ContextMenu {...menu} aria-label={t("Comment options")}>
+        {can.update && (
+          <MenuItem {...menu} onClick={onEdit}>
+            {t("Edit")}
+          </MenuItem>
+        )}
+        <MenuItem {...menu} onClick={handleCopyLink}>
+          {t("Copy link")}
+        </MenuItem>
+        {can.delete && (
+          <>
+            <Separator />
+            <MenuItem {...menu} onClick={handleDelete} dangerous>
+              {t("Delete")}
+            </MenuItem>
+          </>
+        )}
+      </ContextMenu>
+    </>
+  );
+}
+
+export default observer(CommentMenu);