From f1718531af8b4a9a708bdb5a95ce73dd0daa06ff Mon Sep 17 00:00:00 2001
From: Piotr Kochanowski <63232710+TheKohan@users.noreply.github.com>
Date: Fri, 18 Oct 2024 15:02:36 +0200
Subject: [PATCH] fix: adjust `MarkdownTextInput` ref type (#523)

---
 example/src/App.tsx           | 4 +---
 src/MarkdownTextInput.tsx     | 4 +++-
 src/MarkdownTextInput.web.tsx | 4 +++-
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/example/src/App.tsx b/example/src/App.tsx
index d3d63426..235ff535 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import {Button, StyleSheet, Text, View} from 'react-native';
 import {MarkdownTextInput} from '@expensify/react-native-live-markdown';
-import type {TextInput} from 'react-native';
 import * as TEST_CONST from './testConstants';
 import {PlatformInfo} from './PlatformInfo';
 
@@ -31,8 +30,7 @@ export default function App() {
     };
   }, [emojiFontSizeState, linkColorState]);
 
-  // TODO: use MarkdownTextInput ref instead of TextInput ref
-  const ref = React.useRef<TextInput>(null);
+  const ref = React.useRef<MarkdownTextInput>(null);
 
   return (
     <View style={styles.container}>
diff --git a/src/MarkdownTextInput.tsx b/src/MarkdownTextInput.tsx
index 3eb2ea26..84cda574 100644
--- a/src/MarkdownTextInput.tsx
+++ b/src/MarkdownTextInput.tsx
@@ -16,6 +16,8 @@ interface MarkdownTextInputProps extends TextInputProps, InlineImagesInputProps
   markdownStyle?: PartialMarkdownStyle;
 }
 
+type MarkdownTextInput = TextInput & React.Component<MarkdownTextInputProps>;
+
 function processColorsInMarkdownStyle(input: MarkdownStyle): MarkdownStyle {
   const output = JSON.parse(JSON.stringify(input));
 
@@ -37,7 +39,7 @@ function processMarkdownStyle(input: PartialMarkdownStyle | undefined): Markdown
   return processColorsInMarkdownStyle(mergeMarkdownStyleWithDefault(input));
 }
 
-const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>((props, ref) => {
+const MarkdownTextInput = React.forwardRef<MarkdownTextInput, MarkdownTextInputProps>((props, ref) => {
   const IS_FABRIC = 'nativeFabricUIManager' in global;
 
   const markdownStyle = React.useMemo(() => processMarkdownStyle(props.markdownStyle), [props.markdownStyle]);
diff --git a/src/MarkdownTextInput.web.tsx b/src/MarkdownTextInput.web.tsx
index e0dbecc8..185b4f12 100644
--- a/src/MarkdownTextInput.web.tsx
+++ b/src/MarkdownTextInput.web.tsx
@@ -40,6 +40,8 @@ interface MarkdownNativeEvent extends Event {
   inputType: string;
 }
 
+type MarkdownTextInput = TextInput & React.Component<MarkdownTextInputProps>;
+
 type Selection = {
   start: number;
   end: number;
@@ -68,7 +70,7 @@ type HTMLMarkdownElement = HTMLElement & {
   value: string;
 };
 
-const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
+const MarkdownTextInput = React.forwardRef<MarkdownTextInput, MarkdownTextInputProps>(
   (
     {
       accessibilityLabel,