@atlaskit/editor-core 166.0.2 → 167.0.0

package/dist/cjs/plugins/layout/styles.js

@@ -31,5 +31,5 @@ var LAYOUT_SECTION_MARGIN = (0, _constants.gridSize)();
 exports.LAYOUT_SECTION_MARGIN = LAYOUT_SECTION_MARGIN;
 var LAYOUT_COLUMN_PADDING = (0, _constants.gridSize)() * 1.5;
 exports.LAYOUT_COLUMN_PADDING = LAYOUT_COLUMN_PADDING;
-var layoutStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    ", " [data-layout-section] {\n      margin: ", "px -", "px 0;\n      transition: border-color 0.3s ", ";\n      cursor: pointer;\n\n      /* Inner cursor located 26px from left */\n      [data-layout-column] {\n        flex: 1;\n        min-width: 0;\n        border: ", "px solid ", ";\n        border-radius: 4px;\n        padding: ", "px;\n        box-sizing: border-box;\n\n        > div {\n          > *:first-child {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor.-right:first-child + * {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-child + span + * {\n            margin-top: 0;\n          }\n\n          .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .mediaSingleView-content-wrap:first-child .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor.-right:first-child\n            + .mediaSingleView-content-wrap\n            .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-child\n            + span\n            + .mediaSingleView-content-wrap\n            .rich-media-item {\n            margin-top: 0;\n          }\n\n          /* Prevent first DecisionWrapper's margin-top: 8px from shifting decisions down\n             and shrinking layout's node selectable area (leniency margin) */\n          > [data-node-type='decisionList'] {\n            li:first-of-type [data-decision-wrapper] {\n              margin-top: 0;\n            }\n          }\n        }\n\n        /* Make the 'content' fill the entire height of the layout column to allow click\n           handler of layout section nodeview to target only data-layout-column */\n        [data-layout-content] {\n          height: 100%;\n          cursor: text;\n        }\n      }\n\n      [data-layout-column] + [data-layout-column] {\n        margin-left: ", "px;\n      }\n\n      @media screen and (max-width: ", "px) {\n        [data-layout-column] + [data-layout-column] {\n          margin-left: 0;\n        }\n      }\n\n      /* Shows the border when cursor is inside a layout */\n      &.selected [data-layout-column],\n      &:hover [data-layout-column] {\n        border-color: ", ";\n      }\n\n      &.selected.danger > [data-layout-column] {\n        background-color: ", ";\n        border-color: ", ";\n      }\n\n      &.", ":not(.danger) {\n        [data-layout-column] {\n          ", "\n        }\n      }\n    }\n  }\n\n  .fabric-editor--full-width-mode .ProseMirror {\n    [data-layout-section] {\n      .", " {\n        margin: 0 ", "px;\n      }\n    }\n  }\n"])), _styles.columnLayoutSharedStyle, (0, _constants.gridSize)() - 1, _editorSharedStyles.akLayoutGutterOffset, _editorSharedStyles.akEditorSwoopCubicBezier, _editorSharedStyles.akEditorSelectedBorderSize, _colors.N40A, LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN, _editorSharedStyles.gridMediumMaxWidth, _colors.N50A, (0, _tokens.token)('color.background.danger', _editorSharedStyles.akEditorDeleteBackground), (0, _tokens.token)('color.border.danger', _editorSharedStyles.akEditorDeleteBorder), _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Border, _editorSharedStyles.SelectionStyle.Blanket]), _types.TableCssClassName.TABLE_CONTAINER, _consts.tableMarginFullWidthMode);
+var layoutStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    ", " [data-layout-section] {\n      margin: ", "px -", "px 0;\n      transition: border-color 0.3s ", ";\n      cursor: pointer;\n\n      /* Inner cursor located 26px from left */\n      [data-layout-column] {\n        flex: 1;\n        min-width: 0;\n        // TODO: https://product-fabric.atlassian.net/browse/DSP-4353\n        border: ", "px solid\n          ", ";\n        border-radius: 4px;\n        padding: ", "px;\n        box-sizing: border-box;\n\n        > div {\n          > *:first-child {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor.-right:first-of-type + * {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursord:first-of-type + span + * {\n            margin-top: 0;\n          }\n\n          .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .mediaSingleView-content-wrap:first-of-type .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor.-right:first-of-type\n            + .mediaSingleView-content-wrap\n            .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-of-type\n            + span\n            + .mediaSingleView-content-wrap\n            .rich-media-item {\n            margin-top: 0;\n          }\n\n          /* Prevent first DecisionWrapper's margin-top: 8px from shifting decisions down\n             and shrinking layout's node selectable area (leniency margin) */\n          > [data-node-type='decisionList'] {\n            li:first-of-type [data-decision-wrapper] {\n              margin-top: 0;\n            }\n          }\n        }\n\n        /* Make the 'content' fill the entire height of the layout column to allow click\n           handler of layout section nodeview to target only data-layout-column */\n        [data-layout-content] {\n          height: 100%;\n          cursor: text;\n        }\n      }\n\n      [data-layout-column] + [data-layout-column] {\n        margin-left: ", "px;\n      }\n\n      @media screen and (max-width: ", "px) {\n        [data-layout-column] + [data-layout-column] {\n          margin-left: 0;\n        }\n      }\n\n      // TODO: https://product-fabric.atlassian.net/browse/DSP-4441\n      /* Shows the border when cursor is inside a layout */\n      &.selected [data-layout-column],\n      &:hover [data-layout-column] {\n        border-color: ", ";\n      }\n\n      &.selected.danger > [data-layout-column] {\n        background-color: ", ";\n        border-color: ", ";\n      }\n\n      &.", ":not(.danger) {\n        [data-layout-column] {\n          ", "\n        }\n      }\n    }\n  }\n\n  .fabric-editor--full-width-mode .ProseMirror {\n    [data-layout-section] {\n      .", " {\n        margin: 0 ", "px;\n      }\n    }\n  }\n"])), _styles.columnLayoutSharedStyle, (0, _constants.gridSize)() - 1, _editorSharedStyles.akLayoutGutterOffset, _editorSharedStyles.akEditorSwoopCubicBezier, _editorSharedStyles.akEditorSelectedBorderSize, (0, _tokens.token)('color.border', _colors.N40A), LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN, _editorSharedStyles.gridMediumMaxWidth, (0, _tokens.token)('color.border', _colors.N50A), (0, _tokens.token)('color.background.danger', _editorSharedStyles.akEditorDeleteBackground), (0, _tokens.token)('color.border.danger', _editorSharedStyles.akEditorDeleteBorder), _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Border, _editorSharedStyles.SelectionStyle.Blanket]), _types.TableCssClassName.TABLE_CONTAINER, _consts.tableMarginFullWidthMode);
 exports.layoutStyles = layoutStyles;

package/dist/cjs/plugins/macro/actions.js

@@ -7,10 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.setMacroProvider = exports.runMacroAutoConvert = exports.resolveMacro = exports.insertMacroFromMacroBrowser = void 0;
 
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 
 var _assert = _interopRequireDefault(require("assert"));

package/dist/cjs/plugins/media/commands/helpers.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.updateMediaNodeAttrs = exports.updateAllMediaNodesAttrs = exports.replaceExternalMedia = exports.isMobileUploadCompleted = exports.findMediaSingleNode = exports.findMediaNode = exports.findMediaInlineNode = exports.findAllMediaSingleNodes = void 0;
+exports.updateMediaNodeAttrs = exports.updateAllMediaNodesAttrs = exports.replaceExternalMedia = exports.isMobileUploadCompleted = exports.isMediaNode = exports.findMediaSingleNode = exports.findMediaNode = exports.findMediaInlineNode = exports.findAllMediaSingleNodes = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -86,6 +86,13 @@ var isMobileUploadCompleted = function isMobileUploadCompleted(mediaPluginState,
 
 exports.isMobileUploadCompleted = isMobileUploadCompleted;
 
+var isMediaNode = function isMediaNode(pos, state) {
+  var node = state.doc.nodeAt(pos);
+  return node && ['media', 'mediaInline'].includes(node.type.name);
+};
+
+exports.isMediaNode = isMediaNode;
+
 var updateAllMediaNodesAttrs = function updateAllMediaNodesAttrs(id, attrs, isMediaSingle) {
   return function (state, dispatch) {
     var mediaPluginState = _pluginKey.stateKey.getState(state);
@@ -99,16 +106,11 @@ var updateAllMediaNodesAttrs = function updateAllMediaNodesAttrs(id, attrs, isMe
       mediaNodes = mediaGroupNode ? [mediaGroupNode] : [];
     }
 
-    var isMediaNode = function isMediaNode(pos) {
-      var node = state.doc.nodeAt(pos);
-      return node && node.type.name === 'media';
-    };
-
     var validMediaNodePositions = mediaNodes.reduce(function (acc, _ref) {
       var getPos = _ref.getPos;
       var pos = getPos();
 
-      if (typeof pos === 'number' && !isMediaNode(pos)) {
+      if (typeof pos === 'number' && !isMediaNode(pos, state)) {
         return acc;
       }
 
@@ -148,9 +150,8 @@ var updateMediaNodeAttrs = function updateMediaNodeAttrs(id, attrs, isMediaSingl
 
     var tr = state.tr;
     var pos = mediaNodeWithPos.getPos();
-    var node = tr.doc.nodeAt(pos);
 
-    if (!node || node.type.name !== 'media') {
+    if (!isMediaNode(pos, state)) {
       return false;
     }
 

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

@@ -9,8 +9,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.updateMediaNodeAttributes = exports.handleNewNode = exports.createMediaNodeUpdater = exports.ReactMediaInlineNode = exports.MediaInlineNodeView = exports.MediaInline = void 0;
 
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -25,6 +23,8 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
@@ -45,6 +45,8 @@ var _pluginKey = require("../pm-plugins/plugin-key");
 
 var _mediaNodeUpdater = require("./mediaNodeUpdater");
 
+var _mediaUi = require("@atlaskit/media-ui");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -58,11 +60,12 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var createMediaNodeUpdater = function createMediaNodeUpdater(props) {
-  var node = props.node.firstChild;
+  var node = props.node;
   return new _mediaNodeUpdater.MediaNodeUpdater(_objectSpread(_objectSpread({}, props), {}, {
     isMediaSingle: true,
     node: node ? node : props.node,
-    dispatchAnalyticsEvent: props.dispatchAnalyticsEvent
+    dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
+    contextIdentifierProvider: props.contextIdentifierProvider
   }));
 };
 /**
@@ -132,6 +135,10 @@ var updateMediaNodeAttributes = /*#__PURE__*/function () {
             return _context.abrupt("return");
 
           case 23:
+            _context.next = 25;
+            return mediaNodeUpdater.updateFileAttrs();
+
+          case 25:
           case "end":
             return _context.stop();
         }
@@ -158,7 +165,7 @@ var handleNewNode = function handleNewNode(props) {
 exports.handleNewNode = handleNewNode;
 
 var MediaInline = function MediaInline(props) {
-  var _useState = (0, _react.useState)({}),
+  var _useState = (0, _react.useState)(),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       viewMediaClientConfig = _useState2[0],
       setViewMediaClientConfig = _useState2[1];
@@ -213,6 +220,18 @@ var MediaInline = function MediaInline(props) {
     mediaItemType: 'file',
     collectionName: collection
   };
+  /*
+   * Only show the loading view if the media provider is not ready
+   * prevents calling the media API before the provider is ready
+   */
+
+  if (!viewMediaClientConfig) {
+    return /*#__PURE__*/_react.default.createElement(_mediaUi.MediaInlineCardLoadingView, {
+      message: "",
+      isSelected: false
+    });
+  }
+
   return /*#__PURE__*/_react.default.createElement(_mediaCard.MediaInlineCard, {
     isSelected: props.isSelected,
     identifier: identifier,
@@ -237,13 +256,13 @@ var MediaInlineNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
     value: function createDomRef() {
       var domRef = document.createElement('span');
       domRef.contentEditable = 'false';
-      domRef.classList.add(_styles.MediaInlineNodeSelector);
       return domRef;
     }
   }, {
     key: "getContentDOM",
     value: function getContentDOM() {
       var dom = document.createElement('span');
+      dom.classList.add(_styles.MediaInlineNodeSelector);
       return {
         dom: dom
       };

package/dist/cjs/plugins/media/nodeviews/mediaNodeView/media.js

@@ -119,6 +119,11 @@ var MediaNode = /*#__PURE__*/function (_Component) {
         (0, _utils2.setNodeSelection)(_this.props.view, propPos - 1);
       }
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onFullscreenChange", function (fullscreen) {
+      _this.mediaPluginState.updateAndDispatch({
+        isFullscreen: fullscreen
+      });
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleNewNode", function (props) {
       var node = props.node;
 
@@ -256,6 +261,7 @@ var MediaNode = /*#__PURE__*/function (_Component) {
         selectable: true,
         selected: selected,
         disableOverlay: true,
+        onFullscreenChange: this.onFullscreenChange,
         onClick: this.selectMediaSingleFromCard,
         useInlinePlayer: mediaOptions && mediaOptions.allowLazyLoading,
         isLazy: mediaOptions && mediaOptions.allowLazyLoading,

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

@@ -7,12 +7,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.ReactMediaSingleNode = void 0;
 
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-
 var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

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

@@ -57,6 +57,8 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
 var _ui = require("@atlaskit/editor-common/ui");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -72,12 +74,12 @@ exports.CONTAINER_WIDTH_IN_PX = CONTAINER_WIDTH_IN_PX;
 var MAX_ALT_TEXT_LENGTH = 510; // double tweet length
 
 exports.MAX_ALT_TEXT_LENGTH = MAX_ALT_TEXT_LENGTH;
-var supportText = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: ", ";\n  padding: 12px 40px;\n  line-height: 20px;\n  border-top: 1px solid ", ";\n  margin: 0;\n"])), _colors.N100, (0, _editorSharedStyles.relativeFontSizeToBase16)(12), _colors.N30);
+var supportText = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: ", ";\n  padding: 12px 40px;\n  line-height: 20px;\n  border-top: 1px solid ", ";\n  margin: 0;\n"])), (0, _tokens.token)('color.text.subtlest', _colors.N100), (0, _editorSharedStyles.relativeFontSizeToBase16)(12), (0, _tokens.token)('color.border', _colors.N30));
 var container = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: ", "px;\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n  line-height: 2;\n"])), CONTAINER_WIDTH_IN_PX);
 var inputWrapper = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  line-height: 0;\n  padding: 5px 0;\n  align-items: center;\n"])));
-var validationWrapper = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\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"])), _colors.R400);
+var validationWrapper = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _tokens.token)('color.border.danger', _colors.R400));
 var buttonWrapper = (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  padding: 4px 8px;\n"])));
-var clearText = (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), _colors.N80);
+var clearText = (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), (0, _tokens.token)('color.icon.subtle', _colors.N80));
 
 var AltTextEditComponent = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(AltTextEditComponent, _React$Component);

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

@@ -116,6 +116,7 @@ var MediaPluginStateImplementation = /*#__PURE__*/function () {
     (0, _defineProperty2.default)(this, "waitForMediaUpload", true);
     (0, _defineProperty2.default)(this, "allUploadsFinished", true);
     (0, _defineProperty2.default)(this, "showDropzone", false);
+    (0, _defineProperty2.default)(this, "isFullscreen", false);
     (0, _defineProperty2.default)(this, "layout", 'center');
     (0, _defineProperty2.default)(this, "mediaNodes", []);
     (0, _defineProperty2.default)(this, "mediaGroupNodes", {});

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

@@ -23,7 +23,7 @@ var _tokens = require("@atlaskit/tokens");
 
 var _templateObject;
 
-var mediaStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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: rgb(255, 189, 173, 0.5); /* 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"])), _styles.mediaSingleSharedStyle, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide, _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide, _editorSharedStyles.akEditorMediaResizeHandlerPadding, _editorSharedStyles.akEditorMediaResizeHandlerPadding, _styles.richMediaClassName, _styles.richMediaClassName, _colors.N60, _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedNodeClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _colors.B200, (0, _tokens.token)('color.background.danger', _editorSharedStyles.akEditorDeleteBackground), _editorSharedStyles.akEditorSelectedBorderBoldSize, (0, _tokens.token)('color.border.danger', _editorSharedStyles.akEditorDeleteBorder), _mediaCard.fileCardImageViewSelectedSelector, (0, _tokens.token)('color.border.danger', _editorSharedStyles.akEditorDeleteIconColor), _styles.richMediaClassName, _mediaCard.fileCardImageViewSelector, (0, _tokens.token)('color.border.danger', _editorSharedStyles.akEditorDeleteIconColor), _styles.richMediaClassName, _mediaCard.inlinePlayerClassName, (0, _tokens.token)('color.border.danger', _editorSharedStyles.akEditorDeleteIconColor), _styles.richMediaClassName, _mediaCard.newFileExperienceClassName, (0, _tokens.token)('color.border.danger', _editorSharedStyles.akEditorDeleteIconColor), (0, _tokens.token)('color.icon.danger', _editorSharedStyles.akEditorDeleteIconColor));
+var mediaStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), _styles.mediaSingleSharedStyle, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide, _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide, _editorSharedStyles.akEditorMediaResizeHandlerPadding, _editorSharedStyles.akEditorMediaResizeHandlerPadding, _styles.richMediaClassName, _styles.richMediaClassName, (0, _tokens.token)('color.border', _colors.N60), _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedNodeClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, (0, _tokens.token)('color.border.focused', _colors.B200), (0, _tokens.token)('color.background.danger', _editorSharedStyles.akEditorDeleteBackground), _editorSharedStyles.akEditorSelectedBorderBoldSize, (0, _tokens.token)('color.border.danger', _editorSharedStyles.akEditorDeleteBorder), _mediaCard.fileCardImageViewSelectedSelector, (0, _tokens.token)('color.border.danger', _editorSharedStyles.akEditorDeleteIconColor), _styles.richMediaClassName, _mediaCard.fileCardImageViewSelector, (0, _tokens.token)('color.border.danger', _editorSharedStyles.akEditorDeleteIconColor), _styles.richMediaClassName, _mediaCard.inlinePlayerClassName, (0, _tokens.token)('color.border.danger', _editorSharedStyles.akEditorDeleteIconColor), _styles.richMediaClassName, _mediaCard.newFileExperienceClassName, (0, _tokens.token)('color.border.danger', _editorSharedStyles.akEditorDeleteIconColor), (0, _tokens.token)('color.icon.danger', _editorSharedStyles.akEditorDeleteIconColor), (0, _tokens.token)('color.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/cjs/plugins/media/ui/CaptionPlaceholder/index.js

@@ -15,11 +15,13 @@ var _reactIntlNext = require("react-intl-next");
 
 var _colors = require("@atlaskit/theme/colors");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _messages = require("./messages");
 
 var _templateObject;
 
-var placeholder = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  width: 100%;\n  text-align: center;\n  margin-top: 8px !important;\n  display: block;\n"])), _colors.N200);
+var placeholder = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  width: 100%;\n  text-align: center;\n  margin-top: 8px !important;\n  display: block;\n"])), (0, _tokens.token)('color.text.subtlest', _colors.N200));
 var CAPTION_PLACEHOLDER_ID = 'caption-placeholder';
 exports.CAPTION_PLACEHOLDER_ID = CAPTION_PLACEHOLDER_ID;
 

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

@@ -23,12 +23,14 @@ var _reactIntlNext = require("react-intl-next");
 
 var _dropPlaceholderMessages = require("./drop-placeholder-messages");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _media = require("../../nodeviews/mediaNodeView/media");
 
 var _templateObject, _templateObject2;
 
-var iconWrapper = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _adfSchema.hexToRgba)(_colors.B400, 0.4) || _colors.B400, (0, _adfSchema.hexToRgba)(_colors.B300, 0.6) || _colors.B300, (0, _constants.borderRadius)(), _media.FILE_WIDTH, _media.MEDIA_HEIGHT);
-var dropLine = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  border-radius: ", "px;\n  margin: 2px 0;\n  width: 100%;\n  height: 2px;\n"])), _colors.B200, (0, _constants.borderRadius)());
+var iconWrapper = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _tokens.token)('color.icon.accent.blue', (0, _adfSchema.hexToRgba)(_colors.B400, 0.4) || _colors.B400), (0, _tokens.token)('color.background.accent.blue.subtle', (0, _adfSchema.hexToRgba)(_colors.B300, 0.6) || _colors.B300), (0, _constants.borderRadius)(), _media.FILE_WIDTH, _media.MEDIA_HEIGHT);
+var dropLine = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  border-radius: ", "px;\n  margin: 2px 0;\n  width: 100%;\n  height: 2px;\n"])), (0, _tokens.token)('color.border.focused', _colors.B200), (0, _constants.borderRadius)());
 
 var IconWrapperComponent = function IconWrapperComponent(props) {
   var intl = props.intl;

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

@@ -55,6 +55,8 @@ var _enums = require("../../analytics/types/enums");
 
 var _mediaLinkingToolbarMessages = require("./media-linking-toolbar-messages");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _templateObject, _templateObject2;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -65,7 +67,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-var validationWrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), _colors.R400);
+var validationWrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _tokens.token)('color.border.danger', _colors.R400));
 var buttonWrapper = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 4px 8px 4px 0px;\n"])));
 
 var LinkAddToolbar = /*#__PURE__*/function (_React$PureComponent) {

package/dist/cjs/plugins/media/ui/ResizableMediaSingle/index.js

@@ -8,10 +8,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.calcOffsetLeft = calcOffsetLeft;
 exports.default = void 0;
 
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

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

@@ -17,7 +17,9 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
 var _colors = require("@atlaskit/theme/colors");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _templateObject;
 
-var mentionsStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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      box-shadow: 0 0 0 ", "px ", ";\n      background-color: ", ";\n    }\n    .", " > span > span {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"])), _mention.MentionSharedCssClassName.MENTION_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Background]), _colors.N500, _mention.MentionSharedCssClassName.MENTION_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedBorderSize, _editorSharedStyles.akEditorDeleteBorder, _editorSharedStyles.akEditorDeleteBackgroundWithOpacity, _mention.MentionSharedCssClassName.MENTION_CONTAINER, _colors.N30A, _colors.N500);
+var mentionsStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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      box-shadow: 0 0 0 ", "px ", ";\n      background-color: ", ";\n    }\n    .", " > span > span {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"])), _mention.MentionSharedCssClassName.MENTION_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Background]), (0, _tokens.token)('color.text.subtle', _colors.N500), _mention.MentionSharedCssClassName.MENTION_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedBorderSize, _editorSharedStyles.akEditorDeleteBorder, (0, _tokens.token)('color.background.danger', _editorSharedStyles.akEditorDeleteBackgroundWithOpacity), _mention.MentionSharedCssClassName.MENTION_CONTAINER, (0, _tokens.token)('color.background.neutral', _colors.N30A), (0, _tokens.token)('color.text.subtle', _colors.N500));
 exports.mentionsStyles = mentionsStyles;

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

@@ -17,6 +17,8 @@ var _add = _interopRequireDefault(require("@atlaskit/icon/glyph/add"));
 
 var _colors = require("@atlaskit/theme/colors");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _react2 = _interopRequireWildcard(require("react"));
 
 var _reactIntlNext = require("react-intl-next");
@@ -76,7 +78,7 @@ var InviteItem = function InviteItem(_ref) {
     css: _styles.avatarStyle
   }, (0, _react.jsx)(_add.default, {
     label: intl.formatMessage(_messages.messages.mentionsAddLabel),
-    primaryColor: _colors.N300
+    primaryColor: (0, _tokens.token)('color.icon.subtle', _colors.N300)
   })), (0, _react.jsx)("div", {
     css: _styles.nameSectionStyle,
     "data-testid": "name-section"

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

@@ -13,6 +13,8 @@ var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
 var ROW_SIDE_PADDING = 14;
@@ -23,11 +25,11 @@ var AVATAR_HEIGHT = 36;
 exports.AVATAR_HEIGHT = AVATAR_HEIGHT;
 var avatarStyle = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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);
 exports.avatarStyle = avatarStyle;
-var nameSectionStyle = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1;\n  min-width: 0;\n  margin-left: 14px;\n  color: ", ";\n  opacity: inherit;\n"])), _colors.N300);
+var nameSectionStyle = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1;\n  min-width: 0;\n  margin-left: 14px;\n  color: ", ";\n  opacity: inherit;\n"])), (0, _tokens.token)('color.text.subtle', _colors.N300));
 exports.nameSectionStyle = nameSectionStyle;
 var mentionItemStyle = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: transparent;\n  display: block;\n  overflow: hidden;\n  list-style-type: none;\n  cursor: pointer;\n"])));
 exports.mentionItemStyle = mentionItemStyle;
-var mentionItemSelectedStyle = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n"])), _colors.N30);
+var mentionItemSelectedStyle = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n"])), (0, _tokens.token)('color.background.neutral.subtle.hovered', _colors.N30));
 exports.mentionItemSelectedStyle = mentionItemSelectedStyle;
 var capitalizedStyle = (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  text-transform: capitalize;\n"])));
 exports.capitalizedStyle = capitalizedStyle;

package/dist/cjs/plugins/panel/index.js

@@ -163,6 +163,7 @@ var panelPlugin = function panelPlugin() {
                 panelIcon: ':rainbow:',
                 panelIconId: '1f308',
                 panelIconText: '🌈',
+                // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
                 panelColor: _colors.T50
               }, state, insert);
             }

package/dist/cjs/plugins/panel/nodeviews/panel.js

@@ -106,7 +106,10 @@ var PanelNodeView = /*#__PURE__*/function () {
     key: "ignoreMutation",
     value: function ignoreMutation(mutation) {
       // ignore mutation if it caused by the icon.
-      return mutation.target === this.icon || mutation.target.parentNode === this.icon;
+      var isIcon = mutation.target === this.icon || mutation.target.parentNode === this.icon; // ignore mutation if it caused by the lazy load emoji inside icon.
+
+      var isInsideIcon = this.icon.contains(mutation.target);
+      return isIcon || isInsideIcon;
     }
   }]);
   return PanelNodeView;

package/dist/cjs/plugins/panel/pm-plugins/keymaps.js

@@ -10,7 +10,24 @@ var _prosemirrorKeymap = require("prosemirror-keymap");
 
 var _prosemirrorUtils = require("prosemirror-utils");
 
-// Somewhat broken and subverted: https://product-fabric.atlassian.net/browse/ED-6504
+var _utils = require("../../../utils");
+
+function findParentNode(selection, nodeType) {
+  var parentPosition = (0, _prosemirrorUtils.findParentNodeOfType)(nodeType)(selection);
+
+  if (parentPosition) {
+    return parentPosition.node;
+  }
+
+  return null;
+}
+
+function isInsideAnEmptyNode(selection, nodeType, schema) {
+  var parentNode = findParentNode(selection, nodeType);
+  return parentNode && (0, _utils.isEmptyNode)(schema)(parentNode);
+} // Somewhat broken and subverted: https://product-fabric.atlassian.net/browse/ED-6504
+
+
 function keymapPlugin() {
   var deleteCurrentItem = function deleteCurrentItem($from, tr) {
     return tr.delete($from.before($from.depth) - 1, $from.end($from.depth) + 1);
@@ -21,7 +38,8 @@ function keymapPlugin() {
       var selection = state.selection,
           nodes = state.schema.nodes,
           tr = state.tr;
-      var panel = nodes.panel;
+      var panel = nodes.panel,
+          blockquote = nodes.blockquote;
       var $from = selection.$from,
           $to = selection.$to; // Don't do anything if selection is a range
 
@@ -40,7 +58,7 @@ function keymapPlugin() {
       var isPreviousNodeAPanel = previousNodeType === panel;
       var isParentNodeAPanel = parentNodeType === panel; // Stops merging panels when deleting empty paragraph in between
 
-      if (isPreviousNodeAPanel && !isParentNodeAPanel) {
+      if (isPreviousNodeAPanel && !isParentNodeAPanel || isInsideAnEmptyNode(selection, panel, state.schema) || isInsideAnEmptyNode(selection, blockquote, state.schema)) {
         var content = $from.node($from.depth).content;
         var insertPos = previousPos.pos - 1;
         deleteCurrentItem($from, tr).insert(insertPos, content);

package/dist/cjs/plugins/paste/handlers.js

@@ -14,6 +14,7 @@ exports.handleMediaSingle = handleMediaSingle;
 exports.handleMention = handleMention;
 exports.handleParagraphBlockMarks = handleParagraphBlockMarks;
 exports.handlePasteAsPlainText = handlePasteAsPlainText;
+exports.handlePasteIntoCaption = handlePasteIntoCaption;
 exports.handlePasteIntoTaskAndDecision = handlePasteIntoTaskAndDecision;
 exports.handlePasteLinkOnSelectedText = handlePasteLinkOnSelectedText;
 exports.handlePastePreservingMarks = handlePastePreservingMarks;
@@ -700,7 +701,7 @@ function insertIntoPanel(tr, slice, panel) {
 
 function handleRichText(slice) {
   return function (state, dispatch) {
-    var _slice$content, _panelParentOverCurre;
+    var _slice$content, _slice$content2, _panelParentOverCurre;
 
     var _state$schema$nodes2 = state.schema.nodes,
         codeBlock = _state$schema$nodes2.codeBlock,
@@ -708,7 +709,8 @@ function handleRichText(slice) {
         paragraph = _state$schema$nodes2.paragraph,
         panel = _state$schema$nodes2.panel;
     var selection = state.selection;
-    var firstChildOfSlice = (_slice$content = slice.content) === null || _slice$content === void 0 ? void 0 : _slice$content.firstChild; // In case user is pasting inline code,
+    var firstChildOfSlice = (_slice$content = slice.content) === null || _slice$content === void 0 ? void 0 : _slice$content.firstChild;
+    var lastChildOfSlice = (_slice$content2 = slice.content) === null || _slice$content2 === void 0 ? void 0 : _slice$content2.lastChild; // In case user is pasting inline code,
     // any backtick ` immediately preceding it should be removed.
 
     var tr = state.tr;
@@ -723,7 +725,7 @@ function handleRichText(slice) {
 
     (0, _prosemirrorHistory.closeHistory)(tr);
     var isFirstChildListNode = (0, _node.isListNode)(firstChildOfSlice);
-    var isLastChildListNode = (0, _node.isListNode)(firstChildOfSlice);
+    var isLastChildListNode = (0, _node.isListNode)(lastChildOfSlice);
     var isSliceContentListNodes = isFirstChildListNode || isLastChildListNode; // We want to use safeInsert to insert invalid content, as it inserts at the closest non schema violating position
     // rather than spliting the selection parent node in half (which is what replaceSelection does)
     // Exception is paragraph and heading nodes, these should be split, provided their parent supports the pasted content
@@ -742,9 +744,23 @@ function handleRichText(slice) {
     } else if (noNeedForSafeInsert) {
       tr.replaceSelection(slice);
     } else {
-      // need safeInsert rather than replaceSelection, so that nodes aren't split in half
-      // e.g. when pasting a layout into a table, replaceSelection splits the table in half and adds the layout in the middle
-      tr = (0, _prosemirrorUtils.safeInsert)(slice.content, tr.selection.$to.pos)(tr);
+      // need to scan the slice if there's a block node inside it
+      var doesBlockNodeExist = false;
+      slice.content.nodesBetween(0, slice.content.size, function (node, start) {
+        if (start >= slice.openStart && start <= slice.content.size - slice.openEnd && node.isBlock) {
+          doesBlockNodeExist = true;
+          return false;
+        }
+      });
+
+      if ((0, _utils.insideTableCell)(state) && !doesBlockNodeExist) {
+        // bring back the old code for inline nodes
+        insertIntoPanel(tr, slice, panel);
+      } else {
+        // need safeInsert rather than replaceSelection, so that nodes aren't split in half
+        // e.g. when pasting a layout into a table, replaceSelection splits the table in half and adds the layout in the middle
+        tr = (0, _prosemirrorUtils.safeInsert)(slice.content, tr.selection.$to.pos)(tr);
+      }
     }
 
     tr.setStoredMarks([]);
@@ -763,6 +779,28 @@ function handleRichText(slice) {
   };
 }
 
+function handlePasteIntoCaption(slice) {
+  return function (state, dispatch) {
+    var caption = state.schema.nodes.caption;
+    var tr = state.tr;
+
+    if ((0, _prosemirrorUtils.hasParentNodeOfType)(caption)(state.selection)) {
+      // We let PM replace the selection and it will insert as text where it can't place the node
+      // This is totally fine as caption is just a simple block that only contains inline contents
+      // And it is more in line with WYSIWYG expectations
+      tr.replaceSelection(slice).scrollIntoView();
+
+      if (dispatch) {
+        dispatch(tr);
+      }
+
+      return true;
+    }
+
+    return false;
+  };
+}
+
 var handleSelectedTable = function handleSelectedTable(slice) {
   return function (state, dispatch) {
     var tr = (0, _replaceTable.replaceSelectedTable)(state, slice, _analytics.INPUT_METHOD.CLIPBOARD);

package/dist/cjs/plugins/paste/linkify-md-plugin.js

@@ -11,6 +11,8 @@ var _adfSchema = require("@atlaskit/adf-schema");
 
 var _linkifyIt = _interopRequireDefault(require("linkify-it"));
 
+var _utils = require("../hyperlink/utils");
+
 // modified version of the original Linkify plugin
 // https://github.com/markdown-it/markdown-it/blob/master/lib/rules_core/linkify.js
 var arrayReplaceAt = function arrayReplaceAt(src, pos, newElements) {
@@ -78,8 +80,13 @@ var linkify = function linkify(state) {
         var nodes = [];
         var level = currentToken.level;
         var lastPos = 0;
+        var filepaths = (0, _utils.findFilepaths)(text);
 
         for (var ln = 0; ln < links.length; ln++) {
+          if ((0, _utils.isLinkInMatches)(links[ln].index, filepaths)) {
+            continue;
+          }
+
           var url = links[ln].url;
           var fullUrl = state.md.normalizeLink(url);