Support toggling smart cell editor visibility

[jonatanklosko]

smartcelleditorvisible.mp4

Source

defmodule SmartCellWithEditorToggle do
  use Kino.JS
  use Kino.JS.Live
  use Kino.SmartCell, name: "Smart cell with editor toggle"

  @impl true
  def init(attrs, ctx) do
    source = attrs["source"] || ""
    ctx = assign(ctx, source: source, visible: false)
    {:ok, ctx, editor: [source: source, visible: false]}
  end

  @impl true
  def handle_connect(ctx) do
    {:ok, %{}, ctx}
  end

  @impl true
  def handle_event("toggle_editor", %{}, ctx) do
    visible = not ctx.assigns.visible

    {:noreply,
     ctx
     |> assign(visible: visible)
     |> reconfigure_smart_cell(editor: [visible: visible])}
  end

  @impl true
  def handle_editor_change(source, ctx) do
    {:ok, assign(ctx, source: source)}
  end

  @impl true
  def to_attrs(ctx) do
    %{"source" => ctx.assigns.source}
  end

  @impl true
  def to_source(attrs) do
    attrs["source"]
  end

  asset "main.js" do
    """
    export function init(ctx, payload) {
      root.innerHTML = `
        <button id="toggle">Hide/Show</button>
      `;

      ctx.root.querySelector(`#toggle`).addEventListener("click", (event) => {
        ctx.pushEvent("toggle_editor", {});
      });
    }
    """
  end
end

Kino.SmartCell.register(SmartCellWithEditorToggle)

[mruoss]

love this! Thanks so much!

[mruoss]

Just had a quick try. This doesn't really work for me. Looking at the PR: shouldn't there be some frontend code that actually shows/hides the editor? But I will try harder tonight.

[jonatanklosko]

@mruoss when the user selects FLAME Kubernetes backend, the smart cell server will receive the change and then you call reconfigure_smart_cell to show the editor (and set the initial source). Does that make sense or am I missing something?

[mruoss]

It does make sense and I'd say it is what I'm donig. I'm setting visible to false initially. But the editor is visible nontheless. Then, toggling the backend (Fly/K8s) reconfigures the smart cell setting visible accordingly. But the editor is never hidden.

[jonatanklosko]

@mruoss did you pull Livebook main? :D

[mruoss]

oh... I see! 😝

[mruoss]

works like a charm. My bad, sorry.

[jonatanklosko]

Perfect, and no worries!