@atlaskit/editor-core 187.40.2 → 187.41.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/editor-core
 
+## 187.41.0
+
+### Minor Changes
+
+- [`c06bb97591a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c06bb97591a) - [ED-19023] Add distorted duration to TTI event (tracking tab visibility)
+
+### Patch Changes
+
+- [`d4cbb84052d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d4cbb84052d) - Move element-browser to `editor-common` to decouple quick-insert plugin.
+- Updated dependencies
+
 ## 187.40.2
 
 ### Patch Changes

package/dist/cjs/editor-next/hooks/useEditorMeasuresConstructor.js

@@ -28,8 +28,8 @@ function useEditorConstructor(performanceTracking, featureFlags, getExperienceSt
     (0, _utils.startMeasure)(_measureEnum.default.EDITOR_MOUNTED);
     if (performanceTracking !== null && performanceTracking !== void 0 && (_performanceTracking$ = performanceTracking.ttiTracking) !== null && _performanceTracking$ !== void 0 && _performanceTracking$.enabled || featureFlags !== null && featureFlags !== void 0 && featureFlags.ufo) {
       var _performanceTracking$2, _performanceTracking$3;
-      (0, _utils.measureTTI)(function (tti, ttiFromInvocation, canceled) {
-        (0, _editorMeasureTTICallback.default)(tti, ttiFromInvocation, canceled, performanceTracking, featureFlags, createAnalyticsEvent, getExperienceStore());
+      (0, _utils.measureTTI)(function (tti, ttiFromInvocation, canceled, distortedDuration) {
+        (0, _editorMeasureTTICallback.default)(tti, ttiFromInvocation, canceled, distortedDuration, performanceTracking, featureFlags, createAnalyticsEvent, getExperienceStore());
       }, performanceTracking === null || performanceTracking === void 0 ? void 0 : (_performanceTracking$2 = performanceTracking.ttiTracking) === null || _performanceTracking$2 === void 0 ? void 0 : _performanceTracking$2.ttiIdleThreshold, performanceTracking === null || performanceTracking === void 0 ? void 0 : (_performanceTracking$3 = performanceTracking.ttiTracking) === null || _performanceTracking$3 === void 0 ? void 0 : _performanceTracking$3.ttiCancelTimeout);
     }
   });

package/dist/cjs/editor-next/utils/editorMeasureTTICallback.js

@@ -7,7 +7,7 @@ exports.default = editorMeasureTTICallback;
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _ufo = require("@atlaskit/editor-common/ufo");
 var _utils = require("@atlaskit/editor-common/utils");
-function editorMeasureTTICallback(tti, ttiFromInvocation, canceled, performanceTracking, featureFlags, createAnalyticsEvent, experienceStore) {
+function editorMeasureTTICallback(tti, ttiFromInvocation, canceled, distortedDuration, performanceTracking, featureFlags, createAnalyticsEvent, experienceStore) {
   var _performanceTracking$;
   if (performanceTracking !== null && performanceTracking !== void 0 && (_performanceTracking$ = performanceTracking.ttiTracking) !== null && _performanceTracking$ !== void 0 && _performanceTracking$.enabled && createAnalyticsEvent) {
     var _ttiTracking;
@@ -18,7 +18,8 @@ function editorMeasureTTICallback(tti, ttiFromInvocation, canceled, performanceT
         attributes: {
           tti: tti,
           ttiFromInvocation: ttiFromInvocation,
-          canceled: canceled
+          canceled: canceled,
+          distortedDuration: distortedDuration
         },
         eventType: _analytics.EVENT_TYPE.OPERATIONAL
       }

package/dist/cjs/element-browser.js

@@ -1,13 +1,12 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 Object.defineProperty(exports, "ElementBrowser", {
   enumerable: true,
   get: function get() {
-    return _ElementBrowser.default;
+    return _elementBrowser.ElementBrowser;
   }
 });
-var _ElementBrowser = _interopRequireDefault(require("./ui/ElementBrowser"));
+var _elementBrowser = require("@atlaskit/editor-common/element-browser");

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

@@ -59,7 +59,8 @@ var quickInsertPlugin = function quickInsertPlugin(_ref) {
       if (options !== null && options !== void 0 && options.enableElementBrowser) {
         return /*#__PURE__*/_react.default.createElement(_ModalElementBrowser.default, {
           editorView: editorView,
-          helpUrl: options === null || options === void 0 ? void 0 : options.elementBrowserHelpUrl
+          helpUrl: options === null || options === void 0 ? void 0 : options.elementBrowserHelpUrl,
+          pluginInjectionAPI: api
         });
       }
       return null;
@@ -75,7 +76,8 @@ var quickInsertPlugin = function quickInsertPlugin(_ref) {
       return {
         lazyDefaultItems: quickInsertState.lazyDefaultItems,
         emptyStateHandler: quickInsertState.emptyStateHandler,
-        providedItems: quickInsertState.providedItems
+        providedItems: quickInsertState.providedItems,
+        isElementBrowserModalOpen: quickInsertState.isElementBrowserModalOpen
       };
     },
     actions: {

package/dist/cjs/{ui/ElementBrowser → plugins/quick-insert/ui/ModalElementBrowser}/ModalElementBrowser.js

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.MODAL_WRAPPER_PADDING = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireWildcard(require("react"));
@@ -17,21 +17,22 @@ var _constants = require("@atlaskit/theme/constants");
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
 var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
 var _questionCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/question-circle"));
-var _ElementBrowserLoader = _interopRequireDefault(require("./components/ElementBrowserLoader"));
+var _elementBrowser = require("@atlaskit/editor-common/element-browser");
 var _categories = require("./categories");
-var _constants2 = require("./constants");
 var _messages = require("./messages");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 /** @jsx jsx */
 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_WRAPPER_PADDING = 16;
+exports.MODAL_WRAPPER_PADDING = MODAL_WRAPPER_PADDING;
 var actions = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-flex;\n  margin: 0 -4px;\n"])));
-var actionItem = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1 0 auto;\n  margin: 0 4px;\n"])));
-var wrapper = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex: 1 1 auto;\n  box-sizing: border-box;\n  padding: ", "px ", "px 0 10px;\n  overflow: hidden;\n  background-color: ", ";\n  border-radius: ", "px;\n"])), _constants2.MODAL_WRAPPER_PADDING, _constants2.MODAL_WRAPPER_PADDING, (0, _components.themed)({
+var actionItem = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1 0 auto;\n  margin: 0 ", ";\n"])), "var(--ds-space-050, 4px)");
+var wrapper = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex: 1 1 auto;\n  box-sizing: border-box;\n  padding: ", " ", " 0 10px;\n  overflow: hidden;\n  background-color: ", ";\n  border-radius: ", "px;\n"])), "var(--ds-space-200, 16px)", "var(--ds-space-200, 16px)", (0, _components.themed)({
   light: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
   dark: "var(--ds-surface-overlay, ".concat(_colors.DN50, ")")
 })(), (0, _constants.borderRadius)());
-var modalFooter = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  padding: ", "px;\n\n  position: relative;\n  align-items: center;\n  justify-content: space-between;\n"])), _constants2.MODAL_WRAPPER_PADDING);
+var modalFooter = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  padding: ", ";\n\n  position: relative;\n  align-items: center;\n  justify-content: space-between;\n"])), "var(--ds-space-200, 16px)");
 var ModalElementBrowser = function ModalElementBrowser(props) {
   var _useState = (0, _react.useState)(),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -65,7 +66,7 @@ var ModalElementBrowser = function ModalElementBrowser(props) {
   var RenderBody = (0, _react.useCallback)(function () {
     return (0, _react2.jsx)("div", {
       css: wrapper
-    }, (0, _react2.jsx)(_ElementBrowserLoader.default, {
+    }, (0, _react2.jsx)(_elementBrowser.ElementBrowser, {
       categories: (0, _categories.getCategories)(props.intl),
       getItems: props.getItems,
       showSearch: true,

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

@@ -7,11 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _WithPluginState = _interopRequireDefault(require("../../../../ui/WithPluginState"));
-var _pluginKey = require("../../plugin-key");
-var _ModalElementBrowser = _interopRequireDefault(require("../../../../ui/ElementBrowser/ModalElementBrowser"));
+var _ModalElementBrowser = _interopRequireDefault(require("./ModalElementBrowser"));
 var _commands = require("../../commands");
 var _search = require("../../search");
+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; }
 var Modal = function Modal(_ref) {
@@ -49,20 +48,14 @@ var Modal = function Modal(_ref) {
 };
 var _default = function _default(_ref2) {
   var editorView = _ref2.editorView,
-    helpUrl = _ref2.helpUrl;
-  var render = (0, _react.useCallback)(function (_ref3) {
-    var quickInsertState = _ref3.quickInsertState;
-    return /*#__PURE__*/_react.default.createElement(Modal, {
-      quickInsertState: quickInsertState,
-      editorView: editorView,
-      helpUrl: helpUrl
-    });
-  }, [editorView, helpUrl]);
-  return /*#__PURE__*/_react.default.createElement(_WithPluginState.default, {
-    plugins: {
-      quickInsertState: _pluginKey.pluginKey
-    },
-    render: render
+    helpUrl = _ref2.helpUrl,
+    pluginInjectionAPI = _ref2.pluginInjectionAPI;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionAPI, ['quickInsert']),
+    quickInsertState = _useSharedPluginState.quickInsertState;
+  return /*#__PURE__*/_react.default.createElement(Modal, {
+    quickInsertState: quickInsertState !== null && quickInsertState !== void 0 ? quickInsertState : undefined,
+    editorView: editorView,
+    helpUrl: helpUrl
   });
 };
 exports.default = _default;

package/dist/cjs/ui/ElementBrowser/InsertMenu.js

@@ -15,9 +15,8 @@ var _theme = require("@atlaskit/theme");
 var _components = require("@atlaskit/theme/components");
 var _colors = require("@atlaskit/theme/colors");
 var _quickInsert = require("@atlaskit/editor-common/quick-insert");
-var _withOuterListeners = _interopRequireDefault(require("../with-outer-listeners"));
-var _ElementBrowserLoader = _interopRequireDefault(require("./components/ElementBrowserLoader"));
-var _constants = require("./constants");
+var _uiReact = require("@atlaskit/editor-common/ui-react");
+var _elementBrowser = require("@atlaskit/editor-common/element-browser");
 var _excluded = ["children"];
 var _templateObject, _templateObject2;
 /** @jsx jsx */
@@ -103,7 +102,7 @@ var InsertMenu = function InsertMenu(_ref) {
     handleClickOutside: toggleVisiblity,
     handleEscapeKeydown: toggleVisiblity,
     closeOnTab: true
-  }, (0, _react2.jsx)(_ElementBrowserLoader.default, {
+  }, (0, _react2.jsx)(_elementBrowser.ElementBrowser, {
     mode: "inline",
     getItems: getItems,
     emptyStateHandler: emptyStateHandler,
@@ -137,7 +136,7 @@ var getInsertMenuHeight = function getInsertMenuHeight(_ref3) {
   // Figure based on visuals to exclude the searchbar, padding/margin, and the ViewMore item.
   var EXTRA_SPACE_EXCLUDING_ELEMENTLIST = 112;
   if (itemCount > 0 && itemCount < 6) {
-    return itemCount * _constants.ELEMENT_ITEM_HEIGHT + EXTRA_SPACE_EXCLUDING_ELEMENTLIST;
+    return itemCount * _elementBrowser.ELEMENT_ITEM_HEIGHT + EXTRA_SPACE_EXCLUDING_ELEMENTLIST;
   }
   return 560; // For showing 6 Elements.
 };
@@ -158,6 +157,6 @@ var FlexWrapper = function FlexWrapper(props) {
     css: flexWrapperStyles
   }, divProps), children);
 };
-var ElementBrowserWrapper = (0, _withOuterListeners.default)(FlexWrapper);
+var ElementBrowserWrapper = (0, _uiReact.withReactEditorViewOuterListeners)(FlexWrapper);
 var _default = InsertMenu;
 exports.default = _default;

package/dist/cjs/ui/ElementBrowser/types.js

@@ -2,11 +2,4 @@
 
 Object.defineProperty(exports, "__esModule", {
   value: true
-});
-exports.Modes = void 0;
-var Modes = /*#__PURE__*/function (Modes) {
-  Modes["full"] = "full";
-  Modes["inline"] = "inline";
-  return Modes;
-}({});
-exports.Modes = Modes;
+});

package/dist/cjs/version-wrapper.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.version = exports.nextMajorVersion = exports.name = void 0;
 var name = "@atlaskit/editor-core";
 exports.name = name;
-var version = "187.40.2";
+var version = "187.41.0";
 exports.version = version;
 var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');

package/dist/es2019/editor-next/hooks/useEditorMeasuresConstructor.js

@@ -22,8 +22,8 @@ export default function useEditorConstructor(performanceTracking, featureFlags,
     startMeasure(measurements.EDITOR_MOUNTED);
     if (performanceTracking !== null && performanceTracking !== void 0 && (_performanceTracking$ = performanceTracking.ttiTracking) !== null && _performanceTracking$ !== void 0 && _performanceTracking$.enabled || featureFlags !== null && featureFlags !== void 0 && featureFlags.ufo) {
       var _performanceTracking$2, _performanceTracking$3;
-      measureTTI((tti, ttiFromInvocation, canceled) => {
-        editorMeasureTTICallback(tti, ttiFromInvocation, canceled, performanceTracking, featureFlags, createAnalyticsEvent, getExperienceStore());
+      measureTTI((tti, ttiFromInvocation, canceled, distortedDuration) => {
+        editorMeasureTTICallback(tti, ttiFromInvocation, canceled, distortedDuration, performanceTracking, featureFlags, createAnalyticsEvent, getExperienceStore());
       }, performanceTracking === null || performanceTracking === void 0 ? void 0 : (_performanceTracking$2 = performanceTracking.ttiTracking) === null || _performanceTracking$2 === void 0 ? void 0 : _performanceTracking$2.ttiIdleThreshold, performanceTracking === null || performanceTracking === void 0 ? void 0 : (_performanceTracking$3 = performanceTracking.ttiTracking) === null || _performanceTracking$3 === void 0 ? void 0 : _performanceTracking$3.ttiCancelTimeout);
     }
   });

package/dist/es2019/editor-next/utils/editorMeasureTTICallback.js

@@ -1,7 +1,7 @@
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, fireAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import { EditorExperience } from '@atlaskit/editor-common/ufo';
 import { getTTISeverity } from '@atlaskit/editor-common/utils';
-export default function editorMeasureTTICallback(tti, ttiFromInvocation, canceled, performanceTracking, featureFlags, createAnalyticsEvent, experienceStore) {
+export default function editorMeasureTTICallback(tti, ttiFromInvocation, canceled, distortedDuration, performanceTracking, featureFlags, createAnalyticsEvent, experienceStore) {
   var _performanceTracking$;
   if (performanceTracking !== null && performanceTracking !== void 0 && (_performanceTracking$ = performanceTracking.ttiTracking) !== null && _performanceTracking$ !== void 0 && _performanceTracking$.enabled && createAnalyticsEvent) {
     var _ttiTracking;
@@ -12,7 +12,8 @@ export default function editorMeasureTTICallback(tti, ttiFromInvocation, cancele
         attributes: {
           tti,
           ttiFromInvocation,
-          canceled
+          canceled,
+          distortedDuration
         },
         eventType: EVENT_TYPE.OPERATIONAL
       }

package/dist/es2019/element-browser.js

@@ -1 +1 @@
-export { default as ElementBrowser } from './ui/ElementBrowser';
+export { ElementBrowser } from '@atlaskit/editor-common/element-browser';

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

@@ -48,7 +48,8 @@ const quickInsertPlugin = ({
     if (options !== null && options !== void 0 && options.enableElementBrowser) {
       return /*#__PURE__*/React.createElement(ModalElementBrowser, {
         editorView: editorView,
-        helpUrl: options === null || options === void 0 ? void 0 : options.elementBrowserHelpUrl
+        helpUrl: options === null || options === void 0 ? void 0 : options.elementBrowserHelpUrl,
+        pluginInjectionAPI: api
       });
     }
     return null;
@@ -64,7 +65,8 @@ const quickInsertPlugin = ({
     return {
       lazyDefaultItems: quickInsertState.lazyDefaultItems,
       emptyStateHandler: quickInsertState.emptyStateHandler,
-      providedItems: quickInsertState.providedItems
+      providedItems: quickInsertState.providedItems,
+      isElementBrowserModalOpen: quickInsertState.isElementBrowserModalOpen
     };
   },
   actions: {

package/dist/es2019/{ui/ElementBrowser → plugins/quick-insert/ui/ModalElementBrowser}/ModalElementBrowser.js

@@ -8,23 +8,23 @@ import { borderRadius } from '@atlaskit/theme/constants';
 import Button from '@atlaskit/button/custom-theme-button';
 import Modal, { ModalTransition, useModal } from '@atlaskit/modal-dialog';
 import QuestionCircleIcon from '@atlaskit/icon/glyph/question-circle';
-import ElementBrowser from './components/ElementBrowserLoader';
+import { ElementBrowser } from '@atlaskit/editor-common/element-browser';
 import { getCategories } from './categories';
-import { MODAL_WRAPPER_PADDING } from './constants';
 import { messages } from './messages';
+export const MODAL_WRAPPER_PADDING = 16;
 const actions = css`
   display: inline-flex;
   margin: 0 -4px;
 `;
 const actionItem = css`
   flex: 1 0 auto;
-  margin: 0 4px;
+  margin: 0 ${"var(--ds-space-050, 4px)"};
 `;
 const wrapper = css`
   display: flex;
   flex: 1 1 auto;
   box-sizing: border-box;
-  padding: ${MODAL_WRAPPER_PADDING}px ${MODAL_WRAPPER_PADDING}px 0 10px;
+  padding: ${"var(--ds-space-200, 16px)"} ${"var(--ds-space-200, 16px)"} 0 10px;
   overflow: hidden;
   background-color: ${themed({
   light: `var(--ds-surface-overlay, ${N0})`,
@@ -34,7 +34,7 @@ const wrapper = css`
 `;
 const modalFooter = css`
   display: flex;
-  padding: ${MODAL_WRAPPER_PADDING}px;
+  padding: ${"var(--ds-space-200, 16px)"};
 
   position: relative;
   align-items: center;

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

@@ -1,9 +1,8 @@
 import React, { useCallback } from 'react';
-import WithPluginState from '../../../../ui/WithPluginState';
-import { pluginKey } from '../../plugin-key';
-import ModalElementBrowser from '../../../../ui/ElementBrowser/ModalElementBrowser';
+import ModalElementBrowser from './ModalElementBrowser';
 import { closeElementBrowserModal, insertItem } from '../../commands';
 import { getQuickInsertSuggestions } from '../../search';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 const Modal = ({
   quickInsertState,
   editorView,
@@ -38,19 +37,15 @@ const Modal = ({
 };
 export default (({
   editorView,
-  helpUrl
+  helpUrl,
+  pluginInjectionAPI
 }) => {
-  const render = useCallback(({
+  const {
     quickInsertState
-  }) => /*#__PURE__*/React.createElement(Modal, {
-    quickInsertState: quickInsertState,
+  } = useSharedPluginState(pluginInjectionAPI, ['quickInsert']);
+  return /*#__PURE__*/React.createElement(Modal, {
+    quickInsertState: quickInsertState !== null && quickInsertState !== void 0 ? quickInsertState : undefined,
     editorView: editorView,
     helpUrl: helpUrl
-  }), [editorView, helpUrl]);
-  return /*#__PURE__*/React.createElement(WithPluginState, {
-    plugins: {
-      quickInsertState: pluginKey
-    },
-    render: render
   });
 });

package/dist/es2019/ui/ElementBrowser/InsertMenu.js

@@ -9,9 +9,8 @@ import { borderRadius } from '@atlaskit/theme';
 import { themed } from '@atlaskit/theme/components';
 import { DN50, N0, N30A, N60A } from '@atlaskit/theme/colors';
 import { IconCode, IconDate, IconDecision, IconDivider, IconExpand, IconPanel, IconQuote, IconStatus } from '@atlaskit/editor-common/quick-insert';
-import withOuterListeners from '../with-outer-listeners';
-import ElementBrowser from './components/ElementBrowserLoader';
-import { ELEMENT_ITEM_HEIGHT } from './constants';
+import { withReactEditorViewOuterListeners as withOuterListeners } from '@atlaskit/editor-common/ui-react';
+import { ElementBrowser, ELEMENT_ITEM_HEIGHT } from '@atlaskit/editor-common/element-browser';
 const InsertMenu = ({
   editorView,
   dropdownItems,

package/dist/es2019/ui/ElementBrowser/types.js

@@ -1,5 +1 @@
-export let Modes = /*#__PURE__*/function (Modes) {
-  Modes["full"] = "full";
-  Modes["inline"] = "inline";
-  return Modes;
-}({});
+export {};

package/dist/es2019/version-wrapper.js

@@ -1,5 +1,5 @@
 export const name = "@atlaskit/editor-core";
-export const version = "187.40.2";
+export const version = "187.41.0";
 export const nextMajorVersion = () => {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/esm/editor-next/hooks/useEditorMeasuresConstructor.js

@@ -22,8 +22,8 @@ export default function useEditorConstructor(performanceTracking, featureFlags,
     startMeasure(measurements.EDITOR_MOUNTED);
     if (performanceTracking !== null && performanceTracking !== void 0 && (_performanceTracking$ = performanceTracking.ttiTracking) !== null && _performanceTracking$ !== void 0 && _performanceTracking$.enabled || featureFlags !== null && featureFlags !== void 0 && featureFlags.ufo) {
       var _performanceTracking$2, _performanceTracking$3;
-      measureTTI(function (tti, ttiFromInvocation, canceled) {
-        editorMeasureTTICallback(tti, ttiFromInvocation, canceled, performanceTracking, featureFlags, createAnalyticsEvent, getExperienceStore());
+      measureTTI(function (tti, ttiFromInvocation, canceled, distortedDuration) {
+        editorMeasureTTICallback(tti, ttiFromInvocation, canceled, distortedDuration, performanceTracking, featureFlags, createAnalyticsEvent, getExperienceStore());
       }, performanceTracking === null || performanceTracking === void 0 ? void 0 : (_performanceTracking$2 = performanceTracking.ttiTracking) === null || _performanceTracking$2 === void 0 ? void 0 : _performanceTracking$2.ttiIdleThreshold, performanceTracking === null || performanceTracking === void 0 ? void 0 : (_performanceTracking$3 = performanceTracking.ttiTracking) === null || _performanceTracking$3 === void 0 ? void 0 : _performanceTracking$3.ttiCancelTimeout);
     }
   });

package/dist/esm/editor-next/utils/editorMeasureTTICallback.js

@@ -1,7 +1,7 @@
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, fireAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import { EditorExperience } from '@atlaskit/editor-common/ufo';
 import { getTTISeverity } from '@atlaskit/editor-common/utils';
-export default function editorMeasureTTICallback(tti, ttiFromInvocation, canceled, performanceTracking, featureFlags, createAnalyticsEvent, experienceStore) {
+export default function editorMeasureTTICallback(tti, ttiFromInvocation, canceled, distortedDuration, performanceTracking, featureFlags, createAnalyticsEvent, experienceStore) {
   var _performanceTracking$;
   if (performanceTracking !== null && performanceTracking !== void 0 && (_performanceTracking$ = performanceTracking.ttiTracking) !== null && _performanceTracking$ !== void 0 && _performanceTracking$.enabled && createAnalyticsEvent) {
     var _ttiTracking;
@@ -12,7 +12,8 @@ export default function editorMeasureTTICallback(tti, ttiFromInvocation, cancele
         attributes: {
           tti: tti,
           ttiFromInvocation: ttiFromInvocation,
-          canceled: canceled
+          canceled: canceled,
+          distortedDuration: distortedDuration
         },
         eventType: EVENT_TYPE.OPERATIONAL
       }

package/dist/esm/element-browser.js

@@ -1 +1 @@
-export { default as ElementBrowser } from './ui/ElementBrowser';
+export { ElementBrowser } from '@atlaskit/editor-common/element-browser';

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

@@ -52,7 +52,8 @@ var quickInsertPlugin = function quickInsertPlugin(_ref) {
       if (options !== null && options !== void 0 && options.enableElementBrowser) {
         return /*#__PURE__*/React.createElement(ModalElementBrowser, {
           editorView: editorView,
-          helpUrl: options === null || options === void 0 ? void 0 : options.elementBrowserHelpUrl
+          helpUrl: options === null || options === void 0 ? void 0 : options.elementBrowserHelpUrl,
+          pluginInjectionAPI: api
         });
       }
       return null;
@@ -68,7 +69,8 @@ var quickInsertPlugin = function quickInsertPlugin(_ref) {
       return {
         lazyDefaultItems: quickInsertState.lazyDefaultItems,
         emptyStateHandler: quickInsertState.emptyStateHandler,
-        providedItems: quickInsertState.providedItems
+        providedItems: quickInsertState.providedItems,
+        isElementBrowserModalOpen: quickInsertState.isElementBrowserModalOpen
       };
     },
     actions: {

package/dist/esm/{ui/ElementBrowser → plugins/quick-insert/ui/ModalElementBrowser}/ModalElementBrowser.js

@@ -11,17 +11,17 @@ import { borderRadius } from '@atlaskit/theme/constants';
 import Button from '@atlaskit/button/custom-theme-button';
 import Modal, { ModalTransition, useModal } from '@atlaskit/modal-dialog';
 import QuestionCircleIcon from '@atlaskit/icon/glyph/question-circle';
-import ElementBrowser from './components/ElementBrowserLoader';
+import { ElementBrowser } from '@atlaskit/editor-common/element-browser';
 import { getCategories } from './categories';
-import { MODAL_WRAPPER_PADDING } from './constants';
 import { messages } from './messages';
+export var MODAL_WRAPPER_PADDING = 16;
 var actions = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  margin: 0 -4px;\n"])));
-var actionItem = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  flex: 1 0 auto;\n  margin: 0 4px;\n"])));
-var wrapper = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex: 1 1 auto;\n  box-sizing: border-box;\n  padding: ", "px ", "px 0 10px;\n  overflow: hidden;\n  background-color: ", ";\n  border-radius: ", "px;\n"])), MODAL_WRAPPER_PADDING, MODAL_WRAPPER_PADDING, themed({
+var actionItem = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  flex: 1 0 auto;\n  margin: 0 ", ";\n"])), "var(--ds-space-050, 4px)");
+var wrapper = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex: 1 1 auto;\n  box-sizing: border-box;\n  padding: ", " ", " 0 10px;\n  overflow: hidden;\n  background-color: ", ";\n  border-radius: ", "px;\n"])), "var(--ds-space-200, 16px)", "var(--ds-space-200, 16px)", themed({
   light: "var(--ds-surface-overlay, ".concat(N0, ")"),
   dark: "var(--ds-surface-overlay, ".concat(DN50, ")")
 })(), borderRadius());
-var modalFooter = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  padding: ", "px;\n\n  position: relative;\n  align-items: center;\n  justify-content: space-between;\n"])), MODAL_WRAPPER_PADDING);
+var modalFooter = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  padding: ", ";\n\n  position: relative;\n  align-items: center;\n  justify-content: space-between;\n"])), "var(--ds-space-200, 16px)");
 var ModalElementBrowser = function ModalElementBrowser(props) {
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),

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

@@ -1,9 +1,8 @@
 import React, { useCallback } from 'react';
-import WithPluginState from '../../../../ui/WithPluginState';
-import { pluginKey } from '../../plugin-key';
-import ModalElementBrowser from '../../../../ui/ElementBrowser/ModalElementBrowser';
+import ModalElementBrowser from './ModalElementBrowser';
 import { closeElementBrowserModal, insertItem } from '../../commands';
 import { getQuickInsertSuggestions } from '../../search';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 var Modal = function Modal(_ref) {
   var quickInsertState = _ref.quickInsertState,
     editorView = _ref.editorView,
@@ -39,19 +38,13 @@ var Modal = function Modal(_ref) {
 };
 export default (function (_ref2) {
   var editorView = _ref2.editorView,
-    helpUrl = _ref2.helpUrl;
-  var render = useCallback(function (_ref3) {
-    var quickInsertState = _ref3.quickInsertState;
-    return /*#__PURE__*/React.createElement(Modal, {
-      quickInsertState: quickInsertState,
-      editorView: editorView,
-      helpUrl: helpUrl
-    });
-  }, [editorView, helpUrl]);
-  return /*#__PURE__*/React.createElement(WithPluginState, {
-    plugins: {
-      quickInsertState: pluginKey
-    },
-    render: render
+    helpUrl = _ref2.helpUrl,
+    pluginInjectionAPI = _ref2.pluginInjectionAPI;
+  var _useSharedPluginState = useSharedPluginState(pluginInjectionAPI, ['quickInsert']),
+    quickInsertState = _useSharedPluginState.quickInsertState;
+  return /*#__PURE__*/React.createElement(Modal, {
+    quickInsertState: quickInsertState !== null && quickInsertState !== void 0 ? quickInsertState : undefined,
+    editorView: editorView,
+    helpUrl: helpUrl
   });
 });

package/dist/esm/ui/ElementBrowser/InsertMenu.js

@@ -14,9 +14,8 @@ import { borderRadius } from '@atlaskit/theme';
 import { themed } from '@atlaskit/theme/components';
 import { DN50, N0, N30A, N60A } from '@atlaskit/theme/colors';
 import { IconCode, IconDate, IconDecision, IconDivider, IconExpand, IconPanel, IconQuote, IconStatus } from '@atlaskit/editor-common/quick-insert';
-import withOuterListeners from '../with-outer-listeners';
-import ElementBrowser from './components/ElementBrowserLoader';
-import { ELEMENT_ITEM_HEIGHT } from './constants';
+import { withReactEditorViewOuterListeners as withOuterListeners } from '@atlaskit/editor-common/ui-react';
+import { ElementBrowser, ELEMENT_ITEM_HEIGHT } from '@atlaskit/editor-common/element-browser';
 var InsertMenu = function InsertMenu(_ref) {
   var _pluginInjectionApi$q6, _pluginInjectionApi$q7, _pluginInjectionApi$q8;
   var editorView = _ref.editorView,

package/dist/esm/ui/ElementBrowser/types.js

@@ -1,5 +1 @@
-export var Modes = /*#__PURE__*/function (Modes) {
-  Modes["full"] = "full";
-  Modes["inline"] = "inline";
-  return Modes;
-}({});
+export {};

package/dist/esm/version-wrapper.js

@@ -1,5 +1,5 @@
 export var name = "@atlaskit/editor-core";
-export var version = "187.40.2";
+export var version = "187.41.0";
 export var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/types/editor-next/hooks/useEditorMeasuresConstructor.d.ts

@@ -1,8 +1,8 @@
 /** @jsx jsx */
-import { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
-import { ExperienceStore } from '@atlaskit/editor-common/ufo';
-import { EditorProps } from '../../types/editor-props';
-import { PerformanceTracking } from '../../types/performance-tracking';
+import type { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
+import type { ExperienceStore } from '@atlaskit/editor-common/ufo';
+import type { EditorProps } from '../../types/editor-props';
+import type { PerformanceTracking } from '../../types/performance-tracking';
 /**
  *
  * Hook to be used for running analytics on mounting the editor.

package/dist/types/editor-next/utils/editorMeasureTTICallback.d.ts

@@ -1,5 +1,5 @@
-import { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
-import { ExperienceStore } from '@atlaskit/editor-common/ufo';
-import { EditorProps } from '../../types/editor-props';
-import { PerformanceTracking } from '../../types/performance-tracking';
-export default function editorMeasureTTICallback(tti: number, ttiFromInvocation: number, canceled: boolean, performanceTracking: PerformanceTracking | undefined, featureFlags: EditorProps['featureFlags'], createAnalyticsEvent?: CreateUIAnalyticsEvent, experienceStore?: ExperienceStore): void;
+import type { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
+import type { ExperienceStore } from '@atlaskit/editor-common/ufo';
+import type { EditorProps } from '../../types/editor-props';
+import type { PerformanceTracking } from '../../types/performance-tracking';
+export default function editorMeasureTTICallback(tti: number, ttiFromInvocation: number, canceled: boolean, distortedDuration: boolean, performanceTracking: PerformanceTracking | undefined, featureFlags: EditorProps['featureFlags'], createAnalyticsEvent?: CreateUIAnalyticsEvent, experienceStore?: ExperienceStore): void;

package/dist/types/element-browser.d.ts

@@ -1 +1 @@
-export { default as ElementBrowser } from './ui/ElementBrowser';
+export { ElementBrowser } from '@atlaskit/editor-common/element-browser';

package/dist/types/labs/next/presets/default.d.ts

@@ -129,7 +129,7 @@ export declare function createDefaultPreset(options: EditorPresetProps & Default
     pluginConfiguration: QuickInsertPluginOptions | undefined;
     sharedState: import("@atlaskit/editor-common/types").QuickInsertSharedState | null;
     actions: {
-        insertItem: (item: import("@atlaskit/editor-common/provider-factory").QuickInsertItem) => import("../../..").Command;
+        insertItem: (item: import("@atlaskit/editor-common/provider-factory").QuickInsertItem) => import("@atlaskit/editor-common/types").Command;
         getSuggestions: (searchOptions: import("@atlaskit/editor-common/types").QuickInsertSearchOptions) => import("@atlaskit/editor-common/provider-factory").QuickInsertItem[];
     };
     commands: {
@@ -284,7 +284,7 @@ export declare function useDefaultPreset(props: EditorPresetProps & DefaultPrese
     pluginConfiguration: QuickInsertPluginOptions | undefined;
     sharedState: import("@atlaskit/editor-common/types").QuickInsertSharedState | null;
     actions: {
-        insertItem: (item: import("@atlaskit/editor-common/provider-factory").QuickInsertItem) => import("../../..").Command;
+        insertItem: (item: import("@atlaskit/editor-common/provider-factory").QuickInsertItem) => import("@atlaskit/editor-common/types").Command;
         getSuggestions: (searchOptions: import("@atlaskit/editor-common/types").QuickInsertSearchOptions) => import("@atlaskit/editor-common/provider-factory").QuickInsertItem[];
     };
     commands: {