Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings
This repository was archived by the owner on Nov 8, 2022. It is now read-only.

Commit2a76015

Browse files
committed
refactor(editor): delimiter convert logic
1 parent805e506 commit2a76015

File tree

4 files changed

+78
-6
lines changed

4 files changed

+78
-6
lines changed
Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
defmoduleHelper.Converter.EditorToHtml.Assets.DelimiterIconsdo
2+
@moduledoc"""
3+
svg icons for delimiter block
4+
NOTE: those svg should be sync with frontend svg
5+
"""
6+
7+
@pen_svg"""
8+
<svg height="22px" width="22px" t="1572155354182" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14479" width="200" height="200"><path d="M812.586667 331.306667h79.850666a71.338667 71.338667 0 0 1 71.317334 71.317333v86.784a158.122667 158.122667 0 0 1-158.101334 158.122667h-5.568c-38.890667 130.624-159.893333 225.877333-303.146666 225.877333h-120.469334c-174.656 0-316.224-141.589333-316.224-316.224V342.4a101.44 101.44 0 0 1 101.44-101.461333h550.037334a101.461333 101.461333 0 0 1 100.864 90.346666zM240.938667 60.224c16.64 0 30.122667 13.482667 30.122666 30.101333V150.613333a30.122667 30.122667 0 0 1-60.245333 0V90.346667c0-16.64 13.482667-30.101333 30.122667-30.101334z m180.693333 0c16.64 0 30.122667 13.482667 30.122667 30.101333V150.613333a30.122667 30.122667 0 0 1-60.224 0V90.346667c0-16.64 13.482667-30.101333 30.122666-30.101334z m180.714667 0c16.64 0 30.122667 13.482667 30.122666 30.101333V150.613333a30.122667 30.122667 0 0 1-60.224 0V90.346667c0-16.64 13.482667-30.101333 30.101334-30.101334zM161.706667 301.184a41.216 41.216 0 0 0-41.216 41.216v214.784c0 141.376 114.624 256 256 256h120.469333c141.397333 0 256-114.624 256-256V342.4a41.216 41.216 0 0 0-41.216-41.216H161.706667z m741.845333 188.224v-86.784a11.093333 11.093333 0 0 0-11.093333-11.093333h-79.253334v195.477333a97.898667 97.898667 0 0 0 90.346667-97.6z" p-id="14480"></path></svg>
9+
"""
10+
11+
@coffee_svg"""
12+
<svg height="22px" width="22px" t="1572155354182" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14479" width="200" height="200"><path d="M812.586667 331.306667h79.850666a71.338667 71.338667 0 0 1 71.317334 71.317333v86.784a158.122667 158.122667 0 0 1-158.101334 158.122667h-5.568c-38.890667 130.624-159.893333 225.877333-303.146666 225.877333h-120.469334c-174.656 0-316.224-141.589333-316.224-316.224V342.4a101.44 101.44 0 0 1 101.44-101.461333h550.037334a101.461333 101.461333 0 0 1 100.864 90.346666zM240.938667 60.224c16.64 0 30.122667 13.482667 30.122666 30.101333V150.613333a30.122667 30.122667 0 0 1-60.245333 0V90.346667c0-16.64 13.482667-30.101333 30.122667-30.101334z m180.693333 0c16.64 0 30.122667 13.482667 30.122667 30.101333V150.613333a30.122667 30.122667 0 0 1-60.224 0V90.346667c0-16.64 13.482667-30.101333 30.122666-30.101334z m180.714667 0c16.64 0 30.122667 13.482667 30.122666 30.101333V150.613333a30.122667 30.122667 0 0 1-60.224 0V90.346667c0-16.64 13.482667-30.101333 30.101334-30.101334zM161.706667 301.184a41.216 41.216 0 0 0-41.216 41.216v214.784c0 141.376 114.624 256 256 256h120.469333c141.397333 0 256-114.624 256-256V342.4a41.216 41.216 0 0 0-41.216-41.216H161.706667z m741.845333 188.224v-86.784a11.093333 11.093333 0 0 0-11.093333-11.093333h-79.253334v195.477333a97.898667 97.898667 0 0 0 90.346667-97.6z" p-id="14480"></path></svg>
13+
"""
14+
15+
@keyboard_svg"""
16+
<svg height="20px" width="20px" t="1572104029920" class="icon" viewBox="0 0 1152 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25920" width="200" height="200"><path d="M1056 128H96C42.98 128 0 170.98 0 224v576c0 53.02 42.98 96 96 96h960c53.02 0 96-42.98 96-96V224c0-53.02-42.98-96-96-96z m16 672c0 8.822-7.178 16-16 16H96c-8.822 0-16-7.178-16-16V224c0-8.822 7.178-16 16-16h960c8.822 0 16 7.178 16 16v576zM340 540v-56c0-13.254-10.746-24-24-24h-56c-13.254 0-24 10.746-24 24v56c0 13.254 10.746 24 24 24h56c13.254 0 24-10.746 24-24z m192 0v-56c0-13.254-10.746-24-24-24h-56c-13.254 0-24 10.746-24 24v56c0 13.254 10.746 24 24 24h56c13.254 0 24-10.746 24-24z m192 0v-56c0-13.254-10.746-24-24-24h-56c-13.254 0-24 10.746-24 24v56c0 13.254 10.746 24 24 24h56c13.254 0 24-10.746 24-24z m192 0v-56c0-13.254-10.746-24-24-24h-56c-13.254 0-24 10.746-24 24v56c0 13.254 10.746 24 24 24h56c13.254 0 24-10.746 24-24z m-672 164v-56c0-13.254-10.746-24-24-24H164c-13.254 0-24 10.746-24 24v56c0 13.254 10.746 24 24 24h56c13.254 0 24-10.746 24-24z m768 0v-56c0-13.254-10.746-24-24-24h-56c-13.254 0-24 10.746-24 24v56c0 13.254 10.746 24 24 24h56c13.254 0 24-10.746 24-24zM244 376v-56c0-13.254-10.746-24-24-24H164c-13.254 0-24 10.746-24 24v56c0 13.254 10.746 24 24 24h56c13.254 0 24-10.746 24-24z m192 0v-56c0-13.254-10.746-24-24-24h-56c-13.254 0-24 10.746-24 24v56c0 13.254 10.746 24 24 24h56c13.254 0 24-10.746 24-24z m192 0v-56c0-13.254-10.746-24-24-24h-56c-13.254 0-24 10.746-24 24v56c0 13.254 10.746 24 24 24h56c13.254 0 24-10.746 24-24z m192 0v-56c0-13.254-10.746-24-24-24h-56c-13.254 0-24 10.746-24 24v56c0 13.254 10.746 24 24 24h56c13.254 0 24-10.746 24-24z m192 0v-56c0-13.254-10.746-24-24-24h-56c-13.254 0-24 10.746-24 24v56c0 13.254 10.746 24 24 24h56c13.254 0 24-10.746 24-24z m-196 316v-32c0-13.254-10.746-24-24-24H360c-13.254 0-24 10.746-24 24v32c0 13.254 10.746 24 24 24h432c13.254 0 24-10.746 24-24z" p-id="25921"></path></svg>
17+
"""
18+
19+
@moon_svg"""
20+
<svg height="20px" width="22px" t="1572093894756" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="21571" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M923.306667 554.666667a42.666667 42.666667 0 0 0-44.8-5.973334 343.466667 343.466667 0 0 1-143.786667 31.146667 347.733333 347.733333 0 0 1-347.306667-345.6 366.506667 366.506667 0 0 1 10.666667-85.333333A42.666667 42.666667 0 0 0 341.333333 100.693333a432.64 432.64 0 1 0 597.333334 498.773334 42.666667 42.666667 0 0 0-15.36-44.8z m-405.333334 285.44A347.306667 347.306667 0 0 1 302.08 222.72v11.52a433.066667 433.066667 0 0 0 432.64 432.64 417.706667 417.706667 0 0 0 89.6-9.386667 346.026667 346.026667 0 0 1-306.346667 184.32z" p-id="21572"></path></svg>
21+
"""
22+
23+
@planet_svg"""
24+
<svg height="22px" width="22px" t="1572094486716" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="34210" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M271.4 302c-5 6-9.8 12-14.4 18.4 64.4 72.6 152.2 153 248.4 227.4 75.6 58.4 152.6 110.4 222.8 150.2 11.8 6.6 23.4 13 34.6 18.8 5-6 9.8-12 14.4-18.4 23.4-32.2 36.2-66.4 46.6-107.2 1.6-6.4 3-12.8 4.2-19 31.6-166-71.2-329.8-237-371.8-74-18.8-148.2-10.2-212.6 19.4-42.8 19.8-76.4 45.8-107 82.2z" p-id="34211"></path><path d="M836.4 653.6c-8.2 22-14.8 35-14.8 35 36.4 42.2 49.2 67.8 63.8 92.8 4.8 8.2 14.8 26.2 1.8 24.8-3.4-0.6-7-1.4-11-2.6-42.6-10.8-102.4-37.4-168.6-74.8-71.6-40.6-149.8-93.4-226.6-152.6-102.2-79-195-164.6-261.2-241-30.6-35.2-55.2-68.4-71.4-95.8-4.8-8.2-7.8-12.6-11.2-20.8-5-12.4 10-10.2 14-9.2 29.8 7.6 70 19.8 116.4 47.6 0 0 8.6-9.6 27.8-22.8-45.6-30.8-89.2-55.4-130.4-71-46.2-17.6-82.2-13.6-95 7.4-24.4 39.8 28 144.6 130.6 264-43 172 61.2 346.6 233 390 82.2 20.8 164.8 7.8 233.6-30 76.2 35.2 144.2 57.2 193.8 69.8 47.8 12.2 80.8 11 93.6-9.8 22.2-36.4-24.2-103.6-118.2-201z" p-id="34212"></path></svg>
25+
"""
26+
27+
@foot_svg"""
28+
<svg height="20px" width="20px" t="1572104143510" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3430" width="200" height="200"><path d="M960 174.08c-27.648-162.816-138.24-160.256-262.144-129.024-171.008 48.128-90.112 241.152-15.36 392.704 35.84 70.656 17.408 108.544 17.408 108.544l260.096-8.704s-3.584-104.448 2.56-211.968c3.072-49.664 6.656-98.304-2.56-151.552zM342.528 281.088C218.112 249.856 107.52 246.784 79.872 410.112c-9.216 52.736-5.632 101.376-3.072 151.04 6.144 107.52 2.56 211.968 2.56 211.968l261.12 8.704s-18.432-37.888 17.408-108.544c74.752-151.04 156.16-344.064-15.36-392.192zM76.8 826.88c30.208 206.848 169.472 166.4 237.568 141.824 68.608-25.088 30.208-141.824 30.208-141.824H76.8zM726.016 733.184c68.096 24.576 206.848 65.024 237.056-141.824h-267.264c-0.512 0-38.4 116.736 30.208 141.824z" p-id="3431"></path></svg>
29+
"""
30+
31+
defsvg("pen"),do:@pen_svg
32+
33+
defsvg("coffee"),do:@coffee_svg
34+
35+
defsvg("keyboard"),do:@keyboard_svg
36+
37+
defsvg("moon"),do:@moon_svg
38+
39+
defsvg("planet"),do:@planet_svg
40+
41+
defsvg("foot"),do:@foot_svg
42+
43+
defsvg(_default),do:@pen_svg
44+
end

