Rich Text Editor

Markdown Editor or Rich Text Editor

Choose by what the column stores. Both take toolbar="bubble" | "fixed", so the look is never the reason. One component with a format prop was considered and rejected: the format decides the schema, the schema is built once at mount, and a prop that can change at runtime without effect is a prop that lies.

An article

Live, with the stored HTML underneath. Put the caret in the right-hand table cell: the block buttons stay on — a list, a code block or an image goes into the cell — while Table locks, because tables do not nest. Undo and redo light up as history builds. Drop or paste an image and it uploads for real to /api/demo-upload, which keeps nothing.

Building the editor…

What is written is not what is drawn, in two places. The cover shows from a signed address, yet the HTML keeps src="media/coast-town.png" — a signed URL written to a column is a value that expires inside your database. The mention reads “@Wei Chen” on screen, from resolveLabel, yet the HTML keeps “@Wei”, the name captured when the mention was made — stored content does not rewrite itself from the directory just because someone opened and saved it. Both the address and the live name are drawn by a node view; only renderHTML writes, and the package's gate checks it.

HTML in, HTML out — through the schema

The schema is an allow-list. Whatever HTML arrives — a value, setHTML, a paste — keeps only what the schema knows: the script, the iframe, the inline style and the event handler below are gone, and the javascript: link is left as plain text. The one style that survives, from 3.14.0, is text-align on a paragraph or heading.

<h3 style="color:red">Imported from an old CMS</h3>
<p onclick="steal()">A paragraph with an event handler.</p>
<script>steal()</script>
<iframe src="https://example.com/ad"></iframe>
<p><a href="javascript:steal()">A javascript: link</a> and a <a href="https://comitor.ai">real one</a>.</p>

Building the editor…

Showing stored HTML

The schema filters what the editor writes — not what your column holds. Anyone calling your API directly can store any string at all. So render stored HTML through the same schema, in read mode, and keep dangerouslySetInnerHTML for HTML your server has sanitised itself. A server-side sanitiser is the app's job: which tags a public page allows belongs to the page that shows them, not to the editor.

The toolbar

• Undo · redo | marks + link | blocks | align left · center · right | table · divider · image. The image button appears only with onImageUpload. The alignment buttons (3.14.0) act on every paragraph and heading in the selection, as one undo step; there are no shortcuts for them, because the usual ⌘⇧R is the browser's hard reload. Link opens the address field in the bubble beside the selection — the field has to stand next to the words it links.
• It sticks to the top while a long article scrolls, on an opaque background so the text passes underneath rather than through. On a phone it wraps onto a second row instead of scrolling sideways.
• It is drawn before the editor exists — every button disabled — so the page is not pushed down when the editor finishes building after hydration.
• Or keep the Linear bubble: toolbar="bubble".

Not in the box

Colours, font sizes, embedded video. Each is one more @tiptap/* package; pass it through extensions, at the same version, until a second module needs it in the package. Rendering on the server — HTML in the first response, for a public page's SEO — is the next step the package documents, not yet a component.

Props

Everything not listed here works exactly as in Markdown Editor.

The handle

Through ref — RichTextEditorHandle.

Accessibility

• The toolbar is a named toolbar (role="toolbar", “Formatting”). Formatting buttons are toggles that report aria-pressed; commands such as Undo are plain buttons. Each names itself and shows its shortcut in a tooltip that also appears on keyboard focus.
• Pressing a button keeps focus in the document, so the selection it formats is still there — and every formatting button has a shortcut (⌘B, ⌘U, ⌘K…) for working without the pointer at all.
• Locked is visible. Buttons that cannot act where the caret is — Table inside a table, Undo with nothing to undo — are disabled rather than silently doing nothing.
• Read mode has no toolbar and says role="none", so a published article is read as text, not announced as a read-only input.
• Everything else is Markdown Editor's — the named textbox, the label wiring, the keyboard menus, the named checkboxes, the 16 px text on phones.