@atlaskit/editor-core 176.0.3 → 177.0.1

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

@@ -1,4 +1,6 @@
 import React from 'react';
+import { PluginKey, NodeSelection } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { media, mediaGroup, mediaSingle, mediaSingleWithCaption, mediaInline } from '@atlaskit/adf-schema';
 import { stateKey as pluginKey, createPlugin } from './pm-plugins/main';
 import { getMediaFeatureFlag } from '@atlaskit/media-common';
@@ -140,6 +142,37 @@ var mediaPlugin = function mediaPlugin(options) {
         });
       }
 
+      pmPlugins.push({
+        name: 'mediaSelectionHandler',
+        plugin: function plugin() {
+          var mediaSelectionHandlerPlugin = new SafePlugin({
+            key: new PluginKey('mediaSelectionHandlerPlugin'),
+            props: {
+              handleScrollToSelection: function handleScrollToSelection(view) {
+                var selection = view.state.selection;
+
+                if (!(selection instanceof NodeSelection) || selection.node.type.name !== 'media') {
+                  return false;
+                }
+
+                var _view$domAtPos = view.domAtPos(selection.from),
+                    node = _view$domAtPos.node,
+                    offset = _view$domAtPos.offset;
+
+                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: function contentComponent(_ref7) {

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

@@ -86,13 +86,12 @@ var MediaGroup = /*#__PURE__*/function (_React$Component) {
       var oldMediaNodes = _this.mediaNodes;
       _this.mediaNodes = [];
       node.forEach(function (item, childOffset) {
-        _this.mediaPluginState.mediaGroupNodes[item.attrs.id] = {
-          node: item,
-          getPos: function getPos() {
-            return props.getPos() + childOffset + 1;
-          }
+        var getPos = function getPos() {
+          return props.getPos() + childOffset + 1;
         };
 
+        _this.mediaPluginState.setMediaGroupNode(item, getPos);
+
         _this.mediaNodes.push(item);
       });
 
@@ -240,7 +239,9 @@ var MediaGroup = /*#__PURE__*/function (_React$Component) {
                   }
 
                   _context.next = 14;
-                  return mediaNodeUpdater.copyNode();
+                  return mediaNodeUpdater.copyNode({
+                    traceId: node.attrs.__mediaTraceId
+                  });
 
                 case 14:
                 case "end":

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

@@ -85,7 +85,9 @@ export var updateMediaNodeAttributes = /*#__PURE__*/function () {
             }
 
             _context.prev = 13;
-            copyNode = mediaNodeUpdater.copyNode();
+            copyNode = mediaNodeUpdater.copyNode({
+              traceId: node.attrs.__mediaTraceId
+            });
             addPendingTask(copyNode);
             _context.next = 18;
             return copyNode;

package/dist/esm/plugins/media/nodeviews/mediaNodeUpdater.js

@@ -477,80 +477,86 @@ export var MediaNodeUpdater = /*#__PURE__*/function () {
       };
     }());
 
-    _defineProperty(this, "copyNode", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee8() {
-      var mediaProvider, _this$props, isMediaSingle, view, attrs, nodeContextId, uploadMediaClientConfig, mediaClient, auth, objectId, id, collection, source, currentCollectionName, destination, mediaFile;
+    _defineProperty(this, "copyNode", /*#__PURE__*/function () {
+      var _ref8 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee8(traceContext) {
+        var mediaProvider, _this$props, isMediaSingle, view, attrs, nodeContextId, uploadMediaClientConfig, mediaClient, auth, objectId, id, collection, source, currentCollectionName, destination, mediaFile;
 
-      return _regeneratorRuntime.wrap(function _callee8$(_context8) {
-        while (1) {
-          switch (_context8.prev = _context8.next) {
-            case 0:
-              _context8.next = 2;
-              return _this.props.mediaProvider;
+        return _regeneratorRuntime.wrap(function _callee8$(_context8) {
+          while (1) {
+            switch (_context8.prev = _context8.next) {
+              case 0:
+                _context8.next = 2;
+                return _this.props.mediaProvider;
 
-            case 2:
-              mediaProvider = _context8.sent;
-              _this$props = _this.props, isMediaSingle = _this$props.isMediaSingle, view = _this$props.view;
-              attrs = _this.getAttrs();
+              case 2:
+                mediaProvider = _context8.sent;
+                _this$props = _this.props, isMediaSingle = _this$props.isMediaSingle, view = _this$props.view;
+                attrs = _this.getAttrs();
 
-              if (!(!mediaProvider || !mediaProvider.uploadParams || !attrs || attrs.type !== 'file')) {
-                _context8.next = 7;
-                break;
-              }
+                if (!(!mediaProvider || !mediaProvider.uploadParams || !attrs || attrs.type !== 'file')) {
+                  _context8.next = 7;
+                  break;
+                }
 
-              return _context8.abrupt("return");
+                return _context8.abrupt("return");
 
-            case 7:
-              nodeContextId = _this.getNodeContextId();
-              uploadMediaClientConfig = mediaProvider.uploadMediaClientConfig;
+              case 7:
+                nodeContextId = _this.getNodeContextId();
+                uploadMediaClientConfig = mediaProvider.uploadMediaClientConfig;
 
-              if (!(uploadMediaClientConfig && uploadMediaClientConfig.getAuthFromContext && nodeContextId)) {
-                _context8.next = 25;
-                break;
-              }
+                if (!(uploadMediaClientConfig && uploadMediaClientConfig.getAuthFromContext && nodeContextId)) {
+                  _context8.next = 25;
+                  break;
+                }
 
-              mediaClient = getMediaClient(uploadMediaClientConfig);
-              _context8.next = 13;
-              return uploadMediaClientConfig.getAuthFromContext(nodeContextId);
+                mediaClient = getMediaClient(uploadMediaClientConfig);
+                _context8.next = 13;
+                return uploadMediaClientConfig.getAuthFromContext(nodeContextId);
 
-            case 13:
-              auth = _context8.sent;
-              _context8.next = 16;
-              return _this.getObjectId();
+              case 13:
+                auth = _context8.sent;
+                _context8.next = 16;
+                return _this.getObjectId();
 
-            case 16:
-              objectId = _context8.sent;
-              id = attrs.id, collection = attrs.collection;
-              source = {
-                id: id,
-                collection: collection,
-                authProvider: function authProvider() {
-                  return Promise.resolve(auth);
-                }
-              };
-              currentCollectionName = mediaProvider.uploadParams.collection;
-              destination = {
-                collection: currentCollectionName,
-                authProvider: uploadMediaClientConfig.authProvider,
-                occurrenceKey: uuidV4()
-              };
-              _context8.next = 23;
-              return mediaClient.file.copyFile(source, destination);
-
-            case 23:
-              mediaFile = _context8.sent;
-              updateMediaNodeAttrs(source.id, {
-                id: mediaFile.id,
-                collection: currentCollectionName,
-                __contextId: objectId
-              }, isMediaSingle)(view.state, view.dispatch);
+              case 16:
+                objectId = _context8.sent;
+                id = attrs.id, collection = attrs.collection;
+                source = {
+                  id: id,
+                  collection: collection,
+                  authProvider: function authProvider() {
+                    return Promise.resolve(auth);
+                  }
+                };
+                currentCollectionName = mediaProvider.uploadParams.collection;
+                destination = {
+                  collection: currentCollectionName,
+                  authProvider: uploadMediaClientConfig.authProvider,
+                  occurrenceKey: uuidV4()
+                };
+                _context8.next = 23;
+                return mediaClient.file.copyFile(source, destination, undefined, traceContext);
 
-            case 25:
-            case "end":
-              return _context8.stop();
+              case 23:
+                mediaFile = _context8.sent;
+                updateMediaNodeAttrs(source.id, {
+                  id: mediaFile.id,
+                  collection: currentCollectionName,
+                  __contextId: objectId
+                }, isMediaSingle)(view.state, view.dispatch);
+
+              case 25:
+              case "end":
+                return _context8.stop();
+            }
           }
-        }
-      }, _callee8);
-    })));
+        }, _callee8);
+      }));
+
+      return function (_x3) {
+        return _ref8.apply(this, arguments);
+      };
+    }());
 
     this.props = props;
   }
@@ -717,7 +723,7 @@ export var MediaNodeUpdater = /*#__PURE__*/function () {
         }, _callee10, this, [[1, 6]]);
       }));
 
