@kids-reporter/draft-editor 0.4.1 → 0.4.3

package/lib/buttons/selector/image-selector.js

@@ -4,31 +4,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ImageSelector = ImageSelector;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _fields = require("@keystone-ui/fields");
-
 var _modals = require("@keystone-ui/modals");
-
 var _apollo = require("@keystone-6/core/admin-ui/apollo");
-
 var _alignSelector = require("./align-selector");
-
 var _searchBox = require("./search-box");
-
 var _pagination = require("./pagination");
-
 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 _ = {
   debounce: _debounce.default
 };
@@ -85,7 +72,6 @@ const ErrorWrapper = _styledComponents.default.div`
     margin: 0;
   }
 `;
-
 function ImageGrids(props) {
   const {
     images,
@@ -101,10 +87,8 @@ function ImageGrids(props) {
     });
   }));
 }
-
 function ImageGrid(props) {
   var _image$imageFile;
-
   const {
     image,
     onSelect,
@@ -116,10 +100,9 @@ function ImageGrid(props) {
   }, /*#__PURE__*/_react.default.createElement(ImageSelected, null, isSelected ? /*#__PURE__*/_react.default.createElement("i", {
     className: "fas fa-check-circle"
   }) : null), /*#__PURE__*/_react.default.createElement(Image, {
-    src: image === null || image === void 0 ? void 0 : (_image$imageFile = image.imageFile) === null || _image$imageFile === void 0 ? void 0 : _image$imageFile.url
+    src: image === null || image === void 0 || (_image$imageFile = image.imageFile) === null || _image$imageFile === void 0 ? void 0 : _image$imageFile.url
   }));
 }
-
 function ImageMetaGrids(props) {
   const {
     imageMetas,
@@ -129,9 +112,8 @@ function ImageMetaGrids(props) {
   } = props;
   return /*#__PURE__*/_react.default.createElement(ImageMetaGridsWrapper, null, imageMetas.map(imageMeta => {
     var _imageMeta$image;
-
     return /*#__PURE__*/_react.default.createElement(ImageMetaGrid, {
-      key: imageMeta === null || imageMeta === void 0 ? void 0 : (_imageMeta$image = imageMeta.image) === null || _imageMeta$image === void 0 ? void 0 : _imageMeta$image.id,
+      key: imageMeta === null || imageMeta === void 0 || (_imageMeta$image = imageMeta.image) === null || _imageMeta$image === void 0 ? void 0 : _imageMeta$image.id,
       imageMeta: imageMeta,
       enableCaption: enableCaption,
       enableUrl: enableUrl,
@@ -139,10 +121,8 @@ function ImageMetaGrids(props) {
     });
   }));
 }
-
 function ImageMetaGrid(props) {
   var _image$imageFile2;
-
   const {
     imageMeta,
     enableCaption,
@@ -155,7 +135,7 @@ function ImageMetaGrid(props) {
     url
   } = imageMeta;
   return /*#__PURE__*/_react.default.createElement(ImageMetaGridWrapper, null, /*#__PURE__*/_react.default.createElement(Image, {
-    src: image === null || image === void 0 ? void 0 : (_image$imageFile2 = image.imageFile) === null || _image$imageFile2 === void 0 ? void 0 : _image$imageFile2.url
+    src: image === null || image === void 0 || (_image$imageFile2 = image.imageFile) === null || _image$imageFile2 === void 0 ? void 0 : _image$imageFile2.url
   }), enableCaption && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Label, {
     htmlFor: "caption"
   }, "Image Caption:"), /*#__PURE__*/_react.default.createElement(_fields.TextInput, {
@@ -186,7 +166,6 @@ function ImageMetaGrid(props) {
     })
   })));
 }
-
 function DelayInput(props) {
   const {
     delay,
@@ -203,7 +182,6 @@ function DelayInput(props) {
     }
   }));
 }
