@atlaskit/editor-plugin-extension 4.1.1 → 5.0.0

package/dist/esm/ui/ConfigPanel/DescriptionSummary.js

@@ -0,0 +1,41 @@
+import React, { Fragment } from 'react';
+import { useIntl } from 'react-intl-next';
+import { configPanelMessages as messages } from '@atlaskit/editor-common/extensions';
+import { Box, Text, xcss } from '@atlaskit/primitives';
+import { HelpLink } from './HelpLink';
+var descriptionStyles = xcss({
+  marginBottom: 'space.300'
+});
+var helpLinkStyles = xcss({
+  paddingTop: 'space.150'
+});
+export function DescriptionSummary(_ref) {
+  var extensionManifest = _ref.extensionManifest;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var description = extensionManifest.description,
+    documentationUrl = extensionManifest.documentationUrl;
+  // Use a temporary allowlist of top 3 macros to test out a new "Documentation" CTA ("Need help?")
+  // This will be removed when Top 5 Modernized Macros updates are rolled out
+  var modernizedMacrosList = ['children', 'recently-updated', 'excerpt'];
+  var enableHelpCTA = modernizedMacrosList.includes(extensionManifest.key);
+  return /*#__PURE__*/React.createElement(Fragment, null, (description || documentationUrl) && /*#__PURE__*/React.createElement(Box, {
+    xcss: descriptionStyles
+  }, /*#__PURE__*/React.createElement(Text, {
+    as: "p",
+    testId: "config-panel-header-description"
+  }, description && /*#__PURE__*/React.createElement(Fragment, null,
+  // Ignored via go/ees005
+  // eslint-disable-next-line require-unicode-regexp
+  description.replace(/([^.])$/, '$1.'), ' '), documentationUrl && (enableHelpCTA ? /*#__PURE__*/React.createElement(Box, {
+    xcss: helpLinkStyles
+  }, /*#__PURE__*/React.createElement(Text, {
+    as: "p"
+  }, /*#__PURE__*/React.createElement(HelpLink, {
+    documentationUrl: documentationUrl,
+    label: formatMessage(messages.help)
+  }))) : /*#__PURE__*/React.createElement(HelpLink, {
+    documentationUrl: documentationUrl,
+    label: formatMessage(messages.documentation)
+  })))));
+}

package/dist/esm/ui/ConfigPanel/Header/HeaderAfterIconElement.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Box, Flex, xcss } from '@atlaskit/primitives';
+import { withExtensionManifest } from '../withExtensionManifest';
+var itemBodyStyles = xcss({
+  display: 'flex',
+  flexDirection: 'row',
+  flexWrap: 'nowrap',
+  justifyContent: 'space-between',
+  margin: 'space.200',
+  flexGrow: 3
+});
+var itemTextStyles = xcss({
+  maxWidth: '100%',
+  whiteSpace: 'initial'
+});
+var summaryStyles = xcss({
+  font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
+  color: 'color.text.subtlest',
+  marginTop: 'space.050',
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis'
+});
+function HeaderAfterIconElement(_ref) {
+  var extensionManifest = _ref.extensionManifest;
+  var title = extensionManifest.title;
+  var summary = extensionManifest.summary;
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: itemBodyStyles
+  }, summary ? /*#__PURE__*/React.createElement(Box, {
+    xcss: itemTextStyles
+  }, /*#__PURE__*/React.createElement("div", {
+    id: "context-panel-title",
+    "data-testid": "context-panel-title"
+  }, title), /*#__PURE__*/React.createElement(Box, {
+    xcss: summaryStyles
+  }, summary)) : /*#__PURE__*/React.createElement(Flex, {
+    direction: "column",
+    alignItems: "center",
+    testId: "context-panel-title"
+  }, title));
+}
+export default withExtensionManifest(HeaderAfterIconElement);

package/dist/esm/ui/ConfigPanel/Header/HeaderIcon.js

