@atlaskit/editor-core 187.14.3 → 187.14.7

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

@@ -15,8 +15,8 @@ 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 } from '@atlaskit/editor-common/media-single';
+import { findClosestSnap, getGuidelinesWithHighlights, generateDefaultGuidelines, generateDynamicGuidelines, getGuidelineSnaps } from '@atlaskit/editor-common/guideline';
 export const resizerNextTestId = 'mediaSingle.resizerNext.testid';
 
 // TODO: Create new fixed image size event
@@ -36,6 +36,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 +127,106 @@ class ResizableMediaSingleNext extends React.Component {
       tr.setMeta('mediaSinglePlugin.isResizing', isResizing);
       return dispatch(tr);
     });
+    _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);
+      }
+
+      // TODO: Update once type updated from editor common resizer
+      return 0;
+    });
+    _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);
+      });
+
+      // TODO: Update once type updated from editor common resizer
+      return 0;
+    });
     const initialWidth = props.mediaSingleWidth || DEFAULT_IMAGE_WIDTH;
     this.state = {
       offsetLeft: calculateOffsetLeft(this.insideInlineLike, this.insideLayout, this.props.view.dom, undefined),
@@ -119,7 +236,8 @@ class ResizableMediaSingleNext extends React.Component {
       size: {
         width: initialWidth,
         height: this.calcPxHeight(initialWidth)
-      }
+      },
+      snaps: {}
     };
   }
 
@@ -137,7 +255,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 +270,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 +298,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;
   }
@@ -356,96 +405,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,
@@ -472,10 +431,10 @@ class ResizableMediaSingleNext extends React.Component {
       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.3";
+export const version = "187.14.7";
 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.3",
+	"version": "187.14.7",
 	"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) {