@kids-reporter/draft-renderer 0.4.17 → 0.4.19

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.
Files changed (12) hide show
  1. package/lib/block-render-maps/annotation.js +55 -0
  2. package/lib/block-render-maps/article-brief.js +35 -0
  3. package/lib/block-render-maps/article-content.js +120 -0
  4. package/lib/block-render-maps/index.js +25 -0
  5. package/lib/block-render-maps/info-box.js +97 -0
  6. package/lib/block-render-maps/project-content.js +58 -0
  7. package/lib/block-renderers/info-box-block.js +9 -9
  8. package/lib/draft-renderer.js +30 -9
  9. package/lib/entity-decorators/annotation-decorator.js +9 -9
  10. package/lib/index.js +14 -9
  11. package/package.json +1 -1
  12. package/lib/block-render-map.js +0 -238
package/lib/block-render-maps/annotation.js ADDED
@@ -0,0 +1,55 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.blockRenderMap = void 0;
7
+ var _immutable = _interopRequireDefault(require("immutable"));
8
+ var _react = _interopRequireDefault(require("react"));
9
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
10
+ var _draftJs = require("draft-js");
11
+ var _articleContent = require("./article-content");
12
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
+ const HeadingForAnnotation = (0, _styledComponents.default)(_articleContent.Heading)`
14
+ margin: 0 auto 27px auto;
15
+ `;
16
+ const ListForAnnotation = (0, _styledComponents.default)(_articleContent.List)`
17
+ li {
18
+ font-size: 16px;
19
+ }
20
+ `;
21
+ const ParagraphForAnnotation = (0, _styledComponents.default)(_articleContent.Paragraph)`
22
+ /* overwrite css */
23
+ font-size: 16px;
24
+ font-weight: 400;
25
+ margin-bottom: 20px;
26
+ `;
27
+ const _blockRenderMapForAnnotation = _immutable.default.Map({
28
+ atomic: {
29
+ element: 'div'
30
+ },
31
+ 'header-four': {
32
+ element: 'h4',
33
+ wrapper: /*#__PURE__*/_react.default.createElement(HeadingForAnnotation, null)
34
+ },
35
+ 'header-five': {
36
+ element: 'h5',
37
+ wrapper: /*#__PURE__*/_react.default.createElement(HeadingForAnnotation, null)
38
+ },
39
+ 'ordered-list-item': {
40
+ element: 'li',
41
+ wrapper: /*#__PURE__*/_react.default.createElement(ListForAnnotation, null)
42
+ },
43
+ 'unordered-list-item': {
44
+ element: 'li',
45
+ wrapper: /*#__PURE__*/_react.default.createElement(ListForAnnotation, {
46
+ as: "ul"
47
+ })
48
+ },
49
+ unstyled: {
50
+ element: 'div',
51
+ wrapper: /*#__PURE__*/_react.default.createElement(ParagraphForAnnotation, null)
52
+ }
53
+ });
54
+ const blockRenderMap = _draftJs.DefaultDraftBlockRenderMap.merge(_blockRenderMapForAnnotation);
55
+ exports.blockRenderMap = blockRenderMap;
package/lib/block-render-maps/article-brief.js ADDED
@@ -0,0 +1,35 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.blockRenderMap = void 0;
7
+ var _immutable = _interopRequireDefault(require("immutable"));
8
+ var _react = _interopRequireDefault(require("react"));
9
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
10
+ var _draftJs = require("draft-js");
11
+ var _articleContent = require("./article-content");
12
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
+ const ParagraphForIntroduction = (0, _styledComponents.default)(_articleContent.Paragraph)`
14
+ color: #575757;
15
+ `;
16
+ const ListForIntroduction = (0, _styledComponents.default)(_articleContent.List)`
17
+ color: #575757;
18
+ `;
19
+ const blockRenderMap = _draftJs.DefaultDraftBlockRenderMap.merge(_immutable.default.Map({
20
+ 'ordered-list-item': {
21
+ element: 'li',
22
+ wrapper: /*#__PURE__*/_react.default.createElement(ListForIntroduction, null)
23
+ },
24
+ 'unordered-list-item': {
25
+ element: 'li',
26
+ wrapper: /*#__PURE__*/_react.default.createElement(ListForIntroduction, {
27
+ as: "ul"
28
+ })
29
+ },
30
+ unstyled: {
31
+ element: 'div',
32
+ wrapper: /*#__PURE__*/_react.default.createElement(ParagraphForIntroduction, null)
33
+ }
34
+ }));
35
+ exports.blockRenderMap = blockRenderMap;
package/lib/block-render-maps/article-content.js ADDED
@@ -0,0 +1,120 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.blockRenderMap = exports.Paragraph = exports.List = exports.Heading = void 0;
7
+ var _immutable = _interopRequireDefault(require("immutable"));
8
+ var _react = _interopRequireDefault(require("react"));
9
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
10
+ var _draftJs = require("draft-js");
11
+ var _mediaQuery = require("../utils/media-query");
12
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
+ const Paragraph = _styledComponents.default.div`
14
+ width: 100%;
15
+ max-width: 700px;
16
+ font-size: 18px;
17
+ font-weight: 400;
18
+ color: #3a4f66;
19
+ letter-spacing: 0.9px;
20
+ line-height: 2;
21
+ margin: 0 auto;
22
+
23
+ ${_mediaQuery.mediaQuery.smallOnly} {
24
+ padding-left: 15px;
25
+ padding-right: 15px;
26
+ }
27
+
28
+ > div[data-block='true'] {
29
+ margin-bottom: 27px;
30
+ }
31
+ `;
32
+ exports.Paragraph = Paragraph;
33
+ const Heading = _styledComponents.default.div`
34
+ font-weight: 700;
35
+ line-height: 1.5;
36
+ color: #232323;
37
+ width: 100%;
38
+ max-width: 700px;
39
+ margin: 45px auto 20px auto;
40
+
41
+ h2,
42
+ h3,
43
+ h4,
44
+ h5 {
45
+ margin: 0;
46
+ }
47
+
48
+ h2 {
49
+ font-size: 35px;
50
+ }
51
+
52
+ h3 {
53
+ font-size: 30px;
54
+ }
55
+
56
+ h4 {
57
+ font-size: 25px;
58
+ }
59
+
60
+ h5 {
61
+ font-size: 20px;
62
+ }
63
+
64
+ ${_mediaQuery.mediaQuery.smallOnly} {
65
+ padding-left: 15px;
66
+ padding-right: 15px;
67
+ }
68
+ `;
69
+ exports.Heading = Heading;
70
+ const List = _styledComponents.default.ol`
71
+ width: 100%;
72
+ max-width: 700px;
73
+ margin: 0 auto 27px auto;
74
+ font-size: 18px;
75
+ line-height: 2;
76
+ letter-spacing: 0.9px;
77
+ color: #3a4f66;
78
+
79
+ > li {
80
+ margin-bottom: 6px;
81
+ }
82
+ `;
83
+ exports.List = List;
84
+ const _blockRenderMap = _immutable.default.Map({
85
+ atomic: {
86
+ element: 'div'
87
+ },
88
+ 'header-two': {
89
+ element: 'h2',
90
+ wrapper: /*#__PURE__*/_react.default.createElement(Heading, null)
91
+ },
92
+ 'header-three': {
93
+ element: 'h3',
94
+ wrapper: /*#__PURE__*/_react.default.createElement(Heading, null)
95
+ },
96
+ 'header-four': {
97
+ element: 'h4',
98
+ wrapper: /*#__PURE__*/_react.default.createElement(Heading, null)
99
+ },
100
+ 'header-five': {
101
+ element: 'h5',
102
+ wrapper: /*#__PURE__*/_react.default.createElement(Heading, null)
103
+ },
104
+ 'ordered-list-item': {
105
+ element: 'li',
106
+ wrapper: /*#__PURE__*/_react.default.createElement(List, null)
107
+ },
108
+ 'unordered-list-item': {
109
+ element: 'li',
110
+ wrapper: /*#__PURE__*/_react.default.createElement(List, {
111
+ as: "ul"
112
+ })
113
+ },
114
+ unstyled: {
115
+ element: 'div',
116
+ wrapper: /*#__PURE__*/_react.default.createElement(Paragraph, null)
117
+ }
118
+ });
119
+ const blockRenderMap = _draftJs.DefaultDraftBlockRenderMap.merge(_blockRenderMap);
120
+ exports.blockRenderMap = blockRenderMap;
package/lib/block-render-maps/index.js ADDED
@@ -0,0 +1,25 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ var _annotation = require("./annotation");
8
+ var _articleBrief = require("./article-brief");
9
+ var _articleContent = require("./article-content");
10
+ var _infoBox = require("./info-box");
11
+ var _projectContent = require("./project-content");
12
+ var _default = {
13
+ annotation: _annotation.blockRenderMap,
14
+ // article page brief
15
+ brief: _articleBrief.blockRenderMap,
16
+ // article page content
17
+ content: _articleContent.blockRenderMap,
18
+ infoBox: {
19
+ default: _infoBox.blockRenderMap,
20
+ headerBorder: _infoBox.blockRenderMapForInfoBoxWithHeaderBorder
21
+ },
22
+ // project page content
23
+ projectContent: _projectContent.blockRenderMap
24
+ };
25
+ exports.default = _default;
package/lib/block-render-maps/info-box.js ADDED
@@ -0,0 +1,97 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.blockRenderMapForInfoBoxWithHeaderBorder = exports.blockRenderMap = void 0;
7
+ var _immutable = _interopRequireDefault(require("immutable"));
8
+ var _react = _interopRequireDefault(require("react"));
9
+ var _styledComponents = _interopRequireWildcard(require("styled-components"));
10
+ var _draftJs = require("draft-js");
11
+ var _articleContent = require("./article-content");
12
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
13
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
14
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
15
+ const HeadingForInfoBox = (0, _styledComponents.default)(_articleContent.Heading)`
16
+ margin-top: 30px;
17
+ margin-bottom: 30px;
18
+ `;
19
+ const ListForInfoBox = (0, _styledComponents.default)(_articleContent.List)`
20
+ li {
21
+ font-size: 16px;
22
+ }
23
+ `;
24
+ const ParagraphForInfoBox = (0, _styledComponents.default)(_articleContent.Paragraph)`
25
+ /* overwrite css */
26
+ font-size: 16px;
27
+ font-weight: 400;
28
+ margin-bottom: 20px;
29
+ `;
30
+ const Atomic = _styledComponents.default.div`
31
+ /* hide last empty block which immediately follows an atomic block */
32
+ & + ${_articleContent.Paragraph}:last-of-type {
33
+ line-height: 0;
34
+ margin-bottom: 0;
35
+ }
36
+ `;
37
+ const _blockRenderMapForAnnotation = _immutable.default.Map({
38
+ atomic: {
39
+ element: 'div',
40
+ wrapper: /*#__PURE__*/_react.default.createElement(Atomic, null)
41
+ },
42
+ 'header-four': {
43
+ element: 'h4',
44
+ wrapper: /*#__PURE__*/_react.default.createElement(HeadingForInfoBox, null)
45
+ },
46
+ 'header-five': {
47
+ element: 'h5',
48
+ wrapper: /*#__PURE__*/_react.default.createElement(HeadingForInfoBox, null)
49
+ },
50
+ 'ordered-list-item': {
51
+ element: 'li',
52
+ wrapper: /*#__PURE__*/_react.default.createElement(ListForInfoBox, null)
53
+ },
54
+ 'unordered-list-item': {
55
+ element: 'li',
56
+ wrapper: /*#__PURE__*/_react.default.createElement(ListForInfoBox, {
57
+ as: "ul"
58
+ })
59
+ },
60
+ unstyled: {
61
+ element: 'div',
62
+ wrapper: /*#__PURE__*/_react.default.createElement(ParagraphForInfoBox, null)
63
+ }
64
+ });
65
+ const blockRenderMap = _draftJs.DefaultDraftBlockRenderMap.merge(_blockRenderMapForAnnotation);
66
+ exports.blockRenderMap = blockRenderMap;
67
+ const dividerStyles = (0, _styledComponents.css)`
68
+ content: '';
69
+ width: 100%;
70
+ height: 12px;
71
+ display: block;
72
+ background-image: url(https://kids.twreporter.org/wp-content/themes/blocksy-child/assets/js/components/rpjr-box/box2_768.png);
73
+ background-size: contain;
74
+ background-repeat: no-repeat;
75
+ background-position: center;
76
+ `;
77
+ const HeadingForInfoBoxWithHeaderBorder = (0, _styledComponents.default)(HeadingForInfoBox)`
78
+ h4 {
79
+ margin-top: 12px;
80
+ margin-bottom: 12px;
81
+ }
82
+
83
+ &::before {
84
+ ${dividerStyles}
85
+ }
86
+
87
+ &::after {
88
+ ${dividerStyles}
89
+ }
90
+ `;
91
+ const blockRenderMapForInfoBoxWithHeaderBorder = blockRenderMap.merge(_immutable.default.Map({
92
+ 'header-four': {
93
+ element: 'h4',
94
+ wrapper: /*#__PURE__*/_react.default.createElement(HeadingForInfoBoxWithHeaderBorder, null)
95
+ }
96
+ }));
97
+ exports.blockRenderMapForInfoBoxWithHeaderBorder = blockRenderMapForInfoBoxWithHeaderBorder;
package/lib/block-render-maps/project-content.js ADDED
@@ -0,0 +1,58 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.blockRenderMap = exports.Paragraph = exports.Heading = void 0;
7
+ var _immutable = _interopRequireDefault(require("immutable"));
8
+ var _react = _interopRequireDefault(require("react"));
9
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
10
+ var _draftJs = require("draft-js");
11
+ var _articleContent = require("./article-content");
12
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
+ const Paragraph = (0, _styledComponents.default)(_articleContent.Paragraph)`
14
+ text-align: center;
15
+ max-width: 750px;
16
+ `;
17
+ exports.Paragraph = Paragraph;
18
+ const Heading = (0, _styledComponents.default)(_articleContent.Heading)`
19
+ text-align: center;
20
+ `;
21
+ exports.Heading = Heading;
22
+ const _blockRenderMap = _immutable.default.Map({
23
+ atomic: {
24
+ element: 'div'
25
+ },
26
+ 'header-two': {
27
+ element: 'h2',
28
+ wrapper: /*#__PURE__*/_react.default.createElement(Heading, null)
29
+ },
30
+ 'header-three': {
31
+ element: 'h3',
32
+ wrapper: /*#__PURE__*/_react.default.createElement(Heading, null)
33
+ },
34
+ 'header-four': {
35
+ element: 'h4',
36
+ wrapper: /*#__PURE__*/_react.default.createElement(Heading, null)
37
+ },
38
+ 'header-five': {
39
+ element: 'h5',
40
+ wrapper: /*#__PURE__*/_react.default.createElement(Heading, null)
41
+ },
42
+ 'ordered-list-item': {
43
+ element: 'li',
44
+ wrapper: /*#__PURE__*/_react.default.createElement(_articleContent.List, null)
45
+ },
46
+ 'unordered-list-item': {
47
+ element: 'li',
48
+ wrapper: /*#__PURE__*/_react.default.createElement(_articleContent.List, {
49
+ as: "ul"
50
+ })
51
+ },
52
+ unstyled: {
53
+ element: 'div',
54
+ wrapper: /*#__PURE__*/_react.default.createElement(Paragraph, null)
55
+ }
56
+ });
57
+ const blockRenderMap = _draftJs.DefaultDraftBlockRenderMap.merge(_blockRenderMap);
58
+ exports.blockRenderMap = blockRenderMap;
package/lib/block-renderers/info-box-block.js CHANGED
@@ -7,10 +7,10 @@ exports.InfoBoxInArticleBody = InfoBoxInArticleBody;
7
7
  var _draftJs = require("draft-js");