@@ -0,0 +1,40 @@
+import React, { Suspense, lazy, useMemo } from 'react';
+import { Box, xcss } from '@atlaskit/primitives';
+import { withExtensionManifest } from '../withExtensionManifest';
+var iconWidth = '40px';
+var itemIconStyles = xcss({
+  width: iconWidth,
+  height: iconWidth,
+  overflow: 'hidden',
+  border: "1px solid ".concat("var(--ds-border, rgba(223, 225, 229, 0.5))"),
+  borderRadius: "var(--ds-border-radius, 3px)",
+  boxSizing: 'border-box',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center'
+});
+function HeaderIcon(_ref) {
+  var extensionManifest = _ref.extensionManifest;
+  var icon = extensionManifest.icons['48'];
+  var title = extensionManifest.title;
+  var ResolvedIcon = useMemo(function () {
+    return /*#__PURE__*/lazy(function () {
+      return icon().then(function (Cmp) {
+        if ('default' in Cmp) {
+          return Cmp;
+        }
+        return {
+          default: Cmp
+        };
+      });
+    });
+  }, [icon]);
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: itemIconStyles
+  }, /*#__PURE__*/React.createElement(Suspense, {
+    fallback: null
+  }, /*#__PURE__*/React.createElement(ResolvedIcon, {
+    label: title
+  })));
+}
+export default withExtensionManifest(HeaderIcon);

package/dist/esm/ui/ConfigPanel/Header.js

@@ -14,6 +14,7 @@ import CrossIcon from '@atlaskit/icon/core/migration/close--cross';
 import { Box, Text, xcss } from '@atlaskit/primitives';
 import { N200 } from '@atlaskit/theme/colors';
 import { borderRadius } from '@atlaskit/theme/constants';
+import { HelpLink } from './HelpLink';
 var iconWidth = 40;
 var buttonWidth = 40;
 var margin = 16;
@@ -152,14 +153,4 @@ var Header = function Header(_ref) {
     label: intl.formatMessage(messages.documentation)
   })))));
 };
-var HelpLink = function HelpLink(_ref2) {
-  var documentationUrl = _ref2.documentationUrl,
-    label = _ref2.label;
-  return jsx("a", {
-    target: "_blank",
-    rel: "noopener noreferrer",
-    href: documentationUrl,
-    "data-testid": "config-panel-header-documentation-link"
-  }, label);
-};
 export default injectIntl(Header);

package/dist/esm/ui/ConfigPanel/HelpLink.js

@@ -0,0 +1,15 @@
+import React from 'react';
+export var HelpLink = function HelpLink(_ref) {
+  var documentationUrl = _ref.documentationUrl,
+    label = _ref.label;
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @atlaskit/design-system/no-html-anchor
+    React.createElement("a", {
+      target: "_blank",
+      rel: "noopener noreferrer",
+      href: documentationUrl,
+      "data-testid": "config-panel-header-documentation-link"
+    }, label)
+  );
+};

package/dist/esm/ui/ConfigPanel/constants.js

@@ -4,4 +4,6 @@ export var ALLOWED_LOGGED_MACRO_PARAMS = {
   'recently-updated': ['width', 'types', 'max', 'theme', 'showProfilePic', 'hideHeading'],
   excerpt: ['hidden']
 };
-export var ALLOWED_PARAM_TYPES = ['enum', 'number', 'boolean'];
+export var ALLOWED_PARAM_TYPES = ['enum', 'number', 'boolean'];
+export var CONFIG_PANEL_WIDTH = 320;
+export var CONFIG_PANEL_ID = 'extensions-panel';

package/dist/esm/ui/ConfigPanel/withExtensionManifest.js

