@richhtmleditor/core

Framework-neutral rich text editor engine — command registry, configurable toolbar, document model, tables, outline panel, TOC auto-sync, selection mini-toolbar, export for preview/DOCX, and a plugins API for enterprise extensions.

Current release: 1.2.0

Repository: github.com/rajkishorsahu89/richhtmleditor

Demo: richhtmleditor.vercel.app — demo · guide · API. Doc Preview joint demo: doc-preview-app.vercel.app/demo/enterprise

What's in 1.2.0

• createEditor — mount a full WYSIWYG host with toolbar, content area, and command registry
• Toolbar presets — minimal, standard, and full via TOOLBAR_PRESETS and ToolbarConfig
• Tables — insert, merge/split cells, row/column ops, header rows, captions, cell styles, and column sort
• Callout blocks — insertCallout(variant) — info, warning, success, error with colored icon, border, and background; DOCX + PDF export
• Embed blocks — paste YouTube/Loom/Figma URL to auto-embed <iframe>; insertEmbed toolbar button opens modal dialog
• Word goal — setWordGoal(n) shows progress bar in status bar; status bar also shows ~N min read
• Dark mode toggle — toggleDarkMode command; flips .de-root--dark class without external state
• Markdown shortcuts — **bold**, _italic_, `code`, ~~strike~~ on closing delimiter
• Markdown import — importMarkdown command opens .md file picker and converts to editor blocks
• Case change — caseChange(type) — UPPERCASE, lowercase, Title Case, Sentence case
• Smart typography — auto curly quotes, -- → –, --- → —, ... → … on keypress
• Autolink — URLs auto-convert to <a href> on Space/Enter
• Preview modal — previewDocument command; inline split-pane HTML preview
• Inline CSS export — inlineCSSExport copies document HTML with all styles inlined
• Link checker panel — linkCheckerPanel scans links, shows HTTP status
• Visual blocks toggle — toggleVisualBlocks shows ¶ marks and block outlines
• Autoresize — autoresize: true option; editor height grows with content
• Task lists — checkbox list items with attrs.checked; click to toggle
• XLSX / CSV paste — paste spreadsheet data outside a table → new table block
• Menu bar — mountMenuBar in engine/menu-bar.ts; File / Edit / Insert / Format / View dropdowns
• Mobile touch — touchend mini-toolbar and 40 px touch targets on pointer: coarse
• Outline panel — toggleOutline command; caret-synced heading navigation
• TOC auto-sync — insertTableOfContents, syncTableOfContents; heading ids stay in sync on edit; TOC links scroll to block
• Undo history panel — undoHistoryPanel sidebar; click any entry to restore that state
• Selection mini-toolbar — floating format bar on text selection (bold, link, colors, and more)
• Export — exportForPreview, exportHtmlToDocx, serializeToPublicHTML for clean publish HTML
• DOCX import — importDocx command; hyperlinks, row spans, image dimensions, page breaks, cell padding, column widths, table style fills, and paragraph spacing all preserved
• DOCX export round-trip — w:tblGrid, w:tcW, w:tcMar, w:tcBorders, w:shd (rgb-safe), and w:vMerge continuation cells generated from document state
• Plugins API — EditorPlugin with tools and attach lifecycle hooks
• Slash commands — type / to insert headings, lists, blockquote, code block, table, divider, task list, footnote, or date
• Block reorder — drag-and-drop grip handles and Alt+Arrow keyboard shortcuts
• Auto-save — opt-in localStorage draft persistence with configurable key and 7-day expiry
• Paste special — modal with options to strip formatting, styles, or images before pasting
• Track changes panel — sidebar review panel with per-hunk accept/reject
• Emoji picker — categorized grid with search and inline insertion
• Special characters — symbol picker with categorized grids and quick search
• Format painter — copy and apply formatting across selections
• Footnotes, bookmarks, cross-references — structured document references
• Columns layout — 2-column and 3-column content sections
• Video embed — inline video player with URL or upload
• Word count, focus mode, print preview — productivity tools

Ships as ESM with TypeScript declarations. Import @richhtmleditor/themes CSS for toolbar and content chrome.

Keywords: richhtmleditor wysiwyg rich-text-editor toolbar tables toc typescript

Install

npm install @richhtmleditor/core @richhtmleditor/themes

Usage — quick start

import { createEditor } from "@richhtmleditor/core";
import "@richhtmleditor/themes/richhtmleditor.css";

const editor = createEditor({
  element: document.getElementById("editor")!,
  content: "<p>Hello <strong>world</strong></p>",
  toolbar: { preset: "standard" },
  features: { tables: true, media: true },
  onChange: (content) => console.log(content.html)
});

editor.commands.bold();
editor.commands.insertTable(3, 4);

Usage — toolbar configuration

import { createEditor, filterToolbarPreset, registerToolbarTool } from "@richhtmleditor/core";

registerToolbarTool({
  id: "mySave",
  type: "button",
  label: "Save",
  icon: "save",
  onClick: (ed) => fetch("/api/save", { method: "POST", body: ed.getHTML() })
});

// Option A — filterToolbarPreset() then pass layout
createEditor({
  element: el,
  toolbar: {
    layout: filterToolbarPreset("standard", {
      include: ["bold", "italic", "link", "undo", "redo", "mySave"]
    }),
    tools: { mySave: { display: "both" } }
  }
});

// Option B — include / exclude on preset (no layout)
createEditor({
  element: el,
  toolbar: {
    preset: "standard",
    exclude: ["insertImage", "find", "replace"]
  }
});

When layout is set it replaces the preset (include / exclude are ignored). Use tools[id].visible: false to hide tools without changing layout.

Usage — plugins

import { createEditor, type EditorPlugin } from "@richhtmleditor/core";

const myPlugin: EditorPlugin = {
  id: "my-plugin",
  tools: [
    {
      id: "approve",
      type: "button",
      label: "Approve",
      onClick: (editor) => editor.emit("approved")
    }
  ],
  attach: (editor) => {
    const off = editor.on("change", () => { /* sync */ });
    return () => off();
  }
};

createEditor({ element: el, plugins: [myPlugin] });

Usage — export for preview

const result = editor.exportForPreview({
  workflowState: "approved",
  includePrintCss: true,
  commentsHtml: "<aside>…</aside>"
});

// result.fullHtml — standalone HTML for iframe or @doc-preview
// result.watermarkText — workflow watermark when applicable

API

createEditor(options)

EditorInstance

Toolbar presets

Related packages

• @richhtmleditor/themes — shared CSS (required for UI).
• @richhtmleditor/angular — Angular component.
• @richhtmleditor/react — React component.
• @richhtmleditor/vue — Vue 3 component.
• @richhtmleditor/js — vanilla createRichHtmlEditor.
• @richhtmleditor/enterprise — licence tokens and feature flags.
• @richhtmleditor/ai — AI authoring plugin.
• @richhtmleditor/comments — review comments plugin.
• @richhtmleditor/workflows — approval workflows plugin.
• @richhtmleditor/collab — Yjs collaboration plugin.
• @richhtmleditor/diagrams — Mermaid diagrams plugin.
• @richhtmleditor/math — LaTeX/MathML equation plugin.
• @richhtmleditor/export — DOCX/PDF/HTML export plugin.
• @richhtmleditor/spellcheck — real-time spell check plugin.
• @richhtmleditor/templates — document templates plugin.
• @richhtmleditor/mentions — @ mentions plugin.

License

MIT