feat(editor-export): editor people && re-org (#303)

* feat(editor-export): people block basic func done

* chore: fmt

* refactor(editor-people): re-org codebase

* refactor(editor-people): switch UI/UX done

* refactor(editor): use @Class[xxx] style, more readable

* refactor(editor-people): add some test

* refactor(editor-test): use common mock_image(s)

* refactor(editor-test): rm unsed class vars

* fix(ci): use offical elixir action

Author: mydearxym

.github/workflows/ci.yml

@@ -31,7 +31,7 @@ jobs:
         with:
           configFile: .commitlintrc.js
       - name: Set up Elixir and OTP
-        uses: actions/setup-elixir@v1
+        uses: erlef/setup-elixir@v1
         with:
           elixir-version: "1.10.3" # Define the elixir version [required]
           otp-version: "22.3" # Define the OTP version [required]

config/config.exs

@@ -62,6 +62,9 @@ config :groupher_server, :customization,
 
 config :groupher_server, GroupherServerWeb.Gettext, default_locale: "zh_CN", locales: ~w(en zh_CN)
 
+config :groupher_server, :cloud_assets,
+  static_icon: "https://cps-oss.oss-cn-shanghai.aliyuncs.com/icons/static"
+
 #  config email services
 config :groupher_server, :system_emails,
   support_email: "coderplanets <support@group.coderplanets.com>",

lib/helper/converter/editor_to_html/class.ex

@@ -15,6 +15,7 @@ defmodule Helper.Converter.EditorToHTML.Class do
       "viewer" => "article-viewer-wrapper",
       "unknow_block" => "unknow-block",
       "invalid_block" => "invalid-block",
+      "hide" => "hide",
       # header
       "header" => %{
         "wrapper" => "header-wrapper",
@@ -80,6 +81,23 @@ defmodule Helper.Converter.EditorToHTML.Class do
         # minimap
         "gallery_minimap" => "gallery-minimap",
         "gallery_minimap_image" => "gallery-minimap-block-image"
+      },
+      "people" => %{
+        "wrapper" => "people-wrapper",
+        # gallery
+        "gallery_wrapper" => "gallery-wrapper",
+        "gallery_previewer_wrapper" => "gallery-previewer-wrapper",
+        "gallery_previewer_item" => "gallery-previewer-item",
+        "gallery_previewer_active_item" => "gallery-previewer-item-active",
+        "gallery_card_wrapper" => "gallery-card-wrapper",
+        "gallery_avatar" => "gallery-avatar",
+        "gallery_intro" => "gallery-intro",
+        "gallery_intro_title" => "gallery-intro-title",
+        "gallery_intro_bio" => "gallery-intro-bio",
+        "gallery_intro_desc" => "gallery-intro-desc",
+        "gallery_social_wrapper" => "gallery-social-wrapper",
+        "gallery_social_icon" => "gallery-social-icon"
+        ## social
       }
     }
   end

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

@@ -14,47 +14,32 @@ defmodule Helper.Converter.EditorToHTML.Frags.Header do
   @spec get(T.editor_header()) :: T.html()
   def get(%{"eyebrowTitle" => eyebrow_title, "footerTitle" => footer_title} = data) do
     %{"text" => text, "level" => level} = data
-
-    wrapper_class = @class["wrapper"]
-    header_class = @class["header"]
-    eyebrow_class = @class["eyebrow_title"]
-    footer_class = @class["footer_title"]
-
     anchor_id = Utils.uid(:html, data)
 
