@atlaskit/editor-common 82.9.1 → 82.10.0

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @atlaskit/editor-common
 
+## 82.10.0
+
+### Minor Changes
+
+- [#112575](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/112575)
+  [`63dcaae87255b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/63dcaae87255b) -
+  Passes new FF for new experiment to macro code and updates type to be object from boolean to
+  account for multiple FFs
+
+### Patch Changes
+
+- [#113192](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/113192)
+  [`80dfa651ba955`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/80dfa651ba955) -
+  Migration of native HTML buttons to new Pressable primitive.
+- [#113192](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/113192)
+  [`80dfa651ba955`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/80dfa651ba955) -
+  Migration of native HTML buttons to new Pressable primitive.
+
+## 82.9.2
+
+### Patch Changes
+
+- [#112394](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/112394)
+  [`cbce87c004124`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/cbce87c004124) -
+  ED-23678 fix blocks gap cursor styling
+- Updated dependencies
+
 ## 82.9.1
 
 ### Patch Changes

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

@@ -38,11 +38,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;
@@ -199,8 +201,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 (0, _react2.jsx)(ExtensionWithPluginState, (0, _extends2.default)({
           widthState: widthState
         }, props));

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

@@ -25,11 +25,13 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 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 = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['width']),
     widthState = _useSharedPluginState.widthState;
   var hasChildren = !!children;

package/dist/cjs/extensibility/Extension.js

@@ -39,7 +39,7 @@ var Extension = exports.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.default.createElement(_ExtensionComponent.ExtensionComponent, {
         editorView: editorView,
         node: node,
@@ -51,7 +51,7 @@ var Extension = exports.Extension = /*#__PURE__*/function (_Component) {
         editorAppearance: editorAppearance,
         pluginInjectionApi: pluginInjectionApi,
         eventDispatcher: eventDispatcher,
-        showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
+        macroInteractionDesignFeatureFlags: macroInteractionDesignFeatureFlags
       });
     });
     _this.providerFactory = props.providerFactory || new _providerFactory.ProviderFactory();

package/dist/cjs/extensibility/ExtensionComponent.js

@@ -200,7 +200,7 @@ var ExtensionComponent = exports.ExtensionComponent = /*#__PURE__*/function (_Co
         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 _state.NodeSelection && selection.node;
       var position = typeof getPos === 'function' && getPos();
@@ -216,7 +216,7 @@ var ExtensionComponent = exports.ExtensionComponent = /*#__PURE__*/function (_Co
           eventDispatcher: eventDispatcher,
           pluginInjectionApi: pluginInjectionApi,
           editorAppearance: editorAppearance,
-          showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
+          macroInteractionDesignFeatureFlags: macroInteractionDesignFeatureFlags,
           isNodeSelected: selectedNode === node,
           isNodeNested: isNodeNested,
           isNodeHovered: this.state.isNodeHovered,
@@ -237,7 +237,7 @@ 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,
+            macroInteractionDesignFeatureFlags: macroInteractionDesignFeatureFlags,
             isNodeSelected: selectedNode === node,
             isNodeHovered: this.state.isNodeHovered,
             isNodeNested: isNodeNested,
@@ -246,7 +246,7 @@ var ExtensionComponent = exports.ExtensionComponent = /*#__PURE__*/function (_Co
         case 'inlineExtension':
           return /*#__PURE__*/_react.default.createElement(_InlineExtension.default, {
             node: node,
-            showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
+            macroInteractionDesignFeatureFlags: macroInteractionDesignFeatureFlags,
             isNodeSelected: selectedNode === node,
             pluginInjectionApi: pluginInjectionApi,
             isNodeHovered: this.state.isNodeHovered,

package/dist/cjs/extensibility/ExtensionNodeWrapper.js

@@ -34,7 +34,9 @@ var styles = (0, _react2.css)({
 var ExtensionNodeWrapper = exports.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 = (0, _classnames.default)({
     'inline-extension': nodeType === 'inlineExtension' && showMacroInteractionDesignUpdates,
     relative: showMacroInteractionDesignUpdates

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

@@ -81,11 +81,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;
@@ -250,8 +252,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 (0, _react2.jsx)(MultiBodiedExtensionWithWidth, (0, _extends2.default)({
           widthState: widthState
         }, props));

package/dist/cjs/extensibility/extensionNodeView.js

@@ -56,7 +56,7 @@ var ExtensionNode = exports.ExtensionNode = /*#__PURE__*/function (_ReactNodeVie
       var _props$extensionNodeV;
       return /*#__PURE__*/_react.default.createElement(_ExtensionNodeWrapper.ExtensionNodeWrapper, {
         nodeType: this.node.type.name,
-        showMacroInteractionDesignUpdates: props.showMacroInteractionDesignUpdates
+        macroInteractionDesignFeatureFlags: props.macroInteractionDesignFeatureFlags
       }, /*#__PURE__*/_react.default.createElement(_Extension.Extension, {
         editorView: this.view,
         node: this.node,
@@ -74,13 +74,13 @@ var ExtensionNode = exports.ExtensionNode = /*#__PURE__*/function (_ReactNodeVie
         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.default);
-function ExtensionNodeView(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi, showMacroInteractionDesignUpdates) {
+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, {
@@ -88,7 +88,7 @@ function ExtensionNodeView(portalProviderAPI, eventDispatcher, providerFactory,
       extensionHandlers: extensionHandlers,
       extensionNodeViewOptions: extensionNodeViewOptions,
       pluginInjectionApi: pluginInjectionApi,
-      showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
+      macroInteractionDesignFeatureFlags: macroInteractionDesignFeatureFlags
     }, undefined, undefined, undefined, hasIntlContext).init();
   };
 }

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

@@ -26,6 +26,7 @@ var _adfSchema = require("@atlaskit/adf-schema");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _ = _interopRequireDefault(require("@atlaskit/icon-object/glyph/page/16"));
 var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/cross-circle"));
+var _primitives = require("@atlaskit/primitives");
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
@@ -56,12 +57,10 @@ var visuallyHiddenStyles = exports.visuallyHiddenStyles = (0, _react2.css)({
   position: 'absolute'
 });
 var RECENT_SEARCH_LIST_SIZE = exports.RECENT_SEARCH_LIST_SIZE = 5;
-var clearText = (0, _react2.css)({
-  cursor: 'pointer',
-  padding: 0,
-  marginRight: "var(--ds-space-100, 8px)",
-  color: "var(--ds-icon-subtle, ".concat(_colors.N90, ")"),
-  background: 'transparent',
+var clearTextButtonStyles = (0, _primitives.xcss)({
+  padding: 'space.0',
+  marginRight: 'space.100',
+  backgroundColor: 'color.background.neutral.subtle',
   border: 'none'
 });
 var clearTextWrapper = (0, _react2.css)({
@@ -888,13 +887,12 @@ var HyperlinkLinkAddToolbar = exports.HyperlinkLinkAddToolbar = /*#__PURE__*/fun
         css: clearTextWrapper
       }, (0, _react2.jsx)(_tooltip.default, {
         content: formatClearLinkText
-      }, (0, _react2.jsx)("button", {
-        type: "button",
-        css: clearText,
-        onClick: this.handleClearText,
-        tabIndex: 0
+      }, (0, _react2.jsx)(_primitives.Pressable, {
+        xcss: clearTextButtonStyles,
+        onClick: this.handleClearText
       }, (0, _react2.jsx)(_crossCircle.default, {
-        label: formatClearLinkText
+        label: formatClearLinkText,
+        primaryColor: "var(--ds-icon-subtle, #626F86)"
       }))))), (0, _react2.jsx)("label", {
         htmlFor: displayTextInputId,
         css: [inputLabel, textLabelMargin]
@@ -915,13 +913,13 @@ var HyperlinkLinkAddToolbar = exports.HyperlinkLinkAddToolbar = /*#__PURE__*/fun
         css: clearTextWrapper
       }, (0, _react2.jsx)(_tooltip.default, {
         content: formatMessage(messages.clearText)
-      }, (0, _react2.jsx)("button", {
-        type: "button",
-        css: clearText,
+      }, (0, _react2.jsx)(_primitives.Pressable, {
+        xcss: clearTextButtonStyles,
         onClick: this.handleClearDisplayText,
         onKeyDown: this.handleClearTextKeyDown
       }, (0, _react2.jsx)(_crossCircle.default, {
-        label: formatMessage(messages.clearText)
+        label: formatMessage(messages.clearText),
+        primaryColor: "var(--ds-icon-subtle, #626F86)"
       }))))), (0, _react2.jsx)("div", {
         css: visuallyHiddenStyles,
         "aria-live": "polite",

package/dist/cjs/monitoring/error.js

@@ -17,7 +17,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "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/cjs/selection/gap-cursor/styles.js

@@ -18,9 +18,9 @@ var gapCursorBlink = (0, _react.keyframes)({
 });
 var hideCaretModifier = exports.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.
-var gapCursorStyles = exports.gapCursorStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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);
+var gapCursorStyles = exports.gapCursorStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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/cjs/ui/DropList/index.js

@@ -20,7 +20,7 @@ var _Layer = _interopRequireDefault(require("../Layer"));
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /** @jsx jsx */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 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/es2019/extensibility/Extension/Extension/index.js

@@ -25,12 +25,15 @@ function ExtensionWithPluginState(props) {
     shadowClassNames,
     hideFrame,
     editorAppearance,
-    showMacroInteractionDesignUpdates,
+    macroInteractionDesignFeatureFlags,
     isNodeSelected,
     isNodeHovered,
     isNodeNested,
     setIsNodeHovered
   } = props;
+  const {
+    showMacroInteractionDesignUpdates
+  } = macroInteractionDesignFeatureFlags || {};
   const hasBody = ['bodiedExtension', 'multiBodiedExtension'].includes(node.type.name);
   const isMobile = editorAppearance === 'mobile';
   const hasChildren = !!children;

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

@@ -15,12 +15,15 @@ const InlineExtension = props => {
   const {
     node,
     pluginInjectionApi,
-    showMacroInteractionDesignUpdates,
+    macroInteractionDesignFeatureFlags,
     isNodeSelected,
     children,
     isNodeHovered,
     setIsNodeHovered
   } = props;
+  const {
+    showMacroInteractionDesignUpdates
+  } = macroInteractionDesignFeatureFlags || {};
   const {
     widthState
   } = useSharedPluginState(pluginInjectionApi, ['width']);

package/dist/es2019/extensibility/Extension.js

@@ -18,7 +18,7 @@ export class Extension extends Component {
         editorAppearance,
         pluginInjectionApi,
         eventDispatcher,
-        showMacroInteractionDesignUpdates
+        macroInteractionDesignFeatureFlags
       } = this.props;
       return /*#__PURE__*/React.createElement(ExtensionComponent, {
         editorView: editorView,
@@ -31,7 +31,7 @@ export class Extension extends Component {
         editorAppearance: editorAppearance,
         pluginInjectionApi: pluginInjectionApi,
         eventDispatcher: eventDispatcher,
-        showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
+        macroInteractionDesignFeatureFlags: macroInteractionDesignFeatureFlags
       });
     });
     this.providerFactory = props.providerFactory || new ProviderFactory();

package/dist/es2019/extensibility/ExtensionComponent.js

@@ -152,7 +152,7 @@ export class ExtensionComponent extends Component {
       pluginInjectionApi,
       getPos,
       eventDispatcher,
-      showMacroInteractionDesignUpdates
+      macroInteractionDesignFeatureFlags
     } = this.props;
     const {
       selection
@@ -171,7 +171,7 @@ export class ExtensionComponent extends Component {
         eventDispatcher: eventDispatcher,
         pluginInjectionApi: pluginInjectionApi,
         editorAppearance: editorAppearance,
-        showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
+        macroInteractionDesignFeatureFlags: macroInteractionDesignFeatureFlags,
         isNodeSelected: selectedNode === node,
         isNodeNested: isNodeNested,
         isNodeHovered: this.state.isNodeHovered,
@@ -192,7 +192,7 @@ export class ExtensionComponent extends Component {
           editorAppearance: editorAppearance,
           hideFrame: (_this$state$_privateP = this.state._privateProps) === null || _this$state$_privateP === void 0 ? void 0 : _this$state$_privateP.__hideFrame,
           pluginInjectionApi: pluginInjectionApi,
-          showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
+          macroInteractionDesignFeatureFlags: macroInteractionDesignFeatureFlags,
           isNodeSelected: selectedNode === node,
           isNodeHovered: this.state.isNodeHovered,
           isNodeNested: isNodeNested,
@@ -201,7 +201,7 @@ export class ExtensionComponent extends 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/es2019/extensibility/ExtensionNodeWrapper.js

@@ -26,8 +26,11 @@ const styles = css({
 export const ExtensionNodeWrapper = ({
   children,
   nodeType,
-  showMacroInteractionDesignUpdates
+  macroInteractionDesignFeatureFlags
 }) => {
+  const {
+    showMacroInteractionDesignUpdates
+  } = macroInteractionDesignFeatureFlags || {};
   const wrapperClassNames = classnames({
     'inline-extension': nodeType === 'inlineExtension' && showMacroInteractionDesignUpdates,
     relative: showMacroInteractionDesignUpdates

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

@@ -70,12 +70,15 @@ const MultiBodiedExtensionWithWidth = ({
   eventDispatcher,
   widthState,
   editorAppearance,
-  showMacroInteractionDesignUpdates,
+  macroInteractionDesignFeatureFlags,
   isNodeSelected,
   isNodeHovered,
   isNodeNested,
   setIsNodeHovered
 }) => {
+  const {
+    showMacroInteractionDesignUpdates
+  } = macroInteractionDesignFeatureFlags || {};
   const {
     parameters,
     extensionKey

package/dist/es2019/extensibility/extensionNodeView.js

@@ -29,7 +29,7 @@ export class ExtensionNode extends 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,
@@ -47,11 +47,11 @@ export class ExtensionNode extends 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
     }));
   }
 }
-export default function ExtensionNodeView(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi, showMacroInteractionDesignUpdates) {
+export default function ExtensionNodeView(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi, macroInteractionDesignFeatureFlags) {
   return (node, view, getPos) => {
     const hasIntlContext = true;
     return new ExtensionNode(node, view, getPos, portalProviderAPI, eventDispatcher, {
@@ -59,7 +59,7 @@ export default function ExtensionNodeView(portalProviderAPI, eventDispatcher, pr
       extensionHandlers,
       extensionNodeViewOptions,
       pluginInjectionApi,
-      showMacroInteractionDesignUpdates
+      macroInteractionDesignFeatureFlags
     }, undefined, undefined, undefined, hasIntlContext).init();
   };
 }

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

@@ -12,7 +12,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';
@@ -39,12 +40,10 @@ export const visuallyHiddenStyles = css({
   position: 'absolute'
 });
 export const RECENT_SEARCH_LIST_SIZE = 5;
-const clearText = css({
-  cursor: 'pointer',
-  padding: 0,
-  marginRight: "var(--ds-space-100, 8px)",
-  color: `var(--ds-icon-subtle, ${N90})`,
-  background: 'transparent',
+const clearTextButtonStyles = xcss({
+  padding: 'space.0',
+  marginRight: 'space.100',
+  backgroundColor: 'color.background.neutral.subtle',
   border: 'none'
 });
 const clearTextWrapper = css({
@@ -728,13 +727,12 @@ export class HyperlinkLinkAddToolbar extends 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]
@@ -753,13 +751,13 @@ export class HyperlinkLinkAddToolbar extends 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/es2019/monitoring/error.js

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

package/dist/es2019/selection/gap-cursor/styles.js

@@ -10,7 +10,7 @@ const gapCursorBlink = keyframes({
 });
 export const hideCaretModifier = 'ProseMirror-hide-gapcursor';
 const gapCursor = '.ProseMirror-gapcursor';
-const prosemirrorwidget = '.ProseMirror-widget';
+const prosemirrorwidgetNotBlock = '.ProseMirror-widget:not([data-blocks-decoration-container="true"]):not([data-blocks-drag-handle-container="true"])';
 const wrapLeft = '[layout="wrap-left"]';
 const wrapRight = '[layout="wrap-right"]';
 
@@ -141,8 +141,8 @@ export const gapCursorStyles = css`
   ${wrapRight} + ${gapCursor} + span + ${wrapLeft} + * > *,
   ${gapCursor} + ${wrapLeft} + span + ${wrapRight} + * > *,
   ${gapCursor} + ${wrapRight} + span + ${wrapLeft} + * > *,
-  ${prosemirrorwidget} + ${gapCursor} + *,
-  ${prosemirrorwidget} + ${gapCursor} + span + * {
+  ${prosemirrorwidgetNotBlock} + ${gapCursor} + *,
+  ${prosemirrorwidgetNotBlock} + ${gapCursor} + span + * {
 		margin-top: 0;
 	}
 `;

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

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

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;