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