@atlaskit/editor-core 183.0.12 → 183.1.1

package/dist/esm/plugins/floating-toolbar/ui/Toolbar.js

@@ -17,11 +17,11 @@ import { Component } from 'react';
 import ButtonGroup from '@atlaskit/button/button-group';
 import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
 import { themed } from '@atlaskit/theme/components';
-import { borderRadius, gridSize } from '@atlaskit/theme/constants';
+import { borderRadius } from '@atlaskit/theme/constants';
 import { DN70 } from '@atlaskit/theme/colors';
 import { compareArrays, shallowEqual } from '../utils';
 import { showConfirmDialog } from '../pm-plugins/toolbar-data/commands';
-import Button from './Button';
+import { FloatingToolbarButton as Button } from '@atlaskit/editor-common/ui';
 import Dropdown from './Dropdown';
 import Select from './Select';
 import Separator from './Separator';
@@ -38,7 +38,6 @@ import { clearHoverSelection } from '@atlaskit/editor-plugin-table/commands';
 import ScrollButtons from './ScrollButtons';
 import { ToolbarArrowKeyNavigationProvider } from '../../../ui/ToolbarArrowKeyNavigationProvider';
 import { checkShouldForceFocusAndApply, forceFocusSelector } from '../pm-plugins/force-focus';
-var akGridSize = gridSize();
 var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
   var items = _ref.items,
     dispatchCommand = _ref.dispatchCommand,
