@kids-reporter/draft-renderer 0.1.0

package/lib/shared-style/content-type.js

@@ -0,0 +1,163 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SummaryStyle = exports.NormalStyle = exports.CitationStyle = void 0;
+
+var _styledComponents = require("styled-components");
+
+var _index = require("./index");
+
+const SummaryStyle = (0, _styledComponents.css)`
+  ${({
+  theme
+}) => theme.fontSize.sm};
+  line-height: 1.6;
+
+  *:not(:first-child) {
+    .public-DraftStyleDefault-block {
+      margin-top: 12px;
+    }
+  }
+
+  .public-DraftStyleDefault-ul,
+  .public-DraftStyleDefault-ol {
+    margin-top: 12px;
+  }
+
+  .public-DraftStyleDefault-unorderedListItem,
+  .public-DraftStyleDefault-orderedListItem {
+    .public-DraftStyleDefault-block {
+      margin-top: 4px;
+    }
+  }
+
+  .public-DraftStyleDefault-blockquote {
+    ${_index.defaultBlockQuoteStyle};
+
+    & + blockquote {
+      ${_index.blockQuoteSpacingBetweenContent};
+    }
+  }
+`;
+exports.SummaryStyle = SummaryStyle;
+const NormalStyle = (0, _styledComponents.css)`
+  ${({
+  theme
+}) => theme.fontSize.md};
+  line-height: 2;
+
+  *:not(:first-child) {
+    ${_index.defaultSpacingBetweenContent}
+  }
+
+  .public-DraftStyleDefault-unorderedListItem,
+  .public-DraftStyleDefault-orderedListItem {
+    ${_index.noSpacingBetweenContent};
+  }
+
+  .public-DraftStyleDefault-ul,
+  .public-DraftStyleDefault-ol {
+    margin-top: 32px;
+  }
+
+  .public-DraftStyleDefault-blockquote {
+    ${_index.defaultBlockQuoteStyle};
+
+    & + blockquote {
+      ${_index.blockQuoteSpacingBetweenContent};
+    }
+  }
+`;
+exports.NormalStyle = NormalStyle;
+const CitationStyle = (0, _styledComponents.css)`
+  ${({
+  theme
+}) => theme.fontSize.sm};
+  line-height: 1.6;
+
+  *:not(:first-child) {
+    .public-DraftStyleDefault-block {
+      margin-top: 12px;
+    }
+  }
+
+  .public-DraftStyleDefault-unorderedListItem,
+  .public-DraftStyleDefault-orderedListItem {
+    .public-DraftStyleDefault-block {
+      margin-top: 4px;
+    }
+  }
+
+  .public-DraftStyleDefault-ul,
+  .public-DraftStyleDefault-ol {
+    margin-top: 12px;
+  }
+
+  //檔案下載
+  .public-DraftStyleDefault-ul:has(a) {
+    padding: 0;
+
+    .public-DraftStyleDefault-unorderedListItem {
+      list-style-type: none;
+      padding: 8px 0;
+    }
+
+    a {
+      width: 100%;
+      border: none;
+      font-weight: 700;
+      font-size: 16px;
+      line-height: 1.5;
+      color: #04295e;
+      display: inline-block;
+      position: relative;
+      padding-right: 60px;
+
+      &:hover {
+        color: rgba(0, 9, 40, 0.87);
+      }
+
+      &::after {
+        content: '';
+        background-image: url('../assets/citation-download.png');
+        background-repeat: no-repeat;
+        background-position: center center;
+        background-size: contain;
+        position: absolute;
+        right: 0;
+        top: 50%;
+        width: 24px;
+        height: 24px;
+        transform: translate(0%, -12px);
+      }
+    }
+  }
+
+  .public-DraftStyleDefault-blockquote {
+    width: 100%;
+    color: rgba(0, 9, 40, 0.5);
+    ${({
+  theme
+}) => theme.fontSize.sm};
+    line-height: 1.6;
+    padding: 0;
+
+    & + blockquote {
+      ${_index.blockQuoteSpacingBetweenContent};
+    }
+
+    & + ul {
+      border-top: 1px solid rgba(0, 9, 40, 0.1);
+      padding-top: 4px;
+
+      ${({
+  theme
+}) => theme.breakpoint.md} {
+        margin-top: 16px;
+      }
+    }
+  }
+`;
+exports.CitationStyle = CitationStyle;

