@kids-reporter/draft-renderer 0.4.3 → 0.4.5

package/lib/block-render-map.js

@@ -3,14 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.blockRenderMapForInfoBoxWithHeaderBorder = exports.blockRenderMapForInfoBox = exports.blockRenderMapForAnnotation = exports.blockRenderMap = void 0;
+exports.blockRenderMapForIntroduction = exports.blockRenderMapForInfoBoxWithHeaderBorder = exports.blockRenderMapForInfoBox = exports.blockRenderMapForAnnotation = exports.blockRenderMap = void 0;
 var _immutable = _interopRequireDefault(require("immutable"));
 var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _draftJs = require("draft-js");
+var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
 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 }; }
+// @ts-ignore pkg does not contain ts header file
+
 const ParagraphBlock = _styledComponents.default.div`
   width: 100%;
   max-width: 700px;
@@ -21,8 +24,10 @@ const ParagraphBlock = _styledComponents.default.div`
   letter-spacing: 0.9px;
   line-height: 2;
 
-  padding-left: 15px;
-  padding-right: 15px;
+  ${_mediaQuery.default.mobileOnly`
+    padding-left: 15px;
+    padding-right: 15px;
+  `}
 `;
 function Paragraph({
   className,
@@ -39,8 +44,6 @@ const HeadingBlock = _styledComponents.default.div`
   width: 100%;
   max-width: 700px;
   margin: 45px auto 20px auto;
-  padding-left: 15px;
-  padding-right: 15px;
 
   h2,
   h3,
