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( placeholderTextColor = '#ccc', selectTextOnFocus, spellCheck, - style, + style = {}, value, }, ref, @@ -106,9 +106,8 @@ const MarkdownTextInput = React.forwardRef( const currentlyFocusedField = useRef(null); const contentSelection = useRef(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( 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(style: StyleProp): 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};