@atlaskit/editor-core 193.2.1 → 193.3.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-core
 
+## 193.3.0
+
+### Minor Changes
+
+- [#79555](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/79555) [`7f38cd921e3d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7f38cd921e3d) - ED-22229: Removed allowAutoSave option from ConfigPanel to default to true always
+
+### Patch Changes
+
+- [#80487](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/80487) [`bd40bab58a54`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/bd40bab58a54) - migrated to react18 compatiable types
+- Updated dependencies
+
+## 193.2.6
+
+### Patch Changes
+
+- [#80679](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/80679) [`104eb9443b7e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/104eb9443b7e) - ED-22553 Updating adf-schema version to 35.6.0
+
 ## 193.2.1
 
 ### Patch Changes

package/dist/cjs/nodeviews/getInlineNodeViewProducer.styles.js

@@ -5,12 +5,32 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.InlineNodeViewSharedStyles = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _reactNodeView = require("@atlaskit/editor-common/react-node-view");
 var _utils = require("@atlaskit/editor-common/utils");
-var _templateObject;
+var _css;
 // For reasoning behind styles, see comments in:
 // ./getInlineNodeViewProducer -> portalChildren()
 
-var InlineNodeViewSharedStyles = exports.InlineNodeViewSharedStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    display: inline;\n    user-select: all;\n    /* Collapses zero width spaces inside the inline node view\n    to prevent the node from line breaking too early.\n    */\n    white-space: nowrap;\n    /* Then reset to the Editor default so we don't interfere\n    with any component styling. */\n    & > *:not(.zeroWidthSpaceContainer) {\n      white-space: pre-wrap;\n    }\n    // Prevent visually hidden assistive text from being selected.\n    & > .assistive {\n      user-select: none;\n    }\n  }\n  /** Remove browser deafult selections style. This prevents\n    unexpected visual artefacts in Safari when navigating\n    with the keyboard or making range selections. */\n  &.ua-safari {\n    .", " {\n      ::selection,\n      *::selection {\n        background: transparent;\n      }\n    }\n  }\n\n  &.ua-chrome .", " > span {\n    user-select: none;\n  }\n\n  .", "AddZeroWidthSpace {\n    ::after {\n      content: '", "';\n    }\n  }\n"])), _reactNodeView.inlineNodeViewClassname, _reactNodeView.inlineNodeViewClassname, _reactNodeView.inlineNodeViewClassname, _reactNodeView.inlineNodeViewClassname, _utils.ZERO_WIDTH_SPACE);
+var InlineNodeViewSharedStyles = exports.InlineNodeViewSharedStyles = (0, _react.css)((_css = {}, (0, _defineProperty2.default)(_css, ".".concat(_reactNodeView.inlineNodeViewClassname), {
+  display: 'inline',
+  userSelect: 'all',
+  whiteSpace: 'nowrap',
+  '& > *:not(.zeroWidthSpaceContainer)': {
+    whiteSpace: 'pre-wrap'
+  },
+  '& > .assistive': {
+    userSelect: 'none'
+  }
+}), (0, _defineProperty2.default)(_css, '&.ua-safari', (0, _defineProperty2.default)({}, ".".concat(_reactNodeView.inlineNodeViewClassname), {
+  '::selection, *::selection': {
+    background: 'transparent'
+  }
+})), (0, _defineProperty2.default)(_css, "&.ua-chrome .".concat(_reactNodeView.inlineNodeViewClassname, " > span"), {
+  userSelect: 'none'
+}), (0, _defineProperty2.default)(_css, ".".concat(_reactNodeView.inlineNodeViewClassname, "AddZeroWidthSpace"), {
+  '::after': {
+    content: "'".concat(_utils.ZERO_WIDTH_SPACE, "'")
+  }
+}), _css));

package/dist/cjs/nodeviews/index.js

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

package/dist/cjs/presets/universal.js

@@ -155,7 +155,6 @@ function createUniversalPreset(appearance, props, featureFlags, prevAppearance,
     allowCustomPanelEdit: (0, _typeof2.default)(props.allowPanel) === 'object' ? props.allowPanel.allowCustomPanelEdit : false
   }], Boolean(props.allowPanel)).maybeAdd(_contextPanel.contextPanelPlugin, Boolean(isFullPage)).maybeAdd([_extension.extensionPlugin, {
     breakoutEnabled: appearance === 'full-page' && ((0, _typeof2.default)(props.allowExtension) === 'object' ? props.allowExtension.allowBreakout : true) !== false,
-    allowAutoSave: (0, _typeof2.default)(props.allowExtension) === 'object' ? props.allowExtension.allowAutoSave : false,
     extensionHandlers: props.extensionHandlers,
     useLongPressSelection: false,
     appearance: appearance

package/dist/cjs/types/browser.js

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

package/dist/cjs/types/dom-at-pos.js

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

package/dist/cjs/types/editor-appearance.js

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

package/dist/cjs/types/editor-plugin.js

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

package/dist/cjs/types/editor-react-context.js

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

package/dist/cjs/types/empty-state-handler.js

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

package/dist/cjs/types/extension-config.js

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

package/dist/cjs/types/feature-flags.js

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

package/dist/cjs/types/i18n.js

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

package/dist/cjs/types/index.js

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

package/dist/cjs/types/performance-tracking.js

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

package/dist/cjs/types/pm-config.js

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

package/dist/cjs/types/pm-plugin.js

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

package/dist/cjs/types/ui-components.js

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

package/dist/cjs/ui/Addon/ClickAreaMobile/index.js

@@ -12,14 +12,11 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _clickAreaHelper = require("../click-area-helper");
-var _templateObject;
-/** @jsx jsx */
 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() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /** @jsx jsx */
 /**
  * Fills the visible viewport height so that it can filter
  * clicks/taps within or below the content (e.g. if the content
@@ -28,7 +25,9 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 var clickWrapper = function clickWrapper(_ref) {
   var isExpanded = _ref.isExpanded,
     minHeight = _ref.minHeight;
-  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  height: 100%;\n  ", ";\n"])), isExpanded && minHeight ? "min-height: ".concat(minHeight, "px") : '');
+  return (0, _react2.css)({
+    height: '100%'
+  }, isExpanded && minHeight ? "min-height: ".concat(minHeight, "px") : '');
 };
 /**
  * Click Area is responsible for improving UX by ensuring the user

package/dist/cjs/ui/Addon/Dropdown/styles.js

@@ -1,13 +1,18 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.dropdown = void 0;
-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 _templateObject;
-var dropdown = exports.dropdown = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n  border-radius: ", "px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  padding: ", " 0;\n"])), "var(--ds-surface-overlay, white)", (0, _constants.borderRadius)(), "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N60A, ", 0 0 1px ").concat(_colors.N60A), ")"), "var(--ds-space-050, 4px)");
+var dropdown = exports.dropdown = (0, _react.css)({
+  display: 'flex',
+  flexDirection: 'column',
+  background: "var(--ds-surface-overlay, white)",
+  borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
+  boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N60A, ", 0 0 1px ").concat(_colors.N60A), ")"),
+  boxSizing: 'border-box',
+  padding: "var(--ds-space-050, 4px)".concat(" 0")
+});

package/dist/cjs/ui/Addon/DropdownItem/styles.js

@@ -1,12 +1,23 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.dropdownItem = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
-var _templateObject;
-var dropdownItem = exports.dropdownItem = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  text-decoration: none;\n  padding: ", " ", "\n    ", " ", ";\n  color: ", ";\n  > span {\n    display: flex;\n    margin-right: ", ";\n  }\n  &:hover {\n    background-color: ", ";\n  }\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-400, 32px)", "var(--ds-space-100, 8px)", "var(--ds-space-150, 12px)", "var(--ds-text, ".concat(_colors.N800, ")"), "var(--ds-space-100, 8px)", "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N20, ")"));
+var dropdownItem = exports.dropdownItem = (0, _react.css)({
+  display: 'flex',
+  alignItems: 'center',
+  cursor: 'pointer',
+  textDecoration: 'none',
+  padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-400, 32px)", " ", "var(--ds-space-100, 8px)", " ", "var(--ds-space-150, 12px)"),
+  color: "var(--ds-text, ".concat(_colors.N800, ")"),
+  '> span': {
+    display: 'flex',
+    marginRight: "var(--ds-space-100, 8px)"
+  },
+  '&:hover': {
+    backgroundColor: "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N20, ")")
+  }
+});

package/dist/cjs/ui/Appearance/Chromeless.js

@@ -13,7 +13,6 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _hooks = require("@atlaskit/editor-common/hooks");
@@ -22,13 +21,30 @@ var _ContentStyles = require("../ContentStyles");
 var _PluginSlot = _interopRequireDefault(require("../PluginSlot"));
 var _styles = require("../styles");
 var _WithFlash = _interopRequireDefault(require("../WithFlash"));
-var _templateObject, _templateObject2, _templateObject3;
-/** @jsx jsx */
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-var chromelessEditor = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  line-height: 20px;\n  height: auto;\n\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n  max-width: inherit;\n  box-sizing: border-box;\n  word-wrap: break-word;\n\n  div > .ProseMirror {\n    outline: none;\n    white-space: pre-wrap;\n    padding: 0;\n    margin: 0;\n\n    & > :last-child {\n      padding-bottom: 0.5em;\n    }\n  }\n"])), _styles.scrollbarStyles);
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /** @jsx jsx */
+var chromelessEditor = (0, _react2.css)({
+  lineHeight: '20px',
+  height: 'auto',
+  overflowX: 'hidden',
+  overflowY: 'auto'
+}, _styles.scrollbarStyles, {
+  maxWidth: 'inherit',
+  boxSizing: 'border-box',
+  wordWrap: 'break-word',
+  'div > .ProseMirror': {
+    outline: 'none',
+    whiteSpace: 'pre-wrap',
+    padding: 0,
+    margin: 0,
+    '& > :last-child': {
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+      paddingBottom: '0.5em'
+    }
+  }
+});
 var ContentArea = (0, _ContentStyles.createEditorContentStyle)();
 ContentArea.displayName = 'ContentArea';
 var Editor = exports.default = /*#__PURE__*/function (_React$Component) {
@@ -67,7 +83,11 @@ var Editor = exports.default = /*#__PURE__*/function (_React$Component) {
       return (0, _react2.jsx)(_WithFlash.default, {
         animate: maxContentSizeReached
       }, (0, _react2.jsx)("div", {
-        css: [chromelessEditor, maxHeight && (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n                max-height: ", "px;\n              "])), maxHeight), (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n              min-height: ", "px;\n            "])), minHeight)],
+        css: [chromelessEditor, maxHeight && (0, _react2.css)({
+          maxHeight: "".concat(maxHeight, "px")
+        }), (0, _react2.css)({
+          minHeight: "".concat(minHeight, "px")
+        })],
         "data-testid": "chromeless-editor",
         ref: function ref(_ref2) {
           return _this.containerElement = _ref2;

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

@@ -44,22 +44,28 @@ var StickyToolbar = function StickyToolbar(props) {
       setTop(props.offsetTop || 0);
     }
   }, [props.externalToolbarRef, props.offsetTop]);
-  return (0, _react2.jsx)("div", {
-    css: [mainToolbarWrapperStyle(props.twoLineEditorToolbar), stickyToolbarWrapperStyle]
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-    ,
-    style: {
-      top: "".concat(top, "px")
-    },
-    "data-testid": "ak-editor-main-toolbar",
-    className: 'show-keyline'
-  }, props.children);
+  return (
+    // eslint-disable-next-line @atlaskit/design-system/prefer-primitives
+    (0, _react2.jsx)("div", {
+      css: [mainToolbarWrapperStyle(props.twoLineEditorToolbar), stickyToolbarWrapperStyle]
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+      ,
+      style: {
+        top: "".concat(top, "px")
+      },
+      "data-testid": "ak-editor-main-toolbar",
+      className: 'show-keyline'
+    }, props.children)
+  );
 };
 var FixedToolbar = function FixedToolbar(props) {
-  return (0, _react2.jsx)("div", {
-    css: mainToolbarWrapperStyle(props.twoLineEditorToolbar),
-    "data-testid": "ak-editor-main-toolbar"
-  }, props.children);
+  return (
+    // eslint-disable-next-line @atlaskit/design-system/prefer-primitives
+    (0, _react2.jsx)("div", {
+      css: mainToolbarWrapperStyle(props.twoLineEditorToolbar),
+      "data-testid": "ak-editor-main-toolbar"
+    }, props.children)
+  );
 };
 
 /**

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

@@ -5,30 +5,84 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.nonCustomToolbarWrapperStyle = exports.mainToolbarStyle = exports.mainToolbarSecondChildStyle = exports.mainToolbarIconBeforeStyle = exports.mainToolbarFirstChildStyle = exports.customToolbarWrapperStyle = exports.MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
 var MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT = exports.MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT = 868;
 var toolbarLineHeight = 56;
 
 // box-shadow is overriden by the mainToolbar
-var mainToolbarWithKeyline = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  box-shadow: 0 ", "px 0 0\n    ", ";\n"])), _editorSharedStyles.akEditorToolbarKeylineHeight, "var(--ds-background-accent-gray-subtlest, #F1F2F4)");
-var mainToolbarTwoLineStyle = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  @media (max-width: ", "px) {\n    flex-wrap: wrap;\n    height: calc(", "px * 2);\n  }\n"])), MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, toolbarLineHeight);
-var mainToolbar = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  align-items: center;\n  box-shadow: none;\n  transition: box-shadow 200ms ", ";\n  z-index: ", ";\n  display: flex;\n  height: ", "px;\n  flex-shrink: 0;\n  // TODO: https://product-fabric.atlassian.net/browse/DSP-4456\n  background-color: ", ";\n\n  & object {\n    height: 0 !important;\n  }\n\n  @media (max-width: ", "px) {\n    display: grid;\n    height: calc(", "px * 2);\n  }\n"])), _editorSharedStyles.akEditorSwoopCubicBezier, _editorSharedStyles.akEditorFloatingDialogZIndex, toolbarLineHeight, "var(--ds-surface, white)", _editorSharedStyles.akEditorMobileMaxWidth, toolbarLineHeight);
+var mainToolbarWithKeyline = (0, _react.css)({
+  boxShadow: "0 ".concat(_editorSharedStyles.akEditorToolbarKeylineHeight, "px 0 0 ", "var(--ds-background-accent-gray-subtlest, #F1F2F4)")
+});
+var mainToolbarTwoLineStyle = (0, _react.css)((0, _defineProperty2.default)({}, "@media (max-width: ".concat(MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, "px)"), {
+  flexWrap: 'wrap',
+  height: "calc(".concat(toolbarLineHeight, "px * 2)")
+}));
+var mainToolbar = (0, _react.css)((0, _defineProperty2.default)({
+  position: 'relative',
+  alignItems: 'center',
+  boxShadow: 'none',
+  transition: "box-shadow 200ms ".concat(_editorSharedStyles.akEditorSwoopCubicBezier),
+  zIndex: _editorSharedStyles.akEditorFloatingDialogZIndex,
+  display: 'flex',
+  height: "".concat(toolbarLineHeight, "px"),
+  flexShrink: 0,
+  backgroundColor: "var(--ds-surface, white)",
+  '& object': {
+    height: '0 !important'
+  }
+}, "@media (max-width: ".concat(_editorSharedStyles.akEditorMobileMaxWidth, "px)"), {
+  display: 'grid',
+  height: "calc(".concat(toolbarLineHeight, "px * 2)")
+}));
 var mainToolbarStyle = exports.mainToolbarStyle = function mainToolbarStyle(showKeyline, twoLineEditorToolbar) {
   return [mainToolbar, showKeyline && mainToolbarWithKeyline, twoLineEditorToolbar && mainToolbarTwoLineStyle];
 };
-var mainToolbarIconBeforeStyle = exports.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);
-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);
+var mainToolbarIconBeforeStyle = exports.mainToolbarIconBeforeStyle = (0, _react.css)((0, _defineProperty2.default)({
+  margin: "var(--ds-space-200, 16px)",
+  height: "var(--ds-space-400, 32px)",
+  width: "var(--ds-space-400, 32px)"
+}, "@media (max-width: ".concat(_editorSharedStyles.akEditorMobileMaxWidth, "px)"), {
+  gridColumn: 1,
+  gridRow: 1
+}));
+var mainToolbarFirstChild = (0, _react.css)((0, _defineProperty2.default)({
+  display: 'flex',
+  flexGrow: 1
+}, "@media (max-width: ".concat(_editorSharedStyles.akEditorMobileMaxWidth, "px)"), {
+  gridColumn: 1,
+  gridRow: 1
+}));
+var mainToolbarFirstChildTowLine = (0, _react.css)((0, _defineProperty2.default)({}, "@media (max-width: ".concat(MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, "px)"), {
+  flex: '1 1 100%',
+  height: "".concat(toolbarLineHeight, "px"),
+  justifyContent: 'flex-end',
+  minWidth: 'fit-content'
+}));
 var mainToolbarFirstChildStyle = exports.mainToolbarFirstChildStyle = function mainToolbarFirstChildStyle(twoLineEditorToolbar) {
   return [mainToolbarFirstChild, twoLineEditorToolbar && mainToolbarFirstChildTowLine];
 };
-var mainToolbarSecondChild = (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\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"])));
-var mainToolbarSecondChildTwoLine = (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  @media (max-width: ", "px) {\n    display: flex;\n    flex-grow: 1;\n    flex: 1 1 100%;\n    margin: auto;\n    height: ", "px;\n    min-width: 0;\n  }\n"])), MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, toolbarLineHeight);
+var mainToolbarSecondChild = (0, _react.css)({
+  minWidth: 'fit-content'
+});
+var mainToolbarSecondChildTwoLine = (0, _react.css)((0, _defineProperty2.default)({}, "@media (max-width: ".concat(MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, "px)"), {
+  display: 'flex',
+  flexGrow: 1,
+  flex: '1 1 100%',
+  margin: 'auto',
+  height: "".concat(toolbarLineHeight, "px"),
+  minWidth: 0
+}));
 var mainToolbarSecondChildStyle = exports.mainToolbarSecondChildStyle = function mainToolbarSecondChildStyle(twoLineEditorToolbar) {
   return [mainToolbarSecondChild, twoLineEditorToolbar && mainToolbarSecondChildTwoLine];
 };
-var nonCustomToolbarWrapperStyle = exports.nonCustomToolbarWrapperStyle = (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  display: flex;\n  flex-grow: 1;\n"])));
-var customToolbarWrapperStyle = exports.customToolbarWrapperStyle = (0, _react.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  display: flex;\n"])));
+var nonCustomToolbarWrapperStyle = exports.nonCustomToolbarWrapperStyle = (0, _react.css)({
+  alignItems: 'center',
+  display: 'flex',
+  flexGrow: 1
+});
+var customToolbarWrapperStyle = exports.customToolbarWrapperStyle = (0, _react.css)({
+  alignItems: 'center',
+  display: 'flex'
+});

package/dist/cjs/ui/AppearanceComponents/Mobile.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MobileAppearance = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _hooks = require("@atlaskit/editor-common/hooks");
@@ -14,16 +13,28 @@ var _context = require("../../presets/context");
 var _Addon = require("../Addon");
 var _ContentStyles = require("../ContentStyles");
 var _WithFlash = _interopRequireDefault(require("../WithFlash"));
-var _templateObject;
-/** @jsx jsx */
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/** @jsx jsx */
+
 // Only mobile bridge is using this appearance. We have some plans to decouple the appearances from editor-core. So it doesn't make sense to move this plugin to a separated package for now.
 // Copied packages/editor/editor-mobile-bridge/src/editor/editor-plugins/mobile-dimensions/index.ts
 
 // Copied from packages/editor/editor-mobile-bridge/src/editor/editor-plugins/mobile-dimensions/types.ts
 
-var mobileEditor = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  min-height: 30px;\n  width: 100%;\n  max-width: inherit;\n  box-sizing: border-box;\n  word-wrap: break-word;\n\n  div > .ProseMirror {\n    outline: none;\n    white-space: pre-wrap;\n    padding: 0;\n    margin: 0;\n  }\n"])));
+var mobileEditor = (0, _react2.css)({
+  minHeight: '30px',
+  width: '100%',
+  maxWidth: 'inherit',
+  boxSizing: 'border-box',
+  wordWrap: 'break-word',
+  'div > .ProseMirror': {
+    outline: 'none',
+    whiteSpace: 'pre-wrap',
+    padding: 0,
+    margin: 0
+  }
+});
 var ContentArea = (0, _ContentStyles.createEditorContentStyle)();
 ContentArea.displayName = 'ContentArea';
 var MobileAppearance = exports.MobileAppearance = /*#__PURE__*/(0, _react.forwardRef)(function MobileAppearance(_ref, ref) {

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

@@ -1,14 +1,33 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.inputStyle = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
-var _templateObject;
-var inputStyle = exports.inputStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  /* Normal .className gets overridden by input[type=text] hence this hack to produce input.className */\n  input& {\n    background-color: ", ";\n    border: 1px solid ", ";\n    border-radius: ", "px;\n    box-sizing: border-box;\n    height: 40px;\n    padding-left: ", ";\n    padding-top: ", ";\n    padding-bottom: ", ";\n    font-size: ", ";\n    width: 100%;\n    font-weight: 400;\n    line-height: 1.42857142857143;\n    letter-spacing: -0.005em;\n    color: ", ";\n\n    &:hover {\n      background-color: ", ";\n      border-color: ", ";\n      cursor: text;\n    }\n  }\n"])), "var(--ds-background-input, white)", "var(--ds-border-input, ".concat(_editorSharedStyles.akEditorSubtleAccent, ")"), (0, _constants.borderRadius)(), "var(--ds-space-250, 20px)", "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)", (0, _editorSharedStyles.relativeFontSizeToBase16)(14), "var(--ds-text-subtlest, ".concat(_colors.N300, ")"), "var(--ds-background-input-hovered, white)", "var(--ds-border-input, ".concat(_colors.N50, ")"));
+var inputStyle = exports.inputStyle = (0, _react.css)({
+  'input&': {
+    backgroundColor: "var(--ds-background-input, white)",
+    border: "1px solid ".concat("var(--ds-border-input, ".concat(_editorSharedStyles.akEditorSubtleAccent, ")")),
+    borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
+    boxSizing: 'border-box',
+    height: '40px',
+    paddingLeft: "var(--ds-space-250, 20px)",
+    paddingTop: "var(--ds-space-150, 12px)",
+    paddingBottom: "var(--ds-space-150, 12px)",
+    fontSize: (0, _editorSharedStyles.relativeFontSizeToBase16)(14),
+    width: '100%',
+    fontWeight: 400,
+    lineHeight: 1.42857142857143,
+    letterSpacing: '-0.005em',
+    color: "var(--ds-text-subtlest, ".concat(_colors.N300, ")"),
+    '&:hover': {
+      backgroundColor: "var(--ds-background-input-hovered, white)",
+      borderColor: "var(--ds-border-input, ".concat(_colors.N50, ")"),
+      cursor: 'text'
+    }
+  }
+});

package/dist/cjs/ui/ContentStyles/date.js

@@ -10,4 +10,5 @@ var _react = require("@emotion/react");
 var _styles = require("@atlaskit/editor-common/styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _templateObject;
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
 var dateStyles = exports.dateStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    .", " {\n      line-height: initial;\n      cursor: pointer;\n    }\n\n    &.", " {\n      .", " > span {\n        ", "\n      }\n    }\n  }\n\n  .danger {\n    .", ".", "\n      .", "\n      > span {\n      box-shadow: 0 0 0 ", "px\n        ", ";\n    }\n  }\n"])), _styles.DateSharedCssClassName.DATE_CONTAINER, _styles.DateSharedCssClassName.DATE_WRAPPER, _editorSharedStyles.akEditorSelectedNodeClassName, _styles.DateSharedCssClassName.DATE_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _styles.DateSharedCssClassName.DATE_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, _styles.DateSharedCssClassName.DATE_WRAPPER, _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"));

package/dist/cjs/ui/ContentStyles/extension.js

@@ -9,5 +9,5 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _react = require("@emotion/react");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _templateObject;
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/design-system/no-exported-css -- Needs manual remediation
 var extensionStyles = exports.extensionStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .multiBodiedExtensionView-content-wrap {\n    &.danger > span > .multiBodiedExtension--container {\n      box-shadow: 0 0 0 ", "px\n        ", ";\n      background-color: ", ";\n    }\n    &:not(.danger).", " {\n      & > span > .multiBodiedExtension--container {\n        ", "\n      }\n    }\n    .multiBodiedExtension--container {\n      width: 100%;\n      max-width: 100%; // ensure width can't go over 100%;\n    }\n  }\n\n  .extensionView-content-wrap,\n  .multiBodiedExtensionView-content-wrap,\n  .bodiedExtensionView-content-wrap {\n    margin: ", " 0;\n\n    &:first-of-type {\n      margin-top: 0;\n    }\n\n    &:last-of-type {\n      margin-bottom: 0;\n    }\n\n    &:not(.danger).", " {\n      & > span > .extension-container {\n        ", "\n      }\n    }\n\n    &.danger > span > .extension-container {\n      box-shadow: 0 0 0 ", "px\n        ", ";\n      background-color: ", ";\n    }\n\n    &.inline {\n      word-wrap: break-all;\n    }\n  }\n\n  .extensionView-content-wrap .extension-container {\n    overflow: hidden;\n  }\n\n  .bodiedExtensionView-content-wrap\n    .extensionView-content-wrap\n    .extension-container {\n    width: 100%;\n    max-width: 100%; // ensure width can't go over 100%;\n  }\n\n  [data-mark-type='fragment'] {\n    & > .extensionView-content-wrap,\n    & > .bodiedExtensionView-content-wrap {\n      margin: ", " 0;\n    }\n\n    & > [data-mark-type='dataConsumer'] {\n      & > .extensionView-content-wrap,\n      & > .bodiedExtensionView-content-wrap {\n        margin: ", " 0;\n      }\n    }\n\n    &:first-child {\n      & > .extensionView-content-wrap,\n      & > .bodiedExtensionView-content-wrap {\n        margin-top: 0;\n      }\n\n      & > [data-mark-type='dataConsumer'] {\n        & > .extensionView-content-wrap,\n        & > .bodiedExtensionView-content-wrap {\n          margin-top: 0;\n        }\n      }\n    }\n\n    &:nth-last-of-type(-n + 2):not(:first-of-type) {\n      & > .extensionView-content-wrap,\n      & > .bodiedExtensionView-content-wrap {\n        margin-bottom: 0;\n      }\n\n      & > [data-mark-type='dataConsumer'] {\n        & > .extensionView-content-wrap,\n        & > .bodiedExtensionView-content-wrap {\n          margin-bottom: 0;\n        }\n      }\n    }\n  }\n"])), _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Blanket]), _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin);

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

@@ -37,6 +37,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 /** @jsx jsx */
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+// eslint-disable-next-line @atlaskit/design-system/no-exported-css
 var linkStyles = exports.linkStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    ", "\n  }\n"])), _styles.linkSharedStyle);
 var ruleStyles = function ruleStyles() {
   return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    ", ";\n\n    hr {\n      cursor: pointer;\n      padding: ", " 0;\n      margin: ", " 0;\n      background-clip: content-box;\n\n      &.", " {\n        outline: none;\n        background-color: ", ";\n      }\n    }\n  }\n"])), (0, _styles.ruleSharedStyles)(), "var(--ds-space-050, 4px)", "var(--ds-space-300, 24px)", _editorSharedStyles.akEditorSelectedNodeClassName, "var(--ds-border-selected, ".concat(_editorSharedStyles.akEditorSelectedBorderColor, ")"));
@@ -44,6 +45,8 @@ var ruleStyles = function ruleStyles() {
 var mentionsStyles = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    &.", " [data-mention-id] > span {\n      ", "\n\n      /* need to specify dark text colour because personal mentions\n         (in dark blue) have white text by default */\n      color: ", ";\n    }\n  }\n\n  .danger {\n    .", ".", "\n      > span\n      > span\n      > span {\n      box-shadow: 0 0 0 ", "px ", ";\n      background-color: ", ";\n    }\n    .", " > span > span > span {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"])), _mention.MentionSharedCssClassName.MENTION_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Background]), "var(--ds-text-subtle, ".concat(_colors.N500, ")"), _mention.MentionSharedCssClassName.MENTION_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedBorderSize, _editorSharedStyles.akEditorDeleteBorder, "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackgroundWithOpacity, ")"), _mention.MentionSharedCssClassName.MENTION_CONTAINER, "var(--ds-background-neutral, ".concat(_colors.N30A, ")"), "var(--ds-text-subtle, ".concat(_colors.N500, ")"));
 var listsStyles = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    li {\n      position: relative;\n\n      > p:not(:first-child) {\n        margin: ", " 0 0 0;\n      }\n\n      // In SSR the above rule will apply to all p tags because first-child would be a style tag.\n      // The following rule resets the first p tag back to its original margin\n      // defined in packages/editor/editor-common/src/styles/shared/paragraph.ts\n      > style:first-child + p {\n        margin-top: ", ";\n      }\n    }\n\n    &:not([data-node-type='decisionList']) > li,\n    // This prevents https://product-fabric.atlassian.net/browse/ED-20924\n    &:not(.", ") > li {\n      ", "\n    }\n  }\n"])), "var(--ds-space-050, 4px)", _editorSharedStyles.blockNodesVerticalMargin, _styles.SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, _utils.browser.safari ? _styles.codeBlockInListSafariFix : '');
 var emojiStyles = (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    display: inline-block;\n\n    .", " {\n      cursor: pointer;\n\n      &.", " > span {\n        /** needed for selection style to cover custom emoji image properly */\n        display: flex;\n      }\n    }\n\n    &.", " {\n      .", ",\n        .", " {\n        border-radius: 2px;\n        ", "\n      }\n    }\n  }\n"])), _emoji.EmojiSharedCssClassName.EMOJI_CONTAINER, _emoji.EmojiSharedCssClassName.EMOJI_NODE, _emoji.EmojiSharedCssClassName.EMOJI_IMAGE, _editorSharedStyles.akEditorSelectedNodeClassName, _emoji.EmojiSharedCssClassName.EMOJI_SPRITE, _emoji.EmojiSharedCssClassName.EMOJI_IMAGE, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Blanket, _editorSharedStyles.SelectionStyle.BoxShadow]));
+
+// eslint-disable-next-line @atlaskit/design-system/no-exported-css
 var placeholderStyles = exports.placeholderStyles = (0, _react2.css)({
   '.ProseMirror .placeholder-decoration': {
     color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")"),