@kids-reporter/draft-renderer 1.0.21 → 1.0.22

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

@@ -28,6 +28,13 @@ const Paragraph = exports.Paragraph = _styledComponents.default.div`
   > div[data-block='true'] {
     margin-bottom: 38px;
   }
+
+  &:has(+ div:not([data-paragraph-block='true'])) {
+    margin-bottom: 40px;
+    ${_mediaQuery.mediaQuery.desktopAbove} {
+      margin-bottom: 60px;
+    }
+  }
 `;
 const Heading = exports.Heading = _styledComponents.default.div`
   width: 100%;
@@ -53,6 +60,14 @@ const Heading = exports.Heading = _styledComponents.default.div`
     padding-left: 24px;
     padding-right: 24px;
   }
+
+  /* when the next sibling div contains a blockquote */
+  & + div:has(blockquote) {
+    margin-top: 0px;
+    ${_mediaQuery.mediaQuery.desktopAbove} {
+      margin-top: 0px;
+    }
+  }
 `;
 const List = exports.List = _styledComponents.default.ol`
   width: 100%;
@@ -77,6 +92,13 @@ const List = exports.List = _styledComponents.default.ol`
   > li {
     margin-bottom: 6px;
   }
+
+  &:has(+ div:not([data-paragraph-block='true'])) {
+    margin-bottom: 40px;
+    ${_mediaQuery.mediaQuery.desktopAbove} {
+      margin-bottom: 60px;
+    }
+  }
 `;
 const Atomic = exports.Atomic = _styledComponents.default.div`
   /* reset browser default styles */
@@ -84,6 +106,13 @@ const Atomic = exports.Atomic = _styledComponents.default.div`
     margin: 0;
   }
 
+  &:has(blockquote) {
+    margin-top: -2px;
+    ${_mediaQuery.mediaQuery.desktopAbove} {
+      margin-top: -22px;
+    }
+  }
+
   ${_mediaQuery.mediaQuery.desktopAbove} {
     div:has(+ div [data-image-block-caption-alignment='default'])
       [data-image-block-caption-alignment='default'],
@@ -122,17 +151,22 @@ const _blockRenderMap = _immutable.default.Map({
   },
   'ordered-list-item': {
     element: 'li',
-    wrapper: /*#__PURE__*/(0, _jsxRuntime.jsx)(List, {})
+    wrapper: /*#__PURE__*/(0, _jsxRuntime.jsx)(List, {
+      "data-paragraph-block": "true"
+    })
   },
   'unordered-list-item': {
     element: 'li',
     wrapper: /*#__PURE__*/(0, _jsxRuntime.jsx)(List, {
-      as: "ul"
+      as: "ul",
+      "data-paragraph-block": "true"
     })
   },
   unstyled: {
     element: 'div',
-    wrapper: /*#__PURE__*/(0, _jsxRuntime.jsx)(Paragraph, {})
+    wrapper: /*#__PURE__*/(0, _jsxRuntime.jsx)(Paragraph, {
+      "data-paragraph-block": "true"
+    })
   }
 });
 const blockRenderMap = exports.blockRenderMap = _draftJs.DefaultDraftBlockRenderMap.merge(_blockRenderMap);

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

@@ -8,6 +8,7 @@ var _draftJs = require("draft-js");
 var _immutable = _interopRequireDefault(require("immutable"));
 var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _mediaQuery = require("../utils/media-query");
 var _articleContent = require("./article-content");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -22,7 +23,16 @@ const ParagraphForImageLink = (0, _styledComponents.default)(_articleContent.Par
   color: rgb(58, 79, 102);
   letter-spacing: 0.7px;
   line-height: 28px;
-  text-align: center;
+  text-align: left;
+
+  ${_mediaQuery.mediaQuery.smallOnly} {
+    padding-left: 0px;
+    padding-right: 0px;
+  }
+
+  > div[data-block='true'] {
+    margin-bottom: 0px;
+  }
 `;
 const _blockRenderMapForAnnotation = _immutable.default.Map({
   atomic: {

package/lib/block-renderers/blockquote.js

@@ -19,6 +19,7 @@ const BorderLeftLine = _styledComponents.default.div`
   border-radius: 10px;
   background-color: #c6c6c6;
   align-self: stretch;
+  flex-shrink: 0;
 `;
 function BorderLeftBlockquote({
   text

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

@@ -230,10 +230,10 @@ const ArticleBodyContainer = _styledComponents.default.div`
     margin: 0;
   }
 
