@kids-reporter/draft-renderer 0.4.21 → 0.4.23

package/lib/block-render-maps/annotation.js

@@ -14,15 +14,22 @@ const HeadingForAnnotation = (0, _styledComponents.default)(_articleContent.Head
   margin: 0 auto 27px auto;
 `;
 const ListForAnnotation = (0, _styledComponents.default)(_articleContent.List)`
+  color: #494949;
+
   li {
-    font-size: 16px;
+    font-size: ${({
+  theme
+}) => (theme === null || theme === void 0 ? void 0 : theme.fontSizeLevel) === 'normal' ? '16px' : '20px'};
   }
 `;
 const ParagraphForAnnotation = (0, _styledComponents.default)(_articleContent.Paragraph)`
   /* overwrite css */
-  font-size: 16px;
+  font-size: ${({
+  theme
+}) => (theme === null || theme === void 0 ? void 0 : theme.fontSizeLevel) === 'normal' ? '16px' : '20px'};
   font-weight: 400;
   margin-bottom: 20px;
+  color: #494949;
 `;
 const _blockRenderMapForAnnotation = _immutable.default.Map({
   atomic: {

package/lib/block-render-maps/article-brief.js

@@ -11,6 +11,7 @@ var _draftJs = require("draft-js");
 var _articleContent = require("./article-content");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const ParagraphForIntroduction = (0, _styledComponents.default)(_articleContent.Paragraph)`
+  font-size: 20px;
   color: #575757;
 `;
 const ListForIntroduction = (0, _styledComponents.default)(_articleContent.List)`

package/lib/block-render-maps/article-content.js

@@ -13,7 +13,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const Paragraph = _styledComponents.default.div`
   width: 100%;
   max-width: 700px;
-  font-size: 18px;
+  font-size: ${({
+  theme
+}) => (theme === null || theme === void 0 ? void 0 : theme.fontSizeLevel) === 'normal' ? '18px' : '22px'};
   font-weight: 400;
   color: #3a4f66;
   letter-spacing: 0.9px;
@@ -46,19 +48,27 @@ const Heading = _styledComponents.default.div`
   }
 
   h2 {
-    font-size: 35px;
+    font-size: ${({
+  theme
+}) => (theme === null || theme === void 0 ? void 0 : theme.fontSizeLevel) === 'normal' ? '35px' : '39px'};
   }
 
   h3 {
-    font-size: 30px;
+    font-size: ${({
+  theme
+}) => (theme === null || theme === void 0 ? void 0 : theme.fontSizeLevel) === 'normal' ? '30px' : '34px'};
   }
 
   h4 {
-    font-size: 25px;
+    font-size: ${({
+  theme
+}) => (theme === null || theme === void 0 ? void 0 : theme.fontSizeLevel) === 'normal' ? '25px' : '29px'};
   }
 
   h5 {
-    font-size: 20px;
+    font-size: ${({
+  theme
+}) => (theme === null || theme === void 0 ? void 0 : theme.fontSizeLevel) === 'normal' ? '20px' : '24px'};
   }
 
   ${_mediaQuery.mediaQuery.smallOnly} {
@@ -71,7 +81,9 @@ const List = _styledComponents.default.ol`
   width: 100%;
   max-width: 700px;
   margin: 0 auto 27px auto;
-  font-size: 18px;
+  font-size: ${({
+  theme
+}) => (theme === null || theme === void 0 ? void 0 : theme.fontSizeLevel) === 'normal' ? '18px' : '22px'};
   line-height: 2;
   letter-spacing: 0.9px;
   color: #3a4f66;

package/lib/block-render-maps/info-box.js

@@ -13,19 +13,34 @@ 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 }; }
 const HeadingForInfoBox = (0, _styledComponents.default)(_articleContent.Heading)`
-  margin-top: 30px;
-  margin-bottom: 30px;
+  margin-top: 0px;
+  margin-bottom: 20px;
+
+  h4 {
+    font-size: 24px;
+  }
 `;
 const ListForInfoBox = (0, _styledComponents.default)(_articleContent.List)`
+  padding-left: 2rem;
+  margin-bottom: 20px;
+
+  color: #232323;
   li {
-    font-size: 16px;
+    font-size: ${({
+  theme
+}) => (theme === null || theme === void 0 ? void 0 : theme.fontSizeLevel) === 'normal' ? '16px' : '20px'};
+    line-height: 1.5;
   }
 `;
 const ParagraphForInfoBox = (0, _styledComponents.default)(_articleContent.Paragraph)`
   /* overwrite css */
-  font-size: 16px;
+  font-size: ${({
+  theme
+}) => (theme === null || theme === void 0 ? void 0 : theme.fontSizeLevel) === 'normal' ? '16px' : '20px'};
   font-weight: 400;
   margin-bottom: 20px;
+  line-height: 1.5;
+  color: #232323;
 `;
 const Atomic = _styledComponents.default.div`
   /* reset figure default styles */

package/lib/block-renderers/blockquote.js

@@ -29,15 +29,21 @@ const QuoteLeftContainer = _styledComponents.default.blockquote`
   background-color: #f4f4f4;
   display: flex;
   border-radius: 20px;
+
+  ${_mediaQuery.mediaQuery.smallOnly} {
+    padding: 20px;
+  }
 `;
 const QuoteText = _styledComponents.default.p`
   margin: 0;
   word-break: break-word;
-  font-size: 18px;
+  font-size: ${({
+  theme
+}) => (theme === null || theme === void 0 ? void 0 : theme.fontSizeLevel) === 'normal' ? '18px' : '22px'};
   font-weight: 500;
   letter-spacing: 0.9px;
   line-height: 2;
-  color: #3a4f66;
+  color: #232323;
 `;
 const SvgBlock = _styledComponents.default.div`
   margin-right: 16px;

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

@@ -25,7 +25,9 @@ const Block = _styledComponents.default.div`
 `;
 exports.Block = Block;
 const Caption = _styledComponents.default.div`
-  font-size: 14px;
+  font-size: ${({
+  theme
+}) => (theme === null || theme === void 0 ? void 0 : theme.fontSizeLevel) === 'normal' ? '14px' : '18px'};
   line-height: 1.43;
   letter-spacing: 0.4px;
   color: #808080;

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

@@ -16,7 +16,9 @@ const Figure = _styledComponents.default.figure`
 const FigureCaption = _styledComponents.default.figcaption`
   width: fit-content;
   max-width: 100%;
-  font-size: 14px;
+  font-size: ${({
+  theme
+}) => (theme === null || theme === void 0 ? void 0 : theme.fontSizeLevel) === 'normal' ? '14px' : '18px'};
   margin-left: auto;
   margin-right: auto;
   margin-top: 0.5em;

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

@@ -22,12 +22,12 @@ var InfoBoxTypeEnum = /*#__PURE__*/function (InfoBoxTypeEnum) {
   return InfoBoxTypeEnum;
 }(InfoBoxTypeEnum || {});
 const containerStyles = (0, _styledComponents.css)`
-  padding: 40px;
+  padding: 40px 40px 20px 40px;
   border-radius: 30px;
   position: relative;
 
   ${_mediaQuery.mediaQuery.smallOnly} {
-    padding: 20px;
+    padding: 20px 20px 0px 20px;
   }
 `;
 const NewsChargeStationContainer = _styledComponents.default.div`

package/lib/block-renderers/multimedia.js

@@ -67,7 +67,9 @@ const Caption = _styledComponents.default.figcaption`
   line-height: 1.36;
   letter-spacing: 0.5px;
   font-weight: normal;
-  font-size: 14px;
+  font-size: ${({
+  theme
+}) => (theme === null || theme === void 0 ? void 0 : theme.fontSizeLevel) === 'normal' ? '14px' : '18px'};
   margin-bottom: 30px;
 
   /* border-bottom of caption */

package/lib/custom-style-fn.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.fontColorPrefix = exports.default = exports.customStyleFn = exports.bgColorPrefix = void 0;
+const bgColorPrefix = 'BACKGROUND_COLOR_';
+exports.bgColorPrefix = bgColorPrefix;
+const fontColorPrefix = 'FONT_COLOR_';
+exports.fontColorPrefix = fontColorPrefix;
+const customStyleFn = style => {
+  return style.reduce((cssObject = {}, styleName) => {
+    if (styleName !== null && styleName !== void 0 && styleName.startsWith(bgColorPrefix)) {
+      cssObject['backgroundColor'] = styleName.split(bgColorPrefix)[1];
+    }
+    if (styleName !== null && styleName !== void 0 && styleName.startsWith(fontColorPrefix)) {
+      cssObject['color'] = styleName.split(fontColorPrefix)[1];
+    }
+    return cssObject;
+  }, {});
+};
+exports.customStyleFn = customStyleFn;
+var _default = customStyleFn;
+exports.default = _default;

package/lib/draft-renderer.js

@@ -10,29 +10,38 @@ exports.ProjectContentDraftRenderer = ProjectContentDraftRenderer;
 var _react = _interopRequireDefault(require("react"));
 var _index = _interopRequireDefault(require("./block-render-maps/index"));
 var _draftJs = require("draft-js");
-var _blockRendererFn = require("./block-renderer-fn");
-var _index2 = require("./entity-decorators/index");
-var _index3 = require("./utils/index");
+var _index2 = require("./utils/index");
 var _styledComponents = require("styled-components");
+var _blockRendererFn = require("./block-renderer-fn");
+var _customStyleFn = require("./custom-style-fn");
+var _index3 = require("./entity-decorators/index");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const blockRendererFn = block => {
   const atomicBlockObj = (0, _blockRendererFn.atomicBlockRenderer)(block);
   return atomicBlockObj;
 };
+var FontSizeLevel = /*#__PURE__*/function (FontSizeLevel) {
+  FontSizeLevel["NORMAL"] = "normal";
+  FontSizeLevel["LARGE"] = "large";
+  return FontSizeLevel;
+}(FontSizeLevel || {});
 function DraftRenderer({
   rawContentState,
-  themeColor = _index3.ThemeColorEnum.RED
+  themeColor = _index2.ThemeColorEnum.RED,
+  fontSizeLevel = FontSizeLevel.NORMAL
 }) {
   const contentState = (0, _draftJs.convertFromRaw)(rawContentState);
-  const editorState = _draftJs.EditorState.createWithContent(contentState, _index2.decorator);
+  const editorState = _draftJs.EditorState.createWithContent(contentState, _index3.decorator);
   return /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
     theme: {
-      themeColor
+      themeColor,
+      fontSizeLevel
     }
   }, /*#__PURE__*/_react.default.createElement(_draftJs.Editor, {
     editorState: editorState,
     blockRenderMap: _index.default.content,
     blockRendererFn: blockRendererFn,
+    customStyleFn: _customStyleFn.customStyleFn,
     readOnly: true
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     ,
@@ -43,17 +52,20 @@ const ArticleBodyDraftRenderer = DraftRenderer;
 exports.ArticleBodyDraftRenderer = ArticleBodyDraftRenderer;
 function ArticleIntroductionDraftRenderer({
   rawContentState,
-  themeColor = _index3.ThemeColorEnum.RED
+  themeColor = _index2.ThemeColorEnum.RED,
+  fontSizeLevel = FontSizeLevel.NORMAL
 }) {
   const contentState = (0, _draftJs.convertFromRaw)(rawContentState);
-  const editorState = _draftJs.EditorState.createWithContent(contentState, _index2.decorator);
+  const editorState = _draftJs.EditorState.createWithContent(contentState, _index3.decorator);
   return /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
     theme: {
-      themeColor
+      themeColor,
+      fontSizeLevel
     }
   }, /*#__PURE__*/_react.default.createElement(_draftJs.Editor, {
     editorState: editorState,
     blockRenderMap: _index.default.brief,
+    customStyleFn: _customStyleFn.customStyleFn,
     readOnly: true
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     ,
@@ -62,18 +74,21 @@ function ArticleIntroductionDraftRenderer({
 }
 function ProjectContentDraftRenderer({
   rawContentState,
-  themeColor = _index3.ThemeColorEnum.BLUE
+  themeColor = _index2.ThemeColorEnum.BLUE,
+  fontSizeLevel = FontSizeLevel.NORMAL
 }) {
   const contentState = (0, _draftJs.convertFromRaw)(rawContentState);
-  const editorState = _draftJs.EditorState.createWithContent(contentState, _index2.decorator);
+  const editorState = _draftJs.EditorState.createWithContent(contentState, _index3.decorator);
   return /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
     theme: {
-      themeColor
+      themeColor,
+      fontSizeLevel
     }
   }, /*#__PURE__*/_react.default.createElement(_draftJs.Editor, {
     editorState: editorState,
     blockRenderMap: _index.default.projectContent,
     blockRendererFn: blockRendererFn,
+    customStyleFn: _customStyleFn.customStyleFn,
     readOnly: true
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     ,

package/lib/index.js

@@ -40,6 +40,12 @@ Object.defineProperty(exports, "blockRenderers", {
     return _blockRenderers.blockRenderers;
   }
 });
+Object.defineProperty(exports, "customStyleFn", {
+  enumerable: true,
+  get: function () {
+    return _customStyleFn.customStyleFn;
+  }
+});
 Object.defineProperty(exports, "decorator", {
   enumerable: true,
   get: function () {
@@ -47,11 +53,12 @@ Object.defineProperty(exports, "decorator", {
   }
 });
 exports.default = void 0;
+var _index = _interopRequireDefault(require("./block-render-maps/index"));
 var _draftRenderer = require("./draft-renderer");
 var _blockRendererFn = require("./block-renderer-fn");
-var _index = _interopRequireDefault(require("./block-render-maps/index"));
 var _blockRenderers = require("./block-renderers");
 var _index2 = require("./entity-decorators/index");
+var _customStyleFn = require("./custom-style-fn");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const blockRenderMap = _index.default.content;
 exports.blockRenderMap = blockRenderMap;
@@ -63,6 +70,7 @@ var _default = {
   atomicBlockRenderer: _blockRendererFn.atomicBlockRenderer,
   blockRenderMap: _index.default.content,
   blockRenderers: _blockRenderers.blockRenderers,
+  customStyleFn: _customStyleFn.customStyleFn,
   decorator: _index2.decorator
 };
 exports.default = _default;

package/package.json

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