@atlaskit/editor-core 187.35.2 → 187.35.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-core
 
+## 187.35.3
+
+### Patch Changes
+
+- [`1a4a64498ae`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1a4a64498ae) - fix media floating toolbar cut off issue on align right and wrap right
+
 ## 187.35.2
 
 ### Patch Changes

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

@@ -449,6 +449,7 @@ var floatingToolbar = function floatingToolbar(state, intl) {
     allowAltTextOnImages = options.allowAltTextOnImages,
     providerFactory = options.providerFactory,
     allowMediaInline = options.allowMediaInline,
+    allowResizing = options.allowResizing,
     getEditorFeatureFlags = options.getEditorFeatureFlags;
   var mediaPluginState = _pluginKey.stateKey.getState(state);
   var mediaLinkingState = (0, _linking2.getMediaLinkingState)(state);
@@ -512,9 +513,15 @@ var floatingToolbar = function floatingToolbar(state, intl) {
     };
     items = generateMediaSingleFloatingToolbar(state, intl, options, mediaPluginState, mediaLinkingState, pluginInjectionApi, getEditorFeatureFlags);
   }
-  return _objectSpread(_objectSpread({}, baseToolbar), {}, {
+  var toolbarConfig = _objectSpread(_objectSpread({}, baseToolbar), {}, {
     items: items,
     scrollable: true
   });
+  if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.extended-resize-experience') && allowResizing) {
+    return _objectSpread(_objectSpread({}, toolbarConfig), {}, {
+      width: mediaPluginState.isResizing ? undefined : (0, _utils2.getMaxToolbarWidth)()
+    });
+  }
+  return toolbarConfig;
 };
 exports.floatingToolbar = floatingToolbar;

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.removeMediaGroupNode = exports.getSelectedMediaSingle = exports.getSelectedMediaContainerNodeAttrs = exports.getPixelWidthOfElement = exports.downloadMedia = exports.calcNewLayout = void 0;
+exports.removeMediaGroupNode = exports.getSelectedMediaSingle = exports.getSelectedMediaContainerNodeAttrs = exports.getPixelWidthOfElement = exports.getMaxToolbarWidth = exports.downloadMedia = exports.calcNewLayout = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _mediaClient = require("@atlaskit/media-client");
@@ -101,4 +101,17 @@ var calcNewLayout = function calcNewLayout(width, layout, contentWidth) {
   }
   return isWrappedLayout && width !== contentWidth ? layout : 'center';
 };
-exports.calcNewLayout = calcNewLayout;
+exports.calcNewLayout = calcNewLayout;
+var maxToolbarFitWidth = 0;
+var getMaxToolbarWidth = function getMaxToolbarWidth() {
+  var toolbar = document.querySelector("div[aria-label=\"Media floating controls\"]");
+  var toolbarWidth = toolbar === null || toolbar === void 0 ? void 0 : toolbar.getBoundingClientRect().width;
+  if (!toolbar) {
+    maxToolbarFitWidth = 0;
+  }
+  if (toolbarWidth && toolbarWidth > maxToolbarFitWidth) {
+    maxToolbarFitWidth = toolbarWidth;
+  }
+  return maxToolbarFitWidth;
+};
+exports.getMaxToolbarWidth = getMaxToolbarWidth;

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

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

@@ -18,7 +18,7 @@ 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, getSelectedMediaSingle, removeMediaGroupNode, getPixelWidthOfElement, calcNewLayout } from './utils';
+import { downloadMedia, getSelectedMediaSingle, removeMediaGroupNode, getPixelWidthOfElement, calcNewLayout, getMaxToolbarWidth } from './utils';
 import { isVideo } from '../utils/media-single';
 import { changeInlineToMediaCard, changeMediaCardToInline, removeInlineCard, setBorderMark, toggleBorderMark } from './commands';
 import { MediaInlineNodeSelector, MediaSingleNodeSelector } from '../nodeviews/styles';
@@ -466,6 +466,7 @@ export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) =
     allowAltTextOnImages,
     providerFactory,
     allowMediaInline,
+    allowResizing,
     getEditorFeatureFlags
   } = options;
   const mediaPluginState = stateKey.getState(state);
@@ -529,9 +530,16 @@ export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) =
     };
     items = generateMediaSingleFloatingToolbar(state, intl, options, mediaPluginState, mediaLinkingState, pluginInjectionApi, getEditorFeatureFlags);
   }
-  return {
+  const toolbarConfig = {
     ...baseToolbar,
     items,
     scrollable: true
   };
+  if (getBooleanFF('platform.editor.media.extended-resize-experience') && allowResizing) {
+    return {
+      ...toolbarConfig,
+      width: mediaPluginState.isResizing ? undefined : getMaxToolbarWidth()
+    };
+  }
+  return toolbarConfig;
 };

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

@@ -71,4 +71,16 @@ export const calcNewLayout = (width, layout, contentWidth, fullWidthMode = false
     return 'wide';
   }
   return isWrappedLayout && width !== contentWidth ? layout : 'center';