@@ -0,0 +1,26 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["extensionKey", "extensionProvider", "extensionType"];
+import React from 'react';
+import { useStateFromPromise } from './use-state-from-promise';
+export function withExtensionManifest(WrappedComponent) {
+  return function WithExtensionManifest(props) {
+    var extensionKey = props.extensionKey,
+      extensionProvider = props.extensionProvider,
+      extensionType = props.extensionType,
+      restProps = _objectWithoutProperties(props, _excluded);
+    var _useStateFromPromise = useStateFromPromise(function () {
+        return extensionProvider.getExtension(extensionType, extensionKey);
+      }, [extensionProvider, extensionType, extensionKey]),
+      _useStateFromPromise2 = _slicedToArray(_useStateFromPromise, 1),
+      extensionManifest = _useStateFromPromise2[0];
+    return extensionManifest ?
+    /*#__PURE__*/
+    // Ignored via go/ees005
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any, react/jsx-props-no-spreading
+    React.createElement(WrappedComponent, _extends({
+      extensionManifest: extensionManifest
+    }, restProps)) : null;
+  };
+}

package/dist/esm/ui/useConfigPanelPluginHook.js

@@ -0,0 +1,236 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { useEffect } from 'react';
+import { configPanelMessages, getExtensionKeyAndNodeKey } from '@atlaskit/editor-common/extensions';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { Box } from '@atlaskit/primitives';
+import { clearEditingContext, forceAutoSave } from '../editor-commands/commands';
+import { getPluginState } from '../pm-plugins/plugin-factory';
+import { getSelectedExtension } from '../pm-plugins/utils';
+import ConfigPanelLoader from './ConfigPanel/ConfigPanelLoader';
+import { CONFIG_PANEL_ID, CONFIG_PANEL_WIDTH } from './ConfigPanel/constants';
+import HeaderAfterIconElement from './ConfigPanel/Header/HeaderAfterIconElement';
+import HeaderIcon from './ConfigPanel/Header/HeaderIcon';
+import { onChangeAction } from './context-panel';
+import { SaveIndicator } from './SaveIndicator/SaveIndicator';
+export function useConfigPanelPluginHook(_ref) {
+  var editorView = _ref.editorView,
+    api = _ref.api;
+  var editorState = editorView.state;
+  var _useSharedPluginState = useSharedPluginState(api, ['extension']),
+    extensionState = _useSharedPluginState.extensionState;
+  useEffect(function () {
+    var nodeWithPos = getSelectedExtension(editorState, true);
+    // Adding checks to bail out early
+    if (!nodeWithPos || !extensionState) {
+      hideConfigPanel(api);
+      return;
+    }
+    if (extensionState) {
+      var showContextPanel = extensionState.showContextPanel,
+        extensionProvider = extensionState.extensionProvider,
+        processParametersAfter = extensionState.processParametersAfter;
+      if (showContextPanel && extensionProvider && processParametersAfter) {
+        showConfigPanel({
+          api: api,
+          editorView: editorView,
+          extensionProvider: extensionProvider,
+          nodeWithPos: nodeWithPos
+        });
+      } else {
+        hideConfigPanel(api);
+      }
+    }
+  }, [api, editorState, editorView, extensionState]);
+}
+export function hideConfigPanel(api) {
+  var _api$contextPanel;
+  var closePanelById = api === null || api === void 0 || (_api$contextPanel = api.contextPanel) === null || _api$contextPanel === void 0 || (_api$contextPanel = _api$contextPanel.actions) === null || _api$contextPanel === void 0 ? void 0 : _api$contextPanel.closePanelById;
+  if (closePanelById) {
+    closePanelById(CONFIG_PANEL_ID);
+  }
+}
+export function showConfigPanel(_ref2) {
+  var _api$contextPanel2;
+  var api = _ref2.api,
+    editorView = _ref2.editorView,
+    extensionProvider = _ref2.extensionProvider,
+    nodeWithPos = _ref2.nodeWithPos;
+  var showContextPanel = api === null || api === void 0 || (_api$contextPanel2 = api.contextPanel) === null || _api$contextPanel2 === void 0 || (_api$contextPanel2 = _api$contextPanel2.actions) === null || _api$contextPanel2 === void 0 ? void 0 : _api$contextPanel2.showPanel;
+  if (showContextPanel) {
+    var nodeAttrs = nodeWithPos === null || nodeWithPos === void 0 ? void 0 : nodeWithPos.node.attrs;
+    var extensionType = nodeAttrs === null || nodeAttrs === void 0 ? void 0 : nodeAttrs.extensionType;
+    var extensionKey = nodeAttrs === null || nodeAttrs === void 0 ? void 0 : nodeAttrs.extensionKey;
+
+    /**
+     * Loading extension manifest fails when using
+     * 	extensionKey directly from nodeAttrs.
+     * Always get extensionKey from getExtensionKeyAndNodeKey to load
+     * 	extension manifest successfully.
+     */
+    var _getExtensionKeyAndNo = getExtensionKeyAndNodeKey(extensionKey, extensionType),
+      _getExtensionKeyAndNo2 = _slicedToArray(_getExtensionKeyAndNo, 2),
+      extKey = _getExtensionKeyAndNo2[0],
+      _ = _getExtensionKeyAndNo2[1];
+    var HeadeIconWrapper = function HeadeIconWrapper() {
+      return /*#__PURE__*/React.createElement(HeaderIcon, {
+        extensionProvider: extensionProvider,
+        extensionKey: extKey,
+        extensionType: extensionType
+      });
+    };
+    var HeaderAfterIconElementWrapper = function HeaderAfterIconElementWrapper() {
+      return /*#__PURE__*/React.createElement(HeaderAfterIconElement, {
+        extensionProvider: extensionProvider,
+        extensionKey: extKey,
+        extensionType: extensionType
+      });
+    };
+    var BodyComponent = getContextPanelBodyComponent({
+      api: api,
+      editorView: editorView,
+      extensionProvider: extensionProvider,
+      nodeWithPos: nodeWithPos
+    });
+    showContextPanel({
+      id: CONFIG_PANEL_ID,
+      headerComponentElements: {
+        HeaderIcon: HeadeIconWrapper,
+        headerLabel: configPanelMessages.objectSidebarPanelHeaderLabel,
+        HeaderAfterIconElement: HeaderAfterIconElementWrapper
+      },
+      BodyComponent: BodyComponent,
+      closeOptions: {
+        canClosePanel: function canClosePanel() {
+          var extensionState = getPluginState(editorView.state);
+          /**
+           * 	If context panel is open, then first update extension plugin state.
+           * 	Updating extension plugin state will trigger useEffect in useConfigPanelPluginHook,
+           * 		which will call hideConfigPanel.
+           */
+          if (extensionState !== null && extensionState !== void 0 && extensionState.showContextPanel) {
+            startClosingConfigPanel({
+              api: api,
+              editorView: editorView
+            });
+            return false;
+          }
+
+          // Return true if extension plugin state has been updated and hideConfigPanel has been called.
+          return true;
+        }
+      }
+    }, 'push', CONFIG_PANEL_WIDTH);
+  }
+}
+export function startClosingConfigPanel(_x) {
+  return _startClosingConfigPanel.apply(this, arguments);
+}
+function _startClosingConfigPanel() {
+  _startClosingConfigPanel = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(_ref3) {
+    var _api$contextPanel3;
+    var api, editorView, applyChange;
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          api = _ref3.api, editorView = _ref3.editorView;
+          applyChange = api === null || api === void 0 || (_api$contextPanel3 = api.contextPanel) === null || _api$contextPanel3 === void 0 ? void 0 : _api$contextPanel3.actions.applyChange; // Even if the save failed, we should proceed with closing the panel
+          clearEditingContext(applyChange)(editorView.state, editorView.dispatch);
+          _context2.prev = 3;
+          _context2.next = 6;
+          return new Promise(function (resolve, reject) {
+            forceAutoSave(applyChange)(resolve, reject)(editorView.state, editorView.dispatch);
+          });
+        case 6:
+          _context2.next = 11;
+          break;
+        case 8:
+          _context2.prev = 8;
+          _context2.t0 = _context2["catch"](3);
+          // Even if the save failed, we should proceed with closing the panel
+          // eslint-disable-next-line no-console
+          console.error("Autosave failed with error", _context2.t0);
+        case 11:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2, null, [[3, 8]]);
+  }));
+  return _startClosingConfigPanel.apply(this, arguments);
+}
+export var getContextPanelBodyComponent = function getContextPanelBodyComponent(_ref4) {
+  var _api$featureFlags;
+  var api = _ref4.api,
+    editorView = _ref4.editorView,
+    extensionProvider = _ref4.extensionProvider,
+    nodeWithPos = _ref4.nodeWithPos;
+  var featureFlags = (api === null || api === void 0 || (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.sharedState.currentState()) || {};
+  var editorState = editorView.state;
+  var extensionState = getPluginState(editorState);
+  var autoSaveResolve = extensionState.autoSaveResolve,
+    autoSaveReject = extensionState.autoSaveReject,
+    processParametersBefore = extensionState.processParametersBefore;
+  var _nodeWithPos$node$att = nodeWithPos.node.attrs,
+    extensionType = _nodeWithPos$node$att.extensionType,
+    extensionKey = _nodeWithPos$node$att.extensionKey,
+    parameters = _nodeWithPos$node$att.parameters;
+  var _getExtensionKeyAndNo3 = getExtensionKeyAndNodeKey(extensionKey, extensionType),
+    _getExtensionKeyAndNo4 = _slicedToArray(_getExtensionKeyAndNo3, 2),
+    extKey = _getExtensionKeyAndNo4[0],
+    nodeKey = _getExtensionKeyAndNo4[1];
+  var configParams = processParametersBefore ? processParametersBefore(parameters || {}) : parameters;
+  return function () {
+    return /*#__PURE__*/React.createElement(Box, {
+      padding: "space.200"
+    }, /*#__PURE__*/React.createElement(SaveIndicator, {
+      duration: 5000,
+      visible: true
+    }, function (_ref5) {
+      var onSaveStarted = _ref5.onSaveStarted,
+        onSaveEnded = _ref5.onSaveEnded;
+      return /*#__PURE__*/React.createElement(ConfigPanelLoader, {
+        api: api,
+        showHeader: true,
+        closeOnEsc: true,
+        extensionType: extensionType,
+        extensionKey: extKey,
+        nodeKey: nodeKey,
+        extensionParameters: parameters,
+        parameters: configParams,
+        extensionProvider: extensionProvider,
+        autoSaveTrigger: autoSaveResolve,
+        autoSaveReject: autoSaveReject,
+        onChange: ( /*#__PURE__*/function () {
+          var _ref6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(updatedParameters) {
+            return _regeneratorRuntime.wrap(function _callee$(_context) {
+              while (1) switch (_context.prev = _context.next) {
+                case 0:
+                  _context.next = 2;
+                  return onChangeAction(editorView, updatedParameters, parameters, nodeWithPos, onSaveStarted);
+                case 2:
+                  onSaveEnded();
+                  if (autoSaveResolve) {
+                    autoSaveResolve();
+                  }
+                case 4:
+                case "end":
+                  return _context.stop();
+              }
+            }, _callee);
+          }));
+          return function (_x2) {
+            return _ref6.apply(this, arguments);
+          };
+        }()),
+        onCancel: function onCancel() {
+          return startClosingConfigPanel({
+            api: api,
+            editorView: editorView
+          });
+        },
+        featureFlags: featureFlags
+      });
+    }));
+  };
+};

