@kids-reporter/draft-renderer 0.1.0

package/lib/block-renderers/background-video-block.js

@@ -0,0 +1,272 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BGVideoBlock = BGVideoBlock;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+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; }
+
+const BackgroundContainer = _styledComponents.default.section`
+  clear: both;
+  position: relative;
+  margin: 32px calc(50% - 50vw) 0 !important;
+  width: 100vw;
+  min-height: 100vh;
+`;
+const BackgroundVideo = _styledComponents.default.div`
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  bottom: unset;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+`;
+const BackgroundContentRow = _styledComponents.default.div``;
+const BackgroundContent = _styledComponents.default.div`
+  position: relative;
+  z-index: 1;
+  &.static {
+    height: 100vh;
+    ${BackgroundContentRow} {
+      position: absolute;
+      bottom: 20px;
+      left: 20px;
+      right: 20px;
+      text-shadow: 0px 0px 1px #000000;
+      ${({
+  theme
+}) => theme.breakpoint.sm} {
+        bottom: 40px;
+      }
+    }
+  }
+  &.parallax {
+    ${BackgroundContentRow} {
+      > div {
+        background: rgba(169, 118, 118, 0.1);
+        border-radius: 8px;
+        padding: 20px;
+        ${({
+  theme
+}) => theme.breakpoint.xl} {
+          width: 480px;
+        }
+
+        > * + * {
+          margin: 27px 0 0;
+        }
+        h2 {
+          font-size: 1.44em;
+          ${({
+  theme
+}) => theme.breakpoint.md} {
+            font-size: 1.77em;
+          }
+        }
+        h3 {
+          font-size: 1.33em;
+          ${({
+  theme
+}) => theme.breakpoint.md} {
+            font-size: 1.55em;
+          }
+        }
+        h4 {
+          font-size: 1.11em;
+          ${({
+  theme
+}) => theme.breakpoint.md} {
+            font-size: 1.33em;
+          }
+        }
+        ul {
+          list-style-type: disc;
+          list-style-position: inside;
+        }
+        ol {
+          list-style-type: decimal;
+          list-style-position: inside;
+        }
+      }
+      &.left {
+        padding: 0 20px 97px;
+        ${({
+  theme
+}) => theme.breakpoint.md} {
+          padding: 0 40px 335px;
+        }
+        ${({
+  theme
+}) => theme.breakpoint.xl} {
+          padding: 0 80px 169px;
+          padding-right: calc(100% - 480px - 80px);
+        }
+        ${({
+  theme
+}) => theme.breakpoint.xxl} {
+          padding-bottom: 296px;
+        }
+      }
+      &.right {
+        padding: 0 20px 97px;
+        ${({
+  theme
+}) => theme.breakpoint.md} {
+          padding: 0 40px 335px;
+        }
+        ${({
+  theme
+}) => theme.breakpoint.xl} {
+          padding: 0 80px 169px;
+          padding-left: calc(100% - 480px - 80px);
+        }
+        ${({
+  theme
+}) => theme.breakpoint.xxl} {
+          padding-bottom: 296px;
+        }
+      }
+      &.bottom {
+        padding: 0 20px 20px;
+        ${({
+  theme
+}) => theme.breakpoint.md} {
+          padding: 0 40px 40px;
+        }
+        ${({
+  theme
+}) => theme.breakpoint.xl} {
+          padding: 0 calc(50% - 240px) 40px;
+        }
+        ${({
+  theme
+}) => theme.breakpoint.xxl} {
+          padding-bottom: 80px;
+        }
+      }
+    }
+  }
+`;
+const BackgroundEmptyRow = _styledComponents.default.div`
+  height: 100vh;
+`;
+
+function BGVideoBlock(props) {
+  const {
+    block,
+    contentState
+  } = props;
+  const entityKey = block.getEntityAt(0);
+  const entity = contentState.getEntity(entityKey);
+  const {
+    textBlockAlign,
+    video,
+    body
+  } = entity.getData(); // 滾動視差
+
+  const isParallax = textBlockAlign !== 'fixed';
+  const [bgVideoCss, setBgVideoCss] = (0, _react.useState)({});
+  const bgRef = (0, _react.useRef)(null);
+  const videoRef = (0, _react.useRef)(null);
+  const topRef = (0, _react.useRef)(null);
+  const bottomRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    if (bgRef.current && topRef.current && bottomRef.current) {
+      const intersectionObserver = new IntersectionObserver(entries => {
+        entries.forEach(({
+          boundingClientRect
+        }) => {
+          if (!boundingClientRect.width || !videoRef.current || !bgRef.current) {
+            return;
+          }
+
+          const bounding = bgRef.current.getBoundingClientRect();
+
+          if (isParallax) {
+            if (bounding.y > 0) {
+              // before block top touch viewport top, set the video to the top of block
+              setBgVideoCss({
+                position: 'absolute',
+                top: 0,
+                bottom: 'unset'
+              });
+              videoRef.current.pause();
+            } else if (bounding.y + bounding.height >= window.innerHeight) {
+              // after block top touch viewport top, fix the video to viewport
+              setBgVideoCss({
+                position: 'fixed',
+                top: 0,
+                bottom: 'unset'
+              });
+              videoRef.current.play();
+            } else {
+              // after block bottom leave viewport bottom, set the video to the bottom of block
+              setBgVideoCss({
+                position: 'absolute',
+                top: 'unset',
+                bottom: 0
+              });
+              videoRef.current.pause();
+            }
+          }
+
+          if (!isParallax) {
+            if (bounding.y > window.innerHeight * 0.3 || bounding.y < -window.innerHeight * 0.3) {
+              videoRef.current.pause();
+            } else {
+              videoRef.current.play();
+            }
+          }
+        });
+      }, {
+        threshold: [0, 0.4, 0.7, 1.0]
+      });
+
+      if (!isParallax) {
+        intersectionObserver.observe(bgRef.current);
+      } else {
+        intersectionObserver.observe(topRef.current);
+        intersectionObserver.observe(bottomRef.current);
+      }
+
+      return () => {
+        intersectionObserver.disconnect();
+      };
+    }
+  }, [isParallax]);
+  return /*#__PURE__*/_react.default.createElement(BackgroundContainer, {
+    ref: bgRef,
+    className: "bg"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    ref: topRef
+  }), /*#__PURE__*/_react.default.createElement(BackgroundVideo, {
+    style: bgVideoCss
+  }, /*#__PURE__*/_react.default.createElement("video", {
+    ref: videoRef,
+    src: video === null || video === void 0 ? void 0 : video.url,
+    muted: true,
+    preload: "auto",
+    loop: true,
+    playsInline: true
+  })), /*#__PURE__*/_react.default.createElement(BackgroundContent, {
+    className: isParallax ? 'parallax' : 'static'
+  }, isParallax && /*#__PURE__*/_react.default.createElement(BackgroundEmptyRow, null), /*#__PURE__*/_react.default.createElement(BackgroundContentRow, {
+    className: textBlockAlign
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    dangerouslySetInnerHTML: {
+      __html: body
+    }
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    ref: bottomRef
+  }));
+}

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

