address two rich text editor bugs

web/src/app/global.css

@@ -89,7 +89,7 @@ body {
   /* BLOCK ELEMENTS */
 
   p {
-    margin-bottom: 1rem;
+    margin-bottom: 0.5rem;
   }
 
   a {
@@ -103,6 +103,10 @@ body {
     color: var(--colors-blue-11);
   }
 
+  img {
+    margin-bottom: 0.5rem;
+  }
+
   h1,
   h2,
   h3,

web/src/components/content/ContentComposer/ContentComposer.tsx

@@ -32,14 +32,16 @@ import { FloatingMenu } from "./plugins/MenuPlugin";
 import { ContentComposerProps, useContentComposer } from "./useContentComposer";
 
 export function ContentComposer(props: ContentComposerProps) {
-  const { editor, initialValueHTML, handlers, format } =
+  const { editor, initialValueHTML, uniqueID, handlers, format } =
     useContentComposer(props);
 
   return (
     <LStack
-      id="rich-text-editor"
+      id={`rich-text-editor-${uniqueID}`}
       containerType="inline-size"
       className="typography"
+      // NOTE: Relative positioning is for the floating menu to work.
+      position="relative"
       w="full"
       h="full"
       gap="1"
@@ -197,13 +199,13 @@ export function ContentComposer(props: ContentComposerProps) {
               size: "xs",
               variant: "ghost",
             })}
-            htmlFor="filepicker"
+            htmlFor={`filepicker-${uniqueID}`}
             title="Insert an image"
           >
             <ImageIcon />
           </label>
           <styled.input
-            id="filepicker"
+            id={`filepicker-${uniqueID}`}
             type="file"
             multiple
             display="none"
@@ -215,7 +217,7 @@ export function ContentComposer(props: ContentComposerProps) {
       )}
 
       <EditorContent
-        id="editor-content"
+        id={`editor-content-${uniqueID}`}
         className={css({
           // NOTE: We want to make the clickable area expand to the full height.
           height: "full",

web/src/components/content/ContentComposer/plugins/MenuPlugin.tsx

@@ -103,24 +103,40 @@ export class FloatingMenuView {
 
     const { state } = view;
     const { doc, selection } = state;
-    const { from, to } = selection;
+
     const isSame =
       oldState && oldState.doc.eq(doc) && oldState.selection.eq(selection);
 
     if (isSame) {
       return;
     }
 
+    const { offsetX, offsetY } = this.getMenuOffset(view);
+
+    this.element.setAttribute(
+      "style",
+      `top: ${offsetY}px; left: ${offsetX - 1}px;`,
+    );
+  }
+
+  hide() {
+    const style = this.element.getAttribute("style");
+    this.element.setAttribute("style", `${style} visibility: hidden;`);
+  }
+
+  getMenuOffset(view: EditorView) {
+    const { state } = view;
+    const { selection } = state;
+    const { from, to } = selection;
+
     const { top: containerTop } = view.dom.getBoundingClientRect();
     const { bottom: caretY } = posToDOMRect(view, from, to);
-    const offsetY = caretY - containerTop + 16;
 
     // NOTE: Left is -1px for optical alignment due to the border radius.
-    this.element.setAttribute("style", `top: ${offsetY}px; left: -1px;`);
-  }
+    const offsetX = -1;
+    const offsetY = caretY - containerTop + 8;
 
-  hide() {
-    this.element.setAttribute("style", "visibility: hidden;");
+    return { offsetX, offsetY };
   }
 }
 

web/src/components/content/ContentComposer/useContentComposer.ts

@@ -6,7 +6,8 @@ import Placeholder from "@tiptap/extension-placeholder";
 import { generateHTML, generateJSON } from "@tiptap/html";
 import { useEditor } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
-import { ChangeEvent, useEffect } from "react";
+import { ChangeEvent, useEffect, useId, useMemo } from "react";
+import { Xid } from "xid-ts";
 
 import { Asset } from "src/api/openapi-schema";
 
@@ -60,10 +61,14 @@ export function useContentComposer(props: ContentComposerProps) {
   );
   const initialValueHTML = generateHTML(initialValueJSON, extensions);
 
+  // Each editor needs a unique ID for the menu's file upload input ID.
+  const uniqueID = useId();
+
   const editor = useEditor({
     immediatelyRender: false,
     editorProps: {
       attributes: {
+        "data-editor-id": uniqueID,
         class: css({
           height: "full",
           width: "full",
@@ -190,6 +195,7 @@ export function useContentComposer(props: ContentComposerProps) {
 
   return {
     editor,
+    uniqueID,
     initialValueHTML,
     handlers: {
       handleFileUpload,