Enriched Markdown

https://github.com/software-mansion/enriched-markdown
Admin
Enriched Markdown is a multi-platform SDK for rendering Markdown as native text and editing rich...
Tokens:60,678
Snippets:607
Trust Score:9.7
License:MIT
Update:1 month ago
Show doc for...
Tokens:
Raw
### Initial Project Setup

Source: https://github.com/software-mansion/enriched-markdown/blob/main/CONTRIBUTING.md

Install dependencies and build the library, which is required before running any application.

```sh
# Install dependencies
yarn

# Build the library (required before running any app)
yarn prepare
```

--------------------------------

### Start the Packager

Source: https://github.com/software-mansion/enriched-markdown/blob/main/CONTRIBUTING.md

Command to start the Metro packager for the example application.

```sh
yarn react-native-example start
```

--------------------------------

### Run Example App on Android

Source: https://github.com/software-mansion/enriched-markdown/blob/main/CONTRIBUTING.md

Command to run the example application on an Android device or emulator.

```sh
yarn react-native-example android
```

--------------------------------

### Run Example App on iOS

Source: https://github.com/software-mansion/enriched-markdown/blob/main/CONTRIBUTING.md

Command to run the example application on an iOS device or simulator.

```sh
yarn react-native-example ios
```

--------------------------------

### Maestro Test Examples

Source: https://github.com/software-mansion/enriched-markdown/blob/main/CONTRIBUTING.md

Examples of running specific Maestro test configurations.

```sh
yarn test:e2e:smoke:ios          # smoke tests on iOS only
yarn test:e2e:smoke:mobile       # smoke tests on both platforms
yarn test:e2e:advanced:android   # advanced tests on Android only
```

--------------------------------

### Install iOS and macOS Dependencies

Source: https://github.com/software-mansion/enriched-markdown/blob/main/packages/react-native-enriched-markdown/README.md

Commands to install native dependencies after adding the library.

```sh
# iOS
cd ios && bundle install && bundle exec pod install

# macOS (react-native-macos)
cd macos && bundle install && bundle exec pod install
```

--------------------------------

### Configure Jest setup file

Source: https://github.com/software-mansion/enriched-markdown/blob/main/docs/TESTING.md

Point Jest at the shipped mock from a setup file listed in your config's setupFilesAfterEnv.

```js
// jest.setup.js
jest.mock('react-native-enriched-markdown', () =>
  require('react-native-enriched-markdown/jest'),
);
```

--------------------------------

### Install Nightly Build

Source: https://github.com/software-mansion/enriched-markdown/blob/main/packages/react-native-enriched-markdown/README.md

Command to install the latest features before a stable release.

```sh
yarn add react-native-enriched-markdown@nightly
```

--------------------------------

### Run Expo Prebuild

Source: https://github.com/software-mansion/enriched-markdown/blob/main/packages/react-native-enriched-markdown/README.md

Rebuild the native app after installing the library in Expo.

```sh
npx expo prebuild
```

--------------------------------

### Install KaTeX dependency

Source: https://github.com/software-mansion/enriched-markdown/blob/main/docs/LATEX_MATH.md

Commands to install the optional KaTeX peer dependency required for web rendering.

```sh
npm install katex
# or
yarn add katex
```

--------------------------------

### Install Library in Expo

Source: https://github.com/software-mansion/enriched-markdown/blob/main/packages/react-native-enriched-markdown/README.md

Use npx expo install to add the library to an Expo project.

```sh
npx expo install react-native-enriched-markdown
```

--------------------------------

### Build and Run Android App

Source: https://github.com/software-mansion/enriched-markdown/blob/main/apps/react-native-example/README.md

Execute the build command for Android after starting the Metro server.

```sh
# Using npm
npm run android

# OR using Yarn
yarn android
```

--------------------------------

### Start Metro Development Server

Source: https://github.com/software-mansion/enriched-markdown/blob/main/apps/react-native-example/README.md

Run the Metro JavaScript build tool from the project root to enable development features.

```sh
# Using npm
npm start

# OR using Yarn
yarn start
```

--------------------------------

### Install CocoaPods Dependencies

Source: https://github.com/software-mansion/enriched-markdown/blob/main/apps/react-native-example/README.md

Commands to set up and install native iOS dependencies using Ruby and CocoaPods.

```sh
bundle install
```

```sh
bundle exec pod install
```

--------------------------------

### Configuring FormatMenuConfig

Source: https://github.com/software-mansion/enriched-markdown/blob/main/docs/API_REFERENCE.md

Examples showing how to hide specific menu items and how to localize labels for all items in the Format submenu.

```tsx
// Hide Spoiler and Link from the Format submenu
<EnrichedMarkdownTextInput
  formatMenuConfig={{
    spoiler: { enabled: false },
    link: { enabled: false },
  }}
/>

// Localize every item
<EnrichedMarkdownTextInput
  formatMenuConfig={{
    bold: { label: t('bold') },
    italic: { label: t('italic') },
    underline: { label: t('underline') },
    strikethrough: { label: t('strikethrough') },
    spoiler: { label: t('spoiler') },
    link: { label: t('link') },
  }}
/>
```

--------------------------------

### Configuring Selection Menu Items

Source: https://github.com/software-mansion/enriched-markdown/blob/main/docs/API_REFERENCE.md

Examples showing how to hide menu items or localize their labels using selectionMenuConfig.

```tsx
// Hide both the Format submenu and the Copy as Markdown action
<EnrichedMarkdownTextInput
  selectionMenuConfig={{
    format: { enabled: false },
    copyAsMarkdown: { enabled: false },
  }}
/>

// Localize the visible labels
<EnrichedMarkdownTextInput
  selectionMenuConfig={{
    format: { label: t('format') },
    copyAsMarkdown: { label: t('copyAsMarkdown') },
  }}
/>
```

--------------------------------

### Build and Run iOS App

Source: https://github.com/software-mansion/enriched-markdown/blob/main/apps/react-native-example/README.md

Execute the build command for iOS after ensuring CocoaPods dependencies are installed.

```sh
# Using npm
npm run ios

# OR using Yarn
yarn ios
```

--------------------------------

### Configure EnrichedMarkdownTextInput for Mentions

Source: https://github.com/software-mansion/enriched-markdown/blob/main/docs/MENTIONS.md

Example setup for EnrichedMarkdownTextInput with mention indicators and custom link styling for different mention types.

```tsx
<EnrichedMarkdownTextInput
  ref={ref}
  mentionIndicators={['@', '#']}
  markdownStyle={{
    link: { color: '#2563EB', underline: true },
    linkVariants: {
      '^user:': { color: '#1264A3', backgroundColor: '#E8F5FB', underline: false },
      '^channel:': { color: '#065F46', backgroundColor: '#D1FAE5', underline: false },
    },
  }}
  onStartMention={({ indicator }) => setShowSuggestions(true)}
  onChangeMention={({ indicator, text }) => setQuery(text)}
  onEndMention={() => setShowSuggestions(false)}
  onCaretRectChange={setCaretRect} // for positioning the popup
/>
```

--------------------------------

### Install React Native Package

