@kids-reporter/draft-editor 0.4.24 → 0.4.25

package/lib/block-renderer-fn.js

@@ -10,6 +10,7 @@ var _image = require("./block-renderers/image");
 var _slideshow = require("./block-renderers/slideshow");
 var _draftRenderer = require("@kids-reporter/draft-renderer");
 const {
+  Divider,
   EmbeddedCodeInArticleBody,
   NewsReading
 } = _draftRenderer.blockRenderers;
@@ -22,6 +23,10 @@ const AtomicBlock = props => {
       {
         return (0, _blockquote.EditableBlockquote)(props);
       }
+    case 'DIVIDER':
+      {
+        return Divider();
+      }
     case 'IMAGE':
       {
         return (0, _image.EditableImage)(props);

package/lib/buttons/bt-names.js

@@ -29,6 +29,7 @@ var _default = {
   infoBox: 'info-box',
   link: 'link',
   slideshow: 'slideshow',
-  newsReading: 'news-reading'
+  newsReading: 'news-reading',
+  divider: 'divider'
 };
 exports.default = _default;

package/lib/buttons/divider.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DividerButton = DividerButton;
+var _react = _interopRequireDefault(require("react"));
+var _draftJs = require("draft-js");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const IconWrapper = _styledComponents.default.span`
+  display: inline-block;
+  position: relative;
+  top: 2px;
+`;
+function DividerButton(props) {
+  const {
+    editorState,
+    onChange,
+    className
+  } = props;
+  const onClick = () => {
+    const contentState = editorState.getCurrentContent();
+    const contentStateWithEntity = contentState.createEntity('DIVIDER', 'IMMUTABLE', {});
+    const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
+    const newEditorState = _draftJs.EditorState.set(editorState, {
+      currentContent: contentStateWithEntity
+    });
+
+    // The third parameter here is a space string, not an empty string
+    // If you set an empty string, you will get an error: Unknown DraftEntity key: null
+    onChange(_draftJs.AtomicBlockUtils.insertAtomicBlock(newEditorState, entityKey, ' '));
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    onClick: onClick,
+    className: className
+  }, /*#__PURE__*/_react.default.createElement(IconWrapper, null, /*#__PURE__*/_react.default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    height: "16",
+    viewBox: "0 0 16 16",
+    width: "16"
+  }, /*#__PURE__*/_react.default.createElement("g", {
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M0 0h16v16H0z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M15 10.501a0.5 0.5 0 0 1 0.496 0.442l0.004 0.059v2.031a2.468 2.468 0 0 1 -2.361 2.466l-0.107 0.003H2.967a2.467 2.467 0 0 1 -2.465 -2.36L0.5 13.032v-2.03a0.5 0.5 0 0 1 0.997 -0.058l0.004 0.059v2.03a1.468 1.468 0 0 0 1.381 1.464l0.086 0.003h10.065a1.468 1.468 0 0 0 1.466 -1.382l0.003 -0.086v-2.031a0.5 0.5 0 0 1 0.5 -0.5zM15.5 7.5a0.5 0.5 0 0 1 0 1H0.5a0.5 0.5 0 0 1 0 -1zM13.029 0.5a2.471 2.471 0 0 1 2.469 2.364l0.003 0.107v2.031a0.5 0.5 0 0 1 -0.997 0.058L14.5 5.003V2.971a1.471 1.471 0 0 0 -1.385 -1.468L13.029 1.5H2.97a1.47 1.47 0 0 0 -1.467 1.383L1.5 2.97V5a0.5 0.5 0 0 1 -0.997 0.058L0.5 5V2.97a2.47 2.47 0 0 1 2.362 -2.467L2.97 0.5z",
+    fill: "#6b7280",
+    fillRule: "nonzero",
+    stroke: "#6b7280",
+    strokeWidth: "0.5"
+  }))))));
+}

package/lib/draft-editor.js

@@ -17,6 +17,7 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _draftJs = require("draft-js");
 var _bgColor = require("./buttons/bg-color");
 var _blockquote = require("./buttons/blockquote");
+var _divider = require("./buttons/divider");
 var _embeddedCode = require("./buttons/embedded-code");
 var _enlarge = require("./buttons/enlarge");
 var _fontColor = require("./buttons/font-color");
@@ -117,6 +118,9 @@ const CustomBackgroundColorButton = (0, _styledComponents.default)(_bgColor.Back
 const CustomFontColorButton = (0, _styledComponents.default)(_fontColor.FontColorButton)`
   ${buttonStyle}
 `;
+const CustomDividerButton = (0, _styledComponents.default)(_divider.DividerButton)`
+  ${buttonStyle}
+`;
 const DraftEditorWrapper = _styledComponents.default.div`
   /* Rich-editor default setting (.RichEditor-root)*/
   background: #fff;
@@ -471,6 +475,11 @@ class RichTextEditor extends _react.default.Component {
       editorState: editorState,
       onChange: this.onChange,
       readOnly: this.state.readOnly
+    }), /*#__PURE__*/_react.default.createElement(CustomDividerButton, {
+      isDisabled: disabledButtons.includes(_btNames.default.divider),
+      editorState: editorState,
+      onChange: this.onChange,
+      readOnly: this.state.readOnly
     }))), /*#__PURE__*/_react.default.createElement(TextEditorWrapper, {
       onClick: () => {
         if (this.editorRef) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kids-reporter/draft-editor",
-  "version": "0.4.24",
+  "version": "0.4.25",
   "description": "",
   "main": "lib/index.js",
   "scripts": {
@@ -23,7 +23,7 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@kids-reporter/draft-renderer": "^0.4.24",
+    "@kids-reporter/draft-renderer": "^0.4.25",
     "@twreporter/errors": "^1.1.2",
     "draft-js": "^0.11.7"
   },