Embed Markdown editor and viewer in Phoenix LiveView app

Phoenix Forum Questions / Help
,
1

I am writing a Phoenix LiveView app where I want to embed both a markdown editor and viewer in a LiveView. Any recommendations on existing “tools” out there that might be suitable?

2

For viewing you just need a library which converts markdown to HTML, eg: Earmark — Earmark v1.4.37
For editing you need a WYSIWYG editor which supports markdown, here are some examples of integrating a couple of those with LiveView hooks:
bonfire_editor_ck/extension.js at main · bonfire-networks/bonfire_editor_ck · GitHub
CommonsPub-Server/editor_prosemirror.js at flavour/bonfire · bonfire-networks/CommonsPub-Server · GitHub

1 Like
3

Just had to do this as well, and I’ll add to the previous response. I wanted to make sure only a limited set of html could ultimately be used, so I also brought in the :html_sanitize_ex library (API Reference — html_sanitize_ex v1.4.2) for use when showing user generated md.

Internally, for myself, I also used :phoenix_markdown (PhoenixMarkdown – phoenix_markdown v1.0.3)

Here is an example of how I show user generated md:

  attr(:input, :string, required: true)
  attr(:class, :string, default: "")

  def markdown(assigns) do
    ~H"""
    <div class="h-full flex flex-col justify-center items-center dark:text-white descendant:dark:text-white">
      <article class={[
        "prose dark:prose-invert prose-a:text-blue-600 descendant:dark:text-white",
        @class
      ]}>
        <%= Earmark.as_html!(@input, escape: false, inner_html: true, compact_output: true)
        |> HtmlSanitizeEx.basic_html()
        |> Phoenix.HTML.raw() %>
      </article>
    </div>
    """
  end
1 Like