Plushie.Widget.TextEditor (Plushie v0.7.1)

Copy Markdown View Source

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

NameTypeDefaultDescription
contentString.t() | atom()nilInitial text content (seeds the editor cache).
placeholderString.t() | atom()nilPlaceholder text shown when editor is empty.
width:fill | :shrink | {:fill_portion, pos_integer()} | number()nilEditor width. Default: shrink.
height:fill | :shrink | {:fill_portion, pos_integer()} | number()nilEditor height. Default: shrink.
min_heightnumber()nilMinimum height in pixels.
max_heightnumber()nilMaximum height in pixels.
font:default | :monospace | String.t() | %Plushie.Type.Font{}nilFont specification.
sizenumber()nilFont size in pixels.
line_heightnumber() | %{relative: number()} | %{absolute: number()}nilLine height. Number is relative; map for explicit control.
paddingnumber()nilUniform padding in pixels.
wrapping:none | :word | :glyph | :word_or_glyphnilText wrapping mode.
input_purpose:normal | :secure | :terminal | :number | :decimal | :phone | :email | :url | :searchnilInput purpose: :normal, :secure, :terminal, :number, :decimal, :phone, :email, :url, :search.
highlight_syntaxString.t() | atom()nilLanguage extension for syntax highlighting (e.g. "rs", "py", "ex").
highlight_themeString.t() | atom()nilHighlighter 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

EventTypeDescription
:editvalue: String.t() | atom()Emitted on content changes.
:focusednoneEmitted when the editor gains focus.
:blurrednoneEmitted 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

option()

@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()}

t()

@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

a11y(widget, descriptor)

@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().

build(widget)

@spec build(widget :: t()) :: Plushie.Widget.ui_node()

Converts this widget struct to a ui_node() map.

content(widget, descriptor)

@spec content(widget :: t(), value :: (String.t() | atom()) | nil) :: t()

Initial text content (seeds the editor cache).

Accepts String.t() | atom().

event_rate(widget, descriptor)

@spec event_rate(widget :: t(), value :: integer() | nil) :: t()

Max events per second for coalescable events.

Accepts integer().

font(widget, descriptor)

@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{}.

height(widget, descriptor)

@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().

highlight_syntax(widget, descriptor)

@spec highlight_syntax(widget :: t(), value :: (String.t() | atom()) | nil) :: t()

Language extension for syntax highlighting (e.g. "rs", "py", "ex").

Accepts String.t() | atom().

highlight_theme(widget, descriptor)

@spec highlight_theme(widget :: t(), value :: (String.t() | atom()) | nil) :: t()

Highlighter theme name.

Accepts String.t() | atom().

input_purpose(widget, descriptor)

@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.

key_bindings(widget, descriptor)

@spec key_bindings(widget :: t(), value :: [map()] | nil) :: t()

Declarative key binding rules for the editor.

Accepts [map()].

line_height(widget, descriptor)

@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()}.

max_height(widget, descriptor)

@spec max_height(widget :: t(), value :: number() | nil) :: t()

Maximum height in pixels.

Accepts number().

min_height(widget, descriptor)

@spec min_height(widget :: t(), value :: number() | nil) :: t()

Minimum height in pixels.

Accepts number().

new(id, opts \\ [])

@spec new(id :: String.t(), opts :: [option()]) :: t()

Creates a new widget struct with the given ID and keyword options.

padding(widget, descriptor)

@spec padding(widget :: t(), value :: number() | nil) :: t()

Uniform padding in pixels.

Accepts number().

placeholder(widget, descriptor)

@spec placeholder(widget :: t(), value :: (String.t() | atom()) | nil) :: t()

Placeholder text shown when editor is empty.

Accepts String.t() | atom().

placeholder_color(widget, descriptor)

@spec placeholder_color(widget :: t(), value :: (atom() | String.t() | map()) | nil) ::
  t()

Placeholder text color.

Accepts String.t().

required(widget, descriptor)

@spec required(widget :: t(), value :: boolean() | nil) :: t()

Marks the field as required. Flows into a11y.required automatically.

Accepts boolean().

selection_color(widget, descriptor)

@spec selection_color(widget :: t(), value :: (atom() | String.t() | map()) | nil) ::
  t()

Text selection highlight color.

Accepts String.t().

size(widget, descriptor)

@spec size(widget :: t(), value :: number() | nil) :: t()

Font size in pixels.

Accepts number().

style(widget, descriptor)

@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().

text_editor(id, opts \\ [])

(macro)

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)

validation(widget, descriptor)

@spec validation(widget :: t(), value :: term() | nil) :: t()

Form validation state. Accepts :valid, :pending, or {:invalid, message}. Flows into a11y.invalid and a11y.error_message automatically.

Accepts term().

width(widget, descriptor)

@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().

with_options(widget, opts)

@spec with_options(widget :: t(), opts :: [option()]) :: t()

Applies keyword options to an existing widget struct.

wrapping(widget, descriptor)

@spec wrapping(
  widget :: t(),
  value :: (:none | :word | :glyph | :word_or_glyph) | nil
) :: t()

Text wrapping mode.

Accepts :none | :word | :glyph | :word_or_glyph.