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

.eslintrc.js

@@ -31,6 +31,7 @@ module.exports = {
   root: true,
   rules: {
     'rulesdir/prefer-underscore-method': 'off',
+    'rulesdir/prefer-import-module-contents': 'off',
     'react/jsx-props-no-spreading': 'off',
     'react/require-default-props': 'off',
     'react/jsx-filename-extension': ['error', { extensions: ['.tsx', '.jsx'] }],
@@ -58,9 +59,11 @@ module.exports = {
       'error',
       { fixMixedExportsWithInlineTypeSpecifier: false },
     ],
+    'valid-jsdoc': 'off',
     'tsdoc/syntax': 'error',
     '@typescript-eslint/no-non-null-assertion': 'off',
     '@typescript-eslint/array-type': ['error', {default: 'array-simple'}],
     '@typescript-eslint/consistent-type-definitions': 'off',
+    'curly': ['error', 'all'],
   },
 };

.github/workflows/build-android.yml

@@ -46,10 +46,6 @@ jobs:
       - name: Install node_modules
         run: yarn install --immutable
 
-      - name: Apply patches
-        working-directory: example
-        run: yarn patch-package
-
       - name: Build app
         working-directory: example/android
         run: ./gradlew assembleDebug --build-cache -PreactNativeArchitectures=arm64-v8a -PnewArchEnabled=${{ matrix.react-native-architecture == 'Fabric' && 'true' || 'false' }}

.github/workflows/publish.yml

@@ -17,9 +17,12 @@ jobs:
        if: ${{ github.actor != 'OSBotify' }}
 
        steps:
-           - uses: actions/checkout@v3
+           - uses: actions/checkout@v4
              with:
                ref: main
+               # The OS_BOTIFY_COMMIT_TOKEN is a personal access token tied to osbotify
+               # This is a workaround to allow pushes to a protected branch
+               token: ${{ secrets.OS_BOTIFY_COMMIT_TOKEN }}
 
            - name: Decrypt & Import OSBotify GPG key
              run: |
@@ -36,17 +39,11 @@ jobs:
                git config --global user.name OSBotify
                git config --global user.email [email protected]
 
-           - uses: actions/setup-node@v3
+           - uses: actions/setup-node@v4
              with:
-               node-version: '16.x'
+               node-version-file: '.nvmrc'
                registry-url: 'https://registry.npmjs.org'
 
-           - name: Generate branch name
-             run: echo "BRANCH_NAME=OSBotify-bump-version-$(uuidgen)" >> $GITHUB_ENV
-
-           - name: Create branch for version-bump pull request
-             run: git checkout -b ${{ env.BRANCH_NAME }}
-
            - name: Install yarn packages
              run: yarn install --immutable
 
@@ -63,26 +60,7 @@ jobs:
              run: git tag ${{ env.NEW_VERSION }}
 
            - name: Push branch and publish tags
-             run: git push --set-upstream origin ${{ env.BRANCH_NAME }} && git push --tags
-
-           - name: Create pull request
-             run: |
-               gh pr create \
-                 --title "Update version to ${{ env.NEW_VERSION }}" \
-                 --body "Update version to ${{ env.NEW_VERSION }}"
-               sleep 5
-             env:
-               GITHUB_TOKEN: ${{ secrets.OS_BOTIFY_TOKEN }}
-
-           - name: Auto-approve pull request
-             run: gh pr review --approve ${{ env.BRANCH_NAME }}
-             env:
-               GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
-           - name: Auto-merge pull request
-             run: gh pr merge --squash --delete-branch ${{ env.BRANCH_NAME }}
-             env:
-               GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+             run: git push --set-upstream origin main && git push --tags
 
            - name: Build package
              run: yarn pack

.github/workflows/web-e2e-test.yml

