@atlaskit/editor-core 166.0.4 → 167.0.2

package/dist/esm/plugins/insert-block/index.js

@@ -95,7 +95,7 @@ var insertBlockPlugin = function insertBlockPlugin() {
               isDisabled: disabled,
               isTypeAheadAllowed: isTypeAheadAllowed(editorView.state),
               editorView: editorView,
-              tableSupported: options.allowTables,
+              tableSupported: !!editorView.state.schema.nodes.table,
               actionSupported: !!editorView.state.schema.nodes.taskItem,
               mentionsSupported: !!(mentionState && mentionState.mentionProvider),
               decisionSupported: !!editorView.state.schema.nodes.decisionItem,

package/dist/esm/plugins/jira-issue/nodeviews/jira-issue.js

@@ -8,8 +8,9 @@ import { JiraIcon } from '@atlaskit/logo/jira-icon';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N30, N50 } from '@atlaskit/theme/colors';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
-var wrapperNode = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-items: center;\n  background: ", ";\n  border: 1px solid ", ";\n  border-radius: ", "px;\n  box-sizing: border-box;\n  cursor: default;\n  display: inline-flex;\n  font-size: ", ";\n  margin: 0 2px;\n  min-height: 24px;\n  padding: 0 4px;\n  user-select: none;\n  vertical-align: middle;\n  white-space: nowrap;\n\n  .ProseMirror-selectednode & {\n    background: ", ";\n    outline: none;\n  }\n"])), N30, N50, borderRadius(), relativeFontSizeToBase16(13), N50);
-var jiraChildNode = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: inline-block;\n  color: #707070;\n  line-height: 24px;\n  vertical-align: top;\n\n  &::before {\n    color: black;\n    content: 'JIRA | ';\n  }\n"])));
+import { token } from '@atlaskit/tokens';
+var wrapperNode = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-items: center;\n  background: ", ";\n  border: 1px solid ", ";\n  border-radius: ", "px;\n  box-sizing: border-box;\n  cursor: default;\n  display: inline-flex;\n  font-size: ", ";\n  margin: 0 2px;\n  min-height: 24px;\n  padding: 0 4px;\n  user-select: none;\n  vertical-align: middle;\n  white-space: nowrap;\n\n  .ProseMirror-selectednode & {\n    background: ", ";\n    outline: none;\n  }\n"])), token('color.background.neutral', N30), token('color.border', N50), borderRadius(), relativeFontSizeToBase16(13), token('color.background.selected', N50));
+var jiraChildNode = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: inline-block;\n  color: ", ";\n  line-height: 24px;\n  vertical-align: top;\n\n  &::before {\n    color: ", ";\n    content: 'JIRA | ';\n  }\n"])), token('color.text.subtlest', '#707070'), token('color.text', 'black'));
 var svgChildNode = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n\n  & > div {\n    height: 24px;\n    width: 24px;\n  }\n"])));
 export default function JIRAIssueNode(props) {
   var issueKey = props.node.attrs.issueKey;

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

@@ -12,4 +12,4 @@ import { TableCssClassName } from '../table/types';
 import { tableMarginFullWidthMode } from '../table/ui/consts';
 export var LAYOUT_SECTION_MARGIN = gridSize();
 export var LAYOUT_COLUMN_PADDING = gridSize() * 1.5;
-export var layoutStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), columnLayoutSharedStyle, gridSize() - 1, akLayoutGutterOffset, akEditorSwoopCubicBezier, akEditorSelectedBorderSize, N40A, LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN, gridMediumMaxWidth, N50A, token('color.background.danger', akEditorDeleteBackground), token('color.border.danger', akEditorDeleteBorder), akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.Border, SelectionStyle.Blanket]), TableCssClassName.TABLE_CONTAINER, tableMarginFullWidthMode);
+export var layoutStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), columnLayoutSharedStyle, gridSize() - 1, akLayoutGutterOffset, akEditorSwoopCubicBezier, akEditorSelectedBorderSize, token('color.border', N40A), LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN, gridMediumMaxWidth, token('color.border', N50A), token('color.background.danger', akEditorDeleteBackground), token('color.border.danger', akEditorDeleteBorder), akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.Border, SelectionStyle.Blanket]), TableCssClassName.TABLE_CONTAINER, tableMarginFullWidthMode);

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