-
 const imagesQuery = (0, _apollo.gql)`
   query Photos($searchText: String!, $take: Int, $skip: Int) {
     photosCount(where: { name: { contains: $searchText } })
@@ -229,7 +207,6 @@ const imagesQuery = (0, _apollo.gql)`
     }
   }
 `;
-
 function ImageSelector(props) {
   const [queryImages, {
     loading,
@@ -242,7 +219,6 @@ function ImageSelector(props) {
     fetchPolicy: 'no-cache'
   });
   const [currentPage, setCurrentPage] = (0, _react.useState)(0); // page starts with 1, 0 is used to detect initialization
-
   const [searchText, setSearchText] = (0, _react.useState)('');
   const [selected, setSelected] = (0, _react.useState)([]);
   const [delay, setDelay] = (0, _react.useState)('5');
@@ -270,84 +246,70 @@ function ImageSelector(props) {
     enableDelay = false,
     onChange
   } = props;
-
   const onSave = () => {
     let adjustedDelay = +delay;
     adjustedDelay = adjustedDelay < 1 ? 1 : adjustedDelay;
     onChange(selected, align, adjustedDelay);
   };
-
   const onCancel = () => {
     onChange([]);
   };
-
   const onSearchBoxChange = async searchInput => {
     setSearchText(searchInput);
     setCurrentPage(1);
   };
-
   const onDealyChange = delay => {
     setDelay(delay);
   };
-
   const onAlignSelectChange = align => {
     setAlign(align);
   };
-
   const onAlignSelectOpen = () => {
     var _contentWrapperRef$cu;
-
     const scrollWrapper = (_contentWrapperRef$cu = contentWrapperRef.current) === null || _contentWrapperRef$cu === void 0 ? void 0 : _contentWrapperRef$cu.parentElement;
     scrollWrapper.scrollTop = scrollWrapper.scrollHeight;
   };
-
   const onImageMetaChange = imageEntityWithMeta => {
     if (enableMultiSelect) {
       const foundIndex = selected.findIndex(ele => {
         var _ele$image, _imageEntityWithMeta$;
-
-        return (ele === null || ele === void 0 ? void 0 : (_ele$image = ele.image) === null || _ele$image === void 0 ? void 0 : _ele$image.id) === (imageEntityWithMeta === null || imageEntityWithMeta === void 0 ? void 0 : (_imageEntityWithMeta$ = imageEntityWithMeta.image) === null || _imageEntityWithMeta$ === void 0 ? void 0 : _imageEntityWithMeta$.id);
+        return (ele === null || ele === void 0 || (_ele$image = ele.image) === null || _ele$image === void 0 ? void 0 : _ele$image.id) === (imageEntityWithMeta === null || imageEntityWithMeta === void 0 || (_imageEntityWithMeta$ = imageEntityWithMeta.image) === null || _imageEntityWithMeta$ === void 0 ? void 0 : _imageEntityWithMeta$.id);
       });
-
       if (foundIndex !== -1) {
         selected[foundIndex] = imageEntityWithMeta;
         setSelected(selected);
       }
-
       return;
     }
-
     setSelected([imageEntityWithMeta]);
   };
-
   const onImagesGridSelect = imageEntity => {
     setSelected(selected => {
       const filterdSelected = selected.filter(ele => {
         var _ele$image2;
-
         return ((_ele$image2 = ele.image) === null || _ele$image2 === void 0 ? void 0 : _ele$image2.id) !== imageEntity.id;
-      }); // deselect the image
+      });
 
+      // deselect the image
       if (filterdSelected.length !== selected.length) {
         return filterdSelected;
-      } // add new selected one
-
+      }
 
+      // add new selected one
       if (enableMultiSelect) {
         return selected.concat([{
           image: imageEntity,
           desc: ''
         }]);
-      } // single select
-
+      }
 
+      // single select
       return [{
         image: imageEntity,
         desc: ''
       }];
     });
   };
-
   const selectedImages = selected.map(ele => {
     return ele.image;
   });
@@ -362,7 +324,6 @@ function ImageSelector(props) {
       });
     }
   }, [currentPage, searchText]);
-
   let searchResult = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(ImageGrids, {
     images: images,
     selected: selectedImages,
@@ -375,15 +336,12 @@ function ImageSelector(props) {
       setCurrentPage(pageIndex);
     }
   }));
-
   if (loading) {
     searchResult = /*#__PURE__*/_react.default.createElement("p", null, "searching...");
   }
-
   if (error) {
     searchResult = /*#__PURE__*/_react.default.createElement(ErrorWrapper, null, /*#__PURE__*/_react.default.createElement("h3", null, "Errors occurs in the `images` query"), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("b", null, "Message:"), /*#__PURE__*/_react.default.createElement("div", null, error.message), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("b", null, "Stack:"), /*#__PURE__*/_react.default.createElement("div", null, error.stack), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("b", null, "Query:"), /*#__PURE__*/_react.default.createElement("pre", null, imagesQuery.loc.source.body)));
   }
-
   return /*#__PURE__*/_react.default.createElement(_modals.DrawerController, {
     isOpen: true
   }, /*#__PURE__*/_react.default.createElement(_modals.Drawer, {

package/lib/buttons/selector/pagination.js

@@ -4,13 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Pagination = Pagination;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 const PaginationWrapper = _styledComponents.default.div`
   display: flex;
   justify-content: end;
