@kids-reporter/draft-renderer 1.0.9 → 1.0.10

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

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.blockRenderMap = void 0;
+var _immutable = _interopRequireDefault(require("immutable"));
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _draftJs = require("draft-js");
+var _articleContent = require("./article-content");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const ParagraphForImageLink = (0, _styledComponents.default)(_articleContent.Paragraph)`
+  /* overwrite css */
+  font-size: ${({
+  theme
+}) => (theme === null || theme === void 0 ? void 0 : theme.fontSizeLevel) === 'large' ? '18px' : '14px'};
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 0.5em;
+  color: rgb(58, 79, 102);
+  letter-spacing: 0.7px;
+  line-height: 28px;
+  text-align: center;
+`;
+const _blockRenderMapForAnnotation = _immutable.default.Map({
+  atomic: {
+    element: 'div',
+    wrapper: /*#__PURE__*/_react.default.createElement(_articleContent.Atomic, null)
+  },
+  unstyled: {
+    element: 'div',
+    wrapper: /*#__PURE__*/_react.default.createElement(ParagraphForImageLink, null)
+  }
+});
+const blockRenderMap = exports.blockRenderMap = _draftJs.DefaultDraftBlockRenderMap.merge(_blockRenderMapForAnnotation);

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

@@ -8,6 +8,7 @@ var _annotation = require("./annotation");
 var _articleBrief = require("./article-brief");
 var _articleContent = require("./article-content");
 var _infoBox = require("./info-box");
+var _imageLink = require("./image-link");
 var _projectContent = require("./project-content");
 var _default = exports.default = {
   annotation: _annotation.blockRenderMap,
@@ -19,6 +20,7 @@ var _default = exports.default = {
     default: _infoBox.blockRenderMap,
     headerBorder: _infoBox.blockRenderMapForInfoBoxWithHeaderBorder
   },
+  imageLink: _imageLink.blockRenderMap,
   // project page content
   projectContent: _projectContent.blockRenderMap
 };

package/lib/block-renderer-fn.js

@@ -10,6 +10,7 @@ const {
   Divider,
   EmbeddedCodeInArticleBody,
   ImageInArticleBody,
+  ImageLinkInArticleBody,
   InfoBoxInArticleBody,
   SlideshowInArticleBody,
   NewsReading
@@ -20,45 +21,35 @@ const AtomicBlock = props => {
   const entityData = entity.getData();
   switch (entityType) {
     case 'BLOCKQUOTE':
-      {
-        return BlockquoteInArticleBody({
-          data: entityData
-        });
-      }
+      return BlockquoteInArticleBody({
+        data: entityData
+      });
     case 'DIVIDER':
-      {
-        return Divider();
-      }
+      return Divider();
     case 'IMAGE':
-      {
-        return ImageInArticleBody({
-          data: entityData
-        });
-      }
+      return ImageInArticleBody({
+        data: entityData
+      });
+    case 'IMAGE_LINK':
+      return ImageLinkInArticleBody({
+        data: entityData
+      });
     case 'SLIDESHOW':
-      {
-        return SlideshowInArticleBody({
-          data: entityData
-        });
-      }
+      return SlideshowInArticleBody({
+        data: entityData
+      });
     case 'EMBEDDEDCODE':
-      {
-        return EmbeddedCodeInArticleBody({
-          data: entityData
-        });
-      }
+      return EmbeddedCodeInArticleBody({
+        data: entityData
+      });
     case 'INFOBOX':
-      {
-        return InfoBoxInArticleBody({
-          data: entityData
-        });
-      }
+      return InfoBoxInArticleBody({
+        data: entityData
+      });
     case 'NEWS_READING':
-      {
-        return NewsReading({
-          data: entityData
-        });
-      }
+      return NewsReading({
+        data: entityData
+      });
   }
   return null;
 };

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.ImageBlock = ImageBlock;
 exports.ImageInArticleBody = ImageInArticleBody;
 exports.ImageInInfoBox = ImageInInfoBox;
+exports.InfoBoxContainer = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _mediaQuery = require("../utils/media-query");
@@ -116,7 +117,7 @@ function ImageInArticleBody({
     data: data
   }));
 }
