# Editor

> Source: https://design.nanatec.co.ke/components/editor/
> A rich text editor with a JSON document model, snapshot undo/redo, HTML/Markdown export, slash commands, and an extensible toolbar.
> Status: beta
> Since: v0.0.14

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.

<span class="nana-status nana-status--beta">beta</span> <small>since v0.0.14</small>

## Example

```html
<nana-editor show-word-count></nana-editor>
```

Type <kbd>/</kbd> 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

## 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

## Keyboard

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

## CSS Parts

## 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

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

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

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

## Storybook

See every state and prop interactively in Storybook: https://storybook.nanatec.co.ke/?path=/docs/components-editor--docs