@atlaskit/editor-plugin-media 1.36.5 → 1.37.1

package/dist/es2019/nodeviews/mediaGroupNext.js

@@ -0,0 +1,249 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { injectIntl } from 'react-intl-next';
+import { usePreviousState } from '@atlaskit/editor-common/hooks';
+import { nodeViewsMessages as messages } from '@atlaskit/editor-common/media';
+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 { createMediaNodeUpdater } from './mediaNodeUpdater';
+const 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
+  };
+};
+const isNodeSelected = props => (mediaItemPos, mediaGroupPos) => {
+  const selected = isNodeSelectedOrInRange(props.anchorPos, props.headPos, mediaGroupPos, props.nodeSize);
+  if (selected === SelectedState.selectedInRange) {
+    return true;
+  }
+  if (selected === SelectedState.selectedInside && props.anchorPos === mediaItemPos) {
+    return true;
+  }
+  return false;
+};
+const prepareFilmstripItem = ({
+  allowLazyLoading,
+  enableDownloadButton,
+  handleMediaNodeRemoval,
+  getPos,
+  intl,
+  isMediaItemSelected,
+  setMediaGroupNodeSelection,
+  featureFlags
+}) => (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: enableDownloadButton,
+        actions: [{
+          handler: handleMediaNodeRemoval.bind(null, undefined, getNodePos),
+          icon: /*#__PURE__*/React.createElement(EditorCloseIcon, {
+            label: intl.formatMessage(messages.mediaGroupDeleteLabel)
+          })
+        }]
+      };
+    }
+  };
+  const mediaGroupPos = getPos();
+  return {
+    identifier: getIdentifier(item),
+    isLazy: allowLazyLoading,
+    selected: isMediaItemSelected(getNodePos(), typeof mediaGroupPos === 'number' ? mediaGroupPos : NaN),
+    onClick: () => {
+      setMediaGroupNodeSelection(getNodePos());
+    },
+    ...mediaInlineOptions(getMediaFeatureFlag('mediaInline', featureFlags))
+  };
+};
+
+/**
+ * Keep returning the same ProseMirror Node, unless the node content changed.
+ *
+ * React uses shallow comparation with `Object.is`,
+ * but that can cause multiple re-renders when the same node is given in a different instance.
+ *
+ * To avoid unnecessary re-renders, this hook uses the `Node.eq` from ProseMirror API to compare
+ * previous and new values.
+ */
+const useLatestMediaGroupNode = nextMediaNode => {
+  const previousMediaNode = usePreviousState(nextMediaNode);
+  const [mediaNode, setMediaNode] = React.useState(nextMediaNode);
+  React.useEffect(() => {
+    if (!previousMediaNode) {
+      return;
+    }
+    if (!previousMediaNode.eq(nextMediaNode)) {
+      setMediaNode(nextMediaNode);
+    }
+  }, [previousMediaNode, nextMediaNode]);
+  return mediaNode;
+};
+const runMediaNodeUpdate = async ({
+  mediaNodeUpdater,
+  getPos,
+  node,
+  updateAttrs
+}) => {
+  if (updateAttrs) {
+    await mediaNodeUpdater.updateNodeAttrs(getPos);
+  }
+  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
+    });
+  }
+};
+const noop = () => {};
+export const MediaGroupNext = injectIntl( /*#__PURE__*/React.memo(props => {
+  const {
+    mediaOptions: {
+      allowLazyLoading,
+      enableDownloadButton,
+      featureFlags
+    },
+    intl,
+    getPos,
+    anchorPos,
+    headPos,
+    view,
+    disabled,
+    editorViewMode,
+    mediaProvider,
+    contextIdentifierProvider,
+    isCopyPasteEnabled
+  } = props;
+  const mediaGroupNode = useLatestMediaGroupNode(props.node);
+  const mediaPluginState = useMemo(() => {
+    return mediaStateKey.getState(view.state);
+  }, [view.state]);
+  const mediaClientConfig = mediaPluginState === null || mediaPluginState === void 0 ? void 0 : mediaPluginState.mediaClientConfig;
+  const handleMediaGroupUpdate = mediaPluginState === null || mediaPluginState === void 0 ? void 0 : mediaPluginState.handleMediaGroupUpdate;
+  const [viewMediaClientConfig, setViewMediaClientConfig] = useState(undefined);
+  const nodeSize = mediaGroupNode.nodeSize;
+  const mediaNodesWithOffsets = useMemo(() => {
+    const result = [];
+    mediaGroupNode.forEach((item, childOffset) => {
+      result.push({
+        node: item,
+        offset: childOffset
+      });
+    });
+    return result;
+  }, [mediaGroupNode]);
+  const previousMediaNodesWithOffsets = usePreviousState(mediaNodesWithOffsets);
+  const handleMediaNodeRemoval = useMemo(() => {
+    return disabled || !mediaPluginState ? noop : mediaPluginState.handleMediaNodeRemoval;
+  }, [disabled, mediaPluginState]);
+  const setMediaGroupNodeSelection = useCallback(pos => {
+    setNodeSelection(view, pos);
+  }, [view]);
+  const isMediaItemSelected = useMemo(() => {
+    return isNodeSelected({
+      anchorPos,
+      headPos,
+      nodeSize
+    });
+  }, [anchorPos, headPos, nodeSize]);
+  const filmstripItem = useMemo(() => {
+    return prepareFilmstripItem({
+      allowLazyLoading,
+      enableDownloadButton,
+      handleMediaNodeRemoval,
+      getPos,
+      intl,
+      isMediaItemSelected,
+      setMediaGroupNodeSelection,
+      featureFlags
+    });
+  }, [allowLazyLoading, enableDownloadButton, handleMediaNodeRemoval, getPos, intl, isMediaItemSelected, setMediaGroupNodeSelection, featureFlags]);
+  const items = useMemo(() => {
+    return mediaNodesWithOffsets.map(({
+      node,
+      offset
+    }) => {
+      return filmstripItem(node, offset);
+    });
+  }, [mediaNodesWithOffsets, filmstripItem]);
+  useEffect(() => {
+    setViewMediaClientConfig(mediaClientConfig);
+  }, [mediaClientConfig]);
+  useEffect(() => {
+    mediaNodesWithOffsets.forEach(({
+      node,
+      offset
+    }) => {
+      const mediaNodeUpdater = createMediaNodeUpdater({
+        view,
+        mediaProvider,
+        contextIdentifierProvider,
+        node,
+        isMediaSingle: false
+      });
+      const updateAttrs = isCopyPasteEnabled || isCopyPasteEnabled === undefined;
+      runMediaNodeUpdate({
+        mediaNodeUpdater,
+        node,
+        updateAttrs,
+        getPos: () => {
+          const pos = getPos();
+          if (typeof pos !== 'number') {
+            return undefined;
+          }
+          return pos + offset + 1;
+        }
+      });
+    });
+  }, [view, contextIdentifierProvider, getPos, mediaProvider, mediaNodesWithOffsets, isCopyPasteEnabled]);
+  useEffect(() => {
+    if (!handleMediaGroupUpdate || !previousMediaNodesWithOffsets) {
+      return;
+    }
+    const old = previousMediaNodesWithOffsets.map(({
+      node
+    }) => node);
+    const next = mediaNodesWithOffsets.map(({
+      node
+    }) => node);
+    handleMediaGroupUpdate(old, next);
+    return () => {
+      handleMediaGroupUpdate(next, []);
+    };
+  }, [handleMediaGroupUpdate, mediaNodesWithOffsets, previousMediaNodesWithOffsets]);
+  return /*#__PURE__*/React.createElement(Filmstrip, {
+    items: items,
+    mediaClientConfig: viewMediaClientConfig,
+    featureFlags: featureFlags,
+    shouldOpenMediaViewer: editorViewMode
+  });
+}));
+MediaGroupNext.displayName = 'MediaGroup';

