Merge branch 'main' into CI-improve

.eslintignore

@@ -15,4 +15,3 @@ react-native.config.js
 jest.config.js
 webpack.config.js
 .eslintrc.js
-.prettierrc.js

.eslintrc.js

@@ -29,18 +29,6 @@ module.exports = {
   },
   root: true,
   rules: {
-    'prettier/prettier': [
-      'error',
-      {
-        tabWidth: 2,
-        singleQuote: true,
-        trailingComma: 'all',
-        bracketSpacing: false,
-        arrowParens: 'always',
-        printWidth: 190,
-        singleAttributePerLine: true,
-      },
-    ],
     'rulesdir/prefer-underscore-method': 'off',
     'react/jsx-props-no-spreading': 'off',
     'react/require-default-props': 'off',
@@ -53,7 +41,7 @@ module.exports = {
         "ts": "never",
         "tsx": "never"
       }
-   ],
+    ],
     'import/no-unresolved': 'error',
     'import/consistent-type-specifier-style': ['error', 'prefer-top-level'],
     'no-use-before-define': 'off',
@@ -69,7 +57,7 @@ module.exports = {
     ],
     'tsdoc/syntax': 'error',
     '@typescript-eslint/no-non-null-assertion': 'off',
-    '@typescript-eslint/array-type': ['error', {default: 'array-simple'}],
+    '@typescript-eslint/array-type': ['error', { default: 'array-simple' }],
     '@typescript-eslint/consistent-type-definitions': 'off',
   },
 };

.prettierrc.js

@@ -0,0 +1,9 @@
+module.exports = {
+  tabWidth: 2,
+  singleQuote: true,
+  trailingComma: 'all',
+  bracketSpacing: false,
+  arrowParens: 'always',
+  printWidth: 190,
+  singleAttributePerLine: true,
+};

README.md

@@ -1,31 +1,122 @@
 # @expensify/react-native-live-markdown
 
-Lorem ipsum sit dolor amet.
+## Features
+
+- ⚛️ Drop-in replacement for `<TextInput>` component
+- ⌨️ Live synchronous formatting on every keystroke
+- ⚡ Fully native experience (selection, spellcheck, autocomplete)
+- 🎨 Customizable styles
+- 🌐 Universal support (Android, iOS, web)
+- 🏗️ Supports New Architecture
 
 ## Installation
 
+First, install the library from npm with the package manager of your choice:
+
 ```sh
-npm install @expensify/react-native-live-markdown
+yarn add @expensify/react-native-live-markdown
+npm install @expensify/react-native-live-markdown --save
+npx expo install @expensify/react-native-live-markdown
 ```
 
