storyblok-richtext-renderer 0.0.5 → 0.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/README.md +30 -5
- data/lib/storyblok/richtext/html_renderer/marks/anchor.rb +17 -0
- data/lib/storyblok/richtext/html_renderer/marks/highlight.rb +20 -0
- data/lib/storyblok/richtext/html_renderer/marks/italic.rb +1 -1
- data/lib/storyblok/richtext/html_renderer/marks/link.rb +20 -1
- data/lib/storyblok/richtext/html_renderer/marks/subscript.rb +14 -0
- data/lib/storyblok/richtext/html_renderer/marks/superscript.rb +14 -0
- data/lib/storyblok/richtext/html_renderer/marks/text_style.rb +20 -0
- data/lib/storyblok/richtext/html_renderer/nodes/emoji.rb +23 -0
- data/lib/storyblok/richtext/html_renderer.rb +34 -2
- data/lib/storyblok/richtext/version.rb +1 -1
- data/spec/richtext_spec.rb +442 -1
- metadata +12 -14
- data/.DS_Store +0 -0
- data/.ruby-version +0 -1
- data/Gemfile.lock +0 -33
- data/lib/.DS_Store +0 -0
- data/lib/storyblok/.DS_Store +0 -0
- data/lib/storyblok/richtext/html_renderer/.DS_Store +0 -0
- data/lib/storyblok/richtext/html_renderer/nodes/.DS_Store +0 -0
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: a0434d76180ca753632cfcb0397e5891d40b0f2b02c47a55b56ae914d38ec2ab
|
4
|
+
data.tar.gz: a342fe4acbcb83b28d37487cdff0e46f44753a7f8f740c47339bd7751875e032
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: b2779bcd262dc381c6454f5edbeb8de19f60e20ff1611d7756af07c1fef011a420f5d47b5c24f57531e6517565aedb3299fa27cbed66a67ca3f874d7515eaa12
|
7
|
+
data.tar.gz: d5949e45bc9a4b1c44bfa5bb072b406c54a3a964d1f00d7ac9b6ed17dae0dfa96a44270d81fb9b0d7e1e298a99719170b60c85fa45bb88ad6424fc6ed063aa88
|
data/README.md
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
# About
|
2
2
|
|
3
|
-
This
|
3
|
+
This package allows you to get an HTML string from the [richtext field](https://www.storyblok.com/docs/richtext-field) of Storyblok.
|
4
4
|
|
5
5
|
## How to install
|
6
6
|
|
@@ -10,13 +10,38 @@ Add the gem to your Gemfile
|
|
10
10
|
gem 'storyblok-richtext-renderer'
|
11
11
|
```
|
12
12
|
|
13
|
-
|
13
|
+
## Usage
|
14
|
+
|
15
|
+
Instantiate the `Resolver` class:
|
14
16
|
|
15
17
|
```ruby
|
16
|
-
|
18
|
+
require_relative '../lib/storyblok/richtext'
|
19
|
+
|
17
20
|
renderer = Storyblok::Richtext::HtmlRenderer.new
|
18
|
-
|
19
|
-
|
21
|
+
|
22
|
+
```
|
23
|
+
|
24
|
+
Use the function `render()` to get the html string from your richtext field.
|
25
|
+
|
26
|
+
```ruby
|
27
|
+
# previous code...
|
28
|
+
|
29
|
+
doc = {
|
30
|
+
'type' => 'doc',
|
31
|
+
'content' => [
|
32
|
+
{
|
33
|
+
'type' => 'horizontal_rule'
|
34
|
+
}
|
35
|
+
]
|
36
|
+
}
|
37
|
+
|
38
|
+
renderer.render(doc) # renders a html string: '<hr />'
|
39
|
+
```
|
40
|
+
|
41
|
+
### Run all tests
|
42
|
+
|
43
|
+
```bash
|
44
|
+
rspec spec/richtext_spec.rb
|
20
45
|
```
|
21
46
|
|
22
47
|
### License
|
@@ -0,0 +1,20 @@
|
|
1
|
+
module Storyblok::Richtext
|
2
|
+
module Marks
|
3
|
+
class Highlight < Mark
|
4
|
+
|
5
|
+
def matching
|
6
|
+
@node['type'] === 'highlight'
|
7
|
+
end
|
8
|
+
|
9
|
+
def tag
|
10
|
+
attrs = {
|
11
|
+
style: "background-color:#{@node['attrs']['color']};"
|
12
|
+
}
|
13
|
+
[{
|
14
|
+
tag: "span",
|
15
|
+
attrs: attrs
|
16
|
+
}]
|
17
|
+
end
|
18
|
+
end
|
19
|
+
end
|
20
|
+
end
|
@@ -7,9 +7,28 @@ module Storyblok::Richtext
|
|
7
7
|
end
|
8
8
|
|
9
9
|
def tag
|
10
|
+
attrs = @node['attrs']
|
11
|
+
|
12
|
+
if attrs['anchor'].is_a?(String) and !attrs['anchor'].empty?
|
13
|
+
attrs['href'] = "#{attrs['href']}##{attrs['anchor']}"
|
14
|
+
attrs.delete('anchor')
|
15
|
+
end
|
16
|
+
|
17
|
+
if attrs['linktype'].is_a?(String) and attrs['linktype'] == 'email'
|
18
|
+
emailContainer = attrs['href']
|
19
|
+
attrs['href'] = "mailto:#{emailContainer}"
|
20
|
+
end
|
21
|
+
|
22
|
+
if attrs['custom']
|
23
|
+
for item in attrs['custom'] do
|
24
|
+
attrs[item[0]] = item[1]
|
25
|
+
end
|
26
|
+
attrs.delete('custom')
|
27
|
+
end
|
28
|
+
|
10
29
|
[{
|
11
30
|
tag: "a",
|
12
|
-
attrs:
|
31
|
+
attrs: attrs
|
13
32
|
}]
|
14
33
|
end
|
15
34
|
end
|
@@ -0,0 +1,20 @@
|
|
1
|
+
module Storyblok::Richtext
|
2
|
+
module Marks
|
3
|
+
class TextStyle < Mark
|
4
|
+
|
5
|
+
def matching
|
6
|
+
@node['type'] === 'textStyle'
|
7
|
+
end
|
8
|
+
|
9
|
+
def tag
|
10
|
+
attrs = {
|
11
|
+
style: "background-color:#{@node['attrs']['color']};"
|
12
|
+
}
|
13
|
+
[{
|
14
|
+
tag: "span",
|
15
|
+
attrs: attrs
|
16
|
+
}]
|
17
|
+
end
|
18
|
+
end
|
19
|
+
end
|
20
|
+
end
|
@@ -0,0 +1,23 @@
|
|
1
|
+
module Storyblok::Richtext
|
2
|
+
module Nodes
|
3
|
+
class Emoji < Node
|
4
|
+
|
5
|
+
def matching
|
6
|
+
@node['type'] === 'emoji'
|
7
|
+
end
|
8
|
+
|
9
|
+
def tag
|
10
|
+
attrs = {
|
11
|
+
'data-type' => 'emoji',
|
12
|
+
'data-name' => @node['attrs']['name'],
|
13
|
+
'emoji' => @node['attrs']['emoji']
|
14
|
+
}
|
15
|
+
|
16
|
+
[{
|
17
|
+
tag: "span",
|
18
|
+
attrs: attrs
|
19
|
+
}]
|
20
|
+
end
|
21
|
+
end
|
22
|
+
end
|
23
|
+
end
|
@@ -11,6 +11,11 @@ module Storyblok
|
|
11
11
|
require_relative "html_renderer/marks/italic"
|
12
12
|
require_relative "html_renderer/marks/link"
|
13
13
|
require_relative "html_renderer/marks/styled"
|
14
|
+
require_relative "html_renderer/marks/anchor"
|
15
|
+
require_relative "html_renderer/marks/highlight"
|
16
|
+
require_relative "html_renderer/marks/subscript"
|
17
|
+
require_relative "html_renderer/marks/superscript"
|
18
|
+
require_relative "html_renderer/marks/text_style"
|
14
19
|
require_relative "html_renderer/nodes/node"
|
15
20
|
require_relative "html_renderer/nodes/bullet_list"
|
16
21
|
require_relative "html_renderer/nodes/code_block"
|
@@ -25,6 +30,7 @@ module Storyblok
|
|
25
30
|
require_relative "html_renderer/nodes/horizontal_rule"
|
26
31
|
require_relative "html_renderer/nodes/text"
|
27
32
|
require_relative "html_renderer/nodes/blok"
|
33
|
+
require_relative "html_renderer/nodes/emoji"
|
28
34
|
|
29
35
|
class HtmlRenderer
|
30
36
|
def initialize
|
@@ -36,7 +42,12 @@ module Storyblok
|
|
36
42
|
Storyblok::Richtext::Marks::Code,
|
37
43
|
Storyblok::Richtext::Marks::Italic,
|
38
44
|
Storyblok::Richtext::Marks::Link,
|
39
|
-
Storyblok::Richtext::Marks::Styled
|
45
|
+
Storyblok::Richtext::Marks::Styled,
|
46
|
+
Storyblok::Richtext::Marks::Anchor,
|
47
|
+
Storyblok::Richtext::Marks::Highlight,
|
48
|
+
Storyblok::Richtext::Marks::Subscript,
|
49
|
+
Storyblok::Richtext::Marks::Superscript,
|
50
|
+
Storyblok::Richtext::Marks::TextStyle
|
40
51
|
]
|
41
52
|
@nodes = [
|
42
53
|
Storyblok::Richtext::Nodes::HorizontalRule,
|
@@ -50,7 +61,8 @@ module Storyblok
|
|
50
61
|
Storyblok::Richtext::Nodes::OrderedList,
|
51
62
|
Storyblok::Richtext::Nodes::Paragraph,
|
52
63
|
Storyblok::Richtext::Nodes::Text,
|
53
|
-
Storyblok::Richtext::Nodes::Blok
|
64
|
+
Storyblok::Richtext::Nodes::Blok,
|
65
|
+
Storyblok::Richtext::Nodes::Emoji
|
54
66
|
]
|
55
67
|
end
|
56
68
|
|
@@ -99,6 +111,8 @@ module Storyblok
|
|
99
111
|
html.push(render_tag(node.single_tag))
|
100
112
|
elsif node and node.html
|
101
113
|
html.push(node.html)
|
114
|
+
elsif item['type'] == 'emoji'
|
115
|
+
html.push(render_emoji(item))
|
102
116
|
end
|
103
117
|
|
104
118
|
html.push(render_closing_tag(node.tag)) if node and node.tag
|
@@ -159,6 +173,24 @@ module Storyblok
|
|
159
173
|
end
|
160
174
|
found.first
|
161
175
|
end
|
176
|
+
|
177
|
+
def render_emoji(item)
|
178
|
+
if item['attrs']['emoji']
|
179
|
+
return item['attrs']['emoji']
|
180
|
+
end
|
181
|
+
|
182
|
+
emoji_image_container = [{
|
183
|
+
tag: 'img',
|
184
|
+
attrs: {
|
185
|
+
src: item['attrs']['fallbackImage'],
|
186
|
+
draggable: 'false',
|
187
|
+
loading: 'lazy',
|
188
|
+
align: 'absmiddle',
|
189
|
+
},
|
190
|
+
}]
|
191
|
+
|
192
|
+
render_tag(emoji_image_container, ' /')
|
193
|
+
end
|
162
194
|
end
|
163
195
|
end
|
164
196
|
end
|
data/spec/richtext_spec.rb
CHANGED
@@ -17,12 +17,453 @@ describe 'richtext' do
|
|
17
17
|
'class' => 'red'
|
18
18
|
}
|
19
19
|
}
|
20
|
+
],
|
21
|
+
},
|
22
|
+
{
|
23
|
+
'type' => 'paragraph',
|
24
|
+
'content' => [
|
25
|
+
{
|
26
|
+
'type' => 'text',
|
27
|
+
'marks' => [
|
28
|
+
{
|
29
|
+
'type' => 'i'
|
30
|
+
}
|
31
|
+
],
|
32
|
+
'text' => 'Italic'
|
33
|
+
}
|
34
|
+
]
|
35
|
+
},
|
36
|
+
{
|
37
|
+
'type' => 'paragraph',
|
38
|
+
'content' => [
|
39
|
+
{
|
40
|
+
'type' => 'text',
|
41
|
+
'marks' => [
|
42
|
+
{
|
43
|
+
'type' => 'em'
|
44
|
+
}
|
45
|
+
],
|
46
|
+
'text' => 'Italic too'
|
47
|
+
}
|
48
|
+
]
|
49
|
+
}
|
50
|
+
]
|
51
|
+
}
|
52
|
+
|
53
|
+
renderer = Storyblok::Richtext::HtmlRenderer.new
|
54
|
+
expect(renderer.render(doc)).to eq('<span class="red">red text</span><p><i>Italic</i></p><p><i>Italic too</i></p>')
|
55
|
+
end
|
56
|
+
end
|
57
|
+
|
58
|
+
describe 'richtext' do
|
59
|
+
it 'horizontal_rule to generate hr tag' do
|
60
|
+
doc = {
|
61
|
+
'type' => 'doc',
|
62
|
+
'content' => [
|
63
|
+
{
|
64
|
+
'type' => 'horizontal_rule'
|
65
|
+
}
|
66
|
+
]
|
67
|
+
}
|
68
|
+
|
69
|
+
renderer = Storyblok::Richtext::HtmlRenderer.new
|
70
|
+
expect(renderer.render(doc)).to eq('<hr />')
|
71
|
+
end
|
72
|
+
end
|
73
|
+
|
74
|
+
describe 'richtext' do
|
75
|
+
it 'hard_break to generate br tag' do
|
76
|
+
doc = {
|
77
|
+
'type' => 'doc',
|
78
|
+
'content' => [
|
79
|
+
{
|
80
|
+
'type' => 'hard_break'
|
81
|
+
}
|
82
|
+
]
|
83
|
+
}
|
84
|
+
|
85
|
+
renderer = Storyblok::Richtext::HtmlRenderer.new
|
86
|
+
expect(renderer.render(doc)).to eq('<br />')
|
87
|
+
end
|
88
|
+
end
|
89
|
+
|
90
|
+
describe 'richtext' do
|
91
|
+
it 'image to generate img tag' do
|
92
|
+
doc = {
|
93
|
+
'type' => 'doc',
|
94
|
+
'content' => [
|
95
|
+
{
|
96
|
+
'type' => 'image',
|
97
|
+
'attrs' => {
|
98
|
+
'src' => 'https://asset'
|
99
|
+
}
|
100
|
+
}
|
101
|
+
]
|
102
|
+
}
|
103
|
+
|
104
|
+
renderer = Storyblok::Richtext::HtmlRenderer.new
|
105
|
+
expect(renderer.render(doc)).to eq('<img src="https://asset" />')
|
106
|
+
end
|
107
|
+
end
|
108
|
+
|
109
|
+
describe 'richtext' do
|
110
|
+
it 'link to generate a tag' do
|
111
|
+
doc = {
|
112
|
+
'type' => 'doc',
|
113
|
+
'content' => [
|
114
|
+
{
|
115
|
+
'text' => 'link text',
|
116
|
+
'type' => 'text',
|
117
|
+
'marks' => [
|
118
|
+
{
|
119
|
+
'type' => 'link',
|
120
|
+
'attrs' => {
|
121
|
+
'href' => '/link',
|
122
|
+
'target' => '_blank',
|
123
|
+
'uuid' => '300aeadc-c82d-4529-9484-f3f8f09cf9f5'
|
124
|
+
}
|
125
|
+
}
|
126
|
+
]
|
127
|
+
}
|
128
|
+
]
|
129
|
+
}
|
130
|
+
|
131
|
+
renderer = Storyblok::Richtext::HtmlRenderer.new
|
132
|
+
expect(renderer.render(doc)).to eq('<a href="/link" target="_blank" uuid="300aeadc-c82d-4529-9484-f3f8f09cf9f5">link text</a>')
|
133
|
+
end
|
134
|
+
end
|
135
|
+
|
136
|
+
describe 'richtext' do
|
137
|
+
it 'code_block to generate a pre and code tag' do
|
138
|
+
doc = {
|
139
|
+
'type' => 'doc',
|
140
|
+
'content' => [
|
141
|
+
{
|
142
|
+
'type' => 'code_block',
|
143
|
+
'attrs' => {},
|
144
|
+
'content' => [{
|
145
|
+
'text' => 'code',
|
146
|
+
'type' => 'text'
|
147
|
+
}]
|
148
|
+
}
|
149
|
+
]
|
150
|
+
}
|
151
|
+
|
152
|
+
renderer = Storyblok::Richtext::HtmlRenderer.new
|
153
|
+
expect(renderer.render(doc)).to eq('<pre><code>code</code></pre>')
|
154
|
+
end
|
155
|
+
end
|
156
|
+
|
157
|
+
describe 'richtext' do
|
158
|
+
it 'anchor links test' do
|
159
|
+
doc = {
|
160
|
+
'type' => 'doc',
|
161
|
+
'content' => [
|
162
|
+
{
|
163
|
+
'text' => 'link text',
|
164
|
+
'type' => 'text',
|
165
|
+
'marks' => [
|
166
|
+
{
|
167
|
+
'type' => 'link',
|
168
|
+
'attrs' => {
|
169
|
+
'href' => '/link',
|
170
|
+
'target' => '_blank',
|
171
|
+
'uuid' => '300aeadc-c82d-4529-9484-f3f8f09cf9f5',
|
172
|
+
'anchor' => 'anchor-text'
|
173
|
+
}
|
174
|
+
}
|
175
|
+
]
|
176
|
+
}
|
177
|
+
]
|
178
|
+
}
|
179
|
+
|
180
|
+
renderer = Storyblok::Richtext::HtmlRenderer.new
|
181
|
+
expect(renderer.render(doc)).to eq('<a href="/link#anchor-text" target="_blank" uuid="300aeadc-c82d-4529-9484-f3f8f09cf9f5">link text</a>')
|
182
|
+
end
|
183
|
+
end
|
184
|
+
|
185
|
+
describe 'richtext' do
|
186
|
+
it 'link to generate a tag with an email' do
|
187
|
+
doc = {
|
188
|
+
'type' => 'doc',
|
189
|
+
'content' => [
|
190
|
+
{
|
191
|
+
'text' => 'an email link',
|
192
|
+
'type' => 'text',
|
193
|
+
'marks' => [
|
194
|
+
{
|
195
|
+
'type' => 'link',
|
196
|
+
'attrs' => {
|
197
|
+
'href' => 'email@client.com',
|
198
|
+
'target' => '_blank',
|
199
|
+
'uuid' => nil,
|
200
|
+
'linktype' => 'email'
|
201
|
+
}
|
202
|
+
}
|
203
|
+
]
|
204
|
+
}
|
205
|
+
]
|
206
|
+
}
|
207
|
+
|
208
|
+
renderer = Storyblok::Richtext::HtmlRenderer.new
|
209
|
+
expect(renderer.render(doc)).to eq('<a href="mailto:email@client.com" target="_blank" linktype="email">an email link</a>')
|
210
|
+
end
|
211
|
+
end
|
212
|
+
|
213
|
+
describe 'richtext' do
|
214
|
+
it 'should render a custom attribute in a link tag' do
|
215
|
+
doc = {
|
216
|
+
'type' => 'paragraph',
|
217
|
+
'content' => [
|
218
|
+
{
|
219
|
+
'text' => 'A nice link with custom attr',
|
220
|
+
'type' => 'text',
|
221
|
+
'marks' => [
|
222
|
+
{
|
223
|
+
'type' => 'link',
|
224
|
+
'attrs' => {
|
225
|
+
'href' => 'www.storyblok.com',
|
226
|
+
'uuid' => '300aeadc-c82d-4529-9484-f3f8f09cf9f5',
|
227
|
+
# 'anchor' => nil,
|
228
|
+
'custom' => {
|
229
|
+
'rel' => 'nofollow',
|
230
|
+
'title' => 'nice test',
|
231
|
+
},
|
232
|
+
'target' => '_blank',
|
233
|
+
'linktype' => 'url'
|
234
|
+
}
|
235
|
+
}
|
236
|
+
]
|
237
|
+
}
|
238
|
+
]
|
239
|
+
}
|
240
|
+
|
241
|
+
renderer = Storyblok::Richtext::HtmlRenderer.new
|
242
|
+
expect(renderer.render(doc)).to eq('<a href="www.storyblok.com" uuid="300aeadc-c82d-4529-9484-f3f8f09cf9f5" target="_blank" linktype="url" rel="nofollow" title="nice test">A nice link with custom attr</a>')
|
243
|
+
end
|
244
|
+
end
|
245
|
+
|
246
|
+
describe 'richtext' do
|
247
|
+
it 'should render a subscript' do
|
248
|
+
doc = {
|
249
|
+
'type' => 'paragraph',
|
250
|
+
'content' => [
|
251
|
+
{
|
252
|
+
'text' => 'A Subscript text',
|
253
|
+
'type' => 'text',
|
254
|
+
'marks' => [
|
255
|
+
{
|
256
|
+
'type' => 'subscript'
|
257
|
+
}
|
258
|
+
]
|
259
|
+
}
|
260
|
+
]
|
261
|
+
}
|
262
|
+
|
263
|
+
renderer = Storyblok::Richtext::HtmlRenderer.new
|
264
|
+
expect(renderer.render(doc)).to eq('<sub>A Subscript text</sub>')
|
265
|
+
end
|
266
|
+
end
|
267
|
+
|
268
|
+
describe 'richtext' do
|
269
|
+
it 'should render a superscript' do
|
270
|
+
doc = {
|
271
|
+
'type' => 'paragraph',
|
272
|
+
'content' => [
|
273
|
+
{
|
274
|
+
'text' => 'A Superscript text',
|
275
|
+
'type' => 'text',
|
276
|
+
'marks' => [
|
277
|
+
{
|
278
|
+
'type' => 'superscript'
|
279
|
+
}
|
280
|
+
]
|
281
|
+
}
|
282
|
+
]
|
283
|
+
}
|
284
|
+
|
285
|
+
renderer = Storyblok::Richtext::HtmlRenderer.new
|
286
|
+
expect(renderer.render(doc)).to eq('<sup>A Superscript text</sup>')
|
287
|
+
end
|
288
|
+
end
|
289
|
+
|
290
|
+
describe 'richtext' do
|
291
|
+
it 'should render a anchor in the text' do
|
292
|
+
doc = {
|
293
|
+
"type" => "doc",
|
294
|
+
"content" => [
|
295
|
+
{
|
296
|
+
"type" => "paragraph",
|
297
|
+
"content" => [
|
298
|
+
{
|
299
|
+
"text" => "Paragraph with anchor in the midle",
|
300
|
+
"type" => "text",
|
301
|
+
"marks" => [
|
302
|
+
{
|
303
|
+
"type" => "anchor",
|
304
|
+
"attrs" => {
|
305
|
+
"id" => "test"
|
306
|
+
}
|
307
|
+
}
|
308
|
+
]
|
309
|
+
}
|
310
|
+
]
|
311
|
+
}
|
312
|
+
]
|
313
|
+
}
|
314
|
+
|
315
|
+
renderer = Storyblok::Richtext::HtmlRenderer.new
|
316
|
+
expect(renderer.render(doc)).to eq('<p><span id="test">Paragraph with anchor in the midle</span></p>')
|
317
|
+
end
|
318
|
+
end
|
319
|
+
|
320
|
+
describe 'richtext' do
|
321
|
+
it 'should render a h1 title with a anchor in the middle of the text' do
|
322
|
+
doc = {
|
323
|
+
'type' => 'doc',
|
324
|
+
'content' => [
|
325
|
+
{
|
326
|
+
'type' => 'heading',
|
327
|
+
'attrs' => {
|
328
|
+
'level' => '1'
|
329
|
+
},
|
330
|
+
'content' => [
|
331
|
+
{
|
332
|
+
'text' => 'Title with ',
|
333
|
+
'type' => 'text'
|
334
|
+
},
|
335
|
+
{
|
336
|
+
'text' => 'Anchor',
|
337
|
+
'type' => 'text',
|
338
|
+
'marks' => [
|
339
|
+
{
|
340
|
+
'type' => 'anchor',
|
341
|
+
'attrs' => {
|
342
|
+
'id' => 'test1'
|
343
|
+
}
|
344
|
+
}
|
345
|
+
]
|
346
|
+
},
|
347
|
+
{
|
348
|
+
'text' => ' in the midle',
|
349
|
+
'type' => 'text'
|
350
|
+
}
|
351
|
+
]
|
352
|
+
}
|
353
|
+
]
|
354
|
+
}
|
355
|
+
|
356
|
+
renderer = Storyblok::Richtext::HtmlRenderer.new
|
357
|
+
expect(renderer.render(doc)).to eq('<h1>Title with <span id="test1">Anchor</span> in the midle</h1>')
|
358
|
+
end
|
359
|
+
end
|
360
|
+
|
361
|
+
describe 'richtext' do
|
362
|
+
it 'should render a text with highlight color' do
|
363
|
+
doc = {
|
364
|
+
'type' => 'doc',
|
365
|
+
'content' => [
|
366
|
+
{
|
367
|
+
'text' => 'Highlighted text',
|
368
|
+
'type' => 'text',
|
369
|
+
'marks' => [
|
370
|
+
{
|
371
|
+
'type' => 'highlight',
|
372
|
+
'attrs' => {
|
373
|
+
'color' => '#E72929',
|
374
|
+
},
|
375
|
+
},
|
376
|
+
],
|
377
|
+
},
|
378
|
+
],
|
379
|
+
}
|
380
|
+
|
381
|
+
renderer = Storyblok::Richtext::HtmlRenderer.new
|
382
|
+
expect(renderer.render(doc)).to eq('<span style="background-color:#E72929;">Highlighted text</span>')
|
383
|
+
end
|
384
|
+
end
|
385
|
+
|
386
|
+
describe 'richtext' do
|
387
|
+
it 'should render a text with text color' do
|
388
|
+
doc = {
|
389
|
+
'type' => 'doc',
|
390
|
+
'content' => [
|
391
|
+
{
|
392
|
+
'text' => 'Colored text',
|
393
|
+
'type' => 'text',
|
394
|
+
'marks' => [
|
395
|
+
{
|
396
|
+
'type' => 'textStyle',
|
397
|
+
'attrs' => {
|
398
|
+
'color' => '#E72929',
|
399
|
+
},
|
400
|
+
},
|
401
|
+
],
|
402
|
+
},
|
403
|
+
],
|
404
|
+
}
|
405
|
+
|
406
|
+
renderer = Storyblok::Richtext::HtmlRenderer.new
|
407
|
+
expect(renderer.render(doc)).to eq('<span style="background-color:#E72929;">Colored text</span>')
|
408
|
+
end
|
409
|
+
end
|
410
|
+
|
411
|
+
describe 'richtext' do
|
412
|
+
it 'should render a text with a emoji' do
|
413
|
+
doc = {
|
414
|
+
'type' => 'doc',
|
415
|
+
'content' => [
|
416
|
+
{
|
417
|
+
'type' => 'paragraph',
|
418
|
+
'content' => [
|
419
|
+
{
|
420
|
+
'text' => 'Text with a emoji in the end ',
|
421
|
+
'type' => 'text'
|
422
|
+
},
|
423
|
+
{
|
424
|
+
'type' => 'emoji',
|
425
|
+
'attrs' => {
|
426
|
+
'name' => 'smile',
|
427
|
+
'emoji' => '😄',
|
428
|
+
'fallbackImage' => 'https://cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64/1f604.png'
|
429
|
+
}
|
430
|
+
},
|
431
|
+
]
|
432
|
+
}
|
433
|
+
]
|
434
|
+
}
|
435
|
+
|
436
|
+
renderer = Storyblok::Richtext::HtmlRenderer.new
|
437
|
+
expect(renderer.render(doc)).to eq('<p>Text with a emoji in the end <span data-type="emoji" data-name="smile" emoji="😄">😄</span></p>')
|
438
|
+
end
|
439
|
+
end
|
440
|
+
|
441
|
+
describe 'richtext' do
|
442
|
+
it 'should render a emoji with falbackimage' do
|
443
|
+
doc = {
|
444
|
+
'type' => 'doc',
|
445
|
+
'content' => [
|
446
|
+
{
|
447
|
+
'type' => 'paragraph',
|
448
|
+
'content' => [
|
449
|
+
{
|
450
|
+
'text' => 'Text with a emoji in the end ',
|
451
|
+
'type' => 'text'
|
452
|
+
},
|
453
|
+
{
|
454
|
+
'type' => 'emoji',
|
455
|
+
'attrs' => {
|
456
|
+
'name' => 'trollface',
|
457
|
+
'emoji' => nil,
|
458
|
+
'fallbackImage' => 'https://github.githubassets.com/images/icons/emoji/trollface.png'
|
459
|
+
}
|
460
|
+
},
|
20
461
|
]
|
21
462
|
}
|
22
463
|
]
|
23
464
|
}
|
24
465
|
|
25
466
|
renderer = Storyblok::Richtext::HtmlRenderer.new
|
26
|
-
expect(renderer.render(doc)).to eq('<span
|
467
|
+
expect(renderer.render(doc)).to eq('<p>Text with a emoji in the end <span data-type="emoji" data-name="trollface"><img src="https://github.githubassets.com/images/icons/emoji/trollface.png" draggable="false" loading="lazy" align="absmiddle" /></span></p>')
|
27
468
|
end
|
28
469
|
end
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: storyblok-richtext-renderer
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.0.
|
4
|
+
version: 0.0.7
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Storyblok (Alexander Feiglstorfer)
|
8
|
-
autorequire:
|
8
|
+
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date:
|
11
|
+
date: 2023-04-05 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: bundler
|
@@ -45,32 +45,31 @@ executables: []
|
|
45
45
|
extensions: []
|
46
46
|
extra_rdoc_files: []
|
47
47
|
files:
|
48
|
-
- ".DS_Store"
|
49
48
|
- ".editorconfig"
|
50
49
|
- ".gitignore"
|
51
|
-
- ".ruby-version"
|
52
50
|
- Gemfile
|
53
|
-
- Gemfile.lock
|
54
51
|
- README.md
|
55
|
-
- lib/.DS_Store
|
56
|
-
- lib/storyblok/.DS_Store
|
57
52
|
- lib/storyblok/richtext.rb
|
58
53
|
- lib/storyblok/richtext/html_renderer.rb
|
59
|
-
- lib/storyblok/richtext/html_renderer
|
54
|
+
- lib/storyblok/richtext/html_renderer/marks/anchor.rb
|
60
55
|
- lib/storyblok/richtext/html_renderer/marks/bold.rb
|
61
56
|
- lib/storyblok/richtext/html_renderer/marks/code.rb
|
57
|
+
- lib/storyblok/richtext/html_renderer/marks/highlight.rb
|
62
58
|
- lib/storyblok/richtext/html_renderer/marks/italic.rb
|
63
59
|
- lib/storyblok/richtext/html_renderer/marks/link.rb
|
64
60
|
- lib/storyblok/richtext/html_renderer/marks/mark.rb
|
65
61
|
- lib/storyblok/richtext/html_renderer/marks/strike.rb
|
66
62
|
- lib/storyblok/richtext/html_renderer/marks/strong.rb
|
67
63
|
- lib/storyblok/richtext/html_renderer/marks/styled.rb
|
64
|
+
- lib/storyblok/richtext/html_renderer/marks/subscript.rb
|
65
|
+
- lib/storyblok/richtext/html_renderer/marks/superscript.rb
|
66
|
+
- lib/storyblok/richtext/html_renderer/marks/text_style.rb
|
68
67
|
- lib/storyblok/richtext/html_renderer/marks/underline.rb
|
69
|
-
- lib/storyblok/richtext/html_renderer/nodes/.DS_Store
|
70
68
|
- lib/storyblok/richtext/html_renderer/nodes/blockquote.rb
|
71
69
|
- lib/storyblok/richtext/html_renderer/nodes/blok.rb
|
72
70
|
- lib/storyblok/richtext/html_renderer/nodes/bullet_list.rb
|
73
71
|
- lib/storyblok/richtext/html_renderer/nodes/code_block.rb
|
72
|
+
- lib/storyblok/richtext/html_renderer/nodes/emoji.rb
|
74
73
|
- lib/storyblok/richtext/html_renderer/nodes/hard_break.rb
|
75
74
|
- lib/storyblok/richtext/html_renderer/nodes/heading.rb
|
76
75
|
- lib/storyblok/richtext/html_renderer/nodes/horizontal_rule.rb
|
@@ -88,7 +87,7 @@ homepage: https://github.com/storyblok/storyblok-ruby-richtext-renderer
|
|
88
87
|
licenses:
|
89
88
|
- MIT
|
90
89
|
metadata: {}
|
91
|
-
post_install_message:
|
90
|
+
post_install_message:
|
92
91
|
rdoc_options: []
|
93
92
|
require_paths:
|
94
93
|
- lib
|
@@ -103,9 +102,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
103
102
|
- !ruby/object:Gem::Version
|
104
103
|
version: '0'
|
105
104
|
requirements: []
|
106
|
-
|
107
|
-
|
108
|
-
signing_key:
|
105
|
+
rubygems_version: 3.1.4
|
106
|
+
signing_key:
|
109
107
|
specification_version: 4
|
110
108
|
summary: Storyblok richtext renderer
|
111
109
|
test_files:
|
data/.DS_Store
DELETED
Binary file
|
data/.ruby-version
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
2.5.1
|
data/Gemfile.lock
DELETED
@@ -1,33 +0,0 @@
|
|
1
|
-
PATH
|
2
|
-
remote: .
|
3
|
-
specs:
|
4
|
-
storyblok-richtext-renderer (0.0.4)
|
5
|
-
|
6
|
-
GEM
|
7
|
-
remote: https://rubygems.org/
|
8
|
-
specs:
|
9
|
-
diff-lcs (1.3)
|
10
|
-
rspec (3.8.0)
|
11
|
-
rspec-core (~> 3.8.0)
|
12
|
-
rspec-expectations (~> 3.8.0)
|
13
|
-
rspec-mocks (~> 3.8.0)
|
14
|
-
rspec-core (3.8.2)
|
15
|
-
rspec-support (~> 3.8.0)
|
16
|
-
rspec-expectations (3.8.5)
|
17
|
-
diff-lcs (>= 1.2.0, < 2.0)
|
18
|
-
rspec-support (~> 3.8.0)
|
19
|
-
rspec-mocks (3.8.2)
|
20
|
-
diff-lcs (>= 1.2.0, < 2.0)
|
21
|
-
rspec-support (~> 3.8.0)
|
22
|
-
rspec-support (3.8.3)
|
23
|
-
|
24
|
-
PLATFORMS
|
25
|
-
ruby
|
26
|
-
|
27
|
-
DEPENDENCIES
|
28
|
-
bundler (~> 2)
|
29
|
-
rspec (~> 3)
|
30
|
-
storyblok-richtext-renderer!
|
31
|
-
|
32
|
-
BUNDLED WITH
|
33
|
-
2.0.2
|
data/lib/.DS_Store
DELETED
Binary file
|
data/lib/storyblok/.DS_Store
DELETED
Binary file
|
Binary file
|
Binary file
|