@@ -60,6 +60,10 @@ export var isMobileUploadCompleted = function isMobileUploadCompleted(mediaPlugi
   return !!mediaPluginState.mediaOptions && // This flag tells us that it's a 'mobile' env.
   !!mediaPluginState.mediaOptions.allowMarkingUploadsAsIncomplete && typeof mediaPluginState.mobileUploadComplete[mediaId] === 'boolean' ? mediaPluginState.mobileUploadComplete[mediaId] : undefined;
 };
+export var isMediaNode = function isMediaNode(pos, state) {
+  var node = state.doc.nodeAt(pos);
+  return node && ['media', 'mediaInline'].includes(node.type.name);
+};
 export var updateAllMediaNodesAttrs = function updateAllMediaNodesAttrs(id, attrs, isMediaSingle) {
   return function (state, dispatch) {
     var mediaPluginState = mediaPluginKey.getState(state);
@@ -72,16 +76,11 @@ export var updateAllMediaNodesAttrs = function updateAllMediaNodesAttrs(id, attr
       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;
       }
 
@@ -117,9 +116,8 @@ export var updateMediaNodeAttrs = function updateMediaNodeAttrs(id, attrs, isMed
 
     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/esm/plugins/media/nodeviews/mediaInline.js

@@ -25,12 +25,14 @@ import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import { MediaInlineNodeSelector } from './styles';
 import { stateKey as mediaStateKey } from '../pm-plugins/plugin-key';
 import { MediaNodeUpdater } from './mediaNodeUpdater';
+import { MediaInlineCardLoadingView } from '@atlaskit/media-ui';
 export var createMediaNodeUpdater = function createMediaNodeUpdater(props) {
-  var node = props.node.firstChild;
+  var node = props.node;
   return new MediaNodeUpdater(_objectSpread(_objectSpread({}, props), {}, {
     isMediaSingle: true,
     node: node ? node : props.node,
-    dispatchAnalyticsEvent: props.dispatchAnalyticsEvent
+    dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
+    contextIdentifierProvider: props.contextIdentifierProvider
   }));
 };
 /**
@@ -97,6 +99,10 @@ export var updateMediaNodeAttributes = /*#__PURE__*/function () {
             return _context.abrupt("return");
 
           case 23:
+            _context.next = 25;
+            return mediaNodeUpdater.updateFileAttrs();
+
+          case 25:
           case "end":
             return _context.stop();
         }
@@ -117,7 +123,7 @@ export var handleNewNode = function handleNewNode(props) {
   });
 };
 export var MediaInline = function MediaInline(props) {
-  var _useState = useState({}),
+  var _useState = useState(),
       _useState2 = _slicedToArray(_useState, 2),
       viewMediaClientConfig = _useState2[0],
       setViewMediaClientConfig = _useState2[1];
@@ -172,6 +178,18 @@ export 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.createElement(MediaInlineCardLoadingView, {
+      message: "",
+      isSelected: false
+    });
+  }
+
   return /*#__PURE__*/React.createElement(MediaInlineCard, {
     isSelected: props.isSelected,
     identifier: identifier,
@@ -194,13 +212,13 @@ export var MediaInlineNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
     value: function createDomRef() {
       var domRef = document.createElement('span');
       domRef.contentEditable = 'false';
-      domRef.classList.add(MediaInlineNodeSelector);
       return domRef;
     }
   }, {
     key: "getContentDOM",
     value: function getContentDOM() {
       var dom = document.createElement('span');
+      dom.classList.add(MediaInlineNodeSelector);
       return {
         dom: dom
       };

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

@@ -92,6 +92,12 @@ export var MediaNode = /*#__PURE__*/function (_Component) {
       }
     });
 
+    _defineProperty(_assertThisInitialized(_this), "onFullscreenChange", function (fullscreen) {
+      _this.mediaPluginState.updateAndDispatch({
+        isFullscreen: fullscreen
+      });
+    });
+
     _defineProperty(_assertThisInitialized(_this), "handleNewNode", function (props) {
       var node = props.node;
 
@@ -230,6 +236,7 @@ export 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/esm/plugins/media/pm-plugins/alt-text/ui/AltTextEdit.js

@@ -31,15 +31,16 @@ 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"])), N100, relativeFontSizeToBase16(12), 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"])), token('color.text.subtlest', N100), relativeFontSizeToBase16(12), token('color.border', 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"])), 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"])), token('color.border.danger', R400));
 var buttonWrapper = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  padding: 4px 8px;\n"])));
