refactor(editor): add full frontend playground

mydearxym · mydearxym · commit 82bed1bd440c · 2021-02-20T22:14:32.000+08:00
diff --git a/lib/helper/converter/editor_to_html/frontend_test/index.html b/lib/helper/converter/editor_to_html/frontend_test/index.html
@@ -0,0 +1,18 @@
+<!doctype html>
+
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+
+  <title>The HTML5 Herald</title>
+  <meta name="description" content="The HTML5 Herald">
+  <meta name="author" content="SitePoint">
+
+  <link rel="stylesheet" href="./styles.css?v=1.0">
+  <div id="article"></div>
+</head>
+
+<body>
+  <script src="./script.js"></script>
+</body>
+</html>
diff --git a/lib/helper/converter/editor_to_html/frontend_test/script.js b/lib/helper/converter/editor_to_html/frontend_test/script.js
diff --git a/lib/helper/converter/editor_to_html/frontend_test/styles.css b/lib/helper/converter/editor_to_html/frontend_test/styles.css
@@ -0,0 +1,22 @@
+body {
+  border: 1px solid #ececec;
+  min-height: 80vh;
+  margin: 20px 5vw;
+}
+
+.article-viewer-wrapper {
+  position: relative;
+  max-width: 650px;
+
+  box-sizing: border-box;
+  z-index: 1;
+  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC,
+    Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei,
+    sans-serif;
+  font-size: 15px;
+  -webkit-font-smoothing: antialiased !important;
+}
+
+.article-viewer-wrapper .list-wrapper {
+  padding: 1.2em 0;
+}
diff --git a/lib/helper/converter/editor_to_html/index.ex b/lib/helper/converter/editor_to_html/index.ex
@@ -55,9 +55,14 @@ defmodule Helper.Converter.EditorToHTML do
   defp parse_block(%{"type" => "list", "data" => data}) do
     %{"items" => items, "mode" => mode} = data
 
-    Enum.reduce(items, "", fn item, acc ->
-      acc <> Frags.List.get_item(mode |> String.to_atom(), item)
-    end)
+    list_wrapper_class = get_in(@root_class, ["list", "wrapper"])
+
+    items_content =
+      Enum.reduce(items, "", fn item, acc ->
+        acc <> Frags.List.get_item(mode |> String.to_atom(), item)
+      end)
+
+    ~s(<div class="#{list_wrapper_class}">#{items_content}</div>)
   end
 
   # defp parse_block(%{"type" => "image", "data" => data}) do
diff --git a/test/helper/converter/editor_to_html_test/list_test.exs b/test/helper/converter/editor_to_html_test/list_test.exs
@@ -5,6 +5,7 @@ defmodule GroupherServer.Test.Helper.Converter.EditorToHTML.List do
 
   alias Helper.Converter.EditorToHTML, as: Parser
   alias Helper.Converter.EditorToHTML.Class
+  alias Helper.Utils
 
   @root_class Class.article()
   @class get_in(@root_class, ["list"])
@@ -46,8 +47,11 @@ defmodule GroupherServer.Test.Helper.Converter.EditorToHTML.List do
       {:ok, editor_string} = Jason.encode(@editor_json)
       {:ok, converted} = Parser.to_html(editor_string)
 
+      IO.inspect(converted, label: "the converted")
+
       checked_class = @class["checklist_checkbox_checked"]
-      assert converted |> String.split(checked_class) |> length() == 2
+
+      assert Utils.str_occurence(converted, checked_class) == 1
     end
 
     @editor_json %{
