@kids-reporter/draft-renderer 1.0.14 → 1.0.16

package/lib/block-render-maps/annotation.js

@@ -10,7 +10,7 @@ var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _articleContent = require("./article-content");
 var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const HeadingForAnnotation = (0, _styledComponents.default)(_articleContent.Heading)`
   margin: 0 auto 27px auto;
 `;

package/lib/block-render-maps/article-brief.js

@@ -10,7 +10,7 @@ var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _articleContent = require("./article-content");
 var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const ParagraphForIntroduction = (0, _styledComponents.default)(_articleContent.Paragraph)`
   font-size: ${({
   theme

package/lib/block-render-maps/article-content.js

@@ -10,7 +10,7 @@ var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _mediaQuery = require("../utils/media-query");
 var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const Paragraph = exports.Paragraph = _styledComponents.default.div`
   width: 100%;
   max-width: 700px;

package/lib/block-render-maps/image-link.js

@@ -10,7 +10,7 @@ var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _articleContent = require("./article-content");
 var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const ParagraphForImageLink = (0, _styledComponents.default)(_articleContent.Paragraph)`
   /* overwrite css */
   font-size: ${({

package/lib/block-render-maps/info-box.js

@@ -8,17 +8,39 @@ var _draftJs = require("draft-js");
 var _immutable = _interopRequireDefault(require("immutable"));
 var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _mediaQuery = require("../utils/media-query");
 var _articleContent = require("./article-content");
 var _jsxRuntime = require("react/jsx-runtime");
-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); }
-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; }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const HeadingForInfoBox = (0, _styledComponents.default)(_articleContent.Heading)`
   margin-top: 0px;
-  margin-bottom: 20px;
+  margin-bottom: 16px;
+  ${_mediaQuery.mediaQuery.smallOnly} {
+    padding-left: 0px;
+    padding-right: 0px;
+  }
+
+  ${_mediaQuery.mediaQuery.mediumAbove} {
+    margin-bottom: 24px;
+
+    &:has(h5) {
+      margin-bottom: 16px;
+    }
+  }
 `;
 const ListForInfoBox = (0, _styledComponents.default)(_articleContent.List)`
-  margin-bottom: 20px;
+  margin-bottom: 16px;
+  &:last-child {
+    margin-bottom: 0px;
+  }
+
+  ${_mediaQuery.mediaQuery.mediumAbove} {
+    margin-bottom: 24px;
+    &:last-child {
+      margin-bottom: 0px;
+    }
+  }
 
   color: #232323;
   li {
@@ -34,9 +56,41 @@ const ParagraphForInfoBox = (0, _styledComponents.default)(_articleContent.Parag
   theme
 }) => (theme === null || theme === void 0 ? void 0 : theme.fontSizeLevel) === 'large' ? '20px' : '16px'};
   font-weight: 400;
-  margin-bottom: 20px;
+  margin-bottom: 16px;
   line-height: 1.5;
   color: #232323;
+
+  &:last-child {
+    margin-bottom: 0px;
+  }
+
+  ${_mediaQuery.mediaQuery.smallOnly} {
+    padding-left: 0px;
+    padding-right: 0px;
+  }
+
+  ${_mediaQuery.mediaQuery.mediumAbove} {
+    margin-bottom: 24px;
+    &:last-child {
+      margin-bottom: 0px;
+    }
+  }
+
+  > div[data-block='true'] {
+    margin-bottom: 16px;
+    &:last-child {
+      margin-bottom: 0px;
+    }
+  }
+
+  ${_mediaQuery.mediaQuery.mediumAbove} {
+    > div[data-block='true'] {
+      margin-bottom: 24px;
+      &:last-child {
+        margin-bottom: 0px;
+      }
+    }
+  }
 `;
 const _blockRenderMapForAnnotation = _immutable.default.Map({
   atomic: {
@@ -73,7 +127,6 @@ const dividerStyles = (0, _styledComponents.css)`
   height: 12px;
   display: block;
   background-image: url(https://www.unpkg.com/@kids-reporter/draft-renderer/public/images/info-box-border.svg);
-  background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
 `;

package/lib/block-render-maps/project-content.js

@@ -10,7 +10,7 @@ var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _articleContent = require("./article-content");
 var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const Paragraph = exports.Paragraph = (0, _styledComponents.default)(_articleContent.Paragraph)`
   text-align: center;
   max-width: 750px;

package/lib/block-renderers/blockquote.js

@@ -11,7 +11,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _index = require("../utils/index");
 var _mediaQuery = require("../utils/media-query");
 var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const BorderLeftContainer = _styledComponents.default.blockquote`
   margin: 0;
   padding-left: 30px;
@@ -64,7 +64,7 @@ const SvgBlock = _styledComponents.default.div`
     }
   }
 
