@atlaskit/editor-common 106.1.9 → 106.2.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/editor-common
 
+## 106.2.0
+
+### Minor Changes
+
+- [#164920](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/164920)
+  [`bd64fb35bc619`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/bd64fb35bc619) -
+  [https://product-fabric.atlassian.net/browse/ED-28183](ED-28183) - fix a11y issue in editor link
+  search
+
+### Patch Changes
+
+- Updated dependencies
+
+## 106.1.10
+
+### Patch Changes
+
+- [#165189](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/165189)
+  [`648000359d216`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/648000359d216) -
+  [ux] PGXT-8152 Add update to test fix for interactions with input elements inside of
+  extensions/macros in editor not working because the editor handles the events instead getting in
+  the way of the input elements interactions.
+
 ## 106.1.9
 
 ### Patch Changes

package/dist/cjs/extensibility/extensionNodeView.js

@@ -12,6 +12,7 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _react = _interopRequireDefault(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _reactNodeView = _interopRequireDefault(require("../react-node-view"));
 var _Extension = require("./Extension");
 var _ExtensionNodeWrapper = require("./ExtensionNodeWrapper");
@@ -37,6 +38,22 @@ var ExtensionNode = exports.ExtensionNode = /*#__PURE__*/function (_ReactNodeVie
       // children a chance to recalc
       return this.node.type.isAtom || mutation.type !== 'selection' && mutation.attributeName !== 'data-layout';
     }
+
+    /**
+     * When interacting with input elements inside an extension's body, the events
+     * bubble up to the editor and get handled by it. This almost always gets in the way
+     * of being able to actually interact with said input in the extension, i.e.
+     * typing inside a text field (in an extension body) will print the text in the editor
+     * content area instead. This change prevents the editor view from trying to handle these events,
+     * when the target of the event is an input element, so the extension can.
+     *
+     * TODO: PGXT-8180 - write tests https://product-fabric.atlassian.net/browse/PGXT-8180
+     */
+  }, {
+    key: "stopEvent",
+    value: function stopEvent(event) {
+      return event.target instanceof HTMLInputElement && (0, _platformFeatureFlags.fg)('interactable_in_editor_inputs');
+    }
   }, {
     key: "getContentDOM",
     value: function getContentDOM() {

package/dist/cjs/link/LinkSearch/LinkSearchList.js

@@ -64,7 +64,8 @@ var LinkSearchList = exports.default = /*#__PURE__*/function (_PureComponent) {
           css: linkSearchList,
           id: id,
           role: role,
-          "aria-controls": ariaControls
+          "aria-controls": ariaControls,
+          "data-testid": "".concat(id, "--items")
         }, items.map(function (item, index) {
           return (0, _react2.jsx)(_LinkSearchListItem.default, {
             id: "link-search-list-item-".concat(index),
@@ -81,7 +82,8 @@ var LinkSearchList = exports.default = /*#__PURE__*/function (_PureComponent) {
       }
       if (isLoading) {
         loadingContent = (0, _react2.jsx)("div", {
-          "data-testid": "".concat(id, "-loading"),
+          id: id,
+          "data-testid": "".concat(id, "--loading"),
           css: spinnerContainer
         }, (0, _react2.jsx)(_spinner.default, {
           size: "medium",

package/dist/cjs/monitoring/error.js

@@ -16,7 +16,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 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 = "106.1.9";
+var packageVersion = "106.2.0";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // Ignored via go/ees007

package/dist/cjs/styles/shared/resizer.js

@@ -42,40 +42,40 @@ var pragmaticResizerStyles = exports.pragmaticResizerStyles = function pragmatic
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
       '&:has([data-prosemirror-node-name="codeBlock"])': {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-        '> .pm-breakout-resize-handle-left': {
+        '> .pm-breakout-resize-handle-container--left': {
           left: '-12px'
         },
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-        '> .pm-breakout-resize-handle-right': {
+        '> .pm-breakout-resize-handle-container--right': {
           right: '-12px'
         },
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-        '> .pm-breakout-resize-handle': {
+        '> .pm-breakout-resize-handle-container': {
           height: 'calc(100% - 12px)'
         }
       },
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
       '&:has([data-prosemirror-node-name="expand"]), &:has([data-prosemirror-node-name="layoutSection"])': {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-        '> .pm-breakout-resize-handle-left': {
+        '> .pm-breakout-resize-handle-container--left': {
           left: '-32px'
         },
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-        '> .pm-breakout-resize-handle-right': {
+        '> .pm-breakout-resize-handle-container--right': {
           right: '-32px'
         }
       },
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
       '&:has([data-prosemirror-node-name="expand"])': {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-        '> .pm-breakout-resize-handle': {
+        '> .pm-breakout-resize-handle-container': {
           height: 'calc(100% - 4px)'
         }
       },
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
       '&:has([data-prosemirror-node-name="layoutSection"])': {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-        '> .pm-breakout-resize-handle': {
+        '> .pm-breakout-resize-handle-container': {
           height: 'calc(100% - 8px)'
         }
       },
@@ -83,44 +83,68 @@ var pragmaticResizerStyles = exports.pragmaticResizerStyles = function pragmatic
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
       '&:has(.first-node-in-document)': {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-        '> .pm-breakout-resize-handle': {
+        '> .pm-breakout-resize-handle-container': {
           height: '100%'
         }
       }
     },
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '.pm-breakout-resize-handle': {
+    '.pm-breakout-resize-handle-container': {
+      position: 'relative',
+      alignSelf: 'end',
+      gridRow: 1,
+      gridColumn: 1,
+      height: '100%',
+      width: 7
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.pm-breakout-resize-handle-container--left': {
+      justifySelf: 'start'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.pm-breakout-resize-handle-container--right': {
+      justifySelf: 'end'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.pm-breakout-resize-handle-rail': {
       position: 'relative',
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'center',
       height: '100%',
-      width: 7,
-      alignSelf: 'end',
-      gridRow: 1,
-      gridColumn: 1,
       cursor: 'col-resize',
       borderRadius: 4,
       transition: 'background-color 0.2s, visibility 0.2s, opacity 0.2s',
       zIndex: 2,
+      opacity: 0,
       '&:hover': {
         background: "var(--ds-background-selected, #E9F2FF)",
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-        '.pm-breakout-resize-handle-inner': {
+        '.pm-breakout-resize-handle-thumb': {
           background: "var(--ds-border-focused, #388BFF)"
         }
       }
     },
+    // same as 'hover' styles above
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '.pm-breakout-resize-handle-left': {
-      justifySelf: 'start'
+    '.pm-breakout-resize-handle-container--active': {
+      background: "var(--ds-background-selected, #E9F2FF)",
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '.pm-breakout-resize-handle-thumb': {
+        background: "var(--ds-border-focused, #388BFF)"
+      }
     },
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '.pm-breakout-resize-handle-right': {
-      justifySelf: 'end'
+    '.pm-breakout-resize-handle-hit-box': {
+      position: 'absolute',
+      top: 0,
+      bottom: 0,
+      left: -20,
+      right: -20,
+      zIndex: 0
     },
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '.pm-breakout-resize-handle-inner': {
+    '.pm-breakout-resize-handle-thumb': {
       minWidth: resizerHandleThumbWidth,
       // copied from resizeStyles.clamped
       height: 'clamp(27px, calc(100% - 32px), 96px)',

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

@@ -23,7 +23,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "106.1.9";
+var packageVersion = "106.2.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 // Ignored via go/ees005

package/dist/es2019/extensibility/extensionNodeView.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import ReactNodeView from '../react-node-view';
 import { Extension } from './Extension';
 import { ExtensionNodeWrapper } from './ExtensionNodeWrapper';
@@ -15,6 +16,20 @@ export class ExtensionNode extends ReactNodeView {
     // children a chance to recalc
     return this.node.type.isAtom || mutation.type !== 'selection' && mutation.attributeName !== 'data-layout';
   }
+
+  /**
+   * When interacting with input elements inside an extension's body, the events
+   * bubble up to the editor and get handled by it. This almost always gets in the way
+   * of being able to actually interact with said input in the extension, i.e.
+   * typing inside a text field (in an extension body) will print the text in the editor
+   * content area instead. This change prevents the editor view from trying to handle these events,
+   * when the target of the event is an input element, so the extension can.
+   *
+   * TODO: PGXT-8180 - write tests https://product-fabric.atlassian.net/browse/PGXT-8180
+   */
+  stopEvent(event) {
+    return event.target instanceof HTMLInputElement && fg('interactable_in_editor_inputs');
+  }
   getContentDOM() {
     if (this.node.isInline) {
       return;

package/dist/es2019/link/LinkSearch/LinkSearchList.js

@@ -47,7 +47,8 @@ export default class LinkSearchList extends PureComponent {
         css: linkSearchList,
         id: id,
         role: role,
-        "aria-controls": ariaControls
+        "aria-controls": ariaControls,
+        "data-testid": `${id}--items`
       }, items.map((item, index) => jsx(LinkSearchListItem, {
         id: `link-search-list-item-${index}`,
         role: role && 'option',
@@ -62,7 +63,8 @@ export default class LinkSearchList extends PureComponent {
     }
     if (isLoading) {
       loadingContent = jsx("div", {
-        "data-testid": `${id}-loading`,
+        id: id,
+        "data-testid": `${id}--loading`,
         css: spinnerContainer
       }, jsx(Spinner, {
         size: "medium",

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 = "106.1.9";
+const packageVersion = "106.2.0";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // Ignored via go/ees007

package/dist/es2019/styles/shared/resizer.js

@@ -237,40 +237,40 @@ export const pragmaticResizerStyles = () => {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
       '&:has([data-prosemirror-node-name="codeBlock"])': {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-        '> .pm-breakout-resize-handle-left': {
+        '> .pm-breakout-resize-handle-container--left': {
           left: '-12px'
         },
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-        '> .pm-breakout-resize-handle-right': {
+        '> .pm-breakout-resize-handle-container--right': {
           right: '-12px'
         },
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-        '> .pm-breakout-resize-handle': {
+        '> .pm-breakout-resize-handle-container': {
           height: 'calc(100% - 12px)'
         }
       },
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
       '&:has([data-prosemirror-node-name="expand"]), &:has([data-prosemirror-node-name="layoutSection"])': {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-        '> .pm-breakout-resize-handle-left': {
+        '> .pm-breakout-resize-handle-container--left': {
           left: '-32px'
         },
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-        '> .pm-breakout-resize-handle-right': {
+        '> .pm-breakout-resize-handle-container--right': {
           right: '-32px'
         }
       },
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
       '&:has([data-prosemirror-node-name="expand"])': {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-        '> .pm-breakout-resize-handle': {
+        '> .pm-breakout-resize-handle-container': {
           height: 'calc(100% - 4px)'
         }
       },
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
       '&:has([data-prosemirror-node-name="layoutSection"])': {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-        '> .pm-breakout-resize-handle': {
+        '> .pm-breakout-resize-handle-container': {
           height: 'calc(100% - 8px)'
         }
       },
@@ -278,44 +278,68 @@ export const pragmaticResizerStyles = () => {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
       '&:has(.first-node-in-document)': {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-        '> .pm-breakout-resize-handle': {
+        '> .pm-breakout-resize-handle-container': {
           height: '100%'
         }
       }
     },
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '.pm-breakout-resize-handle': {
+    '.pm-breakout-resize-handle-container': {
+      position: 'relative',
+      alignSelf: 'end',
+      gridRow: 1,
+      gridColumn: 1,
+      height: '100%',
+      width: 7
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.pm-breakout-resize-handle-container--left': {
+      justifySelf: 'start'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.pm-breakout-resize-handle-container--right': {
+      justifySelf: 'end'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.pm-breakout-resize-handle-rail': {
       position: 'relative',
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'center',
       height: '100%',
-      width: 7,
-      alignSelf: 'end',
-      gridRow: 1,
-      gridColumn: 1,
       cursor: 'col-resize',
       borderRadius: 4,
       transition: 'background-color 0.2s, visibility 0.2s, opacity 0.2s',
       zIndex: 2,
+      opacity: 0,
       '&:hover': {
         background: "var(--ds-background-selected, #E9F2FF)",
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-        '.pm-breakout-resize-handle-inner': {
+        '.pm-breakout-resize-handle-thumb': {
           background: "var(--ds-border-focused, #388BFF)"
         }
       }
     },
+    // same as 'hover' styles above
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '.pm-breakout-resize-handle-left': {
-      justifySelf: 'start'
+    '.pm-breakout-resize-handle-container--active': {
+      background: "var(--ds-background-selected, #E9F2FF)",
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '.pm-breakout-resize-handle-thumb': {
+        background: "var(--ds-border-focused, #388BFF)"
+      }
     },
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '.pm-breakout-resize-handle-right': {
-      justifySelf: 'end'
+    '.pm-breakout-resize-handle-hit-box': {
+      position: 'absolute',
+      top: 0,
+      bottom: 0,
+      left: -20,
+      right: -20,
+      zIndex: 0
     },
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '.pm-breakout-resize-handle-inner': {
+    '.pm-breakout-resize-handle-thumb': {
       minWidth: resizerHandleThumbWidth,
       // copied from resizeStyles.clamped
       height: 'clamp(27px, calc(100% - 32px), 96px)',

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

@@ -13,7 +13,7 @@ import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext'
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "106.1.9";
+const packageVersion = "106.2.0";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 // Ignored via go/ees005

package/dist/esm/extensibility/extensionNodeView.js

@@ -6,6 +6,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import ReactNodeView from '../react-node-view';
 import { Extension } from './Extension';
 import { ExtensionNodeWrapper } from './ExtensionNodeWrapper';
@@ -29,6 +30,22 @@ export var ExtensionNode = /*#__PURE__*/function (_ReactNodeView) {
       // children a chance to recalc
       return this.node.type.isAtom || mutation.type !== 'selection' && mutation.attributeName !== 'data-layout';
     }
+
+    /**
+     * When interacting with input elements inside an extension's body, the events
+     * bubble up to the editor and get handled by it. This almost always gets in the way
+     * of being able to actually interact with said input in the extension, i.e.
+     * typing inside a text field (in an extension body) will print the text in the editor
+     * content area instead. This change prevents the editor view from trying to handle these events,
+     * when the target of the event is an input element, so the extension can.
+     *
+     * TODO: PGXT-8180 - write tests https://product-fabric.atlassian.net/browse/PGXT-8180
+     */
+  }, {
+    key: "stopEvent",
+    value: function stopEvent(event) {
+      return event.target instanceof HTMLInputElement && fg('interactable_in_editor_inputs');
+    }
   }, {
     key: "getContentDOM",
     value: function getContentDOM() {

package/dist/esm/link/LinkSearch/LinkSearchList.js

@@ -60,7 +60,8 @@ var LinkSearchList = /*#__PURE__*/function (_PureComponent) {
           css: linkSearchList,
           id: id,
           role: role,
-          "aria-controls": ariaControls
+          "aria-controls": ariaControls,
+          "data-testid": "".concat(id, "--items")
         }, items.map(function (item, index) {
           return jsx(LinkSearchListItem, {
             id: "link-search-list-item-".concat(index),
@@ -77,7 +78,8 @@ var LinkSearchList = /*#__PURE__*/function (_PureComponent) {
       }
       if (isLoading) {
         loadingContent = jsx("div", {
-          "data-testid": "".concat(id, "-loading"),
+          id: id,
+          "data-testid": "".concat(id, "--loading"),
           css: spinnerContainer
         }, jsx(Spinner, {
           size: "medium",

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 = "106.1.9";
+var packageVersion = "106.2.0";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // Ignored via go/ees007

package/dist/esm/styles/shared/resizer.js

@@ -36,40 +36,40 @@ export var pragmaticResizerStyles = function pragmaticResizerStyles() {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
       '&:has([data-prosemirror-node-name="codeBlock"])': {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-        '> .pm-breakout-resize-handle-left': {
+        '> .pm-breakout-resize-handle-container--left': {
           left: '-12px'
         },
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-        '> .pm-breakout-resize-handle-right': {
+        '> .pm-breakout-resize-handle-container--right': {
           right: '-12px'
         },
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-        '> .pm-breakout-resize-handle': {
+        '> .pm-breakout-resize-handle-container': {
           height: 'calc(100% - 12px)'
         }
       },
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
       '&:has([data-prosemirror-node-name="expand"]), &:has([data-prosemirror-node-name="layoutSection"])': {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-        '> .pm-breakout-resize-handle-left': {
+        '> .pm-breakout-resize-handle-container--left': {
           left: '-32px'
         },
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-        '> .pm-breakout-resize-handle-right': {
+        '> .pm-breakout-resize-handle-container--right': {
           right: '-32px'
         }
       },
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
       '&:has([data-prosemirror-node-name="expand"])': {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-        '> .pm-breakout-resize-handle': {
+        '> .pm-breakout-resize-handle-container': {
           height: 'calc(100% - 4px)'
         }
       },
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
       '&:has([data-prosemirror-node-name="layoutSection"])': {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-        '> .pm-breakout-resize-handle': {
+        '> .pm-breakout-resize-handle-container': {
           height: 'calc(100% - 8px)'
         }
       },
@@ -77,44 +77,68 @@ export var pragmaticResizerStyles = function pragmaticResizerStyles() {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
       '&:has(.first-node-in-document)': {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-        '> .pm-breakout-resize-handle': {
+        '> .pm-breakout-resize-handle-container': {
           height: '100%'
         }
       }
     },
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '.pm-breakout-resize-handle': {
+    '.pm-breakout-resize-handle-container': {
+      position: 'relative',
+      alignSelf: 'end',
+      gridRow: 1,
+      gridColumn: 1,
+      height: '100%',
+      width: 7
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.pm-breakout-resize-handle-container--left': {
+      justifySelf: 'start'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.pm-breakout-resize-handle-container--right': {
+      justifySelf: 'end'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.pm-breakout-resize-handle-rail': {
       position: 'relative',
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'center',
       height: '100%',
-      width: 7,
-      alignSelf: 'end',
-      gridRow: 1,
-      gridColumn: 1,
       cursor: 'col-resize',
       borderRadius: 4,
       transition: 'background-color 0.2s, visibility 0.2s, opacity 0.2s',
       zIndex: 2,
+      opacity: 0,
       '&:hover': {
         background: "var(--ds-background-selected, #E9F2FF)",
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-        '.pm-breakout-resize-handle-inner': {
+        '.pm-breakout-resize-handle-thumb': {
           background: "var(--ds-border-focused, #388BFF)"
         }
       }
     },
+    // same as 'hover' styles above
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '.pm-breakout-resize-handle-left': {
-      justifySelf: 'start'
+    '.pm-breakout-resize-handle-container--active': {
+      background: "var(--ds-background-selected, #E9F2FF)",
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '.pm-breakout-resize-handle-thumb': {
+        background: "var(--ds-border-focused, #388BFF)"
+      }
     },
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '.pm-breakout-resize-handle-right': {
-      justifySelf: 'end'
+    '.pm-breakout-resize-handle-hit-box': {
+      position: 'absolute',
+      top: 0,
+      bottom: 0,
+      left: -20,
+      right: -20,
+      zIndex: 0
     },
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '.pm-breakout-resize-handle-inner': {
+    '.pm-breakout-resize-handle-thumb': {
       minWidth: resizerHandleThumbWidth,
       // copied from resizeStyles.clamped
       height: 'clamp(27px, calc(100% - 32px), 96px)',

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

@@ -20,7 +20,7 @@ import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext'
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "106.1.9";
+var packageVersion = "106.2.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 // Ignored via go/ees005

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

@@ -19,6 +19,17 @@ export declare class ExtensionNode extends ReactNodeView {
         type: 'selection';
         target: Node;
     }): boolean;
+    /**
+     * When interacting with input elements inside an extension's body, the events
+     * bubble up to the editor and get handled by it. This almost always gets in the way
+     * of being able to actually interact with said input in the extension, i.e.
+     * typing inside a text field (in an extension body) will print the text in the editor
+     * content area instead. This change prevents the editor view from trying to handle these events,
+     * when the target of the event is an input element, so the extension can.
+     *
+     * TODO: PGXT-8180 - write tests https://product-fabric.atlassian.net/browse/PGXT-8180
+     */
+    stopEvent(event: Event): boolean;
     getContentDOM(): {
         dom: HTMLDivElement;
     } | undefined;

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

@@ -19,6 +19,17 @@ export declare class ExtensionNode extends ReactNodeView {
         type: 'selection';
         target: Node;
     }): boolean;
+    /**
+     * When interacting with input elements inside an extension's body, the events
+     * bubble up to the editor and get handled by it. This almost always gets in the way
+     * of being able to actually interact with said input in the extension, i.e.
+     * typing inside a text field (in an extension body) will print the text in the editor
+     * content area instead. This change prevents the editor view from trying to handle these events,
+     * when the target of the event is an input element, so the extension can.
+     *
+     * TODO: PGXT-8180 - write tests https://product-fabric.atlassian.net/browse/PGXT-8180
+     */
+    stopEvent(event: Event): boolean;
     getContentDOM(): {
         dom: HTMLDivElement;
     } | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "106.1.9",
+	"version": "106.2.0",
 	"description": "A package that contains common classes and components for editor and renderer",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -139,7 +139,7 @@
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.4.0",
 		"@atlaskit/editor-tables": "^2.9.0",
-		"@atlaskit/emoji": "^69.2.0",
+		"@atlaskit/emoji": "^69.3.0",
 		"@atlaskit/icon": "^26.4.0",
 		"@atlaskit/icon-object": "^7.1.0",
 		"@atlaskit/link": "^3.2.0",
@@ -163,13 +163,13 @@
 		"@atlaskit/profilecard": "^23.16.0",
 		"@atlaskit/react-ufo": "^3.13.0",
 		"@atlaskit/section-message": "^8.2.0",
-		"@atlaskit/smart-card": "^38.6.0",
+		"@atlaskit/smart-card": "^38.7.0",
 		"@atlaskit/smart-user-picker": "^8.0.0",
 		"@atlaskit/spinner": "^18.0.0",
 		"@atlaskit/task-decision": "^19.2.0",
 		"@atlaskit/textfield": "^8.0.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tmp-editor-statsig": "^5.10.0",
+		"@atlaskit/tmp-editor-statsig": "^5.12.0",
 		"@atlaskit/tokens": "^5.0.0",
 		"@atlaskit/tooltip": "^20.3.0",
 		"@atlaskit/width-detector": "^5.0.0",
@@ -393,6 +393,9 @@
 		},
 		"confluence_preload_forge_viewport_heights_editor": {
 			"type": "boolean"
+		},
+		"interactable_in_editor_inputs": {
+			"type": "boolean"
 		}
 	}
 }