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.

Commita8eb96f

Browse files
author
mydearxym
committed
chore: 🤖 clean-up
wip tags
1 parent76e2ff1 commita8eb96f

File tree

6 files changed

+421
-0
lines changed

6 files changed

+421
-0
lines changed
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+

‎lib/helper/rich_text_parser.ex‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
defmoduleHelper.RichTextParserdo
2+
@moduledoc"""
3+
parse editor.js's json format to raw html and more
4+
5+
see https://editorjs.io/
6+
"""
7+
aliasHelper.Sanitizer
8+
9+
@html_class_prefix"cps-viewer"
10+
11+
defconvert_to_html(string)whenis_binary(string)do
12+
with{:ok,parsed}=string_to_json(string),
13+
true<-valid_editor_data?(parsed)do
14+
content=
15+
Enum.reduce(parsed["blocks"],"",fnblock,acc->
16+
clean_html=block|>parse_block|>Sanitizer.sanitize()
17+
acc<>clean_html
18+
end)
19+
20+
"<div class=\"#{@html_class_prefix}\">#{content}<div>"
21+
|>IO.inspect(label:"hello")
22+
end
23+
end
24+
25+
# IO.inspect(data, label: "parse header")
26+
defpparse_block(%{"type"=>"header","data"=>data})do
27+
text=get_in(data,["text"])
28+
level=get_in(data,["level"])
29+
30+
"<h#{level} class=\"#{@html_class_prefix}-header\">#{text}</h#{level}>"
31+
end
32+
33+
# IO.inspect(data, label: "parse paragraph")
34+
defpparse_block(%{"type"=>"paragraph","data"=>data})do
35+
text=get_in(data,["text"])
36+
37+
"<p class=\"#{@html_class_prefix}-paragraph\">#{text}</p>"
38+
end
39+
40+
# IO.inspect(data, label: "parse image")
41+
defpparse_block(%{"type"=>"image","data"=>data})do
42+
url=get_in(data,["file","url"])
43+
44+
"<div class=\"#{@html_class_prefix}-image\"><img src=\"#{url}\"></div>"
45+
# |> IO.inspect(label: "iamge ret")
46+
end
47+
48+
defpparse_block(%{"type"=>"list","data"=>%{"style"=>"unordered","items"=>items}})do
49+
content=
50+
Enum.reduce(items,"",fnitem,acc->
51+
acc<>"<li>#{item}</li>"
52+
end)
53+
54+
"<ul>#{content}</ul>"
55+
end
56+
57+
defpparse_block(%{"type"=>"list","data"=>%{"style"=>"ordered","items"=>items}})do
58+
content=
59+
Enum.reduce(items,"",fnitem,acc->
60+
acc<>"<li>#{item}</li>"
61+
end)
62+
63+
"<ol>#{content}</ol>"
64+
end
65+
66+
# IO.inspect(items, label: "checklist items")
67+
# TODO: add item class
68+
defpparse_block(%{"type"=>"checklist","data"=>%{"items"=>items}})do
69+
content=
70+
Enum.reduce(items,"",fnitem,acc->
71+
text=Map.get(item,"text")
72+
checked=Map.get(item,"checked")
73+
74+
casecheckeddo
75+
true->
76+
acc<>"<div><input type=\"checkbox\" checked />#{text}</div>"
77+
78+
false->
79+
acc<>"<div><input type=\"checkbox\" />#{text}</div>"
80+
end
81+
end)
82+
83+
"<div class=\"#{@html_class_prefix}-checklist\">#{content}</div>"
84+
# |> IO.inspect(label: "jjj")
85+
end
86+
87+
defpparse_block(%{"type"=>"delimiter"})do
88+
"<div class=\"#{@html_class_prefix}-delimiter\" />"
89+
end
90+
91+
# IO.inspect(data, label: "parse linkTool")
92+
# TODO: parse the link-card info
93+
defpparse_block(%{"type"=>"linkTool","data"=>data})do
94+
link=get_in(data,["link"])
95+
96+
"<div class=\"#{@html_class_prefix}-linker\"><a href=\"#{link}\" target=\"_blank\">#{link}</a></div>"
97+
# |> IO.inspect(label: "linkTool ret")
98+
end
99+
100+
# IO.inspect(data, label: "parse quote")
101+
defpparse_block(%{"type"=>"quote","data"=>data})do
102+
text=get_in(data,["text"])
103+
104+
"<div class=\"#{@html_class_prefix}-quote\">#{text}</div>"
105+
# |> IO.inspect(label: "quote ret")
106+
end
107+
108+
defpparse_block(_block)do
109+
# IO.puts("[unknow block]")
110+
"[unknow block]"
111+
end
112+
113+
defstring_to_json(string),do:Jason.decode(string)
114+
115+
defpvalid_editor_data?(map)whenis_map(map)do
116+
Map.has_key?(map,"time")and
117+
Map.has_key?(map,"version")and
118+
Map.has_key?(map,"blocks")and
119+
is_list(map["blocks"])and
120+
is_binary(map["version"])and
121+
is_integer(map["time"])
122+
end
123+
end

