@kids-reporter/draft-renderer 1.0.11 → 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 (29) 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 +55 -22
  13. package/lib/block-renderers/image-link.js +53 -24
  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 +43 -45
  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/constants.js +3 -2
  27. package/lib/utils/index.js +2 -2
  28. package/lib/utils/media-query.js +2 -0
  29. package/package.json +9 -6
package/lib/block-renderers/image-link.js CHANGED
@@ -4,13 +4,18 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.ImageLinkInInfoBox = exports.ImageLinkInArticleBody = exports.ImageLinkBlock = void 0;
7
- var _react = _interopRequireDefault(require("react"));
8
- var _styledComponents = _interopRequireDefault(require("styled-components"));
9
7
  var _draftJs = require("draft-js");
10
- var _imageBlock = require("./image-block");
8
+ var _debounce = _interopRequireDefault(require("lodash/debounce"));
9
+ var _react = require("react");
10
+ var _styledComponents = _interopRequireWildcard(require("styled-components"));
11
11
  var _index = _interopRequireDefault(require("../block-render-maps/index"));
12
12
  var _index2 = require("../entity-decorators/index");
13
+ var _constants = require("../utils/constants");
13
14
  var _mediaQuery = require("../utils/media-query");
15
+ var _imageBlock = require("./image-block");
16
+ var _jsxRuntime = require("react/jsx-runtime");
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
+ 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
19
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
15
20
  const fallbackImg = '/assets/images/image_placeholder.png';
16
21
  const Figure = _styledComponents.default.figure`
@@ -19,30 +24,50 @@ const Figure = _styledComponents.default.figure`
19
24
  const Img = _styledComponents.default.img`
20
25
  width: 100%;
21
26
  object-fit: contain;
27
+ ${props => props.$isDesktopAndAbove ? 'cursor: zoom-in;' : ''};
22
28
  `;
23
29
  const ImageLinkBlock = ({
24
30
  className = '',
25
31
  data
26
32
  }) => {
33
+ const theme = (0, _styledComponents.useTheme)();
27
34
  const {
28
35
  url,
29
36
  rawContentState
30
37
  } = data;
38
+ const [isDesktopAndAbove, setIsDesktopAndAbove] = (0, _react.useState)(false);
39
+ const handleWindowResize = (0, _debounce.default)(() => {
40
+ setIsDesktopAndAbove(window.innerWidth > _mediaQuery.breakpoints.desktop);
41
+ }, _constants.DEBOUNCE_THRESHOLD);
42
+ (0, _react.useEffect)(() => {
43
+ setIsDesktopAndAbove(window.innerWidth > _mediaQuery.breakpoints.desktop);
44
+ window.addEventListener('resize', handleWindowResize);
45
+ return () => {
46
+ window.removeEventListener('resize', handleWindowResize);
47
+ };
48
+ }, []);
31
49
  const contentState = (0, _draftJs.convertFromRaw)(rawContentState);
32
50
  const editorState = _draftJs.EditorState.createWithContent(contentState, _index2.decorator);
33
51
  const blockRenderMap = _index.default.imageLink;
34
- const imgBlock = /*#__PURE__*/_react.default.createElement(Figure, {
35
- className: className
36
- }, /*#__PURE__*/_react.default.createElement(Img, {
52
+ const commonImgProps = {
37
53
  src: url ?? fallbackImg
38
- }), /*#__PURE__*/_react.default.createElement(_draftJs.Editor, {
39
- blockRenderMap: blockRenderMap,
40
- editorState: editorState,
41
- readOnly: true
42
- // eslint-disable-next-line @typescript-eslint/no-empty-function
43
- ,
44
- onChange: () => {}
45
- }));
54
+ };
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
+ });
46
71
  return imgBlock;
47
72
  };
48
73
  exports.ImageLinkBlock = ImageLinkBlock;
@@ -87,6 +112,8 @@ const ArticleBodyContainer = _styledComponents.default.div`
87
112
  margin: 5px 27px 5px 0px;
88
113
  }
89
114
  `;
115
+ default:
116
+ return '';
90
117
  }
91
118
  }}
