@atlaskit/editor-core 187.14.4 → 187.14.7

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-core
 
+## 187.14.7
+
+### Patch Changes
+
+- [`3bbe8f91f34`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3bbe8f91f34) - refactor ResizableMediaSingleNext around guidelines and snapping
+- [`a675f834911`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a675f834911) - Introduce `commands` optional parameter to `NextEditorPlugin`. It can be used similarly to `actions` in `NextEditorPlugin` but `commands` must adhere to the type of `PluginCommand`:
+
+  ```ts
+  type PluginCommand = ({ tr }: { tr: Transaction }) => Transaction | null;
+  ```
+
+  `PluginCommand`s are specifically used for code that is executed to modify a Transaction. They should be used in preference to the existing prosemirror `Command` type.
+
+- Updated dependencies
+
 ## 187.14.4
 
 ### Patch Changes

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

@@ -19,6 +19,7 @@ var _reactDom = _interopRequireDefault(require("react-dom"));
 var _reactIntlNext = require("react-intl-next");
 var _picker = require("@atlaskit/emoji/picker");
 var _ui = require("@atlaskit/editor-common/ui");
+var _preset = require("@atlaskit/editor-common/preset");
 var _ToolbarButton = _interopRequireDefault(require("../../../../ui/ToolbarButton"));
 var _styles = require("@atlaskit/editor-common/styles");
 var _actions = require("../../../date/actions");
@@ -177,7 +178,9 @@ var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
         pluginInjectionApi = _this$props.pluginInjectionApi;
       var state = editorView.state,
         dispatch = editorView.dispatch;
-      pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d === void 0 ? void 0 : (_pluginInjectionApi$d2 = _pluginInjectionApi$d.hyperlink) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.actions.showLinkToolbar(inputMethod)(state, dispatch);
+
+      // We should update this to use `pluginInjectionApi.executeCommand` once available
+      (0, _preset.pluginCommandToPMCommand)(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d === void 0 ? void 0 : (_pluginInjectionApi$d2 = _pluginInjectionApi$d.hyperlink) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.commands.showLinkToolbar(inputMethod))(state, dispatch);
       return true;
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "insertMention", function (inputMethod) {

package/dist/cjs/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.js

@@ -58,12 +58,28 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
     var _this;
     (0, _classCallCheck2.default)(this, ResizableMediaSingleNext);
     _this = _super.call(this, props);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "calcNewSize", function (newWidth, stop) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "guidelines", []);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getAllGuidelines", function () {
       var _this$props = _this.props,
-        layout = _this$props.layout,
-        state = _this$props.view.state,
-        containerWidth = _this$props.containerWidth,
+        view = _this$props.view,
         lineLength = _this$props.lineLength;
