Editor

A full-featured rich text editor built on Lit. It uses a contenteditable surface backed by a plain-JSON document model with snapshot-based undo/redo, HTML round-trip serialization, and Markdown export.

beta since v0.0.14

Example

Show code Copy

Type / at the start of an empty line to open the slash-command menu, or use the toolbar for formatting, links, images, tables, and lists.

Properties

Property	Type	Default	Description
placeholder	string	Start writing…	Placeholder when empty
value	string	—	Initial HTML content
readonly	boolean	false	Disable editing
minHeight	string	—	CSS min-height for the editing area
showWordCount	boolean	false	Show the status bar

Methods

Method	Returns	Description
load(content)	void	Load an EditorDocument or JSON string
getContent()	EditorDocument	The current document
getJSON()	string	Pretty-printed JSON
getHTML()	string	Serialized HTML
getMarkdown()	string	Markdown export
clear()	void	Reset to an empty document

Events

Event	Detail	Description
nana-change	{ json, html, markdown, wordCount, charCount, readTime }	Fired on every document change

Keyboard

Shortcut	Action
Ctrl/⌘ B / I / U	Bold / Italic / Underline
Ctrl/⌘ K	Insert link
Ctrl/⌘ Z / Shift Z	Undo / Redo
Ctrl/⌘ Shift S / X / ,	Strikethrough / Superscript / Subscript
/	Open the slash-command menu

CSS Parts

Part	Description
content	The contenteditable editing surface

Toolbar

The toolbar (<nana-editor-toolbar>) renders command buttons in groups — history, format, color, insert, list, and align — plus submenus for color, link, and image actions. It is registered automatically with the editor.

Import

import "@nana-tec/ui-components/editor";

The subpath also re-exports the model layer for programmatic use:

import {
  RichEditor,
  serializeToJSON,
  serializeToHTML,
  serializeToMarkdown,
  blocksToHTML,
  parseHTMLtoBlocks,
} from "@nana-tec/ui-components/editor";

Storybook

Explore Editor interactively Every state, prop, and edge case — with live controls — in Storybook.

View in Storybook