@atlaskit/editor-core 166.0.4 → 167.0.2

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/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;
@@ -778,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);
 

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

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.createPasteAnalyticsPayload = createPasteAnalyticsPayload;
 exports.createPasteMeasurePayload = void 0;
 exports.getContent = getContent;
-exports.handleSelectedTableWithAnalytics = exports.handleRichTextWithAnalytics = exports.handlePastePreservingMarksWithAnalytics = exports.handlePasteLinkOnSelectedTextWithAnalytics = exports.handlePasteIntoTaskAndDecisionWithAnalytics = exports.handlePasteAsPlainTextWithAnalytics = exports.handleMediaSingleWithAnalytics = exports.handleMarkdownWithAnalytics = exports.handleExpandWithAnalytics = exports.handleCodeBlockWithAnalytics = exports.getContentNodeTypes = void 0;
+exports.handleSelectedTableWithAnalytics = exports.handleRichTextWithAnalytics = exports.handlePastePreservingMarksWithAnalytics = exports.handlePasteLinkOnSelectedTextWithAnalytics = exports.handlePasteIntoTaskAndDecisionWithAnalytics = exports.handlePasteIntoCaptionWithAnalytics = exports.handlePasteAsPlainTextWithAnalytics = exports.handleMediaSingleWithAnalytics = exports.handleMarkdownWithAnalytics = exports.handleExpandWithAnalytics = exports.handleCodeBlockWithAnalytics = exports.getContentNodeTypes = void 0;
 exports.pasteCommandWithAnalytics = pasteCommandWithAnalytics;
 exports.sendPasteAnalyticsEvent = sendPasteAnalyticsEvent;
 
@@ -254,6 +254,14 @@ var handlePasteIntoTaskAndDecisionWithAnalytics = function handlePasteIntoTaskAn
 
 exports.handlePasteIntoTaskAndDecisionWithAnalytics = handlePasteIntoTaskAndDecisionWithAnalytics;
 