package/lib/shared-style/index.js

@@ -0,0 +1,108 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.textAroundPictureStyle = exports.noSpacingBetweenContent = exports.narrowSpacingBetweenContent = exports.defaultUnorderedListStyle = exports.defaultUlStyle = exports.defaultSpacingBetweenContent = exports.defaultOrderedListStyle = exports.defaultOlStyle = exports.defaultLinkStyle = exports.defaultH2Style = exports.defaultBlockQuoteStyle = exports.blockQuoteSpacingBetweenContent = void 0;
+
+var _styledComponents = require("styled-components");
+
+const blockQuoteSpacingBetweenContent = (0, _styledComponents.css)`
+  .public-DraftStyleDefault-block {
+    margin-top: 8px;
+  }
+`;
+exports.blockQuoteSpacingBetweenContent = blockQuoteSpacingBetweenContent;
+const textAroundPictureStyle = (0, _styledComponents.css)`
+  max-width: 33.3%;
+  > figure {
+    margin-bottom: 0;
+    width: 150%;
+    transform: unset;
+  }
+  figcaption {
+    padding: 0;
+  }
+`;
+exports.textAroundPictureStyle = textAroundPictureStyle;
+const defaultH2Style = (0, _styledComponents.css)`
+  ${({
+  theme
+}) => theme.fontSize.lg};
+  font-weight: 700;
+  line-height: 1.5;
+  letter-spacing: 0.032em;
+  color: #000928;
+
+  ${({
+  theme
+}) => theme.breakpoint.md} {
+    ${({
+  theme
+}) => theme.fontSize.xl};
+  }
+`;
+exports.defaultH2Style = defaultH2Style;
+const defaultUlStyle = (0, _styledComponents.css)`
+  list-style-type: disc;
+  padding-left: 1.2rem;
+`;
+exports.defaultUlStyle = defaultUlStyle;
+const defaultUnorderedListStyle = (0, _styledComponents.css)`
+  letter-spacing: 0.01em;
+  text-align: justify;
+  color: rgba(0, 9, 40, 0.87);
+`;
+exports.defaultUnorderedListStyle = defaultUnorderedListStyle;
+const defaultOlStyle = (0, _styledComponents.css)`
+  list-style-type: decimal;
+  padding-left: 1.2rem;
+`;
+exports.defaultOlStyle = defaultOlStyle;
+const defaultOrderedListStyle = (0, _styledComponents.css)`
+  letter-spacing: 0.01em;
+  text-align: justify;
+  color: rgba(0, 9, 40, 0.87);
+`;
+exports.defaultOrderedListStyle = defaultOrderedListStyle;
+const defaultLinkStyle = (0, _styledComponents.css)`
+  display: inline;
+  border-bottom: 2px solid #ebf02c;
+  letter-spacing: 0.01em;
+  text-align: justify;
+  color: rgba(0, 9, 40, 0.87);
+  padding-bottom: 2px;
+
+  &:hover {
+    border-bottom: 2px solid #04295e;
+  }
+`;
+exports.defaultLinkStyle = defaultLinkStyle;
+const defaultBlockQuoteStyle = (0, _styledComponents.css)`
+  ${({
+  theme
+}) => theme.fontSize.sm};
+  line-height: 1.6;
+  color: rgba(0, 9, 40, 0.66);
+  opacity: 0.87;
+  padding: 0 20px;
+`;
+exports.defaultBlockQuoteStyle = defaultBlockQuoteStyle;
+const defaultSpacingBetweenContent = (0, _styledComponents.css)`
+  .public-DraftStyleDefault-block {
+    margin-top: 32px;
+  }
+`;
+exports.defaultSpacingBetweenContent = defaultSpacingBetweenContent;
+const narrowSpacingBetweenContent = (0, _styledComponents.css)`
+  .public-DraftStyleDefault-block {
+    margin-top: 16px;
+  }
+`;
+exports.narrowSpacingBetweenContent = narrowSpacingBetweenContent;
+const noSpacingBetweenContent = (0, _styledComponents.css)`
+  .public-DraftStyleDefault-block {
+    margin-top: unset;
+  }
+`;
+exports.noSpacingBetweenContent = noSpacingBetweenContent;

