@atlaskit/editor-core 188.2.11 → 188.3.1

package/dist/es2019/plugins/media/nodeviews/mediaGroup.js

@@ -1,312 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from 'react';
-import { injectIntl } from 'react-intl-next';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
-import { WithProviders } from '@atlaskit/editor-common/provider-factory';
-import ReactNodeView from '@atlaskit/editor-common/react-node-view';
-import { isNodeSelectedOrInRange, SelectedState, setNodeSelection } from '@atlaskit/editor-common/utils';
-import EditorCloseIcon from '@atlaskit/icon/glyph/editor/close';
-import { getMediaFeatureFlag } from '@atlaskit/media-common';
-import { Filmstrip } from '@atlaskit/media-filmstrip';
-import { stateKey as mediaStateKey } from '../pm-plugins/plugin-key';
-import { MediaNodeUpdater } from './mediaNodeUpdater';
-import { messages } from './messages';
-const isMediaGroupSelectedFromProps = props => {
-  /**
-   *  ED-19831
-   *  There is a getPos issue coming from this code. We need to apply this workaround for now and apply a patch
-   *  directly to confluence since this bug is now in production.
-   */
-  let pos;
-  try {
-    pos = props.getPos ? props.getPos() : undefined;
-  } catch (e) {
-    pos = undefined;
-  }
-  if (typeof pos !== 'number') {
-    return false;
-  }
-  return isNodeSelectedOrInRange(props.anchorPos, props.headPos, pos, props.node.nodeSize);
-};
-const hasSelectionChanged = (oldProps, newProps) => {
-  if (isMediaGroupSelectedFromProps(oldProps) !== isMediaGroupSelectedFromProps(newProps)) {
-    return true;
-  }
-  if (isMediaGroupSelectedFromProps(newProps) === SelectedState.selectedInside) {
-    return oldProps.anchorPos !== newProps.anchorPos;
-  }
-  return false;
-};
-class MediaGroup extends React.Component {
-  constructor(_props) {
-    super(_props);
-    _defineProperty(this, "state", {
-      viewMediaClientConfig: undefined
-    });
-    _defineProperty(this, "updateNodeAttrs", (props, node, getPos) => {
-      const {
-        view,
-        mediaProvider,
-        contextIdentifierProvider
-      } = props;
-      const mediaNodeUpdater = new MediaNodeUpdater({
-        view,
-        mediaProvider,
-        contextIdentifierProvider,
-        node,
-        isMediaSingle: false
-      });
-      mediaNodeUpdater.updateNodeAttrs(getPos);
-    });
-    _defineProperty(this, "setMediaItems", (props, updatedAttrs = false) => {
-      var _this$mediaPluginStat;
-      const {
-        node
-      } = props;
-      const oldMediaNodes = this.mediaNodes;
-      this.mediaNodes = [];
-      node.forEach((item, childOffset) => {
-        const getPos = () => {
-          const pos = props.getPos();
-          if (typeof pos !== 'number') {
-            // That may seems weird, but the previous type wasn't match with the real ProseMirror code. And a lot of Media API was built expecting a number
-            // Because the original code would return NaN on runtime
-            // We are just make it explict now.
-            // We may run a deep investagation on Media code to figure out a better fix. But, for now, we want to keep the current behavior.
-            // TODO: ED-13910 prosemirror-bump leftovers
-            return NaN;
-          }
-          return pos + childOffset + 1;
-        };
-        this.mediaNodes.push(item);
-        if (updatedAttrs) {
-          this.updateNodeAttrs(props, item, getPos);
-        }
-      });
-      (_this$mediaPluginStat = this.mediaPluginState) === null || _this$mediaPluginStat === void 0 ? void 0 : _this$mediaPluginStat.handleMediaGroupUpdate(oldMediaNodes, this.mediaNodes);
-    });
-    _defineProperty(this, "getIdentifier", item => {
-      if (item.attrs.type === 'external') {
-        return {
-          mediaItemType: 'external-image',
-          dataURI: item.attrs.url
-        };
-      }
-      return {
-        id: item.attrs.id,
-        mediaItemType: 'file',
-        collectionName: item.attrs.collection
-      };
-    });
-    _defineProperty(this, "isNodeSelected", nodePos => {
-      const selected = isMediaGroupSelectedFromProps(this.props);
-      if (selected === SelectedState.selectedInRange) {
-        return true;
-      }
-      if (selected === SelectedState.selectedInside && this.props.anchorPos === nodePos) {
-        return true;
-      }
-      return false;
-    });
-    _defineProperty(this, "renderChildNodes", () => {
-      const {
-        viewMediaClientConfig
-      } = this.state;
-      const {
-        getPos,
-        allowLazyLoading,
-        disabled,
-        mediaOptions
-      } = this.props;
-      const items = this.mediaNodes.map((item, idx) => {
-        // We declared this to get a fresh position every time
-        const getNodePos = () => {
-          const pos = getPos();
-          if (typeof pos !== 'number') {
-            // That may seems weird, but the previous type wasn't match with the real ProseMirror code. And a lot of Media API was built expecting a number
-            // Because the original code would return NaN on runtime
-            // We are just make it explict now.
-            // We may run a deep investagation on Media code to figure out a better fix. But, for now, we want to keep the current behavior.
-            // TODO: ED-13910 prosemirror-bump leftovers
-            return NaN;
-          }
-          return pos + idx + 1;
-        };
-
-        // Media Inline creates a floating toolbar with the same options, excludes these options if enabled
-        const mediaInlineOptions = (allowMediaInline = false) => {
-          if (!allowMediaInline) {
-            return {
-              shouldEnableDownloadButton: mediaOptions.enableDownloadButton,
-              actions: [{
-                handler: disabled || !this.mediaPluginState ? () => {} : this.mediaPluginState.handleMediaNodeRemoval.bind(null, undefined, getNodePos),
-                icon: /*#__PURE__*/React.createElement(EditorCloseIcon, {
-                  label: this.props.intl.formatMessage(messages.mediaGroupDeleteLabel)
-                })
-              }]
-            };
-          }
-        };
-        return {
-          identifier: this.getIdentifier(item),
-          isLazy: allowLazyLoading,
-          selected: this.isNodeSelected(getNodePos()),
-          onClick: () => {
-            setNodeSelection(this.props.view, getNodePos());
-          },
-          ...mediaInlineOptions(getMediaFeatureFlag('mediaInline', mediaOptions.featureFlags))
-        };
-      });
-      return /*#__PURE__*/React.createElement(Filmstrip, {
-        items: items,
-        mediaClientConfig: viewMediaClientConfig,
-        featureFlags: mediaOptions.featureFlags
-      });
-    });
-    this.mediaNodes = [];
-    this.mediaPluginState = mediaStateKey.getState(_props.view.state);
-    this.setMediaItems(_props);
-    this.state = {
-      viewMediaClientConfig: undefined
-    };
-  }
-  componentDidMount() {
-    this.updateMediaClientConfig();
-    this.mediaNodes.forEach(async node => {
-      if (node.attrs.type === 'external') {
-        return;
-      }
-      const {
-        view,
-        mediaProvider,
-        contextIdentifierProvider
-      } = this.props;
-      const mediaNodeUpdater = new MediaNodeUpdater({
-        view,
-        mediaProvider,
-        contextIdentifierProvider,
-        node,
-        isMediaSingle: false
-      });
-      const getPos = () => {
-        const pos = this.props.getPos();
-        if (typeof pos !== 'number') {
-          // That may seems weird, but the previous type wasn't match with the real ProseMirror code. And a lot of Media API was built expecting a number
-          // Because the original code would return NaN on runtime
-          // We are just make it explict now.
-          // We may run a deep investagation on Media code to figure out a better fix. But, for now, we want to keep the current behavior.
-          // TODO: ED-13910 prosemirror-bump leftovers
-          return NaN;
-        }
-        return pos + 1;
-      };
-      const contextId = mediaNodeUpdater.getNodeContextId();
-      if (!contextId) {
-        await mediaNodeUpdater.updateNodeContextId(getPos);
-      }
-      const hasDifferentContextId = await mediaNodeUpdater.hasDifferentContextId();
-      if (hasDifferentContextId) {
-        await mediaNodeUpdater.copyNodeFromPos(getPos, {
-          traceId: node.attrs.__mediaTraceId
-        });
-      }
-    });
-  }
-  componentWillUnmount() {
-    var _this$mediaPluginStat2;
-    (_this$mediaPluginStat2 = this.mediaPluginState) === null || _this$mediaPluginStat2 === void 0 ? void 0 : _this$mediaPluginStat2.handleMediaGroupUpdate(this.mediaNodes, []);
-  }
-  UNSAFE_componentWillReceiveProps(props) {
-    this.updateMediaClientConfig();
-    this.setMediaItems(props, props.isCopyPasteEnabled || props.isCopyPasteEnabled === undefined);
-  }
-  shouldComponentUpdate(nextProps) {
-    var _this$mediaPluginStat3;
-    if (hasSelectionChanged(this.props, nextProps) || this.props.node !== nextProps.node || this.state.viewMediaClientConfig !== ((_this$mediaPluginStat3 = this.mediaPluginState) === null || _this$mediaPluginStat3 === void 0 ? void 0 : _this$mediaPluginStat3.mediaClientConfig)) {
-      return true;
-    }
-    return false;
-  }
-  updateMediaClientConfig() {
-    const {
-      viewMediaClientConfig
-    } = this.state;
-    const {
-      mediaClientConfig
-    } = this.mediaPluginState || {};
-    if (!viewMediaClientConfig && mediaClientConfig) {
-      this.setState({
-        viewMediaClientConfig: mediaClientConfig
-      });
-    }
-  }
-  render() {
-    return this.renderChildNodes();
-  }
-}
-_defineProperty(MediaGroup, "displayName", 'MediaGroup');
-const IntlMediaGroup = injectIntl(MediaGroup);
-export default IntlMediaGroup;
-function MediaGroupNodeViewInternal({
-  renderFn,
-  pluginInjectionApi
-}) {
-  const {
-    editorDisabledState: editorDisabledPlugin
-  } = useSharedPluginState(pluginInjectionApi, ['editorDisabled']);
-  return renderFn({
-    editorDisabledPlugin
-  });
-}
-class MediaGroupNodeView extends ReactNodeView {
-  render(props, forwardRef) {
-    const {
-      providerFactory,
-      mediaOptions,
-      pluginInjectionApi
-    } = props;
-    const getPos = this.getPos;
-    return /*#__PURE__*/React.createElement(WithProviders, {
-      providers: ['mediaProvider', 'contextIdentifierProvider'],
-      providerFactory: providerFactory,
-      renderNode: ({
-        mediaProvider,
-        contextIdentifierProvider
-      }) => {
-        const renderFn = ({
-          editorDisabledPlugin
-        }) => {
-          if (!mediaProvider) {
-            return null;
-          }
-          return /*#__PURE__*/React.createElement(IntlMediaGroup, {
-            node: this.node,
-            getPos: getPos,
-            view: this.view,
-            forwardRef: forwardRef,
-            disabled: (editorDisabledPlugin || {}).editorDisabled,
-            allowLazyLoading: mediaOptions.allowLazyLoading,
-            mediaProvider: mediaProvider,
-            contextIdentifierProvider: contextIdentifierProvider,
-            isCopyPasteEnabled: mediaOptions.isCopyPasteEnabled,
-            anchorPos: this.view.state.selection.$anchor.pos,
-            headPos: this.view.state.selection.$head.pos,
-            mediaOptions: mediaOptions
-          });
-        };
-        return /*#__PURE__*/React.createElement(MediaGroupNodeViewInternal, {
-          renderFn: renderFn,
-          pluginInjectionApi: pluginInjectionApi
-        });
-      }
-    });
-  }
-}
-export const ReactMediaGroupNode = (portalProviderAPI, eventDispatcher, providerFactory, mediaOptions = {}, pluginInjectionApi) => (node, view, getPos) => {
-  const hasIntlContext = true;
-  return new MediaGroupNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, {
-    providerFactory,
-    mediaOptions,
-    pluginInjectionApi
-  }, undefined, undefined, undefined, hasIntlContext).init();
-};

