@kids-reporter/draft-renderer 1.0.12 → 1.0.13

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 (27) hide show
  1. package/lib/block-render-maps/annotation.js +8 -7
  2. package/lib/block-render-maps/article-brief.js +5 -4
  3. package/lib/block-render-maps/article-content.js +10 -9
  4. package/lib/block-render-maps/image-link.js +4 -3
  5. package/lib/block-render-maps/index.js +1 -1
  6. package/lib/block-render-maps/info-box.js +9 -8
  7. package/lib/block-render-maps/project-content.js +10 -9
  8. package/lib/block-renderers/blockquote.js +27 -14
  9. package/lib/block-renderers/divider.js +2 -1
  10. package/lib/block-renderers/dropdown.js +25 -18
  11. package/lib/block-renderers/embedded-code-block.js +19 -16
  12. package/lib/block-renderers/image-block.js +36 -29
  13. package/lib/block-renderers/image-link.js +36 -32
  14. package/lib/block-renderers/index.js +1 -1
  15. package/lib/block-renderers/info-box-block.js +31 -21
  16. package/lib/block-renderers/multimedia.js +1 -1
  17. package/lib/block-renderers/news-reading.js +16 -14
  18. package/lib/block-renderers/slideshow-block.js +67 -47
  19. package/lib/draft-renderer.js +40 -44
  20. package/lib/entity-decorators/anchor.js +5 -3
  21. package/lib/entity-decorators/annotation-decorator.js +25 -21
  22. package/lib/entity-decorators/index.js +1 -1
  23. package/lib/entity-decorators/link-decorator.js +5 -1
  24. package/lib/entity-decorators/toc-anchor.js +5 -3
  25. package/lib/index.js +2 -2
  26. package/lib/utils/index.js +2 -2
  27. package/package.json +8 -6
package/lib/block-renderers/image-link.js CHANGED
@@ -4,19 +4,19 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.ImageLinkInInfoBox = exports.ImageLinkInArticleBody = exports.ImageLinkBlock = void 0;
7
- var _react = _interopRequireWildcard(require("react"));
8
- var _styledComponents = _interopRequireWildcard(require("styled-components"));
9
7
  var _draftJs = require("draft-js");
10
8
  var _debounce = _interopRequireDefault(require("lodash/debounce"));
11
- var _imageBlock = require("./image-block");
9
+ var _react = require("react");
10
+ var _styledComponents = _interopRequireWildcard(require("styled-components"));
12
11
  var _index = _interopRequireDefault(require("../block-render-maps/index"));
13
12
  var _index2 = require("../entity-decorators/index");
14
- var _mediaQuery = require("../utils/media-query");
15
13
  var _constants = require("../utils/constants");
16
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
14
+ var _mediaQuery = require("../utils/media-query");
15
+ var _imageBlock = require("./image-block");
16
+ var _jsxRuntime = require("react/jsx-runtime");
17
17
  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); }
18
18
  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
- function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
19
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
20
20
  const fallbackImg = '/assets/images/image_placeholder.png';