‎lib/helper/converter/editor_to_html.ex‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@ defmodule Helper.Converter.EditorToHtml do
55
see https://editorjs.io/
66
"""
77
aliasHelper.Converter.HtmlSanitizer
8+
aliasHelper.Converter.EditorToHtml.Assets
9+
10+
aliasAssets.{DelimiterIcons}
811

912
@html_class_prefix"cps-viewer"
1013

@@ -18,8 +21,7 @@ defmodule Helper.Converter.EditorToHtml do
1821
acc<>clean_html
1922
end)
2023

21-
"<div class=\"#{@html_class_prefix}\">#{content}<div>"
22-
# |> IO.inspect(label: "hello")
24+
{:ok,"<div class=\"#{@html_class_prefix}\">#{content}<div>"}
2325
end
2426
end
2527

@@ -85,8 +87,11 @@ defmodule Helper.Converter.EditorToHtml do
8587
# |> IO.inspect(label: "jjj")
8688
end
8789

88-
defpparse_block(%{"type"=>"delimiter"})do
89-
"<div class=\"#{@html_class_prefix}-delimiter\" />"
90+
defpparse_block(%{"type"=>"delimiter","data"=>%{"type"=>type}})do
91+
svg_icon=DelimiterIcons.svg(type)
92+
93+
# TODO: left-wing, righ-wing staff
94+
{:skip_sanitize,"<div class=\"#{@html_class_prefix}-delimiter\">#{svg_icon}</div>"}
9095
end
9196

9297
# IO.inspect(data, label: "parse linkTool")

‎lib/helper/converter/html_sanitizer.ex‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,10 @@ defmodule Helper.Converter.HtmlSanitizer do
3939
Meta.strip_everything_not_covered()
4040
end
4141

42-
defsanitize(html)do
42+
# 跳过一些 sanitize 很麻烦的标签，比如 svg data
43+
defsanitize({:skip_sanitize,html}),do:html
44+
45+
defsanitize(html)whenis_binary(html)do
4346
html|>HtmlSanitizeEx.Scrubber.scrub(Scrubber)
4447
end
4548
end

‎test/helper/converter/editor_to_html_test.exs‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -164,6 +164,12 @@ defmodule GroupherServer.Test.Helper.Converter.EditorToHtml do
164164
"caption" : "desc?",
165165
"alignment" : "left"
166166
}
167+
},
168+
{
169+
"type" : "delimiter",
170+
"data" : {
171+
"type" : "pen"
172+
}
167173
}
168174
],
169175
"version" : "2.15.0"
@@ -191,10 +197,24 @@ defmodule GroupherServer.Test.Helper.Converter.EditorToHtml do
191197
assertconverted["version"]|>is_binary
192198
assertconverted["time"]|>is_integer
193199
end
200+
end
201+
202+
describe"[block convert]"do
203+
# @tag :wip2
204+
# test "allow svg tag" do
205+
# html = """
206+
# <svg height="22px" width="22px" t="1572155354182" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14479" width="200" height="200"><path d="M812.586667 331.306667h79.850666a71.338667 71.338667 0 0 1 71.317334 71.317333v86.784a158.122667 158.122667 0 0 1-158.101334 158.122667h-5.568c-38.890667 130.624-159.893333 225.877333-303.146666 225.877333h-120.469334c-174.656 0-316.224-141.589333-316.224-316.224V342.4a101.44 101.44 0 0 1 101.44-101.461333h550.037334a101.461333 101.461333 0 0 1 100.864 90.346666zM240.938667 60.224c16.64 0 30.122667 13.482667 30.122666 30.101333V150.613333a30.122667 30.122667 0 0 1-60.245333 0V90.346667c0-16.64 13.482667-30.101333 30.122667-30.101334z m180.693333 0c16.64 0 30.122667 13.482667 30.122667 30.101333V150.613333a30.122667 30.122667 0 0 1-60.224 0V90.346667c0-16.64 13.482667-30.101333 30.122666-30.101334z m180.714667 0c16.64 0 30.122667 13.482667 30.122666 30.101333V150.613333a30.122667 30.122667 0 0 1-60.224 0V90.346667c0-16.64 13.482667-30.101333 30.101334-30.101334zM161.706667 301.184a41.216 41.216 0 0 0-41.216 41.216v214.784c0 141.376 114.624 256 256 256h120.469333c141.397333 0 256-114.624 256-256V342.4a41.216 41.216 0 0 0-41.216-41.216H161.706667z m741.845333 188.224v-86.784a11.093333 11.093333 0 0 0-11.093333-11.093333h-79.253334v195.477333a97.898667 97.898667 0 0 0 90.346667-97.6z" p-id="14480"></path></svg>
207+
# """
194208

209+
# IO.inspect(Sanitizer.sanitize(html), label: "hehe")
210+
# # assert Sanitizer.sanitize(html) == "This is <i>text</i>"
211+
# end
212+
@tag:wip2
195213
test"todo"do
196214
# IO.inspect(converted, label: "haha")
197-
Parser.convert_to_html(@real_editor_data)
215+
converted=Parser.convert_to_html(@real_editor_data)
216+
# blocks = converted["blocks"]
217+
IO.inspect(converted,label:"converted ")
198218
# assert not Enum.empty?(converted["blocks"])
199219
end
200220
end

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp