npm - @atlaskit/editor-common - Versions diffs - 78.11.6 → 78.12.0 - Mend

@atlaskit/editor-common 78.11.6 → 78.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (44) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,22 @@
 # @atlaskit/editor-common
+## 78.12.0
+### Minor Changes
+- [#77222](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/77222) [`b924ab2b79f3`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b924ab2b79f3) - [ux] Add keyboard shortcuts for center and right text alignment
+### Patch Changes
+- Updated dependencies
+## 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

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -78,7 +78,7 @@ Object.defineProperty(exports, "UP", {
     return _consts.UP;
   }
 });
-exports.backspace = exports.altPaste = exports.alignLeft = exports.addRowBefore = exports.addRowAfter = exports.addLink = exports.addInlineComment = exports.addColumnBefore = exports.addColumnAfter = exports.addAltText = void 0;
+exports.backspace = exports.altPaste = exports.alignRight = exports.alignLeft = exports.alignCenter = exports.addRowBefore = exports.addRowAfter = exports.addLink = exports.addInlineComment = exports.addColumnBefore = exports.addColumnAfter = exports.addAltText = void 0;
 exports.bindKeymapArrayWithCommand = bindKeymapArrayWithCommand;
 exports.bindKeymapWithCommand = bindKeymapWithCommand;
 exports.bindKeymapWithEditorCommand = bindKeymapWithEditorCommand;
@@ -100,8 +100,8 @@ Object.defineProperty(exports, "keymap", {
 exports.makeKeyMapArrayWithCommon = makeKeyMapArrayWithCommon;
 exports.makeKeyMapWithCommon = makeKeyMapWithCommon;
 exports.makeKeymap = makeKeymap;
-exports.toggleSuperscript = exports.toggleSubscript = exports.toggleStrikethrough = exports.toggleOrderedList = exports.toggleItalic = exports.toggleHeading6 = exports.toggleHeading5 = exports.toggleHeading4 = exports.toggleHeading3 = exports.toggleHeading2 = exports.toggleHeading1 = exports.toggleCode = exports.toggleBulletList = exports.toggleBold = exports.toggleBlockQuote = exports.tab = exports.submit = exports.startColumnResizing = exports.splitListItem = exports.splitCodeBlock = exports.space = exports.shiftTab = exports.shiftEnter = exports.shiftBackspace = exports.shiftArrowUp = exports.setNormalText = exports.selectRow = exports.selectColumn = exports.redo = exports.previousCell = exports.pastePlainText = exports.paste = exports.outdentList = exports.outdent = exports.openHelp = exports.nextCell = exports.navToFloatingToolbar = exports.navToEditorToolbar = exports.moveUp = exports.moveRowUp = exports.moveRowDown = exports.moveRight = exports.moveLeft = exports.moveDown = exports.moveColumnRight = exports.moveColumnLeft = void 0;
-exports.toggleUnderline = exports.toggleTaskItemCheckbox = exports.toggleTable = void 0;
+exports.toggleStrikethrough = exports.toggleOrderedList = exports.toggleItalic = exports.toggleHeading6 = exports.toggleHeading5 = exports.toggleHeading4 = exports.toggleHeading3 = exports.toggleHeading2 = exports.toggleHeading1 = exports.toggleCode = exports.toggleBulletList = exports.toggleBold = exports.toggleBlockQuote = exports.tab = exports.submit = exports.startColumnResizing = exports.splitListItem = exports.splitCodeBlock = exports.space = exports.shiftTab = exports.shiftEnter = exports.shiftBackspace = exports.shiftArrowUp = exports.setNormalText = exports.selectRow = exports.selectColumn = exports.redo = exports.previousCell = exports.pastePlainText = exports.paste = exports.outdentList = exports.outdent = exports.openHelp = exports.nextCell = exports.navToFloatingToolbar = exports.navToEditorToolbar = exports.moveUp = exports.moveRowUp = exports.moveRowDown = exports.moveRight = exports.moveLeft = exports.moveDown = exports.moveColumnRight = exports.moveColumnLeft = void 0;
+exports.toggleUnderline = exports.toggleTaskItemCheckbox = exports.toggleTable = exports.toggleSuperscript = exports.toggleSubscript = void 0;
 exports.tooltip = tooltip;
 exports.undo = void 0;
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
@@ -190,6 +190,8 @@ var paste = exports.paste = makeKeyMapWithCommon('Paste', 'Mod-v');
 var altPaste = exports.altPaste = makeKeyMapWithCommon('Paste', 'Mod-Shift-v');
 var find = exports.find = makeKeyMapWithCommon('Find', 'Mod-f');
 var alignLeft = exports.alignLeft = makeKeyMapWithCommon('Align Left', 'Mod-Shift-l');
+var alignCenter = exports.alignCenter = makeKeyMapWithCommon('Align Center', 'Mod-Alt-e');
+var alignRight = exports.alignRight = makeKeyMapWithCommon('Align Right', 'Mod-Alt-t');
 var toggleTaskItemCheckbox = exports.toggleTaskItemCheckbox = makeKeyMapWithCommon('Toggles task item', 'Mod-Alt-Enter');
 var selectRow = exports.selectRow = makeKeyMapArrayWithCommon('Select row', ['Mod-Alt-Shift-ArrowLeft', 'Mod-Alt-Shift-ArrowRight']);
 var selectColumn = exports.selectColumn = makeKeyMapArrayWithCommon('Select column', ['Mod-Alt-Shift-ArrowDown', 'Mod-Alt-Shift-ArrowUp']);

package/dist/cjs/monitoring/error.js CHANGED Viewed

@@ -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.6";
+var packageVersion = "78.12.0";
 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 CHANGED Viewed

@@ -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/ui/DropList/index.js CHANGED Viewed

@@ -22,7 +22,7 @@ var _templateObject, _templateObject2, _templateObject3;
 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; })(); } /** @jsx jsx */
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "78.11.6";
+var packageVersion = "78.12.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/es2019/extensibility/Extension/Extension/index.js CHANGED Viewed