21
21
  const Figure = _styledComponents.default.figure`
22
22
  width: 100%;
@@ -52,22 +52,22 @@ const ImageLinkBlock = ({
52
52
  const commonImgProps = {
53
53
  src: url ?? fallbackImg
54
54
  };
55
- const imgBlock = /*#__PURE__*/_react.default.createElement(Figure, {
56
- className: className
57
- }, /*#__PURE__*/_react.default.createElement(Img, _extends({}, commonImgProps, {
58
- $isDesktopAndAbove: isDesktopAndAbove,
59
- onClick: () => {
60
- var _theme$handleImgModal;
61
- return isDesktopAndAbove && (theme === null || theme === void 0 || (_theme$handleImgModal = theme.handleImgModalOpen) === null || _theme$handleImgModal === void 0 ? void 0 : _theme$handleImgModal.call(theme, commonImgProps));
62
- }
63
- })), /*#__PURE__*/_react.default.createElement(_draftJs.Editor, {
64
- blockRenderMap: blockRenderMap,
65
- editorState: editorState,
66
- readOnly: true
67
- // eslint-disable-next-line @typescript-eslint/no-empty-function
68
- ,
69
- onChange: () => {}
70
- }));
55
+ const imgBlock = /*#__PURE__*/(0, _jsxRuntime.jsxs)(Figure, {
56
+ className: className,
57
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Img, {
58
+ ...commonImgProps,
59
+ $isDesktopAndAbove: isDesktopAndAbove,
60
+ onClick: () => {
61
+ var _handleImgModalOpen, _ref;
62
+ return isDesktopAndAbove && (theme === null || theme === void 0 || (_handleImgModalOpen = (_ref = theme).handleImgModalOpen) === null || _handleImgModalOpen === void 0 ? void 0 : _handleImgModalOpen.call(_ref, commonImgProps));
63
+ }
64
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_draftJs.Editor, {
65
+ blockRenderMap: blockRenderMap,
66
+ editorState: editorState,
67
+ readOnly: true,
68
+ onChange: () => {}
69
+ })]
70
+ });
71
71
  return imgBlock;
72
72
  };
73
73
  exports.ImageLinkBlock = ImageLinkBlock;
@@ -112,6 +112,8 @@ const ArticleBodyContainer = _styledComponents.default.div`
112
112
  margin: 5px 27px 5px 0px;
113
113
  }
114
114
  `;
115
+ default:
116
+ return '';
115
117
  }
116
118
  }}
117
119
  `;
@@ -119,23 +121,25 @@ const ImageLinkInArticleBody = ({
119
121
  className = '',
120
122
  data
121
123
  }) => {
122
- return /*#__PURE__*/_react.default.createElement(ArticleBodyContainer, {
124
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(ArticleBodyContainer, {
123
125
  $alignment: data.alignment,
124
- className: className
125
- }, /*#__PURE__*/_react.default.createElement(ImageLinkBlock, {
126
- data: data
127
- }));
126
+ className: className,
127
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ImageLinkBlock, {
128
+ data: data
129
+ })
130
+ });
128
131
  };
129
132
  exports.ImageLinkInArticleBody = ImageLinkInArticleBody;
130
133
  const ImageLinkInInfoBox = ({
131
134
  className = '',
132
135
  data
133
136
  }) => {
134
- return /*#__PURE__*/_react.default.createElement(_imageBlock.InfoBoxContainer, {
137
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_imageBlock.InfoBoxContainer, {
135
138
  $alignment: data.alignment,
136
- className: className
137
- }, /*#__PURE__*/_react.default.createElement(ImageLinkBlock, {
138
- data: data
139
- }));
139
+ className: className,
140
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ImageLinkBlock, {
141
+ data: data
142
+ })
143
+ });
140
144
  };
141
145
  exports.ImageLinkInInfoBox = ImageLinkInInfoBox;
package/lib/block-renderers/index.js CHANGED
@@ -10,8 +10,8 @@ var _embeddedCodeBlock = require("./embedded-code-block");
10
10
  var _imageBlock = require("./image-block");
11
11
  var _imageLink = require("./image-link");
12
12
  var _infoBoxBlock = require("./info-box-block");
13
- var _slideshowBlock = require("./slideshow-block");
14
13
  var _newsReading = require("./news-reading");
