@atlaskit/editor-plugin-media 0.2.0 → 0.3.1

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

@@ -0,0 +1,344 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/** @jsx jsx */
+import React from 'react';
+import { jsx } from '@emotion/react';
+import { calculateOffsetLeft } from '@atlaskit/editor-common/media-single';
+import { calcColumnsFromPx, calcMediaPxWidth, calcPctFromPx, handleSides, imageAlignmentMap, Resizer, snapTo, wrappedLayouts } from '@atlaskit/editor-common/ui';
+import { calculateSnapPoints } from '@atlaskit/editor-common/utils';
+import { findParentNodeOfTypeClosestToPos, hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
+import { akEditorWideLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { checkMediaType } from '../../utils/check-media-type';
+import { wrapperStyle } from './styled';
+// eslint-disable-next-line @repo/internal/react/no-class-components
+export default class ResizableMediaSingle extends React.Component {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "state", {
+      offsetLeft: calculateOffsetLeft(this.insideInlineLike, this.insideLayout, this.props.view.dom, undefined),
+      // We default to true until we resolve the file type
+      isVideoFile: true
+    });
+    _defineProperty(this, "displayGrid", (visible, gridType, highlight) => {
+      var _pluginInjectionApi$g, _pluginInjectionApi$g2;
+      const {
+        pluginInjectionApi,
+        view
+      } = this.props;
+      pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$g = pluginInjectionApi.grid) === null || _pluginInjectionApi$g === void 0 ? void 0 : (_pluginInjectionApi$g2 = _pluginInjectionApi$g.actions) === null || _pluginInjectionApi$g2 === void 0 ? void 0 : _pluginInjectionApi$g2.displayGrid(view)({
+        visible,
+        gridType,
+        highlight: highlight
+      });
+    });
+    _defineProperty(this, "calcNewSize", (newWidth, stop) => {
+      const {
+        layout,
+        view: {
+          state
+        }
+      } = this.props;
+      const newPct = calcPctFromPx(newWidth, this.props.lineLength) * 100;
+      this.setState({
+        resizedPctWidth: newPct
+      });
+      let newLayout = hasParentNodeOfType(state.schema.nodes.table)(state.selection) ? layout : this.calcUnwrappedLayout(newPct, newWidth);
+      if (newPct <= 100) {
+        if (this.wrappedLayout && (stop ? newPct !== 100 : true)) {
+          newLayout = layout;
+        }
+        return {
+          width: newPct,
+          layout: newLayout
+        };
+      } else {
+        return {
+          width: this.props.pctWidth || null,
+          layout: newLayout
+        };
+      }
+    });
+    _defineProperty(this, "calcUnwrappedLayout", (pct, width) => {
+      if (pct <= 100) {
+        return 'center';
+      }
+      if (width <= akEditorWideLayoutWidth) {
+        return 'wide';
+      }
+      return 'full-width';
+    });
+    _defineProperty(this, "calcColumnLeftOffset", () => {
+      const {
+        offsetLeft
+      } = this.state;
+      return this.insideInlineLike ? calcColumnsFromPx(offsetLeft, this.props.lineLength, this.props.gridSize) : 0;
+    });
+    _defineProperty(this, "calcPxWidth", useLayout => {
+      const {
+        width: origWidth = 0,
+        height: origHeight,
+        layout,
+        pctWidth,
+        lineLength,
+        containerWidth,
+        fullWidthMode,
+        getPos,
+        view: {
+          state
+        }
+      } = this.props;
+      const {
+        resizedPctWidth
+      } = this.state;
+      const pos = typeof getPos === 'function' ? getPos() : undefined;
+      return calcMediaPxWidth({
+        origWidth,
+        origHeight,
+        pctWidth,
+        state,
+        containerWidth: {
+          width: containerWidth,
+          lineLength
+        },
+        isFullWidthModeEnabled: fullWidthMode,
+        layout: useLayout || layout,
+        pos,
+        resizedPctWidth
+      });
+    });
+    _defineProperty(this, "highlights", (newWidth, snapPoints) => {
+      const snapWidth = snapTo(newWidth, snapPoints);
+      const {
+        layoutColumn,
+        table,
+        expand,
+        nestedExpand
+      } = this.props.view.state.schema.nodes;
+      if (this.$pos && !!findParentNodeOfTypeClosestToPos(this.$pos, [layoutColumn, table, expand, nestedExpand].filter(Boolean))) {
+        return [];
+      }
+      if (snapWidth > akEditorWideLayoutWidth) {
+        return ['full-width'];
+      }
+      const {
+        layout,
+        lineLength,
+        gridSize
+      } = this.props;
+      const columns = calcColumnsFromPx(snapWidth, lineLength, gridSize);
+      const columnWidth = Math.round(columns);
+      const highlight = [];
+      if (layout === 'wrap-left' || layout === 'align-start') {
+        highlight.push(0, columnWidth);
+      } else if (layout === 'wrap-right' || layout === 'align-end') {
+        highlight.push(gridSize, gridSize - columnWidth);
+      } else if (this.insideInlineLike) {
+        highlight.push(Math.round(columns + this.calcColumnLeftOffset()));
+      } else {
+        highlight.push(Math.floor((gridSize - columnWidth) / 2), Math.ceil((gridSize + columnWidth) / 2));
+      }
+      return highlight;
+    });
+    _defineProperty(this, "saveWrapper", wrapper => this.wrapper = wrapper);
+  }
+  componentDidUpdate(prevProps) {
+    const offsetLeft = calculateOffsetLeft(this.insideInlineLike, this.insideLayout, this.props.view.dom, this.wrapper);
+    if (offsetLeft !== this.state.offsetLeft && offsetLeft >= 0) {
+      this.setState({
+        offsetLeft
+      });
+    }
+
+    // Handle undo, when the actual pctWidth changed,
+    // we sync up with the internal state.
+    if (prevProps.pctWidth !== this.props.pctWidth) {
+      this.setState({
+        resizedPctWidth: this.props.pctWidth
+      });
+    }
+    return true;
+  }
+  get wrappedLayout() {
+    return wrappedLayouts.indexOf(this.props.layout) > -1;
+  }
+
+  // check if is inside of a table
+  isNestedInTable() {
+    const {
+      table
+    } = this.props.view.state.schema.nodes;
+    if (!this.$pos) {
+      return false;
+    }
+    return !!findParentNodeOfTypeClosestToPos(this.$pos, table);
+  }
+  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);
+    }
+    if (this.props.layout !== nextProps.layout) {
+      this.checkLayout(this.props.layout, nextProps.layout);
+    }
+  }
+  async checkVideoFile(viewMediaClientConfig) {
+    const $pos = this.$pos;
+    if (!$pos || !viewMediaClientConfig) {
+      return;
+    }
+    const mediaNode = this.props.view.state.doc.nodeAt($pos.pos + 1);
+    const mediaType = mediaNode ? await checkMediaType(mediaNode, viewMediaClientConfig) : undefined;
+    const isVideoFile = mediaType !== 'external' && mediaType !== 'image';
+    if (this.state.isVideoFile !== isVideoFile) {
+      this.setState({
+        isVideoFile
+      });
+    }
+  }
+
+  /**
+   * When returning to center layout from a wrapped/aligned layout, it might actually
+   * be wide or full-width
+   */
+  checkLayout(oldLayout, newLayout) {
+    const {
+      resizedPctWidth
+    } = this.state;
+    if (wrappedLayouts.indexOf(oldLayout) > -1 && newLayout === 'center' && resizedPctWidth) {
+      const layout = this.calcUnwrappedLayout(resizedPctWidth, this.calcPxWidth(newLayout));
+      this.props.updateSize(resizedPctWidth, layout);
+    }
+  }
+  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,
+      height: origHeight,
+      layout,
+      pctWidth,
+      containerWidth,
+      fullWidthMode,
+      selected,
+      children
+    } = this.props;
+    const initialWidth = this.calcPxWidth(); // width with padding
+    let ratio;
+    if (origWidth) {
+      ratio = (origHeight / origWidth * 100).toFixed(3);
+    }
+    const enable = {};
+    handleSides.forEach(side => {
+      const oppositeSide = side === 'left' ? 'right' : 'left';
+      enable[side] = ['full-width', 'wide', 'center'].concat(`wrap-${oppositeSide}`).concat(`align-${imageAlignmentMap[oppositeSide]}`).indexOf(layout) > -1;
+      if (side === 'left' && this.insideInlineLike) {
+        enable[side] = false;
+      }
+    });
+    const snapPointsProps = {
+      $pos: this.$pos,
+      akEditorWideLayoutWidth: akEditorWideLayoutWidth,
+      allowBreakoutSnapPoints: this.props.allowBreakoutSnapPoints,
+      containerWidth: this.props.containerWidth,
+      gridSize: this.props.gridSize,
+      gridWidth: this.gridWidth,
+      insideInlineLike: this.insideInlineLike,
+      insideLayout: this.insideLayout,
+      isVideoFile: this.state.isVideoFile,
+      lineLength: this.props.lineLength,
+      offsetLeft: this.state.offsetLeft,
+      wrappedLayout: this.wrappedLayout
+    };
+    const nestedInTableHandleStyles = isNestedInTable => {
+      if (!isNestedInTable) {
+        return;
+      }
+      return {
+        left: {
+          left: `calc(${"var(--ds-space-025, 0.125em)"} * -0.5)`,
+          paddingLeft: '0px'
+        },
+        right: {
+          right: `calc(${"var(--ds-space-025, 0.125em)"} * -0.5)`,
+          paddingRight: '0px'
+        }
+      };
+    };
+    return jsx("div", {
+      ref: this.saveWrapper,
+      css: wrapperStyle({
+        layout,
+        isResized: !!pctWidth,
+        containerWidth: containerWidth || origWidth,
+        fullWidthMode
+      })
+    }, jsx(Resizer, _extends({}, this.props, {
+      displayGrid: this.displayGrid,
+      ratio: ratio,
+      width: initialWidth,
+      selected: selected,
+      enable: enable,
+      calcNewSize: this.calcNewSize,
+      snapPoints: calculateSnapPoints(snapPointsProps),
+      scaleFactor: !this.wrappedLayout && !this.insideInlineLike ? 2 : 1,
+      highlights: this.highlights,
+      nodeType: "media",
+      dispatchAnalyticsEvent: this.props.dispatchAnalyticsEvent
+      // when cursor is located below a media with caption,
+      // press “Up“ key will result cursor focus on an invalid position, (on the resize handler)
+      // This workaround adds an empty div inside the resize handler to prevent the issue.
+      ,
+      handleComponentFunc: () => jsx("div", {
+        contentEditable: false
+      }),
+      handleStyles: nestedInTableHandleStyles(this.isNestedInTable())
+    }), children));
+  }
+}

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

