@atlaskit/editor-core 193.2.1 → 193.3.0

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

@@ -25,4 +25,5 @@ var _consts = require("@atlaskit/editor-plugins/table/ui/consts");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _colors = require("@atlaskit/theme/colors");
 var _templateObject;
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
 var layoutStyles = exports.layoutStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    ", " [data-layout-section] {\n      // TODO: Migrate away from gridSize\n      // Recommendation: Replace directly with 7px\n      margin: ", " -", "px 0;\n      transition: border-color 0.3s ", ";\n      cursor: pointer;\n\n      /* Inner cursor located 26px from left */\n      [data-layout-column] {\n        flex: 1;\n        min-width: 0;\n        border: ", "px solid\n          ", ";\n        border-radius: 4px;\n        padding: ", "px;\n        box-sizing: border-box;\n\n        > div {\n          > :not(style):first-child,\n          > style:first-child + * {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-child + *,\n          > style:first-child + .ProseMirror-gapcursor + * {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-child + span + *,\n          > style:first-child + .ProseMirror-gapcursor:first-child + span + * {\n            margin-top: 0;\n          }\n\n          > .embedCardView-content-wrap:first-of-type .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .mediaSingleView-content-wrap:first-of-type .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor.-right:first-child\n            + .mediaSingleView-content-wrap\n            .rich-media-item,\n          > style:first-child\n            + .ProseMirror-gapcursor.-right\n            + .mediaSingleView-content-wrap\n            .rich-media-item,\n          > .ProseMirror-gapcursor.-right:first-of-type\n            + .embedCardView-content-wrap\n            .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-child\n            + span\n            + .mediaSingleView-content-wrap\n            .rich-media-item,\n          > style:first-child\n            + .ProseMirror-gapcursor\n            + span\n            + .mediaSingleView-content-wrap\n            .rich-media-item {\n            margin-top: 0;\n          }\n\n          /* Prevent first DecisionWrapper's margin-top: 8px from shifting decisions down\n             and shrinking layout's node selectable area (leniency margin) */\n          > [data-node-type='decisionList'] {\n            li:first-of-type [data-decision-wrapper] {\n              margin-top: 0;\n            }\n          }\n        }\n\n        /* Make the 'content' fill the entire height of the layout column to allow click\n           handler of layout section nodeview to target only data-layout-column */\n        [data-layout-content] {\n          height: 100%;\n          cursor: text;\n        }\n      }\n\n      [data-layout-column] + [data-layout-column] {\n        margin-left: ", "px;\n      }\n\n      @media screen and (max-width: ", "px) {\n        [data-layout-column] + [data-layout-column] {\n          margin-left: 0;\n        }\n      }\n\n      // TODO: Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.\n      // This is because the default state already uses the same token and, as such, the hover style won't change anything.\n      // https://product-fabric.atlassian.net/browse/DSP-4441\n      /* Shows the border when cursor is inside a layout */\n      &.selected [data-layout-column],\n      &:hover [data-layout-column] {\n        border: ", "px solid\n          ", ";\n      }\n\n      &.selected.danger > [data-layout-column] {\n        background-color: ", ";\n        border-color: ", ";\n      }\n\n      &.", ":not(.danger) {\n        [data-layout-column] {\n          ", "\n        }\n      }\n    }\n  }\n\n  .fabric-editor--full-width-mode .ProseMirror {\n    [data-layout-section] {\n      .", " {\n        margin: 0 ", "px;\n      }\n    }\n  }\n"])), _styles.columnLayoutSharedStyle, "var(--ds-space-100, 8px)", _editorSharedStyles.akLayoutGutterOffset, _editorSharedStyles.akEditorSwoopCubicBezier, _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border-bold, ".concat(_colors.N80A, ")"), _styles.LAYOUT_COLUMN_PADDING, _styles.LAYOUT_SECTION_MARGIN, _editorSharedStyles.gridMediumMaxWidth, _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border-bold, ".concat(_colors.N90A, ")"), "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Border, _editorSharedStyles.SelectionStyle.Blanket]), _types.TableCssClassName.TABLE_CONTAINER, _consts.tableMarginFullWidthMode);

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

@@ -13,7 +13,7 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _mediaCard = require("@atlaskit/media-card");
 var _colors = require("@atlaskit/theme/colors");
 var _templateObject;
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/design-system/no-exported-css -- Needs manual remediation
 var mediaStyles = exports.mediaStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    ", " & [layout='full-width'] .", ",\n    & [layout='wide'] .", " {\n      margin-left: 50%;\n      transform: translateX(-50%);\n    }\n\n    .media-extended-resize-experience[layout^='wrap-'] {\n      // override 'overflow: auto' when viewport <= 410 set by mediaSingleSharedStyle\n      // to prevent scroll bar\n      overflow: visible !important;\n    }\n\n    & [layout^='wrap-'] + [layout^='wrap-'] {\n      clear: none;\n      & + p,\n      & + div[class^='fabric-editor-align'],\n      & + ul,\n      & + ol,\n      & + h1,\n      & + h2,\n      & + h3,\n      & + h4,\n      & + h5,\n      & + h6 {\n        clear: both !important;\n      }\n      & .", " {\n        margin-left: 0;\n        margin-right: 0;\n      }\n    }\n\n    ", "\n\n    .mediaSingleView-content-wrap[layout^='wrap-'] {\n      max-width: 100%;\n      // overwrite default Prosemirror setting making it clear: both\n      clear: inherit;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-left'] {\n      float: left;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-right'] {\n      float: right;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-right']\n      + .mediaSingleView-content-wrap[layout='wrap-left'] {\n      clear: both;\n    }\n\n    /* Larger margins for resize handlers when at depth 0 of the document */\n    & > .mediaSingleView-content-wrap {\n      .richMedia-resize-handle-right {\n        margin-right: -", "px;\n      }\n      .richMedia-resize-handle-left {\n        margin-left: -", "px;\n      }\n    }\n  }\n\n  .richMedia-resize-handle-right,\n  .richMedia-resize-handle-left {\n    display: flex;\n    flex-direction: column;\n\n    /* vertical align */\n    justify-content: center;\n  }\n\n  .richMedia-resize-handle-right {\n    align-items: flex-end;\n    padding-right: ", ";\n    margin-right: -", "px;\n  }\n\n  .richMedia-resize-handle-left {\n    align-items: flex-start;\n    padding-left: ", ";\n    margin-left: -", "px;\n  }\n\n  .richMedia-resize-handle-right::after,\n  .richMedia-resize-handle-left::after {\n    content: ' ';\n    display: flex;\n    width: 3px;\n    height: 64px;\n\n    border-radius: 6px;\n  }\n\n  .", ":hover .richMedia-resize-handle-left::after,\n  .", ":hover .richMedia-resize-handle-right::after {\n    background: ", ";\n  }\n\n  .", " .richMedia-resize-handle-right::after,\n  .", " .richMedia-resize-handle-left::after,\n  .", " .richMedia-resize-handle-right:hover::after,\n  .", " .richMedia-resize-handle-left:hover::after,\n  .", ".is-resizing .richMedia-resize-handle-right::after,\n  .", ".is-resizing .richMedia-resize-handle-left::after {\n    background: ", ";\n  }\n\n  .__resizable_base__ {\n    left: unset !important;\n    width: auto !important;\n    height: auto !important;\n  }\n\n  /* Danger when top level node for smart cards / inline links */\n  .danger > div > div > .media-card-frame,\n  .danger > span > a {\n    background-color: ", ";\n    box-shadow: 0px 0px 0px ", "px\n      ", ";\n    transition: background-color 0s, box-shadow 0s;\n  }\n  /* Danger when nested node or common */\n  .danger {\n    /* Media single */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n    /* Media single video player */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n    /* New file experience */\n    .", " .", " {\n      box-shadow: 0 0 0 1px\n        ", " !important;\n    }\n    /* Media resize legacy handlers */\n    .richMedia-resize-handle-right::after,\n    .richMedia-resize-handle-left::after {\n      background: ", " !important;\n    }\n    /* Media resize new handlers */\n    .resizer-handle-thumb {\n      background: ", " !important;\n    }\n\n    /* Smart cards */\n    div div .media-card-frame,\n    .inlineCardView-content-wrap > span > a {\n      background-color: ", "; /* R75 with 50% opactiy */\n      transition: background-color 0s;\n    }\n\n    div div .media-card-frame::after {\n      box-shadow: none;\n    }\n  }\n\n  .warning {\n    /* Media single */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n\n    .", " .", " {\n      box-shadow: 0 0 0 1px ", " !important;\n    }\n\n    .resizer-handle-thumb {\n      background: ", " !important;\n    }\n  }\n"])), _styles.mediaSingleSharedStyle, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _mediaInline.mediaInlineImageStyles, _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide, _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide, "var(--ds-space-150, 12px)", _editorSharedStyles.akEditorMediaResizeHandlerPadding, "var(--ds-space-150, 12px)", _editorSharedStyles.akEditorMediaResizeHandlerPadding, _styles.richMediaClassName, _styles.richMediaClassName, "var(--ds-border, ".concat(_colors.N60, ")"), _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedNodeClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, "var(--ds-border-focused, ".concat(_colors.B200, ")"), "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), _editorSharedStyles.akEditorSelectedBorderBoldSize, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), _styles.richMediaClassName, _mediaCard.fileCardImageViewSelector, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), _styles.richMediaClassName, _mediaCard.inlinePlayerClassName, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), _styles.richMediaClassName, _mediaCard.newFileExperienceClassName, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), "var(--ds-icon-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), "var(--ds-icon-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), "var(--ds-blanket-danger, rgb(255, 189, 173, 0.5))", _styles.richMediaClassName, _mediaCard.fileCardImageViewSelector, "var(--ds-border-warning, ".concat(_colors.Y500, ")"), _styles.richMediaClassName, _mediaCard.inlinePlayerClassName, "var(--ds-border-warning, ".concat(_colors.Y500, ")"), _styles.richMediaClassName, _mediaCard.newFileExperienceClassName, "var(--ds-border-warning, ".concat(_colors.Y500, ")"), "var(--ds-icon-warning, ".concat(_colors.Y500, ")"));
 
 /* `left: unset` above is to work around Chrome bug where rendering a div with

package/dist/cjs/ui/ContentStyles/status.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 statusStyles = exports.statusStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", ",\n    .", ",\n    [data-layout-section] {\n    .", " {\n      max-width: 100%;\n      line-height: 0;\n\n      > span {\n        width: 100%;\n      }\n    }\n  }\n  .", " {\n    > span {\n      cursor: pointer;\n      line-height: 0; /* Prevent responsive layouts increasing height of container. */\n    }\n\n    &.", "\n      .", "\n      > span {\n      ", "\n    }\n  }\n\n  .danger {\n    .", " > span {\n      background-color: ", ";\n    }\n\n    .", ".", "\n      .", "\n      > span {\n      box-shadow: 0 0 0 ", "px ", ";\n    }\n  }\n"])), _styles.TableSharedCssClassName.TABLE_CELL_WRAPPER, _styles.TableSharedCssClassName.TABLE_HEADER_CELL_WRAPPER, _styles.StatusSharedCssClassName.STATUS_CONTAINER, _styles.StatusSharedCssClassName.STATUS_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, _styles.StatusSharedCssClassName.STATUS_LOZENGE, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _styles.StatusSharedCssClassName.STATUS_LOZENGE, _editorSharedStyles.akEditorDeleteBackgroundWithOpacity, _styles.StatusSharedCssClassName.STATUS_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, _styles.StatusSharedCssClassName.STATUS_LOZENGE, _editorSharedStyles.akEditorSelectedBorderSize, _editorSharedStyles.akEditorDeleteBorder);

