@atlaskit/editor-common 78.8.4 → 78.9.0

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

@@ -0,0 +1,45 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import EditorFileIcon from '@atlaskit/icon/glyph/editor/file';
+import { SimpleTag as Tag } from '@atlaskit/tag';
+import { lozengeWrapper, placeholderFallback, placeholderFallbackParams } from './styles';
+export const ICON_SIZE = 24;
+const capitalizeFirstLetter = str => {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+};
+export const LozengeComponent = ({
+  lozengeData,
+  isBlockExtension,
+  title,
+  params,
+  renderImage,
+  isNodeSelected,
+  showMacroInteractionDesignUpdates
+}) => {
+  const capitalizedTitle = capitalizeFirstLetter(title);
+  // TODO: only show on lozenge on hover: https://product-fabric.atlassian.net/browse/PGXT-4945
+  if (showMacroInteractionDesignUpdates) {
+    return jsx("div", {
+      className: "extension-title",
+      css: lozengeWrapper,
+      "data-testid": "new-lozenge"
+    }, jsx(Tag, {
+      text: capitalizedTitle,
+      color: isNodeSelected ? 'blueLight' : 'greyLight'
+    }));
+  }
+  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

@@ -40,6 +40,7 @@ export const placeholderFallback = css`
   & > img {
     margin: 0 ${"var(--ds-space-050, 4px)"};
   }
+
   /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */
   /* stylelint-disable-next-line */
   label: placeholder-fallback;
@@ -59,4 +60,10 @@ export const styledImage = css`
   /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */
   /* stylelint-disable-next-line */
   label: lozenge-image;
+`;
+export const lozengeWrapper = css`
+  display: flex;
+  justify-content: left;
+  width: 100%;
+  margin-left: ${"var(--ds-space-050, 4px)"};
 `;

package/dist/es2019/extensibility/ExtensionComponent.js

@@ -1,6 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { Component } from 'react';
 import memoizeOne from 'memoize-one';
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { getExtensionModuleNodePrivateProps, getNodeRenderer } from '../extensions';
 import { getExtensionRenderer } from '../utils';
 import Extension from './Extension/Extension';
@@ -148,6 +149,10 @@ export class ExtensionComponent extends Component {
       eventDispatcher,
       showMacroInteractionDesignUpdates
     } = this.props;
+    const {
+      selection
+    } = editorView.state;
+    const selectedNode = selection instanceof NodeSelection && selection.node;
     if (node.type.name === 'multiBodiedExtension') {
       return /*#__PURE__*/React.createElement(MultiBodiedExtension, {
         node: node,
@@ -175,12 +180,14 @@ export class ExtensionComponent extends Component {
           editorAppearance: editorAppearance,
           hideFrame: (_this$state$_privateP = this.state._privateProps) === null || _this$state$_privateP === void 0 ? void 0 : _this$state$_privateP.__hideFrame,
           pluginInjectionApi: pluginInjectionApi,
-          showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
+          showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
+          isNodeSelected: selectedNode === node
         }, extensionHandlerResult);
       case 'inlineExtension':
         return /*#__PURE__*/React.createElement(InlineExtension, {
           node: node,
-          showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
+          showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
+          isNodeSelected: selectedNode === node
         }, extensionHandlerResult);
       default:
         return null;

package/dist/es2019/i18n/en.js

@@ -301,7 +301,7 @@ export default {
   'fabric.editor.pageActionsLabel': 'Page actions',
   'fabric.editor.panel.backgroundColor': 'Background color',
   'fabric.editor.panel.emoji': 'Add emoji',
-  'fabric.editor.pasteOptions': 'Paste options floating controls',
+  'fabric.editor.pasteOptions': 'Paste options',
   'fabric.editor.pastePlainText': 'Paste plain text',
   'fabric.editor.placeholderAltText': 'Describe this image with alt text',
   'fabric.editor.placeholderText': 'Placeholder text',

package/dist/es2019/i18n/en_GB.js

@@ -301,7 +301,7 @@ export default {
   'fabric.editor.pageActionsLabel': 'Page actions',
   'fabric.editor.panel.backgroundColor': 'Background colour',
   'fabric.editor.panel.emoji': 'Add emoji',
-  'fabric.editor.pasteOptions': 'Paste options floating controls',
+  'fabric.editor.pasteOptions': 'Paste options',
   'fabric.editor.pastePlainText': 'Paste plain text',
   'fabric.editor.placeholderAltText': 'Describe this image with alt text',
   'fabric.editor.placeholderText': 'Placeholder text',

package/dist/es2019/i18n/en_ZZ.js

@@ -301,7 +301,7 @@ export default {
   'fabric.editor.pageActionsLabel': '⁣⁢Page actions‌؜؜؜‍⁡‍؜‌‍⁣⁤',
   'fabric.editor.panel.backgroundColor': '⁣⁢Background color‍‌⁠⁠‌‌‍‍⁠⁠⁣⁤',
   'fabric.editor.panel.emoji': '⁣⁢Add emoji⁠؜‍‍‌⁠؜⁠؜؜‍⁣⁤',
-  'fabric.editor.pasteOptions': '⁣⁢Paste options floating controls‌⁠‌⁠⁡⁡⁡‍؜⁠؜؜⁣⁤',
+  'fabric.editor.pasteOptions': 'Paste options⁠‌⁠⁡⁡⁡‍؜⁠؜؜⁣⁤',
   'fabric.editor.pastePlainText': '⁣⁢Paste plain text؜؜‍‌‌⁡‍‌⁠‌‍‌⁣⁤',
   'fabric.editor.placeholderAltText': '⁣⁢Describe this image with alt text؜⁠‌‌⁡‍‍‌⁠؜‍‌⁣⁤',
   'fabric.editor.placeholderText': '⁣⁢Placeholder text⁠؜‌؜‌‌‌‌⁠‍⁣⁤',

package/dist/es2019/messages/paste-options-toolbar.js

@@ -2,7 +2,7 @@ import { defineMessages } from 'react-intl-next';
 export const pasteOptionsToolbarMessages = defineMessages({
   pasteOptions: {
     id: 'fabric.editor.pasteOptions',
-    defaultMessage: 'Paste options floating controls',
+    defaultMessage: 'Paste options',
     description: 'Opens a menu with additional paste options'
   },
   plainText: {

package/dist/es2019/monitoring/error.js

@@ -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.8.4";
+const packageVersion = "78.9.0";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

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

@@ -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.8.4";
+const packageVersion = "78.9.0";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 class DropList extends Component {

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

@@ -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; }
 /** @jsx jsx */
 
-import React from 'react';
+import React, { Fragment } from 'react';
 import { jsx } from '@emotion/react';
 import classnames from 'classnames';
 import { WithPluginState } from '../../..//with-plugin-state';
@@ -27,11 +27,13 @@ function ExtensionWithPluginState(props) {
     handleRef = props.handleRef,
     shadowClassNames = props.shadowClassNames,
     hideFrame = props.hideFrame,
-    editorAppearance = props.editorAppearance;
+    editorAppearance = props.editorAppearance,
+    showMacroInteractionDesignUpdates = props.showMacroInteractionDesignUpdates,
+    isNodeSelected = props.isNodeSelected;
   var hasBody = ['bodiedExtension', 'multiBodiedExtension'].includes(node.type.name);
   var isMobile = editorAppearance === 'mobile';
   var hasChildren = !!children;
-  var removeBorder = hideFrame && !isMobile && !hasBody || false;
+  var removeBorder = showMacroInteractionDesignUpdates || !!(hideFrame && !isMobile && !hasBody);
   var getPos = props.getPos,
     view = props.view;
   var isTopLevelNode = React.useMemo(function () {
@@ -70,7 +72,11 @@ function ExtensionWithPluginState(props) {
     customContainerStyles = breakoutStyles;
   }
   newContentStyles = _objectSpread(_objectSpread({}, newContentStyles), contentWrapper);
-  return jsx("div", {
+  return jsx(Fragment, null, showMacroInteractionDesignUpdates && jsx(ExtensionLozenge, {
+    isNodeSelected: isNodeSelected,
+    node: node,
+    showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
+  }), jsx("div", {
     ref: handleRef,
     "data-layout": node.attrs.layout,
     className: classNames,
@@ -86,14 +92,16 @@ function ExtensionWithPluginState(props) {
     contentEditable: false,
     className: headerClassNames
   }, !removeBorder && jsx(ExtensionLozenge, {
-    node: node
+    isNodeSelected: isNodeSelected,
+    node: node,
+    showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
   }), children), hasBody && jsx("div", {
     css: newContentStyles
   }, jsx("div", {
     css: content,
     ref: handleContentDOMRef,
     className: "extension-content block"
-  }))));
+  })))));
 }
 var Extension = function Extension(props) {
   // TODO: ED-17836 This code is here because confluence injects

package/dist/esm/extensibility/Extension/InlineExtension/index.js

@@ -6,8 +6,7 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 /** @jsx jsx */
-import React from 'react';
-import { Component } from 'react';
+import React, { Component } from 'react';
 import { jsx } from '@emotion/react';
 import ExtensionLozenge from '../Lozenge';
 import { overlay } from '../styles';
@@ -24,7 +23,9 @@ var InlineExtension = /*#__PURE__*/function (_Component) {
     value: function render() {
       var _this$props = this.props,
         node = _this$props.node,
-        children = _this$props.children;
+        children = _this$props.children,
+        showMacroInteractionDesignUpdates = _this$props.showMacroInteractionDesignUpdates,
+        isNodeSelected = _this$props.isNodeSelected;
       var hasChildren = !!children;
       var className = hasChildren ? 'with-overlay with-children' : 'with-overlay';
       return jsx("div", {
@@ -34,7 +35,9 @@ var InlineExtension = /*#__PURE__*/function (_Component) {
         css: overlay,
         className: "extension-overlay"
       }), children ? children : jsx(ExtensionLozenge, {
-        node: node
+        node: node,
+        isNodeSelected: isNodeSelected,
+        showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
       }));
     }
   }]);

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

@@ -1,32 +1,64 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["url"];
-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) { _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; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 /** @jsx jsx */
 import { Component } from 'react';
 import { jsx } from '@emotion/react';
-import EditorFileIcon from '@atlaskit/icon/glyph/editor/file';
 import { getExtensionLozengeData } from '../../utils';
-import { placeholderFallback, placeholderFallbackParams, styledImage } from './styles';
-export var capitalizeFirstLetter = function capitalizeFirstLetter(str) {
-  return str.charAt(0).toUpperCase() + str.slice(1);
-};
-export var ICON_SIZE = 24;
+import { LozengeComponent } from './LozengeComponent';
+import { styledImage } from './styles';
 var ExtensionLozenge = /*#__PURE__*/function (_Component) {
   _inherits(ExtensionLozenge, _Component);
   var _super = _createSuper(ExtensionLozenge);
   function ExtensionLozenge() {
+    var _this;
     _classCallCheck(this, ExtensionLozenge);
-    return _super.apply(this, arguments);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "renderImage", function (lozengeData) {
+      var extensionKey = _this.props.node.attrs.extensionKey;
+      var url = lozengeData.url,
+        rest = _objectWithoutProperties(lozengeData, _excluded);
+      return jsx("img", _extends({
+        css: styledImage,
+        src: url
+      }, rest, {
+        alt: extensionKey
+      }));
+    });
+    _defineProperty(_assertThisInitialized(_this), "renderFallback", function (lozengeData) {
+      var _this$props = _this.props,
+        showMacroInteractionDesignUpdates = _this$props.showMacroInteractionDesignUpdates,
+        isNodeSelected = _this$props.isNodeSelected;
+      var _this$props$node$attr = _this.props.node.attrs,
+        parameters = _this$props$node$attr.parameters,
+        extensionKey = _this$props$node$attr.extensionKey;
+      var name = _this.props.node.type.name;
+      var params = parameters && parameters.macroParams;
+      var title = parameters && parameters.extensionTitle || parameters && parameters.macroMetadata && parameters.macroMetadata.title || extensionKey;
+      var isBlockExtension = name === 'extension';
+      return jsx(LozengeComponent, {
+        isNodeSelected: isNodeSelected,
+        showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
+        isBlockExtension: isBlockExtension,
+        lozengeData: lozengeData,
+        params: params,
+        title: title,
+        renderImage: _this.renderImage
+      });
+    });
+    return _this;
   }
   _createClass(ExtensionLozenge, [{
     key: "render",
@@ -45,45 +77,6 @@ var ExtensionLozenge = /*#__PURE__*/function (_Component) {
       });
       return this.renderFallback(iconData);
     }
-  }, {
-    key: "renderImage",
-    value: function renderImage(lozengeData) {
-      var extensionKey = this.props.node.attrs.extensionKey;
-      var url = lozengeData.url,
-        rest = _objectWithoutProperties(lozengeData, _excluded);
-      return jsx("img", _extends({
-        css: styledImage,
-        src: url
-      }, rest, {
-        alt: extensionKey
-      }));
-    }
-  }, {
-    key: "renderFallback",
-    value: function renderFallback(lozengeData) {
-      var _this$props$node$attr = this.props.node.attrs,
-        parameters = _this$props$node$attr.parameters,
-        extensionKey = _this$props$node$attr.extensionKey;
-      var name = this.props.node.type.name;
-      var params = parameters && parameters.macroParams;
-      var title = parameters && parameters.extensionTitle || parameters && parameters.macroMetadata && parameters.macroMetadata.title || extensionKey;
-      var isBlockExtension = name === 'extension';
-      return jsx("div", {
-        "data-testid": "lozenge-fallback",
-        css: placeholderFallback
-      }, lozengeData && !isBlockExtension ? this.renderImage(_objectSpread({
-        height: ICON_SIZE,
-        width: ICON_SIZE
-      }, lozengeData)) : jsx(EditorFileIcon, {
-        label: title
-      }), jsx("span", {
-        className: "extension-title"
-      }, capitalizeFirstLetter(title)), params && !isBlockExtension && jsx("span", {
-        css: placeholderFallbackParams
-      }, Object.keys(params).map(function (key) {
-        return key && " | ".concat(key, " = ").concat(params[key].value);
-      })));
-    }
   }]);
   return ExtensionLozenge;
 }(Component);

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

@@ -0,0 +1,48 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _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; }
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import EditorFileIcon from '@atlaskit/icon/glyph/editor/file';
+import { SimpleTag as Tag } from '@atlaskit/tag';
+import { lozengeWrapper, placeholderFallback, placeholderFallbackParams } from './styles';
+export var ICON_SIZE = 24;
+var capitalizeFirstLetter = function capitalizeFirstLetter(str) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+};
+export var LozengeComponent = function LozengeComponent(_ref) {
+  var lozengeData = _ref.lozengeData,
+    isBlockExtension = _ref.isBlockExtension,
+    title = _ref.title,
+    params = _ref.params,
+    renderImage = _ref.renderImage,
+    isNodeSelected = _ref.isNodeSelected,
+    showMacroInteractionDesignUpdates = _ref.showMacroInteractionDesignUpdates;
+  var capitalizedTitle = capitalizeFirstLetter(title);
+  // TODO: only show on lozenge on hover: https://product-fabric.atlassian.net/browse/PGXT-4945
+  if (showMacroInteractionDesignUpdates) {
+    return jsx("div", {
+      className: "extension-title",
+      css: lozengeWrapper,
+      "data-testid": "new-lozenge"
+    }, jsx(Tag, {
+      text: capitalizedTitle,
+      color: isNodeSelected ? 'blueLight' : 'greyLight'
+    }));
+  }
+  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

@@ -1,11 +1,12 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 import { css } from '@emotion/react';
 import { B200, N20, N20A, N70 } from '@atlaskit/theme/colors';
 import { BODIED_EXT_PADDING, EXTENSION_PADDING } from '../../styles';
 export { EXTENSION_PADDING as padding, BODIED_EXT_PADDING };
 export var wrapperDefault = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: ", ";\n  border-radius: ", ";\n  position: relative;\n  vertical-align: middle;\n\n  .ProseMirror-selectednode > span > & > .extension-overlay {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n    opacity: 1;\n  }\n\n  &.with-overlay {\n    .extension-overlay {\n      background: ", ";\n      color: transparent;\n    }\n\n    &:hover .extension-overlay {\n      opacity: 1;\n    }\n  }\n"])), "var(--ds-background-neutral, ".concat(N20, ")"), "var(--ds-border-radius, 3px)", "var(--ds-border-selected, ".concat(B200, ")"), "var(--ds-background-neutral-hovered, ".concat(N20A, ")"));
 export var overlay = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  border-radius: ", ";\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.3s;\n"])), "var(--ds-border-radius, 3px)");
-export var placeholderFallback = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: inline-flex;\n  align-items: center;\n\n  & > img {\n    margin: 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: placeholder-fallback;\n"])), "var(--ds-space-050, 4px)");
+export var placeholderFallback = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: inline-flex;\n  align-items: center;\n\n  & > img {\n    margin: 0 ", ";\n  }\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: placeholder-fallback;\n"])), "var(--ds-space-050, 4px)");
 export var placeholderFallbackParams = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: inline-block;\n  max-width: 200px;\n  margin-left: 5px;\n  color: ", ";\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n"])), "var(--ds-text-subtlest, ".concat(N70, ")"));
-export var styledImage = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  max-height: 16px;\n  max-width: 16px;\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: lozenge-image;\n"])));
+export var styledImage = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  max-height: 16px;\n  max-width: 16px;\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: lozenge-image;\n"])));
+export var lozengeWrapper = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: left;\n  width: 100%;\n  margin-left: ", ";\n"])), "var(--ds-space-050, 4px)");

package/dist/esm/extensibility/ExtensionComponent.js

@@ -11,6 +11,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 import React, { Component } from 'react';
 import memoizeOne from 'memoize-one';
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { getExtensionModuleNodePrivateProps, getNodeRenderer } from '../extensions';
 import { getExtensionRenderer } from '../utils';
 import Extension from './Extension/Extension';
@@ -185,6 +186,8 @@ export var ExtensionComponent = /*#__PURE__*/function (_Component) {
         getPos = _this$props2.getPos,
         eventDispatcher = _this$props2.eventDispatcher,
         showMacroInteractionDesignUpdates = _this$props2.showMacroInteractionDesignUpdates;
+      var selection = editorView.state.selection;
+      var selectedNode = selection instanceof NodeSelection && selection.node;
       if (node.type.name === 'multiBodiedExtension') {
         return /*#__PURE__*/React.createElement(MultiBodiedExtension, {
           node: node,
@@ -212,12 +215,14 @@ export var ExtensionComponent = /*#__PURE__*/function (_Component) {
             editorAppearance: editorAppearance,
             hideFrame: (_this$state$_privateP = this.state._privateProps) === null || _this$state$_privateP === void 0 ? void 0 : _this$state$_privateP.__hideFrame,
             pluginInjectionApi: pluginInjectionApi,
-            showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
+            showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
+            isNodeSelected: selectedNode === node
           }, extensionHandlerResult);
         case 'inlineExtension':
           return /*#__PURE__*/React.createElement(InlineExtension, {
             node: node,
-            showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
+            showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
+            isNodeSelected: selectedNode === node
           }, extensionHandlerResult);
         default:
           return null;

package/dist/esm/i18n/en.js

@@ -301,7 +301,7 @@ export default {
   'fabric.editor.pageActionsLabel': 'Page actions',
   'fabric.editor.panel.backgroundColor': 'Background color',
   'fabric.editor.panel.emoji': 'Add emoji',
-  'fabric.editor.pasteOptions': 'Paste options floating controls',
+  'fabric.editor.pasteOptions': 'Paste options',
   'fabric.editor.pastePlainText': 'Paste plain text',
   'fabric.editor.placeholderAltText': 'Describe this image with alt text',
   'fabric.editor.placeholderText': 'Placeholder text',

package/dist/esm/i18n/en_GB.js

@@ -301,7 +301,7 @@ export default {
   'fabric.editor.pageActionsLabel': 'Page actions',
   'fabric.editor.panel.backgroundColor': 'Background colour',
   'fabric.editor.panel.emoji': 'Add emoji',
-  'fabric.editor.pasteOptions': 'Paste options floating controls',
+  'fabric.editor.pasteOptions': 'Paste options',
   'fabric.editor.pastePlainText': 'Paste plain text',
   'fabric.editor.placeholderAltText': 'Describe this image with alt text',
   'fabric.editor.placeholderText': 'Placeholder text',

package/dist/esm/i18n/en_ZZ.js

@@ -301,7 +301,7 @@ export default {
   'fabric.editor.pageActionsLabel': '⁣⁢Page actions‌؜؜؜‍⁡‍؜‌‍⁣⁤',
   'fabric.editor.panel.backgroundColor': '⁣⁢Background color‍‌⁠⁠‌‌‍‍⁠⁠⁣⁤',
   'fabric.editor.panel.emoji': '⁣⁢Add emoji⁠؜‍‍‌⁠؜⁠؜؜‍⁣⁤',
-  'fabric.editor.pasteOptions': '⁣⁢Paste options floating controls‌⁠‌⁠⁡⁡⁡‍؜⁠؜؜⁣⁤',
+  'fabric.editor.pasteOptions': 'Paste options⁠‌⁠⁡⁡⁡‍؜⁠؜؜⁣⁤',
   'fabric.editor.pastePlainText': '⁣⁢Paste plain text؜؜‍‌‌⁡‍‌⁠‌‍‌⁣⁤',
   'fabric.editor.placeholderAltText': '⁣⁢Describe this image with alt text؜⁠‌‌⁡‍‍‌⁠؜‍‌⁣⁤',
   'fabric.editor.placeholderText': '⁣⁢Placeholder text⁠؜‌؜‌‌‌‌⁠‍⁣⁤',

package/dist/esm/messages/paste-options-toolbar.js

@@ -2,7 +2,7 @@ import { defineMessages } from 'react-intl-next';
 export var pasteOptionsToolbarMessages = defineMessages({
   pasteOptions: {
     id: 'fabric.editor.pasteOptions',
-    defaultMessage: 'Paste options floating controls',
+    defaultMessage: 'Paste options',
     description: 'Opens a menu with additional paste options'
   },
   plainText: {

package/dist/esm/monitoring/error.js

@@ -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.8.4";
+var packageVersion = "78.9.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/ui/DropList/index.js

@@ -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.8.4";
+var packageVersion = "78.9.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

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

@@ -17,6 +17,7 @@ export interface Props {
     editorAppearance?: EditorAppearance;
     pluginInjectionApi: ExtensionsPluginInjectionAPI;
     showMacroInteractionDesignUpdates?: boolean;
+    isNodeSelected?: boolean;
 }
 /**
  * End workaround

package/dist/types/extensibility/Extension/InlineExtension/index.d.ts

@@ -1,12 +1,12 @@
 /** @jsx jsx */
-import React from 'react';
-import { Component } from 'react';
+import React, { Component } from 'react';
 import { jsx } from '@emotion/react';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 export interface Props {
     node: PmNode;
     children?: React.ReactNode;
     showMacroInteractionDesignUpdates?: boolean;
+    isNodeSelected?: boolean;
 }
 export default class InlineExtension extends Component<Props, any> {
     render(): jsx.JSX.Element;

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

@@ -2,11 +2,16 @@
 import { Component } from 'react';
 import { jsx } from '@emotion/react';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
-export declare const capitalizeFirstLetter: (str: string) => string;
 export interface Props {
     node: PmNode;
+    showMacroInteractionDesignUpdates?: boolean;
+    isNodeSelected?: boolean;
+}
+export interface LozengeData {
+    url: string;
+    height?: number;
+    width?: number;
 }
-export declare const ICON_SIZE = 24;
 export default class ExtensionLozenge extends Component<Props, any> {
     render(): jsx.JSX.Element;
     private renderImage;

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

@@ -0,0 +1,15 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import type { LozengeData } from './Lozenge';
+export declare const ICON_SIZE = 24;
+type LozengeComponentProps = {
+    lozengeData?: LozengeData;
+    isBlockExtension: boolean;
+    title: string;
+    params: any;
+    renderImage: (lozengeData: LozengeData) => void;
+    isNodeSelected?: boolean;
+    showMacroInteractionDesignUpdates?: boolean;
+};
+export declare const LozengeComponent: ({ lozengeData, isBlockExtension, title, params, renderImage, isNodeSelected, showMacroInteractionDesignUpdates, }: LozengeComponentProps) => jsx.JSX.Element;
+export {};

package/dist/types/extensibility/Extension/styles.d.ts

@@ -5,3 +5,4 @@ export declare const overlay: import("@emotion/react").SerializedStyles;
 export declare const placeholderFallback: import("@emotion/react").SerializedStyles;
 export declare const placeholderFallbackParams: import("@emotion/react").SerializedStyles;
 export declare const styledImage: import("@emotion/react").SerializedStyles;
+export declare const lozengeWrapper: import("@emotion/react").SerializedStyles;

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

@@ -17,6 +17,7 @@ export interface Props {
     editorAppearance?: EditorAppearance;
     pluginInjectionApi: ExtensionsPluginInjectionAPI;
     showMacroInteractionDesignUpdates?: boolean;
+    isNodeSelected?: boolean;
 }
 /**
  * End workaround

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

@@ -1,12 +1,12 @@
 /** @jsx jsx */
-import React from 'react';
-import { Component } from 'react';
+import React, { Component } from 'react';
 import { jsx } from '@emotion/react';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 export interface Props {
     node: PmNode;
     children?: React.ReactNode;
     showMacroInteractionDesignUpdates?: boolean;
+    isNodeSelected?: boolean;
 }
 export default class InlineExtension extends Component<Props, any> {
     render(): jsx.JSX.Element;