@kids-reporter/draft-renderer 1.0.16 → 1.0.17
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-brief.js +3 -13
- package/lib/block-render-maps/article-content.js +2 -42
- package/lib/block-renderers/dropdown.js +1 -1
- package/lib/block-renderers/image-block.js +2 -2
- package/lib/block-renderers/image-link.js +2 -2
- package/lib/block-renderers/info-box-block.js +2 -2
- package/lib/draft-renderer.js +2 -2
- package/lib/entity-decorators/annotation-decorator.js +4 -4
- package/lib/entity-decorators/link-decorator.js +1 -1
- package/lib/utils/constants.js +3 -3
- package/package.json +1 -1
|
@@ -7,32 +7,22 @@ exports.blockRenderMap = void 0;
|
|
|
7
7
|
var _draftJs = require("draft-js");
|
|
8
8
|
var _immutable = _interopRequireDefault(require("immutable"));
|
|
9
9
|
var _react = _interopRequireDefault(require("react"));
|
|
10
|
-
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
11
10
|
var _articleContent = require("./article-content");
|
|
12
11
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
13
12
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
14
|
-
const ParagraphForIntroduction = (0, _styledComponents.default)(_articleContent.Paragraph)`
|
|
15
|
-
font-size: ${({
|
|
16
|
-
theme
|
|
17
|
-
}) => (theme === null || theme === void 0 ? void 0 : theme.fontSizeLevel) === 'large' ? '24px' : '20px'};
|
|
18
|
-
color: #575757;
|
|
19
|
-
`;
|
|
20
|
-
const ListForIntroduction = (0, _styledComponents.default)(_articleContent.List)`
|
|
21
|
-
color: #575757;
|
|
22
|
-
`;
|
|
23
13
|
const blockRenderMap = exports.blockRenderMap = _draftJs.DefaultDraftBlockRenderMap.merge(_immutable.default.Map({
|
|
24
14
|
'ordered-list-item': {
|
|
25
15
|
element: 'li',
|
|
26
|
-
wrapper: /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
16
|
+
wrapper: /*#__PURE__*/(0, _jsxRuntime.jsx)(_articleContent.List, {})
|
|
27
17
|
},
|
|
28
18
|
'unordered-list-item': {
|
|
29
19
|
element: 'li',
|
|
30
|
-
wrapper: /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
20
|
+
wrapper: /*#__PURE__*/(0, _jsxRuntime.jsx)(_articleContent.List, {
|
|
31
21
|
as: "ul"
|
|
32
22
|
})
|
|
33
23
|
},
|
|
34
24
|
unstyled: {
|
|
35
25
|
element: 'div',
|
|
36
|
-
wrapper: /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
26
|
+
wrapper: /*#__PURE__*/(0, _jsxRuntime.jsx)(_articleContent.Paragraph, {})
|
|
37
27
|
}
|
|
38
28
|
}));
|
|
@@ -14,13 +14,6 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
|
|
|
14
14
|
const Paragraph = exports.Paragraph = _styledComponents.default.div`
|
|
15
15
|
width: 100%;
|
|
16
16
|
max-width: 700px;
|
|
17
|
-
font-size: ${({
|
|
18
|
-
theme
|
|
19
|
-
}) => (theme === null || theme === void 0 ? void 0 : theme.fontSizeLevel) === 'large' ? '22px' : '18px'};
|
|
20
|
-
font-weight: 400;
|
|
21
|
-
color: #3a4f66;
|
|
22
|
-
letter-spacing: 0.9px;
|
|
23
|
-
line-height: 2;
|
|
24
17
|
margin: 0 auto;
|
|
25
18
|
|
|
26
19
|
${_mediaQuery.mediaQuery.smallOnly} {
|
|
@@ -28,14 +21,11 @@ const Paragraph = exports.Paragraph = _styledComponents.default.div`
|
|
|
28
21
|
padding-right: 15px;
|
|
29
22
|
}
|
|
30
23
|
|
|
31
|
-
> div[data-block='true'] {
|
|
24
|
+
> div[data-block='true']:not(:last-child) {
|
|
32
25
|
margin-bottom: 27px;
|
|
33
26
|
}
|
|
34
27
|
`;
|
|
35
28
|
const Heading = exports.Heading = _styledComponents.default.div`
|
|
36
|
-
font-weight: 700;
|
|
37
|
-
line-height: 1.5;
|
|
38
|
-
color: #232323;
|
|
39
29
|
width: 100%;
|
|
40
30
|
max-width: 700px;
|
|
41
31
|
margin: 45px auto 20px auto;
|
|
@@ -44,34 +34,9 @@ const Heading = exports.Heading = _styledComponents.default.div`
|
|
|
44
34
|
h3,
|
|
45
35
|
h4,
|
|
46
36
|
h5 {
|
|
47
|
-
letter-spacing: 1.5px;
|
|
48
37
|
margin: 0;
|
|
49
38
|
}
|
|
50
39
|
|
|
51
|
-
h2 {
|
|
52
|
-
font-size: ${({
|
|
53
|
-
theme
|
|
54
|
-
}) => (theme === null || theme === void 0 ? void 0 : theme.fontSizeLevel) === 'large' ? '39px' : '35px'};
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
h3 {
|
|
58
|
-
font-size: ${({
|
|
59
|
-
theme
|
|
60
|
-
}) => (theme === null || theme === void 0 ? void 0 : theme.fontSizeLevel) === 'large' ? '34px' : '30px'};
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
h4 {
|
|
64
|
-
font-size: ${({
|
|
65
|
-
theme
|
|
66
|
-
}) => (theme === null || theme === void 0 ? void 0 : theme.fontSizeLevel) === 'large' ? '29px' : '25px'};
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
h5 {
|
|
70
|
-
font-size: ${({
|
|
71
|
-
theme
|
|
72
|
-
}) => (theme === null || theme === void 0 ? void 0 : theme.fontSizeLevel) === 'large' ? '24px' : '20px'};
|
|
73
|
-
}
|
|
74
|
-
|
|
75
40
|
${_mediaQuery.mediaQuery.smallOnly} {
|
|
76
41
|
padding-left: 15px;
|
|
77
42
|
padding-right: 15px;
|
|
@@ -81,12 +46,7 @@ const List = exports.List = _styledComponents.default.ol`
|
|
|
81
46
|
width: 100%;
|
|
82
47
|
max-width: 700px;
|
|
83
48
|
margin: 0 auto 27px auto;
|
|
84
|
-
|
|
85
|
-
theme
|
|
86
|
-
}) => (theme === null || theme === void 0 ? void 0 : theme.fontSizeLevel) === 'large' ? '22px' : '18px'};
|
|
87
|
-
line-height: 2;
|
|
88
|
-
letter-spacing: 0.9px;
|
|
89
|
-
color: #3a4f66;
|
|
49
|
+
|
|
90
50
|
padding-left: 2rem;
|
|
91
51
|
|
|
92
52
|
> li {
|
|
@@ -81,8 +81,8 @@ function ImageBlockInner({
|
|
|
81
81
|
},
|
|
82
82
|
$isDesktopAndAbove: isDesktopAndAbove,
|
|
83
83
|
onClick: () => {
|
|
84
|
-
var
|
|
85
|
-
return isDesktopAndAbove && (theme === null || theme === void 0 || (
|
|
84
|
+
var _onImageModalOpen, _ref;
|
|
85
|
+
return isDesktopAndAbove && (theme === null || theme === void 0 || (_onImageModalOpen = (_ref = theme).onImageModalOpen) === null || _onImageModalOpen === void 0 ? void 0 : _onImageModalOpen.call(_ref, commonImgProps));
|
|
86
86
|
}
|
|
87
87
|
}), desc && /*#__PURE__*/(0, _jsxRuntime.jsx)(FigureCaption, {
|
|
88
88
|
children: desc
|
|
@@ -57,8 +57,8 @@ function ImageLinkBlockInner({
|
|
|
57
57
|
...commonImgProps,
|
|
58
58
|
$isDesktopAndAbove: isDesktopAndAbove,
|
|
59
59
|
onClick: () => {
|
|
60
|
-
var
|
|
61
|
-
return isDesktopAndAbove && (theme === null || theme === void 0 || (
|
|
60
|
+
var _onImageModalOpen, _ref;
|
|
61
|
+
return isDesktopAndAbove && (theme === null || theme === void 0 || (_onImageModalOpen = (_ref = theme).onImageModalOpen) === null || _onImageModalOpen === void 0 ? void 0 : _onImageModalOpen.call(_ref, commonImgProps));
|
|
62
62
|
}
|
|
63
63
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_draftJs.Editor, {
|
|
64
64
|
blockRenderMap: blockRenderMap,
|
|
@@ -141,7 +141,7 @@ const ArticleBodyContainer = _styledComponents.default.div`
|
|
|
141
141
|
const EditorContainer = _styledComponents.default.div`
|
|
142
142
|
position: relative;
|
|
143
143
|
`;
|
|
144
|
-
function
|
|
144
|
+
function convertFromRawTrimmed(rawContentState) {
|
|
145
145
|
const contentState = (0, _draftJs.convertFromRaw)(rawContentState);
|
|
146
146
|
const originalBlocks = contentState.getBlocksAsArray();
|
|
147
147
|
if (originalBlocks.length === 0) {
|
|
@@ -172,7 +172,7 @@ function InfoBoxInArticleBody({
|
|
|
172
172
|
rawContentState,
|
|
173
173
|
showBaodaozai = true
|
|
174
174
|
} = data;
|
|
175
|
-
const contentState =
|
|
175
|
+
const contentState = convertFromRawTrimmed(rawContentState);
|
|
176
176
|
const editorState = _draftJs.EditorState.createWithContent(contentState, _index2.decorator);
|
|
177
177
|
let Component;
|
|
178
178
|
let blockRenderMap = _index.default.infoBox.default;
|
package/lib/draft-renderer.js
CHANGED
|
@@ -27,7 +27,7 @@ const DraftRenderer = ({
|
|
|
27
27
|
rawContentState,
|
|
28
28
|
themeColor = _index2.ThemeColorEnum.RED,
|
|
29
29
|
fontSizeLevel = FontSizeLevel.NORMAL,
|
|
30
|
-
|
|
30
|
+
onImageModalOpen = undefined,
|
|
31
31
|
initiallyScrollTo = '',
|
|
32
32
|
offsetTop = 0
|
|
33
33
|
}) => {
|
|
@@ -48,7 +48,7 @@ const DraftRenderer = ({
|
|
|
48
48
|
themeColor,
|
|
49
49
|
fontSizeLevel,
|
|
50
50
|
offsetTop,
|
|
51
|
-
|
|
51
|
+
onImageModalOpen
|
|
52
52
|
},
|
|
53
53
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_draftJs.Editor, {
|
|
54
54
|
editorState: editorState,
|
|
@@ -17,12 +17,12 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
|
|
|
17
17
|
const AnnotationWrapper = _styledComponents.default.span`
|
|
18
18
|
display: inline-block;
|
|
19
19
|
cursor: pointer;
|
|
20
|
-
color: #
|
|
20
|
+
color: #27b3f5;
|
|
21
21
|
`;
|
|
22
22
|
const AnnotationBody = _styledComponents.default.div`
|
|
23
23
|
color: #494949;
|
|
24
24
|
margin-bottom: 10px;
|
|
25
|
-
border-top: 2px solid #
|
|
25
|
+
border-top: 2px solid #27b3f5;
|
|
26
26
|
background-color: #fff;
|
|
27
27
|
padding: 25px 25px;
|
|
28
28
|
`;
|
|
@@ -39,7 +39,7 @@ const ArrowIcon = _styledComponents.default.span`
|
|
|
39
39
|
top: -1px;
|
|
40
40
|
|
|
41
41
|
&::before {
|
|
42
|
-
background-color: #
|
|
42
|
+
background-color: #27b3f5;
|
|
43
43
|
content: '';
|
|
44
44
|
width: 2px;
|
|
45
45
|
height: 6.5px;
|
|
@@ -52,7 +52,7 @@ const ArrowIcon = _styledComponents.default.span`
|
|
|
52
52
|
}
|
|
53
53
|
|
|
54
54
|
&::after {
|
|
55
|
-
background-color: #
|
|
55
|
+
background-color: #27b3f5;
|
|
56
56
|
content: '';
|
|
57
57
|
width: 2px;
|
|
58
58
|
height: 6.5px;
|
|
@@ -12,7 +12,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
|
|
|
12
12
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
13
13
|
const LinkWrapper = _styledComponents.default.a`
|
|
14
14
|
text-decoration: underline;
|
|
15
|
-
color: #
|
|
15
|
+
color: #27b3f5;
|
|
16
16
|
transition: color 0.1s ease-in;
|
|
17
17
|
cursor: pointer;
|
|
18
18
|
|
package/lib/utils/constants.js
CHANGED
|
@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.colorHex = exports.DEBOUNCE_THRESHOLD = void 0;
|
|
7
7
|
const colorHex = exports.colorHex = {
|
|
8
|
-
blue: '#
|
|
9
|
-
red: '#
|
|
10
|
-
yellow: '#
|
|
8
|
+
blue: '#27b3f5',
|
|
9
|
+
red: '#f76977',
|
|
10
|
+
yellow: '#f8c341'
|
|
11
11
|
};
|
|
12
12
|
const DEBOUNCE_THRESHOLD = exports.DEBOUNCE_THRESHOLD = 100;
|