‎lib/helper/sanitizer.ex‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
defmoduleHelper.Sanitizerdo
2+
@moduledoc"""
3+
Sanitizer user input from editor.js or other
4+
content contains html tags
5+
see; http://katafrakt.me/2016/09/03/custom-rules-in-htmlsanitizeex/
6+
"""
7+
defmoduleScrubberdo
8+
@moduledocfalse
9+
10+
requireHtmlSanitizeEx.Scrubber.Meta
11+
aliasHtmlSanitizeEx.Scrubber.Meta
12+
13+
Meta.remove_cdata_sections_before_scrub()
14+
Meta.strip_comments()
15+
16+
Meta.allow_tag_with_uri_attributes("a",["href"],["http","https"])
17+
Meta.allow_tag_with_these_attributes("a",["name","title","class"])
18+
19+
# Meta.allow_tag_with_these_attributes("strong", [])
20+
# Meta.allow_tag_with_these_attributes("em", [])
21+
Meta.allow_tag_with_these_attributes("b",[])
22+
Meta.allow_tag_with_these_attributes("i",[])
23+
Meta.allow_tag_with_these_attributes("mark",["class"])
24+
Meta.allow_tag_with_these_attributes("code",["class"])
25+
# Meta.allow_tag_with_these_attributes("p", [])
26+
Meta.allow_tag_with_these_attributes("h1",["class"])
27+
Meta.allow_tag_with_these_attributes("h2",["class"])
28+
Meta.allow_tag_with_these_attributes("h3",["class"])
29+
Meta.allow_tag_with_these_attributes("h4",["class"])
30+
Meta.allow_tag_with_these_attributes("h5",["class"])
31+
Meta.allow_tag_with_these_attributes("h6",["class"])
32+
Meta.allow_tag_with_these_attributes("p",["class"])
33+
Meta.allow_tag_with_these_attributes("img",["class","src"])
34+
Meta.allow_tag_with_these_attributes("div",["class"])
35+
Meta.allow_tag_with_these_attributes("ul",["class"])
36+
Meta.allow_tag_with_these_attributes("ol",["class"])
37+
Meta.allow_tag_with_these_attributes("li",["class"])
38+
39+
Meta.strip_everything_not_covered()
40+
end
41+
42+
defsanitize(html)do
43+
html|>HtmlSanitizeEx.Scrubber.scrub(Scrubber)
44+
end
45+
end
Lines changed: 201 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,201 @@
1+
defmoduleGroupherServer.Test.Helper.RichTextParserTestdo
2+
@moduledocfalse
3+
4+
useGroupherServerWeb.ConnCase,async:true
5+
6+
aliasHelper.RichTextParser,as:Parser
7+
8+
@real_editor_data~S({
9+
"time" : 1567250876713,
10+
"blocks" : [
11+
{
12+
"type" : "header",
13+
"data" : {
14+
"text" : "Editor.js",
15+
"level" : 2
16+
}
17+
},
18+
{
19+
"type" : "paragraph",
20+
"data" : {
21+
"text" : "Hey. Meet the new Editor. On this page you can see it in action — try to edit this text."
22+
}
23+
},
24+
{
25+
"type" : "header",
26+
"data" : {
27+
"text" : "Key features",
28+
"level" : 3
29+
}
30+
},
31+
{
32+
"type" : "list",
33+
"data" : {
34+
"style" : "unordered",
35+
"items" : [
36+
"It is a block-styled editor",
37+
"It returns clean data output in JSON",
38+
"Designed to be extendable and pluggable with a simple API"
39+
]
40+
}
41+
},
42+
{
43+
"type" : "header",
44+
"data" : {
45+
"text" : "Key features",
46+
"level" : 3
47+
}
48+
},
49+
{
50+
"type" : "list",
51+
"data" : {
52+
"style" : "ordered",
53+
"items" : [
54+
"It is a block-styled editor",
55+
"It returns clean data output in JSON",
56+
"Designed to be extendable and pluggable with a simple API"
57+
]
58+
}
59+
},
60+
{
61+
"type" : "header",
62+
"data" : {
63+
"text" : "What does it mean «block-styled editor»",
64+
"level" : 3
65+
}
66+
},
67+
{
68+
"type" : "checklist",
69+
"data" : {
70+
"items" : [
71+
{
72+
"text" : "This is a block-styled editor",
73+
"checked" : true
74+
},
75+
{
76+
"text" : "Clean output data",
77+
"checked" : false
78+
},
79+
{
80+
"text" : "Simple and powerful API",
81+
"checked" : true
82+
}
83+
]
84+
}
85+
},
86+
{
87+
"type" : "paragraph",
88+
"data" : {
89+
"text" : "Workspace in classic editors is made of a single contenteditable element, used to create different HTML markups. Editor.js <mark class=\"cdx-marker\">workspace consists of separate Blocks: paragraphs, headings, images, lists, quotes, etc</mark>. Each of them is an independent contenteditable element (or more complex structure\) provided by Plugin and united by Editor's Core."
90+
}
91+
},
92+
{
93+
"type" : "paragraph",
94+
"data" : {
95+
"text" : "There are dozens of <a href=\"https://github.com/editor-js\">ready-to-use Blocks</a> and the <a href=\"https://editorjs.io/creating-a-block-tool\">simple API</a> for creation any Block you need. For example, you can implement Blocks for Tweets, Instagram posts, surveys and polls, CTA-buttons and even games."
96+
}
97+
},
98+
{
99+
"type" : "header",
100+
"data" : {
101+
"text" : "What does it mean clean data output",
102+
"level" : 3
103+
}
104+
},
105+
{
106+
"type" : "paragraph",
107+
"data" : {
108+
"text" : "Classic WYSIWYG-editors produce raw HTML-markup with both content data and content appearance. On the contrary, Editor.js outputs JSON object with data of each Block. You can see an example below"
109+
}
110+
},
111+
{
112+
"type" : "paragraph",
113+
"data" : {
114+
"text" : "Given data can be used as you want: render with HTML for <code class=\"inline-code\">Web clients</code>, render natively for <code class=\"inline-code\">mobile apps</code>, create markup for <code class=\"inline-code\">Facebook Instant Articles</code> or <code class=\"inline-code\">Google AMP</code>, generate an <code class=\"inline-code\">audio version</code> and so on."
115+
}
116+
},
117+
{
118+
"type" : "paragraph",
119+
"data" : {
120+
"text" : "Clean data is useful to sanitize, validate and process on the backend."
121+
}
122+
},
123+
{
124+
"type" : "delimiter",
125+
"data" : {}
126+
},
127+
{
128+
"type" : "paragraph",
129+
"data" : {
130+
"text" : "We have been working on this project more than three years. Several large media projects help us to test and debug the Editor, to make it's core more stable. At the same time we significantly improved the API. Now, it can be used to create any plugin for any task. Hope you enjoy. 😏"
131+
}
132+
},
133+
{
134+
"type" : "image",
135+
"data" : {
136+
"file" : {
137+
"url" : "https://codex.so/upload/redactor_images/o_e48549d1855c7fc1807308dd14990126.jpg"
138+
},
139+
"caption" : "",
140+
"withBorder" : true,
141+
"stretched" : false,
142+
"withBackground" : false
143+
}
144+
},
145+
{
146+
"type" : "linkTool",
147+
"data" : {
148+
"link" : "https://www.github.com",
149+
"meta" : {
150+
"url" : "https://www.github.com",
151+
"domain" : "www.github.com",
152+
"title" : "Build software better, together",
153+
"description" : "GitHub is where people build software. More than 40 million people use GitHub to discover, fork, and contribute to over 100 million projects.",
154+
"image" : {
155+
"url" : "https://github.githubassets.com/images/modules/open_graph/github-logo.png"
156+
}
157+
}
158+
}
159+
},
160+
{
161+
"type" : "quote",
162+
"data" : {
163+
"text" : "quote demo text",
164+
"caption" : "desc?",
165+
"alignment" : "left"
166+
}
167+
}
168+
],
169+
"version" : "2.15.0"
170+
})
171+
172+
describe"[basic convert]"do
173+
test"basic string_json should work"do
174+
string=~S({"time":1566184478687,"blocks":[{}],"version":"2.15.0"})
175+
{:ok,converted}=Parser.string_to_json(string)
176+
177+
assertconverted["time"]==1_566_184_478_687
178+
assertconverted["version"]=="2.15.0"
179+
end
180+
181+
test"invalid string data should get error"do
182+
string=~S({"time":1566184478687,"blocks":[{}],"version":})
183+
assert{:error,converted}=Parser.string_to_json(string)
184+
end
185+
186+
test"real-world editor.js data should work"do
187+
{:ok,converted}=Parser.string_to_json(@real_editor_data)
188+
189+
assertnotEnum.empty?(converted["blocks"])
190+
assertconverted["blocks"]|>is_list
191+
assertconverted["version"]|>is_binary
192+
assertconverted["time"]|>is_integer
193+
end
194+
195+
test"todo"do
196+
# IO.inspect(converted, label: "haha")
197+
Parser.convert_to_html(@real_editor_data)
198+
# assert not Enum.empty?(converted["blocks"])
199+
end
200+
end
201+
end

0 commit comments

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