feat: add web support

Author: hryhoriiK97

README.md

@@ -2,11 +2,12 @@
 
 # react-native-enriched-markdown
 
-`react-native-enriched-markdown` is a powerful React Native library that renders Markdown content as native text and provides a rich text input with Markdown output. It supports iOS, Android, and macOS, and requires the New Architecture (Fabric).
+`react-native-enriched-markdown` is a powerful React Native library that renders Markdown content as native text and provides a rich text input with Markdown output. It supports iOS, Android, macOS, and Web, and requires the New Architecture (Fabric) for native platforms.
 
 ### EnrichedMarkdownText
 
 - ⚡ Fully native text rendering (no WebView)
+- 🌐 Web support via [react-native-web](https://necolas.github.io/react-native-web/) + [md4c](https://github.com/mity/md4c) compiled to WebAssembly
 - 🎯 High-performance Markdown parsing with [md4c](https://github.com/mity/md4c)
 - 📐 CommonMark standard compliant
 - 📊 GitHub Flavored Markdown (GFM)
@@ -56,21 +57,40 @@ We can help you build your next dream product –
   - [Other Events](docs/INPUT.md#other-events)
   - [Customizing Styles](docs/INPUT.md#customizing-enrichedmarkdowninput--styles)
 - [API Reference](#api-reference)
+- [Web Support](docs/WEB.md)
 - [macOS Support](docs/MACOS.md)
 - [Contributing](#contributing)
 - [Future Plans](#future-plans)
 - [License](#license)
 
 ## Prerequisites
 
-- Supports iOS, Android, and macOS platforms
+**Native (iOS / Android / macOS)**
 - Requires [the React Native New Architecture (Fabric)](https://reactnative.dev/architecture/landing-page)
 - Supported React Native releases: `0.81`, `0.82`, `0.83`, and `0.84`
 - macOS support via [react-native-macos](https://github.com/microsoft/react-native-macos) `0.81+`
 
+**Web**
+- Requires [`react-native-web`](https://necolas.github.io/react-native-web/) and Metro (or another bundler with `.web.tsx` platform resolution)
+- No New Architecture requirement — the web renderer runs entirely in JavaScript via WebAssembly
+- Only `EnrichedMarkdownText` is supported on web (`EnrichedMarkdownInput` is native-only)
+- LaTeX math requires the optional [`katex`](https://katex.org/) peer dependency
+
 ## Installation
 
-### Bare React Native app
+### Web
+
+No steps beyond having `react-native-web` configured. For LaTeX math, install the optional peer dependency:
+
+```sh
+npm install katex
+# or
+yarn add katex
+```
+
+See [Web Support](docs/WEB.md) for full setup details, supported features, and prop behaviour.
+
+### Bare React Native app (iOS / Android)
 
 #### 1. Install the library
 
@@ -140,6 +160,10 @@ See [EnrichedMarkdownInput](docs/INPUT.md) for detailed documentation on usage e
 
 See the [API Reference](docs/API_REFERENCE.md) for a detailed overview of all the props, methods, and events available.
 
+## Web Support
+
+See [Web Support](docs/WEB.md) for details on supported features, web-specific prop behaviour, and known limitations.
+
 ## macOS Support
 
 `react-native-enriched-markdown` supports macOS via [react-native-macos](https://github.com/microsoft/react-native-macos). See [macOS Support](docs/MACOS.md) for details on macOS-specific features, known limitations, and the example app.
@@ -149,7 +173,7 @@ See the [API Reference](docs/API_REFERENCE.md) for a detailed overview of all th
 We're actively working on expanding the capabilities of `react-native-enriched-markdown`. Here's what's on the roadmap:
 
 - `EnrichedMarkdownInput`: headings, lists, blockquotes, code blocks, mentions, inline images
-- Web implementation via `react-native-web`
+- `EnrichedMarkdownInput` web support
 - macOS: block math rendering, VoiceOver accessibility, tail fade-in animation
 
 ## Contributing

apps/web-example/app.json

@@ -0,0 +1,11 @@
+{
+  "expo": {
+    "name": "EnrichedMarkdownWebExample",
+    "slug": "enriched-markdown-web-example",
+    "version": "1.0.0",
+    "platforms": ["web"],
+    "web": {
+      "output": "single"
+    }
+  }
+}

apps/web-example/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

apps/web-example/index.js

@@ -0,0 +1,6 @@
+import '@expo/metro-runtime';
+
+import { registerRootComponent } from 'expo';
+import App from './src/App';
+
+registerRootComponent(App);

apps/web-example/metro.config.js

@@ -0,0 +1,39 @@
+const { getDefaultConfig } = require('expo/metro-config');
+
+const path = require('path');
+
+const projectRoot = __dirname;
+const monorepoRoot = path.resolve(projectRoot, '../..');
+
+const pkg = require('../../package.json');
+
+const config = getDefaultConfig(projectRoot);
+
+// Watch the monorepo root so Metro picks up changes to the library source.
+config.watchFolders = [monorepoRoot];
+
+// Resolve node_modules from both the project and the monorepo root.
+config.resolver.nodeModulesPaths = [
+  path.resolve(projectRoot, 'node_modules'),
+  path.resolve(monorepoRoot, 'node_modules'),
+];
+
+// Redirect the library's package name to its source entry point so that
+// Metro doesn't try to load the built output (./lib/module/index.js) which
+// is not committed to the repo. Use the platform-specific entry on web.
+const upstreamResolveRequest = config.resolver.resolveRequest;
+config.resolver.resolveRequest = (context, moduleName, platform) => {
+  if (moduleName === pkg.name) {
+    const entry = platform === 'web' ? 'src/index.web.tsx' : 'src/index.tsx';
+    return {
+      filePath: path.resolve(monorepoRoot, entry),
+      type: 'sourceFile',
+    };
+  }
+  if (upstreamResolveRequest) {
+    return upstreamResolveRequest(context, moduleName, platform);
+  }
+  return context.resolveRequest(context, moduleName, platform);
+};
+
+module.exports = config;

apps/web-example/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "react-native-enriched-markdown-web-example",
+  "version": "0.0.1",
+  "private": true,
+  "main": "index.js",
+  "scripts": {
+    "start": "expo start",
+    "web": "expo start --web",
+    "build:web": "expo export --platform web"
+  },
+  "dependencies": {
+    "expo": "~55.0.0",
+    "katex": "^0.16.44",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "react-native": "0.84.1",
+    "react-native-enriched-markdown": "*",
+    "react-native-web": "~0.19.13"
+  },
+  "devDependencies": {
+    "@expo/metro-runtime": "~5.0.0",
+    "@types/react": "^19.2.0",
+    "babel-preset-expo": "~55.0.13",
+    "typescript": "^5.9.2"
+  }
+}