@atlaskit/editor-core 187.38.2 → 187.38.5

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-core
 
+## 187.38.5
+
+### Patch Changes
+
+- [`d1bd1be0923`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d1bd1be0923) - [ux] ED-19794 updated media resize handle style
+- [`dfb663969a0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/dfb663969a0) - ED-19820: Fix for table scroll when insert media node when extended-resize-experience is off
+- Updated dependencies
+
+## 187.38.3
+
+### Patch Changes
+
+- [`1b66c23221e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1b66c23221e) - Fix missing analytics parameter in media plugin.
+- [`da2d3589ba4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/da2d3589ba4) - Extract placeholder plugin from editor-core to "@atlaskit/editor-plugin-placeholder"
+- Updated dependencies
+
 ## 187.38.2
 
 ### Patch Changes

package/dist/cjs/labs/next/presets/default.js

@@ -24,7 +24,7 @@ var _floatingToolbar = _interopRequireDefault(require("../../../plugins/floating
 var _clipboard = _interopRequireDefault(require("../../../plugins/clipboard"));
 var _plugins = require("../../../plugins");
 var _editorPluginAnalytics = require("@atlaskit/editor-plugin-analytics");
-var _placeholder = _interopRequireDefault(require("../../../plugins/placeholder"));
+var _editorPluginPlaceholder = require("@atlaskit/editor-plugin-placeholder");
 var _annotation = _interopRequireDefault(require("../../../plugins/annotation"));
 var _editorPluginComposition = require("@atlaskit/editor-plugin-composition");
 var _quickInsert = _interopRequireDefault(require("../../../plugins/quick-insert"));
@@ -76,7 +76,7 @@ function createDefaultPreset(options) {
     return builder;
   }).add([_editorPluginHyperlink.hyperlinkPlugin, options.hyperlinkOptions]).add([_editorPluginTextFormatting.textFormattingPlugin, options.textFormatting]).add(_editorPluginWidth.widthPlugin).add([_quickInsert.default, options.quickInsert]).add([_typeAhead.default, options.typeAhead || {
     createAnalyticsEvent: options.createAnalyticsEvent
-  }]).add([_placeholder.default, options.placeholder]).add(_editorPluginUnsupportedContent.unsupportedContentPlugin).add(_editorPluginEditorDisabled.editorDisabledPlugin).add([_submitEditor.default, options.submitEditor]).add(_fakeTextCursor.default).add(_floatingToolbar.default).add([_selection.default, options.selection]).add([_codeBlock.default, options.codeBlock || {
+  }]).add([_editorPluginPlaceholder.placeholderPlugin, options.placeholder]).add(_editorPluginUnsupportedContent.unsupportedContentPlugin).add(_editorPluginEditorDisabled.editorDisabledPlugin).add([_submitEditor.default, options.submitEditor]).add(_fakeTextCursor.default).add(_floatingToolbar.default).add([_selection.default, options.selection]).add([_codeBlock.default, options.codeBlock || {
     appearance: 'full-page'
   }]);
   return preset;

package/dist/cjs/plugins/index.js

@@ -257,12 +257,6 @@ Object.defineProperty(exports, "pastePlugin", {
     return _paste.default;
   }
 });
-Object.defineProperty(exports, "placeholderPlugin", {
-  enumerable: true,
-  get: function get() {
-    return _placeholder.default;
-  }
-});
 Object.defineProperty(exports, "placeholderTextPlugin", {
   enumerable: true,
   get: function get() {
@@ -361,7 +355,6 @@ var _media = _interopRequireDefault(require("./media"));
 var _mentions = _interopRequireDefault(require("./mentions"));
 var _panel = _interopRequireDefault(require("./panel"));
 var _paste = _interopRequireDefault(require("./paste"));
-var _placeholder = _interopRequireDefault(require("./placeholder"));
 var _placeholderText = _interopRequireDefault(require("./placeholder-text"));
 var _quickInsert = _interopRequireDefault(require("./quick-insert"));
 var _saveOnEnter = _interopRequireDefault(require("./save-on-enter"));

package/dist/cjs/plugins/media/index.js

@@ -110,7 +110,7 @@ var mediaPlugin = function mediaPlugin(_ref) {
             providerFactory: providerFactory,
             nodeViews: {
               mediaGroup: (0, _mediaGroup.ReactMediaGroupNode)(portalProviderAPI, eventDispatcher, providerFactory, options, api),
-              mediaSingle: (0, _mediaSingle.ReactMediaSingleNode)(portalProviderAPI, eventDispatcher, providerFactory, dispatchAnalyticsEvent, options, api),
+              mediaSingle: (0, _mediaSingle.ReactMediaSingleNode)(portalProviderAPI, eventDispatcher, providerFactory, api, dispatchAnalyticsEvent, options),
               media: (0, _mediaNodeView.ReactMediaNode)(portalProviderAPI, eventDispatcher, providerFactory, options, api),
               mediaInline: (0, _mediaInline.ReactMediaInlineNode)(portalProviderAPI, eventDispatcher, providerFactory, api)
             },
@@ -120,7 +120,7 @@ var mediaPlugin = function mediaPlugin(_ref) {
             customDropzoneContainer: options && options.customDropzoneContainer,
             customMediaPicker: options && options.customMediaPicker,
             allowResizing: !!(options && options.allowResizing)
-          }, reactContext, getIntl, dispatch, options, featureFlags.newInsertionBehaviour, api);
+          }, reactContext, getIntl, api, dispatch, options, featureFlags.newInsertionBehaviour);
         }
       }, {
         name: 'mediaKeymap',

package/dist/cjs/plugins/media/nodeviews/mediaSingle.js

@@ -607,9 +607,8 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
   }]);
   return MediaSingleNodeView;
 }(_reactNodeView.default);
-var ReactMediaSingleNode = function ReactMediaSingleNode(portalProviderAPI, eventDispatcher, providerFactory, dispatchAnalyticsEvent) {
-  var mediaOptions = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
-  var pluginInjectionApi = arguments.length > 5 ? arguments[5] : undefined;
+var ReactMediaSingleNode = function ReactMediaSingleNode(portalProviderAPI, eventDispatcher, providerFactory, pluginInjectionApi, dispatchAnalyticsEvent) {
+  var mediaOptions = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : {};
   return function (node, view, getPos) {
     var hasIntlContext = true;
     return new MediaSingleNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, {

package/dist/cjs/plugins/media/pm-plugins/main.js

@@ -72,7 +72,7 @@ var createDropPlaceholder = function createDropPlaceholder(intl, allowDropLine)
 };
 var MEDIA_RESOLVED_STATES = ['ready', 'error', 'cancelled'];
 var MediaPluginStateImplementation = /*#__PURE__*/function () {
-  function MediaPluginStateImplementation(_state, options, mediaOptions, newInsertionBehaviour, _dispatch, _pluginInjectionApi) {
+  function MediaPluginStateImplementation(_state, options, mediaOptions, newInsertionBehaviour, _dispatch, pluginInjectionApi) {
     var _this = this;
     (0, _classCallCheck2.default)(this, MediaPluginStateImplementation);
     (0, _defineProperty2.default)(this, "allowsUploads", false);
@@ -225,9 +225,10 @@ var MediaPluginStateImplementation = /*#__PURE__*/function () {
      *
      * called when we insert a new file via the picker (connected via pickerfacade)
      */
-    (0, _defineProperty2.default)(this, "insertFile", function (mediaState, onMediaStateChanged, pickerType, pluginInjectionApi) {
-      var _mediaState$collectio, _this$mediaOptions2;
+    (0, _defineProperty2.default)(this, "insertFile", function (mediaState, onMediaStateChanged, pickerType) {
+      var _this$pluginInjection, _this$pluginInjection2, _mediaState$collectio, _this$mediaOptions2;
       var state = _this.view.state;
+      var editorAnalyticsAPI = (_this$pluginInjection = _this.pluginInjectionApi) === null || _this$pluginInjection === void 0 ? void 0 : (_this$pluginInjection2 = _this$pluginInjection.analytics) === null || _this$pluginInjection2 === void 0 ? void 0 : _this$pluginInjection2.actions;
       var mediaStateWithContext = _objectSpread(_objectSpread({}, mediaState), {}, {
         contextId: _this.contextIdentifierProvider ? _this.contextIdentifierProvider.objectId : undefined
       });
@@ -243,16 +244,14 @@ var MediaPluginStateImplementation = /*#__PURE__*/function () {
         });
       }
       if ((0, _mediaSingle.isMediaSingle)(state.schema, mediaStateWithContext.fileMimeType)) {
-        var _this$pluginInjection, _pluginInjectionApi$a;
+        var _this$pluginInjection3;
         // read width state right before inserting to get up-to-date and define values
-        var widthPluginState = (_this$pluginInjection = _this.pluginInjectionApi) === null || _this$pluginInjection === void 0 ? void 0 : _this$pluginInjection.width.sharedState.currentState();
-        (0, _mediaSingle.insertMediaSingleNode)(_this.view, mediaStateWithContext, _this.getInputMethod(pickerType), collection, _this.mediaOptions && _this.mediaOptions.alignLeftOnInsert, _this.newInsertionBehaviour, widthPluginState, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions);
+        var widthPluginState = (_this$pluginInjection3 = _this.pluginInjectionApi) === null || _this$pluginInjection3 === void 0 ? void 0 : _this$pluginInjection3.width.sharedState.currentState();
+        (0, _mediaSingle.insertMediaSingleNode)(_this.view, mediaStateWithContext, _this.getInputMethod(pickerType), collection, _this.mediaOptions && _this.mediaOptions.alignLeftOnInsert, _this.newInsertionBehaviour, widthPluginState, editorAnalyticsAPI);
       } else if ((0, _mediaCommon2.getMediaFeatureFlag)('mediaInline', (_this$mediaOptions2 = _this.mediaOptions) === null || _this$mediaOptions2 === void 0 ? void 0 : _this$mediaOptions2.featureFlags) && !(0, _document.isInEmptyLine)(state) && (!(0, _mediaCommon.isInsidePotentialEmptyParagraph)(state) || (0, _utils3.isInListItem)(state)) && (0, _mediaFiles.canInsertMediaInline)(state)) {
-        var _pluginInjectionApi$a2;
-        (0, _mediaFiles.insertMediaInlineNode)(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions)(_this.view, mediaStateWithContext, collection, _this.getInputMethod(pickerType));
+        (0, _mediaFiles.insertMediaInlineNode)(editorAnalyticsAPI)(_this.view, mediaStateWithContext, collection, _this.getInputMethod(pickerType));
       } else {
-        var _pluginInjectionApi$a3;
-        (0, _mediaFiles.insertMediaGroupNode)(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a3 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a3 === void 0 ? void 0 : _pluginInjectionApi$a3.actions)(_this.view, [mediaStateWithContext], collection, _this.getInputMethod(pickerType));
+        (0, _mediaFiles.insertMediaGroupNode)(editorAnalyticsAPI)(_this.view, [mediaStateWithContext], collection, _this.getInputMethod(pickerType));
       }
 
       // do events when media state changes
@@ -489,7 +488,7 @@ var MediaPluginStateImplementation = /*#__PURE__*/function () {
     this.mediaOptions = mediaOptions;
     this.newInsertionBehaviour = newInsertionBehaviour;
     this.dispatch = _dispatch;
-    this.pluginInjectionApi = _pluginInjectionApi;
+    this.pluginInjectionApi = pluginInjectionApi;
     this.waitForMediaUpload = options.waitForMediaUpload === undefined ? true : options.waitForMediaUpload;
     var nodes = _state.schema.nodes;
     (0, _assert.default)(nodes.media && (nodes.mediaGroup || nodes.mediaSingle), 'Editor: unable to init media plugin - media or mediaGroup/mediaSingle node absent in schema');
@@ -642,7 +641,7 @@ var getMediaPluginState = function getMediaPluginState(state) {
   return _pluginKey.stateKey.getState(state);
 };
 exports.getMediaPluginState = getMediaPluginState;
-var createPlugin = function createPlugin(_schema, options, reactContext, getIntl, dispatch, mediaOptions, newInsertionBehaviour, pluginInjectionApi) {
+var createPlugin = function createPlugin(_schema, options, reactContext, getIntl, pluginInjectionApi, dispatch, mediaOptions, newInsertionBehaviour) {
   var intl = getIntl();
   var dropPlaceholder = createDropPlaceholder(intl, mediaOptions && mediaOptions.allowDropzoneDropLine);
   return new _safePlugin.SafePlugin({

package/dist/cjs/plugins/media/toolbar/linking.js

@@ -63,7 +63,8 @@ var getLinkingToolbar = function getLinkingToolbar(toolbarBaseConfig, mediaLinki
               },
               onBack: function onBack(href, meta) {
                 if (href.trim() && meta.inputMethod) {
-                  (0, _linking.setUrlToMedia)(href, meta.inputMethod)(view.state, view.dispatch, view);
+                  var _pluginInjectionApi$a2;
+                  (0, _linking.setUrlToMedia)(href, meta.inputMethod, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions)(view.state, view.dispatch, view);
                 }
                 (0, _linking.hideLinkingToolbar)(view.state, view.dispatch, view);
               },
@@ -79,7 +80,8 @@ var getLinkingToolbar = function getLinkingToolbar(toolbarBaseConfig, mediaLinki
                 dispatch(tr);
               },
               onSubmit: function onSubmit(href, meta) {
-                (0, _linking.setUrlToMedia)(href, meta.inputMethod)(view.state, view.dispatch, view);
+                var _pluginInjectionApi$a3;
+                (0, _linking.setUrlToMedia)(href, meta.inputMethod, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a3 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a3 === void 0 ? void 0 : _pluginInjectionApi$a3.actions)(view.state, view.dispatch, view);
                 (0, _linking.hideLinkingToolbar)(view.state, view.dispatch, view);
               },
               onBlur: function onBlur() {

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

@@ -36,16 +36,6 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /** @jsx jsx */
 var resizerNextTestId = 'mediaSingle.resizerNext.testid';
 exports.resizerNextTestId = resizerNextTestId;
-var handleComponent = {
-  left: (0, _react2.jsx)("div", {
-    "data-testid": "richMedia-resize-handle-left-elem",
-    contentEditable: false
-  }),
-  right: (0, _react2.jsx)("div", {
-    "data-testid": "richMedia-resize-handle-right-elem",
-    contentEditable: false
-  })
-};
 var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(ResizableMediaSingleNext, _React$Component);
   var _super = _createSuper(ResizableMediaSingleNext);
@@ -130,9 +120,6 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
         height = _this$props3.height;
       return Math.round(height / width * newWidth);
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "saveWrapper", function (wrapper) {
-      return _this.wrapper = wrapper;
-    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "displayGuideline", function (guidelines) {
       var _this$props$pluginInj, _this$props$pluginInj2, _this$props$pluginInj3;
       return (_this$props$pluginInj = _this.props.pluginInjectionApi) === null || _this$props$pluginInj === void 0 ? void 0 : (_this$props$pluginInj2 = _this$props$pluginInj.guideline) === null || _this$props$pluginInj2 === void 0 ? void 0 : (_this$props$pluginInj3 = _this$props$pluginInj2.actions) === null || _this$props$pluginInj3 === void 0 ? void 0 : _this$props$pluginInj3.displayGuideline(_this.props.view)({
@@ -300,8 +287,6 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
     });
     var initialWidth = props.mediaSingleWidth || _mediaSingle.DEFAULT_IMAGE_WIDTH;
     _this.state = {
-      offsetLeft: (0, _mediaSingle.calculateOffsetLeft)(_this.insideInlineLike, _this.insideLayout, _this.props.view.dom, undefined),
-      // We default to true until we resolve the file type
       isVideoFile: true,
       isResizing: false,
       size: {
@@ -317,13 +302,6 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
   (0, _createClass2.default)(ResizableMediaSingleNext, [{
     key: "componentDidUpdate",
     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({
-          offsetLeft: offsetLeft
-        });
-      }
-
       // Handle undo, when the actual pctWidth changed,
       // we sync up with the internal state.
       if (prevProps.pctWidth !== this.props.pctWidth) {
@@ -545,32 +523,19 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
         'rich-media-wrapped': layout === 'wrap-left' || layout === 'wrap-right'
       });
       var resizerNextClassName = (0, _classnames.default)(className, _styles.resizerStyles);
-      var maxWidth = !isResizing && this.isNestedNode() ?
+      var isNestedNode = this.isNestedNode();
+      var maxWidth = !isResizing && isNestedNode ?
       // set undefined to fall back to 100%
       undefined : this.calcMaxWidth(lineLength, containerWidth, fullWidthMode);
       var minWidth = this.calcMinWidth(isVideoFile, lineLength);
-      var nestedHandleStyles = function nestedHandleStyles(isNestedNode) {
-        if (!isNestedNode) {
-          return;
-        }
-        return {
-          left: {
-            left: "calc(".concat("var(--ds-space-075, 0.375em)", " * -1)")
-          },
-          right: {
-            right: "calc(".concat("var(--ds-space-075, 0.375em)", " * -1)")
-          }
-        };
-      };
       return (0, _react2.jsx)("div", {
-        ref: this.saveWrapper,
         css: (0, _styled.wrapperStyle)({
           layout: layout,
           isResized: !!pctWidth,
           containerWidth: containerWidth || origWidth,
           fullWidthMode: fullWidthMode,
           mediaSingleWidth: this.state.size.width,
-          isNestedNode: this.isNestedNode(),
+          isNestedNode: isNestedNode,
           isExtendedResizeExperienceOn: true
         })
       }, (0, _react2.jsx)(_resizer.ResizerNext, {
@@ -585,10 +550,10 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
         handleResizeStop: this.handleResizeStop,
         snap: this.state.snaps,
         resizeRatio: _utils2.nonWrappedLayouts.includes(layout) ? 2 : 1,
-        handleComponent: handleComponent,
         "data-testid": resizerNextTestId,
         isHandleVisible: selected,
-        handleStyles: nestedHandleStyles(this.isNestedNode())
+        handlePositioning: isNestedNode ? 'adjacent' : undefined,
+        handleHighlight: "full-height"
       }, children));
     }
   }]);

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

@@ -178,6 +178,17 @@ var ResizableMediaSingle = /*#__PURE__*/function (_React$Component) {
     get: function get() {
       return _ui.wrappedLayouts.indexOf(this.props.layout) > -1;
     }
+
+    // check if is inside of a table
+  }, {
+    key: "isNestedInTable",
+    value: function isNestedInTable() {
+      var table = this.props.view.state.schema.nodes.table;
+      if (!this.$pos) {
+        return false;
+      }
+      return !!(0, _utils.findParentNodeOfTypeClosestToPos)(this.$pos, table);
+    }
   }, {
     key: "componentDidMount",
     value: function () {
@@ -365,6 +376,21 @@ var ResizableMediaSingle = /*#__PURE__*/function (_React$Component) {
         offsetLeft: this.state.offsetLeft,
         wrappedLayout: this.wrappedLayout
       };
+      var nestedInTableHandleStyles = function nestedInTableHandleStyles(isNestedInTable) {
+        if (!isNestedInTable) {
+          return;
+        }
+        return {
+          left: {
+            left: "calc(".concat("var(--ds-space-025, 0.125em)", " * -0.5)"),
+            paddingLeft: '0px'
+          },
+          right: {
+            right: "calc(".concat("var(--ds-space-025, 0.125em)", " * -0.5)"),
+            paddingRight: '0px'
+          }
+        };
+      };
       return (0, _react2.jsx)("div", {
         ref: this.saveWrapper,
         css: (0, _styled.wrapperStyle)({
@@ -393,7 +419,8 @@ var ResizableMediaSingle = /*#__PURE__*/function (_React$Component) {
           return (0, _react2.jsx)("div", {
             contentEditable: false
           });
-        }
+        },
+        handleStyles: nestedInTableHandleStyles(this.isNestedInTable())
       }), children));
     }
   }]);

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.38.2";
+var version = "187.38.5";
 exports.version = version;
 var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');

package/dist/es2019/labs/next/presets/default.js

@@ -18,7 +18,7 @@ import floatingToolbarPlugin from '../../../plugins/floating-toolbar';
 import clipboardPlugin from '../../../plugins/clipboard';
 import { analyticsPlugin as deprecatedAnalyticsPlugin } from '../../../plugins';
 import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
-import placeholderPlugin from '../../../plugins/placeholder';
+import { placeholderPlugin } from '@atlaskit/editor-plugin-placeholder';
 import annotationPlugin from '../../../plugins/annotation';
 import { compositionPlugin } from '@atlaskit/editor-plugin-composition';
 import quickInsertPlugin from '../../../plugins/quick-insert';

package/dist/es2019/plugins/index.js

@@ -18,7 +18,6 @@ export { default as mediaPlugin } from './media';
 export { default as mentionsPlugin } from './mentions';
 export { default as panelPlugin } from './panel';
 export { default as pastePlugin } from './paste';
-export { default as placeholderPlugin } from './placeholder';
 export { default as placeholderTextPlugin } from './placeholder-text';
 export { default as quickInsertPlugin } from './quick-insert';
 export { default as saveOnEnterPlugin } from './save-on-enter';

package/dist/es2019/plugins/media/index.js

@@ -97,7 +97,7 @@ const mediaPlugin = ({
             providerFactory,
             nodeViews: {
               mediaGroup: ReactMediaGroupNode(portalProviderAPI, eventDispatcher, providerFactory, options, api),
-              mediaSingle: ReactMediaSingleNode(portalProviderAPI, eventDispatcher, providerFactory, dispatchAnalyticsEvent, options, api),
+              mediaSingle: ReactMediaSingleNode(portalProviderAPI, eventDispatcher, providerFactory, api, dispatchAnalyticsEvent, options),
               media: ReactMediaNode(portalProviderAPI, eventDispatcher, providerFactory, options, api),
               mediaInline: ReactMediaInlineNode(portalProviderAPI, eventDispatcher, providerFactory, api)
             },
@@ -107,7 +107,7 @@ const mediaPlugin = ({
             customDropzoneContainer: options && options.customDropzoneContainer,
             customMediaPicker: options && options.customMediaPicker,
             allowResizing: !!(options && options.allowResizing)
-          }, reactContext, getIntl, dispatch, options, featureFlags.newInsertionBehaviour, api);
+          }, reactContext, getIntl, api, dispatch, options, featureFlags.newInsertionBehaviour);
         }
       }, {
         name: 'mediaKeymap',

package/dist/es2019/plugins/media/nodeviews/mediaSingle.js

@@ -490,7 +490,7 @@ class MediaSingleNodeView extends ReactNodeView {
     return true;
   }
 }
-export const ReactMediaSingleNode = (portalProviderAPI, eventDispatcher, providerFactory, dispatchAnalyticsEvent, mediaOptions = {}, pluginInjectionApi) => (node, view, getPos) => {
+export const ReactMediaSingleNode = (portalProviderAPI, eventDispatcher, providerFactory, pluginInjectionApi, dispatchAnalyticsEvent, mediaOptions = {}) => (node, view, getPos) => {
   const hasIntlContext = true;
   return new MediaSingleNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, {
     eventDispatcher,

package/dist/es2019/plugins/media/pm-plugins/main.js

@@ -46,7 +46,7 @@ const createDropPlaceholder = (intl, allowDropLine) => {
 };
 const MEDIA_RESOLVED_STATES = ['ready', 'error', 'cancelled'];
 export class MediaPluginStateImplementation {
-  constructor(_state, options, mediaOptions, newInsertionBehaviour, _dispatch, _pluginInjectionApi) {
+  constructor(_state, options, mediaOptions, newInsertionBehaviour, _dispatch, pluginInjectionApi) {
     _defineProperty(this, "allowsUploads", false);
     _defineProperty(this, "ignoreLinks", false);
     _defineProperty(this, "waitForMediaUpload", true);
@@ -151,11 +151,12 @@ export class MediaPluginStateImplementation {
      *
      * called when we insert a new file via the picker (connected via pickerfacade)
      */
-    _defineProperty(this, "insertFile", (mediaState, onMediaStateChanged, pickerType, pluginInjectionApi) => {
-      var _mediaState$collectio, _this$mediaOptions2;
+    _defineProperty(this, "insertFile", (mediaState, onMediaStateChanged, pickerType) => {
+      var _this$pluginInjection, _this$pluginInjection2, _mediaState$collectio, _this$mediaOptions2;
       const {
         state
       } = this.view;
+      const editorAnalyticsAPI = (_this$pluginInjection = this.pluginInjectionApi) === null || _this$pluginInjection === void 0 ? void 0 : (_this$pluginInjection2 = _this$pluginInjection.analytics) === null || _this$pluginInjection2 === void 0 ? void 0 : _this$pluginInjection2.actions;
       const mediaStateWithContext = {
         ...mediaState,
         contextId: this.contextIdentifierProvider ? this.contextIdentifierProvider.objectId : undefined
@@ -172,16 +173,14 @@ export class MediaPluginStateImplementation {
         });
       }
       if (isMediaSingle(state.schema, mediaStateWithContext.fileMimeType)) {
-        var _this$pluginInjection, _pluginInjectionApi$a;
+        var _this$pluginInjection3;
         // read width state right before inserting to get up-to-date and define values
-        const widthPluginState = (_this$pluginInjection = this.pluginInjectionApi) === null || _this$pluginInjection === void 0 ? void 0 : _this$pluginInjection.width.sharedState.currentState();
-        insertMediaSingleNode(this.view, mediaStateWithContext, this.getInputMethod(pickerType), collection, this.mediaOptions && this.mediaOptions.alignLeftOnInsert, this.newInsertionBehaviour, widthPluginState, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions);
+        const widthPluginState = (_this$pluginInjection3 = this.pluginInjectionApi) === null || _this$pluginInjection3 === void 0 ? void 0 : _this$pluginInjection3.width.sharedState.currentState();
+        insertMediaSingleNode(this.view, mediaStateWithContext, this.getInputMethod(pickerType), collection, this.mediaOptions && this.mediaOptions.alignLeftOnInsert, this.newInsertionBehaviour, widthPluginState, editorAnalyticsAPI);
       } else if (getMediaFeatureFlag('mediaInline', (_this$mediaOptions2 = this.mediaOptions) === null || _this$mediaOptions2 === void 0 ? void 0 : _this$mediaOptions2.featureFlags) && !isInEmptyLine(state) && (!isInsidePotentialEmptyParagraph(state) || isInListItem(state)) && canInsertMediaInline(state)) {
-        var _pluginInjectionApi$a2;
-        insertMediaInlineNode(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions)(this.view, mediaStateWithContext, collection, this.getInputMethod(pickerType));
+        insertMediaInlineNode(editorAnalyticsAPI)(this.view, mediaStateWithContext, collection, this.getInputMethod(pickerType));
       } else {
-        var _pluginInjectionApi$a3;
-        insertMediaGroupNode(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a3 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a3 === void 0 ? void 0 : _pluginInjectionApi$a3.actions)(this.view, [mediaStateWithContext], collection, this.getInputMethod(pickerType));
+        insertMediaGroupNode(editorAnalyticsAPI)(this.view, [mediaStateWithContext], collection, this.getInputMethod(pickerType));
       }
 
       // do events when media state changes
@@ -417,7 +416,7 @@ export class MediaPluginStateImplementation {
     this.mediaOptions = mediaOptions;
     this.newInsertionBehaviour = newInsertionBehaviour;
     this.dispatch = _dispatch;
-    this.pluginInjectionApi = _pluginInjectionApi;
+    this.pluginInjectionApi = pluginInjectionApi;
     this.waitForMediaUpload = options.waitForMediaUpload === undefined ? true : options.waitForMediaUpload;
     const {
       nodes
@@ -525,7 +524,7 @@ export class MediaPluginStateImplementation {
   }
 }
 export const getMediaPluginState = state => stateKey.getState(state);
-export const createPlugin = (_schema, options, reactContext, getIntl, dispatch, mediaOptions, newInsertionBehaviour, pluginInjectionApi) => {
+export const createPlugin = (_schema, options, reactContext, getIntl, pluginInjectionApi, dispatch, mediaOptions, newInsertionBehaviour) => {
   const intl = getIntl();
   const dropPlaceholder = createDropPlaceholder(intl, mediaOptions && mediaOptions.allowDropzoneDropLine);
   return new SafePlugin({

package/dist/es2019/plugins/media/toolbar/linking.js

@@ -61,7 +61,8 @@ export const getLinkingToolbar = (toolbarBaseConfig, mediaLinkingState, state, i
               },
               onBack: (href, meta) => {
                 if (href.trim() && meta.inputMethod) {
-                  setUrlToMedia(href, meta.inputMethod)(view.state, view.dispatch, view);
+                  var _pluginInjectionApi$a2;
+                  setUrlToMedia(href, meta.inputMethod, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions)(view.state, view.dispatch, view);
                 }
                 hideLinkingToolbar(view.state, view.dispatch, view);
               },
@@ -81,7 +82,8 @@ export const getLinkingToolbar = (toolbarBaseConfig, mediaLinkingState, state, i
                 dispatch(tr);
               },
               onSubmit: (href, meta) => {
-                setUrlToMedia(href, meta.inputMethod)(view.state, view.dispatch, view);
+                var _pluginInjectionApi$a3;
+                setUrlToMedia(href, meta.inputMethod, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a3 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a3 === void 0 ? void 0 : _pluginInjectionApi$a3.actions)(view.state, view.dispatch, view);
                 hideLinkingToolbar(view.state, view.dispatch, view);
               },
               onBlur: () => {

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

@@ -11,23 +11,13 @@ import { wrapperStyle } from './styled';
 import { ResizerNext } from '@atlaskit/editor-common/resizer';
 import classnames from 'classnames';
 import { richMediaClassName, resizerStyles } from '@atlaskit/editor-common/styles';
-import { MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, MEDIA_SINGLE_RESIZE_THROTTLE_TIME, calculateOffsetLeft, DEFAULT_IMAGE_WIDTH, calcMediaSingleMaxWidth } from '@atlaskit/editor-common/media-single';
+import { MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, MEDIA_SINGLE_RESIZE_THROTTLE_TIME, DEFAULT_IMAGE_WIDTH, calcMediaSingleMaxWidth } from '@atlaskit/editor-common/media-single';
 import { findClosestSnap, getGuidelinesWithHighlights, generateDefaultGuidelines, generateDynamicGuidelines, getGuidelineSnaps, getGuidelineTypeFromKey, getRelativeGuideSnaps, getRelativeGuidelines } from '@atlaskit/editor-common/guideline';
 import memoizeOne from 'memoize-one';
 import { getMediaResizeAnalyticsEvent } from '../../utils/analytics';
 import throttle from 'lodash/throttle';
 import { MEDIA_PLUGIN_IS_RESIZING_KEY, MEDIA_PLUGIN_RESIZING_WIDTH_KEY } from '../../pm-plugins/main';
 export const resizerNextTestId = 'mediaSingle.resizerNext.testid';
-const handleComponent = {
-  left: jsx("div", {
-    "data-testid": "richMedia-resize-handle-left-elem",
-    contentEditable: false
-  }),
-  right: jsx("div", {
-    "data-testid": "richMedia-resize-handle-right-elem",
-    contentEditable: false
-  })
-};
 class ResizableMediaSingleNext extends React.Component {
   constructor(props) {
     super(props);
@@ -111,7 +101,6 @@ class ResizableMediaSingleNext extends React.Component {
       } = this.props;
       return Math.round(height / width * newWidth);
     });
-    _defineProperty(this, "saveWrapper", wrapper => this.wrapper = wrapper);
     _defineProperty(this, "displayGuideline", guidelines => {
       var _this$props$pluginInj, _this$props$pluginInj2, _this$props$pluginInj3;
       return (_this$props$pluginInj = this.props.pluginInjectionApi) === null || _this$props$pluginInj === void 0 ? void 0 : (_this$props$pluginInj2 = _this$props$pluginInj.guideline) === null || _this$props$pluginInj2 === void 0 ? void 0 : (_this$props$pluginInj3 = _this$props$pluginInj2.actions) === null || _this$props$pluginInj3 === void 0 ? void 0 : _this$props$pluginInj3.displayGuideline(this.props.view)({
@@ -281,8 +270,6 @@ class ResizableMediaSingleNext extends React.Component {
     });
     const initialWidth = props.mediaSingleWidth || DEFAULT_IMAGE_WIDTH;
     this.state = {
-      offsetLeft: calculateOffsetLeft(this.insideInlineLike, this.insideLayout, this.props.view.dom, undefined),
-      // We default to true until we resolve the file type
       isVideoFile: true,
       isResizing: false,
       size: {
@@ -295,13 +282,6 @@ class ResizableMediaSingleNext extends React.Component {
     };
   }
   componentDidUpdate(prevProps) {
-    const offsetLeft = calculateOffsetLeft(this.insideInlineLike, this.insideLayout, this.props.view.dom, this.wrapper);
-    if (offsetLeft !== this.state.offsetLeft && offsetLeft >= 0) {
-      this.setState({
-        offsetLeft
-      });
-    }
-
     // Handle undo, when the actual pctWidth changed,
     // we sync up with the internal state.
     if (prevProps.pctWidth !== this.props.pctWidth) {
@@ -461,32 +441,19 @@ class ResizableMediaSingleNext extends React.Component {
       'rich-media-wrapped': layout === 'wrap-left' || layout === 'wrap-right'
     });
     const resizerNextClassName = classnames(className, resizerStyles);
-    const maxWidth = !isResizing && this.isNestedNode() ?
+    const isNestedNode = this.isNestedNode();
+    const maxWidth = !isResizing && isNestedNode ?
     // set undefined to fall back to 100%
     undefined : this.calcMaxWidth(lineLength, containerWidth, fullWidthMode);
     const minWidth = this.calcMinWidth(isVideoFile, lineLength);
-    const nestedHandleStyles = isNestedNode => {
-      if (!isNestedNode) {
-        return;
-      }
-      return {
-        left: {
-          left: `calc(${"var(--ds-space-075, 0.375em)"} * -1)`
-        },
-        right: {
-          right: `calc(${"var(--ds-space-075, 0.375em)"} * -1)`
-        }
-      };
-    };
     return jsx("div", {
-      ref: this.saveWrapper,
       css: wrapperStyle({
         layout,
         isResized: !!pctWidth,
         containerWidth: containerWidth || origWidth,
         fullWidthMode,
         mediaSingleWidth: this.state.size.width,
-        isNestedNode: this.isNestedNode(),
+        isNestedNode,
         isExtendedResizeExperienceOn: true
       })
     }, jsx(ResizerNext, {
@@ -501,10 +468,10 @@ class ResizableMediaSingleNext extends React.Component {
       handleResizeStop: this.handleResizeStop,
       snap: this.state.snaps,
       resizeRatio: nonWrappedLayouts.includes(layout) ? 2 : 1,
-      handleComponent: handleComponent,
       "data-testid": resizerNextTestId,
       isHandleVisible: selected,
-      handleStyles: nestedHandleStyles(this.isNestedNode())
+      handlePositioning: isNestedNode ? 'adjacent' : undefined,
+      handleHighlight: "full-height"
     }, children));
   }
 }

package/dist/es2019/plugins/media/ui/ResizableMediaSingle/index.js

@@ -160,6 +160,17 @@ export default class ResizableMediaSingle extends React.Component {
   get wrappedLayout() {
     return wrappedLayouts.indexOf(this.props.layout) > -1;
   }
+
+  // check if is inside of a table
+  isNestedInTable() {
+    const {
+      table
+    } = this.props.view.state.schema.nodes;
+    if (!this.$pos) {
+      return false;
+    }
+    return !!findParentNodeOfTypeClosestToPos(this.$pos, table);
+  }
   async componentDidMount() {
     const {
       viewMediaClientConfig
@@ -295,6 +306,21 @@ export default class ResizableMediaSingle extends React.Component {
       offsetLeft: this.state.offsetLeft,
       wrappedLayout: this.wrappedLayout
     };
+    const nestedInTableHandleStyles = isNestedInTable => {
+      if (!isNestedInTable) {
+        return;
+      }
+      return {
+        left: {
+          left: `calc(${"var(--ds-space-025, 0.125em)"} * -0.5)`,
+          paddingLeft: '0px'
+        },
+        right: {
+          right: `calc(${"var(--ds-space-025, 0.125em)"} * -0.5)`,
+          paddingRight: '0px'
+        }
+      };
+    };
     return jsx("div", {
       ref: this.saveWrapper,
       css: wrapperStyle({
@@ -321,7 +347,8 @@ export default class ResizableMediaSingle extends React.Component {
       ,
       handleComponentFunc: () => jsx("div", {
         contentEditable: false
-      })
+      }),
+      handleStyles: nestedInTableHandleStyles(this.isNestedInTable())
     }), children));
   }
 }

package/dist/es2019/version-wrapper.js

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