Source: https://github.com/software-mansion/enriched-markdown/blob/main/README.md

Use yarn to add the react-native-enriched-markdown package to your project.

```bash
yarn add react-native-enriched-markdown
```

--------------------------------

### Verify New Architecture Logs

Source: https://github.com/software-mansion/enriched-markdown/blob/main/CONTRIBUTING.md

Example log output from Metro indicating the app is running with the new architecture enabled.

```json
Running "EnrichedMarkdownExample" with {"fabric":true,"initialProps":{"concurrentRoot":true},"rootTag":1}
```

--------------------------------

### Superscript and Subscript Markdown

Source: https://github.com/software-mansion/enriched-markdown/blob/main/docs/ELEMENTS_STRUCTURE.md

Examples of superscript and subscript syntax, including mixed usage.

```markdown
E = mc^2^

H~2~O   H~2~SO~4~

^14^C dating  (isotope notation)

H~3~O^+^  (mixed superscript and subscript)
```

--------------------------------

### Configure writingDirection for EnrichedMarkdown

Source: https://github.com/software-mansion/enriched-markdown/blob/main/docs/API_REFERENCE.md

Examples showing how to handle mixed-direction text using the default 'first-strong' behavior and how to force RTL direction for all paragraphs.

```tsx
// Mixed-direction document — each paragraph picks its own side.
<EnrichedMarkdownText
  markdown={
    'هذه فقرة عربية\n\n' +
    'This English paragraph stays LTR.\n\n' +
    '123 456 789.' // neutral — follows the view's layout direction
  }
/>

// Force RTL on every paragraph regardless of content.
<EnrichedMarkdownText writingDirection="rtl" markdown={content} />
```

--------------------------------

### Adding Custom Context Menu Items

Source: https://github.com/software-mansion/enriched-markdown/blob/main/docs/API_REFERENCE.md

Example of adding a custom 'Summarize with AI' action to the EnrichedMarkdownTextInput component.

```tsx
<EnrichedMarkdownTextInput
  contextMenuItems={[
    {
      text: 'Summarize with AI',
      onPress: ({ text, styleState }) => {
        console.log('Selected:', text, 'Bold:', styleState.bold.isActive);
      },
    },
  ]}
/>
```

--------------------------------

### Implement EnrichedMarkdownTextInput with Bold Toggle

Source: https://github.com/software-mansion/enriched-markdown/blob/main/docs/INPUT.md

This example demonstrates using a ref to imperatively toggle bold styling and the onChangeState callback to track the active style state for UI updates.

```tsx
import { useRef, useState } from 'react';
import { View, Button, StyleSheet } from 'react-native';
import {
  EnrichedMarkdownTextInput,
  type EnrichedMarkdownTextInputInstance,
  type StyleState,
} from 'react-native-enriched-markdown';

export default function App() {
  const ref = useRef<EnrichedMarkdownTextInputInstance>(null);
  const [state, setState] = useState<StyleState | null>(null);

  return (
    <View style={styles.container}>
      <EnrichedMarkdownTextInput
        ref={ref}
        placeholder="Type here..."
        onChangeState={setState}
        style={styles.input}
      />
      <View style={styles.toolbar}>
        <Button
          title={state?.bold.isActive ? 'Unbold' : 'Bold'}
          color={state?.bold.isActive ? 'green' : 'gray'}
          onPress={() => ref.current?.toggleBold()}
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  input: { width: '100%', fontSize: 20, padding: 10, maxHeight: 200, backgroundColor: 'lightgray' },
  toolbar: { flexDirection: 'row', gap: 8, marginTop: 8 },
});
```

--------------------------------

### EnrichedMarkdownText selectionMenuConfig Example

Source: https://github.com/software-mansion/enriched-markdown/blob/main/docs/API_REFERENCE.md

Demonstrates how to customize the selection menu by disabling actions and localizing labels within the EnrichedMarkdownText component.

```tsx
<EnrichedMarkdownText
  markdown={content}
  selectionMenuConfig={{
    // Hide an action:
    copyAsMarkdown: { enabled: false },
    // Localize the labels:
    copy: { label: t('copy') },
    copyImageUrl: {
      label: t('copyImageUrl'),
      pluralLabels: { other: t('copyImageUrls') }, // "{count}" → image count
    },
  }}
/>
```

--------------------------------

### Render LaTeX math with EnrichedMarkdownText

Source: https://github.com/software-mansion/enriched-markdown/blob/main/docs/LATEX_MATH.md

Example showing block and inline math syntax within a markdown string, including custom styling for math elements.

```tsx
<EnrichedMarkdownText
  flavor="github"
  markdown={`
The quadratic formula:

$$x = \\frac{-b \\pm \\sqrt{b^2-4ac}}{2a}$$

Einstein's mass-energy equivalence $E = mc^2$ is one of the most famous equations.
  `}
  markdownStyle={{
    math: {
      fontSize: 20,
      color: '#1F2937',
      backgroundColor: '#F3F4F6',
      padding: 12,
      textAlign: 'center',
    },
    inlineMath: {
      color: '#1F2937',
    },
  }}
/>
```

--------------------------------

### Configure Highlight Styles in EnrichedMarkdownText

Source: https://github.com/software-mansion/enriched-markdown/blob/main/docs/STYLES.md

Example of applying custom background color to highlighted text. Requires md4cFlags={{ highlight: true }} to be enabled.

```tsx
<EnrichedMarkdownText
  markdown="This is ==important== text with ==**bold**== inside."
  md4cFlags={{ highlight: true }}
  markdownStyle={{
    highlight: {
      backgroundColor: '#FEF08A',
    },
  }}
/>
```

--------------------------------

### Markdown Line Break Semantics

Source: https://github.com/software-mansion/enriched-markdown/blob/main/docs/ELEMENTS_STRUCTURE.md

Example demonstrating how blank lines, single newlines, and hard breaks are rendered in standard CommonMark.

```markdown
This line and
this line render as one continuous sentence.

A blank line starts a new paragraph.

Two trailing spaces  
or a trailing backslash\
force a line break within the paragraph.
```

--------------------------------

### EnrichedMarkdownText syntax highlighting configuration

Source: https://github.com/software-mansion/enriched-markdown/blob/main/docs/CODE_HIGHLIGHT.md

Example of enabling syntax highlighting by specifying a language in the fenced block and customizing token colors via the syntaxColors property.

```tsx
<EnrichedMarkdownText
  flavor="github"
  markdown={String.raw`
```python
def greet(name: str) -> str:
    return f"Hello, {name}!"  # a comment
```
`}
  markdownStyle={{
    codeBlock: {
      syntaxColors: {
        keyword: '#C678DD',
        string: '#98C379',
        number: '#D19A66',
        comment: '#7F848E',
        function: '#61AFEF',
        type: '#E5C07B',
        // ...any of the 14 token types
      },
    },
  }}
/>
```

--------------------------------

### EnrichedMarkdownText with subscript styling

Source: https://github.com/software-mansion/enriched-markdown/blob/main/docs/STYLES.md

Example of rendering subscript text by enabling the subscript flag and defining custom font and baseline scaling.