package/dist/types/extensionPluginType.d.ts

@@ -82,6 +82,8 @@ export type ExtensionPlugin = NextEditorPlugin<'extension', {
     dependencies: ExtensionPluginDependencies;
     sharedState: {
         showContextPanel: boolean | undefined;
+        extensionProvider?: ExtensionState['extensionProvider'];
+        processParametersAfter?: ExtensionState['processParametersAfter'];
     } | undefined;
     actions: ExtensionPluginActions;
 }>;

package/dist/types/ui/ConfigPanel/DescriptionSummary.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { ExtensionManifest } from '@atlaskit/editor-common/extensions';
+type DescriptionSummaryProps = {
+    extensionManifest: ExtensionManifest;
+};
+export declare function DescriptionSummary({ extensionManifest }: DescriptionSummaryProps): React.JSX.Element;
+export {};

package/dist/types/ui/ConfigPanel/Header/HeaderAfterIconElement.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+declare const _default: (props: {
+    extensionProvider: import("@atlaskit/editor-common/extensions").ExtensionProvider<any>;
+    extensionType: string;
+    extensionKey: string;
+}) => React.JSX.Element | null;
+export default _default;

package/dist/types/ui/ConfigPanel/Header/HeaderIcon.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+declare const _default: (props: {
+    extensionProvider: import("@atlaskit/editor-common/extensions").ExtensionProvider<any>;
+    extensionType: string;
+    extensionKey: string;
+}) => React.JSX.Element | null;
+export default _default;

