@atlaskit/editor-common 74.0.1 → 74.1.1

package/dist/cjs/ui/FloatingToolbar/Button.js

@@ -0,0 +1,93 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+var _styles = require("./styles");
+var _excluded = ["buttonStyles"];
+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 _default = function _default(_ref) {
+  var title = _ref.title,
+    icon = _ref.icon,
+    iconAfter = _ref.iconAfter,
+    onClick = _ref.onClick,
+    onKeyDown = _ref.onKeyDown,
+    onMouseEnter = _ref.onMouseEnter,
+    onMouseLeave = _ref.onMouseLeave,
+    onFocus = _ref.onFocus,
+    onBlur = _ref.onBlur,
+    selected = _ref.selected,
+    disabled = _ref.disabled,
+    href = _ref.href,
+    target = _ref.target,
+    _ref$appearance = _ref.appearance,
+    appearance = _ref$appearance === void 0 ? 'subtle' : _ref$appearance,
+    children = _ref.children,
+    className = _ref.className,
+    tooltipContent = _ref.tooltipContent,
+    testId = _ref.testId,
+    _ref$hideTooltipOnCli = _ref.hideTooltipOnClick,
+    hideTooltipOnClick = _ref$hideTooltipOnCli === void 0 ? true : _ref$hideTooltipOnCli,
+    ariaHasPopup = _ref.ariaHasPopup,
+    tabIndex = _ref.tabIndex,
+    areaControls = _ref.areaControls,
+    ariaLabel = _ref.ariaLabel;
+  // Check if there's only an icon and add additional styles
+  var iconOnly = (icon || iconAfter) && !children;
+  var customSpacing = iconOnly ? _styles.iconOnlySpacing : {};
+  return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+    content: tooltipContent || title,
+    hideTooltipOnClick: hideTooltipOnClick,
+    position: "top"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave
+  }, /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
+    className: className,
+    theme: function theme(adgTheme, themeProps) {
+      var _adgTheme = adgTheme(themeProps),
+        buttonStyles = _adgTheme.buttonStyles,
+        rest = (0, _objectWithoutProperties2.default)(_adgTheme, _excluded);
+      return _objectSpread({
+        buttonStyles: _objectSpread(_objectSpread(_objectSpread({}, buttonStyles), customSpacing), appearance === 'danger' && (0, _styles.getButtonStyles)({
+          appearance: appearance,
+          state: themeProps.state,
+          mode: themeProps.mode
+        }))
+      }, rest);
+    },
+    "aria-label": ariaLabel || title,
+    "aria-pressed": !ariaHasPopup ? selected : undefined,
+    "aria-expanded": ariaHasPopup ? selected : undefined,
+    "aria-controls": ariaHasPopup ? areaControls : undefined,
+    spacing: 'compact',
+    href: href,
+    target: target,
+    appearance: appearance,
+    "aria-haspopup": ariaHasPopup,
+    iconBefore: icon || undefined,
+    iconAfter: iconAfter,
+    onClick: onClick,
+    onKeyDown: onKeyDown,
+    isSelected: selected,
+    isDisabled: disabled,
+    testId: testId,
+    onFocus: onFocus,
+    onBlur: onBlur
+    // @ts-ignore
+    // tabIndex set as 0 by default in the design system  ButtonBase component
+    // this is not expected for all buttons, we have to use tabIndex={null} for some cases
+    // should be fixed here https://a11y-internal.atlassian.net/browse/DST-287
+    ,
+    tabIndex: tabIndex
+  }, children)));
+};
+exports.default = _default;

package/dist/cjs/ui/FloatingToolbar/styles.js

