@kids-reporter/draft-renderer 0.1.0

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

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

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

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MediaBlock = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const styles = {
+  media: {
+    width: '100%'
+  }
+};
+
+const Audio = props => {
+  return /*#__PURE__*/_react.default.createElement("audio", {
+    controls: true,
+    src: props.src,
+    style: styles.media
+  });
+};
+
+const Image = props => {
+  return /*#__PURE__*/_react.default.createElement("img", {
+    src: props.src,
+    style: styles.media
+  });
+};
+
+const Video = props => {
+  return /*#__PURE__*/_react.default.createElement("video", {
+    controls: true,
+    src: props.src,
+    style: styles.media
+  });
+};
+
+const MediaBlock = entity => {
+  const {
+    src
+  } = entity.getData();
+  const type = entity.getType();
+  let media;
+
+  if (type === 'audioLink') {
+    media = /*#__PURE__*/_react.default.createElement(Audio, {
+      src: src
+    });
+  } else if (type === 'imageLink') {
+    media = /*#__PURE__*/_react.default.createElement(Image, {
+      src: src
+    });
+  } else if (type === 'videoLink') {
+    media = /*#__PURE__*/_react.default.createElement(Video, {
+      src: src
+    });
+  }
+
+  return media;
+};
+
+exports.MediaBlock = MediaBlock;

