diff --git a/app/components/Editor/components/BlockInsert.js b/app/components/Editor/components/BlockInsert.js index 372a196d..0f6615bf 100644 --- a/app/components/Editor/components/BlockInsert.js +++ b/app/components/Editor/components/BlockInsert.js @@ -22,6 +22,8 @@ function findClosestRootNode(value, ev) { if (bounds.top > ev.clientY) return previous; previous = { node, element, bounds }; } + + return previous; } @observer @@ -100,10 +102,21 @@ export default class BlockInsert extends Component { } }); - change - .collapseToStartOf(this.closestRootNode) - .collapseToEndOfPreviousBlock() - .insertBlock({ type: 'block-toolbar', isVoid: true }); + change.collapseToStartOf(this.closestRootNode); + + // if we're on an empty paragraph then just replace it with the block + // toolbar. Otherwise insert the toolbar as an extra Node. + if ( + !this.closestRootNode.text && + this.closestRootNode.type === 'paragraph' + ) { + change.setNodeByKey(this.closestRootNode.key, { + type: 'block-toolbar', + isVoid: true, + }); + } else { + change.insertBlock({ type: 'block-toolbar', isVoid: true }); + } }); }; diff --git a/app/components/Editor/components/ClickablePadding/ClickablePadding.js b/app/components/Editor/components/ClickablePadding.js similarity index 100% rename from app/components/Editor/components/ClickablePadding/ClickablePadding.js rename to app/components/Editor/components/ClickablePadding.js diff --git a/app/components/Editor/components/ClickablePadding/index.js b/app/components/Editor/components/ClickablePadding/index.js deleted file mode 100644 index 76c2ddad..00000000 --- a/app/components/Editor/components/ClickablePadding/index.js +++ /dev/null @@ -1,3 +0,0 @@ -// @flow -import ClickablePadding from './ClickablePadding'; -export default ClickablePadding; diff --git a/app/components/Editor/components/Toolbar/BlockToolbar.js b/app/components/Editor/components/Toolbar/BlockToolbar.js index 26c114ce..355c8163 100644 --- a/app/components/Editor/components/Toolbar/BlockToolbar.js +++ b/app/components/Editor/components/Toolbar/BlockToolbar.js @@ -72,7 +72,7 @@ class BlockToolbar extends Component { editor.value.document.nodes.forEach(node => { if (node.type === 'block-toolbar') { - change.removeNodeByKey(node.key); + change.removeNodeByKey(node.key, undefined, { normalize: false }); } }); diff --git a/app/components/Editor/marks.js b/app/components/Editor/marks.js index a88b6c27..eaa4c334 100644 --- a/app/components/Editor/marks.js +++ b/app/components/Editor/marks.js @@ -1,6 +1,6 @@ // @flow import React from 'react'; -import InlineCode from './components/InlineCode'; +import Code from './components/InlineCode'; import { Mark } from 'slate'; type Props = { @@ -13,7 +13,7 @@ export default function renderMark(props: Props) { case 'bold': return {props.children}; case 'code': - return {props.children}; + return {props.children}; case 'italic': return {props.children}; case 'underlined': diff --git a/app/components/Editor/plugins.js b/app/components/Editor/plugins.js index 217bfd1c..499b8b1b 100644 --- a/app/components/Editor/plugins.js +++ b/app/components/Editor/plugins.js @@ -24,7 +24,7 @@ const createPlugins = ({ onImageUploadStart, onImageUploadStop }: Options) => { collapseTo: 'end', }), InsertImages({ - extensions: ['png', 'jpg', 'gif'], + extensions: ['png', 'jpg', 'gif', 'webp'], insertImage: (change, file) => { return change.call( insertImageFile, diff --git a/app/components/Editor/plugins/MarkdownShortcuts.js b/app/components/Editor/plugins/MarkdownShortcuts.js index a6862da1..0cd0a5b7 100644 --- a/app/components/Editor/plugins/MarkdownShortcuts.js +++ b/app/components/Editor/plugins/MarkdownShortcuts.js @@ -131,12 +131,15 @@ export default function MarkdownShortcuts() { return change .extendToStartOf(startBlock) .delete() - .setBlock({ - type: 'horizontal-rule', - isVoid: true, - }) - .collapseToStartOfNextBlock() - .insertBlock('paragraph'); + .setBlock( + { + type: 'horizontal-rule', + isVoid: true, + }, + { normalize: false } + ) + .insertBlock('paragraph') + .collapseToStart(); } },