@@ -0,0 +1,79 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.iconOnlySpacing = exports.getButtonStyles = void 0;
+var _adfSchema = require("@atlaskit/adf-schema");
+var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
+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 iconOnlySpacing = {
+  '&&': {
+    padding: '0px',
+    /**
+      Increased specificity here because css for .hyperlink-open-link defined in
+      packages/editor/editor-core/src/ui/ContentStyles/index.tsx file
+      overrides padding left-right 2px with 4px.
+    */
+    '&&[href]': {
+      padding: '0 2px'
+    }
+  },
+  '& > span': {
+    margin: '0px'
+  }
+};
+exports.iconOnlySpacing = iconOnlySpacing;
+var getStyles = function getStyles(property, _ref) {
+  var _ref$appearance = _ref.appearance,
+    appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
+    _ref$state = _ref.state,
+    state = _ref$state === void 0 ? 'default' : _ref$state,
+    _ref$mode = _ref.mode,
+    mode = _ref$mode === void 0 ? 'light' : _ref$mode;
+  if (!property[appearance] || !property[appearance][state]) {
+    return 'initial';
+  }
+  return property[appearance][state][mode];
+};
+var background = {
+  danger: {
+    default: {
+      light: 'inherit',
+      dark: 'inherit'
+    },
+    hover: {
+      light: "var(--ds-background-neutral-subtle-hovered, ".concat(colors.N30A, ")"),
+      dark: "var(--ds-background-neutral-subtle-hovered, ".concat(colors.N30A, ")")
+    },
+    active: {
+      light: "var(--ds-background-neutral-pressed, ".concat("".concat((0, _adfSchema.hexToRgba)(colors.B75, 0.6)), ")"),
+      dark: "var(--ds-background-neutral-pressed, ".concat("".concat((0, _adfSchema.hexToRgba)(colors.B75, 0.6)), ")")
+    }
+  }
+};
+var color = {
+  danger: {
+    default: {
+      light: "var(--ds-icon, ".concat(colors.N400, ")"),
+      dark: "var(--ds-icon, ".concat(colors.DN400, ")")
+    },
+    hover: {
+      light: "var(--ds-icon-danger, ".concat(colors.R400, ")"),
+      dark: "var(--ds-icon-danger, ".concat(colors.R400, ")")
+    },
+    active: {
+      light: "var(--ds-icon-danger, ".concat(colors.R400, ")"),
+      dark: "var(--ds-icon-danger, ".concat(colors.R400, ")")
+    }
+  }
+};
+var getButtonStyles = function getButtonStyles(props) {
+  return {
+    background: getStyles(background, props),
+    color: getStyles(color, props)
+  };
+};
+exports.getButtonStyles = getButtonStyles;

package/dist/cjs/ui/MediaSingle/grid.js

@@ -4,10 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.calcColumnsFromPx = calcColumnsFromPx;
+exports.calcMediaPxWidth = void 0;
 exports.calcPctFromPx = calcPctFromPx;
 exports.calcPxFromColumns = calcPxFromColumns;
 exports.calcPxFromPct = calcPxFromPct;
-exports.snapToGrid = exports.layoutSupportsWidth = void 0;
+exports.wrappedLayouts = exports.snapToGrid = exports.layoutSupportsWidth = void 0;
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var handleMargin = 12;
 var gutterSize = handleMargin * 2;
 var validWidthModes = ['center', 'wrap-left', 'wrap-right', 'align-start', 'align-end'];
@@ -31,6 +33,55 @@ function calcPctFromPx(width, lineLength) {
   var maxWidth = lineLength + gutterSize;
   return (width + gutterSize) / maxWidth;
 }
