feat(editor-export): add quote block parse && test

mydearxym · mydearxym · commit 5f839e78a7dc · 2021-02-26T14:58:34.000+08:00
diff --git a/lib/helper/converter/editor_to_html/class.ex b/lib/helper/converter/editor_to_html/class.ex
@@ -22,6 +22,15 @@ defmodule Helper.Converter.EditorToHTML.Class do
         "eyebrow_title" => "eyebrow-title",
         "footer_title" => "footer-title"
       },
+      # quote block
+      "quote" => %{
+        "short_wrapper" => "quote-short",
+        "long_wrapper" => "quote-long",
+        "text" => "quote__text",
+        "caption" => "quote-caption",
+        "caption_line" => "quote-caption__line",
+        "caption_text" => "quote-caption__text"
+      },
       # list
       "list" => %{
         "wrapper" => "list-wrapper",
diff --git a/lib/helper/converter/editor_to_html/frags/quote.ex b/lib/helper/converter/editor_to_html/frags/quote.ex
@@ -0,0 +1,56 @@
+defmodule Helper.Converter.EditorToHTML.Frags.Quote do
+  @moduledoc """
+  parse editor.js's block fragments, use for test too
+
+  see https://editorjs.io/
+  """
+  import Helper.Validator.Guards, only: [g_none_empty_str: 1]
+
+  alias Helper.Types, as: T
+  alias Helper.Converter.EditorToHTML.Class
+
+  @class get_in(Class.article(), ["quote"])
+
+  @spec get(T.editor_quote()) :: T.html()
+  def get(%{"mode" => "short", "text" => text}) do
+    wrapper_class = @class["short_wrapper"]
+    text_class = @class["text"]
+
+    ~s(<blockquote class="#{wrapper_class}">
+        <div class="#{text_class}">#{text}</div>
+      </blockquote>)
+  end
+
+  def get(%{"mode" => "long", "text" => text, "caption" => caption})
+      when g_none_empty_str(caption) do
+    wrapper_class = @class["long_wrapper"]
+    text_class = @class["text"]
+
+    caption = frag(:caption, caption)
+
+    ~s(<blockquote class="#{wrapper_class}">
+        <div class="#{text_class}">#{text}</div>
+        #{caption}
+      </blockquote>)
+  end
+
+  def get(%{"mode" => "long", "text" => text}) do
+    wrapper_class = @class["long_wrapper"]
+    text_class = @class["text"]
+
+    ~s(<blockquote class="#{wrapper_class}">
+        <div class="#{text_class}">#{text}</div>
+      </blockquote>)
+  end
+
+  def frag(:caption, caption) do
+    caption_class = @class["caption"]
+    caption_line_class = @class["caption_line"]
+    caption_text_class = @class["caption_text"]
+
+    ~s(<div class="#{caption_class}">
+      <div class="#{caption_line_class}"/>
+      <div class="#{caption_text_class}">#{caption}</div>
+      </div>)
+  end
+end
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
@@ -277,3 +277,92 @@ td {
 }
 
 /* table block end */
+
+/* quote block */
+
+.article-viewer-wrapper .quote-short {
+  margin-left: 15px;
+  min-height: 0;
+  border: none;
+  border-radius: 0;
+  border-left: 4px solid;
+  border-left-color: #388ae5;
+  color: grey;
+  box-shadow: none;
+}
+
+.article-viewer-wrapper .quote__text {
+  line-height: 1.8em;
+  min-height: 30px;
+  border: none;
+  border-radius: 0;
+  color: grey;
+  box-shadow: none;
+  padding: 10px 12px;
+  outline: none;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.article-viewer-wrapper .quote-long {
+  position: relative;
+  border: 2px solid;
+  border-left: 1px solid;
+  border-right: 1px solid;
+  border-bottom: 1px solid;
+  border-color: lightgrey;
+  margin: 15px;
+  margin-left: 22px;
+  margin-right: 42px;
+  min-height: 140px;
+  padding: 6px 30px;
+  padding-bottom: 60px;
+  border-top-right-radius: 12px;
+  border-bottom-left-radius: 12px;
+}
+
+.article-viewer-wrapper .quote-long::before {
+  position: absolute;
+  content: "\201C";
+  font-size: 50px;
+  color: #e8e7e7;
+  left: -16px;
+  top: 9px;
+  height: 35px;
+  background: white;
+}
+
+.article-viewer-wrapper .quote-long::after {
+  position: absolute;
+  content: "\201D";
+  font-size: 42px;
+  color: #e8e7e7;
+  right: -13px;
+  bottom: 9px;
+  height: 28px;
+  background: white;
+}
+
+.article-viewer-wrapper .quote-caption {
+  position: absolute;
+  bottom: 10px;
+  right: 42px;
+  display: flex;
+  align-items: center;
+}
+
+.article-viewer-wrapper .quote-caption__line {
+  width: 30px;
+  height: 1px;
+  margin-right: 10px;
+  background: #bbb;
+}
+
+.article-viewer-wrapper .quote-caption__text {
+  cursor: text;
+  outline: none;
+  color: grey;
+  font-size: 14px;
+}
+
+/* quote block end */
diff --git a/lib/helper/converter/editor_to_html/index.ex b/lib/helper/converter/editor_to_html/index.ex
@@ -45,6 +45,8 @@ defmodule Helper.Converter.EditorToHTML do
 
   defp parse_block(%{"type" => "header", "data" => data}), do: Frags.Header.get(data)
 
+  defp parse_block(%{"type" => "quote", "data" => data}), do: Frags.Quote.get(data)
+
   defp parse_block(%{"type" => "list", "data" => data}) do
     %{"items" => items, "mode" => mode} = data
 
diff --git a/lib/helper/converter/editor_to_html/validator/editor_schema.ex b/lib/helper/converter/editor_to_html/validator/editor_schema.ex
@@ -4,6 +4,9 @@ defmodule Helper.Converter.EditorToHTML.Validator.EditorSchema do
   # header
   @valid_header_level [1, 2, 3]
 
+  # quote
+  @valid_quote_mode ["short", "long"]
+
   # list
   @valid_list_mode ["checklist", "order_list", "unorder_list"]
   @valid_list_label_type ["green", "red", "warn", "default"]
@@ -12,6 +15,7 @@ defmodule Helper.Converter.EditorToHTML.Validator.EditorSchema do
   # table
   @valid_table_align ["left", "center", "right"]
 
+  @spec get(String.t()) :: map
   def get("editor") do
     %{
       "time" => [:number],
@@ -31,6 +35,15 @@ defmodule Helper.Converter.EditorToHTML.Validator.EditorSchema do
 
   def get("paragraph"), do: %{"text" => [:string]}
 
+  def get("quote") do
+    %{
+      "text" => [:string],
+      "mode" => [enum: @valid_quote_mode],
+      "caption" => [:string, required: false]
+    }
+  end
+
+  @spec get(String.t()) :: [parent: map, item: map]
   def get("list") do
     [
       parent: %{"mode" => [enum: @valid_list_mode], "items" => [:list]},
diff --git a/lib/helper/converter/editor_to_html/validator/index.ex b/lib/helper/converter/editor_to_html/validator/index.ex
@@ -7,7 +7,7 @@ defmodule Helper.Converter.EditorToHTML.Validator do
   alias Converter.EditorToHTML.Validator.EditorSchema
 
   # blocks with no children items
-  @simple_blocks ["header", "paragraph"]
+  @normal_blocks ["header", "paragraph", "quote"]
   # blocks with "items" fields
   @complex_blocks ["list", "table"]
 
@@ -54,7 +54,7 @@ defmodule Helper.Converter.EditorToHTML.Validator do
   end
 
   # validate block which have no nested items
-  defp validate_block(%{"type" => type, "data" => data}) when type in @simple_blocks do
+  defp validate_block(%{"type" => type, "data" => data}) when type in @normal_blocks do
     validate_with(type, EditorSchema.get(type), data)
   end
 
diff --git a/lib/helper/converter/html_sanitizer.ex b/lib/helper/converter/html_sanitizer.ex
@@ -45,6 +45,9 @@ defmodule Helper.Converter.HtmlSanitizer do
     Meta.allow_tag_with_these_attributes("th", ["class"])
     Meta.allow_tag_with_these_attributes("td", ["class", "style"])
 
+    # blockquote
+    Meta.allow_tag_with_these_attributes("blockquote", ["class"])
+
     Meta.allow_tag_with_these_attributes("svg", [
       "t",
       "p-id",
diff --git a/lib/helper/types.ex b/lib/helper/types.ex
@@ -38,6 +38,16 @@ defmodule Helper.Types do
           footerTitle: String.t()
         }
 
+  @type editor_quote_mode :: :short | :long
+  @typedoc """
+  editor.js's quote tool data format
+  """
+  @type editor_quote :: %{
+          required(:text) => String.t(),
+          required(:mode) => editor_quote_mode,
+          caption: String.t(),
+        }
+
   @typedoc """
   valid editor.js's list item indent
   """
diff --git a/lib/helper/validator/guards.ex b/lib/helper/validator/guards.ex
@@ -4,4 +4,6 @@ defmodule Helper.Validator.Guards do
   """
   defguard g_pos_int(value) when is_integer(value) and value >= 0
   defguard g_not_nil(value) when not is_nil(value)
+
+  defguard g_none_empty_str(value) when is_binary(value) and byte_size(value) > 0
 end
diff --git a/test/helper/converter/editor_to_html_test/quote_test.exs b/test/helper/converter/editor_to_html_test/quote_test.exs
@@ -0,0 +1,125 @@
+defmodule GroupherServer.Test.Helper.Converter.EditorToHTML.Quote do
+  @moduledoc false
+
+  use GroupherServerWeb.ConnCase, async: true
+
+  alias Helper.Converter.EditorToHTML.Class
+  alias Helper.Converter.EditorToHTML, as: Parser
+
+  alias Helper.Utils
+
+  @root_class Class.article()
+  @class get_in(@root_class, ["quote"])
+
+  describe "[quote block]" do
+    defp set_data(mode, text, caption \\ nil) do
+      data =
+        case caption do
+          nil ->
+            %{
+              "mode" => mode,
+              "text" => text
+            }
+
+          _ ->
+            %{
+              "mode" => mode,
+              "text" => text,
+              "caption" => caption
+            }
+        end
+
+      %{
+        "time" => 1_567_250_876_713,
+        "blocks" => [
+          %{
+            "type" => "quote",
+            "data" => data
+          }
+        ],
+        "version" => "2.15.0"
+      }
+    end
+
+    @tag :wip2
+    test "short quote parse should work" do
+      editor_json = set_data("short", "short quote")
+      {:ok, editor_string} = Jason.encode(editor_json)
+      {:ok, converted} = Parser.to_html(editor_string)
+
+      short_wrapper_class = @class["short_wrapper"]
+      caption_class = @class["caption"]
+
+      assert Utils.str_occurence(converted, short_wrapper_class) == 1
+      assert Utils.str_occurence(converted, "</blockquote>") == 1
+      assert Utils.str_occurence(converted, caption_class) == 0
+    end
+
+    @tag :wip2
+    test "long quote parse should work" do
+      editor_json = set_data("long", "long quote", "caption")
+      {:ok, editor_string} = Jason.encode(editor_json)
+      {:ok, converted} = Parser.to_html(editor_string)
+
+      long_wrapper_class = @class["long_wrapper"]
+      caption_text_class = @class["caption_text"]
+
+      assert Utils.str_occurence(converted, long_wrapper_class) == 1
+      assert Utils.str_occurence(converted, "</blockquote>") == 1
+      assert Utils.str_occurence(converted, caption_text_class) == 1
+    end
+
+    @tag :wip2
+    test "long quote without caption parse should work" do
+      editor_json = set_data("long", "long quote")
+      {:ok, editor_string} = Jason.encode(editor_json)
+
+      {:ok, converted} = Parser.to_html(editor_string)
+
+      long_wrapper_class = @class["long_wrapper"]
+      caption_text_class = @class["caption_text"]
+
+      assert Utils.str_occurence(converted, long_wrapper_class) == 1
+      assert Utils.str_occurence(converted, "</blockquote>") == 1
+      assert Utils.str_occurence(converted, caption_text_class) == 0
+    end
+
+    @tag :wip2
+    test "long quote without empty caption parse should work" do
+      editor_json = set_data("long", "long quote", "")
+      {:ok, editor_string} = Jason.encode(editor_json)
+
+      {:ok, converted} = Parser.to_html(editor_string)
+
+      long_wrapper_class = @class["long_wrapper"]
+      caption_text_class = @class["caption_text"]
+
+      assert Utils.str_occurence(converted, long_wrapper_class) == 1
+      assert Utils.str_occurence(converted, "</blockquote>") == 1
+      assert Utils.str_occurence(converted, caption_text_class) == 0
+    end
+
+    # @editor_json %{
+    #   "time" => 1_567_250_876_713,
+    #   "blocks" => [
+    #     %{
+    #       "type" => "paragraph",
+    #       "data" => %{
+    #         "text" => []
+    #       }
+    #     }
+    #   ],
+    #   "version" => "2.15.0"
+    # }
+    @tag :wip2
+    test "invalid quote should have invalid hint" do
+      editor_json = set_data("none_exsit", "long quote", "")
+      {:ok, editor_string} = Jason.encode(editor_json)
+      {:error, error} = Parser.to_html(editor_string)
+
+      assert error == [
+               %{block: "quote", field: "mode", message: "should be: short | long"}
+             ]
+    end
+  end
+end
