Merge branch 'main' into @tomekzaw/worklets

Expensify · Oct 28, 2024 · c82c6fc · c82c6fc
2 parents 8cd222e + 4e4f13d
commit c82c6fc
Show file tree

Hide file tree

Showing 11 changed files with 56 additions and 100 deletions.
diff --git a/.github/workflows/cla.yml b/.github/workflows/cla.yml
@@ -1,39 +1,12 @@
 name: CLA Assistant
 
 on:
-    issue_comment:
-        types: [created]
-    pull_request_target:
-        types: [opened, closed, synchronize]
+  issue_comment:
+    types: [created]
+  pull_request_target:
+    types: [opened, synchronize]
 
 jobs:
-    CLA:
-        runs-on: ubuntu-latest
-        # This job only runs for pull request comments or pull request target events (not issue comments)
-        if: github.event.issue.pull_request || github.event_name == 'pull_request_target'
-        steps:
-            - uses: actions-ecosystem/action-regex-match@9c35fe9ac1840239939c59e5db8839422eed8a73
-              id: sign
-              with:
-                  text: ${{ github.event.comment.body }}
-                  regex: '\s*I have read the CLA Document and I hereby sign the CLA\s*'
-            - uses: actions-ecosystem/action-regex-match@9c35fe9ac1840239939c59e5db8839422eed8a73
-              id: recheck
-              with:
-                  text: ${{ github.event.comment.body }}
-                  regex: '\s*recheck\s*'
-            - name: CLA Assistant
-              if: ${{ steps.recheck.outputs.match != '' || steps.sign.outputs.match != '' }} || github.event_name == 'pull_request_target'
-              # Version: 2.1.2-beta
-              uses: cla-assistant/github-action@948230deb0d44dd38957592f08c6bd934d96d0cf
-              env:
-                  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-                  PERSONAL_ACCESS_TOKEN : ${{ secrets.CLA_BOTIFY_TOKEN }}
-              with:
-                  path-to-signatures: '${{ github.repository }}/cla.json'
-                  path-to-document: 'https://github.com/${{ github.repository }}/blob/main/CLA.md'
-                  branch: 'main'
-                  remote-organization-name: 'Expensify'
-                  remote-repository-name: 'CLA'
-                  lock-pullrequest-aftermerge: false
-                  allowlist: 'snyk-bot,OSBotify'
+  CLA:
+    uses: Expensify/GitHub-Actions/.github/workflows/cla.yml@main
+    secrets: inherit
diff --git a/README.md b/README.md
@@ -179,7 +179,14 @@ Currently, `react-native-live-markdown` supports only [ExpensiMark](https://gith
 
 ## Compatibility
 
-`react-native-live-markdown` requires React Native 0.74 or newer.
+`react-native-live-markdown` requires React Native 0.75 or newer.
+
+| react-native | @expensify/react-native-live-markdown |
+| :----------: | :-----------------------------------: |
+|     0.76     |               0.1.141+                |
+|     0.75     |               0.1.129+                |
+|     0.74     |           0.1.122 – 0.1.128           |
+|     0.73     |           0.1.15 – 0.1.121            |
 
 ## License
 

diff --git a/android/src/main/assets/react-native-live-markdown-parser.js b/android/src/main/assets/react-native-live-markdown-parser.js
diff --git a/example/package.json b/example/package.json
@@ -9,7 +9,7 @@
     "start": "react-native start"
   },
   "dependencies": {
-    "expensify-common": "2.0.98",
+    "expensify-common": "2.0.101",
     "react": "18.3.1",
     "react-native": "0.75.3",
     "react-native-reanimated": "3.16.0-nightly-20241003-18a6355cb"

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -5,7 +5,6 @@ import {
   MarkdownTextInput,
   parseExpensiMark,
 } from '@expensify/react-native-live-markdown';
-import type {TextInput} from 'react-native';
 import * as TEST_CONST from './testConstants';
 import {PlatformInfo} from './PlatformInfo';
 
@@ -44,8 +43,7 @@ export default function App() {
     };
   }, [emojiFontSizeState, linkColorState]);
 
