Editable · API

Set text from client bindings, client JS, or a server event.

Set value (Client binding)

Label

Start

    <div class="layout__row">
  <.action phx-click={Corex.Editable.set_value("editable-api-cb", "Alpha")} class="button button--sm">Alpha</.action>
  <.action phx-click={Corex.Editable.set_value("editable-api-cb", "Beta")} class="button button--sm">Beta</.action>
</div>
<.editable class="editable" value="Start">
  <:label>Label</:label>
  <:edit_trigger><.heroicon name="hero-pencil-square" class="icon" /></:edit_trigger>
  <:submit_trigger><.heroicon name="hero-check" class="icon" /></:submit_trigger>
  <:cancel_trigger><.heroicon name="hero-x-mark" class="icon" /></:cancel_trigger>
</.editable>

Set value (Client JS)

Label

Start

    <div class="layout__row">
  <button
    type="button"
    class="button button--sm"
    onclick="document.getElementById('editable-api-cjs')?.dispatchEvent(new CustomEvent('corex:editable:set-value', { bubbles: false, detail: { value: 'Gamma' } }))"
  >
    Gamma (client JS)
  </button>
</div>
<.editable class="editable" value="Start">
  <:label>Label</:label>
  <:edit_trigger><.heroicon name="hero-pencil-square" class="icon" /></:edit_trigger>
  <:submit_trigger><.heroicon name="hero-check" class="icon" /></:submit_trigger>
  <:cancel_trigger><.heroicon name="hero-x-mark" class="icon" /></:cancel_trigger>
</.editable>

    const el = document.getElementById("editable-api-cjs");
el?.dispatchEvent(
  new CustomEvent("corex:editable:set-value", { bubbles: false, detail: { value: "Gamma" } })
);

    const el: HTMLElement | null = document.getElementById("editable-api-cjs");
el?.dispatchEvent(
  new CustomEvent("corex:editable:set-value", { bubbles: false, detail: { value: "Gamma" } })
);

Set value (Server)

Label

Start

    <div class="layout__row">
  <.action phx-click="editable_api_alpha" class="button button--sm">Alpha</.action>
  <.action phx-click="editable_api_beta" class="button button--sm">Beta</.action>
</div>
<.editable class="editable" value="Start">
  <:label>Label</:label>
  <:edit_trigger><.heroicon name="hero-pencil-square" class="icon" /></:edit_trigger>
  <:submit_trigger><.heroicon name="hero-check" class="icon" /></:submit_trigger>
  <:cancel_trigger><.heroicon name="hero-x-mark" class="icon" /></:cancel_trigger>
</.editable>

    def handle_event("editable_api_alpha", _params, socket) do
  {:noreply, Corex.Editable.set_value(socket, "editable-api-srv", "Alpha")}
end

def handle_event("editable_api_beta", _params, socket) do
  {:noreply, Corex.Editable.set_value(socket, "editable-api-srv", "Beta")}
end