@@ -24,7 +24,9 @@ function ExtensionWithPluginState(props) {
     hideFrame,
     editorAppearance,
     showMacroInteractionDesignUpdates,
-    isNodeSelected
+    isNodeSelected,
+    isNodeHovered,
+    setIsNodeHovered
   } = props;
   const hasBody = ['bodiedExtension', 'multiBodiedExtension'].includes(node.type.name);
   const isMobile = editorAppearance === 'mobile';
@@ -80,8 +82,14 @@ function ExtensionWithPluginState(props) {
     ...newContentStyles,
     ...contentWrapper
   };
+  const handleMouseEvent = didHover => {
+    if (setIsNodeHovered) {
+      setIsNodeHovered(didHover);
+    }
+  };
   return jsx(Fragment, null, showMacroInteractionDesignUpdates && jsx(ExtensionLozenge, {
     isNodeSelected: isNodeSelected,
+    isNodeHovered: isNodeHovered,
     node: node,
     showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
     customContainerStyles: customContainerStyles
@@ -90,7 +98,9 @@ function ExtensionWithPluginState(props) {
     "data-layout": node.attrs.layout,
     className: classNames,
     css: wrapperStyle,
-    style: customContainerStyles
+    style: customContainerStyles,
+    onMouseOver: () => handleMouseEvent(true),
+    onMouseLeave: () => handleMouseEvent(false)
   }, jsx("div", {
     className: `extension-overflow-wrapper ${hasBody ? 'with-body' : ''}`
   }, jsx("div", {

package/dist/es2019/extensibility/Extension/Lozenge.js CHANGED Viewed

@@ -28,6 +28,7 @@ export default class ExtensionLozenge extends Component {
       const {
         showMacroInteractionDesignUpdates,
         isNodeSelected,
+        isNodeHovered,
         customContainerStyles
       } = this.props;
       const {
@@ -41,6 +42,7 @@ export default class ExtensionLozenge extends Component {
       const title = parameters && parameters.extensionTitle || parameters && parameters.macroMetadata && parameters.macroMetadata.title || extensionKey;
       const isBlockExtension = name === 'extension';
       return jsx(LozengeComponent, {
+        isNodeHovered: isNodeHovered,
         isNodeSelected: isNodeSelected,
         showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
         isBlockExtension: isBlockExtension,

package/dist/es2019/extensibility/Extension/LozengeComponent.js CHANGED Viewed

@@ -1,6 +1,7 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
+import classnames from 'classnames';
 import EditorFileIcon from '@atlaskit/icon/glyph/editor/file';
 import { SimpleTag as Tag } from '@atlaskit/tag';
 import { lozengeWrapper, placeholderFallback, placeholderFallbackParams } from './styles';
@@ -16,13 +17,16 @@ export const LozengeComponent = ({
   renderImage,
   isNodeSelected,
   showMacroInteractionDesignUpdates,
-  customContainerStyles
+  customContainerStyles,
+  isNodeHovered
 }) => {
   const capitalizedTitle = capitalizeFirstLetter(title);
-  // TODO: only show on lozenge on hover: https://product-fabric.atlassian.net/browse/PGXT-4945
   if (showMacroInteractionDesignUpdates) {
+    const lozengeClassNames = classnames('extension-title', {
+      'show-lozenge': isNodeHovered || isNodeSelected
+    });
     return jsx("div", {
-      className: "extension-title",
+      className: lozengeClassNames,
       css: lozengeWrapper,
       "data-testid": "new-lozenge",
       style: customContainerStyles
@@ -30,19 +34,20 @@ export const LozengeComponent = ({
       text: capitalizedTitle,
       color: isNodeSelected ? 'blueLight' : 'greyLight'
     }));
+  } else {
+    return jsx("div", {
+      "data-testid": "lozenge-fallback",
+      css: placeholderFallback
+    }, lozengeData && !isBlockExtension ? renderImage({
+      height: ICON_SIZE,
+      width: ICON_SIZE,
+      ...lozengeData
+    }) : jsx(EditorFileIcon, {
+      label: title
+    }), jsx("span", {
+      className: "extension-title"
+    }, capitalizedTitle), params && !isBlockExtension && jsx("span", {
+      css: placeholderFallbackParams
+    }, Object.keys(params).map(key => key && ` | ${key} = ${params[key].value}`)));
   }
-  return jsx("div", {
-    "data-testid": "lozenge-fallback",
-    css: placeholderFallback
-  }, lozengeData && !isBlockExtension ? renderImage({
-    height: ICON_SIZE,
-    width: ICON_SIZE,
-    ...lozengeData
-  }) : jsx(EditorFileIcon, {
-    label: title
-  }), jsx("span", {
-    className: "extension-title"
-  }, capitalizedTitle), params && !isBlockExtension && jsx("span", {
-    css: placeholderFallbackParams
-  }, Object.keys(params).map(key => key && ` | ${key} = ${params[key].value}`)));
 };

package/dist/es2019/extensibility/Extension/styles.js CHANGED Viewed

@@ -60,6 +60,14 @@ export const lozengeWrapper = 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/es2019/extensibility/ExtensionComponent.js CHANGED Viewed

@@ -16,6 +16,11 @@ export class ExtensionComponent extends Component {
     // memoized to avoid rerender on extension state changes
     _defineProperty(this, "getNodeRenderer", memoizeOne(getNodeRenderer));
     _defineProperty(this, "getExtensionModuleNodePrivateProps", memoizeOne(getExtensionModuleNodePrivateProps));
+    _defineProperty(this, "setIsNodeHovered", isHovered => {
+      this.setState({
+        isNodeHovered: isHovered
+      });
+    });
     _defineProperty(this, "setStateFromPromise", (stateKey, promise) => {
       promise && promise.then(p => {
         if (!this.mounted) {
@@ -164,7 +169,9 @@ export class ExtensionComponent extends Component {
         pluginInjectionApi: pluginInjectionApi,
         editorAppearance: editorAppearance,
         showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
-        isNodeSelected: selectedNode === node
+        isNodeSelected: selectedNode === node,
+        isNodeHovered: this.state.isNodeHovered,
+        setIsNodeHovered: this.setIsNodeHovered
       });
     }
     const extensionHandlerResult = this.tryExtensionHandler(undefined);
@@ -182,7 +189,9 @@ export class ExtensionComponent extends Component {
           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.createElement(InlineExtension, {

package/dist/es2019/extensibility/MultiBodiedExtension/index.js CHANGED Viewed

@@ -52,7 +52,9 @@ const MultiBodiedExtensionWithWidth = ({
   widthState,
   editorAppearance,
   showMacroInteractionDesignUpdates,
-  isNodeSelected
+  isNodeSelected,
+  isNodeHovered,
+  setIsNodeHovered
 }) => {
   const {
     parameters,
@@ -114,16 +116,24 @@ const MultiBodiedExtensionWithWidth = ({
   const navigationClassNames = classnames('multiBodiedExtension--navigation', {
     'remove-margins': showMacroInteractionDesignUpdates
   });
+  const handleMouseEvent = didHover => {
+    if (setIsNodeHovered) {
+      setIsNodeHovered(didHover);
+    }
+  };
   return jsx(Fragment, null, showMacroInteractionDesignUpdates && jsx(ExtensionLozenge, {
     isNodeSelected: isNodeSelected,
     node: node,
     showMacroInteractionDesignUpdates: true,
-    customContainerStyles: mbeWrapperStyles
+    customContainerStyles: mbeWrapperStyles,
+    isNodeHovered: isNodeHovered
   }), jsx("div", {
     className: wrapperClassNames,
     css: mbeExtensionWrapperCSS,
     "data-testid": "multiBodiedExtension--wrapper",
-    style: mbeWrapperStyles
+    style: mbeWrapperStyles,
+    onMouseOver: () => handleMouseEvent(true),
+    onMouseLeave: () => handleMouseEvent(false)
   }, getWrapperTitleContent(imageData, title, showMacroInteractionDesignUpdates), jsx("div", {
     className: containerClassNames,
     css: containerCssExtended,

package/dist/es2019/keymaps/index.js CHANGED Viewed

@@ -78,6 +78,8 @@ export const paste = makeKeyMapWithCommon('Paste', 'Mod-v');
 export const altPaste = makeKeyMapWithCommon('Paste', 'Mod-Shift-v');
 export const find = makeKeyMapWithCommon('Find', 'Mod-f');
 export const alignLeft = makeKeyMapWithCommon('Align Left', 'Mod-Shift-l');
+export const alignCenter = makeKeyMapWithCommon('Align Center', 'Mod-Alt-e');
+export const alignRight = makeKeyMapWithCommon('Align Right', 'Mod-Alt-t');
 export const toggleTaskItemCheckbox = makeKeyMapWithCommon('Toggles task item', 'Mod-Alt-Enter');
 export const selectRow = makeKeyMapArrayWithCommon('Select row', ['Mod-Alt-Shift-ArrowLeft', 'Mod-Alt-Shift-ArrowRight']);
 export const selectColumn = makeKeyMapArrayWithCommon('Select column', ['Mod-Alt-Shift-ArrowDown', 'Mod-Alt-Shift-ArrowUp']);

package/dist/es2019/monitoring/error.js CHANGED Viewed

@@ -1,6 +1,6 @@
 const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-const packageVersion = "78.11.6";
+const packageVersion = "78.12.0";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/es2019/preset/plugin-injection-api.js CHANGED Viewed

@@ -220,10 +220,6 @@ export class EditorPluginInjectionAPI {
         }
         const plugin = getPluginByName(prop);
         if (!plugin) {
-          if (process.env.NODE_ENV === 'development') {
-            // eslint-disable-next-line
-            console.warn(`Plugin: ${prop} does not exist`);
-          }
           return undefined;
         }
         const sharedState = sharedStateAPI.createAPI(plugin);

package/dist/es2019/ui/DropList/index.js CHANGED Viewed

@@ -7,7 +7,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
 import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "78.11.6";
+const packageVersion = "78.12.0";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 class DropList extends Component {

package/dist/esm/extensibility/Extension/Extension/index.js CHANGED Viewed

@@ -29,7 +29,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;
@@ -75,8 +77,14 @@ function ExtensionWithPluginState(props) {
     customContainerStyles = breakoutStyles;
   }
   newContentStyles = _objectSpread(_objectSpread({}, newContentStyles), contentWrapper);
+  var handleMouseEvent = function handleMouseEvent(didHover) {
+    if (setIsNodeHovered) {
+      setIsNodeHovered(didHover);
+    }
+  };
   return jsx(Fragment, null, showMacroInteractionDesignUpdates && jsx(ExtensionLozenge, {
     isNodeSelected: isNodeSelected,
+    isNodeHovered: isNodeHovered,
     node: node,
     showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
     customContainerStyles: customContainerStyles
@@ -85,7 +93,13 @@ function ExtensionWithPluginState(props) {
     "data-layout": node.attrs.layout,
     className: classNames,
     css: wrapperStyle,
-    style: customContainerStyles
+    style: customContainerStyles,
+    onMouseOver: function onMouseOver() {
+      return handleMouseEvent(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return handleMouseEvent(false);
+    }
   }, jsx("div", {
     className: "extension-overflow-wrapper ".concat(hasBody ? 'with-body' : '')
   }, jsx("div", {

package/dist/esm/extensibility/Extension/Lozenge.js CHANGED Viewed

@@ -41,6 +41,7 @@ var ExtensionLozenge = /*#__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,
@@ -50,6 +51,7 @@ var ExtensionLozenge = /*#__PURE__*/function (_Component) {
       var title = parameters && parameters.extensionTitle || parameters && parameters.macroMetadata && parameters.macroMetadata.title || extensionKey;
       var isBlockExtension = name === 'extension';
       return jsx(LozengeComponent, {
+        isNodeHovered: isNodeHovered,
         isNodeSelected: isNodeSelected,
         showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
         isBlockExtension: isBlockExtension,

package/dist/esm/extensibility/Extension/LozengeComponent.js CHANGED Viewed

@@ -4,6 +4,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
+import classnames from 'classnames';
 import EditorFileIcon from '@atlaskit/icon/glyph/editor/file';
 import { SimpleTag as Tag } from '@atlaskit/tag';
 import { lozengeWrapper, placeholderFallback, placeholderFallbackParams } from './styles';
@@ -19,12 +20,15 @@ export var 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 = classnames('extension-title', {
+      'show-lozenge': isNodeHovered || isNodeSelected
+    });
     return jsx("div", {
-      className: "extension-title",
+      className: lozengeClassNames,
       css: lozengeWrapper,
       "data-testid": "new-lozenge",
       style: customContainerStyles
@@ -32,20 +36,21 @@ export var LozengeComponent = function LozengeComponent(_ref) {
       text: capitalizedTitle,
       color: isNodeSelected ? 'blueLight' : 'greyLight'
     }));
+  } else {
+    return jsx("div", {
+      "data-testid": "lozenge-fallback",
+      css: placeholderFallback
+    }, lozengeData && !isBlockExtension ? renderImage(_objectSpread({
+      height: ICON_SIZE,
+      width: ICON_SIZE
+    }, lozengeData)) : jsx(EditorFileIcon, {
+      label: title
+    }), jsx("span", {
+      className: "extension-title"
+    }, capitalizedTitle), params && !isBlockExtension && jsx("span", {
+      css: placeholderFallbackParams
+    }, Object.keys(params).map(function (key) {
+      return key && " | ".concat(key, " = ").concat(params[key].value);
+    })));
   }
-  return jsx("div", {
-    "data-testid": "lozenge-fallback",
-    css: placeholderFallback
-  }, lozengeData && !isBlockExtension ? renderImage(_objectSpread({
-    height: ICON_SIZE,
-    width: ICON_SIZE
-  }, lozengeData)) : jsx(EditorFileIcon, {
-    label: title
-  }), jsx("span", {
-    className: "extension-title"
-  }, capitalizedTitle), params && !isBlockExtension && jsx("span", {
-    css: placeholderFallbackParams
-  }, Object.keys(params).map(function (key) {
-    return key && " | ".concat(key, " = ").concat(params[key].value);
-  })));
 };

package/dist/esm/extensibility/Extension/styles.js CHANGED Viewed

@@ -60,6 +60,14 @@ export var lozengeWrapper = 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/esm/extensibility/ExtensionComponent.js CHANGED Viewed

@@ -33,6 +33,11 @@ export var ExtensionComponent = /*#__PURE__*/function (_Component) {
     // memoized to avoid rerender on extension state changes
     _defineProperty(_assertThisInitialized(_this), "getNodeRenderer", memoizeOne(getNodeRenderer));
     _defineProperty(_assertThisInitialized(_this), "getExtensionModuleNodePrivateProps", memoizeOne(getExtensionModuleNodePrivateProps));
+    _defineProperty(_assertThisInitialized(_this), "setIsNodeHovered", function (isHovered) {
+      _this.setState({
+        isNodeHovered: isHovered
+      });
+    });
     _defineProperty(_assertThisInitialized(_this), "setStateFromPromise", function (stateKey, promise) {
       promise && promise.then(function (p) {
         if (!_this.mounted) {
@@ -199,7 +204,9 @@ export var ExtensionComponent = /*#__PURE__*/function (_Component) {
           pluginInjectionApi: pluginInjectionApi,
           editorAppearance: editorAppearance,
           showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
-          isNodeSelected: selectedNode === node
+          isNodeSelected: selectedNode === node,
+          isNodeHovered: this.state.isNodeHovered,
+          setIsNodeHovered: this.setIsNodeHovered
         });
       }
       var extensionHandlerResult = this.tryExtensionHandler(undefined);
@@ -217,7 +224,9 @@ export var ExtensionComponent = /*#__PURE__*/function (_Component) {
             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.createElement(InlineExtension, {

package/dist/esm/extensibility/MultiBodiedExtension/index.js CHANGED Viewed

@@ -55,7 +55,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;
@@ -115,16 +117,28 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref)
   var navigationClassNames = classnames('multiBodiedExtension--navigation', {
     'remove-margins': showMacroInteractionDesignUpdates
   });
+  var handleMouseEvent = function handleMouseEvent(didHover) {
+    if (setIsNodeHovered) {
+      setIsNodeHovered(didHover);
+    }
+  };
   return jsx(Fragment, null, showMacroInteractionDesignUpdates && jsx(ExtensionLozenge, {
     isNodeSelected: isNodeSelected,
     node: node,
     showMacroInteractionDesignUpdates: true,
-    customContainerStyles: mbeWrapperStyles
+    customContainerStyles: mbeWrapperStyles,
+    isNodeHovered: isNodeHovered
   }), jsx("div", {
     className: wrapperClassNames,
     css: 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), jsx("div", {
     className: containerClassNames,
     css: containerCssExtended,

package/dist/esm/keymaps/index.js CHANGED Viewed

@@ -79,6 +79,8 @@ export var paste = makeKeyMapWithCommon('Paste', 'Mod-v');
 export var altPaste = makeKeyMapWithCommon('Paste', 'Mod-Shift-v');
 export var find = makeKeyMapWithCommon('Find', 'Mod-f');
 export var alignLeft = makeKeyMapWithCommon('Align Left', 'Mod-Shift-l');
+export var alignCenter = makeKeyMapWithCommon('Align Center', 'Mod-Alt-e');
+export var alignRight = makeKeyMapWithCommon('Align Right', 'Mod-Alt-t');
 export var toggleTaskItemCheckbox = makeKeyMapWithCommon('Toggles task item', 'Mod-Alt-Enter');
 export var selectRow = makeKeyMapArrayWithCommon('Select row', ['Mod-Alt-Shift-ArrowLeft', 'Mod-Alt-Shift-ArrowRight']);
 export var selectColumn = makeKeyMapArrayWithCommon('Select column', ['Mod-Alt-Shift-ArrowDown', 'Mod-Alt-Shift-ArrowUp']);

package/dist/esm/monitoring/error.js CHANGED Viewed

@@ -6,7 +6,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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) { _defineProperty(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 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.6";
+var packageVersion = "78.12.0";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/esm/preset/plugin-injection-api.js CHANGED Viewed

@@ -292,10 +292,6 @@ export var EditorPluginInjectionAPI = /*#__PURE__*/function () {
           }
           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/esm/ui/DropList/index.js CHANGED Viewed

@@ -17,7 +17,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
 import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "78.11.6";
+var packageVersion = "78.12.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/types/extensibility/Extension/Extension/index.d.ts CHANGED Viewed

@@ -18,6 +18,8 @@ export interface Props {
     pluginInjectionApi: ExtensionsPluginInjectionAPI;
     showMacroInteractionDesignUpdates?: boolean;
     isNodeSelected?: boolean;
+    isNodeHovered?: boolean;
+    setIsNodeHovered?: (isHovered: boolean) => void;
 }
 /**
  * End workaround

package/dist/types/extensibility/Extension/Lozenge.d.ts CHANGED Viewed

@@ -7,6 +7,7 @@ export interface Props {
     node: PmNode;
     showMacroInteractionDesignUpdates?: boolean;
     isNodeSelected?: boolean;
+    isNodeHovered?: boolean;
     customContainerStyles?: CSSProperties;
 }
 export interface LozengeData {

package/dist/types/extensibility/Extension/LozengeComponent.d.ts CHANGED Viewed

@@ -12,6 +12,7 @@ type LozengeComponentProps = {
     isNodeSelected?: boolean;
     showMacroInteractionDesignUpdates?: boolean;
     customContainerStyles?: CSSProperties;
+    isNodeHovered?: boolean;
 };
-export declare const LozengeComponent: ({ lozengeData, isBlockExtension, title, params, renderImage, isNodeSelected, showMacroInteractionDesignUpdates, customContainerStyles, }: LozengeComponentProps) => jsx.JSX.Element;
+export declare const LozengeComponent: ({ lozengeData, isBlockExtension, title, params, renderImage, isNodeSelected, showMacroInteractionDesignUpdates, customContainerStyles, isNodeHovered, }: LozengeComponentProps) => jsx.JSX.Element;
 export {};

package/dist/types/extensibility/ExtensionComponent.d.ts CHANGED Viewed

@@ -27,6 +27,7 @@ export interface State {
         __hideFrame?: boolean;
     };
     activeChildIndex?: number;
+    isNodeHovered?: boolean;
 }
 export declare class ExtensionComponent extends Component<Props, State> {
     private privatePropsParsed;
@@ -39,6 +40,7 @@ export declare class ExtensionComponent extends Component<Props, State> {
     UNSAFE_componentWillReceiveProps(nextProps: Props): void;
     getNodeRenderer: import("memoize-one").MemoizedFn<typeof getNodeRenderer>;
     getExtensionModuleNodePrivateProps: import("memoize-one").MemoizedFn<typeof getExtensionModuleNodePrivateProps>;
+    setIsNodeHovered: (isHovered: boolean) => void;
     render(): JSX.Element | null;
     private setStateFromPromise;
     /**

package/dist/types/extensibility/MultiBodiedExtension/index.d.ts CHANGED Viewed

@@ -20,6 +20,8 @@ type Props = {
     editorAppearance?: EditorAppearance;
     showMacroInteractionDesignUpdates?: boolean;
     isNodeSelected?: boolean;
+    isNodeHovered?: boolean;
+    setIsNodeHovered?: (isHovered: boolean) => void;
 };
 declare const MultiBodiedExtension: (props: Props & OverflowShadowProps) => jsx.JSX.Element;
 /**

package/dist/types/keymaps/index.d.ts CHANGED Viewed

@@ -76,6 +76,8 @@ export declare const paste: Keymap;
 export declare const altPaste: Keymap;
 export declare const find: Keymap;
 export declare const alignLeft: Keymap;
+export declare const alignCenter: Keymap;
+export declare const alignRight: Keymap;
 export declare const toggleTaskItemCheckbox: Keymap;
 export declare const selectRow: Keymap[];
 export declare const selectColumn: Keymap[];

package/dist/types-ts4.5/extensibility/Extension/Extension/index.d.ts CHANGED Viewed

@@ -18,6 +18,8 @@ export interface Props {
     pluginInjectionApi: ExtensionsPluginInjectionAPI;
     showMacroInteractionDesignUpdates?: boolean;
     isNodeSelected?: boolean;
+    isNodeHovered?: boolean;
+    setIsNodeHovered?: (isHovered: boolean) => void;
 }
 /**
  * End workaround

package/dist/types-ts4.5/extensibility/Extension/Lozenge.d.ts CHANGED Viewed

@@ -7,6 +7,7 @@ export interface Props {
     node: PmNode;
     showMacroInteractionDesignUpdates?: boolean;
     isNodeSelected?: boolean;
+    isNodeHovered?: boolean;
     customContainerStyles?: CSSProperties;
 }
 export interface LozengeData {

package/dist/types-ts4.5/extensibility/Extension/LozengeComponent.d.ts CHANGED Viewed

@@ -12,6 +12,7 @@ type LozengeComponentProps = {
     isNodeSelected?: boolean;
     showMacroInteractionDesignUpdates?: boolean;
     customContainerStyles?: CSSProperties;
+    isNodeHovered?: boolean;
 };
-export declare const LozengeComponent: ({ lozengeData, isBlockExtension, title, params, renderImage, isNodeSelected, showMacroInteractionDesignUpdates, customContainerStyles, }: LozengeComponentProps) => jsx.JSX.Element;
+export declare const LozengeComponent: ({ lozengeData, isBlockExtension, title, params, renderImage, isNodeSelected, showMacroInteractionDesignUpdates, customContainerStyles, isNodeHovered, }: LozengeComponentProps) => jsx.JSX.Element;
 export {};

package/dist/types-ts4.5/extensibility/ExtensionComponent.d.ts CHANGED Viewed

@@ -27,6 +27,7 @@ export interface State {
         __hideFrame?: boolean;
     };
     activeChildIndex?: number;
+    isNodeHovered?: boolean;
 }
 export declare class ExtensionComponent extends Component<Props, State> {
     private privatePropsParsed;
@@ -39,6 +40,7 @@ export declare class ExtensionComponent extends Component<Props, State> {
     UNSAFE_componentWillReceiveProps(nextProps: Props): void;
     getNodeRenderer: import("memoize-one").MemoizedFn<typeof getNodeRenderer>;
     getExtensionModuleNodePrivateProps: import("memoize-one").MemoizedFn<typeof getExtensionModuleNodePrivateProps>;
+    setIsNodeHovered: (isHovered: boolean) => void;
     render(): JSX.Element | null;
     private setStateFromPromise;
     /**

package/dist/types-ts4.5/extensibility/MultiBodiedExtension/index.d.ts CHANGED Viewed

@@ -20,6 +20,8 @@ type Props = {
     editorAppearance?: EditorAppearance;
     showMacroInteractionDesignUpdates?: boolean;
     isNodeSelected?: boolean;
+    isNodeHovered?: boolean;
+    setIsNodeHovered?: (isHovered: boolean) => void;
 };
 declare const MultiBodiedExtension: (props: Props & OverflowShadowProps) => jsx.JSX.Element;
 /**

package/dist/types-ts4.5/keymaps/index.d.ts CHANGED Viewed

@@ -76,6 +76,8 @@ export declare const paste: Keymap;
 export declare const altPaste: Keymap;
 export declare const find: Keymap;
 export declare const alignLeft: Keymap;
+export declare const alignCenter: Keymap;
+export declare const alignRight: Keymap;
 export declare const toggleTaskItemCheckbox: Keymap;
 export declare const selectRow: Keymap[];
 export declare const selectColumn: Keymap[];

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-common",
-  "version": "78.11.6",
+  "version": "78.12.0",
   "description": "A package that contains common classes and components for editor and renderer",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -122,11 +122,11 @@
     "@atlaskit/media-file-preview": "^0.5.0",
     "@atlaskit/media-picker": "^66.3.0",
     "@atlaskit/media-ui": "^25.4.0",
-    "@atlaskit/media-viewer": "48.3.5",
+    "@atlaskit/media-viewer": "48.3.6",
     "@atlaskit/mention": "^23.0.0",
     "@atlaskit/menu": "^2.1.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
-    "@atlaskit/primitives": "^4.0.0",
+    "@atlaskit/primitives": "^4.1.0",
     "@atlaskit/profilecard": "^19.11.0",
     "@atlaskit/section-message": "^6.4.0",
     "@atlaskit/smart-card": "^26.49.0",
@@ -134,9 +134,9 @@
     "@atlaskit/spinner": "^16.0.0",
     "@atlaskit/tag": "^12.0.0",
     "@atlaskit/task-decision": "^17.9.0",
-    "@atlaskit/textfield": "^6.0.0",
+    "@atlaskit/textfield": "^6.1.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.39.0",
+    "@atlaskit/tokens": "^1.41.0",
     "@atlaskit/tooltip": "^18.1.0",
     "@atlaskit/ufo": "^0.2.0",
     "@atlaskit/width-detector": "^4.1.0",