```tsx
<EnrichedMarkdownText
  markdown="H~2~O"
  md4cFlags={{ subscript: true }}
  markdownStyle={{
    subscript: {
      fontScale: 0.75,
      baselineOffsetScale: 0.20,
    },
  }}
/>
```

--------------------------------

### Superscript Component Usage

Source: https://github.com/software-mansion/enriched-markdown/blob/main/docs/STYLES.md

Example of rendering superscript text using the EnrichedMarkdownText component with the required md4cFlags and custom styling.

```tsx
<EnrichedMarkdownText
  markdown="E = mc^2^"
  md4cFlags={{ superscript: true }}
  markdownStyle={{
    superscript: {
      fontScale: 0.75,
      baselineOffsetScale: 0.35,
    },
  }}
/>
```

--------------------------------

### EnrichedMarkdownText accessibilityLabels Example

Source: https://github.com/software-mansion/enriched-markdown/blob/main/docs/API_REFERENCE.md

Demonstrates how to provide custom accessibility labels for specific markdown elements within the EnrichedMarkdownText component.

```tsx
<EnrichedMarkdownText
  markdown={content}
  accessibilityLabels={{
    list: { bulletPoint: 'Punkt', orderedItem: 'Element {n}' },
    blockquote: { quote: 'Zitat' },
    math: { equation: 'Formel: {latex}' },
  }}
/>
```

--------------------------------

### Configure md4cFlags for EnrichedMarkdownText

Source: https://github.com/software-mansion/enriched-markdown/blob/main/docs/API_REFERENCE.md

Examples of using md4cFlags to toggle underline, italic emphasis, and hard soft breaks in the EnrichedMarkdownText component.

```tsx
// Default: _text_ is treated as italic
<EnrichedMarkdownText
  markdown="This is _italic_ text"
/>

// With underline enabled: _text_ is underlined, *text* is italic
<EnrichedMarkdownText
  markdown="This is _underlined_ and *italic* text"
  md4cFlags={{ underline: true }}
/>

// Preserve single newlines as visible line breaks
<EnrichedMarkdownText
  markdown={markdownFromInput}
  md4cFlags={{ hardSoftBreaks: true }}
/>
```

--------------------------------

### Configure writingDirection prop

Source: https://github.com/software-mansion/enriched-markdown/blob/main/docs/RTL.md

Examples of using the writingDirection prop to control text flow, including the default behavior and forcing RTL for specific UI contexts.

```tsx
// Default — mixed Arabic/English document renders each paragraph correctly.
<EnrichedMarkdownText markdown={mixedContent} />

// Force RTL for the whole document (e.g. forms or admin UI in an Arabic locale).
<EnrichedMarkdownText writingDirection="rtl" markdown={content} />
```

--------------------------------

### Configure include directories and definitions

Source: https://github.com/software-mansion/enriched-markdown/blob/main/packages/react-native-enriched-markdown/android/src/main/jni/CMakeLists.txt

Sets up include paths and compile definitions for the main shared library.

```cmake
target_include_directories(
  ${LIB_TARGET_NAME}
  PUBLIC
  ${CMAKE_CURRENT_SOURCE_DIR}
  ${CMAKE_CURRENT_SOURCE_DIR}/react/renderer/components/${LIB_LITERAL}
  ${LIB_ANDROID_GENERATED_JNI_DIR}
  ${LIB_ANDROID_GENERATED_COMPONENTS_DIR}
  ${CPP_ROOT}/md4c
  ${CPP_ROOT}/parser
  ${CPP_ROOT}/highlight
)

target_compile_definitions(${LIB_TARGET_NAME} PRIVATE MD4C_USE_UTF8=1)
```

--------------------------------

### Build and apply a MarkdownTheme

Source: https://github.com/software-mansion/enriched-markdown/blob/main/packages/enriched-markdown-ios/README.md

Demonstrates creating a custom MarkdownTheme using the result-builder DSL and applying it to a view or inline.

```swift
import EnrichedMarkdown
import SwiftUI

let AppMarkdownTheme = MarkdownTheme {
  Paragraph()
    .font(.body)
    .foregroundStyle(Color(red: 31 / 255, green: 41 / 255, blue: 55 / 255))
    .lineHeight(26)
    .marginBottom(16)

  Heading(1)
    .font(.largeTitle)
    .bold()
    .foregroundStyle(Color(red: 17 / 255, green: 24 / 255, blue: 39 / 255))

  Link()
    .foregroundStyle(Color(red: 37 / 255, green: 99 / 255, blue: 235 / 255))
    .underline()

  CodeBlock()
    .font(.system(.body, design: .monospaced))
    .foregroundStyle(Color(red: 243 / 255, green: 244 / 255, blue: 246 / 255))
    .background(Color(red: 31 / 255, green: 41 / 255, blue: 55 / 255))
    .cornerRadius(8)
    .padding(16)
}

// App-wide / subtree default
HomeScreen()
  .markdownTheme(AppMarkdownTheme)

// Inline builder (same as passing a MarkdownTheme)
EnrichedMarkdownText(content)
  .markdownTheme {
    Link().foregroundStyle(.red)
  }
```

--------------------------------

### Passing Md4cFlags to EnrichedMarkdownText

Source: https://github.com/software-mansion/enriched-markdown/blob/main/packages/android-enriched-markdown/README.md

Example of configuring parser flags per instance of the EnrichedMarkdownText component.

```kotlin
import com.swmansion.enriched.markdown.compose.Md4cFlags

EnrichedMarkdownText(
  markdown = "_underlined_",
  flags = Md4cFlags(underline = true),
)
```

--------------------------------

### Build, test, and lint commands

Source: https://github.com/software-mansion/enriched-markdown/blob/main/packages/android-enriched-markdown/README.md

Commands to build, test, and lint the Android native workspace.

```sh
yarn workspace @enriched-markdown/android build
yarn workspace @enriched-markdown/android test:android-native
yarn workspace @enriched-markdown/android lint:android-native
```

--------------------------------

### EnrichedMarkdownTextInput writingDirection prop usage

Source: https://github.com/software-mansion/enriched-markdown/blob/main/docs/INPUT.md

Example of forcing right-to-left text direction using the writingDirection prop on iOS.

```tsx
<EnrichedMarkdownTextInput writingDirection="rtl" placeholder="اكتب هنا..." />
```

--------------------------------

### Clone the Repository

Source: https://github.com/software-mansion/enriched-markdown/blob/main/CONTRIBUTING.md

Commands to clone the project repository and navigate into the directory.

```sh
git clone https://github.com/software-mansion/enriched-markdown.git
cd enriched-markdown
```

--------------------------------

### Disable LaTeX math parsing

Source: https://github.com/software-mansion/enriched-markdown/blob/main/docs/LATEX_MATH.md

Example of disabling LaTeX math parsing by setting latexMath to false in md4cFlags.

```tsx
<EnrichedMarkdownText markdown="Price is $5" md4cFlags={{ latexMath: false }} />
```

--------------------------------

### Define and Apply MarkdownStyle

