feat(RichTextEditor): Add external ref support and improve prop handling (#679)

Author: shashank-bhatotia

src/components/RichTextEditor.jsx

@@ -9,9 +9,10 @@ import {
 import styled from "styled-components/native";
 import { space, flexbox, border, layout } from "styled-system";
 
-import { Container } from "@components";
 import { useKeyboard } from "@hooks";
 
+import Container from "./Container";
+
 export const ScrollView = styled.ScrollView.attrs(() => ({
   keyboardShouldPersistTaps: "handled",
   showsVerticalScrollIndicator: true,
@@ -80,13 +81,17 @@ export const RichTextEditor = ({
   toolbarActions,
   editorProps,
   toolBarProps,
+  richTextRef: externalRichTextRef,
   ...rest
 }) => {
-  const richTextRef = useRef();
+  const internalRichTextRef = useRef();
   const keyboardHeight = useKeyboard();
   const [toolbarVisible, setToolbarVisible] = useState(false);
   const showToolbar = keyboardHeight > 0 && toolbarVisible;
 
+  // Use the external ref if provided, otherwise use the internal ref
+  const richTextRef = externalRichTextRef || internalRichTextRef;
+
   const computeToolbarActions = () => {
     const actionItems = [];
     toolbarActions?.map(actionItem => {
@@ -116,11 +121,11 @@ export const RichTextEditor = ({
         onChange={onChange}
         onBlur={() => {
           setToolbarVisible(false);
-          editorProps?.onBlurFn();
+          editorProps?.onBlurFn?.();
         }}
         onFocus={() => {
           setToolbarVisible(true);
-          editorProps?.onFocusFn();
+          editorProps?.onFocusFn?.();
         }}
         {...editorProps}
       />
@@ -160,4 +165,8 @@ RichTextEditor.propTypes = {
   toolBarProps: PropTypes.object,
   editorWrapperStyle: PropTypes.object,
   toolbarWrapperStyle: PropTypes.object,
+  /**
+   * Ref object to control the editor from outside the component.
+   */
+  richTextRef: PropTypes.object,
 };