From f7d3b9bb2fbe226173175fbc919078525b4e111f Mon Sep 17 00:00:00 2001
From: Robert Kozik <robert.kozik@swmansion.com>
Date: Wed, 31 Jan 2024 20:16:30 +0100
Subject: [PATCH] use StyleSheet.flatten to change style array to object

---
 src/MarkdownTextInput.web.tsx | 16 ++++++++--------
 src/styleUtils.ts             | 17 +----------------
 2 files changed, 9 insertions(+), 24 deletions(-)

diff --git a/src/MarkdownTextInput.web.tsx b/src/MarkdownTextInput.web.tsx
index e5264841..aae8f099 100644
--- a/src/MarkdownTextInput.web.tsx
+++ b/src/MarkdownTextInput.web.tsx
@@ -9,7 +9,7 @@ import type {
   TextInputKeyPressEventData,
   TextInputFocusEventData,
 } from 'react-native';
-import React, {useEffect, useRef, useCallback} from 'react';
+import React, {useEffect, useRef, useCallback, useMemo} from 'react';
 import type {CSSProperties, MutableRefObject, ReactEventHandler, FocusEventHandler, MouseEvent, KeyboardEvent, SyntheticEvent} from 'react';
 import {StyleSheet} from 'react-native';
 import * as ParseUtils from './web/parserUtils';
@@ -97,7 +97,7 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
       placeholderTextColor = '#ccc',
       selectTextOnFocus,
       spellCheck,
-      style,
+      style = {},
       value,
     },
     ref,
@@ -106,9 +106,8 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
     const currentlyFocusedField = useRef<HTMLDivElement | null>(null);
     const contentSelection = useRef<Selection | null>(null);
     const className = `react-native-live-markdown-input-${multiline ? 'multiline' : 'single-line'}`;
-
-    const history = useRef(new MarkdownInputHistory(50));
-
+    const history = useRef(new MarkdownInputHistory(20));
+    const flattenStyle = useMemo(() => StyleSheet.flatten(style), [style]);
     const parseText = useCallback(
       (target: HTMLDivElement, text: string | null, customMarkdownStyles: MarkdownStyle, cursorPosition: number | null = null, shouldAddToHistory = true) => {
         if (text === null) {
@@ -394,10 +393,10 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
         style={
           StyleSheet.flatten([
             styles.defaultInputStyles,
-            style && {
-              caretColor: (style as TextStyle).color || 'black',
+            flattenStyle && {
+              caretColor: (flattenStyle as TextStyle).color || 'black',
             },
-            createReactDOMStyle(preprocessStyle(StyleUtils.parseStyleArrayToObject(style))),
+            createReactDOMStyle(preprocessStyle(flattenStyle)),
           ]) as CSSProperties
         }
         role={accessibilityRole || 'textbox'}
@@ -432,6 +431,7 @@ const styles = StyleSheet.create({
     whiteSpace: 'pre-wrap',
     overflow: 'scroll',
     scrollbarWidth: 'none',
+    paddingHorizontal: 100,
   },
 });
 
diff --git a/src/styleUtils.ts b/src/styleUtils.ts
index f430bdb4..9ee78844 100644
--- a/src/styleUtils.ts
+++ b/src/styleUtils.ts
@@ -1,5 +1,4 @@
 import {processColor, Platform} from 'react-native';
-import type {StyleProp, TextStyle, ViewStyle} from 'react-native';
 import type * as MarkdownTextInputDecoractorView from './MarkdownTextInputDecoratorViewNativeComponent';
 
 type MarkdownStyle = MarkdownTextInputDecoractorView.MarkdownStyle;
@@ -94,24 +93,10 @@ function processColorsInMarkdownStyle(input: MarkdownStyle): MarkdownStyle {
   return output as MarkdownStyle;
 }
 
-function parseStyleArrayToObject<T extends TextStyle | ViewStyle | object>(style: StyleProp<T>): T {
-  const isArray = Array.isArray(style);
-  if (!isArray) {
-    return style as T;
-  }
-  return style.reduce((acc, val) => {
-    const isNestedArray = Array.isArray(val);
-    if (isNestedArray) {
-      return {...acc, ...parseStyleArrayToObject(val)};
-    }
-    return {...acc, ...val};
-  }, {});
-}
-
 function processMarkdownStyle(input: PartialMarkdownStyle | undefined): MarkdownStyle {
   return processColorsInMarkdownStyle(mergeMarkdownStyleWithDefault(input));
 }
 
 export type {PartialMarkdownStyle};
 
-export {processMarkdownStyle, mergeMarkdownStyleWithDefault, parseStyleArrayToObject};
+export {processMarkdownStyle, mergeMarkdownStyleWithDefault};