@atlaskit/editor-core 187.14.4 → 187.14.8

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

@@ -15,8 +15,9 @@ import { messages } from './resizable-media-single-messages';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import classnames from 'classnames';
 import { richMediaClassName, resizerStyles } from '@atlaskit/editor-common/styles';
-import { MEDIA_SINGLE_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, MEDIA_SINGLE_HIGHLIGHT_GAP, calculateOffsetLeft, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/media-single';
-import { findClosestSnap, getSnapWidth, getGuidelinesWithHighlights, generateDefaultGuidelines, generateDynamicGuidelines } from '@atlaskit/editor-common/guideline';
+import { MEDIA_SINGLE_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, calculateOffsetLeft, DEFAULT_IMAGE_WIDTH, calcMediaSingleMaxWidth } from '@atlaskit/editor-common/media-single';
+import { findClosestSnap, getGuidelinesWithHighlights, generateDefaultGuidelines, generateDynamicGuidelines, getGuidelineSnaps } from '@atlaskit/editor-common/guideline';
+import memoizeOne from 'memoize-one';
 export const resizerNextTestId = 'mediaSingle.resizerNext.testid';
 
 // TODO: Create new fixed image size event
@@ -36,6 +37,23 @@ const getResizeAnalyticsEvent = (type, size, layout) => {
 class ResizableMediaSingleNext extends React.Component {
   constructor(props) {
     super(props);
+    _defineProperty(this, "guidelines", []);
+    _defineProperty(this, "getAllGuidelines", () => {
+      const {
+        view,
+        lineLength
+      } = this.props;
+      const defaultGuidelines = this.getDefaultGuidelines();
+      // disable guidelines for nested media single node
+      const dynamicGuidelines = this.isNestedNode() ? [] : generateDynamicGuidelines(view.state, lineLength, {
+        styles: {
+          lineStyle: 'dashed'
+        },
+        show: false
+      });
+      const guidelines = [...defaultGuidelines, ...dynamicGuidelines];
+      return guidelines;
+    });
     _defineProperty(this, "calcNewSize", (newWidth, stop) => {
       const {
         layout,
@@ -110,6 +128,106 @@ class ResizableMediaSingleNext extends React.Component {
       tr.setMeta('mediaSinglePlugin.isResizing', isResizing);
       return dispatch(tr);
     });
+    _defineProperty(this, "calcMaxWidth", memoizeOne((contentWidth, containerWidth, fullWidthMode) => {
+      if (this.isNestedNode() || fullWidthMode) {
+        return contentWidth;
+      }
+      return calcMediaSingleMaxWidth(containerWidth);
+    }));
+    _defineProperty(this, "updateActiveGuidelines", (width = 0, guidelines, guidelineSnapsReference) => {
+      if (guidelineSnapsReference.snaps.x) {
+        const {
+          gap,
+          keys: activeGuidelineKeys
+        } = findClosestSnap(width, guidelineSnapsReference.snaps.x, guidelineSnapsReference.guidelineReference, MEDIA_SINGLE_SNAP_GAP);
+        this.displayGuideline(getGuidelinesWithHighlights(gap, MEDIA_SINGLE_SNAP_GAP, activeGuidelineKeys, guidelines));
+      }
+    });
+    _defineProperty(this, "roundPixelValue", value => Math.round(value));
+    _defineProperty(this, "getHeightFromNewWidth", (originalWidth, originalHeight, newWidth) => this.roundPixelValue(originalHeight / originalWidth * newWidth));
+    _defineProperty(this, "calculateSizeState", (size, delta, originalWidth = 0, originalHeight, onResizeStop = false) => {
+      const calculatedWidth = this.roundPixelValue(size.width + delta.width);
+      const calculatedWidthWithLayout = this.calcNewSize(calculatedWidth, onResizeStop);
+      const calculatedHeightWithLayout = this.getHeightFromNewWidth(originalWidth, originalHeight, calculatedWidth);
+      return {
+        width: calculatedWidth,
+        height: calculatedHeightWithLayout,
+        calculatedWidthWithLayout
+      };
+    });
+    _defineProperty(this, "selectCurrentMediaNode", () => {
+      // TODO: if adding !this.props.selected, it doesn't work if media single node is at top postion
+      if (typeof this.props.getPos === 'function') {
+        const propPos = this.props.getPos();
+        if (propPos !== undefined) {
+          setNodeSelection(this.props.view, propPos);
+        }
+      }
+    });
+    _defineProperty(this, "handleResizeStart", () => {
+      this.setState({
+        isResizing: true
+      });
+      this.selectCurrentMediaNode();
+      this.setIsResizing(true);
+      // re-calucate guidelines
+      this.guidelines = this.getAllGuidelines();
+      return 0;
+    });
+    _defineProperty(this, "handleResize", (size, delta) => {
+      const {
+        width: originalWidth,
+        height: originalHeight,
+        layout,
+        updateSize,
+        lineLength
+      } = this.props;
+      const {
+        width,
+        height,
+        calculatedWidthWithLayout
+      } = this.calculateSizeState(size, delta, originalWidth, originalHeight);
+      const guidelineSnaps = getGuidelineSnaps(this.guidelines, lineLength, layout);
+      this.updateActiveGuidelines(width, this.guidelines, guidelineSnaps);
+      this.setState({
+        size: {
+          width,
+          height
+        },
+        snaps: guidelineSnaps.snaps
+      });
+      if (calculatedWidthWithLayout.layout !== layout) {
+        updateSize(width, calculatedWidthWithLayout.layout);
+      }
+    });
+    _defineProperty(this, "handleResizeStop", (size, delta) => {
+      const {
+        width: originalWidth,
+        height: originalHeight,
+        updateSize,
+        dispatchAnalyticsEvent,
+        nodeType
+      } = this.props;
+      const {
+        width,
+        height,
+        calculatedWidthWithLayout
+      } = this.calculateSizeState(size, delta, originalWidth, originalHeight, true);
+      this.setIsResizing(false);
+      this.displayGuideline([]);
+      if (dispatchAnalyticsEvent) {
+        dispatchAnalyticsEvent(getResizeAnalyticsEvent(nodeType, calculatedWidthWithLayout.width, calculatedWidthWithLayout.layout));
+      }
+      this.setState({
+        isResizing: false,
+        size: {
+          width,
+          height
+        }
+      }, () => {
+        updateSize(width, calculatedWidthWithLayout.layout);
+      });
+    });
     const initialWidth = props.mediaSingleWidth || DEFAULT_IMAGE_WIDTH;
     this.state = {
       offsetLeft: calculateOffsetLeft(this.insideInlineLike, this.insideLayout, this.props.view.dom, undefined),
@@ -119,7 +237,8 @@ class ResizableMediaSingleNext extends React.Component {
       size: {
         width: initialWidth,
         height: this.calcPxHeight(initialWidth)
-      }
+      },
+      snaps: {}
     };
   }
 
@@ -137,7 +256,7 @@ class ResizableMediaSingleNext extends React.Component {
     } = this.props;
     return Math.max(Math.min(origWidth || DEFAULT_IMAGE_WIDTH, contentWidth || containerWidth || akEditorDefaultLayoutWidth), MEDIA_SINGLE_MIN_PIXEL_WIDTH);
   }
-  componentDidUpdate(prevProps, prevState) {
+  componentDidUpdate(prevProps) {
     const offsetLeft = calculateOffsetLeft(this.insideInlineLike, this.insideLayout, this.props.view.dom, this.wrapper);
     if (offsetLeft !== this.state.offsetLeft && offsetLeft >= 0) {
       this.setState({
@@ -152,10 +271,6 @@ class ResizableMediaSingleNext extends React.Component {
         resizedPctWidth: this.props.pctWidth
       });
     }
-    if (prevState.isResizing !== this.state.isResizing && this.state.isResizing) {
-      const 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
@@ -184,71 +299,6 @@ class ResizableMediaSingleNext extends React.Component {
     // disable guidelines for nested media single node
     return this.isNestedNode() ? [] : 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
-  getSnaps() {
-    const {
-      view,
-      lineLength
-    } = this.props;
-    const {
-      dom
-    } = view;
-    const defaultGuidelines = this.getDefaultGuidelines();
-    // disable guidelines for nested media single node
-    const dynamicGuidelines = this.isNestedNode() ? [] : generateDynamicGuidelines(view.state, lineLength, {
-      styles: {
-        lineStyle: 'dashed'
-      },
-      show: false
-    });
-    const guidelines = [...defaultGuidelines, ...dynamicGuidelines];
-    const mediaSingleSelector = 'div.mediaSingleView-content-wrap.ProseMirror-selectednode';
-    const {
-      width
-    } = dom.getBoundingClientRect();
-    const halfWidth = width / 2;
-    const selectedMedia = dom.querySelector(mediaSingleSelector);
-    if (selectedMedia) {
-      const pixelWidth = parseFloat(selectedMedia.getAttribute('width') || '') || 0;
-      const layout = selectedMedia.getAttribute('layout');
-      let 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;
-      }
-      const snapWidths = getSnapWidth(guidelines, pixelWidth, snap, layout);
-      const snapToWidths = snapWidths.map(s => s && s.width);
-
-      // update guidelines
-      if (this.state.isResizing) {
-        const {
-          gap,
-          keys: activeGuidelineKeys
-        } = findClosestSnap(this.state.size.width, snapToWidths, snapWidths, MEDIA_SINGLE_HIGHLIGHT_GAP);
-        this.displayGuideline(getGuidelinesWithHighlights(gap, MEDIA_SINGLE_HIGHLIGHT_GAP, activeGuidelineKeys, guidelines));
-      }
-      return snapToWidths.length > 0 ? {
-        x: snapToWidths
-      } : {};
-    }
-    return {};
-  }
   get wrappedLayout() {
     return wrappedLayouts.indexOf(this.props.layout) > -1;
   }
@@ -341,7 +391,8 @@ class ResizableMediaSingleNext extends React.Component {
       fullWidthMode,
       selected,
       children,
-      intl
+      intl,
+      lineLength
     } = this.props;
     const {
       isResizing,
@@ -356,96 +407,6 @@ class ResizableMediaSingleNext extends React.Component {
       }
     });
 
-    /**
-     * NEW REFACTOR
-     */
-    const roundPixelValue = value => Math.round(value);
-    const getHeightFromNewWidth = (originalWidth, originalHeight, newWidth) => roundPixelValue(originalHeight / originalWidth * newWidth);
-    const calculateSizeState = (size, delta, originalWidth = 0, originalHeight, onResizeStop = false) => {
-      const calculatedWidth = roundPixelValue(size.width + delta.width);
-      const calculatedWidthWithLayout = this.calcNewSize(calculatedWidth, onResizeStop);
-      const calculatedHeightWithLayout = getHeightFromNewWidth(originalWidth, originalHeight, calculatedWidth);
-      return {
-        width: calculatedWidth,
-        height: calculatedHeightWithLayout,
-        calculatedWidthWithLayout
-      };
-    };
-    const selectCurrentMediaNode = () => {
-      if (!this.props.selected && typeof this.props.getPos === 'function') {
-        const propPos = this.props.getPos();
-        if (propPos !== undefined) {
-          setNodeSelection(this.props.view, propPos);
-        }
-      }
-    };
-    const handleResizeStart = () => {
-      this.setState({
-        isResizing: true
-      });
-      selectCurrentMediaNode();
-      this.setIsResizing(true);
-
-      // TODO: Update once type updated from editor common resizer
-      return 0;
-    };
-    const handleResize = (size, delta) => {
-      const {
-        width: originalWidth,
-        height: originalHeight,
-        layout,
-        updateSize
-      } = this.props;
-      const {
-        width,
-        height,
-        calculatedWidthWithLayout
-      } = calculateSizeState(size, delta, originalWidth, originalHeight);
-      this.setState({
-        size: {
-          width,
-          height
-        }
-      });
-      if (calculatedWidthWithLayout.layout !== layout) {
-        updateSize(width, calculatedWidthWithLayout.layout);
-      }
-
-      // TODO: Update once type updated from editor common resizer
-      return 0;
-    };
-    const handleResizeStop = (size, delta) => {
-      const {
-        width: originalWidth,
-        height: originalHeight,
-        updateSize,
-        dispatchAnalyticsEvent,
-        nodeType
-      } = this.props;
-      const {
-        width,
-        height,
-        calculatedWidthWithLayout
-      } = calculateSizeState(size, delta, originalWidth, originalHeight, true);
-      this.setIsResizing(false);
-      this.displayGuideline([]);
-      if (dispatchAnalyticsEvent) {
-        dispatchAnalyticsEvent(getResizeAnalyticsEvent(nodeType, calculatedWidthWithLayout.width, calculatedWidthWithLayout.layout));
-      }
-      this.setState({
-        isResizing: false,
-        size: {
-          width,
-          height
-        }
-      }, () => {
-        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
     const className = classnames(richMediaClassName, `image-${layout}`, isResizing ? 'is-resizing' : 'not-resizing', this.props.className, {
       'not-resized': !pctWidth,
@@ -455,6 +416,7 @@ class ResizableMediaSingleNext extends React.Component {
     const resizerNextClassName = classnames(className, resizerStyles);
     const showSizeGuide = selected || isResizing;
     const label = layout === 'full-width' ? intl.formatMessage(messages.fullWidthImage) : `${this.state.size.width} x ${this.state.size.height}`;
+    const maxWidth = this.calcMaxWidth(lineLength, containerWidth, fullWidthMode);
     return jsx("div", {
       ref: this.saveWrapper,
       css: wrapperStyle({
@@ -468,14 +430,15 @@ class ResizableMediaSingleNext extends React.Component {
       })
     }, jsx(ResizerNext, {
       minWidth: MEDIA_SINGLE_MIN_PIXEL_WIDTH,
+      maxWidth: maxWidth,
       className: resizerNextClassName,
       snapGap: 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: nonWrappedLayouts.includes(layout) ? 2 : 1,
       "data-testid": resizerNextTestId
     }, showSizeGuide && jsx(ResizeLabel, {

package/dist/es2019/version-wrapper.js

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

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

@@ -17,6 +17,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';
@@ -172,7 +173,9 @@ export 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
+      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(_assertThisInitialized(_this), "insertMention", function (inputMethod) {

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

@@ -1,4 +1,5 @@
 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";
@@ -238,11 +239,17 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
       }
       insertAndSelectCaptionFromMediaSinglePos(getPos(), node)(view.state, view.dispatch);
     });
-    _defineProperty(_assertThisInitialized(_this), "getLineLength", function (view, pos) {
+    /**
+     * Get parent width for a nested media single node
+     * @param view Editor view
+     * @param pos node position
+     * @param includeMoreParentNodeTypes should consider table and list as parent nodes(only true for new experience)
+     */
+    _defineProperty(_assertThisInitialized(_this), "getLineLength", function (view, pos, includeMoreParentNodeTypes) {
       if (typeof pos !== 'number') {
         return null;
       }
-      if (isRichMediaInsideOfBlockNode(view, pos)) {
+      if (isRichMediaInsideOfBlockNode(view, pos, includeMoreParentNodeTypes)) {
         var $pos = view.state.doc.resolve(pos);
         var domNode = view.nodeDOM($pos.pos);
         if ($pos.nodeAfter && floatingLayouts.indexOf($pos.nodeAfter.attrs.layout) > -1 && domNode && domNode.parentElement) {
@@ -354,7 +361,8 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
         height = DEFAULT_IMAGE_HEIGHT;
       }
       var isSelected = selected();
-      var contentWidth = this.getLineLength(view, getPos()) || lineLength;
+      var contentWidthForLegacyExperience = this.getLineLength(view, getPos()) || lineLength;
+      var contentWidth = this.getLineLength(view, getPos(), true) || lineLength;
       var mediaSingleProps = {
         layout: layout,
         width: width,
@@ -369,7 +377,9 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
           widthType: widthType,
           origWidth: width,
           layout: layout,
-          contentWidth: contentWidth,
+          // This will only be used when calculating legacy media single width
+          // thus we use the legecy value (exclude table as container node)
+          contentWidth: contentWidthForLegacyExperience,
           containerWidth: containerWidth,
           gutterOffset: MEDIA_SINGLE_GUTTER_SIZE
         })
@@ -408,7 +418,9 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
         ref: this.captionPlaceHolderRef,
         onClick: this.clickPlaceholder
       }));
-      return canResize ? getBooleanFF('platform.editor.media.extended-resize-experience') ? jsx(ResizableMediaSingleNext, ResizableMediaSingleProps, MediaChildren) : jsx(ResizableMediaSingle, ResizableMediaSingleProps, MediaChildren) : jsx(MediaSingle, mediaSingleProps, MediaChildren);
+      return canResize ? getBooleanFF('platform.editor.media.extended-resize-experience') ? jsx(ResizableMediaSingleNext, ResizableMediaSingleProps, MediaChildren) : jsx(ResizableMediaSingle, _extends({}, ResizableMediaSingleProps, {
+        lineLength: contentWidthForLegacyExperience
+      }), MediaChildren) : jsx(MediaSingle, mediaSingleProps, MediaChildren);
     }
   }]);
   return MediaSingleNode;