refactor(editor): table header & strip export done

Author: mydearxym

lib/helper/converter/editor_to_html/class.ex

@@ -47,6 +47,8 @@ defmodule Helper.Converter.EditorToHTML.Class do
       "table" => %{
         "wrapper" => "table-wrapper",
         "cell" => "table-cell",
+        "th_header" => "th_header",
+        "td_stripe" => "td_stripe",
         "align_center" => "align-center",
         "align_left" => "align-left",
         "align_right" => "align-right"

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

@@ -12,7 +12,8 @@ defmodule Helper.Converter.EditorToHTML.Frags.Table do
   def get_row(group_items) do
     tr_content =
       Enum.reduce(group_items, "", fn item, acc ->
-        acc <> frag(:td, item)
+        cell_type = if Map.has_key?(item, "isHeader"), do: :th, else: :td
+        acc <> frag(cell_type, item)
       end)
 
     ~s(<tr>#{tr_content}</tr>)
@@ -21,25 +22,37 @@ defmodule Helper.Converter.EditorToHTML.Frags.Table do
   def frag(:td, item) do
     %{
       "align" => align,
-      # "isZebraStripe" => isZebraStripe,
+      "isStripe" => is_stripe,
       "text" => text
     } = item
 
-    IO.inspect(Map.has_key?(item, "width"), label: "the width")
-
     cell_class = @class["cell"]
     align_class = get_align_class(align)
+    scripe_class = if is_stripe, do: @class["td_stripe"], else: ""
 
     case Map.has_key?(item, "width") do
       true ->
         style = ~s(width: #{Map.get(item, "width")})
-        ~s(<td style="#{style}"><div class="#{cell_class} #{align_class}">#{text}</div></td>)
+
+        ~s(<td class="#{scripe_class}" style="#{style}"><div class="#{cell_class} #{align_class}">#{
+          text
+        }</div></td>)
 
       false ->
-        ~s(<td><div class="#{cell_class} #{align_class}">#{text}</div></td>)
+        ~s(<td class="#{scripe_class}"><div class="#{cell_class} #{align_class}">#{text}</div></td>)
     end
   end
 
+  def frag(:th, item) do
+    %{"align" => align, "text" => text} = item
+
+    cell_class = @class["cell"]
+    align_class = get_align_class(align)
+    header_class = @class["th_header"]
+
+    ~s(<th class="#{header_class}"><div class="#{cell_class} #{align_class}">#{text}</div></th>)
+  end
+
   defp get_align_class("center"), do: @class["align_center"]
   defp get_align_class("right"), do: @class["align_right"]
   defp get_align_class(_), do: @class["align_left"]

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

@@ -250,6 +250,17 @@ td {
   vertical-align: inherit;
 }
 
+.th_header {
+  padding-top: 18px;
+  font-weight: bold;
+  border-bottom: 2px solid #dbdbe2 !important;
+  display: table-cell;
+  vertical-align: inherit;
+}
+.td_stripe {
+  background: #f7f7f7;
+}
+
 .article-viewer-wrapper table .table-cell {
   padding: 12px 10px;
   vertical-align: top;

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

@@ -68,7 +68,9 @@ defmodule Helper.Converter.EditorToHTML do
   defp parse_block(%{"type" => "table", "data" => data}) do
     %{"items" => items, "columnCount" => column_count} = data
 
-    groupped_items = Enum.split(items, column_count) |> Tuple.to_list()
+    # IO.inspect(column_count, label: "the fuck column_count")
+
+    groupped_items = Enum.chunk_every(items, column_count)
 
     rows_content =
       Enum.reduce(groupped_items, "", fn group, acc ->

lib/helper/converter/editor_to_html/index.ex

@@ -52,7 +52,8 @@ defmodule Helper.Converter.EditorToHTML.Validator.EditorSchema do
       item: %{
         "text" => [:string],
         "align" => [enum: @valid_table_align],
-        "isZebraStripe" => [:boolean],
+        "isStripe" => [:boolean],
+        "isHeader" => [:boolean, required: false],
         "width" => [:string, required: false]
       }
     ]

lib/helper/converter/editor_to_html/validator/editor_schema.ex

@@ -42,7 +42,8 @@ defmodule Helper.Converter.HtmlSanitizer do
     Meta.allow_tag_with_these_attributes("table", [])
     Meta.allow_tag_with_these_attributes("tbody", [])
     Meta.allow_tag_with_these_attributes("tr", [])
-    Meta.allow_tag_with_these_attributes("td", ["style"])
+    Meta.allow_tag_with_these_attributes("th", ["class"])
+    Meta.allow_tag_with_these_attributes("td", ["class", "style"])
 
     Meta.allow_tag_with_these_attributes("svg", [
       "t",

lib/helper/converter/html_sanitizer.ex

@@ -33,38 +33,63 @@ defmodule GroupherServer.Test.Helper.Converter.EditorToHTML.Table do
         set_items(4, [
           %{
             "align" => "left",
-            "isZebraStripe" => false,
+            "isHeader" => true,
+            "isStripe" => false,
+            "text" => "title 0"
+          },
+          %{
+            "align" => "center",
+            "isHeader" => true,
+            "isStripe" => false,
+            "text" => "title 1",
+            "width" => "180px"
+          },
+          %{
+            "align" => "right",
+            "isHeader" => true,
+            "isStripe" => false,
+            "text" => "title 2"
+          },
+          %{
+            "align" => "left",
+            "isHeader" => true,
+            "isStripe" => false,
+            "text" => "title 3"
+          },
+          %{
+            "align" => "left",
+            "isStripe" => false,
             "text" => "cell 0"
           },
           %{
             "align" => "center",
-            "isZebraStripe" => false,
+            "isStripe" => false,
             "text" => "cell 1",
             "width" => "180px"
           },
           %{
             "align" => "right",
-            "isZebraStripe" => false,
+            "isStripe" => false,
             "text" => "cell 2"
           },
           %{
             "align" => "left",
-            "isZebraStripe" => false,
+            "isStripe" => false,
             "text" => "cell 3"
           },
           %{
             "align" => "left",
-            "isZebraStripe" => false,
+            "isStripe" => true,
             "text" => "cell 4"
           },
           %{
             "align" => "left",
-            "isZebraStripe" => false,
+            "isStripe" => true,
             "text" => "cell 5"
           },
           %{
             "align" => "left",
-            "isZebraStripe" => false,
+            "isStripe" => true,
             "text" => ""
           }
         ])