14
+ var _slideshowBlock = require("./slideshow-block");
15
15
  const blockRenderers = exports.blockRenderers = {
16
16
  BlockquoteInArticleBody: _blockquote.BlockquoteInArticleBody,
17
17
  Divider: _divider.Divider,
package/lib/block-renderers/info-box-block.js CHANGED
@@ -10,9 +10,10 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
10
10
  var _index = _interopRequireDefault(require("../block-render-maps/index"));
11
11
  var _imageBlock = require("../block-renderers/image-block");
12
12
  var _imageLink = require("../block-renderers/image-link");
13
- var _index2 = require("../utils/index");
14
- var _index3 = require("../entity-decorators/index");
13
+ var _index2 = require("../entity-decorators/index");
14
+ var _index3 = require("../utils/index");
15
15
  var _mediaQuery = require("../utils/media-query");
16
+ var _jsxRuntime = require("react/jsx-runtime");
16
17
  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
18
  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; }
18
19
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -58,7 +59,9 @@ const ClearFloat = _styledComponents.default.div`
58
59
  function NewsChargeStation({
59
60
  children
60
61
  }) {
61
- return /*#__PURE__*/_react.default.createElement(NewsChargeStationContainer, null, children);
62
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(NewsChargeStationContainer, {
63
+ children: children
64
+ });
62
65
  }
63
66
  const HeaderBorderContainer = _styledComponents.default.div`
64
67
  ${({
@@ -67,19 +70,19 @@ const HeaderBorderContainer = _styledComponents.default.div`
67
70
  let logoColor;
68
71
  let bgColor;
69
72
  switch (theme === null || theme === void 0 ? void 0 : theme.themeColor) {
70
- case _index2.ThemeColorEnum.YELLOW:
73
+ case _index3.ThemeColorEnum.YELLOW:
71
74
  {
72
75
  logoColor = 'red';
73
76
  bgColor = '#fff0d2';
74
77
  break;
75
78
  }
76
- case _index2.ThemeColorEnum.RED:
79
+ case _index3.ThemeColorEnum.RED:
77
80
  {
78
81
  logoColor = 'blue';
79
82
  bgColor = '#ffd2d2';
80
83
  break;
81
84
  }
82
- case _index2.ThemeColorEnum.BLUE:
85
+ case _index3.ThemeColorEnum.BLUE:
83
86
  default:
84
87
  {
85
88
  logoColor = 'yellow';
@@ -110,7 +113,9 @@ const HeaderBorderContainer = _styledComponents.default.div`
110
113
  function HeaderBorder({
111
114
  children
112
115
  }) {
113
- return /*#__PURE__*/_react.default.createElement(HeaderBorderContainer, null, children);
116
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(HeaderBorderContainer, {
117
+ children: children
118
+ });
114
119
  }
115
120
  const BoxBorderContainer = _styledComponents.default.div`
116
121
  ${containerStyles}
@@ -122,7 +127,7 @@ const BoxBorderContainer = _styledComponents.default.div`
122
127
  theme
123
128
  }) => `
124
129
  &::before {
125
- background-image: url(https://www.unpkg.com/@kids-reporter/draft-renderer/public/images/info-box-blocksy-child-2-${(theme === null || theme === void 0 ? void 0 : theme.themeColor) || _index2.ThemeColorEnum.BLUE}.png);
130
+ background-image: url(https://www.unpkg.com/@kids-reporter/draft-renderer/public/images/info-box-blocksy-child-2-${(theme === null || theme === void 0 ? void 0 : theme.themeColor) || _index3.ThemeColorEnum.BLUE}.png);
126
131
  }`}
127
132
 
