@atlaskit/editor-core 187.32.7 → 187.33.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @atlaskit/editor-core
 
+## 187.33.0
+
+### Minor Changes
+
+- [`7613b6b6a51`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7613b6b6a51) - [ED-19428] Decouple quick-insert plugin from editor-core
+
+### Patch Changes
+
+- [`b06cd74349c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b06cd74349c) - # Media Picker
+
+  Make Clipboard secured by adding `container` and `onPaste()` to `config` `prop`. These two params address customer dissatisfaction when attachments are pasted duplicated, or to unwanted Jira issues (https://product-fabric.atlassian.net/browse/MEX-2454).
+
+  Note for migration:
+  The added `container` parameter sets a boundary for copy-paste zone. This is to filter out noise from existing practice that is problematic. **To ensure the effectiveness of this fix, please avoid using global `document` as `container` in best effort; please avoid overlapped boundary in best effort**.
+
+  When `container` is not added, the behaviour falls back to legacy mechanism.
+
+  # Media Common
+
+  Add feature toggle (`securedClipboard` in `MediaFeatureFlags`) to control the rollout of Secured Clipboard (https://product-fabric.atlassian.net/browse/MEX-2454).
+
+  # Editor Core
+
+  Add support of the Secured Clipboard (https://product-fabric.atlassian.net/browse/MEX-2454).
+
+  Use feature flag `securedClipboard` to protect such change.
+
+- [`93b4b1394bf`](https://bitbucket.org/atlassian/atlassian-frontend/commits/93b4b1394bf) - ED-19673: Updated shouldPanelBePositionedOverEditor to adapt to custom table width project
+- Updated dependencies
+
 ## 187.32.7
 
 ### Patch Changes

package/dist/cjs/plugins/help-dialog/index.js

@@ -11,7 +11,6 @@ var _react = _interopRequireDefault(require("react"));
 var _keymap = require("@atlaskit/editor-prosemirror/keymap");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
-var _WithPluginState = _interopRequireDefault(require("../../ui/WithPluginState"));
 var _HelpDialogLoader = require("./ui/HelpDialogLoader");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _questionCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/question-circle"));
@@ -101,21 +100,17 @@ var helpDialog = function helpDialog(_ref) {
     },
     contentComponent: function contentComponent(_ref4) {
       var editorView = _ref4.editorView;
-      return /*#__PURE__*/_react.default.createElement(_WithPluginState.default, {
-        plugins: {
-          helpDialog: _pluginKey.pluginKey
-        },
-        render: function render(_ref5) {
-          var _ref5$helpDialog = _ref5.helpDialog,
-            helpDialog = _ref5$helpDialog === void 0 ? {} : _ref5$helpDialog;
-          return /*#__PURE__*/_react.default.createElement(_HelpDialogLoader.HelpDialogLoader, {
-            editorView: editorView,
-            isVisible: helpDialog.isVisible,
-            quickInsertEnabled: !!(api !== null && api !== void 0 && api.quickInsert),
-            imageEnabled: helpDialog.imageEnabled
-          });
-        }
+      return /*#__PURE__*/_react.default.createElement(_HelpDialogLoader.HelpDialogLoader, {
+        pluginInjectionApi: api,
+        editorView: editorView,
+        quickInsertEnabled: !!(api !== null && api !== void 0 && api.quickInsert)
       });
+    },
+    getSharedState: function getSharedState(editorState) {
+      if (!editorState) {
+        return null;
+      }
+      return _pluginKey.pluginKey.getState(editorState) || null;
     }
   };
 };

package/dist/cjs/plugins/help-dialog/ui/index.js

@@ -6,16 +6,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getSupportedFormatting = exports.getComponentFromKeymap = exports.formatting = exports.default = void 0;
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _react = _interopRequireDefault(require("react"));
+var _react = require("react");
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _utils = require("@atlaskit/editor-common/utils");
@@ -31,10 +24,11 @@ var _messages4 = require("../../undo-redo/messages");
 var _messages5 = require("../../../ui/Alignment/messages");
 var _commands = require("../commands");
 var _toolbar = require("../../annotation/toolbar");
+var _hooks = require("@atlaskit/editor-common/hooks");
 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; }
-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); }; }
-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; } } /** @jsx jsx */
+/** @jsx jsx */
+
 var messages = (0, _reactIntlNext.defineMessages)({
   editorHelp: {
     id: 'fabric.editor.editorHelp',
@@ -488,99 +482,75 @@ var ModalFooter = function ModalFooter() {
     }
   })));
 };
-var HelpDialog = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2.default)(HelpDialog, _React$Component);
-  var _super = _createSuper(HelpDialog);
-  function HelpDialog() {
-    var _this;
-    (0, _classCallCheck2.default)(this, HelpDialog);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "formatting", []);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "closeDialog", function () {
-      var _this$props$editorVie = _this.props.editorView,
-        tr = _this$props$editorVie.state.tr,
-        dispatch = _this$props$editorVie.dispatch;
-      (0, _commands.closeHelpCommand)(tr, dispatch);
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleEsc", function (e) {
-      if (e.key === 'Escape' && _this.props.isVisible) {
-        _this.closeDialog();
-      }
-    });
-    return _this;
-  }
-  (0, _createClass2.default)(HelpDialog, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      document.addEventListener('keydown', this.handleEsc);
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      document.removeEventListener('keydown', this.handleEsc);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-      var _this$props = this.props,
-        editorView = _this$props.editorView,
-        intl = _this$props.intl,
-        imageEnabled = _this$props.imageEnabled,
-        quickInsertEnabled = _this$props.quickInsertEnabled;
-      this.formatting = getSupportedFormatting(editorView.state.schema, intl, imageEnabled, quickInsertEnabled);
-      return (0, _react2.jsx)(_modalDialog.ModalTransition, null, this.props.isVisible ? (0, _react2.jsx)(_modalDialog.default, {
-        width: "large",
-        onClose: this.closeDialog,
-        testId: "help-modal-dialog"
-      }, (0, _react2.jsx)(ModalHeader, null), (0, _react2.jsx)("div", {
-        css: _styles.contentWrapper
-      }, (0, _react2.jsx)("div", {
-        css: _styles.line
-      }), (0, _react2.jsx)("div", {
-        css: _styles.content
-      }, (0, _react2.jsx)("div", {
-        css: _styles.column
-      }, (0, _react2.jsx)("h2", {
-        css: _styles.title
-      }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, messages.keyboardShortcuts)), (0, _react2.jsx)("ul", null, this.formatting.filter(function (form) {
-        var keymap = form.keymap && form.keymap(_this2.props);
-        return keymap && keymap[_utils.browser.mac ? 'mac' : 'windows'];
-      }).map(function (form) {
-        return (0, _react2.jsx)("li", {
-          css: _styles.row,
-          key: "textFormatting-".concat(form.name)
-        }, (0, _react2.jsx)("span", null, form.name), getComponentFromKeymap(form.keymap()));
-      }), this.formatting.filter(function (form) {
-        return shortcutNamesWithoutKeymap.indexOf(form.type) !== -1;
-      }).filter(function (form) {
-        return form.autoFormatting;
-      }).map(function (form) {
-        return (0, _react2.jsx)("li", {
-          css: _styles.row,
-          key: "autoFormatting-".concat(form.name)
-        }, (0, _react2.jsx)("span", null, form.name), form.autoFormatting());
-      }))), (0, _react2.jsx)("div", {
-        css: _styles.line
-      }), (0, _react2.jsx)("div", {
-        css: _styles.column
-      }, (0, _react2.jsx)("h2", {
-        css: _styles.title
-      }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, messages.markdown)), (0, _react2.jsx)("ul", null, this.formatting.filter(function (form) {
-        return shortcutNamesWithoutKeymap.indexOf(form.type) === -1;
-      }).map(function (form) {
-        return form.autoFormatting && (0, _react2.jsx)("li", {
-          key: "autoFormatting-".concat(form.name),
-          css: _styles.row
-        }, (0, _react2.jsx)("span", null, form.name), form.autoFormatting());
-      }))))), (0, _react2.jsx)(ModalFooter, null)) : null);
-    }
-  }]);
-  return HelpDialog;
-}(_react.default.Component);
-(0, _defineProperty2.default)(HelpDialog, "displayName", 'HelpDialog');
+var HelpDialog = function HelpDialog(_ref6) {
+  var pluginInjectionApi = _ref6.pluginInjectionApi,
+    editorView = _ref6.editorView,
+    quickInsertEnabled = _ref6.quickInsertEnabled,
+    intl = _ref6.intl;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['helpDialog']),
+    helpDialogState = _useSharedPluginState.helpDialogState;
+  var closeDialog = (0, _react.useCallback)(function () {
+    var tr = editorView.state.tr,
+      dispatch = editorView.dispatch;
+    (0, _commands.closeHelpCommand)(tr, dispatch);
+  }, [editorView]);
+  var handleEsc = (0, _react.useCallback)(function (e) {
+    if (e.key === 'Escape' && helpDialogState !== null && helpDialogState !== void 0 && helpDialogState.isVisible) {
+      closeDialog();
+    }
+  }, [closeDialog, helpDialogState === null || helpDialogState === void 0 ? void 0 : helpDialogState.isVisible]);
+  (0, _react.useEffect)(function () {
+    document.addEventListener('keydown', handleEsc);
+    return function () {
+      document.removeEventListener('keydown', handleEsc);
+    };
+  }, [handleEsc]);
+  var formatting = getSupportedFormatting(editorView.state.schema, intl, helpDialogState === null || helpDialogState === void 0 ? void 0 : helpDialogState.imageEnabled, quickInsertEnabled);
+  return (0, _react2.jsx)(_modalDialog.ModalTransition, null, helpDialogState !== null && helpDialogState !== void 0 && helpDialogState.isVisible ? (0, _react2.jsx)(_modalDialog.default, {
+    width: "large",
+    onClose: closeDialog,
+    testId: "help-modal-dialog"
+  }, (0, _react2.jsx)(ModalHeader, null), (0, _react2.jsx)("div", {
+    css: _styles.contentWrapper
+  }, (0, _react2.jsx)("div", {
+    css: _styles.line
+  }), (0, _react2.jsx)("div", {
+    css: _styles.content
+  }, (0, _react2.jsx)("div", {
+    css: _styles.column
+  }, (0, _react2.jsx)("h2", {
+    css: _styles.title
+  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, messages.keyboardShortcuts)), (0, _react2.jsx)("ul", null, formatting.filter(function (form) {
+    var keymap = form.keymap && form.keymap();
+    return keymap && keymap[_utils.browser.mac ? 'mac' : 'windows'];
+  }).map(function (form) {
+    return (0, _react2.jsx)("li", {
+      css: _styles.row,
+      key: "textFormatting-".concat(form.name)
+    }, (0, _react2.jsx)("span", null, form.name), getComponentFromKeymap(form.keymap()));
+  }), formatting.filter(function (form) {
+    return shortcutNamesWithoutKeymap.indexOf(form.type) !== -1;
+  }).filter(function (form) {
+    return form.autoFormatting;
+  }).map(function (form) {
+    return (0, _react2.jsx)("li", {
+      css: _styles.row,
+      key: "autoFormatting-".concat(form.name)
+    }, (0, _react2.jsx)("span", null, form.name), form.autoFormatting());
+  }))), (0, _react2.jsx)("div", {
+    css: _styles.line
+  }), (0, _react2.jsx)("div", {
+    css: _styles.column
+  }, (0, _react2.jsx)("h2", {
+    css: _styles.title
+  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, messages.markdown)), (0, _react2.jsx)("ul", null, formatting.filter(function (form) {
+    return shortcutNamesWithoutKeymap.indexOf(form.type) === -1;
+  }).map(function (form) {
+    return form.autoFormatting && (0, _react2.jsx)("li", {
+      key: "autoFormatting-".concat(form.name),
+      css: _styles.row
+    }, (0, _react2.jsx)("span", null, form.name), form.autoFormatting());
+  }))))), (0, _react2.jsx)(ModalFooter, null)) : null);
+};
 var _default = (0, _reactIntlNext.injectIntl)(HelpDialog);
 exports.default = _default;

package/dist/cjs/plugins/media/ui/MediaPicker/ClipboardWrapper.js

@@ -10,7 +10,8 @@ var _PickerFacadeProvider = _interopRequireDefault(require("./PickerFacadeProvid
 var _mediaPicker = require("@atlaskit/media-picker");
 var ClipboardWrapper = function ClipboardWrapper(_ref) {
   var mediaState = _ref.mediaState,
-    featureFlags = _ref.featureFlags;
+    featureFlags = _ref.featureFlags,
+    container = _ref.container;
   return /*#__PURE__*/_react.default.createElement(_PickerFacadeProvider.default, {
     mediaState: mediaState,
     analyticsName: "clipboard"
@@ -18,9 +19,17 @@ var ClipboardWrapper = function ClipboardWrapper(_ref) {
     var mediaClientConfig = _ref2.mediaClientConfig,
       config = _ref2.config,
       pickerFacadeInstance = _ref2.pickerFacadeInstance;
+    var clipboardConfig = Object.assign({}, config);
+    if ((featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.securedClipboard) === true) {
+      clipboardConfig.container = container;
+      clipboardConfig.onPaste = function (event) {
+        event.stopPropagation();
+        return false;
+      };
+    }
     return /*#__PURE__*/_react.default.createElement(_mediaPicker.Clipboard, {
       mediaClientConfig: mediaClientConfig,
-      config: config,
+      config: clipboardConfig,
       onError: pickerFacadeInstance.handleUploadError,
       onPreviewUpdate: pickerFacadeInstance.handleUploadPreviewUpdate,
       onEnd: pickerFacadeInstance.handleReady,

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

@@ -29,9 +29,11 @@ var MediaPicker = function MediaPicker(_ref) {
   var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['focus']),
     focusState = _useSharedPluginState.focusState;
   var featureFlags = mediaState.mediaOptions && mediaState.mediaOptions.featureFlags;
+  var container = editorDomElement;
   var clipboard = focusState !== null && focusState !== void 0 && focusState.hasFocus ? /*#__PURE__*/_react.default.createElement(_ClipboardWrapper.ClipboardWrapper, {
     mediaState: mediaState,
-    featureFlags: featureFlags
+    featureFlags: featureFlags,
+    container: container
   }) : null;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, clipboard, /*#__PURE__*/_react.default.createElement(_DropzoneWrapper.DropzoneWrapper, {
     mediaState: mediaState,

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

@@ -12,14 +12,15 @@ var _react = _interopRequireDefault(require("react"));
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _typeAhead = require("@atlaskit/editor-common/type-ahead");
 var _pluginKey = require("./plugin-key");
-var _search = require("./search");
 var _ModalElementBrowser = _interopRequireDefault(require("./ui/ModalElementBrowser"));
 var _commands = require("./commands");
 var _quickInsert = require("@atlaskit/editor-common/quick-insert");
+var _search = require("./search");
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 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 quickInsertPlugin = function quickInsertPlugin(_ref) {
-  var options = _ref.config;
+  var options = _ref.config,
+    api = _ref.api;
   return {
     name: 'quickInsert',
     pmPlugins: function pmPlugins(defaultItems) {
@@ -43,14 +44,10 @@ var quickInsertPlugin = function quickInsertPlugin(_ref) {
           var query = _ref3.query,
             editorState = _ref3.editorState;
           var quickInsertState = _pluginKey.pluginKey.getState(editorState);
-          return Promise.resolve((0, _quickInsert.getQuickInsertSuggestions)({
-            searchOptions: {
-              query: query,
-              disableDefaultItems: options === null || options === void 0 ? void 0 : options.disableDefaultItems
-            },
-            lazyDefaultItems: quickInsertState === null || quickInsertState === void 0 ? void 0 : quickInsertState.lazyDefaultItems,
-            providedItems: quickInsertState === null || quickInsertState === void 0 ? void 0 : quickInsertState.providedItems
-          }));
+          return Promise.resolve((0, _search.getQuickInsertSuggestions)({
+            query: query,
+            disableDefaultItems: options === null || options === void 0 ? void 0 : options.disableDefaultItems
+          }, quickInsertState === null || quickInsertState === void 0 ? void 0 : quickInsertState.lazyDefaultItems, quickInsertState === null || quickInsertState === void 0 ? void 0 : quickInsertState.providedItems));
         },
         selectItem: function selectItem(state, item, insert) {
           return item.action(insert, state);
@@ -68,7 +65,6 @@ var quickInsertPlugin = function quickInsertPlugin(_ref) {
       return null;
     },
     getSharedState: function getSharedState(editorState) {
-      var _quickInsertState$sug;
       if (!editorState) {
         return null;
       }
@@ -77,16 +73,22 @@ var quickInsertPlugin = function quickInsertPlugin(_ref) {
         return null;
       }
       return {
-        suggestions: (_quickInsertState$sug = quickInsertState.suggestions) !== null && _quickInsertState$sug !== void 0 ? _quickInsertState$sug : [],
         lazyDefaultItems: quickInsertState.lazyDefaultItems,
-        emptyStateHandler: quickInsertState.emptyStateHandler
+        emptyStateHandler: quickInsertState.emptyStateHandler,
+        providedItems: quickInsertState.providedItems
       };
     },
     actions: {
-      insertItem: _commands.insertItem
+      insertItem: _commands.insertItem,
+      getSuggestions: function getSuggestions(searchOptions) {
+        var _api$quickInsert$shar;
+        var _ref5 = (_api$quickInsert$shar = api === null || api === void 0 ? void 0 : api.quickInsert.sharedState.currentState()) !== null && _api$quickInsert$shar !== void 0 ? _api$quickInsert$shar : {},
+          lazyDefaultItems = _ref5.lazyDefaultItems,
+          providedItems = _ref5.providedItems;
+        return (0, _search.getQuickInsertSuggestions)(searchOptions, lazyDefaultItems, providedItems);
+      }
     },
     commands: {
-      search: _search.search,
       openElementBrowserModal: _commands.openElementBrowserModal
     }
   };
@@ -114,20 +116,12 @@ function quickInsertPluginFactory(defaultItems, providerFactory, getIntl, dispat
           // getting confused when two editors exist within the same page.
           lazyDefaultItems: function lazyDefaultItems() {
             return (0, _quickInsert.memoProcessQuickInsertItems)(defaultItems || [], getIntl());
-          },
-          suggestions: []
+          }
         };
       },
       apply: function apply(tr, pluginState) {
         var meta = tr.getMeta(_pluginKey.pluginKey);
         if (meta) {
-          if ('searchOptions' in meta) {
-            meta.suggestions = (0, _quickInsert.getQuickInsertSuggestions)({
-              searchOptions: meta.searchOptions,
-              lazyDefaultItems: pluginState.lazyDefaultItems,
-              providedItems: pluginState.providedItems
-            });
-          }
           var keys = Object.keys(meta);
           var changed = keys.some(function (key) {
             return pluginState[key] !== meta[key];
@@ -143,7 +137,7 @@ function quickInsertPluginFactory(defaultItems, providerFactory, getIntl, dispat
     },
     view: function view(editorView) {
       var providerHandler = /*#__PURE__*/function () {
-        var _ref5 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(_name, providerPromise) {
+        var _ref6 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(_name, providerPromise) {
           var provider, providedItems;
           return _regenerator.default.wrap(function _callee$(_context) {
             while (1) switch (_context.prev = _context.next) {
@@ -179,7 +173,7 @@ function quickInsertPluginFactory(defaultItems, providerFactory, getIntl, dispat
           }, _callee, null, [[1, 11]]);
         }));
         return function providerHandler(_x, _x2) {
-          return _ref5.apply(this, arguments);
+          return _ref6.apply(this, arguments);
         };
       }();
       providerFactory.subscribe('quickInsertProvider', providerHandler);

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

@@ -1,25 +1,33 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.search = void 0;
-var _pluginKey = require("./plugin-key");
-var search = function search(_ref) {
-  var query = _ref.query,
-    category = _ref.category,
-    disableDefaultItems = _ref.disableDefaultItems,
-    featuredItems = _ref.featuredItems;
-  return function (_ref2) {
-    var tr = _ref2.tr;
-    return tr.setMeta(_pluginKey.pluginKey, {
-      searchOptions: {
-        query: query,
-        category: category,
-        disableDefaultItems: disableDefaultItems,
-        featuredItems: featuredItems
-      }
-    });
+exports.getQuickInsertSuggestions = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _utils = require("@atlaskit/editor-common/utils");
+var _quickInsert = require("@atlaskit/editor-common/quick-insert");
+var getQuickInsertSuggestions = function getQuickInsertSuggestions(searchOptions) {
+  var lazyDefaultItems = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {
+    return [];
   };
+  var providedItems = arguments.length > 2 ? arguments[2] : undefined;
+  var query = searchOptions.query,
+    category = searchOptions.category,
+    disableDefaultItems = searchOptions.disableDefaultItems,
+    featuredItems = searchOptions.featuredItems;
+  var defaultItems = disableDefaultItems ? [] : lazyDefaultItems();
+  var items = providedItems ? (0, _utils.dedupe)([].concat((0, _toConsumableArray2.default)(defaultItems), (0, _toConsumableArray2.default)(providedItems)), function (item) {
+    return item.title;
+  }) : defaultItems;
+  if (featuredItems) {
+    return items.filter(function (item) {
+      return item.featured;
+    });
+  }
+  return (0, _quickInsert.find)(query || '', category === 'all' || !category ? items : items.filter(function (item) {
+    return item.categories && item.categories.includes(category);
+  }));
 };
-exports.search = search;
+exports.getQuickInsertSuggestions = getQuickInsertSuggestions;

package/dist/cjs/plugins/quick-insert/ui/ModalElementBrowser/index.js

@@ -11,7 +11,7 @@ var _WithPluginState = _interopRequireDefault(require("../../../../ui/WithPlugin
 var _pluginKey = require("../../plugin-key");
 var _ModalElementBrowser = _interopRequireDefault(require("../../../../ui/ElementBrowser/ModalElementBrowser"));
 var _commands = require("../../commands");
-var _quickInsert = require("@atlaskit/editor-common/quick-insert");
+var _search = require("../../search");
 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; }
 var Modal = function Modal(_ref) {
@@ -19,14 +19,10 @@ var Modal = function Modal(_ref) {
     editorView = _ref.editorView,
     helpUrl = _ref.helpUrl;
   var getItems = (0, _react.useCallback)(function (query, category) {
-    return (0, _quickInsert.getQuickInsertSuggestions)({
-      searchOptions: {
-        query: query,
-        category: category
-      },
-      lazyDefaultItems: quickInsertState === null || quickInsertState === void 0 ? void 0 : quickInsertState.lazyDefaultItems,
-      providedItems: quickInsertState === null || quickInsertState === void 0 ? void 0 : quickInsertState.providedItems
-    });
+    return (0, _search.getQuickInsertSuggestions)({
+      query: query,
+      category: category
+    }, quickInsertState === null || quickInsertState === void 0 ? void 0 : quickInsertState.lazyDefaultItems, quickInsertState === null || quickInsertState === void 0 ? void 0 : quickInsertState.providedItems);
   }, [quickInsertState === null || quickInsertState === void 0 ? void 0 : quickInsertState.lazyDefaultItems, quickInsertState === null || quickInsertState === void 0 ? void 0 : quickInsertState.providedItems]);
   var focusInEditor = (0, _react.useCallback)(function () {
     if (!editorView.hasFocus()) {

package/dist/cjs/ui/ContextPanel/index.js

@@ -26,7 +26,9 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _ui = require("@atlaskit/editor-common/ui");
 var _WithPluginState = _interopRequireDefault(require("../WithPluginState"));
 var _WithEditorActions = _interopRequireDefault(require("../WithEditorActions"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _document = require("../../utils/document");
+var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _excluded = ["actions"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 /** @jsx jsx */
@@ -42,7 +44,12 @@ var WIDE_EDITOR_WIDTH = _editorSharedStyles.akEditorWideLayoutWidth + _editorSha
 var FULLWIDTH_MODE = 'full-width';
 var WIDE_MODE = 'wide';
 var absolutePanelStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  right: 0;\n  height: calc(100% - ", ");\n"])), _editorSharedStyles.ATLASSIAN_NAVIGATION_HEIGHT);
-var shouldPanelBePositionedOverEditor = function shouldPanelBePositionedOverEditor(editorWidth, panelWidth) {
+var checkTableExistsInDoc = function checkTableExistsInDoc(editorView) {
+  var tableNodeSchema = editorView.state.schema.nodes.table;
+  var findResult = (0, _utils.findChildrenByType)(editorView.state.doc, tableNodeSchema);
+  return findResult.length > 0;
+};
+var shouldPanelBePositionedOverEditor = function shouldPanelBePositionedOverEditor(editorWidth, panelWidth, editorView) {
   var lineLength = editorWidth.lineLength,
     _editorWidth$containe = editorWidth.containerWidth,
     containerWidth = _editorWidth$containe === void 0 ? 0 : _editorWidth$containe,
@@ -50,7 +57,17 @@ var shouldPanelBePositionedOverEditor = function shouldPanelBePositionedOverEdit
   var editorNotFullWidth = !(lineLength && lineLength > _editorSharedStyles.akEditorDefaultLayoutWidth);
   var hasSpaceForPanel = !contentBreakoutModes.length && containerWidth >= panelWidth * 2 + EDITOR_WIDTH;
   var hasSpaceForWideBreakoutsAndPanel = !contentBreakoutModes.includes(FULLWIDTH_MODE) && contentBreakoutModes.includes(WIDE_MODE) && containerWidth >= panelWidth * 2 + WIDE_EDITOR_WIDTH;
-  return editorNotFullWidth && (hasSpaceForPanel || hasSpaceForWideBreakoutsAndPanel);
+  if (!(0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') || !editorView) {
+    return editorNotFullWidth && (hasSpaceForPanel || hasSpaceForWideBreakoutsAndPanel);
+  } else {
+    // when custom table width feature flag is on,
+    // there are scenarios when a table has attr layout default, but width is in full-width or very wide
+    // but in this case we still want the shouldPanelBePositionedOverEditor return false
+    // previous logic is returning false when table layout default
+    // but when custom table width feature flag is one, we want to return false whenever there is a table in the doc
+    var isTableInDoc = checkTableExistsInDoc(editorView);
+    return editorNotFullWidth && (hasSpaceForPanel || hasSpaceForWideBreakoutsAndPanel) && !isTableInDoc;
+  }
 };
 exports.shouldPanelBePositionedOverEditor = shouldPanelBePositionedOverEditor;
 var panelHidden = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: 0;\n"])));
@@ -129,7 +146,9 @@ var SwappableContentArea = /*#__PURE__*/function (_React$PureComponent) {
     key: "render",
     value: function render() {
       var _this2 = this;
-      var editorWidth = this.props.editorWidth;
+      var _this$props = this.props,
+        editorWidth = _this$props.editorWidth,
+        editorView = _this$props.editorView;
       var width = _editorSharedStyles.akEditorContextPanelWidth;
       var userVisible = !!this.props.visible;
       var visible = userVisible || !!this.state.currentPluginContent;
@@ -138,7 +157,7 @@ var SwappableContentArea = /*#__PURE__*/function (_React$PureComponent) {
           broadcastPosition = _ref.broadcastPosition,
           positionedOverEditor = _ref.positionedOverEditor;
         var contextPanelWidth = visible ? width : 0;
-        var newPosition = editorWidth ? shouldPanelBePositionedOverEditor(editorWidth, width) : false;
+        var newPosition = editorWidth ? shouldPanelBePositionedOverEditor(editorWidth, width, editorView) : false;
         broadcastWidth(contextPanelWidth);
         (newPosition && visible) !== positionedOverEditor && broadcastPosition(newPosition && visible);
         return (0, _react2.jsx)("div", {