@kids-reporter/draft-renderer 0.4.16 → 0.4.18

package/lib/block-render-map.js

@@ -8,12 +8,10 @@ var _immutable = _interopRequireDefault(require("immutable"));
 var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _draftJs = require("draft-js");
-var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+var _mediaQuery = require("./utils/media-query");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-// @ts-ignore pkg does not contain ts header file
-
 const Paragraph = _styledComponents.default.div`
   width: 100%;
   max-width: 700px;
@@ -24,12 +22,12 @@ const Paragraph = _styledComponents.default.div`
   line-height: 2;
   margin: 0 auto;
 
-  ${_mediaQuery.default.mobileOnly`
+  ${_mediaQuery.mediaQuery.smallOnly} {
     padding-left: 15px;
     padding-right: 15px;
-  `}
+  }
 
-  > div[data-block="true"] {
+  > div[data-block='true'] {
     margin-bottom: 27px;
   }
 `;
@@ -64,10 +62,10 @@ const Heading = _styledComponents.default.div`
     font-size: 20px;
   }
 
-  ${_mediaQuery.default.mobileOnly`
+  ${_mediaQuery.mediaQuery.smallOnly} {
     padding-left: 15px;
     padding-right: 15px;
-  `}
+  }
 `;
 const List = _styledComponents.default.ol`
   width: 100%;
@@ -82,21 +80,9 @@ const List = _styledComponents.default.ol`
     margin-bottom: 6px;
   }
 `;
