diff --git a/src/MarkdownTextInput.web.tsx b/src/MarkdownTextInput.web.tsx index acad2515..4d1f8786 100644 --- a/src/MarkdownTextInput.web.tsx +++ b/src/MarkdownTextInput.web.tsx @@ -149,7 +149,7 @@ const MarkdownTextInput = React.forwardRef( if (text === null) { return {text: divRef.current.value, cursorPosition: null}; } - const parsedText = updateInputStructure(target, text, cursorPosition, customMarkdownStyles, !multiline, shouldForceDOMUpdate); + const parsedText = updateInputStructure(target, text, cursorPosition, customMarkdownStyles, false, shouldForceDOMUpdate); divRef.current.value = parsedText.text; if (history.current && shouldAddToHistory) { @@ -158,7 +158,7 @@ const MarkdownTextInput = React.forwardRef( return parsedText; }, - [multiline], + [], ); const processedMarkdownStyle = useMemo(() => { @@ -683,7 +683,6 @@ const styles = StyleSheet.create({ fontFamily: 'sans-serif', // @ts-expect-error it works on web boxSizing: 'border-box', - whiteSpace: 'pre-wrap', overflowY: 'auto', overflowX: 'auto', overflowWrap: 'break-word', diff --git a/src/web/MarkdownTextInput.css b/src/web/MarkdownTextInput.css index 4fc0171d..24decc91 100644 --- a/src/web/MarkdownTextInput.css +++ b/src/web/MarkdownTextInput.css @@ -3,6 +3,14 @@ overflow: auto; } +.react-native-live-markdown-input-singleline p { + display: inline-block; +} + +.react-native-live-markdown-input-multiline p { + display: block; +} + .react-native-live-markdown-input-singleline::-webkit-scrollbar { display: none; } diff --git a/src/web/utils/blockUtils.ts b/src/web/utils/blockUtils.ts index 887ef4e1..73b72066 100644 --- a/src/web/utils/blockUtils.ts +++ b/src/web/utils/blockUtils.ts @@ -6,7 +6,6 @@ function addStyleToBlock(targetElement: HTMLElement, type: NodeType, markdownSty switch (type) { case 'line': Object.assign(node.style, { - display: 'block', margin: '0', padding: '0', });