-      function handleExternalMedia(_x3) {
+      function handleExternalMedia(_x4) {
         return _handleExternalMedia.apply(this, arguments);
       }
 

package/dist/esm/plugins/media/nodeviews/mediaSingle.js

@@ -185,7 +185,9 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
                 });
 
                 _context2.prev = 24;
-                copyNode = mediaNodeUpdater.copyNode();
+                copyNode = mediaNodeUpdater.copyNode({
+                  traceId: node.attrs.__mediaTraceId
+                });
                 addPendingTask(copyNode);
                 _context2.next = 29;
                 return copyNode;

package/dist/esm/plugins/media/pm-plugins/alt-text/ui/AltTextEdit.js

@@ -31,16 +31,15 @@ import { ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, fireAnalyticsEvent, ACTI
 import { RECENT_SEARCH_WIDTH_IN_PX } from '../../../../../ui/LinkSearch/ToolbarComponents';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { ErrorMessage } from '@atlaskit/editor-common/ui';
-import { token } from '@atlaskit/tokens';
 export var CONTAINER_WIDTH_IN_PX = RECENT_SEARCH_WIDTH_IN_PX;
 export var MAX_ALT_TEXT_LENGTH = 510; // double tweet length
 
-var supportText = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: ", ";\n  padding: 12px 40px;\n  line-height: 20px;\n  border-top: 1px solid ", ";\n  margin: 0;\n"])), token('color.text.subtlest', N100), relativeFontSizeToBase16(12), token('color.border', N30));
+var supportText = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: ", ";\n  padding: 12px 40px;\n  line-height: 20px;\n  border-top: 1px solid ", ";\n  margin: 0;\n"])), "var(--ds-text-subtlest, ".concat(N100, ")"), relativeFontSizeToBase16(12), "var(--ds-border, ".concat(N30, ")"));
 var container = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: ", "px;\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n  line-height: 2;\n"])), CONTAINER_WIDTH_IN_PX);
 var inputWrapper = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  line-height: 0;\n  padding: 5px 0;\n  align-items: center;\n"])));
-var validationWrapper = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  line-height: 0;\n  padding: 12px 24px 12px 0;\n  margin: 0 12px 0 40px;\n  border-top: 1px solid ", ";\n  align-items: start;\n  flex-direction: column;\n"])), token('color.border.danger', R400));
+var validationWrapper = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  line-height: 0;\n  padding: 12px 24px 12px 0;\n  margin: 0 12px 0 40px;\n  border-top: 1px solid ", ";\n  align-items: start;\n  flex-direction: column;\n"])), "var(--ds-border-danger, ".concat(R400, ")"));
 var buttonWrapper = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  padding: 4px 8px;\n"])));
-var clearText = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), token('color.icon.subtle', N80));
+var clearText = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), "var(--ds-icon-subtle, ".concat(N80, ")"));
 export var AltTextEditComponent = /*#__PURE__*/function (_React$Component) {
   _inherits(AltTextEditComponent, _React$Component);
 

package/dist/esm/plugins/media/pm-plugins/main.js

@@ -513,6 +513,13 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
       }
     });
 
