@kids-reporter/draft-renderer 0.1.0 → 0.2.0

package/lib/block-render-map.js

@@ -0,0 +1,183 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.blockRenderMapForAnnotation = 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");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const ParagraphBlock = _styledComponents.default.div`
+  width: 100%;
+  max-width: 700px;
+  margin: 0 auto 27px auto;
+  font-size: 18px;
+  font-weight: 500;
+  color: #3a4f66;
+  letter-spacing: 0.9px;
+  line-height: 2;
+`;
+
+function Paragraph({
+  className,
+  children
+}) {
+  return /*#__PURE__*/_react.default.createElement(ParagraphBlock, {
+    className: className
+  }, children);
+}
+
+const HeadingBlock = _styledComponents.default.div`
+  font-weight: 700;
+  line-height: 1.5;
+  color: #232323;
+  width: 100%;
+  max-width: 700px;
+  margin: 45px auto 20px auto;
+
+  h2,
+  h3,
+  h4 {
+    margin: 0;
+  }
+
+  h2 {
+    font-size: 30px;
+  }
+
+  h3 {
+    font-size: 28px;
+  }
+
+  h4 {
+    font-size: 26px;
+  }
+`;
+
+function Heading({
+  className,
+  children
+}) {
+  return /*#__PURE__*/_react.default.createElement(HeadingBlock, {
+    className: className
+  }, children);
+}
+
+const ListBlock = _styledComponents.default.ol`
+  width: 100%;
+  max-width: 700px;
+  margin: 0 auto 27px auto;
+  font-size: 18px;
+  line-height: 2;
+  letter-spacing: 0.9px;
+  color: #3a4f66;
+
+  > li {
+    margin-bottom: 6px;
+  }
+`;
+
+function OrderdedList({
+  children,
+  className
+}) {
+  return /*#__PURE__*/_react.default.createElement(ListBlock, {
+    className: className
+  }, children);
+}
+
+function UnorderdedList({
+  children,
+  className
+}) {
+  return /*#__PURE__*/_react.default.createElement(ListBlock, {
+    as: "ul",
+    className: className
+  }, children);
+}
+
+const _blockRenderMap = _immutable.default.Map({
+  atomic: {
+    element: 'div'
+  },
+  'header-two': {
+    element: 'h2',
+    wrapper: /*#__PURE__*/_react.default.createElement(Heading, null)
+  },
+  'header-three': {
+    element: 'h3',
+    wrapper: /*#__PURE__*/_react.default.createElement(Heading, null)
+  },
+  'header-four': {
+    element: 'h4',
+    wrapper: /*#__PURE__*/_react.default.createElement(Heading, null)
+  },
+  'ordered-list-item': {
+    element: 'li',
+    wrapper: /*#__PURE__*/_react.default.createElement(OrderdedList, null)
+  },
+  'unordered-list-item': {
+    element: 'li',
+    wrapper: /*#__PURE__*/_react.default.createElement(UnorderdedList, null)
+  },
+  unstyled: {
+    element: 'div',
+    wrapper: /*#__PURE__*/_react.default.createElement(Paragraph, null)
+  }
+});
+
+const blockRenderMap = _draftJs.DefaultDraftBlockRenderMap.merge(_blockRenderMap);
+
+exports.blockRenderMap = blockRenderMap;
+const HeadingForAnnotation = (0, _styledComponents.default)(Heading)`
+  h4 {
+    font-size: 20px;
+  }
+`;
+const OrderdedListForAnnotation = (0, _styledComponents.default)(OrderdedList)`
+  li {
+    font-size: 16px;
+  }
+`;
+const UnorderdedListForAnnotation = (0, _styledComponents.default)(UnorderdedList)`
+  li {
+    font-size: 16px;
+  }
+`;
+const ParagraphForAnnotation = (0, _styledComponents.default)(Paragraph)`
+  /* overwrite css */
+  font-size: 16px;
+  font-weight: 400;
+  margin-bottom: 0;
+`;
+
+const _blockRenderMapForAnnotation = _immutable.default.Map({
+  'header-four': {
+    element: 'h4',
+    wrapper: /*#__PURE__*/_react.default.createElement(HeadingForAnnotation, null)
+  },
+  'ordered-list-item': {
+    element: 'li',
+    wrapper: /*#__PURE__*/_react.default.createElement(OrderdedListForAnnotation, null)
+  },
+  'unordered-list-item': {
+    element: 'li',
+    wrapper: /*#__PURE__*/_react.default.createElement(UnorderdedListForAnnotation, null)
+  },
+  unstyled: {
+    element: 'div',
+    wrapper: /*#__PURE__*/_react.default.createElement(ParagraphForAnnotation, null)
+  }
+});
+
+const blockRenderMapForAnnotation = _draftJs.DefaultDraftBlockRenderMap.merge(_blockRenderMapForAnnotation);
+
+exports.blockRenderMapForAnnotation = blockRenderMapForAnnotation;

package/lib/block-renderer-fn.js

@@ -9,102 +9,43 @@ var _blockRenderers = require("./block-renderers");
 
 const {
   EmbeddedCodeBlock,
-  MediaBlock,
-  ImageBlock,
+  ImageInArticleBody,
   InfoBoxBlock,
-  SlideshowBlock,
-  SlideshowBlockV2,
-  DividerBlock,
-  TableBlock,
-  ColorBoxBlock,
-  BGImageBlock,
-  BGVideoBlock,
-  RelatedPostBlock,
-  SideIndexBlock,
-  VideoBlock,
-  AudioBlock
+  SlideshowInArticleBody
 } = _blockRenderers.blockRenderers;
 
 const AtomicBlock = props => {
   const entity = props.contentState.getEntity(props.block.getEntityAt(0));
   const entityType = entity.getType();
+  const entityData = entity.getData();
 
   switch (entityType) {
-    case 'audioLink':
-    case 'imageLink':
-    case 'videoLink':
-      {
-        return MediaBlock(entity);
-      }
-
     case 'image':
       {
-        return ImageBlock(entity);
+        return ImageInArticleBody({
+          data: entityData
+        });
       }
 
     case 'slideshow':
       {
-        return SlideshowBlock(entity);
-      }
-
-    case 'slideshow-v2':
-      {
-        return SlideshowBlockV2(entity);
+        return SlideshowInArticleBody({
+          data: entityData
+        });
       }
 
     case 'EMBEDDEDCODE':
       {
-        return EmbeddedCodeBlock(entity);
+        return EmbeddedCodeBlock({
+          data: entityData
+        });
       }
 
     case 'INFOBOX':
       {
-        return InfoBoxBlock(props);
-      }
-
-    case 'DIVIDER':
-      {
-        return DividerBlock();
-      }
-
-    case 'TABLE':
-      {
-        return TableBlock(props);
-      }
-
-    case 'COLORBOX':
-      {
-        return ColorBoxBlock(props);
-      }
-
-    case 'BACKGROUNDIMAGE':
-      {
-        return BGImageBlock(props);
-      }
-
-    case 'BACKGROUNDVIDEO':
-      {
-        return BGVideoBlock(props);
-      }
-
-    case 'RELATEDPOST':
-      {
-        return RelatedPostBlock(entity);
-      }
-
-    case 'SIDEINDEX':
-      {
-        return SideIndexBlock(props);
-      }
-
-    case 'VIDEO':
-      {
-        return VideoBlock(entity);
-      }
-
-    case 'AUDIO':
-      {
-        return AudioBlock(entity);
+        return InfoBoxBlock({
+          data: entityData
+        });
       }
   }
 

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

@@ -40,11 +40,14 @@ const Caption = _styledComponents.default.div`
 `;
 exports.Caption = Caption;
 
-const EmbeddedCodeBlock = entity => {
+const EmbeddedCodeBlock = ({
+  className,
+  data
+}) => {
   const {
     caption,
     embeddedCode
-  } = entity.getData();
+  } = data;
   const embedded = (0, _react.useRef)(null); // `embeddedCode` is a string, which may includes
   // multiple script tags and other html tags.
   // Here we separate script tags and other html tags
@@ -98,24 +101,17 @@ const EmbeddedCodeBlock = entity => {
       node.appendChild(fragment);
     }
   }, [scripts]);
-  const shouldShowCaption = caption && caption !== 'reporter-scroll-video';
-  return (
-    /*#__PURE__*/
-    // only for READr
-    // if `caption === 'reporter-scroll-video'`，embeddedCode need to cover header
-    _react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("input", {
-      hidden: true,
-      disabled: true
-    }), /*#__PURE__*/_react.default.createElement(Block, {
-      style: {
-        zIndex: caption === 'reporter-scroll-video' ? 999 : 'auto'
-      },
-      ref: embedded,
-      dangerouslySetInnerHTML: {
-        __html: nonScriptsHtml
-      }
-    }), shouldShowCaption ? /*#__PURE__*/_react.default.createElement(Caption, null, caption) : null)
-  );
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: className
+  }, /*#__PURE__*/_react.default.createElement("input", {
+    hidden: true,
+    disabled: true
+  }), /*#__PURE__*/_react.default.createElement(Block, {
+    ref: embedded,
+    dangerouslySetInnerHTML: {
+      __html: nonScriptsHtml
+    }
+  }), caption && /*#__PURE__*/_react.default.createElement(Caption, null, caption));
 };
 
 exports.EmbeddedCodeBlock = EmbeddedCodeBlock;

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

@@ -4,69 +4,113 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ImageBlock = ImageBlock;
+exports.ImageInArticleBody = ImageInArticleBody;
 
 var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _reactImage = _interopRequireDefault(require("@readr-media/react-image"));
+var _index = require("../theme/index");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-// import defaultImage from '../assets/default-og-img.png'
 const Figure = _styledComponents.default.figure`
