# Editor

Rich text editor shell with an accessible toolbar, configurable toolbar items, contenteditable form control support, and shadcn-style tokens.

This component is conceptually inspired by Flux Editor. It does not bundle Tiptap or Flux JavaScript; instead, it provides a lightweight Angular primitive that applications can compose, bind, and extend.

## Import

```ts
import { FormsModule } from '@angular/forms';
import {
  EditorButtonComponent,
  EditorComponent,
  EditorContentComponent,
  EditorSeparatorComponent,
  EditorSpacerComponent,
  EditorToolbarComponent,
} from '@edsis/component/editor';
```

## Usage

```html
<Editor>
  <EditorToolbar items="heading | bold italic underline | align ~ undo redo" />
  <EditorContent placeholder="Write something..." aria-label="Article body">
    <h3>What's changed</h3>
    <p>Draft release notes, article copy, or support responses here.</p>
  </EditorContent>
</Editor>
```

## Forms

`EditorContent` implements `ControlValueAccessor`, so it can bind to Angular forms as an HTML string.

```html
<Editor>
  <EditorToolbar />
  <EditorContent [(ngModel)]="content" name="content" aria-label="Article body" />
</Editor>
```

Sanitize persisted HTML at the application boundary before rendering it elsewhere.

## Toolbar Items

The toolbar accepts a space-separated `items` string. Use `|` for a separator and `~` for a spacer.

```html
<EditorToolbar
  items="heading | bold italic strike underline | bullet ordered blockquote link align ~ undo redo"
/>
```

Supported item names:

| Item          | Behavior                                             |
| ------------- | ---------------------------------------------------- |
| `heading`     | Text, heading 1, heading 2, and heading 3 selector.  |
| `bold`        | Bold formatting.                                     |
| `italic`      | Italic formatting.                                   |
| `strike`      | Strikethrough formatting.                            |
| `underline`   | Underline formatting.                                |
| `bullet`      | Bulleted list.                                       |
| `ordered`     | Numbered list.                                       |
| `blockquote`  | Block quote block.                                   |
| `subscript`   | Subscript formatting.                                |
| `superscript` | Superscript formatting.                              |
| `highlight`   | Highlight selected text.                             |
| `link`        | Create a placeholder link for the current selection. |
| `code`        | Code block.                                          |
| `align`       | Left, center, and right alignment selector.          |
| `undo`        | Undo last edit.                                      |
| `redo`        | Redo last edit.                                      |

## Custom Toolbar

Pass `items=""` and project custom toolbar controls.

```html
<Editor>
  <EditorToolbar items="">
    <button EditorButton command="bold" aria-label="Bold">B</button>
    <button EditorButton command="italic" aria-label="Italic">I</button>
    <EditorSeparator />
    <button EditorButton command="highlight" aria-label="Highlight">H</button>
    <EditorSpacer />
    <button EditorButton command="undo" aria-label="Undo">
      <svg
        aria-hidden="true"
        class="size-4"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="1.75"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <path d="M9 14 4 9l5-5" />
        <path d="M4 9h10a6 6 0 0 1 0 12h-2" />
      </svg>
    </button>
  </EditorToolbar>
  <EditorContent aria-label="Custom editor" />
</Editor>
```

## Keyboard Shortcuts

| Action        | Shortcut          |
| ------------- | ----------------- |
| Bold          | Cmd/Ctrl+B        |
| Italic        | Cmd/Ctrl+I        |
| Underline     | Cmd/Ctrl+U        |
| Strikethrough | Cmd/Ctrl+Shift+X  |
| Ordered list  | Cmd/Ctrl+Shift+7  |
| Bulleted list | Cmd/Ctrl+Shift+8  |
| Heading 1-3   | Cmd/Ctrl+Alt+1..3 |
| Undo          | Cmd/Ctrl+Z        |
| Redo          | Cmd/Ctrl+Shift+Z  |

## Styling

The editor uses `border-input`, `bg-background`, `ring-ring`, `text-foreground`, `text-muted-foreground`, and `bg-muted` tokens. Pass sizing classes directly to the content slot when adjusting height.

```html
<Editor>
  <EditorToolbar />
  <EditorContent class="min-h-30 max-h-60" aria-label="Compact editor" />
</Editor>
```

## Accessibility

- `EditorToolbar` renders `role="toolbar"`.
- `EditorContent` renders `role="textbox"` and `aria-multiline="true"`.
- Provide a clear `aria-label` for each editor content surface.
- Give terse or icon-only custom toolbar buttons an explicit `aria-label`.