fix selection

Expensify · Nov 18, 2024 · 1d1fc86 · 1d1fc86
1 parent b1be58e
commit 1d1fc86
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 12 deletions.
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -19,16 +19,14 @@ export default function App() {
     };
   }, [textColorState, textFontSizeState]);
 
-  const markdownStyle = React.useMemo(() => {
-    return {
-      emoji: {
-        fontSize: emojiFontSizeState ? 15 : 20,
-      },
-      link: {
-        color: linkColorState ? 'red' : 'blue',
-      },
-    };
-  }, [emojiFontSizeState, linkColorState]);
+  const markdownStyle = {
+    emoji: {
+      fontSize: emojiFontSizeState ? 15 : 20,
+    },
+    link: {
+      color: linkColorState ? 'red' : 'blue',
+    },
+  };
 
   const ref = React.useRef<MarkdownTextInput>(null);
 

diff --git a/src/MarkdownTextInput.web.tsx b/src/MarkdownTextInput.web.tsx
@@ -24,6 +24,7 @@ import {getElementHeight, getPlaceholderValue, isEventComposing, normalizeValue,
 import {parseToReactDOMStyle, processMarkdownStyle} from './web/utils/webStyleUtils';
 import {forceRefreshAllImages} from './web/inputElements/inlineImage';
 import type {InlineImagesInputProps} from './commonTypes';
+import {deepCompareMarkdownStyles} from './styleUtils';
 
 require('../parser/react-native-live-markdown-parser.js');
 
@@ -126,6 +127,16 @@ const MarkdownTextInput = React.forwardRef<MarkdownTextInput, MarkdownTextInputP
     }
 
     const flattenedStyle = useMemo(() => StyleSheet.flatten(style), [style]);
+    const prevMarkdownStyle = useRef<MarkdownStyle | undefined>(undefined);
+    const memoizedMarkdownStyle = useMemo(() => {
+      if (prevMarkdownStyle.current && deepCompareMarkdownStyles(prevMarkdownStyle.current ?? {}, markdownStyle ?? {})) {
+        return prevMarkdownStyle.current;
+      }
+      return markdownStyle;
+    }, [markdownStyle]);
+    useEffect(() => {
+      prevMarkdownStyle.current = memoizedMarkdownStyle;
+    }, [memoizedMarkdownStyle]); // Runs after state is updated
 
     // Empty placeholder would collapse the div, so we need to use zero-width space to prevent it
     const heightSafePlaceholder = useMemo(() => getPlaceholderValue(placeholder), [placeholder]);
@@ -177,12 +188,12 @@ const MarkdownTextInput = React.forwardRef<MarkdownTextInput, MarkdownTextInputP
     );
 
     const processedMarkdownStyle = useMemo(() => {
-      const newMarkdownStyle = processMarkdownStyle(markdownStyle);
+      const newMarkdownStyle = processMarkdownStyle(memoizedMarkdownStyle);
       if (divRef.current) {
         parseText(divRef.current, divRef.current.value, newMarkdownStyle, null, false, false);
       }
       return newMarkdownStyle;
-    }, [markdownStyle, parseText]);
+    }, [memoizedMarkdownStyle, parseText]);
 
     const inputStyles = useMemo(
       () =>