@atlaskit/editor-core 195.6.2 → 195.7.0

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

@@ -1,15 +1,14 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.ContextPanel = ContextPanel;
 exports.content = exports.SwappableContentArea = void 0;
-exports.default = ContextPanel;
-exports.shouldPanelBePositionedOverEditor = exports.panel = void 0;
+exports.default = ContextPanelDefault;
+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"));
@@ -17,19 +16,15 @@ 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 _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _Transition = _interopRequireDefault(require("react-transition-group/Transition"));
+var _hooks = require("@atlaskit/editor-common/hooks");
 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 _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 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; }
+var _deprecated = _interopRequireDefault(require("./deprecated"));
 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); }; }
@@ -38,41 +33,6 @@ 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 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
 });
@@ -114,11 +74,11 @@ var SwappableContentArea = exports.SwappableContentArea = /*#__PURE__*/function
       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);
-      }
+      var _editorAPI$core;
+      var editorAPI = _this.props.editorAPI;
+      editorAPI === null || editorAPI === void 0 || (_editorAPI$core = editorAPI.core) === null || _editorAPI$core === void 0 || _editorAPI$core.actions.focus({
+        scrollIntoView: false
+      });
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "showPluginContent", function () {
       var pluginContent = _this.props.pluginContent;
@@ -170,27 +130,15 @@ var SwappableContentArea = exports.SwappableContentArea = /*#__PURE__*/function
     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 broadcastWidth = _ref.broadcastWidth;
         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],
+          css: [panel, !visible && panelHidden],
           "data-testid": "context-panel-panel",
           "aria-labelledby": "context-panel-title",
           role: "dialog"
@@ -212,72 +160,17 @@ var SwappableContentArea = exports.SwappableContentArea = /*#__PURE__*/function
     }
   }]);
   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
-        }));
-      }
-    })
-  );
-}
+}(_react.default.PureComponent);
 function ContextPanel(props) {
-  return (0, _react2.jsx)(_WithEditorActions.default, {
-    render: function render(actions) {
-      return (0, _react2.jsx)(ContextPanelWithActions, (0, _extends2.default)({
-        actions: actions
-      }, props));
-    }
-  });
+  var _contextPanelState$co;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(props.editorAPI, ['contextPanel']),
+    contextPanelState = _useSharedPluginState.contextPanelState;
+  var firstContent = contextPanelState && (contextPanelState === null || contextPanelState === void 0 || (_contextPanelState$co = contextPanelState.contents) === null || _contextPanelState$co === void 0 ? void 0 : _contextPanelState$co.find(Boolean));
+  return (0, _react2.jsx)(SwappableContentArea, (0, _extends2.default)({}, props, {
+    editorAPI: props.editorAPI,
+    pluginContent: firstContent
+  }));
+}
+function ContextPanelDefault(props) {
+  return (0, _platformFeatureFlags.fg)('platform_editor_context-panel_simplify_behaviour') ? (0, _react2.jsx)(ContextPanel, props) : (0, _react2.jsx)(_deprecated.default, props);
 }

package/dist/cjs/version-wrapper.js

@@ -5,4 +5,4 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.version = exports.name = void 0;
 var name = exports.name = "@atlaskit/editor-core";
-var version = exports.version = "195.6.2";
+var version = exports.version = "195.7.0";

package/dist/es2019/index.js

@@ -7,7 +7,12 @@ export { default as WithHelpTrigger } from './ui/WithHelpTrigger';
 export { default as CollapsedEditor } from './ui/CollapsedEditor';
 export { default as ToolbarHelp } from './ui/ToolbarHelp';
 export { default as ToolbarFeedback } from './ui/ToolbarFeedback';
-export { default as ContextPanel } from './ui/ContextPanel';
+export {
+/**
+ * @deprecated
+ * DO NOT USE THIS WILL BE REMOVED SOON. This was intended for internal usage only
+ */
+default as ContextPanel } from './ui/ContextPanel/deprecated';
 export { EmojiResource } from '@atlaskit/emoji/resource';
 export { MentionResource } from '@atlaskit/mention/resource';
 export { TeamMentionResource } from '@atlaskit/mention/team-resource';

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