-  margin: 40px auto;
+  margin: 0 auto 40px auto;
 
   ${_mediaQuery.mediaQuery.mediumAbove} {
-    margin: 60px auto;
+    margin: 0 auto 60px auto;
   }
 
   ${_mediaQuery.mediaQuery.smallOnly} {
@@ -260,8 +260,6 @@ const ArticleBodyContainer = _styledComponents.default.div`
       return `
           ${_mediaQuery.mediaQuery.smallOnly} {
             max-width: 512px;
-            padding-left: 24px;
-            padding-right: 24px;
           }
 
           ${_mediaQuery.mediaQuery.mediumAbove} {

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

@@ -39,7 +39,7 @@ const Figure = _styledComponents.default.figure`
 }}
 `;
 const FigureCaption = _styledComponents.default.figcaption`
-  width: fit-content;
+  width: 100%;
   max-width: 100%;
   font-size: ${({
   theme
@@ -49,7 +49,7 @@ const FigureCaption = _styledComponents.default.figcaption`
   color: #575757;
   letter-spacing: 0.7px;
   line-height: 28px;
-  text-align: center;
+  text-align: left;
   padding: 16px 0 20px 0;
   border-bottom: 2px solid #c6c6c6;
 
@@ -70,7 +70,7 @@ const FigureCaption = _styledComponents.default.figcaption`
           ${_mediaQuery.mediaQuery.mediumAbove} {
             max-width: 340px;
             margin-left: auto;
-            margin-right: 0px;
+            margin-right: 32px;
           }
 
           ${_mediaQuery.mediaQuery.desktopAbove} {
@@ -215,10 +215,10 @@ const ArticleBodyContainer = _styledComponents.default.div`
     margin: 0;
   }
 
-  margin: 40px auto;
+  margin: 0 auto 40px auto;
 
   ${_mediaQuery.mediaQuery.mediumAbove} {
-    margin: 60px auto;
+    margin: 0 auto 60px auto;
   }
 
   ${_mediaQuery.mediaQuery.smallOnly} {
@@ -244,8 +244,6 @@ const ArticleBodyContainer = _styledComponents.default.div`
       return `
           ${_mediaQuery.mediaQuery.smallOnly} {
             max-width: 512px;
-            padding-left: 24px;
-            padding-right: 24px;
           }
 
           ${_mediaQuery.mediaQuery.mediumAbove} {
@@ -292,6 +290,7 @@ const ImageLinkInArticleBody = ({
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(ArticleBodyContainer, {
     $alignment: data.alignment,
     className: className,
+    "data-image-link-block": "true",
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ImageLinkBlock, {
       data: data
     })

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

@@ -550,11 +550,11 @@ function SlideshowBlock({
 }
 const ArticleBodyContainer = _styledComponents.default.div`
   ${_mediaQuery.mediaQuery.smallOnly} {
-    margin: 40px auto;
+    margin: 0 auto 40px auto;
   }
 
   ${_mediaQuery.mediaQuery.mediumAbove} {
-    margin: 60px auto;
+    margin: 0 auto 60px auto;
   }
 `;
 function SlideshowInArticleBody({

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

@@ -17,10 +17,24 @@ const LinkWrapper = _styledComponents.default.a`
   cursor: pointer;
   text-decoration-color: #c6c6c6;
   text-underline-offset: 3px;
+  text-decoration-thickness: 1px;
 
   &:hover {
     text-decoration-color: #27b3f5;
   }
+
+  & > span {
+    color: #27b3f5 !important;
+    text-decoration: underline !important;
+    text-decoration-color: #c6c6c6 !important;
+    text-underline-offset: 3px !important;
+    text-decoration-thickness: 1px !important;
+    transition: text-decoration-color 0.1s ease-in !important;
+
+    &:hover {
+      text-decoration-color: #27b3f5 !important;
+    }
+  }
 `;
 const LinkInner = props => {
   const {

package/package.json

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