# `PhiaUi.Components.Editor.Presets`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/editor/presets.ex#L1)

Editor Presets — 10 pre-composed editor configurations for common use cases.

Each preset composes the lower-level PhiaUI editor components into a
ready-to-use editor with opinionated defaults. Import one preset component
and drop it into your LiveView for an instant editing experience.

## Presets

### Original (v0.1.17)
- `simple_editor/1`          — minimal editor with bold/italic/link/lists toolbar
- `article_editor/1`         — Medium-style editor for blog posts and articles
- `document_editor_full/1`   — full document shell with header/footer/sidebar
- `academic_editor/1`        — academic editor with citation toolbar
- `email_composer/1`         — email-style editor with To/Subject/Signature

### v2 Presets (v0.1.17)
- `notion_editor/1`          — Notion-style: slash commands, drag, block toolbars
- `google_docs_editor/1`     — GDocs: menu bar, A4 pages, track changes
- `medium_editor_v2/1`       — Medium: floating toolbar, clean reading, images
- `code_notes_editor/1`      — Dev notes: syntax hl, code sandbox, markdown
- `collaborative_editor/1`   — Full collab: presence, cursors, comments sidebar

## Usage

    # In your LiveView template:
    <.simple_editor id="my-editor" value={@content} />

    # Or for a full document experience:
    <.document_editor_full id="doc" title="Q4 Report" />

# `academic_editor`

Renders an academic editor with citation toolbar and formatting for papers.

Includes a citation style selector, footnote insertion, bibliography tools,
and standard text formatting. The toolbar is tailored for academic writing.

## Example

    <.academic_editor id="paper" citation_style={:mla} value={@paper_content} />

## Attributes

* `id` (`:string`) (required)
* `value` (`:string`) - Defaults to `""`.
* `citation_style` (`:atom`) - Defaults to `:apa`.
* `on_update` (`:string`) - Defaults to `"editor:update"`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.

# `article_editor`

Renders a Medium-style article editor with heading selector, image support,
and embeds.

Features a full toolbar with text formatting, heading levels, lists,
blockquotes, code blocks, and media insertion. Ideal for blog posts,
documentation, and long-form content.

## Example

    <.article_editor id="blog-editor" value={@draft_content} />

## Attributes

* `id` (`:string`) (required)
* `value` (`:string`) - Defaults to `""`.
* `on_update` (`:string`) - Defaults to `"editor:update"`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.

# `code_notes_editor`

Renders a developer-focused notes editor with syntax highlighting,
code sandbox blocks, and markdown input shortcuts.

Features: code blocks with language detection and highlighting,
inline code formatting, monospace-friendly layout, markdown shortcuts.

## Example

    <.code_notes_editor id="dev-notes" value={@notes} />

## Attributes

* `id` (`:string`) (required)
* `value` (`:string`) - Defaults to `""`.
* `on_update` (`:string`) - Defaults to `"editor:update"`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.

# `collaborative_editor`

Renders a full collaborative editing experience with presence indicators,
cursor tracking, comments sidebar, and version history access.

Designed to integrate with PhiaUI's Collab Suite (CollabRoom, CollabPresence,
etc.) for real-time multi-user editing.

## Example

    <.collaborative_editor
      id="collab-doc"
      title="Team Notes"
      collaborators={@online_users}
    />

## Attributes

* `id` (`:string`) (required)
* `value` (`:string`) - Defaults to `""`.
* `title` (`:string`) - Defaults to `"Shared Document"`.
* `on_update` (`:string`) - Defaults to `"editor:update"`.
* `collaborators` (`:list`) - Defaults to `[]`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.

# `document_editor_full`

Renders a full document editor with header, toolbar, content, sidebar, and footer.

This is the most complete preset — a Google Docs-like experience with title
bar, save status, collapsible sidebar, word count footer, and full formatting
toolbar.

## Example

    <.document_editor_full id="report" title="Q4 Report" value={@content} />

## Attributes

* `id` (`:string`) (required)
* `value` (`:string`) - Defaults to `""`.
* `title` (`:string`) - Defaults to `"Untitled"`.
* `on_update` (`:string`) - Defaults to `"editor:update"`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.

# `email_composer`

Renders an email-style composer with To, Subject, body, and signature fields.

The body uses the rich editor with a compact toolbar. The signature is
appended below the editor as a preview.

## Example

    <.email_composer
      id="email"
      to="user@example.com"
      subject="Meeting Follow-Up"
      signature="Best regards,\nJohn"
    />

## Attributes

* `id` (`:string`) (required)
* `value` (`:string`) - Defaults to `""`.
* `to` (`:string`) - Defaults to `""`.
* `subject` (`:string`) - Defaults to `""`.
* `signature` (`:string`) - Defaults to `""`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.

# `google_docs_editor`

Renders a Google Docs-style editor with a full menu bar, toolbar,
A4-formatted pages, and optional track changes mode.

Features: document title, save status, full formatting toolbar,
A4 page layout, word count footer, track changes toggle.

## Example

    <.google_docs_editor id="doc" title="Q4 Report" track_changes={true} />

## Attributes

* `id` (`:string`) (required)
* `value` (`:string`) - Defaults to `""`.
* `title` (`:string`) - Defaults to `"Untitled Document"`.
* `on_update` (`:string`) - Defaults to `"editor:update"`.
* `track_changes` (`:boolean`) - Defaults to `false`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.

# `medium_editor_v2`

Renders a Medium-style writing experience with floating toolbar, clean
reading typography, and image-focused layout.

Features: floating selection toolbar, large headings, wide image support,
drop cap option, distraction-free writing.

## Example

    <.medium_editor_v2 id="story" value={@story_content} />

## Attributes

* `id` (`:string`) (required)
* `value` (`:string`) - Defaults to `""`.
* `on_update` (`:string`) - Defaults to `"editor:update"`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.

# `notion_editor`

Renders a Notion-style editor with slash commands, drag handles, and
per-block floating toolbars. Minimal chrome, maximum content focus.

Features: block-level operations, drag reorder, "/" command palette,
markdown input shortcuts (via v2 engine).

## Example

    <.notion_editor id="notes-editor" value={@content} />

## Attributes

* `id` (`:string`) (required)
* `value` (`:string`) - Defaults to `""`.
* `on_update` (`:string`) - Defaults to `"editor:update"`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.

# `simple_editor`

Renders a minimal editor with a compact toolbar (bold, italic, link, lists).

This is the simplest preset — ideal for comments, short notes, and forms
where a lightweight rich text input is needed.

## Example

    <.simple_editor id="comment-editor" placeholder="Add a comment..." />

## Attributes

* `id` (`:string`) (required)
* `value` (`:string`) - Defaults to `""`.
* `placeholder` (`:string`) - Defaults to `"Start writing..."`.
* `on_update` (`:string`) - Defaults to `"editor:update"`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.

---

*Consult [api-reference.md](api-reference.md) for complete listing*