-  ${_mediaQuery.mediaQuery.mediumOnly} {
+  ${_mediaQuery.mediaQuery.mediumAndDesktopOnly} {
     svg {
       width: 25px;
       margin-right: 15px;

package/lib/block-renderers/divider.js

@@ -9,7 +9,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _index = require("../utils/index");
 var _mediaQuery = require("../utils/media-query");
 var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const Hr = _styledComponents.default.hr`
   border-top: 3px solid ${({
   theme

package/lib/block-renderers/dropdown.js

@@ -7,7 +7,7 @@ exports.Dropdown = void 0;
 var _react = require("react");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const DropdownOptionList = _styledComponents.default.ul`
   margin: 0;
   position: relative;

package/lib/block-renderers/embedded-code-block.js

@@ -9,7 +9,7 @@ var _react = require("react");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _mediaQuery = require("../utils/media-query");
 var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const Block = exports.Block = _styledComponents.default.div`
   position: relative;
   white-space: normal;

package/lib/block-renderers/image-block.js

@@ -13,9 +13,8 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _constants = require("../utils/constants");
 var _mediaQuery = require("../utils/media-query");
 var _jsxRuntime = require("react/jsx-runtime");
-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); }
-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; }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const Figure = _styledComponents.default.figure`
   width: 100%;
 `;
@@ -164,7 +163,13 @@ function ImageInArticleBody({
 const InfoBoxContainer = exports.InfoBoxContainer = _styledComponents.default.div`
   /* reset browser default styles */
   figure {
-    margin: 0 0 27px 0;
+    margin: 20px 0;
+  }
+
+  ${_mediaQuery.mediaQuery.mediumAbove} {
+    figure {
+      margin: 32px 0;
+    }
   }
 
   ${props => {

package/lib/block-renderers/image-link.js

@@ -14,9 +14,8 @@ var _constants = require("../utils/constants");
 var _mediaQuery = require("../utils/media-query");
 var _imageBlock = require("./image-block");
 var _jsxRuntime = require("react/jsx-runtime");
-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); }
-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; }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const fallbackImg = '/assets/images/image_placeholder.png';
 const Figure = _styledComponents.default.figure`
   width: 100%;

package/lib/block-renderers/info-box-block.js

@@ -11,12 +11,10 @@ var _index = _interopRequireDefault(require("../block-render-maps/index"));
 var _imageBlock = require("../block-renderers/image-block");
 var _imageLink = require("../block-renderers/image-link");
 var _index2 = require("../entity-decorators/index");
-var _index3 = require("../utils/index");
 var _mediaQuery = require("../utils/media-query");
 var _jsxRuntime = require("react/jsx-runtime");
-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); }
-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; }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 var InfoBoxTypeEnum = /*#__PURE__*/function (InfoBoxTypeEnum) {
   InfoBoxTypeEnum["newsChargeStation"] = "news-charge-station";
   InfoBoxTypeEnum["headerBorder"] = "header-border";
@@ -24,23 +22,35 @@ var InfoBoxTypeEnum = /*#__PURE__*/function (InfoBoxTypeEnum) {
   return InfoBoxTypeEnum;
 }(InfoBoxTypeEnum || {});
 const containerStyles = (0, _styledComponents.css)`
-  padding: 40px 40px 20px 40px;
   border-radius: 30px;
   position: relative;
 
   ${_mediaQuery.mediaQuery.smallOnly} {
-    padding: 20px 20px 0px 20px;
+    padding: 24px;
+  }
+
+  ${_mediaQuery.mediaQuery.mediumOnly} {
+    padding: 36px;
+  }
+
+  ${_mediaQuery.mediaQuery.desktopAbove} {
+    padding: 48px;
   }
 `;
 const NewsChargeStationContainer = _styledComponents.default.div`
   ${containerStyles}
+  ${_mediaQuery.mediaQuery.smallOnly} {
+    padding-top: 56px;
+  }
 
-  padding-top: 60px;
-  background-color: #fffcf4;
+  ${_mediaQuery.mediaQuery.mediumOnly} {
+    padding-top: 72px;
+  }
 
-  ${_mediaQuery.mediaQuery.smallOnly} {
-    padding-top: 60px;
+  ${_mediaQuery.mediaQuery.desktopAbove} {
+    padding-top: 84px;
   }
+  background-color: #fff9ec;
 
   &::before {
     content: '';
@@ -63,88 +73,61 @@ function NewsChargeStation({
     children: children
   });
 }
-const HeaderBorderContainer = _styledComponents.default.div`
-  ${({
-  theme
-}) => {
-  let logoColor;
-  let bgColor;
-  switch (theme === null || theme === void 0 ? void 0 : theme.themeColor) {
-    case _index3.ThemeColorEnum.YELLOW:
-      {
-        logoColor = 'red';
-        bgColor = '#fff0d2';
-        break;
-      }
-    case _index3.ThemeColorEnum.RED:
-      {
-        logoColor = 'blue';
-        bgColor = '#ffd2d2';
-        break;
-      }
-    case _index3.ThemeColorEnum.BLUE:
-    default:
-      {
-        logoColor = 'yellow';
-        bgColor = '#d2f5ff';
-        break;
-      }
+const HeaderBorderLogoContainer = _styledComponents.default.div`
+  display: flex;
+  justify-content: end;
+  ${_mediaQuery.mediaQuery.smallOnly} {
+    padding-top: 20px;
   }
-  return `
-      background-color: ${bgColor};
-      &::before {
-        background-image: url(https://www.unpkg.com/@kids-reporter/draft-renderer/public/images/info-box-blocksy-child-1-${logoColor}.png);
-      }
-      `;
-}}
-
-  ${containerStyles}
-
-  &::before {
-    content: '';
-    width: 120px;
-    height: 120px;
-    background-size: contain;
-    position: absolute;
-    bottom: 10px;
-    right: 10px;
+  ${_mediaQuery.mediaQuery.mediumAbove} {
+    padding-top: 32px;
   }
 `;
+const HeaderBorderLogo = _styledComponents.default.img`
+  width: 120px;
+  height: 100px;
+`;
+const HeaderBorderContainer = _styledComponents.default.div`
+  background-color: #e9f8ff;
+  ${containerStyles}
+`;
 function HeaderBorder({
-  children
+  children,
+  showBaodaozai
 }) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(HeaderBorderContainer, {
-    children: children
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(HeaderBorderContainer, {
+    children: [children, showBaodaozai && /*#__PURE__*/(0, _jsxRuntime.jsx)(HeaderBorderLogoContainer, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(HeaderBorderLogo, {
+        src: "https://www.unpkg.com/@kids-reporter/draft-renderer/public/images/info-box-blocksy-child-1-yellow.png",
+        alt: "\u9EC3\u8272\u5831\u5C0E\u4ED4"
+      })
+    })]
   });
 }
 const BoxBorderContainer = _styledComponents.default.div`
   ${containerStyles}
-  background-color: #ebebeb;
-  border: 3px solid #232323;
   overflow: hidden;
-
-  ${({
-  theme
-}) => `
-    &::before {
-      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);
-    }`}
-
-  &::before {
-    content: '';
-    width: 100px;
-    height: 100px;
-    background-size: contain;
-    position: absolute;
-    bottom: 0;
-    right: 0;
+  background-color: #f8f8f8;
+  ${_mediaQuery.mediaQuery.smallOnly} {
+    padding-bottom: 64px;
   }
 `;
+const BoxBorderLogo = _styledComponents.default.img`
+  width: 88px;
+  height: 64px;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+`;
 function BoxBorder({
-  children
+  children,
+  showBaodaozai
 }) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(BoxBorderContainer, {
-    children: children
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(BoxBorderContainer, {
+    children: [children, showBaodaozai && /*#__PURE__*/(0, _jsxRuntime.jsx)(BoxBorderLogo, {
+      src: "https://www.unpkg.com/@kids-reporter/draft-renderer/public/images/info-box-blocksy-child-2-blue.png",
+      alt: "\u85CD\u8272\u5831\u5C0E\u4ED4"
+    })]
   });
 }
 const ArticleBodyContainer = _styledComponents.default.div`
@@ -158,15 +141,38 @@ const ArticleBodyContainer = _styledComponents.default.div`
 const EditorContainer = _styledComponents.default.div`
   position: relative;
 `;
+function convertFromRawWithoutUnstyledTrailingBlocks(rawContentState) {
+  const contentState = (0, _draftJs.convertFromRaw)(rawContentState);
+  const originalBlocks = contentState.getBlocksAsArray();
+  if (originalBlocks.length === 0) {
+    return contentState;
+  }
+  let lastNonEmptyBlockIndex = originalBlocks.length - 1;
+
+  // Find the index of the last block that is not an empty 'unstyled' block.
+  while (lastNonEmptyBlockIndex >= 0 && originalBlocks[lastNonEmptyBlockIndex].getText().trim() === '' && originalBlocks[lastNonEmptyBlockIndex].getType() === 'unstyled') {
+    lastNonEmptyBlockIndex--;
+  }
+
+  // If no blocks were removed, return the original contentState.
+  if (lastNonEmptyBlockIndex === originalBlocks.length - 1) {
+    return contentState;
+  }
+  const newBlocks = originalBlocks.slice(0, lastNonEmptyBlockIndex + 1);
+
+  // Create a new ContentState from the trimmed blocks, preserving the entityMap.
+  return _draftJs.ContentState.createFromBlockArray(newBlocks, contentState.getEntityMap());
+}
 function InfoBoxInArticleBody({
   className,
   data
 }) {
   const {
     type,
-    rawContentState
+    rawContentState,
+    showBaodaozai = true
   } = data;
-  const contentState = (0, _draftJs.convertFromRaw)(rawContentState);
+  const contentState = convertFromRawWithoutUnstyledTrailingBlocks(rawContentState);
   const editorState = _draftJs.EditorState.createWithContent(contentState, _index2.decorator);
   let Component;
   let blockRenderMap = _index.default.infoBox.default;
@@ -192,6 +198,7 @@ function InfoBoxInArticleBody({
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(ArticleBodyContainer, {
     className: className,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
+      showBaodaozai: showBaodaozai,
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(EditorContainer, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_draftJs.Editor, {
           blockRenderMap: blockRenderMap,

package/lib/block-renderers/multimedia.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _index = require("../utils/index");
 var _mediaQuery = require("../utils/media-query");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const mockup = {
   mobile: {
     figure: {
@@ -102,7 +102,7 @@ const Caption = _styledComponents.default.figcaption`
     }
   }
 
-  ${_mediaQuery.mediaQuery.mediumOnly} {
+  ${_mediaQuery.mediaQuery.mediumAndDesktopOnly} {
     width: ${mockup.desktop.caption.width}px;
     padding: 15px 0 15px 0;
   }

package/lib/block-renderers/news-reading.js

@@ -8,7 +8,7 @@ var _react = require("react");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _dropdown = require("./dropdown");
 var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const ArticleBodyContainer = _styledComponents.default.div`
   max-width: 600px;
   width: calc(280 / 320 * 100%);

package/lib/block-renderers/slideshow-block.js

@@ -11,7 +11,7 @@ var _index = require("../utils/index");
 var _mediaQuery = require("../utils/media-query");
 var _multimedia = _interopRequireDefault(require("./multimedia"));
 var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const mockup = {
   mobile: {
     container: {
@@ -270,23 +270,22 @@ const SlidesFlexBox = _styledComponents.default.div`
 
   ${({
   translateXUint
-}) => `
-    ${_mediaQuery.mediaQuery.smallOnly} {
-      transform: translateX(
-          ${getTranslateX(mockup.mobile, translateXUint) / getContainerWidth(mockup.mobile)} * 100%
-        );
-    }
-    ${_mediaQuery.mediaQuery.mediumOnly} {
-      transform: translateX(
-          ${getTranslateX(mockup.desktop, translateXUint) / getContainerWidth(mockup.desktop)} * 100%
-        );
-    }
-    ${_mediaQuery.mediaQuery.largeOnly} {
-      transform: translateX(
-          ${getTranslateX(mockup.hd, translateXUint) / getContainerWidth(mockup.hd)} * 100%
-        );
-    }
-  `}
+}) => {
+  const mobileTranslateX = getTranslateX(mockup.mobile, translateXUint) / getContainerWidth(mockup.mobile) * 100;
+  const desktopTranslateX = getTranslateX(mockup.desktop, translateXUint) / getContainerWidth(mockup.desktop) * 100;
+  const hdTranslateX = getTranslateX(mockup.hd, translateXUint) / getContainerWidth(mockup.hd) * 100;
+  return `
+      ${_mediaQuery.mediaQuery.smallOnly} {
+        transform: translateX(${mobileTranslateX}%);
+      }
+      ${_mediaQuery.mediaQuery.mediumAndDesktopOnly} {
+        transform: translateX(${desktopTranslateX}%);
+      }
+      ${_mediaQuery.mediaQuery.largeOnly} {
+        transform: translateX(${hdTranslateX}%);
+      }
+    `;
+}}
 `;
 const SlideFlexItem = _styledComponents.default.div`
   height: 100%;