+var wrappedLayouts = ['wrap-left', 'wrap-right', 'align-end', 'align-start'];
+exports.wrappedLayouts = wrappedLayouts;
+var calcPctWidth = function calcPctWidth(containerWidth, pctWidth, origWidth, origHeight) {
+  return pctWidth && origWidth && origHeight && Math.ceil(calcPxFromPct(pctWidth / 100, containerWidth.lineLength || containerWidth.width));
+};
+var calcMediaPxWidth = function calcMediaPxWidth(opts) {
+  var origWidth = opts.origWidth,
+    origHeight = opts.origHeight,
+    layout = opts.layout,
+    pctWidth = opts.pctWidth,
+    containerWidth = opts.containerWidth,
+    resizedPctWidth = opts.resizedPctWidth;
+  var width = containerWidth.width,
+    lineLength = containerWidth.lineLength;
+  var calculatedPctWidth = calcPctWidth(containerWidth, pctWidth, origWidth, origHeight);
+  var calculatedResizedPctWidth = calcPctWidth(containerWidth, resizedPctWidth, origWidth, origHeight);
+  if (layout === 'wide') {
+    if (lineLength) {
+      var wideWidth = Math.ceil(lineLength * _editorSharedStyles.breakoutWideScaleRatio);
+      return wideWidth > width ? lineLength : wideWidth;
+    }
+  } else if (layout === 'full-width') {
+    return width - _editorSharedStyles.akEditorBreakoutPadding;
+  } else if (calculatedPctWidth) {
+    if (wrappedLayouts.indexOf(layout) > -1) {
+      if (calculatedResizedPctWidth) {
+        if (resizedPctWidth < 50) {
+          return calculatedResizedPctWidth;
+        }
+        return calculatedPctWidth;
+      }
+      return Math.min(calculatedPctWidth, origWidth);
+    }
+    if (calculatedResizedPctWidth) {
+      return calculatedResizedPctWidth;
+    }
+    return calculatedPctWidth;
+  } else if (layout === 'center') {
+    if (calculatedResizedPctWidth) {
+      return calculatedResizedPctWidth;
+    }
+    return Math.min(origWidth, lineLength || width);
+  } else if (layout && wrappedLayouts.indexOf(layout) !== -1) {
+    var halfLineLength = Math.ceil((lineLength || width) / 2);
+    return origWidth <= halfLineLength ? origWidth : halfLineLength;
+  }
+  return origWidth;
+};
+exports.calcMediaPxWidth = calcMediaPxWidth;
 var snapToGrid = function snapToGrid(gridWidth, width, height, lineLength, gridSize) {
   var pxWidth = calcPxFromPct(gridWidth / 100, lineLength);
   var columnSpan = Math.round(calcColumnsFromPx(pxWidth, lineLength, gridSize));

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.DEFAULT_IMAGE_WIDTH = exports.DEFAULT_IMAGE_HEIGHT = void 0;
 exports.default = MediaSingle;
-exports.wrappedLayouts = exports.shouldAddDefaultWrappedWidth = void 0;
+exports.shouldAddDefaultWrappedWidth = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
@@ -20,10 +20,8 @@ var DEFAULT_IMAGE_WIDTH = 250;
 exports.DEFAULT_IMAGE_WIDTH = DEFAULT_IMAGE_WIDTH;
 var DEFAULT_IMAGE_HEIGHT = 200;
 exports.DEFAULT_IMAGE_HEIGHT = DEFAULT_IMAGE_HEIGHT;
-var wrappedLayouts = ['wrap-left', 'wrap-right', 'align-end', 'align-start'];
-exports.wrappedLayouts = wrappedLayouts;
 var shouldAddDefaultWrappedWidth = function shouldAddDefaultWrappedWidth(layout, width, lineLength) {
-  return wrappedLayouts.indexOf(layout) > -1 && lineLength && width && width > 0.5 * lineLength;
+  return _grid.wrappedLayouts.indexOf(layout) > -1 && lineLength && width && width > 0.5 * lineLength;
 };
 exports.shouldAddDefaultWrappedWidth = shouldAddDefaultWrappedWidth;
 function MediaSingle(_ref) {

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

@@ -10,16 +10,15 @@ var _react = require("@emotion/react");
 var _success = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/success"));
 var _error = _interopRequireDefault(require("@atlaskit/icon/glyph/error"));
 var _colors = require("@atlaskit/theme/colors");
-var _constants = require("@atlaskit/theme/constants");
 var _typography = require("@atlaskit/theme/typography");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 /** @jsx jsx */
 var errorColor = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), "var(--ds-text-danger, ".concat(_colors.R400, ")"));
 var validColor = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), "var(--ds-text-success, ".concat(_colors.G400, ")"));
 var messageStyle = function messageStyle(props) {
-  return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", " font-weight: normal;\n  color: ", ";\n  margin-top: ", "px;\n  display: flex;\n  justify-content: baseline;\n"])), (0, _typography.h200)(props), "var(--ds-text-subtlest, ".concat(_colors.N200, ")"), (0, _constants.gridSize)() / 2);
+  return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", " font-weight: normal;\n  color: ", ";\n  margin-top: ", ";\n  display: flex;\n  justify-content: baseline;\n"])), (0, _typography.h200)(props), "var(--ds-text-subtlest, ".concat(_colors.N200, ")"), "var(--ds-space-050, 4px)");
 };
