@kids-reporter/draft-renderer 0.4.1 → 0.4.3

package/lib/block-render-map.js

@@ -20,6 +20,9 @@ const ParagraphBlock = _styledComponents.default.div`
   color: #3a4f66;
   letter-spacing: 0.9px;
   line-height: 2;
+
+  padding-left: 15px;
+  padding-right: 15px;
 `;
 function Paragraph({
   className,
@@ -36,6 +39,8 @@ const HeadingBlock = _styledComponents.default.div`
   width: 100%;
   max-width: 700px;
   margin: 45px auto 20px auto;
+  padding-left: 15px;
+  padding-right: 15px;
 
   h2,
   h3,
@@ -153,6 +158,9 @@ const ParagraphForAnnotation = (0, _styledComponents.default)(Paragraph)`
   margin-bottom: 20px;
 `;
 const _blockRenderMapForAnnotation = _immutable.default.Map({
+  atomic: {
+    element: 'div'
+  },
   'header-four': {
     element: 'h4',
     wrapper: /*#__PURE__*/_react.default.createElement(HeadingForAnnotation, null)

package/lib/block-renderers/blockquote.js

@@ -7,12 +7,18 @@ exports.BlockquoteInArticleBody = BlockquoteInArticleBody;
 exports.BorderLeftBlockquote = BorderLeftBlockquote;
 exports.QuoteLeftBlockquote = QuoteLeftBlockquote;
 var _react = _interopRequireDefault(require("react"));
+var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _index = require("../utils/index");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+// @ts-ignore pkg does not contain ts header file
+
 const BorderLeftContainer = _styledComponents.default.blockquote`
   margin: 0;
   padding-left: 30px;
-  border-left: 4px solid #27b5f7;
+  border-left: 4px solid ${({
+  theme
+}) => (0, _index.getColorHex)(theme === null || theme === void 0 ? void 0 : theme.themeColor)};
 `;
 function BorderLeftBlockquote({
   text
@@ -40,11 +46,13 @@ const SvgBlock = _styledComponents.default.div`
 
   svg {
     width: 36px;
+    fill: ${({
+  theme
+}) => (0, _index.getColorHex)(theme === null || theme === void 0 ? void 0 : theme.themeColor)};
   }
 `;
 function QuoteSvg() {
   return /*#__PURE__*/_react.default.createElement(SvgBlock, null, /*#__PURE__*/_react.default.createElement("svg", {
-    fill: "#27B5F7",
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 50 50",
     "aria-hidden": "true"
@@ -60,6 +68,12 @@ function QuoteLeftBlockquote({
 const ArticleBodyContainer = _styledComponents.default.div`
   max-width: 700px;
   margin: 0 auto 27px auto;
+
+  ${_mediaQuery.default.mobileOnly`
+    width: calc(100vw - 30px);
+    margin-left: auto;
+    margin-right: auto;
+  `}
 `;
 var BlockquoteType = /*#__PURE__*/function (BlockquoteType) {
   BlockquoteType["borderLeft"] = "border_left";

package/lib/block-renderers/embedded-code-block.js

@@ -6,11 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.EmbeddedCodeBlock = exports.Caption = exports.Block = void 0;
 exports.EmbeddedCodeInArticleBody = EmbeddedCodeInArticleBody;
 var _react = _interopRequireWildcard(require("react"));
+var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _nodeHtmlParser = require("node-html-parser");
 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; }
+// @ts-ignore pkg does not contain ts header file
+
 const Block = _styledComponents.default.div`
   position: relative;
   white-space: normal;
@@ -109,6 +112,12 @@ exports.EmbeddedCodeBlock = EmbeddedCodeBlock;
 const ArticleBodyContainer = _styledComponents.default.div`
   max-width: 700px;
   margin: 0 auto 27px auto;
+
+  ${_mediaQuery.default.mobileOnly`
+    width: calc(100vw - 30px);
+    margin-left: auto;
+    margin-right: auto;
+  `}
 `;
 function EmbeddedCodeInArticleBody({
   className = '',

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

@@ -6,22 +6,34 @@ Object.defineProperty(exports, "__esModule", {
 exports.InfoBoxInArticleBody = InfoBoxInArticleBody;
 var _draftJs = require("draft-js");
 var _react = _interopRequireDefault(require("react"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _blockRenderMap = require("../block-render-map");
 var _imageBlock = require("../block-renderers/image-block");
 var _index = require("../entity-decorators/index");
+var _index2 = require("../utils/index");
+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
 var InfoBoxType = /*#__PURE__*/function (InfoBoxType) {
   InfoBoxType["newsChargeStation"] = "news-charge-station";
   InfoBoxType["headerBorder"] = "header-border";
   InfoBoxType["boxBorder"] = "box-border";
   return InfoBoxType;
 }(InfoBoxType || {});
-const NewsChargeStationContainer = _styledComponents.default.div`
+const containerStyles = (0, _styledComponents.css)`
   padding: 40px;
-  background-color: #fffcf4;
-  position: relative;
   border-radius: 30px;
+  position: relative;
+
+  ${_mediaQuery.default.mobileOnly`
+    padding: 20px;
+  `}
+`;
+const NewsChargeStationContainer = _styledComponents.default.div`
+  ${containerStyles}
+  background-color: #fffcf4;
 
   &::before {
     content: '';
@@ -41,17 +53,46 @@ function NewsChargeStation({
   return /*#__PURE__*/_react.default.createElement(NewsChargeStationContainer, null, children);
 }
 const HeaderBorderContainer = _styledComponents.default.div`
-  padding: 40px;
-  background-color: #d2f5ff;
-  position: relative;
-  border-radius: 30px;
+  ${({
+  theme
+}) => {
+  let logoColor;
+  let bgColor;
+  switch (theme === null || theme === void 0 ? void 0 : theme.themeColor) {
+    case _index2.ThemeColorEnum.YELLOW:
+      {
+        logoColor = 'red';
+        bgColor = '#fff0d2';
+        break;
+      }
+    case _index2.ThemeColorEnum.RED:
+      {
+        logoColor = 'blue';
+        bgColor = '#ffd2d2';
+        break;
+      }
+    case _index2.ThemeColorEnum.BLUE:
+    default:
+      {
+        logoColor = 'yellow';
+        bgColor = '#3a4f66';
+        break;
+      }
+  }
+  return `
+      background-color: ${bgColor};
+      &::before {
+        background-image: url(https://kids.twreporter.org/wp-content/themes/blocksy-child/assets/js/components/rpjr-box/box2_${logoColor}.png);
+      }
+      `;
+}}
+
+  ${containerStyles}
 
   &::before {
     content: '';
     width: 120px;
     height: 120px;
-    /* TODO: change image url */
-    background-image: url(https://kids.twreporter.org/wp-content/themes/blocksy-child/assets/js/components/rpjr-box/box2_yellow.png);
     background-size: contain;
     position: absolute;
     bottom: 10px;
@@ -64,19 +105,22 @@ function HeaderBorder({
   return /*#__PURE__*/_react.default.createElement(HeaderBorderContainer, null, children);
 }
 const BoxBorderContainer = _styledComponents.default.div`
-  padding: 40px;
+  ${containerStyles}
   background-color: #ebebeb;
-  position: relative;
-  border-radius: 30px;
   border: 3px solid #232323;
   overflow: hidden;
 
+  ${({
+  theme
+}) => `
+    &::before {
+      background-image: url(https://kids.twreporter.org/wp-content/themes/blocksy-child/assets/js/components/rpjr-box/box2_${theme === null || theme === void 0 ? void 0 : theme.themeColor}-b.png);
+    }`}
+
   &::before {
     content: '';
     width: 100px;
     height: 100px;
-    /* TODO: change image url */
-    background-image: url(https://kids.twreporter.org/wp-content/themes/blocksy-child/assets/js/components/rpjr-box/box2_blue-b.png);
     background-size: contain;
     position: absolute;
     bottom: 0;
@@ -91,6 +135,15 @@ function BoxBorder({
 const ArticleBodyContainer = _styledComponents.default.div`
   max-width: 700px;
   margin: 60px auto;
+
+  ${_mediaQuery.default.mobileOnly`
+    width: calc(100vw - 30px);
+    margin-left: auto;
+    margin-right: auto;
+  `}
+`;
+const EditorContainer = _styledComponents.default.div`
+  position: relative;
 `;
 function InfoBoxInArticleBody({
   className,
@@ -125,7 +178,7 @@ function InfoBoxInArticleBody({
   }
   return /*#__PURE__*/_react.default.createElement(ArticleBodyContainer, {
     className: className
-  }, /*#__PURE__*/_react.default.createElement(Component, null, /*#__PURE__*/_react.default.createElement(_draftJs.Editor, {
+  }, /*#__PURE__*/_react.default.createElement(Component, null, /*#__PURE__*/_react.default.createElement(EditorContainer, null, /*#__PURE__*/_react.default.createElement(_draftJs.Editor, {
     blockRenderMap: blockRenderMap,
     blockRendererFn: blockRendererFn,
     editorState: editorState,
@@ -133,7 +186,7 @@ function InfoBoxInArticleBody({
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     ,
     onChange: () => {}
-  })));
+  }))));
 }
 function AtomicBlock(props) {
   const entity = props.contentState.getEntity(props.block.getEntityAt(0));

package/lib/block-renderers/multimedia.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _index = require("../utils/index");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 // @ts-ignore @twreporter/core does not provide ts header file
 
@@ -60,7 +61,9 @@ const mockup = {
 const Caption = _styledComponents.default.figcaption`
   color: #494949;
   &::after {
-    border-color: #d0a67d;
+    border-color: ${({
+  theme
+}) => (0, _index.getColorHex)(theme === null || theme === void 0 ? void 0 : theme.themeColor)};
   }
 
   line-height: 1.36;

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

@@ -9,6 +9,7 @@ var _multimedia = _interopRequireDefault(require("./multimedia"));
 var _react = _interopRequireWildcard(require("react"));
 var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _index = require("../utils/index");
 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 }; }
@@ -386,7 +387,9 @@ const SlideshowFlexBox = _styledComponents.default.div`
     border-color: #d8d8d8;
   }
   ${ImageNumberCircle} {
-    background-color: #d0a67d;
+    background-color: ${({
+  theme
+}) => (0, _index.getColorHex)(theme === null || theme === void 0 ? void 0 : theme.themeColor)};
     &::after {
       border-color: #fff;
     }
@@ -395,7 +398,9 @@ const SlideshowFlexBox = _styledComponents.default.div`
     color: #fff;
   }
   ${SlideMask} {
-    background-color: #d0a67d;
+    background-color: ${({
+  theme
+}) => (0, _index.getColorHex)(theme === null || theme === void 0 ? void 0 : theme.themeColor)};
   }
 
   width: 100%;

package/lib/draft-renderer.js

@@ -9,17 +9,24 @@ var _draftJs = require("draft-js");
 var _blockRendererFn = require("./block-renderer-fn");
 var _blockRenderMap = require("./block-render-map");
 var _index = require("./entity-decorators/index");
+var _index2 = require("./utils/index");
+var _styledComponents = require("styled-components");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const blockRendererFn = block => {
   const atomicBlockObj = (0, _blockRendererFn.atomicBlockRenderer)(block);
   return atomicBlockObj;
 };
 function DraftRenderer({
-  rawContentState
+  rawContentState,
+  themeColor = _index2.ThemeColorEnum.RED
 }) {
   const contentState = (0, _draftJs.convertFromRaw)(rawContentState);
   const editorState = _draftJs.EditorState.createWithContent(contentState, _index.decorator);
-  return /*#__PURE__*/_react.default.createElement(_draftJs.Editor, {
+  return /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
+    theme: {
+      themeColor
+    }
+  }, /*#__PURE__*/_react.default.createElement(_draftJs.Editor, {
     editorState: editorState,
     blockRenderMap: _blockRenderMap.blockRenderMap,
     blockRendererFn: blockRendererFn,
@@ -27,5 +34,5 @@ function DraftRenderer({
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     ,
     onChange: () => {}
-  });
+  }));
 }

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

@@ -9,17 +9,22 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _draftJs = require("draft-js");
 var _blockRenderMap = require("../block-render-map");
 var _index = require("../entity-decorators/index");
+var _index2 = require("../utils/index");
 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 AnnotationWrapper = _styledComponents.default.span`
   display: inline-block;
   cursor: pointer;
-  color: #27b5f7;
+  color: ${({
+  theme
+}) => (0, _index2.getColorHex)(theme === null || theme === void 0 ? void 0 : theme.themeColor)};
 `;
 const AnnotationBody = _styledComponents.default.div`
   margin-bottom: 10px;
-  border-top: 2px solid #27b5f7;
+  border-top: 2px solid ${({
+  theme
+}) => (0, _index2.getColorHex)(theme === null || theme === void 0 ? void 0 : theme.themeColor)};
   background-color: #fff;
   padding: 25px 25px;
 `;
@@ -36,7 +41,9 @@ const ArrowIcon = _styledComponents.default.span`
   top: -1px;
 
   &::before {
-    background-color: #27b5f7;
+    background-color: ${({
+  theme
+}) => (0, _index2.getColorHex)(theme === null || theme === void 0 ? void 0 : theme.themeColor)};
     content: '';
     width: 2px;
     height: 6.5px;
@@ -49,7 +56,9 @@ const ArrowIcon = _styledComponents.default.span`
   }
 
   &::after {
-    background-color: #27b5f7;
+    background-color: ${({
+  theme
+}) => (0, _index2.getColorHex)(theme === null || theme === void 0 ? void 0 : theme.themeColor)};
     content: '';
     width: 2px;
     height: 6.5px;

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

@@ -6,10 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.linkDecorator = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _index = require("../utils/index");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const LinkWrapper = _styledComponents.default.a`
   text-decoration: underline;
-  color: #27b5f7;
+  color: ${({
+  theme
+}) => (0, _index.getColorHex)(theme === null || theme === void 0 ? void 0 : theme.themeColor)};
   transition: color 0.1s ease-in;
 
   &:hover {

package/lib/utils/color.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ThemeColorEnum = void 0;
+exports.getColorHex = getColorHex;
+var _constants = require("./constants");
+let ThemeColorEnum = /*#__PURE__*/function (ThemeColorEnum) {
+  ThemeColorEnum["RED"] = "red";
+  ThemeColorEnum["BLUE"] = "blue";
+  ThemeColorEnum["YELLOW"] = "yellow";
+  return ThemeColorEnum;
+}({});
+exports.ThemeColorEnum = ThemeColorEnum;
+function getColorHex(themeColor) {
+  switch (themeColor) {
+    case ThemeColorEnum.RED:
+      {
+        return _constants.colorHex.red;
+      }
+    case ThemeColorEnum.YELLOW:
+      {
+        return _constants.colorHex.yellow;
+      }
+    case ThemeColorEnum.BLUE:
+    default:
+      {
+        return _constants.colorHex.blue;
+      }
+  }
+}

package/lib/utils/constants.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.colorHex = void 0;
+const colorHex = {
+  blue: '#27B5F7',
+  red: '#F76977',
+  yellow: '#F8C341'
+};
+exports.colorHex = colorHex;

package/lib/utils/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ThemeColorEnum", {
+  enumerable: true,
+  get: function () {
+    return _color.ThemeColorEnum;
+  }
+});
+Object.defineProperty(exports, "colorHex", {
+  enumerable: true,
+  get: function () {
+    return _constants.colorHex;
+  }
+});
+Object.defineProperty(exports, "getColorHex", {
+  enumerable: true,
+  get: function () {
+    return _color.getColorHex;
+  }
+});
+var _constants = require("./constants");
+var _color = require("./color");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kids-reporter/draft-renderer",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "description": "",
   "main": "lib/index.js",
   "scripts": {