package/dist/es2019/plugins/media/nodeviews/mediaInline.js

@@ -1,201 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
-import { WithProviders } from '@atlaskit/editor-common/provider-factory';
-import { SelectionBasedNodeView } from '@atlaskit/editor-common/selection-based-node-view';
-import { MediaInlineCard } from '@atlaskit/media-card';
-import { MediaInlineCardLoadingView } from '@atlaskit/media-ui';
-import { MediaNodeUpdater } from './mediaNodeUpdater';
-import { MediaInlineNodeSelector } from './styles';
-export const createMediaNodeUpdater = props => {
-  const node = props.node;
-  return new MediaNodeUpdater({
-    ...props,
-    isMediaSingle: true,
-    node: node ? node : props.node,
-    dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
-    contextIdentifierProvider: props.contextIdentifierProvider
-  });
-};
-
-/**
- * Handles updating the media inline node attributes
- * but also handling copy-paste for cross-editor of the same instance
- * using the contextid
- *
- */
-export const updateMediaNodeAttributes = async (props, mediaNodeUpdater) => {
-  const {
-    addPendingTask
-  } = props.mediaPluginState;
-  const node = props.node;
-  if (!node) {
-    return;
-  }
-  const contextId = mediaNodeUpdater.getNodeContextId();
-  if (!contextId) {
-    await mediaNodeUpdater.updateContextId();
-  }
-  const hasDifferentContextId = await mediaNodeUpdater.hasDifferentContextId();
-  if (hasDifferentContextId) {
-    // Copy paste flow (different pages)
-    try {
-      const copyNode = mediaNodeUpdater.copyNode({
-        traceId: node.attrs.__mediaTraceId
-      });
-      addPendingTask(copyNode);
-      await copyNode;
-    } catch (e) {
-      return;
-    }
-  }
-  await mediaNodeUpdater.updateMediaSingleFileAttrs();
-};
-export const handleNewNode = props => {
-  const {
-    node,
-    mediaPluginState,
-    getPos
-  } = props;
-  mediaPluginState.handleMediaNodeMount(node, () => getPos());
-};
-export const MediaInline = props => {
-  const [viewMediaClientConfig, setViewMediaClientConfig] = useState();
-  const [isContextIdUnsync, setIsContextIdUnsync] = useState(true);
-  useEffect(() => {
-    const mediaNodeUpdater = createMediaNodeUpdater(props);
-    mediaNodeUpdater.hasDifferentContextId().then(setIsContextIdUnsync);
-    handleNewNode(props);
-    updateMediaNodeAttributes(props, mediaNodeUpdater);
-    updateViewMediaClientConfig(props);
-    return () => {
-      const {
-        mediaPluginState
-      } = props;
-      mediaPluginState.handleMediaNodeUnmount(props.node);
-    };
-  }, [props]);
-  const updateViewMediaClientConfig = async props => {
-    const mediaProvider = await props.mediaProvider;
-    if (mediaProvider) {
-      const viewMediaClientConfig = mediaProvider.viewMediaClientConfig;
-      setViewMediaClientConfig(viewMediaClientConfig);
-    }
-  };
-  const {
-    id,
-    collection
-  } = props.node.attrs;
-  const identifier = {
-    id,
-    mediaItemType: 'file',
-    collectionName: collection
-  };
-
-  /*
-   * Show the loading view if
-   * 1. The media provider is not ready
-   * 2. Context Id is not synced
-   * to prevent calling the media API (in mounting of `MediaInlineCard`)
-   * before the prerequisites meet
-   */
-  if (!viewMediaClientConfig || isContextIdUnsync) {
-    return /*#__PURE__*/React.createElement(MediaInlineCardLoadingView, {
-      message: "",
-      isSelected: false
-    });
-  }
-  return /*#__PURE__*/React.createElement(MediaInlineCard, {
-    isSelected: props.isSelected,
-    identifier: identifier,
-    mediaClientConfig: viewMediaClientConfig
-  });
-};
-const MediaInlineSharedState = ({
-  identifier,
-  mediaProvider,
-  node,
-  isSelected,
-  getPos,
-  contextIdentifierProvider,
-  api,
-  view
-}) => {
-  const {
-    mediaState
-  } = useSharedPluginState(api, ['media']);
-  if (!mediaState) {
-    return null;
-  }
-  return /*#__PURE__*/React.createElement(MediaInline, {
-    identifier: identifier,
-    mediaProvider: mediaProvider,
-    mediaPluginState: mediaState,
-    node: node,
-    isSelected: isSelected,
-    view: view,
-    getPos: getPos,
-    contextIdentifierProvider: contextIdentifierProvider
-  });
-};
-export class MediaInlineNodeView extends SelectionBasedNodeView {
-  createDomRef() {
-    const domRef = document.createElement('span');
-    domRef.contentEditable = 'false';
-    return domRef;
-  }
-  getContentDOM() {
-    const dom = document.createElement('span');
-    dom.classList.add(MediaInlineNodeSelector);
-    return {
-      dom
-    };
-  }
-  ignoreMutation() {
-    return true;
-  }
-  viewShouldUpdate(nextNode) {
-    if (this.node.attrs !== nextNode.attrs) {
-      return true;
-    }
-    return super.viewShouldUpdate(nextNode);
-  }
-  render(props) {
-    const {
-      providerFactory,
-      api
-    } = props;
-    const {
-      view
-    } = this;
-    const getPos = this.getPos;
-    return /*#__PURE__*/React.createElement(WithProviders, {
-      providers: ['mediaProvider', 'contextIdentifierProvider'],
-      providerFactory: providerFactory,
-      renderNode: ({
-        mediaProvider,
-        contextIdentifierProvider
-      }) => {
-        if (!mediaProvider) {
-          return null;
-        }
-        return /*#__PURE__*/React.createElement(MediaInlineSharedState, {
-          identifier: this.node.attrs.id,
-          mediaProvider: mediaProvider,
-          node: this.node,
-          isSelected: this.nodeInsideSelection(),
-          view: view,
-          getPos: getPos,
-          contextIdentifierProvider: contextIdentifierProvider,
-          api: api
-        });
-      }
-    });
-  }
-}
-export const ReactMediaInlineNode = (portalProviderAPI, eventDispatcher, providerFactory, api, dispatchAnalyticsEvent) => (node, view, getPos) => {
-  return new MediaInlineNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, {
-    providerFactory,
-    dispatchAnalyticsEvent,
-    api
-  }).init();
-};