# Editor
> Rich-text editor on ProseMirror, with a formatting toolbar, a link panel, keyboard shortcuts and markdown-style block shortcuts. The value is an HTML string, a markdown string or the document as JSON, and whatever arrives is treated as untrusted and rebuilt from the editor's own schema. A signal-forms native control; ProseMirror is an optional peer dependency that only an app importing `ngwr/editor` installs.
Source: https://ngwr.dev/reference/components/editor
Kind: Component, Standalone, Signal Forms, SSR-safe
Added in v14.9
## Installation
ProseMirror is an OPTIONAL peer: `ngwr` declares the eight packages and marks them optional, so nothing installs them until you do. No other entry point imports them, so an app that never reaches for `ngwr/editor` never pays for it.
```bash
# ProseMirror is an optional peer: installing ngwr does not bring it along.
pnpm add prosemirror-model prosemirror-state prosemirror-view prosemirror-commands \
prosemirror-keymap prosemirror-history prosemirror-schema-list prosemirror-inputrules
# or
npm install prosemirror-model prosemirror-state prosemirror-view prosemirror-commands \
prosemirror-keymap prosemirror-history prosemirror-schema-list prosemirror-inputrules
```
```angular-ts
import { WrEditor } from 'ngwr/editor';
@Component({ imports: [WrEditor] })
export class MyComponent {}
```
```scss
@use 'ngwr/editor';
```
## Basic usage
`[(value)]` is the document. By default it is an HTML string, and every edit writes a fresh one back — the block under the editor shows exactly what the model holds. Until the first edit that is the string the host wrote; the editor reads it, but never writes a normalised copy back on load, which would mark a pristine form dirty.
_Also shown on the page: TS._
```angular-html
{{ notes() }}
```
## Markdown
`format="markdown"` reads and writes the dialect `ngwr/markdown` parses and `` renders, so a document written here displays the same way there. Markdown has no underline, so in this format the underline tool, its shortcut and the mark itself are absent — a pasted `` cannot show on screen and then vanish on save. The serializer writes one canonical spelling, so the first edit may respell what you bound (`*` bullets become `-`) without changing the document.
_Also shown on the page: TS._
```angular-html
{{ checklist() }}
```
## JSON
`format="json"` hands you the document as a `WrEditorJson` tree — the shape to store when the content is going to be read by code rather than by a browser. A bound tree is VALIDATED, not repaired: an unknown node or mark, an attribute outside its set, a broken content rule or a link the URL policy refuses, and the whole value is refused. The editor keeps the document it had, warns in dev mode, and stays read-only until it is given a value it can read.
_Also shown on the page: TS._
```angular-html
{{ agenda() | json }}
```
A document with nothing written in it is `''` in the two string formats and `null` in `json`, so a `required()` rule sees an empty editor as empty — `''` would be a non-empty string. That holds for everything that only looks written: empty lines, a few spaces, or a list, quote or heading chosen with no text in it. An image or a horizontal line counts as content. Changing `format` at runtime re-reads `value` in the new format; if it cannot, the document on screen is kept and edits are written in the new format from then on. An app that stores one format everywhere sets it once:
```typescript
import { provideWrConfig } from 'ngwr/config';
// Every that binds no [format] of its own now reads and writes markdown.
providers: [provideWrConfig({ editor: { format: 'markdown' } })];
```
## Toolbar
`toolbar` is the list of tools, in order, with `'|'` between groups; `false` removes the toolbar and leaves the shortcuts. Separators are drawn only between two groups, and a tool the format cannot store is dropped. A tool the selection cannot use is disabled rather than hidden, so the toolbar does not reflow under the caret.
_Also shown on the page: TS._
```angular-html
```
```angular-ts
import { WR_EDITOR_TOOLBAR, type WrEditorTool } from 'ngwr/editor';
// Built from the default rather than retyped — this drops the two code tools.
readonly tools: readonly WrEditorTool[] = WR_EDITOR_TOOLBAR.filter(
tool => tool !== 'code' && tool !== 'codeBlock'
);
```
```angular-html
```
## Signal Forms
`[formField]` writes the editor's own `value` model — no `ControlValueAccessor` in between — and a plain `string` field binds to it as it is. Inside a `` the label names the text surface through `aria-labelledby` (a contenteditable is not labelable, so `