-  // TODO: use MarkdownTextInput ref instead of TextInput ref
-  const ref = React.useRef<TextInput>(null);
+  const ref = React.useRef<MarkdownTextInput>(null);
 
   return (
     <View style={styles.container}>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@expensify/react-native-live-markdown",
-  "version": "0.1.170",
+  "version": "0.1.177",
   "description": "Drop-in replacement for React Native's TextInput component with Markdown formatting.",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -84,7 +84,7 @@
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-tsdoc": "^0.2.17",
-    "expensify-common": "2.0.98",
+    "expensify-common": "2.0.101",
     "jest": "^29.6.3",
     "jest-environment-jsdom": "^29.7.0",
     "nodemon": "^3.1.3",
@@ -105,7 +105,7 @@
     "html-entities@^2.3.2": "patch:html-entities@npm%3A2.5.2#./.yarn/patches/html-entities-npm-2.5.2-0b6113e376.patch"
   },
   "peerDependencies": {
-    "expensify-common": ">=2.0.98",
+    "expensify-common": ">=2.0.101",
     "react": "*",
     "react-native": "*",
     "react-native-reanimated": ">=3.15.0"

diff --git a/src/MarkdownTextInput.tsx b/src/MarkdownTextInput.tsx
@@ -56,6 +56,8 @@ interface MarkdownTextInputProps extends TextInputProps, InlineImagesInputProps
   parser: (value: string) => MarkdownRange[];
 }
 
+type MarkdownTextInput = TextInput & React.Component<MarkdownTextInputProps>;
+
 function processColorsInMarkdownStyle(input: MarkdownStyle): MarkdownStyle {
   const output = JSON.parse(JSON.stringify(input));
 
@@ -77,7 +79,7 @@ function processMarkdownStyle(input: PartialMarkdownStyle | undefined): Markdown
   return processColorsInMarkdownStyle(mergeMarkdownStyleWithDefault(input));
 }
 
