Keep add button visible

README.md

@@ -383,6 +383,11 @@ The importer is available as `MediumDraftImporter` global;
   // Use this editorState
 ```
 
+### Keep AddButton visible
+
+If you need the "+" button to be visible always, use `addButtonAutoclose={false}`
+
+
 ### Issues
 
 - [x] Write an exporter to export draft data to HTML specifically for `medium-draft`.

src/components/addbutton.js

@@ -41,35 +41,21 @@ export default class AddButton extends React.Component {
     }
     const block = contentState.getBlockForKey(selectionState.anchorKey);
     const bkey = block.getKey();
-    if (block.getLength() > 0) {
-      this.hideBlock();
-      return;
-    }
+
     if (block.getType() !== this.blockType) {
       this.blockType = block.getType();
-      if (block.getLength() === 0) {
-        setTimeout(this.findNode, 0);
-      }
+      setTimeout(this.findNode, 0);
       this.blockKey = bkey;
       return;
     }
     if (this.blockKey === bkey) {
       // console.log('block exists');
-      if (block.getLength() > 0) {
-        this.hideBlock();
-      } else {
-        this.setState({
-          visible: true,
-        });
-      }
+      this.setState({
+        visible: true,
+      });
       return;
     }
     this.blockKey = bkey;
-    if (block.getLength() > 0) {
-      // console.log('no len');
-      this.hideBlock();
-      return;
-    }
     setTimeout(this.findNode, 0);
   }
 
@@ -99,10 +85,6 @@ export default class AddButton extends React.Component {
   findNode() {
     // eslint-disable-next-line no-undef
     const node = getSelectedBlockNode(window);
-    if (node === this.node) {
-      // console.log('Node exists');
-      return;
-    }
     if (!node) {
       // console.log('no node');
       this.setState({
@@ -122,7 +104,7 @@ export default class AddButton extends React.Component {
   }
 
   render() {
-    if (!this.state.visible) {
+    if (!this.state.visible && this.props.addButtonAutoclose) {
       return null;
     }
     return (
@@ -173,4 +155,5 @@ AddButton.propTypes = {
   getEditorState: PropTypes.func.isRequired,
   setEditorState: PropTypes.func.isRequired,
   sideButtons: PropTypes.arrayOf(PropTypes.object),
+  addButtonAutoclose: PropTypes.bool.isRequired,
 };

src/editor.js

@@ -89,6 +89,7 @@ class MediumDraftEditor extends React.Component {
     showLinkEditToolbar: PropTypes.bool,
     toolbarConfig: PropTypes.object,
     processURL: PropTypes.func,
+    addButtonAutoclose: PropTypes.bool,
   };
 
   static defaultProps = {
@@ -121,6 +122,7 @@ class MediumDraftEditor extends React.Component {
     disableToolbar: false,
     showLinkEditToolbar: true,
     toolbarConfig: {},
+    addButtonAutoclose: true,
   };
 
   constructor(props) {
@@ -556,6 +558,7 @@ class MediumDraftEditor extends React.Component {
               setEditorState={this.onChange}
               focus={this.focus}
               sideButtons={this.props.sideButtons}
+              addButtonAutoclose={this.props.addButtonAutoclose}
             />
           )}
           {!disableToolbar && (

src/model/index.js

@@ -31,6 +31,7 @@ of the given `newType`.
 */
 export const addNewBlock = (editorState, newType = Block.UNSTYLED, initialData = {}) => {
   const selectionState = editorState.getSelection();
+
   if (!selectionState.isCollapsed()) {
     return editorState;
   }
@@ -41,21 +42,20 @@ export const addNewBlock = (editorState, newType = Block.UNSTYLED, initialData =
   if (!currentBlock) {
     return editorState;
   }
-  if (currentBlock.getLength() === 0) {
-    if (currentBlock.getType() === newType) {
-      return editorState;
-    }
-    const newBlock = currentBlock.merge({
-      type: newType,
-      data: getDefaultBlockData(newType, initialData),
-    });
-    const newContentState = contentState.merge({
-      blockMap: blockMap.set(key, newBlock),
-      selectionAfter: selectionState,
-    });
-    return EditorState.push(editorState, newContentState, 'change-block-type');
+  if (currentBlock.getType() === newType) {
+    return editorState;
   }
-  return editorState;
+
+  const newBlock = currentBlock.merge({
+    type: newType,
+    data: getDefaultBlockData(newType, initialData),
+  });
+
+  const newContentState = contentState.merge({
+    blockMap: blockMap.set(key, newBlock),
+    selectionAfter: selectionState,
+  });
+  return EditorState.push(editorState, newContentState, 'change-block-type');
 };
 
 
@@ -147,6 +147,7 @@ export const addNewBlockAt = (
       isBackward: false,
     }),
   });
+
   return EditorState.push(editorState, newContent, 'split-block');
 };