Source: https://github.com/software-mansion/enriched-markdown/blob/main/packages/android-enriched-markdown/README.md

Demonstrates creating a custom MarkdownStyle using the markdownStyle builder and applying it either as an app-wide default via MarkdownTheme or as a per-instance override in EnrichedMarkdownText.

```kotlin
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.swmansion.enriched.markdown.compose.MarkdownStyle
import com.swmansion.enriched.markdown.compose.markdownStyle

val AppMarkdownStyle: MarkdownStyle = markdownStyle {
  paragraph {
    fontSize = 16.sp
    color = Color(0xFF1F2937)
    lineHeight = 26.sp
    marginBottom = 16.dp
  }
  h1 {
    fontSize = 30.sp
    color = Color(0xFF111827)
  }
  link {
    color = Color(0xFF2563EB)
    underline = true
  }
  codeBlock {
    fontSize = 14.sp
    color = Color(0xFFF3F4F6)
    backgroundColor = Color(0xFF1F2937)
    cornerRadius = 8.dp
    padding = 16.dp
  }
}

// App-wide default
MarkdownTheme(style = AppMarkdownStyle) {
  HomeScreen()
}

// Per-instance override
EnrichedMarkdownText(
  markdown = content,
  style = AppMarkdownStyle.copy {
    link { color = Color.Red }
  },
)
```

--------------------------------

### Configure Features in package.json

Source: https://github.com/software-mansion/enriched-markdown/blob/main/packages/react-native-enriched-markdown/README.md

Add this block to your app's package.json to enable code highlighting and math features.

```json
{
  "enriched-markdown": {
    "enableCodeHighlight": true,
    "enableMath": true,
    "codeHighlightLanguages": ["javascript", "typescript", "python", "swift", "kotlin"]
  }
}
```

--------------------------------

### Restore Missing Native Assets

Source: https://github.com/software-mansion/enriched-markdown/blob/main/docs/BREAKING_CHANGES.md

Commands to manually trigger the postinstall script or rebuild the package when native assets are missing and build failure occurs.

```bash
node node_modules/react-native-enriched-markdown/postinstall.mjs
# or: npm rebuild react-native-enriched-markdown
```

--------------------------------

### CMake Configuration for EnrichedMarkdown

Source: https://github.com/software-mansion/enriched-markdown/blob/main/packages/react-native-enriched-markdown/android/src/main/jni/CMakeLists.txt

Initializes the CMake environment, sets library variables, and defines paths for generated JNI and component directories.

```cmake
cmake_minimum_required(VERSION 3.13)
set(CMAKE_VERBOSE_MAKEFILE ON)

set(LIB_LITERAL EnrichedMarkdownTextSpec)
set(LIB_TARGET_NAME react_codegen_${LIB_LITERAL})

set(LIB_ANDROID_DIR ${CMAKE_CURRENT_SOURCE_DIR}/../../..)
set(LIB_ANDROID_GENERATED_JNI_DIR ${LIB_ANDROID_DIR}/generated/jni)
set(LIB_ANDROID_GENERATED_COMPONENTS_DIR ${LIB_ANDROID_GENERATED_JNI_DIR}/react/renderer/components/${LIB_LITERAL})
```

--------------------------------

### Optional Highlighting Configuration

Source: https://github.com/software-mansion/enriched-markdown/blob/main/packages/react-native-enriched-markdown/android/src/main/jni/CMakeLists.txt

Conditionally includes highlighting configuration generated by build.gradle if the configuration file exists.

```cmake
# Optional tree-sitter code highlighting. build.gradle writes this config during
# configuration (enable flag, selected languages, generated registry dir); absent
# on a bare CMake invocation, in which case highlighting stays compiled out.
set(HIGHLIGHT_CONFIG "${LIB_ANDROID_DIR}/build/generated/highlight/highlight-config.cmake")
if(EXISTS "${HIGHLIGHT_CONFIG}")
  include("${HIGHLIGHT_CONFIG}")
endif()
```

--------------------------------

### EnrichedMarkdownText initializer

Source: https://github.com/software-mansion/enriched-markdown/blob/main/packages/enriched-markdown-ios/README.md

The primary view for rendering Markdown content.

```swift
public struct EnrichedMarkdownText: View {
  public init(_ markdown: String, flags: Md4cFlags = .commonMark)
}
```

--------------------------------

### Rebuild package via npm

Source: https://github.com/software-mansion/enriched-markdown/blob/main/docs/NATIVE_ASSETS.md

Use this command to re-fetch assets if the initial download did not complete successfully.

```sh
npm rebuild react-native-enriched-markdown
```

--------------------------------

### EnrichedMarkdownTextInputInstance

Source: https://github.com/software-mansion/enriched-markdown/blob/main/docs/INPUT.md

Imperative methods available via the component ref.

```APIDOC
## EnrichedMarkdownTextInputInstance

### Description
Methods exposed via the component ref to imperatively modify the text selection styling.

### Methods
- **toggleBold()** - Toggles the bold styling within the current selection.
```

--------------------------------

### Add dependencies to build.gradle

Source: https://github.com/software-mansion/enriched-markdown/blob/main/packages/android-enriched-markdown/README.md

Include the library in your project by adding the repository and implementation dependency to your build.gradle file.

```kotlin
repositories {
  google()
  mavenCentral()
}

dependencies {
  implementation("com.swmansion.enriched.markdown:compose:0.1.0")
}
```

--------------------------------

### rememberMarkdownTheme

Source: https://github.com/software-mansion/enriched-markdown/blob/main/packages/enriched-markdown-ios/README.md

Creates a theme that reacts to environment changes such as color scheme or dynamic type size.

```APIDOC
## rememberMarkdownTheme

### Description
Creates a reactive MarkdownTheme that updates when provided environment values change.

### Parameters
- **colorScheme** (ColorScheme) - The current color scheme.
- **dynamicTypeSize** (DynamicTypeSize) - The current dynamic type size.
- **content** (MarkdownThemeBuilder) - The builder block defining the theme elements.
```

--------------------------------

### Generate changelog with generate-changelog.mjs

Source: https://github.com/software-mansion/enriched-markdown/blob/main/scripts/README.md

Generates GitHub-release-style markdown for commits. Use the first command to copy output to the clipboard for everything since a specific tag, or the second to specify a range.

```sh
./scripts/generate-changelog.mjs v0.7.0 | pbcopy          # everything since v0.7.0
./scripts/generate-changelog.mjs v0.6.0 v0.7.0            # explicit range
```

--------------------------------

### insertText(text: string) usage example

Source: https://github.com/software-mansion/enriched-markdown/blob/main/docs/API_REFERENCE.md

Inserts Markdown text at the cursor position. Wrap block content in newlines to ensure proper formatting when inserting mid-paragraph.

```javascript
insertText('\n- item\n')
```

--------------------------------

### MarkdownStyle Configuration

Source: https://github.com/software-mansion/enriched-markdown/blob/main/packages/android-enriched-markdown/README.md

Functions and classes for defining and copying Markdown styles.

