@kids-reporter/draft-renderer 1.0.15 → 1.0.17

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

@@ -7,32 +7,22 @@ exports.blockRenderMap = void 0;
 var _draftJs = require("draft-js");
 var _immutable = _interopRequireDefault(require("immutable"));
 var _react = _interopRequireDefault(require("react"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _articleContent = require("./article-content");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const ParagraphForIntroduction = (0, _styledComponents.default)(_articleContent.Paragraph)`
-  font-size: ${({
-  theme
-}) => (theme === null || theme === void 0 ? void 0 : theme.fontSizeLevel) === 'large' ? '24px' : '20px'};
-  color: #575757;
-`;
-const ListForIntroduction = (0, _styledComponents.default)(_articleContent.List)`
-  color: #575757;
-`;
 const blockRenderMap = exports.blockRenderMap = _draftJs.DefaultDraftBlockRenderMap.merge(_immutable.default.Map({
   'ordered-list-item': {
     element: 'li',
-    wrapper: /*#__PURE__*/(0, _jsxRuntime.jsx)(ListForIntroduction, {})
+    wrapper: /*#__PURE__*/(0, _jsxRuntime.jsx)(_articleContent.List, {})
   },
   'unordered-list-item': {
     element: 'li',
-    wrapper: /*#__PURE__*/(0, _jsxRuntime.jsx)(ListForIntroduction, {
+    wrapper: /*#__PURE__*/(0, _jsxRuntime.jsx)(_articleContent.List, {
       as: "ul"
     })
   },
   unstyled: {
     element: 'div',
-    wrapper: /*#__PURE__*/(0, _jsxRuntime.jsx)(ParagraphForIntroduction, {})
+    wrapper: /*#__PURE__*/(0, _jsxRuntime.jsx)(_articleContent.Paragraph, {})
   }
 }));

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

@@ -14,13 +14,6 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 const Paragraph = exports.Paragraph = _styledComponents.default.div`
   width: 100%;
   max-width: 700px;
-  font-size: ${({
-  theme
-}) => (theme === null || theme === void 0 ? void 0 : theme.fontSizeLevel) === 'large' ? '22px' : '18px'};
-  font-weight: 400;
-  color: #3a4f66;
-  letter-spacing: 0.9px;
-  line-height: 2;
   margin: 0 auto;
 
   ${_mediaQuery.mediaQuery.smallOnly} {
@@ -28,14 +21,11 @@ const Paragraph = exports.Paragraph = _styledComponents.default.div`
     padding-right: 15px;
   }
 
-  > div[data-block='true'] {
+  > div[data-block='true']:not(:last-child) {
     margin-bottom: 27px;
   }
 `;
 const Heading = exports.Heading = _styledComponents.default.div`
-  font-weight: 700;
-  line-height: 1.5;
-  color: #232323;
   width: 100%;
   max-width: 700px;
   margin: 45px auto 20px auto;
@@ -44,34 +34,9 @@ const Heading = exports.Heading = _styledComponents.default.div`
   h3,
   h4,
   h5 {
-    letter-spacing: 1.5px;
     margin: 0;
   }
 
-  h2 {
-    font-size: ${({
-  theme
-}) => (theme === null || theme === void 0 ? void 0 : theme.fontSizeLevel) === 'large' ? '39px' : '35px'};
-  }
-
-  h3 {
-    font-size: ${({
-  theme
-}) => (theme === null || theme === void 0 ? void 0 : theme.fontSizeLevel) === 'large' ? '34px' : '30px'};
-  }
-
-  h4 {
-    font-size: ${({
-  theme
-}) => (theme === null || theme === void 0 ? void 0 : theme.fontSizeLevel) === 'large' ? '29px' : '25px'};
-  }
-
-  h5 {
-    font-size: ${({
-  theme
-}) => (theme === null || theme === void 0 ? void 0 : theme.fontSizeLevel) === 'large' ? '24px' : '20px'};
-  }
-
   ${_mediaQuery.mediaQuery.smallOnly} {
     padding-left: 15px;
     padding-right: 15px;
@@ -81,12 +46,7 @@ const List = exports.List = _styledComponents.default.ol`
   width: 100%;
   max-width: 700px;
   margin: 0 auto 27px auto;
-  font-size: ${({
-  theme
-}) => (theme === null || theme === void 0 ? void 0 : theme.fontSizeLevel) === 'large' ? '22px' : '18px'};
-  line-height: 2;
-  letter-spacing: 0.9px;
-  color: #3a4f66;
+
   padding-left: 2rem;
 
   > li {

package/lib/block-renderers/dropdown.js

@@ -64,7 +64,7 @@ const Arrow = _styledComponents.default.span`
 
   width: 20px;
   height: 20px;
-  background-color: #27b5f7;
+  background-color: #27b3f5;
   border-radius: 50%;
   display: flex;
 

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

@@ -81,8 +81,8 @@ function ImageBlockInner({
       },
       $isDesktopAndAbove: isDesktopAndAbove,
       onClick: () => {
-        var _handleImgModalOpen, _ref;
-        return isDesktopAndAbove && (theme === null || theme === void 0 || (_handleImgModalOpen = (_ref = theme).handleImgModalOpen) === null || _handleImgModalOpen === void 0 ? void 0 : _handleImgModalOpen.call(_ref, commonImgProps));
+        var _onImageModalOpen, _ref;
+        return isDesktopAndAbove && (theme === null || theme === void 0 || (_onImageModalOpen = (_ref = theme).onImageModalOpen) === null || _onImageModalOpen === void 0 ? void 0 : _onImageModalOpen.call(_ref, commonImgProps));
       }
     }), desc && /*#__PURE__*/(0, _jsxRuntime.jsx)(FigureCaption, {
       children: desc

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

@@ -57,8 +57,8 @@ function ImageLinkBlockInner({
       ...commonImgProps,
       $isDesktopAndAbove: isDesktopAndAbove,
       onClick: () => {
-        var _handleImgModalOpen, _ref;
-        return isDesktopAndAbove && (theme === null || theme === void 0 || (_handleImgModalOpen = (_ref = theme).handleImgModalOpen) === null || _handleImgModalOpen === void 0 ? void 0 : _handleImgModalOpen.call(_ref, commonImgProps));
+        var _onImageModalOpen, _ref;
+        return isDesktopAndAbove && (theme === null || theme === void 0 || (_onImageModalOpen = (_ref = theme).onImageModalOpen) === null || _onImageModalOpen === void 0 ? void 0 : _onImageModalOpen.call(_ref, commonImgProps));
       }
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_draftJs.Editor, {
       blockRenderMap: blockRenderMap,

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

@@ -141,7 +141,7 @@ const ArticleBodyContainer = _styledComponents.default.div`
 const EditorContainer = _styledComponents.default.div`
   position: relative;
 `;
-function convertFromRawWithoutUnstyledTrailingBlocks(rawContentState) {
+function convertFromRawTrimmed(rawContentState) {
   const contentState = (0, _draftJs.convertFromRaw)(rawContentState);
   const originalBlocks = contentState.getBlocksAsArray();
   if (originalBlocks.length === 0) {
@@ -172,7 +172,7 @@ function InfoBoxInArticleBody({
     rawContentState,
     showBaodaozai = true
   } = data;
-  const contentState = convertFromRawWithoutUnstyledTrailingBlocks(rawContentState);
+  const contentState = convertFromRawTrimmed(rawContentState);
   const editorState = _draftJs.EditorState.createWithContent(contentState, _index2.decorator);
   let Component;
   let blockRenderMap = _index.default.infoBox.default;

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

@@ -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.mediumAndDesktopOnly} {
-      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%;
@@ -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

@@ -27,7 +27,7 @@ const DraftRenderer = ({
   rawContentState,
   themeColor = _index2.ThemeColorEnum.RED,
   fontSizeLevel = FontSizeLevel.NORMAL,
-  handleImgModalOpen = undefined,
+  onImageModalOpen = undefined,
   initiallyScrollTo = '',
   offsetTop = 0
 }) => {
@@ -48,7 +48,7 @@ const DraftRenderer = ({
       themeColor,
       fontSizeLevel,
       offsetTop,
-      handleImgModalOpen
+      onImageModalOpen
     },
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_draftJs.Editor, {
       editorState: editorState,

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

@@ -17,12 +17,12 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 const AnnotationWrapper = _styledComponents.default.span`
   display: inline-block;
   cursor: pointer;
-  color: #27b5f7;
+  color: #27b3f5;
 `;
 const AnnotationBody = _styledComponents.default.div`
   color: #494949;
   margin-bottom: 10px;
-  border-top: 2px solid #27b5f7;
+  border-top: 2px solid #27b3f5;
   background-color: #fff;
   padding: 25px 25px;
 `;
@@ -39,7 +39,7 @@ const ArrowIcon = _styledComponents.default.span`
   top: -1px;
 
   &::before {
-    background-color: #27b5f7;
+    background-color: #27b3f5;
     content: '';
     width: 2px;
     height: 6.5px;
@@ -52,7 +52,7 @@ const ArrowIcon = _styledComponents.default.span`
   }
 
   &::after {
-    background-color: #27b5f7;
+    background-color: #27b3f5;
     content: '';
     width: 2px;
     height: 6.5px;

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

@@ -12,7 +12,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const LinkWrapper = _styledComponents.default.a`
   text-decoration: underline;
-  color: #27b5f7;
+  color: #27b3f5;
   transition: color 0.1s ease-in;
   cursor: pointer;
 

package/lib/utils/constants.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.colorHex = exports.DEBOUNCE_THRESHOLD = void 0;
 const colorHex = exports.colorHex = {
-  blue: '#27B5F7',
-  red: '#F76977',
-  yellow: '#F8C341'
+  blue: '#27b3f5',
+  red: '#f76977',
+  yellow: '#f8c341'
 };
 const DEBOUNCE_THRESHOLD = exports.DEBOUNCE_THRESHOLD = 100;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kids-reporter/draft-renderer",
-  "version": "1.0.15",
+  "version": "1.0.17",
   "description": "",
   "main": "lib/index.js",
   "scripts": {