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/hooks/useDictionary.ts

@@ -19,6 +19,7 @@ export default function useDictionary() {
       codeBlock: t("Code block"),
       codeCopied: t("Copied to clipboard"),
       codeInline: t("Code"),
+      comment: t("Comment"),
       copy: t("Copy"),
       createLink: t("Create link"),
       createLinkError: t("Sorry, an error occurred creating the link"),

app/hooks/useEmojiWidth.ts

@@ -7,6 +7,10 @@ type Options = {
 
 /**
  * Measures the width of an emoji character
+ *
+ * @param emoji The emoji to measure
+ * @param options Options to pass to the measurement element
+ * @returns The width of the emoji in pixels
  */
 export default function useEmojiWidth(
   emoji: string | undefined,

app/hooks/useFocusedComment.ts

@@ -0,0 +1,11 @@
+import { useLocation } from "react-router-dom";
+import useQuery from "~/hooks/useQuery";
+import useStores from "./useStores";
+
+export default function useFocusedComment() {
+  const { comments } = useStores();
+  const location = useLocation<{ commentId?: string }>();
+  const query = useQuery();
+  const focusedCommentId = location.state?.commentId || query.get("commentId");
+  return focusedCommentId ? comments.get(focusedCommentId) : undefined;
+}

app/hooks/useOnClickOutside.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+import useEventListener from "./useEventListener";
+
+/**
+ * Hook to detect clicks outside of a specified element.
+ *
+ * @param ref The React ref to the element.
+ * @param callback The handler to call when a click outside the element is detected.
+ */
+export default function useOnClickOutside(
+  ref: React.RefObject<HTMLElement>,
+  callback?: (event: MouseEvent | TouchEvent) => void
+) {
+  const listener = React.useCallback(
+    (event: MouseEvent | TouchEvent) => {
+      // Do nothing if clicking ref's element or descendent elements
+      if (!ref.current || ref.current.contains(event.target as Node)) {
+        return;
+      }
+      callback?.(event);
+    },
+    [ref, callback]
+  );
+
+  useEventListener("mousedown", listener);
+  useEventListener("touchstart", listener);
+}

app/hooks/usePersistedState.ts

@@ -18,7 +18,7 @@ type Options = {
  * @param options Options for the hook
  * @returns Tuple of the current value and a function to update it
  */
-export default function usePersistedState<T extends Primitive>(
+export default function usePersistedState<T extends Primitive | object>(
   key: string,
   defaultValue: T,
   options?: Options