package/lib/theme/index.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.theme = exports.mediaSize = exports.default = void 0;
+const mediaSize = {
+  xs: 0,
+  sm: 576,
+  md: 768,
+  lg: 960,
+  xl: 1200,
+  xxl: 1400
+};
+exports.mediaSize = mediaSize;
+const theme = {
+  breakpoint: {
+    xs: `@media (min-width: ${mediaSize.xs}px)`,
+    sm: `@media (min-width: ${mediaSize.sm}px)`,
+    md: `@media (min-width: ${mediaSize.md}px)`,
+    lg: `@media (min-width: ${mediaSize.lg}px)`,
+    xl: `@media (min-width: ${mediaSize.xl}px)`,
+    xxl: `@media (min-width: ${mediaSize.xxl}px)`
+  },
+  fontSize: {
+    xs: 'font-size: 14px;',
+    sm: 'font-size: 16px;',
+    md: 'font-size: 18px;',
+    lg: 'font-size: 24px;',
+    xl: 'font-size: 28px;'
+  },
+  margin: {
+    default: 'margin: 32px auto;',
+    narrow: 'margin: 16px auto;'
+  }
+};
+exports.theme = theme;
+var _default = theme;
+exports.default = _default;

package/lib/types/index.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ValidPostContentType = void 0;
+var ValidPostStyle;
+
+(function (ValidPostStyle) {
+  ValidPostStyle["NEWS"] = "news";
+  ValidPostStyle["FRAME"] = "frame";
+  ValidPostStyle["BLANK"] = "blank";
+  ValidPostStyle["REPORT"] = "report";
+  ValidPostStyle["PROJECT3"] = "project3";
+  ValidPostStyle["EMBEDDED"] = "embedded";
+  ValidPostStyle["REVIEW"] = "review";
+  ValidPostStyle["MEMO"] = "memo";
+  ValidPostStyle["DUMMY"] = "dummy";
+  ValidPostStyle["CARD"] = "card";
+  ValidPostStyle["QA"] = "qa";
+  ValidPostStyle["SCROLLABLE_VIDEO"] = "scrollablevideo";
+})(ValidPostStyle || (ValidPostStyle = {}));
+
+let ValidPostContentType;
+exports.ValidPostContentType = ValidPostContentType;
+
+(function (ValidPostContentType) {
+  ValidPostContentType["SUMMARY"] = "summary";
+  ValidPostContentType["NORMAL"] = "normal";
+  ValidPostContentType["ACTIONLIST"] = "actionlist";
+  ValidPostContentType["CITATION"] = "citation";
+})(ValidPostContentType || (exports.ValidPostContentType = ValidPostContentType = {}));

package/lib/utils/common.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.removeEmptyContentBlock = exports.hasContentInRawContentBlock = void 0;
+
+const hasContentInRawContentBlock = rawContentBlock => {
+  if (!rawContentBlock || !rawContentBlock.blocks || !rawContentBlock.blocks.length) {
+    return false;
+  }
+
+  const hasAtomicBlock = Boolean(rawContentBlock.blocks.some(block => block.type === 'atomic'));
+
+  if (hasAtomicBlock) {
+    return hasAtomicBlock;
+  }
+
+  const defaultBlockHasContent = Boolean(rawContentBlock.blocks.filter(block => block.type !== 'atomic').some(block => block.text.trim()));
+  return defaultBlockHasContent;
+};
+
+exports.hasContentInRawContentBlock = hasContentInRawContentBlock;
+
+const removeEmptyContentBlock = rawContentBlock => {
+  const hasContent = hasContentInRawContentBlock(rawContentBlock);
+
+  if (!hasContent) {
+    throw new Error('There is no content in rawContentBlock, please check again.');
+  }
+
+  const blocksWithHideEmptyBlock = rawContentBlock === null || rawContentBlock === void 0 ? void 0 : rawContentBlock.blocks.map(block => {
+    if (block.type === 'atomic' || block.text) {
+      return block;
+    } else {
+      return undefined;
+    }
+  }).filter(block => block);
+  return { ...rawContentBlock,
+    blocks: blocksWithHideEmptyBlock
+  };
+};
+
+exports.removeEmptyContentBlock = removeEmptyContentBlock;

