@kids-reporter/draft-renderer 0.1.0

package/README.md

@@ -0,0 +1,86 @@
+# [@mirrormedia/lilith-core](https://www.npmjs.com/package/@mirrormedia/lilith-draft-editor) · ![npm version](https://img.shields.io/npm/v/@mirrormedia/lilith-draft-editor.svg?style=flat)
+
+### Installation
+
+`yarn install`
+
+### Introduction
+
+本套件是由 `@mirrormedia/lilith-draft-editor` 將其 maintain 的 buttons 對應的 block renderers 和 entity decorators 的邏輯 decouple，
+以應用在 Next.js 專案以及 CMS 上。
+
+### Development
+
+在開發順序上，一開始各網站會有一套 default 的 block renderers 和 entity decorators，這些預設的 components 將會被 export 給 lilith-draft-editor 使用並在 CMS 上呈現出各 button 新增的 content。
+
+#### For Next.js to use
+
+在各網站開發時，工程師將因應設計將會針對 block renderers 和 entity decorators 修改樣式，因此會在各個網站的資料夾中修改網站專屬的 block renderers 和 entity decorators，這個套件將直接用在該 Next.js 專案上，當作 React component 直接使用，只要帶入 CMS 上拿到的 draft.js 相關的 contentBlock 的資料即可呈現樣式。
+
+除了 block renderers 和 entity decorators 等檔案可以針對 block type 修改之外，built-in 的 draft.js block type 可以透過 `src/website/${website}/draft-renderer.tsx`中的 styled-components `DraftEditorWrapper` 中的 css 來修改
+
+```
+  /* Draft built-in buttons' style */
+  .public-DraftStyleDefault-header-two {
+  }
+  .public-DraftStyleDefault-header-three {
+  }
+  .public-DraftStyleDefault-header-four {
+  }
+  .public-DraftStyleDefault-blockquote {
+  }
+  .public-DraftStyleDefault-ul {
+  }
+  .public-DraftStyleDefault-unorderedListItem {
+  }
+  .public-DraftStyleDefault-ol {
+  }
+  .public-DraftStyleDefault-orderedListItem {
+  }
+  /* code-block */
+  .public-DraftStyleDefault-pre {
+  }
+```
+
+修改完成後修改 package version, 跑 `yarn build` 和 `npm publish` 即可以發布新版套件並在 Next.js 中 `yarn install` 使用。
+
+#### For CMS to use
+
+在特定網站的 block renderers 和 entity decorators 改動之後，為了保持 CMS 上的 draft-editorn 所見即所得呈現和 Next.js 端同樣的樣式，
+在完成 `npm publish` 後需要到 `packages/draft-editor` 去更新 `@mirrormedia/lilith-draft-renderer` 的版本，並依照該套件的 README.md 的指示在該網站的 CMS 中測試。
+
+### File Structure
+
+在 `src` 資料夾下有兩大類的檔案
+
+1. 共用的 draft.js 程式碼： 主要是 draft.js button UI, draft-converter 和其他 helper function
+2. 各網站客製化的改動：
+
+依照各網站需求修改`src/website/${website}/`中的檔案
+
+- block-renderer : 在既有(注 1)的 block-renderer 上附加可編輯的 wrapper，僅有部分 block renderers 適用
+- selector: 依照各網站 keystone list 來調整 photo, video 和 post 的 gql query
+- draft-editor: 主要 export 出 RichTextEditor 的檔案，實際使用在 lilith-core 對應的 webiste 中，可直接決定 RichTextEditor 樣式(注 2)
+
+\*注 1: lilith-draft-editor 各個 buttons 對應的 block-renderers, entity-decorators 會 maintain 在 lilith-draft-renderer，由各網站 Next.js 專案開發人員實作，在本專案中會直接將 lilith-draft-renderer 中定義好的 block-renderers, entity-decorators 直接使用(除了少數需要再編輯的 block-renderer，參考 `src/website/${website}/block-renderer`中的 editor wrapper component)。
+
+\*注 2: 雖然各個網站都 maintain 了一個 draft-editor，可以自行決定 import 進來的 buttons，不過因為 lilith-core 中實作 disalbedButtons 的功能，所以目前一率將所有的 buttons 加入 RichTextEditor 中，由 lilith-(mirrormedia|readr|mesh|editools) 來控制所使用的 buttons。
+
+### Build
+
+`yarn build`
+
+### Publish
+
+`npm run publish`
+
+在 publish 前，請根據 conventional commits 的規範，將 package.json#version 升版。
+
+### Notable Details
+
+#### For those files under `views/` folder, we transpile them specifically.
+
+For those files under `views/` folder, we transpile them by babel according to different configuation.
+The specific babel configuration is `.views.babelrc.js`.
+In `.views.babelrc.js`, we tell babel not to transpile `import` and `export` es6 codes into commonJS codes.
+The Keystone server won't start server well if those files under `views/` are transpiled into commonJS codes.

