From 140e50620ed3431c8336a5011d1a58da407144c0 Mon Sep 17 00:00:00 2001 From: mydearxym Date: Mon, 22 Feb 2021 22:30:42 +0800 Subject: [PATCH] refactor(editor): add header export --- lib/helper/converter/editor_to_html/class.ex | 1 + .../converter/editor_to_html/frags/header.ex | 9 ++-- .../editor_to_html/frontend_test/script.js | 8 ++- .../editor_to_html/frontend_test/styles.css | 36 ++++++++++++++ .../editor_to_html_test/header_test.exs | 49 ++++++------------- .../editor_to_html_test/list_test.exs | 2 +- 6 files changed, 67 insertions(+), 38 deletions(-) diff --git a/lib/helper/converter/editor_to_html/class.ex b/lib/helper/converter/editor_to_html/class.ex index f6bcabd64..27e3644d7 100644 --- a/lib/helper/converter/editor_to_html/class.ex +++ b/lib/helper/converter/editor_to_html/class.ex @@ -18,6 +18,7 @@ defmodule Helper.Converter.EditorToHTML.Class do # header "header" => %{ "wrapper" => "header-wrapper", + "header" => "header", "eyebrow_title" => "eyebrow-title", "footer_title" => "footer-title" }, diff --git a/lib/helper/converter/editor_to_html/frags/header.ex b/lib/helper/converter/editor_to_html/frags/header.ex index 88b0d03a1..e58ea7bb5 100644 --- a/lib/helper/converter/editor_to_html/frags/header.ex +++ b/lib/helper/converter/editor_to_html/frags/header.ex @@ -15,12 +15,13 @@ defmodule Helper.Converter.EditorToHTML.Frags.Header do %{"text" => text, "level" => level} = data wrapper_class = @class["wrapper"] + header_class = @class["header"] eyebrow_class = @class["eyebrow_title"] footer_class = @class["footer_title"] ~s(
#{eyebrow_title}
- #{text} + #{text}
#{footer_title}
) end @@ -29,11 +30,12 @@ defmodule Helper.Converter.EditorToHTML.Frags.Header do %{"text" => text, "level" => level} = data wrapper_class = @class["wrapper"] + header_class = @class["header"] eyebrow_class = @class["eyebrow_title"] ~s(
#{eyebrow_title}
- #{text} + #{text}
) end @@ -41,10 +43,11 @@ defmodule Helper.Converter.EditorToHTML.Frags.Header do %{"text" => text, "level" => level} = data wrapper_class = @class["wrapper"] + header_class = @class["header"] footer_class = @class["footer_title"] ~s(
- #{text} + #{text}
#{footer_title}
) 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 index 18d363d3d..950522bbb 100644 --- a/lib/helper/converter/editor_to_html/frontend_test/script.js +++ b/lib/helper/converter/editor_to_html/frontend_test/script.js @@ -1,5 +1,11 @@ content = - '
\n
1.
\n
\n label\n
\n
\n 一个带着中文的很长的句子。一个带着中文的很长的句子。一个带着中文的很长的句子。一个带着中文的很长的句子。一个带着中文的很长的句子。一个带着中文的很长的句子。一个带着中文的很长的句子。一个带着中文的很长的句子。一个带着中文的很长的句子。\n
\n
\n
2.
\n
\n label\n
\n
\n list item\n
\n
\n
2.1
\n
\n green\n
\n
\n list item\n
\n
'; + // header + // '
\n
eyebrow title content
\n

header content

\n
'; + '
\n

header content

\n
footer title content
\n
'; +// '
\n
eyebrow title content
\n

header content

