Rich Text Editor ================ Rich Text Editor is a browser-based WYSIWYG editor with toolbar customization, plugins, localization, image editing, PDF export, and classic HTML APIs. ## What's in v2.2 A full collaborative-document workspace, not just a textarea replacement: - **AI Toolkit** — in-editor proofread / rewrite / summarize / translate / chat, with streaming responses, an inline preview drawer, and a persistent accept/reject review ledger. Bring your own provider (OpenAI / Anthropic / Azure OpenAI / Groq / Ollama / custom) via `editor.aiToolkit.setResolver()` or the server-side `IRichTextBoxAiResolver` interface. - **Per-node Yjs CRDT engine** *(new in 2.2)* — `editor.collab.attach({ doc, provider, textSync: "crdt" })` activates character-level concurrent typing on the same paragraph with deterministic merge resolution, presence cursors via `Y.RelativePosition`-encoded awareness, and per-author `Y.UndoManager` (Ctrl-Z undoes only your edits). Pairs with any Yjs provider you self-host. Ships in the base license. - **Slash commands & mentions** — `/` at the start of a line opens a command palette; `@` and `#` open mention pickers via `editor.slashCommands.register()` and `editor.mentions.register()`. - **Comments & tracked changes** — threaded inline comments on text selections and block/media content such as images or tables (`editor.comments.add/reply/resolve`), tracked-changes mode, per-author colors and labels. - **Comments-only review mode** — set `commentsOnly: true` or call `editor.setCommentsOnly(true)` to lock document edits while still allowing inline comments and review discussion. - **Restricted editing templates** — set `restrictedEditingMode: true` to lock the document except for spans tagged `data-rte-editable="true"`. Mark fillable regions at runtime with `editor.restrictedEditing.markSelection()`; toggle the lock via `editor.restrictedEditing.enable()` / `disable()` / `goToNext()`. Use it for forms, contracts, fillable templates โ€” only the marked regions accept input. - **Revision history** — named snapshots, diff view, restore (`editor.revisionHistory.snapshot/diff/restore`). - **Dictation** — Web Speech API integration (`editor.dictation.toggle()`) with multi-language support. - **DOCX import + export** — import Word documents through `editor.aiToolkit.importDocx({ file?, mode? })` and generate deterministic HTML → .docx via `editor.aiToolkit.exportDocx({ filename })`; preserves headings, lists, tables, images. - **Structured content bridge** — `editor.getJSON()` / `setJSON()`, `fromMarkdown()` / `toMarkdown()`, `renderHTML()`, `validateStructuredContent()` — for SSR, JSON storage, and Markdown round-trip. The packaged schema now preserves merge fields, ordered-list marker styles (`A` / `a` / `I` / `i`), table-of-contents blocks, footnotes, and editor page breaks instead of collapsing them into opaque HTML. - **Accessibility audit helper** — `RichTextEditor.auditAccessibility()` / `auditAccessibility()` catches empty headings, skipped heading levels, missing image alt text, and tables without header cells in browser or Node workflows. - **In-editor accessibility repair panel** — the packaged `accessibilitychecker` plugin adds a side panel (`editor.accessibilityChecker.open/close/toggle/run/repair`) with focused fixes for missing image alt text, empty headings, skipped heading levels, and headerless tables. Use `accessibilityCheckerAutoOpen` to keep the workflow visible during review passes. - **Restricted editing templates** — the packaged `restrictedediting` plugin lets apps lock the document root while keeping marked islands editable (`editor.restrictedEditing.enable/disable/toggle/list/goToNext/goToPrevious`). Mark reusable fields with `data-rte-editable` in template HTML or call `editor.restrictedEditing.markSelection({ label })` while authoring. - **Document outline + TOC helpers** — `RichTextEditor.getDocumentOutline()` / `getDocumentOutline()` extracts a flat heading outline (`id`, `text`, `level`, `path`), while `getTableOfContents()` returns a nested tree and `syncTableOfContents()` repopulates packaged TOC blocks from live headings. The same TOC helpers can also persist TinyMCE-style display settings such as `ordered`, `orderedListType`, and `includeTitle` for numbered or titleless navigation blocks. TOC items can also expose optional `itemIndex` / `indexLabel` metadata via `indexMode: "linear" | "hierarchical"` so custom sidebars can mirror Tiptap-style numbered navigation without reparsing headings twice. - **Footnote extraction helper** — `RichTextEditor.getFootnotes()` / `getFootnotes()` returns sorted `{ id, number, refId, text, path }` metadata from HTML or structured JSON so review sidebars and DOCX import screens can inspect Word-style citations without reparsing the document. - **Live document outline panel** — the packaged `documentoutline` plugin adds a toggleable browser-side heading sidebar (`editor.documentOutline.open/close/toggle/list/refresh`) so long documents get CKEditor-style section navigation without custom app code. Use `documentOutlineAutoOpen`, `documentOutlineMinLevel`, and `documentOutlineMaxLevel` to tune the panel. - **Packaged content minimap** — the packaged `contentminimap` plugin adds a TinyMCE/CKEditor-style miniature document preview (`editor.contentMinimap.open/close/toggle/refresh/isOpen`) with click-and-drag viewport navigation for long documents. Use `contentMinimapAutoOpen`, `contentMinimapWidth`, and `contentMinimapScale` to tune the panel. - **Checklist / task-list Markdown** — `- [x] done` and `- [ ] todo` round-trip through `fromMarkdown()` / `toMarkdown()` and render as disabled checkbox lists in HTML / SSR output. - **Markdown shortcut helper parity** — `getMarkdownShortcutAction()` now recognizes headings, quotes, ordered/bullet/task lists, horizontal rules (`---`) and fenced code blocks (````` / `~~~lang`) so custom wrappers can mirror the same typing affordances exposed by current editor competitors. - **Word + character statistics** — `editor.getTextStatistics()` / `getSelectionStatistics()` expose document + selection counts, and the built-in bottom bar can show characters, words, or both. - **Case change commands** — built-in `ucase`, `lcase`, and `titlecase` commands let toolbars or custom integrations quickly apply Upper Case, Lower Case, or Title Case transforms without leaving the editor. - **Document metrics helper** — `RichTextEditor.getDocumentMetrics()` / `getDocumentMetrics()` adds paragraph, sentence, heading, image, table, link, and estimated reading-time counts for analytics and publishing workflows. - **Document page setup metadata** — `RichTextEditor.getDocumentPageSetup()` / `setDocumentPageSetup()` lets apps persist page format, margins, orientation, and export header/footer HTML in the structured-content document for print/PDF workflows. - **Framework wrappers** — React (`@richscripts/richtexteditor/react`), Vue (`@richscripts/richtexteditor/vue`), Angular (`@richscripts/richtexteditor/angular`), Blazor wrapper, ASP.NET Core tag helper (`` from the sister NuGet package). Framework refs/components also expose the document-workflow helpers needed for outline, TOC, page-setup, metrics, statistics, and accessibility flows without manually round-tripping through `getJSON()`. - **AI ghost-text autocomplete** *(2.3.0)* — Copilot / Notion-AI-style inline completion: after a typing pause a greyed suggestion appears after the caret continuing your sentence; **Tab** accepts, **Esc** / typing dismisses. Bring-your-own resolver (`config.ghostTextResolver({ before, after, full })` → string | Promise); inert until `config.ghostText` and a resolver are set, so no model ships and no network call happens on its own. **Serialization-safe** (the suggestion is a `contenteditable=false` span the caret stays before; `getHTMLCode`/`getJSON` strip it) and **undo-friendly** (accept via `execCommand insertText`). API: `editor.requestGhostText()` / `acceptGhostText()` / `dismissGhostText()` / `hasGhostText()` / `setGhostTextResolver()`; slash `/ai complete`. - **Local draft autosave & crash recovery** *(2.3.0)* — persists the document to `localStorage` as you type and offers to restore the unsaved draft on the next load (Gmail/Notion "never lose your work"). Opt-in via `config.localDraft = true` (or `{ key, intervalMs, ttlMs, promptRestore }`). The draft is never auto-applied (server content shows until the user clicks **Restore**); stale drafts are pruned; saves on `beforeunload`. API: `editor.saveLocalDraft()` / `hasLocalDraft()` / `getLocalDraft()` / `restoreLocalDraft()` / `clearLocalDraft()`. - **Copy / Download as Markdown** *(2.3.0)* — Notion-style export surfacing the core `toMarkdown()` engine: slash `/copy as markdown` + `/download as markdown`, or `editor.getMarkdown()` / `editor.copyAsMarkdown()` (clipboard, execCommand fallback) / `editor.downloadMarkdown(name?)` (saves a `.md` file, filename derived from the first heading). Read-only; disable with `config.markdownExportEnabled = false`. - **Typewriter & focus writing modes** *(2.3.0)* — two distraction-free modes. *Typewriter mode* pins the caret line to a fixed vertical anchor and scrolls the editable as you type (iA Writer / Typora / Ulysses style); *focus mode* dims every block except the one the caret is in (Notion / iA Writer style). Toggle independently via slash `/typewriter` + `/focus mode` or `editor.toggleTypewriterMode()` / `editor.toggleFocusMode()` (plus `setโ€ฆ`/`isโ€ฆ`). Both off by default (`config.typewriterModeEnabled`, `config.focusModeEnabled`, anchor via `config.typewriterAnchor`). **Serialization-safe**: purely presentational — focus state is runtime-only CSS classes, stripped around `getHTMLCode`/`getJSON`; typewriter mode only scrolls. - **Foldable headings** *(2.3.0)* — Obsidian/Notion/Word-style section folding: hover a heading and click the gutter chevron (or `editor.toggleHeadingFold(h)` / `editor.foldAtCaret()` / `editor.unfoldAll()`, slash `/fold section`) to collapse every block beneath it, up to the next heading of the same or higher level. **Serialization-safe**: fold state is runtime-only CSS classes (the chevron is a CSS `::before`), and `getHTMLCode`/`getJSON` are wrapped to strip them — saved markup stays clean and folded content is never lost. Caret-safe. Disable with `config.foldHeadingsEnabled = false`. - **Auto-embed media URLs on paste** *(2.3.0)* — paste a bare YouTube or Vimeo URL on its own line and it becomes a responsive 16:9 embed (Notion/Medium style); also available as `editor.embedUrl(url)`. **Injection-safe by construction**: the iframe `src` is rebuilt from a sanitized video id, never the raw input. Mid-paragraph and text-selected pastes stay links. Add providers via `config.autoEmbedResolver(url)`; disable with `config.autoEmbedEnabled = false`. - **Interactive to-do / task lists** *(2.3.0)* — `editor.execCommand("inserttodolist")` (slash `/to-do`, toolbar) inserts a checklist whose items each have a clickable checkbox; clicking toggles open/done (check + strike-through), Notion/GitHub style. The done state lives in `data-checked` and round-trips through `getHTMLCode` / `getJSON`; checkboxes are `contenteditable="false"` spans (no fragile ``s) and re-bind on load via event delegation. Enter-created items are auto-normalized to stay well-formed. - **Emoji `:shortcode:` autocomplete** *(2.3.0)* — GitHub/Slack/Discord-style inline emoji entry: type a complete `:shortcode:` and it becomes the emoji (`:fire:` โ†’ ๐Ÿ”ฅ, `:+1:` โ†’ ๐Ÿ‘, `:tada:` โ†’ ๐ŸŽ‰), or type `:` + a partial query for a keyboard-navigable popup (โ†‘/โ†“, Enter/Tab, Esc). ~140 curated codes built in; extend or replace via `config.emojiShortcodes`. Word-boundary gated (so `path:fire:` is ignored) and inert inside code. Complements the emoji picker with fast keyboard-only entry. Disable with `config.emojiAutocompleteEnabled = false`. - **Read-aloud / text-to-speech** *(2.3.0)* — `editor.execCommand("readaloud")` (slash `/read aloud`) opens a non-modal control bar (play/pause, stop, voice, rate) and reads the selection — or the whole document — aloud, **highlighting each sentence as it is spoken** (native selection, content untouched). Browser-native via the Web Speech API: no library bundled, no backend, no key. The speech-out complement to dictation; an accessibility win. API: `editor.readAloud({rate,voice})` / `editor.stopReadAloud()`; tune with `config.readAloudRate` / `config.readAloudHighlight`. - **Mermaid diagrams** *(2.3.0)* — `editor.execCommand("insertdiagram")` (slash `/diagram`) authors diagrams-as-code (flowchart, sequence, gantt, pie, class, stateโ€ฆ) with a live preview and renders to SVG. No renderer bundled — uses `config.diagramResolver` (server-side render like Kroki), else a host-page `window.mermaid`, else a source `
` fallback; the Mermaid source round-trips in `data-diagram` and re-renders via `editor.renderDiagrams()`. Double-click to edit; injection-safe `contenteditable` blocks. Pairs with the equation editor's same host-supplies-the-renderer model.
- **Inline Markdown autoformat** *(2.3.0)* — type the closing delimiter and the span converts in place: `**bold**`/`__bold__` โ†’ **bold**, `*italic*`/`_italic_` โ†’ *italic*, `` `code` `` โ†’ inline code, `~~strike~~` โ†’ strikethrough. Complements the existing block shortcuts (`# `, `> `, `- `, `1. `, `---`). Word-boundary gated so math (`2*3`), globs and `snake_case` are never reformatted; inert inside code/links; fully undoable. Disable with `config.markdownInlineEnabled = false`.
- **Email inline-style export** *(2.3.0)* — `editor.getEmailHTML()` returns email-client-safe HTML: curated **computed** styles written **inline** on every element (since Outlook/Gmail strip `