@kids-reporter/draft-renderer 1.0.3 → 1.0.5
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/annotation.js +1 -2
- package/lib/block-render-maps/article-brief.js +2 -3
- package/lib/block-render-maps/article-content.js +5 -10
- package/lib/block-render-maps/index.js +2 -3
- package/lib/block-render-maps/info-box.js +5 -7
- package/lib/block-render-maps/project-content.js +3 -6
- package/lib/block-renderers/divider.js +1 -2
- package/lib/block-renderers/dropdown.js +2 -2
- package/lib/block-renderers/embedded-code-block.js +6 -7
- package/lib/block-renderers/index.js +2 -3
- package/lib/block-renderers/info-box-block.js +2 -2
- package/lib/block-renderers/multimedia.js +2 -9
- package/lib/block-renderers/news-reading.js +2 -2
- package/lib/block-renderers/slideshow-block.js +2 -14
- package/lib/custom-style-fn.js +3 -6
- package/lib/draft-renderer.js +32 -18
- package/lib/entity-decorators/anchor.js +7 -16
- package/lib/entity-decorators/annotation-decorator.js +10 -16
- package/lib/entity-decorators/index.js +2 -14
- package/lib/entity-decorators/link-decorator.js +28 -17
- package/lib/entity-decorators/toc-anchor.js +25 -0
- package/lib/index.js +14 -15
- package/lib/utils/color.js +1 -2
- package/lib/utils/constants.js +2 -3
- package/lib/utils/entity.js +22 -0
- package/lib/utils/media-query.js +3 -5
- package/package.json +1 -1
- package/lib/entity-decorators/inner-anchor.js +0 -34
|
@@ -59,5 +59,4 @@ const _blockRenderMapForAnnotation = _immutable.default.Map({
|
|
|
59
59
|
wrapper: /*#__PURE__*/_react.default.createElement(ParagraphForAnnotation, null)
|
|
60
60
|
}
|
|
61
61
|
});
|
|
62
|
-
const blockRenderMap = _draftJs.DefaultDraftBlockRenderMap.merge(_blockRenderMapForAnnotation);
|
|
63
|
-
exports.blockRenderMap = blockRenderMap;
|
|
62
|
+
const blockRenderMap = exports.blockRenderMap = _draftJs.DefaultDraftBlockRenderMap.merge(_blockRenderMapForAnnotation);
|
|
@@ -19,7 +19,7 @@ const ParagraphForIntroduction = (0, _styledComponents.default)(_articleContent.
|
|
|
19
19
|
const ListForIntroduction = (0, _styledComponents.default)(_articleContent.List)`
|
|
20
20
|
color: #575757;
|
|
21
21
|
`;
|
|
22
|
-
const blockRenderMap = _draftJs.DefaultDraftBlockRenderMap.merge(_immutable.default.Map({
|
|
22
|
+
const blockRenderMap = exports.blockRenderMap = _draftJs.DefaultDraftBlockRenderMap.merge(_immutable.default.Map({
|
|
23
23
|
'ordered-list-item': {
|
|
24
24
|
element: 'li',
|
|
25
25
|
wrapper: /*#__PURE__*/_react.default.createElement(ListForIntroduction, null)
|
|
@@ -34,5 +34,4 @@ const blockRenderMap = _draftJs.DefaultDraftBlockRenderMap.merge(_immutable.defa
|
|
|
34
34
|
element: 'div',
|
|
35
35
|
wrapper: /*#__PURE__*/_react.default.createElement(ParagraphForIntroduction, null)
|
|
36
36
|
}
|
|
37
|
-
}));
|
|
38
|
-
exports.blockRenderMap = blockRenderMap;
|
|
37
|
+
}));
|
|
@@ -10,7 +10,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
|
10
10
|
var _draftJs = require("draft-js");
|
|
11
11
|
var _mediaQuery = require("../utils/media-query");
|
|
12
12
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
|
-
const Paragraph = _styledComponents.default.div`
|
|
13
|
+
const Paragraph = exports.Paragraph = _styledComponents.default.div`
|
|
14
14
|
width: 100%;
|
|
15
15
|
max-width: 700px;
|
|
16
16
|
font-size: ${({
|
|
@@ -31,8 +31,7 @@ const Paragraph = _styledComponents.default.div`
|
|
|
31
31
|
margin-bottom: 27px;
|
|
32
32
|
}
|
|
33
33
|
`;
|
|
34
|
-
exports.
|
|
35
|
-
const Heading = _styledComponents.default.div`
|
|
34
|
+
const Heading = exports.Heading = _styledComponents.default.div`
|
|
36
35
|
font-weight: 700;
|
|
37
36
|
line-height: 1.5;
|
|
38
37
|
color: #232323;
|
|
@@ -77,8 +76,7 @@ const Heading = _styledComponents.default.div`
|
|
|
77
76
|
padding-right: 15px;
|
|
78
77
|
}
|
|
79
78
|
`;
|
|
80
|
-
exports.
|
|
81
|
-
const List = _styledComponents.default.ol`
|
|
79
|
+
const List = exports.List = _styledComponents.default.ol`
|
|
82
80
|
width: 100%;
|
|
83
81
|
max-width: 700px;
|
|
84
82
|
margin: 0 auto 27px auto;
|
|
@@ -94,14 +92,12 @@ const List = _styledComponents.default.ol`
|
|
|
94
92
|
margin-bottom: 6px;
|
|
95
93
|
}
|
|
96
94
|
`;
|
|
97
|
-
exports.
|
|
98
|
-
const Atomic = _styledComponents.default.div`
|
|
95
|
+
const Atomic = exports.Atomic = _styledComponents.default.div`
|
|
99
96
|
/* reset browser default styles */
|
|
100
97
|
> figure {
|
|
101
98
|
margin: 0;
|
|
102
99
|
}
|
|
103
100
|
`;
|
|
104
|
-
exports.Atomic = Atomic;
|
|
105
101
|
const _blockRenderMap = _immutable.default.Map({
|
|
106
102
|
atomic: {
|
|
107
103
|
element: 'figure',
|
|
@@ -138,5 +134,4 @@ const _blockRenderMap = _immutable.default.Map({
|
|
|
138
134
|
wrapper: /*#__PURE__*/_react.default.createElement(Paragraph, null)
|
|
139
135
|
}
|
|
140
136
|
});
|
|
141
|
-
const blockRenderMap = _draftJs.DefaultDraftBlockRenderMap.merge(_blockRenderMap);
|
|
142
|
-
exports.blockRenderMap = blockRenderMap;
|
|
137
|
+
const blockRenderMap = exports.blockRenderMap = _draftJs.DefaultDraftBlockRenderMap.merge(_blockRenderMap);
|
|
@@ -9,7 +9,7 @@ var _articleBrief = require("./article-brief");
|
|
|
9
9
|
var _articleContent = require("./article-content");
|
|
10
10
|
var _infoBox = require("./info-box");
|
|
11
11
|
var _projectContent = require("./project-content");
|
|
12
|
-
var _default = {
|
|
12
|
+
var _default = exports.default = {
|
|
13
13
|
annotation: _annotation.blockRenderMap,
|
|
14
14
|
// article page brief
|
|
15
15
|
brief: _articleBrief.blockRenderMap,
|
|
@@ -21,5 +21,4 @@ var _default = {
|
|
|
21
21
|
},
|
|
22
22
|
// project page content
|
|
23
23
|
projectContent: _projectContent.blockRenderMap
|
|
24
|
-
};
|
|
25
|
-
exports.default = _default;
|
|
24
|
+
};
|
|
@@ -9,8 +9,8 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
9
9
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
10
10
|
var _draftJs = require("draft-js");
|
|
11
11
|
var _articleContent = require("./article-content");
|
|
12
|
-
function _getRequireWildcardCache(
|
|
13
|
-
function _interopRequireWildcard(
|
|
12
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
13
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
14
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
15
|
const HeadingForInfoBox = (0, _styledComponents.default)(_articleContent.Heading)`
|
|
16
16
|
margin-top: 0px;
|
|
@@ -65,8 +65,7 @@ const _blockRenderMapForAnnotation = _immutable.default.Map({
|
|
|
65
65
|
wrapper: /*#__PURE__*/_react.default.createElement(ParagraphForInfoBox, null)
|
|
66
66
|
}
|
|
67
67
|
});
|
|
68
|
-
const blockRenderMap = _draftJs.DefaultDraftBlockRenderMap.merge(_blockRenderMapForAnnotation);
|
|
69
|
-
exports.blockRenderMap = blockRenderMap;
|
|
68
|
+
const blockRenderMap = exports.blockRenderMap = _draftJs.DefaultDraftBlockRenderMap.merge(_blockRenderMapForAnnotation);
|
|
70
69
|
const dividerStyles = (0, _styledComponents.css)`
|
|
71
70
|
content: '';
|
|
72
71
|
width: 100%;
|
|
@@ -91,10 +90,9 @@ const HeadingForInfoBoxWithHeaderBorder = (0, _styledComponents.default)(Heading
|
|
|
91
90
|
${dividerStyles}
|
|
92
91
|
}
|
|
93
92
|
`;
|
|
94
|
-
const blockRenderMapForInfoBoxWithHeaderBorder = blockRenderMap.merge(_immutable.default.Map({
|
|
93
|
+
const blockRenderMapForInfoBoxWithHeaderBorder = exports.blockRenderMapForInfoBoxWithHeaderBorder = blockRenderMap.merge(_immutable.default.Map({
|
|
95
94
|
'header-four': {
|
|
96
95
|
element: 'h4',
|
|
97
96
|
wrapper: /*#__PURE__*/_react.default.createElement(HeadingForInfoBoxWithHeaderBorder, null)
|
|
98
97
|
}
|
|
99
|
-
}));
|
|
100
|
-
exports.blockRenderMapForInfoBoxWithHeaderBorder = blockRenderMapForInfoBoxWithHeaderBorder;
|
|
98
|
+
}));
|
|
@@ -10,15 +10,13 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
|
10
10
|
var _draftJs = require("draft-js");
|
|
11
11
|
var _articleContent = require("./article-content");
|
|
12
12
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
|
-
const Paragraph = (0, _styledComponents.default)(_articleContent.Paragraph)`
|
|
13
|
+
const Paragraph = exports.Paragraph = (0, _styledComponents.default)(_articleContent.Paragraph)`
|
|
14
14
|
text-align: center;
|
|
15
15
|
max-width: 750px;
|
|
16
16
|
`;
|
|
17
|
-
exports.
|
|
18
|
-
const Heading = (0, _styledComponents.default)(_articleContent.Heading)`
|
|
17
|
+
const Heading = exports.Heading = (0, _styledComponents.default)(_articleContent.Heading)`
|
|
19
18
|
text-align: center;
|
|
20
19
|
`;
|
|
21
|
-
exports.Heading = Heading;
|
|
22
20
|
const _blockRenderMap = _immutable.default.Map({
|
|
23
21
|
atomic: {
|
|
24
22
|
element: 'figure',
|
|
@@ -55,5 +53,4 @@ const _blockRenderMap = _immutable.default.Map({
|
|
|
55
53
|
wrapper: /*#__PURE__*/_react.default.createElement(Paragraph, null)
|
|
56
54
|
}
|
|
57
55
|
});
|
|
58
|
-
const blockRenderMap = _draftJs.DefaultDraftBlockRenderMap.merge(_blockRenderMap);
|
|
59
|
-
exports.blockRenderMap = blockRenderMap;
|
|
56
|
+
const blockRenderMap = exports.blockRenderMap = _draftJs.DefaultDraftBlockRenderMap.merge(_blockRenderMap);
|
|
@@ -7,8 +7,8 @@ exports.Dropdown = void 0;
|
|
|
7
7
|
var _react = _interopRequireWildcard(require("react"));
|
|
8
8
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
9
9
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
10
|
-
function _getRequireWildcardCache(
|
|
11
|
-
function _interopRequireWildcard(
|
|
10
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
11
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
12
12
|
const DropdownOptionList = _styledComponents.default.ul`
|
|
13
13
|
margin: 0;
|
|
14
14
|
position: relative;
|
|
@@ -9,9 +9,9 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
9
9
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
10
10
|
var _mediaQuery = require("../utils/media-query");
|
|
11
11
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
12
|
-
function _getRequireWildcardCache(
|
|
13
|
-
function _interopRequireWildcard(
|
|
14
|
-
const Block = _styledComponents.default.div`
|
|
12
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
13
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
14
|
+
const Block = exports.Block = _styledComponents.default.div`
|
|
15
15
|
position: relative;
|
|
16
16
|
white-space: normal;
|
|
17
17
|
/* styles for image link */
|
|
@@ -22,8 +22,7 @@ const Block = _styledComponents.default.div`
|
|
|
22
22
|
display: block;
|
|
23
23
|
}
|
|
24
24
|
`;
|
|
25
|
-
exports.
|
|
26
|
-
const Caption = _styledComponents.default.div`
|
|
25
|
+
const Caption = exports.Caption = _styledComponents.default.div`
|
|
27
26
|
font-size: ${({
|
|
28
27
|
theme
|
|
29
28
|
}) => (theme === null || theme === void 0 ? void 0 : theme.fontSizeLevel) === 'large' ? '18px' : '14px'};
|
|
@@ -32,7 +31,6 @@ const Caption = _styledComponents.default.div`
|
|
|
32
31
|
color: #808080;
|
|
33
32
|
padding: 15px 15px 0 15px;
|
|
34
33
|
`;
|
|
35
|
-
exports.Caption = Caption;
|
|
36
34
|
const EmbeddedCodeBlock = ({
|
|
37
35
|
className,
|
|
38
36
|
data
|
|
@@ -85,7 +83,7 @@ const EmbeddedCodeBlock = ({
|
|
|
85
83
|
};
|
|
86
84
|
exports.EmbeddedCodeBlock = EmbeddedCodeBlock;
|
|
87
85
|
const ArticleBodyContainer = _styledComponents.default.div`
|
|
88
|
-
max-width:
|
|
86
|
+
max-width: ${props => props.$align === 'image-width' ? '1000' : '700'}px;
|
|
89
87
|
margin: 0 auto 27px auto;
|
|
90
88
|
|
|
91
89
|
${_mediaQuery.mediaQuery.smallOnly} {
|
|
@@ -97,6 +95,7 @@ function EmbeddedCodeInArticleBody({
|
|
|
97
95
|
data
|
|
98
96
|
}) {
|
|
99
97
|
return /*#__PURE__*/_react.default.createElement(ArticleBodyContainer, {
|
|
98
|
+
$align: data.align,
|
|
100
99
|
className: className
|
|
101
100
|
}, /*#__PURE__*/_react.default.createElement(EmbeddedCodeBlock, {
|
|
102
101
|
data: data
|
|
@@ -11,7 +11,7 @@ var _imageBlock = require("./image-block");
|
|
|
11
11
|
var _infoBoxBlock = require("./info-box-block");
|
|
12
12
|
var _slideshowBlock = require("./slideshow-block");
|
|
13
13
|
var _newsReading = require("./news-reading");
|
|
14
|
-
const blockRenderers = {
|
|
14
|
+
const blockRenderers = exports.blockRenderers = {
|
|
15
15
|
BlockquoteInArticleBody: _blockquote.BlockquoteInArticleBody,
|
|
16
16
|
Divider: _divider.Divider,
|
|
17
17
|
EmbeddedCodeBlock: _embeddedCodeBlock.EmbeddedCodeBlock,
|
|
@@ -22,5 +22,4 @@ const blockRenderers = {
|
|
|
22
22
|
NewsReading: _newsReading.NewsReading,
|
|
23
23
|
SlideshowBlock: _slideshowBlock.SlideshowBlock,
|
|
24
24
|
SlideshowInArticleBody: _slideshowBlock.SlideshowInArticleBody
|
|
25
|
-
};
|
|
26
|
-
exports.blockRenderers = blockRenderers;
|
|
25
|
+
};
|
|
@@ -12,8 +12,8 @@ var _imageBlock = require("../block-renderers/image-block");
|
|
|
12
12
|
var _index2 = require("../utils/index");
|
|
13
13
|
var _index3 = require("../entity-decorators/index");
|
|
14
14
|
var _mediaQuery = require("../utils/media-query");
|
|
15
|
-
function _getRequireWildcardCache(
|
|
16
|
-
function _interopRequireWildcard(
|
|
15
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
16
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
17
17
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
18
18
|
var InfoBoxTypeEnum = /*#__PURE__*/function (InfoBoxTypeEnum) {
|
|
19
19
|
InfoBoxTypeEnum["newsChargeStation"] = "news-charge-station";
|
|
@@ -17,7 +17,6 @@ const mockup = {
|
|
|
17
17
|
width: 250 // px
|
|
18
18
|
}
|
|
19
19
|
},
|
|
20
|
-
|
|
21
20
|
tablet: {
|
|
22
21
|
figure: {
|
|
23
22
|
width: '100%'
|
|
@@ -26,7 +25,6 @@ const mockup = {
|
|
|
26
25
|
width: 512 // px
|
|
27
26
|
}
|
|
28
27
|
},
|
|
29
|
-
|
|
30
28
|
desktop: {
|
|
31
29
|
figure: {
|
|
32
30
|
width: {
|
|
@@ -35,12 +33,10 @@ const mockup = {
|
|
|
35
33
|
small: 403 // px
|
|
36
34
|
}
|
|
37
35
|
},
|
|
38
|
-
|
|
39
36
|
caption: {
|
|
40
37
|
width: 180 // px
|
|
41
38
|
}
|
|
42
39
|
},
|
|
43
|
-
|
|
44
40
|
hd: {
|
|
45
41
|
figure: {
|
|
46
42
|
width: {
|
|
@@ -49,13 +45,11 @@ const mockup = {
|
|
|
49
45
|
small: 532 // px
|
|
50
46
|
}
|
|
51
47
|
},
|
|
52
|
-
|
|
53
48
|
caption: {
|
|
54
49
|
width: 265 // px
|
|
55
50
|
}
|
|
56
51
|
}
|
|
57
52
|
};
|
|
58
|
-
|
|
59
53
|
const Caption = _styledComponents.default.figcaption`
|
|
60
54
|
color: #494949;
|
|
61
55
|
&::after {
|
|
@@ -118,7 +112,6 @@ const Caption = _styledComponents.default.figcaption`
|
|
|
118
112
|
padding: 25px 0 20px 0;
|
|
119
113
|
}
|
|
120
114
|
`;
|
|
121
|
-
var _default = {
|
|
115
|
+
var _default = exports.default = {
|
|
122
116
|
Caption
|
|
123
|
-
};
|
|
124
|
-
exports.default = _default;
|
|
117
|
+
};
|
|
@@ -8,8 +8,8 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
8
8
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
9
9
|
var _dropdown = require("./dropdown");
|
|
10
10
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
|
-
function _getRequireWildcardCache(
|
|
12
|
-
function _interopRequireWildcard(
|
|
11
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
12
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
13
13
|
const ArticleBodyContainer = _styledComponents.default.div`
|
|
14
14
|
max-width: 600px;
|
|
15
15
|
width: calc(280 / 320 * 100%);
|
|
@@ -10,15 +10,14 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
10
10
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
11
11
|
var _index = require("../utils/index");
|
|
12
12
|
var _mediaQuery = require("../utils/media-query");
|
|
13
|
-
function _getRequireWildcardCache(
|
|
14
|
-
function _interopRequireWildcard(
|
|
13
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
14
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
15
15
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
16
16
|
const mockup = {
|
|
17
17
|
mobile: {
|
|
18
18
|
container: {
|
|
19
19
|
width: 375 // px
|
|
20
20
|
},
|
|
21
|
-
|
|
22
21
|
slide: {
|
|
23
22
|
width: 339,
|
|
24
23
|
// px
|
|
@@ -26,17 +25,14 @@ const mockup = {
|
|
|
26
25
|
// px
|
|
27
26
|
paddingRight: 2 // px
|
|
28
27
|
},
|
|
29
|
-
|
|
30
28
|
offset: {
|
|
31
29
|
left: 18 // px
|
|
32
30
|
}
|
|
33
31
|
},
|
|
34
|
-
|
|
35
32
|
tablet: {
|
|
36
33
|
container: {
|
|
37
34
|
width: 768 // px
|
|
38
35
|
},
|
|
39
|
-
|
|
40
36
|
slide: {
|
|
41
37
|
width: 687,
|
|
42
38
|
// px
|
|
@@ -44,17 +40,14 @@ const mockup = {
|
|
|
44
40
|
// px
|
|
45
41
|
paddingRight: 4 // px
|
|
46
42
|
},
|
|
47
|
-
|
|
48
43
|
offset: {
|
|
49
44
|
left: 41 // px
|
|
50
45
|
}
|
|
51
46
|
},
|
|
52
|
-
|
|
53
47
|
desktop: {
|
|
54
48
|
container: {
|
|
55
49
|
width: 752 // px
|
|
56
50
|
},
|
|
57
|
-
|
|
58
51
|
slide: {
|
|
59
52
|
width: 688,
|
|
60
53
|
// px
|
|
@@ -62,17 +55,14 @@ const mockup = {
|
|
|
62
55
|
// px
|
|
63
56
|
paddingRight: 4 // px
|
|
64
57
|
},
|
|
65
|
-
|
|
66
58
|
offset: {
|
|
67
59
|
left: 32 // px
|
|
68
60
|
}
|
|
69
61
|
},
|
|
70
|
-
|
|
71
62
|
hd: {
|
|
72
63
|
container: {
|
|
73
64
|
width: 1034 // px
|
|
74
65
|
},
|
|
75
|
-
|
|
76
66
|
slide: {
|
|
77
67
|
width: 944,
|
|
78
68
|
// px
|
|
@@ -80,7 +70,6 @@ const mockup = {
|
|
|
80
70
|
// px
|
|
81
71
|
paddingRight: 4 // px
|
|
82
72
|
},
|
|
83
|
-
|
|
84
73
|
offset: {
|
|
85
74
|
left: 45 // px
|
|
86
75
|
}
|
|
@@ -456,7 +445,6 @@ function getLeftMaskWidth(deviceMockup) {
|
|
|
456
445
|
function getRightMaskWidth(deviceMockup) {
|
|
457
446
|
return deviceMockup.container.width - deviceMockup.offset.left - getSlideWidth(deviceMockup); // px
|
|
458
447
|
}
|
|
459
|
-
|
|
460
448
|
function SlideshowBlock({
|
|
461
449
|
className = '',
|
|
462
450
|
data
|
package/lib/custom-style-fn.js
CHANGED
|
@@ -4,10 +4,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.fontColorPrefix = exports.default = exports.customStyleFn = exports.bgColorPrefix = void 0;
|
|
7
|
-
const bgColorPrefix = 'BACKGROUND_COLOR_';
|
|
8
|
-
exports.
|
|
9
|
-
const fontColorPrefix = 'FONT_COLOR_';
|
|
10
|
-
exports.fontColorPrefix = fontColorPrefix;
|
|
7
|
+
const bgColorPrefix = exports.bgColorPrefix = 'BACKGROUND_COLOR_';
|
|
8
|
+
const fontColorPrefix = exports.fontColorPrefix = 'FONT_COLOR_';
|
|
11
9
|
const customStyleFn = style => {
|
|
12
10
|
return style.reduce((cssObject = {}, styleName) => {
|
|
13
11
|
if (styleName !== null && styleName !== void 0 && styleName.startsWith(bgColorPrefix)) {
|
|
@@ -20,5 +18,4 @@ const customStyleFn = style => {
|
|
|
20
18
|
}, {});
|
|
21
19
|
};
|
|
22
20
|
exports.customStyleFn = customStyleFn;
|
|
23
|
-
var _default = customStyleFn;
|
|
24
|
-
exports.default = _default;
|
|
21
|
+
var _default = exports.default = customStyleFn;
|
package/lib/draft-renderer.js
CHANGED
|
@@ -3,11 +3,8 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.ArticleBodyDraftRenderer = void 0;
|
|
7
|
-
|
|
8
|
-
exports.DraftRenderer = DraftRenderer;
|
|
9
|
-
exports.ProjectContentDraftRenderer = ProjectContentDraftRenderer;
|
|
10
|
-
var _react = _interopRequireDefault(require("react"));
|
|
6
|
+
exports.ProjectContentDraftRenderer = exports.DraftRenderer = exports.ArticleIntroductionDraftRenderer = exports.ArticleBodyDraftRenderer = void 0;
|
|
7
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
11
8
|
var _index = _interopRequireDefault(require("./block-render-maps/index"));
|
|
12
9
|
var _draftJs = require("draft-js");
|
|
13
10
|
var _index2 = require("./utils/index");
|
|
@@ -16,6 +13,8 @@ var _blockRendererFn = require("./block-renderer-fn");
|
|
|
16
13
|
var _customStyleFn = require("./custom-style-fn");
|
|
17
14
|
var _entityDecorators = require("./entity-decorators");
|
|
18
15
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
16
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
17
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
19
18
|
const blockRendererFn = block => {
|
|
20
19
|
const atomicBlockObj = (0, _blockRendererFn.atomicBlockRenderer)(block);
|
|
21
20
|
return atomicBlockObj;
|
|
@@ -25,17 +24,30 @@ var FontSizeLevel = /*#__PURE__*/function (FontSizeLevel) {
|
|
|
25
24
|
FontSizeLevel["LARGE"] = "large";
|
|
26
25
|
return FontSizeLevel;
|
|
27
26
|
}(FontSizeLevel || {});
|
|
28
|
-
|
|
27
|
+
const DraftRenderer = ({
|
|
29
28
|
rawContentState,
|
|
30
29
|
themeColor = _index2.ThemeColorEnum.RED,
|
|
31
|
-
fontSizeLevel = FontSizeLevel.NORMAL
|
|
32
|
-
|
|
30
|
+
fontSizeLevel = FontSizeLevel.NORMAL,
|
|
31
|
+
initiallyScrollTo = '',
|
|
32
|
+
offsetTop = 0
|
|
33
|
+
}) => {
|
|
33
34
|
const contentState = (0, _draftJs.convertFromRaw)(rawContentState);
|
|
34
35
|
const editorState = _draftJs.EditorState.createWithContent(contentState, _entityDecorators.decorator);
|
|
36
|
+
const scrollToElement = hash => {
|
|
37
|
+
const anchor = document.querySelector(hash);
|
|
38
|
+
anchor && window.scrollTo({
|
|
39
|
+
top: anchor.offsetTop - offsetTop,
|
|
40
|
+
behavior: 'smooth'
|
|
41
|
+
});
|
|
42
|
+
};
|
|
43
|
+
(0, _react.useEffect)(() => {
|
|
44
|
+
initiallyScrollTo && scrollToElement(initiallyScrollTo);
|
|
45
|
+
}, []);
|
|
35
46
|
return /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
|
|
36
47
|
theme: {
|
|
37
48
|
themeColor,
|
|
38
|
-
fontSizeLevel
|
|
49
|
+
fontSizeLevel,
|
|
50
|
+
offsetTop
|
|
39
51
|
}
|
|
40
52
|
}, /*#__PURE__*/_react.default.createElement(_draftJs.Editor, {
|
|
41
53
|
editorState: editorState,
|
|
@@ -47,14 +59,14 @@ function DraftRenderer({
|
|
|
47
59
|
,
|
|
48
60
|
onChange: () => {}
|
|
49
61
|
}));
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
exports.ArticleBodyDraftRenderer =
|
|
53
|
-
|
|
62
|
+
};
|
|
63
|
+
exports.DraftRenderer = DraftRenderer;
|
|
64
|
+
const ArticleBodyDraftRenderer = exports.ArticleBodyDraftRenderer = DraftRenderer;
|
|
65
|
+
const ArticleIntroductionDraftRenderer = ({
|
|
54
66
|
rawContentState,
|
|
55
67
|
themeColor = _index2.ThemeColorEnum.RED,
|
|
56
68
|
fontSizeLevel = FontSizeLevel.NORMAL
|
|
57
|
-
}) {
|
|
69
|
+
}) => {
|
|
58
70
|
const contentState = (0, _draftJs.convertFromRaw)(rawContentState);
|
|
59
71
|
const editorState = _draftJs.EditorState.createWithContent(contentState, _entityDecorators.decorator);
|
|
60
72
|
return /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
|
|
@@ -71,12 +83,13 @@ function ArticleIntroductionDraftRenderer({
|
|
|
71
83
|
,
|
|
72
84
|
onChange: () => {}
|
|
73
85
|
}));
|
|
74
|
-
}
|
|
75
|
-
|
|
86
|
+
};
|
|
87
|
+
exports.ArticleIntroductionDraftRenderer = ArticleIntroductionDraftRenderer;
|
|
88
|
+
const ProjectContentDraftRenderer = ({
|
|
76
89
|
rawContentState,
|
|
77
90
|
themeColor = _index2.ThemeColorEnum.BLUE,
|
|
78
91
|
fontSizeLevel = FontSizeLevel.NORMAL
|
|
79
|
-
}) {
|
|
92
|
+
}) => {
|
|
80
93
|
const contentState = (0, _draftJs.convertFromRaw)(rawContentState);
|
|
81
94
|
const editorState = _draftJs.EditorState.createWithContent(contentState, _entityDecorators.decorator);
|
|
82
95
|
return /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
|
|
@@ -94,4 +107,5 @@ function ProjectContentDraftRenderer({
|
|
|
94
107
|
,
|
|
95
108
|
onChange: () => {}
|
|
96
109
|
}));
|
|
97
|
-
}
|
|
110
|
+
};
|
|
111
|
+
exports.ProjectContentDraftRenderer = ProjectContentDraftRenderer;
|
|
@@ -3,18 +3,10 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.anchorDecorator = void 0;
|
|
7
7
|
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _entity = require("../utils/entity");
|
|
8
9
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
9
|
-
const ANCHOR_ENTITY_TYPE = 'TOC_ANCHOR';
|
|
10
|
-
exports.ANCHOR_ENTITY_TYPE = ANCHOR_ENTITY_TYPE;
|
|
11
|
-
const findAnchorEntities = (contentBlock, callback, contentState) => {
|
|
12
|
-
contentBlock.findEntityRanges(character => {
|
|
13
|
-
const entityKey = character.getEntity();
|
|
14
|
-
return entityKey !== null && contentState.getEntity(entityKey).getType() === ANCHOR_ENTITY_TYPE;
|
|
15
|
-
}, callback);
|
|
16
|
-
};
|
|
17
|
-
exports.findAnchorEntities = findAnchorEntities;
|
|
18
10
|
const Anchor = props => {
|
|
19
11
|
var _contentState$getEnti;
|
|
20
12
|
const {
|
|
@@ -22,13 +14,12 @@ const Anchor = props => {
|
|
|
22
14
|
contentState,
|
|
23
15
|
entityKey
|
|
24
16
|
} = props;
|
|
25
|
-
const
|
|
17
|
+
const id = contentState === null || contentState === void 0 || (_contentState$getEnti = contentState.getEntity(entityKey)) === null || _contentState$getEnti === void 0 || (_contentState$getEnti = _contentState$getEnti.getData()) === null || _contentState$getEnti === void 0 ? void 0 : _contentState$getEnti.anchorID;
|
|
26
18
|
return /*#__PURE__*/_react.default.createElement("span", {
|
|
27
|
-
id:
|
|
19
|
+
id: id
|
|
28
20
|
}, children);
|
|
29
21
|
};
|
|
30
|
-
const anchorDecorator = {
|
|
31
|
-
strategy:
|
|
22
|
+
const anchorDecorator = exports.anchorDecorator = {
|
|
23
|
+
strategy: (0, _entity.findEntitiesByType)(_entity.ENTITY.Anchor),
|
|
32
24
|
component: Anchor
|
|
33
|
-
};
|
|
34
|
-
exports.anchorDecorator = anchorDecorator;
|
|
25
|
+
};
|
|
@@ -7,11 +7,12 @@ exports.annotationDecorator = void 0;
|
|
|
7
7
|
var _react = _interopRequireWildcard(require("react"));
|
|
8
8
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
9
9
|
var _draftJs = require("draft-js");
|
|
10
|
-
var
|
|
11
|
-
var
|
|
10
|
+
var _blockRenderMaps = _interopRequireDefault(require("../block-render-maps"));
|
|
11
|
+
var _entityDecorators = require("../entity-decorators");
|
|
12
|
+
var _entity = require("../utils/entity");
|
|
12
13
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
|
-
function _getRequireWildcardCache(
|
|
14
|
-
function _interopRequireWildcard(
|
|
14
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
15
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
15
16
|
const AnnotationWrapper = _styledComponents.default.span`
|
|
16
17
|
display: inline-block;
|
|
17
18
|
cursor: pointer;
|
|
@@ -71,7 +72,7 @@ function AnnotationBlock(props) {
|
|
|
71
72
|
rawContentState
|
|
72
73
|
} = props.contentState.getEntity(props.entityKey).getData();
|
|
73
74
|
const contentState = (0, _draftJs.convertFromRaw)(rawContentState);
|
|
74
|
-
const editorState = _draftJs.EditorState.createWithContent(contentState,
|
|
75
|
+
const editorState = _draftJs.EditorState.createWithContent(contentState, _entityDecorators.decorator);
|
|
75
76
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(AnnotationWrapper, {
|
|
76
77
|
onClick: e => {
|
|
77
78
|
e.preventDefault();
|
|
@@ -81,21 +82,14 @@ function AnnotationBlock(props) {
|
|
|
81
82
|
$showContent: showContent
|
|
82
83
|
})), showContent ? /*#__PURE__*/_react.default.createElement(AnnotationBody, null, /*#__PURE__*/_react.default.createElement(_draftJs.Editor, {
|
|
83
84
|
editorState: editorState,
|
|
84
|
-
blockRenderMap:
|
|
85
|
+
blockRenderMap: _blockRenderMaps.default.annotation,
|
|
85
86
|
readOnly: true
|
|
86
87
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
87
88
|
,
|
|
88
89
|
onChange: () => {}
|
|
89
90
|
})) : null);
|
|
90
91
|
}
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
const entityKey = character.getEntity();
|
|
94
|
-
return entityKey !== null && contentState.getEntity(entityKey).getType() === 'ANNOTATION';
|
|
95
|
-
}, callback);
|
|
96
|
-
}
|
|
97
|
-
const annotationDecorator = {
|
|
98
|
-
strategy: findAnnotationEntities,
|
|
92
|
+
const annotationDecorator = exports.annotationDecorator = {
|
|
93
|
+
strategy: (0, _entity.findEntitiesByType)(_entity.ENTITY.Annotation),
|
|
99
94
|
component: AnnotationBlock
|
|
100
|
-
};
|
|
101
|
-
exports.annotationDecorator = annotationDecorator;
|
|
95
|
+
};
|
|
@@ -3,12 +3,6 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
Object.defineProperty(exports, "ANCHOR_ENTITY_TYPE", {
|
|
7
|
-
enumerable: true,
|
|
8
|
-
get: function () {
|
|
9
|
-
return _anchor.ANCHOR_ENTITY_TYPE;
|
|
10
|
-
}
|
|
11
|
-
});
|
|
12
6
|
Object.defineProperty(exports, "annotationDecorator", {
|
|
13
7
|
enumerable: true,
|
|
14
8
|
get: function () {
|
|
@@ -16,12 +10,6 @@ Object.defineProperty(exports, "annotationDecorator", {
|
|
|
16
10
|
}
|
|
17
11
|
});
|
|
18
12
|
exports.decorator = void 0;
|
|
19
|
-
Object.defineProperty(exports, "findAnchorEntities", {
|
|
20
|
-
enumerable: true,
|
|
21
|
-
get: function () {
|
|
22
|
-
return _anchor.findAnchorEntities;
|
|
23
|
-
}
|
|
24
|
-
});
|
|
25
13
|
Object.defineProperty(exports, "linkDecorator", {
|
|
26
14
|
enumerable: true,
|
|
27
15
|
get: function () {
|
|
@@ -31,6 +19,6 @@ Object.defineProperty(exports, "linkDecorator", {
|
|
|
31
19
|
var _draftJs = require("draft-js");
|
|
32
20
|
var _annotationDecorator = require("./annotation-decorator");
|
|
33
21
|
var _linkDecorator = require("./link-decorator");
|
|
22
|
+
var _tocAnchor = require("./toc-anchor");
|
|
34
23
|
var _anchor = require("./anchor");
|
|
35
|
-
const decorator = new _draftJs.CompositeDecorator([_annotationDecorator.annotationDecorator, _linkDecorator.linkDecorator, _anchor.anchorDecorator]);
|
|
36
|
-
exports.decorator = decorator;
|
|
24
|
+
const decorator = exports.decorator = new _draftJs.CompositeDecorator([_annotationDecorator.annotationDecorator, _linkDecorator.linkDecorator, _tocAnchor.tocAnchorDecorator, _anchor.anchorDecorator]);
|
|
@@ -5,34 +5,45 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.linkDecorator = void 0;
|
|
7
7
|
var _react = _interopRequireDefault(require("react"));
|
|
8
|
-
var _styledComponents =
|
|
8
|
+
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
9
|
+
var _entity = require("../utils/entity");
|
|
10
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
11
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
9
12
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
10
13
|
const LinkWrapper = _styledComponents.default.a`
|
|
11
14
|
text-decoration: underline;
|
|
12
15
|
color: #27b5f7;
|
|
13
16
|
transition: color 0.1s ease-in;
|
|
17
|
+
cursor: pointer;
|
|
14
18
|
|
|
15
19
|
&:hover {
|
|
16
20
|
color: #232323;
|
|
17
21
|
}
|
|
18
22
|
`;
|
|
19
|
-
|
|
20
|
-
contentBlock.findEntityRanges(character => {
|
|
21
|
-
const entityKey = character.getEntity();
|
|
22
|
-
return entityKey !== null && contentState.getEntity(entityKey).getType() === 'LINK';
|
|
23
|
-
}, callback);
|
|
24
|
-
}
|
|
25
|
-
const linkDecorator = {
|
|
26
|
-
strategy: findLinkEntities,
|
|
27
|
-
component: Link
|
|
28
|
-
};
|
|
29
|
-
exports.linkDecorator = linkDecorator;
|
|
30
|
-
function Link(props) {
|
|
23
|
+
const Link = props => {
|
|
31
24
|
const {
|
|
32
25
|
url
|
|
33
26
|
} = props.contentState.getEntity(props.entityKey).getData();
|
|
34
|
-
|
|
27
|
+
const theme = (0, _styledComponents.useTheme)();
|
|
28
|
+
|
|
29
|
+
// Handling for internal/external links, internal links start with '#'
|
|
30
|
+
const linkProps = url.match(/^#/) ? {
|
|
31
|
+
onClick: () => {
|
|
32
|
+
const anchor = document.querySelector(url);
|
|
33
|
+
if (anchor) {
|
|
34
|
+
window.scrollTo({
|
|
35
|
+
top: anchor.offsetTop - (theme === null || theme === void 0 ? void 0 : theme.offsetTop),
|
|
36
|
+
behavior: 'smooth'
|
|
37
|
+
});
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
} : {
|
|
35
41
|
href: url,
|
|
36
|
-
target:
|
|
37
|
-
}
|
|
38
|
-
|
|
42
|
+
target: '_blank'
|
|
43
|
+
};
|
|
44
|
+
return /*#__PURE__*/_react.default.createElement(LinkWrapper, linkProps, props.children);
|
|
45
|
+
};
|
|
46
|
+
const linkDecorator = exports.linkDecorator = {
|
|
47
|
+
strategy: (0, _entity.findEntitiesByType)(_entity.ENTITY.Link),
|
|
48
|
+
component: Link
|
|
49
|
+
};
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.tocAnchorDecorator = void 0;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _entity = require("../utils/entity");
|
|
9
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
10
|
+
const TOCAnchor = props => {
|
|
11
|
+
var _contentState$getEnti;
|
|
12
|
+
const {
|
|
13
|
+
children,
|
|
14
|
+
contentState,
|
|
15
|
+
entityKey
|
|
16
|
+
} = props;
|
|
17
|
+
const key = contentState === null || contentState === void 0 || (_contentState$getEnti = contentState.getEntity(entityKey)) === null || _contentState$getEnti === void 0 || (_contentState$getEnti = _contentState$getEnti.getData()) === null || _contentState$getEnti === void 0 ? void 0 : _contentState$getEnti.anchorKey;
|
|
18
|
+
return /*#__PURE__*/_react.default.createElement("span", {
|
|
19
|
+
id: `toc-anchor-${key}`
|
|
20
|
+
}, children);
|
|
21
|
+
};
|
|
22
|
+
const tocAnchorDecorator = exports.tocAnchorDecorator = {
|
|
23
|
+
strategy: (0, _entity.findEntitiesByType)(_entity.ENTITY.TOCAnchor),
|
|
24
|
+
component: TOCAnchor
|
|
25
|
+
};
|
package/lib/index.js
CHANGED
|
@@ -3,12 +3,6 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
Object.defineProperty(exports, "ANCHOR_ENTITY_TYPE", {
|
|
7
|
-
enumerable: true,
|
|
8
|
-
get: function () {
|
|
9
|
-
return _entityDecorators.ANCHOR_ENTITY_TYPE;
|
|
10
|
-
}
|
|
11
|
-
});
|
|
12
6
|
Object.defineProperty(exports, "ArticleBodyDraftRenderer", {
|
|
13
7
|
enumerable: true,
|
|
14
8
|
get: function () {
|
|
@@ -27,6 +21,12 @@ Object.defineProperty(exports, "DraftRenderer", {
|
|
|
27
21
|
return _draftRenderer.DraftRenderer;
|
|
28
22
|
}
|
|
29
23
|
});
|
|
24
|
+
Object.defineProperty(exports, "ENTITY", {
|
|
25
|
+
enumerable: true,
|
|
26
|
+
get: function () {
|
|
27
|
+
return _entity.ENTITY;
|
|
28
|
+
}
|
|
29
|
+
});
|
|
30
30
|
Object.defineProperty(exports, "ProjectContentDraftRenderer", {
|
|
31
31
|
enumerable: true,
|
|
32
32
|
get: function () {
|
|
@@ -59,10 +59,10 @@ Object.defineProperty(exports, "customStyleFn", {
|
|
|
59
59
|
}
|
|
60
60
|
});
|
|
61
61
|
exports.default = void 0;
|
|
62
|
-
Object.defineProperty(exports, "
|
|
62
|
+
Object.defineProperty(exports, "findEntitiesByType", {
|
|
63
63
|
enumerable: true,
|
|
64
64
|
get: function () {
|
|
65
|
-
return
|
|
65
|
+
return _entity.findEntitiesByType;
|
|
66
66
|
}
|
|
67
67
|
});
|
|
68
68
|
Object.defineProperty(exports, "linkDecorator", {
|
|
@@ -76,11 +76,11 @@ var _draftRenderer = require("./draft-renderer");
|
|
|
76
76
|
var _blockRendererFn = require("./block-renderer-fn");
|
|
77
77
|
var _blockRenderers = require("./block-renderers");
|
|
78
78
|
var _entityDecorators = require("./entity-decorators");
|
|
79
|
+
var _entity = require("./utils/entity");
|
|
79
80
|
var _customStyleFn = require("./custom-style-fn");
|
|
80
81
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
81
|
-
const blockRenderMap = _index.default.content;
|
|
82
|
-
exports.
|
|
83
|
-
var _default = {
|
|
82
|
+
const blockRenderMap = exports.blockRenderMap = _index.default.content;
|
|
83
|
+
var _default = exports.default = {
|
|
84
84
|
ArticleBodyDraftRenderer: _draftRenderer.ArticleBodyDraftRenderer,
|
|
85
85
|
ArticleIntroductionDraftRenderer: _draftRenderer.ArticleIntroductionDraftRenderer,
|
|
86
86
|
DraftRenderer: _draftRenderer.DraftRenderer,
|
|
@@ -91,7 +91,6 @@ var _default = {
|
|
|
91
91
|
customStyleFn: _customStyleFn.customStyleFn,
|
|
92
92
|
annotationDecorator: _entityDecorators.annotationDecorator,
|
|
93
93
|
linkDecorator: _entityDecorators.linkDecorator,
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
};
|
|
97
|
-
exports.default = _default;
|
|
94
|
+
ENTITY: _entity.ENTITY,
|
|
95
|
+
findEntitiesByType: _entity.findEntitiesByType
|
|
96
|
+
};
|
package/lib/utils/color.js
CHANGED
|
@@ -6,13 +6,12 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.ThemeColorEnum = void 0;
|
|
7
7
|
exports.getColorHex = getColorHex;
|
|
8
8
|
var _constants = require("./constants");
|
|
9
|
-
let ThemeColorEnum = /*#__PURE__*/function (ThemeColorEnum) {
|
|
9
|
+
let ThemeColorEnum = exports.ThemeColorEnum = /*#__PURE__*/function (ThemeColorEnum) {
|
|
10
10
|
ThemeColorEnum["RED"] = "red";
|
|
11
11
|
ThemeColorEnum["BLUE"] = "blue";
|
|
12
12
|
ThemeColorEnum["YELLOW"] = "yellow";
|
|
13
13
|
return ThemeColorEnum;
|
|
14
14
|
}({});
|
|
15
|
-
exports.ThemeColorEnum = ThemeColorEnum;
|
|
16
15
|
function getColorHex(themeColor) {
|
|
17
16
|
switch (themeColor) {
|
|
18
17
|
case ThemeColorEnum.RED:
|
package/lib/utils/constants.js
CHANGED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.findEntitiesByType = exports.ENTITY = void 0;
|
|
7
|
+
let ENTITY = exports.ENTITY = /*#__PURE__*/function (ENTITY) {
|
|
8
|
+
ENTITY["Link"] = "LINK";
|
|
9
|
+
ENTITY["Annotation"] = "ANNOTATION";
|
|
10
|
+
ENTITY["Anchor"] = "ANCHOR";
|
|
11
|
+
ENTITY["TOCAnchor"] = "TOC_ANCHOR";
|
|
12
|
+
return ENTITY;
|
|
13
|
+
}({});
|
|
14
|
+
const findEntitiesByType = type => {
|
|
15
|
+
return (contentBlock, callback, contentState) => {
|
|
16
|
+
contentBlock.findEntityRanges(character => {
|
|
17
|
+
const entityKey = character.getEntity();
|
|
18
|
+
return entityKey !== null && contentState.getEntity(entityKey).getType() === type;
|
|
19
|
+
}, callback);
|
|
20
|
+
};
|
|
21
|
+
};
|
|
22
|
+
exports.findEntitiesByType = findEntitiesByType;
|
package/lib/utils/media-query.js
CHANGED
|
@@ -4,17 +4,15 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.mediaQuery = exports.breakpoints = void 0;
|
|
7
|
-
const breakpoints = {
|
|
7
|
+
const breakpoints = exports.breakpoints = {
|
|
8
8
|
small: 320,
|
|
9
9
|
medium: 760,
|
|
10
10
|
large: 1440
|
|
11
11
|
};
|
|
12
|
-
exports.
|
|
13
|
-
const mediaQuery = {
|
|
12
|
+
const mediaQuery = exports.mediaQuery = {
|
|
14
13
|
smallOnly: `@media (max-width: ${breakpoints.medium - 1}px)`,
|
|
15
14
|
mediumOnly: `@media (min-width: ${breakpoints.medium}px) and (max-width: ${breakpoints.large - 1}px)`,
|
|
16
15
|
mediumAbove: `@media (min-width: ${breakpoints.medium}px)`,
|
|
17
16
|
largeBelow: `@media (max-width: ${breakpoints.large - 1}px)`,
|
|
18
17
|
largeOnly: `@media (min-width: ${breakpoints.large}px)`
|
|
19
|
-
};
|
|
20
|
-
exports.mediaQuery = mediaQuery;
|
|
18
|
+
};
|
package/package.json
CHANGED
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.findAnchorEntities = exports.anchorDecorator = exports.ANCHOR_ENTITY_TYPE = void 0;
|
|
7
|
-
var _react = _interopRequireDefault(require("react"));
|
|
8
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
9
|
-
const ANCHOR_ENTITY_TYPE = 'ANCHOR';
|
|
10
|
-
exports.ANCHOR_ENTITY_TYPE = ANCHOR_ENTITY_TYPE;
|
|
11
|
-
const findAnchorEntities = (contentBlock, callback, contentState) => {
|
|
12
|
-
contentBlock.findEntityRanges(character => {
|
|
13
|
-
const entityKey = character.getEntity();
|
|
14
|
-
return entityKey !== null && contentState.getEntity(entityKey).getType() === ANCHOR_ENTITY_TYPE;
|
|
15
|
-
}, callback);
|
|
16
|
-
};
|
|
17
|
-
exports.findAnchorEntities = findAnchorEntities;
|
|
18
|
-
const Anchor = props => {
|
|
19
|
-
var _contentState$getEnti;
|
|
20
|
-
const {
|
|
21
|
-
children,
|
|
22
|
-
contentState,
|
|
23
|
-
entityKey
|
|
24
|
-
} = props;
|
|
25
|
-
const id = contentState === null || contentState === void 0 || (_contentState$getEnti = contentState.getEntity(entityKey)) === null || _contentState$getEnti === void 0 || (_contentState$getEnti = _contentState$getEnti.getData()) === null || _contentState$getEnti === void 0 ? void 0 : _contentState$getEnti.anchorID;
|
|
26
|
-
return /*#__PURE__*/_react.default.createElement("span", {
|
|
27
|
-
id: id
|
|
28
|
-
}, children);
|
|
29
|
-
};
|
|
30
|
-
const anchorDecorator = {
|
|
31
|
-
strategy: findAnchorEntities,
|
|
32
|
-
component: Anchor
|
|
33
|
-
};
|
|
34
|
-
exports.anchorDecorator = anchorDecorator;
|