@atlaskit/editor-core 187.2.2 → 187.2.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-core
 
+## 187.2.4
+
+### Patch Changes
+
+- [`30f2b96479f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/30f2b96479f) - Update image upload plugin to use optional plugin upload interface
+
+## 187.2.3
+
+### Patch Changes
+
+- [`a70c938c3de`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a70c938c3de) - fix issue where wrong expand node type was being inserted into tables (insert menu)
+
 ## 187.2.2
 
 ### Patch Changes

package/dist/cjs/plugins/image-upload/index.js

@@ -7,13 +7,29 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _main = require("./pm-plugins/main");
 var _inputRule = _interopRequireDefault(require("./pm-plugins/input-rule"));
+var _pluginKey = require("./pm-plugins/plugin-key");
+var _commandsToolbar = require("./pm-plugins/commands-toolbar");
 var imageUpload = function imageUpload() {
+  var uploadHandlerReference = {
+    current: null
+  };
   return {
     name: 'imageUpload',
+    getSharedState: function getSharedState(editorState) {
+      if (!editorState) {
+        return undefined;
+      }
+      return _pluginKey.stateKey.getState(editorState);
+    },
+    actions: {
+      startUpload: function startUpload() {
+        return (0, _commandsToolbar.insertActionForToolbar)(uploadHandlerReference);
+      }
+    },
     pmPlugins: function pmPlugins() {
       return [{
         name: 'imageUpload',
-        plugin: _main.createPlugin
+        plugin: (0, _main.createPlugin)(uploadHandlerReference)
       }, {
         name: 'imageUploadInputRule',
         plugin: function plugin(_ref) {

package/dist/cjs/plugins/image-upload/pm-plugins/commands-toolbar.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.insertActionForToolbar = void 0;
+var _commands = require("./commands");
+var insertActionForToolbar = function insertActionForToolbar(uploadHandlerReference) {
+  return function (state, dispatch) {
+    if (!uploadHandlerReference.current) {
+      return false;
+    }
+    uploadHandlerReference.current(undefined, function (options) {
+      (0, _commands.insertExternalImage)(options)(state, dispatch);
+    });
+    return true;
+  };
+};
+exports.insertActionForToolbar = insertActionForToolbar;

package/dist/cjs/plugins/image-upload/pm-plugins/main.js

@@ -109,87 +109,86 @@ var getNewActiveUpload = function getNewActiveUpload(tr, pluginState) {
   }
   return pluginState.activeUpload;
 };
-var createPlugin = function createPlugin(_ref2) {
-  var dispatch = _ref2.dispatch,
-    providerFactory = _ref2.providerFactory;
-  var uploadHandlerReference = {
-    current: null
-  };
-  return new _safePlugin.SafePlugin({
-    state: {
-      init: function init(_config, state) {
-        return {
-          active: false,
-          enabled: (0, _utils.canInsertMedia)(state),
-          hidden: !state.schema.nodes.media || !state.schema.nodes.mediaSingle
-        };
-      },
-      apply: function apply(tr, pluginState, _oldState, newState) {
-        var newActive = (0, _utils.isMediaSelected)(newState);
-        var newEnabled = (0, _utils.canInsertMedia)(newState);
-        var newActiveUpload = getNewActiveUpload(tr, pluginState);
-        if (newActive !== pluginState.active || newEnabled !== pluginState.enabled || newActiveUpload !== pluginState.activeUpload) {
-          var newPluginState = _objectSpread(_objectSpread({}, pluginState), {}, {
-            active: newActive,
-            enabled: newEnabled,
-            activeUpload: newActiveUpload
-          });
-          dispatch(_pluginKey.stateKey, newPluginState);
-          return newPluginState;
+var createPlugin = function createPlugin(uploadHandlerReference) {
+  return function (_ref2) {
+    var dispatch = _ref2.dispatch,
+      providerFactory = _ref2.providerFactory;
+    return new _safePlugin.SafePlugin({
+      state: {
+        init: function init(_config, state) {
+          return {
+            active: false,
+            enabled: (0, _utils.canInsertMedia)(state),
+            hidden: !state.schema.nodes.media || !state.schema.nodes.mediaSingle
+          };
+        },
+        apply: function apply(tr, pluginState, _oldState, newState) {
+          var newActive = (0, _utils.isMediaSelected)(newState);
+          var newEnabled = (0, _utils.canInsertMedia)(newState);
+          var newActiveUpload = getNewActiveUpload(tr, pluginState);
+          if (newActive !== pluginState.active || newEnabled !== pluginState.enabled || newActiveUpload !== pluginState.activeUpload) {
+            var newPluginState = _objectSpread(_objectSpread({}, pluginState), {}, {
+              active: newActive,
+              enabled: newEnabled,
+              activeUpload: newActiveUpload
+            });
+            dispatch(_pluginKey.stateKey, newPluginState);
+            return newPluginState;
+          }
+          return pluginState;
         }
-        return pluginState;
-      }
-    },
-    key: _pluginKey.stateKey,
-    view: function view() {
-      var handleProvider = /*#__PURE__*/function () {
-        var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(name, provider) {
-          var imageUploadProvider;
-          return _regenerator.default.wrap(function _callee$(_context) {
-            while (1) switch (_context.prev = _context.next) {
-              case 0:
-                if (!(name !== 'imageUploadProvider' || !provider)) {
-                  _context.next = 2;
+      },
+      key: _pluginKey.stateKey,
+      view: function view() {
+        var handleProvider = /*#__PURE__*/function () {
+          var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(name, provider) {
+            var imageUploadProvider;
+            return _regenerator.default.wrap(function _callee$(_context) {
+              while (1) switch (_context.prev = _context.next) {
+                case 0:
+                  if (!(name !== 'imageUploadProvider' || !provider)) {
+                    _context.next = 2;
+                    break;
+                  }
+                  return _context.abrupt("return");
+                case 2:
+                  _context.prev = 2;
+                  _context.next = 5;
+                  return provider;
+                case 5:
+                  imageUploadProvider = _context.sent;
+                  uploadHandlerReference.current = imageUploadProvider;
+                  _context.next = 12;
                   break;
-                }
-                return _context.abrupt("return");
-              case 2:
-                _context.prev = 2;
-                _context.next = 5;
-                return provider;
-              case 5:
-                imageUploadProvider = _context.sent;
-                uploadHandlerReference.current = imageUploadProvider;
-                _context.next = 12;
-                break;
-              case 9:
-                _context.prev = 9;
-                _context.t0 = _context["catch"](2);
-                uploadHandlerReference.current = null;
-              case 12:
-              case "end":
-                return _context.stop();
-            }
-          }, _callee, null, [[2, 9]]);
-        }));
-        return function handleProvider(_x, _x2) {
-          return _ref3.apply(this, arguments);
+                case 9:
+                  _context.prev = 9;
+                  _context.t0 = _context["catch"](2);
+                  uploadHandlerReference.current = null;
+                case 12:
+                case "end":
+                  return _context.stop();
+              }
+            }, _callee, null, [[2, 9]]);
+          }));
+          return function handleProvider(_x, _x2) {
+            return _ref3.apply(this, arguments);
+          };
+        }();
+        providerFactory.subscribe('imageUploadProvider', handleProvider);
+        return {
+          destroy: function destroy() {
+            uploadHandlerReference.current = null;
+            providerFactory.unsubscribe('imageUploadProvider', handleProvider);
+          }
         };
-      }();
-      providerFactory.subscribe('imageUploadProvider', handleProvider);
-      return {
-        destroy: function destroy() {
-          uploadHandlerReference.current = null;
-          providerFactory.unsubscribe('imageUploadProvider', handleProvider);
+      },
+      props: {
+        handleDOMEvents: {
+          drop: createDOMHandler(_dragDrop.isDroppedFile, 'atlassian.editor.image.drop', uploadHandlerReference),
+          paste: createDOMHandler(_clipboard.isPastedFile, 'atlassian.editor.image.paste', uploadHandlerReference)
         }
-      };
-    },
-    props: {
-      handleDOMEvents: {
-        drop: createDOMHandler(_dragDrop.isDroppedFile, 'atlassian.editor.image.drop', uploadHandlerReference),
-        paste: createDOMHandler(_clipboard.isPastedFile, 'atlassian.editor.image.paste', uploadHandlerReference)
       }
-    }
-  });
+    });
+  };
 };
 exports.createPlugin = createPlugin;

package/dist/cjs/plugins/insert-block/index.js

@@ -18,11 +18,9 @@ var _WithPluginState = _interopRequireDefault(require("../../ui/WithPluginState"
 var _ToolbarInsertBlock = _interopRequireDefault(require("./ui/ToolbarInsertBlock"));
 var _key2 = require("../type-ahead/pm-plugins/key");
 var _commands = require("../block-type/commands");
-var _commands2 = require("../image-upload/pm-plugins/commands");
 var _analytics = require("../analytics");
-var _pluginKey2 = require("../image-upload/pm-plugins/plugin-key");
-var _pluginKey3 = require("../placeholder-text/plugin-key");
-var _pluginKey4 = require("../macro/plugin-key");
+var _pluginKey2 = require("../placeholder-text/plugin-key");
+var _pluginKey3 = require("../macro/plugin-key");
 var _types = require("../../ui/Toolbar/types");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var toolbarSizeToButtons = function toolbarSizeToButtons(toolbarSize) {
@@ -75,10 +73,9 @@ var insertBlockPlugin = function insertBlockPlugin() {
             blockTypeState: _main.pluginKey,
             mediaState: _pluginKey.stateKey,
             mentionState: _key.mentionPluginKey,
-            macroState: _pluginKey4.pluginKey,
+            macroState: _pluginKey3.pluginKey,
             emojiState: _emoji.emojiPluginKey,
-            imageUpload: _pluginKey2.stateKey,
-            placeholderTextState: _pluginKey3.pluginKey,
+            placeholderTextState: _pluginKey2.pluginKey,
             layoutState: _layout.pluginKey
           },
           render: function render(_ref2) {
@@ -88,7 +85,6 @@ var insertBlockPlugin = function insertBlockPlugin() {
               _ref2$macroState = _ref2.macroState,
               macroState = _ref2$macroState === void 0 ? {} : _ref2$macroState,
               emojiState = _ref2.emojiState,
-              imageUpload = _ref2.imageUpload,
               placeholderTextState = _ref2.placeholderTextState,
               layoutState = _ref2.layoutState;
             return /*#__PURE__*/_react.default.createElement(ToolbarInsertBlockWithInjectionApi, {
@@ -110,7 +106,6 @@ var insertBlockPlugin = function insertBlockPlugin() {
               mediaState: mediaState,
               macroState: macroState,
               emojiState: emojiState,
-              imageUpload: imageUpload,
               placeholderTextState: placeholderTextState,
               layoutState: layoutState,
               providers: providers,
@@ -128,7 +123,7 @@ var insertBlockPlugin = function insertBlockPlugin() {
   };
 };
 function ToolbarInsertBlockWithInjectionApi(_ref3) {
-  var _pluginInjectionApi$d;
+  var _pluginInjectionApi$d, _pluginInjectionApi$d2;
   var editorView = _ref3.editorView,
     editorActions = _ref3.editorActions,
     dispatchAnalyticsEvent = _ref3.dispatchAnalyticsEvent,
@@ -148,14 +143,14 @@ function ToolbarInsertBlockWithInjectionApi(_ref3) {
     mediaState = _ref3.mediaState,
     macroState = _ref3.macroState,
     emojiState = _ref3.emojiState,
-    imageUpload = _ref3.imageUpload,
     placeholderTextState = _ref3.placeholderTextState,
     layoutState = _ref3.layoutState,
     featureFlags = _ref3.featureFlags;
   var buttons = toolbarSizeToButtons(toolbarSize);
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['hyperlink', 'date']),
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['hyperlink', 'date', 'imageUpload']),
     dateState = _useSharedPluginState.dateState,
-    hyperlinkState = _useSharedPluginState.hyperlinkState;
+    hyperlinkState = _useSharedPluginState.hyperlinkState,
+    imageUploadState = _useSharedPluginState.imageUploadState;
   return /*#__PURE__*/_react.default.createElement(_ToolbarInsertBlock.default, {
     pluginInjectionApi: pluginInjectionApi,
     buttons: buttons,
@@ -174,9 +169,9 @@ function ToolbarInsertBlockWithInjectionApi(_ref3) {
     mediaUploadsEnabled: mediaState && mediaState.allowsUploads,
     onShowMediaPicker: mediaState && mediaState.showMediaPicker,
     mediaSupported: !!mediaState,
-    imageUploadSupported: !!imageUpload,
-    imageUploadEnabled: imageUpload && imageUpload.enabled,
-    handleImageUpload: _commands2.startImageUpload,
+    imageUploadSupported: !!(pluginInjectionApi !== null && pluginInjectionApi !== void 0 && pluginInjectionApi.dependencies.imageUpload),
+    imageUploadEnabled: imageUploadState === null || imageUploadState === void 0 ? void 0 : imageUploadState.enabled,
+    handleImageUpload: pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.dependencies.imageUpload) === null || _pluginInjectionApi$d === void 0 ? void 0 : _pluginInjectionApi$d.actions.startUpload,
     availableWrapperBlockTypes: blockTypeState && blockTypeState.availableWrapperBlockTypes,
     linkSupported: !!hyperlinkState,
     linkDisabled: !hyperlinkState || !hyperlinkState.canInsertLink || !!hyperlinkState.activeLinkMark,
@@ -184,7 +179,7 @@ function ToolbarInsertBlockWithInjectionApi(_ref3) {
     emojiProvider: providers.emojiProvider,
     nativeStatusSupported: options.nativeStatusSupported,
     horizontalRuleEnabled: options.horizontalRuleEnabled,
-    onInsertBlockType: handleInsertBlockType(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.dependencies.analytics) === null || _pluginInjectionApi$d === void 0 ? void 0 : _pluginInjectionApi$d.actions),
+    onInsertBlockType: handleInsertBlockType(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d2 = pluginInjectionApi.dependencies.analytics) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.actions),
     onInsertMacroFromMacroBrowser: _macro.insertMacroFromMacroBrowser,
     macroProvider: macroState.macroProvider,
     popupsMountPoint: popupsMountPoint,

package/dist/cjs/version-wrapper.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.version = exports.nextMajorVersion = exports.name = void 0;
 var name = "@atlaskit/editor-core";
 exports.name = name;
-var version = "187.2.3";
+var version = "187.2.4";
 exports.version = version;
 var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "187.2.3",
+	"version": "187.2.4",
 	"sideEffects": false
 }

package/dist/es2019/plugins/image-upload/index.js

@@ -1,18 +1,34 @@
 import { createPlugin } from './pm-plugins/main';
 import inputRulePlugin from './pm-plugins/input-rule';
-const imageUpload = () => ({
-  name: 'imageUpload',
-  pmPlugins() {
-    return [{
-      name: 'imageUpload',
-      plugin: createPlugin
-    }, {
-      name: 'imageUploadInputRule',
-      plugin: ({
-        schema,
-        featureFlags
-      }) => inputRulePlugin(schema, featureFlags)
-    }];
-  }
-});
+import { stateKey } from './pm-plugins/plugin-key';
+import { insertActionForToolbar } from './pm-plugins/commands-toolbar';
+const imageUpload = () => {
+  let uploadHandlerReference = {
+    current: null
+  };
+  return {
+    name: 'imageUpload',
+    getSharedState(editorState) {
+      if (!editorState) {
+        return undefined;
+      }
+      return stateKey.getState(editorState);
+    },
+    actions: {
+      startUpload: () => insertActionForToolbar(uploadHandlerReference)
+    },
+    pmPlugins() {
+      return [{
+        name: 'imageUpload',
+        plugin: createPlugin(uploadHandlerReference)
+      }, {
+        name: 'imageUploadInputRule',
+        plugin: ({
+          schema,
+          featureFlags
+        }) => inputRulePlugin(schema, featureFlags)
+      }];
+    }
+  };
+};
 export default imageUpload;

package/dist/es2019/plugins/image-upload/pm-plugins/commands-toolbar.js

@@ -0,0 +1,12 @@
+import { insertExternalImage } from './commands';
+export const insertActionForToolbar = uploadHandlerReference => {
+  return (state, dispatch) => {
+    if (!uploadHandlerReference.current) {
+      return false;
+    }
+    uploadHandlerReference.current(undefined, options => {
+      insertExternalImage(options)(state, dispatch);
+    });
+    return true;
+  };
+};

package/dist/es2019/plugins/image-upload/pm-plugins/main.js

@@ -98,13 +98,10 @@ const getNewActiveUpload = (tr, pluginState) => {
   }
   return pluginState.activeUpload;
 };
-export const createPlugin = ({
+export const createPlugin = uploadHandlerReference => ({
   dispatch,
   providerFactory
 }) => {
-  let uploadHandlerReference = {
-    current: null
-  };
   return new SafePlugin({
     state: {
       init(_config, state) {

package/dist/es2019/plugins/insert-block/index.js

@@ -11,9 +11,7 @@ import WithPluginState from '../../ui/WithPluginState';
 import ToolbarInsertBlock from './ui/ToolbarInsertBlock';
 import { pluginKey as typeAheadPluginKey } from '../type-ahead/pm-plugins/key';
 import { insertBlockTypesWithAnalytics } from '../block-type/commands';
-import { startImageUpload } from '../image-upload/pm-plugins/commands';
 import { INPUT_METHOD } from '../analytics';
-import { stateKey as imageUploadStateKey } from '../image-upload/pm-plugins/plugin-key';
 import { pluginKey as placeholderTextStateKey } from '../placeholder-text/plugin-key';
 import { pluginKey as macroStateKey } from '../macro/plugin-key';
 import { ToolbarSize } from '../../ui/Toolbar/types';
@@ -67,7 +65,6 @@ const insertBlockPlugin = (options = {}, api) => {
             mentionState: mentionPluginKey,
             macroState: macroStateKey,
             emojiState: emojiPluginKey,
-            imageUpload: imageUploadStateKey,
             placeholderTextState: placeholderTextStateKey,
             layoutState: layoutStateKey
           },
@@ -77,7 +74,6 @@ const insertBlockPlugin = (options = {}, api) => {
             mediaState,
             macroState = {},
             emojiState,
-            imageUpload,
             placeholderTextState,
             layoutState
           }) => /*#__PURE__*/React.createElement(ToolbarInsertBlockWithInjectionApi, {
@@ -99,7 +95,6 @@ const insertBlockPlugin = (options = {}, api) => {
             mediaState: mediaState,
             macroState: macroState,
             emojiState: emojiState,
-            imageUpload: imageUpload,
             placeholderTextState: placeholderTextState,
             layoutState: layoutState,
             providers: providers,
@@ -135,17 +130,17 @@ function ToolbarInsertBlockWithInjectionApi({
   mediaState,
   macroState,
   emojiState,
-  imageUpload,
   placeholderTextState,
   layoutState,
   featureFlags
 }) {
-  var _pluginInjectionApi$d;
+  var _pluginInjectionApi$d, _pluginInjectionApi$d2;
   const buttons = toolbarSizeToButtons(toolbarSize);
   const {
     dateState,
-    hyperlinkState
-  } = useSharedPluginState(pluginInjectionApi, ['hyperlink', 'date']);
+    hyperlinkState,
+    imageUploadState
+  } = useSharedPluginState(pluginInjectionApi, ['hyperlink', 'date', 'imageUpload']);
   return /*#__PURE__*/React.createElement(ToolbarInsertBlock, {
     pluginInjectionApi: pluginInjectionApi,
     buttons: buttons,
@@ -164,9 +159,9 @@ function ToolbarInsertBlockWithInjectionApi({
     mediaUploadsEnabled: mediaState && mediaState.allowsUploads,
     onShowMediaPicker: mediaState && mediaState.showMediaPicker,
     mediaSupported: !!mediaState,
-    imageUploadSupported: !!imageUpload,
-    imageUploadEnabled: imageUpload && imageUpload.enabled,
-    handleImageUpload: startImageUpload,
+    imageUploadSupported: !!(pluginInjectionApi !== null && pluginInjectionApi !== void 0 && pluginInjectionApi.dependencies.imageUpload),
+    imageUploadEnabled: imageUploadState === null || imageUploadState === void 0 ? void 0 : imageUploadState.enabled,
+    handleImageUpload: pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.dependencies.imageUpload) === null || _pluginInjectionApi$d === void 0 ? void 0 : _pluginInjectionApi$d.actions.startUpload,
     availableWrapperBlockTypes: blockTypeState && blockTypeState.availableWrapperBlockTypes,
     linkSupported: !!hyperlinkState,
     linkDisabled: !hyperlinkState || !hyperlinkState.canInsertLink || !!hyperlinkState.activeLinkMark,
@@ -174,7 +169,7 @@ function ToolbarInsertBlockWithInjectionApi({
     emojiProvider: providers.emojiProvider,
     nativeStatusSupported: options.nativeStatusSupported,
     horizontalRuleEnabled: options.horizontalRuleEnabled,
-    onInsertBlockType: handleInsertBlockType(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.dependencies.analytics) === null || _pluginInjectionApi$d === void 0 ? void 0 : _pluginInjectionApi$d.actions),
+    onInsertBlockType: handleInsertBlockType(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d2 = pluginInjectionApi.dependencies.analytics) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.actions),
     onInsertMacroFromMacroBrowser: insertMacroFromMacroBrowser,
     macroProvider: macroState.macroProvider,
     popupsMountPoint: popupsMountPoint,

package/dist/es2019/version-wrapper.js

@@ -1,5 +1,5 @@
 export const name = "@atlaskit/editor-core";
-export const version = "187.2.3";
+export const version = "187.2.4";
 export const nextMajorVersion = () => {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "187.2.3",
+	"version": "187.2.4",
 	"sideEffects": false
 }

package/dist/esm/plugins/image-upload/index.js

@@ -1,12 +1,28 @@
 import { createPlugin } from './pm-plugins/main';
 import inputRulePlugin from './pm-plugins/input-rule';
+import { stateKey } from './pm-plugins/plugin-key';
+import { insertActionForToolbar } from './pm-plugins/commands-toolbar';
 var imageUpload = function imageUpload() {
+  var uploadHandlerReference = {
+    current: null
+  };
   return {
     name: 'imageUpload',
+    getSharedState: function getSharedState(editorState) {
+      if (!editorState) {
+        return undefined;
+      }
+      return stateKey.getState(editorState);
+    },
+    actions: {
+      startUpload: function startUpload() {
+        return insertActionForToolbar(uploadHandlerReference);
+      }
+    },
     pmPlugins: function pmPlugins() {
       return [{
         name: 'imageUpload',
-        plugin: createPlugin
+        plugin: createPlugin(uploadHandlerReference)
       }, {
         name: 'imageUploadInputRule',
         plugin: function plugin(_ref) {

package/dist/esm/plugins/image-upload/pm-plugins/commands-toolbar.js

@@ -0,0 +1,12 @@
+import { insertExternalImage } from './commands';
+export var insertActionForToolbar = function insertActionForToolbar(uploadHandlerReference) {
+  return function (state, dispatch) {
+    if (!uploadHandlerReference.current) {
+      return false;
+    }
+    uploadHandlerReference.current(undefined, function (options) {
+      insertExternalImage(options)(state, dispatch);
+    });
+    return true;
+  };
+};