-const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>((props, ref) => {
+const MarkdownTextInput = React.forwardRef<MarkdownTextInput, MarkdownTextInputProps>((props, ref) => {
   const IS_FABRIC = 'nativeFabricUIManager' in global;
 
   const markdownStyle = React.useMemo(() => processMarkdownStyle(props.markdownStyle), [props.markdownStyle]);

diff --git a/src/MarkdownTextInput.web.tsx b/src/MarkdownTextInput.web.tsx
@@ -39,6 +39,8 @@ interface MarkdownNativeEvent extends Event {
   inputType: string;
 }
 
+type MarkdownTextInput = TextInput & React.Component<MarkdownTextInputProps>;
+
 type Selection = {
   start: number;
   end: number;
@@ -60,13 +62,14 @@ type MarkdownTextInputElement = HTMLDivElement &
   HTMLInputElement & {
     tree: TreeNode;
     selection: Selection;
+    imageElements: HTMLImageElement[];
   };
 
 type HTMLMarkdownElement = HTMLElement & {
   value: string;
 };
 
-const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
+const MarkdownTextInput = React.forwardRef<MarkdownTextInput, MarkdownTextInputProps>(
   (
     {
       accessibilityLabel,

diff --git a/src/web/inputElements/inlineImage.ts b/src/web/inputElements/inlineImage.ts
@@ -75,11 +75,17 @@ function handleOnLoad(
       justifyContent: 'center',
     }),
   });
-
   Object.assign(img.style, !err && imgStyle);
 
   targetElement.appendChild(imageContainer);
 
+  const currentInputElement = currentInput;
+  if (currentInput.imageElements) {
+    currentInputElement.imageElements.push(img);
+  } else {
+    currentInputElement.imageElements = [img];
+  }
+
   const imageClientHeight = Math.max(img.clientHeight, imageContainer.clientHeight);
   Object.assign(imageContainer.style, {
     height: `${imageClientHeight}px`,
@@ -164,7 +170,7 @@ function addInlineImagePreview(
 
   // If the inline image markdown with the same href exists in the current input, use it instead of creating new one.
   // Prevents from image flickering and layout jumps
-  const alreadyLoadedPreview = currentInput.querySelector(`img[src="${imageHref}"]`);
+  const alreadyLoadedPreview = currentInput.imageElements?.find((el) => el?.src === imageHref);
   const loadedImageContainer = alreadyLoadedPreview?.parentElement;
 
   if (loadedImageContainer && loadedImageContainer.getAttribute('data-type') === 'inline-container') {

diff --git a/src/web/utils/cursorUtils.ts b/src/web/utils/cursorUtils.ts
@@ -54,28 +54,21 @@ function setCursorPosition(target: MarkdownTextInputElement, startIndex: number,
 
 function scrollIntoView(target: MarkdownTextInputElement, node: TreeNode) {
   const targetElement = target;
-  if (node.type === 'br' && node.parentNode?.parentNode?.type === 'line') {
-    // If the node is a line break, scroll to the parent paragraph, because Safari doesn't support scrollIntoView on br elements
-    node.parentNode.parentNode.element.scrollIntoView({
-      block: 'nearest',
-    });
-  } else {
-    const selection = window.getSelection();
-    if (selection && selection.rangeCount > 0) {
-      const range = selection.getRangeAt(0);
-      const caretRect = range.getBoundingClientRect();
-      const targetRect = target.getBoundingClientRect();
-
-      // In case the caret is below the visible input area, scroll to the end of the node
-      if (caretRect.top + caretRect.height > targetRect.top + targetRect.height) {
-        targetElement.scrollTop = caretRect.top + caretRect.height - targetRect.top - targetRect.height + target.scrollTop;
-      }
-    }
-
-    node.element.scrollIntoView({
-      block: 'nearest',
-    });
+  const orderIndex = Number(node.orderIndex.split(',')[0]);
+  const currentLine = target.tree.childNodes[orderIndex]?.element;
+  const scrollTargetElement = currentLine || node.element;
+
+  const caretRect = scrollTargetElement.getBoundingClientRect();
+  const targetRect = target.getBoundingClientRect();
+  // In case the caret is below the visible input area, scroll to the end of the node
+  if (caretRect.top + caretRect.height > targetRect.top + targetRect.height) {
+    targetElement.scrollTop = caretRect.top - targetRect.top + target.scrollTop - targetRect.height + caretRect.height + 4;
+    return;
   }
+
+  scrollTargetElement.scrollIntoView({
+    block: 'nearest',
+  });
 }
 
 function moveCursorToEnd(target: HTMLElement) {

diff --git a/yarn.lock b/yarn.lock
@@ -2883,7 +2883,7 @@ __metadata:
     babel-jest: ^29.6.3
     babel-plugin-module-resolver: ^5.0.0
     eslint: ^8.19.0
-    expensify-common: 2.0.98
+    expensify-common: 2.0.101
     jest: ^29.6.3
     prettier: 2.8.8
     react: 18.3.1
@@ -2924,7 +2924,7 @@ __metadata:
     eslint-plugin-prettier: ^4.0.0
     eslint-plugin-promise: ^6.1.1
     eslint-plugin-tsdoc: ^0.2.17
-    expensify-common: 2.0.98
+    expensify-common: 2.0.101
     jest: ^29.6.3
     jest-environment-jsdom: ^29.7.0
     nodemon: ^3.1.3
@@ -2938,7 +2938,7 @@ __metadata:
     turbo: ^1.10.7
     typescript: ^5.3.3
   peerDependencies:
-    expensify-common: ">=2.0.98"
+    expensify-common: ">=2.0.101"
     react: "*"
     react-native: "*"
     react-native-reanimated: ">=3.15.0"
@@ -10610,9 +10610,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"expensify-common@npm:2.0.98":
-  version: 2.0.98
-  resolution: "expensify-common@npm:2.0.98"
+"expensify-common@npm:2.0.101":
+  version: 2.0.101
+  resolution: "expensify-common@npm:2.0.101"
   dependencies:
     awesome-phonenumber: ^5.4.0
     classnames: 2.5.0
@@ -10627,7 +10627,7 @@ __metadata:
     semver: ^7.6.3
     simply-deferred: "git+https://github.com/Expensify/simply-deferred.git#77a08a95754660c7bd6e0b6979fdf84e8e831bf5"
     ua-parser-js: ^1.0.38
-  checksum: 84ced57105e06d9b7393fb66d263b9aa74b40e7017c41ca605eb8e92b19bbb940163f5ee2cdc4407d5192b9e583a0af2f420ef8258ab44e2e04f55ecf3bb88e2
+  checksum: 44708e722de18d5b8002c9cbe01f218a6bf600a5ff70ed6967220155dc5cf4abbd578df9c8040325636bf3420473c0709a75fae655a8df29dfb21538ae1d0282
   languageName: node
   linkType: hard