@atlaskit/editor-common 78.8.4 → 78.9.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-common
 
+## 78.9.0
+
+### Minor Changes
+
+- [#77158](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/77158) [`4a5f437bd464`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4a5f437bd464) - [ux] Adds initial changes to extension lozenges for the macro visual design updates project in Confluence.
+
+## 78.8.5
+
+### Patch Changes
+
+- [#77651](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/77651) [`25b3713456e7`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/25b3713456e7) - ED-22342 Updated tooltip for paste option toolbar
+
 ## 78.8.4
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -120,6 +120,9 @@
         {
             "path": "../../../design-system/spinner/afm-cc/tsconfig.json"
         },
+        {
+            "path": "../../../design-system/tag/afm-cc/tsconfig.json"
+        },
         {
             "path": "../../../elements/task-decision/afm-cc/tsconfig.json"
         },

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

@@ -1,6 +1,7 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -8,7 +9,7 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _classnames2 = _interopRequireDefault(require("classnames"));
 var _withPluginState = require("../../..//with-plugin-state");
@@ -20,6 +21,8 @@ var _styles = require("../styles");
 var _styles2 = require("./styles");
 var _excluded = ["type"];
 /** @jsx jsx */
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function ExtensionWithPluginState(props) {
@@ -33,11 +36,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.default.useMemo(function () {
@@ -76,7 +81,11 @@ function ExtensionWithPluginState(props) {
     customContainerStyles = breakoutStyles;
   }
   newContentStyles = _objectSpread(_objectSpread({}, newContentStyles), _styles2.contentWrapper);
-  return (0, _react2.jsx)("div", {
+  return (0, _react2.jsx)(_react.Fragment, null, showMacroInteractionDesignUpdates && (0, _react2.jsx)(_Lozenge.default, {
+    isNodeSelected: isNodeSelected,
+    node: node,
+    showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
+  }), (0, _react2.jsx)("div", {
     ref: handleRef,
     "data-layout": node.attrs.layout,
     className: classNames,
@@ -92,14 +101,16 @@ function ExtensionWithPluginState(props) {
     contentEditable: false,
     className: headerClassNames
   }, !removeBorder && (0, _react2.jsx)(_Lozenge.default, {
-    node: node
+    isNodeSelected: isNodeSelected,
+    node: node,
+    showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
   }), children), hasBody && (0, _react2.jsx)("div", {
     css: newContentStyles
   }, (0, _react2.jsx)("div", {
     css: _styles2.content,
     ref: handleContentDOMRef,
     className: "extension-content block"
-  }))));
+  })))));
 }
 var Extension = function Extension(props) {
   // TODO: ED-17836 This code is here because confluence injects

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

@@ -32,7 +32,9 @@ var InlineExtension = exports.default = /*#__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 (0, _react2.jsx)("div", {
@@ -42,7 +44,9 @@ var InlineExtension = exports.default = /*#__PURE__*/function (_Component) {
         css: _styles.overlay,
         className: "extension-overlay"
       }), children ? children : (0, _react2.jsx)(_Lozenge.default, {
-        node: node
+        node: node,
+        isNodeSelected: isNodeSelected,
+        showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
       }));
     }
   }]);

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

@@ -4,35 +4,67 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.capitalizeFirstLetter = exports.ICON_SIZE = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
-var _file = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/file"));
 var _utils = require("../../utils");