@@ -90,6 +90,7 @@ export const FullPageEditor = props => {
     featureFlags: props.featureFlags,
     hideAvatarGroup: props.hideAvatarGroup
   }), jsx(FullPageContentArea, {
+    editorAPI: editorAPI,
     ref: scrollContentContainerRef,
     appearance: props.appearance,
     contentComponents: props.contentComponents,

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

@@ -34,7 +34,9 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
   }), []);
   return jsx(WidthConsumer, null, ({
     width
-  }) => jsx(ContextPanelConsumer, null, ({
+  }) =>
+  // Cleaned up with: platform_editor_context-panel_simplify_behaviour
+  jsx(ContextPanelConsumer, null, ({
     positionedOverEditor
   }) => {
     var _contentAreaRef$curre;
@@ -93,6 +95,7 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
     }), props.editorDOMElement, !!props.customContentComponents && 'after' in props.customContentComponents ? props.customContentComponents.after : null)))), jsx("div", {
       css: sidebarArea
     }, props.contextPanel || jsx(ContextPanel, {
+      editorAPI: props.editorAPI,
       visible: false
     })));
   }));

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

@@ -0,0 +1,258 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React, { useContext } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import Transition from 'react-transition-group/Transition';
+import { ContextPanelConsumer, WidthContext } from '@atlaskit/editor-common/ui';
+import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
+import { findChildrenByType } from '@atlaskit/editor-prosemirror/utils';
+import { akEditorBreakoutPadding, akEditorContextPanelWidth, akEditorDefaultLayoutWidth, akEditorSwoopCubicBezier, akEditorWideLayoutWidth, FULL_PAGE_EDITOR_TOOLBAR_HEIGHT } from '@atlaskit/editor-shared-styles';
+import { N30 } from '@atlaskit/theme/colors';
+import { getChildBreakoutModes } from '../../utils/document';
+import WithEditorActions from '../WithEditorActions';
+const ANIM_SPEED_MS = 500;
+const EDITOR_WIDTH = akEditorDefaultLayoutWidth + akEditorBreakoutPadding;
+const WIDE_EDITOR_WIDTH = akEditorWideLayoutWidth + akEditorBreakoutPadding;
+const FULLWIDTH_MODE = 'full-width';
+const WIDE_MODE = 'wide';
+const absolutePanelStyles = 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% - ${FULL_PAGE_EDITOR_TOOLBAR_HEIGHT()})`
+});
+const checkTableExistsInDoc = editorView => {
+  const tableNodeSchema = editorView.state.schema.nodes.table;
+  let findResult = findChildrenByType(editorView.state.doc, tableNodeSchema);
+  return findResult.length > 0;
+};
+export const shouldPanelBePositionedOverEditor = (editorWidth, panelWidth, editorView) => {
+  const {
+    lineLength,
+    containerWidth = 0,
+    contentBreakoutModes
+  } = editorWidth;
+  const editorNotFullWidth = !(lineLength && lineLength > akEditorDefaultLayoutWidth);
+  const hasSpaceForPanel = !contentBreakoutModes.length && containerWidth >= panelWidth * 2 + EDITOR_WIDTH;
+  const 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
+    const isTableInDoc = checkTableExistsInDoc(editorView);
+    return editorNotFullWidth && (hasSpaceForPanel || hasSpaceForWideBreakoutsAndPanel) && !isTableInDoc;
+  }
+};
+const panelHidden = css({
+  width: 0
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const panel = 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: `${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 ${ANIM_SPEED_MS}ms ${akEditorSwoopCubicBezier}`,
+  overflow: 'hidden',
+  boxShadow: `inset 2px 0 0 0 ${`var(--ds-border, ${N30})`}`
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const content = 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 ${akEditorSwoopCubicBezier}`,
+  boxSizing: 'border-box',
+  padding: `${"var(--ds-space-200, 16px)"} ${"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: `${akEditorContextPanelWidth}px`,
+  height: '100%',
+  overflowY: 'auto'
+});
+export class SwappableContentArea extends React.PureComponent {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "state", {
+      mounted: false,
+      currentPluginContent: undefined
+    });
+    _defineProperty(this, "focusEditor", () => {
+      const {
+        editorView
+      } = this.props;
+      if (editorView && !editorView.hasFocus()) {
+        var _editorView$focus;
+        (_editorView$focus = editorView.focus) === null || _editorView$focus === void 0 ? void 0 : _editorView$focus.call(editorView);
+      }
+    });
+    _defineProperty(this, "showPluginContent", () => {
+      const {
+        pluginContent
+      } = this.props;
+      const {
+        currentPluginContent
+      } = this.state;
+      if (!currentPluginContent) {
+        return;
+      }
+      return jsx(Transition, {
+        timeout: this.state.mounted ? ANIM_SPEED_MS : 0,
+        in: !!pluginContent,
+        mountOnEnter: true,
+        unmountOnExit: true,
+        onExited: () => this.unsetPluginContent()
+      }, currentPluginContent);
+    });
+    _defineProperty(this, "showProvidedContent", isVisible => {
+      const {
+        children
+      } = this.props;
+      if (!children) {
+        return;
+      }
+      return jsx(Transition, {
+        timeout: this.state.mounted ? ANIM_SPEED_MS : 0,
+        in: isVisible,
+        mountOnEnter: true,
+        unmountOnExit: true,
+        onExiting: this.focusEditor
+      }, children);
+    });
+  }
+  static getDerivedStateFromProps(props, state) {
+    if (props.pluginContent !== state.currentPluginContent) {
+      return {
+        ...state,
+        currentPluginContent: props.pluginContent
+      };
+    }
+    return null;
+  }
+  unsetPluginContent() {
+    this.setState({
+      currentPluginContent: undefined
+    });
+  }
+  componentDidMount() {
+    // use this to trigger an animation
+    this.setState({
+      mounted: true
+    });
+  }
+  render() {
+    const {
+      editorWidth,
+      editorView
+    } = this.props;
+    const width = akEditorContextPanelWidth;
+    const userVisible = !!this.props.visible;
+    const visible = userVisible || !!this.state.currentPluginContent;
+    return jsx(ContextPanelConsumer, null, ({
+      broadcastWidth,
+      broadcastPosition,
+      positionedOverEditor
+    }) => {
+      const contextPanelWidth = visible ? width : 0;
+      const newPosition = editorWidth ? shouldPanelBePositionedOverEditor(editorWidth, width, editorView) : false;
+      broadcastWidth(contextPanelWidth);
+      (newPosition && visible) !== positionedOverEditor && broadcastPosition(newPosition && visible);
+      return 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"
+      }, jsx("div", {
+        "data-testid": "context-panel-content",
+        css: [content, !visible && panelHidden]
+      }, this.showPluginContent() || this.showProvidedContent(userVisible)));
+    });
+  }
+}
+
+// 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
+const widthPluginKey = {
+  key: 'widthPlugin$',
+  getState: state => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return state['widthPlugin$'];
+  }
+};
+
+// @ts-ignore
+const contextPanelPluginKey = {
+  key: 'contextPanelPluginKey$',
+  getState: state => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return state['contextPanelPluginKey$'];
+  }
+};
+function ContextPanelWithActions({
+  actions,
+  ...props
+}) {
+  const eventDispatcher = actions._privateGetEventDispatcher();
+  const editorView = actions._privateGetEditorView();
+  const {
+    width
+  } = useContext(WidthContext);
+  if (!eventDispatcher) {
+    return jsx(SwappableContentArea, _extends({
+      editorView: editorView
+    }, props));
+  }
+  return (
+    // @ts-ignore - 'WithPluginState' cannot be used as a JSX component.
+    // This error was introduced after upgrading to TypeScript 5
+    jsx(WithPluginState, {
+      eventDispatcher: eventDispatcher,
+      plugins: {
+        contextPanel: contextPanelPluginKey,
+        widthState: widthPluginKey
+      },
+      render: ({
+        contextPanel,
+        widthState
+      }) => {
+        const firstContent = contextPanel && contextPanel.contents.find(Boolean);
+        const editorWidth = {
+          ...widthState,
+          containerWidth: width,
+          contentBreakoutModes: editorView ? getChildBreakoutModes(editorView.state.doc, editorView.state.schema) : []
+        };
+        return jsx(SwappableContentArea, _extends({}, props, {
+          editorView: editorView,
+          pluginContent: firstContent,
+          editorWidth: editorWidth
+        }));
+      }
+    })
+  );
+}
+export default function ContextPanel(props) {
+  return jsx(WithEditorActions, {
+    render: actions => jsx(ContextPanelWithActions, _extends({
+      actions: actions
+    }, props))
+  });
+}