@@ -0,0 +1,94 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ColorBoxBlock = ColorBoxBlock;
+
+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 colorBoxDefaultSpacing = 32;
+const ColorBoxRenderWrapper = _styledComponents.default.div`
+  background-color: ${props => props.color ? props.color : ' #FFFFFF'};
+  padding: 12px 24px;
+  position: relative;
+  color: #000928;
+  ${({
+  theme
+}) => theme.margin.default};
+
+  > div > * + * {
+    margin: ${colorBoxDefaultSpacing}px 0 0;
+    min-height: 0.01px; //to make margins between paragraphs effective
+  }
+
+  h2 {
+    ${_sharedStyle.defaultH2Style}
+  }
+
+  ul {
+    ${_sharedStyle.defaultUlStyle}
+    margin-top: ${colorBoxDefaultSpacing}px;
+
+    > li {
+      ${_sharedStyle.defaultUnorderedListStyle}
+
+      & + li {
+        margin: ${colorBoxDefaultSpacing / 2}px 0 0;
+      }
+    }
+  }
+
+  ol {
+    ${_sharedStyle.defaultOlStyle}
+    margin-top: ${colorBoxDefaultSpacing}px;
+
+    > li {
+      ${_sharedStyle.defaultOrderedListStyle}
+
+      & + li {
+        margin: ${colorBoxDefaultSpacing / 2}px 0 0;
+      }
+    }
+  }
+
+  a {
+    ${_sharedStyle.defaultLinkStyle}
+  }
+
+  blockquote {
+    ${_sharedStyle.defaultBlockQuoteStyle}
+  }
+
+  ${({
+  theme
+}) => theme.breakpoint.md} {
+    padding: 16px 32px;
+  }
+`;
+
+function ColorBoxBlock(props) {
+  const {
+    block,
+    contentState
+  } = props;
+  const entityKey = block.getEntityAt(0);
+  const entity = contentState.getEntity(entityKey);
+  const {
+    color,
+    body
+  } = entity.getData();
+  return /*#__PURE__*/_react.default.createElement(ColorBoxRenderWrapper, {
+    color: color
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    dangerouslySetInnerHTML: {
+      __html: body
+    }
+  }));
+}

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

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DividerBlock = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const Divider = _styledComponents.default.hr`
+  box-sizing: border-box;
+  border-width: 1px;
+  border-style: inset;
+  ${({
+  theme
+}) => theme.margin.default};
+`;
+
+const DividerBlock = () => {
+  return /*#__PURE__*/_react.default.createElement(Divider, null);
+};
+
+exports.DividerBlock = DividerBlock;

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

