Merge pull request #288 from coderplanets/editor-table

feat(editor-export): table block

Author: mydearxym

lib/helper/converter/editor_to_html/class.ex

@@ -43,6 +43,15 @@ 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",
+        "th_header" => "th_header",
+        "td_stripe" => "td_stripe",
+        "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,62 @@
+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"])
+
+  @spec get_row([T.editor_table_cell()]) :: T.html()
+  def get_row(group_items) do
+    tr_content =
+      Enum.reduce(group_items, "", fn item, acc ->
+        cell_type = if Map.has_key?(item, "isHeader"), do: :th, else: :td
+        acc <> frag(cell_type, item)
+      end)
+
+    ~s(<tr>#{tr_content}</tr>)
+  end
+
+  @spec frag(:td, T.editor_table_cell()) :: T.html()
+  def frag(:td, item) do
+    %{
+      "align" => align,
+      "isStripe" => is_stripe,
+      "text" => text
+    } = item
+
+    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 class="#{scripe_class}" style="#{style}"><div class="#{cell_class} #{align_class}">#{
+          text
+        }</div></td>)
+
+      false ->
+        ~s(<td class="#{scripe_class}"><div class="#{cell_class} #{align_class}">#{text}</div></td>)
+    end
+  end
+
+  @spec frag(:th, T.editor_table_cell()) :: T.html()
+  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"]
+end

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

@@ -204,3 +204,76 @@ 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;
+}
+
+.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;
+}
+
+.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,29 @@ 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
+
+    # 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 ->
+        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,19 @@ 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],
+        "isStripe" => [:boolean],
+        "isHeader" => [:boolean, required: false],
+        "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,13 @@ 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("th", ["class"])
+    Meta.allow_tag_with_these_attributes("td", ["class", "style"])
+
     Meta.allow_tag_with_these_attributes("svg", [
       "t",
       "p-id",

lib/helper/converter/html_sanitizer.ex

@@ -59,6 +59,22 @@ defmodule Helper.Types do
           required(:text) => String.t(),
           prefixIndex: String.t()
         }
+
+  @typedoc """
+  editor.js's Table align type
+  """
+  @type editor_table_align :: :center | :left | :right
+
+  @typedoc """
+  editor.js's Table td type
+  """
+  @type editor_table_cell :: %{
+          required(:text) => String.t(),
+          required(:align) => editor_table_align,
+          isStripe: Boolean.t(),
+          isHeader: Boolean.t()
+        }
+
   @typedoc """
   html fragment
   """

lib/helper/types.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, %{