diff --git a/README.md b/README.md index 8cafb83a..2cf848c5 100644 --- a/README.md +++ b/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`. diff --git a/src/components/addbutton.js b/src/components/addbutton.js index 8ba083ab..926bc4af 100644 --- a/src/components/addbutton.js +++ b/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, }; diff --git a/src/editor.js b/src/editor.js index de49bee0..e07bb38f 100644 --- a/src/editor.js +++ b/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 && ( diff --git a/src/model/index.js b/src/model/index.js index fa6b809f..bf655442 100644 --- a/src/model/index.js +++ b/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'); };