Merge branch 'main' into @robertKozik/stop-formatting-emojis

Expensify · Jun 7, 2024 · d245ae9 · d245ae9
2 parents baa4ba7 + 29727d6
commit d245ae9
Show file tree

Hide file tree

Showing 13 changed files with 374 additions and 244 deletions.
diff --git a/example/ios/Podfile.lock b/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
 

diff --git a/ios/MarkdownTextInputDecoratorView.mm b/ios/MarkdownTextInputDecoratorView.mm
@@ -72,6 +72,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"];

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

diff --git a/parser/babel.config.json b/parser/babel.config.json
@@ -0,0 +1,3 @@
+{
+  "presets": ["module:@react-native/babel-preset"]
+}
diff --git a/parser/index.ts b/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';
@@ -15,7 +14,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,
   });
@@ -156,10 +155,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

diff --git a/parser/package.json b/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"
   }
 }
diff --git a/parser/patches/expensify-common+1.0.0.patch b/parser/patches/expensify-common+1.0.0.patch
diff --git a/parser/react-native-live-markdown-parser.js b/parser/react-native-live-markdown-parser.js
diff --git a/src/MarkdownTextInput.web.tsx b/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;
@@ -559,7 +559,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 +586,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

diff --git a/src/web/browserUtils.ts b/src/web/browserUtils.ts
@@ -1,4 +1,11 @@
 const isFirefox = navigator.userAgent.toLowerCase().includes('firefox');
 const isChromium = 'chrome' in window;
 
-export {isFirefox, isChromium};
+/**
+ * Whether the platform is a mobile browser.
+ * Copied from Expensify App https://github.com/Expensify/App/blob/90dee7accae79c49debf30354c160cab6c52c423/src/libs/Browser/index.website.ts#L41
+ *
+ */
+const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Silk|Opera Mini/i.test(navigator.userAgent);
+
+export {isFirefox, isChromium, isMobile};