react-native-enriched-markdown 0.2.1 → 0.3.0-nightly-20260221-b992065d9

package/README.md

@@ -7,6 +7,7 @@
 - ⚡ Fully native text rendering (no WebView)
 - 🎯 High-performance Markdown parsing with [md4c](https://github.com/mity/md4c)
 - 📐 CommonMark standard compliant
+- 📊 GitHub Flavored Markdown (GFM)
 - 🎨 Fully customizable styles for all elements
 - 📱 iOS and Android support
 - 🏛 Supports only the New Architecture (Fabric)
@@ -15,6 +16,7 @@
 - 🖼️ Native image interactions (iOS: Copy, Save to Camera Roll)
 - 🌐 Native platform features (Translate, Look Up, Search Web, Share)
 - 🗣️ Accessibility support (VoiceOver & TalkBack)
+- 🔄 Full RTL (right-to-left) support including text, lists, blockquotes, tables, and task lists
 
 Since 2012 [Software Mansion](https://swmansion.com) is a software agency with experience in building web and mobile apps. We are Core React Native Contributors and experts in dealing with all kinds of React Native issues.
 We can help you build your next dream product –
@@ -29,6 +31,7 @@ We can help you build your next dream product –
 - [Link Handling](#link-handling)
 - [Copy Options](#copy-options)
 - [Accessibility](#accessibility)
+- [RTL Support](#rtl-support)
 - [Styling Architecture](#styling-architecture)
 - [Customizing Styles](#customizing-styles)
 - [API Reference](#api-reference)
@@ -89,7 +92,7 @@ npx expo prebuild
 
 ## Usage
 
-Here's a simple example of rendering Markdown content:
+### CommonMark (default)
 
 ```tsx
 import { EnrichedMarkdownText } from 'react-native-enriched-markdown';
@@ -103,27 +106,43 @@ This is a paragraph with **bold**, *italic*, and [links](https://reactnative.dev
 - List item one
 - List item two
   - Nested item
-
-\`\`\`javascript
-const greeting = 'Hello, World!';
-console.log(greeting);
-\`\`\`
 `;
 
 export default function App() {
-  const handleLinkPress = (event: { nativeEvent: { url: string } }) => {
-    Linking.openURL(event.nativeEvent.url);
-  };
-
   return (
     <EnrichedMarkdownText
       markdown={markdown}
-      onLinkPress={handleLinkPress}
+      onLinkPress={({ url }) => Linking.openURL(url)}
     />
   );
 }
 ```
 
+### GFM (tables)
+
+Set `flavor="github"` to enable GitHub Flavored Markdown features like tables:
+
+```tsx
+<EnrichedMarkdownText
+  flavor="github"
+  markdown={markdown}
+  onLinkPress={({ url }) => Linking.openURL(url)}
+  markdownStyle={{
+    table: {
+      fontSize: 14,
+      borderColor: '#E5E7EB',
+      borderRadius: 8,
+      headerBackgroundColor: '#F3F4F6',
+      headerFontFamily: 'System-Bold',
+      cellPaddingHorizontal: 12,
+      cellPaddingVertical: 8,
+    },
+  }}
+/>
+```
+
+Tables support column alignment, rich text in cells (bold, italic, code, links), horizontal scrolling, header styling, alternating row colors, and a long-press context menu with "Copy" and "Copy as Markdown".
+
 ## Supported Markdown Elements
 
 `react-native-enriched-markdown` supports a comprehensive set of Markdown elements:
@@ -138,8 +157,10 @@ export default function App() {
 | Code Blocks | ` ``` code ``` ` | Multi-line code blocks |
 | Unordered Lists | `- Item`, `* Item`, or `+ Item` | Bullet lists with unlimited nesting |
 | Ordered Lists | `1. Item` | Numbered lists with unlimited nesting |
+| Task Lists | `- [x] Done`, `- [ ] Todo` | Interactive checkboxes (requires `flavor="github"`) |
 | Thematic Break | `---`, `***`, or `___` | Visual separator line |
 | Images | `![alt](url)` | Block-level images |
+| Tables | `| col | col |` | GFM tables with alignment support (requires `flavor="github"`) |
 
 ### Inline Elements
 
@@ -256,6 +277,36 @@ When selecting text that contains images, a **Copy Image URL** option appears to
 | **List items** | Position announced (e.g., "bullet point", "list item 1") | Position announced |
 | **Nested lists** | Proper depth handling | "Nested" prefix for deeper items |
 
+## RTL Support
+
+`react-native-enriched-markdown` fully supports right-to-left (RTL) languages such as Arabic, Hebrew, and Persian.
+
+### Platform Behavior
+
+- **Android** — RTL works automatically. Android's text system detects RTL characters (Arabic, Hebrew, etc.) and renders them right-to-left with no additional configuration.
+- **iOS** — Requires `I18nManager.forceRTL(true)` to enable RTL layout direction. This must be called early in the app lifecycle (before the root component mounts) and requires an app restart to take effect.
+
+```tsx
+import { I18nManager } from 'react-native';
+
+// Required for iOS, Android handles RTL automatically
+I18nManager.forceRTL(true);
+```
+
+When RTL content is rendered, the following elements automatically mirror their layout:
+
+| Element | RTL Behavior |
+|---------|-------------|
+| **Paragraphs & Headings** | Right-aligned with RTL writing direction |
+| **Unordered lists** | Bullets on the right, text indented from the right |
+| **Ordered lists** | Numbers on the right, text indented from the right |
+| **Task lists** | Checkboxes on the right, tappable in RTL |
+| **Blockquotes** | Border on the right side |
+| **Tables** | Columns ordered right-to-left, scrolls to show first column |
+| **Code blocks** | Always LTR (code is inherently left-to-right) |
+| **Inline code** | Positioned correctly within RTL text flow |
+| **Copy as HTML** | Exported HTML includes `dir="rtl"` for correct rendering in paste targets |
+
 ## Styling Architecture
 
 Understanding how `react-native-enriched-markdown` handles styling helps you create consistent, well-designed Markdown content.
@@ -275,6 +326,8 @@ Block elements are structural containers that define the layout. Each block has
 | `blockquote` | Quoted content with accent bar |
 | `list` | Ordered and unordered lists |
 | `codeBlock` | Multi-line code containers |
+| `table` | GFM tables (requires `flavor="github"`) |
+| `taskList` | Task list checkboxes |
 
 #### Inline Elements
 
@@ -286,8 +339,8 @@ Inline elements modify text within blocks. They inherit the parent block's base
 | `em` | Parent block | Italic style, optional color |
 | `strikethrough` | Parent block | Strike line with custom color (iOS only) |
 | `underline` | Parent block | Underline with custom color (iOS only) |
-| `code` | Parent block | Monospace font, background |
-| `link` | Parent block | Color, underline |
+| `code` | Parent block | Monospace font, background, optional fontSize |
+| `link` | Parent block | Optional font family, color, underline |
 
 ### Style Inheritance
 
@@ -366,10 +419,12 @@ The library provides sensible default styles for all Markdown elements out of th
       color: '#333',
     },
     link: {
+      fontFamily: 'System-Bold',
       color: '#007AFF',
       underline: true,
     },
     code: {
+      fontSize: 16,
       color: '#E91E63',
       backgroundColor: '#F5F5F5',
       borderColor: '#E0E0E0',
@@ -404,6 +459,12 @@ The library provides sensible default styles for all Markdown elements out of th
     inlineImage: {
       size: 20,
     },
+    taskList: {
+      checkedColor: '#2196F3',
+      borderColor: '#9E9E9E',
+      checkmarkColor: '#FFFFFF',
+      checkboxSize: 16,
+    },
   }}
 />
 ```
@@ -473,6 +534,7 @@ The library provides sensible default styles for all Markdown elements out of th
 
 | Property | Type | Description |
 |----------|------|-------------|
+| `fontSize` | `number` | Font size in points. Defaults to the parent block's font size (1em). Set to customize the monospaced font size independently |
 | `color` | `string` | Text color |
 | `backgroundColor` | `string` | Background color |
 | `borderColor` | `string` | Border color |
@@ -481,6 +543,7 @@ The library provides sensible default styles for all Markdown elements out of th
 
 | Property | Type | Description |
 |----------|------|-------------|
+| `fontFamily` | `string` | Font family for links. Overrides the parent block's font family when set |
 | `color` | `string` | Link text color |
 | `underline` | `boolean` | Show underline |
 
@@ -520,6 +583,35 @@ The library provides sensible default styles for all Markdown elements out of th
 | `marginTop` | `number` | Top margin |
 | `marginBottom` | `number` | Bottom margin |
 
+#### Table-specific
+
+Table styles only apply when `flavor="github"` is set. Tables inherit the base block styles (`fontSize`, `fontFamily`, `fontWeight`, `color`, `marginTop`, `marginBottom`, `lineHeight`) and add the following:
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `headerFontFamily` | `string` | Font family for header cells (falls back to `fontFamily` if not set) |
+| `headerBackgroundColor` | `string` | Background color for the header row |
+| `headerTextColor` | `string` | Text color for the header row |
+| `rowEvenBackgroundColor` | `string` | Background color for even data rows |
+| `rowOddBackgroundColor` | `string` | Background color for odd data rows |
+| `borderColor` | `string` | Color of the table grid lines |
+| `borderWidth` | `number` | Width of the table grid lines |
+| `borderRadius` | `number` | Corner radius of the table container |
+| `cellPaddingHorizontal` | `number` | Horizontal padding inside cells |
+| `cellPaddingVertical` | `number` | Vertical padding inside cells |
+
+#### Task List-specific
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `checkedColor` | `string` | Background color of checked checkbox |
+| `borderColor` | `string` | Border color of unchecked checkbox |
+| `checkmarkColor` | `string` | Color of the checkmark inside checked checkbox |
+| `checkboxSize` | `number` | Size of the checkbox (defaults to 90% of list font size) |
+| `checkboxBorderRadius` | `number` | Corner radius of the checkbox |
+| `checkedTextColor` | `string` | Text color for checked items |
+| `checkedStrikethrough` | `boolean` | Whether to apply strikethrough to checked items |
+
 ## API Reference
 
 ### Props
@@ -531,12 +623,14 @@ The library provides sensible default styles for all Markdown elements out of th
 | `containerStyle` | `ViewStyle` | - | Style for the container view |
 | `onLinkPress` | `(event: LinkPressEvent) => void` | - | Callback when a link is pressed. Access URL via `event.url` |
 | `onLinkLongPress` | `(event: LinkLongPressEvent) => void` | - | Callback when a link is long pressed. Access URL via `event.url`. On iOS, automatically disables the system link preview |
+| `onTaskListItemPress` | `(event: TaskListItemPressEvent) => void` | - | Callback when a task list checkbox is tapped. Receives `index` (0-based), `checked` (previous state), and `text` (item text) |
 | `enableLinkPreview` | `boolean` | `true` | Controls the native link preview on long press (iOS only). Automatically set to `false` when `onLinkLongPress` is provided |
 | `selectable` | `boolean` | `true` | Whether text can be selected |
 | `md4cFlags` | `Md4cFlags` | `{ underline: false }` | Configuration for md4c parser extension flags |
 | `allowFontScaling` | `boolean` | `true` | Whether fonts should scale to respect Text Size accessibility settings |
 | `maxFontSizeMultiplier` | `number` | `undefined` | Maximum font scale multiplier when `allowFontScaling` is enabled |
 | `allowTrailingMargin` | `boolean` | `false` | Whether to preserve the bottom margin of the last block element |
+| `flavor` | `'commonmark' \| 'github'` | `'commonmark'` | Markdown flavor. Set to `'github'` to enable GitHub Flavored Markdown table support |
 
 ## Future Plans
 

package/android/generated/java/com/facebook/react/viewmanagers/EnrichedMarkdownManagerDelegate.java

@@ -0,0 +1,54 @@
+/**
+* This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
+*
+* Do not edit this file as changes may cause incorrect behavior and will be lost
+* once the code is regenerated.
+*
+* @generated by codegen project: GeneratePropsJavaDelegate.js
+*/
+
+package com.facebook.react.viewmanagers;
+
+import android.view.View;
+import androidx.annotation.Nullable;
+import com.facebook.react.bridge.ReadableMap;
+import com.facebook.react.uimanager.BaseViewManager;
+import com.facebook.react.uimanager.BaseViewManagerDelegate;
+import com.facebook.react.uimanager.LayoutShadowNode;
+
+public class EnrichedMarkdownManagerDelegate<T extends View, U extends BaseViewManager<T, ? extends LayoutShadowNode> & EnrichedMarkdownManagerInterface<T>> extends BaseViewManagerDelegate<T, U> {
+  public EnrichedMarkdownManagerDelegate(U viewManager) {
+    super(viewManager);
+  }
+  @Override
+  public void setProperty(T view, String propName, @Nullable Object value) {
+    switch (propName) {
+      case "markdown":
+        mViewManager.setMarkdown(view, value == null ? null : (String) value);
+        break;
+      case "markdownStyle":
+        mViewManager.setMarkdownStyle(view, (ReadableMap) value);
+        break;
+      case "enableLinkPreview":
+        mViewManager.setEnableLinkPreview(view, value == null ? true : (boolean) value);
+        break;
+      case "selectable":
+        mViewManager.setSelectable(view, value == null ? false : (boolean) value);
+        break;
+      case "md4cFlags":
+        mViewManager.setMd4cFlags(view, (ReadableMap) value);
+        break;
+      case "allowFontScaling":
+        mViewManager.setAllowFontScaling(view, value == null ? true : (boolean) value);
+        break;
+      case "maxFontSizeMultiplier":
+        mViewManager.setMaxFontSizeMultiplier(view, value == null ? 0f : ((Double) value).floatValue());
+        break;
+      case "allowTrailingMargin":
+        mViewManager.setAllowTrailingMargin(view, value == null ? false : (boolean) value);
+        break;
+      default:
+        super.setProperty(view, propName, value);
+    }
+  }
+}

package/android/generated/java/com/facebook/react/viewmanagers/EnrichedMarkdownManagerInterface.java

@@ -0,0 +1,26 @@
+/**
+* This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
+*
+* Do not edit this file as changes may cause incorrect behavior and will be lost
+* once the code is regenerated.
+*
+* @generated by codegen project: GeneratePropsJavaInterface.js
+*/
+
+package com.facebook.react.viewmanagers;
+
+import android.view.View;
+import androidx.annotation.Nullable;
+import com.facebook.react.bridge.ReadableMap;
+import com.facebook.react.uimanager.ViewManagerWithGeneratedInterface;
+
+public interface EnrichedMarkdownManagerInterface<T extends View> extends ViewManagerWithGeneratedInterface {
+  void setMarkdown(T view, @Nullable String value);
+  void setMarkdownStyle(T view, @Nullable ReadableMap value);
+  void setEnableLinkPreview(T view, boolean value);
+  void setSelectable(T view, boolean value);
+  void setMd4cFlags(T view, @Nullable ReadableMap value);
+  void setAllowFontScaling(T view, boolean value);
+  void setMaxFontSizeMultiplier(T view, float value);
+  void setAllowTrailingMargin(T view, boolean value);
+}

package/android/generated/jni/react/renderer/components/EnrichedMarkdownTextSpec/ComponentDescriptors.cpp

@@ -16,7 +16,7 @@ namespace facebook::react {
 
 void EnrichedMarkdownTextSpec_registerComponentDescriptorsFromCodegen(
   std::shared_ptr<const ComponentDescriptorProviderRegistry> registry) {
-registry->add(concreteComponentDescriptorProvider<EnrichedMarkdownTextComponentDescriptor>());
+
 }
 
 } // namespace facebook::react

package/android/generated/jni/react/renderer/components/EnrichedMarkdownTextSpec/ComponentDescriptors.h

@@ -16,7 +16,7 @@
 
 namespace facebook::react {
 
-using EnrichedMarkdownTextComponentDescriptor = ConcreteComponentDescriptor<EnrichedMarkdownTextShadowNode>;
+
 
 void EnrichedMarkdownTextSpec_registerComponentDescriptorsFromCodegen(
   std::shared_ptr<const ComponentDescriptorProviderRegistry> registry);

package/android/generated/jni/react/renderer/components/EnrichedMarkdownTextSpec/EventEmitters.cpp

@@ -13,6 +13,35 @@
 
 namespace facebook::react {
 
+void EnrichedMarkdownEventEmitter::onLinkPress(OnLinkPress event) const {
+  dispatchEvent("linkPress", [event=std::move(event)](jsi::Runtime &runtime) {
+    auto payload = jsi::Object(runtime);
+    payload.setProperty(runtime, "url", event.url);
+    return payload;
+  });
+}
+
+
+void EnrichedMarkdownEventEmitter::onLinkLongPress(OnLinkLongPress event) const {
+  dispatchEvent("linkLongPress", [event=std::move(event)](jsi::Runtime &runtime) {
+    auto payload = jsi::Object(runtime);
+    payload.setProperty(runtime, "url", event.url);
+    return payload;
+  });
+}
+
+
+void EnrichedMarkdownEventEmitter::onTaskListItemPress(OnTaskListItemPress event) const {
+  dispatchEvent("taskListItemPress", [event=std::move(event)](jsi::Runtime &runtime) {
+    auto payload = jsi::Object(runtime);
+    payload.setProperty(runtime, "index", event.index);
+payload.setProperty(runtime, "checked", event.checked);
+payload.setProperty(runtime, "text", event.text);
+    return payload;
+  });
+}
+
+
 void EnrichedMarkdownTextEventEmitter::onLinkPress(OnLinkPress event) const {
   dispatchEvent("linkPress", [event=std::move(event)](jsi::Runtime &runtime) {
     auto payload = jsi::Object(runtime);
@@ -30,4 +59,15 @@ void EnrichedMarkdownTextEventEmitter::onLinkLongPress(OnLinkLongPress event) co
   });
 }
 
+
+void EnrichedMarkdownTextEventEmitter::onTaskListItemPress(OnTaskListItemPress event) const {
+  dispatchEvent("taskListItemPress", [event=std::move(event)](jsi::Runtime &runtime) {
+    auto payload = jsi::Object(runtime);
+    payload.setProperty(runtime, "index", event.index);
+payload.setProperty(runtime, "checked", event.checked);
+payload.setProperty(runtime, "text", event.text);
+    return payload;
+  });
+}
+
 } // namespace facebook::react

package/android/generated/jni/react/renderer/components/EnrichedMarkdownTextSpec/EventEmitters.h

@@ -13,6 +13,29 @@
 
 
 namespace facebook::react {
+class EnrichedMarkdownEventEmitter : public ViewEventEmitter {
+ public:
+  using ViewEventEmitter::ViewEventEmitter;
+
+  struct OnLinkPress {
+      std::string url;
+    };
+
+  struct OnLinkLongPress {
+      std::string url;
+    };
+
+  struct OnTaskListItemPress {
+      int index;
+    bool checked;
+    std::string text;
+    };
+  void onLinkPress(OnLinkPress value) const;
+
+  void onLinkLongPress(OnLinkLongPress value) const;
+
+  void onTaskListItemPress(OnTaskListItemPress value) const;
+};
 class EnrichedMarkdownTextEventEmitter : public ViewEventEmitter {
  public:
   using ViewEventEmitter::ViewEventEmitter;
@@ -24,8 +47,16 @@ class EnrichedMarkdownTextEventEmitter : public ViewEventEmitter {
   struct OnLinkLongPress {
       std::string url;
     };
+
+  struct OnTaskListItemPress {
+      int index;
+    bool checked;
+    std::string text;
+    };
   void onLinkPress(OnLinkPress value) const;
 
   void onLinkLongPress(OnLinkLongPress value) const;
+
+  void onTaskListItemPress(OnTaskListItemPress value) const;
 };
 } // namespace facebook::react

package/android/generated/jni/react/renderer/components/EnrichedMarkdownTextSpec/Props.cpp

@@ -14,6 +14,70 @@
 
 namespace facebook::react {
 
+EnrichedMarkdownProps::EnrichedMarkdownProps(
+    const PropsParserContext &context,
+    const EnrichedMarkdownProps &sourceProps,
+    const RawProps &rawProps): ViewProps(context, sourceProps, rawProps),
+
+    markdown(convertRawProp(context, rawProps, "markdown", sourceProps.markdown, {})),
+    markdownStyle(convertRawProp(context, rawProps, "markdownStyle", sourceProps.markdownStyle, {})),
+    enableLinkPreview(convertRawProp(context, rawProps, "enableLinkPreview", sourceProps.enableLinkPreview, {true})),
+    selectable(convertRawProp(context, rawProps, "selectable", sourceProps.selectable, {false})),
+    md4cFlags(convertRawProp(context, rawProps, "md4cFlags", sourceProps.md4cFlags, {})),
+    allowFontScaling(convertRawProp(context, rawProps, "allowFontScaling", sourceProps.allowFontScaling, {true})),
+    maxFontSizeMultiplier(convertRawProp(context, rawProps, "maxFontSizeMultiplier", sourceProps.maxFontSizeMultiplier, {0.0})),
+    allowTrailingMargin(convertRawProp(context, rawProps, "allowTrailingMargin", sourceProps.allowTrailingMargin, {false})) {}
+    
+#ifdef RN_SERIALIZABLE_STATE
+ComponentName EnrichedMarkdownProps::getDiffPropsImplementationTarget() const {
+  return "EnrichedMarkdown";
+}
+
+folly::dynamic EnrichedMarkdownProps::getDiffProps(
+    const Props* prevProps) const {
+  static const auto defaultProps = EnrichedMarkdownProps();
+  const EnrichedMarkdownProps* oldProps = prevProps == nullptr
+      ? &defaultProps
+      : static_cast<const EnrichedMarkdownProps*>(prevProps);
+  if (this == oldProps) {
+    return folly::dynamic::object();
+  }
+  folly::dynamic result = HostPlatformViewProps::getDiffProps(prevProps);
+  
+  if (markdown != oldProps->markdown) {
+    result["markdown"] = markdown;
+  }
+    
+  if (markdownStyle != oldProps->markdownStyle) {
+    result["markdownStyle"] = toDynamic(markdownStyle);
+  }
+    
+  if (enableLinkPreview != oldProps->enableLinkPreview) {
+    result["enableLinkPreview"] = enableLinkPreview;
+  }
+    
+  if (selectable != oldProps->selectable) {
+    result["selectable"] = selectable;
+  }
+    
+  if (md4cFlags != oldProps->md4cFlags) {
+    result["md4cFlags"] = toDynamic(md4cFlags);
+  }
+    
+  if (allowFontScaling != oldProps->allowFontScaling) {
+    result["allowFontScaling"] = allowFontScaling;
+  }
+    
+  if ((maxFontSizeMultiplier != oldProps->maxFontSizeMultiplier) && !(std::isnan(maxFontSizeMultiplier) && std::isnan(oldProps->maxFontSizeMultiplier))) {
+    result["maxFontSizeMultiplier"] = maxFontSizeMultiplier;
+  }
+    
+  if (allowTrailingMargin != oldProps->allowTrailingMargin) {
+    result["allowTrailingMargin"] = allowTrailingMargin;
+  }
+  return result;
+}
+#endif
 EnrichedMarkdownTextProps::EnrichedMarkdownTextProps(
     const PropsParserContext &context,
     const EnrichedMarkdownTextProps &sourceProps,