```kotlin
fun markdownStyle(block: MarkdownStyleBuilder.() -> Unit): MarkdownStyle

class MarkdownStyle {
  fun copy(block: MarkdownStyleBuilder.() -> Unit): MarkdownStyle
  companion object {
    val Default: MarkdownStyle
  }
}
```

--------------------------------

### startMention(indicator)

Source: https://github.com/software-mansion/enriched-markdown/blob/main/docs/MENTIONS.md

Inserts the specified indicator at the current cursor position and triggers the mention flow. The indicator must be present in the mentionIndicators prop.

```APIDOC
## startMention(indicator)

### Description
Inserts the indicator at the cursor and triggers the mention flow. Must be in `mentionIndicators`.

### Parameters
- **indicator** (string) - Required - The trigger character to start the mention flow.
```

--------------------------------

### Configure Info.plist for Photo Library Access

Source: https://github.com/software-mansion/enriched-markdown/blob/main/packages/react-native-enriched-markdown/README.md

Add this key to Info.plist to allow saving images to the photo library.

```xml
<key>NSPhotoLibraryAddUsageDescription</key>
<string>This app needs access to your photo library to save images.</string>
```

--------------------------------

### copyToClipboard()

Source: https://github.com/software-mansion/enriched-markdown/blob/main/docs/INPUT.md

An imperative method to copy the full content of the input to the system clipboard.

```APIDOC
## copyToClipboard()

### Description
Copies the full content to the system clipboard, matching the result of selecting all text and pressing the context menu's copy action. The selection is left unchanged, and calling it on an empty input is a no-op.
```

--------------------------------

### Run Maestro E2E Tests

Source: https://github.com/software-mansion/enriched-markdown/blob/main/CONTRIBUTING.md

Commands to execute end-to-end tests using Maestro across different platforms.

```sh
yarn test:e2e:ios
yarn test:e2e:android
yarn test:e2e:mobile   # both platforms sequentially
yarn test:e2e:ios-native      # native iOS example app (CommonMark only)
yarn test:e2e:android-native  # native Android example app (CommonMark only)
```

--------------------------------

### Use rememberMarkdownTheme for dynamic styles

Source: https://github.com/software-mansion/enriched-markdown/blob/main/packages/enriched-markdown-ios/README.md

Use rememberMarkdownTheme to react to environment changes like color scheme or dynamic type size.

```swift
struct RootView: View {
  @Environment(\.colorScheme) private var colorScheme
  @Environment(\.dynamicTypeSize) private var dynamicTypeSize

  var body: some View {
    let theme = rememberMarkdownTheme(
      colorScheme: colorScheme,
      dynamicTypeSize: dynamicTypeSize
    ) {
      Paragraph().foregroundStyle(.primary)
      Link().foregroundStyle(.tint)
    }

    Content()
      .markdownTheme(theme)
  }
}
```

--------------------------------

### Publishing commands

Source: https://github.com/software-mansion/enriched-markdown/blob/main/packages/android-enriched-markdown/README.md

Commands for performing a local dry run publish or publishing to Maven Central.

```sh
# Local dry run (no signing required)
yarn workspace @enriched-markdown/android publish:maven-local

# Maven Central (requires MAVEN_USERNAME, MAVEN_PASSWORD, GPG_PRIVATE_KEY, GPG_PASSPHRASE)
yarn workspace @enriched-markdown/android publish:maven-central
```

--------------------------------

### Run vendor script directly

Source: https://github.com/software-mansion/enriched-markdown/blob/main/docs/NATIVE_ASSETS.md

Use this fallback command if your package manager skips scripts or blocks the standard rebuild process.

```sh
node node_modules/react-native-enriched-markdown/postinstall.mjs
```

--------------------------------

### Configure EnrichedMarkdownText selection menu

Source: https://github.com/software-mansion/enriched-markdown/blob/main/docs/COPY_OPTIONS.md

Use selectionMenuConfig to toggle the visibility of built-in copy actions like copyAsMarkdown and copyImageUrl.

```tsx
<EnrichedMarkdownText
  markdown={content}
  enableBlockContextMenu={false}
  selectionMenuConfig={{
    copyAsMarkdown: { enabled: false },
    copyImageUrl: { enabled: false },
  }}
/>
```

--------------------------------

### Configuring Selection Menu Items

Source: https://github.com/software-mansion/enriched-markdown/blob/main/docs/COPY_OPTIONS.md

How to use selectionMenuConfig and formatMenuConfig to toggle the visibility of built-in menu actions in EnrichedMarkdownText and EnrichedMarkdownTextInput components.

```APIDOC
## Component Configuration: selectionMenuConfig

### Description
Controls the visibility of built-in selection menu actions such as 'copyAsMarkdown', 'copyImageUrl', and 'format' (for inputs).

### Usage
Pass an object to the `selectionMenuConfig` prop where each key corresponds to a menu item, containing an `{ enabled: boolean }` property.

### Example
```tsx
<EnrichedMarkdownText
  markdown={content}
  selectionMenuConfig={{
    copyAsMarkdown: { enabled: false },
    copyImageUrl: { enabled: false },
  }}
/>
```

## Component Configuration: formatMenuConfig

### Description
Controls the visibility of items within the 'Format' submenu of the `EnrichedMarkdownTextInput` component.

### Usage
Pass an object to the `formatMenuConfig` prop where each key corresponds to a formatting action, containing an `{ enabled: boolean }` property.

### Example
```tsx
<EnrichedMarkdownTextInput
  formatMenuConfig={{
    spoiler: { enabled: false },
    link: { enabled: false },
  }}
/>
```
```

--------------------------------

### Publish new versions with yarn release

Source: https://github.com/software-mansion/enriched-markdown/blob/main/CONTRIBUTING.md

Use this command to trigger the release-it process for publishing new versions, which includes version bumping and tag creation.

```sh
yarn release
```

--------------------------------

### Configure md4c static library

Source: https://github.com/software-mansion/enriched-markdown/blob/main/packages/react-native-enriched-markdown/android/src/main/jni/CMakeLists.txt

Defines the md4c library as a static library with C11 standard requirements and UTF-8 support.

```cmake
add_library(md4c_lib STATIC ${MD4C_SOURCES})
target_include_directories(md4c_lib PUBLIC ${CPP_ROOT}/md4c)
target_compile_definitions(md4c_lib PRIVATE MD4C_USE_UTF8=1)
set_target_properties(md4c_lib PROPERTIES
  C_STANDARD 11
  C_STANDARD_REQUIRED ON
)
```

--------------------------------

### Run development scripts for @enriched-markdown/ios

Source: https://github.com/software-mansion/enriched-markdown/blob/main/packages/enriched-markdown-ios/README.md

Use these yarn workspace commands to build, test, or clean the iOS package. These scripts execute the underlying Swift package manager commands.

```sh
yarn workspace @enriched-markdown/ios build
yarn workspace @enriched-markdown/ios test
yarn workspace @enriched-markdown/ios clean
```

--------------------------------

### Configure enriched-markdown in package.json

Source: https://github.com/software-mansion/enriched-markdown/blob/main/docs/CODE_HIGHLIGHT.md

Use the enriched-markdown block in your package.json to enable code highlighting and specify the list of languages to compile into your binary.

