@atlaskit/editor-core 188.3.0 → 188.4.0

package/dist/es2019/plugins/media/ui/PixelEntry/styles.js

@@ -1,51 +0,0 @@
-import { css } from '@emotion/react';
-const PIXEL_SIZING_WRAPPER_MINIMUM_WIDTH = 120;
-export const pixelSizingWrapper = css`
-  display: grid;
-  grid-template-columns: 1fr 1em 1fr 0;
-  grid-template-rows: auto;
-  grid-template-areas: 'widthinput label heightinput submit';
-  width: ${PIXEL_SIZING_WRAPPER_MINIMUM_WIDTH}px;
-  text-align: center;
-  height: ${"var(--ds-space-300, 24px)"};
-
-  // Atlaskit fieldset does not allow style override
-  & > * {
-    margin-top: 0 !important;
-  }
-`;
-export const pixelEntryForm = css`
-  form {
-    width: 100%;
-  }
-`;
-export const pixelSizingInput = css`
-  width: 100%;
-  height: ${"var(--ds-space-300, 24px)"};
-  & input {
-    text-align: center;
-  }
-`;
-export const pixelSizingLabel = css`
-  grid-area: label;
-  line-height: ${"var(--ds-space-300, 24px)"};
-`;
-export const pixelSizingWidthInput = css`
-  grid-area: widthinput;
-`;
-export const pixelSizingHeightInput = css`
-  grid-area: heightinput;
-`;
-export const pixelEntryHiddenSubmit = css`
-  grid-area: submit;
-  visibility: hidden;
-  width: 0;
-  height: 0;
-`;
-export const pixelSizingFullWidthLabelStyles = css`
-  min-width: ${PIXEL_SIZING_WRAPPER_MINIMUM_WIDTH}px;
-  height: ${"var(--ds-space-300, 24px)"};
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`;

package/dist/es2019/plugins/media/ui/PixelEntry/types.js

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

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

@@ -1,9 +0,0 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/react';
-import { resizableMediaMigrationNotificationStyle } from './styles';
-export const ResizableMediaMigrationNotification = () => {
-  return jsx("div", {
-    "data-testid": "resizable-media-migration-notification",
-    css: [resizableMediaMigrationNotificationStyle]
-  });
-};

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

