@atlaskit/editor-plugin-media 1.43.13 → 1.44.0

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

@@ -21,7 +21,7 @@ import { updateMediaNodeAttrs } from '../pm-plugins/commands/helpers';
 // Ignored via go/ees005
 // eslint-disable-next-line import/no-namespace
 import * as helpers from '../pm-plugins/commands/helpers';
-import { getMediaFromSupportedMediaNodesFromSelection, isNodeDoubleClickSupportedInLivePagesViewMode, removeMediaNode, splitMediaGroup } from '../pm-plugins/utils/media-common';
+import { getIdentifier, getMediaFromSupportedMediaNodesFromSelection, isNodeDoubleClickSupportedInLivePagesViewMode, removeMediaNode, splitMediaGroup } from '../pm-plugins/utils/media-common';
 import { insertMediaGroupNode, insertMediaInlineNode } from '../pm-plugins/utils/media-files';
 import { getMediaNodeInsertionType } from '../pm-plugins/utils/media-inline';
 import { insertMediaSingleNode } from '../pm-plugins/utils/media-single';
@@ -92,7 +92,7 @@ export class MediaPluginStateImplementation {
     _defineProperty(this, "destroyed", false);
     _defineProperty(this, "removeOnCloseListener", () => {});
     _defineProperty(this, "onPopupToggleCallback", () => {});
-    _defineProperty(this, "nodeCount", new Map());
+    _defineProperty(this, "identifierCount", new Map());
     _defineProperty(this, "taskManager", new MediaTaskManager());
     _defineProperty(this, "pickers", []);
     _defineProperty(this, "pickerPromises", []);
@@ -247,23 +247,53 @@ export class MediaPluginStateImplementation {
       }
       removeMediaNode(this.view, getNode, getPos);
     });