@@ -0,0 +1,49 @@
+name: Test web E2E
+on:
+  pull_request:
+    paths:
+      - .github/workflows/web-e2e-test.yml
+      - src/**
+      - WebExample/**
+  merge_group:
+    branches:
+      - main
+  push:
+    branches:
+      - main
+    paths:
+      - .github/workflows/web-e2e-test.yml
+      - src/**
+      - WebExample/**
+
+jobs:
+  test:
+    if: github.repository == 'Expensify/react-native-live-markdown'
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./WebExample
+
+    concurrency:
+      group: web-e2e-test-${{ github.ref }}
+      cancel-in-progress: true
+    steps:
+      - name: Check out Git repository
+        uses: actions/checkout@v4
+
+      - name: Use Node.js 18
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18
+
+      - name: Install node_modules
+        run: yarn install --immutable
+
+      - name: Install browsers
+        run: npx playwright install --with-deps
+
+      - name: Install dependencies for browsers
+        run: npx playwright install-deps
+
+      - name: Run Playwright tests
+        run: yarn test

.gitignore

@@ -79,3 +79,4 @@ lib/
 
 # react-native-live-markdown
 android/src/main/assets/react-native-live-markdown-parser.js
+.build_complete

.yarnrc.yml

@@ -10,4 +10,4 @@ plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-version.cjs
     spec: "@yarnpkg/plugin-version"
 
-yarnPath: .yarn/releases/yarn-3.6.1.cjs
+yarnPath: .yarn/releases/yarn-3.6.4.cjs

README.md

@@ -120,7 +120,7 @@ The style object can be passed to multiple `MarkdownTextInput` components using
 
 ## Markdown flavors support
 
-Currently, `react-native-live-markdown` supports only [ExpensiMark](https://github.com/Expensify/expensify-common/blob/main/lib/ExpensiMark.js) flavor. We are working on CommonMark support as well as possibility to use other Markdown parsers.
+Currently, `react-native-live-markdown` supports only [ExpensiMark](https://github.com/Expensify/expensify-common/blob/main/lib/ExpensiMark.ts) flavor. We are working on CommonMark support as well as possibility to use other Markdown parsers.
 
 ## API reference
 
@@ -132,7 +132,7 @@ Currently, `react-native-live-markdown` supports only [ExpensiMark](https://gith
 
 ## Compatibility
 
-`react-native-live-markdown` requires React Native 0.71 or newer.
+`react-native-live-markdown` requires React Native 0.74 or newer.
 
 ## License
 

RNLiveMarkdown.podspec

@@ -1,5 +1,9 @@
 require "json"
 
+react_native_node_modules_dir = ENV['REACT_NATIVE_NODE_MODULES_DIR'] || File.join(File.dirname(`cd "#{Pod::Config.instance.installation_root.to_s}" && node --print "require.resolve('react-native/package.json')"`), '..')
+react_native_json = JSON.parse(File.read(File.join(react_native_node_modules_dir, 'react-native/package.json')))
+react_native_minor_version = react_native_json['version'].split('.')[1].to_i
+
 package = JSON.parse(File.read(File.join(__dir__, "package.json")))
 folly_compiler_flags = '-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -Wno-comma -Wno-shorten-64-to-32'
 
@@ -11,13 +15,19 @@ Pod::Spec.new do |s|
   s.license      = package["license"]
   s.authors      = package["author"]
 
-  s.platforms    = { :ios => "11.0" }
+  s.platforms    = { :ios => "11.0", :visionos => "1.0" }
   s.source       = { :git => "https://github.com/expensify/react-native-live-markdown.git", :tag => "#{s.version}" }
 
   s.source_files = "ios/**/*.{h,m,mm}"
 
   s.resources = "parser/react-native-live-markdown-parser.js"
 
+  s.dependency "hermes-engine"
+
+  s.xcconfig = {
+    "OTHER_CFLAGS" => "$(inherited) -DREACT_NATIVE_MINOR_VERSION=#{react_native_minor_version}"
+  }
+
   install_modules_dependencies(s)
 
   if ENV['USE_FRAMEWORKS'] && ENV['RCT_NEW_ARCH_ENABLED']

WebExample/.gitignore

@@ -33,3 +33,7 @@ yarn-error.*
 
 # typescript
 *.tsbuildinfo
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

WebExample/__tests__/.eslintrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+  rules: {
+    '@lwc/lwc/no-async-await': 'off',
+    'rulesdir/prefer-import-module-contents': 'off',
+  },
+};

WebExample/__tests__/input.spec.ts