package/dist/cjs/ui/ContentStyles/tasks-and-decisions.js

@@ -10,5 +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 due to `getSelectionStyles`
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/design-system/no-exported-css -- Needs manual remediation due to `getSelectionStyles`
 var taskDecisionStyles = exports.taskDecisionStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  [data-decision-wrapper] {\n    cursor: pointer;\n  }\n\n  .", " > [data-decision-wrapper],\n  ol[data-node-type='decisionList'].", " {\n    border-radius: 4px;\n    ", "\n  }\n\n  .danger {\n    .", ".", "\n      > div {\n      box-shadow: 0 0 0 ", "px\n        ", ";\n      background-color: ", ";\n      &::after {\n        content: none; /* reset the Blanket selection style */\n      }\n    }\n  }\n"])), _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Blanket]), _styles.TaskDecisionSharedCssClassName.DECISION_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), "var(--ds-blanket-danger, ".concat(_editorSharedStyles.akEditorDeleteBackgroundWithOpacity, ")"));

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.1";
+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/nodeviews/index.js

@@ -1 +0,0 @@
-export {};

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/types/browser.js

@@ -1 +0,0 @@
-export {};

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

@@ -1 +0,0 @@
-export {};

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

@@ -1 +0,0 @@
-export {};

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

@@ -1 +0,0 @@
-export {};

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

@@ -1 +0,0 @@
-export {};

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

@@ -1 +0,0 @@
-export {};

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

@@ -1 +0,0 @@
-export {};

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

@@ -1 +0,0 @@
-export {};

package/dist/es2019/types/i18n.js

@@ -1 +0,0 @@
-export {};

package/dist/es2019/types/index.js

@@ -1 +0,0 @@
-export {};

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

@@ -1 +0,0 @@
-export {};

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

@@ -1 +0,0 @@
-export {};

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

@@ -1 +0,0 @@
-export {};

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

@@ -1 +0,0 @@
-export {};

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);