package/dist/types/ui/ConfigPanel/HelpLink.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+type HelpLinkProps = {
+    documentationUrl: string;
+    label: string;
+};
+export declare const HelpLink: ({ documentationUrl, label }: HelpLinkProps) => React.JSX.Element;
+export {};

package/dist/types/ui/ConfigPanel/constants.d.ts

@@ -1,2 +1,4 @@
 export declare const ALLOWED_LOGGED_MACRO_PARAMS: Record<string, Array<string>>;
 export declare const ALLOWED_PARAM_TYPES: string[];
+export declare const CONFIG_PANEL_WIDTH = 320;
+export declare const CONFIG_PANEL_ID = "extensions-panel";

package/dist/types/ui/ConfigPanel/withExtensionManifest.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { ExtensionKey, ExtensionManifest, ExtensionProvider, ExtensionType } from '@atlaskit/editor-common/extensions';
+export declare function withExtensionManifest(WrappedComponent: React.ComponentType<{
+    extensionManifest: ExtensionManifest;
+}>): (props: {
+    extensionProvider: ExtensionProvider;
+    extensionType: ExtensionType;
+    extensionKey: ExtensionKey;
+}) => React.JSX.Element | null;

package/dist/types/ui/useConfigPanelPluginHook.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import { type ExtensionProvider } from '@atlaskit/editor-common/extensions';
+import { type ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { type ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
+import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { type ExtensionPlugin } from '../extensionPluginType';
+export declare function useConfigPanelPluginHook({ editorView, api, }: {
+    editorView: EditorView;
+    api?: ExtractInjectionAPI<ExtensionPlugin>;
+}): void;
+export declare function hideConfigPanel(api: ExtractInjectionAPI<ExtensionPlugin> | undefined): void;
+export declare function showConfigPanel({ api, editorView, extensionProvider, nodeWithPos, }: {
+    api: ExtractInjectionAPI<ExtensionPlugin> | undefined;
+    editorView: EditorView;
+    extensionProvider: ExtensionProvider;
+    nodeWithPos: ContentNodeWithPos;
+}): void;
+export declare function startClosingConfigPanel({ api, editorView, }: {
+    api: ExtractInjectionAPI<ExtensionPlugin> | undefined;
+    editorView: EditorView;
+}): Promise<void>;
+export declare const getContextPanelBodyComponent: ({ api, editorView, extensionProvider, nodeWithPos, }: {
+    api: ExtractInjectionAPI<ExtensionPlugin> | undefined;
+    editorView: EditorView;
+    extensionProvider: ExtensionProvider;
+    nodeWithPos: ContentNodeWithPos;
+}) => () => React.JSX.Element;

package/dist/types-ts4.5/extensionPluginType.d.ts

@@ -82,6 +82,8 @@ export type ExtensionPlugin = NextEditorPlugin<'extension', {
     dependencies: ExtensionPluginDependencies;
     sharedState: {
         showContextPanel: boolean | undefined;
+        extensionProvider?: ExtensionState['extensionProvider'];
+        processParametersAfter?: ExtensionState['processParametersAfter'];
     } | undefined;
     actions: ExtensionPluginActions;
 }>;

package/dist/types-ts4.5/ui/ConfigPanel/DescriptionSummary.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { ExtensionManifest } from '@atlaskit/editor-common/extensions';
+type DescriptionSummaryProps = {
+    extensionManifest: ExtensionManifest;
+};
+export declare function DescriptionSummary({ extensionManifest }: DescriptionSummaryProps): React.JSX.Element;
+export {};

package/dist/types-ts4.5/ui/ConfigPanel/Header/HeaderAfterIconElement.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+declare const _default: (props: {
+    extensionProvider: import("@atlaskit/editor-common/extensions").ExtensionProvider<any>;
+    extensionType: string;
+    extensionKey: string;
+}) => React.JSX.Element | null;
+export default _default;

package/dist/types-ts4.5/ui/ConfigPanel/Header/HeaderIcon.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+declare const _default: (props: {
+    extensionProvider: import("@atlaskit/editor-common/extensions").ExtensionProvider<any>;
+    extensionType: string;
+    extensionKey: string;
+}) => React.JSX.Element | null;
+export default _default;

package/dist/types-ts4.5/ui/ConfigPanel/HelpLink.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+type HelpLinkProps = {
+    documentationUrl: string;
+    label: string;
+};
+export declare const HelpLink: ({ documentationUrl, label }: HelpLinkProps) => React.JSX.Element;
+export {};

package/dist/types-ts4.5/ui/ConfigPanel/constants.d.ts

@@ -1,2 +1,4 @@
 export declare const ALLOWED_LOGGED_MACRO_PARAMS: Record<string, Array<string>>;
 export declare const ALLOWED_PARAM_TYPES: string[];
+export declare const CONFIG_PANEL_WIDTH = 320;
+export declare const CONFIG_PANEL_ID = "extensions-panel";

package/dist/types-ts4.5/ui/ConfigPanel/withExtensionManifest.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { ExtensionKey, ExtensionManifest, ExtensionProvider, ExtensionType } from '@atlaskit/editor-common/extensions';
+export declare function withExtensionManifest(WrappedComponent: React.ComponentType<{
+    extensionManifest: ExtensionManifest;
+}>): (props: {
+    extensionProvider: ExtensionProvider;
+    extensionType: ExtensionType;
+    extensionKey: ExtensionKey;
+}) => React.JSX.Element | null;

package/dist/types-ts4.5/ui/useConfigPanelPluginHook.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import { type ExtensionProvider } from '@atlaskit/editor-common/extensions';
+import { type ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { type ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
+import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { type ExtensionPlugin } from '../extensionPluginType';
+export declare function useConfigPanelPluginHook({ editorView, api, }: {
+    editorView: EditorView;
+    api?: ExtractInjectionAPI<ExtensionPlugin>;
+}): void;
+export declare function hideConfigPanel(api: ExtractInjectionAPI<ExtensionPlugin> | undefined): void;
+export declare function showConfigPanel({ api, editorView, extensionProvider, nodeWithPos, }: {
+    api: ExtractInjectionAPI<ExtensionPlugin> | undefined;
+    editorView: EditorView;
+    extensionProvider: ExtensionProvider;
+    nodeWithPos: ContentNodeWithPos;
+}): void;
+export declare function startClosingConfigPanel({ api, editorView, }: {
+    api: ExtractInjectionAPI<ExtensionPlugin> | undefined;
+    editorView: EditorView;
+}): Promise<void>;
+export declare const getContextPanelBodyComponent: ({ api, editorView, extensionProvider, nodeWithPos, }: {
+    api: ExtractInjectionAPI<ExtensionPlugin> | undefined;
+    editorView: EditorView;
+    extensionProvider: ExtensionProvider;
+    nodeWithPos: ContentNodeWithPos;
+}) => () => React.JSX.Element;