@atlaskit/editor-core 187.8.11 → 187.9.0

package/dist/es2019/ui/ElementBrowser/components/StatelessElementBrowser.js

@@ -49,7 +49,8 @@ const baseSidebarStyles = css`
 const mobileSideBar = css`
   ${baseSidebarStyles};
   flex: 0 0 ${INLINE_SIDEBAR_HEIGHT};
-  padding: 12px 12px 0 12px;
+  padding: ${"var(--ds-space-150, 12px)"} ${"var(--ds-space-150, 12px)"} 0
+    ${"var(--ds-space-150, 12px)"};
 `;
 const mobileSideBarShowCategories = css`
   flex: 0 0 auto;
@@ -111,6 +112,7 @@ function StatelessElementBrowser(props) {
   const {
     items,
     onSelectItem,
+    onInsertItem,
     viewMoreItem
   } = props;
   const {
@@ -160,10 +162,11 @@ function StatelessElementBrowser(props) {
     if (e.key !== 'Enter') {
       return;
     }
-    if (onSelectItem && selectedItem != null) {
-      onSelectItem(selectedItem);
+    if (onInsertItem && selectedItem != null) {
+      onInsertItem(selectedItem);
     }
-  }, [onSelectItem, selectedItem]);
+    e.preventDefault();
+  }, [onInsertItem, selectedItem]);
 
   /**
    * On arrow key selection and clicks the selectedItemIndex will change.
@@ -225,13 +228,13 @@ function MobileBrowser({
 }) {
   return jsx("div", {
     css: mobileElementBrowserContainer,
-    onKeyPress: onKeyPress,
     onKeyDown: onKeyDown,
     "data-testid": "mobile__element-browser"
   }, jsx("div", {
     css: showCategories ? [mobileSideBar, mobileSideBarShowCategories] : mobileSideBar
   }, showSearch && jsx(ElementSearch, {
     onSearch: onSearch,
+    onKeyDown: onKeyPress,
     mode: mode,
     focus: focusOnSearch,
     onClick: setFocusOnSearch,
@@ -305,13 +308,13 @@ function DesktopBrowser({
     createAnalyticsEvent: createAnalyticsEvent
   }))), jsx("div", {
     css: mainContent,
-    onKeyPress: onKeyPress,
     onKeyDown: onKeyDown,
     "data-testid": "main-content"
   }, showSearch && jsx("div", {
     css: searchContainer
   }, jsx(ElementSearch, {
     onSearch: onSearch,
+    onKeyDown: onKeyPress,
     mode: mode,
     focus: focusOnSearch,
     onClick: setFocusOnSearch,

package/dist/es2019/ui/Resizer/ResizeLabel/index.js

@@ -0,0 +1,12 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { wrapper, text, smallText } from './styles';
+const ResizeLabelBreakoutWidth = 110;
+const ResizeLabel = props => {
+  return jsx("div", {
+    css: wrapper
+  }, jsx("span", {
+    css: [text, props.containerWidth < ResizeLabelBreakoutWidth && smallText]
+  }, props.label));
+};
+export default ResizeLabel;

package/dist/es2019/ui/Resizer/ResizeLabel/styles.js

@@ -0,0 +1,25 @@
+import { css } from '@emotion/react';
+import { B300 } from '@atlaskit/theme/colors';
+export const wrapper = css`
+  font-size: ${"var(--ds-font-size-100, 14px)"};
+  width: 100%;
+  text-align: center;
+  position: absolute;
+  transform: translateY(-125%);
+  top: 0;
+`;
+export const text = css`
+  display: inline-block;
+  border-radius: 6px;
+  min-width: 75px;
+  background-color: ${`var(--ds-text-accent-blue, ${B300})`};
+  color: ${"var(--ds-text-inverse, white)"};
+  padding: ${"var(--ds-space-050, 4px)"} ${"var(--ds-space-200, 16px)"};
+  letter-spacing: 0.5px;
+`;
+export const smallText = css`
+  letter-spacing: -0.5px;
+  font-size: ${"var(--ds-font-size-050, 8px)"};
+  min-width: 27px;
+  padding: ${"var(--ds-space-0, 0px)"} ${"var(--ds-space-025, 2px)"};
+`;

package/dist/es2019/version-wrapper.js

@@ -1,5 +1,5 @@
 export const name = "@atlaskit/editor-core";
-export const version = "187.8.11";
+export const version = "187.9.0";
 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.8.11",
+	"version": "187.9.0",
 	"sideEffects": false
 }

package/dist/esm/plugins/floating-toolbar/index.js

@@ -323,9 +323,7 @@ function floatingToolbarPluginFactory(options) {
     return relevantConfig;
   };
   var apply = function apply(tr, pluginState) {
-    var newPluginState = {
-      getConfigWithNodeInfo: getConfigWithNodeInfo
-    };
+    var newPluginState = _objectSpread({}, pluginState);
     dispatch(pluginKey, newPluginState);
     return newPluginState;
   };

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

@@ -1,5 +1,4 @@
 import _get from "@babel/runtime/helpers/get";
-import _extends from "@babel/runtime/helpers/extends";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
@@ -21,6 +20,7 @@ import { MediaSingle, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaski
 import { browser, floatingLayouts, isRichMediaInsideOfBlockNode } from '@atlaskit/editor-common/utils';
 import { isNodeSelectedOrInRange } from '../../../utils/nodes';
 import { setNodeSelection, setTextSelection } from '../../../utils';
+import ResizableMediaSingleNext from '../ui/ResizableMediaSingle/ResizableMediaSingleNext';
 import ResizableMediaSingle from '../ui/ResizableMediaSingle';
 import { MEDIA_CONTENT_WRAP_CLASS_NAME } from '../pm-plugins/main';
 import { MediaNodeUpdater } from './mediaNodeUpdater';
@@ -35,6 +35,8 @@ import CaptionPlaceholder from '../ui/CaptionPlaceholder';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { insertAndSelectCaptionFromMediaSinglePos } from '../commands/captions';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { getMediaSinglePixelWidth } from '@atlaskit/editor-common/media-single';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 var MediaSingleNode = /*#__PURE__*/function (_Component) {
   _inherits(MediaSingleNode, _Component);
   var _super = _createSuper(MediaSingleNode);
@@ -199,7 +201,8 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
       }
       var tr = state.tr.setNodeMarkup(pos, undefined, _objectSpread(_objectSpread({}, _this.props.node.attrs), {}, {
         layout: layout,
-        width: width
+        width: width,
+        widthType: 'pixel'
       }));
       tr.setMeta('scrollIntoView', false);
       /**
@@ -311,12 +314,19 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
         mediaOptions = _this$props2.mediaOptions,
         fullWidthMode = _this$props2.fullWidthMode,
         state = _this$props2.view.state,
-        view = _this$props2.view;
+        view = _this$props2.view,
+        pluginInjectionApi = _this$props2.pluginInjectionApi,
+        containerWidth = _this$props2.width,
+        lineLength = _this$props2.lineLength,
+        dispatchAnalyticsEvent = _this$props2.dispatchAnalyticsEvent;
       var _ref4 = node.attrs,
         layout = _ref4.layout,
-        mediaSingleWidth = _ref4.width;
+        widthType = _ref4.widthType,
+        mediaSingleWidthAttribute = _ref4.width;
       var childNode = node.firstChild;
       var attrs = childNode.attrs;
+
+      // original width and height of child media node (scaled)
       var width = attrs.width,
         height = attrs.height;
       if (attrs.type === 'external') {
@@ -343,16 +353,29 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
         width = DEFAULT_IMAGE_WIDTH;
         height = DEFAULT_IMAGE_HEIGHT;
       }
+      var isSelected = selected();
       var mediaSingleProps = {
         layout: layout,
         width: width,
         height: height,
-        containerWidth: this.props.width,
-        lineLength: this.props.lineLength,
-        pctWidth: mediaSingleWidth,
+        containerWidth: containerWidth,
+        lineLength: this.getLineLength(view, getPos()) || lineLength,
+        pctWidth: mediaSingleWidthAttribute,
         fullWidthMode: fullWidthMode,
-        hasFallbackContainer: false
+        hasFallbackContainer: false,
+        mediaSingleWidth: mediaSingleWidthAttribute && getMediaSinglePixelWidth(mediaSingleWidthAttribute, lineLength, widthType)
       };
+      var ResizableMediaSingleProps = _objectSpread({
+        view: view,
+        getPos: getPos,
+        updateSize: this.updateSize,
+        gridSize: 12,
+        viewMediaClientConfig: this.state.viewMediaClientConfig,
+        allowBreakoutSnapPoints: mediaOptions && mediaOptions.allowBreakoutSnapPoints,
+        selected: isSelected,
+        dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+        pluginInjectionApi: pluginInjectionApi
+      }, mediaSingleProps);
       var canResize = !!this.props.mediaOptions.allowResizing;
       if (!this.props.mediaOptions.allowResizingInTables) {
         // If resizing not allowed in tables, check parents for tables
@@ -364,12 +387,10 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
           canResize = canResize && !disabledNode;
         }
       }
-      var lineLength = this.getLineLength(view, getPos()) || this.props.lineLength;
-      var isSelected = selected();
       var shouldShowPlaceholder = getMediaFeatureFlag('captions', mediaOptions.featureFlags) && node.childCount !== 2 && isSelected && state.selection instanceof NodeSelection;
       var MediaChildren = jsx("figure", {
         ref: this.mediaSingleWrapperRef,
-        css: figureWrapper,
+        css: [figureWrapper],
         className: MediaSingleNodeSelector,
         onClick: this.onMediaSingleClicked
       }, jsx("div", {
@@ -378,18 +399,7 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
         ref: this.captionPlaceHolderRef,
         onClick: this.clickPlaceholder
       }));
-      return canResize ? jsx(ResizableMediaSingle, _extends({}, mediaSingleProps, {
-        lineLength: lineLength,
-        view: this.props.view,
-        getPos: getPos,
-        updateSize: this.updateSize,
-        gridSize: 12,
-        viewMediaClientConfig: this.state.viewMediaClientConfig,
-        allowBreakoutSnapPoints: mediaOptions && mediaOptions.allowBreakoutSnapPoints,
-        selected: isSelected,
-        dispatchAnalyticsEvent: this.props.dispatchAnalyticsEvent,
-        pluginInjectionApi: this.props.pluginInjectionApi
-      }), MediaChildren) : jsx(MediaSingle, mediaSingleProps, MediaChildren);
+      return canResize ? getBooleanFF('platform.editor.media.extended-resize-experience') ? jsx(ResizableMediaSingleNext, ResizableMediaSingleProps, MediaChildren) : jsx(ResizableMediaSingle, ResizableMediaSingleProps, MediaChildren) : jsx(MediaSingle, mediaSingleProps, MediaChildren);
     }
   }]);
   return MediaSingleNode;

package/dist/esm/plugins/media/toolbar/index.js

@@ -20,8 +20,9 @@ import { LinkToolbarAppearance } from './linking-toolbar-appearance';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { messages } from '@atlaskit/media-ui';
 import { cardMessages } from '@atlaskit/editor-common/messages';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { FilePreviewItem } from './filePreviewItem';
-import { downloadMedia, removeMediaGroupNode } from './utils';
+import { downloadMedia, getSelectedMediaSingle, removeMediaGroupNode } from './utils';
 import { changeInlineToMediaCard, changeMediaCardToInline, removeInlineCard, setBorderMark, toggleBorderMark } from './commands';
 import { MediaInlineNodeSelector, MediaSingleNodeSelector } from '../nodeviews/styles';
 import ImageBorderItem from '../ui/ImageBorder';
@@ -225,7 +226,20 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
   }
   if (allowAdvancedToolBarOptions) {
     var _pluginInjectionApi$d;
-    var layoutButtons = buildLayoutButtons(state, intl, state.schema.nodes.mediaSingle, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.dependencies.width, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.dependencies.analytics) === null || _pluginInjectionApi$d === void 0 ? void 0 : _pluginInjectionApi$d.actions, allowResizing, allowResizingInTables);
+    var widthPlugin = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.dependencies.width;
+    var isChangingLayoutDisabled = false;
+    if (getBooleanFF('platform.editor.media.extended-resize-experience')) {
+      var _widthPlugin$sharedSt;
+      var contentWidth = widthPlugin === null || widthPlugin === void 0 ? void 0 : (_widthPlugin$sharedSt = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt === void 0 ? void 0 : _widthPlugin$sharedSt.lineLength;
+      var selectedNode = getSelectedMediaSingle(state);
+      if (selectedNode && contentWidth) {
+        var width = selectedNode.node.attrs.width;
+        if (width >= contentWidth) {
+          isChangingLayoutDisabled = true;
+        }
+      }
+    }
+    var layoutButtons = buildLayoutButtons(state, intl, state.schema.nodes.mediaSingle, widthPlugin, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.dependencies.analytics) === null || _pluginInjectionApi$d === void 0 ? void 0 : _pluginInjectionApi$d.actions, allowResizing, allowResizingInTables, true, true, isChangingLayoutDisabled);
     toolbarButtons = [].concat(_toConsumableArray(toolbarButtons), _toConsumableArray(layoutButtons));
     if (layoutButtons.length) {
       toolbarButtons.push({
@@ -327,7 +341,7 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
   var mediaLinkingState = getMediaLinkingState(state);
   var _ref2 = (_pluginInjectionApi$d4 = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.dependencies.decorations.actions) !== null && _pluginInjectionApi$d4 !== void 0 ? _pluginInjectionApi$d4 : {},
     hoverDecoration = _ref2.hoverDecoration;
-  if (!mediaPluginState) {
+  if (!mediaPluginState || mediaPluginState.isResizing) {
     return;
   }
   var nodeType = allowMediaInline ? [mediaInline, mediaSingle, media] : [mediaSingle];

package/dist/esm/plugins/media/toolbar/utils.js

@@ -1,7 +1,7 @@
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { getMediaClient } from '@atlaskit/media-client';
-import { findParentNodeOfType, removeParentNodeOfType, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
+import { findParentNodeOfType, removeParentNodeOfType, removeSelectedNode, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 export var getSelectedMediaContainerNodeAttrs = function getSelectedMediaContainerNodeAttrs(mediaPluginState) {
   var selectedNode = mediaPluginState.selectedMediaContainerNode();
   if (selectedNode && selectedNode.attrs) {
@@ -58,4 +58,8 @@ export var removeMediaGroupNode = function removeMediaGroupNode(state) {
     tr = removeSelectedNode(tr);
   }
   return tr;
+};
+export var getSelectedMediaSingle = function getSelectedMediaSingle(state) {
+  var mediaSingle = state.schema.nodes.mediaSingle;
+  return findSelectedNodeOfType(mediaSingle)(state.selection) || findParentNodeOfType(mediaSingle)(state.selection);
 };