@atlaskit/editor-plugin-media 0.2.0 → 0.3.1

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

@@ -0,0 +1,51 @@
+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/ui/PixelEntry/types.js

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

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

@@ -0,0 +1,9 @@
+/** @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/ui/ResizableMediaSingle/ResizableMediaSingleNext.js

@@ -0,0 +1,454 @@
+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';
+// eslint-disable-next-line @repo/internal/react/no-class-components
+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;