@@ -1,453 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-/** @jsx jsx */
-import React from 'react';
-import { jsx } from '@emotion/react';
-import classnames from 'classnames';
-import throttle from 'lodash/throttle';
-import memoizeOne from 'memoize-one';
-import { findClosestSnap, generateDefaultGuidelines, generateDynamicGuidelines, getGuidelineSnaps, getGuidelinesWithHighlights, getGuidelineTypeFromKey, getRelativeGuidelines, getRelativeGuideSnaps } from '@atlaskit/editor-common/guideline';
-import { calcMediaSingleMaxWidth, DEFAULT_IMAGE_WIDTH, MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, MEDIA_SINGLE_RESIZE_THROTTLE_TIME, MEDIA_SINGLE_SNAP_GAP, MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH } from '@atlaskit/editor-common/media-single';
-import { ResizerNext } from '@atlaskit/editor-common/resizer';
-import { resizerStyles, richMediaClassName } from '@atlaskit/editor-common/styles';
-import { calcPctFromPx, handleSides, imageAlignmentMap, wrappedLayouts } from '@atlaskit/editor-common/ui';
-import { nonWrappedLayouts, setNodeSelection } from '@atlaskit/editor-common/utils';
-import { findParentNodeOfTypeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
-import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding } from '@atlaskit/editor-shared-styles';
-import { MEDIA_PLUGIN_IS_RESIZING_KEY, MEDIA_PLUGIN_RESIZING_WIDTH_KEY } from '../../pm-plugins/main';
-import { getMediaResizeAnalyticsEvent } from '../../utils/analytics';
-import { checkMediaType } from '../../utils/check-media-type';
-import { ResizableMediaMigrationNotification } from './ResizableMediaMigrationNotification';
-import { wrapperStyle } from './styled';
-export const resizerNextTestId = 'mediaSingle.resizerNext.testid';
-class ResizableMediaSingleNext extends React.Component {
-  constructor(props) {
-    super(props);
-    _defineProperty(this, "lastSnappedGuidelineKeys", []);
-    _defineProperty(this, "updateGuidelines", () => {
-      const {
-        view,
-        lineLength
-      } = this.props;
-      const defaultGuidelines = this.getDefaultGuidelines();
-      const {
-        relativeGuides,
-        dynamicGuides
-      } = generateDynamicGuidelines(view.state, lineLength, {
-        styles: {
-          lineStyle: 'dashed'
-        },
-        show: false
-      });
-
-      // disable guidelines for nested media single node
-      const dynamicGuidelines = this.isNestedNode() ? [] : dynamicGuides;
-      this.setState({
-        relativeGuides,
-        guidelines: [...defaultGuidelines, ...dynamicGuidelines]
-      });
-    });
-    _defineProperty(this, "calcNewLayout", (newWidth, stop) => {
-      const {
-        layout,
-        containerWidth,
-        lineLength,
-        fullWidthMode
-      } = this.props;
-      const newPct = calcPctFromPx(newWidth, lineLength) * 100;
-      if (newPct <= 100 && this.wrappedLayout) {
-        if (!stop || newPct !== 100) {
-          return layout;
-        }
-      }
-      return this.calcUnwrappedLayout(newWidth, containerWidth, lineLength, fullWidthMode, this.isNestedNode());
-    });
-    _defineProperty(this, "calcUnwrappedLayout", (width, containerWidth, contentWidth, fullWidthMode, isNestedNode) => {
-      if (isNestedNode) {
-        return 'center';
-      }
-      if (fullWidthMode) {
-        if (width < contentWidth) {
-          return 'center';
-        }
-        return 'full-width';
-      }
-
-      // handle top-level node in fixed-width editor
-      if (width <= contentWidth) {
-        return 'center';
-      }
-      if (width < Math.min(containerWidth - akEditorGutterPadding * 2, akEditorFullWidthLayoutWidth)) {
-        return 'wide';
-      }
-
-      // set full width to be containerWidth - akEditorGutterPadding * 2
-      // instead of containerWidth - akEditorBreakoutPadding,
-      // so that we have image aligned with text
-      return 'full-width';
-    });
-    _defineProperty(this, "calcPxHeight", newWidth => {
-      const {
-        width = newWidth,
-        height
-      } = this.props;
-      return Math.round(height / width * newWidth);
-    });
-    _defineProperty(this, "displayGuideline", guidelines => {
-      var _this$props$pluginInj, _this$props$pluginInj2, _this$props$pluginInj3;
-      return (_this$props$pluginInj = this.props.pluginInjectionApi) === null || _this$props$pluginInj === void 0 ? void 0 : (_this$props$pluginInj2 = _this$props$pluginInj.guideline) === null || _this$props$pluginInj2 === void 0 ? void 0 : (_this$props$pluginInj3 = _this$props$pluginInj2.actions) === null || _this$props$pluginInj3 === void 0 ? void 0 : _this$props$pluginInj3.displayGuideline(this.props.view)({
-        guidelines
-      });
-    });
-    _defineProperty(this, "setIsResizing", isResizing => {
-      const {
-        state,
-        dispatch
-      } = this.props.view;
-      const tr = state.tr;
-      tr.setMeta(MEDIA_PLUGIN_IS_RESIZING_KEY, isResizing);
-      return dispatch(tr);
-    });
-    _defineProperty(this, "updateSizeInPluginState", throttle(width => {
-      const {
-        state,
-        dispatch
-      } = this.props.view;
-      const tr = state.tr;
-      tr.setMeta(MEDIA_PLUGIN_RESIZING_WIDTH_KEY, width);
-      return dispatch(tr);
-    }, MEDIA_SINGLE_RESIZE_THROTTLE_TIME));
-    _defineProperty(this, "calcMaxWidth", memoizeOne((contentWidth, containerWidth, fullWidthMode) => {
-      if (this.isNestedNode() || fullWidthMode) {
-        return contentWidth;
-      }
-      return calcMediaSingleMaxWidth(containerWidth);
-    }));
-    _defineProperty(this, "calcMinWidth", memoizeOne((isVideoFile, contentWidth) => {
-      return Math.min(contentWidth || akEditorDefaultLayoutWidth, isVideoFile ? MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH : MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH);
-    }));
-    _defineProperty(this, "getRelativeGuides", () => {
-      var _this$props$pluginInj4, _this$props$pluginInj5, _this$props$pluginInj6;
-      const guidelinePluginState = (_this$props$pluginInj4 = this.props.pluginInjectionApi) === null || _this$props$pluginInj4 === void 0 ? void 0 : (_this$props$pluginInj5 = _this$props$pluginInj4.guideline) === null || _this$props$pluginInj5 === void 0 ? void 0 : (_this$props$pluginInj6 = _this$props$pluginInj5.sharedState) === null || _this$props$pluginInj6 === void 0 ? void 0 : _this$props$pluginInj6.currentState();
-      const {
-        top: topOffset
-      } = (guidelinePluginState === null || guidelinePluginState === void 0 ? void 0 : guidelinePluginState.rect) || {
-        top: 0,
-        left: 0
-      };
-      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, topOffset, this.state.size) : [];
-      return relativeGuides;
-    });
-    _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);
-        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]);
-      }
-    });
-    _defineProperty(this, "calculateSizeState", (size, delta, onResizeStop = false) => {
-      const calculatedWidth = Math.round(size.width + delta.width);
-      const calculatedWidthWithLayout = this.calcNewLayout(calculatedWidth, onResizeStop);
-      return {
-        width: calculatedWidth,
-        height: calculatedWidth / this.aspectRatio,
-        layout: calculatedWidthWithLayout
-      };
-    });
-    _defineProperty(this, "selectCurrentMediaNode", () => {
-      // TODO: if adding !this.props.selected, it doesn't work if media single node is at top postion
-      if (this.pos === null) {
-        return;
-      }
-      setNodeSelection(this.props.view, this.pos);
-    });
-    _defineProperty(this, "handleResizeStart", () => {
-      this.setState({
-        isResizing: true
-      });
-      this.selectCurrentMediaNode();
-      this.setIsResizing(true);
-      this.updateSizeInPluginState(this.state.size.width);
-      // re-calculate guidelines
-      if (this.isGuidelineEnabled) {
-        this.updateGuidelines();
-      }
-    });
-    _defineProperty(this, "handleResize", (size, delta) => {
-      const {
-        layout,
-        updateSize,
-        lineLength
-      } = this.props;
-      const {
-        width,
-        height,
-        layout: newLayout
-      } = this.calculateSizeState(size, delta);
-      if (this.isGuidelineEnabled) {
-        const guidelineSnaps = getGuidelineSnaps(this.state.guidelines, lineLength, layout);
-        this.updateActiveGuidelines(width, this.state.guidelines, guidelineSnaps);
-        const relativeSnaps = getRelativeGuideSnaps(this.state.relativeGuides, this.aspectRatio);
-        this.setState({
-          size: {
-            width,
-            height
-          },
-          snaps: {
-            x: [...(guidelineSnaps.snaps.x || []), ...relativeSnaps]
-          }
-        });
-      } else {
-        this.setState({
-          size: {
-            width,
-            height
-          }
-        });
-      }
-      this.updateSizeInPluginState(width);
-      if (newLayout !== layout) {
-        updateSize(width, newLayout);
-      }
-    });
-    _defineProperty(this, "handleResizeStop", (size, delta) => {
-      const {
-        updateSize,
-        dispatchAnalyticsEvent,
-        nodeType
-      } = this.props;
-      const {
-        width,
-        height,
-        layout: newLayout
-      } = this.calculateSizeState(size, delta, true);
-      if (dispatchAnalyticsEvent) {
-        const $pos = this.$pos;
-        const event = getMediaResizeAnalyticsEvent(nodeType || 'mediaSingle', {
-          width,
-          layout: newLayout,
-          widthType: 'pixel',
-          snapType: getGuidelineTypeFromKey(this.lastSnappedGuidelineKeys, this.state.guidelines),
-          parentNode: $pos ? $pos.parent.type.name : undefined
-        });
-        if (event) {
-          dispatchAnalyticsEvent(event);
-        }
-      }
-      this.setIsResizing(false);
-      this.displayGuideline([]);
-      let newWidth = width;
-      if (newLayout === 'full-width') {
-        // When a node reaches full width in current viewport,
-        // update its width with 1800 to align with pixel entry
-        newWidth = akEditorFullWidthLayoutWidth;
-      }
-      this.setState({
-        isResizing: false,
-        size: {
-          width: newWidth,
-          height
-        }
-      }, () => {
-        updateSize(newWidth, newLayout);
-      });
-    });
-    const initialWidth = props.mediaSingleWidth || DEFAULT_IMAGE_WIDTH;
-    this.state = {
-      isVideoFile: true,
-      isResizing: false,
-      size: {
-        width: initialWidth,
-        height: this.calcPxHeight(initialWidth)
-      },
-      snaps: {},
-      relativeGuides: {},
-      guidelines: []
-    };
-  }
-  componentDidUpdate(prevProps) {
-    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
-      const initialWidth = this.props.mediaSingleWidth;
-      this.setState({
-        size: {
-          width: initialWidth,
-          height: this.calcPxHeight(initialWidth)
-        }
-      });
-    }
-    return true;
-  }
-  async componentDidMount() {
-    const {
-      viewMediaClientConfig
-    } = this.props;
-    if (viewMediaClientConfig) {
-      await this.checkVideoFile(viewMediaClientConfig);
-    }
-  }
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (this.props.viewMediaClientConfig !== nextProps.viewMediaClientConfig) {
-      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 === null ? pos : this.props.view.state.doc.resolve(pos);
-  }
-  get aspectRatio() {
-    const {
-      width,
-      height
-    } = this.props;
-    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]);
-  }
-  get isGuidelineEnabled() {
-    var _this$props$pluginInj7;
-    return !!((_this$props$pluginInj7 = this.props.pluginInjectionApi) !== null && _this$props$pluginInj7 !== void 0 && _this$props$pluginInj7.guideline);
-  }
-
-  // check if is inside of layout, table, expand, nestedExpand and list item
-  isNestedNode() {
-    const $pos = this.$pos;
-    return !!($pos && $pos.depth !== 0);
-  }
-  getDefaultGuidelines() {
-    const {
-      lineLength,
-      containerWidth,
-      fullWidthMode
-    } = this.props;
-
-    // disable guidelines for nested media single node
-    return this.isNestedNode() ? [] : generateDefaultGuidelines(lineLength, containerWidth, fullWidthMode);
-  }
-  async checkVideoFile(viewMediaClientConfig) {
-    if (this.pos === null || !viewMediaClientConfig) {
-      return;
-    }
-    const mediaNode = this.props.view.state.doc.nodeAt(this.pos + 1);
-    const mediaType = mediaNode ? await checkMediaType(mediaNode, viewMediaClientConfig) : undefined;
-    const isVideoFile = mediaType !== 'external' && mediaType !== 'image';
-    if (this.state.isVideoFile !== isVideoFile) {
-      this.setState({
-        isVideoFile
-      });
-    }
-  }
-  render() {
-    const {
-      width: origWidth,
-      layout,
-      containerWidth,
-      fullWidthMode,
-      selected,
-      children,
-      lineLength,
-      showLegacyNotification
-    } = this.props;
-    const {
-      isResizing,
-      size,
-      isVideoFile
-    } = this.state;
-    const enable = {};
-    handleSides.forEach(side => {
-      const oppositeSide = side === 'left' ? 'right' : 'left';
-      enable[side] = nonWrappedLayouts.concat(`wrap-${oppositeSide}`).concat(`align-${imageAlignmentMap[oppositeSide]}`).indexOf(layout) > -1;
-      if (side === 'left' && this.insideInlineLike) {
-        enable[side] = false;
-      }
-    });
-
-    // 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, {
-      'richMedia-selected': selected,
-      'rich-media-wrapped': layout === 'wrap-left' || layout === 'wrap-right'
-    });
-    // @ts-expect-error - TS2339 Lodash get() now infers types.
-    const resizerNextClassName = classnames(className, resizerStyles);
-    const isNestedNode = this.isNestedNode();
-    const maxWidth = !isResizing && isNestedNode ?
-    // set undefined to fall back to 100%
-    undefined : this.calcMaxWidth(lineLength, containerWidth, fullWidthMode);
-    const minWidth = this.calcMinWidth(isVideoFile, lineLength);
-
-    // while is not resizing, we take 100% as min-width if the container width is less than the min-width
-    const minViewWidth = isResizing ? minWidth : `min(${minWidth}px, 100%)`;
-    return jsx("div", {
-      css: wrapperStyle({
-        layout,
-        containerWidth: containerWidth || origWidth,
-        fullWidthMode,
-        mediaSingleWidth: this.state.size.width,
-        isNestedNode,
-        isExtendedResizeExperienceOn: true
-      })
-    }, jsx(ResizerNext, {
-      minWidth: minViewWidth,
-      maxWidth: maxWidth,
-      className: resizerNextClassName,
-      snapGap: MEDIA_SINGLE_SNAP_GAP,
-      enable: enable,
-      width: size.width,
-      handleResizeStart: this.handleResizeStart,
-      handleResize: this.handleResize,
-      handleResizeStop: this.handleResizeStop,
-      snap: this.state.snaps,
-      resizeRatio: nonWrappedLayouts.includes(layout) ? 2 : 1,
-      "data-testid": resizerNextTestId,
-      isHandleVisible: selected,
-      handlePositioning: isNestedNode ? 'adjacent' : undefined,
-      handleHighlight: "full-height"
-    }, children, showLegacyNotification && jsx(ResizableMediaMigrationNotification, null)));
-  }
-}
-export default ResizableMediaSingleNext;