@atlaskit/editor-common 82.9.1 → 82.10.0

package/dist/esm/extensibility/Extension.js

@@ -29,7 +29,7 @@ export var Extension = /*#__PURE__*/function (_Component) {
         editorAppearance = _this$props.editorAppearance,
         pluginInjectionApi = _this$props.pluginInjectionApi,
         eventDispatcher = _this$props.eventDispatcher,
-        showMacroInteractionDesignUpdates = _this$props.showMacroInteractionDesignUpdates;
+        macroInteractionDesignFeatureFlags = _this$props.macroInteractionDesignFeatureFlags;
       return /*#__PURE__*/React.createElement(ExtensionComponent, {
         editorView: editorView,
         node: node,
@@ -41,7 +41,7 @@ export var Extension = /*#__PURE__*/function (_Component) {
         editorAppearance: editorAppearance,
         pluginInjectionApi: pluginInjectionApi,
         eventDispatcher: eventDispatcher,
-        showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
+        macroInteractionDesignFeatureFlags: macroInteractionDesignFeatureFlags
       });
     });
     _this.providerFactory = props.providerFactory || new ProviderFactory();

package/dist/esm/extensibility/ExtensionComponent.js

@@ -190,7 +190,7 @@ export var ExtensionComponent = /*#__PURE__*/function (_Component) {
         pluginInjectionApi = _this$props2.pluginInjectionApi,
         getPos = _this$props2.getPos,
         eventDispatcher = _this$props2.eventDispatcher,
-        showMacroInteractionDesignUpdates = _this$props2.showMacroInteractionDesignUpdates;
+        macroInteractionDesignFeatureFlags = _this$props2.macroInteractionDesignFeatureFlags;
       var selection = editorView.state.selection;
       var selectedNode = selection instanceof NodeSelection && selection.node;
       var position = typeof getPos === 'function' && getPos();
@@ -206,7 +206,7 @@ export var ExtensionComponent = /*#__PURE__*/function (_Component) {
           eventDispatcher: eventDispatcher,
           pluginInjectionApi: pluginInjectionApi,
           editorAppearance: editorAppearance,
-          showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
+          macroInteractionDesignFeatureFlags: macroInteractionDesignFeatureFlags,
           isNodeSelected: selectedNode === node,
           isNodeNested: isNodeNested,
           isNodeHovered: this.state.isNodeHovered,
@@ -227,7 +227,7 @@ 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,
+            macroInteractionDesignFeatureFlags: macroInteractionDesignFeatureFlags,
             isNodeSelected: selectedNode === node,
             isNodeHovered: this.state.isNodeHovered,
             isNodeNested: isNodeNested,
@@ -236,7 +236,7 @@ export var ExtensionComponent = /*#__PURE__*/function (_Component) {
         case 'inlineExtension':
           return /*#__PURE__*/React.createElement(InlineExtension, {
             node: node,
-            showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
+            macroInteractionDesignFeatureFlags: macroInteractionDesignFeatureFlags,
             isNodeSelected: selectedNode === node,
             pluginInjectionApi: pluginInjectionApi,
             isNodeHovered: this.state.isNodeHovered,

package/dist/esm/extensibility/ExtensionNodeWrapper.js

@@ -26,7 +26,9 @@ var styles = css({
 export var ExtensionNodeWrapper = function ExtensionNodeWrapper(_ref) {
   var children = _ref.children,
     nodeType = _ref.nodeType,
-    showMacroInteractionDesignUpdates = _ref.showMacroInteractionDesignUpdates;
+    macroInteractionDesignFeatureFlags = _ref.macroInteractionDesignFeatureFlags;
+  var _ref2 = macroInteractionDesignFeatureFlags || {},
+    showMacroInteractionDesignUpdates = _ref2.showMacroInteractionDesignUpdates;
   var wrapperClassNames = classnames({
     'inline-extension': nodeType === 'inlineExtension' && showMacroInteractionDesignUpdates,
     relative: showMacroInteractionDesignUpdates

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

@@ -73,11 +73,13 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref)
     eventDispatcher = _ref.eventDispatcher,
     widthState = _ref.widthState,
     editorAppearance = _ref.editorAppearance,
-    showMacroInteractionDesignUpdates = _ref.showMacroInteractionDesignUpdates,
+    macroInteractionDesignFeatureFlags = _ref.macroInteractionDesignFeatureFlags,
     isNodeSelected = _ref.isNodeSelected,
     isNodeHovered = _ref.isNodeHovered,
     isNodeNested = _ref.isNodeNested,
     setIsNodeHovered = _ref.setIsNodeHovered;
+  var _ref2 = macroInteractionDesignFeatureFlags || {},
+    showMacroInteractionDesignUpdates = _ref2.showMacroInteractionDesignUpdates;
   var _node$attrs = node.attrs,
     parameters = _node$attrs.parameters,
     extensionKey = _node$attrs.extensionKey;
@@ -242,8 +244,8 @@ var MultiBodiedExtensionDeprecated = function MultiBodiedExtensionDeprecated(pro
       plugins: {
         widthState: widthPluginKey
       },
-      render: function render(_ref2) {
-        var widthState = _ref2.widthState;
+      render: function render(_ref3) {
+        var widthState = _ref3.widthState;
         return jsx(MultiBodiedExtensionWithWidth, _extends({
           widthState: widthState
         }, props));

package/dist/esm/extensibility/extensionNodeView.js

@@ -48,7 +48,7 @@ export var ExtensionNode = /*#__PURE__*/function (_ReactNodeView) {
       var _props$extensionNodeV;
       return /*#__PURE__*/React.createElement(ExtensionNodeWrapper, {
         nodeType: this.node.type.name,
-        showMacroInteractionDesignUpdates: props.showMacroInteractionDesignUpdates
+        macroInteractionDesignFeatureFlags: props.macroInteractionDesignFeatureFlags
       }, /*#__PURE__*/React.createElement(Extension, {
         editorView: this.view,
         node: this.node,
@@ -66,13 +66,13 @@ export var ExtensionNode = /*#__PURE__*/function (_ReactNodeView) {
         extensionHandlers: props.extensionHandlers,
         editorAppearance: (_props$extensionNodeV = props.extensionNodeViewOptions) === null || _props$extensionNodeV === void 0 ? void 0 : _props$extensionNodeV.appearance,
         pluginInjectionApi: props.pluginInjectionApi,
-        showMacroInteractionDesignUpdates: props.showMacroInteractionDesignUpdates
+        macroInteractionDesignFeatureFlags: props.macroInteractionDesignFeatureFlags
       }));
     }
   }]);
   return ExtensionNode;
 }(ReactNodeView);
-export default function ExtensionNodeView(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi, showMacroInteractionDesignUpdates) {
+export default function ExtensionNodeView(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi, macroInteractionDesignFeatureFlags) {
   return function (node, view, getPos) {
     var hasIntlContext = true;
     return new ExtensionNode(node, view, getPos, portalProviderAPI, eventDispatcher, {
@@ -80,7 +80,7 @@ export default function ExtensionNodeView(portalProviderAPI, eventDispatcher, pr
       extensionHandlers: extensionHandlers,
       extensionNodeViewOptions: extensionNodeViewOptions,
       pluginInjectionApi: pluginInjectionApi,
-      showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
+      macroInteractionDesignFeatureFlags: macroInteractionDesignFeatureFlags
     }, undefined, undefined, undefined, hasIntlContext).init();
   };
 }

package/dist/esm/link/LinkPicker/HyperlinkAddToolbar/HyperlinkAddToolbar.js

@@ -24,7 +24,8 @@ import { isSafeUrl } from '@atlaskit/adf-schema';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import Page16Icon from '@atlaskit/icon-object/glyph/page/16';
 import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
-import { N200, N90 } from '@atlaskit/theme/colors';
+import { Pressable, xcss } from '@atlaskit/primitives';
+import { N200 } from '@atlaskit/theme/colors';
 import { fontSizeSmall } from '@atlaskit/theme/constants';
 import Tooltip from '@atlaskit/tooltip';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, fireAnalyticsEvent, INPUT_METHOD } from '../../../analytics';
@@ -51,12 +52,10 @@ export var visuallyHiddenStyles = css({
   position: 'absolute'
 });
 export var RECENT_SEARCH_LIST_SIZE = 5;
-var clearText = css({
-  cursor: 'pointer',
-  padding: 0,
-  marginRight: "var(--ds-space-100, 8px)",
-  color: "var(--ds-icon-subtle, ".concat(N90, ")"),
-  background: 'transparent',
+var clearTextButtonStyles = xcss({
+  padding: 'space.0',
+  marginRight: 'space.100',
+  backgroundColor: 'color.background.neutral.subtle',
   border: 'none'
 });
 var clearTextWrapper = css({
@@ -883,13 +882,12 @@ export var HyperlinkLinkAddToolbar = /*#__PURE__*/function (_PureComponent) {
         css: clearTextWrapper
       }, jsx(Tooltip, {
         content: formatClearLinkText
-      }, jsx("button", {
-        type: "button",
-        css: clearText,
-        onClick: this.handleClearText,
-        tabIndex: 0
+      }, jsx(Pressable, {
+        xcss: clearTextButtonStyles,
+        onClick: this.handleClearText
       }, jsx(CrossCircleIcon, {
-        label: formatClearLinkText
+        label: formatClearLinkText,
+        primaryColor: "var(--ds-icon-subtle, #626F86)"
       }))))), jsx("label", {
         htmlFor: displayTextInputId,
         css: [inputLabel, textLabelMargin]
@@ -910,13 +908,13 @@ export var HyperlinkLinkAddToolbar = /*#__PURE__*/function (_PureComponent) {
         css: clearTextWrapper
       }, jsx(Tooltip, {
         content: formatMessage(messages.clearText)
-      }, jsx("button", {
-        type: "button",
-        css: clearText,
+      }, jsx(Pressable, {
+        xcss: clearTextButtonStyles,
         onClick: this.handleClearDisplayText,
         onKeyDown: this.handleClearTextKeyDown
       }, jsx(CrossCircleIcon, {
-        label: formatMessage(messages.clearText)
+        label: formatMessage(messages.clearText),
+        primaryColor: "var(--ds-icon-subtle, #626F86)"
       }))))), jsx("div", {
         css: visuallyHiddenStyles,
         "aria-live": "polite",

package/dist/esm/monitoring/error.js

@@ -7,7 +7,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { isFedRamp } from './environment';
 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 = "82.9.1";
+var packageVersion = "82.10.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/selection/gap-cursor/styles.js

@@ -12,9 +12,9 @@ var gapCursorBlink = keyframes({
 });
 export var hideCaretModifier = 'ProseMirror-hide-gapcursor';
 var gapCursor = '.ProseMirror-gapcursor';
-var prosemirrorwidget = '.ProseMirror-widget';
+var prosemirrorwidgetNotBlock = '.ProseMirror-widget:not([data-blocks-decoration-container="true"]):not([data-blocks-drag-handle-container="true"])';
 var wrapLeft = '[layout="wrap-left"]';
 var wrapRight = '[layout="wrap-right"]';
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-keyframes, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766, This needs manual remediation, it autofixes seemingly safely, but the code style and readability is destroyed.
-export var gapCursorStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t/* =============== GAP CURSOR ================== */\n\t.ProseMirror {\n\t\t&.", " {\n\t\t\tcaret-color: transparent;\n\t\t}\n\n\t\t", " {\n\t\t\tdisplay: none;\n\t\t\tpointer-events: none;\n\t\t\tposition: relative;\n\n\t\t\t& span {\n\t\t\t\tcaret-color: transparent;\n\t\t\t\tposition: absolute;\n\t\t\t\theight: 100%;\n\t\t\t\twidth: 100%;\n\t\t\t\tdisplay: block;\n\t\t\t}\n\n\t\t\t& span::after {\n\t\t\t\tanimation: 1s ", " step-end infinite;\n\t\t\t\tborder-left: 1px solid;\n\t\t\t\tcontent: '';\n\t\t\t\tdisplay: block;\n\t\t\t\tposition: absolute;\n\t\t\t\ttop: 0;\n\t\t\t\theight: 100%;\n\t\t\t}\n\t\t\t&.-left span::after {\n\t\t\t\tleft: ", ";\n\t\t\t}\n\t\t\t&.-right span::after {\n\t\t\t\tright: ", ";\n\t\t\t}\n\t\t\t& span[layout='full-width'],\n\t\t\t& span[layout='wide'],\n\t\t\t& span[layout='fixed-width'] {\n\t\t\t\tmargin-left: 50%;\n\t\t\t\ttransform: translateX(-50%);\n\t\t\t}\n\t\t\t&", " {\n\t\t\t\tfloat: right;\n\t\t\t}\n\n\t\t\t/* fix vertical alignment of gap cursor */\n\t\t\t&:first-of-type + ul,\n\t\t\t&:first-of-type + span + ul,\n\t\t\t&:first-of-type + ol,\n\t\t\t&:first-of-type + span + ol,\n\t\t\t&:first-of-type + pre,\n\t\t\t&:first-of-type + span + pre,\n\t\t\t&:first-of-type + blockquote,\n\t\t\t&:first-of-type + span + blockquote {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\t\t&.ProseMirror-focused ", " {\n\t\t\tdisplay: block;\n\t\t\tborder-color: transparent;\n\t\t}\n\t}\n\n\t/* This hack below is for two images aligned side by side */\n\t", "", " + span + ", ",\n  ", "", " + span + ", ",\n  ", " + ", " + ", ",\n  ", " + ", " + span + ", ",\n  ", " + ", " + ", ",\n  ", " + ", " + span + ", ",\n  ", " + ", " + ", ",\n  ", " + ", " + span ", ",\n  ", " + ", " + ", ",\n  ", " + ", " + span + ", ",\n  ", " + ", " {\n\t\tclear: none;\n\t}\n\n\t", " + ", " + ", " > div,\n  ", " + ", " + span + ", " > div,\n  ", " + ", " + ", " > div,\n  ", " + ", " + span + ", " > div,\n  ", " + ", " + ", " > div,\n  ", " + ", " + span + ", " > div,\n  ", " + ", " + ", " > div,\n  ", " + ", " + span + ", " > div {\n\t\tmargin-right: 0;\n\t\tmargin-left: 0;\n\t\tmargin-bottom: 0;\n\t}\n\n\t", " + ", ",\n  ", " + ", " {\n\t\tfloat: left;\n\t}\n\n\t", " + ", " + span + ", "::after,\n  ", " + ", " + span + ", "::after,\n  ", " + ", " + ", "::after,\n  ", " + ", " + span + ", "::after,\n  ", " + ", " + ", "::after,\n  ", " + ", " + span + ", "::after {\n\t\tvisibility: hidden;\n\t\tdisplay: block;\n\t\tfont-size: 0;\n\t\tcontent: ' ';\n\t\tclear: both;\n\t\theight: 0;\n\t}\n\n\t", " + ", " + ", " + *,\n  ", " + ", " + ", " + span + *,\n  ", " + ", " + ", " + *,\n  ", " + ", " + ", " + span + *,\n  ", " + ", " + span + ", " + *,\n  ", " + ", " + span + ", " + *,\n  ", " + ", " + span + ", " + *,\n  ", " + ", " + span + ", " + *,\n  ", " + ", " + ", " + * > *,\n  ", " + ", " + ", " + span + * > *,\n  ", " + ", " + ", " + * > *,\n  ", " + ", " + ", " + span + * > *,\n  ", " + ", " + span + ", " + * > *,\n  ", " + ", " + span + ", " + * > *,\n  ", " + ", " + span + ", " + * > *,\n  ", " + ", " + span + ", " + * > *,\n  ", " + ", " + *,\n  ", " + ", " + span + * {\n\t\tmargin-top: 0;\n\t}\n"])), hideCaretModifier, gapCursor, gapCursorBlink, "var(--ds-space-negative-050, -4px)", "var(--ds-space-negative-050, -4px)", wrapRight, gapCursor, gapCursor, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, wrapLeft, gapCursor, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, wrapRight, wrapLeft, gapCursor, wrapRight, gapCursor, gapCursor, wrapLeft, wrapRight, gapCursor, wrapRight, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, gapCursor, wrapLeft, wrapRight, gapCursor, wrapRight, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, gapCursor, wrapLeft, wrapRight, gapCursor, wrapRight, wrapLeft, prosemirrorwidget, gapCursor, prosemirrorwidget, gapCursor);
+export var gapCursorStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t/* =============== GAP CURSOR ================== */\n\t.ProseMirror {\n\t\t&.", " {\n\t\t\tcaret-color: transparent;\n\t\t}\n\n\t\t", " {\n\t\t\tdisplay: none;\n\t\t\tpointer-events: none;\n\t\t\tposition: relative;\n\n\t\t\t& span {\n\t\t\t\tcaret-color: transparent;\n\t\t\t\tposition: absolute;\n\t\t\t\theight: 100%;\n\t\t\t\twidth: 100%;\n\t\t\t\tdisplay: block;\n\t\t\t}\n\n\t\t\t& span::after {\n\t\t\t\tanimation: 1s ", " step-end infinite;\n\t\t\t\tborder-left: 1px solid;\n\t\t\t\tcontent: '';\n\t\t\t\tdisplay: block;\n\t\t\t\tposition: absolute;\n\t\t\t\ttop: 0;\n\t\t\t\theight: 100%;\n\t\t\t}\n\t\t\t&.-left span::after {\n\t\t\t\tleft: ", ";\n\t\t\t}\n\t\t\t&.-right span::after {\n\t\t\t\tright: ", ";\n\t\t\t}\n\t\t\t& span[layout='full-width'],\n\t\t\t& span[layout='wide'],\n\t\t\t& span[layout='fixed-width'] {\n\t\t\t\tmargin-left: 50%;\n\t\t\t\ttransform: translateX(-50%);\n\t\t\t}\n\t\t\t&", " {\n\t\t\t\tfloat: right;\n\t\t\t}\n\n\t\t\t/* fix vertical alignment of gap cursor */\n\t\t\t&:first-of-type + ul,\n\t\t\t&:first-of-type + span + ul,\n\t\t\t&:first-of-type + ol,\n\t\t\t&:first-of-type + span + ol,\n\t\t\t&:first-of-type + pre,\n\t\t\t&:first-of-type + span + pre,\n\t\t\t&:first-of-type + blockquote,\n\t\t\t&:first-of-type + span + blockquote {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\t\t&.ProseMirror-focused ", " {\n\t\t\tdisplay: block;\n\t\t\tborder-color: transparent;\n\t\t}\n\t}\n\n\t/* This hack below is for two images aligned side by side */\n\t", "", " + span + ", ",\n  ", "", " + span + ", ",\n  ", " + ", " + ", ",\n  ", " + ", " + span + ", ",\n  ", " + ", " + ", ",\n  ", " + ", " + span + ", ",\n  ", " + ", " + ", ",\n  ", " + ", " + span ", ",\n  ", " + ", " + ", ",\n  ", " + ", " + span + ", ",\n  ", " + ", " {\n\t\tclear: none;\n\t}\n\n\t", " + ", " + ", " > div,\n  ", " + ", " + span + ", " > div,\n  ", " + ", " + ", " > div,\n  ", " + ", " + span + ", " > div,\n  ", " + ", " + ", " > div,\n  ", " + ", " + span + ", " > div,\n  ", " + ", " + ", " > div,\n  ", " + ", " + span + ", " > div {\n\t\tmargin-right: 0;\n\t\tmargin-left: 0;\n\t\tmargin-bottom: 0;\n\t}\n\n\t", " + ", ",\n  ", " + ", " {\n\t\tfloat: left;\n\t}\n\n\t", " + ", " + span + ", "::after,\n  ", " + ", " + span + ", "::after,\n  ", " + ", " + ", "::after,\n  ", " + ", " + span + ", "::after,\n  ", " + ", " + ", "::after,\n  ", " + ", " + span + ", "::after {\n\t\tvisibility: hidden;\n\t\tdisplay: block;\n\t\tfont-size: 0;\n\t\tcontent: ' ';\n\t\tclear: both;\n\t\theight: 0;\n\t}\n\n\t", " + ", " + ", " + *,\n  ", " + ", " + ", " + span + *,\n  ", " + ", " + ", " + *,\n  ", " + ", " + ", " + span + *,\n  ", " + ", " + span + ", " + *,\n  ", " + ", " + span + ", " + *,\n  ", " + ", " + span + ", " + *,\n  ", " + ", " + span + ", " + *,\n  ", " + ", " + ", " + * > *,\n  ", " + ", " + ", " + span + * > *,\n  ", " + ", " + ", " + * > *,\n  ", " + ", " + ", " + span + * > *,\n  ", " + ", " + span + ", " + * > *,\n  ", " + ", " + span + ", " + * > *,\n  ", " + ", " + span + ", " + * > *,\n  ", " + ", " + span + ", " + * > *,\n  ", " + ", " + *,\n  ", " + ", " + span + * {\n\t\tmargin-top: 0;\n\t}\n"])), hideCaretModifier, gapCursor, gapCursorBlink, "var(--ds-space-negative-050, -4px)", "var(--ds-space-negative-050, -4px)", wrapRight, gapCursor, gapCursor, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, wrapLeft, gapCursor, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, wrapRight, wrapLeft, gapCursor, wrapRight, gapCursor, gapCursor, wrapLeft, wrapRight, gapCursor, wrapRight, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, gapCursor, wrapLeft, wrapRight, gapCursor, wrapRight, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, gapCursor, wrapLeft, wrapRight, gapCursor, wrapRight, wrapLeft, prosemirrorwidgetNotBlock, gapCursor, prosemirrorwidgetNotBlock, gapCursor);

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

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

@@ -4,7 +4,7 @@ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { ExtensionProvider, ReferenceEntity } from '../../../extensions';
 import type { ProsemirrorGetPosHandler } from '../../../react-node-view';
 import type { EditorAppearance } from '../../../types';
-import type { ExtensionsPluginInjectionAPI } from '../../types';
+import type { ExtensionsPluginInjectionAPI, MacroInteractionDesignFeatureFlags } from '../../types';
 export interface Props {
     node: PmNode;
     getPos: ProsemirrorGetPosHandler;
@@ -16,7 +16,7 @@ export interface Props {
     hideFrame?: boolean;
     editorAppearance?: EditorAppearance;
     pluginInjectionApi: ExtensionsPluginInjectionAPI;
-    showMacroInteractionDesignUpdates?: boolean;
+    macroInteractionDesignFeatureFlags?: MacroInteractionDesignFeatureFlags;
     isNodeSelected?: boolean;
     isNodeHovered?: boolean;
     isNodeNested?: boolean;

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

@@ -2,12 +2,12 @@
 import React from 'react';
 import { jsx } from '@emotion/react';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
-import type { ExtensionsPluginInjectionAPI } from '../../types';
+import type { ExtensionsPluginInjectionAPI, MacroInteractionDesignFeatureFlags } from '../../types';
 export interface Props {
     node: PmNode;
     pluginInjectionApi: ExtensionsPluginInjectionAPI;
     children?: React.ReactNode;
-    showMacroInteractionDesignUpdates?: boolean;
+    macroInteractionDesignFeatureFlags?: MacroInteractionDesignFeatureFlags;
     isNodeSelected?: boolean;
     isNodeHovered?: boolean;
     setIsNodeHovered?: (isHovered: boolean) => void;

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

@@ -6,7 +6,7 @@ import type { ExtensionHandlers, ReferenceEntity } from '../extensions';
 import { ProviderFactory } from '../provider-factory';
 import type { ProsemirrorGetPosHandler } from '../react-node-view';
 import type { EditorAppearance } from '../types';
-import type { ExtensionsPluginInjectionAPI } from './types';
+import type { ExtensionsPluginInjectionAPI, MacroInteractionDesignFeatureFlags } from './types';
 export interface Props {
     editorView: EditorView;
     node: PMNode;
@@ -18,7 +18,7 @@ export interface Props {
     editorAppearance?: EditorAppearance;
     pluginInjectionApi: ExtensionsPluginInjectionAPI;
     eventDispatcher?: EventDispatcher;
-    showMacroInteractionDesignUpdates?: boolean;
+    macroInteractionDesignFeatureFlags?: MacroInteractionDesignFeatureFlags;
 }
 export declare class Extension extends Component<Props, any> {
     static displayName: string;

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

@@ -6,7 +6,7 @@ import { getExtensionModuleNodePrivateProps, getNodeRenderer } from '../extensio
 import type { ExtensionHandlers, ExtensionProvider, ReferenceEntity } from '../extensions';
 import type { ProsemirrorGetPosHandler } from '../react-node-view';
 import type { EditorAppearance } from '../types';
-import type { ExtensionsPluginInjectionAPI } from './types';
+import type { ExtensionsPluginInjectionAPI, MacroInteractionDesignFeatureFlags } from './types';
 export interface Props {
     editorView: EditorView;
     node: PMNode;
@@ -18,7 +18,7 @@ export interface Props {
     editorAppearance?: EditorAppearance;
     pluginInjectionApi: ExtensionsPluginInjectionAPI;
     eventDispatcher?: EventDispatcher;
-    showMacroInteractionDesignUpdates?: boolean;
+    macroInteractionDesignFeatureFlags?: MacroInteractionDesignFeatureFlags;
 }
 export interface State {
     extensionProvider?: ExtensionProvider;

package/dist/types/extensibility/ExtensionNodeWrapper.d.ts

@@ -1,10 +1,11 @@
 /** @jsx jsx */
 import React from 'react';
 import { jsx } from '@emotion/react';
+import type { MacroInteractionDesignFeatureFlags } from "./types";
 type Props = {
     children: React.ReactNode;
     nodeType: string;
-    showMacroInteractionDesignUpdates?: boolean;
+    macroInteractionDesignFeatureFlags?: MacroInteractionDesignFeatureFlags;
 };
 /**
  * If inlineExtension, add zero width space to the end of the nodes and wrap with span;
@@ -14,5 +15,5 @@ type Props = {
  * @param param0
  * @returns
  */
-export declare const ExtensionNodeWrapper: ({ children, nodeType, showMacroInteractionDesignUpdates, }: Props) => jsx.JSX.Element;
+export declare const ExtensionNodeWrapper: ({ children, nodeType, macroInteractionDesignFeatureFlags, }: Props) => jsx.JSX.Element;
 export {};

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

@@ -7,7 +7,7 @@ import type { EventDispatcher } from '../../event-dispatcher';
 import type { MultiBodiedExtensionActions } from '../../extensions';
 import type { EditorAppearance } from '../../types';
 import type { OverflowShadowProps } from '../../ui';
-import type { ExtensionsPluginInjectionAPI } from '../types';
+import type { ExtensionsPluginInjectionAPI, MacroInteractionDesignFeatureFlags } from '../types';
 export type TryExtensionHandlerType = (actions: MultiBodiedExtensionActions | undefined) => React.ReactElement | null;
 type Props = {
     node: PmNode;
@@ -18,7 +18,7 @@ type Props = {
     eventDispatcher?: EventDispatcher;
     pluginInjectionApi?: ExtensionsPluginInjectionAPI;
     editorAppearance?: EditorAppearance;
-    showMacroInteractionDesignUpdates?: boolean;
+    macroInteractionDesignFeatureFlags?: MacroInteractionDesignFeatureFlags;
     isNodeSelected?: boolean;
     isNodeHovered?: boolean;
     isNodeNested?: boolean;

package/dist/types/extensibility/extensionNodeView.d.ts

@@ -9,7 +9,7 @@ import type { ForwardRef, getPosHandler } from '../react-node-view';
 import ReactNodeView from '../react-node-view';
 import type { EditorAppearance } from '../types';
 import type { LegacyPortalProviderAPI } from '../ui/PortalProvider';
-import type { ExtensionsPluginInjectionAPI } from './types';
+import type { ExtensionsPluginInjectionAPI, MacroInteractionDesignFeatureFlags } from './types';
 interface ExtensionNodeViewOptions {
     appearance?: EditorAppearance;
 }
@@ -26,8 +26,8 @@ export declare class ExtensionNode extends ReactNodeView {
         extensionHandlers: ExtensionHandlers;
         extensionNodeViewOptions?: ExtensionNodeViewOptions;
         pluginInjectionApi: ExtensionsPluginInjectionAPI;
-        showMacroInteractionDesignUpdates: boolean;
+        macroInteractionDesignFeatureFlags?: MacroInteractionDesignFeatureFlags;
     }, forwardRef: ForwardRef): JSX.Element;
 }
-export default function ExtensionNodeView(portalProviderAPI: LegacyPortalProviderAPI | PortalProviderAPI, eventDispatcher: EventDispatcher, providerFactory: ProviderFactory, extensionHandlers: ExtensionHandlers, extensionNodeViewOptions: ExtensionNodeViewOptions, pluginInjectionApi: ExtensionsPluginInjectionAPI, showMacroInteractionDesignUpdates?: boolean): (node: PmNode, view: EditorView, getPos: getPosHandler) => NodeView;
+export default function ExtensionNodeView(portalProviderAPI: LegacyPortalProviderAPI | PortalProviderAPI, eventDispatcher: EventDispatcher, providerFactory: ProviderFactory, extensionHandlers: ExtensionHandlers, extensionNodeViewOptions: ExtensionNodeViewOptions, pluginInjectionApi: ExtensionsPluginInjectionAPI, macroInteractionDesignFeatureFlags?: MacroInteractionDesignFeatureFlags): (node: PmNode, view: EditorView, getPos: getPosHandler) => NodeView;
 export {};

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

@@ -3,4 +3,8 @@ type WidthPluginType = NextEditorPlugin<'width', {
     sharedState: EditorContainerWidth | undefined;
 }>;
 export type ExtensionsPluginInjectionAPI = PublicPluginAPI<[WidthPluginType]> | undefined;
+export type MacroInteractionDesignFeatureFlags = {
+    showMacroInteractionDesignUpdates?: boolean;
+    showMacroButtonUpdates?: boolean;
+};
 export {};

package/dist/types/types/feature-flags.d.ts

@@ -269,6 +269,14 @@ export type FeatureFlags = {
      * @default false
      */
     macroInteractionUpdates?: boolean;
+    /**
+     * @description
+     * Enables macro interaction visual button updates
+     *
+     * @see https://product-fabric.atlassian.net/browse/PGXT-5513
+     * @default false
+     */
+    macroInteractionButtonUpdates?: boolean;
     /**
    * @description
    * Enables bug fix on media comments

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

@@ -4,7 +4,7 @@ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { ExtensionProvider, ReferenceEntity } from '../../../extensions';
 import type { ProsemirrorGetPosHandler } from '../../../react-node-view';
 import type { EditorAppearance } from '../../../types';
-import type { ExtensionsPluginInjectionAPI } from '../../types';
+import type { ExtensionsPluginInjectionAPI, MacroInteractionDesignFeatureFlags } from '../../types';
 export interface Props {
     node: PmNode;
     getPos: ProsemirrorGetPosHandler;
@@ -16,7 +16,7 @@ export interface Props {
     hideFrame?: boolean;
     editorAppearance?: EditorAppearance;
     pluginInjectionApi: ExtensionsPluginInjectionAPI;
-    showMacroInteractionDesignUpdates?: boolean;
+    macroInteractionDesignFeatureFlags?: MacroInteractionDesignFeatureFlags;
     isNodeSelected?: boolean;
     isNodeHovered?: boolean;
     isNodeNested?: boolean;

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

@@ -2,12 +2,12 @@
 import React from 'react';
 import { jsx } from '@emotion/react';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
-import type { ExtensionsPluginInjectionAPI } from '../../types';
+import type { ExtensionsPluginInjectionAPI, MacroInteractionDesignFeatureFlags } from '../../types';
 export interface Props {
     node: PmNode;
     pluginInjectionApi: ExtensionsPluginInjectionAPI;
     children?: React.ReactNode;
-    showMacroInteractionDesignUpdates?: boolean;
+    macroInteractionDesignFeatureFlags?: MacroInteractionDesignFeatureFlags;
     isNodeSelected?: boolean;
     isNodeHovered?: boolean;
     setIsNodeHovered?: (isHovered: boolean) => void;

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

@@ -6,7 +6,7 @@ import type { ExtensionHandlers, ReferenceEntity } from '../extensions';
 import { ProviderFactory } from '../provider-factory';
 import type { ProsemirrorGetPosHandler } from '../react-node-view';
 import type { EditorAppearance } from '../types';
-import type { ExtensionsPluginInjectionAPI } from './types';
+import type { ExtensionsPluginInjectionAPI, MacroInteractionDesignFeatureFlags } from './types';
 export interface Props {
     editorView: EditorView;
     node: PMNode;
@@ -18,7 +18,7 @@ export interface Props {
     editorAppearance?: EditorAppearance;
     pluginInjectionApi: ExtensionsPluginInjectionAPI;
     eventDispatcher?: EventDispatcher;
-    showMacroInteractionDesignUpdates?: boolean;
+    macroInteractionDesignFeatureFlags?: MacroInteractionDesignFeatureFlags;
 }
 export declare class Extension extends Component<Props, any> {
     static displayName: string;

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

@@ -6,7 +6,7 @@ import { getExtensionModuleNodePrivateProps, getNodeRenderer } from '../extensio
 import type { ExtensionHandlers, ExtensionProvider, ReferenceEntity } from '../extensions';
 import type { ProsemirrorGetPosHandler } from '../react-node-view';
 import type { EditorAppearance } from '../types';
-import type { ExtensionsPluginInjectionAPI } from './types';
+import type { ExtensionsPluginInjectionAPI, MacroInteractionDesignFeatureFlags } from './types';
 export interface Props {
     editorView: EditorView;
     node: PMNode;
@@ -18,7 +18,7 @@ export interface Props {
     editorAppearance?: EditorAppearance;
     pluginInjectionApi: ExtensionsPluginInjectionAPI;
     eventDispatcher?: EventDispatcher;
-    showMacroInteractionDesignUpdates?: boolean;
+    macroInteractionDesignFeatureFlags?: MacroInteractionDesignFeatureFlags;
 }
 export interface State {
     extensionProvider?: ExtensionProvider;

package/dist/types-ts4.5/extensibility/ExtensionNodeWrapper.d.ts

@@ -1,10 +1,11 @@
 /** @jsx jsx */
 import React from 'react';
 import { jsx } from '@emotion/react';
+import type { MacroInteractionDesignFeatureFlags } from "./types";
 type Props = {
     children: React.ReactNode;
     nodeType: string;
-    showMacroInteractionDesignUpdates?: boolean;
+    macroInteractionDesignFeatureFlags?: MacroInteractionDesignFeatureFlags;
 };
 /**
  * If inlineExtension, add zero width space to the end of the nodes and wrap with span;
@@ -14,5 +15,5 @@ type Props = {
  * @param param0
  * @returns
  */
-export declare const ExtensionNodeWrapper: ({ children, nodeType, showMacroInteractionDesignUpdates, }: Props) => jsx.JSX.Element;
+export declare const ExtensionNodeWrapper: ({ children, nodeType, macroInteractionDesignFeatureFlags, }: Props) => jsx.JSX.Element;
 export {};

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

@@ -7,7 +7,7 @@ import type { EventDispatcher } from '../../event-dispatcher';
 import type { MultiBodiedExtensionActions } from '../../extensions';
 import type { EditorAppearance } from '../../types';
 import type { OverflowShadowProps } from '../../ui';
-import type { ExtensionsPluginInjectionAPI } from '../types';
+import type { ExtensionsPluginInjectionAPI, MacroInteractionDesignFeatureFlags } from '../types';
 export type TryExtensionHandlerType = (actions: MultiBodiedExtensionActions | undefined) => React.ReactElement | null;
 type Props = {
     node: PmNode;
@@ -18,7 +18,7 @@ type Props = {
     eventDispatcher?: EventDispatcher;
     pluginInjectionApi?: ExtensionsPluginInjectionAPI;
     editorAppearance?: EditorAppearance;
-    showMacroInteractionDesignUpdates?: boolean;
+    macroInteractionDesignFeatureFlags?: MacroInteractionDesignFeatureFlags;
     isNodeSelected?: boolean;
     isNodeHovered?: boolean;
     isNodeNested?: boolean;

package/dist/types-ts4.5/extensibility/extensionNodeView.d.ts

@@ -9,7 +9,7 @@ import type { ForwardRef, getPosHandler } from '../react-node-view';
 import ReactNodeView from '../react-node-view';
 import type { EditorAppearance } from '../types';
 import type { LegacyPortalProviderAPI } from '../ui/PortalProvider';
-import type { ExtensionsPluginInjectionAPI } from './types';
+import type { ExtensionsPluginInjectionAPI, MacroInteractionDesignFeatureFlags } from './types';
 interface ExtensionNodeViewOptions {
     appearance?: EditorAppearance;
 }
@@ -26,8 +26,8 @@ export declare class ExtensionNode extends ReactNodeView {
         extensionHandlers: ExtensionHandlers;
         extensionNodeViewOptions?: ExtensionNodeViewOptions;
         pluginInjectionApi: ExtensionsPluginInjectionAPI;
-        showMacroInteractionDesignUpdates: boolean;
+        macroInteractionDesignFeatureFlags?: MacroInteractionDesignFeatureFlags;
     }, forwardRef: ForwardRef): JSX.Element;
 }
-export default function ExtensionNodeView(portalProviderAPI: LegacyPortalProviderAPI | PortalProviderAPI, eventDispatcher: EventDispatcher, providerFactory: ProviderFactory, extensionHandlers: ExtensionHandlers, extensionNodeViewOptions: ExtensionNodeViewOptions, pluginInjectionApi: ExtensionsPluginInjectionAPI, showMacroInteractionDesignUpdates?: boolean): (node: PmNode, view: EditorView, getPos: getPosHandler) => NodeView;
+export default function ExtensionNodeView(portalProviderAPI: LegacyPortalProviderAPI | PortalProviderAPI, eventDispatcher: EventDispatcher, providerFactory: ProviderFactory, extensionHandlers: ExtensionHandlers, extensionNodeViewOptions: ExtensionNodeViewOptions, pluginInjectionApi: ExtensionsPluginInjectionAPI, macroInteractionDesignFeatureFlags?: MacroInteractionDesignFeatureFlags): (node: PmNode, view: EditorView, getPos: getPosHandler) => NodeView;
 export {};

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

@@ -5,4 +5,8 @@ type WidthPluginType = NextEditorPlugin<'width', {
 export type ExtensionsPluginInjectionAPI = PublicPluginAPI<[
     WidthPluginType
 ]> | undefined;
+export type MacroInteractionDesignFeatureFlags = {
+    showMacroInteractionDesignUpdates?: boolean;
+    showMacroButtonUpdates?: boolean;
+};
 export {};

package/dist/types-ts4.5/types/feature-flags.d.ts

@@ -269,6 +269,14 @@ export type FeatureFlags = {
      * @default false
      */
     macroInteractionUpdates?: boolean;
+    /**
+     * @description
+     * Enables macro interaction visual button updates
+     *
+     * @see https://product-fabric.atlassian.net/browse/PGXT-5513
+     * @default false
+     */
+    macroInteractionButtonUpdates?: boolean;
     /**
    * @description
    * Enables bug fix on media comments

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "82.9.1",
+	"version": "82.10.0",
 	"description": "A package that contains common classes and components for editor and renderer",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -102,7 +102,7 @@
 		"@atlaskit/analytics-namespaced-context": "^6.10.0",
 		"@atlaskit/analytics-next": "^9.3.0",
 		"@atlaskit/analytics-next-stable-react-context": "1.0.1",
-		"@atlaskit/button": "^17.22.0",
+		"@atlaskit/button": "^17.23.0",
 		"@atlaskit/code": "^15.3.0",
 		"@atlaskit/codemod-utils": "^4.2.0",
 		"@atlaskit/custom-steps": "^0.2.0",
@@ -119,11 +119,11 @@
 		"@atlaskit/media-card": "^77.12.0",
 		"@atlaskit/media-client": "^27.3.0",
 		"@atlaskit/media-client-react": "^2.0.0",
-		"@atlaskit/media-common": "^11.2.0",
+		"@atlaskit/media-common": "^11.3.0",
 		"@atlaskit/media-file-preview": "^0.5.0",
 		"@atlaskit/media-picker": "^66.4.0",
 		"@atlaskit/media-ui": "^25.10.0",
-		"@atlaskit/media-viewer": "48.6.5",
+		"@atlaskit/media-viewer": "48.6.6",
 		"@atlaskit/mention": "^23.2.0",
 		"@atlaskit/menu": "^2.5.0",
 		"@atlaskit/platform-feature-flags": "^0.2.0",
@@ -135,7 +135,7 @@
 		"@atlaskit/spinner": "^16.2.0",
 		"@atlaskit/task-decision": "^17.10.0",
 		"@atlaskit/textfield": "^6.4.0",
-		"@atlaskit/theme": "^12.10.0",
+		"@atlaskit/theme": "^12.11.0",
 		"@atlaskit/tokens": "^1.51.0",
 		"@atlaskit/tooltip": "^18.5.0",
 		"@atlaskit/ufo": "^0.2.0",