+Then, install the iOS dependencies with CocoaPods:
+
+```sh
+cd ios && pod install
+```
+
+The library includes native code so you will need to re-build the native app.
+
+> [!NOTE]
+> The library does not support Expo Go, you will need to setup Expo Dev Client (see [here](https://docs.expo.dev/workflow/prebuild/)).
+
 ## Usage
 
-```js
+```tsx
 import { MarkdownTextInput } from '@expensify/react-native-live-markdown';
+import React from 'react';
 
-// ...
+export default function App() {
+  const [text, setText] = React.useState('Hello, *world*!');
 
-<MarkdownTextInput />;
+  return <MarkdownTextInput value={text} onChangeText={setText} />;
+}
 ```
 
-## Contributing
+## Styling
 
-See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
+`MarkdownTextInput` can be styled using `style` prop just like regular `TextInput` component.
 
-## License
+It is also possible to customize the styling of the formatted contents of `MarkdownTextInput` component. The style object supports all color representations from React Native including `PlatformColor` and `DynamicColorIOS` according to the [color reference](https://reactnative.dev/docs/colors). Currently, a limited set of styles is customizable but this is subject to change in the future.
 
-MIT
+```tsx
+import type { MarkdownStyle } from '@expensify/react-native-live-markdown';
 
----
+const markdownStyle: MarkdownStyle = {
+  syntax: {
+    color: 'gray',
+  },
+  link: {
+    color: 'blue',
+  },
+  h1: {
+    fontSize: 25,
+  },
+  blockquote: {
+    borderColor: 'gray',
+    borderWidth: 6,
+    marginLeft: 6,
+    paddingLeft: 6,
+  },
+  code: {
+    fontFamily: 'monospace',
+    color: 'black',
+    backgroundColor: 'lightgray',
+  },
+  pre: {
+    fontFamily: 'monospace',
+    color: 'black',
+    backgroundColor: 'lightgray',
+  },
+  mentionHere: {
+    backgroundColor: 'yellow',
+  },
+  mentionUser: {
+    backgroundColor: 'cyan',
+  },
+};
+```
+
+The style object can be passed to multiple `MarkdownTextInput` components using `markdownStyle` prop:
 
-Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
+```tsx
+<MarkdownTextInput
+  value={text}
+  onChangeText={setText}
+  style={styles.input}
+  markdownStyle={markdownStyle}
+/>
+```
+
+> [!TIP]
+> We recommend to store the style object outside of a component body or memoize the style object with `React.useMemo`.
+
+## 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.
+
+## API reference
+
+`MarkdownTextInput` inherits all props of React Native's `TextInput` component.
+
+| Prop            | Type            | Default     | Note                                                                                                                                                                                                                   |
+| --------------- | --------------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `markdownStyle` | `MarkdownStyle` | `undefined` | Adds custom styling to Markdown text. The provided value is merged with default style object. See [Styling](https://github.com/expensify/react-native-live-markdown/blob/main/README.md#styling) for more information. |
+
+## Compatibility
+
+`react-native-live-markdown` requires React Native 0.71 or newer.
+
+## License
+
+MIT

android/src/main/java/com/expensify/livemarkdown/MarkdownBackgroundColorSpan.java

@@ -0,0 +1,11 @@
+package com.expensify.livemarkdown;
+
+import android.text.style.BackgroundColorSpan;
+
+import androidx.annotation.ColorInt;
+
+public class MarkdownBackgroundColorSpan extends BackgroundColorSpan implements MarkdownSpan {
+  public MarkdownBackgroundColorSpan(@ColorInt int color) {
+    super(color);
+  }
+}

android/src/main/java/com/expensify/livemarkdown/BlockquoteSpan.java → android/src/main/java/com/expensify/livemarkdown/MarkdownBlockquoteSpan.java

@@ -5,15 +5,18 @@
 import android.text.Layout;
 import android.text.style.LeadingMarginSpan;
 
+import androidx.annotation.ColorInt;
+
 import com.facebook.react.uimanager.PixelUtil;
 
-public class BlockquoteSpan implements LeadingMarginSpan {
+public class MarkdownBlockquoteSpan implements MarkdownSpan, LeadingMarginSpan {
+  @ColorInt
   private final int borderColor;
   private final float borderWidth;
   private final float marginLeft;
   private final float paddingLeft;
 
-  public BlockquoteSpan(int borderColor, float borderWidth, float marginLeft, float paddingLeft) {
+  public MarkdownBlockquoteSpan(@ColorInt int borderColor, float borderWidth, float marginLeft, float paddingLeft) {
     this.borderColor = borderColor;
     this.borderWidth = PixelUtil.toPixelFromDIP(borderWidth);
     this.marginLeft = PixelUtil.toPixelFromDIP(marginLeft);

android/src/main/java/com/expensify/livemarkdown/MarkdownBoldSpan.java

@@ -0,0 +1,10 @@
+package com.expensify.livemarkdown;
+
+import android.graphics.Typeface;
+import android.text.style.StyleSpan;
+
+public class MarkdownBoldSpan extends StyleSpan implements MarkdownSpan {
+  public MarkdownBoldSpan() {
+    super(Typeface.BOLD);
+  }
+}

android/src/main/java/com/expensify/livemarkdown/MarkdownFontFamilySpan.java

@@ -0,0 +1,11 @@
+package com.expensify.livemarkdown;
+
+import android.text.style.TypefaceSpan;
+
+import androidx.annotation.NonNull;
+
+public class MarkdownFontFamilySpan extends TypefaceSpan implements MarkdownSpan {
+  public MarkdownFontFamilySpan(@NonNull String fontFamily) {
+    super(fontFamily);
+  }
+}

android/src/main/java/com/expensify/livemarkdown/MarkdownFontSizeSpan.java

@@ -0,0 +1,9 @@
+package com.expensify.livemarkdown;
+
+import android.text.style.AbsoluteSizeSpan;
+
+public class MarkdownFontSizeSpan extends AbsoluteSizeSpan implements MarkdownSpan {
+  public MarkdownFontSizeSpan(float fontSize) {
+    super((int) fontSize, true);
+  }
+}

android/src/main/java/com/expensify/livemarkdown/MarkdownForegroundColorSpan.java

@@ -0,0 +1,11 @@
+package com.expensify.livemarkdown;
+
+import android.text.style.ForegroundColorSpan;
+
+import androidx.annotation.ColorInt;
+
+public class MarkdownForegroundColorSpan extends ForegroundColorSpan implements MarkdownSpan {
+  public MarkdownForegroundColorSpan(@ColorInt int color) {
+    super(color);
+  }
+}

android/src/main/java/com/expensify/livemarkdown/MarkdownItalicSpan.java

@@ -0,0 +1,10 @@
+package com.expensify.livemarkdown;
+
+import android.graphics.Typeface;
+import android.text.style.StyleSpan;
+
+public class MarkdownItalicSpan extends StyleSpan implements MarkdownSpan {
+  public MarkdownItalicSpan() {
+    super(Typeface.ITALIC);
+  }
+}

android/src/main/java/com/expensify/livemarkdown/MarkdownLineHeightSpan.java

@@ -0,0 +1,18 @@
+package com.expensify.livemarkdown;
+
+import android.graphics.Paint;
+import android.text.style.LineHeightSpan;
+
+public class MarkdownLineHeightSpan implements MarkdownSpan, LineHeightSpan {
+  private final float mLineHeight;
+
+  public MarkdownLineHeightSpan(float lineHeight) {
+    mLineHeight = lineHeight;
+  }
+
+  @Override
+  public void chooseHeight(CharSequence text, int start, int end, int spanstartv, int lineHeight, Paint.FontMetricsInt fm) {
+    fm.top -= mLineHeight / 4;
+    fm.ascent -= mLineHeight / 4;
+  }
+}

android/src/main/java/com/expensify/livemarkdown/MarkdownSpan.java

@@ -0,0 +1,7 @@
+package com.expensify.livemarkdown;
+
+/*
+ * Enables us to distinguish between spans that were added by Live Markdown and spans that were
+ * added by something else. All spans that Live Markdown adds should implement this interface.
+ */
+public interface MarkdownSpan {}

android/src/main/java/com/expensify/livemarkdown/MarkdownStrikethroughSpan.java

@@ -0,0 +1,5 @@
+package com.expensify.livemarkdown;
+
+import android.text.style.StrikethroughSpan;
+
+public class MarkdownStrikethroughSpan extends StrikethroughSpan implements MarkdownSpan {}