@atlaskit/editor-core 187.30.7 → 187.30.8

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-core
 
+## 187.30.8
+
+### Patch Changes
+
+- [`04a2b9f4cfe`](https://bitbucket.org/atlassian/atlassian-frontend/commits/04a2b9f4cfe) - fix convert pixels in nested table when media single node does not have width
+- [`edeab2d50b2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/edeab2d50b2) - Fix analytics event for image resizing and relative snaps
+- Updated dependencies
+
 ## 187.30.7
 
 ### Patch Changes

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

@@ -268,7 +268,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
         type: 'custom',
         fallback: [],
         render: function render(editorView) {
-          var _widthPlugin$sharedSt2, _widthPlugin$sharedSt3;
+          var _widthPlugin$sharedSt2;
           if (!editorView) {
             return null;
           }
@@ -279,15 +279,11 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
             return null;
           }
           var contentWidth = (widthPlugin === null || widthPlugin === void 0 ? void 0 : (_widthPlugin$sharedSt2 = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt2 === void 0 ? void 0 : _widthPlugin$sharedSt2.lineLength) || _editorSharedStyles.akEditorDefaultLayoutWidth;
-          var containerWidth = (widthPlugin === null || widthPlugin === void 0 ? void 0 : (_widthPlugin$sharedSt3 = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt3 === void 0 ? void 0 : _widthPlugin$sharedSt3.width) || _editorSharedStyles.akEditorFullWidthLayoutWidth;
           var selectedMediaNode = selectedMediaSingleNode.node.content.firstChild;
           if (!selectedMediaNode) {
             return null;
           }
-          var _selectedMediaSingleN = selectedMediaSingleNode.node.attrs,
-            singleMediaWidth = _selectedMediaSingleN.width,
-            widthType = _selectedMediaSingleN.widthType,
-            layout = _selectedMediaSingleN.layout;
+          var widthType = selectedMediaSingleNode.node.attrs.widthType;
           var _selectedMediaNode$at = selectedMediaNode.attrs,
             mediaWidth = _selectedMediaNode$at.width,
             mediaHeight = _selectedMediaNode$at.height;
@@ -296,15 +292,9 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
           var isVideoFile = (0, _mediaSingle.isVideo)(selectedMediaNode.attrs.__fileMimeType);
           var minWidth = (0, _mediaSingle2.calcMinWidth)(isVideoFile, maxWidthForNestedNode || contentWidth);
           var isLegacy = widthType !== 'pixel';
-          var pixelWidth = (0, _mediaSingle2.calcMediaSinglePixelWidth)({
-            width: singleMediaWidth,
-            widthType: widthType,
-            origWidth: mediaWidth || _mediaSingle2.DEFAULT_IMAGE_WIDTH,
-            layout: layout,
-            contentWidth: (0, _mediaSingle2.getMaxWidthForNestedNode)(editorView, selectedMediaSingleNode.pos) || contentWidth,
-            containerWidth: containerWidth,
-            gutterOffset: _mediaSingle2.MEDIA_SINGLE_GUTTER_SIZE
-          });
+          var pixelWidth = (0, _utils2.getPixelWidthOfElement)(editorView, selectedMediaSingleNode.pos + 1,
+          // get pos of media node
+          mediaWidth || _mediaSingle2.DEFAULT_IMAGE_WIDTH);
           return /*#__PURE__*/_react.default.createElement(_PixelEntry.PixelEntry, {
             intl: intl,
             width: pluginState.isResizing ? pluginState.resizingWidth : pixelWidth,

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.downloadMedia = void 0;
+exports.removeMediaGroupNode = exports.getSelectedMediaSingle = exports.getSelectedMediaContainerNodeAttrs = exports.getPixelWidthOfElement = exports.downloadMedia = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _mediaClient = require("@atlaskit/media-client");
@@ -73,4 +73,12 @@ var getSelectedMediaSingle = function getSelectedMediaSingle(state) {
   var mediaSingle = state.schema.nodes.mediaSingle;
   return (0, _utils.findSelectedNodeOfType)(mediaSingle)(state.selection) || (0, _utils.findParentNodeOfType)(mediaSingle)(state.selection);
 };
-exports.getSelectedMediaSingle = getSelectedMediaSingle;
+exports.getSelectedMediaSingle = getSelectedMediaSingle;
+var getPixelWidthOfElement = function getPixelWidthOfElement(editorView, pos, mediaWidth) {
+  var domNode = editorView.nodeDOM(pos);
+  if (domNode instanceof HTMLElement) {
+    return domNode.offsetWidth;
+  }
+  return mediaWidth;
+};
+exports.getPixelWidthOfElement = getPixelWidthOfElement;

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

@@ -185,8 +185,10 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
         var _findClosestSnap = (0, _guideline.findClosestSnap)(width, guidelineSnapsReference.snaps.x, guidelineSnapsReference.guidelineReference, _mediaSingle.MEDIA_SINGLE_SNAP_GAP),
           gap = _findClosestSnap.gap,
           activeGuidelineKeys = _findClosestSnap.keys;
-        _this.lastSnappedGuidelineKeys = activeGuidelineKeys;
         var relativeGuidelines = activeGuidelineKeys.length ? [] : _this.getRelativeGuides();
+        _this.lastSnappedGuidelineKeys = activeGuidelineKeys.length ? activeGuidelineKeys : relativeGuidelines.map(function (rg) {
+          return rg.key;
+        });
         _this.displayGuideline([].concat((0, _toConsumableArray2.default)((0, _guideline.getGuidelinesWithHighlights)(gap, _mediaSingle.MEDIA_SINGLE_SNAP_GAP, activeGuidelineKeys, guidelines)), (0, _toConsumableArray2.default)(relativeGuidelines)));
       }
     });

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.30.7";
+var version = "187.30.8";
 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 } from './utils';
+import { downloadMedia, getSelectedMediaSingle, removeMediaGroupNode, getPixelWidthOfElement } from './utils';
 import { isVideo } from '../utils/media-single';
 import { changeInlineToMediaCard, changeMediaCardToInline, removeInlineCard, setBorderMark, toggleBorderMark } from './commands';
 import { MediaInlineNodeSelector, MediaSingleNodeSelector } from '../nodeviews/styles';
@@ -26,7 +26,7 @@ import ImageBorderItem from '../ui/ImageBorder';
 import { currentMediaNodeBorderMark } from '../utils/current-media-node';
 import { shouldShowImageBorder } from './imageBorder';
 import { PixelEntry } from '../ui/PixelEntry';
-import { DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, MEDIA_SINGLE_GUTTER_SIZE, calcMediaSinglePixelWidth, calcMinWidth, getMaxWidthForNestedNode, getMaxWidthForNestedNodeNext } from '@atlaskit/editor-common/media-single';
+import { DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, calcMinWidth, getMaxWidthForNestedNodeNext } from '@atlaskit/editor-common/media-single';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
 const remove = (state, dispatch) => {
   if (dispatch) {
@@ -270,7 +270,7 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
         type: 'custom',
         fallback: [],
         render: editorView => {
-          var _widthPlugin$sharedSt2, _widthPlugin$sharedSt3;
+          var _widthPlugin$sharedSt2;
           if (!editorView) {
             return null;
           }
@@ -283,15 +283,12 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
             return null;
           }
           const contentWidth = (widthPlugin === null || widthPlugin === void 0 ? void 0 : (_widthPlugin$sharedSt2 = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt2 === void 0 ? void 0 : _widthPlugin$sharedSt2.lineLength) || akEditorDefaultLayoutWidth;
-          const containerWidth = (widthPlugin === null || widthPlugin === void 0 ? void 0 : (_widthPlugin$sharedSt3 = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt3 === void 0 ? void 0 : _widthPlugin$sharedSt3.width) || akEditorFullWidthLayoutWidth;
           const selectedMediaNode = selectedMediaSingleNode.node.content.firstChild;
           if (!selectedMediaNode) {
             return null;
           }
           const {
-            width: singleMediaWidth,
-            widthType,
-            layout
+            widthType
           } = selectedMediaSingleNode.node.attrs;
           const {
             width: mediaWidth,
@@ -302,15 +299,9 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
           const isVideoFile = isVideo(selectedMediaNode.attrs.__fileMimeType);
           const minWidth = calcMinWidth(isVideoFile, maxWidthForNestedNode || contentWidth);
           const isLegacy = widthType !== 'pixel';
-          const pixelWidth = calcMediaSinglePixelWidth({
-            width: singleMediaWidth,
-            widthType,
-            origWidth: mediaWidth || DEFAULT_IMAGE_WIDTH,
-            layout,
-            contentWidth: getMaxWidthForNestedNode(editorView, selectedMediaSingleNode.pos) || contentWidth,
-            containerWidth,
-            gutterOffset: MEDIA_SINGLE_GUTTER_SIZE
-          });
+          const pixelWidth = getPixelWidthOfElement(editorView, selectedMediaSingleNode.pos + 1,
+          // get pos of media node
+          mediaWidth || DEFAULT_IMAGE_WIDTH);
           return /*#__PURE__*/React.createElement(PixelEntry, {
             intl: intl,
             width: pluginState.isResizing ? pluginState.resizingWidth : pixelWidth,

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

@@ -46,4 +46,11 @@ export const getSelectedMediaSingle = state => {
     mediaSingle
   } = state.schema.nodes;
   return findSelectedNodeOfType(mediaSingle)(state.selection) || findParentNodeOfType(mediaSingle)(state.selection);
+};
+export const getPixelWidthOfElement = (editorView, pos, mediaWidth) => {
+  const domNode = editorView.nodeDOM(pos);
+  if (domNode instanceof HTMLElement) {
+    return domNode.offsetWidth;
+  }
+  return mediaWidth;
 };

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

@@ -167,8 +167,8 @@ class ResizableMediaSingleNext extends React.Component {
           gap,
           keys: activeGuidelineKeys
         } = findClosestSnap(width, guidelineSnapsReference.snaps.x, guidelineSnapsReference.guidelineReference, MEDIA_SINGLE_SNAP_GAP);
-        this.lastSnappedGuidelineKeys = activeGuidelineKeys;
         const relativeGuidelines = activeGuidelineKeys.length ? [] : this.getRelativeGuides();
+        this.lastSnappedGuidelineKeys = activeGuidelineKeys.length ? activeGuidelineKeys : relativeGuidelines.map(rg => rg.key);
         this.displayGuideline([...getGuidelinesWithHighlights(gap, MEDIA_SINGLE_SNAP_GAP, activeGuidelineKeys, guidelines), ...relativeGuidelines]);
       }
     });

package/dist/es2019/version-wrapper.js

@@ -1,5 +1,5 @@
 export const name = "@atlaskit/editor-core";
-export const version = "187.30.7";
+export const version = "187.30.8";
 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 } from './utils';
+import { downloadMedia, getSelectedMediaSingle, removeMediaGroupNode, getPixelWidthOfElement } from './utils';
 import { isVideo } from '../utils/media-single';
 import { changeInlineToMediaCard, changeMediaCardToInline, removeInlineCard, setBorderMark, toggleBorderMark } from './commands';
 import { MediaInlineNodeSelector, MediaSingleNodeSelector } from '../nodeviews/styles';
@@ -30,7 +30,7 @@ import ImageBorderItem from '../ui/ImageBorder';
 import { currentMediaNodeBorderMark } from '../utils/current-media-node';
 import { shouldShowImageBorder } from './imageBorder';
 import { PixelEntry } from '../ui/PixelEntry';
-import { DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, MEDIA_SINGLE_GUTTER_SIZE, calcMediaSinglePixelWidth, calcMinWidth, getMaxWidthForNestedNode, getMaxWidthForNestedNodeNext } from '@atlaskit/editor-common/media-single';
+import { DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, calcMinWidth, getMaxWidthForNestedNodeNext } from '@atlaskit/editor-common/media-single';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
 var remove = function remove(state, dispatch) {
   if (dispatch) {
@@ -261,7 +261,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
         type: 'custom',
         fallback: [],
         render: function render(editorView) {
-          var _widthPlugin$sharedSt2, _widthPlugin$sharedSt3;
+          var _widthPlugin$sharedSt2;
           if (!editorView) {
             return null;
           }
@@ -272,15 +272,11 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
             return null;
           }
           var contentWidth = (widthPlugin === null || widthPlugin === void 0 ? void 0 : (_widthPlugin$sharedSt2 = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt2 === void 0 ? void 0 : _widthPlugin$sharedSt2.lineLength) || akEditorDefaultLayoutWidth;
-          var containerWidth = (widthPlugin === null || widthPlugin === void 0 ? void 0 : (_widthPlugin$sharedSt3 = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt3 === void 0 ? void 0 : _widthPlugin$sharedSt3.width) || akEditorFullWidthLayoutWidth;
           var selectedMediaNode = selectedMediaSingleNode.node.content.firstChild;
           if (!selectedMediaNode) {
             return null;
           }
-          var _selectedMediaSingleN = selectedMediaSingleNode.node.attrs,
-            singleMediaWidth = _selectedMediaSingleN.width,
-            widthType = _selectedMediaSingleN.widthType,
-            layout = _selectedMediaSingleN.layout;
+          var widthType = selectedMediaSingleNode.node.attrs.widthType;
           var _selectedMediaNode$at = selectedMediaNode.attrs,
             mediaWidth = _selectedMediaNode$at.width,
             mediaHeight = _selectedMediaNode$at.height;
@@ -289,15 +285,9 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
           var isVideoFile = isVideo(selectedMediaNode.attrs.__fileMimeType);
           var minWidth = calcMinWidth(isVideoFile, maxWidthForNestedNode || contentWidth);
           var isLegacy = widthType !== 'pixel';
-          var pixelWidth = calcMediaSinglePixelWidth({
-            width: singleMediaWidth,
-            widthType: widthType,
-            origWidth: mediaWidth || DEFAULT_IMAGE_WIDTH,
-            layout: layout,
-            contentWidth: getMaxWidthForNestedNode(editorView, selectedMediaSingleNode.pos) || contentWidth,
-            containerWidth: containerWidth,
-            gutterOffset: MEDIA_SINGLE_GUTTER_SIZE
-          });
+          var pixelWidth = getPixelWidthOfElement(editorView, selectedMediaSingleNode.pos + 1,
+          // get pos of media node
+          mediaWidth || DEFAULT_IMAGE_WIDTH);
           return /*#__PURE__*/React.createElement(PixelEntry, {
             intl: intl,
             width: pluginState.isResizing ? pluginState.resizingWidth : pixelWidth,

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

@@ -62,4 +62,11 @@ export var removeMediaGroupNode = function removeMediaGroupNode(state) {
 export var getSelectedMediaSingle = function getSelectedMediaSingle(state) {
   var mediaSingle = state.schema.nodes.mediaSingle;
   return findSelectedNodeOfType(mediaSingle)(state.selection) || findParentNodeOfType(mediaSingle)(state.selection);
+};
+export var getPixelWidthOfElement = function getPixelWidthOfElement(editorView, pos, mediaWidth) {
+  var domNode = editorView.nodeDOM(pos);
+  if (domNode instanceof HTMLElement) {
+    return domNode.offsetWidth;
+  }
+  return mediaWidth;
 };

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

@@ -178,8 +178,10 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
         var _findClosestSnap = findClosestSnap(width, guidelineSnapsReference.snaps.x, guidelineSnapsReference.guidelineReference, MEDIA_SINGLE_SNAP_GAP),
           gap = _findClosestSnap.gap,
           activeGuidelineKeys = _findClosestSnap.keys;
-        _this.lastSnappedGuidelineKeys = activeGuidelineKeys;
         var relativeGuidelines = activeGuidelineKeys.length ? [] : _this.getRelativeGuides();
+        _this.lastSnappedGuidelineKeys = activeGuidelineKeys.length ? activeGuidelineKeys : relativeGuidelines.map(function (rg) {
+          return rg.key;
+        });
         _this.displayGuideline([].concat(_toConsumableArray(getGuidelinesWithHighlights(gap, MEDIA_SINGLE_SNAP_GAP, activeGuidelineKeys, guidelines)), _toConsumableArray(relativeGuidelines)));
       }
     });

package/dist/esm/version-wrapper.js

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

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

@@ -1,7 +1,9 @@
 import type { MediaBaseAttributes } from '@atlaskit/adf-schema';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { MediaPluginState } from '../pm-plugins/types';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 export declare const getSelectedMediaContainerNodeAttrs: (mediaPluginState: MediaPluginState) => MediaBaseAttributes | null;
 export declare const downloadMedia: (mediaPluginState: MediaPluginState) => Promise<boolean>;
 export declare const removeMediaGroupNode: (state: EditorState) => import("prosemirror-state").Transaction;
 export declare const getSelectedMediaSingle: (state: EditorState) => import("prosemirror-utils/dist/types").FindResult;
+export declare const getPixelWidthOfElement: (editorView: EditorView, pos: number, mediaWidth: number) => number;

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

@@ -1,7 +1,9 @@
 import type { MediaBaseAttributes } from '@atlaskit/adf-schema';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { MediaPluginState } from '../pm-plugins/types';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 export declare const getSelectedMediaContainerNodeAttrs: (mediaPluginState: MediaPluginState) => MediaBaseAttributes | null;
 export declare const downloadMedia: (mediaPluginState: MediaPluginState) => Promise<boolean>;
 export declare const removeMediaGroupNode: (state: EditorState) => import("prosemirror-state").Transaction;
 export declare const getSelectedMediaSingle: (state: EditorState) => import("prosemirror-utils/dist/types").FindResult;
+export declare const getPixelWidthOfElement: (editorView: EditorView, pos: number, mediaWidth: number) => number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-core",
-  "version": "187.30.7",
+  "version": "187.30.8",
   "description": "A package contains Atlassian editor core functionality",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -104,7 +104,7 @@
     "@atlaskit/radio": "^5.6.0",
     "@atlaskit/section-message": "^6.4.0",
     "@atlaskit/select": "^16.5.0",
-    "@atlaskit/smart-card": "^26.15.0",
+    "@atlaskit/smart-card": "^26.16.0",
     "@atlaskit/smart-user-picker": "^6.3.0",
     "@atlaskit/spinner": "^15.5.0",
     "@atlaskit/status": "^1.3.0",