@expensify/react-native-live-markdown

The parser prop allows you to define custom markdown logic. A parser is a function that takes a plaintext string and returns an array of MarkdownRange objects.

Critical Requirements:

• The parser function must be marked as a worklet (using the 'worklet'; directive) because it is executed on the UI thread as the user types.
• It should return an array of objects matching the MarkdownRange interface.

Supported MarkdownType values: 'bold' | 'italic' | 'strikethrough' | 'emoji' | 'mention-here' | 'mention-user' | 'mention-report' | 'link' | 'code' | 'pre' | 'blockquote' | 'h1' | 'syntax'

MarkdownRange Interface:

interface MarkdownRange {
  type: MarkdownType;
  start: number;
  length: number;
  depth?: number;
}

function parser(input: string) {
  'worklet';

  const ranges = [];
  const regexp = /\*(.*?)\*/g;
  let match;
  while ((match = regexp.exec(input)) !== null) {
    ranges.push({start: match.index, length: 1, type: 'syntax'});
    ranges.push({start: match.index + 1, length: match[1]!.length, type: 'bold'});
    ranges.push({start: match.index + 1 + match[1]!.length, length: 1, type: 'syntax'});
  }
  return ranges;
}

To run the example project, you must first ensure your React Native environment is set up according to the official React Native Environment Setup guide.

1. Start the Metro Bundler

Open a terminal at the root of the project and run:

npm start
# OR
yarn start

2. Launch the Application

Open a new terminal window (keep Metro running in the first one) and run the command for your target platform:

For Android:

npm run android
# OR
yarn android

For iOS:

npm run ios
# OR
yarn ios

3. Reloading Changes

After modifying App.tsx, reload the application to see updates:

• Android: Press the <kbd>R</kbd> key twice or open the Developer Menu (<kbd>Ctrl</kbd> + <kbd>M</kbd> on Windows/Linux, <kbd>Cmd ⌘</kbd> + <kbd>M</kbd> on macOS) and select "Reload".
• iOS: Press <kbd>Cmd ⌘</kbd> + <kbd>R</kbd> in the iOS Simulator.

The example project uses a custom Metro configuration to ensure that the root directory and the local directory are both included in the watchFolders. This allows Metro to resolve dependencies correctly across the monorepo-like structure used in the example. It also configures the transformer to use inlineRequires: true for optimized loading.

const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
const path = require('path');

const root = path.resolve(__dirname, '..');

/**
 * Metro configuration
 * https://reactnative.dev/docs/metro
 *
 * @type {import('@react-native/metro-config').MetroConfig}
 */
const config = {
  watchFolders: [root, __dirname],

transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
  },
};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);

The WebExample/playwright.config.ts file defines the testing environment for the web version of the project using Playwright. It specifies the test directory, the local web server command used to host the example, and the browser projects to be tested (Chromium, Firefox, and Webkit).

import {defineConfig, devices} from '@playwright/test';
// eslint-disable-next-line import/no-relative-packages
import * as TEST_CONST from '../example/src/testConstants';

export default defineConfig({
  testDir: './__tests__',
  preserveOutput: 'never',
  outputDir: undefined,
  webServer: {
    command: 'npm run web',
    url: TEST_CONST.LOCAL_URL,
    reuseExistingServer: !process.env.CI,
    stdout: 'pipe',
    stderr: 'pipe',
  },
  projects: [
    {
      name: 'Chromium',
      use: {...devices['Desktop Chrome']},
    },
    {
      name: 'Firefox',
      use: {...devices['Desktop Firefox']},
    },
    {
      name: 'Webkit',
      use: {...devices['Desktop Safari']},
    },
  ],
});

The MarkdownStyle type defines the visual properties for various markdown elements rendered by the MarkdownTextInputDecoratorView native component. You can use this type to provide a custom theme for syntax highlighting, emojis, links, headers, blockquotes, code blocks, and mentions.

Key styling groups include:

• syntax: Controls the color of syntax-highlighted text.
• emoji: Sets the fontSize and fontFamily for emojis.
• link: Sets the color for hyperlinks.
• h1: Sets the fontSize for H1 headers.
• blockquote: Controls the border and padding for blockquotes.
• code and pre: Use CodeBlockStyle to configure fonts, colors, and borders for code segments.
• mentionHere, mentionUser, and mentionReport: Style specific mention types with colors, background colors, and border radii.
• inlineImage: Controls dimensions and border radius for images embedded in text.
• loadingIndicator and loadingIndicatorContainer: Style the appearance of loading states.