+var _LozengeComponent = require("./LozengeComponent");
 var _styles = require("./styles");
 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) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { 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 */
-var capitalizeFirstLetter = exports.capitalizeFirstLetter = function capitalizeFirstLetter(str) {
-  return str.charAt(0).toUpperCase() + str.slice(1);
-};
-var ICON_SIZE = exports.ICON_SIZE = 24;
 var ExtensionLozenge = exports.default = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(ExtensionLozenge, _Component);
   var _super = _createSuper(ExtensionLozenge);
   function ExtensionLozenge() {
+    var _this;
     (0, _classCallCheck2.default)(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));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderImage", function (lozengeData) {
+      var extensionKey = _this.props.node.attrs.extensionKey;
+      var url = lozengeData.url,
+        rest = (0, _objectWithoutProperties2.default)(lozengeData, _excluded);
+      return (0, _react2.jsx)("img", (0, _extends2.default)({
+        css: _styles.styledImage,
+        src: url
+      }, rest, {
+        alt: extensionKey
+      }));
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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 (0, _react2.jsx)(_LozengeComponent.LozengeComponent, {
+        isNodeSelected: isNodeSelected,
+        showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
+        isBlockExtension: isBlockExtension,
+        lozengeData: lozengeData,
+        params: params,
+        title: title,
+        renderImage: _this.renderImage
+      });
+    });
+    return _this;
   }
   (0, _createClass2.default)(ExtensionLozenge, [{
     key: "render",
@@ -51,45 +83,6 @@ var ExtensionLozenge = exports.default = /*#__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 = (0, _objectWithoutProperties2.default)(lozengeData, _excluded);
-      return (0, _react2.jsx)("img", (0, _extends2.default)({
-        css: _styles.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 (0, _react2.jsx)("div", {
-        "data-testid": "lozenge-fallback",
-        css: _styles.placeholderFallback
-      }, lozengeData && !isBlockExtension ? this.renderImage(_objectSpread({
-        height: ICON_SIZE,
-        width: ICON_SIZE
-      }, lozengeData)) : (0, _react2.jsx)(_file.default, {
-        label: title
-      }), (0, _react2.jsx)("span", {
-        className: "extension-title"
-      }, capitalizeFirstLetter(title)), params && !isBlockExtension && (0, _react2.jsx)("span", {
-        css: _styles.placeholderFallbackParams
-      }, Object.keys(params).map(function (key) {
-        return key && " | ".concat(key, " = ").concat(params[key].value);
-      })));
-    }
   }]);
   return ExtensionLozenge;
 }(_react.Component);

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

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LozengeComponent = exports.ICON_SIZE = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("@emotion/react");
+var _file = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/file"));
+var _tag = require("@atlaskit/tag");
+var _styles = require("./styles");
+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; } /** @jsx jsx */
+var ICON_SIZE = exports.ICON_SIZE = 24;
+var capitalizeFirstLetter = function capitalizeFirstLetter(str) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+};
+var LozengeComponent = exports.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 (0, _react.jsx)("div", {
+      className: "extension-title",
+      css: _styles.lozengeWrapper,
+      "data-testid": "new-lozenge"
+    }, (0, _react.jsx)(_tag.SimpleTag, {
+      text: capitalizedTitle,
+      color: isNodeSelected ? 'blueLight' : 'greyLight'
+    }));
+  }
+  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

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "BODIED_EXT_PADDING", {
     return _styles.BODIED_EXT_PADDING;
   }
 });
-exports.overlay = void 0;
+exports.overlay = exports.lozengeWrapper = void 0;
 Object.defineProperty(exports, "padding", {
   enumerable: true,
   get: function get() {
@@ -22,9 +22,10 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
 var _styles = require("../../styles");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 var wrapperDefault = exports.wrapperDefault = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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(_colors.N20, ")"), "var(--ds-border-radius, 3px)", "var(--ds-border-selected, ".concat(_colors.B200, ")"), "var(--ds-background-neutral-hovered, ".concat(_colors.N20A, ")"));
 var overlay = exports.overlay = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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)");
-var placeholderFallback = exports.placeholderFallback = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\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)");
+var placeholderFallback = exports.placeholderFallback = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\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)");
 var placeholderFallbackParams = exports.placeholderFallbackParams = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\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(_colors.N70, ")"));
