refactor(editor): order_list done

Author: mydearxym

lib/helper/converter/editor_to_html/class.ex

@@ -30,6 +30,7 @@ defmodule Helper.Converter.EditorToHTML.Class do
         "label__green" => "list-label__green",
         "label__warn" => "list-label__warn",
         "unorder_list_prefix" => "list__item-unorder-prefix",
+        "order_list_prefix" => "list__item-order-prefix",
         "list_item" => "list-item",
         "checklist_item" => "list-checklist__item",
         "checklist_checkbox" => "checklist__item-checkbox",

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

@@ -9,6 +9,7 @@ defmodule Helper.Converter.EditorToHTML.Frags.List do
 
   @class get_in(Class.article(), ["list"])
 
+  @spec get_item(:checklist | :unorder_list | :order_list, map) :: T.html()
   def get_item(:unorder_list, %{
         "hideLabel" => hide_label,
         "indent" => indent,
@@ -30,6 +31,28 @@ defmodule Helper.Converter.EditorToHTML.Frags.List do
       </div>)
   end
 
+  def get_item(:order_list, %{
+        "hideLabel" => hide_label,
+        "indent" => indent,
+        "label" => label,
+        "labelType" => label_type,
+        "prefixIndex" => prefix_index,
+        "text" => text
+      }) do
+    prefix_frag = frag(:order_list_prefix, prefix_index)
+    label_frag = if hide_label, do: "", else: frag(:label, label_type, indent, label)
+    text_frag = frag(:text, text)
+
+    item_class = @class["list_item"]
+    indent_class = @class["indent_#{indent}"]
+
+    ~s(<div class="#{item_class} #{indent_class}">
+        #{prefix_frag}
+        #{label_frag}
+        #{text_frag}
+      </div>)
+  end
+
   def get_item(:checklist, %{
         "checked" => checked,
         "hideLabel" => hide_label,
@@ -53,12 +76,20 @@ defmodule Helper.Converter.EditorToHTML.Frags.List do
       </div>)
   end
 
+  @spec frag(:unorder_list_prefix) :: T.html()
   def frag(:unorder_list_prefix) do
     unorder_list_prefix_class = @class["unorder_list_prefix"]
 
     ~s(<div class="#{unorder_list_prefix_class}"></div>)
   end
 
+  @spec frag(:order_list_prefix, String.t()) :: T.html()
+  def frag(:order_list_prefix, prefix_index) when is_binary(prefix_index) do
+    order_list_prefix_class = @class["order_list_prefix"]
+
+    ~s(<div class="#{order_list_prefix_class}">#{prefix_index}</div>)
+  end
+
   def frag(:label, label_type, indent, label) do
     label_class = @class["label"]
     label_type_class = @class["label__#{label_type}"]

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

@@ -35,9 +35,11 @@ body {
   width: 100%;
 }
 
-.article-viewer-wrapper .list-wrapper .list-item .list__item-unorder-prefix {
+.article-viewer-wrapper .list-wrapper .list-item .list__item-order-prefix,
+.list__item-unorder-prefix {
   position: relative;
   margin-right: 26px;
+  color: #09aac1;
 }
 
 .article-viewer-wrapper

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

@@ -36,6 +36,7 @@ defmodule Helper.Converter.EditorToHTML.Validator.EditorSchema do
         "hideLabel" => [:boolean],
         "label" => [:string],
         "labelType" => [enum: @valid_list_label_type],
+        "prefixIndex" => [:string, required: false],
         "indent" => [enum: @valid_list_indent],
         "text" => [:string]
       }

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

@@ -61,10 +61,49 @@ defmodule GroupherServer.Test.Helper.Converter.EditorToHTML.List do
       {:ok, editor_string} = Jason.encode(editor_json)
       {:ok, converted} = Parser.to_html(editor_string)
 
-      IO.inspect(converted, label: ">> ")
+      unorder_list_prefix_class = @class["unorder_list_prefix"]
+      assert Utils.str_occurence(converted, unorder_list_prefix_class) == 3
+    end
+
+    @tag :wip2
+    test "basic order list parse should work" do
+      editor_json =
+        set_items("order_list", [
+          %{
+            "checked" => true,
+            "hideLabel" => false,
+            "indent" => 0,
+            "label" => "label",
+            "labelType" => "default",
+            "prefixIndex" => "1.",
+            "text" =>
+              "一个带着中文的很长的句子。一个带着中文的很长的句子。一个带着中文的很长的句子。一个带着中文的很长的句子。一个带着中文的很长的句子。一个带着中文的很长的句子。一个带着中文的很长的句子。一个带着中文的很长的句子。一个带着中文的很长的句子。"
+          },
+          %{
+            "checked" => false,
+            "hideLabel" => false,
+            "indent" => 0,
+            "label" => "label",
+            "labelType" => "default",
+            "prefixIndex" => "2.",
+            "text" => "list item"
+          },
+          %{
+            "checked" => false,
+            "hideLabel" => false,
+            "indent" => 1,
+            "label" => "green",
+            "labelType" => "green",
+            "prefixIndex" => "2.1",
+            "text" => "list item"
+          }
+        ])
+
+      {:ok, editor_string} = Jason.encode(editor_json)
+      {:ok, converted} = Parser.to_html(editor_string)
 
-      # checked_class = @class["checklist_checkbox_checked"]
-      # assert Utils.str_occurence(converted, checked_class) == 1
+      order_list_prefix_class = @class["order_list_prefix"]
+      assert Utils.str_occurence(converted, order_list_prefix_class) == 3
     end
 
     @tag :wip