From 1171452a597af3b4d1d2e49853779c5950dbb1a1 Mon Sep 17 00:00:00 2001
From: Bartosz Grajdek <bartosz.grajdek@swmansion.com>
Date: Fri, 8 Mar 2024 16:52:44 +0100
Subject: [PATCH] Multiline scroll fix (#217)

---
 src/MarkdownTextInput.web.tsx | 9 +++++++++
 src/web/browserUtils.ts       | 4 ++++
 src/web/parserUtils.ts        | 7 +++----
 3 files changed, 16 insertions(+), 4 deletions(-)
 create mode 100644 src/web/browserUtils.ts

diff --git a/src/MarkdownTextInput.web.tsx b/src/MarkdownTextInput.web.tsx
index 4adc7f8d..bc1d2d33 100644
--- a/src/MarkdownTextInput.web.tsx
+++ b/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)) {
diff --git a/src/web/browserUtils.ts b/src/web/browserUtils.ts
new file mode 100644
index 00000000..0553197d
--- /dev/null
+++ b/src/web/browserUtils.ts
@@ -0,0 +1,4 @@
+const isFirefox = navigator.userAgent.toLowerCase().includes('firefox');
+const isChromium = 'chrome' in window;
+
+export {isFirefox, isChromium};
diff --git a/src/web/parserUtils.ts b/src/web/parserUtils.ts
index b5639592..73df1b6c 100644
--- a/src/web/parserUtils.ts
+++ b/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);
     }
   }