Full Markdown support in LiveView Editor #64 for dwyl/mvp#141

nelsonic · Jul 31, 2023 · 927e04b · 927e04b
1 parent 5eeac96
commit 927e04b
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 33 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -49,8 +49,6 @@ jobs:
       run: mix coveralls.json
       env:
         MIX_ENV: test
-        AUTH_API_KEY: ${{ secrets.AUTH_API_KEY }}
-        ENCRYPTION_KEYS: ${{ secrets.ENCRYPTION_KEYS }}
     - name: Upload coverage to Codecov
       uses: codecov/codecov-action@v1
 

diff --git a/assets/css/markdown.css b/assets/css/markdown.css
@@ -72,7 +72,7 @@
   }
 
   .markdown a {
-    @apply font-medium underline text-blue-600 hover:no-underline;
+    @apply font-medium text-cyan-600 hover:text-blue-600 hover:underline;
   }
 
   .markdown img {

diff --git a/lib/amemo_web/components/layouts/root.html.heex b/lib/amemo_web/components/layouts/root.html.heex
@@ -4,12 +4,14 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="csrf-token" content={get_csrf_token()} />
-    <.live_title suffix=" · Phoenix Framework">
+    <.live_title suffix=" Markdown Editor">
       <%= assigns[:page_title] || "Amemo" %>
     </.live_title>
     <link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />
     <script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
     </script>
+    <!-- Open ALL Links in New Tab: stackoverflow.com/a/24428525 -->
+    <base target="_blank">
   </head>
   <body class="bg-white antialiased">
     <%= @inner_content %>

diff --git a/lib/amemo_web/live/editor.ex b/lib/amemo_web/live/editor.ex
@@ -2,49 +2,53 @@ defmodule AmemoWeb.Editor do
   use AmemoWeb, :live_view
 
   def mount(_params, _session, socket) do
-    {:ok, assign(socket, :val, 0)}
-  end
-
-  def handle_event("inc", _, socket) do
-    {:noreply, update(socket, :val, &(&1 + 1))}
-  end
-
-  def handle_event("dec", _, socket) do
-    {:noreply, update(socket, :val, &(&1 - 1))}
-  end
-
-  def render(assigns) do
     md = """
-    ## Hello World!
+    # Hello World!
 
-    This is my text
+    Type some text ...
     [link](https://mvp.fly.dev/)
     https://mvp.fly.dev/
     """
+    socket = assign(socket, :md, md)
+    {:ok, assign(socket, :val, 0)}
+  end
 
+  def handle_event("render", %{"text" => text}, socket) do
+    dbg(text)
+    {:noreply, assign(socket, :md, text)}
+  end
 
+  def render(assigns) do
     ~H"""
-    <div class="markdown">
-    <%= Phoenix.HTML.raw(to_html(md)) %>
+    <form action="#" phx-change="render" phx-submit="render">
+      <textarea rows="5"
+        class="w-full my-2 py-1 px-1 text-slate-800 text-2xl
+          bg-white bg-clip-padding
+          resize-none hover:resize-y focus:resize-y
+          transition ease-in-out
+          border border-b border-slate-200
+          focus:border-none focus:outline-none
+          "
+        name="text"
+        id="text"
+        phx-debounce="100"
+        placeholder="Capture what is on your mind ..."
+      >
+        <%= @md %>
+      </textarea>
+    </form>
+
+    <br /> <hr /> <br />
 
-    <h1 class="text-4xl font-bold text-center"> The count is: <%= @val %> </h1>
-     <.button phx-click="dec">-</.button>
-     <.button phx-click="inc">+</.button>
-     </div>
+    <div class="markdown">
+      <%= Phoenix.HTML.raw(to_html(String.trim(@md))) %>
+    </div>
     """
   end
 
   def to_html(markdown) do
     markdown
-    |> Earmark.as_html!(earmark_options())
+    |> Earmark.as_html!()
     |> HtmlSanitizeEx.html5()
   end
-
-
-  defp earmark_options() do
-    %Earmark.Options{
-      code_class_prefix: "lang-",
-      smartypants: false
-    }
-  end
 end