Merge pull request #284 from coderplanets/editor-header

refactor(editor): add header export

Author: mydearxym

lib/helper/converter/editor_to_html/class.ex

@@ -18,6 +18,7 @@ defmodule Helper.Converter.EditorToHTML.Class do
       # header
       "header" => %{
         "wrapper" => "header-wrapper",
+        "header" => "header",
         "eyebrow_title" => "eyebrow-title",
         "footer_title" => "footer-title"
       },

lib/helper/converter/editor_to_html/frags/header.ex

@@ -15,12 +15,13 @@ defmodule Helper.Converter.EditorToHTML.Frags.Header do
     %{"text" => text, "level" => level} = data
 
     wrapper_class = @class["wrapper"]
+    header_class = @class["header"]
     eyebrow_class = @class["eyebrow_title"]
     footer_class = @class["footer_title"]
 
     ~s(<div class="#{wrapper_class}">
         <div class="#{eyebrow_class}">#{eyebrow_title}</div>
-        <h#{level}>#{text}</h#{level}>
+        <h#{level} class="#{header_class}">#{text}</h#{level}>
         <div class="#{footer_class}">#{footer_title}</div>
       </div>)
   end
@@ -29,22 +30,24 @@ defmodule Helper.Converter.EditorToHTML.Frags.Header do
     %{"text" => text, "level" => level} = data
 
     wrapper_class = @class["wrapper"]
+    header_class = @class["header"]
     eyebrow_class = @class["eyebrow_title"]
 
     ~s(<div class="#{wrapper_class}">
         <div class="#{eyebrow_class}">#{eyebrow_title}</div>
-        <h#{level}>#{text}</h#{level}>
+        <h#{level} class="#{header_class}">#{text}</h#{level}>
       </div>)
   end
 
   def get(%{"footerTitle" => footer_title} = data) do
     %{"text" => text, "level" => level} = data
 
     wrapper_class = @class["wrapper"]
+    header_class = @class["header"]
     footer_class = @class["footer_title"]
 
     ~s(<div class="#{wrapper_class}">
-        <h#{level}>#{text}</h#{level}>
+        <h#{level} class="#{header_class}">#{text}</h#{level}>
         <div class="#{footer_class}">#{footer_title}</div>
       </div>)
   end

lib/helper/converter/editor_to_html/frontend_test/script.js

@@ -23,6 +23,40 @@ body {
   max-height: 100%;
 }
 
+/* header block */
+
+.article-viewer-wrapper .header-wrapper {
+}
+
+.article-viewer-wrapper .header {
+  margin-top: 8px;
+  margin-bottom: 8px;
+}
+
+.article-viewer-wrapper .header-wrapper h1 {
+  position: relative;
+  font-size: 28px;
+}
+
+.article-viewer-wrapper .eyebrow-title {
+  font-size: 16px;
+  margin-bottom: 5px;
+  margin-top: 20px;
+  line-height: 24px;
+  width: 100%;
+  color: grey;
+}
+
+.article-viewer-wrapper .footer-title {
+  font-size: 16px;
+  margin-top: 5px;
+  margin-bottom: 18px;
+  line-height: 24px;
+  width: 100%;
+  color: grey;
+}
+
+/* list block */
 .article-viewer-wrapper .list-wrapper {
   padding: 1.2em 0;
 }
@@ -168,3 +202,5 @@ body {
   color: #526c73;
   word-break: break-all;
 }
+
+/* list block end */

lib/helper/converter/editor_to_html/frontend_test/styles.css

@@ -5,8 +5,13 @@ defmodule GroupherServer.Test.Helper.Converter.EditorToHTML.Header do
 
   alias Helper.Converter.EditorToHTML, as: Parser
   alias Helper.Converter.EditorToHTML.{Class, Frags}
+  alias Helper.Utils
 
   @root_class Class.article()
+  @class get_in(@root_class, ["header"])
+
+  @eyebrow_class @class["eyebrow_title"]
+  @footer_class @class["footer_title"]
 
   describe "[header block unit]" do
     @editor_json %{
@@ -36,7 +41,7 @@ defmodule GroupherServer.Test.Helper.Converter.EditorToHTML.Header do
       ],
       "version" => "2.15.0"
     }
-    @tag :wip2
+    @tag :wip
     test "header parse should work" do
       {:ok, editor_string} = Jason.encode(@editor_json)
       {:ok, converted} = Parser.to_html(editor_string)
@@ -71,18 +76,12 @@ defmodule GroupherServer.Test.Helper.Converter.EditorToHTML.Header do
       {:ok, editor_string} = Jason.encode(@editor_json)
       {:ok, converted} = Parser.to_html(editor_string)
 
-      frag =
-        Frags.Header.get(%{
-          "text" => "header content",
-          "level" => 1,
-          "eyebrowTitle" => "eyebrow title content",
-          "footerTitle" => "footer title content"
-        })
-
-      viewer_class = @root_class["viewer"]
+      # header_class = @class["header"]
 
-      assert converted ==
-               ~s(<div class="#{viewer_class}">#{frag}</div>)
+      # IO.inspect(converted, label: "header converted")
+      # assert Utils.str_occurence(converted, header_class) == 1
+      assert Utils.str_occurence(converted, @eyebrow_class) == 1
+      assert Utils.str_occurence(converted, @footer_class) == 1
     end
 
     @editor_json %{
@@ -108,17 +107,8 @@ defmodule GroupherServer.Test.Helper.Converter.EditorToHTML.Header do
       {:ok, editor_string} = Jason.encode(json)
       {:ok, converted} = Parser.to_html(editor_string)
 
-      frag =
-        Frags.Header.get(%{
-          "text" => "header content",
-          "level" => 1,
-          "eyebrowTitle" => "eyebrow title content"
-        })
-
-      viewer_class = @root_class["viewer"]
-
-      assert converted ==
-               ~s(<div class="#{viewer_class}">#{frag}</div>)
+      assert Utils.str_occurence(converted, @eyebrow_class) == 1
+      assert Utils.str_occurence(converted, @footer_class) == 0
 
       json =
         Map.merge(@editor_json, %{
@@ -137,17 +127,10 @@ defmodule GroupherServer.Test.Helper.Converter.EditorToHTML.Header do
       {:ok, editor_string} = Jason.encode(json)
       {:ok, converted} = Parser.to_html(editor_string)
 
-      frag =
-        Frags.Header.get(%{
-          "text" => "header content",
-          "level" => 1,
-          "footerTitle" => "footer title content"
-        })
-
-      viewer_class = @root_class["viewer"]
+      IO.inspect(converted, label: "converted --")
 
-      assert converted ==
-               ~s(<div class="#{viewer_class}">#{frag}</div>)
+      assert Utils.str_occurence(converted, @eyebrow_class) == 0
+      assert Utils.str_occurence(converted, @footer_class) == 1
     end
 
     @tag :wip

test/helper/converter/editor_to_html_test/header_test.exs

@@ -64,7 +64,7 @@ defmodule GroupherServer.Test.Helper.Converter.EditorToHTML.List do
       assert Utils.str_occurence(converted, unorder_list_prefix_class) == 3
     end
 
-    @tag :wip2
+    @tag :wip
     test "basic order list parse should work" do
       editor_json =
         set_items("order_list", [