@@ -0,0 +1,9 @@
+import { css } from '@emotion/react';
+import { MediaSingleDimensionHelper } from '@atlaskit/editor-common/ui';
+export const wrapperStyle = props => css`
+  & > div {
+    ${MediaSingleDimensionHelper(props)};
+    position: relative;
+    clear: both;
+  }
+`;

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

@@ -0,0 +1,14 @@
+import { css } from '@emotion/react';
+import * as colors from '@atlaskit/theme/colors';
+const NOTIFICATION_SIZE = 8;
+const SPACE_FROM_EDGE = "var(--ds-space-100, 8px)";
+export const resizableMediaMigrationNotificationStyle = css`
+  position: absolute;
+  top: ${SPACE_FROM_EDGE};
+  right: calc(${"var(--ds-space-150, 12px)"} + ${SPACE_FROM_EDGE});
+  background-color: ${`var(--ds-background-warning-bold, ${colors.Y300})`};
+  border-radius: ${"var(--ds-border-radius-circle, 50%)"};
+  width: ${NOTIFICATION_SIZE}px;
+  height: ${NOTIFICATION_SIZE}px;
+  pointer-events: none;
+`;

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

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

package/dist/es2019/ui/ToolbarMedia/index.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { injectIntl } from 'react-intl-next';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { TOOLBAR_BUTTON, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
+import AttachmentIcon from '@atlaskit/icon/glyph/editor/attachment';
+import { toolbarMediaMessages } from './toolbar-media-messages';
+const onClickMediaButton = pluginState => () => {
+  pluginState.showMediaPicker();
+  return true;
+};
+const ToolbarMedia = ({
+  isDisabled,
+  isReducedSpacing,
+  intl,
+  api
+}) => {
+  const {
+    mediaState
+  } = useSharedPluginState(api, ['media']);
+  if (!(mediaState !== null && mediaState !== void 0 && mediaState.allowsUploads)) {
+    return null;
+  }
+  const {
+    toolbarMediaTitle
+  } = toolbarMediaMessages;
+  return /*#__PURE__*/React.createElement(ToolbarButton, {
+    buttonId: TOOLBAR_BUTTON.MEDIA,
+    onClick: onClickMediaButton(mediaState),
+    disabled: isDisabled,
+    title: intl.formatMessage(toolbarMediaTitle),
+    spacing: isReducedSpacing ? 'none' : 'default',
+    iconBefore: /*#__PURE__*/React.createElement(AttachmentIcon, {
+      label: intl.formatMessage(toolbarMediaTitle)
+    })
+  });
+};
+export default injectIntl(ToolbarMedia);

package/dist/es2019/ui/ToolbarMedia/toolbar-media-messages.js

@@ -0,0 +1,8 @@
+import { defineMessages } from 'react-intl-next';
+export const toolbarMediaMessages = defineMessages({
+  toolbarMediaTitle: {
+    id: 'fabric.editor.toolbarMediaTitle',
+    defaultMessage: 'Add image, video, or file',
+    description: 'a label for an icon that describes files, videos and images'
+  }
+});

package/dist/es2019/ui/media-linking-toolbar-messages.js

@@ -0,0 +1,8 @@
+import { defineMessages } from 'react-intl-next';
+export const mediaLinkToolbarMessages = defineMessages({
+  backLink: {
+    id: 'fabric.editor.backLink',
+    defaultMessage: 'Go back',
+    description: 'Go back from media linking toolbar to main toolbar'
+  }
+});

package/dist/es2019/utils/analytics.js

@@ -0,0 +1,51 @@
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+export const getMediaResizeAnalyticsEvent = (type, attributes) => {
+  if (!attributes) {
+    return;
+  }
+  const {
+    width,
+    widthType,
+    layout,
+    snapType,
+    parentNode
+  } = attributes;
+  const actionSubject = type === 'embed' ? ACTION_SUBJECT.EMBEDS : ACTION_SUBJECT.MEDIA_SINGLE;
+  return {
+    action: ACTION.EDITED,
+    actionSubject,
+    actionSubjectId: ACTION_SUBJECT_ID.RESIZED,
+    attributes: {
+      width,
+      layout,
+      widthType,
+      snapType,
+      parentNode
+    },
+    eventType: EVENT_TYPE.UI
+  };
+};
+export const getMediaInputResizeAnalyticsEvent = (type, attributes) => {
+  if (!attributes) {
+    return;
+  }
+  const {
+    width,
+    layout,
+    validation,
+    parentNode
+  } = attributes;
+  const actionSubject = type === 'embed' ? ACTION_SUBJECT.EMBEDS : ACTION_SUBJECT.MEDIA_SINGLE;
+  return {
+    action: ACTION.EDITED,
+    actionSubject,
+    actionSubjectId: ACTION_SUBJECT_ID.RESIZED,
+    attributes: {
+      width,
+      layout,
+      validation,
+      parentNode
+    },
+    eventType: EVENT_TYPE.UI
+  };
+};

package/dist/es2019/utils/check-media-type.js

@@ -0,0 +1,19 @@
+import { getMediaClient } from '@atlaskit/media-client';
+export const checkMediaType = async (mediaNode, mediaClientConfig) => {
+  if (mediaNode.attrs.type === 'external') {
+    return 'external';
+  }
+  if (!mediaNode.attrs.id) {
+    return;
+  }
+  try {
+    const fileState = await getMediaClient(mediaClientConfig).file.getCurrentState(mediaNode.attrs.id, {
+      collectionName: mediaNode.attrs.collection
+    });
+    if (fileState && fileState.status !== 'error') {
+      return fileState.mediaType;
+    }
+  } catch (err) {
+    // return undefined in case of media client error
+  }
+};

package/dist/es2019/utils/current-media-node.js

@@ -0,0 +1,35 @@
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+export const currentMediaNodeWithPos = editorState => {
+  const {
+    doc,
+    selection,
+    schema
+  } = editorState;
+  if (!doc || !selection || !(selection instanceof NodeSelection) || selection.node.type !== schema.nodes.mediaSingle) {
+    return;
+  }
+  const pos = selection.$anchor.pos + 1;
+  const node = doc.nodeAt(pos);
+  if (!node || node.type !== schema.nodes.media) {
+    return;
+  }
+  return {
+    node,
+    pos
+  };
+};
+export const currentMediaNode = editorState => {
+  var _currentMediaNodeWith;
+  return (_currentMediaNodeWith = currentMediaNodeWithPos(editorState)) === null || _currentMediaNodeWith === void 0 ? void 0 : _currentMediaNodeWith.node;
+};
+export const currentMediaNodeBorderMark = editorState => {
+  const node = currentMediaNode(editorState);
+  if (!node) {
+    return;
+  }
+  const borderMark = node.marks.find(m => m.type.name === 'border');
+  if (!borderMark) {
+    return;
+  }
+  return borderMark.attrs;
+};

package/dist/es2019/utils/is-image.js

@@ -0,0 +1,3 @@
+export const isImage = fileType => {
+  return !!fileType && (fileType.indexOf('image/') > -1 || fileType.indexOf('video/') > -1);
+};