-const Atomic = _styledComponents.default.div`
-  /* hide empty block which immediately follows atomic block */
-  /*
-  & + ${Paragraph} {
-    > div[data-block='true']:first-child {
-      line-height: 0;
-      margin-bottom: 0;
-    }
-  }
-  */
-`;
 const _blockRenderMap = _immutable.default.Map({
   atomic: {
-    element: 'div',
-    wrapper: /*#__PURE__*/_react.default.createElement(Atomic, null)
+    element: 'div'
   },
   'header-two': {
     element: 'h2',
@@ -201,7 +187,18 @@ const HeadingForInfoBox = (0, _styledComponents.default)(Heading)`
   margin-top: 30px;
   margin-bottom: 30px;
 `;
+const Atomic = _styledComponents.default.div`
+  /* hide last empty block which immediately follows an atomic block */
+  & + ${Paragraph}:last-of-type {
+    line-height: 0;
+    margin-bottom: 0;
+  }
+`;
 const blockRenderMapForInfoBox = blockRenderMapForAnnotation.merge(_immutable.default.Map({
+  atomic: {
+    element: 'div',
+    wrapper: /*#__PURE__*/_react.default.createElement(Atomic, null)
+  },
   'header-four': {
     element: 'h4',
     wrapper: /*#__PURE__*/_react.default.createElement(HeadingForInfoBox, null)
@@ -220,8 +217,8 @@ const dividerStyles = (0, _styledComponents.css)`
 `;
 const HeadingForInfoBoxWithHeaderBorder = (0, _styledComponents.default)(HeadingForInfoBox)`
   h4 {
-    margin-top: 33px;
-    margin-bottom: 33px;
+    margin-top: 12px;
+    margin-bottom: 12px;
   }
 
   &::before {

package/lib/block-renderers/blockquote.js

@@ -7,12 +7,10 @@ exports.BlockquoteInArticleBody = BlockquoteInArticleBody;
 exports.BorderLeftBlockquote = BorderLeftBlockquote;
 exports.QuoteLeftBlockquote = QuoteLeftBlockquote;
 var _react = _interopRequireDefault(require("react"));
-var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
 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 }; }
-// @ts-ignore pkg does not contain ts header file
-
 const BorderLeftContainer = _styledComponents.default.blockquote`
   margin: 0;
   padding-left: 30px;
@@ -69,11 +67,11 @@ const ArticleBodyContainer = _styledComponents.default.div`
   max-width: 700px;
   margin: 0 auto 27px auto;
 
-  ${_mediaQuery.default.mobileOnly`
+  ${_mediaQuery.mediaQuery.smallOnly} {
     width: calc(100vw - 30px);
     margin-left: auto;
     margin-right: auto;
-  `}
+  }
 `;
 var BlockquoteTypeEnum = /*#__PURE__*/function (BlockquoteTypeEnum) {
   BlockquoteTypeEnum["borderLeft"] = "border_left";

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

@@ -6,14 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.EmbeddedCodeBlock = exports.Caption = exports.Block = void 0;
 exports.EmbeddedCodeInArticleBody = EmbeddedCodeInArticleBody;
 var _react = _interopRequireWildcard(require("react"));
-var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _mediaQuery = require("../utils/media-query");
 var _nodeHtmlParser = require("node-html-parser");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-// @ts-ignore pkg does not contain ts header file
-
 const Block = _styledComponents.default.div`
   position: relative;
   white-space: normal;
@@ -111,11 +109,11 @@ const ArticleBodyContainer = _styledComponents.default.div`
   max-width: 700px;
   margin: 0 auto 27px auto;
 
-  ${_mediaQuery.default.mobileOnly`
+  ${_mediaQuery.mediaQuery.smallOnly} {
     width: calc(100vw - 30px);
     margin-left: auto;
     margin-right: auto;
-  `}
+  }
 `;
 function EmbeddedCodeInArticleBody({
   className = '',

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

@@ -8,7 +8,7 @@ exports.ImageInArticleBody = ImageInArticleBody;
 exports.ImageInInfoBox = ImageInInfoBox;
 var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _index = require("../theme/index");
+var _mediaQuery = require("../utils/media-query");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const Figure = _styledComponents.default.figure`
   width: 100%;
@@ -59,14 +59,14 @@ const ArticleBodyContainer = _styledComponents.default.div`
     margin: 0;
   }
 
-  max-width: 100%;
+  max-width: 72vw;
   margin: 0 auto 27px auto;
 
-  ${_index.theme.breakpoint.sm} {
-    max-width: 72vw;
+  ${_mediaQuery.mediaQuery.smallOnly} {
+    max-width: 100%;
   }
 
-  ${_index.theme.breakpoint.xl} {
+  ${_mediaQuery.mediaQuery.largeOnly} {
     max-width: 1000px;
   }
 
@@ -74,13 +74,13 @@ const ArticleBodyContainer = _styledComponents.default.div`
   switch (props.$alignment) {
     case 'paragraph-width':
       return `
-          ${_index.theme.breakpoint.xl} {
+          ${_mediaQuery.mediaQuery.mediumAbove} {
             max-width: 700px;
           }
         `;
     case 'right':
       return `
-          ${_index.theme.breakpoint.xl} {
+          ${_mediaQuery.mediaQuery.mediumAbove} {
             width: 361px;
             float: right;
             margin: 5px 0px 5px 27px;
@@ -88,7 +88,7 @@ const ArticleBodyContainer = _styledComponents.default.div`
         `;
     case 'left':
       return `
-          ${_index.theme.breakpoint.xl} {
+          ${_mediaQuery.mediaQuery.mediumAbove} {
             width: 361px;
             float: left;
             margin: 5px 27px 5px 0px;
@@ -113,18 +113,31 @@ const InfoBoxContainer = _styledComponents.default.div`
   figure {
     margin: 0;
   }
-  margin-bottom: 30px;
-  width: fit-content;
 
   ${props => {
   switch (props.$alignment) {
-    case 'center':
+    case 'left':
       {
-        return `margin-left: auto; margin-right: auto;`;
+        return `
+        width: 200px;
+        margin-right: auto;
+        `;
       }
     case 'right':
       {
-        return `margin-left: auto`;
+        return `
+        width: 200px;
+        margin-left: auto;
+        `;
+      }
+    case 'paragraph-width':
+    default:
+      {
+        return `
+        width: fit-content;
+        margin-left: auto; 
+        margin-right: auto;
+        `;
       }
   }
 }}

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

@@ -6,16 +6,15 @@ Object.defineProperty(exports, "__esModule", {
 exports.InfoBoxInArticleBody = InfoBoxInArticleBody;
 var _draftJs = require("draft-js");
 var _react = _interopRequireDefault(require("react"));
-var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _blockRenderMap = require("../block-render-map");
 var _imageBlock = require("../block-renderers/image-block");
-var _index = require("../entity-decorators/index");
-var _index2 = require("../utils/index");
+var _index = require("../utils/index");
+var _index2 = require("../entity-decorators/index");
+var _mediaQuery = require("../utils/media-query");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-// @ts-ignore pkg does not contain ts header file
 var InfoBoxTypeEnum = /*#__PURE__*/function (InfoBoxTypeEnum) {
   InfoBoxTypeEnum["newsChargeStation"] = "news-charge-station";
   InfoBoxTypeEnum["headerBorder"] = "header-border";
@@ -27,9 +26,9 @@ const containerStyles = (0, _styledComponents.css)`
   border-radius: 30px;
   position: relative;
 
-  ${_mediaQuery.default.mobileOnly`
+  ${_mediaQuery.mediaQuery.smallOnly} {
     padding: 20px;
-  `}
+  }
 `;
 const NewsChargeStationContainer = _styledComponents.default.div`
   ${containerStyles}
@@ -59,19 +58,19 @@ const HeaderBorderContainer = _styledComponents.default.div`
   let logoColor;
   let bgColor;
   switch (theme === null || theme === void 0 ? void 0 : theme.themeColor) {
-    case _index2.ThemeColorEnum.YELLOW:
+    case _index.ThemeColorEnum.YELLOW:
       {
         logoColor = 'red';
         bgColor = '#fff0d2';
         break;
       }
-    case _index2.ThemeColorEnum.RED:
+    case _index.ThemeColorEnum.RED:
       {
         logoColor = 'blue';
         bgColor = '#ffd2d2';
         break;
       }
-    case _index2.ThemeColorEnum.BLUE:
+    case _index.ThemeColorEnum.BLUE:
     default:
       {
         logoColor = 'yellow';
@@ -136,11 +135,11 @@ const ArticleBodyContainer = _styledComponents.default.div`
   max-width: 700px;
   margin: 60px auto;
 
-  ${_mediaQuery.default.mobileOnly`
+  ${_mediaQuery.mediaQuery.smallOnly} {
     width: calc(100vw - 30px);
     margin-left: auto;
     margin-right: auto;
-  `}
+  }
 `;
 const EditorContainer = _styledComponents.default.div`
   position: relative;
@@ -154,7 +153,7 @@ function InfoBoxInArticleBody({
     rawContentState
   } = data;
   const contentState = (0, _draftJs.convertFromRaw)(rawContentState);
-  const editorState = _draftJs.EditorState.createWithContent(contentState, _index.decorator);
+  const editorState = _draftJs.EditorState.createWithContent(contentState, _index2.decorator);
   let Component;
   let blockRenderMap = _blockRenderMap.blockRenderMapForInfoBox;
   switch (type) {

package/lib/block-renderers/multimedia.js

@@ -4,12 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+var _mediaQuery = require("../utils/media-query");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _index = require("../utils/index");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-// @ts-ignore @twreporter/core does not provide ts header file
-
 const mockup = {
   mobile: {
     figure: {
@@ -83,24 +81,20 @@ const Caption = _styledComponents.default.figcaption`
     border-style: solid;
   }
 
-  ${_mediaQuery.default.tabletAndBelow`
+  ${_mediaQuery.mediaQuery.smallOnly} {
     position: relative;
     margin-left: auto;
     padding: 15px 15px 15px 0;
     &:after {
       width: calc(100% - 15px);
     }
-  `}
+  }
 
-  ${_mediaQuery.default.mobileOnly`
+  ${_mediaQuery.mediaQuery.smallOnly} {
     max-width: ${mockup.mobile.caption.width}px;
-  `}
-
-  ${_mediaQuery.default.tabletOnly`
-    max-width: ${mockup.tablet.caption.width}px;
-  `}
+  }
 
-  ${_mediaQuery.default.desktopAndAbove`
+  ${_mediaQuery.mediaQuery.mediumAbove} {
     /* clear float */
     clear: both;
 
@@ -110,16 +104,17 @@ const Caption = _styledComponents.default.figcaption`
     &:after {
       width: 100%;
     }
-  `}
+  }
 
-  ${_mediaQuery.default.desktopOnly`
+  ${_mediaQuery.mediaQuery.mediumOnly} {
     width: ${mockup.desktop.caption.width}px;
     padding: 15px 0 15px 0;
-  `}
-  ${_mediaQuery.default.hdOnly`
+  }
+
+  ${_mediaQuery.mediaQuery.largeOnly} {
     width: ${mockup.hd.caption.width}px;
     padding: 25px 0 20px 0;
-  `}
+  }
 `;
 var _default = {
   Caption

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

@@ -7,14 +7,12 @@ exports.SlideshowBlock = SlideshowBlock;
 exports.SlideshowInArticleBody = SlideshowInArticleBody;
 var _multimedia = _interopRequireDefault(require("./multimedia"));
 var _react = _interopRequireWildcard(require("react"));
-var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _index = require("../utils/index");
+var _mediaQuery = require("../utils/media-query");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-// @ts-ignore pkg does not contain ts header file
-
 const mockup = {
   mobile: {
     container: {
@@ -113,40 +111,42 @@ const SlidesSection = _styledComponents.default.div`
   overflow: hidden;
   position: relative;
 
-  ${_mediaQuery.default.tabletAndBelow`
+  ${_mediaQuery.mediaQuery.smallOnly} {
     order: 2;
-  `}
-
-  ${_mediaQuery.default.mobileOnly`
-    padding-bottom: calc(${mockup.mobile.slide.height}/${mockup.mobile.container.width}*100%);
-  `}
+  }
 
-  ${_mediaQuery.default.tabletOnly`
-    padding-bottom: calc(${mockup.tablet.slide.height}/${mockup.tablet.container.width}*100%);
-  `}
+  ${_mediaQuery.mediaQuery.smallOnly} {
+    padding-bottom: calc(
+      ${mockup.mobile.slide.height} / ${mockup.mobile.container.width}*100%
+    );
+  }
 
-  ${_mediaQuery.default.desktopOnly`
-    padding-bottom: calc(${mockup.desktop.slide.height}/${mockup.desktop.container.width}*100%);
-  `}
+  ${_mediaQuery.mediaQuery.mediumOnly} {
+    padding-bottom: calc(
+      ${mockup.desktop.slide.height} / ${mockup.desktop.container.width}*100%
+    );
+  }
 
-  ${_mediaQuery.default.hdOnly`
-    padding-bottom: calc(${mockup.hd.slide.height}/${mockup.hd.container.width}*100%);
-  `}
+  ${_mediaQuery.mediaQuery.largeOnly} {
+    padding-bottom: calc(
+      ${mockup.hd.slide.height} / ${mockup.hd.container.width}*100%
+    );
+  }
 `;
 const PrevNextSection = _styledComponents.default.div`
   margin-top: 20px;
 
-  ${_mediaQuery.default.tabletAndBelow`
+  ${_mediaQuery.mediaQuery.smallOnly} {
     order: 3;
-  `}
+  }
 
-  ${_mediaQuery.default.mobileOnly`
+  ${_mediaQuery.mediaQuery.smallOnly} {
     margin-left: 25px;
-  `}
+  }
 
-  ${_mediaQuery.default.tabletOnly`
+  ${_mediaQuery.mediaQuery.mediumAbove} {
     margin-left: 47px;
-  `}
+  }
 `;
 const PrevButton = _styledComponents.default.div`
   cursor: pointer;
@@ -160,14 +160,14 @@ const PrevButton = _styledComponents.default.div`
     width: 21px;
   }
 
-  ${_mediaQuery.default.hdOnly`
+  ${_mediaQuery.mediaQuery.largeOnly} {
     width: 83px;
     height: 83px;
 
     > svg {
       width: 31px;
     }
-  `}
+  }
 
   &:hover {
     > svg {
@@ -205,23 +205,23 @@ const ImageNumberCircle = _styledComponents.default.div`
     left: 7px;
   }
 
-  ${_mediaQuery.default.tabletAndBelow`
+  ${_mediaQuery.mediaQuery.smallOnly} {
     order: 1;
 
     /* align right */
     margin-left: auto;
     /* 10px is the border-right width of body */
     margin-right: 10px;
-  `}
+  }
 
-  ${_mediaQuery.default.desktopAndAbove`
+  ${_mediaQuery.mediaQuery.mediumAbove} {
     margin-top: 6px;
 
     /* align right */
     margin-left: auto;
-  `}
+  }
 
-  ${_mediaQuery.default.hdOnly`
+  ${_mediaQuery.mediaQuery.largeOnly} {
     margin-right: -18px;
     width: 110px;
     height: 110px;
@@ -231,7 +231,7 @@ const ImageNumberCircle = _styledComponents.default.div`
       top: 93px;
       left: 10px;
     }
-  `}
+  }
 `;
 const ImageNumber = _styledComponents.default.span`
   position: absolute;
@@ -241,19 +241,19 @@ const ImageNumber = _styledComponents.default.span`
   font-weight: bold;
   line-height: 0.79;
 
-  ${_mediaQuery.default.hdOnly`
+  ${_mediaQuery.mediaQuery.largeOnly} {
     top: 35px;
     left: 10px;
-  `}
+  }
 `;
 const ImageTotal = (0, _styledComponents.default)(ImageNumber)`
   top: 46px;
   left: 36px;
 
-  ${_mediaQuery.default.hdOnly`
+  ${_mediaQuery.mediaQuery.largeOnly} {
     top: 71px;
     left: 50px;
-  `}
+  }
 `;
 const Desc = (0, _styledComponents.default)(_multimedia.default.Caption)`
   align-self: flex-start;
@@ -262,21 +262,21 @@ const Desc = (0, _styledComponents.default)(_multimedia.default.Caption)`
   /* overwrite Multimedia.Caption styles */
   margin-bottom: 0;
 
-  ${_mediaQuery.default.tabletAndBelow`
+  ${_mediaQuery.mediaQuery.smallOnly} {
     order: 4;
     padding-top: 15px;
-  `}
+  }
 
-  ${_mediaQuery.default.mobileOnly`
-    width: calc(180/355*100%);
-  `}
+  ${_mediaQuery.mediaQuery.smallOnly} {
+    width: calc(180 / 355 * 100%);
+  }
 
-  ${_mediaQuery.default.desktopAndAbove`
+  ${_mediaQuery.mediaQuery.mediumAbove} {
     padding-top: 30px;
 
     /* overwrite Multimedia.Caption styles */
     float: none;
-  `}
+  }
 `;
 const EmptyDesc = (0, _styledComponents.default)(Desc)`
   &::after {
@@ -297,46 +297,47 @@ const SlidesFlexBox = _styledComponents.default.div`
   }
 }}
 
-  ${_mediaQuery.default.mobileOnly`
-    transform: translateX(${props => getTranslateX(mockup.mobile, props.translateXUint) / getContainerWidth(mockup.mobile) * 100}%);
-  `}
-
-  ${_mediaQuery.default.tabletOnly`
-    transform: translateX(${props => getTranslateX(mockup.tablet, props.translateXUint) / getContainerWidth(mockup.tablet) * 100}%);
-  `}
+  ${_mediaQuery.mediaQuery.smallOnly} {
+    transform: translateX(
+      ${props => getTranslateX(mockup.mobile, props.translateXUint) / getContainerWidth(mockup.mobile) * 100}%
+    );
+  }
 
-  ${_mediaQuery.default.desktopOnly`
-    transform: translateX(${props => getTranslateX(mockup.desktop, props.translateXUint)}px);
-  `}
+  ${_mediaQuery.mediaQuery.mediumOnly} {
+    transform: translateX(
+      ${props => getTranslateX(mockup.desktop, props.translateXUint)}px
+    );
+  }
 
-  ${_mediaQuery.default.hdOnly`
-    transform: translateX(${props => getTranslateX(mockup.hd, props.translateXUint)}px);
-  `}
+  ${_mediaQuery.mediaQuery.largeOnly} {
+    transform: translateX(
+      ${props => getTranslateX(mockup.hd, props.translateXUint)}px
+    );
+  }
 `;
 const SlideFlexItem = _styledComponents.default.div`
   height: 100%;
   flex-shrink: 0;
 
-  ${_mediaQuery.default.mobileOnly`
-    flex-basis: calc(${getSlideWidth(mockup.mobile)}/${getContainerWidth(mockup.mobile)}*100%);
-    padding-right: calc(${mockup.mobile.slide.paddingRight}/${getContainerWidth(mockup.mobile)}*100%);
-  `}
-
-  ${_mediaQuery.default.tabletOnly`
-    flex-basis: calc(${getSlideWidth(mockup.tablet)}/${getContainerWidth(mockup.tablet)}*100%);
-    padding-right: calc(${mockup.tablet.slide.paddingRight}/${getContainerWidth(mockup.tablet)}*100%);
-  `}
-
+  ${_mediaQuery.mediaQuery.smallOnly} {
+    flex-basis: calc(
+      ${getSlideWidth(mockup.mobile)} / ${getContainerWidth(mockup.mobile)}*100%
+    );
+    padding-right: calc(
+      ${mockup.mobile.slide.paddingRight} /
+        ${getContainerWidth(mockup.mobile)}*100%
+    );
+  }
 
-  ${_mediaQuery.default.desktopOnly`
+  ${_mediaQuery.mediaQuery.mediumOnly} {
     flex-basis: ${getSlideWidth(mockup.desktop)}px;
     padding-right: ${mockup.desktop.slide.paddingRight}px;
-  `}
+  }
 
-  ${_mediaQuery.default.hdOnly`
+  ${_mediaQuery.mediaQuery.largeOnly} {
     flex-basis: ${getSlideWidth(mockup.hd)}px;
     padding-right: ${mockup.hd.slide.paddingRight}px;
-  `}
+  }
 `;
 const SlideMask = _styledComponents.default.div`
   position: absolute;
@@ -347,40 +348,32 @@ const SlideMask = _styledComponents.default.div`
 const LeftSlideMask = (0, _styledComponents.default)(SlideMask)`
   left: 0;
 
-  ${_mediaQuery.default.mobileOnly`
+  ${_mediaQuery.mediaQuery.smallOnly} {
     width: ${getLeftMaskWidth(mockup.mobile) / getContainerWidth(mockup.mobile) * 100}%;
-  `}
-
-  ${_mediaQuery.default.tabletOnly`
-    width: ${getLeftMaskWidth(mockup.tablet) / getContainerWidth(mockup.tablet) * 100}%;
-  `}
+  }
 
-  ${_mediaQuery.default.desktopOnly`
+  ${_mediaQuery.mediaQuery.mediumOnly} {
     width: ${getLeftMaskWidth(mockup.desktop)}px;
-  `}
+  }
 
-  ${_mediaQuery.default.hdOnly`
+  ${_mediaQuery.mediaQuery.largeOnly} {
     width: ${getLeftMaskWidth(mockup.hd)}px;
-  `}
+  }
 `;
 const RightSlideMask = (0, _styledComponents.default)(SlideMask)`
   right: 0;
 
