# `LineaUI.Components.TextEditor`
[🔗](https://github.com/devaction-labs/linea_ui/blob/v0.1.1/lib/linea_ui/components/text_editor.ex#L1)

LineOne's rich text editor (Quill's snow toolbar in LineOne's skin) on a plain
`contenteditable`: bold, italic, underline, strike, quote, code, headings, lists,
sub/superscript, indent, text direction, size, font, colors, alignment, links and clean.

    <.text_editor field={@form[:body]} placeholder="Enter your content..." />
    <.text_editor name="note" toolbar={[~w(bold italic underline), ~w(list-ordered list-bullet header-1 background)]} />
    <.text_editor name="post" filled content_class="h-72" />

The HTML of the text is submitted through a hidden input named like the field, and each edit
fires a bubbling `input` event, so `phx-change` runs. The editor cleans the HTML it is given
and the HTML it pastes (only formatting tags and safe links stay), but the server should still
sanitize what it stores. A value sent by the server replaces the text; the same value echoed
back does not touch it.

# `text_editor`

Renders a rich text editor.

    <.text_editor id="post" name="post[body]" placeholder="Enter your content..." filled />

`toolbar` is a list of groups, each a list of tools: `bold italic underline strike blockquote
code-block code header-1 header-2 list-ordered list-bullet script-sub script-super
indent-minus1 indent-plus1 direction-rtl link clean` (buttons) and `size header color
background font align` (pickers). The default is LineOne's full toolbar.

Events: `on_change` is pushed with `%{"id" => id, "value" => html}` after edits (debounced by
`debounce` ms), to `target` or to the LiveView/LiveComponent the editor is in.

## Attributes

* `id` (`:string`) - Defaults to the field id, or a generated one.
* `name` (`:string`) - Defaults to the field name.
* `value` (`:string`) - The HTML of the text; defaults to the field value.
* `field` (`Phoenix.HTML.FormField`) - Defaults to `nil`.
* `label` (`:string`) - Defaults to `nil`.
* `help` (`:string`) - Defaults to `nil`.
* `errors` (`:list`) - Defaults to `[]`.
* `placeholder` (`:string`) - Defaults to `nil`.
* `toolbar` (`:list`) - Groups of tool names, see above. Defaults to `[["bold", "italic", "underline", "strike"], ["blockquote", "code-block"], ["header-1", "header-2"], ["list-ordered", "list-bullet"], ["script-sub", "script-super"], ["indent-minus1", "indent-plus1"], ["direction-rtl"], ["size"], ["header"], ["color", "background"], ["font"], ["align"], ["clean"]]`.
* `filled` (`:boolean`) - The toolbar on a filled background (LineOne's Filled Header). Defaults to `false`.
* `content_class` (`:any`) - Classes of the text area, its height above all. Defaults to `"h-48"`.
* `link_label` (`:string`) - Defaults to `"Enter link:"`.
* `save_label` (`:string`) - Defaults to `"Save"`.
* `disabled` (`:boolean`) - Defaults to `false`.
* `on_change` (`:string`) - Defaults to `nil`.
* `debounce` (`:integer`) - Defaults to `300`.
* `target` (`:any`) - Defaults to `nil`.
* `class` (`:any`) - Defaults to `nil`.
* Global attributes are accepted.

---

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