-var styledImage = exports.styledImage = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\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"])));
+var styledImage = exports.styledImage = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\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"])));
+var lozengeWrapper = exports.lozengeWrapper = (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: left;\n  width: 100%;\n  margin-left: ", ";\n"])), "var(--ds-space-050, 4px)");

package/dist/cjs/extensibility/ExtensionComponent.js

@@ -17,6 +17,7 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
+var _state = require("@atlaskit/editor-prosemirror/state");
 var _extensions = require("../extensions");
 var _utils = require("../utils");
 var _Extension = _interopRequireDefault(require("./Extension/Extension"));
@@ -195,6 +196,8 @@ var ExtensionComponent = exports.ExtensionComponent = /*#__PURE__*/function (_Co
         getPos = _this$props2.getPos,
         eventDispatcher = _this$props2.eventDispatcher,
         showMacroInteractionDesignUpdates = _this$props2.showMacroInteractionDesignUpdates;
+      var selection = editorView.state.selection;
+      var selectedNode = selection instanceof _state.NodeSelection && selection.node;
       if (node.type.name === 'multiBodiedExtension') {
         return /*#__PURE__*/_react.default.createElement(_MultiBodiedExtension.default, {
           node: node,
@@ -222,12 +225,14 @@ var ExtensionComponent = exports.ExtensionComponent = /*#__PURE__*/function (_Co
             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.default.createElement(_InlineExtension.default, {
             node: node,
-            showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
+            showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
+            isNodeSelected: selectedNode === node
           }, extensionHandlerResult);
         default:
           return null;

package/dist/cjs/i18n/en.js

@@ -307,7 +307,7 @@ var _default = exports.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/cjs/i18n/en_GB.js

@@ -307,7 +307,7 @@ var _default = exports.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/cjs/i18n/en_ZZ.js

@@ -307,7 +307,7 @@ var _default = exports.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/cjs/messages/paste-options-toolbar.js

@@ -8,7 +8,7 @@ var _reactIntlNext = require("react-intl-next");
 var pasteOptionsToolbarMessages = exports.pasteOptionsToolbarMessages = (0, _reactIntlNext.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/cjs/monitoring/error.js

@@ -16,7 +16,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 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/cjs/ui/DropList/index.js

@@ -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() { 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 */
 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/es2019/extensibility/Extension/Extension/index.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @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';
@@ -22,12 +22,14 @@ function ExtensionWithPluginState(props) {
     handleRef,
     shadowClassNames,
     hideFrame,
-    editorAppearance
+    editorAppearance,
+    showMacroInteractionDesignUpdates,
+    isNodeSelected
   } = props;
   const hasBody = ['bodiedExtension', 'multiBodiedExtension'].includes(node.type.name);
   const isMobile = editorAppearance === 'mobile';
   const hasChildren = !!children;
-  const removeBorder = hideFrame && !isMobile && !hasBody || false;
+  const removeBorder = showMacroInteractionDesignUpdates || !!(hideFrame && !isMobile && !hasBody);
   const {
     getPos,
     view
@@ -75,7 +77,11 @@ function ExtensionWithPluginState(props) {
     ...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,
@@ -91,14 +97,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"
-  }))));
+  })))));
 }
 const Extension = props => {
   // TODO: ED-17836 This code is here because confluence injects

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

@@ -1,6 +1,5 @@
 /** @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';
@@ -9,7 +8,9 @@ export default class InlineExtension extends Component {
   render() {
     const {
       node,
-      children
+      children,
+      showMacroInteractionDesignUpdates,
+      isNodeSelected
     } = this.props;
     const hasChildren = !!children;
     const className = hasChildren ? 'with-overlay with-children' : 'with-overlay';
@@ -20,7 +21,9 @@ export default class InlineExtension extends Component {
       css: overlay,
       className: "extension-overlay"
     }), children ? children : jsx(ExtensionLozenge, {
-      node: node
+      node: node,
+      isNodeSelected: isNodeSelected,
+      showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
     }));
   }
 }

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

@@ -1,15 +1,55 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @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 const capitalizeFirstLetter = str => {
-  return str.charAt(0).toUpperCase() + str.slice(1);
-};
-export const ICON_SIZE = 24;
+import { LozengeComponent } from './LozengeComponent';
+import { styledImage } from './styles';
 export default class ExtensionLozenge extends Component {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "renderImage", lozengeData => {
+      const {
+        extensionKey
+      } = this.props.node.attrs;
+      const {
+        url,
+        ...rest
+      } = lozengeData;
+      return jsx("img", _extends({
+        css: styledImage,
+        src: url
+      }, rest, {
+        alt: extensionKey
+      }));
+    });
+    _defineProperty(this, "renderFallback", lozengeData => {
+      const {
+        showMacroInteractionDesignUpdates,
+        isNodeSelected
+      } = this.props;
+      const {
+        parameters,
+        extensionKey
+      } = this.props.node.attrs;
+      const {
+        name
+      } = this.props.node.type;
+      const params = parameters && parameters.macroParams;
+      const title = parameters && parameters.extensionTitle || parameters && parameters.macroMetadata && parameters.macroMetadata.title || extensionKey;
+      const isBlockExtension = name === 'extension';
+      return jsx(LozengeComponent, {
+        isNodeSelected: isNodeSelected,
+        showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
+        isBlockExtension: isBlockExtension,
+        lozengeData: lozengeData,
+        params: params,
+        title: title,
+        renderImage: this.renderImage
+      });
+    });
+  }
   render() {
     const {
       node
@@ -27,45 +67,4 @@ export default class ExtensionLozenge extends Component {
     });
     return this.renderFallback(iconData);
   }
-  renderImage(lozengeData) {
-    const {
-      extensionKey
-    } = this.props.node.attrs;
-    const {
-      url,
-      ...rest
-    } = lozengeData;
-    return jsx("img", _extends({
-      css: styledImage,
-      src: url
-    }, rest, {
-      alt: extensionKey
-    }));
-  }
-  renderFallback(lozengeData) {
-    const {
-      parameters,
-      extensionKey
-    } = this.props.node.attrs;
-    const {
-      name
-    } = this.props.node.type;
-    const params = parameters && parameters.macroParams;
-    const title = parameters && parameters.extensionTitle || parameters && parameters.macroMetadata && parameters.macroMetadata.title || extensionKey;
-    const isBlockExtension = name === 'extension';
-    return jsx("div", {
-      "data-testid": "lozenge-fallback",
-      css: placeholderFallback
-    }, lozengeData && !isBlockExtension ? this.renderImage({
-      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(key => key && ` | ${key} = ${params[key].value}`)));
-  }
 }