package/lib/block-renderers/related-post-block.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RelatedPostBlock = RelatedPostBlock;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const RelatedPostWrapper = _styledComponents.default.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  border: 2px solid #04295e;
+  border-width: 2px 2px 2px 12px;
+  padding: 16px;
+  ${({
+  theme
+}) => theme.margin.default};
+
+  ${({
+  theme
+}) => theme.breakpoint.md} {
+    padding: 24px;
+  }
+`;
+const RelatedPostTitle = _styledComponents.default.p`
+  color: #04295e;
+  font-size: 14px;
+  line-height: 20px;
+  margin: 0 0 -8px;
+  ${({
+  theme
+}) => theme.breakpoint.md} {
+    font-size: 16px;
+    line-height: 23px;
+  }
+`;
+const RelatedPostItem = _styledComponents.default.div`
+  display: flex;
+`;
+const RelatedPostAnchorWrapper = _styledComponents.default.a`
+  text-decoration: none;
+  display: inline-block;
+  margin: 12px 0 0;
+
+  &:hover span {
+    border-bottom: 2px solid #04295e;
+  }
+`;
+const RelatedPost = _styledComponents.default.span`
+  color: rgba(0, 9, 40, 0.87);
+  font-size: 18px;
+  line-height: 1.6;
+  border-bottom: 2px solid #ebf02c;
+  padding-bottom: 2px;
+`;
+
+function RelatedPostBlock(entity) {
+  const {
+    posts
+  } = entity.getData();
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(RelatedPostWrapper, null, /*#__PURE__*/_react.default.createElement(RelatedPostTitle, null, "\u63A8\u85A6\u95B1\u8B80"), posts.map(post => /*#__PURE__*/_react.default.createElement(RelatedPostItem, {
+    key: post.id
+  }, /*#__PURE__*/_react.default.createElement(RelatedPostAnchorWrapper, {
+    href: `/post/${post.id}`,
+    target: "_blank"
+  }, /*#__PURE__*/_react.default.createElement(RelatedPost, null, post.name))))));
+}

package/lib/block-renderers/side-index-block.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SideIndexBlock = SideIndexBlock;
+
+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 sideIndexDefaultSpacing = 32;
+const SideIndexBlockWrapper = _styledComponents.default.div`
+  margin-top: ${sideIndexDefaultSpacing}px;
+
+  h2 {
+    ${_sharedStyle.defaultH2Style}
+  }
+`;
+
+function SideIndexBlock(props) {
+  const {
+    block,
+    contentState
+  } = props;
+  const entityKey = block.getEntityAt(0);
+  const entity = contentState.getEntity(entityKey);
+  const {
+    h2Text,
+    sideIndexText
+  } = entity.getData();
+  const sideIndexTitle = sideIndexText || h2Text || '';
+  const key = sideIndexTitle.replace(/\s+/g, '');
+  let sideIndexBlock;
+
+  if (h2Text) {
+    sideIndexBlock = /*#__PURE__*/_react.default.createElement(SideIndexBlockWrapper, {
+      id: `header-${key}`
+    }, /*#__PURE__*/_react.default.createElement("h2", null, h2Text));
+  } else {
+    sideIndexBlock = null;
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, sideIndexBlock);
+}

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

@@ -0,0 +1,253 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SlideshowBlock = SlideshowBlock;
+exports.SlideshowBlockV2 = SlideshowBlockV2;
+
+var _reactImage = _interopRequireDefault(require("@readr-media/react-image"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _slideshowLightbox = _interopRequireDefault(require("../components/slideshow-lightbox"));
+
+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 }; }
+
+const defaultImage = "https://unpkg.com/@kids-reporter/draft-renderer@0.1.0/lib/public/722f90c535fa64c27555ec6ee5f22393.png";
+const arrowDown = "https://unpkg.com/@kids-reporter/draft-renderer@0.1.0/lib/public/dd45f0788d9c70cabe72430bf08e7413.png";
+const SlideShowDesktopSize = 960;
+const SpacingBetweenSlideImages = 12;
+const SlideShowBlockWrapper = _styledComponents.default.div`
+  width: calc(100% + 40px);
+  transform: translateX(-20px);
+  position: relative;
+  ${({
+  theme
+}) => theme.margin.default};
+
+  ${({
+  theme
+}) => theme.breakpoint.xl} {
+    width: ${SlideShowDesktopSize}px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+    transform: translateX(-180px);
+    gap: ${SpacingBetweenSlideImages}px;
+    max-height: ${props => props.expandSlideShow ? 'none' : '960px'};
+    overflow: ${props => props.expandSlideShow ? 'visible' : 'hidden'};
+    margin-bottom: ${props => props.expandSlideShow ? '32px' : '16px'};
+  }
+
+  .slideshow-image {
+    max-height: ${props => props.shouldLimitFigureHeight ? 'calc(960px - 324px)' : 'none'};
+  }
+`;
+const SlideShowImage = _styledComponents.default.figure`
+  width: 100%;
+  aspect-ratio: 1/1;
+
+  & + .slideshow-image {
+    margin-top: ${SpacingBetweenSlideImages}px;
+  }
+
+  ${({
+  theme
+}) => theme.breakpoint.xl} {
+    flex: 1 0 calc((100% - ${SpacingBetweenSlideImages * 2}px) / 3);
+    min-width: ${SlideShowDesktopSize / 3 - 8}px;
+
+    &:hover {
+      cursor: pointer;
+      filter: brightness(15%);
+      transition: 0.3s;
+    }
+
+    & + .slideshow-image {
+      margin-top: unset;
+    }
+  }
+`;
+const FigCaption = _styledComponents.default.figcaption`
+  font-weight: 400;
+  line-height: 23px;
+  color: #000928;
+  opacity: 0.5;
+  ${({
+  theme
+}) => theme.fontSize.xs};
+  padding: 8px 20px 20px 20px;
+
+  ${({
+  theme
+}) => theme.breakpoint.md} {
+    ${({
+  theme
+}) => theme.fontSize.sm};
+  }
+
+  ${({
+  theme
+}) => theme.breakpoint.xl} {
+    display: none;
+  }
+`;
+const GradientMask = _styledComponents.default.div`
+  display: none;
+
+  ${({
+  theme
+}) => theme.breakpoint.xl} {
+    cursor: pointer;
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: ${SlideShowDesktopSize}px;
+    bottom: 0;
+    left: 0;
+    background: linear-gradient(
+      to bottom,
+      rgba(255, 255, 255, 0) 648px,
+      rgba(255, 255, 255, 1) 960px
+    );
+  }
+`;
+const ExpandText = _styledComponents.default.div`
+  display: none;
+
+  ${({
+  theme
+}) => theme.breakpoint.xl} {
+    display: block;
+    font-style: normal;
+    font-weight: 700;
+    ${({
+  theme
+}) => theme.fontSize.md};
+    line-height: 18px;
+    letter-spacing: 0.03em;
+    color: #000928;
+    text-align: center;
+    cursor: pointer;
+    position: relative;
+    margin-bottom: 48px;
+    transition: all 0.2s ease;
+
+    &:hover::after,
+    &:active::after {
+      bottom: -30px;
+      transition: all 0.2s;
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: -26px;
+      left: 50%;
+      transform: translate(-50%, 0%);
+      width: 14px;
+      height: 13px;
+      background-image: url(${arrowDown});
+      background-repeat: no-repeat;
+      background-position: center center;
+      background-size: 14px;
+    }
+  }
+`; // support old version of slideshow without delay propertiy
+
+const Figure = _styledComponents.default.figure`
+  position: relative;
+  margin-block: unset;
+  margin-inline: unset;
+  margin: 0 10px;
+`;
+const Image = _styledComponents.default.img`
+  width: 100%;
+`;
+
+function SlideshowBlock(entity) {
+  var _images$, _images$$resized, _images$2;
+
+  const images = entity.getData();
+  return /*#__PURE__*/_react.default.createElement(Figure, null, /*#__PURE__*/_react.default.createElement(Image, {
+    src: images === null || images === void 0 ? void 0 : (_images$ = images[0]) === null || _images$ === void 0 ? void 0 : (_images$$resized = _images$.resized) === null || _images$$resized === void 0 ? void 0 : _images$$resized.original,
+    alt: images === null || images === void 0 ? void 0 : (_images$2 = images[0]) === null || _images$2 === void 0 ? void 0 : _images$2.name,
+    onError: e => {
+      var _images$3, _images$3$imageFile;
+
+      return e.currentTarget.src = images === null || images === void 0 ? void 0 : (_images$3 = images[0]) === null || _images$3 === void 0 ? void 0 : (_images$3$imageFile = _images$3.imageFile) === null || _images$3$imageFile === void 0 ? void 0 : _images$3$imageFile.url;
+    }
+  }));
+} // 202206 latest version of slideshow, support delay property
+
+
+function SlideshowBlockV2(entity) {
+  const {
+    images
+  } = entity.getData();
+  const [expandSlideShow, setExpandSlideShow] = (0, _react.useState)(false);
+  const [showLightBox, setShowLightBox] = (0, _react.useState)(false);
+  const [focusImageIndex, setFocusImageIndex] = (0, _react.useState)(0);
+  const imagesRefs = (0, _react.useRef)(Array(images.length).fill(null));
+  (0, _react.useEffect)(() => {
+    const focusedImageRef = imagesRefs === null || imagesRefs === void 0 ? void 0 : imagesRefs.current[focusImageIndex];
+
+    if (focusedImageRef) {
+      focusedImageRef === null || focusedImageRef === void 0 ? void 0 : focusedImageRef.scrollIntoView({
+        behavior: 'smooth',
+        block: 'center'
+      });
+    }
+  }, [focusImageIndex]);
+  const shouldMaskSlideShow = Boolean(images.length > 9 && !expandSlideShow);
+  const shouldLimitFigureHeight = Boolean(images.length > 1);
+  const slideShowImages = images.map((image, index) => {
+    const {
+      id,
+      resized,
+      desc,
+      name
+    } = image;
+    return /*#__PURE__*/_react.default.createElement(SlideShowImage, {
+      className: "slideshow-image",
+      key: id,
+      onClick: () => {
+        setShowLightBox(!showLightBox);
+        setFocusImageIndex(index);
+      }
+    }, /*#__PURE__*/_react.default.createElement(_reactImage.default, {
+      images: resized,
+      defaultImage: defaultImage,
+      alt: name,
+      rwd: {
+        mobile: '100vw',
+        tablet: '608px',
+        desktop: '960px',
+        default: '100%'
+      },
+      priority: true
+    }), desc && /*#__PURE__*/_react.default.createElement(FigCaption, null, desc));
+  });
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(SlideShowBlockWrapper, {
+    onClick: () => setExpandSlideShow(!expandSlideShow),
+    expandSlideShow: expandSlideShow,
+    shouldLimitFigureHeight: shouldLimitFigureHeight
+  }, slideShowImages, shouldMaskSlideShow && /*#__PURE__*/_react.default.createElement(GradientMask, null)), shouldMaskSlideShow && /*#__PURE__*/_react.default.createElement(ExpandText, {
+    className: "slideshow-expand-text",
+    onClick: () => setExpandSlideShow(!expandSlideShow)
+  }, "\u5C55\u958B\u6240\u6709\u5716\u7247"), showLightBox && /*#__PURE__*/_react.default.createElement(_slideshowLightbox.default, {
+    focusImageIndex: focusImageIndex,
+    images: images,
+    setShowLightBox: setShowLightBox,
+    setFocusImageIndex: setFocusImageIndex,
+    imagesRefs: imagesRefs
+  }));
+}