[@mantine/tiptap]: add forward ref to rich text editor

mantinedev · Nov 27, 2022 · 6986cb5 · 6986cb5
1 parent 9febdd1
commit 6986cb5
Showing 1 changed file with 10 additions and 5 deletions.
diff --git a/src/mantine-tiptap/src/RichTextEditor.tsx b/src/mantine-tiptap/src/RichTextEditor.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable react/no-unused-prop-types */
-import React, { useMemo } from 'react';
+import React, { useMemo, forwardRef } from 'react';
 import {
   Box,
   useComponentDefaultProps,
@@ -50,7 +50,7 @@ const defaultProps: Partial<RichTextEditorProps> = {
   withTypographyStyles: true,
 };
 
-export function RichTextEditor(props: RichTextEditorProps) {
+export const RichTextEditor = forwardRef<HTMLDivElement, RichTextEditorProps>((props, ref) => {
   const {
     editor,
     children,
@@ -63,21 +63,26 @@ export function RichTextEditor(props: RichTextEditorProps) {
     unstyled,
     ...others
   } = useComponentDefaultProps('RichTextEditor', defaultProps, props);
-  const { classes, cx } = useStyles(null, { name: 'RichTextEditor', classNames, styles, unstyled });
+  const { classes, cx } = useStyles(null, {
+    name: 'RichTextEditor',
+    classNames,
+    styles,
+    unstyled,
+  });
   const mergedLabels = useMemo(() => ({ ...DEFAULT_LABELS, ...labels }), [labels]);
 
   return (
     <StylesApiProvider classNames={classNames} styles={styles} unstyled={unstyled}>
       <RichTextEditorProvider
         value={{ editor, labels: mergedLabels, withCodeHighlightStyles, withTypographyStyles }}
       >
-        <Box className={cx(classes.root, className)} {...others}>
+        <Box className={cx(classes.root, className)} {...others} ref={ref}>
           {children}
         </Box>
       </RichTextEditorProvider>
     </StylesApiProvider>
   );
-}
+}) as any;
 
 // Generic components
 RichTextEditor.Content = Content;