npm - @atlaskit/editor-core - Versions diffs - 183.0.9 → 183.1.0 - Mend

@atlaskit/editor-core 183.0.9 → 183.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1562) hide show

package/dist/cjs/plugins/status/plugin.js CHANGED Viewed

@@ -18,12 +18,13 @@ Object.defineProperty(exports, "pluginKeyName", {
   }
 });
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _prosemirrorState = require("prosemirror-state");
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _utils = require("@atlaskit/editor-common/utils");
 var _getInlineNodeViewProducer = require("../../nodeviews/getInlineNodeViewProducer");
 var _status = require("./nodeviews/status");
 var _pluginKey = require("./plugin-key");
-var _utils = require("./utils");
+var _utils2 = require("./utils");
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var createPlugin = function createPlugin(pmPluginFactoryParams, options) {
@@ -94,14 +95,19 @@ var createPlugin = function createPlugin(pmPluginFactoryParams, options) {
       var changed = false;
       var tr = newEditorState.tr;
-      // user leaves the StatusPicker with empty text and selects a new node
+      /**
+       * When user start creating status, and, when users navigates away
+       *  while empty, then we want to remove empty ("set a status") status.
+       * But when transaction to add empty status happens from undo/redo
+       *  we don't want to remove it.
+       */
       if (transactions.find(function (tr) {
-        return tr.selectionSet;
+        return tr.selectionSet && !tr.getMeta(_utils.pmHistoryPluginKey);
       })) {
-        var oldStatus = (0, _utils.mayGetStatusAtSelection)(oldEditorState.selection);
-        var newStatus = (0, _utils.mayGetStatusAtSelection)(newEditorState.selection);
+        var oldStatus = (0, _utils2.mayGetStatusAtSelection)(oldEditorState.selection);
+        var newStatus = (0, _utils2.mayGetStatusAtSelection)(newEditorState.selection);
         if (oldStatus && (newStatus && oldStatus.localId !== newStatus.localId || !newStatus)) {
-          if ((0, _utils.isEmptyStatus)(oldStatus)) {
+          if ((0, _utils2.isEmptyStatus)(oldStatus)) {
             var pos = oldEditorState.selection.from;
             tr.delete(tr.mapping.map(pos), tr.mapping.map(pos + 1));
             changed = true;

package/dist/cjs/plugins/status/ui/statusPicker.js CHANGED Viewed

@@ -36,7 +36,7 @@ var InputMethod = /*#__PURE__*/function (InputMethod) {
   return InputMethod;
 }({});
 exports.InputMethod = InputMethod;
-var pickerContainer = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  padding: ", "px 0;\n  border-radius: ", "px;\n  box-shadow: ", ";\n  input {\n    text-transform: uppercase;\n  }\n"])), "var(--ds-surface-overlay, ".concat(_colors.N0, ")"), (0, _constants.gridSize)(), (0, _constants.borderRadius)(), "var(--ds-shadow-overlay, 0 0 1px rgba(9, 30, 66, 0.31), 0 4px 8px -2px rgba(9, 30, 66, 0.25))");
+var pickerContainer = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  padding: ", " 0;\n  border-radius: ", "px;\n  box-shadow: ", ";\n  input {\n    text-transform: uppercase;\n  }\n"])), "var(--ds-surface-overlay, ".concat(_colors.N0, ")"), "var(--ds-space-100, 8px)", (0, _constants.borderRadius)(), "var(--ds-shadow-overlay, 0 0 1px rgba(9, 30, 66, 0.31), 0 4px 8px -2px rgba(9, 30, 66, 0.25))");
 var StatusPickerWithoutAnalytcs = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(StatusPickerWithoutAnalytcs, _React$Component);
   var _super = _createSuper(StatusPickerWithoutAnalytcs);

package/dist/cjs/plugins/type-ahead/insert-utils.js CHANGED Viewed

@@ -6,8 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.insertInlineNodeOrFragment = exports.insertBlockNode = void 0;
 var _prosemirrorState = require("prosemirror-state");
 var _prosemirrorModel = require("prosemirror-model");
-var _selection = require("../../utils/selection");
-var _insert = require("../../utils/insert");
+var _insert = require("@atlaskit/editor-common/insert");
 function findInsertPoint(doc, pos, nodeToInsert) {
   var $pos = doc.resolve(pos);
   var createInsertPosition = function createInsertPosition(from, to) {
@@ -71,7 +70,7 @@ var insertBlockNode = function insertBlockNode(_ref) {
   if (node.isBlock) {
     tr.delete(start, end);
     var mappedStart = tr.mapping.map(start);
-    var nodeNormalized = (0, _selection.normaliseNestedLayout)(tr, node);
+    var nodeNormalized = (0, _insert.normaliseNestedLayout)(tr, node);
     // Handle edge cases for hr and mediaSingle
     var inserted = (0, _insert.safeInsert)(nodeNormalized, mappedStart)(tr);

package/dist/cjs/plugins/type-ahead/ui/TypeAheadPopup.js CHANGED Viewed

@@ -24,7 +24,7 @@ var _templateObject;
 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 DEFAULT_TYPEAHEAD_MENU_HEIGHT = 380;
-var typeAheadContent = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  border-radius: ", "px;\n  box-shadow: ", ";\n  padding: ", "px 0;\n  width: 320px;\n  max-height: 380px; /* ~5.5 visibile items */\n  overflow-y: auto;\n  -ms-overflow-style: -ms-autohiding-scrollbar;\n  position: relative;\n"])), "var(--ds-surface-overlay, ".concat(_colors.N0, ")"), (0, _constants.borderRadius)(), "var(--ds-shadow-overlay, ".concat("0 0 1px ".concat(_colors.N60A, ", 0 4px 8px -2px ").concat(_colors.N50A), ")"), (0, _constants.gridSize)() / 2);
+var typeAheadContent = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  border-radius: ", "px;\n  box-shadow: ", ";\n  padding: ", " 0;\n  width: 320px;\n  max-height: 380px; /* ~5.5 visibile items */\n  overflow-y: auto;\n  -ms-overflow-style: -ms-autohiding-scrollbar;\n  position: relative;\n"])), "var(--ds-surface-overlay, ".concat(_colors.N0, ")"), (0, _constants.borderRadius)(), "var(--ds-shadow-overlay, ".concat("0 0 1px ".concat(_colors.N60A, ", 0 4px 8px -2px ").concat(_colors.N50A), ")"), "var(--ds-space-050, 4px)");
 var Highlight = function Highlight(_ref) {
   var state = _ref.state,
     triggerHandler = _ref.triggerHandler;

package/dist/cjs/plugins/width/index.js CHANGED Viewed

@@ -11,6 +11,12 @@ var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _prosemirrorState = require("prosemirror-state");
 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; }
+/**
+ * @private
+ * @deprecated
+ *
+ * Do not use this plugin key directly. Please use the `sharedState` of this plugin instead.
+ */
 var pluginKey = new _prosemirrorState.PluginKey('widthPlugin');
 exports.pluginKey = pluginKey;
 function createPlugin(dispatch) {
@@ -50,6 +56,12 @@ var widthPlugin = function widthPlugin() {
         }
       }];
     },
+    getSharedState: function getSharedState(editorState) {
+      if (!editorState) {
+        return undefined;
+      }
+      return pluginKey.getState(editorState);
+    },
     // do this early here, otherwise we have to wait for WidthEmitter to debounce
     // which causes anything dependent on lineLength to jump around
     contentComponent: function contentComponent(_ref2) {

package/dist/cjs/ui/Alignment/styles.js CHANGED Viewed

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.alignmentWrapper = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
-var _constants = require("@atlaskit/theme/constants");
 var _templateObject;
-var alignmentWrapper = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding: 0 ", "px;\n  display: flex;\n  flex-wrap: wrap;\n  max-width: ", "px;\n"])), (0, _constants.gridSize)(), 3 * 32);
+var alignmentWrapper = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding: 0 ", ";\n  display: flex;\n  flex-wrap: wrap;\n  max-width: ", "px;\n"])), "var(--ds-space-100, 8px)", 3 * 32);
 exports.alignmentWrapper = alignmentWrapper;

package/dist/cjs/ui/Appearance/Comment/Toolbar.js CHANGED Viewed

@@ -11,7 +11,6 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = 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, _templateObject4;
@@ -20,8 +19,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(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 TableControlsPadding = 20;
 exports.TableControlsPadding = TableControlsPadding;
-var mainToolbarWrapperStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  align-items: center;\n  padding: ", "px ", "px 0;\n  display: flex;\n  height: auto;\n  background-color: ", ";\n  box-shadow: none;\n  padding-left: ", "px;\n\n  & > div {\n    > :first-child:not(style),\n    > style:first-child + * {\n      margin-left: 0;\n    }\n  }\n\n  .block-type-btn {\n    padding-left: 0;\n  }\n"])), (0, _constants.gridSize)(), (0, _constants.gridSize)(), "var(--ds-surface, white)", TableControlsPadding);
-var stickyToolbarWrapperStyle = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  /* stylelint-disable declaration-block-no-duplicate-properties */\n  position: relative;\n  position: sticky;\n  /* stylelint-enable declaration-block-no-duplicate-properties */\n  padding-bottom: ", "px;\n  z-index: ", ";\n  transition: box-shadow ease-in-out 0.2s;\n  &.show-keyline {\n    box-shadow: 0 ", "px 0 0\n      ", ";\n  }\n"])), (0, _constants.gridSize)(), _editorSharedStyles.akEditorMenuZIndex, _editorSharedStyles.akEditorToolbarKeylineHeight, "var(--ds-border, ".concat(_colors.N30, ")"));
+var mainToolbarWrapperStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  align-items: center;\n  padding: ", " ", " 0;\n  display: flex;\n  height: auto;\n  background-color: ", ";\n  box-shadow: none;\n  padding-left: ", "px;\n\n  & > div {\n    > :first-child:not(style),\n    > style:first-child + * {\n      margin-left: 0;\n    }\n  }\n\n  .block-type-btn {\n    padding-left: 0;\n  }\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-surface, white)", TableControlsPadding);
+var stickyToolbarWrapperStyle = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  /* stylelint-disable declaration-block-no-duplicate-properties */\n  position: relative;\n  position: sticky;\n  /* stylelint-enable declaration-block-no-duplicate-properties */\n  padding-bottom: ", ";\n  z-index: ", ";\n  transition: box-shadow ease-in-out 0.2s;\n  &.show-keyline {\n    box-shadow: 0 ", "px 0 0\n      ", ";\n  }\n"])), "var(--ds-space-100, 8px)", _editorSharedStyles.akEditorMenuZIndex, _editorSharedStyles.akEditorToolbarKeylineHeight, "var(--ds-border, ".concat(_colors.N30, ")"));
 var StickyToolbar = function StickyToolbar(props) {
   var _useState = (0, _react.useState)(0),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),

package/dist/cjs/ui/Appearance/FullPage/MainToolbar.js CHANGED Viewed

@@ -8,7 +8,6 @@ exports.nonCustomToolbarWrapperStyle = exports.mainToolbarStyle = exports.mainTo
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
-var _constants = require("@atlaskit/theme/constants");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
 var MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT = 868;
@@ -23,7 +22,7 @@ var mainToolbarStyle = function mainToolbarStyle(showKeyline, twoLineEditorToolb
   return [mainToolbar, showKeyline && mainToolbarWithKeyline, twoLineEditorToolbar && mainToolbarTwoLineStyle];
 };
 exports.mainToolbarStyle = mainToolbarStyle;
-var mainToolbarIconBeforeStyle = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  margin: ", "px;\n  height: ", "px;\n  width: ", "px;\n  @media (max-width: ", "px) {\n    grid-column: 1;\n    grid-row: 1;\n  }\n"])), (0, _constants.gridSize)() * 2, (0, _constants.gridSize)() * 4, (0, _constants.gridSize)() * 4, _editorSharedStyles.akEditorMobileMaxWidth);
+var mainToolbarIconBeforeStyle = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  margin: ", ";\n  height: ", ";\n  width: ", ";\n  @media (max-width: ", "px) {\n    grid-column: 1;\n    grid-row: 1;\n  }\n"])), "var(--ds-space-200, 16px)", "var(--ds-space-400, 32px)", "var(--ds-space-400, 32px)", _editorSharedStyles.akEditorMobileMaxWidth);
 exports.mainToolbarIconBeforeStyle = mainToolbarIconBeforeStyle;
 var mainToolbarFirstChild = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-grow: 1;\n\n  @media (max-width: ", "px) {\n    grid-column: 1;\n    grid-row: 1;\n  }\n"])), _editorSharedStyles.akEditorMobileMaxWidth);
 var mainToolbarFirstChildTowLine = (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  @media (max-width: ", "px) {\n    flex: 1 1 100%;\n    height: ", "px;\n    justify-content: flex-end;\n    // ED-10241: We add fit-content to ensure that MainToolbar does not\n    // shrink more than the size of its contents. This will prevent the\n    // find/replace icon from being overlapped during a confluence\n    // publish operation\n    min-width: fit-content;\n  }\n"])), MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, toolbarLineHeight);

package/dist/cjs/ui/ColorPickerButton/index.js CHANGED Viewed

@@ -81,12 +81,17 @@ var ColorPickerButton = function ColorPickerButton(props) {
     return position;
   }, []);
   var ColorPaletteWithListeners = (0, _ui.withOuterListeners)(_ColorPalette.default);
-  var onColorSelected = function onColorSelected(color, label) {
+  var onChange = props.onChange,
+    createAnalyticsEvent = props.createAnalyticsEvent,
+    colorPalette = props.colorPalette,
+    placement = props.placement,
+    skipFocusButtonAfterPick = props.skipFocusButtonAfterPick;
+  var onColorSelected = _react.default.useCallback(function (color, label) {
     setIsOpenedByKeyboard(false);
     setIsPopupOpen(false);
     setIsPopupPositioned(false);
-    if (props.onChange) {
-      if (props.createAnalyticsEvent) {
+    if (onChange) {
+      if (createAnalyticsEvent) {
         // fire analytics
         var payload = {
           action: _types.ACTION.UPDATED,
@@ -95,19 +100,21 @@ var ColorPickerButton = function ColorPickerButton(props) {
           attributes: {
             color: color,
             label: label,
-            placement: props.placement
+            placement: placement
           },
           eventType: _types.EVENT_TYPE.TRACK
         };
-        props.createAnalyticsEvent(payload).fire(_consts.editorAnalyticsChannel);
+        createAnalyticsEvent(payload).fire(_consts.editorAnalyticsChannel);
       }
-      var newPalette = props.colorPalette.find(function (colorPalette) {
+      var newPalette = colorPalette.find(function (colorPalette) {
         return colorPalette.value === color;
       });
-      newPalette && props.onChange(newPalette);
+      newPalette && onChange(newPalette);
     }
-    focusButton();
-  };
+    if (!skipFocusButtonAfterPick) {
+      focusButton();
+    }
+  }, [colorPalette, onChange, createAnalyticsEvent, placement, skipFocusButtonAfterPick]);
   var renderPopup = function renderPopup() {
     if (!isPopupOpen || !buttonRef.current) {
       return;

package/dist/cjs/ui/ConfigPanel/ErrorMessage/ErrorImage.js CHANGED Viewed

@@ -8,12 +8,11 @@ exports.default = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
-var _constants = require("@atlaskit/theme/constants");
 var _templateObject;
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 // Quality Ticket: https://product-fabric.atlassian.net/browse/DSP-4249
 /** @jsx jsx */
-var imageContainer = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0 auto ", "px;\n  height: 80px;\n"])), (0, _constants.gridSize)() * 3);
+var imageContainer = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0 auto ", ";\n  height: 80px;\n"])), "var(--ds-space-300, 24px)");
 var ErrorImage = function ErrorImage() {
   return (0, _react2.jsx)("div", {
     css: imageContainer

package/dist/cjs/ui/ConfigPanel/Fields/ColorPicker.js CHANGED Viewed

@@ -21,7 +21,7 @@ var _ColorPickerButton = _interopRequireDefault(require("../../ColorPickerButton
 var _ColorPalette = require("../../../ui/ColorPalette");
 var _templateObject, _templateObject2;
 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; } /** @jsx jsx */
+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; } /** @jsx jsx */ // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 /*
     NOTE: color used here are not yet in atlaskit code
     this is part of extended color pack from ADG, which is yet to be release
@@ -331,7 +331,7 @@ var extendedColorPalette = [{
   });
 });
 exports.extendedColorPalette = extendedColorPalette;
-var colorPickerWrapper = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  height: ", "px;\n  padding-right: ", "px;\n"])), 4 * (0, _constants.gridSize)(), (0, _constants.gridSize)());
+var colorPickerWrapper = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  height: ", ";\n  padding-right: ", ";\n"])), "var(--ds-space-400, 32px)", "var(--ds-space-100, 8px)");
 var colorPickerLabel = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: ", "px;\n  margin-top: 0;\n"])), _typography.headingSizes.h400.size);
 var EXPANDED_COLOR_PICKER_COLUMNS = 9;
 exports.EXPANDED_COLOR_PICKER_COLUMNS = EXPANDED_COLOR_PICKER_COLUMNS;
@@ -377,7 +377,10 @@ var ColorPicker = function ColorPicker(props) {
     showSomewhatSemanticTooltips: useSomewhatSemanticTextColorNames,
     cols: EXPANDED_COLOR_PICKER_COLUMNS,
     alignX: "right",
-    placement: "ConfigPanel",
+    placement: "ConfigPanel"
+    // TODO: Migrate away from gridSize
+    // Recommendation: Update types of size object to accept string width/height and then replace gridSize with tokens
+    ,
     size: {
       width: 3 * (0, _constants.gridSize)(),
       height: 3 * (0, _constants.gridSize)()

package/dist/cjs/ui/ConfigPanel/Fields/Expand.js CHANGED Viewed

@@ -15,7 +15,6 @@ var _colors = require("@atlaskit/theme/colors");
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
 var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-right"));
 var _button = _interopRequireDefault(require("@atlaskit/button"));
-var _constants = require("@atlaskit/theme/constants");
 var _messages = require("../messages");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 /** @jsx jsx */
@@ -23,12 +22,12 @@ 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; }
 var expandContainer = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border-bottom: 1px solid ", ";\n"])), "var(--ds-border, ".concat(_colors.N40, ")"));
 exports.expandContainer = expandContainer;
-var expandControl = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  height: ", "px;\n  justify-content: center;\n  padding-right: ", "px;\n"])), (0, _constants.gridSize)() * 6, (0, _constants.gridSize)());
+var expandControl = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  height: ", ";\n  justify-content: center;\n  padding-right: ", ";\n"])), "var(--ds-space-600, 48px)", "var(--ds-space-100, 8px)");
 exports.expandControl = expandControl;
-var chevronContainer = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n\n  & > button {\n    width: ", "px;\n    height: ", "px;\n  }\n"])), (0, _constants.gridSize)() * 3, (0, _constants.gridSize)() * 3);
+var chevronContainer = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n\n  & > button {\n    width: ", ";\n    height: ", ";\n  }\n"])), "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)");
 var labelContainer = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  align-items: center;\n  display: flex;\n  font-weight: 500;\n"])));
 var expandContentContainer = function expandContentContainer(isHidden) {
-  return (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: ", ";\n  margin-top: -", "px;\n"])), isHidden ? 'none' : 'block', (0, _constants.gridSize)());
+  return (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: ", ";\n  margin-top: calc(-1 * ", ");\n"])), isHidden ? 'none' : 'block', "var(--ds-space-100, 8px)");
 };
 function Expand(_ref) {
   var field = _ref.field,

package/dist/cjs/ui/ConfigPanel/Fields/Fieldset.js CHANGED Viewed

@@ -25,7 +25,6 @@ var _select = _interopRequireDefault(require("@atlaskit/select"));
 var _addCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/add-circle"));
 var _messages = require("../messages");
 var _utils = require("../utils");
-var _constants = require("@atlaskit/theme/constants");
 var _colors = require("@atlaskit/theme/colors");
 var _templateObject, _templateObject2;
 /** @jsx jsx */
@@ -35,7 +34,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 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 actionsWrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border-top: 1px solid ", ";\n  margin-top: ", "px;\n  padding-top: ", "px;\n"])), "var(--ds-border, ".concat(_colors.N40A, ")"), (0, _constants.gridSize)() * 2, (0, _constants.gridSize)() * 2);
+var actionsWrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border-top: 1px solid ", ";\n  margin-top: ", ";\n  padding-top: ", ";\n"])), "var(--ds-border, ".concat(_colors.N40A, ")"), "var(--ds-space-200, 16px)", "var(--ds-space-200, 16px)");
 var populateFromParameters = function populateFromParameters(parameters, fields) {
   if (Object.keys(parameters).length) {
     var keys = Object.keys(parameters);

package/dist/cjs/ui/ConfigPanel/Fields/SelectItem.js CHANGED Viewed

@@ -8,7 +8,6 @@ exports.formatOptionLabel = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _avatar = _interopRequireDefault(require("@atlaskit/avatar"));
-var _constants = require("@atlaskit/theme/constants");
 var _templateObject, _templateObject2, _templateObject3;
 /** @jsx jsx */
 var itemWrapper = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n\n  small {\n    margin: 0;\n    display: block;\n    color: currentColor;\n  }\n"])));
@@ -35,7 +34,7 @@ var formatOptionLabel = function formatOptionLabel(_ref, _ref2) {
     appearance: "square"
   }) : icon), (0, _react.jsx)("div", {
     style: {
-      paddingLeft: icon ? (0, _constants.gridSize)() : 0
+      paddingLeft: icon ? "var(--ds-space-100, 8px)" : 0
     }
   }, (0, _react.jsx)("p", null, label, description && context !== 'value' && (0, _react.jsx)("small", null, description))));
 };

package/dist/cjs/ui/ConfigPanel/NestedForms/RemovableField.js CHANGED Viewed

@@ -9,7 +9,6 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
-var _constants = require("@atlaskit/theme/constants");
 var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/cross-circle"));
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _colors = require("@atlaskit/theme/colors");
@@ -17,7 +16,7 @@ var _messages = require("../messages");
 var _templateObject, _templateObject2, _templateObject3;
 /** @jsx jsx */
 var removableFieldWrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  margin-bottom: 0;\n"])));
-var wrapperWithMarginBottom = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin-bottom: ", "px;\n"])), (0, _constants.gridSize)() * 2);
+var wrapperWithMarginBottom = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin-bottom: ", ";\n"])), "var(--ds-space-200, 16px)");
 var removeButtonWrapper = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  right: 0;\n  top: 0;\n  cursor: pointer;\n\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n  }\n"])), "var(--ds-icon-subtle, ".concat(_colors.N80, ")"), "var(--ds-icon-danger, ".concat(_colors.R300, ")"));
 var RemovableField = function RemovableField(_ref) {
   var _children$props$field;

package/dist/cjs/ui/ContentStyles/index.js CHANGED Viewed

@@ -45,9 +45,9 @@ var _templateObject;
 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 contentStyles = function contentStyles(props) {
-  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    outline: none;\n    font-size: ", "px;\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n  }\n\n  .ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n    pointer-events: none;\n    opacity: 0.7;\n  }\n\n  .ProseMirror-hideselection *::selection {\n    background: transparent;\n  }\n\n  .ProseMirror-hideselection *::-moz-selection {\n    background: transparent;\n  }\n\n  .ProseMirror-selectednode {\n    outline: none;\n  }\n\n  .ProseMirror-selectednode:empty {\n    outline: 2px solid ", ";\n  }\n\n  ", "\n  ", "\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\n  .panelView-content-wrap {\n    box-sizing: border-box;\n  }\n\n  .mediaGroupView-content-wrap ul {\n    padding: 0;\n  }\n\n  /** Needed to override any cleared floats, e.g. image wrapping */\n\n  div.fabric-editor-block-mark[class^='fabric-editor-align'] {\n    clear: none !important;\n  }\n\n  .fabric-editor-align-end {\n    text-align: right;\n  }\n\n  .fabric-editor-align-start {\n    text-align: left;\n  }\n\n  .fabric-editor-align-center {\n    text-align: center;\n  }\n\n  .pm-table-header-content-wrap :not(.fabric-editor-alignment),\n  .pm-table-header-content-wrap\n    :not(p, .fabric-editor-block-mark)\n    + div.fabric-editor-block-mark,\n  .pm-table-cell-content-wrap\n    :not(p, .fabric-editor-block-mark)\n    + div.fabric-editor-block-mark {\n    p:first-of-type {\n      margin-top: 0;\n    }\n  }\n\n  .hyperlink-floating-toolbar,\n  .", " {\n    padding: 0;\n  }\n\n  /* Link icon in the Atlaskit package\n     is bigger than the others\n  */\n  .hyperlink-open-link {\n    svg {\n      max-width: 18px;\n    }\n    &[href] {\n      padding: 0 4px;\n    }\n  }\n"])), (0, _editorSharedStyles.editorFontSize)({
+  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    outline: none;\n    font-size: ", "px;\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n  }\n\n  .ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n    pointer-events: none;\n    opacity: 0.7;\n  }\n\n  .ProseMirror-hideselection *::selection {\n    background: transparent;\n  }\n\n  .ProseMirror-hideselection *::-moz-selection {\n    background: transparent;\n  }\n\n  .ProseMirror-selectednode {\n    outline: none;\n  }\n\n  .ProseMirror-selectednode:empty {\n    outline: 2px solid ", ";\n  }\n\n  ", "\n  ", "\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\n  .panelView-content-wrap {\n    box-sizing: border-box;\n  }\n\n  .mediaGroupView-content-wrap ul {\n    padding: 0;\n  }\n\n  /** Needed to override any cleared floats, e.g. image wrapping */\n\n  div.fabric-editor-block-mark[class^='fabric-editor-align'] {\n    clear: none !important;\n  }\n\n  .fabric-editor-align-end {\n    text-align: right;\n  }\n\n  .fabric-editor-align-start {\n    text-align: left;\n  }\n\n  .fabric-editor-align-center {\n    text-align: center;\n  }\n\n  .pm-table-header-content-wrap :not(.fabric-editor-alignment),\n  .pm-table-header-content-wrap\n    :not(p, .fabric-editor-block-mark)\n    + div.fabric-editor-block-mark,\n  .pm-table-cell-content-wrap\n    :not(p, .fabric-editor-block-mark)\n    + div.fabric-editor-block-mark {\n    p:first-of-type {\n      margin-top: 0;\n    }\n  }\n\n  .hyperlink-floating-toolbar,\n  .", " {\n    padding: 0;\n  }\n\n  /* Link icon in the Atlaskit package\n     is bigger than the others\n  */\n  .hyperlink-open-link {\n    svg {\n      max-width: 18px;\n    }\n    &[href] {\n      padding: 0 4px;\n    }\n  }\n"])), (0, _editorSharedStyles.editorFontSize)({
     theme: props.theme
-  }), _styles.whitespaceSharedStyles, _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, "var(--ds-border-focused, #8cf)", _styles17.placeholderTextStyles, _styles5.placeholderStyles, (0, _styles7.codeBlockStyles)(props), (0, _styles6.blocktypeStyles)(props), (0, _styles16.textFormattingStyles)(props), _styles.textColorStyles, _styles8.listsStyles, (0, _styles9.ruleStyles)(props), _styles10.mediaStyles, (0, _styles11.layoutStyles)(props), _styles3.telepointerStyle, _styles4.gapCursorStyles, (0, _commonStyles.tableStyles)(props), (0, _styles12.panelStyles)(props), _styles13.fakeCursorStyles, _styles14.mentionsStyles, _styles15.emojiStyles, _styles.tasksAndDecisionsStyles, _styles18.gridStyles, _styles19.linkStyles, _styles.blockMarksSharedStyles, _styles.dateSharedStyle, _styles20.extensionStyles, (0, _styles21.expandStyles)(props), _styles22.findReplaceStyles, _styles23.taskDecisionStyles, _styles24.statusStyles, (0, _styles.annotationSharedStyles)(props), _styles25.smartCardStyles, _styles.smartCardSharedStyles, _styles26.dateStyles, _styled.embedCardStyles, _styles2.unsupportedStyles, _style.ClassNames.FLOATING_TOOLBAR_COMPONENT);
+  }), _styles.whitespaceSharedStyles, _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, "var(--ds-border-focused, #8cf)", _styles17.placeholderTextStyles, _styles5.placeholderStyles, (0, _styles7.codeBlockStyles)(props), (0, _styles6.blocktypeStyles)(props), (0, _styles16.textFormattingStyles)(props), _styles.textColorStyles, _styles8.listsStyles, (0, _styles9.ruleStyles)(props), _styles10.mediaStyles, (0, _styles11.layoutStyles)(props), _styles3.telepointerStyle, _styles4.gapCursorStyles, (0, _commonStyles.tableStyles)(props), (0, _styles12.panelStyles)(props), _styles13.fakeCursorStyles, _styles14.mentionsStyles, _styles15.emojiStyles, _styles.tasksAndDecisionsStyles, _styles18.gridStyles, _styles19.linkStyles, _styles.blockMarksSharedStyles, _styles.dateSharedStyle, _styles20.extensionStyles, (0, _styles21.expandStyles)(props), _styles22.findReplaceStyles, _styles23.taskDecisionStyles, _styles24.statusStyles, (0, _styles.annotationSharedStyles)(props), _styles25.smartCardStyles, _styles.smartCardSharedStyles, _styles26.dateStyles, _styled.embedCardStyles, _styles2.unsupportedStyles, _styles.resizerStyles, _style.ClassNames.FLOATING_TOOLBAR_COMPONENT);
 };
 var createEditorContentStyle = function createEditorContentStyle(styles) {
   return /*#__PURE__*/_react.default.forwardRef(function (props, ref) {

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

@@ -159,7 +159,7 @@ var insertMenuWrapper = function insertMenuWrapper(theme, itemCount) {
     dark: "var(--ds-surface-overlay, ".concat(_colors.DN50, ")")
   })(theme), (0, _theme.borderRadius)(), "var(--ds-shadow-overlay, ".concat("0 0 0 1px ".concat(_colors.N30A, ",\n    0 2px 1px ").concat(_colors.N30A, ",\n    0 0 20px -6px ").concat(_colors.N60A), ")"));
 };
-var itemBefore = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  width: 40px;\n  height: 40px;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin-right: ", "px;\n"])), (0, _theme.gridSize)() / 2);
+var itemBefore = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  width: 40px;\n  height: 40px;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin-right: ", ";\n"])), "var(--ds-space-050, 4px)");
 var flexWrapperStyles = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex: 1;\n  box-sizing: border-box;\n  overflow: hidden;\n"])));
 var FlexWrapper = function FlexWrapper(props) {
   var children = props.children,

package/dist/cjs/ui/ElementBrowser/constants.js CHANGED Viewed

@@ -5,6 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SIDEBAR_WIDTH = exports.SIDEBAR_HEADING_WRAPPER_HEIGHT = exports.SIDEBAR_HEADING_PADDING_LEFT = exports.SEARCH_ITEM_HEIGHT_WIDTH = exports.SCROLLBAR_WIDTH = exports.MODAL_WRAPPER_PADDING = exports.INLINE_SIDEBAR_HEIGHT = exports.GRID_SIZE = exports.FLEX_ITEMS_CONTAINER_BREAKPOINT_NUMBERS = exports.ELEMENT_LIST_PADDING = exports.ELEMENT_ITEM_HEIGHT = exports.DEVICE_BREAKPOINT_NUMBERS = void 0;
 var _constants = require("@atlaskit/theme/constants");
+// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
+// TODO: Migrate away from gridSize
+// Recommendation: Replace gridSize with 8
 var GRID_SIZE = (0, _constants.gridSize)();
 exports.GRID_SIZE = GRID_SIZE;
 var DEVICE_BREAKPOINT_NUMBERS = {

package/dist/cjs/ui/ErrorBoundary/index.js CHANGED Viewed

@@ -13,6 +13,8 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
+var _monitoring = require("@atlaskit/editor-common/monitoring");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _analytics = require("../../plugins/analytics");
 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; } }
@@ -58,6 +60,11 @@ var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
           }
         });
       }
+      if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.sentry-error-monitoring_6bksu')) {
+        (0, _monitoring.logException)(error, {
+          location: 'editor-core/ui'
+        });
+      }
       if (this.hasFallback()) {
         this.setState({
           errorCaptured: true

package/dist/cjs/ui/Resizer/index.js CHANGED Viewed

@@ -71,7 +71,7 @@ var Resizer = /*#__PURE__*/function (_React$Component) {
         isResizing: true
       }, function () {
         var newHighlights = highlights(width + innerPadding, snapPoints);
-        displayGrid(newHighlights.length > 0, (0, _grid.gridTypeForLayout)(layout), newHighlights);
+        displayGrid === null || displayGrid === void 0 ? void 0 : displayGrid(newHighlights.length > 0, (0, _grid.gridTypeForLayout)(layout), newHighlights);
       });
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleResize", function (_event, _direction, _elementRef, delta) {
@@ -96,7 +96,7 @@ var Resizer = /*#__PURE__*/function (_React$Component) {
         updateSize(newSize.width, newSize.layout);
       }
       var newHighlights = highlights(newWidth, snapPoints);
-      displayGrid(newHighlights.length > 0, (0, _grid.gridTypeForLayout)(newSize.layout), newHighlights);
+      displayGrid === null || displayGrid === void 0 ? void 0 : displayGrid(newHighlights.length > 0, (0, _grid.gridTypeForLayout)(newSize.layout), newHighlights);
       resizable.updateSize({
         width: newWidth,
         height: 'auto'
@@ -128,12 +128,12 @@ var Resizer = /*#__PURE__*/function (_React$Component) {
         dispatchAnalyticsEvent(getResizeAnalyticsEvent(nodeType, newSize.width, newSize.layout));
       }
       // show committed grid size
-      displayGrid(newHighlights.length > 0, (0, _grid.gridTypeForLayout)(newSize.layout), newHighlights);
+      displayGrid === null || displayGrid === void 0 ? void 0 : displayGrid(newHighlights.length > 0, (0, _grid.gridTypeForLayout)(newSize.layout), newHighlights);
       _this.setState({
         isResizing: false
       }, function () {
         updateSize(newSize.width, newSize.layout);
-        displayGrid(false, (0, _grid.gridTypeForLayout)(layout));
+        displayGrid === null || displayGrid === void 0 ? void 0 : displayGrid(false, (0, _grid.gridTypeForLayout)(layout), []);
       });
     });
     return _this;

package/dist/cjs/utils/commands.js CHANGED Viewed

@@ -12,7 +12,7 @@ var _prosemirrorState = require("prosemirror-state");
 var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
 var _transformToCode = require("../plugins/text-formatting/commands/transform-to-code");
 var _gapCursorSelection = require("../plugins/selection/gap-cursor-selection");
-var _document = require("./document");
+var _utils = require("@atlaskit/editor-common/utils");
 var filter = function filter(predicates, cmd) {
   return function (state, dispatch, view) {
     if (!Array.isArray(predicates)) {
@@ -305,7 +305,7 @@ var deleteEmptyParagraphAndMoveBlockUp = function deleteEmptyParagraphAndMoveBlo
     var _walkNextNode = walkNextNode($head),
       $pos = _walkNextNode.$pos;
     var nextPMNode = doc.nodeAt($pos.pos - 1);
-    if (empty && nextPMNode && canNextNodeMoveUp(nextPMNode) && (0, _document.isEmptyParagraph)(parent) && view !== null && view !== void 0 && view.endOfTextblock('right')) {
+    if (empty && nextPMNode && canNextNodeMoveUp(nextPMNode) && (0, _utils.isEmptyParagraph)(parent) && view !== null && view !== void 0 && view.endOfTextblock('right')) {
       tr.deleteRange(pos - 1, pos + 1);
       if (dispatch) {
         dispatch(tr);

package/dist/cjs/utils/document.js CHANGED Viewed

@@ -14,7 +14,6 @@ exports.getStepRange = void 0;
 exports.hasDocAsParent = hasDocAsParent;
 exports.hasVisibleContent = hasVisibleContent;
 exports.isEmptyDocument = isEmptyDocument;
-exports.isEmptyParagraph = isEmptyParagraph;
 exports.isInEmptyLine = isInEmptyLine;
 exports.isNodeEmpty = isNodeEmpty;
 exports.isProseMirrorSchemaCheckError = isProseMirrorSchemaCheckError;
@@ -29,13 +28,6 @@ var _privacyFilter = require("../utils/filter/privacy-filter");
 var _utils = require("@atlaskit/editor-common/utils");
 var _nodeWidth = require("./node-width");
 var _enums = require("../plugins/analytics/types/enums");
-/**
- * Checks if node is an empty paragraph.
- */
-function isEmptyParagraph(node) {
-  return !!node && node.type.name === 'paragraph' && !node.childCount;
-}
 /**
  * Returns false if node contains only empty inline nodes and hardBreaks.
  */
@@ -67,7 +59,7 @@ function isNodeEmpty(node) {
   if (node && node.textContent) {
     return false;
   }
-  if (!node || !node.childCount || node.childCount === 1 && isEmptyParagraph(node.firstChild)) {
+  if (!node || !node.childCount || node.childCount === 1 && (0, _utils.isEmptyParagraph)(node.firstChild)) {
     return true;
   }
   var block = [];
@@ -76,7 +68,7 @@ function isNodeEmpty(node) {
     child.isInline ? nonBlock.push(child) : block.push(child);
   });
   return !nonBlock.length && !block.filter(function (childNode) {
-    return !!childNode.childCount && !(childNode.childCount === 1 && isEmptyParagraph(childNode.firstChild)) || childNode.isAtom;
+    return !!childNode.childCount && !(childNode.childCount === 1 && (0, _utils.isEmptyParagraph)(childNode.firstChild)) || childNode.isAtom;
   }).length;
 }
@@ -88,7 +80,7 @@ function isEmptyDocument(node) {
   if (node.childCount !== 1 || !nodeChild) {
     return false;
   }
-  return isEmptyParagraph(nodeChild);
+  return (0, _utils.isEmptyParagraph)(nodeChild);
 }
 // Checks to see if the parent node is the document, ie not contained within another entity
@@ -110,7 +102,7 @@ function isInEmptyLine(state) {
   if (!node) {
     return false;
   }
-  return isEmptyParagraph(node) && hasDocAsParent($anchor);
+  return (0, _utils.isEmptyParagraph)(node) && hasDocAsParent($anchor);
 }
 function bracketTyped(state) {
   var selection = state.selection;

package/dist/cjs/utils/index.js CHANGED Viewed

@@ -62,14 +62,7 @@ Object.defineProperty(exports, "isEmptyDocument", {
     return _document.isEmptyDocument;
   }
 });
-exports.isEmptyNode = void 0;
-Object.defineProperty(exports, "isEmptyParagraph", {
-  enumerable: true,
-  get: function get() {
-    return _document.isEmptyParagraph;
-  }
-});
-exports.isInsideBlockQuote = exports.isInListItem = exports.isInLayoutColumn = void 0;
+exports.isInsideBlockQuote = exports.isInListItem = exports.isInLayoutColumn = exports.isEmptyNode = void 0;
 Object.defineProperty(exports, "isLastItemMediaGroup", {
   enumerable: true,
   get: function get() {
@@ -134,12 +127,6 @@ Object.defineProperty(exports, "nonNullable", {
     return _utils.nonNullable;
   }
 });
-Object.defineProperty(exports, "normaliseNestedLayout", {
-  enumerable: true,
-  get: function get() {
-    return _selection.normaliseNestedLayout;
-  }
-});
 exports.pipe = pipe;
 Object.defineProperty(exports, "processRawValue", {
   enumerable: true,