128
133
  &::before {
@@ -138,7 +143,9 @@ const BoxBorderContainer = _styledComponents.default.div`
138
143
  function BoxBorder({
139
144
  children
140
145
  }) {
141
- return /*#__PURE__*/_react.default.createElement(BoxBorderContainer, null, children);
146
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(BoxBorderContainer, {
147
+ children: children
148
+ });
142
149
  }
143
150
  const ArticleBodyContainer = _styledComponents.default.div`
144
151
  max-width: 700px;
@@ -160,7 +167,7 @@ function InfoBoxInArticleBody({
160
167
  rawContentState
161
168
  } = data;
162
169
  const contentState = (0, _draftJs.convertFromRaw)(rawContentState);
163
- const editorState = _draftJs.EditorState.createWithContent(contentState, _index3.decorator);
170
+ const editorState = _draftJs.EditorState.createWithContent(contentState, _index2.decorator);
164
171
  let Component;
165
172
  let blockRenderMap = _index.default.infoBox.default;
166
173
  switch (type) {
@@ -182,17 +189,20 @@ function InfoBoxInArticleBody({
182
189
  break;
183
190
  }
184
191
  }
185
- return /*#__PURE__*/_react.default.createElement(ArticleBodyContainer, {
186
- className: className
187
- }, /*#__PURE__*/_react.default.createElement(Component, null, /*#__PURE__*/_react.default.createElement(EditorContainer, null, /*#__PURE__*/_react.default.createElement(_draftJs.Editor, {
188
- blockRenderMap: blockRenderMap,
189
- blockRendererFn: blockRendererFn,
190
- editorState: editorState,
191
- readOnly: true
192
- // eslint-disable-next-line @typescript-eslint/no-empty-function
193
- ,
194
- onChange: () => {}
195
- }), /*#__PURE__*/_react.default.createElement(ClearFloat, null))));
192
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(ArticleBodyContainer, {
193
+ className: className,
194
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
195
+ children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(EditorContainer, {
196
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_draftJs.Editor, {
197
+ blockRenderMap: blockRenderMap,
198
+ blockRendererFn: blockRendererFn,
199
+ editorState: editorState,
200
+ readOnly: true,
201
+ onChange: () => {}
202
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ClearFloat, {})]
203
+ })
204
+ })
205
+ });
196
206
  }