-  ${_mediaQuery.default.mobileOnly`
+  ${_mediaQuery.mediaQuery.smallOnly} {
     width: ${getRightMaskWidth(mockup.mobile) / getContainerWidth(mockup.mobile) * 100}%;
-  `}
-
-  ${_mediaQuery.default.tabletOnly`
-    width: ${getRightMaskWidth(mockup.tablet) / getContainerWidth(mockup.tablet) * 100}%;
-  `}
+  }
 
-  ${_mediaQuery.default.desktopOnly`
+  ${_mediaQuery.mediaQuery.mediumOnly} {
     width: ${getRightMaskWidth(mockup.desktop)}px;
-  `}
+  }
 
-  ${_mediaQuery.default.hdOnly`
+  ${_mediaQuery.mediaQuery.largeOnly} {
     width: ${getRightMaskWidth(mockup.hd)}px;
-  `}
+  }
 `;
 const SlideshowFlexBox = _styledComponents.default.div`
   ${PrevButton} {
@@ -404,21 +397,22 @@ const SlideshowFlexBox = _styledComponents.default.div`
   }
 
   width: 100%;
+  margin: 0 auto;
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
 
-  ${_mediaQuery.default.tabletAndBelow`
+  ${_mediaQuery.mediaQuery.smallOnly} {
     width: 100%;
-  `}
+  }
 
-  ${_mediaQuery.default.desktopOnly`
+  ${_mediaQuery.mediaQuery.mediumOnly} {
     width: ${mockup.desktop.container.width}px;
-  `}
+  }
 
-  ${_mediaQuery.default.hdOnly`
+  ${_mediaQuery.mediaQuery.largeOnly} {
     width: ${mockup.hd.container.width}px;
-  `}
+  }
 `;
 function getTranslateX(deviceMockup, unit) {
   const slideWidth = getSlideWidth(deviceMockup);
@@ -591,7 +585,6 @@ function PreArrowSvg() {
   }));
 }
 const ArticleBodyContainer = _styledComponents.default.div`
-  width: fit-content;
   margin: 0 auto 27px auto;
 `;
 function SlideshowInArticleBody({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kids-reporter/draft-renderer",
-  "version": "0.4.16",
+  "version": "0.4.18",
   "description": "",
   "main": "lib/index.js",
   "scripts": {
@@ -23,7 +23,6 @@
   "license": "MIT",
   "dependencies": {
     "@readr-media/react-image": "1.6.0",
-    "@twreporter/core": "^1.10.0",
     "babel-loader": "^8.2.5",
     "body-scroll-lock": "3.1.5",
     "html-webpack-plugin": "^5.5.0",

package/lib/theme/index.js

@@ -1,28 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.theme = exports.mediaSize = exports.default = void 0;
-const mediaSize = {
-  xs: 0,
-  sm: 576,
-  md: 768,
-  lg: 960,
-  xl: 1200,
-  xxl: 1400
-};
-exports.mediaSize = mediaSize;
-const theme = {
-  breakpoint: {
-    xs: `@media (min-width: ${mediaSize.xs}px)`,
-    sm: `@media (min-width: ${mediaSize.sm}px)`,
-    md: `@media (min-width: ${mediaSize.md}px)`,
-    lg: `@media (min-width: ${mediaSize.lg}px)`,
-    xl: `@media (min-width: ${mediaSize.xl}px)`,
-    xxl: `@media (min-width: ${mediaSize.xxl}px)`
-  }
-};
-exports.theme = theme;
-var _default = theme;
-exports.default = _default;