```json
{
  "enriched-markdown": {
    "enableCodeHighlight": true,
    "codeHighlightLanguages": ["javascript", "tsx", "json", "bash"]
  }
}
```

--------------------------------

### Configure EnrichedMarkdownTextInput selection and format menus

Source: https://github.com/software-mansion/enriched-markdown/blob/main/docs/COPY_OPTIONS.md

Control the visibility of selection menu items and format submenu options using selectionMenuConfig and formatMenuConfig.

```tsx
<EnrichedMarkdownTextInput
  selectionMenuConfig={{
    format: { enabled: false },
    copyAsMarkdown: { enabled: false },
  }}
  formatMenuConfig={{
    spoiler: { enabled: false },
    link: { enabled: false },
  }}
/>
```

--------------------------------

### formatMenuConfig

Source: https://github.com/software-mansion/enriched-markdown/blob/main/docs/API_REFERENCE.md

Configuration object to control visibility and labels of items in the Format submenu.

```APIDOC
## formatMenuConfig

### Description
Controls which items appear inside the Format submenu and the label for each. Only effective when `selectionMenuConfig.format` is enabled.

### Configuration Shape
- **bold** (object) - Optional - { enabled?: boolean; label?: string }
- **italic** (object) - Optional - { enabled?: boolean; label?: string }
- **underline** (object) - Optional - { enabled?: boolean; label?: string }
- **strikethrough** (object) - Optional - { enabled?: boolean; label?: string }
- **spoiler** (object) - Optional - { enabled?: boolean; label?: string }
- **link** (object) - Optional - { enabled?: boolean; label?: string }
```

--------------------------------

### onKeyPress

Source: https://github.com/software-mansion/enriched-markdown/blob/main/docs/API_REFERENCE.md

Fires on every keystroke, before the change is applied to the input content.

```APIDOC
## onKeyPress

### Description
Fires on every keystroke, before the change is applied to the input content. `nativeEvent.key` is the pressed character, or a named key.

### Signature
`(e: NativeSyntheticEvent<{ key: string }>) => void`
```

--------------------------------

### enableLinkPreview

Source: https://github.com/software-mansion/enriched-markdown/blob/main/docs/API_REFERENCE.md

Controls the native link preview on long press (iOS only).

```APIDOC
## enableLinkPreview

### Description
Controls the native link preview on long press (iOS only). Automatically set to false when onLinkLongPress is provided.

### Type
boolean

### Default Value
true

### Platform
iOS
```

--------------------------------

### Ref Methods

Source: https://github.com/software-mansion/enriched-markdown/blob/main/docs/API_REFERENCE.md

Imperative methods available on the component ref.

```APIDOC
## Ref Methods

### focus()
Focuses the input.

### blur()
Blurs the input.

### setValue(markdown: string)
Sets the input content from a Markdown string.

### getMarkdown(): Promise<string>
Returns a Promise that resolves with the current Markdown content.

### getCaretRect(): Promise<CaretRect>
Returns a Promise that resolves with the current caret's pixel position.

### setSelection(start: number, end: number)
Sets the text selection range.

### toggleBold()
Toggles bold on the current selection.

### toggleItalic()
Toggles italic on the current selection or cursor.

### toggleUnderline()
Toggles underline on the current selection or cursor.

### toggleStrikethrough()
Toggles strikethrough on the current selection or cursor.

### toggleSpoiler()
Toggles spoiler on the current selection or cursor.

### toggleHeading(level: number)
Toggles a heading of the given level (1–6) on the cursor's paragraph.

### toggleUnorderedList()
Turns the cursor's paragraph(s) into bullet list items.

### toggleOrderedList()
Turns the cursor's paragraph(s) into numbered list items.

### indentList()
Nests the current list item one level deeper.

### outdentList()
Lifts the current list item out one nesting level.

### setLink(url: string)
Applies a link URL to the currently selected text.

### insertLink(text: string, url: string)
Inserts a link with the given text and URL at the current cursor position.

### removeLink()
Removes the link from the current selection.
```

--------------------------------

### MarkdownSelectionMenuConfig configuration

Source: https://github.com/software-mansion/enriched-markdown/blob/main/packages/enriched-markdown-ios/README.md

Configuration for the custom text-selection edit menu.

```swift
public struct MarkdownSelectionMenuConfig: Equatable, Sendable {
  public init(
    copyAsMarkdown: Bool = true,
    copyImageUrl: Bool = true,
    copyAsMarkdownLabel: String = "Copy as Markdown"
  )
}

extension View {
  func markdownSelectionMenu(_ config: MarkdownSelectionMenuConfig) -> some View
}
```

--------------------------------

### Memoize markdownStyle for performance

Source: https://github.com/software-mansion/enriched-markdown/blob/main/docs/STYLES.md

Use useMemo to memoize the markdownStyle object to prevent unnecessary re-renders of the component.

```tsx
import type { MarkdownStyle } from 'react-native-enriched-markdown';

const markdownStyle: MarkdownStyle = useMemo(() => ({
  paragraph: { fontSize: 16 },
  h1: { fontSize: 32 },
}), []);
```

--------------------------------

### rememberMarkdownTheme function signature

Source: https://github.com/software-mansion/enriched-markdown/blob/main/packages/enriched-markdown-ios/README.md

Re-creates a theme when colorScheme or dynamicTypeSize changes. Call this function from View.body after reading the environment values.

```swift
@MainActor
public func rememberMarkdownTheme(
  colorScheme: ColorScheme,
  dynamicTypeSize: DynamicTypeSize,
  @MarkdownThemeBuilder _ content: () -> MarkdownThemeGroup
) -> MarkdownTheme
```

--------------------------------

### Migrate Expo Config Plugin to package.json

Source: https://github.com/software-mansion/enriched-markdown/blob/main/docs/BREAKING_CHANGES.md

Shows the transition from the deprecated Expo plugin configuration in app.json to the new enriched-markdown block in package.json.

```json
{
  "expo": {
    "plugins": [
      [
        "react-native-enriched-markdown",
        {
          "enableMath": false,
          "codeHighlight": {
            "enabled": true,
            "languages": ["javascript", "tsx"]
          }
        }
      ]
    ]
  }
}
```

```json
{
  "enriched-markdown": {
    "enableMath": false,
    "enableCodeHighlight": true,
    "codeHighlightLanguages": ["javascript", "tsx"]
  }
}
```

--------------------------------

### Remove native math dependency in package.json

Source: https://github.com/software-mansion/enriched-markdown/blob/main/docs/LATEX_MATH.md

Set enableMath to false in the enriched-markdown block of package.json to exclude RaTeX from the native binary.

```json
{
  "enriched-markdown": {
    "enableMath": false
  }
}
```

--------------------------------

### selectable

Source: https://github.com/software-mansion/enriched-markdown/blob/main/docs/API_REFERENCE.md

Determines whether text can be selected.

```APIDOC
## selectable

### Description
Whether text can be selected.

### Type
boolean

### Default Value
true

### Platform
Both
```

--------------------------------

### onFocus / onBlur