package/dist/es2019/nodeviews/mediaNodeUpdater.js

@@ -424,8 +424,7 @@ const hasPrivateAttrsChanged = (currentAttrs, newAttrs) => {
 };
 export const createMediaNodeUpdater = props => {
   const updaterProps = {
-    ...props,
-    isMediaSingle: true
+    ...props
   };
   return new MediaNodeUpdater(updaterProps);
 };

package/dist/es2019/plugin.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 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';
@@ -28,6 +28,7 @@ import { floatingToolbar } from './toolbar';
 import { MediaPickerComponents } from './ui/MediaPicker';
 import { RenderMediaViewer } from './ui/MediaViewer/PortalWrapper';
 import ToolbarMedia from './ui/ToolbarMedia';
+import { createMediaIdentifierArray, extractMediaNodes } from './utils/media-common';
 import { insertMediaAsMediaSingle } from './utils/media-single';
 const MediaPickerFunctionalComponent = ({
   api,
@@ -48,12 +49,24 @@ const MediaPickerFunctionalComponent = ({
   });
 };
 const MediaViewerFunctionalComponent = ({
-  api
+  api,
+  editorView
 }) => {
   const {
     mediaState
   } = useSharedPluginState(api, ['media']);
 
+  // Only traverse document once when media viewer is visible, media viewer items will not update
+  // when document changes are made while media viewer is open
+
+  const mediaItems = useMemo(() => {
+    if (mediaState !== null && mediaState !== void 0 && mediaState.isMediaViewerVisible && fg('platform_editor_media_interaction_improvements')) {
+      const mediaNodes = extractMediaNodes(editorView.state.doc);
+      return createMediaIdentifierArray(mediaNodes);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- only update mediaItems once when media viewer is visible
+  }, [mediaState === null || mediaState === void 0 ? void 0 : mediaState.isMediaViewerVisible]);
+
   // Viewer does not have required attributes to render the media viewer
   if (!(mediaState !== null && mediaState !== void 0 && mediaState.isMediaViewerVisible) || !(mediaState !== null && mediaState !== void 0 && mediaState.mediaViewerSelectedMedia) || !(mediaState !== null && mediaState !== void 0 && mediaState.mediaClientConfig)) {
     return null;
@@ -65,7 +78,8 @@ const MediaViewerFunctionalComponent = ({
   return /*#__PURE__*/React.createElement(RenderMediaViewer, {
     mediaClientConfig: mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaClientConfig,
     onClose: handleOnClose,
-    selectedNodeAttrs: mediaState.mediaViewerSelectedMedia
+    selectedNodeAttrs: mediaState.mediaViewerSelectedMedia,
+    items: fg('platform_editor_media_interaction_improvements') ? mediaItems : undefined
   });
 };
 export const mediaPlugin = ({
@@ -260,7 +274,8 @@ export const mediaPlugin = ({
       appearance
     }) {
       return /*#__PURE__*/React.createElement(React.Fragment, null, fg('platform_editor_media_previewer_bugfix') && /*#__PURE__*/React.createElement(MediaViewerFunctionalComponent, {
-        api: api
+        api: api,
+        editorView: editorView
       }), /*#__PURE__*/React.createElement(MediaPickerFunctionalComponent, {
         editorDomElement: editorView.dom,
         appearance: appearance,

package/dist/es2019/pm-plugins/main.js

@@ -673,11 +673,12 @@ export const createPlugin = (_schema, options, getIntl, pluginInjectionApi, disp
         switch (meta === null || meta === void 0 ? void 0 : meta.type) {
           case ACTIONS.SHOW_MEDIA_VIEWER:
             pluginState.mediaViewerSelectedMedia = meta.mediaViewerSelectedMedia;
-            pluginState.isMediaViewerVisible = true;
+            pluginState.isMediaViewerVisible = meta.isMediaViewerVisible;
             nextPluginState = nextPluginState.clone();
             break;
           case ACTIONS.HIDE_MEDIA_VIEWER:
             pluginState.mediaViewerSelectedMedia = undefined;
+            pluginState.isMediaViewerVisible = meta.isMediaViewerVisible;
             nextPluginState = nextPluginState.clone();
             break;
         }

package/dist/es2019/ui/MediaViewer/PortalWrapper.js

@@ -24,14 +24,15 @@ const getIdentifier = attrs => {
 export const RenderMediaViewer = ({
   mediaClientConfig,
   onClose,
-  selectedNodeAttrs
+  selectedNodeAttrs,
+  items = []
 }) => {
   if (editorExperiment('add-media-from-url', true)) {
     const identifier = getIdentifier(selectedNodeAttrs);
     const collectionName = isExternalMedia(selectedNodeAttrs) ? '' : selectedNodeAttrs.collection;
     return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(MediaViewer, {
       collectionName: collectionName,
-      items: [],
+      items: items,
       mediaClientConfig: mediaClientConfig,
       selectedItem: identifier,
       onClose: onClose

package/dist/es2019/utils/media-common.js

@@ -3,8 +3,10 @@ import { createNewParagraphBelow, createParagraphNear } from '@atlaskit/editor-c
 import { deleteSelection, splitBlock } from '@atlaskit/editor-prosemirror/commands';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { findPositionOfNodeBefore } from '@atlaskit/editor-prosemirror/utils';
-import { isMediaBlobUrl } from '@atlaskit/media-client';
+import { isExternalImageIdentifier, isMediaBlobUrl } from '@atlaskit/media-client';
 import { getMediaPluginState } from '../pm-plugins/main';
+import { isExternalMedia } from '../toolbar/utils';
+import { isVideo } from './media-single';
 const isTemporary = id => {
   return id.indexOf('temporary:') === 0;
 };
@@ -230,4 +232,51 @@ export const getMediaFromSupportedMediaNodesFromSelection = state => {
     default:
       return null;
   }
+};
+export const getIdentifier = attrs => {
+  if (isExternalMedia(attrs)) {
+    return {
+      mediaItemType: 'external-image',
+      dataURI: attrs.url
+    };
+  } else {
+    const {
+      id,
+      collection = ''
+    } = attrs;
+    return {
+      id,
+      mediaItemType: 'file',
+      collectionName: collection
+    };
+  }
+};
+export const extractMediaNodes = doc => {
+  const mediaNodes = [];
+  doc.descendants(node => {
+    if (node.type.name === 'media' || node.type.name === 'mediaInline') {
+      mediaNodes.push(node);
+    }
+  });
+  return mediaNodes;
+};
+export const createMediaIdentifierArray = mediaNodes => {
+  const mediaIdentifierMap = new Map();
+  mediaNodes.forEach(item => {
+    const attrs = item.attrs;
+    if (!attrs) {
+      return;
+    }
+    if (isVideo(attrs.__fileMimeType)) {
+      return;
+    }
+    const identifier = getIdentifier(attrs);
+
+    // Add only if not already processed
+    const idKey = isExternalImageIdentifier(identifier) ? identifier.dataURI : identifier.id;
+    if (!mediaIdentifierMap.has(idKey)) {
+      mediaIdentifierMap.set(idKey, identifier);
+    }
+  });
+  return [...mediaIdentifierMap.values()];
 };

package/dist/esm/nodeviews/mediaGroup.js

@@ -21,8 +21,10 @@ import { isNodeSelectedOrInRange, SelectedState, setNodeSelection } from '@atlas
 import EditorCloseIcon from '@atlaskit/icon/glyph/editor/close';
 import { getMediaFeatureFlag } from '@atlaskit/media-common';
 import { Filmstrip } from '@atlaskit/media-filmstrip';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useMediaProvider } from '../hooks/useMediaProvider';
 import { stateKey as mediaStateKey } from '../pm-plugins/plugin-key';
+import { MediaGroupNext } from './mediaGroupNext';
 import { MediaNodeUpdater } from './mediaNodeUpdater';
 var isMediaGroupSelectedFromProps = function isMediaGroupSelectedFromProps(props) {
   /**
@@ -339,6 +341,23 @@ var MediaGroupNodeView = /*#__PURE__*/function (_ReactNodeView) {
             if (!mediaProvider) {
               return null;
             }
+            if (fg('platform_editor_react18_phase2__media_single')) {
+              return /*#__PURE__*/React.createElement(MediaGroupNext, {
+                node: _this3.node,
+                getPos: getPos,
+                view: _this3.view,
+                forwardRef: forwardRef,
+                disabled: (editorDisabledPlugin || {}).editorDisabled,
+                allowLazyLoading: mediaOptions.allowLazyLoading,
+                mediaProvider: mediaProvider,
+                contextIdentifierProvider: contextIdentifierProvider,
+                isCopyPasteEnabled: mediaOptions.isCopyPasteEnabled,
+                anchorPos: _this3.view.state.selection.$anchor.pos,
+                headPos: _this3.view.state.selection.$head.pos,
+                mediaOptions: mediaOptions,
+                editorViewMode: (editorViewModePlugin === null || editorViewModePlugin === void 0 ? void 0 : editorViewModePlugin.mode) === 'view'
+              });
+            }
             return /*#__PURE__*/React.createElement(IntlMediaGroup, {
               node: _this3.node,
               getPos: getPos,