Update RichTextEditor to be a forwardRef and expose setContent through useImperativeHandle (#1173)

Author: eric2523

src/RichTextEditor/RichTextEditor.mdx

@@ -10,7 +10,7 @@ import * as ComponentStories from './RichTextEditor.stories';
 
 <Canvas of={ComponentStories.Default} />
 
-### When to use 
+### When to use
 To allow users to edit text where formatting is important, such as messages to be sent via email.
 
 ### When to not use
@@ -45,3 +45,7 @@ RichTextEditor also has an error state to display that the input is invalid. The
 but by setting `hasErrors` via your provided `onChange` callback you can check the HTML produced by the RichTextEditor for any requirements that you have.
 
 <Canvas of={ComponentStories.Error} />
+
+RichTextEditor can optionally take in a forwardedRef to allow content to be programmatically manipulated.
+
+<Canvas of={ComponentStories.SetContent} />

src/RichTextEditor/RichTextEditor.stories.jsx

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { useRef } from 'react';
 
+import Button from 'src/Button';
 import { RichTextEditor, RichTextEditorActions } from 'src/RichTextEditor';
 
 import mdx from './RichTextEditor.mdx';
@@ -60,3 +61,22 @@ export const Error = () => (
     onChange={() => null}
   />
 );
+
+export const SetContent = () => {
+  const ref = useRef(null);
+
+  const handleClick = () => {
+    ref.current.setContent('Oh hey');
+  };
+
+  return (
+    <>
+      <Button onClick={handleClick}>Set content to "Oh hey"</Button>
+      <RichTextEditor
+        id="text-editor"
+        ref={ref}
+        onChange={() => null}
+      />
+    </>
+  );
+};

src/RichTextEditor/RichTextEditor.tsx

@@ -4,7 +4,7 @@ import type { Extension, Node as TipTapNode, Mark } from '@tiptap/core';
 
 import './RichTextEditor.scss';
 
-import React from 'react';
+import React, { forwardRef, type ForwardedRef, useImperativeHandle } from 'react';
 
 import classNames from 'classnames';
 
@@ -94,21 +94,28 @@ export type RichTextEditorProps = {
   onChange: (arg0: string) => void;
 }
 
-function RichTextEditor({
-  allowedAttributes,
-  allowedTags,
-  ariaAttributes,
-  availableActions = RichTextEditorDefaultActionsArray,
-  characterLimit,
-  className,
-  hasErrors,
-  id,
-  initialValue,
-  isOneLine,
-  onChange,
-  placeholder,
-  customExtensions = [],
-}: RichTextEditorProps) {
+export type RichTextEditorRef = {
+  setContent: (content: string) => void;
+}
+
+const RichTextEditor = forwardRef((
+  {
+    allowedAttributes,
+    allowedTags,
+    ariaAttributes,
+    availableActions = RichTextEditorDefaultActionsArray,
+    characterLimit,
+    className,
+    hasErrors,
+    id,
+    initialValue,
+    isOneLine,
+    onChange,
+    placeholder,
+    customExtensions = [],
+  }: RichTextEditorProps,
+  ref: ForwardedRef<RichTextEditorRef> = null,
+) => {
   const oneLineExtension = isOneLine ? [OneLineLimit] : [];
 
   const requiredExtensions = [
@@ -183,6 +190,13 @@ function RichTextEditor({
     },
   });
 
+  useImperativeHandle(ref, () => ({
+    setContent: (content: string) => {
+      editor?.commands.setContent(content);
+      onChange(content);
+    },
+  }));
+
   return (
     editor ? (
       <div
@@ -221,7 +235,7 @@ function RichTextEditor({
       </>
     )
   );
-}
+});
 
 // eslint-disable-next-line import/no-default-export
 export default RichTextEditor;