Fixes: Allow BlockInsert on final block (previously didnt work in Prod)

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
+      change.collapseToStartOf(this.closestRootNode);
-        .collapseToStartOf(this.closestRootNode)
+
-        .collapseToEndOfPreviousBlock()
+      // if we're on an empty paragraph then just replace it with the block
-        .insertBlock({ type: 'block-toolbar', isVoid: true });
+      // 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 });
+      }
     });
   };
 

app/components/Editor/components/ClickablePadding/index.js

@@ -1,3 +0,0 @@
-// @flow
-import ClickablePadding from './ClickablePadding';
-export default ClickablePadding;

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 });
         }
       });
 

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 <strong>{props.children}</strong>;
     case 'code':
-      return <InlineCode>{props.children}</InlineCode>;
+      return <Code>{props.children}</Code>;
     case 'italic':
       return <em>{props.children}</em>;
     case 'underlined':

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,

app/components/Editor/plugins/MarkdownShortcuts.js

@@ -131,12 +131,15 @@ export default function MarkdownShortcuts() {
         return change
           .extendToStartOf(startBlock)
           .delete()
-          .setBlock({
+          .setBlock(
+            {
               type: 'horizontal-rule',
               isVoid: true,
-          })
+            },
-          .collapseToStartOfNextBlock()
+            { normalize: false }
-          .insertBlock('paragraph');
+          )
+          .insertBlock('paragraph')
+          .collapseToStart();
       }
     },