@kids-reporter/draft-renderer 0.4.3 → 0.4.4

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/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/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.4",
   "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"