197
207
  function AtomicBlock(props) {
198
208
  const entity = props.contentState.getEntity(props.block.getEntityAt(0));
package/lib/block-renderers/multimedia.js CHANGED
@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
- var _mediaQuery = require("../utils/media-query");
8
7
  var _styledComponents = _interopRequireDefault(require("styled-components"));
9
8
  var _index = require("../utils/index");
9
+ var _mediaQuery = require("../utils/media-query");
10
10
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
11
11
  const mockup = {
12
12
  mobile: {
package/lib/block-renderers/news-reading.js CHANGED
@@ -4,12 +4,11 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.NewsReading = void 0;
7
- var _react = _interopRequireWildcard(require("react"));
7
+ var _react = require("react");
8
8
  var _styledComponents = _interopRequireDefault(require("styled-components"));
9
9
  var _dropdown = require("./dropdown");
10
+ var _jsxRuntime = require("react/jsx-runtime");
10
11
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
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
12
  const ArticleBodyContainer = _styledComponents.default.div`
14
13
  max-width: 600px;
15
14
  width: calc(280 / 320 * 100%);
@@ -43,16 +42,19 @@ const NewsReading = function ({
43
42
  if (readings.length === 0) {
44
43
  return null;
45
44
  }
46
- return /*#__PURE__*/_react.default.createElement(ArticleBodyContainer, {
47
- className: className
48
- }, /*#__PURE__*/_react.default.createElement(_dropdown.Dropdown, {
49
- options: options,
50
- onChange: option => setSelectedOption(option),
51
- labelForMore: "\u66F4\u591A\u8A9E\u8A00"
52
- }), /*#__PURE__*/_react.default.createElement(Divider, null), (selectedReading === null || selectedReading === void 0 ? void 0 : selectedReading.embedCode) && /*#__PURE__*/_react.default.createElement(IframeContainer, null, /*#__PURE__*/_react.default.createElement("div", {
53
- dangerouslySetInnerHTML: {
54
- __html: selectedReading.embedCode
55
- }
56
- })));
45
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ArticleBodyContainer, {
46
+ className: className,
47
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_dropdown.Dropdown, {
48
+ options: options,
49
+ onChange: option => setSelectedOption(option),
50
+ labelForMore: "\u66F4\u591A\u8A9E\u8A00"
51
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Divider, {}), (selectedReading === null || selectedReading === void 0 ? void 0 : selectedReading.embedCode) && /*#__PURE__*/(0, _jsxRuntime.jsx)(IframeContainer, {
52
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
53
+ dangerouslySetInnerHTML: {
54
+ __html: selectedReading.embedCode
55
+ }
56
+ })
57
+ })]
58
+ });
57
59
  };
58
60
  exports.NewsReading = NewsReading;
package/lib/block-renderers/slideshow-block.js CHANGED
@@ -5,13 +5,12 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.SlideshowBlock = SlideshowBlock;
7
7
  exports.SlideshowInArticleBody = SlideshowInArticleBody;
8
- var _multimedia = _interopRequireDefault(require("./multimedia"));
9
- var _react = _interopRequireWildcard(require("react"));
8
+ var _react = require("react");
10
9
  var _styledComponents = _interopRequireDefault(require("styled-components"));
11
10
  var _index = require("../utils/index");
12
11
  var _mediaQuery = require("../utils/media-query");
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; }
12
+ var _multimedia = _interopRequireDefault(require("./multimedia"));
13
+ var _jsxRuntime = require("react/jsx-runtime");
15
14
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
16
15
  const mockup = {
17
16
  mobile: {
@@ -268,6 +267,7 @@ const SlidesFlexBox = _styledComponents.default.div`
268
267
  if (props.isSliding) {
269
268
  return `transition: transform ${props.duration}ms ease-in-out;`;
270
269
  }
270
+ return '';
271
271
  }}
272
272
 
273
273
  ${_mediaQuery.mediaQuery.smallOnly} {
@@ -419,20 +419,21 @@ function SlideshowBlock({
419
419
  /*#__PURE__*/
420
420
  // since the items of _images would have the same id,
421
421
  // hence, we append `index` on the key
422
- _react.default.createElement(SlideFlexItem, {
423
- key: `slide_${img.id}_${index}`
424
- }, /*#__PURE__*/_react.default.createElement("div", {
425
- className: "w-full h-full relative overflow-hidden"
426
- }, /*#__PURE__*/_react.default.createElement("img", {
427
- srcSet: imgSrcSetArr.join(','),
428
- src: imgSrc,
429
- style: {
430
- display: 'block',
431
- objectFit,
432
- height: '100%'
433
- },
434
- sizes: "(max-width: 768px) 100vw, (min-width: 1400px) 1000px, 500px"
435
- })))
422
+ (0, _jsxRuntime.jsx)(SlideFlexItem, {
423
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
424
+ className: "w-full h-full relative overflow-hidden",
425
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
426
+ srcSet: imgSrcSetArr.join(','),
427
+ src: imgSrc,
428
+ style: {
429
+ display: 'block',
430
+ objectFit,
431
+ height: '100%'
432
+ },
433
+ sizes: "(max-width: 768px) 100vw, (min-width: 1400px) 1000px, 500px"
434
+ })
435
+ })
436
+ }, `slide_${img.id}_${index}`)
436
437
  );
437
438
  });
438
439
  }, [images]);
@@ -467,40 +468,58 @@ function SlideshowBlock({
467
468
  }, duration * 2);
468
469
  }, [slideTo, curSlideIndex, translateXUnit]);
469
470
  const isSliding = slideTo !== '';
