@kids-reporter/draft-renderer 1.0.20 → 1.0.22
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.
- package/lib/block-render-maps/article-content.js +55 -9
- package/lib/block-render-maps/image-link.js +11 -1
- package/lib/block-renderers/blockquote.js +4 -3
- package/lib/block-renderers/divider.js +1 -1
- package/lib/block-renderers/image-block.js +18 -6
- package/lib/block-renderers/image-link.js +8 -8
- package/lib/block-renderers/slideshow-block.js +10 -9
- package/lib/entity-decorators/link-decorator.js +15 -0
- package/package.json +1 -1
|
@@ -26,9 +26,13 @@ const Paragraph = exports.Paragraph = _styledComponents.default.div`
|
|
|
26
26
|
}
|
|
27
27
|
|
|
28
28
|
> div[data-block='true'] {
|
|
29
|
-
margin-bottom:
|
|
30
|
-
|
|
31
|
-
|
|
29
|
+
margin-bottom: 38px;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
&:has(+ div:not([data-paragraph-block='true'])) {
|
|
33
|
+
margin-bottom: 40px;
|
|
34
|
+
${_mediaQuery.mediaQuery.desktopAbove} {
|
|
35
|
+
margin-bottom: 60px;
|
|
32
36
|
}
|
|
33
37
|
}
|
|
34
38
|
`;
|
|
@@ -56,11 +60,19 @@ const Heading = exports.Heading = _styledComponents.default.div`
|
|
|
56
60
|
padding-left: 24px;
|
|
57
61
|
padding-right: 24px;
|
|
58
62
|
}
|
|
63
|
+
|
|
64
|
+
/* when the next sibling div contains a blockquote */
|
|
65
|
+
& + div:has(blockquote) {
|
|
66
|
+
margin-top: 0px;
|
|
67
|
+
${_mediaQuery.mediaQuery.desktopAbove} {
|
|
68
|
+
margin-top: 0px;
|
|
69
|
+
}
|
|
70
|
+
}
|
|
59
71
|
`;
|
|
60
72
|
const List = exports.List = _styledComponents.default.ol`
|
|
61
73
|
width: 100%;
|
|
62
74
|
max-width: 512px;
|
|
63
|
-
margin: 0 auto
|
|
75
|
+
margin: 0 auto 38px auto;
|
|
64
76
|
list-style-position: inside;
|
|
65
77
|
|
|
66
78
|
> li > div {
|
|
@@ -68,7 +80,7 @@ const List = exports.List = _styledComponents.default.ol`
|
|
|
68
80
|
}
|
|
69
81
|
|
|
70
82
|
${_mediaQuery.mediaQuery.smallOnly} {
|
|
71
|
-
margin-bottom:
|
|
83
|
+
margin-bottom: 38px;
|
|
72
84
|
padding-left: 24px;
|
|
73
85
|
padding-right: 24px;
|
|
74
86
|
}
|
|
@@ -80,16 +92,45 @@ const List = exports.List = _styledComponents.default.ol`
|
|
|
80
92
|
> li {
|
|
81
93
|
margin-bottom: 6px;
|
|
82
94
|
}
|
|
95
|
+
|
|
96
|
+
&:has(+ div:not([data-paragraph-block='true'])) {
|
|
97
|
+
margin-bottom: 40px;
|
|
98
|
+
${_mediaQuery.mediaQuery.desktopAbove} {
|
|
99
|
+
margin-bottom: 60px;
|
|
100
|
+
}
|
|
101
|
+
}
|
|
83
102
|
`;
|
|
84
103
|
const Atomic = exports.Atomic = _styledComponents.default.div`
|
|
85
104
|
/* reset browser default styles */
|
|
86
105
|
> figure {
|
|
87
106
|
margin: 0;
|
|
88
107
|
}
|
|
108
|
+
|
|
109
|
+
&:has(blockquote) {
|
|
110
|
+
margin-top: -2px;
|
|
111
|
+
${_mediaQuery.mediaQuery.desktopAbove} {
|
|
112
|
+
margin-top: -22px;
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
${_mediaQuery.mediaQuery.desktopAbove} {
|
|
117
|
+
div:has(+ div [data-image-block-caption-alignment='default'])
|
|
118
|
+
[data-image-block-caption-alignment='default'],
|
|
119
|
+
[data-image-slideshow-caption-alignment='default'] {
|
|
120
|
+
position: relative !important;
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
${_mediaQuery.mediaQuery.largeOnly} {
|
|
124
|
+
div:has(+ div [data-image-block-caption-alignment='default'])
|
|
125
|
+
[data-image-block-caption-alignment='default'],
|
|
126
|
+
[data-image-slideshow-caption-alignment='default'] {
|
|
127
|
+
position: relative !important;
|
|
128
|
+
}
|
|
129
|
+
}
|
|
89
130
|
`;
|
|
90
131
|
const _blockRenderMap = _immutable.default.Map({
|
|
91
132
|
atomic: {
|
|
92
|
-
element: '
|
|
133
|
+
element: 'div',
|
|
93
134
|
wrapper: /*#__PURE__*/(0, _jsxRuntime.jsx)(Atomic, {})
|
|
94
135
|
},
|
|
95
136
|
'header-two': {
|
|
@@ -110,17 +151,22 @@ const _blockRenderMap = _immutable.default.Map({
|
|
|
110
151
|
},
|
|
111
152
|
'ordered-list-item': {
|
|
112
153
|
element: 'li',
|
|
113
|
-
wrapper: /*#__PURE__*/(0, _jsxRuntime.jsx)(List, {
|
|
154
|
+
wrapper: /*#__PURE__*/(0, _jsxRuntime.jsx)(List, {
|
|
155
|
+
"data-paragraph-block": "true"
|
|
156
|
+
})
|
|
114
157
|
},
|
|
115
158
|
'unordered-list-item': {
|
|
116
159
|
element: 'li',
|
|
117
160
|
wrapper: /*#__PURE__*/(0, _jsxRuntime.jsx)(List, {
|
|
118
|
-
as: "ul"
|
|
161
|
+
as: "ul",
|
|
162
|
+
"data-paragraph-block": "true"
|
|
119
163
|
})
|
|
120
164
|
},
|
|
121
165
|
unstyled: {
|
|
122
166
|
element: 'div',
|
|
123
|
-
wrapper: /*#__PURE__*/(0, _jsxRuntime.jsx)(Paragraph, {
|
|
167
|
+
wrapper: /*#__PURE__*/(0, _jsxRuntime.jsx)(Paragraph, {
|
|
168
|
+
"data-paragraph-block": "true"
|
|
169
|
+
})
|
|
124
170
|
}
|
|
125
171
|
});
|
|
126
172
|
const blockRenderMap = exports.blockRenderMap = _draftJs.DefaultDraftBlockRenderMap.merge(_blockRenderMap);
|
|
@@ -8,6 +8,7 @@ var _draftJs = require("draft-js");
|
|
|
8
8
|
var _immutable = _interopRequireDefault(require("immutable"));
|
|
9
9
|
var _react = _interopRequireDefault(require("react"));
|
|
10
10
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
11
|
+
var _mediaQuery = require("../utils/media-query");
|
|
11
12
|
var _articleContent = require("./article-content");
|
|
12
13
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
13
14
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
@@ -22,7 +23,16 @@ const ParagraphForImageLink = (0, _styledComponents.default)(_articleContent.Par
|
|
|
22
23
|
color: rgb(58, 79, 102);
|
|
23
24
|
letter-spacing: 0.7px;
|
|
24
25
|
line-height: 28px;
|
|
25
|
-
text-align:
|
|
26
|
+
text-align: left;
|
|
27
|
+
|
|
28
|
+
${_mediaQuery.mediaQuery.smallOnly} {
|
|
29
|
+
padding-left: 0px;
|
|
30
|
+
padding-right: 0px;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
> div[data-block='true'] {
|
|
34
|
+
margin-bottom: 0px;
|
|
35
|
+
}
|
|
26
36
|
`;
|
|
27
37
|
const _blockRenderMapForAnnotation = _immutable.default.Map({
|
|
28
38
|
atomic: {
|
|
@@ -15,10 +15,11 @@ const BorderLeftContainer = _styledComponents.default.blockquote`
|
|
|
15
15
|
gap: 16px;
|
|
16
16
|
`;
|
|
17
17
|
const BorderLeftLine = _styledComponents.default.div`
|
|
18
|
-
width:
|
|
18
|
+
width: 4px;
|
|
19
19
|
border-radius: 10px;
|
|
20
20
|
background-color: #c6c6c6;
|
|
21
21
|
align-self: stretch;
|
|
22
|
+
flex-shrink: 0;
|
|
22
23
|
`;
|
|
23
24
|
function BorderLeftBlockquote({
|
|
24
25
|
text
|
|
@@ -81,10 +82,10 @@ function QuoteLeftBlockquote({
|
|
|
81
82
|
}
|
|
82
83
|
const ArticleBodyContainer = _styledComponents.default.div`
|
|
83
84
|
max-width: 512px;
|
|
84
|
-
margin: 0 auto
|
|
85
|
+
margin: 0 auto 38px auto;
|
|
85
86
|
|
|
86
87
|
${_mediaQuery.mediaQuery.smallOnly} {
|
|
87
|
-
margin-bottom:
|
|
88
|
+
margin-bottom: 38px;
|
|
88
89
|
}
|
|
89
90
|
|
|
90
91
|
${_mediaQuery.mediaQuery.largeOnly} {
|
|
@@ -16,7 +16,7 @@ const Hr = _styledComponents.default.hr`
|
|
|
16
16
|
}) => (0, _index.getColorHex)(theme === null || theme === void 0 ? void 0 : theme.themeColor)};
|
|
17
17
|
width: 385px;
|
|
18
18
|
height: 3px;
|
|
19
|
-
margin:
|
|
19
|
+
margin: 38px auto 38px auto;
|
|
20
20
|
|
|
21
21
|
${_mediaQuery.mediaQuery.smallOnly} {
|
|
22
22
|
width: 55%;
|
|
@@ -68,7 +68,7 @@ const FigureCaption = _styledComponents.default.figcaption`
|
|
|
68
68
|
${_mediaQuery.mediaQuery.mediumAbove} {
|
|
69
69
|
max-width: 340px;
|
|
70
70
|
margin-left: auto;
|
|
71
|
-
margin-right:
|
|
71
|
+
margin-right: 32px;
|
|
72
72
|
}
|
|
73
73
|
|
|
74
74
|
${_mediaQuery.mediaQuery.desktopAbove} {
|
|
@@ -89,6 +89,14 @@ const FigureCaption = _styledComponents.default.figcaption`
|
|
|
89
89
|
`;
|
|
90
90
|
case 'paragraph-width':
|
|
91
91
|
return `
|
|
92
|
+
${_mediaQuery.mediaQuery.smallOnly} {
|
|
93
|
+
width: 100%;
|
|
94
|
+
text-align: left;
|
|
95
|
+
}
|
|
96
|
+
${_mediaQuery.mediaQuery.mediumAbove} {
|
|
97
|
+
width: 100%;
|
|
98
|
+
text-align: left;
|
|
99
|
+
}
|
|
92
100
|
${_mediaQuery.mediaQuery.desktopAbove} {
|
|
93
101
|
position: absolute;
|
|
94
102
|
left: calc(100% + 32px);
|
|
@@ -142,7 +150,9 @@ const FigureCaption = _styledComponents.default.figcaption`
|
|
|
142
150
|
`;
|
|
143
151
|
const Img = _styledComponents.default.img`
|
|
144
152
|
width: 100%;
|
|
145
|
-
|
|
153
|
+
height: 100%;
|
|
154
|
+
display: block;
|
|
155
|
+
object-fit: cover;
|
|
146
156
|
${props => props.$isDesktopAndAbove ? 'cursor: zoom-in;' : ''};
|
|
147
157
|
`;
|
|
148
158
|
function ImageBlockInner({
|
|
@@ -194,6 +204,8 @@ function ImageBlockInner({
|
|
|
194
204
|
return isDesktopAndAbove && (theme === null || theme === void 0 || (_onImageModalOpen = (_ref = theme).onImageModalOpen) === null || _onImageModalOpen === void 0 ? void 0 : _onImageModalOpen.call(_ref, commonImgProps));
|
|
195
205
|
}
|
|
196
206
|
}), desc && /*#__PURE__*/(0, _jsxRuntime.jsx)(FigureCaption, {
|
|
207
|
+
"data-image-block-caption": "true",
|
|
208
|
+
"data-image-block-caption-alignment": data.alignment,
|
|
197
209
|
$alignment: data.alignment,
|
|
198
210
|
children: desc
|
|
199
211
|
})]
|
|
@@ -218,10 +230,10 @@ const ArticleBodyContainer = _styledComponents.default.div`
|
|
|
218
230
|
margin: 0;
|
|
219
231
|
}
|
|
220
232
|
|
|
221
|
-
margin: 40px auto;
|
|
233
|
+
margin: 0 auto 40px auto;
|
|
222
234
|
|
|
223
235
|
${_mediaQuery.mediaQuery.mediumAbove} {
|
|
224
|
-
margin: 60px auto;
|
|
236
|
+
margin: 0 auto 60px auto;
|
|
225
237
|
}
|
|
226
238
|
|
|
227
239
|
${_mediaQuery.mediaQuery.smallOnly} {
|
|
@@ -242,13 +254,12 @@ const ArticleBodyContainer = _styledComponents.default.div`
|
|
|
242
254
|
${_mediaQuery.mediaQuery.largeOnly} {
|
|
243
255
|
max-width: 1000px;
|
|
244
256
|
}
|
|
257
|
+
|
|
245
258
|
`;
|
|
246
259
|
case 'paragraph-width':
|
|
247
260
|
return `
|
|
248
261
|
${_mediaQuery.mediaQuery.smallOnly} {
|
|
249
262
|
max-width: 512px;
|
|
250
|
-
padding-left: 24px;
|
|
251
|
-
padding-right: 24px;
|
|
252
263
|
}
|
|
253
264
|
|
|
254
265
|
${_mediaQuery.mediaQuery.mediumAbove} {
|
|
@@ -293,6 +304,7 @@ function ImageInArticleBody({
|
|
|
293
304
|
data
|
|
294
305
|
}) {
|
|
295
306
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(ArticleBodyContainer, {
|
|
307
|
+
"data-image-block-container": "true",
|
|
296
308
|
$alignment: data.alignment,
|
|
297
309
|
className: className,
|
|
298
310
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ImageBlock, {
|
|
@@ -39,7 +39,7 @@ const Figure = _styledComponents.default.figure`
|
|
|
39
39
|
}}
|
|
40
40
|
`;
|
|
41
41
|
const FigureCaption = _styledComponents.default.figcaption`
|
|
42
|
-
width:
|
|
42
|
+
width: 100%;
|
|
43
43
|
max-width: 100%;
|
|
44
44
|
font-size: ${({
|
|
45
45
|
theme
|
|
@@ -49,7 +49,7 @@ const FigureCaption = _styledComponents.default.figcaption`
|
|
|
49
49
|
color: #575757;
|
|
50
50
|
letter-spacing: 0.7px;
|
|
51
51
|
line-height: 28px;
|
|
52
|
-
text-align:
|
|
52
|
+
text-align: left;
|
|
53
53
|
padding: 16px 0 20px 0;
|
|
54
54
|
border-bottom: 2px solid #c6c6c6;
|
|
55
55
|
|
|
@@ -70,7 +70,7 @@ const FigureCaption = _styledComponents.default.figcaption`
|
|
|
70
70
|
${_mediaQuery.mediaQuery.mediumAbove} {
|
|
71
71
|
max-width: 340px;
|
|
72
72
|
margin-left: auto;
|
|
73
|
-
margin-right:
|
|
73
|
+
margin-right: 32px;
|
|
74
74
|
}
|
|
75
75
|
|
|
76
76
|
${_mediaQuery.mediaQuery.desktopAbove} {
|
|
@@ -143,8 +143,9 @@ const FigureCaption = _styledComponents.default.figcaption`
|
|
|
143
143
|
}}
|
|
144
144
|
`;
|
|
145
145
|
const Img = _styledComponents.default.img`
|
|
146
|
+
display: block;
|
|
146
147
|
width: 100%;
|
|
147
|
-
object-fit:
|
|
148
|
+
object-fit: cover;
|
|
148
149
|
${props => props.$isDesktopAndAbove ? 'cursor: zoom-in;' : ''};
|
|
149
150
|
`;
|
|
150
151
|
function ImageLinkBlockInner({
|
|
@@ -214,10 +215,10 @@ const ArticleBodyContainer = _styledComponents.default.div`
|
|
|
214
215
|
margin: 0;
|
|
215
216
|
}
|
|
216
217
|
|
|
217
|
-
margin: 40px auto;
|
|
218
|
+
margin: 0 auto 40px auto;
|
|
218
219
|
|
|
219
220
|
${_mediaQuery.mediaQuery.mediumAbove} {
|
|
220
|
-
margin: 60px auto;
|
|
221
|
+
margin: 0 auto 60px auto;
|
|
221
222
|
}
|
|
222
223
|
|
|
223
224
|
${_mediaQuery.mediaQuery.smallOnly} {
|
|
@@ -243,8 +244,6 @@ const ArticleBodyContainer = _styledComponents.default.div`
|
|
|
243
244
|
return `
|
|
244
245
|
${_mediaQuery.mediaQuery.smallOnly} {
|
|
245
246
|
max-width: 512px;
|
|
246
|
-
padding-left: 24px;
|
|
247
|
-
padding-right: 24px;
|
|
248
247
|
}
|
|
249
248
|
|
|
250
249
|
${_mediaQuery.mediaQuery.mediumAbove} {
|
|
@@ -291,6 +290,7 @@ const ImageLinkInArticleBody = ({
|
|
|
291
290
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(ArticleBodyContainer, {
|
|
292
291
|
$alignment: data.alignment,
|
|
293
292
|
className: className,
|
|
293
|
+
"data-image-link-block": "true",
|
|
294
294
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ImageLinkBlock, {
|
|
295
295
|
data: data
|
|
296
296
|
})
|
|
@@ -44,12 +44,12 @@ const mockup = {
|
|
|
44
44
|
},
|
|
45
45
|
desktop: {
|
|
46
46
|
container: {
|
|
47
|
-
width:
|
|
47
|
+
width: 768 // px
|
|
48
48
|
},
|
|
49
49
|
slide: {
|
|
50
|
-
width:
|
|
50
|
+
width: 676,
|
|
51
51
|
// px
|
|
52
|
-
height:
|
|
52
|
+
height: 370,
|
|
53
53
|
// px
|
|
54
54
|
paddingRight: 4 // px
|
|
55
55
|
},
|
|
@@ -59,12 +59,12 @@ const mockup = {
|
|
|
59
59
|
},
|
|
60
60
|
hd: {
|
|
61
61
|
container: {
|
|
62
|
-
width:
|
|
62
|
+
width: 1000 // px
|
|
63
63
|
},
|
|
64
64
|
slide: {
|
|
65
|
-
width:
|
|
65
|
+
width: 910,
|
|
66
66
|
// px
|
|
67
|
-
height:
|
|
67
|
+
height: 500,
|
|
68
68
|
// px
|
|
69
69
|
paddingRight: 4 // px
|
|
70
70
|
},
|
|
@@ -294,7 +294,7 @@ const SlideshowFlexBox = _styledComponents.default.div`
|
|
|
294
294
|
|
|
295
295
|
${_mediaQuery.mediaQuery.desktopAbove} {
|
|
296
296
|
width: ${mockup.desktop.container.width}px;
|
|
297
|
-
transform: translateX(
|
|
297
|
+
transform: translateX(80px);
|
|
298
298
|
}
|
|
299
299
|
|
|
300
300
|
${_mediaQuery.mediaQuery.largeOnly} {
|
|
@@ -521,6 +521,7 @@ function SlideshowBlock({
|
|
|
521
521
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(NextArrowSvg, {})
|
|
522
522
|
})]
|
|
523
523
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(CaptionContainer, {
|
|
524
|
+
"data-image-slideshow-caption-alignment": "default",
|
|
524
525
|
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(SequenceNumberContainer, {
|
|
525
526
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(ImageSequenceNumber, {
|
|
526
527
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ImageNumber, {
|
|
@@ -549,11 +550,11 @@ function SlideshowBlock({
|
|
|
549
550
|
}
|
|
550
551
|
const ArticleBodyContainer = _styledComponents.default.div`
|
|
551
552
|
${_mediaQuery.mediaQuery.smallOnly} {
|
|
552
|
-
margin: 40px auto;
|
|
553
|
+
margin: 0 auto 40px auto;
|
|
553
554
|
}
|
|
554
555
|
|
|
555
556
|
${_mediaQuery.mediaQuery.mediumAbove} {
|
|
556
|
-
margin: 60px auto;
|
|
557
|
+
margin: 0 auto 60px auto;
|
|
557
558
|
}
|
|
558
559
|
`;
|
|
559
560
|
function SlideshowInArticleBody({
|
|
@@ -16,10 +16,25 @@ const LinkWrapper = _styledComponents.default.a`
|
|
|
16
16
|
transition: text-decoration-color 0.1s ease-in;
|
|
17
17
|
cursor: pointer;
|
|
18
18
|
text-decoration-color: #c6c6c6;
|
|
19
|
+
text-underline-offset: 3px;
|
|
20
|
+
text-decoration-thickness: 1px;
|
|
19
21
|
|
|
20
22
|
&:hover {
|
|
21
23
|
text-decoration-color: #27b3f5;
|
|
22
24
|
}
|
|
25
|
+
|
|
26
|
+
& > span {
|
|
27
|
+
color: #27b3f5 !important;
|
|
28
|
+
text-decoration: underline !important;
|
|
29
|
+
text-decoration-color: #c6c6c6 !important;
|
|
30
|
+
text-underline-offset: 3px !important;
|
|
31
|
+
text-decoration-thickness: 1px !important;
|
|
32
|
+
transition: text-decoration-color 0.1s ease-in !important;
|
|
33
|
+
|
|
34
|
+
&:hover {
|
|
35
|
+
text-decoration-color: #27b3f5 !important;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
23
38
|
`;
|
|
24
39
|
const LinkInner = props => {
|
|
25
40
|
const {
|