Add "Copy to Markdown" button

[dbernheisel]

Added the code frames to the debugger Markdown template. This is borrowed from the HTML template but reformatted for markdown. Unfortunately required some arg drilling - if you have a suggestion on avoiding that I'll be happy to rework it.

Add Copy to markdown button

When clicked it changes to a success message. Reverts to original in 5 seconds.

Video Demo
https://user-images.githubusercontent.com/643967/179085428-bf973028-748a-403c-8a0d-97c4a2b07dd4.mov

Sample Markdown output

# RuntimeError at GET /

Exception:

    ** (RuntimeError) boom
        (ejecto 0.1.0) lib/ejecto_web/live/home_live.ex:6: EjectoWeb.HomeLive.mount/3
        (phoenix_live_view 0.17.11) lib/phoenix_live_view/utils.ex:301: anonymous fn/6 in Phoenix.LiveView.Utils.maybe_call_live_view_mount!/5
        (telemetry 1.1.0) /home/dbern/ejecto/deps/telemetry/src/telemetry.erl:320: :telemetry.span/3
        (phoenix_live_view 0.17.11) lib/phoenix_live_view/static.ex:270: Phoenix.LiveView.Static.call_mount_and_handle_params!/5
        (phoenix_live_view 0.17.11) lib/phoenix_live_view/static.ex:110: Phoenix.LiveView.Static.render/3
        (phoenix_live_view 0.17.11) lib/phoenix_live_view/controller.ex:39: Phoenix.LiveView.Controller.live_render/3
        (phoenix 1.6.11) lib/phoenix/router.ex:354: Phoenix.Router.__call__/2
        (ejecto 0.1.0) lib/ejecto_web/endpoint.ex:1: EjectoWeb.Endpoint.plug_builder_call/2
        (ejecto 0.1.0) lib/plug/debugger.ex:136: EjectoWeb.Endpoint."call (overridable 3)"/2
        (ejecto 0.1.0) lib/ejecto_web/endpoint.ex:1: EjectoWeb.Endpoint.call/2
        (phoenix 1.6.11) lib/phoenix/endpoint/cowboy2_handler.ex:54: Phoenix.Endpoint.Cowboy2Handler.init/4
        (cowboy 2.9.0) /home/dbern/ejecto/deps/cowboy/src/cowboy_handler.erl:37: :cowboy_handler.execute/2
        (cowboy 2.9.0) /home/dbern/ejecto/deps/cowboy/src/cowboy_stream_h.erl:306: :cowboy_stream_h.execute/3
        (cowboy 2.9.0) /home/dbern/ejecto/deps/cowboy/src/cowboy_stream_h.erl:295: :cowboy_stream_h.request_process/3
        (stdlib 4.0.1) proc_lib.erl:240: :proc_lib.init_p_do_apply/3
    

Code:

