JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 1299
  • Score
    100M100P100Q100794F
  • License MIT

Framework-neutral rich text editor engine, command registry, and toolbar system.

Package Exports

  • @richhtmleditor/core

Readme

@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.2

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.2

  • 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
  • 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, 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.

License

MIT