8
8
  var _react = _interopRequireDefault(require("react"));
9
9
  var _styledComponents = _interopRequireWildcard(require("styled-components"));
10
- var _blockRenderMap = require("../block-render-map");
10
+ var _index = _interopRequireDefault(require("../block-render-maps/index"));
11
11
  var _imageBlock = require("../block-renderers/image-block");
12
- var _index = require("../utils/index");
13
- var _index2 = require("../entity-decorators/index");
12
+ var _index2 = require("../utils/index");
13
+ var _index3 = require("../entity-decorators/index");
14
14
  var _mediaQuery = require("../utils/media-query");
15
15
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
16
16
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -58,19 +58,19 @@ const HeaderBorderContainer = _styledComponents.default.div`
58
58
  let logoColor;
59
59
  let bgColor;
60
60
  switch (theme === null || theme === void 0 ? void 0 : theme.themeColor) {
61
- case _index.ThemeColorEnum.YELLOW:
61
+ case _index2.ThemeColorEnum.YELLOW:
62
62
  {
63
63
  logoColor = 'red';
64
64
  bgColor = '#fff0d2';
65
65
  break;
66
66
  }
67
- case _index.ThemeColorEnum.RED:
67
+ case _index2.ThemeColorEnum.RED:
68
68
  {
69
69
  logoColor = 'blue';
70
70
  bgColor = '#ffd2d2';
71
71
  break;
72
72
  }
73
- case _index.ThemeColorEnum.BLUE:
73
+ case _index2.ThemeColorEnum.BLUE:
74
74
  default:
75
75
  {
76
76
  logoColor = 'yellow';
@@ -153,14 +153,14 @@ function InfoBoxInArticleBody({
153
153
  rawContentState
154
154
  } = data;
155
155
  const contentState = (0, _draftJs.convertFromRaw)(rawContentState);
156
- const editorState = _draftJs.EditorState.createWithContent(contentState, _index2.decorator);
156
+ const editorState = _draftJs.EditorState.createWithContent(contentState, _index3.decorator);
157
157
  let Component;
158
- let blockRenderMap = _blockRenderMap.blockRenderMapForInfoBox;
158
+ let blockRenderMap = _index.default.infoBox.default;
159
159
  switch (type) {
160
160
  case InfoBoxTypeEnum.headerBorder:
161
161
  {
162
162
  Component = HeaderBorder;
163
- blockRenderMap = _blockRenderMap.blockRenderMapForInfoBoxWithHeaderBorder;
163
+ blockRenderMap = _index.default.infoBox.headerBorder;
164
164
  break;
165
165
  }
166
166
  case InfoBoxTypeEnum.boxBorder:
package/lib/draft-renderer.js CHANGED
@@ -6,12 +6,13 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.ArticleBodyDraftRenderer = void 0;
7
7
  exports.ArticleIntroductionDraftRenderer = ArticleIntroductionDraftRenderer;
8
8
  exports.DraftRenderer = DraftRenderer;
9
+ exports.ProjectContentDraftRenderer = ProjectContentDraftRenderer;
9
10
  var _react = _interopRequireDefault(require("react"));
11
+ var _index = _interopRequireDefault(require("./block-render-maps/index"));
10
12
  var _draftJs = require("draft-js");
11
13
  var _blockRendererFn = require("./block-renderer-fn");
12
- var _blockRenderMap = require("./block-render-map");
13
- var _index = require("./entity-decorators/index");
14
- var _index2 = require("./utils/index");
14
+ var _index2 = require("./entity-decorators/index");
15
+ var _index3 = require("./utils/index");
15
16
  var _styledComponents = require("styled-components");
16
17
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
17
18
  const blockRendererFn = block => {
@@ -20,17 +21,17 @@ const blockRendererFn = block => {
20
21
  };
21
22
  function DraftRenderer({
22
23
  rawContentState,
23
- themeColor = _index2.ThemeColorEnum.RED
24
+ themeColor = _index3.ThemeColorEnum.RED
24
25
  }) {
25
26
  const contentState = (0, _draftJs.convertFromRaw)(rawContentState);
26
- const editorState = _draftJs.EditorState.createWithContent(contentState, _index.decorator);
27
+ const editorState = _draftJs.EditorState.createWithContent(contentState, _index2.decorator);
27
28
  return /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
28
29
  theme: {
29
30
  themeColor
30
31
  }
31
32
  }, /*#__PURE__*/_react.default.createElement(_draftJs.Editor, {
32
33
  editorState: editorState,
33
- blockRenderMap: _blockRenderMap.blockRenderMap,
34
+ blockRenderMap: _index.default.content,
34
35
  blockRendererFn: blockRendererFn,
35
36
  readOnly: true
36
37
  // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -42,17 +43,37 @@ const ArticleBodyDraftRenderer = DraftRenderer;
42
43
  exports.ArticleBodyDraftRenderer = ArticleBodyDraftRenderer;
43
44
  function ArticleIntroductionDraftRenderer({
44
45
  rawContentState,
45
- themeColor = _index2.ThemeColorEnum.RED
46
+ themeColor = _index3.ThemeColorEnum.RED
46
47
  }) {
47
48
  const contentState = (0, _draftJs.convertFromRaw)(rawContentState);
48
- const editorState = _draftJs.EditorState.createWithContent(contentState, _index.decorator);
49
+ const editorState = _draftJs.EditorState.createWithContent(contentState, _index2.decorator);
49
50
  return /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
50
51
  theme: {
51
52
  themeColor
52
53
  }
53
54
  }, /*#__PURE__*/_react.default.createElement(_draftJs.Editor, {
54
55
  editorState: editorState,
55
- blockRenderMap: _blockRenderMap.blockRenderMapForIntroduction,
56
+ blockRenderMap: _index.default.brief,
57
+ readOnly: true
58
+ // eslint-disable-next-line @typescript-eslint/no-empty-function
59
+ ,
60
+ onChange: () => {}
61
+ }));
62
+ }
63
+ function ProjectContentDraftRenderer({
64
+ rawContentState,
65
+ themeColor = _index3.ThemeColorEnum.BLUE
66
+ }) {
67
+ const contentState = (0, _draftJs.convertFromRaw)(rawContentState);
68
+ const editorState = _draftJs.EditorState.createWithContent(contentState, _index2.decorator);
69
+ return /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
70
+ theme: {
71
+ themeColor
72
+ }
73
+ }, /*#__PURE__*/_react.default.createElement(_draftJs.Editor, {
74
+ editorState: editorState,
75
+ blockRenderMap: _index.default.projectContent,
76
+ blockRendererFn: blockRendererFn,
56
77
  readOnly: true
57
78
  // eslint-disable-next-line @typescript-eslint/no-empty-function
58
79
  ,
package/lib/entity-decorators/annotation-decorator.js CHANGED
@@ -7,9 +7,9 @@ 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 _blockRenderMap = require("../block-render-map");
11
- var _index = require("../entity-decorators/index");
12
- var _index2 = require("../utils/index");
10
+ var _index = _interopRequireDefault(require("../block-render-maps/index"));
11
+ var _index2 = require("../entity-decorators/index");
12
+ var _index3 = require("../utils/index");
13
13
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
14
14
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
15
15
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -18,13 +18,13 @@ const AnnotationWrapper = _styledComponents.default.span`
18
18
  cursor: pointer;