+      var defaultGuidelines = _this.getDefaultGuidelines();
+      // disable guidelines for nested media single node
+      var dynamicGuidelines = _this.isNestedNode() ? [] : (0, _guideline.generateDynamicGuidelines)(view.state, lineLength, {
+        styles: {
+          lineStyle: 'dashed'
+        },
+        show: false
+      });
+      var guidelines = [].concat((0, _toConsumableArray2.default)(defaultGuidelines), (0, _toConsumableArray2.default)(dynamicGuidelines));
+      return guidelines;
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "calcNewSize", function (newWidth, stop) {
+      var _this$props2 = _this.props,
+        layout = _this$props2.layout,
+        state = _this$props2.view.state,
+        containerWidth = _this$props2.containerWidth,
+        lineLength = _this$props2.lineLength;
       var newPct = (0, _ui.calcPctFromPx)(newWidth, _this.props.lineLength) * 100;
       _this.setState({
         resizedPctWidth: newPct
@@ -102,10 +118,10 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       return _this.insideInlineLike ? (0, _ui.calcColumnsFromPx)(offsetLeft, _this.props.lineLength, _this.props.gridSize) : 0;
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "calcPxHeight", function (newWidth) {
-      var _this$props2 = _this.props,
-        _this$props2$width = _this$props2.width,
-        width = _this$props2$width === void 0 ? newWidth : _this$props2$width,
-        height = _this$props2.height;
+      var _this$props3 = _this.props,
+        _this$props3$width = _this$props3.width,
+        width = _this$props3$width === void 0 ? newWidth : _this$props3$width,
+        height = _this$props3.height;
       return Math.round(height / width * newWidth);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "saveWrapper", function (wrapper) {
@@ -126,6 +142,111 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       tr.setMeta('mediaSinglePlugin.isResizing', isResizing);
       return dispatch(tr);
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "updateActiveGuidelines", function () {
+      var width = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+      var guidelines = arguments.length > 1 ? arguments[1] : undefined;
+      var guidelineSnapsReference = arguments.length > 2 ? arguments[2] : undefined;
+      if (guidelineSnapsReference.snaps.x) {
+        var _findClosestSnap = (0, _guideline.findClosestSnap)(width, guidelineSnapsReference.snaps.x, guidelineSnapsReference.guidelineReference, _mediaSingle.MEDIA_SINGLE_SNAP_GAP),
+          gap = _findClosestSnap.gap,
+          activeGuidelineKeys = _findClosestSnap.keys;
+        _this.displayGuideline((0, _guideline.getGuidelinesWithHighlights)(gap, _mediaSingle.MEDIA_SINGLE_SNAP_GAP, activeGuidelineKeys, guidelines));
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "roundPixelValue", function (value) {
+      return Math.round(value);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getHeightFromNewWidth", function (originalWidth, originalHeight, newWidth) {
+      return _this.roundPixelValue(originalHeight / originalWidth * newWidth);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "calculateSizeState", function (size, delta) {
+      var originalWidth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+      var originalHeight = arguments.length > 3 ? arguments[3] : undefined;
+      var onResizeStop = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
+      var calculatedWidth = _this.roundPixelValue(size.width + delta.width);
+      var calculatedWidthWithLayout = _this.calcNewSize(calculatedWidth, onResizeStop);
+      var calculatedHeightWithLayout = _this.getHeightFromNewWidth(originalWidth, originalHeight, calculatedWidth);
+      return {
+        width: calculatedWidth,
+        height: calculatedHeightWithLayout,
+        calculatedWidthWithLayout: calculatedWidthWithLayout
+      };
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "selectCurrentMediaNode", function () {
+      // TODO: if adding !this.props.selected, it doesn't work if media single node is at top postion
+      if (typeof _this.props.getPos === 'function') {
+        var propPos = _this.props.getPos();
+        if (propPos !== undefined) {
+          (0, _utils2.setNodeSelection)(_this.props.view, propPos);
+        }
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleResizeStart", function () {
+      _this.setState({
+        isResizing: true
+      });
+      _this.selectCurrentMediaNode();
+      _this.setIsResizing(true);
+      // re-calucate guidelines
+      _this.guidelines = _this.getAllGuidelines();
+      return 0;
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleResize", function (size, delta) {
+      var _this$props4 = _this.props,
+        originalWidth = _this$props4.width,
+        originalHeight = _this$props4.height,
+        layout = _this$props4.layout,
+        updateSize = _this$props4.updateSize,
+        lineLength = _this$props4.lineLength;
+      var _this$calculateSizeSt = _this.calculateSizeState(size, delta, originalWidth, originalHeight),
+        width = _this$calculateSizeSt.width,
+        height = _this$calculateSizeSt.height,
+        calculatedWidthWithLayout = _this$calculateSizeSt.calculatedWidthWithLayout;
+      var guidelineSnaps = (0, _guideline.getGuidelineSnaps)(_this.guidelines, lineLength, layout);
+      _this.updateActiveGuidelines(width, _this.guidelines, guidelineSnaps);
+      _this.setState({
+        size: {
+          width: width,
+          height: height
+        },
+        snaps: guidelineSnaps.snaps
+      });
+      if (calculatedWidthWithLayout.layout !== layout) {
+        updateSize(width, calculatedWidthWithLayout.layout);
+      }
+
+      // TODO: Update once type updated from editor common resizer
+      return 0;
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleResizeStop", function (size, delta) {
+      var _this$props5 = _this.props,
+        originalWidth = _this$props5.width,
+        originalHeight = _this$props5.height,
+        updateSize = _this$props5.updateSize,
+        dispatchAnalyticsEvent = _this$props5.dispatchAnalyticsEvent,
+        nodeType = _this$props5.nodeType;
+      var _this$calculateSizeSt2 = _this.calculateSizeState(size, delta, originalWidth, originalHeight, true),
+        width = _this$calculateSizeSt2.width,
+        height = _this$calculateSizeSt2.height,
+        calculatedWidthWithLayout = _this$calculateSizeSt2.calculatedWidthWithLayout;
+      _this.setIsResizing(false);
+      _this.displayGuideline([]);
+      if (dispatchAnalyticsEvent) {
+        dispatchAnalyticsEvent(getResizeAnalyticsEvent(nodeType, calculatedWidthWithLayout.width, calculatedWidthWithLayout.layout));
+      }
+      _this.setState({
+        isResizing: false,
+        size: {
+          width: width,
+          height: height
+        }
+      }, function () {
+        updateSize(width, calculatedWidthWithLayout.layout);
+      });
+
+      // TODO: Update once type updated from editor common resizer
+      return 0;
+    });
     var initialWidth = props.mediaSingleWidth || _mediaSingle.DEFAULT_IMAGE_WIDTH;
     _this.state = {
       offsetLeft: (0, _mediaSingle.calculateOffsetLeft)(_this.insideInlineLike, _this.insideLayout, _this.props.view.dom, undefined),
@@ -135,7 +256,8 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       size: {
         width: initialWidth,
         height: _this.calcPxHeight(initialWidth)
-      }
+      },
+      snaps: {}
     };
     return _this;
   }
@@ -149,15 +271,15 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
   (0, _createClass2.default)(ResizableMediaSingleNext, [{
     key: "calcInitialWidth",
     value: function calcInitialWidth() {
-      var _this$props3 = this.props,
-        origWidth = _this$props3.width,
-        contentWidth = _this$props3.lineLength,
-        containerWidth = _this$props3.containerWidth;
+      var _this$props6 = this.props,
+        origWidth = _this$props6.width,
+        contentWidth = _this$props6.lineLength,
+        containerWidth = _this$props6.containerWidth;
       return Math.max(Math.min(origWidth || _mediaSingle.DEFAULT_IMAGE_WIDTH, contentWidth || containerWidth || _editorSharedStyles.akEditorDefaultLayoutWidth), _mediaSingle.MEDIA_SINGLE_MIN_PIXEL_WIDTH);
     }
   }, {
     key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps, prevState) {
+    value: function componentDidUpdate(prevProps) {
       var offsetLeft = (0, _mediaSingle.calculateOffsetLeft)(this.insideInlineLike, this.insideLayout, this.props.view.dom, this.wrapper);
       if (offsetLeft !== this.state.offsetLeft && offsetLeft >= 0) {
         this.setState({
@@ -172,10 +294,6 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
           resizedPctWidth: this.props.pctWidth
         });
       }
-      if (prevState.isResizing !== this.state.isResizing && this.state.isResizing) {
-        var guidelines = this.getDefaultGuidelines();
-        this.displayGuideline(guidelines);
-      }
       if (prevProps.mediaSingleWidth !== this.props.mediaSingleWidth && this.props.mediaSingleWidth) {
         // update size when lineLength becomes defined later
         // ensures extended experience renders legacy image with the same size as the legacy experience
@@ -199,78 +317,14 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "getDefaultGuidelines",
     value: function getDefaultGuidelines() {
-      var _this$props4 = this.props,
-        lineLength = _this$props4.lineLength,
-        containerWidth = _this$props4.containerWidth,
-        fullWidthMode = _this$props4.fullWidthMode;
+      var _this$props7 = this.props,
+        lineLength = _this$props7.lineLength,
+        containerWidth = _this$props7.containerWidth,
+        fullWidthMode = _this$props7.fullWidthMode;
 
       // disable guidelines for nested media single node
       return this.isNestedNode() ? [] : (0, _guideline.generateDefaultGuidelines)(lineLength, containerWidth, fullWidthMode);
     }
-
-    // Calculate width of media nodes for snaps based on dynamic guidelines
-    // TODO:  refactor this later, maybe use state to hold snaps array
-  }, {
-    key: "getSnaps",
-    value: function getSnaps() {
-      var _this$props5 = this.props,
-        view = _this$props5.view,
-        lineLength = _this$props5.lineLength;
-      var dom = view.dom;
-      var defaultGuidelines = this.getDefaultGuidelines();
-      // disable guidelines for nested media single node
-      var dynamicGuidelines = this.isNestedNode() ? [] : (0, _guideline.generateDynamicGuidelines)(view.state, lineLength, {
-        styles: {
-          lineStyle: 'dashed'
-        },
-        show: false
-      });
-      var guidelines = [].concat((0, _toConsumableArray2.default)(defaultGuidelines), (0, _toConsumableArray2.default)(dynamicGuidelines));
-      var mediaSingleSelector = 'div.mediaSingleView-content-wrap.ProseMirror-selectednode';
-      var _dom$getBoundingClien = dom.getBoundingClientRect(),
-        width = _dom$getBoundingClien.width;
-      var halfWidth = width / 2;
-      var selectedMedia = dom.querySelector(mediaSingleSelector);
-      if (selectedMedia) {
-        var pixelWidth = parseFloat(selectedMedia.getAttribute('width') || '') || 0;
-        var layout = selectedMedia.getAttribute('layout');
-        var snap = 0;
-        switch (layout) {
-          case 'align-start':
-          case 'wrap-left':
-            snap = pixelWidth - halfWidth;
-            break;
-          case 'align-end':
-          case 'wrap-right':
-            snap = width - pixelWidth - halfWidth;
-            break;
-          case 'center':
-          case 'wide':
-          case 'full-width':
-            snap = -pixelWidth / 2;
-            break;
-          // we ingnore full-width and wide
-          default:
-            snap = 0;
-        }
-        var snapWidths = (0, _guideline.getSnapWidth)(guidelines, pixelWidth, snap, layout);
-        var snapToWidths = snapWidths.map(function (s) {
-          return s && s.width;
-        });
-
-        // update guidelines
-        if (this.state.isResizing) {
-          var _findClosestSnap = (0, _guideline.findClosestSnap)(this.state.size.width, snapToWidths, snapWidths, _mediaSingle.MEDIA_SINGLE_HIGHLIGHT_GAP),
-            gap = _findClosestSnap.gap,
-            activeGuidelineKeys = _findClosestSnap.keys;
-          this.displayGuideline((0, _guideline.getGuidelinesWithHighlights)(gap, _mediaSingle.MEDIA_SINGLE_HIGHLIGHT_GAP, activeGuidelineKeys, guidelines));
-        }
-        return snapToWidths.length > 0 ? {
-          x: snapToWidths
-        } : {};
-      }
-      return {};
-    }
   }, {
     key: "wrappedLayout",
     get: function get() {
@@ -411,15 +465,15 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _this2 = this;
-      var _this$props6 = this.props,
-        origWidth = _this$props6.width,
-        layout = _this$props6.layout,
-        pctWidth = _this$props6.pctWidth,
-        containerWidth = _this$props6.containerWidth,
-        fullWidthMode = _this$props6.fullWidthMode,
-        selected = _this$props6.selected,
-        children = _this$props6.children,
-        intl = _this$props6.intl;
+      var _this$props8 = this.props,
+        origWidth = _this$props8.width,
+        layout = _this$props8.layout,
+        pctWidth = _this$props8.pctWidth,
+        containerWidth = _this$props8.containerWidth,
+        fullWidthMode = _this$props8.fullWidthMode,
+        selected = _this$props8.selected,
+        children = _this$props8.children,
+        intl = _this$props8.intl;
       var _this$state = this.state,
         isResizing = _this$state.isResizing,
         size = _this$state.size;
@@ -432,99 +486,6 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
         }
       });
 
-      /**
-       * NEW REFACTOR
-       */
-      var roundPixelValue = function roundPixelValue(value) {
-        return Math.round(value);
-      };
-      var getHeightFromNewWidth = function getHeightFromNewWidth(originalWidth, originalHeight, newWidth) {
-        return roundPixelValue(originalHeight / originalWidth * newWidth);
-      };
-      var calculateSizeState = function calculateSizeState(size, delta) {
-        var originalWidth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
-        var originalHeight = arguments.length > 3 ? arguments[3] : undefined;
-        var onResizeStop = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
-        var calculatedWidth = roundPixelValue(size.width + delta.width);
-        var calculatedWidthWithLayout = _this2.calcNewSize(calculatedWidth, onResizeStop);
-        var calculatedHeightWithLayout = getHeightFromNewWidth(originalWidth, originalHeight, calculatedWidth);
-        return {
-          width: calculatedWidth,
-          height: calculatedHeightWithLayout,
-          calculatedWidthWithLayout: calculatedWidthWithLayout
-        };
-      };
-      var selectCurrentMediaNode = function selectCurrentMediaNode() {
-        if (!_this2.props.selected && typeof _this2.props.getPos === 'function') {
-          var propPos = _this2.props.getPos();
-          if (propPos !== undefined) {
-            (0, _utils2.setNodeSelection)(_this2.props.view, propPos);
-          }
-        }
-      };
-      var handleResizeStart = function handleResizeStart() {
-        _this2.setState({
-          isResizing: true
-        });
-        selectCurrentMediaNode();
-        _this2.setIsResizing(true);
-
-        // TODO: Update once type updated from editor common resizer
-        return 0;
-      };
-      var handleResize = function handleResize(size, delta) {
-        var _this2$props = _this2.props,
-          originalWidth = _this2$props.width,
-          originalHeight = _this2$props.height,
-          layout = _this2$props.layout,
-          updateSize = _this2$props.updateSize;
-        var _calculateSizeState = calculateSizeState(size, delta, originalWidth, originalHeight),
-          width = _calculateSizeState.width,
-          height = _calculateSizeState.height,
-          calculatedWidthWithLayout = _calculateSizeState.calculatedWidthWithLayout;
-        _this2.setState({
-          size: {
-            width: width,
-            height: height
-          }
-        });
-        if (calculatedWidthWithLayout.layout !== layout) {
-          updateSize(width, calculatedWidthWithLayout.layout);
-        }
-
-        // TODO: Update once type updated from editor common resizer
-        return 0;
-      };
-      var handleResizeStop = function handleResizeStop(size, delta) {
-        var _this2$props2 = _this2.props,
-          originalWidth = _this2$props2.width,
-          originalHeight = _this2$props2.height,
-          updateSize = _this2$props2.updateSize,
-          dispatchAnalyticsEvent = _this2$props2.dispatchAnalyticsEvent,
-          nodeType = _this2$props2.nodeType;
-        var _calculateSizeState2 = calculateSizeState(size, delta, originalWidth, originalHeight, true),
-          width = _calculateSizeState2.width,
-          height = _calculateSizeState2.height,
-          calculatedWidthWithLayout = _calculateSizeState2.calculatedWidthWithLayout;
-        _this2.setIsResizing(false);
-        _this2.displayGuideline([]);
-        if (dispatchAnalyticsEvent) {
-          dispatchAnalyticsEvent(getResizeAnalyticsEvent(nodeType, calculatedWidthWithLayout.width, calculatedWidthWithLayout.layout));
-        }
-        _this2.setState({
-          isResizing: false,
-          size: {
-            width: width,
-            height: height
-          }
-        }, function () {
-          updateSize(width, calculatedWidthWithLayout.layout);
-        });
-
-        // TODO: Update once type updated from editor common resizer
-        return 0;
-      };
-
       // TODO: Clean up where this lives and how it gets generated
       var className = (0, _classnames.default)(_styles.richMediaClassName, "image-".concat(layout), isResizing ? 'is-resizing' : 'not-resizing', this.props.className, {
         'not-resized': !pctWidth,
@@ -551,10 +512,10 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
         snapGap: _mediaSingle.MEDIA_SINGLE_SNAP_GAP,
         enable: enable,
         width: size.width,
-        handleResizeStart: handleResizeStart,
-        handleResize: handleResize,
-        handleResizeStop: handleResizeStop,
-        snap: this.getSnaps(),
+        handleResizeStart: this.handleResizeStart,
+        handleResize: this.handleResize,
+        handleResizeStop: this.handleResizeStop,
+        snap: this.state.snaps,
         resizeRatio: _utils2.nonWrappedLayouts.includes(layout) ? 2 : 1,
         "data-testid": resizerNextTestId
       }, showSizeGuide && (0, _react2.jsx)(_ResizeLabel.default, {

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.14.4";
+var version = "187.14.7";
 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.14.4",
+	"version": "187.14.7",
 	"sideEffects": false
 }

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

@@ -6,6 +6,7 @@ import ReactDOM from 'react-dom';
 import { injectIntl } from 'react-intl-next';
 import { EmojiPicker as AkEmojiPicker } from '@atlaskit/emoji/picker';
 import { Popup } from '@atlaskit/editor-common/ui';
+import { pluginCommandToPMCommand } from '@atlaskit/editor-common/preset';
 import ToolbarButton from '../../../../ui/ToolbarButton';
 import { separatorStyles, buttonGroupStyle, wrapperStyle } from '@atlaskit/editor-common/styles';
 import { insertDate } from '../../../date/actions';
@@ -161,7 +162,9 @@ export class ToolbarInsertBlock extends React.PureComponent {
         state,
         dispatch
       } = editorView;
-      pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d === void 0 ? void 0 : (_pluginInjectionApi$d2 = _pluginInjectionApi$d.hyperlink) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.actions.showLinkToolbar(inputMethod)(state, dispatch);
+
+      // We should update this to use `pluginInjectionApi.executeCommand` once available
+      pluginCommandToPMCommand(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d === void 0 ? void 0 : (_pluginInjectionApi$d2 = _pluginInjectionApi$d.hyperlink) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.commands.showLinkToolbar(inputMethod))(state, dispatch);
       return true;
     });
     _defineProperty(this, "insertMention", inputMethod => {