Make image a block item instead of a button in the Markdown editor (#1439)

Co-authored-by: Jonatan Kłosko <jonatanklosko@gmail.com>

lib/livebook_web/live/session_live.ex

@@ -352,8 +352,8 @@ defmodule LivebookWeb.SessionLive do
           id="cell-upload"
           session={@session}
           return_to={@self_path}
-          cell={@cell}
           uploads={@uploads}
+          cell_upload_metadata={@cell_upload_metadata}
         />
       </.modal>
     <% end %>
@@ -890,11 +890,22 @@ defmodule LivebookWeb.SessionLive do
 
   @impl true
   def handle_params(%{"cell_id" => cell_id}, _url, socket)
-      when socket.assigns.live_action in [:cell_settings, :cell_upload] do
+      when socket.assigns.live_action == :cell_settings do
     {:ok, cell, _} = Notebook.fetch_cell_and_section(socket.private.data.notebook, cell_id)
     {:noreply, assign(socket, cell: cell)}
   end
 
+  def handle_params(%{"section_id" => section_id, "cell_id" => cell_id}, _url, socket)
+      when socket.assigns.live_action == :cell_upload do
+    cell_id =
+      case cell_id do
+        "" -> nil
+        id -> id
+      end
+
+    {:noreply, assign(socket, cell_upload_metadata: %{section_id: section_id, cell_id: cell_id})}
+  end
+
   def handle_params(%{"section_id" => section_id}, _url, socket)
       when socket.assigns.live_action == :delete_section do
     {:ok, section} = Notebook.fetch_section(socket.private.data.notebook, section_id)
@@ -1425,6 +1436,17 @@ defmodule LivebookWeb.SessionLive do
     {:noreply, socket}
   end
 
+  def handle_info({:cell_upload_complete, metadata, url}, socket) do
+    params = %{
+      "type" => "image",
+      "section_id" => metadata.section_id,
+      "cell_id" => metadata.cell_id,
+      "url" => url
+    }
+
+    handle_event("insert_cell_below", params, socket)
+  end
+
   def handle_info({:set_secret, secret}, socket) do
     livebook_secrets = Map.put(socket.assigns.livebook_secrets, secret.name, secret.value)
 
@@ -1795,6 +1817,12 @@ defmodule LivebookWeb.SessionLive do
     {:markdown, %{source: source}}
   end
 
+  defp cell_type_and_attrs_from_params(%{"type" => "image", "url" => url}) do
+    source = "![](#{url})"
+
+    {:markdown, %{source: source}}
+  end
+
   defp section_with_next_index(notebook, section_id, cell_id)
 
   defp section_with_next_index(notebook, section_id, nil) do

lib/livebook_web/live/session_live/cell_component.ex

@@ -28,7 +28,6 @@ defmodule LivebookWeb.SessionLive.CellComponent do
     <.cell_actions>
       <:secondary>
         <.enable_insert_mode_button />
-        <.insert_image_button cell_id={@cell_view.id} session_id={@session_id} socket={@socket} />
         <.cell_link_button cell_id={@cell_view.id} />
         <.move_cell_up_button cell_id={@cell_view.id} />
         <.move_cell_down_button cell_id={@cell_view.id} />
@@ -381,19 +380,6 @@ defmodule LivebookWeb.SessionLive.CellComponent do
     """
   end
 
-  defp insert_image_button(assigns) do
-    ~H"""
-    <span class="tooltip top" data-tooltip="Insert image" data-el-insert-image-button>
-      <%= live_patch to: Routes.session_path(@socket, :cell_upload, @session_id, @cell_id),
-            class: "icon-button",
-            aria_label: "insert image",
-            role: "button" do %>
-        <.remix_icon icon="image-add-line" class="text-xl" />
-      <% end %>
-    </span>
-    """
-  end
-
   defp toggle_source_button(assigns) do
     ~H"""
     <span class="tooltip top" data-tooltip="Toggle source" data-el-toggle-source-button>

lib/livebook_web/live/session_live/cell_upload_component.ex

@@ -92,12 +92,9 @@ defmodule LivebookWeb.SessionLive.CellUploadComponent do
     end)
     |> case do
       [{:ok, filename}] ->
-        src_path = "images/#{URI.encode(filename, &URI.char_unreserved?/1)}"
+        url = "images/#{URI.encode(filename, &URI.char_unreserved?/1)}"
-
+        send(self(), {:cell_upload_complete, socket.assigns.cell_upload_metadata, url})
-        {:noreply,
+        {:noreply, push_patch(socket, to: socket.assigns.return_to)}
-         socket
-         |> push_patch(to: socket.assigns.return_to)
-         |> push_event("cell_upload", %{cell_id: socket.assigns.cell.id, url: src_path})}
 
       [{:error, message}] ->
         {:noreply, assign(socket, error_message: message)}

lib/livebook_web/live/session_live/insert_buttons_component.ex

@@ -59,6 +59,13 @@ defmodule LivebookWeb.SessionLive.InsertButtonsComponent do
               <.remix_icon icon="organization-chart" />
               <span class="font-medium">Diagram</span>
             </button>
+            <%= live_patch to: Routes.session_path(@socket, :cell_upload, @session_id, section_id: @section_id, cell_id: @cell_id),
+                  class: "menu-item text-gray-500",
+                  aria_label: "insert image",
+                  role: "menuitem" do %>
+              <.remix_icon icon="image-add-line" />
+              <span class="font-medium">Image</span>
+            <% end %>
           </:content>
         </.menu>
         <%= cond do %>

lib/livebook_web/live/session_live/section_component.ex

@@ -133,6 +133,7 @@ defmodule LivebookWeb.SessionLive.SectionComponent do
             runtime={@runtime}
             section_id={@section_view.id}
             cell_id={nil}
+            session_id={@session_id}
           />
           <%= for {cell_view, index} <- Enum.with_index(@section_view.cell_views) do %>
             <.live_component
@@ -152,6 +153,7 @@ defmodule LivebookWeb.SessionLive.SectionComponent do
               runtime={@runtime}
               section_id={@section_view.id}
               cell_id={cell_view.id}
+              session_id={@session_id}
             />
           <% end %>
         </div>

lib/livebook_web/router.ex

@@ -82,7 +82,7 @@ defmodule LivebookWeb.Router do
       get "/sessions/:id/export/download/:format", SessionController, :download_source
       live "/sessions/:id/export/:tab", SessionLive, :export
       live "/sessions/:id/cell-settings/:cell_id", SessionLive, :cell_settings
-      live "/sessions/:id/cell-upload/:cell_id", SessionLive, :cell_upload
+      live "/sessions/:id/cell-upload", SessionLive, :cell_upload
       live "/sessions/:id/delete-section/:section_id", SessionLive, :delete_section
       live "/sessions/:id/package-search", SessionLive, :package_search
       get "/sessions/:id/images/:image", SessionController, :show_image