19
19
  color: ${({
20
20
  theme
21
- }) => (0, _index2.getColorHex)(theme === null || theme === void 0 ? void 0 : theme.themeColor)};
21
+ }) => (0, _index3.getColorHex)(theme === null || theme === void 0 ? void 0 : theme.themeColor)};
22
22
  `;
23
23
  const AnnotationBody = _styledComponents.default.div`
24
24
  margin-bottom: 10px;
25
25
  border-top: 2px solid ${({
26
26
  theme
27
- }) => (0, _index2.getColorHex)(theme === null || theme === void 0 ? void 0 : theme.themeColor)};
27
+ }) => (0, _index3.getColorHex)(theme === null || theme === void 0 ? void 0 : theme.themeColor)};
28
28
  background-color: #fff;
29
29
  padding: 25px 25px;
30
30
  `;
@@ -43,7 +43,7 @@ const ArrowIcon = _styledComponents.default.span`
43
43
  &::before {
44
44
  background-color: ${({
45
45
  theme
46
- }) => (0, _index2.getColorHex)(theme === null || theme === void 0 ? void 0 : theme.themeColor)};
46
+ }) => (0, _index3.getColorHex)(theme === null || theme === void 0 ? void 0 : theme.themeColor)};
47
47
  content: '';
48
48
  width: 2px;