-const InfoBoxContainer = _styledComponents.default.div`
+const InfoBoxContainer = exports.InfoBoxContainer = _styledComponents.default.div`
   /* reset browser default styles */
   figure {
     margin: 0 0 27px 0;

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

@@ -0,0 +1,116 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ImageLinkInInfoBox = exports.ImageLinkInArticleBody = exports.ImageLinkBlock = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _draftJs = require("draft-js");
+var _imageBlock = require("./image-block");
+var _index = _interopRequireDefault(require("../block-render-maps/index"));
+var _index2 = require("../entity-decorators/index");
+var _mediaQuery = require("../utils/media-query");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const fallbackImg = '/assets/images/image_placeholder.png';
+const Figure = _styledComponents.default.figure`
+  width: 100%;
+`;
+const Img = _styledComponents.default.img`
+  width: 100%;
+  object-fit: contain;
+`;
+const ImageLinkBlock = ({
+  className = '',
+  data
+}) => {
+  const {
+    url,
+    rawContentState
+  } = data;
+  const contentState = (0, _draftJs.convertFromRaw)(rawContentState);
+  const editorState = _draftJs.EditorState.createWithContent(contentState, _index2.decorator);
+  const blockRenderMap = _index.default.imageLink;
+  const imgBlock = /*#__PURE__*/_react.default.createElement(Figure, {
+    className: className
+  }, /*#__PURE__*/_react.default.createElement(Img, {
+    src: url ?? fallbackImg
+  }), /*#__PURE__*/_react.default.createElement(_draftJs.Editor, {
+    blockRenderMap: blockRenderMap,
+    editorState: editorState,
+    readOnly: true
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    ,
+    onChange: () => {}
+  }));
+  return imgBlock;
+};
+exports.ImageLinkBlock = ImageLinkBlock;
+const ArticleBodyContainer = _styledComponents.default.div`
+  /* reset browser default styles */
+  figure {
+    margin: 0;
+  }
+
+  max-width: 72vw;
+  margin: 0 auto 27px auto;
+
+  ${_mediaQuery.mediaQuery.smallOnly} {
+    max-width: 100%;
+  }
+
+  ${_mediaQuery.mediaQuery.largeOnly} {
+    max-width: 1000px;
+  }
+
+  ${props => {
+  switch (props.$alignment) {
+    case 'paragraph-width':
+      return `
+          ${_mediaQuery.mediaQuery.mediumAbove} {
+            max-width: 700px;
+          }
+        `;
+    case 'right':
+      return `
+          ${_mediaQuery.mediaQuery.mediumAbove} {
+            width: 361px;
+            float: right;
+            margin: 5px 0px 5px 27px;
+          }
+        `;
+    case 'left':
+      return `
+          ${_mediaQuery.mediaQuery.mediumAbove} {
+            width: 361px;
+            float: left;
+            margin: 5px 27px 5px 0px;
+          }
+        `;
+  }
+}}
+`;
+const ImageLinkInArticleBody = ({
+  className = '',
+  data
+}) => {
+  return /*#__PURE__*/_react.default.createElement(ArticleBodyContainer, {
+    $alignment: data.alignment,
+    className: className
+  }, /*#__PURE__*/_react.default.createElement(ImageLinkBlock, {
+    data: data
+  }));
+};
+exports.ImageLinkInArticleBody = ImageLinkInArticleBody;
+const ImageLinkInInfoBox = ({
+  className = '',
+  data
+}) => {
+  return /*#__PURE__*/_react.default.createElement(_imageBlock.InfoBoxContainer, {
+    $alignment: data.alignment,
+    className: className
+  }, /*#__PURE__*/_react.default.createElement(ImageLinkBlock, {
+    data: data
+  }));
+};
+exports.ImageLinkInInfoBox = ImageLinkInInfoBox;

package/lib/block-renderers/index.js

@@ -8,6 +8,7 @@ var _blockquote = require("./blockquote");
 var _divider = require("./divider");
 var _embeddedCodeBlock = require("./embedded-code-block");
 var _imageBlock = require("./image-block");
+var _imageLink = require("./image-link");
 var _infoBoxBlock = require("./info-box-block");
 var _slideshowBlock = require("./slideshow-block");
 var _newsReading = require("./news-reading");
@@ -18,6 +19,7 @@ const blockRenderers = exports.blockRenderers = {
   EmbeddedCodeInArticleBody: _embeddedCodeBlock.EmbeddedCodeInArticleBody,
   ImageBlock: _imageBlock.ImageBlock,
   ImageInArticleBody: _imageBlock.ImageInArticleBody,
+  ImageLinkInArticleBody: _imageLink.ImageLinkInArticleBody,
   InfoBoxInArticleBody: _infoBoxBlock.InfoBoxInArticleBody,
   NewsReading: _newsReading.NewsReading,
   SlideshowBlock: _slideshowBlock.SlideshowBlock,

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

@@ -9,6 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 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("../utils/index");
 var _index3 = require("../entity-decorators/index");
 var _mediaQuery = require("../utils/media-query");
@@ -199,11 +200,13 @@ function AtomicBlock(props) {
   const entityData = entity.getData();
   switch (entityType) {
     case 'IMAGE':
-      {
-        return (0, _imageBlock.ImageInInfoBox)({
-          data: entityData
-        });
-      }
+      return (0, _imageBlock.ImageInInfoBox)({
+        data: entityData
+      });
+    case 'IMAGE_LINK':
+      return (0, _imageLink.ImageLinkInInfoBox)({
+        data: entityData
+      });
   }
   return null;
 }

package/package.json

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