Multiline scroll fix (#217)

src/MarkdownTextInput.web.tsx

@@ -15,6 +15,7 @@ import {StyleSheet} from 'react-native';
 import * as ParseUtils from './web/parserUtils';
 import * as CursorUtils from './web/cursorUtils';
 import * as StyleUtils from './styleUtils';
+import * as BrowserUtils from './web/browserUtils';
 import type * as MarkdownTextInputDecoratorViewNativeComponent from './MarkdownTextInputDecoratorViewNativeComponent';
 import './web/MarkdownTextInput.css';
 import InputHistory from './web/InputHistory';
@@ -380,6 +381,14 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
             //   We need to change normal behavior of "Enter" key to insert a line breaks, to prevent wrapping contentEditable text in <div> tags.
             //  Thanks to that in every situation we have proper amount of new lines in our parsed text. Without it pressing enter in empty lines will add 2 more new lines.
             document.execCommand('insertLineBreak');
+
+            const range = window.getSelection();
+            if (range && !BrowserUtils.isFirefox) {
+              const scrollMarkerNode = document.createElement('div');
+              range.getRangeAt(0).insertNode(scrollMarkerNode);
+              scrollMarkerNode.scrollIntoView();
+              scrollMarkerNode.remove();
+            }
           }
 
           if (!e.shiftKey && ((shouldBlurOnSubmit && hostNode !== null) || !multiline)) {

src/web/browserUtils.ts

@@ -0,0 +1,4 @@
+const isFirefox = navigator.userAgent.toLowerCase().includes('firefox');
+const isChromium = 'chrome' in window;
+
+export {isFirefox, isChromium};

src/web/parserUtils.ts

@@ -1,5 +1,6 @@
 import * as CursorUtils from './cursorUtils';
 import type * as StyleUtilsTypes from '../styleUtils';
+import * as BrowserUtils from './browserUtils';
 
 type PartialMarkdownStyle = StyleUtilsTypes.PartialMarkdownStyle;
 
@@ -172,8 +173,6 @@ function moveCursor(isFocused: boolean, alwaysMoveCursorToTheEnd: boolean, curso
   }
 }
 
-const isChromium = 'chrome' in window;
-
 function parseText(target: HTMLElement, text: string, curosrPositionIndex: number | null, markdownStyle: PartialMarkdownStyle = {}, alwaysMoveCursorToTheEnd = false) {
   const targetElement = target;
 
@@ -202,12 +201,12 @@ function parseText(target: HTMLElement, text: string, curosrPositionIndex: numbe
       targetElement.innerText = '';
       target.appendChild(dom);
 
-      if (isChromium) {
+      if (BrowserUtils.isChromium) {
         moveCursor(isFocused, alwaysMoveCursorToTheEnd, cursorPosition, target);
       }
     }
 
-    if (!isChromium) {
+    if (!BrowserUtils.isChromium) {
       moveCursor(isFocused, alwaysMoveCursorToTheEnd, cursorPosition, target);
     }
   }