@@ -33,7 +29,6 @@ const ArrowButtonWrapper = _styledComponents.default.a`
   }
 }}
 `;
-
 function Pagination({
   currentPage,
   total,
@@ -43,8 +38,9 @@ function Pagination({
   const minPage = 1;
   const limit = Math.ceil(total / pageSize);
   const nextPage = currentPage + 1;
-  const prevPage = currentPage - 1; // Don't render the pagiantion component if the pageSize is greater than the total number of items in the list.
+  const prevPage = currentPage - 1;
 
+  // Don't render the pagiantion component if the pageSize is greater than the total number of items in the list.
   if (total <= pageSize) return null;
   return /*#__PURE__*/_react.default.createElement(PaginationWrapper, null, /*#__PURE__*/_react.default.createElement("div", null, currentPage, " of ", limit, " pages"), /*#__PURE__*/_react.default.createElement(Arrows, null, /*#__PURE__*/_react.default.createElement(ArrowButtonWrapper, {
     onClick: () => {

package/lib/buttons/selector/search-box.js

@@ -4,25 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SearchBox = SearchBox;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _button = require("@keystone-ui/button");
-
 var _fields = require("@keystone-ui/fields");
-
 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 SearchBoxWrapper = _styledComponents.default.div`
   display: flex;
 `;
-
 function SearchBox(props) {
   const {
     onChange,

package/lib/buttons/slideshow.js

@@ -4,17 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SlideshowButton = SlideshowButton;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _imageSelector = require("./selector/image-selector");
-
 var _draftJs = require("draft-js");
-
 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 SlideshowButton(props) {
   const {
     editorState,
@@ -23,39 +17,35 @@ function SlideshowButton(props) {
     ImageSelector = _imageSelector.ImageSelector
   } = props;
   const [toShowImageSelector, setToShowImageSelector] = (0, _react.useState)(false);
-
   const promptForImageSelector = () => {
     setToShowImageSelector(true);
   };
-
   const onImageSelectorChange = (selected, align, delay) => {
     if (selected.length === 0) {
       setToShowImageSelector(false);
       return;
     }
-
     const contentState = editorState.getCurrentContent();
     const contentStateWithEntity = contentState.createEntity('SLIDESHOW', 'IMMUTABLE', {
       alignment: align,
       delay,
       images: selected.map(ele => {
-        return { ...(ele === null || ele === void 0 ? void 0 : ele.image),
+        return {
+          ...(ele === null || ele === void 0 ? void 0 : ele.image),
           desc: ele === null || ele === void 0 ? void 0 : ele.desc
         };
       })
     });
     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
-
+    });
 
+    // 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, ' '));
     setToShowImageSelector(false);
   };
-
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, toShowImageSelector && /*#__PURE__*/_react.default.createElement(ImageSelector, {
     onChange: onImageSelectorChange,
     enableCaption: true,

package/lib/draft-editor.js

@@ -11,43 +11,24 @@ Object.defineProperty(exports, "decorator", {
   }
 });
 exports.default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _btNames = _interopRequireDefault(require("./buttons/bt-names"));
-
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
 var _draftJs = require("draft-js");
-
 var _blockquote = require("./buttons/blockquote");
-
 var _embeddedCode = require("./buttons/embedded-code");
-
 var _enlarge = require("./buttons/enlarge");
-
 var _image = require("./buttons/image");
-
 var _link = require("./buttons/link");
-
 var _slideshow = require("./buttons/slideshow");
-
 var _imageSelector = require("./buttons/selector/image-selector");
-
 var _blockRendererFn = require("./block-renderer-fn");
-
 var _draftRenderer = require("@kids-reporter/draft-renderer");
-
 var _annotation = require("./buttons/annotation");
-
 var _infoBox = require("./buttons/info-box");
-
 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 }; }
-
 const buttonStyle = (0, _styledComponents.css)`
   cursor: pointer;
   border-radius: 6px;
@@ -65,11 +46,9 @@ const buttonStyle = (0, _styledComponents.css)`
   if (props.readOnly) {
     return '#c1c7d0';
   }
-
   if (props.isActive) {
     return '#3b82f6';
   }
-
   return '#6b7280';
 }};
   border: solid 1px
@@ -77,22 +56,18 @@ const buttonStyle = (0, _styledComponents.css)`
   if (props.readOnly) {
     return '#c1c7d0';
   }
-
   if (props.isActive) {
     return '#3b82f6';
   }
-
   return '#6b7280';
 }};
   box-shadow: ${props => {
   if (props.readOnly) {
     return 'unset';
   }
-
   if (props.isActive) {
     return 'rgba(38, 132, 255, 20%)  0px 1px 4px ';
   }
-
   return 'unset';
 }};
   transition: box-shadow 100ms linear;
@@ -101,7 +76,6 @@ const buttonStyle = (0, _styledComponents.css)`
   if (props.isDisabled) {
     return 'none';
   }
-
   return 'inline-flex';
 }};
 `;
@@ -215,10 +189,8 @@ const EnlargeButtonWrapper = _styledComponents.default.div`
   right: 0;
   margin: 0;
 `;
-
 class RichTextEditor extends _react.default.Component {
   editorRef = null;
-
   constructor(props) {
     super(props);
     this.state = {
@@ -226,18 +198,15 @@ class RichTextEditor extends _react.default.Component {
       readOnly: false
     };
   }
-
   onChange = editorState => {
     this.props.onChange(editorState);
   };
   handleKeyCommand = (command, editorState) => {
     const newState = _draftJs.RichUtils.handleKeyCommand(editorState, command);
-
     if (newState) {
       this.onChange(newState);
       return 'handled';
     }
-
     return 'not-handled';
   };
   handleReturn = event => {
@@ -249,24 +218,17 @@ class RichTextEditor extends _react.default.Component {
       onChange(_draftJs.RichUtils.insertSoftNewline(editorState));
       return 'handled';
     }
-
     return 'not-handled';
   };
   mapKeyToEditorCommand = e => {
-    if (e.keyCode === 9
-    /* TAB */
-    ) {
-      const newEditorState = _draftJs.RichUtils.onTab(e, this.props.editorState, 4
-      /* maxDepth */
-      );
+    if (e.keyCode === 9 /* TAB */) {
+      const newEditorState = _draftJs.RichUtils.onTab(e, this.props.editorState, 4 /* maxDepth */);
 
       if (newEditorState !== this.props.editorState) {
         this.onChange(newEditorState);
       }
-
       return null;
     }
-
     return (0, _draftJs.getDefaultKeyBinding)(e);
   };
   toggleBlockType = blockType => {
@@ -283,23 +245,18 @@ class RichTextEditor extends _react.default.Component {
     const endOffset = selection.getEndOffset();
     let entityInstance;
     let entityKey;
-
     if (!selection.isCollapsed()) {
       entityKey = startBlock.getEntityAt(startOffset);
     } else {
       entityKey = startBlock.getEntityAt(endOffset);
     }
-
     if (entityKey !== null) {
       entityInstance = contentState.getEntity(entityKey);
     }
-
     let entityType = '';
-
     if (entityInstance) {
       entityType = entityInstance.getType();
     }
-
     return entityType;
   };
   toggleEnlarge = () => {
@@ -309,7 +266,6 @@ class RichTextEditor extends _react.default.Component {
   };
   blockRendererFn = block => {
     const atomicBlockObj = (0, _blockRendererFn.atomicBlockRenderer)(block);
-
     if (atomicBlockObj) {
       const onEditStart = () => {
         this.setState({
@@ -325,7 +281,6 @@ class RichTextEditor extends _react.default.Component {
           readOnly: true
         });
       };
-
       const onEditFinish = ({
         entityKey,
         entityData
@@ -336,30 +291,28 @@ class RichTextEditor extends _react.default.Component {
           this.onChange(_draftJs.EditorState.set(this.props.editorState, {
             currentContent: newContentState
           }));
-        } // Custom block interaction is finished.
+        }
+
+        // Custom block interaction is finished.
         // Therefore, we set readOnly={false} to
         // make editor editable.
-
-
         this.setState({
           readOnly: false
         });
-      }; // `onEditStart` and `onEditFinish` will be passed
+      };
+
+      // `onEditStart` and `onEditFinish` will be passed
       // into custom block component.
       // We can get them via `props.blockProps.onEditStart`
       // and `props.blockProps.onEditFinish` in the custom block components.
-
-
       atomicBlockObj['props'] = {
         onEditStart,
         onEditFinish,
         getMainEditorReadOnly: () => this.state.readOnly
       };
     }
-
     return atomicBlockObj;
   };
-
   render() {
     const {
       disabledButtons = []
@@ -367,11 +320,9 @@ class RichTextEditor extends _react.default.Component {
     let {
       editorState
     } = this.props;
-
     if (!(editorState instanceof _draftJs.EditorState)) {
       editorState = _draftJs.EditorState.createEmpty(_draftRenderer.decorator);
     }
-
     const {
       isEnlarged,
       readOnly
@@ -447,7 +398,6 @@ class RichTextEditor extends _react.default.Component {
       onClick: () => {
         if (this.editorRef) {
           var _this$editorRef;
-
           // eslint-disable-next-line prettier/prettier
           (_this$editorRef = this.editorRef) === null || _this$editorRef === void 0 ? void 0 : _this$editorRef.focus();
         }
@@ -466,17 +416,13 @@ class RichTextEditor extends _react.default.Component {
       readOnly: readOnly
     }))));
   }
-
 }
-
 exports.RichTextEditor = RichTextEditor;
-
 class StyleButton extends _react.default.Component {
   onToggle = e => {
     e.preventDefault();
     this.props.onToggle(this.props.style);
   };
-
   render() {
     return /*#__PURE__*/_react.default.createElement(CustomButton, {
       isDisabled: this.props.isDisabled,
@@ -487,9 +433,7 @@ class StyleButton extends _react.default.Component {
       className: this.props.icon
     }), /*#__PURE__*/_react.default.createElement("span", null, !this.props.icon ? this.props.label : ''));
   }
-
 }
-
 const blockStyles = [{
   label: 'H2',
   style: 'header-two',
@@ -502,6 +446,10 @@ const blockStyles = [{
   label: 'H4',
   style: 'header-four',
   icon: ''
+}, {
+  label: 'H5',
+  style: 'header-five',
+  icon: ''
 }, {
   label: 'UL',
   style: 'unordered-list-item',
@@ -515,7 +463,6 @@ const blockStyles = [{
   style: 'code-block',
   icon: 'fas fa-code'
 }];
-
 const BlockStyleControls = props => {
   const {
     editorState,
@@ -534,7 +481,6 @@ const BlockStyleControls = props => {
     readOnly: props.readOnly
   })));
 };
-
 const inlineStyles = [{
   label: 'Bold',
   style: 'BOLD',
@@ -552,7 +498,6 @@ const inlineStyles = [{
   style: 'CODE',
   icon: 'fas fa-terminal'
 }];
-
 const InlineStyleControls = props => {
   const currentStyle = props.editorState.getCurrentInlineStyle();
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, inlineStyles.map(type => /*#__PURE__*/_react.default.createElement(StyleButton, {
@@ -566,7 +511,6 @@ const InlineStyleControls = props => {
     readOnly: props.readOnly
   })));
 };
-
 const AnnotationButton = (0, _annotation.createAnnotationButton)({
   InnerEditor: RichTextEditor,
   decorator: _draftRenderer.decorator