From 911d770bceaaadb6921bb302f6b7a70abed33062 Mon Sep 17 00:00:00 2001
From: southclaws <south@cla.ws>
Date: Sat, 12 Oct 2024 16:18:26 +0100
Subject: [PATCH 1/3] apply a unique ID to some rich text components to fix
 issues with images being uploaded to the wrong editor instance

---
 .../content/ContentComposer/ContentComposer.tsx        | 10 +++++-----
 .../content/ContentComposer/useContentComposer.ts      |  8 +++++++-
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/web/src/components/content/ContentComposer/ContentComposer.tsx b/web/src/components/content/ContentComposer/ContentComposer.tsx
index 7eee1e71f..4e19ebe8f 100644
--- a/web/src/components/content/ContentComposer/ContentComposer.tsx
+++ b/web/src/components/content/ContentComposer/ContentComposer.tsx
@@ -32,12 +32,12 @@ 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"
       w="full"
@@ -197,13 +197,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 +215,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",
diff --git a/web/src/components/content/ContentComposer/useContentComposer.ts b/web/src/components/content/ContentComposer/useContentComposer.ts
index 7de950070..3dfb67618 100644
--- a/web/src/components/content/ContentComposer/useContentComposer.ts
+++ b/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,

From 6425b52b69365671c7295c3c848d67c880c0f112 Mon Sep 17 00:00:00 2001
From: southclaws <south@cla.ws>
Date: Sat, 12 Oct 2024 16:37:03 +0100
Subject: [PATCH 2/3] fix editor floating menu positioning

---
 .../ContentComposer/ContentComposer.tsx       |  2 ++
 .../ContentComposer/plugins/MenuPlugin.tsx    | 28 +++++++++++++++----
 2 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/web/src/components/content/ContentComposer/ContentComposer.tsx b/web/src/components/content/ContentComposer/ContentComposer.tsx
index 4e19ebe8f..ac6fd4b4e 100644
--- a/web/src/components/content/ContentComposer/ContentComposer.tsx
+++ b/web/src/components/content/ContentComposer/ContentComposer.tsx
@@ -40,6 +40,8 @@ export function ContentComposer(props: ContentComposerProps) {
       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"
diff --git a/web/src/components/content/ContentComposer/plugins/MenuPlugin.tsx b/web/src/components/content/ContentComposer/plugins/MenuPlugin.tsx
index 048418bc1..4fdbf0364 100644
--- a/web/src/components/content/ContentComposer/plugins/MenuPlugin.tsx
+++ b/web/src/components/content/ContentComposer/plugins/MenuPlugin.tsx
@@ -103,7 +103,7 @@ 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);
 
@@ -111,16 +111,32 @@ export class FloatingMenuView {
       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 };
   }
 }
 

From 3429a4e09a771c1d146b618514713d693eab2727 Mon Sep 17 00:00:00 2001
From: southclaws <south@cla.ws>
Date: Sat, 12 Oct 2024 16:38:17 +0100
Subject: [PATCH 3/3] tighten paragraph spacing

---
 web/src/app/global.css | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/web/src/app/global.css b/web/src/app/global.css
index 3c41d4308..fb49450d2 100644
--- a/web/src/app/global.css
+++ b/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,