@@ -0,0 +1,121 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EmbeddedCodeBlock = exports.Caption = exports.Block = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+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; }
+
+const Block = _styledComponents.default.div`
+  position: relative;
+  white-space: normal;
+  /* styles for image link */
+  img.img-responsive {
+    margin: 0 auto;
+    max-width: 100%;
+    height: auto;
+    display: block;
+  }
+`;
+exports.Block = Block;
+const Caption = _styledComponents.default.div`
+  line-height: 1.43;
+  letter-spacing: 0.4px;
+  ${({
+  theme
+}) => theme.fontSize.xs};
+  color: #808080;
+  padding: 15px 15px 0 15px;
+`;
+exports.Caption = Caption;
+
+const EmbeddedCodeBlock = entity => {
+  const {
+    caption,
+    embeddedCode
+  } = entity.getData();
+  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
+  // by using the isomorphic html parser 'node-html-parser'
+  // into scripts nodes and non-script nodes.
+  //
+  // For non-script nodes we simply put them into dangerouslySetInnerHtml.
+  //
+  // For scripts nodes we only append them on the client side. So we handle scripts
+  // nodes when useEffect is called.
+  // The reasons we don't insert script tags through dangerouslySetInnerHtml:
+  // 1. Since react use setInnerHtml to append the htmlStirng received from
+  //    dangerouslySetInnerHtml, scripts won't be triggered.
+  // 2. Although the setInnerhtml way won't trigger script tags, those script tags
+  //    will still show on the HTML provided from SSR. When the browser parse the
+  //    html it will run those script and produce unexpected behavior.
+
+  const nodes = (0, _react.useMemo)(() => {
+    const ele = (0, _nodeHtmlParser.parse)(`<div id="draft-embed">${embeddedCode}</div>`);
+    const scripts = ele.querySelectorAll('script');
+    scripts.forEach(s => {
+      s.remove();
+    });
+    const nonScripts = ele.querySelectorAll('div#draft-embed > :not(script)');
+    const nonScriptsHtml = nonScripts.reduce((prev, next) => prev + next.toString(), '');
+    return {
+      scripts,
+      nonScripts,
+      nonScriptsHtml
+    };
+  }, [embeddedCode]);
+  const {
+    scripts,
+    nonScriptsHtml
+  } = nodes;
+  (0, _react.useEffect)(() => {
+    if (embedded.current) {
+      const node = embedded.current;
+      const fragment = document.createDocumentFragment();
+      scripts.forEach(s => {
+        const scriptEle = document.createElement('script');
+        const attrs = s.attributes;
+
+        for (const key in attrs) {
+          scriptEle.setAttribute(key, attrs[key]);
+        }
+
+        scriptEle.text = s.text || '';
+        fragment.appendChild(scriptEle);
+      });
+      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)
+  );
+};
+
+exports.EmbeddedCodeBlock = EmbeddedCodeBlock;

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

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ImageBlock = ImageBlock;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _reactImage = _interopRequireDefault(require("@readr-media/react-image"));
+
+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};
+`;
+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};
+  }
+`;
+const Anchor = _styledComponents.default.a`
+  text-decoration: none;
+`;
+
+function ImageBlock(entity) {
+  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
+  }), /*#__PURE__*/_react.default.createElement(FigureCaption, null, desc));
+
+  return imgBlock;
+}

package/lib/block-renderers/index.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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,
+  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
+};
+exports.blockRenderers = blockRenderers;