Merge branch 'main' into @maksg/performance-fixes-ios

example/ios/Podfile.lock

@@ -1111,12 +1111,12 @@ PODS:
     - React-jsi (= 0.73.4)
     - React-logger (= 0.73.4)
     - React-perflogger (= 0.73.4)
-  - RNLiveMarkdown (0.1.54):
+  - RNLiveMarkdown (0.1.79):
     - glog
     - RCT-Folly (= 2022.05.16.00)
     - React-Core
-    - RNLiveMarkdown/common (= 0.1.54)
-  - RNLiveMarkdown/common (0.1.54):
+    - RNLiveMarkdown/common (= 0.1.79)
+  - RNLiveMarkdown/common (0.1.79):
     - glog
     - RCT-Folly (= 2022.05.16.00)
     - React-Core
@@ -1376,7 +1376,7 @@ SPEC CHECKSUMS:
   React-runtimescheduler: ed48e5faac6751e66ee1261c4bd01643b436f112
   React-utils: 6e5ad394416482ae21831050928ae27348f83487
   ReactCommon: 840a955d37b7f3358554d819446bffcf624b2522
-  RNLiveMarkdown: 2f6f838a2089bd7337020a82800cb0c05c48c5d9
+  RNLiveMarkdown: a4ddf419a109cd3f916db22ee19f8b8293b4f7e4
   SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17
   Yoga: 64cd2a583ead952b0315d5135bf39e053ae9be70
 

ios/MarkdownTextInputDecoratorView.mm

@@ -68,6 +68,14 @@ - (void)didMoveToWindow {
     _textView = (RCTUITextView *)_backedTextInputView;
     [_textView setMarkdownUtils:_markdownUtils];
     NSLayoutManager *layoutManager = _textView.layoutManager; // switching to TextKit 1 compatibility mode
+
+    // Correct content height in TextKit 1 compatibility mode. (See https://github.com/Expensify/App/issues/41567)
+    // Consider removing this fix if it is no longer needed after migrating to TextKit 2.
+    CGSize contentSize = _textView.contentSize;
+    CGRect textBounds = [layoutManager usedRectForTextContainer:_textView.textContainer];
+    contentSize.height = textBounds.size.height + _textView.textContainerInset.top + _textView.textContainerInset.bottom;
+    [_textView setContentSize:contentSize];
+
     layoutManager.allowsNonContiguousLayout = NO; // workaround for onScroll issue
     object_setClass(layoutManager, [MarkdownLayoutManager class]);
     [layoutManager setValue:_markdownUtils forKey:@"markdownUtils"];

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@expensify/react-native-live-markdown",
-  "version": "0.1.76",
+  "version": "0.1.82",
   "description": "Drop-in replacement for React Native's TextInput component with Markdown formatting.",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

parser/babel.config.json

@@ -0,0 +1,3 @@
+{
+  "presets": ["module:@react-native/babel-preset"]
+}

parser/index.ts

@@ -1,6 +1,5 @@
-// @ts-expect-error - to review how it's implemented in ExpensiMark
 // eslint-disable-next-line import/no-unresolved
-import {ExpensiMark} from 'expensify-common/lib/ExpensiMark';
+import ExpensiMark from 'expensify-common/dist/ExpensiMark';
 import _ from 'underscore';
 
 type MarkdownType = 'bold' | 'italic' | 'strikethrough' | 'emoji' | 'mention-here' | 'mention-user' | 'mention-report' | 'link' | 'code' | 'pre' | 'blockquote' | 'h1' | 'syntax';
@@ -14,7 +13,7 @@ type Token = ['TEXT' | 'HTML', string];
 type StackItem = {tag: string; children: Array<StackItem | string>};
 
 function parseMarkdownToHTML(markdown: string): string {
-  const parser = ExpensiMark;
+  const parser = new ExpensiMark();
   const html = parser.replace(markdown, {
     shouldKeepRawInput: true,
   });
@@ -155,10 +154,9 @@ function parseTreeToTextAndRanges(tree: StackItem): [string, Range[]] {
         appendSyntax('# ');
         addChildrenWithStyle(node, 'h1');
       } else if (node.tag.startsWith('<pre')) {
-        const content = _.unescape(node.tag.match(/data-code-raw="([^"]*)"/)![1]!); // always present
-
         appendSyntax('```');
-        addChildrenWithStyle(content, 'pre');
+        const content = node.children.join('').replaceAll('&#32;', ' ');
+        addChildrenWithStyle(`\n${content}`, 'pre');
         appendSyntax('```');
       } else if (node.tag.startsWith('<a href="')) {
         const rawHref = node.tag.match(/href="([^"]*)"/)![1]!; // always present

parser/package.json

@@ -6,22 +6,23 @@
   "main": "index.js",
   "scripts": {
     "test": "jest",
-    "build": "esbuild index.ts --bundle --minify --outfile=react-native-live-markdown-parser.js",
-    "run": "node react-native-live-markdown-parser.js",
-    "postinstall": "patch-package"
+    "build": "esbuild index.ts --bundle --outfile=build/index.esbuild.js && babel build/index.esbuild.js --out-file build/index.babel.js && esbuild build/index.babel.js --bundle --minify --outfile=react-native-live-markdown-parser.js && rm -rf build",
+    "run": "node react-native-live-markdown-parser.js"
   },
   "author": "",
   "license": "ISC",
   "devDependencies": {
+    "@babel/cli": "^7.24.7",
+    "@babel/core": "^7.24.7",
+    "@react-native/babel-preset": "0.73.21",
     "@types/underscore": "^1.11.15",
     "esbuild": "0.19.4",
     "esbuild-plugin-tsc": "^0.4.0",
     "jest": "^29.7.0",
     "typescript": "^5.3.3"
   },
   "dependencies": {
-    "expensify-common": "Expensify/expensify-common#a018512b1e0fce4d4b5a61c00ca826b8887007ad",
-    "patch-package": "^8.0.0",
+    "expensify-common": "2.0.10",
     "underscore": "^1.13.6"
   }
 }

src/MarkdownTextInput.web.tsx

@@ -16,6 +16,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';
@@ -336,8 +337,7 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
           return;
         }
         const changedText = e.target.innerText;
-
-        if (compositionRef.current) {
+        if (compositionRef.current && !BrowserUtils.isMobile) {
           updateTextColor(divRef.current, changedText);
           compositionRef.current = false;
           return;
@@ -363,6 +363,12 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
           default:
             text = parseText(divRef.current, changedText, processedMarkdownStyle).text;
         }
+
+        const selectionAfterTextChange = CursorUtils.getCurrentCursorPosition(divRef.current);
+        if (selectionAfterTextChange) {
+          contentSelection.current = selectionAfterTextChange;
+        }
+
         if (pasteRef?.current) {
           pasteRef.current = false;
           updateSelection(e);
@@ -559,7 +565,8 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
         }
 
         const text = processedValue !== undefined ? processedValue : '';
-        parseText(divRef.current, text, processedMarkdownStyle, text.length);
+
+        parseText(divRef.current, text, processedMarkdownStyle, contentSelection.current?.end);
         updateTextColor(divRef.current, value);
       },
       [multiline, processedMarkdownStyle, processedValue],
@@ -585,7 +592,8 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
       if (autoFocus) {
         divRef.current.focus();
       }
-    }, [autoFocus]);
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
 
     useEffect(() => {
       // update content size when the input styles change