92
119
  `;
@@ -94,23 +121,25 @@ const ImageLinkInArticleBody = ({
94
121
  className = '',
95
122
  data
96
123
  }) => {
97
- return /*#__PURE__*/_react.default.createElement(ArticleBodyContainer, {
124
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(ArticleBodyContainer, {
98
125
  $alignment: data.alignment,
99
- className: className
100
- }, /*#__PURE__*/_react.default.createElement(ImageLinkBlock, {
101
- data: data
102
- }));
126
+ className: className,
127
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ImageLinkBlock, {
128
+ data: data
129
+ })
130
+ });
103
131
  };
104
132
  exports.ImageLinkInArticleBody = ImageLinkInArticleBody;
105
133
  const ImageLinkInInfoBox = ({
106
134
  className = '',
107
135
  data
108
136
  }) => {
109
- return /*#__PURE__*/_react.default.createElement(_imageBlock.InfoBoxContainer, {
137
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_imageBlock.InfoBoxContainer, {
110
138
  $alignment: data.alignment,
111
- className: className
112
- }, /*#__PURE__*/_react.default.createElement(ImageLinkBlock, {
113
- data: data
114
- }));
139
+ className: className,
140
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ImageLinkBlock, {
141
+ data: data
142
+ })
143
+ });
115
144
  };
116
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,31 +3,31 @@
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,
30
29
  fontSizeLevel = FontSizeLevel.NORMAL,
30
+ handleImgModalOpen = undefined,
31
31
  initiallyScrollTo = '',
32
32
  offsetTop = 0
33
33
  }) => {
@@ -37,28 +37,28 @@ const DraftRenderer = ({
37
37
  const anchor = document.querySelector(hash);
38
38
  anchor && window.scrollTo({
39
39
  top: anchor.offsetTop - offsetTop,
40
- behavior: 'instant'
40
+ behavior: 'auto'
41
41
  });
42
42
  };
43
43
  (0, _react.useEffect)(() => {
44
44
  initiallyScrollTo && scrollToElement(initiallyScrollTo);
45
45
  }, []);
46
- return /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
46
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledComponents.ThemeProvider, {
47
47
  theme: {
48
48
  themeColor,
49
49
  fontSizeLevel,
50
- offsetTop
51
- }
52
- }, /*#__PURE__*/_react.default.createElement(_draftJs.Editor, {
53
- editorState: editorState,
54
- blockRenderMap: _index.default.content,
55
- blockRendererFn: blockRendererFn,
56
- customStyleFn: _customStyleFn.customStyleFn,
57
- readOnly: true
58
- // eslint-disable-next-line @typescript-eslint/no-empty-function
59
- ,
60
- onChange: () => {}
61
- }));
50
+ offsetTop,
51
+ handleImgModalOpen
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
+ });
62
62
  };
63
63
  exports.DraftRenderer = DraftRenderer;
64
64
  const ArticleBodyDraftRenderer = exports.ArticleBodyDraftRenderer = DraftRenderer;
@@ -69,20 +69,19 @@ const ArticleIntroductionDraftRenderer = ({
69
69
  }) => {
70
70
  const contentState = (0, _draftJs.convertFromRaw)(rawContentState);
71
71
  const editorState = _draftJs.EditorState.createWithContent(contentState, _entityDecorators.decorator);
72
- return /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
72
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledComponents.ThemeProvider, {
73
73
  theme: {
74
74
  themeColor,
75
75
  fontSizeLevel
76
- }
77
- }, /*#__PURE__*/_react.default.createElement(_draftJs.Editor, {
78
- editorState: editorState,
79
- blockRenderMap: _index.default.brief,
80
- customStyleFn: _customStyleFn.customStyleFn,
81
- readOnly: true
82
- // eslint-disable-next-line @typescript-eslint/no-empty-function
83
- ,
84
- onChange: () => {}
85
- }));
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
+ });
86
85
  };
87
86
  exports.ArticleIntroductionDraftRenderer = ArticleIntroductionDraftRenderer;
88
87
  const ProjectContentDraftRenderer = ({
@@ -92,20 +91,19 @@ const ProjectContentDraftRenderer = ({
92
91
  }) => {
93
92
  const contentState = (0, _draftJs.convertFromRaw)(rawContentState);
94
93
  const editorState = _draftJs.EditorState.createWithContent(contentState, _entityDecorators.decorator);
95
- return /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
94
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledComponents.ThemeProvider, {
96
95
  theme: {
97
96
  themeColor,
98
97
  fontSizeLevel
99
- }
100
- }, /*#__PURE__*/_react.default.createElement(_draftJs.Editor, {
101
- editorState: editorState,
102
- blockRenderMap: _index.default.projectContent,
103
- blockRendererFn: blockRendererFn,
104
- customStyleFn: _customStyleFn.customStyleFn,
105
- readOnly: true
106
- // eslint-disable-next-line @typescript-eslint/no-empty-function
107
- ,
108
- onChange: () => {}
109
- }));
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
+ });
110
108
  };
111
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),