react-native-enriched-markdown 0.1.1 → 0.2.0

package/README.md

@@ -1,4 +1,4 @@
-<img src="https://github.com/user-attachments/assets/76e00153-6ae6-4a1a-bbbb-a8f7646aa1b5" alt="react-native-enriched-markdown by Software Mansion" width="100%">
+<img src="https://github.com/user-attachments/assets/922e57b6-98b7-4ad4-a270-838c7341d102" alt="react-native-enriched-markdown by Software Mansion" width="100%">
 
 # react-native-enriched-markdown
 
@@ -14,6 +14,7 @@
 - 🔗 Interactive link handling
 - 🖼️ Native image interactions (iOS: Copy, Save to Camera Roll)
 - 🌐 Native platform features (Translate, Look Up, Search Web, Share)
+- 🗣️ Accessibility support (VoiceOver & TalkBack)
 
 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 –
@@ -27,6 +28,7 @@ We can help you build your next dream product –
 - [Supported Markdown Elements](#supported-markdown-elements)
 - [Link Handling](#link-handling)
 - [Copy Options](#copy-options)
+- [Accessibility](#accessibility)
 - [Styling Architecture](#styling-architecture)
 - [Customizing Styles](#customizing-styles)
 - [API Reference](#api-reference)
@@ -36,7 +38,7 @@ We can help you build your next dream product –
 ## Prerequisites
 
 - `react-native-enriched-markdown` currently supports only Android and iOS platforms
-- It works only with [the React Native New Architecture (Fabric)](https://reactnative.dev/architecture/landing-page) and supports following React Native releases: `0.81`, `0.82` and `0.83`
+- It works only with [the React Native New Architecture (Fabric)](https://reactnative.dev/architecture/landing-page) and supports following React Native releases: `0.81`, `0.82`, `0.83` and `0.84`
 
 ## Installation
 
@@ -144,11 +146,15 @@ export default function App() {
 |---------|--------|-------------|
 | Bold | `**text**` or `__text__` | Strong emphasis |
 | Italic | `*text*` or `_text_` | Emphasis |
-| Bold + Italic | `***text***`, `___text___`, `**_text_**`, `__*text*__`, `_**text**_`, `*__text__*` | Combined emphasis |
+| Underline | `_text_` | Underlined text (requires `md4cFlags`) |
+| Strikethrough | `~~text~~` | Strikethrough text |
+| Bold + Italic | `***text***`, `___text___`, etc. | Combined emphasis |
 | Links | `[text](url)` | Clickable links |
 | Inline Code | `` `code` `` | Inline code snippets |
 | Inline Images | `![alt](url)` | Images within text flow |
 
+> **Note:** Underscore syntax (`__text__`, `_text_`) works for bold/italic by default. Enable underline via `md4cFlags={{ underline: true }}` to treat `_text_` as underline instead of emphasis.
+
 ### Nested Lists Example
 
 ```markdown
@@ -174,16 +180,32 @@ export default function App() {
 
 ## Link Handling
 
-Links in Markdown are interactive and can be handled with the `onLinkPress` callback:
+Links in Markdown are interactive and can be handled with the `onLinkPress` and `onLinkLongPress` callbacks:
 
 ```tsx
 <EnrichedMarkdownText
   markdown="Check out [React Native](https://reactnative.dev)!"
-  onLinkPress={(event) => {
-    const { url } = event.nativeEvent;
+  onLinkPress={({ url }) => {
     Alert.alert('Link pressed', url);
     Linking.openURL(url);
   }}
+  onLinkLongPress={({ url }) => {
+    Alert.alert('Link long pressed', url);
+  }}
+/>
+```
+
+### Link Preview (iOS)
+
+By default, long-pressing a link on iOS shows the native system link preview. When you provide `onLinkLongPress`, the system preview is automatically disabled so your handler can fire instead.
+
+You can also control this behavior explicitly with the `enableLinkPreview` prop:
+
+```tsx
+// Disable system link preview without providing a handler
+<EnrichedMarkdownText
+  markdown={content}
+  enableLinkPreview={false}
 />
 ```
 
@@ -219,6 +241,20 @@ A dedicated **Copy as Markdown** option is available in the context menu on both
 
 When selecting text that contains images, a **Copy Image URL** option appears to copy the image's source URL. On Android, if multiple images are selected, all URLs are copied (one per line).
 
+## Accessibility
+
+`react-native-enriched-markdown` provides accessibility support for screen readers on both platforms — VoiceOver on iOS and TalkBack on Android.
+
+### Supported Elements
+
+| Element | VoiceOver (iOS) | TalkBack (Android) |
+|---------|-----------------|---------------------|
+| **Headings (h1-h6)** | Rotor navigation | Reading controls navigation |
+| **Links** | Rotor navigation, activatable | Reading controls navigation, activatable |
+| **Images** | Alt text announced, rotor navigation | Alt text announced |
+| **List items** | Position announced (e.g., "bullet point", "list item 1") | Position announced |
+| **Nested lists** | Proper depth handling | "Nested" prefix for deeper items |
+
 ## Styling Architecture
 
 Understanding how `react-native-enriched-markdown` handles styling helps you create consistent, well-designed Markdown content.
@@ -229,7 +265,7 @@ Markdown elements are divided into two categories:
 
 #### Block Elements
 
-Block elements are structural containers that define the layout. Each block has its own typography settings (`fontSize`, `fontFamily`, `fontWeight`, `color`, `lineHeight`, `marginBottom`).
+Block elements are structural containers that define the layout. Each block has its own typography settings (`fontSize`, `fontFamily`, `fontWeight`, `color`, `lineHeight`, `marginTop`, `marginBottom`).
 
 | Block Type | Description |
 |------------|-------------|
@@ -247,6 +283,8 @@ Inline elements modify text within blocks. They inherit the parent block's base
 |-------------|---------------|------|
 | `strong` | Parent block | Bold weight, optional color |
 | `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 |
 
@@ -306,11 +344,13 @@ The library provides sensible default styles for all Markdown elements out of th
       fontWeight: 'bold',
       color: '#000',
       marginBottom: 16,
+      textAlign: 'center',
     },
     h2: {
       fontSize: 24,
       fontWeight: '600',
       marginBottom: 12,
+      textAlign: 'left',
     },
     strong: {
       color: '#000',
@@ -318,6 +358,12 @@ The library provides sensible default styles for all Markdown elements out of th
     em: {
       color: '#666',
     },
+    strikethrough: {
+      color: '#999',
+    },
+    underline: {
+      color: '#333',
+    },
     link: {
       color: '#007AFF',
       underline: true,
@@ -382,9 +428,16 @@ The library provides sensible default styles for all Markdown elements out of th
 | `fontFamily` | `string` | Font family name |
 | `fontWeight` | `string` | Font weight |
 | `color` | `string` | Text color |
+| `marginTop` | `number` | Top margin |
 | `marginBottom` | `number` | Bottom margin |
 | `lineHeight` | `number` | Line height |
 
+#### Paragraph and Heading-specific (paragraph, h1-h6)
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `textAlign` | `'auto' \| 'left' \| 'right' \| 'center' \| 'justify'` | Text alignment (default: `'left'`) |
+
 #### Blockquote-specific
 
 | Property | Type | Description |
@@ -430,12 +483,25 @@ The library provides sensible default styles for all Markdown elements out of th
 | `color` | `string` | Link text color |
 | `underline` | `boolean` | Show underline |
 
+#### Strikethrough-specific
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `color` | `string` | Strikethrough line color (iOS only) |
+
+#### Underline-specific
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `color` | `string` | Underline color (iOS only) |
+
 #### Image-specific
 
 | Property | Type | Description |
 |----------|------|-------------|
 | `height` | `number` | Image height |
 | `borderRadius` | `number` | Corner radius |
+| `marginTop` | `number` | Top margin |
 | `marginBottom` | `number` | Bottom margin |
 
 #### Inline Image-specific
@@ -463,7 +529,13 @@ The library provides sensible default styles for all Markdown elements out of th
 | `markdownStyle` | `MarkdownStyle` | `{}` | Style configuration for Markdown elements |
 | `containerStyle` | `ViewStyle` | - | Style for the container view |
 | `onLinkPress` | `(event: LinkPressEvent) => void` | - | Callback when a link is pressed. Access URL via `event.url` |
-| `isSelectable` | `boolean` | `true` | Whether text can be selected |
+| `onLinkLongPress` | `(event: LinkLongPressEvent) => void` | - | Callback when a link is long pressed. Access URL via `event.url`. On iOS, automatically disables the system link preview |
+| `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 |
 
 ## Contributing
 

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

@@ -29,8 +29,23 @@ public class EnrichedMarkdownTextManagerDelegate<T extends View, U extends BaseV
       case "markdownStyle":
         mViewManager.setMarkdownStyle(view, (ReadableMap) value);
         break;
-      case "isSelectable":
-        mViewManager.setIsSelectable(view, value == null ? false : (boolean) value);
+      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/EnrichedMarkdownTextManagerInterface.java

@@ -17,5 +17,10 @@ import com.facebook.react.uimanager.ViewManagerWithGeneratedInterface;
 public interface EnrichedMarkdownTextManagerInterface<T extends View> extends ViewManagerWithGeneratedInterface {
   void setMarkdown(T view, @Nullable String value);
   void setMarkdownStyle(T view, @Nullable ReadableMap value);
-  void setIsSelectable(T view, boolean 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/EventEmitters.cpp

@@ -21,4 +21,13 @@ void EnrichedMarkdownTextEventEmitter::onLinkPress(OnLinkPress event) const {
   });
 }
 
+
+void EnrichedMarkdownTextEventEmitter::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;
+  });
+}
+
 } // namespace facebook::react

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

@@ -20,6 +20,12 @@ class EnrichedMarkdownTextEventEmitter : public ViewEventEmitter {
   struct OnLinkPress {
       std::string url;
     };
+
+  struct OnLinkLongPress {
+      std::string url;
+    };
   void onLinkPress(OnLinkPress value) const;
+
+  void onLinkLongPress(OnLinkLongPress value) const;
 };
 } // namespace facebook::react

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

@@ -21,7 +21,12 @@ EnrichedMarkdownTextProps::EnrichedMarkdownTextProps(
 
     markdown(convertRawProp(context, rawProps, "markdown", sourceProps.markdown, {})),
     markdownStyle(convertRawProp(context, rawProps, "markdownStyle", sourceProps.markdownStyle, {})),
-    isSelectable(convertRawProp(context, rawProps, "isSelectable", sourceProps.isSelectable, {false})) {}
+    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 EnrichedMarkdownTextProps::getDiffPropsImplementationTarget() const {
@@ -47,8 +52,28 @@ folly::dynamic EnrichedMarkdownTextProps::getDiffProps(
     result["markdownStyle"] = toDynamic(markdownStyle);
   }
     
-  if (isSelectable != oldProps->isSelectable) {
-    result["isSelectable"] = isSelectable;
+  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;
 }