+};
+let maxToolbarFitWidth = 0;
+export const getMaxToolbarWidth = () => {
+  const toolbar = document.querySelector(`div[aria-label="Media floating controls"]`);
+  const toolbarWidth = toolbar === null || toolbar === void 0 ? void 0 : toolbar.getBoundingClientRect().width;
+  if (!toolbar) {
+    maxToolbarFitWidth = 0;
+  }
+  if (toolbarWidth && toolbarWidth > maxToolbarFitWidth) {
+    maxToolbarFitWidth = toolbarWidth;
+  }
+  return maxToolbarFitWidth;
 };

package/dist/es2019/version-wrapper.js

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

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

@@ -22,7 +22,7 @@ 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, getSelectedMediaSingle, removeMediaGroupNode, getPixelWidthOfElement, calcNewLayout } from './utils';
+import { downloadMedia, getSelectedMediaSingle, removeMediaGroupNode, getPixelWidthOfElement, calcNewLayout, getMaxToolbarWidth } from './utils';
 import { isVideo } from '../utils/media-single';
 import { changeInlineToMediaCard, changeMediaCardToInline, removeInlineCard, setBorderMark, toggleBorderMark } from './commands';
 import { MediaInlineNodeSelector, MediaSingleNodeSelector } from '../nodeviews/styles';
@@ -442,6 +442,7 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
     allowAltTextOnImages = options.allowAltTextOnImages,
     providerFactory = options.providerFactory,
     allowMediaInline = options.allowMediaInline,
+    allowResizing = options.allowResizing,
     getEditorFeatureFlags = options.getEditorFeatureFlags;
   var mediaPluginState = stateKey.getState(state);
   var mediaLinkingState = getMediaLinkingState(state);
@@ -505,8 +506,14 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
     };
     items = generateMediaSingleFloatingToolbar(state, intl, options, mediaPluginState, mediaLinkingState, pluginInjectionApi, getEditorFeatureFlags);
   }
-  return _objectSpread(_objectSpread({}, baseToolbar), {}, {
+  var toolbarConfig = _objectSpread(_objectSpread({}, baseToolbar), {}, {
     items: items,
     scrollable: true
   });
+  if (getBooleanFF('platform.editor.media.extended-resize-experience') && allowResizing) {
+    return _objectSpread(_objectSpread({}, toolbarConfig), {}, {
+      width: mediaPluginState.isResizing ? undefined : getMaxToolbarWidth()
+    });
+  }
+  return toolbarConfig;
 };

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

@@ -88,4 +88,16 @@ export var calcNewLayout = function calcNewLayout(width, layout, contentWidth) {
     return 'wide';
   }
   return isWrappedLayout && width !== contentWidth ? layout : 'center';
+};
+var maxToolbarFitWidth = 0;
+export var getMaxToolbarWidth = function getMaxToolbarWidth() {
+  var toolbar = document.querySelector("div[aria-label=\"Media floating controls\"]");
+  var toolbarWidth = toolbar === null || toolbar === void 0 ? void 0 : toolbar.getBoundingClientRect().width;
+  if (!toolbar) {
+    maxToolbarFitWidth = 0;
+  }
+  if (toolbarWidth && toolbarWidth > maxToolbarFitWidth) {
+    maxToolbarFitWidth = toolbarWidth;
+  }
+  return maxToolbarFitWidth;
 };

package/dist/esm/version-wrapper.js

@@ -1,5 +1,5 @@
 export var name = "@atlaskit/editor-core";
-export var version = "187.35.2";
+export var version = "187.35.3";
 export var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/types/plugins/media/toolbar/utils.d.ts

@@ -8,3 +8,4 @@ export declare const removeMediaGroupNode: (state: EditorState) => import("prose
 export declare const getSelectedMediaSingle: (state: EditorState) => import("prosemirror-utils/dist/types").FindResult;
 export declare const getPixelWidthOfElement: (editorView: EditorView, pos: number, mediaWidth: number) => number;
 export declare const calcNewLayout: (width: number, layout: RichMediaLayout, contentWidth: number, fullWidthMode?: boolean) => RichMediaLayout;
+export declare const getMaxToolbarWidth: () => number;

package/dist/types-ts4.5/plugins/media/toolbar/utils.d.ts

@@ -8,3 +8,4 @@ export declare const removeMediaGroupNode: (state: EditorState) => import("prose
 export declare const getSelectedMediaSingle: (state: EditorState) => import("prosemirror-utils/dist/types").FindResult;
 export declare const getPixelWidthOfElement: (editorView: EditorView, pos: number, mediaWidth: number) => number;
 export declare const calcNewLayout: (width: number, layout: RichMediaLayout, contentWidth: number, fullWidthMode?: boolean) => RichMediaLayout;
+export declare const getMaxToolbarWidth: () => number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-core",
-  "version": "187.35.2",
+  "version": "187.35.3",
   "description": "A package contains Atlassian editor core functionality",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"