@atlaskit/editor-core 187.27.0 → 187.28.0

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

@@ -4,9 +4,9 @@ import React from 'react';
 import { jsx } from '@emotion/react';
 import { findParentNodeOfTypeClosestToPos, hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { getMediaClient } from '@atlaskit/media-client';
-import { calcPctFromPx, wrappedLayouts, handleSides, imageAlignmentMap, calcColumnsFromPx } from '@atlaskit/editor-common/ui';
+import { calcPctFromPx, wrappedLayouts, handleSides, imageAlignmentMap } from '@atlaskit/editor-common/ui';
 import { nonWrappedLayouts, setNodeSelection } from '@atlaskit/editor-common/utils';
-import { akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { akEditorFullWidthLayoutWidth, akEditorGutterPadding } from '@atlaskit/editor-shared-styles';
 import { wrapperStyle } from './styled';
 import { ResizerNext } from '@atlaskit/editor-common/resizer';
 import classnames from 'classnames';
@@ -94,12 +94,6 @@ class ResizableMediaSingleNext extends React.Component {
       // so that we have image aligned with text
       return 'full-width';
     });
-    _defineProperty(this, "calcColumnLeftOffset", () => {
-      const {
-        offsetLeft
-      } = this.state;
-      return this.insideInlineLike ? calcColumnsFromPx(offsetLeft, this.props.lineLength, this.props.gridSize) : 0;
-    });
     _defineProperty(this, "calcPxHeight", newWidth => {
       const {
         width = newWidth,
@@ -109,11 +103,8 @@ class ResizableMediaSingleNext extends React.Component {
     });
     _defineProperty(this, "saveWrapper", wrapper => this.wrapper = wrapper);
     _defineProperty(this, "displayGuideline", guidelines => {
-      var _pluginInjectionApi$d, _pluginInjectionApi$d2, _pluginInjectionApi$d3;
-      const {
-        pluginInjectionApi
-      } = this.props;
-      pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d === void 0 ? void 0 : (_pluginInjectionApi$d2 = _pluginInjectionApi$d.guideline) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : (_pluginInjectionApi$d3 = _pluginInjectionApi$d2.actions) === null || _pluginInjectionApi$d3 === void 0 ? void 0 : _pluginInjectionApi$d3.displayGuideline(this.props.view)({
+      var _this$props$pluginInj, _this$props$pluginInj2, _this$props$pluginInj3, _this$props$pluginInj4;
+      return (_this$props$pluginInj = this.props.pluginInjectionApi) === null || _this$props$pluginInj === void 0 ? void 0 : (_this$props$pluginInj2 = _this$props$pluginInj.dependencies) === null || _this$props$pluginInj2 === void 0 ? void 0 : (_this$props$pluginInj3 = _this$props$pluginInj2.guideline) === null || _this$props$pluginInj3 === void 0 ? void 0 : (_this$props$pluginInj4 = _this$props$pluginInj3.actions) === null || _this$props$pluginInj4 === void 0 ? void 0 : _this$props$pluginInj4.displayGuideline(this.props.view)({
         guidelines
       });
     });
@@ -142,9 +133,10 @@ class ResizableMediaSingleNext extends React.Component {
       return calcMediaSingleMaxWidth(containerWidth);
     }));
     _defineProperty(this, "getRelativeGuides", () => {
-      const relativeGuides = this.$pos && this.$pos.nodeAfter && this.state.size.width ? getRelativeGuidelines(this.state.relativeGuides, {
-        node: this.$pos.nodeAfter,
-        pos: this.$pos.pos
+      const $pos = this.$pos;
+      const relativeGuides = $pos && $pos.nodeAfter && this.state.size.width ? getRelativeGuidelines(this.state.relativeGuides, {
+        node: $pos.nodeAfter,
+        pos: $pos.pos
       }, this.props.view, this.props.lineLength, this.state.size) : [];
       return relativeGuides;
     });
@@ -159,51 +151,19 @@ class ResizableMediaSingleNext extends React.Component {
         this.displayGuideline([...getGuidelinesWithHighlights(gap, MEDIA_SINGLE_SNAP_GAP, activeGuidelineKeys, guidelines), ...relativeGuidelines]);
       }
     });
-    _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);
+    _defineProperty(this, "calculateSizeState", (size, delta, onResizeStop = false) => {
+      const calculatedWidth = Math.round(size.width + delta.width);
       const calculatedWidthWithLayout = this.calcNewSize(calculatedWidth, onResizeStop);
-      const calculatedHeightWithLayout = this.getHeightFromNewWidth(originalWidth, originalHeight, calculatedWidth);
       return {
         width: calculatedWidth,
-        height: calculatedHeightWithLayout,
+        height: calculatedWidth / this.aspectRatio,
         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, "getParentNodeTypeNameFromCurrentPositionNode", () => {
-      const $pos = this.$pos;
-      if (!$pos) {
-        return undefined;
-      }
-
-      // Supported Parent Nodes
-      const {
-        listItem,
-        expand,
-        tableCell,
-        tableHeader,
-        layoutSection,
-        nestedExpand
-      } = this.props.view.state.schema.nodes;
-      const parentNode = findParentNodeOfTypeClosestToPos($pos, [listItem, expand, tableCell, tableHeader, layoutSection, nestedExpand]);
-
-      // Return matched parent node name
-      if (parentNode) {
-        return parentNode.node.type.name;
-      }
-
-      // Return undefined if parent node cannot be found
-      return undefined;
+      const pos = this.pos;
+      pos && setNodeSelection(this.props.view, pos);
     });
     _defineProperty(this, "handleResizeStart", () => {
       this.setState({
@@ -212,13 +172,11 @@ class ResizableMediaSingleNext extends React.Component {
       this.selectCurrentMediaNode();
       this.setIsResizing(true);
       this.updateSizeInPluginState(this.state.size.width);
-      // re-calucate guidelines
+      // re-calculate guidelines
       this.updateGuidelines();
     });
     _defineProperty(this, "handleResize", (size, delta) => {
       const {
-        width: originalWidth,
-        height: originalHeight,
         layout,
         updateSize,
         lineLength
@@ -227,7 +185,7 @@ class ResizableMediaSingleNext extends React.Component {
         width,
         height,
         calculatedWidthWithLayout
-      } = this.calculateSizeState(size, delta, originalWidth, originalHeight);
+      } = this.calculateSizeState(size, delta);
       const guidelineSnaps = getGuidelineSnaps(this.state.guidelines, lineLength, layout);
       this.updateActiveGuidelines(width, this.state.guidelines, guidelineSnaps);
       const relativeSnaps = getRelativeGuideSnaps(this.state.relativeGuides, this.aspectRatio);
@@ -247,8 +205,6 @@ class ResizableMediaSingleNext extends React.Component {
     });
     _defineProperty(this, "handleResizeStop", (size, delta) => {
       const {
-        width: originalWidth,
-        height: originalHeight,
         updateSize,
         dispatchAnalyticsEvent,
         nodeType
@@ -257,14 +213,15 @@ class ResizableMediaSingleNext extends React.Component {
         width,
         height,
         calculatedWidthWithLayout
-      } = this.calculateSizeState(size, delta, originalWidth, originalHeight, true);
+      } = this.calculateSizeState(size, delta, true);
       if (dispatchAnalyticsEvent) {
+        const $pos = this.$pos;
         const event = getMediaResizeAnalyticsEvent(nodeType || 'mediaSingle', {
           width,
           layout: calculatedWidthWithLayout.layout,
           widthType: 'pixel',
           snapType: getGuidelineTypeFromKey(this.lastSnappedGuidelineKeys, this.state.guidelines),
-          parentNode: this.getParentNodeTypeNameFromCurrentPositionNode()
+          parentNode: $pos ? $pos.parent.type.name : undefined
         });
         if (event) {
           dispatchAnalyticsEvent(event);
@@ -297,21 +254,6 @@ class ResizableMediaSingleNext extends React.Component {
       guidelines: []
     };
   }
-
-  /**
-   * Calculate media single node initial width if props.mediaSingleWidth is undefined
-   * (Mainly when switching from lagacy experience to new experience).
-   *
-   * @returns initial width in pixel
-   */
-  calcInitialWidth() {
-    const {
-      width: origWidth,
-      lineLength: contentWidth,
-      containerWidth
-    } = this.props;
-    return Math.max(Math.min(origWidth || DEFAULT_IMAGE_WIDTH, contentWidth || containerWidth || akEditorDefaultLayoutWidth), MEDIA_SINGLE_MIN_PIXEL_WIDTH);
-  }
   componentDidUpdate(prevProps) {
     const offsetLeft = calculateOffsetLeft(this.insideInlineLike, this.insideLayout, this.props.view.dom, this.wrapper);
     if (offsetLeft !== this.state.offsetLeft && offsetLeft >= 0) {
@@ -352,24 +294,6 @@ class ResizableMediaSingleNext extends React.Component {
     }
     return true;
   }
-
-  // check if is inside of layout, table, expand, nestedExpand and list item
-  isNestedNode() {
-    return !!(this.$pos && this.$pos.parent.type.name !== 'doc');
-  }
-  getDefaultGuidelines() {
-    const {
-      lineLength,
-      containerWidth,
-      fullWidthMode
-    } = this.props;
-
-    // disable guidelines for nested media single node
-    return this.isNestedNode() ? [] : generateDefaultGuidelines(lineLength, containerWidth, fullWidthMode);
-  }
-  get wrappedLayout() {
-    return wrappedLayouts.indexOf(this.props.layout) > -1;
-  }
   async componentDidMount() {
     const {
       viewMediaClientConfig
@@ -383,6 +307,24 @@ class ResizableMediaSingleNext extends React.Component {
       this.checkVideoFile(nextProps.viewMediaClientConfig);
     }
   }
+  get wrappedLayout() {
+    return wrappedLayouts.indexOf(this.props.layout) > -1;
+  }
+  get pos() {
+    if (typeof this.props.getPos !== 'function') {
+      return null;
+    }
+    const pos = this.props.getPos();
+    if (Number.isNaN(pos) || typeof pos !== 'number') {
+      return null;
+    }
+    return pos;
+  }
+  get $pos() {
+    const pos = this.pos;
+    // need to pass view because we may not get updated props in time
+    return pos && this.props.view.state.doc.resolve(pos);
+  }
   get aspectRatio() {
     const {
       width,
@@ -391,9 +333,46 @@ class ResizableMediaSingleNext extends React.Component {
     if (width) {
       return width / height;
     }
+
     // TODO handle this case
     return 1;
   }
+  get insideInlineLike() {
+    const $pos = this.$pos;
+    if (!$pos) {
+      return false;
+    }
+    const {
+      listItem
+    } = this.props.view.state.schema.nodes;
+    return !!findParentNodeOfTypeClosestToPos($pos, [listItem]);
+  }
+  get insideLayout() {
+    const $pos = this.$pos;
+    if (!$pos) {
+      return false;
+    }
+    const {
+      layoutColumn
+    } = this.props.view.state.schema.nodes;
+    return !!findParentNodeOfTypeClosestToPos($pos, [layoutColumn]);
+  }
+
+  // check if is inside of layout, table, expand, nestedExpand and list item
+  isNestedNode() {
+    const $pos = this.$pos;
+    return !!($pos && $pos.parent.type !== $pos.parent.type.schema.nodes.doc);
+  }
+  getDefaultGuidelines() {
+    const {
+      lineLength,
+      containerWidth,
+      fullWidthMode
+    } = this.props;
+
+    // disable guidelines for nested media single node
+    return this.isNestedNode() ? [] : generateDefaultGuidelines(lineLength, containerWidth, fullWidthMode);
+  }
   async checkVideoFile(viewMediaClientConfig) {
     const $pos = this.$pos;
     if (!$pos || !viewMediaClientConfig) {
@@ -419,48 +398,6 @@ class ResizableMediaSingleNext extends React.Component {
       });
     }
   }
-  get $pos() {
-    if (typeof this.props.getPos !== 'function') {
-      return null;
-    }
-    const pos = this.props.getPos();
-    if (Number.isNaN(pos) || typeof pos !== 'number') {
-      return null;
-    }
-
-    // need to pass view because we may not get updated props in time
-    return this.props.view.state.doc.resolve(pos);
-  }
-
-  /**
-   * The maxmimum number of grid columns this node can resize to.
-   */
-  get gridWidth() {
-    const {
-      gridSize
-    } = this.props;
-    return !(this.wrappedLayout || this.insideInlineLike) ? gridSize / 2 : gridSize;
-  }
-  get insideInlineLike() {
-    const $pos = this.$pos;
-    if (!$pos) {
-      return false;
-    }
-    const {
-      listItem
-    } = this.props.view.state.schema.nodes;
-    return !!findParentNodeOfTypeClosestToPos($pos, [listItem]);
-  }
-  get insideLayout() {
-    const $pos = this.$pos;
-    if (!$pos) {
-      return false;
-    }
-    const {
-      layoutColumn
-    } = this.props.view.state.schema.nodes;
-    return !!findParentNodeOfTypeClosestToPos($pos, [layoutColumn]);
-  }
   render() {
     const {
       width: origWidth,

package/dist/es2019/version-wrapper.js

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

package/dist/esm/plugins/insert-block/types.js

@@ -0,0 +1 @@
+export {};