\n
footer title content
\n
'; + +// list +// '
\n
1.
\n
\n label\n
\n
\n 一个带着中文的很长的句子。一个带着中文的很长的句子。一个带着中文的很长的句子。一个带着中文的很长的句子。一个带着中文的很长的句子。一个带着中文的很长的句子。一个带着中文的很长的句子。一个带着中文的很长的句子。一个带着中文的很长的句子。\n
\n
\n
2.
\n
\n label\n
\n
\n list item\n
\n
\n
2.1
\n
\n green\n
\n
\n list item\n
\n
'; const articleEl = document.getElementById("article"); diff --git a/lib/helper/converter/editor_to_html/frontend_test/styles.css b/lib/helper/converter/editor_to_html/frontend_test/styles.css index 28f7a3e1d..49804cc76 100644 --- a/lib/helper/converter/editor_to_html/frontend_test/styles.css +++ b/lib/helper/converter/editor_to_html/frontend_test/styles.css @@ -23,6 +23,40 @@ body { max-height: 100%; } +/* header block */ + +.article-viewer-wrapper .header-wrapper { +} + +.article-viewer-wrapper .header { + margin-top: 8px; + margin-bottom: 8px; +} + +.article-viewer-wrapper .header-wrapper h1 { + position: relative; + font-size: 28px; +} + +.article-viewer-wrapper .eyebrow-title { + font-size: 16px; + margin-bottom: 5px; + margin-top: 20px; + line-height: 24px; + width: 100%; + color: grey; +} + +.article-viewer-wrapper .footer-title { + font-size: 16px; + margin-top: 5px; + margin-bottom: 18px; + line-height: 24px; + width: 100%; + color: grey; +} + +/* list block */ .article-viewer-wrapper .list-wrapper { padding: 1.2em 0; } @@ -168,3 +202,5 @@ body { color: #526c73; word-break: break-all; } + +/* list block end */ diff --git a/test/helper/converter/editor_to_html_test/header_test.exs b/test/helper/converter/editor_to_html_test/header_test.exs index 30303a3c8..70a4a82ee 100644 --- a/test/helper/converter/editor_to_html_test/header_test.exs +++ b/test/helper/converter/editor_to_html_test/header_test.exs @@ -5,8 +5,13 @@ defmodule GroupherServer.Test.Helper.Converter.EditorToHTML.Header do alias Helper.Converter.EditorToHTML, as: Parser alias Helper.Converter.EditorToHTML.{Class, Frags} + alias Helper.Utils @root_class Class.article() + @class get_in(@root_class, ["header"]) + + @eyebrow_class @class["eyebrow_title"] + @footer_class @class["footer_title"] describe "[header block unit]" do @editor_json %{ @@ -36,7 +41,7 @@ defmodule GroupherServer.Test.Helper.Converter.EditorToHTML.Header do ], "version" => "2.15.0" } - @tag :wip2 + @tag :wip test "header parse should work" do {:ok, editor_string} = Jason.encode(@editor_json) {:ok, converted} = Parser.to_html(editor_string) @@ -71,18 +76,12 @@ defmodule GroupherServer.Test.Helper.Converter.EditorToHTML.Header do {:ok, editor_string} = Jason.encode(@editor_json) {:ok, converted} = Parser.to_html(editor_string) - frag = - Frags.Header.get(%{ - "text" => "header content", - "level" => 1, - "eyebrowTitle" => "eyebrow title content", - "footerTitle" => "footer title content" - }) - - viewer_class = @root_class["viewer"] + # header_class = @class["header"] - assert converted == - ~s(
#{frag}
) + # IO.inspect(converted, label: "header converted") + # assert Utils.str_occurence(converted, header_class) == 1 + assert Utils.str_occurence(converted, @eyebrow_class) == 1 + assert Utils.str_occurence(converted, @footer_class) == 1 end @editor_json %{ @@ -108,17 +107,8 @@ defmodule GroupherServer.Test.Helper.Converter.EditorToHTML.Header do {:ok, editor_string} = Jason.encode(json) {:ok, converted} = Parser.to_html(editor_string) - frag = - Frags.Header.get(%{ - "text" => "header content", - "level" => 1, - "eyebrowTitle" => "eyebrow title content" - }) - - viewer_class = @root_class["viewer"] - - assert converted == - ~s(
#{frag}
) + assert Utils.str_occurence(converted, @eyebrow_class) == 1 + assert Utils.str_occurence(converted, @footer_class) == 0 json = Map.merge(@editor_json, %{ @@ -137,17 +127,10 @@ defmodule GroupherServer.Test.Helper.Converter.EditorToHTML.Header do {:ok, editor_string} = Jason.encode(json) {:ok, converted} = Parser.to_html(editor_string) - frag = - Frags.Header.get(%{ - "text" => "header content", - "level" => 1, - "footerTitle" => "footer title content" - }) - - viewer_class = @root_class["viewer"] + IO.inspect(converted, label: "converted --") - assert converted == - ~s(
#{frag}
) + assert Utils.str_occurence(converted, @eyebrow_class) == 0 + assert Utils.str_occurence(converted, @footer_class) == 1 end @tag :wip diff --git a/test/helper/converter/editor_to_html_test/list_test.exs b/test/helper/converter/editor_to_html_test/list_test.exs index db5b0c621..795655d2e 100644 --- a/test/helper/converter/editor_to_html_test/list_test.exs +++ b/test/helper/converter/editor_to_html_test/list_test.exs @@ -64,7 +64,7 @@ defmodule GroupherServer.Test.Helper.Converter.EditorToHTML.List do assert Utils.str_occurence(converted, unorder_list_prefix_class) == 3 end - @tag :wip2 + @tag :wip test "basic order list parse should work" do editor_json = set_items("order_list", [