@kids-reporter/draft-renderer 0.4.20 → 0.4.22

package/lib/custom-style-fn.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.customStyleFn = void 0;
+const bgColorPrefix = 'BACKGROUND_COLOR_';
+const fontColorPrefix = 'FONT_COLOR_';
+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,10 +10,11 @@ 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);
@@ -21,10 +22,10 @@ const blockRendererFn = block => {
 };
 function DraftRenderer({
   rawContentState,
-  themeColor = _index3.ThemeColorEnum.RED
+  themeColor = _index2.ThemeColorEnum.RED
 }) {
   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
@@ -33,6 +34,7 @@ function DraftRenderer({
     editorState: editorState,
     blockRenderMap: _index.default.content,
     blockRendererFn: blockRendererFn,
+    customStyleFn: _customStyleFn.customStyleFn,
     readOnly: true
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     ,
@@ -43,10 +45,10 @@ const ArticleBodyDraftRenderer = DraftRenderer;
 exports.ArticleBodyDraftRenderer = ArticleBodyDraftRenderer;
 function ArticleIntroductionDraftRenderer({
   rawContentState,
-  themeColor = _index3.ThemeColorEnum.RED
+  themeColor = _index2.ThemeColorEnum.RED
 }) {
   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
@@ -54,6 +56,7 @@ function ArticleIntroductionDraftRenderer({
   }, /*#__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,10 +65,10 @@ function ArticleIntroductionDraftRenderer({
 }
 function ProjectContentDraftRenderer({
   rawContentState,
-  themeColor = _index3.ThemeColorEnum.BLUE
+  themeColor = _index2.ThemeColorEnum.BLUE
 }) {
   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
@@ -74,6 +77,7 @@ function ProjectContentDraftRenderer({
     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.20",
+  "version": "0.4.22",
   "description": "",
   "main": "lib/index.js",
   "scripts": {