@@ -0,0 +1,32 @@
+import {test, expect} from '@playwright/test';
+import * as TEST_CONST from '../../example/src/testConstants';
+import {getCursorPosition, getElementValue, setupInput} from './utils';
+
+test.beforeEach(async ({page}) => {
+  await page.goto(TEST_CONST.LOCAL_URL, {waitUntil: 'load'});
+});
+
+test.describe('typing', () => {
+  test('short text', async ({page}) => {
+    const inputLocator = await setupInput(page, 'clear');
+
+    await inputLocator.focus();
+    await inputLocator.pressSequentially(TEST_CONST.EXAMPLE_CONTENT);
+
+    expect(await getElementValue(inputLocator)).toEqual(TEST_CONST.EXAMPLE_CONTENT);
+  });
+
+  test('fast type cursor position', async ({page}) => {
+    const EXAMPLE_LONG_CONTENT = TEST_CONST.EXAMPLE_CONTENT.repeat(3);
+
+    const inputLocator = await setupInput(page, 'clear');
+
+    await inputLocator.pressSequentially(EXAMPLE_LONG_CONTENT);
+
+    expect(await getElementValue(inputLocator)).toBe(EXAMPLE_LONG_CONTENT);
+
+    const cursorPosition = await getCursorPosition(inputLocator);
+
+    expect(cursorPosition.end).toBe(EXAMPLE_LONG_CONTENT.length);
+  });
+});

WebExample/__tests__/styles.spec.ts

@@ -0,0 +1,62 @@
+import {test, expect} from '@playwright/test';
+import type {Page} from '@playwright/test';
+import * as TEST_CONST from '../../example/src/testConstants';
+import {setupInput, getElementStyle} from './utils';
+
+const testMarkdownContentStyle = async ({testContent, style, page}: {testContent: string; style: string; page: Page}) => {
+  const inputLocator = await setupInput(page);
+
+  const elementHandle = inputLocator.locator('span', {hasText: testContent}).last();
+  const elementStyle = await getElementStyle(elementHandle);
+
+  expect(elementStyle).toEqual(style);
+};
+
+test.beforeEach(async ({page}) => {
+  await page.goto(TEST_CONST.LOCAL_URL, {waitUntil: 'load'});
+  await page.click('[data-testid="reset"]');
+});
+
+test.describe('markdown content styling', () => {
+  test('bold', async ({page}) => {
+    await testMarkdownContentStyle({testContent: 'world', style: 'font-weight: bold;', page});
+  });
+
+  test('link', async ({page}) => {
+    await testMarkdownContentStyle({testContent: 'https://expensify.com', style: 'color: blue; text-decoration: underline;', page});
+  });
+
+  test('h1', async ({page}) => {
+    await testMarkdownContentStyle({testContent: 'header1', style: 'font-size: 25px; font-weight: bold;', page});
+  });
+
+  test('inline code', async ({page}) => {
+    await testMarkdownContentStyle({testContent: 'inline code', style: 'font-family: monospace; font-size: 20px; color: black; background-color: lightgray;', page});
+  });
+
+  test('codeblock', async ({page}) => {
+    await testMarkdownContentStyle({testContent: 'codeblock', style: 'font-family: monospace; font-size: 20px; color: black; background-color: lightgray;', page});
+  });
+
+  test('mention-here', async ({page}) => {
+    await testMarkdownContentStyle({testContent: 'here', style: 'color: green; background-color: lime;', page});
+  });
+
+  test('mention-user', async ({page}) => {
+    await testMarkdownContentStyle({testContent: '[email protected]', style: 'color: blue; background-color: cyan;', page});
+  });
+
+  test('mention-report', async ({page}) => {
+    await testMarkdownContentStyle({testContent: 'mention-report', style: 'color: red; background-color: pink;', page});
+  });
+
+  test('blockquote', async ({page, browserName}) => {
+    const blockquoteStyle =
+      'border-color: gray; border-width: 6px; margin-left: 6px; padding-left: 6px; border-left-style: solid; display: inline-block; max-width: 100%; box-sizing: border-box;';
+
+    // Firefox border properties are serialized slightly differently
+    const browserStyle = browserName === 'firefox' ? blockquoteStyle.replace('border-left-style: solid', 'border-left: 6px solid gray') : blockquoteStyle;
+
+    await testMarkdownContentStyle({testContent: 'blockquote', style: browserStyle, page});
+  });
+});