@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.1.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.1.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, and cell styles
• Outline panel — toggleOutline command; caret-synced heading navigation
• TOC auto-sync — insertTableOfContents, syncTableOfContents; heading ids and list items stay in sync on edit
• Selection mini-toolbar — floating format bar on text selection (bold, link, colors, and more)
• Export — exportForPreview, exportHtmlToDocx, serializeToPublicHTML for clean publish HTML
• Plugins API — EditorPlugin with tools and attach lifecycle hooks
• Slash commands — type / to insert headings, lists, blockquote, code block, table, or divider
• 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
• Heading numbering — headingNumbers toggle for hierarchical auto-numbering
• 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)

| Option | Type | Description | | --- | --- | --- | | element | HTMLElement | Required. Host element for the editor chrome. | | content | string | Initial HTML. | | editable | boolean | Enable editing (default true). | | dark | boolean | Apply dark theme tokens. | | theme | EditorThemeTokens | CSS variable overrides (primary, toolbarBg, …). | | toolbar | ToolbarConfig \| ToolbarPresetId | Preset or custom layout. | | features | EditorFeatureFlags | Gate tables, media, AI, comments, workflows, toolbarFull. | | plugins | EditorPlugin[] | Enterprise and custom plugins. | | onChange | (content: EditorContent) => void | Fired on document edits. | | onSave | (content: EditorContent) => void | Fired on save command. | | autoSave | boolean \| string | Enable localStorage auto-save; pass a string key to namespace drafts. | | onUploadImage | (file: File) => Promise<string> | Resolve image uploads to a URL. |

EditorInstance

| Member | Description | | --- | --- | | commands | All formatting and authoring commands (bold, insertTable, syncTableOfContents, …). | | getHTML() / getJSON() | Serialize document as HTML or JSON model. | | setContent(html, options?) | Replace content; { silent: true } skips change callbacks. | | exportForPreview(options?) | Publish-ready HTML with workflow watermark/stamp. | | setToolbar(config) | Hot-swap toolbar layout at runtime. | | registerTool(tool) | Add a toolbar tool after mount. | | on(event, handler) | Subscribe to change, save, focus, blur, and plugin events. | | destroy() | Tear down DOM, listeners, and plugin cleanups. |

Toolbar presets

| Preset | Description | | --- | --- | | minimal | Bold, italic, underline, undo/redo. | | standard | Full authoring toolbar with lists, links, images, tables, find/replace. | | full | Enterprise layout — TOC, outline, track changes, AI/comments slots, table ops. |

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