refactor(editor): unorder_list done

Author: mydearxym

lib/helper/converter/editor_to_html/class.ex

@@ -24,12 +24,13 @@ defmodule Helper.Converter.EditorToHTML.Class do
       # list
       "list" => %{
         "wrapper" => "list-wrapper",
-        "item" => "list-item",
         "label" => "list-label",
         "label__default" => "list-label__default",
         "label__red" => "list-label__red",
         "label__green" => "list-label__green",
         "label__warn" => "list-label__warn",
+        "unorder_list_prefix" => "list__item-unorder-prefix",
+        "list_item" => "list-item",
         "checklist_item" => "list-checklist__item",
         "checklist_checkbox" => "checklist__item-checkbox",
         "checklist_checkbox_checked" => "checklist__item-check-sign-checked",

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

@@ -9,6 +9,27 @@ defmodule Helper.Converter.EditorToHTML.Frags.List do
 
   @class get_in(Class.article(), ["list"])
 
+  def get_item(:unorder_list, %{
+        "hideLabel" => hide_label,
+        "indent" => indent,
+        "label" => label,
+        "labelType" => label_type,
+        "text" => text
+      }) do
+    prefix_frag = frag(:unorder_list_prefix)
+    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,
@@ -32,6 +53,12 @@ defmodule Helper.Converter.EditorToHTML.Frags.List do
       </div>)
   end
 
+  def frag(:unorder_list_prefix) do
+    unorder_list_prefix_class = @class["unorder_list_prefix"]
+
+    ~s(<div class="#{unorder_list_prefix_class}"></div>)
+  end
+
   def frag(:label, label_type, indent, label) do
     label_class = @class["label"]
     label_type_class = @class["label__#{label_type}"]
@@ -42,7 +69,7 @@ defmodule Helper.Converter.EditorToHTML.Frags.List do
   end
 
   @spec frag(:checkbox, Boolean.t()) :: T.html()
-  def frag(:checkbox, checked) do
+  def frag(:checkbox, checked) when is_boolean(checked) do
     checked_svg = svg(:checked)
 
     checkbox_class = @class["checklist_checkbox"]
@@ -56,7 +83,8 @@ defmodule Helper.Converter.EditorToHTML.Frags.List do
       </div>)
   end
 
-  def frag(:text, text) do
+  @spec frag(:text, String.t()) :: T.html()
+  def frag(:text, text) when is_binary(text) do
     text_class = @class["text"]
 
     ~s(<div class="#{text_class}">

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

@@ -27,6 +27,33 @@ body {
   padding: 1.2em 0;
 }
 
+.article-viewer-wrapper .list-wrapper .list-item {
+  display: flex;
+  align-items: baseline;
+  box-sizing: content-box;
+  position: relative;
+  width: 100%;
+}
+
+.article-viewer-wrapper .list-wrapper .list-item .list__item-unorder-prefix {
+  position: relative;
+  margin-right: 26px;
+}
+
+.article-viewer-wrapper
+  .list-wrapper
+  .list-item
+  .list__item-unorder-prefix::before {
+  content: "";
+  position: absolute;
+  width: 6px;
+  height: 6px;
+  background: #09aac1;
+  border-radius: 50%;
+  top: -8px;
+  left: 0;
+}
+
 .article-viewer-wrapper .list-wrapper .list-checklist__item {
   display: flex;
   align-items: baseline;
@@ -131,6 +158,7 @@ body {
   color: #eea564;
 }
 
+.article-viewer-wrapper .list-wrapper .list-item-text,
 .article-viewer-wrapper .list-wrapper .list-checklist__item-text {
   outline: none;
   flex-grow: 1;