@atlaskit/editor-core 193.2.6 → 193.3.0

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

@@ -17,7 +17,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 _Transition = _interopRequireDefault(require("react-transition-group/Transition"));
@@ -30,20 +29,22 @@ var _document = require("../../utils/document");
 var _WithEditorActions = _interopRequireDefault(require("../WithEditorActions"));
 var _WithPluginState = _interopRequireDefault(require("../WithPluginState"));
 var _excluded = ["actions"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-/** @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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 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 */
 var ANIM_SPEED_MS = 500;
 var EDITOR_WIDTH = _editorSharedStyles.akEditorDefaultLayoutWidth + _editorSharedStyles.akEditorBreakoutPadding;
 var WIDE_EDITOR_WIDTH = _editorSharedStyles.akEditorWideLayoutWidth + _editorSharedStyles.akEditorBreakoutPadding;
 var FULLWIDTH_MODE = 'full-width';
 var WIDE_MODE = 'wide';
-var absolutePanelStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  right: 0;\n  height: calc(100% - ", ");\n"])), _editorSharedStyles.ATLASSIAN_NAVIGATION_HEIGHT);
+var absolutePanelStyles = (0, _react2.css)({
+  position: 'absolute',
+  right: 0,
+  height: "calc(100% - ".concat(_editorSharedStyles.ATLASSIAN_NAVIGATION_HEIGHT, ")")
+});
 var checkTableExistsInDoc = function checkTableExistsInDoc(editorView) {
   var tableNodeSchema = editorView.state.schema.nodes.table;
   var findResult = (0, _utils.findChildrenByType)(editorView.state.doc, tableNodeSchema);
@@ -69,9 +70,24 @@ var shouldPanelBePositionedOverEditor = exports.shouldPanelBePositionedOverEdito
     return editorNotFullWidth && (hasSpaceForPanel || hasSpaceForWideBreakoutsAndPanel) && !isTableInDoc;
   }
 };
-var panelHidden = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: 0;\n"])));
-var panel = exports.panel = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  width: ", "px;\n  height: 100%;\n  transition: width ", "ms ", ";\n  overflow: hidden;\n  box-shadow: inset 2px 0 0 0 ", ";\n"])), _editorSharedStyles.akEditorContextPanelWidth, ANIM_SPEED_MS, _editorSharedStyles.akEditorSwoopCubicBezier, "var(--ds-border, ".concat(_colors.N30, ")"));
-var content = exports.content = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  transition: width 600ms ", ";\n  box-sizing: border-box;\n  padding: ", " ", " 0px;\n  width: ", "px;\n  height: 100%;\n  overflow-y: auto;\n"])), _editorSharedStyles.akEditorSwoopCubicBezier, "var(--ds-space-200, 16px)", "var(--ds-space-200, 16px)", _editorSharedStyles.akEditorContextPanelWidth);
+var panelHidden = (0, _react2.css)({
+  width: 0
+});
+var panel = exports.panel = (0, _react2.css)({
+  width: "".concat(_editorSharedStyles.akEditorContextPanelWidth, "px"),
+  height: '100%',
+  transition: "width ".concat(ANIM_SPEED_MS, "ms ").concat(_editorSharedStyles.akEditorSwoopCubicBezier),
+  overflow: 'hidden',
+  boxShadow: "inset 2px 0 0 0 ".concat("var(--ds-border, ".concat(_colors.N30, ")"))
+});
+var content = exports.content = (0, _react2.css)({
+  transition: "width 600ms ".concat(_editorSharedStyles.akEditorSwoopCubicBezier),
+  boxSizing: 'border-box',
+  padding: "var(--ds-space-200, 16px)".concat(" ", "var(--ds-space-200, 16px)", " 0px"),
+  width: "".concat(_editorSharedStyles.akEditorContextPanelWidth, "px"),
+  height: '100%',
+  overflowY: 'auto'
+});
 var SwappableContentArea = exports.SwappableContentArea = /*#__PURE__*/function (_React$PureComponent) {
   (0, _inherits2.default)(SwappableContentArea, _React$PureComponent);
   var _super = _createSuper(SwappableContentArea);

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

@@ -12,18 +12,17 @@ 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 _analytics = require("@atlaskit/editor-common/analytics");
 var _utils = require("../../utils");
 var _ErrorBoundary = require("../ErrorBoundary");
 var _mountPluginHooks = require("./mount-plugin-hooks");
-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; })(); }
-var pluginsComponentsWrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n"])));
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /** @jsx jsx */
+var pluginsComponentsWrapper = (0, _react2.css)({
+  display: 'flex'
+});
 var PluginSlot = exports.default = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(PluginSlot, _React$Component);
   var _super = _createSuper(PluginSlot);