@@ -171,6 +170,7 @@ var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
         }
         if (item.selectType === 'color') {
           return jsx(ColorPickerButton, {
+            skipFocusButtonAfterPick: true,
             key: idx,
             title: item.title,
             onChange: function onChange(selected) {
@@ -251,10 +251,10 @@ var toolbarContainer = function toolbarContainer(theme, scrollable, hasSelect, f
   return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-radius: ", "px;\n  box-shadow: ", ";\n  display: flex;\n  line-height: 1;\n  box-sizing: border-box;\n\n  & > div > div {\n    align-items: center;\n  }\n  ", "\n"])), themed({
     light: "var(--ds-surface-overlay, white)",
     dark: "var(--ds-surface-overlay, ".concat(DN70, ")")
-  })(theme), borderRadius(), "var(--ds-shadow-overlay, ".concat("0 0 1px rgba(9, 30, 66, 0.31), 0 4px 8px -2px rgba(9, 30, 66, 0.25)", ")"), scrollable ? css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        ", "\n        overflow: hidden;\n      "])), hasSelect ? css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n              height: 40px;\n            "]))) : css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n              height: 32px;\n            "])))) : css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        padding: ", "px ", "px;\n        ", "\n      "])), akGridSize / 2, akGridSize, firstElementIsSelect && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n          padding-left: ", "px;\n        "])), akGridSize / 2)));
+  })(theme), borderRadius(), "var(--ds-shadow-overlay, ".concat("0 0 1px rgba(9, 30, 66, 0.31), 0 4px 8px -2px rgba(9, 30, 66, 0.25)", ")"), scrollable ? css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        ", "\n        overflow: hidden;\n      "])), hasSelect ? css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n              height: 40px;\n            "]))) : css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n              height: 32px;\n            "])))) : css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        padding: ", " ", ";\n        ", "\n      "])), "var(--ds-space-050, 4px)", "var(--ds-space-100, 8px)", firstElementIsSelect && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n          padding-left: ", ";\n        "])), "var(--ds-space-050, 4px)")));
 };
 var toolbarOverflow = function toolbarOverflow(scrollable, scrollDisabled, firstElementIsSelect) {
-  return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  ", "\n"])), scrollable ? css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        ", "\n        -webkit-overflow-scrolling: touch;\n        padding: ", "px 0 50px;\n        > div {\n          > div:first-child {\n            ", "\n          }\n          > div:last-child {\n            margin-right: ", "px;\n          }\n        }\n      "])), scrollDisabled ? css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n              overflow: hidden;\n            "]))) : css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n              overflow-x: auto;\n              overflow-y: hidden;\n            "]))), akGridSize / 2, firstElementIsSelect ? css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n                  margin-left: ", "px;\n                "])), akGridSize / 2) : css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n                  margin-left: ", "px;\n                "])), akGridSize), akGridSize) : css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n        display: flex;\n      "]))));
+  return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  ", "\n"])), scrollable ? css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        ", "\n        -webkit-overflow-scrolling: touch;\n        padding: ", " 0 50px;\n        > div {\n          > div:first-child {\n            ", "\n          }\n          > div:last-child {\n            margin-right: ", ";\n          }\n        }\n      "])), scrollDisabled ? css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n              overflow: hidden;\n            "]))) : css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n              overflow-x: auto;\n              overflow-y: hidden;\n            "]))), "var(--ds-space-050, 4px)", firstElementIsSelect ? css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n                  margin-left: ", ";\n                "])), "var(--ds-space-050, 4px)") : css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n                  margin-left: ", ";\n                "])), "var(--ds-space-100, 8px)"), "var(--ds-space-100, 8px)") : css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n        display: flex;\n      "]))));
 };
 function makeSameType(_a, _b) {
   return true;

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

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
@@ -12,21 +11,18 @@ import React from 'react';
 import classnames from 'classnames';
 import { withTheme } from '@emotion/react';
 import { PluginKey } from 'prosemirror-state';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { breakoutWideScaleRatio, akEditorFullPageMaxWidth, akEditorBreakoutPadding } from '@atlaskit/editor-shared-styles';
-import { pluginKey as widthPlugin } from '../width/index';
-import WithPluginState from '../../ui/WithPluginState';
-import { createDispatch } from '../../event-dispatcher';
-export var stateKey = new PluginKey('gridPlugin');
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 export var GRID_SIZE = 12;
-export var createDisplayGrid = function createDisplayGrid(eventDispatcher) {
-  var dispatch = createDispatch(eventDispatcher);
-  return function (show, type) {
-    var highlight = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
-    return dispatch(stateKey, {
-      visible: show,
-      gridType: type,
-      highlight: highlight
-    });
+var key = new PluginKey('gridPlugin');
+var createDisplayGrid = function createDisplayGrid(view) {
+  return function (props) {
+    var dispatch = view.dispatch,
+      state = view.state;
+    var tr = state.tr.setMeta(key, props);
+    dispatch(tr);
+    return true;
   };
 };
 export var gridTypeForLayout = function gridTypeForLayout(layout) {
@@ -122,31 +118,71 @@ var Grid = /*#__PURE__*/function (_React$Component) {
   return Grid;
 }(React.Component);
 var ThemedGrid = withTheme(Grid);
-var gridPlugin = function gridPlugin(options) {
+var ContentComponent = function ContentComponent(_ref3) {
+  var _widthState$width, _gridState$gridType;
+  var api = _ref3.api,
+    editorView = _ref3.editorView,
+    options = _ref3.options;
+  var _useSharedPluginState = useSharedPluginState(api, ['width', 'grid']),
+    widthState = _useSharedPluginState.widthState,
+    gridState = _useSharedPluginState.gridState;
+  if (!gridState) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(ThemedGrid, {
+    shouldCalcBreakoutGridLines: options && options.shouldCalcBreakoutGridLines,
+    editorWidth: (_widthState$width = widthState === null || widthState === void 0 ? void 0 : widthState.width) !== null && _widthState$width !== void 0 ? _widthState$width : akEditorFullPageMaxWidth,
+    containerElement: editorView.dom,
+    visible: gridState.visible,
+    gridType: (_gridState$gridType = gridState.gridType) !== null && _gridState$gridType !== void 0 ? _gridState$gridType : 'full',
+    highlight: gridState.highlight
+  });
+};
+var EMPTY_STATE = {
+  visible: false,
+  highlight: []
+};
+var gridPMPlugin = new SafePlugin({
+  key: key,
+  state: {
+    init: function init() {
+      return EMPTY_STATE;
+    },
+    apply: function apply(tr, currentPluginState) {
+      var nextPluginState = tr.getMeta(key);
+      if (nextPluginState) {
+        return nextPluginState;
+      }
+      return currentPluginState;
+    }
+  }
+});
+var gridPlugin = function gridPlugin(options, api) {
   return {
     name: 'grid',
-    contentComponent: function contentComponent(_ref3) {
-      var editorView = _ref3.editorView;
-      return /*#__PURE__*/React.createElement(WithPluginState, {
-        plugins: {
-          grid: stateKey,
-          widthState: widthPlugin
-        },
-        render: function render(_ref4) {
-          var grid = _ref4.grid,
-            _ref4$widthState = _ref4.widthState,
-            widthState = _ref4$widthState === void 0 ? {
-              width: akEditorFullPageMaxWidth
-            } : _ref4$widthState;
-          if (!grid) {
-            return null;
-          }
-          return /*#__PURE__*/React.createElement(ThemedGrid, _extends({
-            shouldCalcBreakoutGridLines: options && options.shouldCalcBreakoutGridLines,
-            editorWidth: widthState.width,
-            containerElement: editorView.dom
-          }, grid));
+    getSharedState: function getSharedState(editorState) {
+      if (!editorState) {
+        return null;
+      }
+      return key.getState(editorState);
+    },
+    actions: {
+      displayGrid: createDisplayGrid
+    },
+    pmPlugins: function pmPlugins() {
+      return [{
+        name: 'grid',
+        plugin: function plugin() {
+          return gridPMPlugin;
         }
+      }];
+    },
+    contentComponent: function contentComponent(_ref4) {
+      var editorView = _ref4.editorView;
+      return /*#__PURE__*/React.createElement(ContentComponent, {
+        editorView: editorView,
+        options: options,
+        api: api
       });
     }
   };

package/dist/esm/plugins/history/pm-history-types.js

@@ -1,2 +1 @@
-// prosemirror-history does not export its plugin key
-export var pmHistoryPluginKey = 'history$';
+export {};

package/dist/esm/plugins/history/utils.js

@@ -1,4 +1,4 @@
-import { pmHistoryPluginKey } from './pm-history-types';
+import { pmHistoryPluginKey } from '@atlaskit/editor-common/utils';
 export var getPmHistoryPlugin = function getPmHistoryPlugin(state) {
   return state.plugins.find(function (plugin) {
     return plugin.key === pmHistoryPluginKey;

package/dist/esm/plugins/hyperlink/HyperlinkToolbarAppearance.js

@@ -138,7 +138,8 @@ export var HyperlinkToolbarAppearance = /*#__PURE__*/function (_Component) {
         editorView = _this$props.editorView,
         editorState = _this$props.editorState,
         cardOptions = _this$props.cardOptions,
-        platform = _this$props.platform;
+        platform = _this$props.platform,
+        editorAnalyticsApi = _this$props.editorAnalyticsApi;
       var supportedUrlsMap = this.state.supportedUrlsMap;
       if (!supportedUrlsMap.get(url)) {
         return null;
@@ -151,7 +152,8 @@ export var HyperlinkToolbarAppearance = /*#__PURE__*/function (_Component) {
         editorState: editorState,
         allowEmbeds: cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.allowEmbeds,
         allowBlockCards: cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.allowBlockCards,
-        platform: platform
+        platform: platform,
+        editorAnalyticsApi: editorAnalyticsApi
       });
     }
   }]);

package/dist/esm/plugins/hyperlink/Toolbar.js

@@ -10,7 +10,7 @@ import { commandWithMetadata } from '@atlaskit/editor-common/card';
 import UnlinkIcon from '@atlaskit/icon/glyph/editor/unlink';
 import CogIcon from '@atlaskit/icon/glyph/editor/settings';
 import OpenIcon from '@atlaskit/icon/glyph/shortcut';
-import { normalizeUrl } from './utils';
+import { normalizeUrl } from '@atlaskit/editor-common/utils';
 import { linkToolbarMessages as linkToolbarCommonMessages, linkMessages } from '../../messages';
 import { isSafeUrl } from '@atlaskit/adf-schema';
 import { LINKPICKER_HEIGHT_IN_PX, RECENT_SEARCH_HEIGHT_IN_PX, RECENT_SEARCH_WIDTH_IN_PX } from '../../ui/LinkSearch/ToolbarComponents';
@@ -66,7 +66,7 @@ var getSettingsButtonGroup = function getSettingsButtonGroup(state, intl, featur
     target: '_blank'
   }] : [];
 };
-export var getToolbarConfig = function getToolbarConfig(options, featureFlags) {
+export var getToolbarConfig = function getToolbarConfig(options, featureFlags, editorAnalyticsApi) {
   return function (state, intl, providerFactory) {
     var formatMessage = intl.formatMessage;
     var linkState = stateKey.getState(state);
@@ -125,7 +125,8 @@ export var getToolbarConfig = function getToolbarConfig(options, featureFlags) {
                     editorState: state,
                     cardOptions: options === null || options === void 0 ? void 0 : options.cardOptions,
                     providerFactory: providerFactory,
-                    platform: options === null || options === void 0 ? void 0 : options.platform
+                    platform: options === null || options === void 0 ? void 0 : options.platform,
+                    editorAnalyticsApi: editorAnalyticsApi
                   });
                 }
               }, {

package/dist/esm/plugins/hyperlink/commands.js

@@ -2,13 +2,13 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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) { _defineProperty(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; }
 import { commandWithMetadata } from '@atlaskit/editor-common/card';
-import { normalizeUrl } from './utils';
+import { normalizeUrl, getLinkCreationAnalyticsEvent } from '@atlaskit/editor-common/utils';
 import { stateKey, LinkAction } from './pm-plugins/main';
 import { Selection } from 'prosemirror-state';
 import { filter } from '../../utils/commands';
-import { addAnalytics, ACTION, ACTION_SUBJECT, INPUT_METHOD, EVENT_TYPE, ACTION_SUBJECT_ID, withAnalytics } from '../analytics';
+import { addAnalytics, withAnalytics } from '../analytics';
+import { ACTION, ACTION_SUBJECT, INPUT_METHOD, EVENT_TYPE, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
 import { queueCardsFromChangedTr } from '../card/pm-plugins/doc';
-import { getLinkCreationAnalyticsEvent } from './analytics';
 import { buildEditLinkPayload, unlinkPayload } from '../../utils/linking-utils';
 export function isTextAtPos(pos) {
   return function (state) {

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

@@ -4,13 +4,13 @@ import { createInputRulePlugin } from './pm-plugins/input-rule';
 import { createKeymapPlugin } from './pm-plugins/keymap';
 import { plugin as _plugin, stateKey, LinkAction } from './pm-plugins/main';
 import fakeCursorToolbarPlugin from './pm-plugins/fake-cursor-for-toolbar';
-import { addAnalytics, ACTION, ACTION_SUBJECT, INPUT_METHOD, EVENT_TYPE, ACTION_SUBJECT_ID } from '../analytics';
+import { ACTION, ACTION_SUBJECT, INPUT_METHOD, EVENT_TYPE, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
 import { getToolbarConfig } from './Toolbar';
 import { tooltip, addLink } from '../../keymaps';
 import { IconLink } from '../quick-insert/assets';
 import { messages } from '../insert-block/ui/ToolbarInsertBlock/messages';
 var hyperlinkPlugin = function hyperlinkPlugin() {
-  var _api$dependencies, _api$dependencies$fea;
+  var _api$dependencies, _api$dependencies$fea, _api$dependencies$ana;
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var api = arguments.length > 1 ? arguments[1] : undefined;
   var featureFlags = (api === null || api === void 0 ? void 0 : (_api$dependencies = api.dependencies) === null || _api$dependencies === void 0 ? void 0 : (_api$dependencies$fea = _api$dependencies.featureFlags) === null || _api$dependencies$fea === void 0 ? void 0 : _api$dependencies$fea.sharedState.currentState()) || {};
@@ -66,12 +66,13 @@ var hyperlinkPlugin = function hyperlinkPlugin() {
             return /*#__PURE__*/React.createElement(IconLink, null);
           },
           action: function action(insert, state) {
+            var _api$dependencies2, _api$dependencies2$an, _api$dependencies2$an2, _api$dependencies2$an3;
             var tr = insert(undefined);
             tr.setMeta(stateKey, {
               type: LinkAction.SHOW_INSERT_TOOLBAR,
               inputMethod: INPUT_METHOD.QUICK_INSERT
             });
-            return addAnalytics(state, tr, {
+            var analyticsAttached = api === null || api === void 0 ? void 0 : (_api$dependencies2 = api.dependencies) === null || _api$dependencies2 === void 0 ? void 0 : (_api$dependencies2$an = _api$dependencies2.analytics) === null || _api$dependencies2$an === void 0 ? void 0 : (_api$dependencies2$an2 = _api$dependencies2$an.actions) === null || _api$dependencies2$an2 === void 0 ? void 0 : (_api$dependencies2$an3 = _api$dependencies2$an2.attachAnalyticsEvent) === null || _api$dependencies2$an3 === void 0 ? void 0 : _api$dependencies2$an3.call(_api$dependencies2$an2, {
               action: ACTION.INVOKED,
               actionSubject: ACTION_SUBJECT.TYPEAHEAD,
               actionSubjectId: ACTION_SUBJECT_ID.TYPEAHEAD_LINK,
@@ -79,11 +80,12 @@ var hyperlinkPlugin = function hyperlinkPlugin() {
                 inputMethod: INPUT_METHOD.QUICK_INSERT
               },
               eventType: EVENT_TYPE.UI
-            });
+            })(tr);
+            return analyticsAttached !== false ? tr : false;
           }
         }];
       },
-      floatingToolbar: getToolbarConfig(options, featureFlags)
+      floatingToolbar: getToolbarConfig(options, featureFlags, api === null || api === void 0 ? void 0 : (_api$dependencies$ana = api.dependencies.analytics) === null || _api$dependencies$ana === void 0 ? void 0 : _api$dependencies$ana.actions)
     }
   };
 };

package/dist/esm/plugins/hyperlink/pm-plugins/input-rule.js

@@ -1,9 +1,9 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { addLinkMetadata } from '@atlaskit/editor-common/card';
 import { createRule, createPlugin } from '../../../utils/input-rules';
-import { findFilepaths, isLinkInMatches, LinkMatcher, normalizeUrl } from '../utils';
-import { INPUT_METHOD, addAnalytics } from '../../analytics';
-import { getLinkCreationAnalyticsEvent } from '../analytics';
+import { findFilepaths, isLinkInMatches, LinkMatcher, normalizeUrl, getLinkCreationAnalyticsEvent } from '@atlaskit/editor-common/utils';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { addAnalytics } from '../../analytics';
 export function createLinkInputRule(regexp) {
   var skipAnalytics = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   // Plain typed text (eg, typing 'www.google.com') should convert to a hyperlink

package/dist/esm/plugins/hyperlink/pm-plugins/keymap.js

@@ -4,8 +4,7 @@ import * as keymaps from '../../../keymaps';
 import { stateKey } from '../pm-plugins/main';
 import { showLinkToolbar, hideLinkToolbar } from '../commands';
 import { INPUT_METHOD, addAnalytics } from '../../analytics';
-import { getLinkCreationAnalyticsEvent } from '../analytics';
-import { findFilepaths, isLinkInMatches } from '../utils';
+import { findFilepaths, isLinkInMatches, getLinkCreationAnalyticsEvent } from '@atlaskit/editor-common/utils';
 export function createKeymapPlugin() {
   var skipAnalytics = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
   var list = {};

package/dist/esm/plugins/hyperlink/ui/HyperlinkAddToolbar/HyperlinkAddToolbar.js

@@ -31,7 +31,7 @@ import PanelTextInput from '../../../../ui/PanelTextInput';
 import LinkSearchList from '../../../../ui/LinkSearch/LinkSearchList';
 import { container, containerWithProvider, inputWrapper } from '../../../../ui/LinkSearch/ToolbarComponents';
 import { INPUT_METHOD, fireAnalyticsEvent, ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
-import { normalizeUrl } from '../../utils';
+import { normalizeUrl } from '@atlaskit/editor-common/utils';
 import { filterUniqueItems } from '../../../../utils/array';
 import debounce from 'lodash/debounce';
 import { mapContentTypeToIcon, sha1, wordCount } from './utils';

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

@@ -87,7 +87,7 @@ var insertBlockPlugin = function insertBlockPlugin() {
               placeholderTextState = _ref2.placeholderTextState,
               layoutState = _ref2.layoutState;
             return /*#__PURE__*/React.createElement(ToolbarInsertBlock, {
-              insertNodeAPI: options.insertNodeAPI,
+              pluginInjectionApi: api,
               buttons: buttons,
               isReducedSpacing: isToolbarReducedSpacing,
               isDisabled: disabled,

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

@@ -180,25 +180,21 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
       return true;
     });
     _defineProperty(_assertThisInitialized(_this), "insertTable", function (inputMethod) {
-      var insertNodeAPI = _this.props.insertNodeAPI;
-      if (!insertNodeAPI) {
-        return false;
-      }
-      return insertNodeAPI.insert({
-        node: 'table',
-        options: {
-          selectNodeInserted: false,
-          analyticsPayload: {
-            action: ACTION.INSERTED,
-            actionSubject: ACTION_SUBJECT.DOCUMENT,
-            actionSubjectId: ACTION_SUBJECT_ID.TABLE,
-            attributes: {
-              inputMethod: inputMethod
-            },
-            eventType: EVENT_TYPE.TRACK
-          }
-        }
-      });
+      var _pluginInjectionApi$d, _pluginInjectionApi$d2, _pluginInjectionApi$d3, _pluginInjectionApi$d4;
+      var _this$props = _this.props,
+        pluginInjectionApi = _this$props.pluginInjectionApi,
+        editorView = _this$props.editorView;
+      var state = editorView.state,
+        dispatch = editorView.dispatch;
+      return (_pluginInjectionApi$d = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d2 = pluginInjectionApi.dependencies.table) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : (_pluginInjectionApi$d3 = (_pluginInjectionApi$d4 = _pluginInjectionApi$d2.actions).insertTable) === null || _pluginInjectionApi$d3 === void 0 ? void 0 : _pluginInjectionApi$d3.call(_pluginInjectionApi$d4, {
+        action: ACTION.INSERTED,
+        actionSubject: ACTION_SUBJECT.DOCUMENT,
+        actionSubjectId: ACTION_SUBJECT_ID.TABLE,
+        attributes: {
+          inputMethod: inputMethod
+        },
+        eventType: EVENT_TYPE.TRACK
+      })(state, dispatch)) !== null && _pluginInjectionApi$d !== void 0 ? _pluginInjectionApi$d : false;
     });
     _defineProperty(_assertThisInitialized(_this), "createDate", function (inputMethod) {
       var editorView = _this.props.editorView;
@@ -221,9 +217,9 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
       return true;
     });
     _defineProperty(_assertThisInitialized(_this), "openMediaPicker", function (inputMethod) {
-      var _this$props = _this.props,
-        onShowMediaPicker = _this$props.onShowMediaPicker,
-        dispatchAnalyticsEvent = _this$props.dispatchAnalyticsEvent;
+      var _this$props2 = _this.props,
+        onShowMediaPicker = _this$props2.onShowMediaPicker,
+        dispatchAnalyticsEvent = _this$props2.dispatchAnalyticsEvent;
       if (onShowMediaPicker) {
         onShowMediaPicker();
         if (dispatchAnalyticsEvent) {
@@ -250,11 +246,11 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
       };
     });
     _defineProperty(_assertThisInitialized(_this), "insertHorizontalRule", function (inputMethod) {
-      var _this$props2 = _this.props,
-        _this$props2$editorVi = _this$props2.editorView,
-        state = _this$props2$editorVi.state,
-        dispatch = _this$props2$editorVi.dispatch,
-        featureFlags = _this$props2.featureFlags;
+      var _this$props3 = _this.props,
+        _this$props3$editorVi = _this$props3.editorView,
+        state = _this$props3$editorVi.state,
+        dispatch = _this$props3$editorVi.dispatch,
+        featureFlags = _this$props3.featureFlags;
       return insertHorizontalRule(inputMethod, featureFlags)(state, dispatch);
     });
     _defineProperty(_assertThisInitialized(_this), "insertExpand", function () {
@@ -265,9 +261,9 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
     });
     _defineProperty(_assertThisInitialized(_this), "insertBlockType", function (itemName) {
       return function () {
-        var _this$props3 = _this.props,
-          editorView = _this$props3.editorView,
-          onInsertBlockType = _this$props3.onInsertBlockType;
+        var _this$props4 = _this.props,
+          editorView = _this$props4.editorView,
+          onInsertBlockType = _this$props4.onInsertBlockType;
         var state = editorView.state,
           dispatch = editorView.dispatch;
         onInsertBlockType(itemName)(state, dispatch);
@@ -286,11 +282,11 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
     _defineProperty(_assertThisInitialized(_this), "onItemActivated", function (_ref2) {
       var item = _ref2.item,
         inputMethod = _ref2.inputMethod;
-      var _this$props4 = _this.props,
-        editorView = _this$props4.editorView,
-        editorActions = _this$props4.editorActions,
-        handleImageUpload = _this$props4.handleImageUpload,
-        expandEnabled = _this$props4.expandEnabled;
+      var _this$props5 = _this.props,
+        editorView = _this$props5.editorView,
+        editorActions = _this$props5.editorActions,
+        handleImageUpload = _this$props5.handleImageUpload,
+        expandEnabled = _this$props5.expandEnabled;
 
       // need to do this before inserting nodes so scrollIntoView works properly
       if (!editorView.hasFocus()) {
@@ -406,12 +402,12 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
     key: "renderPopup",
     value: function renderPopup() {
       var emojiPickerOpen = this.state.emojiPickerOpen;
-      var _this$props5 = this.props,
-        popupsMountPoint = _this$props5.popupsMountPoint,
-        popupsBoundariesElement = _this$props5.popupsBoundariesElement,
-        popupsScrollableElement = _this$props5.popupsScrollableElement,
-        emojiProvider = _this$props5.emojiProvider,
-        replacePlusMenuWithElementBrowser = _this$props5.replacePlusMenuWithElementBrowser;
+      var _this$props6 = this.props,
+        popupsMountPoint = _this$props6.popupsMountPoint,
+        popupsBoundariesElement = _this$props6.popupsBoundariesElement,
+        popupsScrollableElement = _this$props6.popupsScrollableElement,
+        emojiProvider = _this$props6.emojiProvider,
+        replacePlusMenuWithElementBrowser = _this$props6.replacePlusMenuWithElementBrowser;
       var dropdownEmoji = this.state.dropdownItems.some(function (_ref4) {
         var name = _ref4.value.name;
         return name === 'emoji';
@@ -447,9 +443,9 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
         buttons = _this$state.buttons,
         dropdownItems = _this$state.dropdownItems,
         emojiPickerOpen = _this$state.emojiPickerOpen;
-      var _this$props6 = this.props,
-        isDisabled = _this$props6.isDisabled,
-        isReducedSpacing = _this$props6.isReducedSpacing;
+      var _this$props7 = this.props,
+        isDisabled = _this$props7.isDisabled,
+        isReducedSpacing = _this$props7.isReducedSpacing;
       if (buttons.length === 0 && dropdownItems.length === 0) {
         return null;
       }

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

@@ -1,6 +1,8 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject;
 import { css } from '@emotion/react';
+
+// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 import { gridSize } from '@atlaskit/theme/constants';
 import { N40A, N50A, DN70, DN80 } from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
@@ -10,7 +12,7 @@ import { TableCssClassName } from '@atlaskit/editor-plugin-table/types';
 import { tableMarginFullWidthMode } from '@atlaskit/editor-plugin-table/ui/consts';
 export { LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN };
 export var layoutStyles = function layoutStyles(props) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    ", " [data-layout-section] {\n      margin: ", "px -", "px 0;\n      transition: border-color 0.3s ", ";\n      cursor: pointer;\n\n      /* Inner cursor located 26px from left */\n      [data-layout-column] {\n        flex: 1;\n        min-width: 0;\n        border: ", "px solid\n          ", ";\n        border-radius: 4px;\n        padding: ", "px;\n        box-sizing: border-box;\n\n        > div {\n          > :not(style):first-child,\n          > style:first-child + * {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-child + *,\n          > style:first-child + .ProseMirror-gapcursor + * {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-child + span + *,\n          > style:first-child + .ProseMirror-gapcursor:first-child + span + * {\n            margin-top: 0;\n          }\n\n          > .embedCardView-content-wrap:first-of-type .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .mediaSingleView-content-wrap:first-of-type .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor.-right:first-child\n            + .mediaSingleView-content-wrap\n            .rich-media-item,\n          > style:first-child\n            + .ProseMirror-gapcursor.-right\n            + .mediaSingleView-content-wrap\n            .rich-media-item,\n          > .ProseMirror-gapcursor.-right:first-of-type\n            + .embedCardView-content-wrap\n            .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-child\n            + span\n            + .mediaSingleView-content-wrap\n            .rich-media-item,\n          > style:first-child\n            + .ProseMirror-gapcursor\n            + span\n            + .mediaSingleView-content-wrap\n            .rich-media-item {\n            margin-top: 0;\n          }\n\n          /* Prevent first DecisionWrapper's margin-top: 8px from shifting decisions down\n             and shrinking layout's node selectable area (leniency margin) */\n          > [data-node-type='decisionList'] {\n            li:first-of-type [data-decision-wrapper] {\n              margin-top: 0;\n            }\n          }\n        }\n\n        /* Make the 'content' fill the entire height of the layout column to allow click\n           handler of layout section nodeview to target only data-layout-column */\n        [data-layout-content] {\n          height: 100%;\n          cursor: text;\n        }\n      }\n\n      [data-layout-column] + [data-layout-column] {\n        margin-left: ", "px;\n      }\n\n      @media screen and (max-width: ", "px) {\n        [data-layout-column] + [data-layout-column] {\n          margin-left: 0;\n        }\n      }\n\n      // TODO: Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.\n      // This is because the default state already uses the same token and, as such, the hover style won't change anything.\n      // https://product-fabric.atlassian.net/browse/DSP-4441\n      /* Shows the border when cursor is inside a layout */\n      &.selected [data-layout-column],\n      &:hover [data-layout-column] {\n        border: ", "px solid\n          ", ";\n      }\n\n      &.selected.danger > [data-layout-column] {\n        background-color: ", ";\n        border-color: ", ";\n      }\n\n      &.", ":not(.danger) {\n        [data-layout-column] {\n          ", "\n        }\n      }\n    }\n  }\n\n  .fabric-editor--full-width-mode .ProseMirror {\n    [data-layout-section] {\n      .", " {\n        margin: 0 ", "px;\n      }\n    }\n  }\n"])), columnLayoutSharedStyle, gridSize() - 1, akLayoutGutterOffset, akEditorSwoopCubicBezier, akEditorSelectedBorderSize, themed({
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    ", " [data-layout-section] {\n      // TODO: Migrate away from gridSize\n      // Recommendation: Replace directly with 7px\n      margin: ", "px -", "px 0;\n      transition: border-color 0.3s ", ";\n      cursor: pointer;\n\n      /* Inner cursor located 26px from left */\n      [data-layout-column] {\n        flex: 1;\n        min-width: 0;\n        border: ", "px solid\n          ", ";\n        border-radius: 4px;\n        padding: ", "px;\n        box-sizing: border-box;\n\n        > div {\n          > :not(style):first-child,\n          > style:first-child + * {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-child + *,\n          > style:first-child + .ProseMirror-gapcursor + * {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-child + span + *,\n          > style:first-child + .ProseMirror-gapcursor:first-child + span + * {\n            margin-top: 0;\n          }\n\n          > .embedCardView-content-wrap:first-of-type .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .mediaSingleView-content-wrap:first-of-type .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor.-right:first-child\n            + .mediaSingleView-content-wrap\n            .rich-media-item,\n          > style:first-child\n            + .ProseMirror-gapcursor.-right\n            + .mediaSingleView-content-wrap\n            .rich-media-item,\n          > .ProseMirror-gapcursor.-right:first-of-type\n            + .embedCardView-content-wrap\n            .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-child\n            + span\n            + .mediaSingleView-content-wrap\n            .rich-media-item,\n          > style:first-child\n            + .ProseMirror-gapcursor\n            + span\n            + .mediaSingleView-content-wrap\n            .rich-media-item {\n            margin-top: 0;\n          }\n\n          /* Prevent first DecisionWrapper's margin-top: 8px from shifting decisions down\n             and shrinking layout's node selectable area (leniency margin) */\n          > [data-node-type='decisionList'] {\n            li:first-of-type [data-decision-wrapper] {\n              margin-top: 0;\n            }\n          }\n        }\n\n        /* Make the 'content' fill the entire height of the layout column to allow click\n           handler of layout section nodeview to target only data-layout-column */\n        [data-layout-content] {\n          height: 100%;\n          cursor: text;\n        }\n      }\n\n      [data-layout-column] + [data-layout-column] {\n        margin-left: ", "px;\n      }\n\n      @media screen and (max-width: ", "px) {\n        [data-layout-column] + [data-layout-column] {\n          margin-left: 0;\n        }\n      }\n\n      // TODO: Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.\n      // This is because the default state already uses the same token and, as such, the hover style won't change anything.\n      // https://product-fabric.atlassian.net/browse/DSP-4441\n      /* Shows the border when cursor is inside a layout */\n      &.selected [data-layout-column],\n      &:hover [data-layout-column] {\n        border: ", "px solid\n          ", ";\n      }\n\n      &.selected.danger > [data-layout-column] {\n        background-color: ", ";\n        border-color: ", ";\n      }\n\n      &.", ":not(.danger) {\n        [data-layout-column] {\n          ", "\n        }\n      }\n    }\n  }\n\n  .fabric-editor--full-width-mode .ProseMirror {\n    [data-layout-section] {\n      .", " {\n        margin: 0 ", "px;\n      }\n    }\n  }\n"])), columnLayoutSharedStyle, gridSize() - 1, akLayoutGutterOffset, akEditorSwoopCubicBezier, akEditorSelectedBorderSize, themed({
     light: "var(--ds-border, ".concat(N40A, ")"),
     dark: "var(--ds-border, ".concat(DN70, ")")
   })(props), LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN, gridMediumMaxWidth, akEditorSelectedBorderSize, themed({

package/dist/esm/plugins/list/actions/conversions.js

@@ -3,7 +3,7 @@ import { NodeRange } from 'prosemirror-model';
 import { findWrapping } from 'prosemirror-transform';
 import { findParentNodeClosestToPos } from 'prosemirror-utils';
 import { isListNode, joinSiblingLists } from '../utils/node';
-import { isEmptyParagraph } from '../../../utils';
+import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
 import { findFirstParentListNode } from '../utils/find';
 import { GapCursorSelection } from '../../selection/gap-cursor-selection';
 export function convertListType(_ref) {

package/dist/esm/plugins/list/commands/listBackspace.js

@@ -3,7 +3,7 @@ var _BACKSPACE_COMMANDS;
 import { insertContentDeleteRange, isEmptySelectionAtStart, walkPrevNode } from '../../../utils/commands';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD, DELETE_DIRECTION, LIST_TEXT_SCENARIOS, addAnalytics } from '../../analytics';
 import { findParentNodeOfType } from 'prosemirror-utils';
-import { isListNode, isParagraphNode } from '../utils/node';
+import { isListNode, isParagraphNode } from '@atlaskit/editor-common/utils';
 import { isPosInsideList, isPosInsideParagraph } from '../utils/selection';
 //Cases below refer to the cases found in this document: https://product-fabric.atlassian.net/wiki/spaces/E/pages/1146954996/List+Backspace+and+Delete+Behaviour
 //Case for two adjacent list items of the same indentation

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

@@ -9,7 +9,7 @@ import { isWrappingPossible } from '../utils/selection';
 import { isListNode } from '../utils/node';
 import { pluginFactory } from '../../../utils/plugin-state-factory';
 import { setGapCursorSelection } from '../../../utils';
-import { Side } from '../../selection/gap-cursor-selection';
+import { Side } from '@atlaskit/editor-common/selection';
 import { listItemCounterPadding, CodeBlockSharedCssClassName, getOrderedListInlineStyles } from '@atlaskit/editor-common/styles';
 import { getItemCounterDigitsSize } from '@atlaskit/editor-common/utils';
 var listPluginKey = new PluginKey('listPlugin');

package/dist/esm/plugins/list/transforms.js

@@ -4,7 +4,7 @@ import { Fragment, NodeRange, Slice } from 'prosemirror-model';
 import { EditorState, TextSelection } from 'prosemirror-state';
 import { liftTarget, ReplaceAroundStep } from 'prosemirror-transform';
 import { autoJoin } from 'prosemirror-commands';
-import { isListNode } from './utils/node';
+import { isListNode } from '@atlaskit/editor-common/utils';
 import { mapSlice, mapChildren } from '../../utils/slice';
 import { getListLiftTarget } from './utils/indentation';
 function liftListItem(selection, tr) {

package/dist/esm/plugins/list/utils/analytics.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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) { _defineProperty(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; }
-import { isListNode, isListItemNode } from './node';
+import { isListItemNode, isListNode } from '@atlaskit/editor-common/utils';
 import { getListItemAttributes } from './selection';
 export var getCommonListAnalyticsAttributes = function getCommonListAnalyticsAttributes(state) {
   var _state$selection = state.selection,

package/dist/esm/plugins/list/utils/find.js

@@ -1,5 +1,5 @@
 import { findParentNodeClosestToPos } from 'prosemirror-utils';
-import { isListNode, isListItemNode } from './node';
+import { isListItemNode, isListNode } from '@atlaskit/editor-common/utils';
 export function findFirstParentListNode($pos) {
   var currentNode = $pos.doc.nodeAt($pos.pos);
   var listNodePosition = null;

package/dist/esm/plugins/list/utils/indentation.js

@@ -1,5 +1,5 @@
 import { numberNestedLists } from './selection';
-import { isListItemNode, isListNode } from './node';
+import { isListItemNode, isListNode } from '@atlaskit/editor-common/utils';
 
 // This will return (depth - 1) for root list parent of a list.
 export var getListLiftTarget = function getListLiftTarget(resPos) {

package/dist/esm/plugins/list/utils/node.js

@@ -1,16 +1,6 @@
 import { Fragment } from 'prosemirror-model';
-export function isListNode(node) {
-  return Boolean(node && node.type && ['orderedList', 'bulletList'].includes(node.type.name));
-}
-export function isParagraphNode(node) {
-  return Boolean(node && node.type && 'paragraph' === node.type.name);
-}
-export function isListItemNode(node) {
-  return Boolean(node && node.type && 'listItem' === node.type.name);
-}
-export function isBulletList(node) {
-  return Boolean(node && node.type && 'bulletList' === node.type.name);
-}
+export { isListNode, isListItemNode, isBulletList, isParagraphNode } from '@atlaskit/editor-common/utils';
+import { isListNode, isListItemNode } from '@atlaskit/editor-common/utils';
 function isListNodeValidContent(node) {
   var bulletList = node.type.schema.nodes.bulletList;
   if (!bulletList) {