@atlaskit/editor-common 82.9.2 → 82.11.0

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

@@ -30,11 +30,13 @@ function ExtensionWithPluginState(props) {
     shadowClassNames = props.shadowClassNames,
     hideFrame = props.hideFrame,
     editorAppearance = props.editorAppearance,
-    showMacroInteractionDesignUpdates = props.showMacroInteractionDesignUpdates,
+    macroInteractionDesignFeatureFlags = props.macroInteractionDesignFeatureFlags,
     isNodeSelected = props.isNodeSelected,
     isNodeHovered = props.isNodeHovered,
     isNodeNested = props.isNodeNested,
     setIsNodeHovered = props.setIsNodeHovered;
+  var _ref = macroInteractionDesignFeatureFlags || {},
+    showMacroInteractionDesignUpdates = _ref.showMacroInteractionDesignUpdates;
   var hasBody = ['bodiedExtension', 'multiBodiedExtension'].includes(node.type.name);
   var isMobile = editorAppearance === 'mobile';
   var hasChildren = !!children;
@@ -191,8 +193,8 @@ var ExtensionDeprecated = function ExtensionDeprecated(props) {
       plugins: {
         widthState: widthPluginKey
       },
-      render: function render(_ref) {
-        var widthState = _ref.widthState;
+      render: function render(_ref2) {
+        var widthState = _ref2.widthState;
         return jsx(ExtensionWithPluginState, _extends({
           widthState: widthState
         }, props));

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

@@ -14,11 +14,13 @@ import { inlineWrapperStyles, wrapperStyle } from './styles';
 var InlineExtension = function InlineExtension(props) {
   var node = props.node,
     pluginInjectionApi = props.pluginInjectionApi,
-    showMacroInteractionDesignUpdates = props.showMacroInteractionDesignUpdates,
+    macroInteractionDesignFeatureFlags = props.macroInteractionDesignFeatureFlags,
     isNodeSelected = props.isNodeSelected,
     children = props.children,
     isNodeHovered = props.isNodeHovered,
     setIsNodeHovered = props.setIsNodeHovered;
+  var _ref = macroInteractionDesignFeatureFlags || {},
+    showMacroInteractionDesignUpdates = _ref.showMacroInteractionDesignUpdates;
   var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['width']),
     widthState = _useSharedPluginState.widthState;
   var hasChildren = !!children;

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

package/dist/esm/utils/annotation/index.js

@@ -1,4 +1,5 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import { AnnotationTypes } from '@atlaskit/adf-schema';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 export var canApplyAnnotationOnRange = function canApplyAnnotationOnRange(rangeSelection, doc, schema) {
   var from = rangeSelection.from,
@@ -111,4 +112,32 @@ export function getRangeInlineNodeNames(_ref) {
   // We sort the list alphabetically to make human consumption of the list easier (in tools like the analytics extension)
   var sortedNames = _toConsumableArray(nodeNames).sort();
   return sortedNames;
+}
+
+/**
+ * This function returns a list of node types that are wrapped by an annotation mark.
+ *
+ * The `undefined` will be returned if `platform.editor.allow-inline-comments-for-inline-nodes-round-2_ctuxz` is off.
+ *
+ * @todo: Do not forget to remove `undefined` when the
+ *        `platform.editor.allow-inline-comments-for-inline-nodes-round-2_ctuxz` is removed.
+ */
+export function getAnnotationInlineNodeTypes(state, annotationId) {
+  if (!getBooleanFF('platform.editor.allow-inline-comments-for-inline-nodes-round-2_ctuxz')) {
+    return undefined;
+  }
+  var mark = state.schema.marks.annotation.create({
+    id: annotationId,
+    annotationType: AnnotationTypes.INLINE_COMMENT
+  });
+  var inlineNodeNames = new Set();
+  state.doc.descendants(function (node, pos) {
+    if (mark.isInSet(node.marks)) {
+      inlineNodeNames.add(node.type.name);
+    }
+    return true;
+  });
+
+  // This sorting is done to make human consumption easier (ie. in dev tools, test snapshots, analytics events, ...)
+  return _toConsumableArray(inlineNodeNames).sort();
 }

package/dist/esm/utils/index.js

@@ -2,7 +2,7 @@ import { hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { hasDocAsParent } from './document';
 import { isEmptyParagraph } from './editor-core-utils';
 export { shouldAutoLinkifyMatch } from './should-auto-linkify-tld';
-export { canApplyAnnotationOnRange, containsAnyAnnotations, getAnnotationIdsFromRange, hasAnnotationMark, getRangeInlineNodeNames } from './annotation';
+export { canApplyAnnotationOnRange, containsAnyAnnotations, getAnnotationIdsFromRange, getAnnotationInlineNodeTypes, hasAnnotationMark, getRangeInlineNodeNames } from './annotation';
 export { getExtensionLozengeData } from './macro';
 export { default as browser } from './browser';
 export { default as ErrorReporter } from './error-reporter';

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/annotation/index.d.ts

@@ -79,6 +79,16 @@ export type InlineCommentViewComponentProps = {
      */
     clickElementTarget?: HTMLElement;
     deleteAnnotation: (annotationInfo: AnnotationInfo) => ActionResult;
+    /**
+     * Return a list of inline node types, which are wrapped by the annotation,
+     * for annotation with given ID.
+     *
+     * The `undefined` will be returned if `platform.editor.allow-inline-comments-for-inline-nodes-round-2_ctuxz` is off.
+     *
+     * @todo: Do not forget to remove `undefined` when the
+     *        `platform.editor.allow-inline-comments-for-inline-nodes-round-2_ctuxz` is removed.
+     */
+    getInlineNodeTypes: (annotationId: string) => string[] | undefined;
 };
 export type InlineCommentHoverComponentProps = {
     /**

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/utils/annotation/index.d.ts

@@ -18,4 +18,16 @@ export declare function getRangeInlineNodeNames({ doc, pos, }: {
         to: number;
     };
 }): string[] | undefined;
+/**
+ * This function returns a list of node types that are wrapped by an annotation mark.
+ *
+ * The `undefined` will be returned if `platform.editor.allow-inline-comments-for-inline-nodes-round-2_ctuxz` is off.
+ *
+ * @todo: Do not forget to remove `undefined` when the
+ *        `platform.editor.allow-inline-comments-for-inline-nodes-round-2_ctuxz` is removed.
+ */
+export declare function getAnnotationInlineNodeTypes(state: {
+    doc: PMNode;
+    schema: Schema;
+}, annotationId: string): string[] | undefined;
 export {};

package/dist/types/utils/index.d.ts

@@ -2,7 +2,7 @@ import type { Node as PMNode, ResolvedPos, Schema } from '@atlaskit/editor-prose
 import type { EditorState, Selection } from '@atlaskit/editor-prosemirror/state';
 import type { ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
 export { shouldAutoLinkifyMatch } from './should-auto-linkify-tld';
-export { canApplyAnnotationOnRange, containsAnyAnnotations, getAnnotationIdsFromRange, hasAnnotationMark, getRangeInlineNodeNames, } from './annotation';
+export { canApplyAnnotationOnRange, containsAnyAnnotations, getAnnotationIdsFromRange, getAnnotationInlineNodeTypes, hasAnnotationMark, getRangeInlineNodeNames, } from './annotation';
 export { getExtensionLozengeData } from './macro';
 export type { Params } from './macro';
 export { default as browser } from './browser';

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;