package/dist/cjs/ui/Toolbar/ToolbarInner.js

@@ -10,15 +10,17 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 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 _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-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; })(); }
-var toolbarComponentsWrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n\n  @media (max-width: ", "px) {\n    justify-content: space-between;\n  }\n"])), _editorSharedStyles.akEditorMobileMaxWidth);
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /** @jsx jsx */
+var toolbarComponentsWrapper = (0, _react2.css)((0, _defineProperty2.default)({
+  display: 'flex'
+}, "@media (max-width: ".concat(_editorSharedStyles.akEditorMobileMaxWidth, "px)"), {
+  justifyContent: 'space-between'
+}));
 var ToolbarInner = exports.ToolbarInner = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(ToolbarInner, _React$Component);
   var _super = _createSuper(ToolbarInner);

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

@@ -64,10 +64,13 @@ var WithFlash = exports.default = /*#__PURE__*/function (_React$Component) {
         animate = _this$props.animate,
         children = _this$props.children;
       this.toggle = animate && !this.toggle;
-      return (0, _react2.jsx)("div", {
-        css: animate ? flashWrapperAnimated : flashWrapper,
-        className: this.toggle ? '-flash' : ''
-      }, children);
+      return (
+        // eslint-disable-next-line @atlaskit/design-system/prefer-primitives
+        (0, _react2.jsx)("div", {
+          css: animate ? flashWrapperAnimated : flashWrapper,
+          className: this.toggle ? '-flash' : ''
+        }, children)
+      );
     }
   }]);
   return WithFlash;

package/dist/cjs/version-wrapper.js

@@ -5,4 +5,4 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.version = exports.name = void 0;
 var name = exports.name = "@atlaskit/editor-core";
-var version = exports.version = "193.2.6";
+var version = exports.version = "193.3.0";

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

@@ -5,43 +5,31 @@ import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/utils';
 // For reasoning behind styles, see comments in:
 // ./getInlineNodeViewProducer -> portalChildren()
 
-export const InlineNodeViewSharedStyles = css`
-  .${inlineNodeViewClassname} {
-    display: inline;
-    user-select: all;
-    /* Collapses zero width spaces inside the inline node view
-    to prevent the node from line breaking too early.
-    */
-    white-space: nowrap;
-    /* Then reset to the Editor default so we don't interfere
-    with any component styling. */
-    & > *:not(.zeroWidthSpaceContainer) {
-      white-space: pre-wrap;
+export const InlineNodeViewSharedStyles = css({
+  [`.${inlineNodeViewClassname}`]: {
+    display: 'inline',
+    userSelect: 'all',
+    whiteSpace: 'nowrap',
+    '& > *:not(.zeroWidthSpaceContainer)': {
+      whiteSpace: 'pre-wrap'
+    },
+    '& > .assistive': {
+      userSelect: 'none'
     }
-    // Prevent visually hidden assistive text from being selected.
-    & > .assistive {
-      user-select: none;
-    }
-  }
-  /** Remove browser deafult selections style. This prevents
-    unexpected visual artefacts in Safari when navigating
-    with the keyboard or making range selections. */
-  &.ua-safari {
-    .${inlineNodeViewClassname} {
-      ::selection,
-      *::selection {
-        background: transparent;
+  },
+  '&.ua-safari': {
+    [`.${inlineNodeViewClassname}`]: {
+      '::selection, *::selection': {
+        background: 'transparent'
       }
     }
-  }
-
-  &.ua-chrome .${inlineNodeViewClassname} > span {
-    user-select: none;
-  }
-
-  .${inlineNodeViewClassname}AddZeroWidthSpace {
-    ::after {
-      content: '${ZERO_WIDTH_SPACE}';
+  },
+  [`&.ua-chrome .${inlineNodeViewClassname} > span`]: {
+    userSelect: 'none'
+  },
+  [`.${inlineNodeViewClassname}AddZeroWidthSpace`]: {
+    '::after': {
+      content: `'${ZERO_WIDTH_SPACE}'`
     }
   }
-`;
+});

package/dist/es2019/presets/universal.js

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

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

