Various commenting improvements (#4938)

* fix: New threads attached to previous as replies

* fix: Cannot use floating toolbar properly in comments

* perf: Avoid re-writing history on click in editor

* fix: Comment on text selection

* fix: 'Copy link' on comments uses wrong hostname

* Show comment buttons on input focus rather than non-empty input
Increase maximum sidebar size

* Allow opening comments from document menu

* fix: Clicking comment menu should not focus thread

app/components/Editor.tsx

@@ -21,7 +21,6 @@ import HoverPreview from "~/components/HoverPreview";
 import type { Props as EditorProps, Editor as SharedEditor } from "~/editor";
 import useDictionary from "~/hooks/useDictionary";
 import useEmbeds from "~/hooks/useEmbeds";
-import useFocusedComment from "~/hooks/useFocusedComment";
 import useStores from "~/hooks/useStores";
 import useToasts from "~/hooks/useToasts";
 import { NotFoundError } from "~/utils/errors";
@@ -61,7 +60,6 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
     onDeleteCommentMark,
   } = props;
   const { auth, comments, documents } = useStores();
-  const focusedComment = useFocusedComment();
   const { showToast } = useToasts();
   const dictionary = useDictionary();
   const embeds = useEmbeds(!shareId);
@@ -343,7 +341,6 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
           onChange={handleChange}
           placeholder={props.placeholder || ""}
           defaultValue={props.defaultValue || ""}
-          focusedCommentId={focusedComment?.id}
         />
         {props.bottomPadding && !props.readOnly && (
           <ClickablePadding

app/components/Portal.tsx

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { Portal as ReactPortal } from "react-portal";
+
+/**
+ * A React context that provides a dom node for portals to be rendered into.
+ */
+export const PortalContext = React.createContext<
+  HTMLElement | null | undefined
+>(undefined);
+
+/**
+ * A portal component that uses context to render into a different dom node
+ * or the root of body if no context is available.
+ */
+export function Portal(props: { children: React.ReactNode }) {
+  const node = React.useContext(PortalContext);
+  return <ReactPortal node={node}>{props.children}</ReactPortal>;
+}