diff --git a/src/MarkdownTextInput.web.tsx b/src/MarkdownTextInput.web.tsx index acf05df2..e5264841 100644 --- a/src/MarkdownTextInput.web.tsx +++ b/src/MarkdownTextInput.web.tsx @@ -31,6 +31,15 @@ try { throw new Error('[react-native-live-markdown] Function `createReactDOMStyle` from react-native-web not found. Please make sure that you are using React Native Web 0.18 or newer.'); } +let preprocessStyle: (style: any) => any; +try { + preprocessStyle = + // eslint-disable-next-line @typescript-eslint/no-var-requires + require('react-native-web/dist/exports/StyleSheet/preprocess').default; +} catch (e) { + throw new Error('[react-native-live-markdown] Function `preprocessStyle` from react-native-web not found.'); +} + type MarkdownStyle = MarkdownTextInputDecoratorViewNativeComponent.MarkdownStyle; interface MarkdownTextInputProps extends TextInputProps { @@ -388,7 +397,7 @@ const MarkdownTextInput = React.forwardRef( style && { caretColor: (style as TextStyle).color || 'black', }, - createReactDOMStyle(style), + createReactDOMStyle(preprocessStyle(StyleUtils.parseStyleArrayToObject(style))), ]) as CSSProperties } role={accessibilityRole || 'textbox'} diff --git a/src/styleUtils.ts b/src/styleUtils.ts index 9ee78844..f430bdb4 100644 --- a/src/styleUtils.ts +++ b/src/styleUtils.ts @@ -1,4 +1,5 @@ import {processColor, Platform} from 'react-native'; +import type {StyleProp, TextStyle, ViewStyle} from 'react-native'; import type * as MarkdownTextInputDecoractorView from './MarkdownTextInputDecoratorViewNativeComponent'; type MarkdownStyle = MarkdownTextInputDecoractorView.MarkdownStyle; @@ -93,10 +94,24 @@ 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}; +export {processMarkdownStyle, mergeMarkdownStyleWithDefault, parseStyleArrayToObject};