470
- return /*#__PURE__*/_react.default.createElement(SlideshowFlexBox, {
471
- className: appendedClassName
472
- }, /*#__PURE__*/_react.default.createElement(SlidesSection, null, /*#__PURE__*/_react.default.createElement(SlidesFlexBox, {
473
- translateXUint: translateXUnit,
474
- duration: duration,
475
- isSliding: isSliding
476
- }, slides)), /*#__PURE__*/_react.default.createElement(PrevNextSection, null, /*#__PURE__*/_react.default.createElement(PrevButton, {
477
- onClick: isSliding ? undefined : slideToPrev
478
- }, /*#__PURE__*/_react.default.createElement(PreArrowSvg, null)), /*#__PURE__*/_react.default.createElement(NextButton, {
479
- onClick: isSliding ? undefined : slideToNext
480
- }, /*#__PURE__*/_react.default.createElement(NextArrowSvg, null))), /*#__PURE__*/_react.default.createElement(ImageNumberCircle, null, /*#__PURE__*/_react.default.createElement(ImageNumber, null, curSlideIndex + 1), /*#__PURE__*/_react.default.createElement(ImageTotal, null, total)), desc ? /*#__PURE__*/_react.default.createElement(Desc, null, desc) : /*#__PURE__*/_react.default.createElement(EmptyDesc, null));
471
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)(SlideshowFlexBox, {
472
+ className: appendedClassName,
473
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SlidesSection, {
474
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(SlidesFlexBox, {
475
+ translateXUint: translateXUnit,
476
+ duration: duration,
477
+ isSliding: isSliding,
478
+ children: slides
479
+ })
480
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(PrevNextSection, {
481
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(PrevButton, {
482
+ onClick: isSliding ? undefined : slideToPrev,
483
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PreArrowSvg, {})
484
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(NextButton, {
485
+ onClick: isSliding ? undefined : slideToNext,
486
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(NextArrowSvg, {})
487
+ })]
488
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(ImageNumberCircle, {
489
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ImageNumber, {
490
+ children: curSlideIndex + 1
491
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ImageTotal, {
492
+ children: total
493
+ })]
494
+ }), desc ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Desc, {
495
+ children: desc
496
+ }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(EmptyDesc, {})]
497
+ });
481
498
  }
482
499
  function NextArrowSvg() {
483
- return /*#__PURE__*/_react.default.createElement("svg", {
500
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
484
501
  viewBox: "0 0 31 17",
485
502
  width: "31",
486
503
  height: "17",
487
- xmlns: "http://www.w3.org/2000/svg"
488
- }, /*#__PURE__*/_react.default.createElement("path", {
489
- d: "M29.33 7.854H0v1h29.256l-7.11 7.148.708.705 8-8.042-.001-.707-8-7.958-.706.709 7.183 7.145z",
490
- fill: "gray",
491
- fillRule: "nonzero"
492
- }));
504
+ xmlns: "http://www.w3.org/2000/svg",
505
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
506
+ d: "M29.33 7.854H0v1h29.256l-7.11 7.148.708.705 8-8.042-.001-.707-8-7.958-.706.709 7.183 7.145z",
507
+ fill: "gray",
508
+ fillRule: "nonzero"
509
+ })
510
+ });
493
511
  }
494
512
  function PreArrowSvg() {
495
- return /*#__PURE__*/_react.default.createElement("svg", {
513
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
496
514
  viewBox: "0 0 31 17",
497
515
  width: "31",
498
516
  height: "17",
499
- xmlns: "http://www.w3.org/2000/svg"
500
- }, /*#__PURE__*/_react.default.createElement("path", {
501
- d: "M2.17 8.5H31.5v1H2.244l7.11 7.147-.708.706-8-8.042.001-.707 8-7.958.706.708L2.17 8.5z",
502
- fill: "gray"
503
- }));
517
+ xmlns: "http://www.w3.org/2000/svg",
518
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
519
+ d: "M2.17 8.5H31.5v1H2.244l7.11 7.147-.708.706-8-8.042.001-.707 8-7.958.706.708L2.17 8.5z",
520
+ fill: "gray"
521
+ })
522
+ });
504
523
  }