@@ -297,7 +296,7 @@ const SlideFlexItem = _styledComponents.default.div`
     padding-right: ${() => `calc(${mockup.mobile.slide.paddingRight} / ${getContainerWidth(mockup.mobile)}*100%)`};
   }
 
-  ${_mediaQuery.mediaQuery.mediumOnly} {
+  ${_mediaQuery.mediaQuery.mediumAndDesktopOnly} {
     flex-basis: ${getSlideWidth(mockup.desktop)}px;
     padding-right: ${mockup.desktop.slide.paddingRight}px;
   }
@@ -333,7 +332,7 @@ const SlideshowFlexBox = _styledComponents.default.div`
     width: 100%;
   }
 
-  ${_mediaQuery.mediaQuery.mediumOnly} {
+  ${_mediaQuery.mediaQuery.mediumAndDesktopOnly} {
     width: ${mockup.desktop.container.width}px;
   }
 
@@ -461,7 +460,7 @@ function SlideshowBlock({
       setCurSlideIndex(_curSlideIndex);
       setTranslateXUnit(defaultTranslateXUnit - _curSlideIndex);
     }, duration * 2);
-  }, [slideTo, curSlideIndex, translateXUnit]);
+  }, [curSlideIndex, defaultTranslateXUnit, slideTo, total]);
   const isSliding = slideTo !== '';
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(SlideshowFlexBox, {
     className: appendedClassName,

package/lib/draft-renderer.js

@@ -13,7 +13,7 @@ var _customStyleFn = require("./custom-style-fn");
 var _entityDecorators = require("./entity-decorators");
 var _index2 = require("./utils/index");
 var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const blockRendererFn = block => {
   const atomicBlockObj = (0, _blockRendererFn.atomicBlockRenderer)(block);
   return atomicBlockObj;

package/lib/entity-decorators/anchor.js

@@ -7,7 +7,7 @@ exports.anchorDecorator = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _entity = require("../utils/entity");
 var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const Anchor = props => {
   var _contentState$getEnti;
   const {

package/lib/entity-decorators/annotation-decorator.js

@@ -13,7 +13,7 @@ var _anchor = require("./anchor");
 var _linkDecorator = require("./link-decorator");
 var _tocAnchor = require("./toc-anchor");
 var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const AnnotationWrapper = _styledComponents.default.span`
   display: inline-block;
   cursor: pointer;

package/lib/entity-decorators/link-decorator.js

@@ -8,9 +8,8 @@ var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _entity = require("../utils/entity");
 var _jsxRuntime = require("react/jsx-runtime");
-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); }
-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; }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const LinkWrapper = _styledComponents.default.a`
   text-decoration: underline;
   color: #27b5f7;

package/lib/entity-decorators/toc-anchor.js

@@ -7,7 +7,7 @@ exports.tocAnchorDecorator = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _entity = require("../utils/entity");
 var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const TOCAnchor = props => {
   var _contentState$getEnti;
   const {

package/lib/index.js

@@ -78,7 +78,7 @@ var _customStyleFn = require("./custom-style-fn");
 var _draftRenderer = require("./draft-renderer");
 var _entityDecorators = require("./entity-decorators");
 var _entity = require("./utils/entity");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const blockRenderMap = exports.blockRenderMap = _index.default.content;
 var _default = exports.default = {
   ArticleBodyDraftRenderer: _draftRenderer.ArticleBodyDraftRenderer,

package/lib/utils/media-query.js

@@ -5,15 +5,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.mediaQuery = exports.breakpoints = void 0;
 const breakpoints = exports.breakpoints = {
-  small: 320,
-  medium: 760,
+  small: 375,
+  medium: 768,
   desktop: 1024,
   // TODO: unify breakpoints in twreporter/kids reporter
   large: 1440
 };
 const mediaQuery = exports.mediaQuery = {
   smallOnly: `@media (max-width: ${breakpoints.medium - 1}px)`,
-  mediumOnly: `@media (min-width: ${breakpoints.medium}px) and (max-width: ${breakpoints.large - 1}px)`,
+  mediumAndDesktopOnly: `@media (min-width: ${breakpoints.medium}px) and (max-width: ${breakpoints.large - 1}px)`,
+  mediumOnly: `@media (min-width: ${breakpoints.medium}px) and (max-width: ${breakpoints.desktop - 1}px)`,
+  desktopAbove: `@media (min-width: ${breakpoints.desktop}px)`,
   mediumAbove: `@media (min-width: ${breakpoints.medium}px)`,
   largeBelow: `@media (max-width: ${breakpoints.large - 1}px)`,
   largeOnly: `@media (min-width: ${breakpoints.large}px)`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kids-reporter/draft-renderer",
-  "version": "1.0.14",
+  "version": "1.0.16",
   "description": "",
   "main": "lib/index.js",
   "scripts": {
@@ -24,15 +24,11 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "babel-loader": "^8.2.5",
     "body-scroll-lock": "3.1.5",
-    "html-webpack-plugin": "^5.5.0",
-    "lodash": "^4.17.21",
-    "webpack": "^5.72.1",
-    "webpack-cli": "^4.9.2"
+    "draft-js": "^0.11.7",
+    "lodash": "^4.17.21"
   },
   "peerDependencies": {
-    "draft-js": "^0.11.7",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "styled-components": "6.1.19"
@@ -42,8 +38,20 @@
     "public"
   ],
   "devDependencies": {
+    "@babel/cli": "^7.23.9",
+    "@babel/core": "^7.23.9",
+    "@babel/preset-env": "^7.25.0",
+    "@babel/preset-react": "^7.24.7",
+    "@babel/preset-typescript": "^7.24.7",
+    "babel-loader": "^8.3.0",
+    "babel-plugin-file-loader": "^2.0.0",
+    "babel-plugin-inline-react-svg": "^2.0.1",
+    "html-webpack-plugin": "^5.5.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "styled-components": "6.1.19"
+    "styled-components": "6.1.19",
+    "webpack": "^5.90.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.15.1"
   }
 }