@atlaskit/editor-core 195.6.2 → 195.8.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlaskit/editor-core
 
+## 195.8.0
+
+### Minor Changes
+
+- [#133315](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/133315)
+  [`5c94ca338de14`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5c94ca338de14) -
+  Updating mentions plugin config for handling deleted mentions and refactor
+
+## 195.7.0
+
+### Minor Changes
+
+- [#132259](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/132259)
+  [`f5e633e11af26`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f5e633e11af26) -
+  [ux] Expose the context panel state from the context panel plugin. Simplify and consolidate the
+  context panel logic such that it always opens in the same manner. Previously there was a small
+  number of cases in which the context panel overlaps.
+- [#133191](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/133191)
+  [`78a1927084934`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/78a1927084934) -
+  [ux] Remove icon migration feature gate and migrate new icons on primary toolbar
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 195.6.2
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -37,7 +37,7 @@ Object.defineProperty(exports, "CollapsedEditor", {
 Object.defineProperty(exports, "ContextPanel", {
   enumerable: true,
   get: function get() {
-    return _ContextPanel.default;
+    return _deprecated.default;
   }
 });
 Object.defineProperty(exports, "EVENT_TYPE", {
@@ -156,7 +156,7 @@ var _WithHelpTrigger = _interopRequireDefault(require("./ui/WithHelpTrigger"));
 var _CollapsedEditor = _interopRequireDefault(require("./ui/CollapsedEditor"));
 var _ToolbarHelp = _interopRequireDefault(require("./ui/ToolbarHelp"));
 var _ToolbarFeedback = _interopRequireDefault(require("./ui/ToolbarFeedback"));
-var _ContextPanel = _interopRequireDefault(require("./ui/ContextPanel"));
+var _deprecated = _interopRequireDefault(require("./ui/ContextPanel/deprecated"));
 var _resource = require("@atlaskit/emoji/resource");
 var _resource2 = require("@atlaskit/mention/resource");
 var _teamResource = require("@atlaskit/mention/team-resource");

package/dist/cjs/ui/Appearance/FullPage/FullPage.js

@@ -108,6 +108,7 @@ var FullPageEditor = exports.FullPageEditor = function FullPageEditor(props) {
     featureFlags: props.featureFlags,
     hideAvatarGroup: props.hideAvatarGroup
   }), (0, _react2.jsx)(_FullPageContentArea.FullPageContentArea, {
+    editorAPI: editorAPI,
     ref: scrollContentContainerRef,
     appearance: props.appearance,
     contentComponents: props.contentComponents,

package/dist/cjs/ui/Appearance/FullPage/FullPageContentArea.js

@@ -46,67 +46,71 @@ var Content = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }, []);
   return (0, _react2.jsx)(_ui.WidthConsumer, null, function (_ref) {
     var width = _ref.width;
-    return (0, _react2.jsx)(_ui.ContextPanelConsumer, null, function (_ref2) {
-      var _contentAreaRef$curre;
-      var positionedOverEditor = _ref2.positionedOverEditor;
-      return (0, _react2.jsx)("div", {
-        css: [
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-        _StyledComponents.contentArea,
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-        props.isEditorToolbarHidden && _StyledComponents.contentAreaHeightNoToolbar,
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-        positionedOverEditor && _StyledComponents.positionedOverEditorStyle],
-        "data-testid": CONTENT_AREA_TEST_ID,
-        ref: containerRef
-      }, (0, _react2.jsx)(_StyledComponents.ScrollContainer
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      , {
-        className: "fabric-editor-popup-scroll-parent",
-        featureFlags: props.featureFlags,
-        ref: scrollContainerRef
-      }, (0, _react2.jsx)(_Addon.ClickAreaBlock, {
-        editorView: props.editorView,
-        editorDisabled: props.disabled
-      }, (0, _react2.jsx)("div", {
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-        css: (0, _StyledComponents.editorContentAreaStyle)({
-          fullWidthMode: fullWidthMode,
-          layoutMaxWidth: theme.layoutMaxWidth,
-          containerWidth: width
-        }),
-        role: "region",
-        "aria-label": props.intl.formatMessage(_messages.fullPageMessages.editableContentLabel),
-        ref: contentAreaRef
-      }, (0, _react2.jsx)("div", {
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-        css: (0, _StyledComponents.editorContentGutterStyle)()
+    return (
+      // Cleaned up with: platform_editor_context-panel_simplify_behaviour
+      (0, _react2.jsx)(_ui.ContextPanelConsumer, null, function (_ref2) {
+        var _contentAreaRef$curre;
+        var positionedOverEditor = _ref2.positionedOverEditor;
+        return (0, _react2.jsx)("div", {
+          css: [
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+          _StyledComponents.contentArea,
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+          props.isEditorToolbarHidden && _StyledComponents.contentAreaHeightNoToolbar,
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+          positionedOverEditor && _StyledComponents.positionedOverEditorStyle],
+          "data-testid": CONTENT_AREA_TEST_ID,
+          ref: containerRef
+        }, (0, _react2.jsx)(_StyledComponents.ScrollContainer
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-        ,
-        className: ['ak-editor-content-area', fullWidthMode ? 'fabric-editor--full-width-mode' : ''].join(' '),
-        ref: contentAreaRef
-      }, !!props.customContentComponents && 'before' in props.customContentComponents ? props.customContentComponents.before : props.customContentComponents, (0, _react2.jsx)(_PluginSlot.default, {
-        editorView: props.editorView,
-        editorActions: props.editorActions,
-        eventDispatcher: props.eventDispatcher,
-        providerFactory: props.providerFactory,
-        appearance: props.appearance,
-        items: props.contentComponents,
-        pluginHooks: props.pluginHooks,
-        contentArea: (_contentAreaRef$curre = contentAreaRef.current) !== null && _contentAreaRef$curre !== void 0 ? _contentAreaRef$curre : undefined,
-        popupsMountPoint: props.popupsMountPoint,
-        popupsBoundariesElement: props.popupsBoundariesElement,
-        popupsScrollableElement: props.popupsScrollableElement,
-        disabled: !!props.disabled,
-        containerElement: scrollContainerRef.current,
-        dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
-        wrapperElement: props.wrapperElement
-      }), props.editorDOMElement, !!props.customContentComponents && 'after' in props.customContentComponents ? props.customContentComponents.after : null)))), (0, _react2.jsx)("div", {
-        css: _StyledComponents.sidebarArea
-      }, props.contextPanel || (0, _react2.jsx)(_ContextPanel.default, {
-        visible: false
-      })));
-    });
+        , {
+          className: "fabric-editor-popup-scroll-parent",
+          featureFlags: props.featureFlags,
+          ref: scrollContainerRef
+        }, (0, _react2.jsx)(_Addon.ClickAreaBlock, {
+          editorView: props.editorView,
+          editorDisabled: props.disabled
+        }, (0, _react2.jsx)("div", {
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+          css: (0, _StyledComponents.editorContentAreaStyle)({
+            fullWidthMode: fullWidthMode,
+            layoutMaxWidth: theme.layoutMaxWidth,
+            containerWidth: width
+          }),
+          role: "region",
+          "aria-label": props.intl.formatMessage(_messages.fullPageMessages.editableContentLabel),
+          ref: contentAreaRef
+        }, (0, _react2.jsx)("div", {
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+          css: (0, _StyledComponents.editorContentGutterStyle)()
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+          ,
+          className: ['ak-editor-content-area', fullWidthMode ? 'fabric-editor--full-width-mode' : ''].join(' '),
+          ref: contentAreaRef
+        }, !!props.customContentComponents && 'before' in props.customContentComponents ? props.customContentComponents.before : props.customContentComponents, (0, _react2.jsx)(_PluginSlot.default, {
+          editorView: props.editorView,
+          editorActions: props.editorActions,
+          eventDispatcher: props.eventDispatcher,
+          providerFactory: props.providerFactory,
+          appearance: props.appearance,
+          items: props.contentComponents,
+          pluginHooks: props.pluginHooks,
+          contentArea: (_contentAreaRef$curre = contentAreaRef.current) !== null && _contentAreaRef$curre !== void 0 ? _contentAreaRef$curre : undefined,
+          popupsMountPoint: props.popupsMountPoint,
+          popupsBoundariesElement: props.popupsBoundariesElement,
+          popupsScrollableElement: props.popupsScrollableElement,
+          disabled: !!props.disabled,
+          containerElement: scrollContainerRef.current,
+          dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
+          wrapperElement: props.wrapperElement
+        }), props.editorDOMElement, !!props.customContentComponents && 'after' in props.customContentComponents ? props.customContentComponents.after : null)))), (0, _react2.jsx)("div", {
+          css: _StyledComponents.sidebarArea
+        }, props.contextPanel || (0, _react2.jsx)(_ContextPanel.default, {
+          editorAPI: props.editorAPI,
+          visible: false
+        })));
+      })
+    );
   });
 });
 var FullPageContentArea = exports.FullPageContentArea = (0, _reactIntlNext.injectIntl)(Content, {

package/dist/cjs/ui/ContextPanel/deprecated.js

@@ -0,0 +1,283 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.content = exports.SwappableContentArea = void 0;
+exports.default = ContextPanel;
+exports.shouldPanelBePositionedOverEditor = exports.panel = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+var _Transition = _interopRequireDefault(require("react-transition-group/Transition"));
+var _ui = require("@atlaskit/editor-common/ui");
+var _withPluginState = require("@atlaskit/editor-common/with-plugin-state");
+var _utils = require("@atlaskit/editor-prosemirror/utils");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _colors = require("@atlaskit/theme/colors");
+var _document = require("../../utils/document");
+var _WithEditorActions = _interopRequireDefault(require("../WithEditorActions"));
+var _excluded = ["actions"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+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; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+var ANIM_SPEED_MS = 500;
+var EDITOR_WIDTH = _editorSharedStyles.akEditorDefaultLayoutWidth + _editorSharedStyles.akEditorBreakoutPadding;
+var WIDE_EDITOR_WIDTH = _editorSharedStyles.akEditorWideLayoutWidth + _editorSharedStyles.akEditorBreakoutPadding;
+var FULLWIDTH_MODE = 'full-width';
+var WIDE_MODE = 'wide';
+var absolutePanelStyles = (0, _react2.css)({
+  position: 'absolute',
+  right: 0,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  height: "calc(100% - ".concat((0, _editorSharedStyles.FULL_PAGE_EDITOR_TOOLBAR_HEIGHT)(), ")")
+});
+var checkTableExistsInDoc = function checkTableExistsInDoc(editorView) {
+  var tableNodeSchema = editorView.state.schema.nodes.table;
+  var findResult = (0, _utils.findChildrenByType)(editorView.state.doc, tableNodeSchema);
+  return findResult.length > 0;
+};
+var shouldPanelBePositionedOverEditor = exports.shouldPanelBePositionedOverEditor = function shouldPanelBePositionedOverEditor(editorWidth, panelWidth, editorView) {
+  var lineLength = editorWidth.lineLength,
+    _editorWidth$containe = editorWidth.containerWidth,
+    containerWidth = _editorWidth$containe === void 0 ? 0 : _editorWidth$containe,
+    contentBreakoutModes = editorWidth.contentBreakoutModes;
+  var editorNotFullWidth = !(lineLength && lineLength > _editorSharedStyles.akEditorDefaultLayoutWidth);
+  var hasSpaceForPanel = !contentBreakoutModes.length && containerWidth >= panelWidth * 2 + EDITOR_WIDTH;
+  var hasSpaceForWideBreakoutsAndPanel = !contentBreakoutModes.includes(FULLWIDTH_MODE) && contentBreakoutModes.includes(WIDE_MODE) && containerWidth >= panelWidth * 2 + WIDE_EDITOR_WIDTH;
+  if (!editorView) {
+    return editorNotFullWidth && (hasSpaceForPanel || hasSpaceForWideBreakoutsAndPanel);
+  } else {
+    // when custom table width feature flag is on,
+    // there are scenarios when a table has attr layout default, but width is in full-width or very wide
+    // but in this case we still want the shouldPanelBePositionedOverEditor return false
+    // previous logic is returning false when table layout default
+    // but when custom table width feature flag is one, we want to return false whenever there is a table in the doc
+    var isTableInDoc = checkTableExistsInDoc(editorView);
+    return editorNotFullWidth && (hasSpaceForPanel || hasSpaceForWideBreakoutsAndPanel) && !isTableInDoc;
+  }
+};
+var panelHidden = (0, _react2.css)({
+  width: 0
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var panel = exports.panel = (0, _react2.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  width: "".concat(_editorSharedStyles.akEditorContextPanelWidth, "px"),
+  height: '100%',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  transition: "width ".concat(ANIM_SPEED_MS, "ms ").concat(_editorSharedStyles.akEditorSwoopCubicBezier),
+  overflow: 'hidden',
+  boxShadow: "inset 2px 0 0 0 ".concat("var(--ds-border, ".concat(_colors.N30, ")"))
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var content = exports.content = (0, _react2.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  transition: "width 600ms ".concat(_editorSharedStyles.akEditorSwoopCubicBezier),
+  boxSizing: 'border-box',
+  padding: "var(--ds-space-200, 16px)".concat(" ", "var(--ds-space-200, 16px)", " 0px"),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  width: "".concat(_editorSharedStyles.akEditorContextPanelWidth, "px"),
+  height: '100%',
+  overflowY: 'auto'
+});
+var SwappableContentArea = exports.SwappableContentArea = /*#__PURE__*/function (_React$PureComponent) {
+  (0, _inherits2.default)(SwappableContentArea, _React$PureComponent);
+  var _super = _createSuper(SwappableContentArea);
+  function SwappableContentArea() {
+    var _this;
+    (0, _classCallCheck2.default)(this, SwappableContentArea);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
+      mounted: false,
+      currentPluginContent: undefined
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "focusEditor", function () {
+      var editorView = _this.props.editorView;
+      if (editorView && !editorView.hasFocus()) {
+        var _editorView$focus;
+        (_editorView$focus = editorView.focus) === null || _editorView$focus === void 0 || _editorView$focus.call(editorView);
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "showPluginContent", function () {
+      var pluginContent = _this.props.pluginContent;
+      var currentPluginContent = _this.state.currentPluginContent;
+      if (!currentPluginContent) {
+        return;
+      }
+      return (0, _react2.jsx)(_Transition.default, {
+        timeout: _this.state.mounted ? ANIM_SPEED_MS : 0,
+        in: !!pluginContent,
+        mountOnEnter: true,
+        unmountOnExit: true,
+        onExited: function onExited() {
+          return _this.unsetPluginContent();
+        }
+      }, currentPluginContent);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "showProvidedContent", function (isVisible) {
+      var children = _this.props.children;
+      if (!children) {
+        return;
+      }
+      return (0, _react2.jsx)(_Transition.default, {
+        timeout: _this.state.mounted ? ANIM_SPEED_MS : 0,
+        in: isVisible,
+        mountOnEnter: true,
+        unmountOnExit: true,
+        onExiting: _this.focusEditor
+      }, children);
+    });
+    return _this;
+  }
+  (0, _createClass2.default)(SwappableContentArea, [{
+    key: "unsetPluginContent",
+    value: function unsetPluginContent() {
+      this.setState({
+        currentPluginContent: undefined
+      });
+    }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      // use this to trigger an animation
+      this.setState({
+        mounted: true
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var _this$props = this.props,
+        editorWidth = _this$props.editorWidth,
+        editorView = _this$props.editorView;
+      var width = _editorSharedStyles.akEditorContextPanelWidth;
+      var userVisible = !!this.props.visible;
+      var visible = userVisible || !!this.state.currentPluginContent;
+      return (0, _react2.jsx)(_ui.ContextPanelConsumer, null, function (_ref) {
+        var broadcastWidth = _ref.broadcastWidth,
+          broadcastPosition = _ref.broadcastPosition,
+          positionedOverEditor = _ref.positionedOverEditor;
+        var contextPanelWidth = visible ? width : 0;
+        var newPosition = editorWidth ? shouldPanelBePositionedOverEditor(editorWidth, width, editorView) : false;
+        broadcastWidth(contextPanelWidth);
+        (newPosition && visible) !== positionedOverEditor && broadcastPosition(newPosition && visible);
+        return (0, _react2.jsx)("div", {
+          css: [panel, !visible && panelHidden,
+          /**
+           * Only use absolute position for panel when screen size is wide enough
+           * to accommodate breakout content and editor is not in wide mode.
+           */
+          newPosition && absolutePanelStyles],
+          "data-testid": "context-panel-panel",
+          "aria-labelledby": "context-panel-title",
+          role: "dialog"
+        }, (0, _react2.jsx)("div", {
+          "data-testid": "context-panel-content",
+          css: [content, !visible && panelHidden]
+        }, _this2.showPluginContent() || _this2.showProvidedContent(userVisible)));
+      });
+    }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(props, state) {
+      if (props.pluginContent !== state.currentPluginContent) {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          currentPluginContent: props.pluginContent
+        });
+      }
+      return null;
+    }
+  }]);
+  return SwappableContentArea;
+}(_react.default.PureComponent); // TODO: ED-17837 We have this workaround because we do
+// not have access to the pluginInjectionApi at this location.
+// It might be that we need to inject the pluginInjectionApi
+// via context so that we can use it in this file (similar to
+// WithEditorActions). To be investigated further.
+// @ts-ignore
+var widthPluginKey = {
+  key: 'widthPlugin$',
+  getState: function getState(state) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return state['widthPlugin$'];
+  }
+};
+
+// @ts-ignore
+var contextPanelPluginKey = {
+  key: 'contextPanelPluginKey$',
+  getState: function getState(state) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return state['contextPanelPluginKey$'];
+  }
+};
+function ContextPanelWithActions(_ref2) {
+  var actions = _ref2.actions,
+    props = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+  var eventDispatcher = actions._privateGetEventDispatcher();
+  var editorView = actions._privateGetEditorView();
+  var _useContext = (0, _react.useContext)(_ui.WidthContext),
+    width = _useContext.width;
+  if (!eventDispatcher) {
+    return (0, _react2.jsx)(SwappableContentArea, (0, _extends2.default)({
+      editorView: editorView
+    }, props));
+  }
+  return (
+    // @ts-ignore - 'WithPluginState' cannot be used as a JSX component.
+    // This error was introduced after upgrading to TypeScript 5
+    (0, _react2.jsx)(_withPluginState.WithPluginState, {
+      eventDispatcher: eventDispatcher,
+      plugins: {
+        contextPanel: contextPanelPluginKey,
+        widthState: widthPluginKey
+      },
+      render: function render(_ref3) {
+        var contextPanel = _ref3.contextPanel,
+          widthState = _ref3.widthState;
+        var firstContent = contextPanel && contextPanel.contents.find(Boolean);
+        var editorWidth = _objectSpread(_objectSpread({}, widthState), {}, {
+          containerWidth: width,
+          contentBreakoutModes: editorView ? (0, _document.getChildBreakoutModes)(editorView.state.doc, editorView.state.schema) : []
+        });
+        return (0, _react2.jsx)(SwappableContentArea, (0, _extends2.default)({}, props, {
+          editorView: editorView,
+          pluginContent: firstContent,
+          editorWidth: editorWidth
+        }));
+      }
+    })
+  );
+}
+function ContextPanel(props) {
+  return (0, _react2.jsx)(_WithEditorActions.default, {
+    render: function render(actions) {
+      return (0, _react2.jsx)(ContextPanelWithActions, (0, _extends2.default)({
+        actions: actions
+      }, props));
+    }
+  });
+}