Web support

Both EnrichedTextInput and EnrichedText run on the web. On native the editor is backed by the platform's text engine; on the web it is built on Tiptap. That implementation detail stays behind the same public API.

One API across platforms

The web build exposes the same core API as native - props, ref methods, and events - with one web-only addition - sanitizationConfig prop. Events keep their native shape too - they arrive as NativeSyntheticEvent, read off e.nativeEvent, so event-handling code is portable as-is:

<EnrichedTextInput
  onChangeHtml={e => setHtml(e.nativeEvent.value)}
  onChangeState={e => setState(e.nativeEvent)}
/>

The interactive examples throughout these docs are the web build running live.

Keyboard shortcuts

The web editor ships desktop-style formatting shortcuts out of the box, along with native browser undo/redo.

Action	macOS	Windows / Linux
Bold	⌘B	Ctrl+B
Italic	⌘I	Ctrl+I
Underline	⌘U	Ctrl+U
Strikethrough	⌘⇧X	Ctrl+Shift+X
Inline code	⌘⇧C	Ctrl+Shift+C
Code block	⌘⌥⇧C	Ctrl+Alt+Shift+C
Normal paragraph	⌘⌥0	Ctrl+Alt+0
Heading 1–6	⌘⌥1 – ⌘⌥6	Ctrl+Alt+1 – Ctrl+Alt+6
Numbered list	⌘⇧7	Ctrl+Shift+7
Unordered list	⌘⇧8	Ctrl+Shift+8
Checkbox list	⌘⇧9	Ctrl+Shift+9
Paste as plain text	⌘⇧V	Ctrl+Shift+V
Undo	⌘Z	Ctrl+Z
Redo	⌘⇧Z	Ctrl+Shift+Z
Select all	⌘A	Ctrl+A

Platform differences

A few native-only features have no web equivalent and are ignored there:

• contextMenuItems - the native editing menu isn't available; use your own UI instead.
• returnKeyLabel - can't be set inside a browser. returnKeyType maps to the browser's enterkeyhint.
• RN layout ref methods - measure, measureInWindow, measureLayout, and setNativeProps are no-ops.

The EnrichedTextInput and EnrichedText references note per-prop platform support.

note

On web, onPasteImages gives each image a blob: URL. If you hold onto those URIs, call URL.revokeObjectURL(uri) once you're done with them (e.g. after an upload) so the browser can release the memory.

Sanitization

Unlike the native platforms, the web build sanitizes HTML for you. It runs DOMPurify at every entrypoint - the children of EnrichedText, defaultValue, setValue and content pasted into EnrichedTextInput. Sanitization is also run on the input component's output - getHTML(). This ensures untrusted markup can't inject scripts or unsafe attributes into the DOM.

note

Sanitization can be customized with the sanitizationConfig prop. It allows you to set a linkRegex that will define, which URI-containing attributes will actually be preserved by the sanitizer.

Server-side rendering

The library does not support SSR yet. Normalization and sanitization both need a DOM to work against, which isn't available during server rendering. In an SSR framework (Next.js, Remix, …), make sure both EnrichedTextInput and EnrichedText render client-side only.