+var handlePasteIntoCaptionWithAnalytics = function handlePasteIntoCaptionWithAnalytics(view, event, slice, type) {
+  return (0, _utils.pipe)(_handlers.handlePasteIntoCaption, pasteCommandWithAnalytics(view, event, slice, {
+    type: type
+  }))(slice);
+};
+
+exports.handlePasteIntoCaptionWithAnalytics = handlePasteIntoCaptionWithAnalytics;
+
 var handleCodeBlockWithAnalytics = function handleCodeBlockWithAnalytics(view, event, slice, text) {
   return (0, _utils.pipe)(_handlers.handleCodeBlock, pasteCommandWithAnalytics(view, event, slice, {
     type: _analytics.PasteTypes.plain

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

@@ -74,6 +74,8 @@ var _tinyMCE = require("../util/tinyMCE");
 
 var _utils9 = require("@atlaskit/editor-tables/utils");
 
+var _step = require("../../../utils/step");
+
 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; }
@@ -238,8 +240,25 @@ function createPlugin(schema, dispatchAnalyticsEvent, plainTextPasteLinkificatio
           // 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 = (0, _step.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(_betterTypeHistory.pluginKey, true);
           }
 
@@ -362,6 +381,13 @@ function createPlugin(schema, dispatchAnalyticsEvent, plainTextPasteLinkificatio
 
           if (!(0, _utils4.insideTable)(state)) {
             slice = (0, _utils2.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 ((0, _analytics.handlePasteIntoCaptionWithAnalytics)(view, event, slice, _analytics2.PasteTypes.richText)(state, dispatch)) {
+            return true;
           }
 
           return (0, _analytics.handleRichTextWithAnalytics)(view, event, slice)(state, dispatch);

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

@@ -9,6 +9,8 @@ exports.pluginKey = exports.default = void 0;
 
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 
+var _utils = require("@atlaskit/editor-common/utils");
+
 var _prosemirrorState = require("prosemirror-state");
 
 var _prosemirrorView = require("prosemirror-view");
@@ -21,7 +23,7 @@ var _styles = require("./styles");
 
 var _focusHandler = require("../base/pm-plugins/focus-handler");
 
-var _utils = require("../type-ahead/utils");
+var _utils2 = require("../type-ahead/utils");
 
 var pluginKey = new _prosemirrorState.PluginKey('placeholderPlugin');
 exports.pluginKey = pluginKey;
@@ -46,7 +48,17 @@ 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 (_utils.browser.android && _utils.browser.chrome) {
+    var buffNode = document.createElement('span');
+    buffNode.setAttribute('contenteditable', 'true');
+    buffNode.textContent = ' ';
+    placeholderDecoration.appendChild(buffNode);
+  }
+
   return _prosemirrorView.DecorationSet.create(editorState.doc, [_prosemirrorView.Decoration.widget(pos, placeholderDecoration, {
     side: -1,
     key: 'placeholder'
@@ -68,7 +80,7 @@ var emptyPlaceholder = {
 function createPlaceHolderStateFrom(editorState, getPlaceholderHintMessage, defaultPlaceholderText, bracketPlaceholderText) {
   var isEditorFocused = _focusHandler.focusStateKey.getState(editorState);
 
-  if ((0, _utils.isTypeAheadOpen)(editorState)) {
+  if ((0, _utils2.isTypeAheadOpen)(editorState)) {
     return emptyPlaceholder;
   }
 

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

@@ -13,9 +13,11 @@ var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _templateObject;
 
 var placeHolderClassName = 'placeholder-decoration';
 exports.placeHolderClassName = placeHolderClassName;
-var placeholderStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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, _colors.N200);
+var placeholderStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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, (0, _tokens.token)('color.text.subtlest', _colors.N200));
 exports.placeholderStyles = placeholderStyles;

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

@@ -15,7 +15,9 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _templateObject;
 
-var placeholderTextStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), _colors.N300, _colors.N300, _colors.N300, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Background]), _colors.N300);
+var placeholderTextStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _tokens.token)('color.text.subtlest', _colors.N300), (0, _tokens.token)('color.text.subtlest', _colors.N300), (0, _tokens.token)('color.text.subtlest', _colors.N300), _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Background]), (0, _tokens.token)('color.text.subtlest', _colors.N300));
 exports.placeholderTextStyles = placeholderTextStyles;

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

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

package/dist/cjs/plugins/selection/gap-cursor/styles.js

@@ -20,5 +20,5 @@ var gapCursor = '.ProseMirror-gapcursor';
 var prosemirrorwidget = '.ProseMirror-widget';
 var wrapLeft = '[layout="wrap-left"]';
 var wrapRight = '[layout="wrap-right"]';
-var gapCursorStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  /* =============== GAP CURSOR ================== */\n  .ProseMirror {\n    &.", " {\n      caret-color: transparent;\n    }\n\n    ", " {\n      display: none;\n      pointer-events: none;\n      position: relative;\n\n      & span {\n        caret-color: transparent;\n        position: absolute;\n        height: 100%;\n        width: 100%;\n        display: block;\n      }\n\n      & span::after {\n        animation: 1s ", " step-end infinite;\n        border-left: 1px solid;\n        content: '';\n        display: block;\n        position: absolute;\n        top: 0;\n        height: 100%;\n      }\n      &.-left span::after {\n        left: -3px;\n      }\n      &.-right span::after {\n        right: -3px;\n      }\n      & span[layout='full-width'],\n      & span[layout='wide'] {\n        margin-left: 50%;\n        transform: translateX(-50%);\n      }\n      &", " {\n        float: right;\n      }\n\n      /* fix vertical alighment of gap cursor */\n      &:first-child + ul,\n      &:first-child + span + ul,\n      &:first-child + ol,\n      &:first-child + span + ol,\n      &:first-child + pre,\n      &:first-child + span + pre,\n      &:first-child + blockquote,\n      &:first-child + span + blockquote {\n        margin-top: 0;\n      }\n    }\n    &.ProseMirror-focused ", " {\n      display: block;\n      border-color: transparent;\n    }\n  }\n\n  /* This hack below is for two images aligned side by side */\n  ", "", " + span + ", ",\n  ", "", " + span + ", ",\n  ", " + ", " + ", ",\n  ", " + ", " + span + ", ",\n  ", " + ", " + ", ",\n  ", " + ", " + span + ", ",\n  ", " + ", " + ", ",\n  ", " + ", " + span ", ",\n  ", " + ", " + ", ",\n  ", " + ", " + span + ", ",\n  ", " + ", " {\n    clear: none;\n  }\n\n  ", " + ", " + ", " > div,\n  ", " + ", " + span + ", " > div,\n  ", " + ", " + ", " > div,\n  ", " + ", " + span + ", " > div,\n  ", " + ", " + ", " > div,\n  ", " + ", " + span + ", " > div,\n  ", " + ", " + ", " > div,\n  ", " + ", " + span + ", " > div {\n    margin-right: 0;\n    margin-left: 0;\n    margin-bottom: 0;\n  }\n\n  ", " + ", ",\n  ", " + ", " {\n    float: left;\n  }\n\n  ", " + ", " + span + ", "::after,\n  ", " + ", " + span + ", "::after,\n  ", " + ", " + ", "::after,\n  ", " + ", " + span + ", "::after,\n  ", " + ", " + ", "::after,\n  ", " + ", " + span + ", "::after {\n    visibility: hidden;\n    display: block;\n    font-size: 0;\n    content: ' ';\n    clear: both;\n    height: 0;\n  }\n\n  ", " + ", " + ", " + *,\n  ", " + ", " + ", " + span + *,\n  ", " + ", " + ", " + *,\n  ", " + ", " + ", " + span + *,\n  ", " + ", " + span + ", " + *,\n  ", " + ", " + span + ", " + *,\n  ", " + ", " + span + ", " + *,\n  ", " + ", " + span + ", " + *,\n  ", " + ", " + ", " + * > *,\n  ", " + ", " + ", " + span + * > *,\n  ", " + ", " + ", " + * > *,\n  ", " + ", " + ", " + span + * > *,\n  ", " + ", " + span + ", " + * > *,\n  ", " + ", " + span + ", " + * > *,\n  ", " + ", " + span + ", " + * > *,\n  ", " + ", " + span + ", " + * > *,\n  ", " + ", " + *,\n  ", " + ", " + span + * {\n    margin-top: 0;\n  }\n"])), hideCaretModifier, gapCursor, gapCursorBlink, wrapRight, gapCursor, gapCursor, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, wrapLeft, gapCursor, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, wrapRight, wrapLeft, gapCursor, wrapRight, gapCursor, gapCursor, wrapLeft, wrapRight, gapCursor, wrapRight, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, gapCursor, wrapLeft, wrapRight, gapCursor, wrapRight, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, gapCursor, wrapLeft, wrapRight, gapCursor, wrapRight, wrapLeft, prosemirrorwidget, gapCursor, prosemirrorwidget, gapCursor);
+var gapCursorStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  /* =============== GAP CURSOR ================== */\n  .ProseMirror {\n    &.", " {\n      caret-color: transparent;\n    }\n\n    ", " {\n      display: none;\n      pointer-events: none;\n      position: relative;\n\n      & span {\n        caret-color: transparent;\n        position: absolute;\n        height: 100%;\n        width: 100%;\n        display: block;\n      }\n\n      & span::after {\n        animation: 1s ", " step-end infinite;\n        border-left: 1px solid;\n        content: '';\n        display: block;\n        position: absolute;\n        top: 0;\n        height: 100%;\n      }\n      &.-left span::after {\n        left: -3px;\n      }\n      &.-right span::after {\n        right: -3px;\n      }\n      & span[layout='full-width'],\n      & span[layout='wide'] {\n        margin-left: 50%;\n        transform: translateX(-50%);\n      }\n      &", " {\n        float: right;\n      }\n\n      /* fix vertical alignment of gap cursor */\n      &:first-of-type + ul,\n      &:first-of-type + span + ul,\n      &:first-of-type + ol,\n      &:first-of-type + span + ol,\n      &:first-of-type + pre,\n      &:first-of-type + span + pre,\n      &:first-of-type + blockquote,\n      &:first-of-type + span + blockquote {\n        margin-top: 0;\n      }\n    }\n    &.ProseMirror-focused ", " {\n      display: block;\n      border-color: transparent;\n    }\n  }\n\n  /* This hack below is for two images aligned side by side */\n  ", "", " + span + ", ",\n  ", "", " + span + ", ",\n  ", " + ", " + ", ",\n  ", " + ", " + span + ", ",\n  ", " + ", " + ", ",\n  ", " + ", " + span + ", ",\n  ", " + ", " + ", ",\n  ", " + ", " + span ", ",\n  ", " + ", " + ", ",\n  ", " + ", " + span + ", ",\n  ", " + ", " {\n    clear: none;\n  }\n\n  ", " + ", " + ", " > div,\n  ", " + ", " + span + ", " > div,\n  ", " + ", " + ", " > div,\n  ", " + ", " + span + ", " > div,\n  ", " + ", " + ", " > div,\n  ", " + ", " + span + ", " > div,\n  ", " + ", " + ", " > div,\n  ", " + ", " + span + ", " > div {\n    margin-right: 0;\n    margin-left: 0;\n    margin-bottom: 0;\n  }\n\n  ", " + ", ",\n  ", " + ", " {\n    float: left;\n  }\n\n  ", " + ", " + span + ", "::after,\n  ", " + ", " + span + ", "::after,\n  ", " + ", " + ", "::after,\n  ", " + ", " + span + ", "::after,\n  ", " + ", " + ", "::after,\n  ", " + ", " + span + ", "::after {\n    visibility: hidden;\n    display: block;\n    font-size: 0;\n    content: ' ';\n    clear: both;\n    height: 0;\n  }\n\n  ", " + ", " + ", " + *,\n  ", " + ", " + ", " + span + *,\n  ", " + ", " + ", " + *,\n  ", " + ", " + ", " + span + *,\n  ", " + ", " + span + ", " + *,\n  ", " + ", " + span + ", " + *,\n  ", " + ", " + span + ", " + *,\n  ", " + ", " + span + ", " + *,\n  ", " + ", " + ", " + * > *,\n  ", " + ", " + ", " + span + * > *,\n  ", " + ", " + ", " + * > *,\n  ", " + ", " + ", " + span + * > *,\n  ", " + ", " + span + ", " + * > *,\n  ", " + ", " + span + ", " + * > *,\n  ", " + ", " + span + ", " + * > *,\n  ", " + ", " + span + ", " + * > *,\n  ", " + ", " + *,\n  ", " + ", " + span + * {\n    margin-top: 0;\n  }\n"])), hideCaretModifier, gapCursor, gapCursorBlink, wrapRight, gapCursor, gapCursor, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, wrapLeft, gapCursor, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, wrapRight, wrapLeft, gapCursor, wrapRight, gapCursor, gapCursor, wrapLeft, wrapRight, gapCursor, wrapRight, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, gapCursor, wrapLeft, wrapRight, gapCursor, wrapRight, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, gapCursor, wrapLeft, wrapRight, gapCursor, wrapRight, wrapLeft, prosemirrorwidget, gapCursor, prosemirrorwidget, gapCursor);
 exports.gapCursorStyles = gapCursorStyles;

package/dist/cjs/plugins/selection/pm-plugins/gap-cursor-main.js

@@ -53,8 +53,8 @@ var plugin = new _safePlugin.SafePlugin({
     }
 
     return {
-      update: function update(view, state) {
-        var pluginState = _gapCursorPluginKey.gapCursorPluginKey.getState(state);
+      update: function update(view) {
+        var pluginState = _gapCursorPluginKey.gapCursorPluginKey.getState(view.state);
         /**
          * Starting with prosemirror-view 1.19.4, cursor wrapper that previousely was hiding cursor doesn't exist:
          * https://github.com/ProseMirror/prosemirror-view/commit/4a56bc7b7e61e96ef879d1dae1014ede0fc09e43

package/dist/cjs/plugins/status/ui/statusPicker.js

@@ -39,14 +39,14 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _styles = require("../../../ui/styles");
-
 var _withOuterListeners = _interopRequireDefault(require("../../../ui/with-outer-listeners"));
 
 var _actions = require("../actions");
 
 var _analytics = require("../analytics");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _templateObject;
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
@@ -63,7 +63,7 @@ exports.InputMethod = InputMethod;
   InputMethod["enterKey"] = "enterKey";
 })(InputMethod || (exports.InputMethod = InputMethod = {}));
 
-var pickerContainer = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  padding: ", "px 0;\n  border-radius: ", "px;\n  ", ";\n  input {\n    text-transform: uppercase;\n  }\n"])), _colors.N0, (0, _constants.gridSize)(), (0, _constants.borderRadius)(), _styles.dropShadow);
+var pickerContainer = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  padding: ", "px 0;\n  border-radius: ", "px;\n  box-shadow: ", ";\n  input {\n    text-transform: uppercase;\n  }\n"])), (0, _tokens.token)('elevation.surface.overlay', _colors.N0), (0, _constants.gridSize)(), (0, _constants.borderRadius)(), (0, _tokens.token)('elevation.shadow.overlay', '0 0 1px rgba(9, 30, 66, 0.31), 0 4px 8px -2px rgba(9, 30, 66, 0.25)'));
 
 var StatusPickerWithoutAnalytcs = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(StatusPickerWithoutAnalytcs, _React$Component);

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

@@ -33,6 +33,8 @@ var _tableLocalId = require("./pm-plugins/table-local-id");
 
 var _safariDelayedDomSelectionSyncingWorkaround = require("./pm-plugins/safari-delayed-dom-selection-syncing-workaround");
 
+var _safariDeleteCompositionTextIssueWorkaround = require("./pm-plugins/safari-delete-composition-text-issue-workaround");
+
 var _plugin = require("./pm-plugins/decorations/plugin");
 
 var _keymap = require("./pm-plugins/keymap");
@@ -91,13 +93,12 @@ var tablesPlugin = function tablesPlugin(options) {
               eventDispatcher = _ref.eventDispatcher;
 
           var _ref2 = options || {},
-              dynamicSizingEnabled = _ref2.dynamicSizingEnabled,
               fullWidthEnabled = _ref2.fullWidthEnabled,
               wasFullWidthEnabled = _ref2.wasFullWidthEnabled,
               breakoutEnabled = _ref2.breakoutEnabled,
               tableOptions = _ref2.tableOptions;
 
-          return (0, _main.createPlugin)(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, (0, _createPluginConfig.pluginConfig)(tableOptions), breakoutEnabled && dynamicSizingEnabled, breakoutEnabled, fullWidthEnabled, wasFullWidthEnabled);
+          return (0, _main.createPlugin)(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, (0, _createPluginConfig.pluginConfig)(tableOptions), breakoutEnabled, fullWidthEnabled, wasFullWidthEnabled);
         }
       }, {
         name: 'tablePMColResizing',
@@ -105,7 +106,6 @@ var tablesPlugin = function tablesPlugin(options) {
           var dispatch = _ref3.dispatch;
 
           var _ref4 = options || {},
-              dynamicSizingEnabled = _ref4.dynamicSizingEnabled,
               fullWidthEnabled = _ref4.fullWidthEnabled,
               tableOptions = _ref4.tableOptions;
 
@@ -113,7 +113,6 @@ var tablesPlugin = function tablesPlugin(options) {
               allowColumnResizing = _pluginConfig.allowColumnResizing;
 
           return allowColumnResizing ? (0, _tableResizing.createPlugin)(dispatch, {
-            dynamicTextSizing: dynamicSizingEnabled && !fullWidthEnabled,
             lastColumnResizable: !fullWidthEnabled
           }) : undefined;
         }
@@ -165,6 +164,17 @@ var tablesPlugin = function tablesPlugin(options) {
             return (0, _safariDelayedDomSelectionSyncingWorkaround.createPlugin)();
           }
         });
+      } // Workaround for table element breaking issue caused by composition event with an inputType of deleteCompositionText.
+      // https://github.com/ProseMirror/prosemirror/issues/934
+
+
+      if (_utils.browser.safari) {
+        plugins.push({
+          name: 'tableSafariDeleteCompositionTextIssueWorkaround',
+          plugin: function plugin() {
+            return (0, _safariDeleteCompositionTextIssueWorkaround.createPlugin)();
+          }
+        });
       }
 
       return plugins;

package/dist/cjs/plugins/table/nodeviews/TableComponent.js

@@ -251,7 +251,6 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
             view = _this$props3.view,
             getNode = _this$props3.getNode,
             getPos = _this$props3.getPos,
-            options = _this$props3.options,
             containerWidth = _this$props3.containerWidth;
         var node = getNode();
         var pos = getPos();
@@ -261,7 +260,6 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         }
 
         (0, _commands.autoSizeTable)(view, node, _this.table, pos, {
-          dynamicTextSizing: options && options.dynamicTextSizing || false,
           containerWidth: containerWidth.width
         });
       }
@@ -344,10 +342,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
     _this.node = _getNode();
     _this.containerWidth = _containerWidth; // store table size using previous full-width mode so can detect if it has changed
 
-    var dynamicTextSizing = _options ? _options.dynamicTextSizing : false;
     var isFullWidthModeEnabled = _options ? _options.wasFullWidthModeEnabled : false;
     _this.layoutSize = _this.tableNodeLayoutSize(_this.node, _containerWidth.width, {
-      dynamicTextSizing: dynamicTextSizing,
       isFullWidthModeEnabled: isFullWidthModeEnabled
     }); // Disable inline table editing and resizing controls in Firefox
     // https://github.com/ProseMirror/prosemirror/issues/432
@@ -432,7 +428,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
     value: function componentDidUpdate(prevProps) {
       var _this$props8 = this.props,
           view = _this$props8.view,
-          getNode = _this$props8.getNode;
+          getNode = _this$props8.getNode,
+          isMediaFullscreen = _this$props8.isMediaFullscreen,
+          allowColumnResizing = _this$props8.allowColumnResizing;
 
       var _ref4 = (0, _featureFlagsContext.getFeatureFlags)(view.state) || {},
           tableOverflowShadowsOptimization = _ref4.tableOverflowShadowsOptimization;
@@ -458,7 +456,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       if (currentTable.attrs.__autoSize) {
         // Wait for next tick to handle auto sizing, gives the browser time to do layout calc etc.
         this.handleAutoSizeDebounced();
-      } else if (this.props.allowColumnResizing && this.table) {
+      } // re-drawing will cause media component get unmounted that will exit fullscreen mode if media is in fullscreen mode
+      // see https://product-fabric.atlassian.net/browse/MEX-1290
+      else if (allowColumnResizing && this.table && !isMediaFullscreen) {
         // If col widths (e.g. via collab) or number of columns (e.g. delete a column) have changed,
         // re-draw colgroup.
         var previousTable = this.node;

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

@@ -31,6 +31,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _prosemirrorModel = require("prosemirror-model");
 
+var _pluginKey = require("../../../plugins/media/pm-plugins/plugin-key");
+
 var _ReactNodeView2 = _interopRequireDefault(require("../../../nodeviews/ReactNodeView"));
 
 var _WithPluginState = _interopRequireDefault(require("../../../ui/WithPluginState"));
@@ -41,7 +43,7 @@ var _createPluginConfig = require("../create-plugin-config");
 
 var _pluginFactory = require("../pm-plugins/plugin-factory");
 
-var _pluginKey = require("../pm-plugins/plugin-key");
+var _pluginKey2 = require("../pm-plugins/plugin-key");
 
 var _tableResizing = require("../pm-plugins/table-resizing");
 
@@ -131,20 +133,23 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
       return /*#__PURE__*/_react.default.createElement(_WithPluginState.default, {
         plugins: {
           containerWidth: _width.pluginKey,
-          pluginState: _pluginKey.pluginKey,
-          tableResizingPluginState: _tableResizing.pluginKey
+          pluginState: _pluginKey2.pluginKey,
+          tableResizingPluginState: _tableResizing.pluginKey,
+          mediaState: _pluginKey.stateKey
         },
         editorView: props.view,
         render: function render(pluginStates) {
           var tableResizingPluginState = pluginStates.tableResizingPluginState,
               pluginState = pluginStates.pluginState,
-              containerWidth = pluginStates.containerWidth;
+              containerWidth = pluginStates.containerWidth,
+              mediaState = pluginStates.mediaState;
           var tableActive = props.getPos() === pluginState.tablePos;
           return /*#__PURE__*/_react.default.createElement(_TableComponent.default, {
             view: props.view,
             allowColumnResizing: props.allowColumnResizing,
             eventDispatcher: props.eventDispatcher,
             getPos: props.getPos,
+            isMediaFullscreen: mediaState === null || mediaState === void 0 ? void 0 : mediaState.isFullscreen,
             options: props.options,
             allowControls: pluginState.pluginConfig.allowControls,
             isHeaderRowEnabled: pluginState.isHeaderRowEnabled,