Text editor, multi-line editable text area.
The renderer manages an internal text_editor::Content cache keyed by
node ID. The content prop seeds the initial content.
Props
| Name | Type | Default | Description |
|---|---|---|---|
content | String.t() | atom() | nil | Initial text content (seeds the editor cache). |
placeholder | String.t() | atom() | nil | Placeholder text shown when editor is empty. |
width | :fill | :shrink | {:fill_portion, pos_integer()} | number() | nil | Editor width. Default: shrink. |
height | :fill | :shrink | {:fill_portion, pos_integer()} | number() | nil | Editor height. Default: shrink. |
min_height | number() | nil | Minimum height in pixels. |
max_height | number() | nil | Maximum height in pixels. |
font | :default | :monospace | String.t() | %Plushie.Type.Font{} | nil | Font specification. |
size | number() | nil | Font size in pixels. |
line_height | number() | %{relative: number()} | %{absolute: number()} | nil | Line height. Number is relative; map for explicit control. |
padding | number() | nil | Uniform padding in pixels. |
wrapping | :none | :word | :glyph | :word_or_glyph | nil | Text wrapping mode. |
input_purpose | :normal | :secure | :terminal | :number | :decimal | :phone | :email | :url | :search | nil | Input purpose: :normal, :secure, :terminal, :number, :decimal, :phone, :email, :url, :search. |
highlight_syntax | String.t() | atom() | nil | Language extension for syntax highlighting (e.g. "rs", "py", "ex"). |
highlight_theme | String.t() | atom() | nil | Highlighter theme name. |
| style | :default \| :primary \| :secondary \| :success \| :danger \| :warning \| :dark \| :weak \| :rounded_box \| term() | nil | Named preset or custom StyleMap. |
| key_bindings | [map()] | nil | Declarative key binding rules for the editor. |
| placeholder_color | String.t() | nil | Placeholder text color. |
| selection_color | String.t() | nil | Text selection highlight color. |
| required | boolean() | nil | Marks the field as required. Flows into a11y.required automatically. |
| validation | term() | nil | Form validation state. Accepts :valid, :pending, or {:invalid, message}. Flows into a11y.invalid and a11y.error_message automatically. |
| event_rate | integer() | nil | Max events per second for coalescable events. |
| a11y | %Plushie.Type.A11y{} \| map() \| keyword() | %{role: :multiline_text_input, label_from: :placeholder} | Accessibility annotations. |
Events
| Event | Type | Description |
|---|---|---|
:edit | value: String.t() | atom() | Emitted on content changes. |
:focused | none | Emitted when the editor gains focus. |
:blurred | none | Emitted when the editor loses focus. |
Summary
Functions
Accessibility annotations.
Converts this widget struct to a ui_node() map.
Initial text content (seeds the editor cache).
Max events per second for coalescable events.
Font specification.
Editor height. Default: shrink.
Language extension for syntax highlighting (e.g. "rs", "py", "ex").
Highlighter theme name.
Input purpose: :normal, :secure, :terminal, :number, :decimal, :phone, :email, :url, :search.
Declarative key binding rules for the editor.
Line height. Number is relative; map for explicit control.
Maximum height in pixels.
Minimum height in pixels.
Creates a new widget struct with the given ID and keyword options.
Uniform padding in pixels.
Placeholder text shown when editor is empty.
Placeholder text color.
Marks the field as required. Flows into a11y.required automatically.
Text selection highlight color.
Font size in pixels.
Named preset or custom StyleMap.
Creates a :text_editor widget.
Form validation state. Accepts :valid, :pending, or {:invalid, message}. Flows into a11y.invalid and a11y.error_message automatically.
Editor width. Default: shrink.
Applies keyword options to an existing widget struct.
Text wrapping mode.
Types
@type option() :: (((((((((((((((((((({:content, String.t() | atom()} | {:placeholder, String.t() | atom()}) | {:width, :fill | :shrink | {:fill_portion, pos_integer()} | number()}) | {:height, :fill | :shrink | {:fill_portion, pos_integer()} | number()}) | {:min_height, number()}) | {:max_height, number()}) | {:font, :default | :monospace | String.t() | %Plushie.Type.Font{ family: term(), stretch: term(), style: term(), weight: term() }}) | {:size, number()}) | {:line_height, number() | %{relative: number()} | %{absolute: number()}}) | {:padding, number()}) | {:wrapping, :none | :word | :glyph | :word_or_glyph}) | {:input_purpose, :normal | :secure | :terminal | :number | :decimal | :phone | :email | :url | :search}) | {:highlight_syntax, String.t() | atom()}) | {:highlight_theme, String.t() | atom()}) | {:style, :default | :primary | :secondary | :success | :danger | :warning | :dark | :weak | :rounded_box | term()}) | {:key_bindings, [map()]}) | {:placeholder_color, atom() | String.t() | map()}) | {:selection_color, atom() | String.t() | map()}) | {:required, boolean()}) | {:validation, term()}) | {:event_rate, integer()}) | {:a11y, %Plushie.Type.A11y{ active_descendant: term(), busy: term(), described_by: term(), description: term(), disabled: term(), error_message: term(), expanded: term(), has_popup: term(), hidden: term(), invalid: term(), label: term(), label_from: term(), labelled_by: term(), level: term(), live: term(), mnemonic: term(), modal: term(), orientation: term(), position_in_set: term(), radio_group: term(), read_only: term(), required: term(), role: term(), selected: term(), size_of_set: term(), toggled: term(), value: term() } | map() | keyword()}
@type t() :: %Plushie.Widget.TextEditor{ a11y: (%Plushie.Type.A11y{ active_descendant: term(), busy: term(), described_by: term(), description: term(), disabled: term(), error_message: term(), expanded: term(), has_popup: term(), hidden: term(), invalid: term(), label: term(), label_from: term(), labelled_by: term(), level: term(), live: term(), mnemonic: term(), modal: term(), orientation: term(), position_in_set: term(), radio_group: term(), read_only: term(), required: term(), role: term(), selected: term(), size_of_set: term(), toggled: term(), value: term() } | map() | keyword()) | Plushie.Animation.Transition.t() | Plushie.Animation.Spring.t() | Plushie.Animation.Sequence.t() | nil, content: (String.t() | atom()) | Plushie.Animation.Transition.t() | Plushie.Animation.Spring.t() | Plushie.Animation.Sequence.t() | nil, event_rate: integer() | Plushie.Animation.Transition.t() | Plushie.Animation.Spring.t() | Plushie.Animation.Sequence.t() | nil, font: (:default | :monospace | String.t() | %Plushie.Type.Font{ family: term(), stretch: term(), style: term(), weight: term() }) | Plushie.Animation.Transition.t() | Plushie.Animation.Spring.t() | Plushie.Animation.Sequence.t() | nil, height: (:fill | :shrink | {:fill_portion, pos_integer()} | number()) | Plushie.Animation.Transition.t() | Plushie.Animation.Spring.t() | Plushie.Animation.Sequence.t() | nil, highlight_syntax: (String.t() | atom()) | Plushie.Animation.Transition.t() | Plushie.Animation.Spring.t() | Plushie.Animation.Sequence.t() | nil, highlight_theme: (String.t() | atom()) | Plushie.Animation.Transition.t() | Plushie.Animation.Spring.t() | Plushie.Animation.Sequence.t() | nil, id: String.t(), input_purpose: (:normal | :secure | :terminal | :number | :decimal | :phone | :email | :url | :search) | Plushie.Animation.Transition.t() | Plushie.Animation.Spring.t() | Plushie.Animation.Sequence.t() | nil, key_bindings: [map()] | Plushie.Animation.Transition.t() | Plushie.Animation.Spring.t() | Plushie.Animation.Sequence.t() | nil, line_height: (number() | %{relative: number()} | %{absolute: number()}) | Plushie.Animation.Transition.t() | Plushie.Animation.Spring.t() | Plushie.Animation.Sequence.t() | nil, max_height: number() | Plushie.Animation.Transition.t() | Plushie.Animation.Spring.t() | Plushie.Animation.Sequence.t() | nil, min_height: number() | Plushie.Animation.Transition.t() | Plushie.Animation.Spring.t() | Plushie.Animation.Sequence.t() | nil, padding: number() | Plushie.Animation.Transition.t() | Plushie.Animation.Spring.t() | Plushie.Animation.Sequence.t() | nil, placeholder: (String.t() | atom()) | Plushie.Animation.Transition.t() | Plushie.Animation.Spring.t() | Plushie.Animation.Sequence.t() | nil, placeholder_color: String.t() | Plushie.Animation.Transition.t() | Plushie.Animation.Spring.t() | Plushie.Animation.Sequence.t() | nil, required: boolean() | Plushie.Animation.Transition.t() | Plushie.Animation.Spring.t() | Plushie.Animation.Sequence.t() | nil, selection_color: String.t() | Plushie.Animation.Transition.t() | Plushie.Animation.Spring.t() | Plushie.Animation.Sequence.t() | nil, size: number() | Plushie.Animation.Transition.t() | Plushie.Animation.Spring.t() | Plushie.Animation.Sequence.t() | nil, style: (:default | :primary | :secondary | :success | :danger | :warning | :dark | :weak | :rounded_box | term()) | Plushie.Animation.Transition.t() | Plushie.Animation.Spring.t() | Plushie.Animation.Sequence.t() | nil, validation: term() | Plushie.Animation.Transition.t() | Plushie.Animation.Spring.t() | Plushie.Animation.Sequence.t() | nil, width: (:fill | :shrink | {:fill_portion, pos_integer()} | number()) | Plushie.Animation.Transition.t() | Plushie.Animation.Spring.t() | Plushie.Animation.Sequence.t() | nil, wrapping: (:none | :word | :glyph | :word_or_glyph) | Plushie.Animation.Transition.t() | Plushie.Animation.Spring.t() | Plushie.Animation.Sequence.t() | nil }
Functions
@spec a11y( widget :: t(), value :: (%Plushie.Type.A11y{ active_descendant: term(), busy: term(), described_by: term(), description: term(), disabled: term(), error_message: term(), expanded: term(), has_popup: term(), hidden: term(), invalid: term(), label: term(), label_from: term(), labelled_by: term(), level: term(), live: term(), mnemonic: term(), modal: term(), orientation: term(), position_in_set: term(), radio_group: term(), read_only: term(), required: term(), role: term(), selected: term(), size_of_set: term(), toggled: term(), value: term() } | map() | keyword()) | nil ) :: t()
Accessibility annotations.
Accepts %Plushie.Type.A11y{} | map() | keyword().
@spec build(widget :: t()) :: Plushie.Widget.ui_node()
Converts this widget struct to a ui_node() map.
Initial text content (seeds the editor cache).
Accepts String.t() | atom().
Max events per second for coalescable events.
Accepts integer().
@spec font( widget :: t(), value :: (:default | :monospace | String.t() | %Plushie.Type.Font{ family: term(), stretch: term(), style: term(), weight: term() }) | nil ) :: t()
Font specification.
Accepts :default | :monospace | String.t() | %Plushie.Type.Font{}.
@spec height( widget :: t(), value :: (:fill | :shrink | {:fill_portion, pos_integer()} | number()) | nil ) :: t()
Editor height. Default: shrink.
Accepts :fill | :shrink | {:fill_portion, pos_integer()} | number().
Language extension for syntax highlighting (e.g. "rs", "py", "ex").
Accepts String.t() | atom().
Highlighter theme name.
Accepts String.t() | atom().
@spec input_purpose( widget :: t(), value :: (:normal | :secure | :terminal | :number | :decimal | :phone | :email | :url | :search) | nil ) :: t()
Input purpose: :normal, :secure, :terminal, :number, :decimal, :phone, :email, :url, :search.
Accepts :normal | :secure | :terminal | :number | :decimal | :phone | :email | :url | :search.
Declarative key binding rules for the editor.
Accepts [map()].
@spec line_height( widget :: t(), value :: (number() | %{relative: number()} | %{absolute: number()}) | nil ) :: t()
Line height. Number is relative; map for explicit control.
Accepts number() | %{relative: number()} | %{absolute: number()}.
Maximum height in pixels.
Accepts number().
Minimum height in pixels.
Accepts number().
Creates a new widget struct with the given ID and keyword options.
Uniform padding in pixels.
Accepts number().
Placeholder text shown when editor is empty.
Accepts String.t() | atom().
Placeholder text color.
Accepts String.t().
Marks the field as required. Flows into a11y.required automatically.
Accepts boolean().
Text selection highlight color.
Accepts String.t().
Font size in pixels.
Accepts number().
@spec style( widget :: t(), value :: (:default | :primary | :secondary | :success | :danger | :warning | :dark | :weak | :rounded_box | term()) | nil ) :: t()
Named preset or custom StyleMap.
Accepts :default | :primary | :secondary | :success | :danger | :warning | :dark | :weak | :rounded_box | term().
Creates a :text_editor widget.
Shorthand for new/2. Import this macro to use the widget name
directly in view functions:
import Plushie.Widget.TextEditor, only: [text_editor: 2]
text_editor("my-id", prop: value)
Form validation state. Accepts :valid, :pending, or {:invalid, message}. Flows into a11y.invalid and a11y.error_message automatically.
Accepts term().
@spec width( widget :: t(), value :: (:fill | :shrink | {:fill_portion, pos_integer()} | number()) | nil ) :: t()
Editor width. Default: shrink.
Accepts :fill | :shrink | {:fill_portion, pos_integer()} | number().
Applies keyword options to an existing widget struct.
Text wrapping mode.
Accepts :none | :word | :glyph | :word_or_glyph.