@@ -12,10 +12,9 @@ import { clickAreaClickHandler } from '../click-area-helper';
 const clickWrapper = ({
   isExpanded,
   minHeight
-}) => css`
-  height: 100%;
-  ${isExpanded && minHeight ? `min-height: ${minHeight}px` : ''};
-`;
+}) => css({
+  height: '100%'
+}, isExpanded && minHeight ? `min-height: ${minHeight}px` : '');
 /**
  * Click Area is responsible for improving UX by ensuring the user
  * can always tap beneath the content area, to insert more content.

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

@@ -1,12 +1,12 @@
 import { css } from '@emotion/react';
 import { N60A } from '@atlaskit/theme/colors';
 import { borderRadius } from '@atlaskit/theme/constants';
-export const dropdown = css`
-  display: flex;
-  flex-direction: column;
-  background: ${"var(--ds-surface-overlay, white)"};
-  border-radius: ${borderRadius()}px;
-  box-shadow: ${`var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N60A}, 0 0 1px ${N60A}`})`};
-  box-sizing: border-box;
-  padding: ${"var(--ds-space-050, 4px)"} 0;
-`;
+export const dropdown = css({
+  display: 'flex',
+  flexDirection: 'column',
+  background: "var(--ds-surface-overlay, white)",
+  borderRadius: `${borderRadius()}px`,
+  boxShadow: `var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N60A}, 0 0 1px ${N60A}`})`,
+  boxSizing: 'border-box',
+  padding: `${"var(--ds-space-050, 4px)"} 0`
+});

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

@@ -1,18 +1,17 @@
 import { css } from '@emotion/react';
 import { N20, N800 } from '@atlaskit/theme/colors';
-export const dropdownItem = css`
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  text-decoration: none;
-  padding: ${"var(--ds-space-100, 8px)"} ${"var(--ds-space-400, 32px)"}
-    ${"var(--ds-space-100, 8px)"} ${"var(--ds-space-150, 12px)"};
-  color: ${`var(--ds-text, ${N800})`};
-  > span {
-    display: flex;
-    margin-right: ${"var(--ds-space-100, 8px)"};
+export const dropdownItem = css({
+  display: 'flex',
+  alignItems: 'center',
+  cursor: 'pointer',
+  textDecoration: 'none',
+  padding: `${"var(--ds-space-100, 8px)"} ${"var(--ds-space-400, 32px)"} ${"var(--ds-space-100, 8px)"} ${"var(--ds-space-150, 12px)"}`,
+  color: `var(--ds-text, ${N800})`,
+  '> span': {
+    display: 'flex',
+    marginRight: "var(--ds-space-100, 8px)"
+  },
+  '&:hover': {
+    backgroundColor: `var(--ds-background-neutral-subtle-hovered, ${N20})`
   }
-  &:hover {
-    background-color: ${`var(--ds-background-neutral-subtle-hovered, ${N20})`};
-  }
-`;
+});

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

@@ -8,28 +8,26 @@ import { createEditorContentStyle } from '../ContentStyles';
 import PluginSlot from '../PluginSlot';
 import { scrollbarStyles } from '../styles';
 import WithFlash from '../WithFlash';
-const chromelessEditor = css`
-  line-height: 20px;
-  height: auto;
-
-  overflow-x: hidden;
-  overflow-y: auto;
-  ${scrollbarStyles};
-  max-width: inherit;
-  box-sizing: border-box;
-  word-wrap: break-word;
-
-  div > .ProseMirror {
-    outline: none;
-    white-space: pre-wrap;
-    padding: 0;
-    margin: 0;
-
-    & > :last-child {
-      padding-bottom: 0.5em;
+const chromelessEditor = css({
+  lineHeight: '20px',
+  height: 'auto',
+  overflowX: 'hidden',
+  overflowY: 'auto'
+}, 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'
     }
   }
-`;
+});
 const ContentArea = createEditorContentStyle();
 ContentArea.displayName = 'ContentArea';
 export default class Editor extends React.Component {
@@ -62,11 +60,11 @@ export default class Editor extends React.Component {
       return jsx(WithFlash, {
         animate: maxContentSizeReached
       }, jsx("div", {
-        css: [chromelessEditor, maxHeight && css`
-                max-height: ${maxHeight}px;
-              `, css`
-              min-height: ${minHeight}px;
-            `],
+        css: [chromelessEditor, maxHeight && css({
+          maxHeight: `${maxHeight}px`
+        }), css({
+          minHeight: `${minHeight}px`
+        })],
         "data-testid": "chromeless-editor",
         ref: ref => this.containerElement = ref
       }, jsx(ContentArea, {

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

@@ -75,18 +75,23 @@ const StickyToolbar = props => {
       setTop(props.offsetTop || 0);
     }
   }, [props.externalToolbarRef, props.offsetTop]);
-  return jsx("div", {
-    css: [mainToolbarWrapperStyle(props.twoLineEditorToolbar), stickyToolbarWrapperStyle]
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-    ,
-    style: {
-      top: `${top}px`
-    },
-    "data-testid": "ak-editor-main-toolbar",
-    className: 'show-keyline'
-  }, props.children);
+  return (
+    // eslint-disable-next-line @atlaskit/design-system/prefer-primitives
+    jsx("div", {
+      css: [mainToolbarWrapperStyle(props.twoLineEditorToolbar), stickyToolbarWrapperStyle]
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+      ,
+      style: {
+        top: `${top}px`
+      },
+      "data-testid": "ak-editor-main-toolbar",
+      className: 'show-keyline'
+    }, props.children)
+  );
 };
-const FixedToolbar = props => jsx("div", {
+const FixedToolbar = props =>
+// eslint-disable-next-line @atlaskit/design-system/prefer-primitives
+jsx("div", {
   css: mainToolbarWrapperStyle(props.twoLineEditorToolbar),
   "data-testid": "ak-editor-main-toolbar"
 }, props.children);

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

@@ -4,93 +4,80 @@ export const MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT = 868;
 const toolbarLineHeight = 56;
 
 // box-shadow is overriden by the mainToolbar
-const mainToolbarWithKeyline = css`
-  box-shadow: 0 ${akEditorToolbarKeylineHeight}px 0 0
-    ${"var(--ds-background-accent-gray-subtlest, #F1F2F4)"};
-`;
-const mainToolbarTwoLineStyle = css`
-  @media (max-width: ${MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT}px) {
-    flex-wrap: wrap;
-    height: calc(${toolbarLineHeight}px * 2);
+const mainToolbarWithKeyline = css({
+  boxShadow: `0 ${akEditorToolbarKeylineHeight}px 0 0 ${"var(--ds-background-accent-gray-subtlest, #F1F2F4)"}`
+});
+const mainToolbarTwoLineStyle = css({
+  [`@media (max-width: ${MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT}px)`]: {
+    flexWrap: 'wrap',
+    height: `calc(${toolbarLineHeight}px * 2)`
   }
-`;
-const mainToolbar = css`
-  position: relative;
-  align-items: center;
-  box-shadow: none;
-  transition: box-shadow 200ms ${akEditorSwoopCubicBezier};
-  z-index: ${akEditorFloatingDialogZIndex};
-  display: flex;
-  height: ${toolbarLineHeight}px;
-  flex-shrink: 0;
-  // TODO: https://product-fabric.atlassian.net/browse/DSP-4456
-  background-color: ${"var(--ds-surface, white)"};
-
-  & object {
-    height: 0 !important;
-  }
-
-  @media (max-width: ${akEditorMobileMaxWidth}px) {
-    display: grid;
-    height: calc(${toolbarLineHeight}px * 2);
+});
+const mainToolbar = css({
+  position: 'relative',
+  alignItems: 'center',
+  boxShadow: 'none',
+  transition: `box-shadow 200ms ${akEditorSwoopCubicBezier}`,
+  zIndex: akEditorFloatingDialogZIndex,
+  display: 'flex',
+  height: `${toolbarLineHeight}px`,
+  flexShrink: 0,
+  backgroundColor: "var(--ds-surface, white)",
+  '& object': {
+    height: '0 !important'
+  },
+  [`@media (max-width: ${akEditorMobileMaxWidth}px)`]: {
+    display: 'grid',
+    height: `calc(${toolbarLineHeight}px * 2)`
   }
-`;
+});
 export const mainToolbarStyle = (showKeyline, twoLineEditorToolbar) => [mainToolbar, showKeyline && mainToolbarWithKeyline, twoLineEditorToolbar && mainToolbarTwoLineStyle];
-export const mainToolbarIconBeforeStyle = css`
-  margin: ${"var(--ds-space-200, 16px)"};
-  height: ${"var(--ds-space-400, 32px)"};
-  width: ${"var(--ds-space-400, 32px)"};
-  @media (max-width: ${akEditorMobileMaxWidth}px) {
-    grid-column: 1;
-    grid-row: 1;
+export const mainToolbarIconBeforeStyle = css({
+  margin: "var(--ds-space-200, 16px)",
+  height: "var(--ds-space-400, 32px)",
+  width: "var(--ds-space-400, 32px)",
+  [`@media (max-width: ${akEditorMobileMaxWidth}px)`]: {
+    gridColumn: 1,
+    gridRow: 1
   }
-`;
-const mainToolbarFirstChild = css`
-  display: flex;
-  flex-grow: 1;
-
-  @media (max-width: ${akEditorMobileMaxWidth}px) {
-    grid-column: 1;
-    grid-row: 1;
+});
+const mainToolbarFirstChild = css({
+  display: 'flex',
+  flexGrow: 1,
+  [`@media (max-width: ${akEditorMobileMaxWidth}px)`]: {
+    gridColumn: 1,
+    gridRow: 1
   }
-`;
-const mainToolbarFirstChildTowLine = css`
-  @media (max-width: ${MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT}px) {
-    flex: 1 1 100%;
-    height: ${toolbarLineHeight}px;
-    justify-content: flex-end;
-    // ED-10241: We add fit-content to ensure that MainToolbar does not
-    // shrink more than the size of its contents. This will prevent the
-    // find/replace icon from being overlapped during a confluence
-    // publish operation
-    min-width: fit-content;
+});
+const mainToolbarFirstChildTowLine = css({
+  [`@media (max-width: ${MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT}px)`]: {
+    flex: '1 1 100%',
+    height: `${toolbarLineHeight}px`,
+    justifyContent: 'flex-end',
+    minWidth: 'fit-content'
   }
-`;
+});
 export const mainToolbarFirstChildStyle = twoLineEditorToolbar => [mainToolbarFirstChild, twoLineEditorToolbar && mainToolbarFirstChildTowLine];
-const mainToolbarSecondChild = css`
-  // ED-10241: We add fit-content to ensure that MainToolbar does not
-  // shrink more than the size of its contents. This will prevent the
-  // find/replace icon from being overlapped during a confluence
-  // publish operation
-  min-width: fit-content;
-`;
-const mainToolbarSecondChildTwoLine = css`
-  @media (max-width: ${MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT}px) {
-    display: flex;
-    flex-grow: 1;
-    flex: 1 1 100%;
-    margin: auto;
-    height: ${toolbarLineHeight}px;
-    min-width: 0;
+const mainToolbarSecondChild = css({
+  minWidth: 'fit-content'
+});
+const mainToolbarSecondChildTwoLine = css({
+  [`@media (max-width: ${MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT}px)`]: {
+    display: 'flex',
+    flexGrow: 1,
+    flex: '1 1 100%',
+    margin: 'auto',
+    height: `${toolbarLineHeight}px`,
+    minWidth: 0
   }
-`;
+});
 export const mainToolbarSecondChildStyle = twoLineEditorToolbar => [mainToolbarSecondChild, twoLineEditorToolbar && mainToolbarSecondChildTwoLine];
-export const nonCustomToolbarWrapperStyle = css`
-  align-items: center;
-  display: flex;
-  flex-grow: 1;
-`;
-export const customToolbarWrapperStyle = css`
-  align-items: center;
-  display: flex;
-`;
+export const nonCustomToolbarWrapperStyle = css({
+  alignItems: 'center',
+  display: 'flex',
+  flexGrow: 1
+});
+export const customToolbarWrapperStyle = css({
+  alignItems: 'center',
+  display: 'flex'
+});

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

@@ -12,20 +12,19 @@ import WithFlash from '../WithFlash';
 
 // Copied from packages/editor/editor-mobile-bridge/src/editor/editor-plugins/mobile-dimensions/types.ts
 
-const mobileEditor = css`
-  min-height: 30px;
-  width: 100%;
-  max-width: inherit;
-  box-sizing: border-box;
-  word-wrap: break-word;
-
-  div > .ProseMirror {
-    outline: none;
-    white-space: pre-wrap;
-    padding: 0;
-    margin: 0;
+const mobileEditor = css({
+  minHeight: '30px',
+  width: '100%',
+  maxWidth: 'inherit',
+  boxSizing: 'border-box',
+  wordWrap: 'break-word',
+  'div > .ProseMirror': {
+    outline: 'none',
+    whiteSpace: 'pre-wrap',
+    padding: 0,
+    margin: 0
   }
-`;
+});
 const ContentArea = createEditorContentStyle();
 ContentArea.displayName = 'ContentArea';
 export const MobileAppearance = /*#__PURE__*/forwardRef(function MobileAppearance({