Regal Text Editor
A small, fully-owned, framework-honest rich text editor toolkit for the web. Headless by default, React-ready out of the box, and extensible through a real plugin system — 11 independently-installable @regal-text-editor/* packages, not a wrapper around ProseMirror, Slate, Lexical, TipTap, or CKEditor.
Live, in your browser
This is the actual @regal-text-editor/react + @regal-text-editor/ui package, running with the full plugin set — not a video or a static mockup.
Why this exists
Every claim below is backed by source you can read — there is no marketing feature that isn’t also a tested code path.
No dependency on any existing rich-text-editor engine. The document model, schema, transaction/operation system, selection model, normalization pass, undo/redo history, and HTML/Markdown/JSON/plain-text serialization are all original code.
@regal-text-editor/core has no DOM and no React dependency at all — it can run in Node for server-side document manipulation, validation, or format conversion, with no browser required.
A plugin registers schema nodes/marks, commands, a keymap, HTML/Markdown serializers, and HTML parsers — through the same typed interface every shipped feature, including every built-in formatting option, also goes through. No privileged, non-pluggable core feature set.
Every color, radius, and shadow in the default UI is a CSS variable, overridable from any ancestor element — no CSS-in-JS, no build-step theming requirement. Ships with two ready-made alternate presets, Notion and Midnight, as a live demonstration.
Logical CSS properties and logical alignment values ("start"/"end", never "left"/"right") throughout, so the UI and text alignment behave correctly under dir="rtl" without a separate RTL mode.
Every URL (link href, image src) passes through an allow-list sanitizer (http:, https:, mailto:, tel:, scheme-less relative — everything else, including javascript: and data:, rejected) at every entry point: HTML paste/import and direct command calls alike.
The README carries a category-by-category self-audit — implemented, partial, or not implemented — instead of a blanket feature list. See the Status section below for the current state.
How it’s layered
Each package depends only on the layer(s) below it. Use the engine fully headless, pair it with your own DOM adapter, or bring your own toolbar instead of @regal-text-editor/ui.
What ships
All packages: version 0.1.0, MIT-licensed, ESM-only, ship .d.ts declarations and sourcemaps, and are marked sideEffects: false so a bundler can tree-shake unused exports.
| Package | What it provides | Depends on | Peer deps | Size (unminified) |
|---|---|---|---|---|
| @regal-text-editor/core | Document model, schema, transactions, selection, commands, history, plugin system, HTML/Markdown/JSON/text serialization, HTML parsing + sanitization | — | — | 58.4 KB |
| @regal-text-editor/browser | DOM rendering, DOM ↔ model selection mapping, keyboard/IME/clipboard/drag-drop handling | @regal-text-editor/core | — | 22.8 KB |
| @regal-text-editor/react | <RichTextEditor>, useEditor, useEditorSelector, useCommand | @regal-text-editor/core, @regal-text-editor/browser | react ≥18, react-dom ≥18 | 4.3 KB |
| @regal-text-editor/ui | Default toolbar UI: Toolbar, BubbleToolbar, LinkButton, ImageButton, FindReplacePanel, dropdowns, icons, theming CSS | @regal-text-editor/core, @regal-text-editor/browser, @regal-text-editor/react, @regal-text-editor/plugin-link | react ≥18, react-dom ≥18 | 19.1 KB JS + 13.0 KB CSS |
| @regal-text-editor/plugin-basic-marks | Bold, italic, underline, strikethrough, inline code | @regal-text-editor/core | — | 4.5 KB |
| @regal-text-editor/plugin-basic-blocks | Paragraph, heading (configurable levels), blockquote, horizontal rule, text alignment | @regal-text-editor/core | — | 9.4 KB |
| @regal-text-editor/plugin-lists | Bullet / ordered / task lists, nesting, indent/outdent | @regal-text-editor/core | — | 9.7 KB |
| @regal-text-editor/plugin-link | Link mark: setLink / unsetLink, sanitized href | @regal-text-editor/core | — | 5.5 KB |
| @regal-text-editor/plugin-image | Block-level image node, insertImage | @regal-text-editor/core | — | 2.5 KB |
| @regal-text-editor/plugin-code-block | Preformatted code block, Enter-inserts-newline behavior | @regal-text-editor/core | — | 2.5 KB |
| @regal-text-editor/plugin-history | Undo/redo commands and keyboard shortcuts | @regal-text-editor/core | — | 0.5 KB |
Feature plugins
Commands, keyboard shortcuts, and behavior — verified directly against source, not summarized from memory.
Bold, italic, underline, strikethrough, and inline code.
| Command | Shortcut | Detail |
|---|---|---|
| toggleBold | Mod-B | <strong>/<b> on import, **text** in Markdown |
| toggleItalic | Mod-I | <em>/<i> on import, _text_ in Markdown |
| toggleUnderline | Mod-U | <u> on import, no Markdown equivalent (plain text on export) |
| toggleStrikethrough | Mod-Shift-X | <s>/<strike>/<del> on import, ~~text~~ in Markdown |
| toggleInlineCode | Mod-E | <code> on import, `text` in Markdown |
Paragraphs, headings, blockquotes, horizontal rules, and logical text alignment.
| Command | Shortcut | Detail |
|---|---|---|
| setParagraph | Mod-Alt-0 | Converts the current block to a paragraph |
| setHeading1 … setHeading6 | Mod-Alt-1 … Mod-Alt-6 | Configurable heading levels (defaults to 1–6) |
| toggleBlockquote | — | No default shortcut. Multi-paragraph blockquotes wrap/unwrap as a unit. |
| insertHorizontalRule | — | Inserts a horizontal rule block |
| setTextAlign(align) | — | "start" | "center" | "end" | "justify" — logical values, correct under dir="rtl" |
Nesting, indent/outdent, and task checkboxes.
| Command | Shortcut | Detail |
|---|---|---|
| toggleBulletList | — | Bullet list; ordered lists support a custom start number via <ol start="N"> |
| toggleOrderedList | — | Ordered list |
| toggleTaskListItem | — | Adds a checked attribute, rendered with a real SVG checkmark in the default UI |
| listEnter | Enter | Splits the current item, or exits the list from an empty item |
| listIndent / listOutdent | Tab / Shift-Tab | Nests the current item one level deeper/shallower |
Sanitized links with a real edit/replace flow, not just insert-once.
| Command | Shortcut | Detail |
|---|---|---|
| setLink(href) | — | Applies a link mark to the current selection; re-running over linked text replaces the href |
| unsetLink() | — | Removes the link mark from the selection |
| getActiveLinkHref(editor) | — | Reads the href at the current selection, used to pre-fill the edit popover |
Block-level images with URL-only sourcing.
| Command | Shortcut | Detail |
|---|---|---|
| insertImage(src, alt?) | — | Inserts a block-level image — its own line, like a horizontal rule |
A dedicated code block node with correct Enter-key behavior.
| Command | Shortcut | Detail |
|---|---|---|
| toggleCodeBlock | Mod-Alt-C | Converts the current block to/from a preformatted node; no marks allowed inside it |
Snapshot-based history with typing coalescence.
| Command | Shortcut | Detail |
|---|---|---|
| undo | Mod-Z | Steps back to the previous snapshot |
| redo | Mod-Shift-Z, Mod-Y | Covers both common conventions |
Not a separate plugin package — lives directly in the core search functions, paired with a ready-made panel.
| Command | Shortcut | Detail |
|---|---|---|
| findMatches / replaceMatch / replaceAllMatches | — | Case-insensitive by default; never matches across a block boundary |
| <FindReplacePanel /> | — | Enter/Shift+Enter step forward/backward, Escape closes |
The default toolbar UI, built only on @regal-text-editor/react’s public hooks.
| Export | Purpose |
|---|---|
| <Toolbar items={ToolbarItem[]} /> | Data-driven toolbar; items are button, separator, or dropdown (a styled native <select> for full built-in keyboard/screen-reader support). defaultToolbarItems provides a ready-made complete set. |
| <BubbleToolbar items={...} /> | A small formatting toolbar that appears next to the current text selection, built on the useSelectionRect hook. |
| <LinkButton /> | Self-contained popover that collects a URL and calls setLink/unsetLink; pre-fills the current link's href when editing. |
| <ImageButton /> | Self-contained popover that collects an image URL and alt text and calls insertImage. |
| <FindReplacePanel /> | Find/replace UI driven by @regal-text-editor/core's search functions. |
| Icon / availableIconNames | The built-in dependency-free SVG icon set (24 icons) used by every other component; swappable per toolbar item. |
| ToolbarButton, ToolbarSeparator, ToolbarDropdown | The individual pieces <Toolbar> composes, exported for building fully custom toolbar layouts. |
Honest, itemized
A category-by-category self-audit instead of a blanket feature list — this is the same table that lives in the project’s README.
Get started
Every package is scoped-public (publishConfig.access: "public"), so publishing needs no special npm org setup, and installing needs nothing beyond plain npm install.
npm install @regal-text-editor/core @regal-text-editor/browser @regal-text-editor/react @regal-text-editor/ui \
@regal-text-editor/plugin-basic-blocks @regal-text-editor/plugin-basic-marks @regal-text-editor/plugin-lists @regal-text-editor/plugin-historyimport { createBaseSchema } from "@regal-text-editor/core";
import { EditorProvider, RichTextEditor, useEditor } from "@regal-text-editor/react";
import { Toolbar, defaultToolbarItems } from "@regal-text-editor/ui";
import "@regal-text-editor/ui/styles.css";
import { BasicBlocksPlugin } from "@regal-text-editor/plugin-basic-blocks";
import { BasicMarksPlugin } from "@regal-text-editor/plugin-basic-marks";
import { ListsPlugin } from "@regal-text-editor/plugin-lists";
import { HistoryPlugin } from "@regal-text-editor/plugin-history";
function Editor() {
const editor = useEditor({
schema: createBaseSchema(),
plugins: [BasicBlocksPlugin(), BasicMarksPlugin(), ListsPlugin(), HistoryPlugin()]
});
return (
<EditorProvider editor={editor}>
<Toolbar items={defaultToolbarItems} />
<RichTextEditor editor={editor} placeholder="Start writing..." onChange={(doc) => console.log(doc)} />
</EditorProvider>
);
}import { Editor, createBaseSchema } from "@regal-text-editor/core";
import { BasicMarksPlugin } from "@regal-text-editor/plugin-basic-marks";
const editor = new Editor({ schema: createBaseSchema(), plugins: [BasicMarksPlugin()] });
editor.commands.execute(editor, "toggleBold");
console.log(editor.getHTML(), editor.getMarkdown(), editor.getJSON());Questions
Can’t find what you’re looking for? Use search in the header — every answer on this page is indexed.
No. The document model, transaction system, selection model, schema engine, undo/redo history, HTML/Markdown serialization, and the browser DOM adapter are all original implementations in this codebase.
Yes. @regal-text-editor/core has zero DOM and zero React dependency and can run fully headless, including in Node for server-side document manipulation, validation, or format conversion. Pair it with a custom DOM adapter instead of @regal-text-editor/browser, or use @regal-text-editor/browser directly without React.
A plugin registers schema nodes/marks, commands, a keymap, HTML/Markdown serializers, and HTML parsers through one typed interface. Every shipped feature, including bold and headings, is implemented as a plugin through that same interface — there is no privileged, non-pluggable core feature set.
Yes, by construction. The UI and text alignment use logical CSS properties and logical values ("start"/"end", never "left"/"right"), so it behaves correctly under dir="rtl" without a separate RTL mode. Note this hasn’t yet had a dedicated bidi-cursor test pass — see the Status section.
Every visual token in @regal-text-editor/ui is a CSS custom property on :root. Import @regal-text-editor/ui/styles.css once, then either use one of the two built-in presets by setting data-rte-theme="notion" or data-rte-theme="midnight" on any ancestor element, or override any subset of the same variables to build a fully custom theme without touching the package’s CSS file.
The image plugin is URL-only — there's no built-in file upload adapter. insertImage(src, alt?) accepts whatever URL you supply, typically from your own upload flow, sanitized the same way link hrefs are. Images are also currently block-level only, not inline.
Not yet. Tables, mentions/bookmarks, and a raw-HTML edit mode are on the not-implemented list — see the Status section for the full, honest breakdown.
MIT, on every one of the 11 published packages.