Packages
livebook
0.18.0
0.19.8
0.19.7
0.19.6
0.19.5
0.19.4
0.19.3
0.19.2
0.19.1
0.19.0
0.18.6
0.18.5
0.18.4
0.18.3
0.18.2
0.18.1
0.18.0
0.17.3
0.17.2
0.17.1
0.17.0
0.16.4
0.16.3
0.16.2
0.16.1
0.16.0
0.15.5
0.15.4
0.15.3
0.15.2
0.15.1
0.15.0
0.14.7
0.14.6
0.14.5
0.14.4
0.14.3
0.14.2
0.14.1
0.14.0
0.14.0-rc.1
0.14.0-rc.0
0.13.3
0.13.2
0.13.1
0.13.0
0.12.1
0.12.0
0.11.4
0.11.3
0.11.2
0.11.1
0.11.0
0.10.0
0.9.3
0.9.2
0.9.1
0.9.0
0.8.2
0.8.1
0.8.0
0.7.2
0.7.1
0.7.0
0.6.3
0.6.2
0.6.1
0.6.0
0.5.2
0.5.1
0.5.0
0.4.1
0.4.0
0.3.2
0.3.1
0.3.0
0.2.3
0.2.2
0.2.1
0.2.0
0.1.2
0.1.1
0.1.0
Automate code & data workflows with interactive notebooks
Current section
Files
Jump to
Current section
Files
lib/livebook_web/live/output/markdown_component.ex
defmodule LivebookWeb.Output.MarkdownComponent do
use LivebookWeb, :live_component
@impl true
def mount(socket) do
{:ok,
socket
|> assign(allowed_uri_schemes: Livebook.Config.allowed_uri_schemes(), initialized: false)
|> stream(:chunks, [])}
end
@impl true
def update(%{event: {:append, output}}, socket) do
{:ok, append_text(socket, output.text)}
end
def update(assigns, socket) do
{output, assigns} = Map.pop(assigns, :output)
socket = assign(socket, assigns)
if socket.assigns.initialized do
# After initialization, output text may be pruned and updates
# are sent as events instead
{:ok, socket}
else
{:ok,
socket
|> append_text(output.text)
|> assign(:initialized, true)}
end
end
defp append_text(socket, text) do
chunk = %{id: Livebook.Utils.random_long_id(), text: text}
stream_insert(socket, :chunks, chunk)
end
@impl true
def render(assigns) do
~H"""
<div
id={@id}
phx-hook="MarkdownRenderer"
data-p-base-path={hook_prop(~p"/sessions/#{@session_id}")}
data-p-allowed-uri-schemes={hook_prop(@allowed_uri_schemes)}
>
<div
data-template
id={"#{@id}-template"}
class="text-gray-700 whitespace-pre-wrap hidden"
phx-update="stream"
phx-no-format
><span :for={{dom_id, chunk}<- @streams.chunks} id={dom_id}>{chunk.text}</span></div>
<div data-content class="markdown" id={"#{@id}-content"} phx-update="ignore"></div>
</div>
"""
end
end