@@ -64,6 +67,11 @@ const HeadingBlock = _styledComponents.default.div`
   h5 {
     font-size: 20px;
   }
+
+  ${_mediaQuery.default.mobileOnly`
+    padding-left: 15px;
+    padding-right: 15px;
+  `}
 `;
 function Heading({
   className,
@@ -138,6 +146,30 @@ const _blockRenderMap = _immutable.default.Map({
 });
 const blockRenderMap = _draftJs.DefaultDraftBlockRenderMap.merge(_blockRenderMap);
 exports.blockRenderMap = blockRenderMap;
+const ParagraphForIntroduction = (0, _styledComponents.default)(Paragraph)`
+  color: #575757;
+`;
+const OrderdedListForIntroduction = (0, _styledComponents.default)(OrderdedList)`
+  color: #575757;
+`;
+const UnorderdedListForIntroduction = (0, _styledComponents.default)(UnorderdedList)`
+  color: #575757;
+`;
+const blockRenderMapForIntroduction = _draftJs.DefaultDraftBlockRenderMap.merge(_immutable.default.Map({
+  'ordered-list-item': {
+    element: 'li',
+    wrapper: /*#__PURE__*/_react.default.createElement(OrderdedListForIntroduction, null)
+  },
+  'unordered-list-item': {
+    element: 'li',
+    wrapper: /*#__PURE__*/_react.default.createElement(UnorderdedListForIntroduction, null)
+  },
+  unstyled: {
+    element: 'div',
+    wrapper: /*#__PURE__*/_react.default.createElement(ParagraphForIntroduction, null)
+  }
+}));
+exports.blockRenderMapForIntroduction = blockRenderMapForIntroduction;
 const HeadingForAnnotation = (0, _styledComponents.default)(Heading)`
   margin: 0 auto 27px auto;
 `;

package/lib/block-renderers/blockquote.js

@@ -75,15 +75,15 @@ const ArticleBodyContainer = _styledComponents.default.div`
     margin-right: auto;
   `}
 `;
-var BlockquoteType = /*#__PURE__*/function (BlockquoteType) {
-  BlockquoteType["borderLeft"] = "border_left";
-  BlockquoteType["quoteLeft"] = "quote_left";
-  return BlockquoteType;
-}(BlockquoteType || {});
+var BlockquoteTypeEnum = /*#__PURE__*/function (BlockquoteTypeEnum) {
+  BlockquoteTypeEnum["borderLeft"] = "border_left";
+  BlockquoteTypeEnum["quoteLeft"] = "quote_left";
+  return BlockquoteTypeEnum;
+}(BlockquoteTypeEnum || {});
 function BlockquoteInArticleBody({
   className = '',
   data = {
-    type: BlockquoteType.borderLeft,
+    type: BlockquoteTypeEnum.borderLeft,
     text: ''
   }
 }) {
@@ -91,7 +91,7 @@ function BlockquoteInArticleBody({
     type,
     text
   } = data;
-  const BlockQuote = type === BlockquoteType.quoteLeft ? QuoteLeftBlockquote : BorderLeftBlockquote;
+  const BlockQuote = type === BlockquoteTypeEnum.quoteLeft ? QuoteLeftBlockquote : BorderLeftBlockquote;
   return /*#__PURE__*/_react.default.createElement(ArticleBodyContainer, {
     className: className
   }, /*#__PURE__*/_react.default.createElement(BlockQuote, {

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

@@ -50,7 +50,7 @@ function ImageBlock({
     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));
+  }), desc && /*#__PURE__*/_react.default.createElement(FigureCaption, null, desc));
   return imgBlock;
 }
 const ArticleBodyContainer = _styledComponents.default.div`
@@ -59,6 +59,12 @@ const ArticleBodyContainer = _styledComponents.default.div`
     margin: 0;
   }
 
+  &::after {
+    content: '';
+    display: table;
+    clear: both;
+  }
+
   max-width: 100%;
   margin: 0 auto 27px auto;
 
@@ -72,20 +78,34 @@ const ArticleBodyContainer = _styledComponents.default.div`
 
   ${props => {
   switch (props.$alignment) {
+    case 'paragraph-width':
+      return `
+          ${_index.theme.breakpoint.xl} {
+            figure {
+              width: 700px;
+              margin-left: auto;
+              margin-right: auto;
+            }
+          }
+        `;
     case 'right':
       return `
           ${_index.theme.breakpoint.xl} {
-            width: 361px;
-            float: right;
-            margin: 5px 0px 5px 27px;
+            figure {
+              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;
+            figure {
+              width: 361px;
+              float: left;
+              margin: 5px 27px 5px 0px;
+            }
           }
         `;
   }
@@ -110,15 +130,40 @@ const InfoBoxContainer = _styledComponents.default.div`
   margin-bottom: 30px;
   width: fit-content;
 
+  &::after {
+    content: '';
+    display: table;
+    clear: both;
+  }
+
   ${props => {
   switch (props.$alignment) {
-    case 'center':
+    case 'paragraph-width':
       {
-        return `margin-left: auto; margin-right: auto;`;
+        return `
+          figure {
+            margin-left: auto;
+            margin-right: auto;
+          }
+          `;
+      }
+    case 'left':
+      {
+        return `
+          figure {
+            max-width: 50%; 
+            margin-right: auto;
+          }
+          `;
       }
     case 'right':
       {
-        return `margin-left: auto`;
+        return `
+          figure {
+            max-width: 50%;
+            margin-left: auto;
+          }
+        `;
       }
   }
 }}

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

@@ -16,12 +16,12 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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 }; }
 // @ts-ignore pkg does not contain ts header file
-var InfoBoxType = /*#__PURE__*/function (InfoBoxType) {
-  InfoBoxType["newsChargeStation"] = "news-charge-station";
-  InfoBoxType["headerBorder"] = "header-border";
-  InfoBoxType["boxBorder"] = "box-border";
-  return InfoBoxType;
-}(InfoBoxType || {});
+var InfoBoxTypeEnum = /*#__PURE__*/function (InfoBoxTypeEnum) {
+  InfoBoxTypeEnum["newsChargeStation"] = "news-charge-station";
+  InfoBoxTypeEnum["headerBorder"] = "header-border";
+  InfoBoxTypeEnum["boxBorder"] = "box-border";
+  return InfoBoxTypeEnum;
+}(InfoBoxTypeEnum || {});
 const containerStyles = (0, _styledComponents.css)`
   padding: 40px;
   border-radius: 30px;
@@ -158,18 +158,18 @@ function InfoBoxInArticleBody({
   let Component;
   let blockRenderMap = _blockRenderMap.blockRenderMapForInfoBox;
   switch (type) {
-    case InfoBoxType.headerBorder:
+    case InfoBoxTypeEnum.headerBorder:
       {
         Component = HeaderBorder;
         blockRenderMap = _blockRenderMap.blockRenderMapForInfoBoxWithHeaderBorder;
         break;
       }
-    case InfoBoxType.boxBorder:
+    case InfoBoxTypeEnum.boxBorder:
       {
         Component = BoxBorder;
         break;
       }
-    case InfoBoxType.newsChargeStation:
+    case InfoBoxTypeEnum.newsChargeStation:
     default:
       {
         Component = NewsChargeStation;

package/lib/draft-renderer.js

@@ -3,6 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.ArticleBodyDraftRenderer = void 0;
+exports.ArticleIntroductionDraftRenderer = ArticleIntroductionDraftRenderer;
 exports.DraftRenderer = DraftRenderer;
 var _react = _interopRequireDefault(require("react"));
 var _draftJs = require("draft-js");
@@ -35,4 +37,25 @@ function DraftRenderer({
     ,
     onChange: () => {}
   }));
+}
+const ArticleBodyDraftRenderer = DraftRenderer;
+exports.ArticleBodyDraftRenderer = ArticleBodyDraftRenderer;
+function ArticleIntroductionDraftRenderer({
+  rawContentState,
+  themeColor = _index2.ThemeColorEnum.RED
+}) {
+  const contentState = (0, _draftJs.convertFromRaw)(rawContentState);
+  const editorState = _draftJs.EditorState.createWithContent(contentState, _index.decorator);
+  return /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
+    theme: {
+      themeColor
+    }
+  }, /*#__PURE__*/_react.default.createElement(_draftJs.Editor, {
+    editorState: editorState,
+    blockRenderMap: _blockRenderMap.blockRenderMapForIntroduction,
+    readOnly: true
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    ,
+    onChange: () => {}
+  }));
 }

package/lib/entity-decorators/annotation-decorator.js

@@ -49,7 +49,7 @@ const ArrowIcon = _styledComponents.default.span`
     height: 6.5px;
     top: 5px;
     right: 5px;
-    transform: ${props => props.$showContent ? 'rotate(45deg)' : 'rotate(-45deg)'};
+    transform: ${props => props.$showContent ? 'rotate(-45deg)' : 'rotate(45deg)'};
     display: block;
     position: absolute;
     transition: transform 200ms ease 0s;
@@ -64,7 +64,7 @@ const ArrowIcon = _styledComponents.default.span`
     height: 6.5px;
     top: 5px;
     left: 5px;
-    transform: ${props => props.$showContent ? 'rotate(-45deg)' : 'rotate(45deg)'};
+    transform: ${props => props.$showContent ? 'rotate(45deg)' : 'rotate(-45deg)'};
     display: block;
     position: absolute;
     transition: transform 200ms ease 0s;

package/lib/index.js

@@ -3,6 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "ArticleBodyDraftRenderer", {
+  enumerable: true,
+  get: function () {
+    return _draftRenderer.ArticleBodyDraftRenderer;
+  }
+});
+Object.defineProperty(exports, "ArticleIntroductionDraftRenderer", {
+  enumerable: true,
+  get: function () {
+    return _draftRenderer.ArticleIntroductionDraftRenderer;
+  }
+});
 Object.defineProperty(exports, "DraftRenderer", {
   enumerable: true,
   get: function () {
@@ -40,6 +52,8 @@ var _blockRenderMap = require("./block-render-map");
 var _blockRenderers = require("./block-renderers");
 var _index = require("./entity-decorators/index");
 var _default = {
+  ArticleBodyDraftRenderer: _draftRenderer.ArticleBodyDraftRenderer,
+  ArticleIntroductionDraftRenderer: _draftRenderer.ArticleIntroductionDraftRenderer,
   DraftRenderer: _draftRenderer.DraftRenderer,
   atomicBlockRenderer: _blockRendererFn.atomicBlockRenderer,
   blockRenderMap: _blockRenderMap.blockRenderMap,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kids-reporter/draft-renderer",
-  "version": "0.4.3",
+  "version": "0.4.5",
   "description": "",
   "main": "lib/index.js",
   "scripts": {
@@ -26,13 +26,13 @@
     "@twreporter/core": "^1.10.0",
     "babel-loader": "^8.2.5",
     "body-scroll-lock": "3.1.5",
-    "draft-js": "^0.11.7",
     "html-webpack-plugin": "^5.5.0",
     "node-html-parser": "^6.1.5",
     "webpack": "^5.72.1",
     "webpack-cli": "^4.9.2"
   },
   "peerDependencies": {
+    "draft-js": "^0.11.7",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "styled-components": "5.3.5"