@atlaskit/editor-core 188.2.11 → 188.3.1

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

@@ -1,343 +0,0 @@
-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';
-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/plugins/media/ui/ResizableMediaSingle/styled.js

@@ -1,9 +0,0 @@
-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/plugins/media/ui/ResizableMediaSingle/styles.js

@@ -1,14 +0,0 @@
-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/plugins/media/ui/ResizableMediaSingle/types.js

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

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

@@ -1,37 +0,0 @@
-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/plugins/media/ui/ToolbarMedia/toolbar-media-messages.js

@@ -1,8 +0,0 @@
-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/plugins/media/ui/media-linking-toolbar-messages.js

@@ -1,8 +0,0 @@
-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/plugins/media/utils/analytics.js

@@ -1,51 +0,0 @@
-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/plugins/media/utils/check-media-type.js

@@ -1,19 +0,0 @@
-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/plugins/media/utils/current-media-node.js

@@ -1,35 +0,0 @@
-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/plugins/media/utils/is-image.js

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