Source: https://github.com/software-mansion/enriched-markdown/blob/main/docs/API_REFERENCE.md

Lifecycle events for input focus tracking.

```APIDOC
## onFocus
### Description
Fires when the input gains focus.
### Signature
`() => void`

## onBlur
### Description
Fires when the input loses focus.
### Signature
`() => void`
```

--------------------------------

### selectionMenuConfig

Source: https://github.com/software-mansion/enriched-markdown/blob/main/docs/API_REFERENCE.md

Configures the behavior and labels of actions in the native text selection menu, such as Copy, Copy as Markdown, and Copy Image URL.

```APIDOC
## selectionMenuConfig

### Description
Controls built-in actions added to the native text selection menu. Each item can be enabled or disabled, and labels can be overridden.

### Configuration Object (SelectionMenuConfig)
- **copy** (object) - Optional - System "Copy" item. Properties: `label` (string).
- **copyAsMarkdown** (object) - Optional - "Copy as Markdown" action. Properties: `enabled` (boolean), `label` (string).
- **copyImageUrl** (object) - Optional - "Copy Image URL" action. Properties: `enabled` (boolean), `label` (string), `pluralLabels` (SelectionMenuPluralLabels).

### Example
<EnrichedMarkdownText
  markdown={content}
  selectionMenuConfig={{
    copyAsMarkdown: { enabled: false },
    copy: { label: t('copy') },
    copyImageUrl: {
      label: t('copyImageUrl'),
      pluralLabels: { other: t('copyImageUrls') },
    },
  }}
/>
```

--------------------------------

### Source File Collection

Source: https://github.com/software-mansion/enriched-markdown/blob/main/packages/react-native-enriched-markdown/android/src/main/jni/CMakeLists.txt

Collects source files for md4c, the parser, and highlighting components using file globbing.

```cmake
file(GLOB MD4C_SOURCES "${CPP_ROOT}/md4c/*.c")
file(GLOB PARSER_SOURCES "${CPP_ROOT}/parser/*.cpp")
file(GLOB HIGHLIGHT_SOURCES "${CPP_ROOT}/highlight/*.cpp")
```

--------------------------------

### Add Enriched Markdown dependency in Package.swift

Source: https://github.com/software-mansion/enriched-markdown/blob/main/packages/enriched-markdown-ios/README.md

Configure the package dependency and target integration within your Package.swift file.

```swift
dependencies: [
  .package(
    url: "https://github.com/software-mansion-labs/enriched-markdown-ios.git",
    from: "0.1.0"
  ),
],
targets: [
  .target(
    name: "YourApp",
    dependencies: [
      .product(name: "EnrichedMarkdown", package: "enriched-markdown-ios"),
    ]
  ),
]
```

--------------------------------

### onKeyPress event handler usage

Source: https://github.com/software-mansion/enriched-markdown/blob/main/docs/API_REFERENCE.md

Demonstrates how to use the onKeyPress prop to log pressed keys, mirroring React Native's TextInput behavior.

```tsx
<EnrichedMarkdownTextInput
  onKeyPress={({ nativeEvent: { key } }) => {
    console.log('Pressed key:', key);
  }}
/>
```

--------------------------------

### Link dependencies and finalize library

Source: https://github.com/software-mansion/enriched-markdown/blob/main/packages/react-native-enriched-markdown/android/src/main/jni/CMakeLists.txt

Locates required packages and links the shared library against fbjni, React Native, and the md4c static library.

```cmake
find_package(fbjni REQUIRED CONFIG)
find_package(ReactAndroid REQUIRED CONFIG)
find_library(LOG_LIB log)

target_link_libraries(
  ${LIB_TARGET_NAME}
  ${LOG_LIB}
  md4c_lib
  fbjni::fbjni
  ReactAndroid::jsi
  ReactAndroid::reactnative
)

target_include_directories(
  ${CMAKE_PROJECT_NAME}
  PUBLIC
  ${CMAKE_CURRENT_SOURCE_DIR}
)

target_compile_reactnative_options(${LIB_TARGET_NAME} PRIVATE)
```

--------------------------------

### CMake configuration for Enriched Markdown Parser

Source: https://github.com/software-mansion/enriched-markdown/blob/main/packages/android-enriched-markdown/parser/src/main/cpp/CMakeLists.txt

This CMakeLists.txt file sets up the project, locates source files for the md4c parser, and defines the shared library target with necessary include directories and dependencies.

```cmake
cmake_minimum_required(VERSION 3.13)
project(enriched_markdown_parser)

set(CPP_ROOT "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../core/cpp")

if(NOT EXISTS "${CPP_ROOT}/md4c/md4c.c")
  message(FATAL_ERROR "EnrichedMarkdown C++ sources not found at ${CPP_ROOT}")
endif()

file(GLOB MD4C_SOURCES "${CPP_ROOT}/md4c/*.c")
file(GLOB PARSER_SOURCES "${CPP_ROOT}/parser/*.cpp")

add_library(md4c_lib STATIC ${MD4C_SOURCES})
target_include_directories(md4c_lib PUBLIC "${CPP_ROOT}/md4c")
target_compile_definitions(md4c_lib PRIVATE MD4C_USE_UTF8=1)
set_target_properties(md4c_lib PROPERTIES
  C_STANDARD 11
  C_STANDARD_REQUIRED ON
)

add_library(
  enriched_markdown_parser
  SHARED
  ${PARSER_SOURCES}
  jni/ParserJni.cpp
)

target_include_directories(
  enriched_markdown_parser
  PRIVATE
  "${CMAKE_CURRENT_SOURCE_DIR}/jni"
  "${CPP_ROOT}/md4c"
  "${CPP_ROOT}/parser"
)

target_compile_definitions(enriched_markdown_parser PRIVATE MD4C_USE_UTF8=1)

find_package(fbjni REQUIRED CONFIG)
find_library(LOG_LIB log)

target_link_libraries(
  enriched_markdown_parser
  md4c_lib
  fbjni::fbjni
  ${LOG_LIB}
)
```

--------------------------------

### streamingConfig

Source: https://github.com/software-mansion/enriched-markdown/blob/main/docs/API_REFERENCE.md

Controls how incomplete tables and fenced code blocks are handled during streaming when flavor is set to 'github'.

```APIDOC
## streamingConfig

### Description
Configuration for streaming behavior. Controls how incomplete tables and fenced code blocks are handled during streaming with `flavor="github"`.

### Type
`{ tableMode?: string, codeBlockMode?: string }`

### Default Value
`{ tableMode: 'progressive', codeBlockMode: 'progressive' }`

### Options
- **tableMode**: 'progressive' (default) renders row-by-row; 'hidden' hides the table until complete.
- **codeBlockMode**: 'progressive' (default) streams line-by-line; 'hidden' hides the block until the closing fence arrives.

### Example
```tsx
<EnrichedMarkdownText
  markdown={streamingMarkdown}
  flavor="github"
  streamingAnimation
  streamingConfig={{ tableMode: 'hidden' }}
/>
```
```

--------------------------------

### flavor

Source: https://github.com/software-mansion/enriched-markdown/blob/main/docs/API_REFERENCE.md

