@atlaskit/editor-core 166.0.3 → 167.0.1

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/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,

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

@@ -60,15 +60,13 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var isBreakoutEnabled;
-var isDynamicTextSizingEnabled;
 var isFullWidthModeEnabled;
 var wasFullWidthModeEnabled;
 
-var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig, dynamicTextSizing, breakoutEnabled, fullWidthModeEnabled, previousFullWidthModeEnabled) {
+var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig, breakoutEnabled, fullWidthModeEnabled, previousFullWidthModeEnabled) {
   var _window;
 
   isBreakoutEnabled = breakoutEnabled;
-  isDynamicTextSizingEnabled = dynamicTextSizing;
   isFullWidthModeEnabled = fullWidthModeEnabled;
   wasFullWidthModeEnabled = previousFullWidthModeEnabled;
   var state = (0, _pluginFactory.createPluginState)(dispatch, _objectSpread({
@@ -293,7 +291,6 @@ var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch, porta
         table: function table(node, view, getPos) {
           return (0, _table.createTableView)(node, view, getPos, portalProviderAPI, eventDispatcher, {
             isBreakoutEnabled: isBreakoutEnabled,
-            dynamicTextSizing: isDynamicTextSizingEnabled,
             isFullWidthModeEnabled: isFullWidthModeEnabled,
             wasFullWidthModeEnabled: wasFullWidthModeEnabled
           });

package/dist/cjs/plugins/table/pm-plugins/safari-delete-composition-text-issue-workaround.js

@@ -0,0 +1,118 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.tableSafariDeleteCompositionTextIssueWorkaroundKey = exports.createPlugin = void 0;
+
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+
+var _prosemirrorState = require("prosemirror-state");
+
+var _prosemirrorView = require("prosemirror-view");
+
+/**
+ * Fix an issue that composition text replacement in Safari removes empty nodes during text composition text deletion.
+ * https://github.com/ProseMirror/prosemirror/issues/934
+ * We will remove this plugin when Webkit fix the problem itself.
+ */
+var tableSafariDeleteCompositionTextIssueWorkaroundKey = new _prosemirrorState.PluginKey('tableSafariDeleteCompositionTextIssueWorkaround');
+exports.tableSafariDeleteCompositionTextIssueWorkaroundKey = tableSafariDeleteCompositionTextIssueWorkaroundKey;
+
+var createPlugin = function createPlugin() {
+  return new _safePlugin.SafePlugin({
+    key: tableSafariDeleteCompositionTextIssueWorkaroundKey,
+    state: {
+      init: function init() {
+        return {
+          renderSpan: false,
+          decorations: _prosemirrorView.DecorationSet.empty
+        };
+      },
+      apply: function apply(tr, value) {
+        var renderSpan = tr.getMeta(tableSafariDeleteCompositionTextIssueWorkaroundKey);
+
+        if (typeof renderSpan === 'undefined') {
+          return value;
+        }
+
+        var decorations;
+
+        if (renderSpan) {
+          // Find position of the first text node in case it has multiple text nodes created by Japanese IME
+          var $from = tr.selection.$from;
+          var pos = $from.before($from.depth);
+
+          var spanDecoration = _prosemirrorView.Decoration.widget(pos, function () {
+            var spanElement = document.createElement('span');
+            return spanElement;
+          });
+
+          decorations = _prosemirrorView.DecorationSet.create(tr.doc, [spanDecoration]);
+        } else {
+          decorations = _prosemirrorView.DecorationSet.empty;
+        }
+
+        return {
+          renderSpan: renderSpan,
+          decorations: decorations
+        };
+      }
+    },
+    props: {
+      decorations: function decorations(state) {
+        return tableSafariDeleteCompositionTextIssueWorkaroundKey.getState(state).decorations;
+      },
+      handleDOMEvents: {
+        beforeinput: function beforeinput(view, event) {
+          if ((event === null || event === void 0 ? void 0 : event.inputType) !== 'deleteCompositionText') {
+            return false;
+          }
+
+          var selection = window.getSelection();
+
+          if (!selection || selection.rangeCount <= 0 || selection.type !== 'Range') {
+            return false;
+          }
+
+          var range = selection.getRangeAt(0);
+          var startContainer = range.startContainer,
+              endContainer = range.endContainer,
+              endOffset = range.endOffset,
+              startOffset = range.startOffset;
+          /**
+           * On Safari when composition text is deleted, it deletes any empty elements it finds up the dom tree. Prosemirror can sometimes be confused by this
+           * and will think that we meant to delete those elements. This fix forces the resulting node to not be empty.
+           * The condition here checks to see if the entire text node is about to be swapped inside of an element
+           */
+
+          if (startContainer.nodeType === Node.TEXT_NODE && startContainer === endContainer && startOffset === 0 && endOffset === startContainer.length) {
+            var tr = view.state.tr;
+            tr.setMeta(tableSafariDeleteCompositionTextIssueWorkaroundKey, true);
+            view.dispatch(tr);
+          }
+
+          return false;
+        },
+        input: function input(view, event) {
+          if ((event === null || event === void 0 ? void 0 : event.inputType) !== 'deleteCompositionText') {
+            return false;
+          }
+
+          var selection = window.getSelection();
+
+          if (!selection) {
+            return false;
+          }
+
+          var tr = view.state.tr;
+          tr.setMeta(tableSafariDeleteCompositionTextIssueWorkaroundKey, false);
+          view.dispatch(tr);
+          return false;
+        }
+      }
+    }
+  });
+};
+
+exports.createPlugin = createPlugin;

package/dist/cjs/plugins/table/pm-plugins/table-resizing/event-handlers.js

@@ -31,7 +31,7 @@ var _utils3 = require("./utils");
 
 var _analytics = require("../../../analytics");
 
-var handleMouseDown = function handleMouseDown(view, event, localResizeHandlePos, dynamicTextSizing) {
+var handleMouseDown = function handleMouseDown(view, event, localResizeHandlePos) {
   var state = view.state,
       dispatch = view.dispatch;
 
@@ -59,9 +59,7 @@ var handleMouseDown = function handleMouseDown(view, event, localResizeHandlePos
   var containerWidth = _width.pluginKey.getState(state);
 
   var parentWidth = (0, _nodeWidth.getParentNodeWidth)(start, state, containerWidth);
-  var maxSize = parentWidth || (0, _utils3.getLayoutSize)(dom.getAttribute('data-layout'), containerWidth.width, {
-    dynamicTextSizing: dynamicTextSizing
-  });
+  var maxSize = parentWidth || (0, _utils3.getLayoutSize)(dom.getAttribute('data-layout'), containerWidth.width, {});
 
   if (originalTable.attrs.isNumberColumnEnabled) {
     maxSize -= _editorSharedStyles.akEditorTableNumberColumnWidth;

package/dist/cjs/plugins/table/pm-plugins/table-resizing/plugin.js

@@ -27,14 +27,11 @@ var _utils = require("./utils");
 
 function createPlugin(dispatch, _ref) {
   var _ref$lastColumnResiza = _ref.lastColumnResizable,
-      lastColumnResizable = _ref$lastColumnResiza === void 0 ? true : _ref$lastColumnResiza,
-      _ref$dynamicTextSizin = _ref.dynamicTextSizing,
-      dynamicTextSizing = _ref$dynamicTextSizin === void 0 ? false : _ref$dynamicTextSizin;
+      lastColumnResizable = _ref$lastColumnResiza === void 0 ? true : _ref$lastColumnResiza;
   return new _safePlugin.SafePlugin({
     key: _pluginKey.pluginKey,
     state: (0, _pluginFactory.createPluginState)(dispatch, {
       lastColumnResizable: lastColumnResizable,
-      dynamicTextSizing: dynamicTextSizing,
       resizeHandlePos: null,
       dragging: null,
       lastClick: null
@@ -58,7 +55,7 @@ function createPlugin(dispatch, _ref) {
               dragging = _getPluginState.dragging;
 
           if (resizeHandlePos !== null && !dragging) {
-            if ((0, _eventHandlers.handleMouseDown)(view, event, resizeHandlePos, dynamicTextSizing)) {
+            if ((0, _eventHandlers.handleMouseDown)(view, event, resizeHandlePos)) {
               var _state = view.state,
                   _dispatch = view.dispatch;
               return (0, _commands.setResizeHandlePos)(resizeHandlePos)(_state, _dispatch);

package/dist/cjs/plugins/table/pm-plugins/table-resizing/utils/misc.js

@@ -34,8 +34,7 @@ exports.tableLayoutToSize = tableLayoutToSize;
 function getLayoutSize(tableLayout) {
   var containerWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
   var options = arguments.length > 2 ? arguments[2] : undefined;
-  var dynamicTextSizing = options.dynamicTextSizing,
-      isFullWidthModeEnabled = options.isFullWidthModeEnabled;
+  var isFullWidthModeEnabled = options.isFullWidthModeEnabled;
 
   if (isFullWidthModeEnabled) {
     return containerWidth ? Math.min(containerWidth - _editorSharedStyles.akEditorGutterPadding * 2, _editorSharedStyles.akEditorFullWidthLayoutWidth) : _editorSharedStyles.akEditorFullWidthLayoutWidth;
@@ -47,7 +46,7 @@ function getLayoutSize(tableLayout) {
     return parseInt(calculatedTableWidth, 10);
   }
 
-  if (dynamicTextSizing && tableLayout === 'default') {
+  if (tableLayout === 'default') {
     return getDefaultLayoutMaxWidth(containerWidth);
   }
 
@@ -102,15 +101,12 @@ var getTableMaxWidth = function getTableMaxWidth(_ref2) {
   var table = _ref2.table,
       tableStart = _ref2.tableStart,
       state = _ref2.state,
-      layout = _ref2.layout,
-      dynamicTextSizing = _ref2.dynamicTextSizing;
+      layout = _ref2.layout;
 
   var containerWidth = _width.pluginKey.getState(state);
 
   var parentWidth = (0, _nodeWidth.getParentNodeWidth)(tableStart, state, containerWidth);
-  var maxWidth = parentWidth || getLayoutSize(layout, containerWidth.width, {
-    dynamicTextSizing: dynamicTextSizing
-  });
+  var maxWidth = parentWidth || getLayoutSize(layout, containerWidth.width, {});
 
   if (table.attrs.isNumberColumnEnabled) {
     maxWidth -= _editorSharedStyles.akEditorTableNumberColumnWidth;

package/dist/cjs/plugins/table/pm-plugins/table-resizing/utils/resize-state.js

@@ -307,7 +307,7 @@ var normaliseTableLayout = function normaliseTableLayout(input) {
 
 exports.normaliseTableLayout = normaliseTableLayout;
 
-var getNewResizeStateFromSelectedColumns = function getNewResizeStateFromSelectedColumns(rect, state, domAtPos, dynamicTextSizing) {
+var getNewResizeStateFromSelectedColumns = function getNewResizeStateFromSelectedColumns(rect, state, domAtPos) {
   var _getSelectedTableInfo = (0, _utils2.getSelectedTableInfo)(state.selection),
       totalRowCount = _getSelectedTableInfo.totalRowCount,
       totalColumnCount = _getSelectedTableInfo.totalColumnCount,
@@ -329,8 +329,7 @@ var getNewResizeStateFromSelectedColumns = function getNewResizeStateFromSelecte
     table: table.node,
     tableStart: table.start,
     state: state,
-    layout: layout,
-    dynamicTextSizing: dynamicTextSizing
+    layout: layout
   });
   var resizeState = getResizeState({
     minWidth: _styles.tableCellMinWidth,

package/dist/cjs/plugins/table/pm-plugins/table-resizing/utils/scale-table.js

@@ -37,18 +37,15 @@ var scale = function scale(tableRef, options, domAtPos) {
   var node = options.node,
       containerWidth = options.containerWidth,
       previousContainerWidth = options.previousContainerWidth,
-      dynamicTextSizing = options.dynamicTextSizing,
       prevNode = options.prevNode,
       start = options.start,
       isBreakoutEnabled = options.isBreakoutEnabled,
       layoutChanged = options.layoutChanged;
   var maxSize = (0, _misc.getLayoutSize)(node.attrs.layout, containerWidth, {
-    dynamicTextSizing: dynamicTextSizing,
     isBreakoutEnabled: isBreakoutEnabled
   });
   var prevTableWidth = (0, _utils.getTableWidth)(prevNode);
   var previousMaxSize = (0, _misc.getLayoutSize)(prevNode.attrs.layout, previousContainerWidth, {
-    dynamicTextSizing: dynamicTextSizing,
     isBreakoutEnabled: isBreakoutEnabled
   });
   var newWidth = maxSize; // adjust table width if layout is updated

package/dist/cjs/plugins/table/transforms/column-width.js

@@ -168,8 +168,7 @@ var rescaleColumns = function rescaleColumns(table, view) {
       table: table.node,
       tableStart: table.start,
       state: state,
-      layout: layout,
-      dynamicTextSizing: true
+      layout: layout
     });
     var resizeState = (0, _resizeState.getResizeState)({
       minWidth: _styles.tableCellMinWidth,

package/dist/cjs/plugins/table/transforms/fix-tables.js

@@ -146,9 +146,7 @@ var fixAutoSizedTable = function fixAutoSizedTable(view, tableNode, tableRef, ta
     return acc + current;
   }, 0);
   var tableLayout = getLayoutBasedOnWidth(totalContentWidth);
-  var maxLayoutSize = (0, _utils.getLayoutSize)(tableLayout, opts.containerWidth, {
-    dynamicTextSizing: opts.dynamicTextSizing
-  }); // Content width will generally not meet the constraints of the layout
+  var maxLayoutSize = (0, _utils.getLayoutSize)(tableLayout, opts.containerWidth, {}); // Content width will generally not meet the constraints of the layout
   // whether it be below or above, so we scale our columns widths
   // to meet these requirements