package/lib/block-renderer-fn.js

@@ -0,0 +1,123 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.atomicBlockRenderer = atomicBlockRenderer;
+
+var _blockRenderers = require("./block-renderers");
+
+const {
+  EmbeddedCodeBlock,
+  MediaBlock,
+  ImageBlock,
+  InfoBoxBlock,
+  SlideshowBlock,
+  SlideshowBlockV2,
+  DividerBlock,
+  TableBlock,
+  ColorBoxBlock,
+  BGImageBlock,
+  BGVideoBlock,
+  RelatedPostBlock,
+  SideIndexBlock,
+  VideoBlock,
+  AudioBlock
+} = _blockRenderers.blockRenderers;
+
+const AtomicBlock = props => {
+  const entity = props.contentState.getEntity(props.block.getEntityAt(0));
+  const entityType = entity.getType();
+
+  switch (entityType) {
+    case 'audioLink':
+    case 'imageLink':
+    case 'videoLink':
+      {
+        return MediaBlock(entity);
+      }
+
+    case 'image':
+      {
+        return ImageBlock(entity);
+      }
+
+    case 'slideshow':
+      {
+        return SlideshowBlock(entity);
+      }
+
+    case 'slideshow-v2':
+      {
+        return SlideshowBlockV2(entity);
+      }
+
+    case 'EMBEDDEDCODE':
+      {
+        return EmbeddedCodeBlock(entity);
+      }
+
+    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 null;
+};
+
+function atomicBlockRenderer(block) {
+  if (block.getType() === 'atomic') {
+    return {
+      component: AtomicBlock,
+      editable: false
+    };
+  }
+
+  return null;
+}

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

@@ -0,0 +1,162 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AudioBlock = AudioBlock;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+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 audioPlay = "https://unpkg.com/@kids-reporter/draft-renderer@0.1.0/lib/public/dc249b3412c5af890a004508287a3c3d.png";
+const audioPause = "https://unpkg.com/@kids-reporter/draft-renderer@0.1.0/lib/public/5b3cb1a908786c8750f1041860699cc1.png";
+const buttonShareStyle = (0, _styledComponents.css)`
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: 22px;
+
+  &:hover {
+    opacity: 0.8;
+  }
+`;
+const audioTimeShareStyle = (0, _styledComponents.css)`
+  color: rgba(0, 9, 40, 0.5);
+  font-weight: 400;
+  font-size: 11px;
+  line-height: 1em;
+  position: absolute;
+  bottom: 0px;
+
+  ${({
+  theme
+}) => theme.breakpoint.md} {
+    font-size: 13px;
+  }
+`;
+const AudioWrapper = _styledComponents.default.div`
+  position: relative;
+  outline: 1px solid rgba(0, 9, 40, 0.1);
+  padding: 16px 0px 16px 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  max-width: 480px;
+  ${({
+  theme
+}) => theme.margin.default}
+
+  ${({
+  theme
+}) => theme.breakpoint.md} {
+    padding: 24px 0px 28px 24px;
+  }
+
+  audio {
+    max-height: 40px;
+    width: 100%;
+    position: relative;
+    pointer-events: none;
+  }
+
+  audio::-webkit-media-controls-panel {
+    background: #ffffff;
+  }
+
+  //remove default audio style: volume, mute, play
+  audio::-webkit-media-controls-volume-slider,
+  audio::-webkit-media-controls-mute-button,
+  audio::-webkit-media-controls-play-button {
+    display: none;
+  }
+
+  //時間進度條
+  audio::-webkit-media-controls-timeline {
+    height: 4px;
+    opacity: 0.3;
+    padding: 0;
+    margin-bottom: 10px;
+  }
+
+  //目前播放時間
+  audio::-webkit-media-controls-current-time-display {
+    ${audioTimeShareStyle}
+    left: 5px;
+  }
+
+  //總時長
+  audio::-webkit-media-controls-time-remaining-display {
+    ${audioTimeShareStyle}
+    left: 36px;
+  }
+`;
+const AudioInfo = _styledComponents.default.div`
+  width: calc(100% - 70px);
+`;
+const AudioTitle = _styledComponents.default.div`
+  font-family: 'Noto Sans TC';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 1.4em;
+  color: rgba(0, 9, 40, 0.87);
+  padding: 0 40px 0px 10px;
+
+  ${({
+  theme
+}) => theme.breakpoint.md} {
+    font-size: 16px;
+  }
+`;
+const PlayButton = _styledComponents.default.button`
+  ${buttonShareStyle}
+  background-color: #f6f6fb;
+  background-image: url(${audioPlay});
+
+  &:hover {
+    opacity: 0.66;
+  }
+`;
+const PauseButton = _styledComponents.default.button`
+  ${buttonShareStyle}
+  background-color: rgba(0, 9, 40, 0.87);
+  background-image: url(${audioPause});
+`;
+
+function AudioBlock(entity) {
+  const {
+    audio
+  } = entity.getData();
+  const audioRef = (0, _react.useRef)(null);
+  const [isPlaying, setIsPlaying] = (0, _react.useState)(false);
+
+  const handlePlay = () => {
+    audioRef === null || audioRef === void 0 ? void 0 : audioRef.current.play();
+    setIsPlaying(true);
+  };
+
+  const handlePause = () => {
+    audioRef === null || audioRef === void 0 ? void 0 : audioRef.current.pause();
+    setIsPlaying(false);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(AudioWrapper, null, isPlaying ? /*#__PURE__*/_react.default.createElement(PauseButton, {
+    onClick: handlePause
+  }) : /*#__PURE__*/_react.default.createElement(PlayButton, {
+    onClick: handlePlay
+  }), /*#__PURE__*/_react.default.createElement(AudioInfo, null, /*#__PURE__*/_react.default.createElement(AudioTitle, null, audio === null || audio === void 0 ? void 0 : audio.name), /*#__PURE__*/_react.default.createElement("audio", {
+    controls: true,
+    id: "player",
+    ref: audioRef,
+    src: audio === null || audio === void 0 ? void 0 : audio.url,
+    controlsList: "nodownload noremoteplayback noplaybackrate nofullscreen",
+    preload: "auto"
+  })));
+}

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

@@ -0,0 +1,257 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BGImageBlock = BGImageBlock;
+
+var _react = _interopRequireWildcard(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 }; }
+
+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 BackgroundImage = _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 BGImageBlock(props) {
+  const {
+    block,
+    contentState
+  } = props;
+  const entityKey = block.getEntityAt(0);
+  const entity = contentState.getEntity(entityKey);
+  const {
+    textBlockAlign,
+    image,
+    body
+  } = entity.getData();
+  const {
+    resized,
+    name
+  } = image; // 滾動視差
+
+  const isParallax = textBlockAlign !== 'fixed';
+  const [bgImageCss, setBgImageCss] = (0, _react.useState)({});
+  const bgRef = (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 || !bgRef.current) {
+            return;
+          }
+
+          const bounding = bgRef.current.getBoundingClientRect();
+
+          if (bounding.height) {
+            if (bounding.y > 0) {
+              setBgImageCss({
+                position: 'absolute',
+                top: 0,
+                bottom: 'unset'
+              });
+            } else if (bounding.y + bounding.height > window.innerHeight) {
+              setBgImageCss({
+                position: 'fixed',
+                top: 0,
+                bottom: 'unset'
+              });
+            } else {
+              setBgImageCss({
+                position: 'absolute',
+                top: 'unset',
+                bottom: 0
+              });
+            }
+          }
+        });
+      });
+      intersectionObserver.observe(topRef.current);
+      intersectionObserver.observe(bottomRef.current);
+      return () => {
+        intersectionObserver.disconnect();
+      };
+    }
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(BackgroundContainer, {
+    ref: bgRef,
+    className: "bg"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    ref: topRef
+  }), /*#__PURE__*/_react.default.createElement(BackgroundImage, {
+    style: bgImageCss
+  }, /*#__PURE__*/_react.default.createElement(_reactImage.default, {
+    images: resized,
+    alt: name,
+    rwd: {
+      mobile: '100vw',
+      tablet: '640px',
+      default: '100%'
+    },
+    priority: 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
+  }));
+}