refactor(editor): basic table export done

Author: mydearxym

lib/helper/converter/editor_to_html/class.ex

@@ -43,6 +43,13 @@ defmodule Helper.Converter.EditorToHTML.Class do
         "indent_1" => "list-indent-1",
         "indent_2" => "list-indent-2",
         "indent_3" => "list-indent-3"
+      },
+      "table" => %{
+        "wrapper" => "table-wrapper",
+        "cell" => "table-cell",
+        "align_center" => "align-center",
+        "align_left" => "align-left",
+        "align_right" => "align-right"
       }
     }
   end

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

@@ -0,0 +1,46 @@
+defmodule Helper.Converter.EditorToHTML.Frags.Table do
+  @moduledoc """
+  parse editor.js's block fragments, use for test too
+
+  see https://editorjs.io/
+  """
+  alias Helper.Converter.EditorToHTML.Class
+  # alias Helper.Types, as: T
+
+  @class get_in(Class.article(), ["table"])
+
+  def get_row(group_items) do
+    tr_content =
+      Enum.reduce(group_items, "", fn item, acc ->
+        acc <> frag(:td, item)
+      end)
+
+    ~s(<tr>#{tr_content}</tr>)
+  end
+
+  def frag(:td, item) do
+    %{
+      "align" => align,
+      # "isZebraStripe" => isZebraStripe,
+      "text" => text
+    } = item
+
+    IO.inspect(Map.has_key?(item, "width"), label: "the width")
+
+    cell_class = @class["cell"]
+    align_class = get_align_class(align)
+
+    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>)
+
+      false ->
+        ~s(<td><div class="#{cell_class} #{align_class}">#{text}</div></td>)
+    end
+  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"]
+end

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

@@ -204,3 +204,65 @@ body {
 }
 
 /* list block end */
+
+/* table block */
+.article-viewer-wrapper table {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: fixed;
+  border-spacing: 0;
+  box-sizing: border-box;
+
+  display: table;
+  text-indent: initial;
+  white-space: normal;
+  line-height: normal;
+  font-weight: normal;
+  font-size: medium;
+  font-style: normal;
+  color: -internal-quirk-inherit;
+  text-align: start;
+  border-color: grey;
+  font-variant: normal;
+}
+
+.article-viewer-wrapper tbody {
+  display: table-row-group;
+  vertical-align: middle;
+  border-color: inherit;
+}
+
+.article-viewer-wrapper tr {
+  display: table-row;
+  vertical-align: inherit;
+  border-color: inherit;
+}
+
+.article-viewer-wrapper table tbody tr th,
+table td {
+  position: relative;
+  border: 1px solid #dbdbe2;
+  font-size: 15px;
+}
+
+td {
+  display: table-cell;
+  vertical-align: inherit;
+}
+
+.article-viewer-wrapper table .table-cell {
+  padding: 12px 10px;
+  vertical-align: top;
+}
+
+.article-viewer-wrapper table .align-left {
+  text-align: left;
+}
+.article-viewer-wrapper table .align-center {
+  text-align: center;
+}
+.article-viewer-wrapper table .align-right {
+  text-align: right;
+}
+
+/* table block end */

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

@@ -65,6 +65,27 @@ defmodule Helper.Converter.EditorToHTML do
     ~s(<div class="#{list_wrapper_class}">#{items_content}</div>)
   end
 
+  defp parse_block(%{"type" => "table", "data" => data}) do
+    %{"items" => items, "columnCount" => column_count} = data
+
+    groupped_items = Enum.split(items, column_count) |> Tuple.to_list()
+
+    rows_content =
+      Enum.reduce(groupped_items, "", fn group, acc ->
+        acc <> Frags.Table.get_row(group)
+      end)
+
+    table_wrapper_class = get_in(@root_class, ["table", "wrapper"])
+
+    ~s(<div class="#{table_wrapper_class}">
+         <table>
+           <tbody>
+             #{rows_content}
+           </tbody>
+         </table>
+       </div>)
+  end
+
   # defp parse_block(%{"type" => "image", "data" => data}) do
   #   url = get_in(data, ["file", "url"])
 

lib/helper/converter/editor_to_html/index.ex

@@ -9,6 +9,9 @@ defmodule Helper.Converter.EditorToHTML.Validator.EditorSchema do
   @valid_list_label_type ["green", "red", "warn", "default"]
   @valid_list_indent [0, 1, 2, 3]
 
+  # table
+  @valid_table_align ["left", "center", "right"]
+
   def get("editor") do
     %{
       "time" => [:number],
@@ -43,6 +46,18 @@ defmodule Helper.Converter.EditorToHTML.Validator.EditorSchema do
     ]
   end
 
+  def get("table") do
+    [
+      parent: %{"columnCount" => [:number], "items" => [:list]},
+      item: %{
+        "text" => [:string],
+        "align" => [enum: @valid_table_align],
+        "isZebraStripe" => [:boolean],
+        "width" => [:string, required: false]
+      }
+    ]
+  end
+
   def get(_) do
     %{}
   end

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

@@ -8,9 +8,10 @@ defmodule Helper.Converter.EditorToHTML.Validator do
 
   # blocks with no children items
   @simple_blocks ["header", "paragraph"]
-  # blocks with "mode" and "items" fields
-  @complex_blocks ["list"]
+  # blocks with "items" fields
+  @complex_blocks ["list", "table"]
 
+  @spec is_valid(map) :: {:error, map} | {:ok, :pass}
   def is_valid(data) when is_map(data) do
     with {:ok, _} <- validate_editor_fmt(data),
          blocks <- Map.get(data, "blocks") do
@@ -82,7 +83,10 @@ defmodule Helper.Converter.EditorToHTML.Validator do
 
   defp validate_with(block, parent_schema, item_schema, data) do
     with {:ok, _} <- validate_with(block, parent_schema, data),
-         %{"mode" => mode, "items" => items} <- data do
+         %{"items" => items} <- data do
+      # most block with items will have mode field, if not, just ignore
+      mode = Map.get(data, "mode", "")
+
       Enum.each(items, fn item ->
         validate_with("#{block}(#{mode})", item_schema, item)
       end)

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

@@ -38,6 +38,12 @@ defmodule Helper.Converter.HtmlSanitizer do
     Meta.allow_tag_with_these_attributes("ol", ["class"])
     Meta.allow_tag_with_these_attributes("li", ["class"])
 
+    # table
+    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("svg", [
       "t",
       "p-id",

lib/helper/converter/html_sanitizer.ex

@@ -71,7 +71,7 @@ defmodule GroupherServer.Test.Helper.Converter.EditorToHTML.Header do
       ],
       "version" => "2.15.0"
     }
-    @tag :wip2
+    @tag :wip
     test "full header parse should work" do
       {:ok, editor_string} = Jason.encode(@editor_json)
       {:ok, converted} = Parser.to_html(editor_string)
@@ -88,7 +88,7 @@ defmodule GroupherServer.Test.Helper.Converter.EditorToHTML.Header do
       "time" => 1_567_250_876_713,
       "version" => "2.15.0"
     }
-    @tag :wip2
+    @tag :wip
     test "optional field should valid properly" do
       json =
         Map.merge(@editor_json, %{

test/helper/converter/editor_to_html_test/header_test.exs

@@ -0,0 +1,96 @@
+defmodule GroupherServer.Test.Helper.Converter.EditorToHTML.Table do
+  @moduledoc false
+
+  use GroupherServerWeb.ConnCase, async: true
+
+  alias Helper.Converter.EditorToHTML, as: Parser
+  alias Helper.Converter.EditorToHTML.Class
+  alias Helper.Utils
+
+  @root_class Class.article()
+  @class get_in(@root_class, ["list"])
+
+  describe "[table block unit]" do
+    defp set_items(column_count, items) do
+      editor_json = %{
+        "time" => 1_567_250_876_713,
+        "blocks" => [
+          %{
+            "type" => "table",
+            "data" => %{
+              "columnCount" => column_count,
+              "items" => items
+            }
+          }
+        ],
+        "version" => "2.15.0"
+      }
+    end
+
+    @tag :wip2
+    test "basic table parse should work" do
+      editor_json =
+        set_items(4, [
+          %{
+            "align" => "left",
+            "isZebraStripe" => false,
+            "text" => "cell 0"
+          },
+          %{
+            "align" => "center",
+            "isZebraStripe" => false,
+            "text" => "cell 1",
+            "width" => "180px"
+          },
+          %{
+            "align" => "right",
+            "isZebraStripe" => false,
+            "text" => "cell 2"
+          },
+          %{
+            "align" => "left",
+            "isZebraStripe" => false,
+            "text" => "cell 3"
+          },
+          %{
+            "align" => "left",
+            "isZebraStripe" => false,
+            "text" => "cell 4"
+          },
+          %{
+            "align" => "left",
+            "isZebraStripe" => false,
+            "text" => "cell 5"
+          },
+          %{
+            "align" => "left",
+            "isZebraStripe" => false,
+            "text" => ""
+          }
+        ])
+
+      {:ok, editor_string} = Jason.encode(editor_json)
+      {:ok, converted} = Parser.to_html(editor_string)
+
+      IO.inspect(converted, label: "table >>")
+
+      # unorder_list_prefix_class = @class["unorder_list_prefix"]
+      # assert Utils.str_occurence(converted, unorder_list_prefix_class) == 3
+    end
+
+    # @tag :wip
+    # test "invalid list mode parse should raise error message" do
+    #   editor_json = set_items("invalid-mode", [])
+    #   {:ok, editor_string} = Jason.encode(editor_json)
+    #   {:error, err_msg} = Parser.to_html(editor_string)
+
+    #   assert err_msg == [
+    #            %{
+    #              block: "list",
+    #              field: "mode",
+    #              message: "should be: checklist | order_list | unorder_list"
+    #            }
+    #          ]
+    # end
+  end
+end