From 504c33ecdd25642ef27ad60c2ca91c4307a463bd Mon Sep 17 00:00:00 2001 From: Ernest Date: Thu, 12 Nov 2026 08:56:36 +0100 Subject: [PATCH] docs(web): drop the experimental label from the web editor No open issues or PRs track web editor bugs, so mark it like the other targets. The missing native features stay listed under Not supported on web and in the roadmap. --- docs-md/API_REFERENCE.md | 8 ++++---- docs-md/INPUT.md | 2 +- docs-md/WEB.md | 2 +- docs-md/WEB_INPUT.md | 13 +------------ docs/docs/introduction/supported-features.md | 10 +++++----- docs/docs/misc/known-limitations.md | 2 +- docs/docs/misc/roadmap.md | 15 +++++++-------- .../api-reference/enriched-markdown-text-input.md | 12 ++++++------ docs/docs/react-native/guides/web-editor.md | 11 +++-------- docs/docs/react-native/guides/web-support.md | 4 ++-- packages/react-native-enriched-markdown/README.md | 4 ++-- 11 files changed, 33 insertions(+), 50 deletions(-) diff --git a/docs-md/API_REFERENCE.md b/docs-md/API_REFERENCE.md index ad226aa75..1a5bd303e 100644 --- a/docs-md/API_REFERENCE.md +++ b/docs-md/API_REFERENCE.md @@ -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:** @@ -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 | | ------------------------------------------------------------ | ------------- | -------- | @@ -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)` diff --git a/docs-md/INPUT.md b/docs-md/INPUT.md index bff94c80c..7ccf7060a 100644 --- a/docs-md/INPUT.md +++ b/docs-md/INPUT.md @@ -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 diff --git a/docs-md/WEB.md b/docs-md/WEB.md index d1f2eb861..cb10cf712 100644 --- a/docs-md/WEB.md +++ b/docs-md/WEB.md @@ -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). diff --git a/docs-md/WEB_INPUT.md b/docs-md/WEB_INPUT.md index be5167f6d..5ad9b158c 100644 --- a/docs-md/WEB_INPUT.md +++ b/docs-md/WEB_INPUT.md @@ -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: diff --git a/docs/docs/introduction/supported-features.md b/docs/docs/introduction/supported-features.md index 00670f44f..32b14114c 100644 --- a/docs/docs/introduction/supported-features.md +++ b/docs/docs/introduction/supported-features.md @@ -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 @@ -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 - 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). ::: diff --git a/docs/docs/misc/known-limitations.md b/docs/docs/misc/known-limitations.md index 9485cc26c..3d2bb9f39 100644 --- a/docs/docs/misc/known-limitations.md +++ b/docs/docs/misc/known-limitations.md @@ -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 diff --git a/docs/docs/misc/roadmap.md b/docs/docs/misc/roadmap.md index 1820c9d05..bb4b73fc1 100644 --- a/docs/docs/misc/roadmap.md +++ b/docs/docs/misc/roadmap.md @@ -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. @@ -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 @@ -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. diff --git a/docs/docs/react-native/api-reference/enriched-markdown-text-input.md b/docs/docs/react-native/api-reference/enriched-markdown-text-input.md index 9c6532192..b1863be0f 100644 --- a/docs/docs/react-native/api-reference/enriched-markdown-text-input.md +++ b/docs/docs/react-native/api-reference/enriched-markdown-text-input.md @@ -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 experimental web editor does not support this yet, so the code is shown for reference. +<>iOS and Android only for now - the web editor does not support this yet, so the code is shown for reference. ); export const focusOnLoad = ( @@ -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 , or 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. +Props marked with a , or 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`. @@ -262,7 +262,7 @@ Overrides for how formatted text is painted inside the input. Its type, `Markdow -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`. @@ -457,7 +457,7 @@ interface StyleState { ### `onChangeHistoryState` {#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. @@ -698,11 +698,11 @@ Pressing **Return** inside an item starts a new item at the same depth; pressing ### `undo()` {#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()` {#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)` diff --git a/docs/docs/react-native/guides/web-editor.md b/docs/docs/react-native/guides/web-editor.md index 836c18bb2..cfc508f9c 100644 --- a/docs/docs/react-native/guides/web-editor.md +++ b/docs/docs/react-native/guides/web-editor.md @@ -2,10 +2,9 @@ title: Web editor sidebar_label: Web editor sidebar_position: 3.5 -sidebar_class_name: sidebar-experimental --- -# Web editor +# 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 @@ -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 diff --git a/docs/docs/react-native/guides/web-support.md b/docs/docs/react-native/guides/web-support.md index f0d30726a..56dcab7e9 100644 --- a/docs/docs/react-native/guides/web-support.md +++ b/docs/docs/react-native/guides/web-support.md @@ -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 - 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. @@ -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 diff --git a/packages/react-native-enriched-markdown/README.md b/packages/react-native-enriched-markdown/README.md index efbde5abd..e4c3a4d13 100644 --- a/packages/react-native-enriched-markdown/README.md +++ b/packages/react-native-enriched-markdown/README.md @@ -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) @@ -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