+    _defineProperty(this, "setMediaGroupNode", function (node, getPos) {
+      _this.mediaGroupNodes[node.attrs.id] = {
+        node: node,
+        getPos: getPos
+      };
+    });
+
     _defineProperty(this, "removeNodeById", function (state) {
       var id = state.id;
       var mediaNodeWithPos = helpers.findMediaNode(_this, id, isImage(state.fileMimeType));

package/dist/esm/plugins/media/styles.js

@@ -7,8 +7,7 @@ import { mediaSingleSharedStyle, richMediaClassName } from '@atlaskit/editor-com
 import { akEditorDeleteBorder, akEditorDeleteBackground, akEditorSelectedBorderBoldSize, akEditorMediaResizeHandlerPaddingWide, akEditorMediaResizeHandlerPadding, akEditorSelectedNodeClassName, akEditorDeleteIconColor } from '@atlaskit/editor-shared-styles';
 import { N60, B200 } from '@atlaskit/theme/colors';
 import { fileCardImageViewSelector, fileCardImageViewSelectedSelector, inlinePlayerClassName, newFileExperienceClassName } from '@atlaskit/media-card';
-import { token } from '@atlaskit/tokens';
-export var mediaStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    ", " & [layout='full-width'] .", ",\n    & [layout='wide'] .", " {\n      margin-left: 50%;\n      transform: translateX(-50%);\n    }\n\n    & [layout^='wrap-'] + [layout^='wrap-'] {\n      clear: none;\n      & + p,\n      & + div[class^='fabric-editor-align'],\n      & + ul,\n      & + ol,\n      & + h1,\n      & + h2,\n      & + h3,\n      & + h4,\n      & + h5,\n      & + h6 {\n        clear: both !important;\n      }\n      & .", " {\n        margin-left: 0;\n        margin-right: 0;\n      }\n    }\n\n    .mediaSingleView-content-wrap[layout^='wrap-'] {\n      max-width: 100%;\n      // overwrite default Prosemirror setting making it clear: both\n      clear: inherit;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-left'] {\n      float: left;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-right'] {\n      float: right;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-right']\n      + .mediaSingleView-content-wrap[layout='wrap-left'] {\n      clear: both;\n    }\n\n    /* Larger margins for resize handlers when at depth 0 of the document */\n    & > .mediaSingleView-content-wrap {\n      .richMedia-resize-handle-right {\n        margin-right: -", "px;\n      }\n      .richMedia-resize-handle-left {\n        margin-left: -", "px;\n      }\n    }\n  }\n\n  .richMedia-resize-handle-right,\n  .richMedia-resize-handle-left {\n    display: flex;\n    flex-direction: column;\n\n    /* vertical align */\n    justify-content: center;\n  }\n\n  .richMedia-resize-handle-right {\n    align-items: flex-end;\n    padding-right: 12px;\n    margin-right: -", "px;\n  }\n\n  .richMedia-resize-handle-left {\n    align-items: flex-start;\n    padding-left: 12px;\n    margin-left: -", "px;\n  }\n\n  .richMedia-resize-handle-right::after,\n  .richMedia-resize-handle-left::after {\n    content: ' ';\n    display: flex;\n    width: 3px;\n    height: 64px;\n\n    border-radius: 6px;\n  }\n\n  .", ":hover .richMedia-resize-handle-left::after,\n  .", ":hover .richMedia-resize-handle-right::after {\n    background: ", ";\n  }\n\n  .", " .richMedia-resize-handle-right::after,\n  .", " .richMedia-resize-handle-left::after,\n  .", " .richMedia-resize-handle-right:hover::after,\n  .", " .richMedia-resize-handle-left:hover::after,\n  .", ".is-resizing .richMedia-resize-handle-right::after,\n  .", ".is-resizing .richMedia-resize-handle-left::after {\n    background: ", ";\n  }\n\n  .__resizable_base__ {\n    left: unset !important;\n    width: auto !important;\n    height: auto !important;\n  }\n\n  /* Danger when top level node for smart cards / inline links */\n  .danger > div > div > .media-card-frame,\n  .danger > span > a {\n    background-color: ", ";\n    box-shadow: 0px 0px 0px ", "px\n      ", ";\n    transition: background-color 0s, box-shadow 0s;\n  }\n  .mediaGroupView-content-wrap.danger {\n    /* Media inline */\n    .", "::after {\n      border: 1px solid ", ";\n    }\n  }\n  /* Danger when nested node or common */\n  .danger {\n    /* Media single */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n    /* Media single video player */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n    /* New file experience */\n    .", " .", " {\n      box-shadow: 0 0 0 1px\n        ", " !important;\n    }\n    /* Media resize handlers */\n    .richMedia-resize-handle-right::after,\n    .richMedia-resize-handle-left::after {\n      background: ", ";\n    }\n\n    /* Smart cards */\n    div div .media-card-frame,\n    .inlineCardView-content-wrap > span > a {\n      background-color: ", "; /* R75 with 50% opactiy */\n      transition: background-color 0s;\n    }\n\n    div div .media-card-frame::after {\n      box-shadow: none;\n    }\n  }\n"])), mediaSingleSharedStyle, richMediaClassName, richMediaClassName, richMediaClassName, akEditorMediaResizeHandlerPaddingWide, akEditorMediaResizeHandlerPaddingWide, akEditorMediaResizeHandlerPadding, akEditorMediaResizeHandlerPadding, richMediaClassName, richMediaClassName, token('color.border', N60), akEditorSelectedNodeClassName, akEditorSelectedNodeClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, token('color.border.focused', B200), token('color.background.danger', akEditorDeleteBackground), akEditorSelectedBorderBoldSize, token('color.border.danger', akEditorDeleteBorder), fileCardImageViewSelectedSelector, token('color.border.danger', akEditorDeleteIconColor), richMediaClassName, fileCardImageViewSelector, token('color.border.danger', akEditorDeleteIconColor), richMediaClassName, inlinePlayerClassName, token('color.border.danger', akEditorDeleteIconColor), richMediaClassName, newFileExperienceClassName, token('color.border.danger', akEditorDeleteIconColor), token('color.icon.danger', akEditorDeleteIconColor), token('color.blanket.danger', 'rgb(255, 189, 173, 0.5)'));
+export var mediaStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    ", " & [layout='full-width'] .", ",\n    & [layout='wide'] .", " {\n      margin-left: 50%;\n      transform: translateX(-50%);\n    }\n\n    & [layout^='wrap-'] + [layout^='wrap-'] {\n      clear: none;\n      & + p,\n      & + div[class^='fabric-editor-align'],\n      & + ul,\n      & + ol,\n      & + h1,\n      & + h2,\n      & + h3,\n      & + h4,\n      & + h5,\n      & + h6 {\n        clear: both !important;\n      }\n      & .", " {\n        margin-left: 0;\n        margin-right: 0;\n      }\n    }\n\n    .mediaSingleView-content-wrap[layout^='wrap-'] {\n      max-width: 100%;\n      // overwrite default Prosemirror setting making it clear: both\n      clear: inherit;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-left'] {\n      float: left;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-right'] {\n      float: right;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-right']\n      + .mediaSingleView-content-wrap[layout='wrap-left'] {\n      clear: both;\n    }\n\n    /* Larger margins for resize handlers when at depth 0 of the document */\n    & > .mediaSingleView-content-wrap {\n      .richMedia-resize-handle-right {\n        margin-right: -", "px;\n      }\n      .richMedia-resize-handle-left {\n        margin-left: -", "px;\n      }\n    }\n  }\n\n  .richMedia-resize-handle-right,\n  .richMedia-resize-handle-left {\n    display: flex;\n    flex-direction: column;\n\n    /* vertical align */\n    justify-content: center;\n  }\n\n  .richMedia-resize-handle-right {\n    align-items: flex-end;\n    padding-right: 12px;\n    margin-right: -", "px;\n  }\n\n  .richMedia-resize-handle-left {\n    align-items: flex-start;\n    padding-left: 12px;\n    margin-left: -", "px;\n  }\n\n  .richMedia-resize-handle-right::after,\n  .richMedia-resize-handle-left::after {\n    content: ' ';\n    display: flex;\n    width: 3px;\n    height: 64px;\n\n    border-radius: 6px;\n  }\n\n  .", ":hover .richMedia-resize-handle-left::after,\n  .", ":hover .richMedia-resize-handle-right::after {\n    background: ", ";\n  }\n\n  .", " .richMedia-resize-handle-right::after,\n  .", " .richMedia-resize-handle-left::after,\n  .", " .richMedia-resize-handle-right:hover::after,\n  .", " .richMedia-resize-handle-left:hover::after,\n  .", ".is-resizing .richMedia-resize-handle-right::after,\n  .", ".is-resizing .richMedia-resize-handle-left::after {\n    background: ", ";\n  }\n\n  .__resizable_base__ {\n    left: unset !important;\n    width: auto !important;\n    height: auto !important;\n  }\n\n  /* Danger when top level node for smart cards / inline links */\n  .danger > div > div > .media-card-frame,\n  .danger > span > a {\n    background-color: ", ";\n    box-shadow: 0px 0px 0px ", "px\n      ", ";\n    transition: background-color 0s, box-shadow 0s;\n  }\n  .mediaGroupView-content-wrap.danger {\n    /* Media inline */\n    .", "::after {\n      border: 1px solid ", ";\n    }\n  }\n  /* Danger when nested node or common */\n  .danger {\n    /* Media single */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n    /* Media single video player */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n    /* New file experience */\n    .", " .", " {\n      box-shadow: 0 0 0 1px\n        ", " !important;\n    }\n    /* Media resize handlers */\n    .richMedia-resize-handle-right::after,\n    .richMedia-resize-handle-left::after {\n      background: ", ";\n    }\n\n    /* Smart cards */\n    div div .media-card-frame,\n    .inlineCardView-content-wrap > span > a {\n      background-color: ", "; /* R75 with 50% opactiy */\n      transition: background-color 0s;\n    }\n\n    div div .media-card-frame::after {\n      box-shadow: none;\n    }\n  }\n"])), mediaSingleSharedStyle, richMediaClassName, richMediaClassName, richMediaClassName, akEditorMediaResizeHandlerPaddingWide, akEditorMediaResizeHandlerPaddingWide, akEditorMediaResizeHandlerPadding, akEditorMediaResizeHandlerPadding, richMediaClassName, richMediaClassName, "var(--ds-border, ".concat(N60, ")"), akEditorSelectedNodeClassName, akEditorSelectedNodeClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, "var(--ds-border-focused, ".concat(B200, ")"), "var(--ds-background-danger, ".concat(akEditorDeleteBackground, ")"), akEditorSelectedBorderBoldSize, "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), fileCardImageViewSelectedSelector, "var(--ds-border-danger, ".concat(akEditorDeleteIconColor, ")"), richMediaClassName, fileCardImageViewSelector, "var(--ds-border-danger, ".concat(akEditorDeleteIconColor, ")"), richMediaClassName, inlinePlayerClassName, "var(--ds-border-danger, ".concat(akEditorDeleteIconColor, ")"), richMediaClassName, newFileExperienceClassName, "var(--ds-border-danger, ".concat(akEditorDeleteIconColor, ")"), "var(--ds-icon-danger, ".concat(akEditorDeleteIconColor, ")"), "var(--ds-blanket-danger, rgb(255, 189, 173, 0.5))");
 /* `left: unset` above is to work around Chrome bug where rendering a div with
  * that style applied inside a container that has a scroll, causes any svgs on
  * the page, without a border, that are inside a flexbox, to no longer align to

package/dist/esm/plugins/media/toolbar/index.js

@@ -108,6 +108,7 @@ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar
     id: 'editor.media.delete',
     type: 'button',
     appearance: 'danger',
+    focusEditoronEnter: true,
     icon: RemoveIcon,
     onMouseEnter: hoverDecoration(mediaGroup, true),
     onMouseLeave: hoverDecoration(mediaGroup, false),
@@ -181,6 +182,7 @@ var generateMediaInlineFloatingToolbar = function generateMediaInlineFloatingToo
     id: 'editor.media.delete',
     type: 'button',
     appearance: 'danger',
+    focusEditoronEnter: true,
     icon: RemoveIcon,
     onMouseEnter: hoverDecoration(mediaInline, true),
     onMouseLeave: hoverDecoration(mediaInline, false),
@@ -266,6 +268,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
     id: 'editor.media.delete',
     type: 'button',
     appearance: 'danger',
+    focusEditoronEnter: true,
     icon: RemoveIcon,
     onMouseEnter: hoverDecoration(mediaSingle, true),
     onMouseLeave: hoverDecoration(mediaSingle, false),

package/dist/esm/plugins/media/ui/CaptionPlaceholder/index.js

@@ -7,9 +7,8 @@ import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import { N200 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import { messages } from './messages';
-var placeholder = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  width: 100%;\n  text-align: center;\n  margin-top: 8px !important;\n  display: block;\n"])), token('color.text.subtlest', N200));
+var placeholder = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  width: 100%;\n  text-align: center;\n  margin-top: 8px !important;\n  display: block;\n"])), "var(--ds-text-subtlest, ".concat(N200, ")"));
 export var CAPTION_PLACEHOLDER_ID = 'caption-placeholder';
 export default /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var onClick = _ref.onClick;

package/dist/esm/plugins/media/ui/Media/DropPlaceholder.js

@@ -10,10 +10,9 @@ import DocumentFilledIcon from '@atlaskit/icon/glyph/document-filled';
 import { hexToRgba } from '@atlaskit/adf-schema';
 import { injectIntl } from 'react-intl-next';
 import { dropPlaceholderMessages } from './drop-placeholder-messages';
-import { token } from '@atlaskit/tokens';
 import { MEDIA_HEIGHT, FILE_WIDTH } from '../../nodeviews/mediaNodeView/media';
-var iconWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  background: ", ";\n  border-radius: ", "px;\n  margin: 5px 3px 25px;\n  width: ", "px;\n  min-height: ", "px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), token('color.icon.accent.blue', hexToRgba(B400, 0.4) || B400), token('color.background.accent.blue.subtle', hexToRgba(B300, 0.6) || B300), borderRadius(), FILE_WIDTH, MEDIA_HEIGHT);
-var dropLine = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background: ", ";\n  border-radius: ", "px;\n  margin: 2px 0;\n  width: 100%;\n  height: 2px;\n"])), token('color.border.focused', B200), borderRadius());
+var iconWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  background: ", ";\n  border-radius: ", "px;\n  margin: 5px 3px 25px;\n  width: ", "px;\n  min-height: ", "px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), "var(--ds-icon-accent-blue, ".concat(hexToRgba(B400, 0.4) || B400, ")"), "var(--ds-background-accent-blue-subtle, ".concat(hexToRgba(B300, 0.6) || B300, ")"), borderRadius(), FILE_WIDTH, MEDIA_HEIGHT);
+var dropLine = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background: ", ";\n  border-radius: ", "px;\n  margin: 2px 0;\n  width: 100%;\n  height: 2px;\n"])), "var(--ds-border-focused, ".concat(B200, ")"), borderRadius());
 
 var IconWrapperComponent = function IconWrapperComponent(props) {
   var intl = props.intl;

package/dist/esm/plugins/media/ui/MediaLinkingToolbar.js

@@ -30,8 +30,7 @@ import { normalizeUrl } from '../../hyperlink/utils';
 import { R400 } from '@atlaskit/theme/colors';
 import { INPUT_METHOD } from '../../analytics/types/enums';
 import { mediaLinkToolbarMessages } from './media-linking-toolbar-messages';
-import { token } from '@atlaskit/tokens';
-var validationWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  line-height: 0;\n  padding: 12px 24px 12px 0;\n  margin: 0 4px 0 32px;\n  border-top: 1px solid ", ";\n  align-items: start;\n  display: flex;\n  flex-direction: column;\n"])), token('color.border.danger', R400));
+var validationWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  line-height: 0;\n  padding: 12px 24px 12px 0;\n  margin: 0 4px 0 32px;\n  border-top: 1px solid ", ";\n  align-items: start;\n  display: flex;\n  flex-direction: column;\n"])), "var(--ds-border-danger, ".concat(R400, ")"));
 var buttonWrapper = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: 4px 8px 4px 0px;\n"])));
 export var LinkAddToolbar = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(LinkAddToolbar, _React$PureComponent);

package/dist/esm/plugins/media/utils/media-single.js

@@ -16,6 +16,7 @@ import { safeInsert, shouldSplitSelectedNodeOnNodeInsertion } from '../../../uti
 import { getFeatureFlags } from '../../feature-flags-context';
 import { isImage } from './is-image';
 import { atTheBeginningOfBlock } from '../../../utils/prosemirror/position';
+import { getRandomHex } from '@atlaskit/media-common';
 
 var getInsertMediaAnalytics = function getInsertMediaAnalytics(inputMethod, fileExtension) {
   return {
@@ -186,6 +187,7 @@ export function transformSliceForMedia(slice, schema) {
       bulletList = _schema$nodes2.bulletList,
       orderedList = _schema$nodes2.orderedList,
       media = _schema$nodes2.media,
+      mediaInline = _schema$nodes2.mediaInline,
       expand = _schema$nodes2.expand;
   return function (selection) {
     var newSlice = slice;
@@ -199,10 +201,23 @@ export function transformSliceForMedia(slice, schema) {
       });
     }
 
+    var __mediaTraceId = getRandomHex(8);
+
     newSlice = mapSlice(newSlice, function (node) {
-      return node.type.name === 'media' && node.attrs.type === 'external' ? media.createChecked(_objectSpread(_objectSpread({}, node.attrs), {}, {
-        __external: true
-      }), node.content, node.marks) : node;
+      if (node.type.name === 'media') {
+        return media.createChecked(_objectSpread(_objectSpread({}, node.attrs), {}, {
+          __external: node.attrs.type === 'external',
+          __mediaTraceId: node.attrs.type === 'external' ? null : __mediaTraceId
+        }), node.content, node.marks);
+      }
+
+      if (node.type.name === 'mediaInline') {
+        return mediaInline.createChecked(_objectSpread(_objectSpread({}, node.attrs), {}, {
+          __mediaTraceId: __mediaTraceId
+        }), node.content, node.marks);
+      }
+
+      return node;
     });
     return newSlice;
   };

package/dist/esm/plugins/mentions/styles.js

@@ -6,5 +6,4 @@ import { css } from '@emotion/react';
 import { MentionSharedCssClassName } from '@atlaskit/editor-common/mention';
 import { SelectionStyle, getSelectionStyles, akEditorSelectedBorderSize, akEditorDeleteBorder, akEditorDeleteBackgroundWithOpacity, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
 import { N500, N30A } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
-export var mentionsStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    &.", " [data-mention-id] > span {\n      ", "\n\n      /* need to specify dark text colour because personal mentions\n         (in dark blue) have white text by default */\n      color: ", ";\n    }\n  }\n\n  .danger {\n    .", ".", "\n      > span\n      > span\n      > span {\n      box-shadow: 0 0 0 ", "px ", ";\n      background-color: ", ";\n    }\n    .", " > span > span > span {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"])), MentionSharedCssClassName.MENTION_CONTAINER, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Background]), token('color.text.subtle', N500), MentionSharedCssClassName.MENTION_CONTAINER, akEditorSelectedNodeClassName, akEditorSelectedBorderSize, akEditorDeleteBorder, token('color.background.danger', akEditorDeleteBackgroundWithOpacity), MentionSharedCssClassName.MENTION_CONTAINER, token('color.background.neutral', N30A), token('color.text.subtle', N500));
+export var mentionsStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    &.", " [data-mention-id] > span {\n      ", "\n\n      /* need to specify dark text colour because personal mentions\n         (in dark blue) have white text by default */\n      color: ", ";\n    }\n  }\n\n  .danger {\n    .", ".", "\n      > span\n      > span\n      > span {\n      box-shadow: 0 0 0 ", "px ", ";\n      background-color: ", ";\n    }\n    .", " > span > span > span {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"])), MentionSharedCssClassName.MENTION_CONTAINER, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Background]), "var(--ds-text-subtle, ".concat(N500, ")"), MentionSharedCssClassName.MENTION_CONTAINER, akEditorSelectedNodeClassName, akEditorSelectedBorderSize, akEditorDeleteBorder, "var(--ds-background-danger, ".concat(akEditorDeleteBackgroundWithOpacity, ")"), MentionSharedCssClassName.MENTION_CONTAINER, "var(--ds-background-neutral, ".concat(N30A, ")"), "var(--ds-text-subtle, ".concat(N500, ")"));

package/dist/esm/plugins/mentions/ui/InviteItem/index.js

@@ -4,7 +4,6 @@ import _extends from "@babel/runtime/helpers/extends";
 import { jsx } from '@emotion/react';
 import AddIcon from '@atlaskit/icon/glyph/add';
 import { N300 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import React, { useCallback, useEffect } from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl-next';
 import { avatarStyle, capitalizedStyle, mentionItemStyle, nameSectionStyle, rowStyle, ROW_SIDE_PADDING, AVATAR_HEIGHT, mentionItemSelectedStyle } from './styles';
@@ -53,7 +52,7 @@ var InviteItem = function InviteItem(_ref) {
     css: avatarStyle
   }, jsx(AddIcon, {
     label: intl.formatMessage(messages.mentionsAddLabel),
-    primaryColor: token('color.icon.subtle', N300)
+    primaryColor: "var(--ds-icon-subtle, ".concat(N300, ")")
   })), jsx("div", {
     css: nameSectionStyle,
     "data-testid": "name-section"

package/dist/esm/plugins/mentions/ui/InviteItem/styles.js

@@ -4,12 +4,11 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 
 import { css } from '@emotion/react';
 import { N30, N300 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 export var ROW_SIDE_PADDING = 14;
 export var rowStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  overflow: hidden;\n  padding: 6px ", "px;\n  text-overflow: ellipsis;\n  vertical-align: middle;\n"])), ROW_SIDE_PADDING);
 export var AVATAR_HEIGHT = 36;
 export var avatarStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n  flex: initial;\n  opacity: inherit;\n  width: 36px;\n  height: ", "px;\n\n  > span {\n    width: 24px;\n    height: 24px;\n    padding: 6px;\n  }\n"])), AVATAR_HEIGHT);
-export var nameSectionStyle = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  flex: 1;\n  min-width: 0;\n  margin-left: 14px;\n  color: ", ";\n  opacity: inherit;\n"])), token('color.text.subtle', N300));
+export var nameSectionStyle = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  flex: 1;\n  min-width: 0;\n  margin-left: 14px;\n  color: ", ";\n  opacity: inherit;\n"])), "var(--ds-text-subtle, ".concat(N300, ")"));
 export var mentionItemStyle = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  background-color: transparent;\n  display: block;\n  overflow: hidden;\n  list-style-type: none;\n  cursor: pointer;\n"])));
-export var mentionItemSelectedStyle = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  background-color: ", ";\n"])), token('color.background.neutral.subtle.hovered', N30));
+export var mentionItemSelectedStyle = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  background-color: ", ";\n"])), "var(--ds-background-neutral-subtle-hovered, ".concat(N30, ")"));
 export var capitalizedStyle = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  text-transform: capitalize;\n"])));

package/dist/esm/plugins/panel/styles.js

@@ -5,7 +5,6 @@ var _templateObject;
 import { css } from '@emotion/react';
 import { panelSharedStyles, PanelSharedCssClassName } from '@atlaskit/editor-common/panel';
 import { SelectionStyle, getSelectionStyles, akEditorDeleteBackground, akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorDeleteIconColor, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
-import { token } from '@atlaskit/tokens';
 export var panelStyles = function panelStyles(props) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    .", " {\n      cursor: pointer;\n\n      /* Danger when top level node */\n      &.danger {\n        box-shadow: 0 0 0 ", "px\n          ", ";\n        background-color: ", " !important;\n\n        .", " {\n          color: ", " !important;\n        }\n      }\n    }\n\n    .", " {\n      cursor: text;\n    }\n\n    /* Danger when nested node */\n    .danger .", " {\n      &[data-panel-type] {\n        background-color: ", ";\n\n        .", " {\n          color: ", ";\n        }\n      }\n    }\n\n    ", ";\n  }\n\n  .", ".", ":not(.danger) {\n    ", "\n  }\n"])), PanelSharedCssClassName.prefix, akEditorSelectedBorderSize, akEditorDeleteBorder, token('color.background.danger', akEditorDeleteBackground), PanelSharedCssClassName.icon, token('color.icon.danger', akEditorDeleteIconColor), PanelSharedCssClassName.content, PanelSharedCssClassName.prefix, token('color.blanket.danger', akEditorDeleteBackgroundWithOpacity), PanelSharedCssClassName.icon, token('color.icon.danger', akEditorDeleteIconColor), panelSharedStyles(props), PanelSharedCssClassName.prefix, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Blanket]));
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    .", " {\n      cursor: pointer;\n\n      /* Danger when top level node */\n      &.danger {\n        box-shadow: 0 0 0 ", "px\n          ", ";\n        background-color: ", " !important;\n\n        .", " {\n          color: ", " !important;\n        }\n      }\n    }\n\n    .", " {\n      cursor: text;\n    }\n\n    /* Danger when nested node */\n    .danger .", " {\n      &[data-panel-type] {\n        background-color: ", ";\n\n        .", " {\n          color: ", ";\n        }\n      }\n    }\n\n    ", ";\n  }\n\n  .", ".", ":not(.danger) {\n    ", "\n  }\n"])), PanelSharedCssClassName.prefix, akEditorSelectedBorderSize, akEditorDeleteBorder, "var(--ds-background-danger, ".concat(akEditorDeleteBackground, ")"), PanelSharedCssClassName.icon, "var(--ds-icon-danger, ".concat(akEditorDeleteIconColor, ")"), PanelSharedCssClassName.content, PanelSharedCssClassName.prefix, "var(--ds-blanket-danger, ".concat(akEditorDeleteBackgroundWithOpacity, ")"), PanelSharedCssClassName.icon, "var(--ds-icon-danger, ".concat(akEditorDeleteIconColor, ")"), panelSharedStyles(props), PanelSharedCssClassName.prefix, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Blanket]));
 };

package/dist/esm/plugins/panel/toolbar.js

@@ -261,6 +261,7 @@ export var getToolbarItems = function getToolbarItems(formatMessage, panelNodeTy
     id: 'editor.panel.delete',
     type: 'button',
     appearance: 'danger',
+    focusEditoronEnter: true,
     icon: RemoveIcon,
     onClick: removePanel(),
     onMouseEnter: hoverDecoration(panelNodeType, true),

package/dist/esm/plugins/panel/utils.js

@@ -19,7 +19,7 @@ export var panelAttrsToDom = function panelAttrsToDom(attrs, allowCustomPanel) {
       panelIconText = attrs.panelIconText;
   var isCustomPanel = panelType === PanelType.CUSTOM && allowCustomPanel;
   var hasIcon = !isCustomPanel || !!panelIcon || !!panelIconId;
-  var style = ["".concat(panelColor && isCustomPanel ? "background-color: ".concat(panelColor, ";") : ''), "".concat(hasIcon ? '' : 'padding: 12px;')].join('');
+  var style = ["".concat(panelColor && isCustomPanel ? "background-color: ".concat(panelColor, ";") : ''), "".concat(hasIcon ? '' : 'padding-left: 12px;')].join('');
   var panelAttrs = {
     class: PanelSharedCssClassName.prefix,
     'data-panel-type': panelType || PanelType.INFO,

package/dist/esm/plugins/paste/index.js

@@ -2,7 +2,8 @@ import { createPlugin } from './pm-plugins/main';
 
 var pastePlugin = function pastePlugin(_ref) {
   var cardOptions = _ref.cardOptions,
-      sanitizePrivateContent = _ref.sanitizePrivateContent;
+      sanitizePrivateContent = _ref.sanitizePrivateContent,
+      plainTextPasteLinkification = _ref.plainTextPasteLinkification;
   return {
     name: 'paste',
     pmPlugins: function pmPlugins() {

package/dist/esm/plugins/paste/pm-plugins/analytics.js

@@ -94,6 +94,17 @@ export function getContent(state, slice) {
   var pasteContent = contentToPasteContent[type];
   return pasteContent ? pasteContent : PasteContents.uncategorized;
 }
+export function getMediaTraceId(slice) {
+  var traceId;
+  mapSlice(slice, function (node) {
+    if (node.type.name === 'media' || node.type.name === 'mediaInline') {
+      traceId = node.attrs.__mediaTraceId;
+    }
+
+    return node;
+  });
+  return traceId;
+}
 
 function getActionSubjectId(view) {
   var _view$state = view.state,
@@ -155,7 +166,8 @@ export function createPasteAnalyticsPayload(view, event, slice, pasteContext) {
   var actionSubjectId = getActionSubjectId(view);
   var pasteSize = slice.size;
   var content = getContent(view.state, slice);
-  var linkUrls = []; // If we have a link among the pasted content, grab the
+  var linkUrls = [];
+  var mediaTraceId = getMediaTraceId(slice); // If we have a link among the pasted content, grab the
   // domain and send it up with the analytics event
 
   if (content === PasteContents.url || content === PasteContents.mixed) {
@@ -196,7 +208,8 @@ export function createPasteAnalyticsPayload(view, event, slice, pasteContext) {
     content: content,
     source: source,
     hyperlinkPasteOnText: !!pasteContext.hyperlinkPasteOnText,
-    linksInPasteCount: linkUrls.length
+    linksInPasteCount: linkUrls.length,
+    mediaTraceId: mediaTraceId
   }, linkDomains);
 } // TODO: ED-6612 We should not dispatch only analytics, it's preferred to wrap each command with his own analytics.
 // However, handlers like handleMacroAutoConvert dispatch multiple time,

package/dist/esm/plugins/paste/pm-plugins/main.js

@@ -264,7 +264,7 @@ export function createPlugin(schema, dispatchAnalyticsEvent, dispatch, cardOptio
           }
         }
 
-        slice = transformUnsupportedBlockCardToInline(slice, state); // Handles edge case so that when copying text from the top level of the document
+        slice = transformUnsupportedBlockCardToInline(slice, state, cardOptions); // Handles edge case so that when copying text from the top level of the document
         // it can be pasted into nodes like panels/actions/decisions without removing them.
         // Overriding openStart to be 1 when only pasting a paragraph makes the preferred
         // depth favour the text, rather than the paragraph node.

package/dist/esm/plugins/paste/util/index.js

@@ -104,8 +104,8 @@ export function isCode(str) {
 // @see https://github.com/markdown-it/markdown-it/issues/38
 
 export function escapeLinks(text) {
-  return text.replace(/(\[([^\]]+)\]\()?((https?|ftp):\/\/[^\s]+)/g, function (str) {
-    return str.match(/^(https?|ftp):\/\/[^\s]+$/) ? "<".concat(str, ">") : str;
+  return text.replace(/(\[([^\]]+)\]\()?((https?|ftp|jamfselfservice):\/\/[^\s]+)/g, function (str) {
+    return str.match(/^(https?|ftp|jamfselfservice):\/\/[^\s]+$/) ? "<".concat(str, ">") : str;
   });
 }
 export function hasOnlyNodesOfType() {