-var clearText = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), N80);
+var clearText = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), token('color.icon.subtle', N80));
 export var AltTextEditComponent = /*#__PURE__*/function (_React$Component) {
   _inherits(AltTextEditComponent, _React$Component);
 

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

@@ -76,6 +76,8 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
 
     _defineProperty(this, "showDropzone", false);
 
+    _defineProperty(this, "isFullscreen", false);
+
     _defineProperty(this, "layout", 'center');
 
     _defineProperty(this, "mediaNodes", []);

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

@@ -8,7 +8,7 @@ import { akEditorDeleteBorder, akEditorDeleteBackground, akEditorSelectedBorderB
 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: 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"])), mediaSingleSharedStyle, richMediaClassName, richMediaClassName, richMediaClassName, akEditorMediaResizeHandlerPaddingWide, akEditorMediaResizeHandlerPaddingWide, akEditorMediaResizeHandlerPadding, akEditorMediaResizeHandlerPadding, richMediaClassName, richMediaClassName, N60, akEditorSelectedNodeClassName, akEditorSelectedNodeClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, 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));
+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)'));
 /* `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/ui/CaptionPlaceholder/index.js

@@ -6,8 +6,9 @@ var _templateObject;
 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"])), 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"])), token('color.text.subtlest', N200));
 export var CAPTION_PLACEHOLDER_ID = 'caption-placeholder';
 export default (function (_ref) {
   var onClick = _ref.onClick;

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

@@ -10,9 +10,10 @@ 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"])), hexToRgba(B400, 0.4) || B400, 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"])), 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"])), 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 IconWrapperComponent = function IconWrapperComponent(props) {
   var intl = props.intl;

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

@@ -30,7 +30,8 @@ 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';
-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"])), R400);
+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 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/mentions/styles.js

@@ -6,4 +6,5 @@ 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';
-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      box-shadow: 0 0 0 ", "px ", ";\n      background-color: ", ";\n    }\n    .", " > span > span {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"])), MentionSharedCssClassName.MENTION_CONTAINER, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Background]), N500, MentionSharedCssClassName.MENTION_CONTAINER, akEditorSelectedNodeClassName, akEditorSelectedBorderSize, akEditorDeleteBorder, akEditorDeleteBackgroundWithOpacity, MentionSharedCssClassName.MENTION_CONTAINER, N30A, N500);
+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      box-shadow: 0 0 0 ", "px ", ";\n      background-color: ", ";\n    }\n    .", " > 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));

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

@@ -4,6 +4,7 @@ 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';
@@ -52,7 +53,7 @@ var InviteItem = function InviteItem(_ref) {
     css: avatarStyle
   }, jsx(AddIcon, {
     label: intl.formatMessage(messages.mentionsAddLabel),
-    primaryColor: N300
+    primaryColor: token('color.icon.subtle', N300)
   })), jsx("div", {
     css: nameSectionStyle,
     "data-testid": "name-section"

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

@@ -4,11 +4,12 @@ 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"])), 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"])), token('color.text.subtle', 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"])), N30);
+export var mentionItemSelectedStyle = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  background-color: ", ";\n"])), token('color.background.neutral.subtle.hovered', N30));
 export var capitalizedStyle = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  text-transform: capitalize;\n"])));

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

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

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

@@ -81,7 +81,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;
     }
   }]);
 

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

@@ -1,6 +1,23 @@
 import { keymap } from 'prosemirror-keymap';
-import { setTextSelection } from 'prosemirror-utils';
-// Somewhat broken and subverted: https://product-fabric.atlassian.net/browse/ED-6504
+import { setTextSelection, findParentNodeOfType } from 'prosemirror-utils';
+import { isEmptyNode } from '../../../utils';
+
+function findParentNode(selection, nodeType) {
+  var parentPosition = findParentNodeOfType(nodeType)(selection);
+
+  if (parentPosition) {
+    return parentPosition.node;
+  }
+
+  return null;
+}
+
+function isInsideAnEmptyNode(selection, nodeType, schema) {
+  var parentNode = findParentNode(selection, nodeType);
+  return parentNode && isEmptyNode(schema)(parentNode);
+} // Somewhat broken and subverted: https://product-fabric.atlassian.net/browse/ED-6504
+
+
 export function keymapPlugin() {
   var deleteCurrentItem = function deleteCurrentItem($from, tr) {
     return tr.delete($from.before($from.depth) - 1, $from.end($from.depth) + 1);
@@ -11,7 +28,8 @@ export 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
 
@@ -30,7 +48,7 @@ export 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/esm/plugins/paste/handlers.js

@@ -721,6 +721,27 @@ export function handleRichText(slice) {
     return true;
   };
 }
+export function handlePasteIntoCaption(slice) {
+  return function (state, dispatch) {
+    var caption = state.schema.nodes.caption;
+    var tr = state.tr;
+
+    if (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;
+  };
+}
 export var handleSelectedTable = function handleSelectedTable(slice) {
   return function (state, dispatch) {
     var tr = replaceSelectedTable(state, slice, INPUT_METHOD.CLIPBOARD);

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

@@ -1,5 +1,6 @@
 import { linkifyMatch } from '@atlaskit/adf-schema';
-import LinkifyIt from 'linkify-it'; // modified version of the original Linkify plugin
+import LinkifyIt from 'linkify-it';
+import { findFilepaths, isLinkInMatches } from '../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) {
@@ -67,8 +68,13 @@ var linkify = function linkify(state) {
         var nodes = [];
         var level = currentToken.level;
         var lastPos = 0;
+        var filepaths = findFilepaths(text);
 
         for (var ln = 0; ln < links.length; ln++) {
+          if (isLinkInMatches(links[ln].index, filepaths)) {
+            continue;
+          }
+
           var url = links[ln].url;
           var fullUrl = state.md.normalizeLink(url);
 

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

@@ -7,7 +7,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import { ACTION, INPUT_METHOD, EVENT_TYPE, ACTION_SUBJECT, ACTION_SUBJECT_ID, addAnalytics, PasteTypes, PasteContents, withAnalytics } from '../../analytics';
 import { getPasteSource } from '../util';
-import { handlePasteAsPlainText, handlePasteIntoTaskAndDecision, handleCodeBlock, handleMediaSingle, handlePastePreservingMarks, handleMarkdown, handleRichText, handleExpandPasteInTable, handleSelectedTable, handlePasteLinkOnSelectedText } from '../handlers';
+import { handlePasteAsPlainText, handlePasteIntoTaskAndDecision, handleCodeBlock, handleMediaSingle, handlePastePreservingMarks, handleMarkdown, handleRichText, handleExpandPasteInTable, handleSelectedTable, handlePasteLinkOnSelectedText, handlePasteIntoCaption } from '../handlers';
 import { pipe } from '../../../utils';
 import { findParentNode } from 'prosemirror-utils';
 import { mapSlice } from '../../../utils/slice';
@@ -222,6 +222,11 @@ export var handlePasteIntoTaskAndDecisionWithAnalytics = function handlePasteInt
     type: type
   }))(slice);
 };
+export var handlePasteIntoCaptionWithAnalytics = function handlePasteIntoCaptionWithAnalytics(view, event, slice, type) {
+  return pipe(handlePasteIntoCaption, pasteCommandWithAnalytics(view, event, slice, {
+    type: type
+  }))(slice);
+};
 export var handleCodeBlockWithAnalytics = function handleCodeBlockWithAnalytics(view, event, slice, text) {
   return pipe(handleCodeBlock, pasteCommandWithAnalytics(view, event, slice, {
     type: PasteTypes.plain

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

@@ -14,7 +14,7 @@ import { linkifyContent } from '../../hyperlink/utils';
 import { transformSliceNestedExpandToExpand } from '../../expand/utils';
 import { handleMacroAutoConvert, handleMention, handleParagraphBlockMarks } from '../handlers';
 import { transformSliceToJoinAdjacentCodeBlocks, transformSingleLineCodeBlockToCodeMark } from '../../code-block/utils';
-import { createPasteMeasurePayload, getContentNodeTypes, handlePasteAsPlainTextWithAnalytics, handlePasteIntoTaskAndDecisionWithAnalytics, handleCodeBlockWithAnalytics, handleMediaSingleWithAnalytics, handlePastePreservingMarksWithAnalytics, handleMarkdownWithAnalytics, handleRichTextWithAnalytics, handleExpandWithAnalytics, handleSelectedTableWithAnalytics, handlePasteLinkOnSelectedTextWithAnalytics, sendPasteAnalyticsEvent } from './analytics';
+import { createPasteMeasurePayload, getContentNodeTypes, handlePasteAsPlainTextWithAnalytics, handlePasteIntoTaskAndDecisionWithAnalytics, handleCodeBlockWithAnalytics, handleMediaSingleWithAnalytics, handlePastePreservingMarksWithAnalytics, handleMarkdownWithAnalytics, handleRichTextWithAnalytics, handleExpandWithAnalytics, handleSelectedTableWithAnalytics, handlePasteLinkOnSelectedTextWithAnalytics, sendPasteAnalyticsEvent, handlePasteIntoCaptionWithAnalytics } from './analytics';
 import { analyticsPluginKey, PasteTypes } from '../../analytics';
 import { insideTable, measurements } from '../../../utils';
 import { measureRender } from '@atlaskit/editor-common/utils';
@@ -28,6 +28,7 @@ import { pluginKey as betterTypePluginKey } from '../../base/pm-plugins/better-t
 import { clipboardTextSerializer } from './clipboard-text-serializer';
 import { htmlHasIncompleteTable, tryRebuildCompleteTableHtml, isPastedFromTinyMCEConfluence } from '../util/tinyMCE';
 import { handlePaste as handlePasteTable } from '@atlaskit/editor-tables/utils';
+import { extractSliceFromStep } from '../../../utils/step';
 export var stateKey = new PluginKey('pastePlugin');
 export { md } from '../md';
 export function createPlugin(schema, dispatchAnalyticsEvent, plainTextPasteLinkification, cardOptions, sanitizePrivateContent, providerFactory) {
@@ -184,8 +185,25 @@ export function createPlugin(schema, dispatchAnalyticsEvent, plainTextPasteLinki
           // don't add closeHistory call if we're pasting a text inside placeholder text as we want the whole action
           // to be atomic
           var placeholder = state.schema.nodes.placeholder;
+          var isPastingTextInsidePlaceholderText = ((_state$doc$resolve$no = state.doc.resolve(state.selection.$anchor.pos).nodeAfter) === null || _state$doc$resolve$no === void 0 ? void 0 : _state$doc$resolve$no.type) === placeholder; // don't add closeHistory call if we're pasting a table, as some tables may involve additional
+          // appendedTransactions to repair them (if they're partial or incomplete) and we don't want
+          // to split those repairing transactions in prosemirror-history when they're being added to the
+          // "done" stack
+
+          var isPastingTable = tr.steps.some(function (step) {
+            var _slice$content;
+
+            var slice = extractSliceFromStep(step);
+            var tableExists = false;
+            slice === null || slice === void 0 ? void 0 : (_slice$content = slice.content) === null || _slice$content === void 0 ? void 0 : _slice$content.forEach(function (node) {
+              if (node.type === state.schema.nodes.table) {
+                tableExists = true;
+              }
+            });
+            return tableExists;
+          });
 
-          if (((_state$doc$resolve$no = state.doc.resolve(state.selection.$anchor.pos).nodeAfter) === null || _state$doc$resolve$no === void 0 ? void 0 : _state$doc$resolve$no.type) !== placeholder) {
+          if (!isPastingTextInsidePlaceholderText && !isPastingTable) {
             tr.setMeta(betterTypePluginKey, true);
           }
 
@@ -308,6 +326,13 @@ export function createPlugin(schema, dispatchAnalyticsEvent, plainTextPasteLinki
 
           if (!insideTable(state)) {
             slice = transformSliceNestedExpandToExpand(slice, state.schema);
+          } // Create a custom handler to avoid handling with handleRichText method
+          // As SafeInsert is used inside handleRichText which caused some bad UX like this:
+          // https://product-fabric.atlassian.net/browse/MEX-1520
+
+
+          if (handlePasteIntoCaptionWithAnalytics(view, event, slice, PasteTypes.richText)(state, dispatch)) {
+            return true;
           }
 
           return handleRichTextWithAnalytics(view, event, slice)(state, dispatch);

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

@@ -1,4 +1,5 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { browser } from '@atlaskit/editor-common/utils';
 import { PluginKey } from 'prosemirror-state';
 import { DecorationSet, Decoration } from 'prosemirror-view';
 import { isInEmptyLine, isEmptyDocument, bracketTyped } from '../../utils/document';
@@ -27,7 +28,17 @@ export function createPlaceholderDecoration(editorState, placeholderText) {
   placeholderDecoration.className = placeHolderClass;
   var placeholderNode = document.createElement('span');
   placeholderNode.textContent = placeholderText;
-  placeholderDecoration.appendChild(placeholderNode);
+  placeholderDecoration.appendChild(placeholderNode); // ME-2289 Tapping on backspace in empty editor hides and displays the keyboard
+  // Add a editable buff node as the cursor moving forward is inevitable
+  // when backspace in GBoard composition
+
+  if (browser.android && browser.chrome) {
+    var buffNode = document.createElement('span');
+    buffNode.setAttribute('contenteditable', 'true');
+    buffNode.textContent = ' ';
+    placeholderDecoration.appendChild(buffNode);
+  }
+
   return DecorationSet.create(editorState.doc, [Decoration.widget(pos, placeholderDecoration, {
     side: -1,
     key: 'placeholder'

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

@@ -4,5 +4,6 @@ var _templateObject;
 
 import { css } from '@emotion/react';
 import { N200 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 export var placeHolderClassName = 'placeholder-decoration';
-export var placeholderStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror .", " {\n    position: relative;\n    color: ", ";\n    width: 100%;\n\n    pointer-events: none;\n    display: block;\n    user-select: none;\n\n    > span {\n      position: absolute;\n      pointer-events: none;\n    }\n\n    &.align-end > span {\n      right: 0;\n    }\n\n    &.align-center > span {\n      left: 0;\n    }\n  }\n"])), placeHolderClassName, N200);
+export var placeholderStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror .", " {\n    position: relative;\n    color: ", ";\n    width: 100%;\n\n    pointer-events: none;\n    display: block;\n    user-select: none;\n\n    > span {\n      position: absolute;\n      pointer-events: none;\n      outline: none;\n    }\n\n    &.align-end > span {\n      right: 0;\n    }\n\n    &.align-center > span {\n      left: 0;\n    }\n  }\n"])), placeHolderClassName, token('color.text.subtlest', N200));

package/dist/esm/plugins/placeholder-text/styles.js

@@ -5,4 +5,5 @@ var _templateObject;
 import { css } from '@emotion/react';
 import { N300 } from '@atlaskit/theme/colors';
 import { SelectionStyle, getSelectionStyles, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
-export var placeholderTextStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror span[data-placeholder] {\n    color: ", ";\n    display: inline;\n  }\n\n  .ProseMirror span.pm-placeholder {\n    display: inline;\n    color: ", ";\n  }\n  .ProseMirror span.pm-placeholder__text {\n    display: inline;\n    color: ", ";\n  }\n\n  .ProseMirror span.pm-placeholder.", " {\n    ", "\n  }\n\n  .ProseMirror span.pm-placeholder__text[data-placeholder]::after {\n    color: ", ";\n    cursor: text;\n    content: attr(data-placeholder);\n    display: inline;\n  }\n"])), N300, N300, N300, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.Background]), N300);
+import { token } from '@atlaskit/tokens';
+export var placeholderTextStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror span[data-placeholder] {\n    color: ", ";\n    display: inline;\n  }\n\n  .ProseMirror span.pm-placeholder {\n    display: inline;\n    color: ", ";\n  }\n  .ProseMirror span.pm-placeholder__text {\n    display: inline;\n    color: ", ";\n  }\n\n  .ProseMirror span.pm-placeholder.", " {\n    ", "\n  }\n\n  .ProseMirror span.pm-placeholder__text[data-placeholder]::after {\n    color: ", ";\n    cursor: text;\n    content: attr(data-placeholder);\n    display: inline;\n  }\n"])), token('color.text.subtlest', N300), token('color.text.subtlest', N300), token('color.text.subtlest', N300), akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.Background]), token('color.text.subtlest', N300));

package/dist/esm/plugins/quick-insert/search.js

@@ -31,7 +31,9 @@ export function find(query, items) {
     });
   }
 
-  return fuse.search(query);
+  return fuse.search(query).map(function (result) {
+    return result.item;
+  });
 }
 export var searchQuickInsertItems = function searchQuickInsertItems(quickInsertState, options) {
   return function (query, category) {