Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions docs-md/API_REFERENCE.md
Original file line number Diff line number Diff line change
Expand Up @@ -925,7 +925,7 @@ Style configuration for formatted text in the input.
| -------------------- | ------------- | -------- |
| `MarkdownTextInputStyle` | `{}` | Both |

On web, the [experimental web editor](WEB_INPUT.md#styling) honors every key except `linkVariants`.
On web, the [web editor](WEB_INPUT.md#styling) honors every key except `linkVariants`.

**Properties:**

Expand Down Expand Up @@ -1035,7 +1035,7 @@ interface StyleState {

### `onChangeHistoryState`

Fires when whether [`undo()`](#undo) or [`redo()`](#redo) has a step to take changes. It fires only when one of the two values flips, not on every edit, so it is cheap to drive toolbar buttons from. Web-only for now, part of the [experimental web editor](WEB_INPUT.md): iOS and Android never call it.
Fires when whether [`undo()`](#undo) or [`redo()`](#redo) has a step to take changes. It fires only when one of the two values flips, not on every edit, so it is cheap to drive toolbar buttons from. Web-only for now, part of the [web editor](WEB_INPUT.md): iOS and Android never call it.

| Type | Default Value | Platform |
| ------------------------------------------------------------ | ------------- | -------- |
Expand Down Expand Up @@ -1408,11 +1408,11 @@ On iOS, macOS and Android the clipboard receives both plain text and the Markdow

### `undo()`

Steps back over the last edit: typing up to a pause or a caret move, a single Backspace run, a paste, a cut, a newline, an IME composition, or one formatting command. Text, formatting and selection all return to how they were before it. Web-only for now, part of the [experimental web editor](WEB_INPUT.md): a no-op on iOS and Android. On web, **Cmd+Z** / **Ctrl+Z** and the browser's Edit menu do the same.
Steps back over the last edit: typing up to a pause or a caret move, a single Backspace run, a paste, a cut, a newline, an IME composition, or one formatting command. Text, formatting and selection all return to how they were before it. Web-only for now, part of the [web editor](WEB_INPUT.md): a no-op on iOS and Android. On web, **Cmd+Z** / **Ctrl+Z** and the browser's Edit menu do the same.

### `redo()`

Re-applies the last step `undo()` took back. Any new edit clears what is left to redo. Web-only for now, part of the [experimental web editor](WEB_INPUT.md): a no-op on iOS and Android. On web, **Cmd+Shift+Z** / **Ctrl+Shift+Z** / **Ctrl+Y** and the browser's Edit menu do the same.
Re-applies the last step `undo()` took back. Any new edit clears what is left to redo. Web-only for now, part of the [web editor](WEB_INPUT.md): a no-op on iOS and Android. On web, **Cmd+Shift+Z** / **Ctrl+Shift+Z** / **Ctrl+Y** and the browser's Edit menu do the same.

### `startMention(indicator: string)`

Expand Down
2 changes: 1 addition & 1 deletion docs-md/INPUT.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

`EnrichedMarkdownTextInput` is a rich text input component that outputs Markdown. It is an uncontrolled input — it doesn't use any state or props to store its value, but instead directly interacts with the underlying platform-specific components. Thanks to this, the component is really performant and simple to use.

It also runs on web, as an [![Experimental](https://img.shields.io/badge/-experimental-orange "Experimental: this feature is still taking shape and may get breaking changes, including in nightly releases.")](WEB_INPUT.md#experimental-status) editor with a smaller feature set; see [Web Editor](WEB_INPUT.md).
It also runs on web, as an editor with a smaller feature set; see [Web Editor](WEB_INPUT.md).

## Usage

Expand Down
2 changes: 1 addition & 1 deletion docs-md/WEB.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
`EnrichedMarkdownText` and `EnrichedMarkdownTextInput` run on web using plain React and DOM primitives. They work in any React project (Next.js, Vite, Remix, CRA, etc.).

> [!NOTE]
> The web editor (`EnrichedMarkdownTextInput`) is [![Experimental](https://img.shields.io/badge/-experimental-orange "Experimental: this feature is still taking shape and may get breaking changes, including in nightly releases.")](WEB_INPUT.md#experimental-status) and documented separately in [Web Editor](WEB_INPUT.md). This page covers `EnrichedMarkdownText` and the setup both share.
> The web editor (`EnrichedMarkdownTextInput`) is documented separately in [Web Editor](WEB_INPUT.md). This page covers `EnrichedMarkdownText` and the setup both share.

The package's `browser` field points web bundlers (webpack, Vite, Next.js, Expo web) at the web entry, so no extra resolver configuration is needed for that. One shared style module still imports `Platform` and `processColor` from `react-native`, so outside React Native the bundler has to resolve `react-native`: alias it to `react-native-web` (as most React Native web setups already do).

Expand Down
13 changes: 1 addition & 12 deletions docs-md/WEB_INPUT.md
Original file line number Diff line number Diff line change
@@ -1,18 +1,7 @@
# Web Editor [![Experimental](https://img.shields.io/badge/-experimental-orange "Experimental: this feature is still taking shape and may get breaking changes, including in nightly releases.")](#experimental-status)
# Web Editor

`EnrichedMarkdownTextInput` runs on web as a `contentEditable` editor built from plain React and DOM primitives. It keeps its own document model, renders it into the editable element, and serializes it back to Markdown, so `getMarkdown()` and `onChangeMarkdown` work the same way they do on iOS and Android.

> [!WARNING]
> The web editor is **experimental**. Its props, ref methods and Markdown output may change in breaking ways, including in nightly releases, before it is marked stable. Pin an exact version if you depend on it.

## Experimental status

What "experimental" means here:

- Breaking changes can land in any release, nightly builds included, without a major version bump.
- Parts of the native API are missing on web (see [Not supported on web](#not-supported-on-web)); some will be added, and adding them may change existing behavior.
- Report problems on [GitHub issues](https://github.com/software-mansion-labs/react-native-enriched-markdown/issues) and mention that you are on web.

## Setup

The editor ships in the same web entry as `EnrichedMarkdownText`, so the bundler setup in [Web Support](WEB.md) covers it; there is nothing else to install. Import it as on native:
Expand Down
10 changes: 5 additions & 5 deletions docs/docs/introduction/supported-features.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@ and by how each feature is enabled.
in the editor tables. See [iOS](/ios/basics/installation) and
[Android](/android/basics/installation) installation.
- The **Web** column is the same package's web build, a plain React renderer
that emits semantic HTML. In the editor tables it is the experimental web
editor. See the [Web support](/react-native/guides/web-support) and
that emits semantic HTML. In the editor tables it is the web editor. See the
[Web support](/react-native/guides/web-support) and
[Web editor](/react-native/guides/web-editor) guides.

**Yes** means the feature renders with no extra work beyond the switch named in
Expand Down Expand Up @@ -187,9 +187,9 @@ On the standalone SDKs, the advanced features that render are optional add-ons:
The editor - produces a Markdown string as the user types.

:::important
The editor runs on iOS, Android and macOS. Its web build is
<ExperimentalBadge /> and covers less: no Markdown shortcuts, link or mention
commands, auto-link detection or `markdownStyle.linkVariants`. See
The editor runs on iOS, Android and macOS. Its web build covers less: no
Markdown shortcuts, link or mention commands, auto-link detection or
`markdownStyle.linkVariants`. See
[Web editor](/react-native/guides/web-editor).
:::

Expand Down
2 changes: 1 addition & 1 deletion docs/docs/misc/known-limitations.md
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,7 @@ The full announcement model is in

### Web

The web editor is experimental and does not yet cover the native editor's surface - see [Web editor](/react-native/guides/web-editor#not-supported-on-web). The rest of this section is about the renderer.
The web editor does not yet cover the native editor's surface - see [Web editor](/react-native/guides/web-editor#not-supported-on-web). The rest of this section is about the renderer.

:::danger
**Spoilers lose their content on web.** The parser emits a spoiler node, the web
Expand Down
15 changes: 7 additions & 8 deletions docs/docs/misc/roadmap.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ the next releases; **planned** means it is on the list without a timeline yet.
The React Native package ships on iOS, Android, macOS and the web - the
**iOS / Android** column below is that package. The
[web build](/react-native/guides/web-support) covers `EnrichedMarkdownText`,
plus an [experimental editor](/react-native/guides/web-editor), and macOS runs the iOS code with a few gaps of its own. The standalone
plus the [editor](/react-native/guides/web-editor), and macOS runs the iOS code with a few gaps of its own. The standalone
[iOS package](/ios/basics/installation) (0.4.0) and
[Android package](/android/basics/installation) (0.3.0) are renderers for
SwiftUI and Jetpack Compose apps, and have their own columns.
Expand All @@ -40,7 +40,7 @@ SwiftUI and Jetpack Compose apps, and have their own columns.
| [Smart copy](/user-experience/copy-options) | Yes | Plain text + HTML | Yes | Yes | Planned |
| [Accessibility](/user-experience/accessibility) | Yes | Yes | Partial | Planned | Partial |
| [RTL](/user-experience/rtl) | Yes | Yes | Yes | Yes | Container-level |
| `EnrichedMarkdownTextInput` (editor) | Yes | Planned | Planned | Yes | Experimental |
| `EnrichedMarkdownTextInput` (editor) | Yes | Planned | Planned | Yes | Partial |

In the native columns, LaTeX math comes from an optional add-on - the
`EnrichedMarkdownLaTeX` product on iOS, the `math` artifact on Android - and so
Expand Down Expand Up @@ -99,13 +99,12 @@ is available today.

### Web {#web}

The [web build](/react-native/guides/web-support) ships the renderer. Still to
come:
The [web build](/react-native/guides/web-support) ships the renderer and the
editor. Still to come:

- **A stable editor.** `EnrichedMarkdownTextInput` runs on web as an
[experimental build](/react-native/guides/web-editor). Still missing there:
Markdown shortcuts, link and mention commands, auto-link detection, custom
menus and `markdownStyle.linkVariants`.
- **Editor parity.** The [web editor](/react-native/guides/web-editor) is still
missing Markdown shortcuts, link and mention commands, auto-link detection,
custom menus and `markdownStyle.linkVariants`.
- **Spoilers**, which are currently dropped along with their text - the most
important gap on this list.
- **Code-block highlighting**, including the header and copy button.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ import StartMentionSrc from '!!raw-loader!@site/src/examples/react-native/api-re
# EnrichedMarkdownTextInput

export const nativeOnly = (
<>iOS and Android only for now - the <Link to="/react-native/guides/web-editor">experimental web editor</Link> does not support this yet, so the code is shown for reference.</>
<>iOS and Android only for now - the <Link to="/react-native/guides/web-editor">web editor</Link> does not support this yet, so the code is shown for reference.</>
);

export const focusOnLoad = (
Expand Down Expand Up @@ -119,7 +119,7 @@ The example above shows the two patterns you will use everywhere:
`EnrichedMarkdownTextInput` accepts every prop below. It also forwards the standard React Native [`View`](https://reactnative.dev/docs/view#props) props - such as `testID`, `onLayout`, `pointerEvents`, and the `accessibility*` props - to the underlying native view.

:::note
Props marked with a <IosBadge />, <AndroidBadge /> or <WebBadge /> badge only take effect on that platform - they are flagged with a matching colored dot in the table of contents. The input also runs on web as an <ExperimentalBadge /> editor that supports a subset of this page - see [Web editor](/react-native/guides/web-editor) for which props and methods apply there. Examples for what the web editor supports run live below; the rest show their source.
Props marked with a <IosBadge />, <AndroidBadge /> or <WebBadge /> badge only take effect on that platform - they are flagged with a matching colored dot in the table of contents. The input also runs on web as an editor that supports a subset of this page - see [Web editor](/react-native/guides/web-editor) for which props and methods apply there. Examples for what the web editor supports run live below; the rest show their source.
:::

Every shape printed inline below is an exported type you can import from the package root: `MarkdownTextInputStyle`, `StyleState`, `HeadingLevel`, `ContextMenuItem`, `InputSelectionMenuConfig`, `FormatMenuConfig`, `MarkdownShortcutsConfig`, `CaretRect`, and the event payloads. Note that the unprefixed `ContextMenuItem` is **this** component's type; the renderer's equivalent is exported as `TextContextMenuItem`.
Expand Down Expand Up @@ -262,7 +262,7 @@ Overrides for how formatted text is painted inside the input. Its type, `Markdow

<PropInfo type="MarkdownTextInputStyle" default="{}" />

On web, the [experimental web editor](/react-native/guides/web-editor#styling) honors every key except `linkVariants`.
On web, the [web editor](/react-native/guides/web-editor#styling) honors every key except `linkVariants`.

<LivePreview src={MarkdownStyleSrc} />

Expand Down Expand Up @@ -457,7 +457,7 @@ interface StyleState {

### `onChangeHistoryState` <WebBadge /> {#onchangehistorystate}

Fires when whether [`undo()`](#undo) or [`redo()`](#redo) has a step to take changes. It fires only when one of the two values flips, not on every edit, so it is cheap to drive toolbar buttons from. Part of the [experimental web editor](/react-native/guides/web-editor#undo-and-redo); iOS and Android never call it.
Fires when whether [`undo()`](#undo) or [`redo()`](#redo) has a step to take changes. It fires only when one of the two values flips, not on every edit, so it is cheap to drive toolbar buttons from. Part of the [web editor](/react-native/guides/web-editor#undo-and-redo); iOS and Android never call it.

<PropInfo type="(state: { canUndo: boolean; canRedo: boolean }) => void" />

Expand Down Expand Up @@ -698,11 +698,11 @@ Pressing **Return** inside an item starts a new item at the same depth; pressing

### `undo()` <WebBadge /> {#undo}

Steps back over the last edit: typing up to a pause or a caret move, a run of Backspaces, a paste, a cut, a newline, an IME composition, or one formatting command. Text, formatting and selection all return to how they were before it. Part of the [experimental web editor](/react-native/guides/web-editor#undo-and-redo), where **Cmd+Z** / **Ctrl+Z** and the browser's Edit menu do the same; a no-op on iOS and Android.
Steps back over the last edit: typing up to a pause or a caret move, a run of Backspaces, a paste, a cut, a newline, an IME composition, or one formatting command. Text, formatting and selection all return to how they were before it. Part of the [web editor](/react-native/guides/web-editor#undo-and-redo), where **Cmd+Z** / **Ctrl+Z** and the browser's Edit menu do the same; a no-op on iOS and Android.

### `redo()` <WebBadge /> {#redo}

Re-applies the last step `undo()` took back. Any new edit clears what is left to redo. Part of the [experimental web editor](/react-native/guides/web-editor#undo-and-redo), where **Cmd+Shift+Z** / **Ctrl+Shift+Z** / **Ctrl+Y** and the browser's Edit menu do the same; a no-op on iOS and Android.
Re-applies the last step `undo()` took back. Any new edit clears what is left to redo. Part of the [web editor](/react-native/guides/web-editor#undo-and-redo), where **Cmd+Shift+Z** / **Ctrl+Shift+Z** / **Ctrl+Y** and the browser's Edit menu do the same; a no-op on iOS and Android.

### `setLink(url: string)`

Expand Down
11 changes: 3 additions & 8 deletions docs/docs/react-native/guides/web-editor.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,9 @@
title: Web editor
sidebar_label: Web editor
sidebar_position: 3.5
sidebar_class_name: sidebar-experimental
---

# Web editor <ExperimentalBadge />
# Web editor

`EnrichedMarkdownTextInput` runs on web as a `contentEditable` editor built from
plain React and DOM primitives. It keeps its own document model, renders it into
Expand All @@ -15,12 +14,8 @@ and
[`onChangeMarkdown`](/react-native/api-reference/enriched-markdown-text-input#onchangemarkdown)
behave as they do on iOS and Android.

:::warning Experimental
The web editor is **experimental**. Its props, ref methods and Markdown output
may change in breaking ways, including in nightly releases, before it is marked
stable. Pin an exact version if you depend on it, and expect a smaller feature
set than on native - see [Not supported on web](#not-supported-on-web).
:::
It covers less than the native editor - see
[Not supported on web](#not-supported-on-web).

## Setup

Expand Down
4 changes: 2 additions & 2 deletions docs/docs/react-native/guides/web-support.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ and no build step is required by consumers.
:::note
This page covers `EnrichedMarkdownText` (the renderer) and the setup it shares
with the editor. `EnrichedMarkdownTextInput` also runs on web, as an
<ExperimentalBadge /> editor with a smaller feature set - see
editor with a smaller feature set - see
[Web editor](/react-native/guides/web-editor). The
[Feature support](/introduction/supported-features) overview has the full
matrix.
Expand Down Expand Up @@ -375,7 +375,7 @@ gone, not concealed. Do not put content behind a spoiler if the same Markdown is
rendered on web.
:::

- Editor features - `EnrichedMarkdownTextInput` runs on web but is experimental and covers less than on native. See [Web editor](/react-native/guides/web-editor#not-supported-on-web).
- Editor features - `EnrichedMarkdownTextInput` runs on web but covers less than on native. See [Web editor](/react-native/guides/web-editor#not-supported-on-web).
- Code-block syntax highlighting - fenced code blocks render as plain monospaced text with no per-token colors, no header bar and no copy button
- Configurable link `target` - all links open in a new tab (`target="_blank" rel="noopener noreferrer"`). Use `onLinkPress` for custom navigation.
- Line clamping - `numberOfLines` and `ellipsizeMode` are native-only and are not part of the web props type
Expand Down
4 changes: 2 additions & 2 deletions packages/react-native-enriched-markdown/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ We can help you build your next dream product –
- [API Reference](#api-reference)
- [Testing with Jest](../../docs-md/TESTING.md)
- [Web Support](../../docs-md/WEB.md)
- [Web Editor (experimental)](../../docs-md/WEB_INPUT.md)
- [Web Editor](../../docs-md/WEB_INPUT.md)
- [macOS Support](../../docs-md/MACOS.md)
- [Compatibility Table](#compatibility-table)
- [Contributing](#contributing)
Expand All @@ -95,7 +95,7 @@ We can help you build your next dream product –

- Requires [`react-native-web`](https://necolas.github.io/react-native-web/) (or a `react-native` → `react-native-web` alias); the package's `browser` field points web bundlers at the web build
- No New Architecture requirement — the web renderer runs entirely in JavaScript via WebAssembly
- `EnrichedMarkdownText` and `EnrichedMarkdownTextInput` both run on web; see [Web Support](../../docs-md/WEB.md) for what is not supported there. The web editor is [![Experimental](https://img.shields.io/badge/-experimental-orange "Experimental: this feature is still taking shape and may get breaking changes, including in nightly releases.")](../../docs-md/WEB_INPUT.md#experimental-status); see [Web Editor](../../docs-md/WEB_INPUT.md)
- `EnrichedMarkdownText` and `EnrichedMarkdownTextInput` both run on web; see [Web Support](../../docs-md/WEB.md) for what is not supported there. The web editor is covered in [Web Editor](../../docs-md/WEB_INPUT.md)
- LaTeX math requires the optional [`katex`](https://katex.org/) peer dependency

## Installation
Expand Down
Loading