505
524
  const ArticleBodyContainer = _styledComponents.default.div`
506
525
  margin: 0 auto 27px auto;
@@ -509,9 +528,10 @@ function SlideshowInArticleBody({
509
528
  className = '',
510
529
  data
511
530
  }) {
512
- return /*#__PURE__*/_react.default.createElement(ArticleBodyContainer, {
513
- className: className
514
- }, /*#__PURE__*/_react.default.createElement(SlideshowBlock, {
515
- data: data
516
- }));
531
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(ArticleBodyContainer, {
532
+ className: className,
533
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(SlideshowBlock, {
534
+ data: data
535
+ })
536
+ });
517
537
  }
package/lib/draft-renderer.js CHANGED
@@ -3,27 +3,26 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.ProjectContentDraftRenderer = exports.DraftRenderer = exports.ArticleIntroductionDraftRenderer = exports.ArticleBodyDraftRenderer = void 0;
7
- var _react = _interopRequireWildcard(require("react"));
8
- var _index = _interopRequireDefault(require("./block-render-maps/index"));
6
+ exports.ProjectContentDraftRenderer = exports.FontSizeLevel = exports.DraftRenderer = exports.ArticleIntroductionDraftRenderer = exports.ArticleBodyDraftRenderer = void 0;
9
7
  var _draftJs = require("draft-js");
10
- var _index2 = require("./utils/index");
8
+ var _react = require("react");
11
9
  var _styledComponents = require("styled-components");
10
+ var _index = _interopRequireDefault(require("./block-render-maps/index"));
12
11
  var _blockRendererFn = require("./block-renderer-fn");
13
12
  var _customStyleFn = require("./custom-style-fn");
14
13
  var _entityDecorators = require("./entity-decorators");
14
+ var _index2 = require("./utils/index");
15
+ var _jsxRuntime = require("react/jsx-runtime");
15
16
  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; }
18
17
  const blockRendererFn = block => {
19
18
  const atomicBlockObj = (0, _blockRendererFn.atomicBlockRenderer)(block);
20
19
  return atomicBlockObj;
21
20
  };
22
- var FontSizeLevel = /*#__PURE__*/function (FontSizeLevel) {
21
+ let FontSizeLevel = exports.FontSizeLevel = /*#__PURE__*/function (FontSizeLevel) {
23
22
  FontSizeLevel["NORMAL"] = "normal";
24
23
  FontSizeLevel["LARGE"] = "large";
25
24
  return FontSizeLevel;
26
- }(FontSizeLevel || {});
25
+ }({});
27
26
  const DraftRenderer = ({
28
27
  rawContentState,
29
28
  themeColor = _index2.ThemeColorEnum.RED,
@@ -38,29 +37,28 @@ const DraftRenderer = ({
38
37
  const anchor = document.querySelector(hash);
39
38
  anchor && window.scrollTo({
40
39
  top: anchor.offsetTop - offsetTop,
41
- behavior: 'instant'
40
+ behavior: 'auto'
42
41
  });
43
42
  };
44
43
  (0, _react.useEffect)(() => {
45
44
  initiallyScrollTo && scrollToElement(initiallyScrollTo);
46
45
  }, []);
47
- return /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
46
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledComponents.ThemeProvider, {
48
47
  theme: {
49
48
  themeColor,
50
49
  fontSizeLevel,
51
50
  offsetTop,
52
51
  handleImgModalOpen
53
- }
54
- }, /*#__PURE__*/_react.default.createElement(_draftJs.Editor, {
55
- editorState: editorState,
56
- blockRenderMap: _index.default.content,
57
- blockRendererFn: blockRendererFn,
58
- customStyleFn: _customStyleFn.customStyleFn,
59
- readOnly: true
60
- // eslint-disable-next-line @typescript-eslint/no-empty-function
61
- ,
62
- onChange: () => {}
63
- }));
52
+ },
53
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_draftJs.Editor, {
54
+ editorState: editorState,
55
+ blockRenderMap: _index.default.content,
56
+ blockRendererFn: blockRendererFn,
57
+ customStyleFn: _customStyleFn.customStyleFn,
58
+ readOnly: true,
59
+ onChange: () => {}
60
+ })
61
+ });
64
62
  };
65
63
  exports.DraftRenderer = DraftRenderer;
66
64
  const ArticleBodyDraftRenderer = exports.ArticleBodyDraftRenderer = DraftRenderer;
@@ -71,20 +69,19 @@ const ArticleIntroductionDraftRenderer = ({
71
69
  }) => {
72
70
  const contentState = (0, _draftJs.convertFromRaw)(rawContentState);
73
71
  const editorState = _draftJs.EditorState.createWithContent(contentState, _entityDecorators.decorator);
74
- return /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
72
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledComponents.ThemeProvider, {
75
73
  theme: {
76
74
  themeColor,
77
75
  fontSizeLevel
78
- }
79
- }, /*#__PURE__*/_react.default.createElement(_draftJs.Editor, {
80
- editorState: editorState,
81
- blockRenderMap: _index.default.brief,
82
- customStyleFn: _customStyleFn.customStyleFn,
83
- readOnly: true
84
- // eslint-disable-next-line @typescript-eslint/no-empty-function
85
- ,
86
- onChange: () => {}
87
- }));
76
+ },
77
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_draftJs.Editor, {
78
+ editorState: editorState,
79
+ blockRenderMap: _index.default.brief,
80
+ customStyleFn: _customStyleFn.customStyleFn,
81
+ readOnly: true,
82
+ onChange: () => {}
83
+ })
84
+ });
88
85
  };
89
86
  exports.ArticleIntroductionDraftRenderer = ArticleIntroductionDraftRenderer;
90
87
  const ProjectContentDraftRenderer = ({
@@ -94,20 +91,19 @@ const ProjectContentDraftRenderer = ({
94
91
  }) => {
95
92
  const contentState = (0, _draftJs.convertFromRaw)(rawContentState);
96
93
  const editorState = _draftJs.EditorState.createWithContent(contentState, _entityDecorators.decorator);
97
- return /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
94
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledComponents.ThemeProvider, {
98
95
  theme: {
99
96
  themeColor,
100
97
  fontSizeLevel
101
- }
102
- }, /*#__PURE__*/_react.default.createElement(_draftJs.Editor, {
103
- editorState: editorState,
104
- blockRenderMap: _index.default.projectContent,
105
- blockRendererFn: blockRendererFn,
106
- customStyleFn: _customStyleFn.customStyleFn,
107
- readOnly: true
108
- // eslint-disable-next-line @typescript-eslint/no-empty-function
109
- ,
110
- onChange: () => {}
111
- }));
98
+ },
99
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_draftJs.Editor, {
100
+ editorState: editorState,
101
+ blockRenderMap: _index.default.projectContent,
102
+ blockRendererFn: blockRendererFn,
103
+ customStyleFn: _customStyleFn.customStyleFn,
104
+ readOnly: true,
105
+ onChange: () => {}
106
+ })
107
+ });
112
108
  };
113
109
  exports.ProjectContentDraftRenderer = ProjectContentDraftRenderer;
package/lib/entity-decorators/anchor.js CHANGED
@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.anchorDecorator = void 0;
7
7
  var _react = _interopRequireDefault(require("react"));
8
8
  var _entity = require("../utils/entity");
9
+ var _jsxRuntime = require("react/jsx-runtime");
9
10
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
10
11
  const Anchor = props => {
11
12
  var _contentState$getEnti;
@@ -15,9 +16,10 @@ const Anchor = props => {
15
16
  entityKey
16
17
  } = props;
17
18
  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;
18
- return /*#__PURE__*/_react.default.createElement("span", {
19
- id: id
20
- }, children);
19
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
20
+ id: id,
21
+ children: children
22
+ });
21
23
  };
22
24
  const anchorDecorator = exports.anchorDecorator = {
23
25
  strategy: (0, _entity.findEntitiesByType)(_entity.ENTITY.Anchor),