-  width: calc(100% + 40px);
-  transform: translateX(-20px);
-  ${({
-  theme
-}) => theme.margin.default};
+  width: 100%;
 `;
 const FigureCaption = _styledComponents.default.figcaption`
-  width: 100%;
-  ${({
-  theme
-}) => theme.fontSize.xs}
-  line-height: 20px;
-  text-align: justify;
-  color: rgba(0, 9, 40, 0.5);
-  padding: 0 20px;
-  margin: 8px 0 0;
-
-  ${({
-  theme
-}) => theme.breakpoint.xl} {
-    line-height: 24px;
-    ${({
-  theme
-}) => theme.fontSize.sm};
-  }
+  width: fit-content;
+  max-width: 100%;
+  font-size: 14px;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 0.5em;
+  color: rgb(58, 79, 102);
+  letter-spacing: 0.7px;
+  line-height: 28px;
 `;
-const Anchor = _styledComponents.default.a`
-  text-decoration: none;
+const Img = _styledComponents.default.img`
+  width: 100%;
 `;
 
-function ImageBlock(entity) {
+function ImageBlock({
+  className = '',
+  data
+}) {
   const {
     desc,
-    name,
-    resized,
-    url
-  } = entity.getData();
-
-  let imgBlock = /*#__PURE__*/_react.default.createElement(Figure, null, /*#__PURE__*/_react.default.createElement(_reactImage.default, {
-    images: resized || {
-      original: url
-    },
-    defaultImage: url,
-    alt: name,
-    rwd: {
-      mobile: '100vw',
-      tablet: '608px',
-      desktop: '640px',
-      default: '100%'
-    },
-    priority: true
+    imageFile,
+    resized
+  } = data || {};
+  const imgSrcSetArr = [];
+
+  if (resized !== null && resized !== void 0 && resized.medium) {
+    imgSrcSetArr.push(`${resized.medium} 500w`);
+  }
+
+  if (resized !== null && resized !== void 0 && resized.large) {
+    imgSrcSetArr.push(`${resized.large} 1000w`);
+  }
+
+  const imgBlock = /*#__PURE__*/_react.default.createElement(Figure, {
+    className: className
+  }, /*#__PURE__*/_react.default.createElement(Img, {
+    alt: desc,
+    src: imageFile === null || imageFile === void 0 ? void 0 : imageFile.url,
+    srcSet: imgSrcSetArr.join(','),
+    sizes: "(min-width: 1200px) 1000px, 100vw"
   }), /*#__PURE__*/_react.default.createElement(FigureCaption, null, desc));
 
   return imgBlock;
+}
+
+const ArticleBodyContainer = _styledComponents.default.div`
+  /* reset browser default styles */
+  figure {
+    margin: 0;
+  }
+
+  max-width: 100%;
+  margin: 0 auto 27px auto;
+
+  ${_index.theme.breakpoint.sm} {
+    max-width: 72vw;
+  }
+
+  ${_index.theme.breakpoint.xl} {
+    max-width: 1000px;
+  }
+
+  ${props => {
+  switch (props.$alignment) {
+    case 'right':
+      return `
+          ${_index.theme.breakpoint.xl} {
+            width: 361px;
+            float: right;
+            margin: 5px 0px 5px 27px;
+          }
+        `;
+
+    case 'left':
+      return `
+          ${_index.theme.breakpoint.xl} {
+            width: 361px;
+            float: left;
+            margin: 5px 27px 5px 0px;
+          }
+        `;
+  }
+}}
+`;
+
+function ImageInArticleBody({
+  className = '',
+  data
+}) {
+  return /*#__PURE__*/_react.default.createElement(ArticleBodyContainer, {
+    $alignment: data.alignment,
+    className: className
+  }, /*#__PURE__*/_react.default.createElement(ImageBlock, {
+    data: data
+  }));
 }

package/lib/block-renderers/index.js

@@ -5,49 +5,20 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.blockRenderers = void 0;
 
-var _backgroundImageBlock = require("./background-image-block");
-
-var _backgroundVideoBlock = require("./background-video-block");
-
-var _colorBoxBlock = require("./color-box-block");
-
-var _dividerBlock = require("./divider-block");
-
 var _embeddedCodeBlock = require("./embedded-code-block");
 
 var _imageBlock = require("./image-block");
 
 var _infoBoxBlock = require("./info-box-block");
 
-var _mediaBlock = require("./media-block");
-
-var _relatedPostBlock = require("./related-post-block");
-
-var _sideIndexBlock = require("./side-index-block");
-
 var _slideshowBlock = require("./slideshow-block");
 
-var _tableBlock = require("./table-block");
-
-var _videoBlock = require("./video-block");
-
-var _audioBlock = require("./audio-block");
-
 const blockRenderers = {
-  BGImageBlock: _backgroundImageBlock.BGImageBlock,
-  BGVideoBlock: _backgroundVideoBlock.BGVideoBlock,
-  ColorBoxBlock: _colorBoxBlock.ColorBoxBlock,
-  DividerBlock: _dividerBlock.DividerBlock,
   EmbeddedCodeBlock: _embeddedCodeBlock.EmbeddedCodeBlock,
   ImageBlock: _imageBlock.ImageBlock,
+  ImageInArticleBody: _imageBlock.ImageInArticleBody,
   InfoBoxBlock: _infoBoxBlock.InfoBoxBlock,
-  MediaBlock: _mediaBlock.MediaBlock,
-  RelatedPostBlock: _relatedPostBlock.RelatedPostBlock,
-  SideIndexBlock: _sideIndexBlock.SideIndexBlock,
   SlideshowBlock: _slideshowBlock.SlideshowBlock,
-  SlideshowBlockV2: _slideshowBlock.SlideshowBlockV2,
-  TableBlock: _tableBlock.TableBlock,
-  VideoBlock: _videoBlock.VideoBlock,
-  AudioBlock: _audioBlock.AudioBlock
+  SlideshowInArticleBody: _slideshowBlock.SlideshowInArticleBody
 };
 exports.blockRenderers = blockRenderers;

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

@@ -5,120 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.InfoBoxBlock = InfoBoxBlock;
 
-var _react = _interopRequireDefault(require("react"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _sharedStyle = require("../shared-style");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const infoboxDefaultSpacing = 8;
-const InfoBoxRenderWrapper = _styledComponents.default.div`
-  background: #f6f6fb;
-  position: relative;
-  padding: 24px 0px;
-  width: calc(100% + 40px);
-  transform: translateX(-20px);
-  ${({
-  theme
-}) => theme.margin.default};
-
-  ${({
-  theme
-}) => theme.breakpoint.md} {
-    max-width: 560px;
-    transform: none;
-  }
-`;
-const InfoTitle = _styledComponents.default.div`
-  width: 100%;
-  font-style: normal;
-  font-weight: 700;
-  ${({
-  theme
-}) => theme.fontSize.md};
-  line-height: 1.5;
-  letter-spacing: 0.03em;
-  color: #000928;
-  border-left: 8px solid #04295e;
-  padding: 0 32px 0 24px;
-  margin-bottom: ${infoboxDefaultSpacing}px;
-`;
-const InfoContent = _styledComponents.default.div`
-  padding: 0px 32px;
-  font-style: normal;
-  font-weight: 400;
-  ${({
-  theme
-}) => theme.fontSize.sm};
-  line-height: 1.6;
-  color: rgba(0, 9, 40, 0.87);
-
-  > div > * + * {
-    margin: ${infoboxDefaultSpacing}px 0 0;
-    min-height: 0.01px; //to make margins between paragraphs effective
-  }
-
-  h2 {
-    ${_sharedStyle.defaultH2Style}
-  }
-
-  ul {
-    ${_sharedStyle.defaultUlStyle}
-    margin-top: ${infoboxDefaultSpacing}px;
-
-    > li {
-      ${_sharedStyle.defaultUnorderedListStyle}
-
-      & + li {
-        margin: ${infoboxDefaultSpacing / 2}px 0 0;
-      }
-    }
-  }
-
-  ol {
-    ${_sharedStyle.defaultOlStyle}
-    margin-top: ${infoboxDefaultSpacing}px;
-
-    > li {
-      ${_sharedStyle.defaultOrderedListStyle}
-
-      & + li {
-        margin: ${infoboxDefaultSpacing / 2}px 0 0;
-      }
-    }
-  }
-
-  a {
-    ${_sharedStyle.defaultLinkStyle}
-  }
-
-  blockquote {
-    ${_sharedStyle.defaultBlockQuoteStyle}
-  }
-`;
-
+/* eslint-disable */
 function InfoBoxBlock(props) {
-  const {
-    block,
-    contentState
-  } = props;
-  const entityKey = block.getEntityAt(0);
-  const entity = contentState.getEntity(entityKey);
-  const {
-    title,
-    body
-  } = entity.getData();
-  return /*#__PURE__*/_react.default.createElement(InfoBoxRenderWrapper, {
-    className: "infobox-wrapper"
-  }, /*#__PURE__*/_react.default.createElement(InfoTitle, {
-    className: "infobox-title"
-  }, title), /*#__PURE__*/_react.default.createElement(InfoContent, {
-    className: "infobox-content"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    dangerouslySetInnerHTML: {
-      __html: body
-    }
-  })));
+  return null;
 }