From d77a85cdcb59422057bfd5eb3f03059500098d60 Mon Sep 17 00:00:00 2001 From: katyadelarosa Date: Thu, 17 Jan 2019 11:51:36 -0600 Subject: [PATCH 1/3] Making add button sticky by prop --- README.md | 5 +++++ src/components/addbutton.js | 2 +- src/editor.js | 3 +++ 3 files changed, 9 insertions(+), 1 deletion(-) 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..a00d3d38 100644 --- a/src/components/addbutton.js +++ b/src/components/addbutton.js @@ -122,7 +122,7 @@ export default class AddButton extends React.Component { } render() { - if (!this.state.visible) { + if (!this.state.visible && this.props.addButtonAutoclose) { return null; } return ( 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 && ( From 5ef0d8825be5adf9f888e2fde135d796db35d735 Mon Sep 17 00:00:00 2001 From: katyadelarosa Date: Thu, 17 Jan 2019 11:54:38 -0600 Subject: [PATCH 2/3] Adding missing prop --- src/components/addbutton.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/addbutton.js b/src/components/addbutton.js index a00d3d38..9bbb4823 100644 --- a/src/components/addbutton.js +++ b/src/components/addbutton.js @@ -173,4 +173,5 @@ AddButton.propTypes = { getEditorState: PropTypes.func.isRequired, setEditorState: PropTypes.func.isRequired, sideButtons: PropTypes.arrayOf(PropTypes.object), + addButtonAutoclose: PropTypes.bool.isRequired, }; From 2c834a09e15329d7abf8991a56fb98ca33882d35 Mon Sep 17 00:00:00 2001 From: Katya de la Rosa Date: Tue, 22 Jan 2019 15:31:14 -0600 Subject: [PATCH 3/3] Fix add button visibility on blocks with existing content --- src/components/addbutton.js | 28 +++++----------------------- src/model/index.js | 29 +++++++++++++++-------------- 2 files changed, 20 insertions(+), 37 deletions(-) diff --git a/src/components/addbutton.js b/src/components/addbutton.js index 9bbb4823..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({ 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'); };