@atlaskit/editor-common 78.11.5 → 78.11.7

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-common
 
+## 78.11.7
+
+### Patch Changes
+
+- [#80237](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/80237) [`bdbdbabdf655`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/bdbdbabdf655) - Remove excess editor brower logging
+- [#80510](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/80510) [`d1ef61df58a5`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d1ef61df58a5) - [ux] Adds hover interaction for lozenges in extensions
+
+## 78.11.6
+
+### Patch Changes
+
+- [#80427](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/80427) [`cc0e2b5dba10`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/cc0e2b5dba10) - React 18 Types for @atlaskit/editor-common
+- [#80391](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/80391) [`bf741c7ef44c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/bf741c7ef44c) - Make @atlaskit/editor-plugin-table, @atlaskit/date, @atlaskit/editor-plugin-date React 18 compatible.
+- [#80518](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/80518) [`e0d5e8fd9495`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e0d5e8fd9495) - Migrates some style calls to a slightly different object syntax and other minor cleanup around eslint rules.
+- [#80170](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/80170) [`25cea639817f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/25cea639817f) - [ux] Migrate to use tokens. The padding on the top of the editor in full-page has changed from 50px to 48px.
+- Updated dependencies
+
 ## 78.11.5
 
 ### Patch Changes

package/dist/cjs/collab/index.js

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.tintDirtyTransaction = exports.telepointerStyle = exports.isDirtyTransaction = exports.colors = exports.TELEPOINTER_DIM_CLASS = exports.PROVIDER_ERROR_CODE = exports.DisconnectReason = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = require("@emotion/react");
 var _adfSchema = require("@atlaskit/adf-schema");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var themeColors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
-var _templateObject;
 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; }
 // Format of the payload returned by the callback function passed to the collab provider
@@ -130,16 +130,43 @@ var colors = exports.colors = [themeColors.R100, themeColors.R300, themeColors.R
     selection: (0, _adfSchema.hexToRgba)(solid, 0.2)
   };
 });
-var telepointerColorStyle = function telepointerColorStyle(color, index) {
-  return "\n  &.color-".concat(index, " {\n    background-color: ").concat(color.selection, ";\n    &::after {\n      background-color: ").concat(color.solid, ";\n      color: ", "var(--ds-text-inverse, #fff)", ";\n      border-color: ").concat(color.solid, ";\n    }\n  }\n");
-};
 var TELEPOINTER_DIM_CLASS = exports.TELEPOINTER_DIM_CLASS = 'telepointer-dim';
-
-// Disable top: -14px since it is necessary to align to cursor
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-var telepointerStyle = exports.telepointerStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror .telepointer {\n    position: relative;\n    transition: opacity 200ms;\n\n    &.telepointer-selection {\n      line-height: 1.2;\n      pointer-events: none;\n      user-select: none;\n    }\n\n    &.telepointer-selection-badge::after {\n      content: attr(data-initial);\n      position: absolute;\n      display: block;\n      top: -14px;\n      font-size: ", ";\n      padding: ", ";\n      color: ", ";\n      left: 0px;\n      border-radius: 2px 2px 2px 0;\n      line-height: initial;\n    }\n\n    &.", " {\n      opacity: 0.2;\n    }\n\n    ", ";\n  }\n"])), (0, _editorSharedStyles.relativeFontSizeToBase16)(9), "var(--ds-space-025, 2px)", "var(--ds-text-inverse, white)", TELEPOINTER_DIM_CLASS, colors.map(function (color, index) {
-  return telepointerColorStyle(color, index);
-}));
+var telepointerStyle = exports.telepointerStyle = _react.css.apply(void 0, [{
+  '.ProseMirror .telepointer': (0, _defineProperty2.default)({
+    position: 'relative',
+    transition: 'opacity 200ms',
+    '&.telepointer-selection': {
+      lineHeight: 1.2,
+      pointerEvents: 'none',
+      userSelect: 'none'
+    },
+    '&.telepointer-selection-badge::after': {
+      content: 'attr(data-initial)',
+      position: 'absolute',
+      display: 'block',
+      // Disable top: -14px since it is necessary to align to cursor
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+      top: '-14px',
+      fontSize: (0, _editorSharedStyles.relativeFontSizeToBase16)(9),
+      padding: "var(--ds-space-025, 2px)",
+      color: "var(--ds-text-inverse, white)",
+      left: '0px',
+      borderRadius: '2px 2px 2px 0',
+      lineHeight: 'initial'
+    }
+  }, "&.".concat(TELEPOINTER_DIM_CLASS), {
+    opacity: 0.2
+  })
+}].concat((0, _toConsumableArray2.default)(colors.map(function (color, index) {
+  return (0, _defineProperty2.default)({}, "&.color-".concat(index), {
+    backgroundColor: color.selection,
+    '&::after': {
+      backgroundColor: color.solid,
+      color: "var(--ds-text-inverse, #fff)",
+      borderColor: color.solid
+    }
+  });
+}))));
 var tintKey = 'collab:isDirtyTransaction';
 var isDirtyTransaction = exports.isDirtyTransaction = function isDirtyTransaction(tr) {
   return Boolean(tr.getMeta(tintKey));

package/dist/cjs/extensibility/Extension/Extension/index.js

@@ -38,7 +38,9 @@ function ExtensionWithPluginState(props) {
     hideFrame = props.hideFrame,
     editorAppearance = props.editorAppearance,
     showMacroInteractionDesignUpdates = props.showMacroInteractionDesignUpdates,
-    isNodeSelected = props.isNodeSelected;
+    isNodeSelected = props.isNodeSelected,
+    isNodeHovered = props.isNodeHovered,
+    setIsNodeHovered = props.setIsNodeHovered;
   var hasBody = ['bodiedExtension', 'multiBodiedExtension'].includes(node.type.name);
   var isMobile = editorAppearance === 'mobile';
   var hasChildren = !!children;
@@ -84,8 +86,14 @@ function ExtensionWithPluginState(props) {
     customContainerStyles = breakoutStyles;
   }
   newContentStyles = _objectSpread(_objectSpread({}, newContentStyles), _styles2.contentWrapper);
+  var handleMouseEvent = function handleMouseEvent(didHover) {
+    if (setIsNodeHovered) {
+      setIsNodeHovered(didHover);
+    }
+  };
   return (0, _react2.jsx)(_react.Fragment, null, showMacroInteractionDesignUpdates && (0, _react2.jsx)(_Lozenge.default, {
     isNodeSelected: isNodeSelected,
+    isNodeHovered: isNodeHovered,
     node: node,
     showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
     customContainerStyles: customContainerStyles
@@ -94,7 +102,13 @@ function ExtensionWithPluginState(props) {
     "data-layout": node.attrs.layout,
     className: classNames,
     css: _styles2.wrapperStyle,
-    style: customContainerStyles
+    style: customContainerStyles,
+    onMouseOver: function onMouseOver() {
+      return handleMouseEvent(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return handleMouseEvent(false);
+    }
   }, (0, _react2.jsx)("div", {
     className: "extension-overflow-wrapper ".concat(hasBody ? 'with-body' : '')
   }, (0, _react2.jsx)("div", {

package/dist/cjs/extensibility/Extension/Lozenge.js

@@ -47,6 +47,7 @@ var ExtensionLozenge = exports.default = /*#__PURE__*/function (_Component) {
       var _this$props = _this.props,
         showMacroInteractionDesignUpdates = _this$props.showMacroInteractionDesignUpdates,
         isNodeSelected = _this$props.isNodeSelected,
+        isNodeHovered = _this$props.isNodeHovered,
         customContainerStyles = _this$props.customContainerStyles;
       var _this$props$node$attr = _this.props.node.attrs,
         parameters = _this$props$node$attr.parameters,
@@ -56,6 +57,7 @@ var ExtensionLozenge = exports.default = /*#__PURE__*/function (_Component) {
       var title = parameters && parameters.extensionTitle || parameters && parameters.macroMetadata && parameters.macroMetadata.title || extensionKey;
       var isBlockExtension = name === 'extension';
       return (0, _react2.jsx)(_LozengeComponent.LozengeComponent, {
+        isNodeHovered: isNodeHovered,
         isNodeSelected: isNodeSelected,
         showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
         isBlockExtension: isBlockExtension,

package/dist/cjs/extensibility/Extension/LozengeComponent.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.LozengeComponent = exports.ICON_SIZE = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
+var _classnames = _interopRequireDefault(require("classnames"));
 var _file = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/file"));
 var _tag = require("@atlaskit/tag");
 var _styles = require("./styles");
@@ -24,12 +25,15 @@ var LozengeComponent = exports.LozengeComponent = function LozengeComponent(_ref
     renderImage = _ref.renderImage,
     isNodeSelected = _ref.isNodeSelected,
     showMacroInteractionDesignUpdates = _ref.showMacroInteractionDesignUpdates,
-    customContainerStyles = _ref.customContainerStyles;
+    customContainerStyles = _ref.customContainerStyles,
+    isNodeHovered = _ref.isNodeHovered;
   var capitalizedTitle = capitalizeFirstLetter(title);
-  // TODO: only show on lozenge on hover: https://product-fabric.atlassian.net/browse/PGXT-4945
   if (showMacroInteractionDesignUpdates) {
+    var lozengeClassNames = (0, _classnames.default)('extension-title', {
+      'show-lozenge': isNodeHovered || isNodeSelected
+    });
     return (0, _react.jsx)("div", {
-      className: "extension-title",
+      className: lozengeClassNames,
       css: _styles.lozengeWrapper,
       "data-testid": "new-lozenge",
       style: customContainerStyles
@@ -37,20 +41,21 @@ var LozengeComponent = exports.LozengeComponent = function LozengeComponent(_ref
       text: capitalizedTitle,
       color: isNodeSelected ? 'blueLight' : 'greyLight'
     }));
+  } else {
+    return (0, _react.jsx)("div", {
+      "data-testid": "lozenge-fallback",
+      css: _styles.placeholderFallback
+    }, lozengeData && !isBlockExtension ? renderImage(_objectSpread({
+      height: ICON_SIZE,
+      width: ICON_SIZE
+    }, lozengeData)) : (0, _react.jsx)(_file.default, {
+      label: title
+    }), (0, _react.jsx)("span", {
+      className: "extension-title"
+    }, capitalizedTitle), params && !isBlockExtension && (0, _react.jsx)("span", {
+      css: _styles.placeholderFallbackParams
+    }, Object.keys(params).map(function (key) {
+      return key && " | ".concat(key, " = ").concat(params[key].value);
+    })));
   }
-  return (0, _react.jsx)("div", {
-    "data-testid": "lozenge-fallback",
-    css: _styles.placeholderFallback
-  }, lozengeData && !isBlockExtension ? renderImage(_objectSpread({
-    height: ICON_SIZE,
-    width: ICON_SIZE
-  }, lozengeData)) : (0, _react.jsx)(_file.default, {
-    label: title
-  }), (0, _react.jsx)("span", {
-    className: "extension-title"
-  }, capitalizedTitle), params && !isBlockExtension && (0, _react.jsx)("span", {
-    css: _styles.placeholderFallbackParams
-  }, Object.keys(params).map(function (key) {
-    return key && " | ".concat(key, " = ").concat(params[key].value);
-  })));
 };

package/dist/cjs/extensibility/Extension/styles.js

@@ -78,6 +78,14 @@ var lozengeWrapper = exports.lozengeWrapper = (0, _react.css)({
   display: 'flex',
   justifyContent: 'left',
   width: '100%',
+  /* -0.75rem neutralizes the margin top coming from extensionView-content-wrap.
+   The lozenge takes up space so we don't need the extra padding anymore. */
+  marginTop: "var(--ds-space-negative-150, -0.75rem)",
   marginLeft: "var(--ds-space-050, 4px)",
-  marginBottom: "var(--ds-space-negative-050, -4px)"
+  marginBottom: "var(--ds-space-negative-050, -4px)",
+  // Using opacity so that lozenge takes up space and doesn't cause shift on render
+  opacity: '0',
+  '&.show-lozenge': {
+    opacity: '1'
+  }
 });

package/dist/cjs/extensibility/ExtensionComponent.js

@@ -43,6 +43,11 @@ var ExtensionComponent = exports.ExtensionComponent = /*#__PURE__*/function (_Co
     // memoized to avoid rerender on extension state changes
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getNodeRenderer", (0, _memoizeOne.default)(_extensions.getNodeRenderer));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getExtensionModuleNodePrivateProps", (0, _memoizeOne.default)(_extensions.getExtensionModuleNodePrivateProps));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setIsNodeHovered", function (isHovered) {
+      _this.setState({
+        isNodeHovered: isHovered
+      });
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setStateFromPromise", function (stateKey, promise) {
       promise && promise.then(function (p) {
         if (!_this.mounted) {
@@ -209,7 +214,9 @@ var ExtensionComponent = exports.ExtensionComponent = /*#__PURE__*/function (_Co
           pluginInjectionApi: pluginInjectionApi,
           editorAppearance: editorAppearance,
           showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
-          isNodeSelected: selectedNode === node
+          isNodeSelected: selectedNode === node,
+          isNodeHovered: this.state.isNodeHovered,
+          setIsNodeHovered: this.setIsNodeHovered
         });
       }
       var extensionHandlerResult = this.tryExtensionHandler(undefined);
@@ -227,7 +234,9 @@ var ExtensionComponent = exports.ExtensionComponent = /*#__PURE__*/function (_Co
             hideFrame: (_this$state$_privateP = this.state._privateProps) === null || _this$state$_privateP === void 0 ? void 0 : _this$state$_privateP.__hideFrame,
             pluginInjectionApi: pluginInjectionApi,
             showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
-            isNodeSelected: selectedNode === node
+            isNodeSelected: selectedNode === node,
+            isNodeHovered: this.state.isNodeHovered,
+            setIsNodeHovered: this.setIsNodeHovered
           }, extensionHandlerResult);
         case 'inlineExtension':
           return /*#__PURE__*/_react.default.createElement(_InlineExtension.default, {

package/dist/cjs/extensibility/MultiBodiedExtension/index.js

@@ -64,7 +64,9 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref)
     widthState = _ref.widthState,
     editorAppearance = _ref.editorAppearance,
     showMacroInteractionDesignUpdates = _ref.showMacroInteractionDesignUpdates,
-    isNodeSelected = _ref.isNodeSelected;
+    isNodeSelected = _ref.isNodeSelected,
+    isNodeHovered = _ref.isNodeHovered,
+    setIsNodeHovered = _ref.setIsNodeHovered;
   var _node$attrs = node.attrs,
     parameters = _node$attrs.parameters,
     extensionKey = _node$attrs.extensionKey;
@@ -124,16 +126,28 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref)
   var navigationClassNames = (0, _classnames.default)('multiBodiedExtension--navigation', {
     'remove-margins': showMacroInteractionDesignUpdates
   });
+  var handleMouseEvent = function handleMouseEvent(didHover) {
+    if (setIsNodeHovered) {
+      setIsNodeHovered(didHover);
+    }
+  };
   return (0, _react2.jsx)(_react.Fragment, null, showMacroInteractionDesignUpdates && (0, _react2.jsx)(_Lozenge.default, {
     isNodeSelected: isNodeSelected,
     node: node,
     showMacroInteractionDesignUpdates: true,
-    customContainerStyles: mbeWrapperStyles
+    customContainerStyles: mbeWrapperStyles,
+    isNodeHovered: isNodeHovered
   }), (0, _react2.jsx)("div", {
     className: wrapperClassNames,
     css: _styles.mbeExtensionWrapperCSS,
     "data-testid": "multiBodiedExtension--wrapper",
-    style: mbeWrapperStyles
+    style: mbeWrapperStyles,
+    onMouseOver: function onMouseOver() {
+      return handleMouseEvent(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return handleMouseEvent(false);
+    }
   }, getWrapperTitleContent(imageData, title, showMacroInteractionDesignUpdates), (0, _react2.jsx)("div", {
     className: containerClassNames,
     css: containerCssExtended,

package/dist/cjs/keymaps/index.js

@@ -105,7 +105,6 @@ exports.toggleUnderline = exports.toggleTaskItemCheckbox = exports.toggleTable =
 exports.tooltip = tooltip;
 exports.undo = void 0;
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _w3cKeyname = require("w3c-keyname");
@@ -114,10 +113,10 @@ var _editorCommands = require("../preset/editor-commands");
 var _utils = require("../utils");
 var _consts = require("./consts");
 var _keymap = require("./keymap");
-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" != _typeof3(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 */
+
 var addAltText = exports.addAltText = makeKeyMapWithCommon('Add Alt Text', 'Mod-Alt-y');
 var navToEditorToolbar = exports.navToEditorToolbar = makeKeyMapWithCommon('Navigate to editor toolbar', 'Alt-F9');
 var navToFloatingToolbar = exports.navToFloatingToolbar = makeKeyMapWithCommon('Navigate to floating toolbar', 'Alt-F10');
@@ -203,9 +202,13 @@ var arrowKeysMap = {
   ARROWUP: "\u2191",
   ARROWDOWN: "\u2193"
 };
-var tooltipShortcutStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: 2px;\n  background-color: ", ";\n  padding: 0 ", ";\n\n  /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */\n  /* stylelint-disable-next-line */\n  label: tooltip-shortcut;\n"])), "var(--ds-background-inverse-subtle, ".concat(_colors.N400, ")"), "var(--ds-space-025, 2px)");
-/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
-
+var tooltipShortcutStyle = (0, _react2.css)({
+  borderRadius: '2px',
+  backgroundColor: "var(--ds-background-inverse-subtle, ".concat(_colors.N400, ")"),
+  padding: "0 ".concat("var(--ds-space-025, 2px)"),
+  // NOTE: This might not actually do anything: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E
+  label: 'tooltip-shortcut'
+});
 function formatShortcut(keymap) {
   var shortcut;
   if (_utils.browser.mac) {

package/dist/cjs/media-inline/styles.js

@@ -16,6 +16,7 @@ var INLINE_IMAGE_BORDER_SIZE_CSS_VAR_KEY = exports.INLINE_IMAGE_BORDER_SIZE_CSS_
 var INLINE_IMAGE_BORDER_COLOR_CSS_VAR_KEY = exports.INLINE_IMAGE_BORDER_COLOR_CSS_VAR_KEY = '--editor-media-inline-image-border-color';
 
 // We implemented such selectors to ensure specificity:
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Nested and dynamic css calls are violations, needs manual remediation
 var inlineImageHeight = function inlineImageHeight(height) {
   var margin = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
   return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  /* Editor style */\n  > .mediaInlineView-content-wrap > .", ",\n  > :is(a, span[data-mark-type='border']) .mediaInlineView-content-wrap > .", ",\n  /* Renderer style */\n  > .", ",\n  > :is(a, span[data-mark-type='border']) .", " {\n    height: ", "px;\n    transform: translateY(", "px);\n  }\n"])), INLINE_IMAGE_WRAPPER_CLASS_NAME, INLINE_IMAGE_WRAPPER_CLASS_NAME, INLINE_IMAGE_WRAPPER_CLASS_NAME, INLINE_IMAGE_WRAPPER_CLASS_NAME, height, margin);
@@ -27,6 +28,7 @@ var inlineImageHeight = function inlineImageHeight(height) {
  * shift in top and bottom and size adjustments to make up for lack of 1to1 size
  * mapping
  */
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Nested and dynamic css calls are violations, needs manual remediation
 var mediaInlineImageStyles = exports.mediaInlineImageStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  // p, h3, and action items\n  .", " {\n    height: ", "px;\n    transform: translateY(-2px);\n  }\n\n  h1 {\n    ", "\n  }\n\n  h2 {\n    ", "\n  }\n\n  h3 {\n    ", "\n  }\n\n  h4 {\n    ", "\n  }\n\n  h5 {\n    ", "\n  }\n\n  h6 {\n    ", "\n  }\n"])), INLINE_IMAGE_WRAPPER_CLASS_NAME, _constants.referenceHeights['p'], inlineImageHeight(_constants.referenceHeights['h1'], -3), inlineImageHeight(_constants.referenceHeights['h2'], -3), inlineImageHeight(_constants.referenceHeights['h3'], -2), inlineImageHeight(_constants.referenceHeights['h4'], -2), inlineImageHeight(_constants.referenceHeights['h5'], -2), inlineImageHeight(_constants.referenceHeights['h6'], -2));
 var wrapperStyle = exports.wrapperStyle = (0, _react.css)({
   display: 'inline-flex',

package/dist/cjs/monitoring/error.js

@@ -16,7 +16,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 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; }
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "78.11.5";
+var packageVersion = "78.11.7";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/cjs/preset/plugin-injection-api.js

@@ -299,10 +299,6 @@ var EditorPluginInjectionAPI = exports.EditorPluginInjectionAPI = /*#__PURE__*/f
           }
           var plugin = getPluginByName(prop);
           if (!plugin) {
-            if (process.env.NODE_ENV === 'development') {
-              // eslint-disable-next-line
-              console.warn("Plugin: ".concat(prop, " does not exist"));
-            }
             return undefined;
           }
           var sharedState = sharedStateAPI.createAPI(plugin);

package/dist/cjs/selection/gap-cursor/styles.js

@@ -7,11 +7,20 @@ Object.defineProperty(exports, "__esModule", {
 exports.hideCaretModifier = exports.gapCursorStyles = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
-var _templateObject, _templateObject2;
-var gapCursorBlink = (0, _react.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  from, to {\n    opacity: 0;\n  }\n  50% {\n    opacity: 1;\n  }\n"])));
+var _templateObject;
+var gapCursorBlink = (0, _react.keyframes)({
+  'from, to': {
+    opacity: 0
+  },
+  '50%': {
+    opacity: 1
+  }
+});
 var hideCaretModifier = exports.hideCaretModifier = 'ProseMirror-hide-gapcursor';
 var gapCursor = '.ProseMirror-gapcursor';
 var prosemirrorwidget = '.ProseMirror-widget';
 var wrapLeft = '[layout="wrap-left"]';
 var wrapRight = '[layout="wrap-right"]';
-var gapCursorStyles = exports.gapCursorStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  /* =============== GAP CURSOR ================== */\n  .ProseMirror {\n    &.", " {\n      caret-color: transparent;\n    }\n\n    ", " {\n      display: none;\n      pointer-events: none;\n      position: relative;\n\n      & span {\n        caret-color: transparent;\n        position: absolute;\n        height: 100%;\n        width: 100%;\n        display: block;\n      }\n\n      & span::after {\n        animation: 1s ", " step-end infinite;\n        border-left: 1px solid;\n        content: '';\n        display: block;\n        position: absolute;\n        top: 0;\n        height: 100%;\n      }\n      &.-left span::after {\n        left: ", ";\n      }\n      &.-right span::after {\n        right: ", ";\n      }\n      & span[layout='full-width'],\n      & span[layout='wide'],\n      & span[layout='fixed-width'] {\n        margin-left: 50%;\n        transform: translateX(-50%);\n      }\n      &", " {\n        float: right;\n      }\n\n      /* fix vertical alignment of gap cursor */\n      &:first-of-type + ul,\n      &:first-of-type + span + ul,\n      &:first-of-type + ol,\n      &:first-of-type + span + ol,\n      &:first-of-type + pre,\n      &:first-of-type + span + pre,\n      &:first-of-type + blockquote,\n      &:first-of-type + span + blockquote {\n        margin-top: 0;\n      }\n    }\n    &.ProseMirror-focused ", " {\n      display: block;\n      border-color: transparent;\n    }\n  }\n\n  /* This hack below is for two images aligned side by side */\n  ", "", " + span + ", ",\n  ", "", " + span + ", ",\n  ", " + ", " + ", ",\n  ", " + ", " + span + ", ",\n  ", " + ", " + ", ",\n  ", " + ", " + span + ", ",\n  ", " + ", " + ", ",\n  ", " + ", " + span ", ",\n  ", " + ", " + ", ",\n  ", " + ", " + span + ", ",\n  ", " + ", " {\n    clear: none;\n  }\n\n  ", " + ", " + ", " > div,\n  ", " + ", " + span + ", " > div,\n  ", " + ", " + ", " > div,\n  ", " + ", " + span + ", " > div,\n  ", " + ", " + ", " > div,\n  ", " + ", " + span + ", " > div,\n  ", " + ", " + ", " > div,\n  ", " + ", " + span + ", " > div {\n    margin-right: 0;\n    margin-left: 0;\n    margin-bottom: 0;\n  }\n\n  ", " + ", ",\n  ", " + ", " {\n    float: left;\n  }\n\n  ", " + ", " + span + ", "::after,\n  ", " + ", " + span + ", "::after,\n  ", " + ", " + ", "::after,\n  ", " + ", " + span + ", "::after,\n  ", " + ", " + ", "::after,\n  ", " + ", " + span + ", "::after {\n    visibility: hidden;\n    display: block;\n    font-size: 0;\n    content: ' ';\n    clear: both;\n    height: 0;\n  }\n\n  ", " + ", " + ", " + *,\n  ", " + ", " + ", " + span + *,\n  ", " + ", " + ", " + *,\n  ", " + ", " + ", " + span + *,\n  ", " + ", " + span + ", " + *,\n  ", " + ", " + span + ", " + *,\n  ", " + ", " + span + ", " + *,\n  ", " + ", " + span + ", " + *,\n  ", " + ", " + ", " + * > *,\n  ", " + ", " + ", " + span + * > *,\n  ", " + ", " + ", " + * > *,\n  ", " + ", " + ", " + span + * > *,\n  ", " + ", " + span + ", " + * > *,\n  ", " + ", " + span + ", " + * > *,\n  ", " + ", " + span + ", " + * > *,\n  ", " + ", " + span + ", " + * > *,\n  ", " + ", " + *,\n  ", " + ", " + span + * {\n    margin-top: 0;\n  }\n"])), hideCaretModifier, gapCursor, gapCursorBlink, "var(--ds-space-negative-050, -4px)", "var(--ds-space-negative-050, -4px)", wrapRight, gapCursor, gapCursor, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, wrapLeft, gapCursor, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, wrapRight, wrapLeft, gapCursor, wrapRight, gapCursor, gapCursor, wrapLeft, wrapRight, gapCursor, wrapRight, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, gapCursor, wrapLeft, wrapRight, gapCursor, wrapRight, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, gapCursor, wrapLeft, wrapRight, gapCursor, wrapRight, wrapLeft, prosemirrorwidget, gapCursor, prosemirrorwidget, gapCursor);
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- This needs manual remediation, it autofixes seemingly safely, but the code style and readability is destroyed.
+var gapCursorStyles = exports.gapCursorStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  /* =============== GAP CURSOR ================== */\n  .ProseMirror {\n    &.", " {\n      caret-color: transparent;\n    }\n\n    ", " {\n      display: none;\n      pointer-events: none;\n      position: relative;\n\n      & span {\n        caret-color: transparent;\n        position: absolute;\n        height: 100%;\n        width: 100%;\n        display: block;\n      }\n\n      & span::after {\n        animation: 1s ", " step-end infinite;\n        border-left: 1px solid;\n        content: '';\n        display: block;\n        position: absolute;\n        top: 0;\n        height: 100%;\n      }\n      &.-left span::after {\n        left: ", ";\n      }\n      &.-right span::after {\n        right: ", ";\n      }\n      & span[layout='full-width'],\n      & span[layout='wide'],\n      & span[layout='fixed-width'] {\n        margin-left: 50%;\n        transform: translateX(-50%);\n      }\n      &", " {\n        float: right;\n      }\n\n      /* fix vertical alignment of gap cursor */\n      &:first-of-type + ul,\n      &:first-of-type + span + ul,\n      &:first-of-type + ol,\n      &:first-of-type + span + ol,\n      &:first-of-type + pre,\n      &:first-of-type + span + pre,\n      &:first-of-type + blockquote,\n      &:first-of-type + span + blockquote {\n        margin-top: 0;\n      }\n    }\n    &.ProseMirror-focused ", " {\n      display: block;\n      border-color: transparent;\n    }\n  }\n\n  /* This hack below is for two images aligned side by side */\n  ", "", " + span + ", ",\n  ", "", " + span + ", ",\n  ", " + ", " + ", ",\n  ", " + ", " + span + ", ",\n  ", " + ", " + ", ",\n  ", " + ", " + span + ", ",\n  ", " + ", " + ", ",\n  ", " + ", " + span ", ",\n  ", " + ", " + ", ",\n  ", " + ", " + span + ", ",\n  ", " + ", " {\n    clear: none;\n  }\n\n  ", " + ", " + ", " > div,\n  ", " + ", " + span + ", " > div,\n  ", " + ", " + ", " > div,\n  ", " + ", " + span + ", " > div,\n  ", " + ", " + ", " > div,\n  ", " + ", " + span + ", " > div,\n  ", " + ", " + ", " > div,\n  ", " + ", " + span + ", " > div {\n    margin-right: 0;\n    margin-left: 0;\n    margin-bottom: 0;\n  }\n\n  ", " + ", ",\n  ", " + ", " {\n    float: left;\n  }\n\n  ", " + ", " + span + ", "::after,\n  ", " + ", " + span + ", "::after,\n  ", " + ", " + ", "::after,\n  ", " + ", " + span + ", "::after,\n  ", " + ", " + ", "::after,\n  ", " + ", " + span + ", "::after {\n    visibility: hidden;\n    display: block;\n    font-size: 0;\n    content: ' ';\n    clear: both;\n    height: 0;\n  }\n\n  ", " + ", " + ", " + *,\n  ", " + ", " + ", " + span + *,\n  ", " + ", " + ", " + *,\n  ", " + ", " + ", " + span + *,\n  ", " + ", " + span + ", " + *,\n  ", " + ", " + span + ", " + *,\n  ", " + ", " + span + ", " + *,\n  ", " + ", " + span + ", " + *,\n  ", " + ", " + ", " + * > *,\n  ", " + ", " + ", " + span + * > *,\n  ", " + ", " + ", " + * > *,\n  ", " + ", " + ", " + span + * > *,\n  ", " + ", " + span + ", " + * > *,\n  ", " + ", " + span + ", " + * > *,\n  ", " + ", " + span + ", " + * > *,\n  ", " + ", " + span + ", " + * > *,\n  ", " + ", " + *,\n  ", " + ", " + span + * {\n    margin-top: 0;\n  }\n"])), hideCaretModifier, gapCursor, gapCursorBlink, "var(--ds-space-negative-050, -4px)", "var(--ds-space-negative-050, -4px)", wrapRight, gapCursor, gapCursor, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, wrapLeft, gapCursor, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, wrapRight, wrapLeft, gapCursor, wrapRight, gapCursor, gapCursor, wrapLeft, wrapRight, gapCursor, wrapRight, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, gapCursor, wrapLeft, wrapRight, gapCursor, wrapRight, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, gapCursor, wrapLeft, wrapRight, gapCursor, wrapRight, wrapLeft, prosemirrorwidget, gapCursor, prosemirrorwidget, gapCursor);

package/dist/cjs/styles/shared/annotation.js

@@ -8,7 +8,7 @@ exports.annotationSharedStyles = exports.annotationPrefix = exports.AnnotationSh
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject;
 var annotationPrefix = exports.annotationPrefix = 'ak-editor-annotation';
 var AnnotationSharedClassNames = exports.AnnotationSharedClassNames = {
   focus: "".concat(annotationPrefix, "-focus"),
@@ -19,10 +19,24 @@ var Y75a = 'rgba(255, 240, 179, 0.5)';
 var Y200a = 'rgba(255, 196, 0, 0.82)';
 var AnnotationSharedCSSByState = exports.AnnotationSharedCSSByState = function AnnotationSharedCSSByState() {
   return {
-    focus: (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    // Background is not coming through in confluence, suspecting to be caused by some specific combination of\n    // emotion and token look up\n\n    background: ", ";\n    border-bottom: 2px solid ", ";\n    // TODO: https://product-fabric.atlassian.net/browse/DSP-4147\n    box-shadow: ", ";\n    cursor: pointer;\n  "])), "var(--ds-background-accent-yellow-subtler, ".concat(_colors.Y75, ")"), "var(--ds-border-accent-yellow, ".concat(_colors.Y300, ")"), "var(--ds-shadow-overlay, ".concat("1px 2px 3px ".concat(_colors.N60A, ", -1px 2px 3px ").concat(_colors.N60A), ")")),
-    blur: (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    background: ", ";\n    border-bottom: 2px solid ", ";\n    cursor: pointer;\n  "])), "var(--ds-background-accent-yellow-subtlest, ".concat(Y75a, ")"), "var(--ds-border-accent-yellow, ".concat(Y200a, ")"))
+    focus: (0, _react.css)({
+      // Background is not coming through in confluence, suspecting to be caused by some specific combination of
+      // emotion and token look up
+      background: "var(--ds-background-accent-yellow-subtler, ".concat(_colors.Y75, ")"),
+      borderBottom: "2px solid ".concat("var(--ds-border-accent-yellow, ".concat(_colors.Y300, ")")),
+      // TODO: https://product-fabric.atlassian.net/browse/DSP-4147
+      boxShadow: "var(--ds-shadow-overlay, ".concat("1px 2px 3px ".concat(_colors.N60A, ", -1px 2px 3px ").concat(_colors.N60A), ")"),
+      cursor: 'pointer'
+    }),
+    blur: (0, _react.css)({
+      background: "var(--ds-background-accent-yellow-subtlest, ".concat(Y75a, ")"),
+      borderBottom: "2px solid ".concat("var(--ds-border-accent-yellow, ".concat(Y200a, ")")),
+      cursor: 'pointer'
+    })
   };
 };
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- `AnnotationSharedCSSByState()` is not safe in object syntax
 var annotationSharedStyles = exports.annotationSharedStyles = function annotationSharedStyles() {
-  return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    .", " {\n      ", ";\n    }\n\n    .", " {\n      ", ";\n      cursor: initial;\n    }\n\n    .", " {\n      ", ";\n    }\n  }\n"])), AnnotationSharedClassNames.focus, AnnotationSharedCSSByState().focus, AnnotationSharedClassNames.draft, AnnotationSharedCSSByState().focus, AnnotationSharedClassNames.blur, AnnotationSharedCSSByState().blur);
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    .", " {\n      ", ";\n    }\n\n    .", " {\n      ", ";\n      cursor: initial;\n    }\n\n    .", " {\n      ", ";\n    }\n  }\n"])), AnnotationSharedClassNames.focus, AnnotationSharedCSSByState().focus, AnnotationSharedClassNames.draft, AnnotationSharedCSSByState().focus, AnnotationSharedClassNames.blur, AnnotationSharedCSSByState().blur);
 };

package/dist/cjs/styles/shared/block-marks.js

@@ -8,4 +8,5 @@ exports.blockMarksSharedStyles = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _templateObject;
+/* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression -- Perfectly safe to auto-fix, but leaving it up to the team to remediate as the readability only gets worse with autofixing */
 var blockMarksSharedStyles = exports.blockMarksSharedStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  /**\n   * We need to remove margin-top from first item\n   * inside doc, tableCell, tableHeader, blockquote, etc.\n   */\n  *:not(.fabric-editor-block-mark) >,\n  /* For nested block marks apart from those with indentation mark */\n  *:not(.fabric-editor-block-mark) >\n    div.fabric-editor-block-mark:first-of-type\n    /* Do not remove the margin top for nodes inside indentation marks */\n      :not(.fabric-editor-indentation-mark)\n    /* Do not remove the margin top for nodes inside alignment marks */\n      :not(.fabric-editor-alignment),\n  // If first element inside a block node has alignment mark, then remove the margin-top\n  .fabric-editor-alignment:first-of-type:first-child,\n  // If first document element has indentation mark remove margin-top\n  .ProseMirror .fabric-editor-indentation-mark:first-of-type:first-child {\n    p,\n    h1,\n    h2,\n    h3,\n    h4,\n    h5,\n    h6,\n    .heading-wrapper {\n      :first-child:not(style),\n      style:first-child + * {\n        margin-top: 0;\n      }\n    }\n  }\n"])));

package/dist/cjs/styles/shared/blockquote.js

@@ -1,12 +1,37 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.blockquoteSharedStyles = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-var _templateObject;
-var blockquoteSharedStyles = exports.blockquoteSharedStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  & blockquote {\n    box-sizing: border-box;\n    padding-left: ", ";\n    border-left: 2px solid\n      ", ";\n    margin: ", " 0 0 0;\n    margin-right: 0;\n\n    [dir='rtl'] & {\n      padding-left: 0;\n      padding-right: ", ";\n    }\n\n    &:first-child {\n      margin-top: 0;\n    }\n\n    &::before {\n      content: '';\n    }\n\n    &::after {\n      content: none;\n    }\n\n    & p {\n      display: block;\n    }\n\n    & table,\n    & table:last-child {\n      display: inline-table;\n    }\n  }\n"])), "var(--ds-space-200, 16px)", "var(--ds-border, ".concat(_editorSharedStyles.akEditorBlockquoteBorderColor, ")"), _editorSharedStyles.blockNodesVerticalMargin, "var(--ds-space-200, 16px)");
+var blockquoteSharedStyles = exports.blockquoteSharedStyles = (0, _react.css)({
+  '& blockquote': {
+    boxSizing: 'border-box',
+    paddingLeft: "var(--ds-space-200, 16px)",
+    borderLeft: "2px solid ".concat("var(--ds-border, ".concat(_editorSharedStyles.akEditorBlockquoteBorderColor, ")")),
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+    margin: "".concat(_editorSharedStyles.blockNodesVerticalMargin, " 0 0 0"),
+    marginRight: 0,
+    "[dir='rtl'] &": {
+      paddingLeft: 0,
+      paddingRight: "var(--ds-space-200, 16px)"
+    },
+    '&:first-child': {
+      marginTop: 0
+    },
+    '&::before': {
+      content: "''"
+    },
+    '&::after': {
+      content: 'none'
+    },
+    '& p': {
+      display: 'block'
+    },
+    '& table, & table:last-child': {
+      display: 'inline-table'
+    }
+  }
+});

package/dist/cjs/styles/shared/code-block.js

@@ -11,6 +11,7 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
 var _templateObject, _templateObject2;
+/* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression -- Should be safe to autofix, but ignoring for now */
 var CodeBlockSharedCssClassName = exports.CodeBlockSharedCssClassName = {
   CODEBLOCK_CONTAINER: 'code-block',
   CODEBLOCK_START: 'code-block--start',

package/dist/cjs/styles/shared/code-mark.js

@@ -5,11 +5,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.codeMarkSharedStyles = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _inline = require("@atlaskit/code/inline");
 var _colors = require("@atlaskit/theme/colors");
-var _templateObject;
+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; }
 var codeMarkSharedStyles = exports.codeMarkSharedStyles = function codeMarkSharedStyles() {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    .code {\n      --ds--code--bg-color: ", ";\n      ", "\n    }\n  "])), "var(--ds-background-neutral, ".concat(_colors.N30A, ")"), (0, _inline.getCodeStyles)());
+  return (0, _react.css)({
+    '.code': _objectSpread({
+      '--ds--code--bg-color': "var(--ds-background-neutral, ".concat(_colors.N30A, ")")
+    }, (0, _inline.getCodeStyles)())
+  });
 };

package/dist/cjs/styles/shared/column-layout.js

@@ -5,8 +5,22 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.columnLayoutSharedStyle = 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;
-var columnLayoutSharedStyle = exports.columnLayoutSharedStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  [data-layout-section] {\n    position: relative;\n    display: flex;\n    flex-direction: row;\n    & > * {\n      flex: 1;\n      min-width: 0;\n    }\n\n    & > .unsupportedBlockView-content-wrap {\n      min-width: initial;\n    }\n\n    @media screen and (max-width: ", "px) {\n      flex-direction: column;\n    }\n  }\n"])), _editorSharedStyles.gridMediumMaxWidth);
+var columnLayoutSharedStyle = exports.columnLayoutSharedStyle = (0, _react.css)({
+  '[data-layout-section]': (0, _defineProperty2.default)({
+    position: 'relative',
+    display: 'flex',
+    flexDirection: 'row',
+    '& > *': {
+      flex: 1,
+      minWidth: 0
+    },
+    '& > .unsupportedBlockView-content-wrap': {
+      minWidth: 'initial'
+    }
+  }, "@media screen and (max-width: ".concat(_editorSharedStyles.gridMediumMaxWidth, "px)"), {
+    flexDirection: 'column'
+  })
+});

package/dist/cjs/styles/shared/date.js

@@ -5,11 +5,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.dateSharedStyle = exports.DateSharedCssClassName = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
-var _templateObject;
 var DateSharedCssClassName = exports.DateSharedCssClassName = {
   DATE_WRAPPER: "date-lozenger-container",
   DATE_CONTAINER: 'dateView-content-wrap'
 };
-var dateSharedStyle = exports.dateSharedStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " span {\n    white-space: unset;\n  }\n"])), DateSharedCssClassName.DATE_WRAPPER);
+var dateSharedStyle = exports.dateSharedStyle = (0, _react.css)((0, _defineProperty2.default)({}, ".".concat(DateSharedCssClassName.DATE_WRAPPER, " span"), {
+  whiteSpace: 'unset'
+}));