-var iconWrapperStyle = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-right: 4px;\n"])));
+var iconWrapperStyle = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-right: ", ";\n"])), "var(--ds-space-050, 4px)");
 var HelperMessage = function HelperMessage(_ref) {
   var children = _ref.children;
   return (0, _react.jsx)("div", {

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

@@ -0,0 +1,97 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ResizerNext;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _reResizable = require("re-resizable");
+var _resizer = require("../../styles/shared/resizer");
+var _utils = require("./utils");
+function ResizerNext(props) {
+  var resizable = _react.default.useRef(null);
+  var handleResize = props.handleResize,
+    handleResizeStart = props.handleResizeStart,
+    handleResizeStop = props.handleResizeStop;
+  var onResizeStart = _react.default.useCallback(function (event) {
+    // prevent creating a drag event on Firefox
+    event.preventDefault();
+    handleResizeStart();
+  }, [handleResizeStart]);
+  var onResize = _react.default.useCallback(function (_event, _direction, _elementRef, delta) {
+    var resizableCurrent = resizable.current;
+    if (!resizableCurrent || !resizableCurrent.state.original) {
+      return;
+    }
+    var originalState = {
+      x: resizableCurrent.state.original.x,
+      y: resizableCurrent.state.original.y,
+      width: resizableCurrent.state.original.width,
+      height: resizableCurrent.state.original.height
+    };
+    handleResize(originalState, delta);
+  }, [handleResize]);
+  var onResizeStop = _react.default.useCallback(function (_event, _direction, _elementRef, delta) {
+    var resizableCurrent = resizable.current;
+    if (!resizableCurrent || !resizableCurrent.state.original) {
+      return;
+    }
+    var originalState = {
+      x: resizableCurrent.state.original.x,
+      y: resizableCurrent.state.original.y,
+      width: resizableCurrent.state.original.width,
+      height: resizableCurrent.state.original.height
+    };
+    handleResizeStop(originalState, delta);
+  }, [handleResizeStop]);
+  var handles = {};
+  if (props.handleClassName) {
+    _utils.handleSides.forEach(function (side) {
+      handles[side] = "".concat(props.handleClassName, "-").concat(side);
+    });
+  } else {
+    handles = {
+      left: _resizer.resizerHandleLeftClassName,
+      right: _resizer.resizerHandleRightClassName
+    };
+  }
+  var innerPadding = props.innerPadding || _resizer.resizerHandlePadding;
+  var handleStyles = {
+    left: {
+      width: '24px',
+      left: "-".concat(innerPadding, "px"),
+      zIndex: _resizer.resizerHandleZIndex,
+      pointerEvents: 'auto'
+    },
+    right: {
+      width: '24px',
+      right: "-".concat(innerPadding, "px"),
+      zIndex: _resizer.resizerHandleZIndex,
+      pointerEvents: 'auto'
+    }
+  };
+  var className = (0, _classnames.default)(props.className, _resizer.resizerItemClassName);
+  return /*#__PURE__*/_react.default.createElement(_reResizable.Resizable, {
+    ref: resizable,
+    size: {
+      width: props.width,
+      // just content itself (no paddings)
+      height: 'auto'
+    },
+    maxWidth: props.maxWidth,
+    minWidth: props.minWidth,
+    className: className,
+    enable: props.enable,
+    handleClasses: handles,
+    handleStyles: handleStyles,
+    handleWrapperStyle: props.handleWrapperStyle //  is used to override the style of resize handles wrapper, needed for media when it is selected and caption appears makes sure the handlers won't jump.
+    ,
+    handleComponent: props.handleComponent // in media was added as a workaround to fix Up arrow key bug when media has caption and the cursor is place below the image. Our epic has a separate ticket to address this problem.
+    ,
+    onResizeStart: onResizeStart,
+    onResize: onResize,
+    onResizeStop: onResizeStop
+  }, props.children);
+}

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

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/ui/Resizer/utils.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.handleSides = void 0;
+var handleSides = ['left', 'right'];
+exports.handleSides = handleSides;

package/dist/cjs/ui/index.js

@@ -47,6 +47,12 @@ Object.defineProperty(exports, "ExpandLayoutWrapperWithRef", {
     return _Expand.ExpandLayoutWrapperWithRef;
   }
 });
+Object.defineProperty(exports, "FloatingToolbarButton", {
+  enumerable: true,
+  get: function get() {
+    return _Button.default;
+  }
+});
 Object.defineProperty(exports, "HelperMessage", {
   enumerable: true,
   get: function get() {
@@ -143,6 +149,12 @@ Object.defineProperty(exports, "calcColumnsFromPx", {
     return _grid.calcColumnsFromPx;
   }
 });
+Object.defineProperty(exports, "calcMediaPxWidth", {
+  enumerable: true,
+  get: function get() {
+    return _grid.calcMediaPxWidth;
+  }
+});
 Object.defineProperty(exports, "calcPctFromPx", {
   enumerable: true,
   get: function get() {
@@ -260,7 +272,7 @@ Object.defineProperty(exports, "withOuterListeners", {
 Object.defineProperty(exports, "wrappedLayouts", {
   enumerable: true,
   get: function get() {
-    return _MediaSingle.wrappedLayouts;
+    return _grid.wrappedLayouts;
   }
 });
 var _Caption = _interopRequireDefault(require("./Caption"));
@@ -282,5 +294,6 @@ var _Messages = require("./Messages");
 var _clearNextSiblingMarginTop = require("./clear-next-sibling-margin-top");
 var _IntlErrorBoundary = require("./IntlErrorBoundary");
 var _IntlProviderIfMissingWrapper = _interopRequireDefault(require("./IntlProviderIfMissingWrapper"));
+var _Button = _interopRequireDefault(require("./FloatingToolbar/Button"));
 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; }

package/dist/cjs/ui-color/ColorPalette/styles.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.colorPaletteWrapper = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
-var _constants = require("@atlaskit/theme/constants");
 var _templateObject;
-var colorPaletteWrapper = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding: 0 ", "px;\n  /* Firefox bug fix: https://product-fabric.atlassian.net/browse/ED-1789 */\n  display: flex;\n"])), (0, _constants.gridSize)());
+var colorPaletteWrapper = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding: 0 ", ";\n  /* Firefox bug fix: https://product-fabric.atlassian.net/browse/ED-1789 */\n  display: flex;\n"])), "var(--ds-space-100, 8px)");
 exports.colorPaletteWrapper = colorPaletteWrapper;

package/dist/cjs/utils/editor-core-utils.js

@@ -3,7 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isValidPosition = exports.isTextSelection = exports.isLastItemMediaGroup = exports.isElementInTableCell = exports.extractSliceFromStep = void 0;
+exports.isElementInTableCell = exports.extractSliceFromStep = void 0;
+exports.isEmptyParagraph = isEmptyParagraph;
+exports.isValidPosition = exports.isTextSelection = exports.isLastItemMediaGroup = void 0;
 exports.nonNullable = nonNullable;
 exports.setNodeSelection = void 0;
 exports.setTextSelection = setTextSelection;
@@ -12,6 +14,12 @@ exports.stepHasSlice = void 0;
 var _prosemirrorState = require("prosemirror-state");
 var _prosemirrorTransform = require("prosemirror-transform");
 var _dom = require("./dom");
+/**
+ * Checks if node is an empty paragraph.
+ */
+function isEmptyParagraph(node) {
+  return !!node && node.type.name === 'paragraph' && !node.childCount;
+}
 var stepHasSlice = function stepHasSlice(step) {
   return step && step.hasOwnProperty('slice');
 };