`lib/ejecto_web/live/home_live.ex`

    1   defmodule EjectoWeb.HomeLive do
    2     use EjectoWeb, :live_view
    3   
    4     def mount(_params, _session, socket) do
    5       if connected?(socket), do: {:ok, socket}
    6>      raise "boom"
    7       {:ok, socket}
    8     end
    9   
    10     def render(assigns) do
    11       ~H"""
    
`lib/phoenix_live_view/utils.ex`

    296           %{socket: socket, params: params, session: session, uri: uri},
    297           fn ->
    298             socket =
    299               case Lifecycle.mount(params, session, socket) do
    300                 {:cont, %Socket{} = socket} when exported? ->
    301>                  view.mount(params, session, socket)
    302   
    303                 {_, %Socket{} = socket} ->
    304                   {:ok, socket}
    305               end
    306               |> handle_mount_result!({:mount, 3, view})
    
`/home/dbern/ejecto/deps/telemetry/src/telemetry.erl`

    315           EventPrefix ++ [start],
    316           #{monotonic_time => StartTime, system_time => erlang:system_time()},
    317           merge_ctx(StartMetadata, DefaultCtx)
    318       ),
    319   
    320>      try {_, #{}} = SpanFunction() of
    321         {Result, StopMetadata} ->
    322             StopTime = erlang:monotonic_time(),
    323             execute(
    324                 EventPrefix ++ [stop],
    325                 #{duration => StopTime - StartTime, monotonic_time => StopTime},
    
`lib/phoenix_live_view/static.ex`

    265   
    266     defp call_mount_and_handle_params!(socket, view, session, params, uri) do
    267       mount_params = if socket.router, do: params, else: :not_mounted_at_router
    268   
    269       socket
    270>      |> Utils.maybe_call_live_view_mount!(view, mount_params, session, uri)
    271       |> mount_handle_params(view, params, uri)
    272       |> case do
    273         {:noreply, %Socket{redirected: {:live, _, _}} = socket} ->
    274           {:stop, socket}
    275   
    
`lib/phoenix_live_view/static.ex`

    105           action,
    106           flash,
    107           host_uri
    108         )
    109   
    110>      case call_mount_and_handle_params!(socket, view, mount_session, conn.params, request_url) do
    111         {:ok, socket} ->
    112           data_attrs = [
    113             phx_session: sign_root_session(socket, router, view, to_sign_session, live_session),
    114             phx_static: sign_static_token(socket)
    115           ]
    
`lib/phoenix_live_view/controller.ex`

    34           end
    35         end
    36   
    37     """
    38     def live_render(%Plug.Conn{} = conn, view, opts \\ []) do
    39>      case LiveView.Static.render(conn, view, opts) do
    40         {:ok, content, socket_assigns} ->
    41           conn
    42           |> Phoenix.Controller.put_view(LiveView.Static)
    43           |> Phoenix.Controller.render(
    44             "template.html",
    
`lib/phoenix/router.ex`

    349           metadata = %{metadata | conn: halted_conn}
    350           :telemetry.execute([:phoenix, :router_dispatch, :stop], measurements, metadata)
    351           halted_conn
    352         %Plug.Conn{} = piped_conn ->
    353           try do
    354>            plug.call(piped_conn, plug.init(opts))
    355           else
    356             conn ->
    357               measurements = %{duration: System.monotonic_time() - start}
    358               metadata = %{metadata | conn: conn}
    359               :telemetry.execute([:phoenix, :router_dispatch, :stop], measurements, metadata)
    
`lib/ejecto_web/endpoint.ex`

    1>  defmodule EjectoWeb.Endpoint do
    2     use Phoenix.Endpoint, otp_app: :ejecto
    3   
    4     # The session will be stored in the cookie and signed,
    5     # this means its contents can be read but not tampered with.
    6     # Set :encryption_salt if you would also like to encrypt it.
    
`lib/plug/debugger.ex`

    No code available.

`lib/ejecto_web/endpoint.ex`

    1>  defmodule EjectoWeb.Endpoint do
    2     use Phoenix.Endpoint, otp_app: :ejecto
    3   
    4     # The session will be stored in the cookie and signed,
    5     # this means its contents can be read but not tampered with.
    6     # Set :encryption_salt if you would also like to encrypt it.
    
`lib/phoenix/endpoint/cowboy2_handler.ex`

    49             end
    50   
    51           {:plug, conn, handler, opts} ->
    52             %{adapter: {@connection, req}} =
    53               conn
    54>              |> handler.call(opts)
    55               |> maybe_send(handler)
    56   
    57             {:ok, req, {handler, opts}}
    58         end
    59       catch
    
`/home/dbern/ejecto/deps/cowboy/src/cowboy_handler.erl`

    32   -optional_callbacks([terminate/3]).
    33   
    34   -spec execute(Req, Env) -> {ok, Req, Env}
    35   	when Req::cowboy_req:req(), Env::cowboy_middleware:env().
    36   execute(Req, Env=#{handler := Handler, handler_opts := HandlerOpts}) ->
    37>  	try Handler:init(Req, HandlerOpts) of
    38   		{ok, Req2, State} ->
    39   			Result = terminate(normal, Req2, State, Handler),
    40   			{ok, Req2, Env#{result => Result}};
    41   		{Mod, Req2, State} ->
    42   			Mod:upgrade(Req2, Env, Handler, State);
    
`/home/dbern/ejecto/deps/cowboy/src/cowboy_stream_h.erl`

    301   	end.
    302   
    303   execute(_, _, []) ->
    304   	ok;
    305   execute(Req, Env, [Middleware|Tail]) ->
    306>  	case Middleware:execute(Req, Env) of
    307   		{ok, Req2, Env2} ->
    308   			execute(Req2, Env2, Tail);
    309   		{suspend, Module, Function, Args} ->
    310   			proc_lib:hibernate(?MODULE, resume, [Env, Tail, Module, Function, Args]);
    311   		{stop, _Req2} ->
    
`/home/dbern/ejecto/deps/cowboy/src/cowboy_stream_h.erl`

    290   %% to simplify the debugging of errors. The proc_lib library
    291   %% already adds the stacktrace to other types of exceptions.
    292   -spec request_process(cowboy_req:req(), cowboy_middleware:env(), [module()]) -> ok.
    293   request_process(Req, Env, Middlewares) ->
    294   	try
    295>  		execute(Req, Env, Middlewares)
    296   	catch
    297   		exit:Reason={shutdown, _}:Stacktrace ->
    298   			erlang:raise(exit, Reason, Stacktrace);
    299   		exit:Reason:Stacktrace when Reason =/= normal, Reason =/= shutdown ->
    300   			erlang:raise(exit, {Reason, Stacktrace}, Stacktrace)
    
`proc_lib.erl`

    No code available.


## Connection details

### Params

    %{}

### Request info

  * URI: http://192.168.86.59:4000/
  * Query string: 

### Headers
  
  * accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
  * accept-encoding: gzip, deflate
  * accept-language: en-US,en;q=0.9
  * cache-control: max-age=0
  * connection: keep-alive
  * cookie: _ejecto_key=SFMyNTY.g3QAAAABbQAAAAtfY3NyZl90b2tlbm0AAAAYc0d6MDl0czdUaUZWUHJKQjlNRWJONjJT.sKzUbyldKTGwL1CuSMjr7PWMzsVXjw6Jh13luyPzK-c
  * dnt: 1
  * host: 192.168.86.59:4000
  * referer: http://192.168.86.59:4000/
  * upgrade-insecure-requests: 1
  * user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

### Session

    %{"_csrf_token" => "sGz09ts7TiFVPrJB9MEbN62S"}

Example of bad match

# FunctionClauseError at GET /

Exception:

    ** (FunctionClauseError) no function clause matching in EjectoWeb.HomeLive.boom/2
        (ejecto 0.1.0) lib/ejecto_web/live/home_live.ex:10: EjectoWeb.HomeLive.boom(:fail, :foo)
        (phoenix_live_view 0.17.11) lib/phoenix_live_view/utils.ex:301: anonymous fn/6 in Phoenix.LiveView.Utils.maybe_call_live_view_mount!/5
        (telemetry 1.1.0) /home/dbern/ejecto/deps/telemetry/src/telemetry.erl:320: :telemetry.span/3
        (phoenix_live_view 0.17.11) lib/phoenix_live_view/static.ex:270: Phoenix.LiveView.Static.call_mount_and_handle_params!/5
        (phoenix_live_view 0.17.11) lib/phoenix_live_view/static.ex:110: Phoenix.LiveView.Static.render/3
        (phoenix_live_view 0.17.11) lib/phoenix_live_view/controller.ex:39: Phoenix.LiveView.Controller.live_render/3
        (phoenix 1.6.11) lib/phoenix/router.ex:354: Phoenix.Router.__call__/2
        (ejecto 0.1.0) lib/ejecto_web/endpoint.ex:1: EjectoWeb.Endpoint.plug_builder_call/2
        (ejecto 0.1.0) lib/plug/debugger.ex:136: EjectoWeb.Endpoint."call (overridable 3)"/2
        (ejecto 0.1.0) lib/ejecto_web/endpoint.ex:1: EjectoWeb.Endpoint.call/2
        (phoenix 1.6.11) lib/phoenix/endpoint/cowboy2_handler.ex:54: Phoenix.Endpoint.Cowboy2Handler.init/4
        (cowboy 2.9.0) /home/dbern/ejecto/deps/cowboy/src/cowboy_handler.erl:37: :cowboy_handler.execute/2
        (cowboy 2.9.0) /home/dbern/ejecto/deps/cowboy/src/cowboy_stream_h.erl:306: :cowboy_stream_h.execute/3
        (cowboy 2.9.0) /home/dbern/ejecto/deps/cowboy/src/cowboy_stream_h.erl:295: :cowboy_stream_h.request_process/3
        (stdlib 4.0.1) proc_lib.erl:240: :proc_lib.init_p_do_apply/3
    

Code:

`lib/ejecto_web/live/home_live.ex`

    5       if connected?(socket), do: {:ok, socket}
    6       boom(:fail, :foo)
    7       {:ok, socket}
    8     end
    9   
    10>    defp boom(nil, :foo), do: :wat
    11     defp boom(1, :foo), do: :wat
    12     defp boom("a", :foo), do: :wat
    13     defp boom([], :foo), do: :wat
    14   
    15     def render(assigns) do
    
  Called with 2 arguments

  * `:fail`
  * `:foo`
  
  Attempted function clauses (showing 4 out of 4)

     defp boom(nil, :foo)
     defp boom(1, :foo)
     defp boom("a", :foo)
     defp boom([], :foo)
    

`lib/phoenix_live_view/utils.ex`
...

[dbernheisel]

I just realized I used heroicons which are MIT licensed. Either we need to include their license or replace with license-free icons or remove the icons.

[josevalim]

It looks great @dbernheisel, thank you!

Regarding the button, I think you can remove the border and background around the button, and keep it as a text as in "Show only app frames". The text can be in regular text color or the primary color (as you did), your call.

About the icon, we can go with UXWing, such as: https://uxwing.com/copy-icon/

[dbernheisel]

Updated the icon and style. I also aligned the checkbox label and input.

[josevalim]

Thank you! One last nitpick: can you please vertically align the text with "Show only app frames" and make it the same font color? That's what I meant by "regular text color" but apparently "Show only app frames" is not regular text color. Sorry about that.

[dbernheisel]

adjusted the style. Good calls, np about the nitpicks as surely someone would come after me and fix these little visual annoyances :) and happy to get them now.

[josevalim]

💚 💙 💜 💛 ❤️