@atlaskit/editor-plugin-extension 5.2.4 → 5.2.6

package/dist/cjs/ui/ConfigPanel/LoadingState.js

@@ -6,7 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
+var _extensions = require("@atlaskit/editor-common/extensions");
+var _sectionMessage = _interopRequireDefault(require("@atlaskit/section-message"));
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -18,7 +22,27 @@ var spinnerWrapperStyles = (0, _react.css)({
   justifyContent: 'center',
   marginTop: "var(--ds-space-800, 64px)"
 });
-var LoadingState = function LoadingState() {
+var errorWrapperStyles = (0, _react.css)({
+  marginTop: "var(--ds-space-400, 32px)" // Add some padding to the top to make sure we place this below the offline status banner
+});
+var LoadingStateWithErrorHandling = (0, _reactIntlNext.injectIntl)(function (props) {
+  if (props.error) {
+    return (0, _react.jsx)("div", {
+      css: errorWrapperStyles,
+      "data-testid": "ConfigPanelLoadingError"
+    }, (0, _react.jsx)(_sectionMessage.default, {
+      appearance: "error"
+    }, props.intl.formatMessage(_extensions.messages.panelLoadingError)));
+  }
+  return (0, _react.jsx)("div", {
+    css: spinnerWrapperStyles,
+    "data-testid": "ConfigPanelLoading"
+  }, (0, _react.jsx)(_spinner.default, {
+    size: "small",
+    interactionName: "config-panel-spinner"
+  }));
+});
+var LoadingStateWithoutErrorHandling = function LoadingStateWithoutErrorHandling() {
   return (0, _react.jsx)("div", {
     css: spinnerWrapperStyles,
     "data-testid": "ConfigPanelLoading"
@@ -27,4 +51,7 @@ var LoadingState = function LoadingState() {
     interactionName: "config-panel-spinner"
   }));
 };
+var LoadingState = function LoadingState(props) {
+  return (0, _experiments.editorExperiment)('platform_editor_offline_editing_web', true) ? LoadingStateWithErrorHandling(props) : LoadingStateWithoutErrorHandling();
+};
 var _default = exports.default = LoadingState;

package/dist/cjs/ui/useConfigPanelPluginHook.js

@@ -16,7 +16,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _extensions = require("@atlaskit/editor-common/extensions");
 var _hooks = require("@atlaskit/editor-common/hooks");
-var _primitives = require("@atlaskit/primitives");
+var _compiled = require("@atlaskit/primitives/compiled");
 var _commands = require("../editor-commands/commands");
 var _pluginFactory = require("../pm-plugins/plugin-factory");
 var _utils = require("../pm-plugins/utils");
@@ -203,7 +203,7 @@ var getContextPanelBodyComponent = exports.getContextPanelBodyComponent = functi
     nodeKey = _getExtensionKeyAndNo4[1];
   var configParams = processParametersBefore ? processParametersBefore(parameters || {}) : parameters;
   return function () {
-    return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
       padding: "space.200"
     }, /*#__PURE__*/_react.default.createElement(_SaveIndicator.SaveIndicator, {
       duration: 5000,

package/dist/es2019/extensionPlugin.js

@@ -170,7 +170,7 @@ export const extensionPlugin = ({
         hoverDecoration: api === null || api === void 0 ? void 0 : (_api$decorations = api.decorations) === null || _api$decorations === void 0 ? void 0 : _api$decorations.actions.hoverDecoration,
         applyChangeToContextPanel: api === null || api === void 0 ? void 0 : (_api$contextPanel5 = api.contextPanel) === null || _api$contextPanel5 === void 0 ? void 0 : _api$contextPanel5.actions.applyChange,
         editorAnalyticsAPI: api === null || api === void 0 ? void 0 : (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions,
-        extensionApi: editorExperiment('platform_editor_controls', 'variant1') ? api : undefined
+        extensionApi: editorExperiment('platform_editor_controls', 'variant1') || editorExperiment('platform_editor_offline_editing_web', true) ? api : undefined
       }),
       contextPanel:
       // if showContextPanel action is not available, or platform_editor_ai_object_sidebar_injection feature flag is off

package/dist/es2019/pm-plugins/toolbar.js

@@ -184,7 +184,7 @@ const breakoutDropdownOptions = (state, formatMessage, breakoutEnabled, editorAn
 const breakoutOptions = (state, formatMessage, extensionState, breakoutEnabled, editorAnalyticsAPI) => {
   return editorExperiment('platform_editor_controls', 'variant1') ? breakoutDropdownOptions(state, formatMessage, breakoutEnabled, editorAnalyticsAPI) : breakoutButtonListOptions(state, formatMessage, extensionState, breakoutEnabled, editorAnalyticsAPI);
 };
-const editButton = (formatMessage, extensionState, applyChangeToContextPanel, editorAnalyticsAPI) => {
+const editButton = (formatMessage, extensionState, applyChangeToContextPanel, editorAnalyticsAPI, isDisabled = false) => {
   if (!extensionState.showEditButton) {
     return [];
   }
@@ -205,7 +205,8 @@ const editButton = (formatMessage, extensionState, applyChangeToContextPanel, ed
     },
     title: formatMessage(messages.edit),
     tabIndex: null,
-    focusEditoronEnter: true
+    focusEditoronEnter: true,
+    disabled: isDisabled
   }];
   if (editorExperiment('platform_editor_controls', 'variant1')) {
     editButtonItems.push({
@@ -267,7 +268,7 @@ export const getToolbarConfig = ({
   editorAnalyticsAPI,
   extensionApi
 }) => (state, intl) => {
-  var _hoverDecoration5, _hoverDecoration6, _hoverDecoration7, _hoverDecoration8;
+  var _extensionApi$connect, _extensionApi$connect2, _extensionApi$connect3, _hoverDecoration5, _hoverDecoration6, _hoverDecoration7, _hoverDecoration8;
   const {
     formatMessage
   } = intl;
@@ -283,7 +284,7 @@ export const getToolbarConfig = ({
     return;
   }
   const nodeType = [state.schema.nodes.extension, state.schema.nodes.inlineExtension, state.schema.nodes.bodiedExtension, state.schema.nodes.multiBodiedExtension];
-  const editButtonItems = editButton(formatMessage, extensionState, applyChangeToContextPanel, editorAnalyticsAPI);
+  const editButtonItems = editButton(formatMessage, extensionState, applyChangeToContextPanel, editorAnalyticsAPI, editorExperiment('platform_editor_offline_editing_web', true) && (extensionApi === null || extensionApi === void 0 ? void 0 : (_extensionApi$connect = extensionApi.connectivity) === null || _extensionApi$connect === void 0 ? void 0 : (_extensionApi$connect2 = _extensionApi$connect.sharedState) === null || _extensionApi$connect2 === void 0 ? void 0 : (_extensionApi$connect3 = _extensionApi$connect2.currentState()) === null || _extensionApi$connect3 === void 0 ? void 0 : _extensionApi$connect3.mode) === 'offline');
   const breakoutItems = breakoutOptions(state, formatMessage, extensionState, breakoutEnabled, editorAnalyticsAPI);
   const extensionObj = getSelectedExtension(state, true);
 

package/dist/es2019/pm-plugins/utils.js

@@ -43,11 +43,9 @@ export const getSelectedDomElement = (schema, domAtPos, selectedExtensionNode) =
   const isContentExtension = selectedExtensionNode.node.type !== schema.nodes.bodiedExtension;
   return (
     // Content extension can be nested in bodied-extension, the following check is necessary for that case
-    (isContentExtension ?
-    // Search down
-    selectedExtensionDomNode.querySelector('.extension-container') :
-    // Try searching up and then down
-    closestElement(selectedExtensionDomNode, '.extension-container') || selectedExtensionDomNode.querySelector('.extension-container')) || selectedExtensionDomNode
+    (isContentExtension // Search down
+    ? selectedExtensionDomNode.querySelector('.extension-container') // Try searching up and then down
+    : closestElement(selectedExtensionDomNode, '.extension-container') || selectedExtensionDomNode.querySelector('.extension-container')) || selectedExtensionDomNode
   );
 };
 export const getDataConsumerMark = newNode => {

package/dist/es2019/ui/ConfigPanel/ConfigPanel.js

@@ -13,6 +13,7 @@ import { isTabGroup, configPanelMessages as messages } from '@atlaskit/editor-co
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import Form, { FormFooter } from '@atlaskit/form';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { ALLOWED_LOGGED_MACRO_PARAMS } from './constants';
 import { DescriptionSummary } from './DescriptionSummary';
 import ErrorMessage from './ErrorMessage';
@@ -36,7 +37,8 @@ function ConfigForm({
   parameters,
   submitting,
   contextIdentifierProvider,
-  featureFlags
+  featureFlags,
+  disableFields
 }) {
   useEffect(() => {
     if (fields) {
@@ -61,7 +63,8 @@ function ConfigForm({
     onFieldChange: onFieldChange,
     firstVisibleFieldName: firstVisibleFieldName,
     contextIdentifierProvider: contextIdentifierProvider,
-    featureFlags: featureFlags
+    featureFlags: featureFlags,
+    isDisabled: disableFields
   }), /*#__PURE__*/React.createElement("div", {
     style: canSave ? {} : {
       display: 'none'
@@ -185,7 +188,13 @@ class ConfigPanel extends React.Component {
       }
       try {
         const serializedData = await serialize(extensionManifest, this.backfillTabFormData(fields, formData, this.state.currentParameters), fields);
-        onChange(serializedData);
+        if (editorExperiment('platform_editor_offline_editing_web', true, {
+          exposure: true
+        })) {
+          await onChange(serializedData);
+        } else {
+          onChange(serializedData);
+        }
       } catch (error) {
         autoSaveReject === null || autoSaveReject === void 0 ? void 0 : autoSaveReject(error);
         // eslint-disable-next-line no-console
@@ -408,7 +417,8 @@ class ConfigPanel extends React.Component {
             onFieldChange: onFieldChange,
             parameters: currentParameters,
             submitting: submitting,
-            featureFlags: featureFlags
+            featureFlags: featureFlags,
+            disableFields: this.props.disableFields
           }))
         );
       });
@@ -428,7 +438,8 @@ function ConfigFormIntlWithBoundary({
   isLoading,
   hasParsedParameters,
   firstVisibleFieldName,
-  errorMessage
+  errorMessage,
+  disableFields
 }) {
   const {
     contextIdentifierState
@@ -453,7 +464,8 @@ function ConfigFormIntlWithBoundary({
     parameters: parameters,
     submitting: submitting,
     contextIdentifierProvider: contextIdentifierProvider,
-    featureFlags: featureFlags
+    featureFlags: featureFlags,
+    disableFields: disableFields
   }));
 }
 const result = withAnalyticsContext({

package/dist/es2019/ui/ConfigPanel/ConfigPanelFieldsLoader.js

@@ -1,5 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { bind } from 'bind-event-listener';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import ConfigPanel from './ConfigPanel';
 import { useStateFromPromise } from './use-state-from-promise';
 const getFieldsDefinitionFn = (extensionManifest, nodeKey) => {
@@ -106,6 +108,9 @@ export default function FieldsLoader({
 }) {
   const [extensionManifest] = useStateFromPromise(() => extensionProvider.getExtension(extensionType, extensionKey), [extensionProvider, extensionType, extensionKey]);
   const [errorMessage, setErrorMessage] = useState(null);
+  const connectivityState = useSharedPluginStateSelector(api, 'connectivity.mode', {
+    disabled: editorExperiment('platform_editor_offline_editing_web', false)
+  });
   return /*#__PURE__*/React.createElement(FieldDefinitionsPromiseResolver, {
     setErrorMessage: setErrorMessage,
     extensionManifest: extensionManifest,
@@ -127,6 +132,7 @@ export default function FieldsLoader({
     featureFlags: featureFlags
     // Remove below prop when cleaning platform_editor_ai_object_sidebar_injection FG
     ,
-    usingObjectSidebarPanel: usingObjectSidebarPanel
+    usingObjectSidebarPanel: usingObjectSidebarPanel,
+    disableFields: connectivityState === 'offline'
   }));
 }

package/dist/es2019/ui/ConfigPanel/FieldMessages.js

@@ -2,7 +2,7 @@ import React, { Fragment, useMemo } from 'react';
 import { injectIntl } from 'react-intl-next';
 import { configPanelMessages as messages } from '@atlaskit/editor-common/extensions';
 import { ErrorMessage, HelperMessage } from '@atlaskit/form';
-import { Text } from '@atlaskit/primitives';
+import { Text } from '@atlaskit/primitives/compiled';
 import { FieldTypeError, ValidationError } from './types';
 
 // sidestep XSS issues

package/dist/es2019/ui/ConfigPanel/Fields/Boolean.js

@@ -9,7 +9,7 @@ import React, { Fragment } from 'react';
 import { css, jsx } from '@emotion/react';
 import { Checkbox as AKCheckbox } from '@atlaskit/checkbox';
 import { Field } from '@atlaskit/form';
-import { Text } from '@atlaskit/primitives';
+import { Text } from '@atlaskit/primitives/compiled';
 import AKToggle from '@atlaskit/toggle';
 import FieldMessages from '../FieldMessages';
 import { ValidationError } from '../types';
@@ -52,13 +52,15 @@ function Checkbox({
     label,
     description,
     isRequired = false,
-    defaultValue = false
+    defaultValue = false,
+    isDisabled
   } = field;
   return jsx(Field, {
     name: name,
     isRequired: isRequired,
     validate: value => validate(value, isRequired),
-    defaultValue: defaultValue
+    defaultValue: defaultValue,
+    isDisabled: isDisabled
   }, ({
     fieldProps,
     error
@@ -89,14 +91,16 @@ function Toggle({
     label,
     description,
     isRequired = false,
-    defaultValue = false
+    defaultValue = false,
+    isDisabled
   } = field;
   return jsx(Field, {
     name: name,
     isRequired: isRequired,
     validate: value => validate(value, isRequired),
     defaultValue: defaultValue,
-    testId: `config-panel-toggle-${name}`
+    testId: `config-panel-toggle-${name}`,
+    isDisabled: isDisabled
   }, ({
     fieldProps,
     error

package/dist/es2019/ui/ConfigPanel/Fields/CheckboxGroup.js

@@ -81,7 +81,8 @@ export default function CheckboxGroup({
     description,
     defaultValue,
     isRequired = false,
-    items: options
+    items: options,
+    isDisabled
   } = field;
   const label = jsx(Fragment, null, labelBase, isRequired ? jsx("span", {
     css: requiredIndicatorStyles,
@@ -94,7 +95,8 @@ export default function CheckboxGroup({
     name: name,
     isRequired: isRequired,
     defaultValue: defaultValue,
-    validate: value => validate(value, isRequired)
+    validate: value => validate(value, isRequired),
+    isDisabled: isDisabled
   }, props => {
     return jsx(CheckboxGroupInner, _extends({
       label: label,

package/dist/es2019/ui/ConfigPanel/Fields/ColorPicker.js

@@ -9,7 +9,7 @@ import { css, jsx } from '@emotion/react';
 import { chartsColorPaletteTooltipMessages, DEFAULT_BORDER_COLOR } from '@atlaskit/editor-common/ui-color';
 import { ColorPickerButton } from '@atlaskit/editor-common/ui-menu';
 import { Field } from '@atlaskit/form';
-import { Text } from '@atlaskit/primitives';
+import { Text } from '@atlaskit/primitives/compiled';
 import FieldMessages from '../FieldMessages';
 import { validate } from '../utils';
 
@@ -375,14 +375,16 @@ const ColorPickerField = ({
   const {
     label,
     defaultValue,
-    isRequired
+    isRequired,
+    isDisabled
   } = field;
   return jsx(Field, {
     name: name,
     isRequired: isRequired,
     defaultValue: defaultValue,
     testId: `config-panel-color-picker-${name}`,
-    validate: value => validate(field, value || '')
+    validate: value => validate(field, value || ''),
+    isDisabled: isDisabled
   }, ({
     fieldProps,
     error

package/dist/es2019/ui/ConfigPanel/Fields/CustomSelect.js

@@ -37,7 +37,8 @@ function CustomSelect({
     isMultiple,
     isRequired,
     label,
-    options
+    options,
+    isDisabled
   } = field;
   const [loading, setLoading] = useState(true);
   const [resolver, setResolver] = useState(null);
@@ -96,7 +97,8 @@ function CustomSelect({
     isRequired: isRequired,
     defaultValue: defaultValue,
     validate: value => validate(field, value),
-    testId: `config-panel-custom-select-${name}`
+    testId: `config-panel-custom-select-${name}`,
+    isDisabled: isDisabled
   }, ({
     fieldProps,
     error

package/dist/es2019/ui/ConfigPanel/Fields/Date.js

@@ -17,7 +17,8 @@ function Date({
     label,
     description,
     defaultValue,
-    isRequired
+    isRequired,
+    isDisabled
   } = field;
   return /*#__PURE__*/React.createElement(Field, {
     name: name,
@@ -25,7 +26,8 @@ function Date({
     defaultValue: defaultValue,
     isRequired: isRequired,
     validate: value => validate(field, value),
-    testId: `config-panel-date-picker-${name}`
+    testId: `config-panel-date-picker-${name}`,
+    isDisabled: isDisabled
   }, ({
     fieldProps,
     error

package/dist/es2019/ui/ConfigPanel/Fields/DateRange.js

@@ -37,7 +37,8 @@ const DateField = ({
   fieldName,
   onFieldChange,
   intl,
-  isRequired
+  isRequired,
+  isDisabled
 }) => jsx("div", {
   css: horizontalFieldWrapperStyles,
   key: fieldName
@@ -50,7 +51,8 @@ const DateField = ({
     return validateRequired({
       isRequired
     }, value);
-  }
+  },
+  isDisabled: isDisabled
 }, ({
   fieldProps,
   error
@@ -107,7 +109,8 @@ const DateRange = function ({
     defaultValue: currentValue,
     isRequired: field.isRequired,
     validate: value => validate(field, value || ''),
-    testId: `config-panel-date-range-${name}`
+    testId: `config-panel-date-range-${name}`,
+    isDisabled: field.isDisabled
   }, ({
     fieldProps,
     error
@@ -142,14 +145,16 @@ const DateRange = function ({
     fieldName: "from",
     onFieldChange: onFieldChange,
     intl: intl,
-    isRequired: field.isRequired
+    isRequired: field.isRequired,
+    isDisabled: field.isDisabled
   }), jsx(DateField, {
     scope: name,
     parentField: field,
     fieldName: "to",
     onFieldChange: onFieldChange,
     intl: intl,
-    isRequired: field.isRequired
+    isRequired: field.isRequired,
+    isDisabled: field.isDisabled
   })), jsx(FieldMessages, {
     description: field.description
   }));

package/dist/es2019/ui/ConfigPanel/Fields/Fieldset.js

@@ -219,7 +219,8 @@ class FieldsetField extends React.Component {
       canRemoveFields: field.options.isDynamic && visibleFields.size > 1,
       onClickRemove: this.onClickRemove,
       onFieldChange: onFieldChange,
-      firstVisibleFieldName: firstVisibleFieldName
+      firstVisibleFieldName: firstVisibleFieldName,
+      isDisabled: field.isDisabled
     }), children && jsx("div", {
       css: actionsWrapperStyles,
       "data-testId": "fieldset-actions"

package/dist/es2019/ui/ConfigPanel/Fields/Number.js

@@ -17,7 +17,8 @@ export default function Number({
     label,
     description,
     defaultValue,
-    isRequired
+    isRequired,
+    isDisabled
   } = field;
   function validateNumber(value) {
     const error = validate(field, value || '');
@@ -38,7 +39,8 @@ export default function Number({
     defaultValue: defaultValue === undefined ? '' : String(defaultValue),
     isRequired: isRequired,
     validate: validateNumber,
-    testId: `config-panel-number-${name}`
+    testId: `config-panel-number-${name}`,
+    isDisabled: isDisabled
   }, ({
     fieldProps,
     error,

package/dist/es2019/ui/ConfigPanel/Fields/RadioGroup.js

@@ -21,7 +21,8 @@ export default function RadioField({
     defaultValue: field.defaultValue,
     isRequired: field.isRequired,
     validate: value => validate(field, value),
-    testId: `config-panel-radio-group-${field.name}`
+    testId: `config-panel-radio-group-${field.name}`,
+    isDisabled: field.isDisabled
   }, ({
     fieldProps,
     error

package/dist/es2019/ui/ConfigPanel/Fields/Select.js

@@ -26,7 +26,8 @@ export default function SelectField({
       // Ignored via go/ees005
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       return validate(field, value);
-    }
+    },
+    isDisabled: field.isDisabled
   }, ({
     fieldProps,
     error

package/dist/es2019/ui/ConfigPanel/Fields/String.js

@@ -16,7 +16,8 @@ export default function String({
     label,
     description,
     defaultValue,
-    isRequired
+    isRequired,
+    isDisabled
   } = field;
   return /*#__PURE__*/React.createElement(Field, {
     name: name,
@@ -24,7 +25,8 @@ export default function String({
     defaultValue: defaultValue || '',
     isRequired: isRequired,
     validate: value => validate(field, value || ''),
-    testId: `config-panel-string-${name}`
+    testId: `config-panel-string-${name}`,
+    isDisabled: isDisabled
   }, ({
     fieldProps,
     error,

package/dist/es2019/ui/ConfigPanel/Fields/UserSelect.js

@@ -136,7 +136,8 @@ export default function UserSelect({
     defaultValue,
     description,
     isRequired,
-    options
+    options,
+    isDisabled
   } = field;
   const {
     type
@@ -166,7 +167,8 @@ export default function UserSelect({
     isRequired: isRequired,
     defaultValue: defaultValue,
     validate: value => validate(field, value),
-    testId: `config-panel-user-select-${name}`
+    testId: `config-panel-user-select-${name}`,
+    isDisabled: isDisabled
   }, ({
     fieldProps,
     error,
@@ -177,7 +179,7 @@ export default function UserSelect({
       return /*#__PURE__*/React.createElement(UnhandledType, {
         key: name,
         field: field,
-        errorMessage: `Field "${name}" can't be renderered. Missing provider for "${type}".`
+        errorMessage: `Field "${name}" can't be rendered. Missing provider for "${type}".`
       });
     }
     function onChange(newValue) {

package/dist/es2019/ui/ConfigPanel/FormContent.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { isFieldset } from '@atlaskit/editor-common/extensions';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import Boolean from './Fields/Boolean';
 import ColorPicker from './Fields/ColorPicker';
 import CustomSelect from './Fields/CustomSelect';
@@ -139,7 +140,8 @@ export function FieldComponent({
           parameters: resolvedParameters,
           onFieldChange: onFieldChange,
           extensionManifest: extensionManifest,
-          featureFlags: featureFlags
+          featureFlags: featureFlags,
+          isDisabled: field.isDisabled
         }));
       }
     case 'tab-group':
@@ -155,7 +157,8 @@ export function FieldComponent({
             parameters: tabParameters,
             onFieldChange: onFieldChange,
             extensionManifest: extensionManifest,
-            featureFlags: featureFlags
+            featureFlags: featureFlags,
+            isDisabled: field.isDisabled
           });
         };
         return /*#__PURE__*/React.createElement(TabGroup, {
@@ -190,13 +193,24 @@ export default function FormContent({
   onFieldChange,
   firstVisibleFieldName,
   contextIdentifierProvider,
-  featureFlags
+  featureFlags,
+  isDisabled
 }) {
+  let mappedFields = fields;
+  if (editorExperiment('platform_editor_offline_editing_web', true)) {
+    mappedFields = fields.map(field => {
+      var _field$isDisabled;
+      return {
+        ...field,
+        isDisabled: (_field$isDisabled = field.isDisabled) !== null && _field$isDisabled !== void 0 ? _field$isDisabled : isDisabled
+      };
+    });
+  }
   return /*#__PURE__*/React.createElement(FormErrorBoundary, {
     contextIdentifierProvider: contextIdentifierProvider,
     extensionKey: extensionManifest.key,
-    fields: fields
-  }, fields.map(field => {
+    fields: mappedFields
+  }, mappedFields.map(field => {
     let fieldElement = /*#__PURE__*/React.createElement(FieldComponent, {
       field: field,
       parameters: parameters || {},

package/dist/es2019/ui/ConfigPanel/FormErrorBoundary.js

@@ -4,7 +4,7 @@ import { injectIntl } from 'react-intl-next';
 import { withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { ACTION, ACTION_SUBJECT, editorAnalyticsChannel, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { configPanelMessages as messages } from '@atlaskit/editor-common/extensions';
-import { Stack, Text } from '@atlaskit/primitives';
+import { Stack, Text } from '@atlaskit/primitives/compiled';
 import SectionMessage from '@atlaskit/section-message';
 // eslint-disable-next-line @repo/internal/react/no-class-components
 class FormErrorBoundaryInner extends React.Component {

package/dist/es2019/ui/ConfigPanel/LoadingState.js

@@ -4,17 +4,42 @@
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
+import { injectIntl } from 'react-intl-next';
+import { messages } from '@atlaskit/editor-common/extensions';
+import SectionMessage from '@atlaskit/section-message';
 import Spinner from '@atlaskit/spinner';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 const spinnerWrapperStyles = css({
   display: 'flex',
   justifyContent: 'center',
   marginTop: "var(--ds-space-800, 64px)"
 });
-const LoadingState = () => jsx("div", {
+const errorWrapperStyles = css({
+  marginTop: "var(--ds-space-400, 32px)" // Add some padding to the top to make sure we place this below the offline status banner
+});
+const LoadingStateWithErrorHandling = injectIntl(props => {
+  if (props.error) {
+    return jsx("div", {
+      css: errorWrapperStyles,
+      "data-testid": "ConfigPanelLoadingError"
+    }, jsx(SectionMessage, {
+      appearance: "error"
+    }, props.intl.formatMessage(messages.panelLoadingError)));
+  }
+  return jsx("div", {
+    css: spinnerWrapperStyles,
+    "data-testid": "ConfigPanelLoading"
+  }, jsx(Spinner, {
+    size: "small",
+    interactionName: "config-panel-spinner"
+  }));
+});
+const LoadingStateWithoutErrorHandling = () => jsx("div", {
   css: spinnerWrapperStyles,
   "data-testid": "ConfigPanelLoading"
 }, jsx(Spinner, {
   size: "small",
   interactionName: "config-panel-spinner"
 }));
+const LoadingState = props => editorExperiment('platform_editor_offline_editing_web', true) ? LoadingStateWithErrorHandling(props) : LoadingStateWithoutErrorHandling();
 export default LoadingState;

package/dist/es2019/ui/useConfigPanelPluginHook.js

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 import { getExtensionKeyAndNodeKey } from '@atlaskit/editor-common/extensions';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
-import { Box } from '@atlaskit/primitives';
+import { Box } from '@atlaskit/primitives/compiled';
 import { clearEditingContext, forceAutoSave } from '../editor-commands/commands';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { getSelectedExtension } from '../pm-plugins/utils';

package/dist/esm/extensionPlugin.js

@@ -174,7 +174,7 @@ export var extensionPlugin = function extensionPlugin(_ref) {
         hoverDecoration: _api === null || _api === void 0 || (_api$decorations = _api.decorations) === null || _api$decorations === void 0 ? void 0 : _api$decorations.actions.hoverDecoration,
         applyChangeToContextPanel: _api === null || _api === void 0 || (_api$contextPanel5 = _api.contextPanel) === null || _api$contextPanel5 === void 0 ? void 0 : _api$contextPanel5.actions.applyChange,
         editorAnalyticsAPI: _api === null || _api === void 0 || (_api$analytics4 = _api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions,
-        extensionApi: editorExperiment('platform_editor_controls', 'variant1') ? _api : undefined
+        extensionApi: editorExperiment('platform_editor_controls', 'variant1') || editorExperiment('platform_editor_offline_editing_web', true) ? _api : undefined
       }),
       contextPanel:
       // if showContextPanel action is not available, or platform_editor_ai_object_sidebar_injection feature flag is off