LineaUI.Components.TextEditor (linea_ui v0.1.1)

Copy Markdown View Source

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.

Summary

Functions

text_editor(assigns)

Renders a rich text editor.

Functions

text_editor(assigns)

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.