fix: forward refs to the final component (#1485)

Author: nperez0111

packages/react/src/editor/BlockNoteView.tsx

@@ -163,7 +163,6 @@ function BlockNoteViewComponent<
     className,
     editorColorScheme,
     contentEditableProps,
-    ref,
     ...rest,
   };
 
@@ -176,7 +175,7 @@ function BlockNoteViewComponent<
         }}>
         <ElementRenderer ref={setElementRenderer} />
         {renderEditor ? (
-          <BlockNoteViewEditor>{children}</BlockNoteViewEditor>
+          <BlockNoteViewEditor ref={ref}>{children}</BlockNoteViewEditor>
         ) : (
           children
         )}
@@ -199,73 +198,82 @@ export const BlockNoteViewRaw = React.forwardRef(BlockNoteViewComponent) as <
 /**
  * Renders the editor itself and the default UI elements
  */
-export const BlockNoteViewEditor = (props: { children: ReactNode }) => {
-  const ctx = useBlockNoteViewContext()!;
-  const editor = useBlockNoteEditor();
+export const BlockNoteViewEditor = React.forwardRef(
+  (props: { children: ReactNode }, ref: React.Ref<HTMLDivElement>) => {
+    const ctx = useBlockNoteViewContext()!;
+    const editor = useBlockNoteEditor();
 
-  const portalManager = useMemo(() => {
-    return getContentComponent();
-  }, []);
+    const portalManager = useMemo(() => {
+      return getContentComponent();
+    }, []);
 
-  const mount = useCallback(
-    (element: HTMLElement | null) => {
-      editor.mount(element, portalManager);
-    },
-    [editor, portalManager]
-  );
+    const mount = useCallback(
+      (element: HTMLElement | null) => {
+        editor.mount(element, portalManager);
+      },
+      [editor, portalManager]
+    );
 
-  return (
-    <>
-      <Portals contentComponent={portalManager} />
-      <EditorElement {...ctx.editorProps} {...props} mount={mount}>
-        {/* Renders the UI elements such as formatting toolbar, etc, unless they have been explicitly disabled  in defaultUIProps */}
-        <BlockNoteDefaultUI {...ctx.defaultUIProps} />
-        {/* Manually passed in children, such as customized UI elements / controllers */}
-        {props.children}
-      </EditorElement>
-    </>
-  );
-};
+    return (
+      <>
+        <Portals contentComponent={portalManager} />
+        <EditorElement {...ctx.editorProps} {...props} mount={mount} ref={ref}>
+          {/* Renders the UI elements such as formatting toolbar, etc, unless they have been explicitly disabled  in defaultUIProps */}
+          <BlockNoteDefaultUI {...ctx.defaultUIProps} />
+          {/* Manually passed in children, such as customized UI elements / controllers */}
+          {props.children}
+        </EditorElement>
+      </>
+    );
+  }
+);
 
 /**
  * Renders the container div + contentEditable div.
  */
-const EditorElement = (
-  props: {
-    className?: string;
-    editorColorScheme?: string;
-    autoFocus?: boolean;
-    mount: (element: HTMLElement | null) => void;
-    contentEditableProps?: Record<string, any>;
-    children: ReactNode;
-    ref?: React.Ref<HTMLDivElement>;
-  } & HTMLAttributes<HTMLDivElement>
-) => {
-  const {
-    className,
-    editorColorScheme,
-    autoFocus,
-    mount,
-    children,
-    contentEditableProps,
-    ...rest
-  } = props;
-  return (
-    // The container wraps the contentEditable div and UI Elements such as sidebar, formatting toolbar, etc.
-    <div
-      className={mergeCSSClasses("bn-container", editorColorScheme, className)}
-      data-color-scheme={editorColorScheme}
-      {...rest}>
-      {/* The actual contentEditable that Prosemirror mounts to */}
+const EditorElement = React.forwardRef(
+  (
+    props: {
+      className?: string;
+      editorColorScheme?: string;
+      autoFocus?: boolean;
+      mount: (element: HTMLElement | null) => void;
+      contentEditableProps?: Record<string, any>;
+      children: ReactNode;
+    } & HTMLAttributes<HTMLDivElement>,
+    ref: React.Ref<HTMLDivElement>
+  ) => {
+    const {
+      className,
+      editorColorScheme,
+      autoFocus,
+      mount,
+      children,
+      contentEditableProps,
+      ...rest
+    } = props;
+    return (
+      // The container wraps the contentEditable div and UI Elements such as sidebar, formatting toolbar, etc.
       <div
-        aria-autocomplete="list"
-        aria-haspopup="listbox"
-        data-bn-autofocus={autoFocus}
-        ref={mount}
-        {...contentEditableProps}
-      />
-      {/* The UI elements such as sidebar, formatting toolbar, etc. */}
-      {children}
-    </div>
-  );
-};
+        className={mergeCSSClasses(
+          "bn-container",
+          editorColorScheme,
+          className
+        )}
+        data-color-scheme={editorColorScheme}
+        {...rest}
+        ref={ref}>
+        {/* The actual contentEditable that Prosemirror mounts to */}
+        <div
+          aria-autocomplete="list"
+          aria-haspopup="listbox"
+          data-bn-autofocus={autoFocus}
+          ref={mount}
+          {...contentEditableProps}
+        />
+        {/* The UI elements such as sidebar, formatting toolbar, etc. */}
+        {children}
+      </div>
+    );
+  }
+);