Sets the Markdown flavor to enable specific features.

```APIDOC
## flavor

### Description
Markdown flavor. Set to 'github' to enable GitHub Flavored Markdown features: tables, block-style code blocks, and block-style blockquotes.

### Type
'commonmark' | 'github'

### Default Value
'commonmark'

### Platform
Both
```

--------------------------------

### Type Checking and Linting

Source: https://github.com/software-mansion/enriched-markdown/blob/main/CONTRIBUTING.md

Commands to verify code quality using TypeScript and ESLint.

```sh
yarn typecheck
yarn lint
```

--------------------------------

### Implement Dark Mode with MarkdownStyle

Source: https://github.com/software-mansion/enriched-markdown/blob/main/docs/STYLES.md

Define separate MarkdownStyle objects for light and dark modes and toggle them using the useColorScheme hook. Performance is optimized by defining these style objects outside the component or wrapping them in useMemo to maintain stable object references.

```tsx
import { useColorScheme } from 'react-native';
import { EnrichedMarkdownText } from 'react-native-enriched-markdown';
import type { MarkdownStyle } from 'react-native-enriched-markdown';

const lightMarkdownStyle: MarkdownStyle = {
  blockquote: { backgroundColor: '#F9FAFB', borderColor: '#D1D5DB' },
  code: { color: '#E01E5A', backgroundColor: '#FDF2F4' },
  table: {
    headerBackgroundColor: '#F3F4F6',
    rowEvenBackgroundColor: '#FFFFFF',
    rowOddBackgroundColor: '#F9FAFB',
  },
  // ... override any other colors for light mode
};

const darkMarkdownStyle: MarkdownStyle = {
  paragraph: { color: '#E5E7EB' },
  blockquote: { backgroundColor: '#1F2937', borderColor: '#4B5563' },
  code: { color: '#F87171', backgroundColor: '#1F2937' },
  table: {
    headerBackgroundColor: '#1F2937',
    rowEvenBackgroundColor: '#111827',
    rowOddBackgroundColor: '#1A1A2E',
    borderColor: '#374151',
  },
  // ... override any other colors for dark mode
};

function App() {
  const colorScheme = useColorScheme();

  return (
    <EnrichedMarkdownText
      markdown={content}
      markdownStyle={colorScheme === 'dark' ? darkMarkdownStyle : lightMarkdownStyle}
    />
  );
}
```

--------------------------------

### Configure imageRequestHeaders

Source: https://github.com/software-mansion/enriched-markdown/blob/main/docs/API_REFERENCE.md

Attaches custom HTTP headers like Referer to remote image requests.

```tsx
<EnrichedMarkdownText
  markdown={markdown}
  imageRequestHeaders={{
    Referer: 'https://example.com',
  }}
/>
```

--------------------------------

### Implement custom contextMenuItems

Source: https://github.com/software-mansion/enriched-markdown/blob/main/docs/API_REFERENCE.md

Adds custom actions to the text selection menu, such as AI summarization or translation.

```tsx
<EnrichedMarkdownText
  markdown={content}
  contextMenuItems={[
    {
      text: 'Summarize with AI',
      onPress: ({ text }) => {
        console.log('Selected:', text);
      },
    },
    {
      text: 'Translate',
      onPress: ({ text }) => {
        translate(text);
      },
    },
  ]}
/>
```

--------------------------------

### Configure Table Streaming with streamingConfig

Source: https://github.com/software-mansion/enriched-markdown/blob/main/docs/MARKDOWN_STREAMING.md

Control how tables are rendered during streaming using the streamingConfig prop with EnrichedMarkdownText.

```tsx
<EnrichedMarkdownText
  markdown={streamingMarkdown}
  flavor="github"
  streamingAnimation
  streamingConfig={{ tableMode: 'hidden' }}
/>
```

--------------------------------

### Add local path dependency in Package.swift

Source: https://github.com/software-mansion/enriched-markdown/blob/main/packages/enriched-markdown-ios/README.md

Use a local path dependency for development purposes.

```swift
.package(path: "../enriched-markdown-ios")
```

--------------------------------

### MarkdownTheme structure

Source: https://github.com/software-mansion/enriched-markdown/blob/main/packages/enriched-markdown-ios/README.md

Defines the theme structure for Markdown rendering.

```swift
public struct MarkdownTheme: Sendable {
  public init(@MarkdownThemeBuilder _ content: () -> MarkdownThemeGroup)
  public static let `default`: MarkdownTheme
}
```

--------------------------------

### Update Screenshot Baselines

Source: https://github.com/software-mansion/enriched-markdown/blob/main/CONTRIBUTING.md

Commands to refresh stored screenshot baselines when visual output changes.

```sh
yarn test:e2e:ios:update-screenshots
yarn test:e2e:android:update-screenshots
```

--------------------------------

### EnrichedMarkdownText

Source: https://github.com/software-mansion/enriched-markdown/blob/main/packages/enriched-markdown-ios/README.md

Initializes a new Markdown view with the specified source string and optional parser flags.

```APIDOC
## EnrichedMarkdownText

### Description
Initializes a view that renders Markdown content.

### Parameters
- **markdown** (String) - Required - The Markdown source string.
- **flags** (Md4cFlags) - Optional - Parser extensions (defaults to .commonMark).
```

--------------------------------

### Add Android Dependency

Source: https://github.com/software-mansion/enriched-markdown/blob/main/README.md

Include the enriched markdown compose dependency in your build.gradle file.

```kotlin
dependencies {
  implementation("com.swmansion.enriched.markdown:compose:0.1.0")
}
```

--------------------------------

### Tree network simulation in JavaScript

Source: https://github.com/software-mansion/enriched-markdown/blob/main/apps/ios-example/EnrichedMarkdownExample/EnrichedMarkdownExample/Resources/sample_markdown.md

A class representing a tree network that manages connections between trees using a fungal network simulation.

```javascript
// Example: Tree network simulation
class TreeNetwork {
  constructor() {
    this.trees = [];
    this.fungalConnections = new Map();
  }

  connectTrees(tree1, tree2) {
    // Trees share nutrients through mycorrhizal networks
    this.fungalConnections.set(`${tree1.id}-${tree2.id}`, {
      nutrientFlow: 'bidirectional',
      signalTransmission: true
    });
  }
}
```

--------------------------------

### Nested Lists Markdown

Source: https://github.com/software-mansion/enriched-markdown/blob/main/docs/ELEMENTS_STRUCTURE.md

Demonstrates support for unlimited nesting depth in both unordered and ordered lists.

```markdown
- First level
  - Second level
    - Third level
      - Fourth level (unlimited depth!)

1. First item
   1. Nested numbered
      1. Deep nested
   2. Another nested
2. Second item
```

--------------------------------

### allowFontScaling

Source: https://github.com/software-mansion/enriched-markdown/blob/main/docs/API_REFERENCE.md

Determines whether fonts should scale to respect system accessibility settings.

```APIDOC
## allowFontScaling

### Description
Whether fonts should scale to respect Text Size accessibility settings.

### Type
boolean (Default: true)
```
Tokens:
Raw