package/lib/utils/post.js

@@ -0,0 +1,147 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.insertRecommendInContentBlock = exports.getSideIndexEntityData = exports.getFirstBlockEntityType = void 0;
+
+var _common = require("./common");
+
+// eslint-disable-next-line prettier/prettier
+const insertRecommendInContentBlock = (rawContentBlock, insertRecommend) => {
+  const relatedPostsEntityMaps = insertRecommend === null || insertRecommend === void 0 ? void 0 : insertRecommend.map(post => ({
+    data: {
+      posts: [{
+        heroImage: (post === null || post === void 0 ? void 0 : post.heroImage) || {},
+        id: (post === null || post === void 0 ? void 0 : post.id) || '',
+        name: (post === null || post === void 0 ? void 0 : post.title) || '',
+        ogImage: (post === null || post === void 0 ? void 0 : post.ogImage) || null,
+        slug: (post === null || post === void 0 ? void 0 : post.slug) || '',
+        subtitle: null
+      }]
+    },
+    type: 'RELATEDPOST',
+    mutability: 'IMMUTABLE'
+  }));
+  const insertRelatedEntities = relatedPostsEntityMaps.reduce((accumulator, current) => {
+    var _current$data;
+
+    // +1000 to increase diversity to avoid `key` duplication
+    const entityKey = Number(current === null || current === void 0 ? void 0 : (_current$data = current.data) === null || _current$data === void 0 ? void 0 : _current$data.posts[0].id) + 1000;
+    return { ...accumulator,
+      [entityKey]: current
+    };
+  }, {});
+  const entityMapWithInsertRecommend = { ...rawContentBlock.entityMap,
+    ...insertRelatedEntities
+  };
+  const relatedPostsBlocks = insertRecommend.map((post, index) => {
+    // +1000 to increase diversity to avoid `key` duplication
+    const entityKey = Number(post.id) + 1000;
+    return {
+      key: `insertRecommend-${index}`,
+      data: {},
+      text: ' ',
+      //notice: if text: '' will show error
+      type: 'atomic',
+      depth: 0,
+      entityRanges: [{
+        key: entityKey,
+        length: 1,
+        offset: 0
+      }],
+      inlineStyleRanges: []
+    };
+  });
+
+  function insertRecommendBlocks(data) {
+    let i = 0;
+    let count = 0; // B: insert recommends based on related-posts amount
+
+    const paragraphs = data === null || data === void 0 ? void 0 : data.filter(item => (item === null || item === void 0 ? void 0 : item.type) === 'unstyled' && (item === null || item === void 0 ? void 0 : item.text.length));
+    let divideAmount;
+
+    if (relatedPostsBlocks.length) {
+      divideAmount = Math.round((paragraphs === null || paragraphs === void 0 ? void 0 : paragraphs.length) / (relatedPostsBlocks.length + 1)) || (paragraphs !== null && paragraphs !== void 0 && paragraphs.length ? 1 : 0);
+    } else {
+      divideAmount = 0;
+    }
+
+    if (data !== null && data !== void 0 && data.length) {
+      while (i < data.length && divideAmount) {
+        var _data$i, _data$i2;
+
+        if (((_data$i = data[i]) === null || _data$i === void 0 ? void 0 : _data$i.type) === 'unstyled' && (_data$i2 = data[i]) !== null && _data$i2 !== void 0 && _data$i2.text.length) {
+          count++;
+          const item = relatedPostsBlocks[count / divideAmount - 1];
+
+          if (count % divideAmount === 0 && item) {
+            data.splice(i + 1, 0, item);
+          }
+        }
+
+        i++;
+      }
+    } // A: insert recommends each 5 paragraphs (same as READr 2.0)
+    // if (data?.length) {
+    //   while (i < data.length) {
+    //     if (data[i]?.type === 'unstyled' && data[i]?.text.length) {
+    //       count++
+    //       const item = relatedPostsBlocks[count / 5 - 1]
+    //       if (count % 5 === 0 && item) {
+    //         data.splice(i + 1, 0, item)
+    //       }
+    //     }
+    //     i++
+    //   }
+    // }
+
+
+    return data;
+  }
+
+  const contentWithoutEmptyBlock = (0, _common.removeEmptyContentBlock)(rawContentBlock);
+  const contentWithInsertRecommend = {
+    blocks: insertRecommendBlocks(contentWithoutEmptyBlock === null || contentWithoutEmptyBlock === void 0 ? void 0 : contentWithoutEmptyBlock.blocks),
+    entityMap: entityMapWithInsertRecommend
+  };
+  return contentWithInsertRecommend;
+};
+
+exports.insertRecommendInContentBlock = insertRecommendInContentBlock;
+
+const getFirstBlockEntityType = rawContentBlock => {
+  const contentBlocks = (0, _common.removeEmptyContentBlock)(rawContentBlock);
+
+  if (contentBlocks) {
+    var _contentBlocks$entity;
+
+    return contentBlocks === null || contentBlocks === void 0 ? void 0 : (_contentBlocks$entity = contentBlocks.entityMap[0]) === null || _contentBlocks$entity === void 0 ? void 0 : _contentBlocks$entity.type;
+  } else {
+    return undefined;
+  }
+};
+
+exports.getFirstBlockEntityType = getFirstBlockEntityType;
+
+const getSideIndexEntityData = rawContentBlock => {
+  const contentBlocks = (0, _common.removeEmptyContentBlock)(rawContentBlock);
+
+  if (contentBlocks !== null && contentBlocks !== void 0 && contentBlocks.entityMap) {
+    return Object.values(contentBlocks.entityMap).filter(entity => entity.type === 'SIDEINDEX').map(entity => {
+      const content = entity.data ?? {};
+      const sideIndexTitle = content.sideIndexText || content.h2Text || '';
+      const key = sideIndexTitle.replace(/\s+/g, '');
+      return {
+        title: sideIndexTitle,
+        id: `header-${key}`,
+        href: (content === null || content === void 0 ? void 0 : content.sideIndexUrl) || null,
+        isActive: false
+      };
+    });
+  } else {
+    return undefined;
+  }
+};
+
+exports.getSideIndexEntityData = getSideIndexEntityData;

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@kids-reporter/draft-renderer",
+  "version": "0.1.0",
+  "description": "",
+  "main": "lib/index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "make dev",
+    "build": "make build",
+    "clean": "make clean",
+    "build-lib": "make build-lib"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/@kids-reporter/cms.git",
+    "directory": "packages/draft-renderer"
+  },
+  "keywords": [
+    "react",
+    "kids-reporter",
+    "draft.js"
+  ],
+  "license": "MIT",
+  "dependencies": {
+    "@readr-media/react-image": "1.6.0",
+    "body-scroll-lock": "3.1.5",
+    "draft-js": "^0.11.7",
+    "node-html-parser": "^6.1.5"
+  },
+  "peerDependencies": {
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "styled-components": "5.3.5"
+  },
+  "files": [
+    "lib"
+  ],
+  "devDependencies": {
+    "@types/draft-js": "^0.11.10",
+    "@types/styled-components": "^5.1.26",
+    "babel-plugin-file-loader": "^2.0.0",
+    "babel-plugin-inline-react-svg": "^2.0.1"
+  }
+}