49
49
  height: 6.5px;
@@ -58,7 +58,7 @@ const ArrowIcon = _styledComponents.default.span`
58
58
  &::after {
59
59
  background-color: ${({
60
60
  theme
61
- }) => (0, _index2.getColorHex)(theme === null || theme === void 0 ? void 0 : theme.themeColor)};
61
+ }) => (0, _index3.getColorHex)(theme === null || theme === void 0 ? void 0 : theme.themeColor)};
62
62
  content: '';
63
63
  width: 2px;
64
64
  height: 6.5px;
@@ -79,7 +79,7 @@ function AnnotationBlock(props) {
79
79
  rawContentState
80
80
  } = props.contentState.getEntity(props.entityKey).getData();
81
81
  const contentState = (0, _draftJs.convertFromRaw)(rawContentState);
82
- const editorState = _draftJs.EditorState.createWithContent(contentState, _index.decorator);
82
+ const editorState = _draftJs.EditorState.createWithContent(contentState, _index2.decorator);
83
83
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(AnnotationWrapper, {
84
84
  onClick: e => {
85
85
  e.preventDefault();
@@ -89,7 +89,7 @@ function AnnotationBlock(props) {
89
89
  $showContent: showContent
90
90
  })), showContent ? /*#__PURE__*/_react.default.createElement(AnnotationBody, null, /*#__PURE__*/_react.default.createElement(_draftJs.Editor, {
91
91
  editorState: editorState,
92
- blockRenderMap: _blockRenderMap.blockRenderMapForAnnotation,
92
+ blockRenderMap: _index.default.annotation,
93
93
  readOnly: true
94
94
  // eslint-disable-next-line @typescript-eslint/no-empty-function
95
95
  ,
package/lib/index.js CHANGED
@@ -21,18 +21,19 @@ Object.defineProperty(exports, "DraftRenderer", {
21
21
  return _draftRenderer.DraftRenderer;
22
22
  }
23
23
  });
24
- Object.defineProperty(exports, "atomicBlockRenderer", {
24
+ Object.defineProperty(exports, "ProjectContentDraftRenderer", {
25
25
  enumerable: true,
26
26
  get: function () {
27
- return _blockRendererFn.atomicBlockRenderer;
27
+ return _draftRenderer.ProjectContentDraftRenderer;
28
28
  }
29
29
  });
30
- Object.defineProperty(exports, "blockRenderMap", {
30
+ Object.defineProperty(exports, "atomicBlockRenderer", {
31
31
  enumerable: true,
32
32
  get: function () {
33
- return _blockRenderMap.blockRenderMap;
33
+ return _blockRendererFn.atomicBlockRenderer;
34
34
  }
35
35
  });
36
+ exports.blockRenderMap = void 0;
36
37
  Object.defineProperty(exports, "blockRenderers", {
37
38
  enumerable: true,
38
39
  get: function () {
@@ -42,22 +43,26 @@ Object.defineProperty(exports, "blockRenderers", {
42
43
  Object.defineProperty(exports, "decorator", {
43
44
  enumerable: true,
44
45
  get: function () {
45
- return _index.decorator;
46
+ return _index2.decorator;
46
47
  }
47
48
  });
48
49
  exports.default = void 0;
49
50
  var _draftRenderer = require("./draft-renderer");
50
51
  var _blockRendererFn = require("./block-renderer-fn");
51
- var _blockRenderMap = require("./block-render-map");
52
+ var _index = _interopRequireDefault(require("./block-render-maps/index"));
52
53
  var _blockRenderers = require("./block-renderers");
53
- var _index = require("./entity-decorators/index");
54
+ var _index2 = require("./entity-decorators/index");
55
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
56
+ const blockRenderMap = _index.default.content;
57
+ exports.blockRenderMap = blockRenderMap;
54
58
  var _default = {
55
59
  ArticleBodyDraftRenderer: _draftRenderer.ArticleBodyDraftRenderer,
56
60
  ArticleIntroductionDraftRenderer: _draftRenderer.ArticleIntroductionDraftRenderer,
57
61
  DraftRenderer: _draftRenderer.DraftRenderer,
62
+ ProjectContentDraftRenderer: _draftRenderer.ProjectContentDraftRenderer,
58
63
  atomicBlockRenderer: _blockRendererFn.atomicBlockRenderer,
59
- blockRenderMap: _blockRenderMap.blockRenderMap,
64
+ blockRenderMap: _index.default.content,
60
65
  blockRenderers: _blockRenderers.blockRenderers,
61
- decorator: _index.decorator
66
+ decorator: _index2.decorator
62
67
  };
63
68
  exports.default = _default;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kids-reporter/draft-renderer",
3
- "version": "0.4.17",
3
+ "version": "0.4.19",
4
4
  "description": "",
5
5
  "main": "lib/index.js",
6
6
  "scripts": {
package/lib/block-render-map.js DELETED
@@ -1,238 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.blockRenderMapForIntroduction = exports.blockRenderMapForInfoBoxWithHeaderBorder = exports.blockRenderMapForInfoBox = exports.blockRenderMapForAnnotation = exports.blockRenderMap = void 0;
7
- var _immutable = _interopRequireDefault(require("immutable"));
8
- var _react = _interopRequireDefault(require("react"));
9
- var _styledComponents = _interopRequireWildcard(require("styled-components"));
10
- var _draftJs = require("draft-js");
11
- var _mediaQuery = require("./utils/media-query");
12
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
13
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
14
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
15
- const Paragraph = _styledComponents.default.div`
16
- width: 100%;
17
- max-width: 700px;
18
- font-size: 18px;
19
- font-weight: 500;
20
- color: #3a4f66;
21
- letter-spacing: 0.9px;
22
- line-height: 2;
23
- margin: 0 auto;
24
-
25
- ${_mediaQuery.mediaQuery.smallOnly} {
26
- padding-left: 15px;
27
- padding-right: 15px;
28
- }
29
-
30
- > div[data-block='true'] {
31
- margin-bottom: 27px;
32
- }
33
- `;
34
- const Heading = _styledComponents.default.div`
35
- font-weight: 700;
36
- line-height: 1.5;
37
- color: #232323;
38
- width: 100%;
39
- max-width: 700px;
40
- margin: 45px auto 20px auto;
41
-
42
- h2,
43
- h3,
44
- h4,
45
- h5 {
46
- margin: 0;
47
- }
48
-
49
- h2 {
50
- font-size: 35px;
51
- }
52
-
53
- h3 {
54
- font-size: 30px;
55
- }
56
-
57
- h4 {
58
- font-size: 25px;
59
- }
60
-
61
- h5 {
62
- font-size: 20px;
63
- }
64
-
65
- ${_mediaQuery.mediaQuery.smallOnly} {
66
- padding-left: 15px;
67
- padding-right: 15px;
68
- }
69
- `;
70
- const List = _styledComponents.default.ol`
71
- width: 100%;
72
- max-width: 700px;
73
- margin: 0 auto 27px auto;
74
- font-size: 18px;
75
- line-height: 2;
76
- letter-spacing: 0.9px;
77
- color: #3a4f66;
78
-
79
- > li {
80
- margin-bottom: 6px;
81
- }
82
- `;
83
- const _blockRenderMap = _immutable.default.Map({
84
- atomic: {
85
- element: 'div'
86
- },
87
- 'header-two': {
88
- element: 'h2',
89
- wrapper: /*#__PURE__*/_react.default.createElement(Heading, null)
90
- },
91
- 'header-three': {
92
- element: 'h3',
93
- wrapper: /*#__PURE__*/_react.default.createElement(Heading, null)
94
- },
95
- 'header-four': {
96
- element: 'h4',
97
- wrapper: /*#__PURE__*/_react.default.createElement(Heading, null)
98
- },
99
- 'header-five': {
100
- element: 'h5',
101
- wrapper: /*#__PURE__*/_react.default.createElement(Heading, null)
102
- },
103
- 'ordered-list-item': {
104
- element: 'li',
105
- wrapper: /*#__PURE__*/_react.default.createElement(List, null)
106
- },
107
- 'unordered-list-item': {
108
- element: 'li',
109
- wrapper: /*#__PURE__*/_react.default.createElement(List, {
110
- as: "ul"
111
- })
112
- },
113
- unstyled: {
114
- element: 'div',
115
- wrapper: /*#__PURE__*/_react.default.createElement(Paragraph, null)
116
- }
117
- });
118
- const blockRenderMap = _draftJs.DefaultDraftBlockRenderMap.merge(_blockRenderMap);
119
- exports.blockRenderMap = blockRenderMap;
120
- const ParagraphForIntroduction = (0, _styledComponents.default)(Paragraph)`
121
- color: #575757;
122
- `;
123
- const ListForIntroduction = (0, _styledComponents.default)(List)`
124
- color: #575757;
125
- `;
126
- const blockRenderMapForIntroduction = _draftJs.DefaultDraftBlockRenderMap.merge(_immutable.default.Map({
127
- 'ordered-list-item': {
128
- element: 'li',
129
- wrapper: /*#__PURE__*/_react.default.createElement(ListForIntroduction, null)
130
- },
131
- 'unordered-list-item': {
132
- element: 'li',
133
- wrapper: /*#__PURE__*/_react.default.createElement(ListForIntroduction, {
134
- as: "ul"
135
- })
136
- },
137
- unstyled: {
138
- element: 'div',
139
- wrapper: /*#__PURE__*/_react.default.createElement(ParagraphForIntroduction, null)
140
- }
141
- }));
142
- exports.blockRenderMapForIntroduction = blockRenderMapForIntroduction;
143
- const HeadingForAnnotation = (0, _styledComponents.default)(Heading)`
144
- margin: 0 auto 27px auto;
145
- `;
146
- const ListForAnnotation = (0, _styledComponents.default)(List)`
147
- li {
148
- font-size: 16px;
149
- }
150
- `;
151
- const ParagraphForAnnotation = (0, _styledComponents.default)(Paragraph)`
152
- /* overwrite css */
153
- font-size: 16px;
154
- font-weight: 400;
155
- margin-bottom: 20px;
156
- `;
157
- const _blockRenderMapForAnnotation = _immutable.default.Map({
158
- atomic: {
159
- element: 'div'
160
- },
161
- 'header-four': {
162
- element: 'h4',
163
- wrapper: /*#__PURE__*/_react.default.createElement(HeadingForAnnotation, null)
164
- },
165
- 'header-five': {
166
- element: 'h5',
167
- wrapper: /*#__PURE__*/_react.default.createElement(HeadingForAnnotation, null)
168
- },
169
- 'ordered-list-item': {
170
- element: 'li',
171
- wrapper: /*#__PURE__*/_react.default.createElement(ListForAnnotation, null)
172
- },
173
- 'unordered-list-item': {
174
- element: 'li',
175
- wrapper: /*#__PURE__*/_react.default.createElement(ListForAnnotation, {
176
- as: "ul"
177
- })
178
- },
179
- unstyled: {
180
- element: 'div',
181
- wrapper: /*#__PURE__*/_react.default.createElement(ParagraphForAnnotation, null)
182
- }
183
- });
184
- const blockRenderMapForAnnotation = _draftJs.DefaultDraftBlockRenderMap.merge(_blockRenderMapForAnnotation);
185
- exports.blockRenderMapForAnnotation = blockRenderMapForAnnotation;
186
- const HeadingForInfoBox = (0, _styledComponents.default)(Heading)`
187
- margin-top: 30px;
188
- margin-bottom: 30px;
189
- `;
190
- const Atomic = _styledComponents.default.div`
191
- /* hide last empty block which immediately follows an atomic block */
192
- & + ${Paragraph}:last-of-type {
193
- line-height: 0;
194
- margin-bottom: 0;
195
- }
196
- `;
197
- const blockRenderMapForInfoBox = blockRenderMapForAnnotation.merge(_immutable.default.Map({
198
- atomic: {
199
- element: 'div',
200
- wrapper: /*#__PURE__*/_react.default.createElement(Atomic, null)
201
- },
202
- 'header-four': {
203
- element: 'h4',
204
- wrapper: /*#__PURE__*/_react.default.createElement(HeadingForInfoBox, null)
205
- }
206
- }));
207
- exports.blockRenderMapForInfoBox = blockRenderMapForInfoBox;
208
- const dividerStyles = (0, _styledComponents.css)`
209
- content: '';
210
- width: 100%;
211
- height: 12px;
212
- display: block;
213
- background-image: url(https://kids.twreporter.org/wp-content/themes/blocksy-child/assets/js/components/rpjr-box/box2_768.png);
214
- background-size: contain;
215
- background-repeat: no-repeat;
216
- background-position: center;
217
- `;
218
- const HeadingForInfoBoxWithHeaderBorder = (0, _styledComponents.default)(HeadingForInfoBox)`
219
- h4 {
220
- margin-top: 12px;
221
- margin-bottom: 12px;
222
- }
223
-
224
- &::before {
225
- ${dividerStyles}
226
- }
227
-
228
- &::after {
229
- ${dividerStyles}
230
- }
231
- `;
232
- const blockRenderMapForInfoBoxWithHeaderBorder = blockRenderMapForInfoBox.merge(_immutable.default.Map({
233
- 'header-four': {
234
- element: 'h4',
235
- wrapper: /*#__PURE__*/_react.default.createElement(HeadingForInfoBoxWithHeaderBorder, null)
236
- }
237
- }));
238
- exports.blockRenderMapForInfoBoxWithHeaderBorder = blockRenderMapForInfoBoxWithHeaderBorder;