+    _defineProperty(this, "getIdentifierKey", identifier => {
+      if (identifier.mediaItemType === "file") {
+        return identifier.id;
+      } else {
+        return identifier.dataURI;
+      }
+    });
     _defineProperty(this, "trackMediaNodeAddition", node => {
-      var _this$nodeCount$get;
-      const id = node.attrs.id;
-      const count = (_this$nodeCount$get = this.nodeCount.get(id)) !== null && _this$nodeCount$get !== void 0 ? _this$nodeCount$get : 0;
+      var _this$identifierCount;
+      const identifier = getIdentifier(node.attrs);
+      const key = this.getIdentifierKey(identifier);
+      const {
+        count
+      } = (_this$identifierCount = this.identifierCount.get(key)) !== null && _this$identifierCount !== void 0 ? _this$identifierCount : {
+        count: 0
+      };
       if (count === 0) {
-        this.taskManager.resumePendingTask(id);
+        this.taskManager.resumePendingTask(key);
       }
-      this.nodeCount.set(id, count + 1);
+      this.identifierCount.set(key, {
+        identifier,
+        count: count + 1
+      });
     });
     _defineProperty(this, "trackMediaNodeRemoval", node => {
-      var _this$nodeCount$get2;
-      const id = node.attrs.id;
-      const count = (_this$nodeCount$get2 = this.nodeCount.get(id)) !== null && _this$nodeCount$get2 !== void 0 ? _this$nodeCount$get2 : 0;
+      var _this$identifierCount2;
+      const identifier = getIdentifier(node.attrs);
+      const key = this.getIdentifierKey(identifier);
+      const {
+        count
+      } = (_this$identifierCount2 = this.identifierCount.get(key)) !== null && _this$identifierCount2 !== void 0 ? _this$identifierCount2 : {
+        count: 0
+      };
       if (count === 1) {
-        this.taskManager.cancelPendingTask(id);
+        this.taskManager.cancelPendingTask(key);
       }
-      this.nodeCount.set(id, count - 1);
+      this.identifierCount.set(key, {
+        identifier,
+        count: count - 1
+      });
+    });
+    _defineProperty(this, "isIdentifierInEditorScope", identifier => {
+      const key = this.getIdentifierKey(identifier);
+
+      // rely on has instead of count > 0 because if the user cuts and pastes the same media
+      // the count will temporarily be 0 but the media is still in the scope of editor.
+      return this.identifierCount.has(key);
     });
     /**
      * Called from React UI Component on componentDidMount

package/dist/es2019/pm-plugins/utils/media-single.js

@@ -27,10 +27,13 @@ const getInsertMediaAnalytics = (inputMethod, fileExtension, insertMediaVia) =>
 function shouldAddParagraph(state) {
   return atTheBeginningOfBlock(state) && !checkNodeDown(state.selection, state.doc, isEmptyParagraph);
 }
-
-// Ignored via go/ees005
-// eslint-disable-next-line @typescript-eslint/max-params
-function insertNodesWithOptionalParagraph(nodes, analyticsAttributes = {}, editorAnalyticsAPI, isNestingInQuoteSupported, insertMediaVia) {
+function insertNodesWithOptionalParagraph({
+  nodes,
+  analyticsAttributes = {},
+  editorAnalyticsAPI,
+  isNestingInQuoteSupported,
+  insertMediaVia
+}) {
   return function (state, dispatch) {
     const {
       tr,
@@ -46,7 +49,7 @@ function insertNodesWithOptionalParagraph(nodes, analyticsAttributes = {}, edito
       previousType
     } = analyticsAttributes;
     let openEnd = 0;
-    if (shouldAddParagraph(state)) {
+    if (shouldAddParagraph(state) && !fg('platform_editor_axe_leading_paragraph_from_media')) {
       nodes.push(paragraph.create());
       openEnd = 1;
     }
@@ -58,10 +61,12 @@ function insertNodesWithOptionalParagraph(nodes, analyticsAttributes = {}, edito
       const grandparentEndPos = state.selection.$from.start(-1) + grandParentNode.nodeSize - 1;
       pmSafeInsert(nodes[0], grandparentEndPos)(tr).scrollIntoView();
     } else if (state.selection.empty) {
-      tr.insert(state.selection.from, nodes);
-      // Set the cursor position at the end of the insertion
+      const insertFrom = atTheBeginningOfBlock(state) && fg('platform_editor_axe_leading_paragraph_from_media') ? state.selection.$from.before() : state.selection.from;
+      tr.insert(insertFrom, nodes);
       const endPos = state.selection.from + nodes.reduce((totalSize, currNode) => totalSize + currNode.nodeSize, 0);
-      tr.setSelection(new TextSelection(tr.doc.resolve(endPos), tr.doc.resolve(endPos)));
+      if (!fg('platform_editor_axe_leading_paragraph_from_media')) {
+        tr.setSelection(new TextSelection(tr.doc.resolve(endPos), tr.doc.resolve(endPos)));
+      }
     } else {
       tr.replaceSelection(new Slice(Fragment.from(nodes), 0, openEnd));
     }
@@ -112,7 +117,13 @@ export const insertMediaAsMediaSingle = (view, node, inputMethod, editorAnalytic
     inputMethod,
     fileExtension: node.attrs.__fileMimeType
   };
-  return insertNodesWithOptionalParagraph(nodes, analyticsAttributes, editorAnalyticsAPI, isNestingInQuoteSupported, insertMediaVia)(state, dispatch);
+  return insertNodesWithOptionalParagraph({
+    nodes,
+    analyticsAttributes,
+    editorAnalyticsAPI,
+    isNestingInQuoteSupported,
+    insertMediaVia
+  })(state, dispatch);
 };
 const getFileExtension = fileName => {
   if (fileName) {
@@ -152,10 +163,16 @@ export const insertMediaSingleNode = (view, mediaState, inputMethod, collection,
     grandParentNodeType,
     content: node
   })) {
-    insertNodesWithOptionalParagraph([node], {
-      fileExtension,
-      inputMethod
-    }, editorAnalyticsAPI, isNestingInQuoteSupported, insertMediaVia)(state, dispatch);
+    insertNodesWithOptionalParagraph({
+      nodes: [node],
+      analyticsAttributes: {
+        fileExtension,
+        inputMethod
+      },
+      editorAnalyticsAPI,
+      isNestingInQuoteSupported,
+      insertMediaVia
+    })(state, dispatch);
   } else {
     let tr = null;
     tr = safeInsert(node, state.selection.from)(state.tr);
@@ -203,11 +220,16 @@ export const changeFromMediaInlineToMediaSingleNode = (view, fromNode, widthPlug
     grandParentNodeType,
     content: node
   })) {
-    return insertNodesWithOptionalParagraph([node], {
-      fileExtension,
-      newType: ACTION_SUBJECT_ID.MEDIA_SINGLE,
-      previousType: ACTION_SUBJECT_ID.MEDIA_INLINE
-    }, editorAnalyticsAPI, isNestingInQuoteSupported)(state, dispatch);
+    return insertNodesWithOptionalParagraph({
+      nodes: [node],
+      analyticsAttributes: {
+        fileExtension,
+        newType: ACTION_SUBJECT_ID.MEDIA_SINGLE,
+        previousType: ACTION_SUBJECT_ID.MEDIA_INLINE
+      },
+      editorAnalyticsAPI,
+      isNestingInQuoteSupported
+    })(state, dispatch);
   } else {
     const nodePos = state.tr.doc.resolve(state.selection.from).end();
     let tr = null;

package/dist/es2019/ui/MediaLinkingToolbar.js

@@ -19,6 +19,7 @@ import ChevronLeftLargeIcon from '@atlaskit/icon/glyph/chevron-left-large';
 import EditorUnlinkIcon from '@atlaskit/icon/glyph/editor/unlink';
 import { R400 } from '@atlaskit/theme/colors';
 const validationWrapper = css({
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: 0,
   padding: `${"var(--ds-space-150, 12px)"} ${"var(--ds-space-300, 24px)"} ${"var(--ds-space-150, 12px)"} 0`,
   margin: `0 ${"var(--ds-space-050, 4px)"} 0 ${"var(--ds-space-400, 32px)"}`,

package/dist/es2019/ui/toolbar/mediaInline.js

@@ -4,9 +4,9 @@ import { IconCard, IconEmbed, IconInline } from '@atlaskit/editor-common/card';
 import commonMessages, { cardMessages, mediaAndEmbedToolbarMessages } from '@atlaskit/editor-common/messages';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import DeleteIcon from '@atlaskit/icon/core/delete';
-import ExpandIcon from '@atlaskit/icon/core/grow-diagonal';
 import ImageFullscreenIcon from '@atlaskit/icon/core/image-fullscreen';
 import ImageInlineIcon from '@atlaskit/icon/core/image-inline';
+import MaximizeIcon from '@atlaskit/icon/core/maximize';
 import DownloadIcon from '@atlaskit/icon/core/migration/download';
 import SmartLinkCardIcon from '@atlaskit/icon/core/smart-link-card';
 import FilePreviewIcon from '@atlaskit/icon/glyph/editor/file-preview';
@@ -69,7 +69,7 @@ export const generateMediaInlineFloatingToolbar = (state, intl, mediaPluginState
     id: 'editor.media.viewer',
     testId: 'file-preview-toolbar-button',
     type: 'button',
-    icon: ExpandIcon,
+    icon: MaximizeIcon,
     iconFallback: FilePreviewIcon,
     title: intl.formatMessage(messages.preview),
     onClick: () => {
@@ -249,7 +249,7 @@ const getMediaInlineImageToolbar = (state, intl, mediaPluginState, hoverDecorati
       id: 'editor.media.viewer',
       testId: 'file-preview-toolbar-button',
       type: 'button',
-      icon: ExpandIcon,
+      icon: MaximizeIcon,
       iconFallback: FilePreviewIcon,
       title: intl.formatMessage(messages.preview),
       onClick: () => {

package/dist/esm/nodeviews/mediaGroup.js

@@ -193,7 +193,7 @@ var MediaGroup = /*#__PURE__*/function (_React$Component) {
       this.updateMediaClientConfig();
       this.mediaNodes.forEach( /*#__PURE__*/function () {
         var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(node) {
-          var _this2$props, view, mediaProvider, contextIdentifierProvider, mediaNodeUpdater, getPos, contextId, hasDifferentContextId;
+          var _this2$props, view, mediaProvider, contextIdentifierProvider, mediaNodeUpdater, getPos, contextId, shouldNodeBeDeepCopied;
           return _regeneratorRuntime.wrap(function _callee$(_context) {
             while (1) switch (_context.prev = _context.next) {
               case 0:
@@ -232,10 +232,10 @@ var MediaGroup = /*#__PURE__*/function (_React$Component) {
                 return mediaNodeUpdater.updateNodeContextId(getPos);
               case 9:
                 _context.next = 11;
-                return mediaNodeUpdater.hasDifferentContextId();
+                return mediaNodeUpdater.shouldNodeBeDeepCopied();
               case 11:
-                hasDifferentContextId = _context.sent;
-                if (!hasDifferentContextId) {
+                shouldNodeBeDeepCopied = _context.sent;
+                if (!shouldNodeBeDeepCopied) {
                   _context.next = 15;
                   break;
                 }

package/dist/esm/nodeviews/mediaGroupNext.js

@@ -117,7 +117,7 @@ var useLatestMediaGroupNode = function useLatestMediaGroupNode(nextMediaNode) {
 };
 var runMediaNodeUpdate = /*#__PURE__*/function () {
   var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref2) {
-    var mediaNodeUpdater, getPos, node, updateAttrs, contextId, hasDifferentContextId;
+    var mediaNodeUpdater, getPos, node, updateAttrs, contextId, shouldNodeBeDeepCopied;
     return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
@@ -138,10 +138,10 @@ var runMediaNodeUpdate = /*#__PURE__*/function () {
           return mediaNodeUpdater.updateNodeContextId(getPos);
         case 8:
           _context.next = 10;
-          return mediaNodeUpdater.hasDifferentContextId();
+          return mediaNodeUpdater.shouldNodeBeDeepCopied();
         case 10:
-          hasDifferentContextId = _context.sent;
-          if (!hasDifferentContextId) {
+          shouldNodeBeDeepCopied = _context.sent;
+          if (!shouldNodeBeDeepCopied) {
             _context.next = 14;
             break;
           }

package/dist/esm/nodeviews/mediaInline.js

@@ -49,7 +49,7 @@ var createMediaNodeUpdater = function createMediaNodeUpdater(props) {
  */
 var updateMediaNodeAttributes = /*#__PURE__*/function () {
   var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(props, mediaNodeUpdater) {
-    var addPendingTask, node, contextId, hasDifferentContextId, copyNode;
+    var addPendingTask, node, contextId, shouldNodeBeDeepCopied, copyNode;
     return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
@@ -70,10 +70,10 @@ var updateMediaNodeAttributes = /*#__PURE__*/function () {
           return mediaNodeUpdater.updateContextId();
         case 8:
           _context.next = 10;
-          return mediaNodeUpdater.hasDifferentContextId();
+          return mediaNodeUpdater.shouldNodeBeDeepCopied();
         case 10:
-          hasDifferentContextId = _context.sent;
-          if (!hasDifferentContextId) {
+          shouldNodeBeDeepCopied = _context.sent;
+          if (!shouldNodeBeDeepCopied) {
             _context.next = 22;
             break;
           }
@@ -120,11 +120,11 @@ export var MediaInline = function MediaInline(props) {
     setViewMediaClientConfig = _useState2[1];
   var _useState3 = useState(true),
     _useState4 = _slicedToArray(_useState3, 2),
-    isContextIdUnsync = _useState4[0],
-    setIsContextIdUnsync = _useState4[1];
+    isNodeScopeUnsync = _useState4[0],
+    setIsNodeScopeUnsync = _useState4[1];
   useEffect(function () {
     var mediaNodeUpdater = createMediaNodeUpdater(props);
-    mediaNodeUpdater.hasDifferentContextId().then(setIsContextIdUnsync);
+    mediaNodeUpdater.shouldNodeBeDeepCopied().then(setIsNodeScopeUnsync);
     handleNewNode(props);
     updateMediaNodeAttributes(props, mediaNodeUpdater);
     updateViewMediaClientConfig(props);
@@ -179,7 +179,7 @@ export var MediaInline = function MediaInline(props) {
    * to prevent calling the media API (in mounting of `MediaInlineCard`)
    * before the prerequisites meet
    */
-  if (!viewMediaClientConfig || isContextIdUnsync) {
+  if (!viewMediaClientConfig || isNodeScopeUnsync) {
     return jsx(MediaInlineCardLoadingView, {
       message: "",
       isSelected: false