-    ~s(<div id="#{anchor_id}" class="#{wrapper_class}">
-        <div class="#{eyebrow_class}">#{eyebrow_title}</div>
-        <h#{level} class="#{header_class}">#{text}</h#{level}>
-        <div class="#{footer_class}">#{footer_title}</div>
+    ~s(<div id="#{anchor_id}" class="#{@class["wrapper"]}">
+        <div class="#{@class["eyebrow_title"]}">#{eyebrow_title}</div>
+        <h#{level} class="#{@class["header"]}">#{text}</h#{level}>
+        <div class="#{@class["footer_title"]}">#{footer_title}</div>
       </div>)
   end
 
   def get(%{"eyebrowTitle" => eyebrow_title} = data) do
     %{"text" => text, "level" => level} = data
-
-    wrapper_class = @class["wrapper"]
-    header_class = @class["header"]
-    eyebrow_class = @class["eyebrow_title"]
-
     anchor_id = Utils.uid(:html, data)
 
-    ~s(<div id="#{anchor_id}" class="#{wrapper_class}">
-        <div class="#{eyebrow_class}">#{eyebrow_title}</div>
-        <h#{level} class="#{header_class}">#{text}</h#{level}>
+    ~s(<div id="#{anchor_id}" class="#{@class["wrapper"]}">
+        <div class="#{@class["eyebrow_title"]}">#{eyebrow_title}</div>
+        <h#{level} class="#{@class["header"]}">#{text}</h#{level}>
       </div>)
   end
 
   def get(%{"footerTitle" => footer_title} = data) do
     %{"text" => text, "level" => level} = data
-
-    wrapper_class = @class["wrapper"]
-    header_class = @class["header"]
-    footer_class = @class["footer_title"]
-
     anchor_id = Utils.uid(:html, data)
-    ~s(<div id="#{anchor_id}" class="#{wrapper_class}">
-        <h#{level} class="#{header_class}">#{text}</h#{level}>
-        <div class="#{footer_class}">#{footer_title}</div>
+
+    ~s(<div id="#{anchor_id}" class="#{@class["wrapper"]}">
+        <h#{level} class="#{@class["header"]}">#{text}</h#{level}>
+        <div class="#{@class["footer_title"]}">#{footer_title}</div>
       </div>)
   end
 

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

@@ -23,25 +23,21 @@ defmodule Helper.Converter.EditorToHTML.Frags.Image do
       when g_none_empty_str(width) and g_none_empty_str(height) do
     caption = get_caption(data)
 
-    image_wrapper_class = @class["single_image_wrapper"]
-    image_class = @class["single_image"]
-
-    ~s(<div class="#{image_wrapper_class}">
+    ~s(<div class="#{@class["single_image_wrapper"]}">
         <a href=#{src} class="glightbox" data-glightbox="type:image;description: #{caption}">
-          <img class="#{image_class}" style="width:#{width}; height:#{height}" src="#{src}" alt="image" />
+          <img class="#{@class["single_image"]}" style="width:#{width}; height:#{height}" src="#{
+      src
+    }" alt="image" />
         </a>
        </div>)
   end
 
   def get_item(:single, %{"src" => src} = data) do
     caption = get_caption(data)
 
-    image_wrapper_class = @class["single_image_wrapper"]
-    image_class = @class["single_image"]
-
-    ~s(<div class="#{image_wrapper_class}">
+    ~s(<div class="#{@class["single_image_wrapper"]}">
         <a href=#{src} class="glightbox" data-glightbox="type:image;description: #{caption}">
-          <img class="#{image_class}" src="#{src}" alt="image" />
+          <img class="#{@class["single_image"]}" src="#{src}" alt="image" />
         </a>
       </div>)
   end
@@ -50,75 +46,46 @@ defmodule Helper.Converter.EditorToHTML.Frags.Image do
     caption = get_caption(data)
     # image_wrapper_class = @class["jiugongge-image"]
 
-    jiugongge_image_block_class = @class["jiugongge_image_block"]
-    image_class = @class["jiugongge_image"]
-
-    ~s(<div class="#{jiugongge_image_block_class}">
+    ~s(<div class="#{@class["jiugongge_image_block"]}">
         <a href=#{src} class="glightbox" data-glightbox="type:image;description: #{caption}">
-          <img class="#{image_class}" src="#{src}" alt="image" />
+          <img class="#{@class["jiugongge_image"]}" src="#{src}" alt="image" />
         </a>
       </div>)
   end
 
   def get_item(:gallery, %{"src" => src, "index" => index} = data) do
     caption = get_caption(data)
 
-    gallery_image_block_class = @class["gallery_image_block"]
-    image_class = @class["gallery_image"]
-
     # IO.inspect(index, label: "index -> ")
-    ~s(<div class="#{gallery_image_block_class}">
+    ~s(<div class="#{@class["gallery_image_block"]}">
         <a href=#{src} class="glightbox" data-glightbox="type:image;description: #{caption}">
-          <img class="#{image_class}" src="#{src}" alt="image" data-index="#{index}" />
+          <img class="#{@class["gallery_image"]}" src="#{src}" alt="image" data-index="#{index}" />
         </a>
       </div>)
   end
 
   @spec get_minimap([T.editor_image_item()]) :: T.html()
   def get_minimap(items) do
-    wrapper_class = @class["gallery_minimap"]
-
     items_content =
       Enum.reduce(items, "", fn item, acc ->
         acc <> frag(:minimap_image, item)
       end)
 
-    ~s(<div class="#{wrapper_class}">
+    ~s(<div class="#{@class["gallery_minimap"]}">
         #{items_content}
        </div>)
   end
 
   defp frag(:minimap_image, %{"src" => src, "index" => index}) do
-    image_class = @class["gallery_minimap_image"]
-
-    ~s(<img class="#{image_class}" src="#{src}" data-index="#{index}"/>)
+    ~s(<img class="#{@class["gallery_minimap_image"]}" src="#{src}" data-index="#{index}"/>)
   end
 
   def get_caption(%{"caption" => caption}) when g_none_empty_str(caption), do: caption
   def get_caption(_), do: ""
 
   def get_caption(:html, %{"caption" => caption}) when g_none_empty_str(caption) do
-    image_caption = @class["image_caption"]
-    ~s(<div class="#{image_caption}">#{caption}</div>)
+    ~s(<div class="#{@class["image_caption"]}">#{caption}</div>)
   end
 
   def get_caption(:html, _), do: ""
-
-  # @spec frag(:checkbox, :text, String.t()) :: T.html()
-  # def frag(:checkbox, :text, text) do
-  #   text_class = @class["checklist_text"]
-
-  #   ~s(<div class="#{text_class}">
-  #       #{text}
-  #     </div>)
-  # end
-
-  # defp svg(type) do
-  #   # workarround for https://github.com/rrrene/html_sanitize_ex/issues/48
-  #   svg_frag(type) |> String.replace(" viewBox=\"", " viewbox=\"")
-  # end
-
-  # defp svg_frag(:checked) do
-  #   ~s(<svg t="1592049095081" width="20px" height="20px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9783"><path d="M853.333333 256L384 725.333333l-213.333333-213.333333" p-id="9784"></path></svg>)
-  # end
 end

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

@@ -24,10 +24,9 @@ defmodule Helper.Converter.EditorToHTML.Frags.List do
     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}">
+    ~s(<div class="#{@class["list_item"]} #{indent_class}">
         #{prefix_frag}
         #{label_frag}
         #{text_frag}
@@ -49,10 +48,9 @@ defmodule Helper.Converter.EditorToHTML.Frags.List do
     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}">
+    ~s(<div class="#{@class["list_item"]} #{indent_class}">
         #{prefix_frag}
         #{label_frag}
         #{text_frag}
@@ -75,10 +73,9 @@ defmodule Helper.Converter.EditorToHTML.Frags.List do
     label_frag = if hide_label, do: "", else: frag(:label, label_type, indent, label)
     text_frag = frag(:checkbox, :text, text)
 
-    item_class = @class["checklist_item"]
     indent_class = @class["indent_#{indent}"]
 
-    ~s(<div class="#{item_class} #{indent_class}">
+    ~s(<div class="#{@class["checklist_item"]} #{indent_class}">
         #{checkbox_frag}
         #{label_frag}
         #{text_frag}
@@ -87,57 +84,45 @@ defmodule Helper.Converter.EditorToHTML.Frags.List do
 
   @spec frag(:label, T.editor_list_label_type(), T.editor_list_indent(), String.t()) :: T.html()
   def frag(:label, label_type, indent, label) do
-    label_class = @class["label"]
     label_type_class = @class["label__#{label_type}"]
 
-    ~s(<div class="#{label_class} #{label_type_class}" data-index="#{indent}">
+    ~s(<div class="#{@class["label"]} #{label_type_class}" data-index="#{indent}">
         #{label}
       </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>)
+    ~s(<div class="#{@class["unorder_list_prefix"]}"></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>)
+    ~s(<div class="#{@class["order_list_prefix"]}">#{prefix_index}</div>)
   end
 
   @spec frag(:checkbox, Boolean.t()) :: T.html()
   def frag(:checkbox, checked) when is_boolean(checked) do
     checked_svg = svg(:checked)
-
-    checkbox_class = @class["checklist_checkbox"]
     checkbox_checked_class = if checked, do: @class["checklist_checkbox_checked"], else: ""
-    checkbox_checksign_class = @class["checklist_checksign"]
 
-    ~s(<div class="#{checkbox_class} #{checkbox_checked_class}">
-        <div class="#{checkbox_checksign_class}">
+    ~s(<div class="#{@class["checklist_checkbox"]} #{checkbox_checked_class}">
+        <div class="#{@class["checklist_checksign"]}">
         #{checked_svg}
         </div>
       </div>)
   end
 
   @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}">
+    ~s(<div class="#{@class["text"]}">
         #{text}
       </div>)
   end
 
   @spec frag(:checkbox, :text, String.t()) :: T.html()
   def frag(:checkbox, :text, text) do
-    text_class = @class["checklist_text"]
-
-    ~s(<div class="#{text_class}">
+    ~s(<div class="#{@class["checklist_text"]}">
         #{text}
       </div>)
   end