diff --git a/example/src/App.tsx b/example/src/App.tsx index 235ff535..4284eade 100644 --- 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(null); diff --git a/src/MarkdownTextInput.web.tsx b/src/MarkdownTextInput.web.tsx index d169ea42..6c85f6d4 100644 --- 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 StyleSheet.flatten(style), [style]); + const prevMarkdownStyle = useRef(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 { - 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( () =>