@atlaskit/editor-core 183.0.9 → 183.1.0

package/dist/cjs/plugins/card/ui/EditLinkToolbar.js

@@ -17,7 +17,7 @@ var _ui = require("@atlaskit/editor-common/ui");
 var _card = require("@atlaskit/editor-common/card");
 var _HyperlinkAddToolbar = _interopRequireDefault(require("../../hyperlink/ui/HyperlinkAddToolbar"));
 var _actions = require("../pm-plugins/actions");
-var _analytics = require("../../analytics");
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _ToolbarComponents = require("../../../ui/LinkSearch/ToolbarComponents");
 var _doc = require("../pm-plugins/doc");
 var _utils = require("../utils");
@@ -100,23 +100,29 @@ var EditLinkToolbar = /*#__PURE__*/function (_React$Component) {
   return EditLinkToolbar;
 }(_react.default.Component);
 exports.EditLinkToolbar = EditLinkToolbar;
-var editLink = function editLink(state, dispatch) {
-  var type = 'hyperlink';
-  if (state.selection instanceof _prosemirrorState.NodeSelection) {
-    type = state.selection.node.type.name;
-  }
-  if (dispatch) {
-    dispatch((0, _analytics.addAnalytics)(state, (0, _actions.showLinkToolbar)(state.tr), (0, _linkingUtils.buildEditLinkPayload)(type)));
-    return true;
-  }
-  return false;
+var editLink = function editLink(editorAnalyticsApi) {
+  return function (state, dispatch) {
+    var type = 'hyperlink';
+    if (state.selection instanceof _prosemirrorState.NodeSelection) {
+      type = state.selection.node.type.name;
+    }
+    if (dispatch) {
+      var tr = state.tr;
+      (0, _actions.showLinkToolbar)(tr);
+      editorAnalyticsApi === null || editorAnalyticsApi === void 0 ? void 0 : editorAnalyticsApi.attachAnalyticsEvent((0, _linkingUtils.buildEditLinkPayload)(type))(tr);
+      dispatch(tr);
+      return true;
+    }
+    return false;
+  };
 };
 exports.editLink = editLink;
 var buildEditLinkToolbar = function buildEditLinkToolbar(_ref) {
   var providerFactory = _ref.providerFactory,
     node = _ref.node,
     linkPicker = _ref.linkPicker,
-    featureFlags = _ref.featureFlags;
+    featureFlags = _ref.featureFlags,
+    editorAnalyticsApi = _ref.editorAnalyticsApi;
   return {
     type: 'custom',
     disableArrowNavigation: true,
@@ -142,7 +148,7 @@ var buildEditLinkToolbar = function buildEditLinkToolbar(_ref) {
           // If the title is changed in a smartlink, convert to standard blue hyperlink
           // (even if the url was also changed) - we don't want to lose the custom title.
           if (titleChanged) {
-            return (0, _card.commandWithMetadata)((0, _doc.changeSelectedCardToLink)(newText, newHref), {
+            return (0, _card.commandWithMetadata)((0, _doc.changeSelectedCardToLink)(newText, newHref, undefined, undefined, undefined, editorAnalyticsApi), {
               action: _analytics.ACTION.UPDATED,
               sourceEvent: analytic
             })(view.state, view.dispatch);

package/dist/cjs/plugins/card/ui/EditorSmartCardEventsNext.js

@@ -21,9 +21,9 @@ var _analyticsNext = require("@atlaskit/analytics-next");
 var _actions = require("../pm-plugins/actions");
 var _utils = require("@atlaskit/editor-common/utils");
 var _state = require("../pm-plugins/util/state");
-var _excluded = ["url", "display"],
-  _excluded2 = ["url", "display", "previousDisplay"],
-  _excluded3 = ["url", "display"];
+var _excluded = ["url", "display", "nodeContext"],
+  _excluded2 = ["url", "display", "previousDisplay", "nodeContext"],
+  _excluded3 = ["url", "display", "nodeContext"];
 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); }; }
@@ -127,12 +127,14 @@ var EventsBinding = function EventsBinding(_ref4) {
       created: function created(_ref5) {
         var url = _ref5.url,
           display = _ref5.display,
+          nodeContext = _ref5.nodeContext,
           metadata = (0, _objectWithoutProperties2.default)(_ref5, _excluded);
         linkCreated({
           url: url,
           displayCategory: displayCategoryFromDisplay(display)
         }, getSourceEventFromMetadata(metadata), {
           display: display,
+          nodeContext: nodeContext,
           creationMethod: getMethod(metadata)
         });
       },
@@ -140,6 +142,7 @@ var EventsBinding = function EventsBinding(_ref4) {
         var url = _ref6.url,
           display = _ref6.display,
           previousDisplay = _ref6.previousDisplay,
+          nodeContext = _ref6.nodeContext,
           metadata = (0, _objectWithoutProperties2.default)(_ref6, _excluded2);
         linkUpdated({
           url: url,
@@ -147,6 +150,7 @@ var EventsBinding = function EventsBinding(_ref4) {
         }, getSourceEventFromMetadata(metadata), {
           display: display,
           previousDisplay: previousDisplay,
+          nodeContext: nodeContext,
           updateMethod: getMethod(metadata),
           updateType: getUpdateType(metadata)
         });
@@ -154,12 +158,14 @@ var EventsBinding = function EventsBinding(_ref4) {
       deleted: function deleted(_ref7) {
         var url = _ref7.url,
           display = _ref7.display,
+          nodeContext = _ref7.nodeContext,
           metadata = (0, _objectWithoutProperties2.default)(_ref7, _excluded3);
         linkDeleted({
           url: url,
           displayCategory: displayCategoryFromDisplay(display)
         }, getSourceEventFromMetadata(metadata), {
           display: display,
+          nodeContext: nodeContext,
           deleteMethod: getMethod(metadata),
           deleteType: getDeleteType(metadata)
         });

package/dist/cjs/plugins/card/ui/LinkToolbarAppearance.js

@@ -46,7 +46,8 @@ var LinkToolbarAppearance = /*#__PURE__*/function (_React$Component) {
         allowEmbeds = _this$props.allowEmbeds,
         _this$props$allowBloc = _this$props.allowBlockCards,
         allowBlockCards = _this$props$allowBloc === void 0 ? true : _this$props$allowBloc,
-        platform = _this$props.platform;
+        platform = _this$props.platform,
+        editorAnalyticsApi = _this$props.editorAnalyticsApi;
       var preview = allowEmbeds && cardContext && url && cardContext.extractors.getPreview(url, platform);
       if (url) {
         var _cardContext$store, _urlState$error;
@@ -60,7 +61,7 @@ var LinkToolbarAppearance = /*#__PURE__*/function (_React$Component) {
       var embedOption = allowEmbeds && preview && {
         appearance: 'embed',
         title: intl.formatMessage(_messages2.messages.embed),
-        onClick: (0, _doc.setSelectedCardAppearance)('embed'),
+        onClick: (0, _doc.setSelectedCardAppearance)('embed', editorAnalyticsApi),
         selected: currentAppearance === 'embed',
         hidden: false,
         testId: 'embed-appearance',
@@ -70,7 +71,7 @@ var LinkToolbarAppearance = /*#__PURE__*/function (_React$Component) {
       var blockCardOption = allowBlockCards && {
         appearance: 'block',
         title: intl.formatMessage(_messages2.messages.block),
-        onClick: (0, _doc.setSelectedCardAppearance)('block'),
+        onClick: (0, _doc.setSelectedCardAppearance)('block', editorAnalyticsApi),
         selected: currentAppearance === 'block',
         testId: 'block-appearance',
         disabled: !isBlockCardLinkSupportedInParent,
@@ -78,7 +79,7 @@ var LinkToolbarAppearance = /*#__PURE__*/function (_React$Component) {
       };
       var options = [{
         title: intl.formatMessage(_messages2.messages.url),
-        onClick: (0, _card.commandWithMetadata)((0, _doc.changeSelectedCardToLink)(url, url, true), {
+        onClick: (0, _card.commandWithMetadata)((0, _doc.changeSelectedCardToLink)(url, url, true, undefined, undefined, editorAnalyticsApi), {
           action: _analytics.ACTION.CHANGED_TYPE
         }),
         selected: !currentAppearance,
@@ -86,7 +87,7 @@ var LinkToolbarAppearance = /*#__PURE__*/function (_React$Component) {
       }, {
         appearance: 'inline',
         title: intl.formatMessage(_messages2.messages.inline),
-        onClick: (0, _doc.setSelectedCardAppearance)('inline'),
+        onClick: (0, _doc.setSelectedCardAppearance)('inline', editorAnalyticsApi),
         selected: currentAppearance === 'inline',
         testId: 'inline-appearance'
       }];

package/dist/cjs/plugins/card/ui/LinkToolbarButtonGroup.js

@@ -10,7 +10,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _button = require("@atlaskit/button");
-var _Button = _interopRequireDefault(require("../../floating-toolbar/ui/Button"));
+var _ui = require("@atlaskit/editor-common/ui");
 var _excluded = ["disabled"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 /** @jsx jsx */
@@ -45,7 +45,7 @@ var LinkToolbarButtonGroup = function LinkToolbarButtonGroup(_ref2) {
       css: disabled ? disallowedWrapperStyle : defaultWrapperStyle,
       key: testId,
       disabled: disabled
-    }, (0, _react2.jsx)(_Button.default, {
+    }, (0, _react2.jsx)(_ui.FloatingToolbarButton, {
       css: disabled ? buttonStyleNoneEvent : buttonStyle,
       title: title,
       icon: (0, _react2.jsx)(Icon, {

package/dist/cjs/plugins/card/ui/ResizableEmbedCard.js

@@ -22,7 +22,6 @@ var _smartCard = require("@atlaskit/smart-card");
 var _styled = require("../../../ui/Resizer/styled");
 var _Resizer = _interopRequireDefault(require("../../../ui/Resizer"));
 var _utils = require("../../../ui/Resizer/utils");
-var _mediaSingle = require("../../../plugins/media/utils/media-single");
 var _styled2 = require("./styled");
 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; }
@@ -89,7 +88,7 @@ var ResizableEmbedCard = /*#__PURE__*/function (_React$Component) {
         state = _this$props2.view.state;
       var resizedPctWidth = _this.state.resizedPctWidth;
       var pos = typeof getPos === 'function' ? getPos() : undefined;
-      return (0, _mediaSingle.calcMediaPxWidth)({
+      return (0, _ui.calcMediaPxWidth)({
         origWidth: _editorSharedStyles.DEFAULT_EMBED_CARD_WIDTH,
         origHeight: _editorSharedStyles.DEFAULT_EMBED_CARD_HEIGHT,
         pctWidth: pctWidth,

package/dist/cjs/plugins/collab-edit/ui/styles.js

@@ -7,13 +7,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.inviteTeamWrapper = exports.badge = exports.avatarContainer = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
-var _constants = require("@atlaskit/theme/constants");
 var _colors = require("@atlaskit/theme/colors");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _templateObject, _templateObject2, _templateObject3;
-var inviteTeamWrapper = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  border-radius: 50%;\n  min-width: ", "px;\n  margin-left: -", "px;\n"])), "var(--ds-background-neutral, ".concat(_colors.N20, ")"), (0, _constants.gridSize)() * 4, (0, _constants.gridSize)() / 2);
+var inviteTeamWrapper = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  border-radius: 50%;\n  min-width: ", ";\n  margin-left: calc(-1 * ", ");\n"])), "var(--ds-background-neutral, ".concat(_colors.N20, ")"), "var(--ds-space-400, 32px)", "var(--ds-space-050, 4px)");
 exports.inviteTeamWrapper = inviteTeamWrapper;
-var avatarContainer = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin-right: ", "px;\n  display: flex;\n  align-items: center;\n\n  // ED-13102: This is to override list styles that come from the\n  // .wiki-content class in Confluence that should not apply within\n  // the toolbar. Has to be extra specific to override.\n  && > ul {\n    list-style-type: none;\n  }\n\n  div:last-child button.invite-to-edit {\n    border-radius: 50%;\n    height: 32px;\n    width: 32px;\n    padding: 2px;\n  }\n"])), (0, _constants.gridSize)());
+var avatarContainer = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin-right: ", ";\n  display: flex;\n  align-items: center;\n\n  // ED-13102: This is to override list styles that come from the\n  // .wiki-content class in Confluence that should not apply within\n  // the toolbar. Has to be extra specific to override.\n  && > ul {\n    list-style-type: none;\n  }\n\n  div:last-child button.invite-to-edit {\n    border-radius: 50%;\n    height: 32px;\n    width: 32px;\n    padding: 2px;\n  }\n"])), "var(--ds-space-100, 8px)");
 exports.avatarContainer = avatarContainer;
 var badge = function badge(color) {
   return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: block;\n  position: absolute;\n  right: 1px;\n  bottom: 1px;\n  width: 13px;\n  height: 13px;\n  z-index: ", ";\n  border-radius: 3px;\n  background: ", ";\n  color: ", ";\n  font-size: ", ";\n  line-height: 0;\n  padding-top: 7px;\n  text-align: center;\n  box-shadow: 0 0 1px ", ";\n  box-sizing: border-box;\n"])), _editorSharedStyles.akEditorSmallZIndex, color, "var(--ds-text-inverse, #fff)", (0, _editorSharedStyles.relativeFontSizeToBase16)(9), "var(--ds-border-inverse, #fff)");

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

@@ -14,7 +14,7 @@ var _actions = require("./actions");
 var _main = _interopRequireDefault(require("./pm-plugins/main"));
 var _keymap = _interopRequireDefault(require("./pm-plugins/keymap"));
 var _assets = require("../quick-insert/assets");
-var _analytics = require("../analytics");
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _messages = require("../insert-block/ui/ToolbarInsertBlock/messages");
 var _pluginKey = require("./pm-plugins/plugin-key");
 var _hooks = require("@atlaskit/editor-common/hooks");
@@ -160,8 +160,9 @@ var datePlugin = function datePlugin(_, api) {
             return /*#__PURE__*/_react.default.createElement(_assets.IconDate, null);
           },
           action: function action(insert, state) {
+            var _api$dependencies, _api$dependencies$ana, _api$dependencies$ana2, _api$dependencies$ana3;
             var tr = (0, _actions.createDate)(true)(insert, state);
-            (0, _analytics.addAnalytics)(state, tr, {
+            api === null || api === void 0 ? void 0 : (_api$dependencies = api.dependencies) === null || _api$dependencies === void 0 ? void 0 : (_api$dependencies$ana = _api$dependencies.analytics) === null || _api$dependencies$ana === void 0 ? void 0 : (_api$dependencies$ana2 = _api$dependencies$ana.actions) === null || _api$dependencies$ana2 === void 0 ? void 0 : (_api$dependencies$ana3 = _api$dependencies$ana2.attachAnalyticsEvent) === null || _api$dependencies$ana3 === void 0 ? void 0 : _api$dependencies$ana3.call(_api$dependencies$ana2, {
               action: _analytics.ACTION.INSERTED,
               actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
               actionSubjectId: _analytics.ACTION_SUBJECT_ID.DATE,
@@ -169,7 +170,7 @@ var datePlugin = function datePlugin(_, api) {
               attributes: {
                 inputMethod: _analytics.INPUT_METHOD.QUICK_INSERT
               }
-            });
+            })(tr);
             return tr;
           }
         }];

package/dist/cjs/plugins/expand/ui/styles.js

@@ -8,11 +8,10 @@ exports.expandStyles = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _components = require("@atlaskit/theme/components");
-var _constants = require("@atlaskit/theme/constants");
 var _colors = require("@atlaskit/theme/colors");
 var _ui = require("@atlaskit/editor-common/ui");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-var _constants2 = require("../../breakout/constants");
+var _constants = require("../../breakout/constants");
 var _classNames = require("./class-names");
 var _templateObject, _templateObject2;
 var EXPAND_SELECTED_BACKGROUND = (0, _components.themed)({
@@ -48,16 +47,16 @@ var DANGER_STATE_BORDER_RADIUS = (0, _components.themed)({
   dark: '3px'
 });
 var expandStyles = function expandStyles(props) {
-  return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  .", " > div {\n    display: flex;\n  }\n\n  .", " {\n    ", "\n    overflow: hidden;\n    cursor: pointer;\n    box-sizing: border-box;\n\n    td > & {\n      margin-top: 0;\n    }\n\n    .", " svg {\n      ", ";\n      transform: rotate(90deg);\n    }\n\n    &.", ":not(.danger) {\n      ", "\n\n      ::after {\n        // Custom background color and borders (for dark theme).\n        background-color: ", ";\n        border: ", ";\n        border-radius: ", ";\n      }\n    }\n\n    &.danger {\n      background: ", ";\n      border: ", ";\n      border-color: ", ";\n      border-radius: ", ";\n    }\n  }\n\n  .ProseMirror\n    > .", ",\n    .", "\n    > .", " {\n    margin-left: -", "px;\n    margin-right: -", "px;\n  }\n\n  .", " {\n    ", "\n    cursor: text;\n    padding-top: 0px;\n  }\n\n  .", " {\n    ", "\n  }\n\n  .", " {\n    ", ";\n    align-items: center;\n    overflow: visible;\n  }\n\n  .", " {\n    background: ", ";\n    border-color: ", ";\n\n    .", " {\n      padding-top: ", "px;\n    }\n  }\n\n  .", " {\n    width: 100%;\n  }\n\n  /* stylelint-disable property-no-unknown, value-keyword-case */\n  .", ":(.", ") {\n    .expand-content-wrapper {\n      height: auto;\n    }\n  }\n  /* stylelint-enable property-no-unknown, value-keyword-case */\n\n  .", ":not(.", ") {\n    .ak-editor-expand__content {\n      position: absolute;\n      height: 1px;\n      width: 1px;\n      overflow: hidden;\n      clip: rect(1px, 1px, 1px, 1px);\n      white-space: nowrap;\n    }\n\n    .", " svg {\n      ", ";\n      transform: rotate(0deg);\n    }\n\n    &:not(.", "):not(.danger) {\n      background: transparent;\n      border-color: transparent;\n\n      &:hover {\n        border-color: ", ";\n        background: ", ";\n      }\n    }\n  }\n"])), _classNames.expandClassNames.icon, _classNames.expandClassNames.prefix, _ui.sharedExpandStyles.containerStyles({
+  return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  .", " > div {\n    display: flex;\n  }\n\n  .", " {\n    ", "\n    overflow: hidden;\n    cursor: pointer;\n    box-sizing: border-box;\n\n    td > & {\n      margin-top: 0;\n    }\n\n    .", " svg {\n      ", ";\n      transform: rotate(90deg);\n    }\n\n    &.", ":not(.danger) {\n      ", "\n\n      ::after {\n        // Custom background color and borders (for dark theme).\n        background-color: ", ";\n        border: ", ";\n        border-radius: ", ";\n      }\n    }\n\n    &.danger {\n      background: ", ";\n      border: ", ";\n      border-color: ", ";\n      border-radius: ", ";\n    }\n  }\n\n  .ProseMirror\n    > .", ",\n    .", "\n    > .", " {\n    margin-left: -", "px;\n    margin-right: -", "px;\n  }\n\n  .", " {\n    ", "\n    cursor: text;\n    padding-top: 0px;\n  }\n\n  .", " {\n    ", "\n  }\n\n  .", " {\n    ", ";\n    align-items: center;\n    overflow: visible;\n  }\n\n  .", " {\n    background: ", ";\n    border-color: ", ";\n\n    .", " {\n      padding-top: ", ";\n    }\n  }\n\n  .", " {\n    width: 100%;\n  }\n\n  /* stylelint-disable property-no-unknown, value-keyword-case */\n  .", ":(.", ") {\n    .expand-content-wrapper {\n      height: auto;\n    }\n  }\n  /* stylelint-enable property-no-unknown, value-keyword-case */\n\n  .", ":not(.", ") {\n    .ak-editor-expand__content {\n      position: absolute;\n      height: 1px;\n      width: 1px;\n      overflow: hidden;\n      clip: rect(1px, 1px, 1px, 1px);\n      white-space: nowrap;\n    }\n\n    .", " svg {\n      ", ";\n      transform: rotate(0deg);\n    }\n\n    &:not(.", "):not(.danger) {\n      background: transparent;\n      border-color: transparent;\n\n      &:hover {\n        border-color: ", ";\n        background: ", ";\n      }\n    }\n  }\n"])), _classNames.expandClassNames.icon, _classNames.expandClassNames.prefix, _ui.sharedExpandStyles.containerStyles({
     expanded: false,
     focused: false
-  })(props), _classNames.expandClassNames.iconContainer, EXPAND_ICON_COLOR(props), _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Blanket, _editorSharedStyles.SelectionStyle.Border]), ACTIVE_STATE_BACKGROUND_COLOR(props), ACTIVE_STATE_BORDER(props), ACTIVE_STATE_BORDER_RADIUS(props), DANGER_STATE_BACKGROUND_COLOR(props), DANGER_STATE_BORDER(props), DANGER_STATE_BORDER_COLOR(props), DANGER_STATE_BORDER_RADIUS(props), _classNames.expandClassNames.type('expand'), _constants2.BreakoutCssClassName.BREAKOUT_MARK_DOM, _classNames.expandClassNames.type('expand'), _editorSharedStyles.akLayoutGutterOffset, _editorSharedStyles.akLayoutGutterOffset, _classNames.expandClassNames.content, _ui.sharedExpandStyles.contentStyles({
+  })(props), _classNames.expandClassNames.iconContainer, EXPAND_ICON_COLOR(props), _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Blanket, _editorSharedStyles.SelectionStyle.Border]), ACTIVE_STATE_BACKGROUND_COLOR(props), ACTIVE_STATE_BORDER(props), ACTIVE_STATE_BORDER_RADIUS(props), DANGER_STATE_BACKGROUND_COLOR(props), DANGER_STATE_BORDER(props), DANGER_STATE_BORDER_COLOR(props), DANGER_STATE_BORDER_RADIUS(props), _classNames.expandClassNames.type('expand'), _constants.BreakoutCssClassName.BREAKOUT_MARK_DOM, _classNames.expandClassNames.type('expand'), _editorSharedStyles.akLayoutGutterOffset, _editorSharedStyles.akLayoutGutterOffset, _classNames.expandClassNames.content, _ui.sharedExpandStyles.contentStyles({
     expanded: false,
     focused: false
   })(props), _classNames.expandClassNames.titleInput, _ui.sharedExpandStyles.titleInputStyles(props), _classNames.expandClassNames.titleContainer, _ui.sharedExpandStyles.titleContainerStyles(props), _classNames.expandClassNames.expanded, EXPAND_SELECTED_BACKGROUND(props), (0, _components.themed)({
     light: "var(--ds-border, ".concat(_colors.N40A, ")"),
     dark: "var(--ds-border, ".concat(_colors.DN50, ")")
-  })(props), _classNames.expandClassNames.content, (0, _constants.gridSize)(), _classNames.expandClassNames.inputContainer, _classNames.expandClassNames.prefix, _classNames.expandClassNames.expanded, _classNames.expandClassNames.prefix, _classNames.expandClassNames.expanded, _classNames.expandClassNames.iconContainer, EXPAND_ICON_COLOR(props), _editorSharedStyles.akEditorSelectedNodeClassName, (0, _components.themed)({
+  })(props), _classNames.expandClassNames.content, "var(--ds-space-100, 8px)", _classNames.expandClassNames.inputContainer, _classNames.expandClassNames.prefix, _classNames.expandClassNames.expanded, _classNames.expandClassNames.prefix, _classNames.expandClassNames.expanded, _classNames.expandClassNames.iconContainer, EXPAND_ICON_COLOR(props), _editorSharedStyles.akEditorSelectedNodeClassName, (0, _components.themed)({
     light: "var(--ds-border, ".concat(_colors.N50A, ")"),
     dark: "var(--ds-border, ".concat(_colors.DN50, ")")
   })(props), EXPAND_SELECTED_BACKGROUND(props));

package/dist/cjs/plugins/floating-toolbar/ui/Dropdown.js

@@ -18,7 +18,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
 var _Dropdown = _interopRequireDefault(require("../../../ui/Dropdown"));
-var _Button = _interopRequireDefault(require("./Button"));
+var _ui = require("@atlaskit/editor-common/ui");
 var _DropdownMenu = _interopRequireWildcard(require("./DropdownMenu"));
 var _templateObject, _templateObject2;
 /** @jsx jsx */
@@ -127,7 +127,7 @@ var Dropdown = /*#__PURE__*/function (_Component) {
         var TriggerIcon = hideExpandIcon ? icon : (0, _react2.jsx)(CompositeIcon, {
           icon: icon
         });
-        trigger = (0, _react2.jsx)(_Button.default, {
+        trigger = (0, _react2.jsx)(_ui.FloatingToolbarButton, {
           testId: buttonTestId,
           title: title,
           icon: TriggerIcon,
@@ -138,7 +138,7 @@ var Dropdown = /*#__PURE__*/function (_Component) {
           tooltipContent: tooltip
         });
       } else {
-        trigger = (0, _react2.jsx)(_Button.default, {
+        trigger = (0, _react2.jsx)(_ui.FloatingToolbarButton, {
           testId: buttonTestId,
           iconAfter: (0, _react2.jsx)("span", {
             css: dropdownExpandContainer

package/dist/cjs/plugins/floating-toolbar/ui/DropdownMenu.js

@@ -23,6 +23,7 @@ var _reactIntlNext = require("react-intl-next");
 var _messages = _interopRequireDefault(require("./messages"));
 var _templateObject, _templateObject2, _templateObject3;
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 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; } }
 var menuItemDimensions = {
@@ -31,8 +32,11 @@ var menuItemDimensions = {
 };
 exports.menuItemDimensions = menuItemDimensions;
 var spacer = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex: 1;\n  padding: 8px;\n"])));
-var menuContainer = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  min-width: ", "px;\n\n  // temporary solution to retain spacing defined by @atlaskit/Item\n  & button {\n    min-height: ", "px;\n    padding: 8px 8px 7px;\n\n    & > [data-item-elem-before] {\n      margin-right: ", "px;\n    }\n  }\n"])), menuItemDimensions.width, (0, _constants.gridSize)() * 4, (0, _constants.gridSize)() / 2);
+var menuContainer = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  min-width: ", "px;\n\n  // temporary solution to retain spacing defined by @atlaskit/Item\n  & button {\n    min-height: ", ";\n    padding: 8px 8px 7px;\n\n    & > [data-item-elem-before] {\n      margin-right: ", ";\n    }\n  }\n"])), menuItemDimensions.width, "var(--ds-space-400, 32px)", "var(--ds-space-050, 4px)");
 var label = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  width: 100%;\n"])));
+
+// TODO: Migrate away from gridSize
+// Recommendation: Replace with 4 as itemSpacing is used in calculations expecting a number
 var itemSpacing = (0, _constants.gridSize)() / 2;
 
 // Extend the ButtonItem component type to allow mouse events to be accepted from the Typescript check

package/dist/cjs/plugins/floating-toolbar/ui/ExtensionsPlaceholder.js

@@ -15,7 +15,7 @@ var _extensions = require("@atlaskit/editor-common/extensions");
 var _buttonGroup = _interopRequireDefault(require("@atlaskit/button/button-group"));
 var _utils = require("../../../utils");
 var _extensionApi = require("../../extension/extension-api");
-var _Button = _interopRequireDefault(require("./Button"));
+var _ui = require("@atlaskit/editor-common/ui");
 var _Separator = _interopRequireDefault(require("./Separator"));
 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; }
@@ -88,7 +88,7 @@ var ExtensionButton = function ExtensionButton(props) {
     });
     item.action(targetNodeAdf, api);
   };
-  return /*#__PURE__*/_react.default.createElement(_Button.default, {
+  return /*#__PURE__*/_react.default.createElement(_ui.FloatingToolbarButton, {
     title: item.label,
     ariaLabel: item.tooltip,
     icon: ButtonIcon ? /*#__PURE__*/_react.default.createElement(ButtonIcon, {

package/dist/cjs/plugins/floating-toolbar/ui/ScrollButtons.js

@@ -11,18 +11,16 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
-var _constants = require("@atlaskit/theme/constants");
 var _chevronLeftLarge = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-left-large"));
 var _chevronRightLarge = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-right-large"));
-var _Button = _interopRequireDefault(require("./Button"));
+var _ui = require("@atlaskit/editor-common/ui");
 var _messages = _interopRequireDefault(require("./messages"));
 var _rafSchd = _interopRequireDefault(require("raf-schd"));
 var _templateObject;
 /** @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 akGridSize = (0, _constants.gridSize)();
-var toolbarScrollButtons = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  grid-gap: ", "px;\n  padding: ", "px ", "px;\n  border-left: solid ", " 1px;\n  flex-shrink: 0;\n  align-items: center;\n"])), akGridSize / 2, akGridSize / 2, akGridSize, "var(--ds-border, ".concat(_colors.N30, ")"));
+var toolbarScrollButtons = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  grid-gap: ", ";\n  padding: ", " ", ";\n  border-left: solid ", " 1px;\n  flex-shrink: 0;\n  align-items: center;\n"])), "var(--ds-space-050, 4px)", "var(--ds-space-050, 4px)", "var(--ds-space-100, 8px)", "var(--ds-border, ".concat(_colors.N30, ")"));
 var LeftIcon = _chevronLeftLarge.default;
 var RightIcon = _chevronRightLarge.default;
 var _default = function _default(_ref) {
@@ -128,14 +126,14 @@ var _default = function _default(_ref) {
     ref: buttonsContainerRef,
     css: toolbarScrollButtons,
     className: "scroll-buttons"
-  }, (0, _react2.jsx)(_Button.default, {
+  }, (0, _react2.jsx)(_ui.FloatingToolbarButton, {
     title: intl.formatMessage(_messages.default.floatingToolbarScrollLeft),
     icon: (0, _react2.jsx)(LeftIcon, {
       label: intl.formatMessage(_messages.default.floatingToolbarScrollLeft)
     }),
     onClick: scrollLeft,
     disabled: !canScrollLeft || disabled
-  }), (0, _react2.jsx)(_Button.default, {
+  }), (0, _react2.jsx)(_ui.FloatingToolbarButton, {
     title: intl.formatMessage(_messages.default.floatingToolbarScrollRight),
     icon: (0, _react2.jsx)(RightIcon, {
       label: intl.formatMessage(_messages.default.floatingToolbarScrollRight)

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

@@ -24,7 +24,7 @@ var _constants = require("@atlaskit/theme/constants");
 var _colors = require("@atlaskit/theme/colors");
 var _utils = require("../utils");
 var _commands = require("../pm-plugins/toolbar-data/commands");
-var _Button = _interopRequireDefault(require("./Button"));
+var _ui = require("@atlaskit/editor-common/ui");
 var _Dropdown = _interopRequireDefault(require("./Dropdown"));
 var _Select = _interopRequireDefault(require("./Select"));
 var _Separator = _interopRequireDefault(require("./Separator"));
@@ -47,7 +47,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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; } }
-var akGridSize = (0, _constants.gridSize)();
 var ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
   var items = _ref.items,
     dispatchCommand = _ref.dispatchCommand,
@@ -84,7 +83,7 @@ var ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
             }
           }
         };
-        return (0, _react2.jsx)(_Button.default, {
+        return (0, _react2.jsx)(_ui.FloatingToolbarButton, {
           className: item.className,
           key: idx,
           title: item.title,
@@ -180,6 +179,7 @@ var ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
         }
         if (item.selectType === 'color') {
           return (0, _react2.jsx)(_ColorPickerButton.default, {
+            skipFocusButtonAfterPick: true,
             key: idx,
             title: item.title,
             onChange: function onChange(selected) {
@@ -260,10 +260,10 @@ var toolbarContainer = function toolbarContainer(theme, scrollable, hasSelect, f
   return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _components.themed)({
     light: "var(--ds-surface-overlay, white)",
     dark: "var(--ds-surface-overlay, ".concat(_colors.DN70, ")")
-  })(theme), (0, _constants.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 ? (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n        ", "\n        overflow: hidden;\n      "])), hasSelect ? (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n              height: 40px;\n            "]))) : (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n              height: 32px;\n            "])))) : (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n        padding: ", "px ", "px;\n        ", "\n      "])), akGridSize / 2, akGridSize, firstElementIsSelect && (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n          padding-left: ", "px;\n        "])), akGridSize / 2)));
+  })(theme), (0, _constants.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 ? (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n        ", "\n        overflow: hidden;\n      "])), hasSelect ? (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n              height: 40px;\n            "]))) : (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n              height: 32px;\n            "])))) : (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n        padding: ", " ", ";\n        ", "\n      "])), "var(--ds-space-050, 4px)", "var(--ds-space-100, 8px)", firstElementIsSelect && (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n          padding-left: ", ";\n        "])), "var(--ds-space-050, 4px)")));
 };
 var toolbarOverflow = function toolbarOverflow(scrollable, scrollDisabled, firstElementIsSelect) {
-  return (0, _react2.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), scrollable ? (0, _react2.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\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 ? (0, _react2.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n              overflow: hidden;\n            "]))) : (0, _react2.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n              overflow-x: auto;\n              overflow-y: hidden;\n            "]))), akGridSize / 2, firstElementIsSelect ? (0, _react2.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n                  margin-left: ", "px;\n                "])), akGridSize / 2) : (0, _react2.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n                  margin-left: ", "px;\n                "])), akGridSize), akGridSize) : (0, _react2.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n        display: flex;\n      "]))));
+  return (0, _react2.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), scrollable ? (0, _react2.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\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 ? (0, _react2.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n              overflow: hidden;\n            "]))) : (0, _react2.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n              overflow-x: auto;\n              overflow-y: hidden;\n            "]))), "var(--ds-space-050, 4px)", firstElementIsSelect ? (0, _react2.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n                  margin-left: ", ";\n                "])), "var(--ds-space-050, 4px)") : (0, _react2.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n                  margin-left: ", ";\n                "])), "var(--ds-space-100, 8px)"), "var(--ds-space-100, 8px)") : (0, _react2.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n        display: flex;\n      "]))));
 };
 function makeSameType(_a, _b) {
   return true;

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

@@ -10,8 +10,7 @@ Object.defineProperty(exports, "GRID_GUTTER", {
     return _styles.GRID_GUTTER;
   }
 });
-exports.stateKey = exports.gridTypeForLayout = exports.default = exports.createDisplayGrid = exports.GRID_SIZE = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+exports.gridTypeForLayout = exports.default = exports.GRID_SIZE = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -23,29 +22,24 @@ var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react2 = require("@emotion/react");
 var _prosemirrorState = require("prosemirror-state");
+var _hooks = require("@atlaskit/editor-common/hooks");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-var _index = require("../width/index");
-var _WithPluginState = _interopRequireDefault(require("../../ui/WithPluginState"));
-var _eventDispatcher = require("../../event-dispatcher");
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _styles = require("./styles");
 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; } }
-var stateKey = new _prosemirrorState.PluginKey('gridPlugin');
-exports.stateKey = stateKey;
 var GRID_SIZE = 12;
 exports.GRID_SIZE = GRID_SIZE;
-var createDisplayGrid = function createDisplayGrid(eventDispatcher) {
-  var dispatch = (0, _eventDispatcher.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 _prosemirrorState.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;
   };
 };
-exports.createDisplayGrid = createDisplayGrid;
 var gridTypeForLayout = function gridTypeForLayout(layout) {
   return layout === 'wrap-left' || layout === 'wrap-right' ? 'wrapped' : 'full';
 };
@@ -140,31 +134,71 @@ var Grid = /*#__PURE__*/function (_React$Component) {
   return Grid;
 }(_react.default.Component);
 var ThemedGrid = (0, _react2.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 = (0, _hooks.useSharedPluginState)(api, ['width', 'grid']),
+    widthState = _useSharedPluginState.widthState,
+    gridState = _useSharedPluginState.gridState;
+  if (!gridState) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.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 : _editorSharedStyles.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.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.default.createElement(_WithPluginState.default, {
-        plugins: {
-          grid: stateKey,
-          widthState: _index.pluginKey
-        },
-        render: function render(_ref4) {
-          var grid = _ref4.grid,
-            _ref4$widthState = _ref4.widthState,
-            widthState = _ref4$widthState === void 0 ? {
-              width: _editorSharedStyles.akEditorFullPageMaxWidth
-            } : _ref4$widthState;
-          if (!grid) {
-            return null;
-          }
-          return /*#__PURE__*/_react.default.createElement(ThemedGrid, (0, _extends2.default)({
-            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.default.createElement(ContentComponent, {
+        editorView: editorView,
+        options: options,
+        api: api
       });
     }
   };