apply a unique ID to some rich text components to fix issues with ima…

…ges being uploaded to the wrong editor instance
Southclaws · Oct 12, 2024 · 911d770 · 911d770
1 parent 679e71b
commit 911d770
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 6 deletions.
diff --git 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
@@ -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,