@atlaskit/editor-core 188.3.0 → 188.4.0

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

@@ -1,285 +0,0 @@
-import React from 'react';
-import { media, mediaGroup, mediaInline, mediaSingleSpec } from '@atlaskit/adf-schema';
-import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
-import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
-import { IconImages } from '@atlaskit/editor-common/quick-insert';
-import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { NodeSelection, PluginKey } from '@atlaskit/editor-prosemirror/state';
-import { getMediaFeatureFlag } from '@atlaskit/media-common';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import { ReactMediaGroupNode } from './nodeviews/mediaGroup';
-import { ReactMediaInlineNode } from './nodeviews/mediaInline';
-import { ReactMediaNode } from './nodeviews/mediaNodeView';
-import { ReactMediaSingleNode } from './nodeviews/mediaSingle';
-import { createPlugin as createMediaAltTextPlugin } from './pm-plugins/alt-text';
-import keymapMediaAltTextPlugin from './pm-plugins/alt-text/keymap';
-import keymapPlugin from './pm-plugins/keymap';
-import keymapMediaSinglePlugin from './pm-plugins/keymap-media-single';
-import linkingPlugin from './pm-plugins/linking';
-import keymapLinkingPlugin from './pm-plugins/linking/keymap';
-import { stateKey } from './pm-plugins/main';
-import { createPlugin, stateKey as pluginKey } from './pm-plugins/main';
-import { floatingToolbar } from './toolbar';
-import { MediaPickerComponents } from './ui/MediaPicker';
-import ToolbarMedia from './ui/ToolbarMedia';
-import { insertMediaAsMediaSingle } from './utils/media-single';
-export { insertMediaSingleNode } from './utils/media-single';
-const MediaPickerFunctionalComponent = ({
-  api,
-  editorDomElement,
-  appearance
-}) => {
-  const {
-    mediaState
-  } = useSharedPluginState(api, ['media']);
-  if (!mediaState) {
-    return null;
-  }
-  return /*#__PURE__*/React.createElement(MediaPickerComponents, {
-    editorDomElement: editorDomElement,
-    mediaState: mediaState,
-    appearance: appearance,
-    api: api
-  });
-};
-const mediaPlugin = ({
-  config: options = {},
-  api
-}) => {
-  var _api$featureFlags;
-  const featureFlags = (api === null || api === void 0 ? void 0 : (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.sharedState.currentState()) || {};
-  return {
-    name: 'media',
-    getSharedState(editorState) {
-      if (!editorState) {
-        return null;
-      }
-      return stateKey.getState(editorState) || null;
-    },
-    actions: {
-      insertMediaAsMediaSingle: (view, node, inputMethod) => {
-        var _api$analytics;
-        return insertMediaAsMediaSingle(view, node, inputMethod, api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions);
-      }
-    },
-    nodes() {
-      const {
-        allowMediaGroup = true,
-        allowMediaSingle = false,
-        allowCaptions,
-        featureFlags: mediaFeatureFlags
-      } = options || {};
-      const allowMediaInline = getMediaFeatureFlag('mediaInline', mediaFeatureFlags);
-      const withCaption = getMediaFeatureFlag('captions', mediaFeatureFlags);
-
-      // temporary mapping - we will support captions feature flag until
-      // confluence removes the feature flag support in their code base and
-      // utilizes allowCaptions media prop instead
-      const mappedAllowCaptions = allowCaptions ? allowCaptions : withCaption;
-      const mediaSingleOption = getBooleanFF('platform.editor.media.extended-resize-experience') ? {
-        withCaption: mappedAllowCaptions,
-        withExtendedWidthTypes: true
-      } : {
-        withCaption: mappedAllowCaptions,
-        withExtendedWidthTypes: false
-      };
-      const mediaSingleNode = mediaSingleSpec(mediaSingleOption);
-      return [{
-        name: 'mediaGroup',
-        node: mediaGroup
-      }, {
-        name: 'mediaSingle',
-        node: mediaSingleNode
-      }, {
-        name: 'media',
-        node: media
-      }, {
-        name: 'mediaInline',
-        node: mediaInline
-      }].filter(node => {
-        if (node.name === 'mediaGroup') {
-          return allowMediaGroup;
-        }
-        if (node.name === 'mediaSingle') {
-          return allowMediaSingle;
-        }
-        if (node.name === 'mediaInline') {
-          return allowMediaInline;
-        }
-        return true;
-      });
-    },
-    pmPlugins() {
-      const pmPlugins = [{
-        name: 'media',
-        plugin: ({
-          schema,
-          dispatch,
-          getIntl,
-          eventDispatcher,
-          providerFactory,
-          errorReporter,
-          portalProviderAPI,
-          reactContext,
-          dispatchAnalyticsEvent
-        }) => {
-          return createPlugin(schema, {
-            providerFactory,
-            nodeViews: {
-              mediaGroup: ReactMediaGroupNode(portalProviderAPI, eventDispatcher, providerFactory, options, api),
-              mediaSingle: ReactMediaSingleNode(portalProviderAPI, eventDispatcher, providerFactory, api, dispatchAnalyticsEvent, options),
-              media: ReactMediaNode(portalProviderAPI, eventDispatcher, providerFactory, options, api),
-              mediaInline: ReactMediaInlineNode(portalProviderAPI, eventDispatcher, providerFactory, api)
-            },
-            errorReporter,
-            uploadErrorHandler: options && options.uploadErrorHandler,
-            waitForMediaUpload: options && options.waitForMediaUpload,
-            customDropzoneContainer: options && options.customDropzoneContainer,
-            customMediaPicker: options && options.customMediaPicker,
-            allowResizing: !!(options && options.allowResizing)
-          }, reactContext, getIntl, api, dispatch, options, featureFlags.newInsertionBehaviour);
-        }
-      }, {
-        name: 'mediaKeymap',
-        plugin: () => {
-          var _api$analytics2;
-          return keymapPlugin(options, api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions);
-        }
-      }];
-      if (options && options.allowMediaSingle) {
-        pmPlugins.push({
-          name: 'mediaSingleKeymap',
-          plugin: ({
-            schema
-          }) => keymapMediaSinglePlugin(schema)
-        });
-      }
-      if (options && options.allowAltTextOnImages) {
-        pmPlugins.push({
-          name: 'mediaAltText',
-          plugin: createMediaAltTextPlugin
-        });
-        pmPlugins.push({
-          name: 'mediaAltTextKeymap',
-          plugin: ({
-            schema
-          }) => {
-            var _api$analytics3;
-            return keymapMediaAltTextPlugin(schema, api === null || api === void 0 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions);
-          }
-        });
-      }
-      if (options && options.allowLinking) {
-        pmPlugins.push({
-          name: 'mediaLinking',
-          plugin: ({
-            dispatch
-          }) => linkingPlugin(dispatch)
-        });
-        pmPlugins.push({
-          name: 'mediaLinkingKeymap',
-          plugin: ({
-            schema
-          }) => keymapLinkingPlugin(schema)
-        });
-      }
-      pmPlugins.push({
-        name: 'mediaSelectionHandler',
-        plugin: () => {
-          const mediaSelectionHandlerPlugin = new SafePlugin({
-            key: new PluginKey('mediaSelectionHandlerPlugin'),
-            props: {
-              handleScrollToSelection: view => {
-                const {
-                  state: {
-                    selection
-                  }
-                } = view;
-                if (!(selection instanceof NodeSelection) || selection.node.type.name !== 'media') {
-                  return false;
-                }
-                const {
-                  node,
-                  offset
-                } = view.domAtPos(selection.from);
-                if (
-                // Is the media element mounted already?
-                offset === node.childNodes.length) {
-                  // Media is not ready, so stop the scroll request
-                  return true;
-                }
-
-                // Media is ready, keep the scrolling request
-                return false;
-              }
-            }
-          });
-          return mediaSelectionHandlerPlugin;
-        }
-      });
-      return pmPlugins;
-    },
-    contentComponent({
-      editorView,
-      appearance
-    }) {
-      return /*#__PURE__*/React.createElement(MediaPickerFunctionalComponent, {
-        editorDomElement: editorView.dom,
-        appearance: appearance,
-        api: api
-      });
-    },
-    secondaryToolbarComponent({
-      editorView,
-      eventDispatcher,
-      disabled
-    }) {
-      return /*#__PURE__*/React.createElement(ToolbarMedia, {
-        isDisabled: disabled,
-        isReducedSpacing: true,
-        api: api
-      });
-    },
-    pluginsOptions: {
-      quickInsert: ({
-        formatMessage
-      }) => [{
-        id: 'media',
-        title: formatMessage(messages.mediaFiles),
-        description: formatMessage(messages.mediaFilesDescription),
-        priority: 400,
-        keywords: ['attachment', 'gif', 'media', 'picture', 'image', 'video'],
-        icon: () => /*#__PURE__*/React.createElement(IconImages, null),
-        action(insert, state) {
-          var _api$analytics4;
-          const pluginState = pluginKey.getState(state);
-          pluginState === null || pluginState === void 0 ? void 0 : pluginState.showMediaPicker();
-          const tr = insert('');
-          api === null || api === void 0 ? void 0 : (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions.attachAnalyticsEvent({
-            action: ACTION.OPENED,
-            actionSubject: ACTION_SUBJECT.PICKER,
-            actionSubjectId: ACTION_SUBJECT_ID.PICKER_CLOUD,
-            attributes: {
-              inputMethod: INPUT_METHOD.QUICK_INSERT
-            },
-            eventType: EVENT_TYPE.UI
-          })(tr);
-          return tr;
-        }
-      }],
-      floatingToolbar: (state, intl, providerFactory) => floatingToolbar(state, intl, {
-        providerFactory,
-        allowMediaInline: options && getMediaFeatureFlag('mediaInline', options.featureFlags),
-        allowResizing: options && options.allowResizing,
-        allowResizingInTables: options && options.allowResizingInTables,
-        allowLinking: options && options.allowLinking,
-        allowAdvancedToolBarOptions: options && options.allowAdvancedToolBarOptions,
-        allowAltTextOnImages: options && options.allowAltTextOnImages,
-        altTextValidator: options && options.altTextValidator,
-        fullWidthEnabled: options && options.fullWidthEnabled
-      }, api)
-    }
-  };
-};
-export default mediaPlugin;

package/dist/es2019/plugins/media/media-plugin-options.js

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

package/dist/es2019/plugins/media/next-plugin-type.js

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

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();
-};