fix: handle string keys attrs (#1)

Author: fahchen

assets/shared/utils.js

@@ -7,7 +7,8 @@ export function deserializeData(data) {
     try {
       const json = JSON.parse(data);
       return restore(json);
-    } catch (_e) {
+    } catch (e) {
+      console.log("Failed to deserialize data", e);
       return {};
     }
   } else {

lib/assets/smart_cell/build/main.js

@@ -1,15 +1,22 @@
 defmodule Kino.Excalidraw.Embedded do
+  @moduledoc """
+  An Excalidraw component that embeds the data directly into the livebook page.
+
+  See options in `Kino.Excalidraw.Options`.
+  """
+
   use Kino.JS, assets_path: "lib/assets/static/build"
 
   use TypedStructor
 
-  alias KinoExcalidraw.Options
+  alias Kino.Excalidraw.Options
 
   typed_structor do
     field :data, binary(), enforce: true
     field :options, Options.t(), default: %{}
   end
 
+  @spec new(attrs :: Enumerable.t()) :: Kino.JS.t()
   def new(attrs \\ []) do
     cell =
       __MODULE__

lib/assets/static/build/main.js

@@ -1,4 +1,17 @@
-defmodule KinoExcalidraw.Options do
+defmodule Kino.Excalidraw.Options do
+  @moduledoc """
+  The options for configuring the Excalidraw editor.
+
+
+  | Option | Description | Default |
+  |--------|-------------| ------- |
+  | `:height` | The height of the editor in pixels. | `600` |
+  | `:scroll_to_content` | Whether to scroll to the content when the editor is loaded. | `true` |
+  | `:view_mode_enabled` | Whether the view mode is enabled. | `false` |
+  | `:zen_mode_enabled` | Whether the zen mode is enabled. | `false` |
+  | `:grid_mode_enabled` | Whether the grid mode is enabled. | `false` |
+  """
+
   @type t() :: %{
           optional(:height) => pos_integer(),
           optional(:scroll_to_content) => boolean(),

lib/kino/excalidraw/embedded.ex

@@ -1,15 +1,22 @@
 defmodule Kino.Excalidraw.Remote do
+  @moduledoc """
+  An Excalidraw component that fetches the data from a remote URL.
+
+  See options in `Kino.Excalidraw.Options`.
+  """
+
   use Kino.JS, assets_path: "lib/assets/static/build"
 
   use TypedStructor
 
-  alias KinoExcalidraw.Options
+  alias Kino.Excalidraw.Options
 
   typed_structor do
     field :url, URI.t(), enforce: true
     field :options, Options.t(), default: %{}
   end
 
+  @spec new(attrs :: Enumerable.t()) :: Kino.JS.t()
   def new(attrs \\ []) do
     cell =
       __MODULE__

lib/kino_excalidraw/options.ex lib/kino/excalidraw/options.ex

@@ -1,36 +1,53 @@
 defmodule KinoExcalidraw.SmartCell do
+  @moduledoc """
+  A SmartCell for embedding and editing Excalidraw diagrams in Livebook notebooks.
+  This SmartCell allows you to create and modify Excalidraw graphs, and configure various editor options.
+
+  See options in `Kino.Excalidraw.Options`.
+  """
+
   use Kino.JS, assets_path: "lib/assets/smart_cell/build"
   use Kino.JS.Live
   use Kino.SmartCell, name: "Excalidraw"
 
   use TypedStructor
 
-  alias KinoExcalidraw.Options
+  alias Kino.Excalidraw.Options
 
   typed_structor do
     field :variable, binary(), default: "excalidraw"
     field :data, binary()
     field :options, Options.t(), default: %{}
   end
 
+  @spec new(attrs :: Enumerable.t()) :: __MODULE__.t()
   def new(attrs \\ []) do
     __MODULE__
-    |> struct(attrs)
+    |> struct(atomize_attrs(attrs))
     |> Map.update!(:options, &Options.build/1)
     |> Map.update!(
       :variable,
       &Kino.SmartCell.prefixed_var_name("excalidraw", &1)
     )
   end
 
+  defp atomize_attrs(attrs) do
+    Enum.map(attrs, fn
+      {key, value} when is_atom(key) -> {key, value}
+      {"variable", variable} -> {:variable, variable}
+      {"data", data} -> {:data, data}
+      {"options", options} -> {:options, options}
+    end)
+  end
+
   @impl true
   def init(attrs, ctx) do
     {:ok, assign(ctx, cell: new(attrs))}
   end
 
   @impl true
   def handle_connect(ctx) do
-    {:ok, to_json(ctx.assigns.cell), ctx}
+    {:ok, Map.take(ctx.assigns.cell, [:variable, :data, :options]), ctx}
   end
 
   @impl true
@@ -69,14 +86,18 @@ defmodule KinoExcalidraw.SmartCell do
 
   @impl true
   def to_attrs(ctx) do
-    to_json(ctx.assigns.cell)
+    %{
+      "variable" => ctx.assigns.cell.variable,
+      "data" => ctx.assigns.cell.data,
+      "options" => ctx.assigns.cell.options
+    }
   end
 
   @impl true
   def to_source(cell) do
-    variable = quoted_var(cell.variable)
-    data = Macro.escape(cell.data)
-    options = Macro.escape(cell.options)
+    variable = quoted_var(cell["variable"])
+    data = Macro.escape(cell["data"])
+    options = Macro.escape(cell["options"])
 
     quote do
       unquote(variable) =
@@ -90,10 +111,6 @@ defmodule KinoExcalidraw.SmartCell do
 
   defp quoted_var(string), do: {String.to_atom(string), [], nil}
 
-  defp to_json(%__MODULE__{} = cell) do
-    Map.take(cell, [:variable, :data, :options])
-  end
-
   defimpl Kino.Render do
     def to_livebook(_cell) do
       %{type: :ignored}

lib/kino/excalidraw/remote.ex

@@ -1,7 +1,7 @@
 defmodule KinoExcalidraw.MixProject do
   use Mix.Project
 
-  @version "0.1.0"
+  @version "0.2.0"
   @description "Excalidraw integration with Livebook"
 
   def project do