@atlaskit/editor-plugin-extension 5.2.4 → 5.2.6

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/editor-plugin-extension
 
+## 5.2.6
+
+### Patch Changes
+
+- [#142403](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/142403)
+  [`152f0ebf88ba6`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/152f0ebf88ba6) -
+  [ux] Fix a bug where autosave errors in the config panel would fail silently and prevent closing.
+  Additionally add support for disabling unsupported UI elements related to the macro config panel
+  while the user is offline, as part of the offline editor experiment.
+- Updated dependencies
+
+## 5.2.5
+
+### Patch Changes
+
+- [#142352](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/142352)
+  [`05903fde6d94d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/05903fde6d94d) -
+  Internal change to use Compiled variant of `@atlaskit/primitives`.
+- Updated dependencies
+
 ## 5.2.4
 
 ### Patch Changes

package/dist/cjs/extensionPlugin.js

@@ -182,7 +182,7 @@ var extensionPlugin = exports.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: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? _api : undefined
+        extensionApi: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') || (0, _experiments.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/cjs/pm-plugins/toolbar.js

@@ -189,6 +189,7 @@ var breakoutOptions = function breakoutOptions(state, formatMessage, extensionSt
   return (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? breakoutDropdownOptions(state, formatMessage, breakoutEnabled, editorAnalyticsAPI) : breakoutButtonListOptions(state, formatMessage, extensionState, breakoutEnabled, editorAnalyticsAPI);
 };
 var editButton = function editButton(formatMessage, extensionState, applyChangeToContextPanel, editorAnalyticsAPI) {
+  var isDisabled = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
   if (!extensionState.showEditButton) {
     return [];
   }
@@ -208,7 +209,8 @@ var editButton = function editButton(formatMessage, extensionState, applyChangeT
     },
     title: formatMessage(_extensions.messages.edit),
     tabIndex: null,
-    focusEditoronEnter: true
+    focusEditoronEnter: true,
+    disabled: isDisabled
   }];
   if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
     editButtonItems.push({
@@ -268,7 +270,7 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(_ref
     editorAnalyticsAPI = _ref.editorAnalyticsAPI,
     extensionApi = _ref.extensionApi;
   return function (state, intl) {
-    var _hoverDecoration5, _hoverDecoration6, _hoverDecoration7, _hoverDecoration8;
+    var _extensionApi$connect, _hoverDecoration5, _hoverDecoration6, _hoverDecoration7, _hoverDecoration8;
     var formatMessage = intl.formatMessage;
     var extensionState = (0, _pluginFactory.getPluginState)(state);
     if ((0, _platformFeatureFlags.fg)('platform_editor_legacy_content_macro')) {
@@ -282,7 +284,7 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(_ref
       return;
     }
     var nodeType = [state.schema.nodes.extension, state.schema.nodes.inlineExtension, state.schema.nodes.bodiedExtension, state.schema.nodes.multiBodiedExtension];
-    var editButtonItems = editButton(formatMessage, extensionState, applyChangeToContextPanel, editorAnalyticsAPI);
+    var editButtonItems = editButton(formatMessage, extensionState, applyChangeToContextPanel, editorAnalyticsAPI, (0, _experiments.editorExperiment)('platform_editor_offline_editing_web', true) && (extensionApi === null || extensionApi === void 0 || (_extensionApi$connect = extensionApi.connectivity) === null || _extensionApi$connect === void 0 || (_extensionApi$connect = _extensionApi$connect.sharedState) === null || _extensionApi$connect === void 0 || (_extensionApi$connect = _extensionApi$connect.currentState()) === null || _extensionApi$connect === void 0 ? void 0 : _extensionApi$connect.mode) === 'offline');
     var breakoutItems = breakoutOptions(state, formatMessage, extensionState, breakoutEnabled, editorAnalyticsAPI);
     var extensionObj = (0, _utils3.getSelectedExtension)(state, true);
 

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

@@ -48,11 +48,9 @@ var getSelectedDomElement = exports.getSelectedDomElement = function getSelected
   var 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
-    (0, _utils.closestElement)(selectedExtensionDomNode, '.extension-container') || selectedExtensionDomNode.querySelector('.extension-container')) || selectedExtensionDomNode
+    (isContentExtension // Search down
+    ? selectedExtensionDomNode.querySelector('.extension-container') // Try searching up and then down
+    : (0, _utils.closestElement)(selectedExtensionDomNode, '.extension-container') || selectedExtensionDomNode.querySelector('.extension-container')) || selectedExtensionDomNode
   );
 };
 var getDataConsumerMark = exports.getDataConsumerMark = function getDataConsumerMark(newNode) {

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

@@ -28,6 +28,7 @@ var _extensions = require("@atlaskit/editor-common/extensions");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _form = _interopRequireWildcard(require("@atlaskit/form"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _constants = require("./constants");
 var _DescriptionSummary = require("./DescriptionSummary");
 var _ErrorMessage = _interopRequireDefault(require("./ErrorMessage"));
@@ -57,7 +58,8 @@ function ConfigForm(_ref) {
     parameters = _ref.parameters,
     submitting = _ref.submitting,
     contextIdentifierProvider = _ref.contextIdentifierProvider,
-    featureFlags = _ref.featureFlags;
+    featureFlags = _ref.featureFlags,
+    disableFields = _ref.disableFields;
   (0, _react.useEffect)(function () {
     if (fields) {
       var firstDuplicateField = (0, _transformers.findDuplicateFields)(fields);
@@ -81,7 +83,8 @@ function ConfigForm(_ref) {
     onFieldChange: onFieldChange,
     firstVisibleFieldName: firstVisibleFieldName,
     contextIdentifierProvider: contextIdentifierProvider,
-    featureFlags: featureFlags
+    featureFlags: featureFlags,
+    isDisabled: disableFields
   }), /*#__PURE__*/_react.default.createElement("div", {
     style: canSave ? {} : {
       display: 'none'
@@ -210,20 +213,33 @@ var ConfigPanel = /*#__PURE__*/function (_React$Component) {
               return (0, _transformers.serialize)(extensionManifest, _this.backfillTabFormData(fields, formData, _this.state.currentParameters), fields);
             case 7:
               serializedData = _context.sent;
+              if (!(0, _experiments.editorExperiment)('platform_editor_offline_editing_web', true, {
+                exposure: true
+              })) {
+                _context.next = 13;
+                break;
+              }
+              _context.next = 11;
+              return onChange(serializedData);
+            case 11:
+              _context.next = 14;
+              break;
+            case 13:
               onChange(serializedData);
-              _context.next = 15;
+            case 14:
+              _context.next = 20;
               break;
-            case 11:
-              _context.prev = 11;
+            case 16:
+              _context.prev = 16;
               _context.t0 = _context["catch"](4);
               autoSaveReject === null || autoSaveReject === void 0 || autoSaveReject(_context.t0);
               // eslint-disable-next-line no-console
               console.error("Error serializing parameters", _context.t0);
-            case 15:
+            case 20:
             case "end":
               return _context.stop();
           }
-        }, _callee, null, [[4, 11]]);
+        }, _callee, null, [[4, 16]]);
       }));
       return function (_x) {
         return _ref3.apply(this, arguments);
@@ -463,7 +479,8 @@ var ConfigPanel = /*#__PURE__*/function (_React$Component) {
               onFieldChange: onFieldChange,
               parameters: currentParameters,
               submitting: submitting,
-              featureFlags: featureFlags
+              featureFlags: featureFlags,
+              disableFields: _this2.props.disableFields
             }))
           );
         });
@@ -484,7 +501,8 @@ function ConfigFormIntlWithBoundary(_ref6) {
     isLoading = _ref6.isLoading,
     hasParsedParameters = _ref6.hasParsedParameters,
     firstVisibleFieldName = _ref6.firstVisibleFieldName,
-    errorMessage = _ref6.errorMessage;
+    errorMessage = _ref6.errorMessage,
+    disableFields = _ref6.disableFields;
   var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['contextIdentifier']),
     contextIdentifierState = _useSharedPluginState.contextIdentifierState;
   var _ref7 = contextIdentifierState !== null && contextIdentifierState !== void 0 ? contextIdentifierState : {},
@@ -506,7 +524,8 @@ function ConfigFormIntlWithBoundary(_ref6) {
     parameters: parameters,
     submitting: submitting,
     contextIdentifierProvider: contextIdentifierProvider,
-    featureFlags: featureFlags
+    featureFlags: featureFlags,
+    disableFields: disableFields
   }));
 }
 var result = (0, _analyticsNext.withAnalyticsContext)({

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

@@ -9,6 +9,8 @@ exports.default = FieldsLoader;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _bindEventListener = require("bind-event-listener");
+var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _ConfigPanel = _interopRequireDefault(require("./ConfigPanel"));
 var _useStateFromPromise3 = require("./use-state-from-promise");
 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); }
@@ -126,6 +128,9 @@ function FieldsLoader(_ref) {
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
     errorMessage = _useState6[0],
     setErrorMessage = _useState6[1];
+  var connectivityState = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'connectivity.mode', {
+    disabled: (0, _experiments.editorExperiment)('platform_editor_offline_editing_web', false)
+  });
   return /*#__PURE__*/_react.default.createElement(FieldDefinitionsPromiseResolver, {
     setErrorMessage: setErrorMessage,
     extensionManifest: extensionManifest,
@@ -148,7 +153,8 @@ function FieldsLoader(_ref) {
       featureFlags: featureFlags
       // Remove below prop when cleaning platform_editor_ai_object_sidebar_injection FG
       ,
-      usingObjectSidebarPanel: usingObjectSidebarPanel
+      usingObjectSidebarPanel: usingObjectSidebarPanel,
+      disableFields: connectivityState === 'offline'
     });
   });
 }

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

@@ -9,7 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _extensions = require("@atlaskit/editor-common/extensions");
 var _form = require("@atlaskit/form");
-var _primitives = require("@atlaskit/primitives");
+var _compiled = require("@atlaskit/primitives/compiled");
 var _types = require("./types");
 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 && {}.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; }
@@ -43,14 +43,14 @@ function makeMarkup(fragment, key) {
         key: key
       }, children);
     case 'STRONG':
-      return /*#__PURE__*/_react.default.createElement(_primitives.Text, {
+      return /*#__PURE__*/_react.default.createElement(_compiled.Text, {
         as: "strong",
         color: "color.text.subtlest",
         size: "UNSAFE_small",
         key: key
       }, children);
     case 'EM':
-      return /*#__PURE__*/_react.default.createElement(_primitives.Text, {
+      return /*#__PURE__*/_react.default.createElement(_compiled.Text, {
         as: "em",
         color: "color.text.subtlest",
         size: "UNSAFE_small",

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

@@ -12,7 +12,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _checkbox = require("@atlaskit/checkbox");
 var _form = require("@atlaskit/form");
-var _primitives = require("@atlaskit/primitives");
+var _compiled = require("@atlaskit/primitives/compiled");
 var _toggle = _interopRequireDefault(require("@atlaskit/toggle"));
 var _FieldMessages = _interopRequireDefault(require("../FieldMessages"));
 var _types = require("../types");
@@ -64,14 +64,16 @@ function Checkbox(_ref) {
     _field$isRequired = field.isRequired,
     isRequired = _field$isRequired === void 0 ? false : _field$isRequired,
     _field$defaultValue = field.defaultValue,
-    defaultValue = _field$defaultValue === void 0 ? false : _field$defaultValue;
+    defaultValue = _field$defaultValue === void 0 ? false : _field$defaultValue,
+    isDisabled = field.isDisabled;
   return (0, _react2.jsx)(_form.Field, {
     name: name,
     isRequired: isRequired,
     validate: function validate(value) {
       return _validate(value, isRequired);
     },
-    defaultValue: defaultValue
+    defaultValue: defaultValue,
+    isDisabled: isDisabled
   }, function (_ref2) {
     var fieldProps = _ref2.fieldProps,
       error = _ref2.error;
@@ -101,7 +103,8 @@ function Toggle(_ref3) {
     _field$isRequired2 = field.isRequired,
     isRequired = _field$isRequired2 === void 0 ? false : _field$isRequired2,
     _field$defaultValue2 = field.defaultValue,
-    defaultValue = _field$defaultValue2 === void 0 ? false : _field$defaultValue2;
+    defaultValue = _field$defaultValue2 === void 0 ? false : _field$defaultValue2,
+    isDisabled = field.isDisabled;
   return (0, _react2.jsx)(_form.Field, {
     name: name,
     isRequired: isRequired,
@@ -109,7 +112,8 @@ function Toggle(_ref3) {
       return _validate(value, isRequired);
     },
     defaultValue: defaultValue,
-    testId: "config-panel-toggle-".concat(name)
+    testId: "config-panel-toggle-".concat(name),
+    isDisabled: isDisabled
   }, function (_ref4) {
     var fieldProps = _ref4.fieldProps,
       error = _ref4.error;
@@ -122,7 +126,7 @@ function Toggle(_ref3) {
       css: toggleLabelStyles,
       id: id,
       htmlFor: id
-    }, label, isRequired ? (0, _react2.jsx)(_primitives.Text, {
+    }, label, isRequired ? (0, _react2.jsx)(_compiled.Text, {
       color: "color.text.danger",
       "aria-hidden": "true"
     }, "*") : null), (0, _react2.jsx)(_toggle.default

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

@@ -84,7 +84,8 @@ function CheckboxGroup(_ref3) {
     defaultValue = field.defaultValue,
     _field$isRequired = field.isRequired,
     isRequired = _field$isRequired === void 0 ? false : _field$isRequired,
-    options = field.items;
+    options = field.items,
+    isDisabled = field.isDisabled;
   var label = (0, _react2.jsx)(_react.Fragment, null, labelBase, isRequired ? (0, _react2.jsx)("span", {
     css: requiredIndicatorStyles,
     "aria-hidden": "true"
@@ -98,7 +99,8 @@ function CheckboxGroup(_ref3) {
     defaultValue: defaultValue,
     validate: function validate(value) {
       return _validate(value, isRequired);
-    }
+    },
+    isDisabled: isDisabled
   }, function (props) {
     return (0, _react2.jsx)(CheckboxGroupInner, (0, _extends2.default)({
       label: label,

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

@@ -11,7 +11,7 @@ var _react2 = require("@emotion/react");
 var _uiColor = require("@atlaskit/editor-common/ui-color");
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _form = require("@atlaskit/form");
-var _primitives = require("@atlaskit/primitives");
+var _compiled = require("@atlaskit/primitives/compiled");
 var _FieldMessages = _interopRequireDefault(require("../FieldMessages"));
 var _utils = require("../utils");
 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; }
@@ -379,7 +379,8 @@ var ColorPickerField = function ColorPickerField(_ref) {
     featureFlags = _ref.featureFlags;
   var label = field.label,
     defaultValue = field.defaultValue,
-    isRequired = field.isRequired;
+    isRequired = field.isRequired,
+    isDisabled = field.isDisabled;
   return (0, _react2.jsx)(_form.Field, {
     name: name,
     isRequired: isRequired,
@@ -387,7 +388,8 @@ var ColorPickerField = function ColorPickerField(_ref) {
     testId: "config-panel-color-picker-".concat(name),
     validate: function validate(value) {
       return (0, _utils.validate)(field, value || '');
-    }
+    },
+    isDisabled: isDisabled
   }, function (_ref2) {
     var fieldProps = _ref2.fieldProps,
       error = _ref2.error;
@@ -395,7 +397,7 @@ var ColorPickerField = function ColorPickerField(_ref) {
       css: colorPickerWrapperStyles
     }, (0, _react2.jsx)("label", {
       css: colorPickerLabelStyles
-    }, label, isRequired && (0, _react2.jsx)(_primitives.Text, {
+    }, label, isRequired && (0, _react2.jsx)(_compiled.Text, {
       color: "color.text.danger",
       "aria-hidden": "true"
     }, "*")), (0, _react2.jsx)(ColorPicker, {

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

@@ -45,7 +45,8 @@ function CustomSelect(_ref2) {
     isMultiple = field.isMultiple,
     isRequired = field.isRequired,
     label = field.label,
-    options = field.options;
+    options = field.options,
+    isDisabled = field.isDisabled;
   var _useState = (0, _react.useState)(true),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     loading = _useState2[0],
@@ -151,7 +152,8 @@ function CustomSelect(_ref2) {
     validate: function validate(value) {
       return (0, _utils.validate)(field, value);
     },
-    testId: "config-panel-custom-select-".concat(name)
+    testId: "config-panel-custom-select-".concat(name),
+    isDisabled: isDisabled
   }, function (_ref3) {
     var fieldProps = _ref3.fieldProps,
       error = _ref3.error;

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

@@ -22,7 +22,8 @@ function Date(_ref) {
   var label = field.label,
     description = field.description,
     defaultValue = field.defaultValue,
-    isRequired = field.isRequired;
+    isRequired = field.isRequired,
+    isDisabled = field.isDisabled;
   return /*#__PURE__*/_react.default.createElement(_form.Field, {
     name: name,
     label: label,
@@ -31,7 +32,8 @@ function Date(_ref) {
     validate: function validate(value) {
       return (0, _utils.validate)(field, value);
     },
-    testId: "config-panel-date-picker-".concat(name)
+    testId: "config-panel-date-picker-".concat(name),
+    isDisabled: isDisabled
   }, function (_ref2) {
     var fieldProps = _ref2.fieldProps,
       error = _ref2.error;

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

@@ -46,7 +46,8 @@ var DateField = function DateField(_ref) {
     fieldName = _ref.fieldName,
     onFieldChange = _ref.onFieldChange,
     intl = _ref.intl,
-    isRequired = _ref.isRequired;
+    isRequired = _ref.isRequired,
+    isDisabled = _ref.isDisabled;
   return (0, _react2.jsx)("div", {
     css: horizontalFieldWrapperStyles,
     key: fieldName
@@ -59,7 +60,8 @@ var DateField = function DateField(_ref) {
       return (0, _utils.validateRequired)({
         isRequired: isRequired
       }, value);
-    }
+    },
+    isDisabled: isDisabled
   }, function (_ref2) {
     var fieldProps = _ref2.fieldProps,
       error = _ref2.error;
@@ -124,7 +126,8 @@ var DateRange = function DateRange(_ref3) {
     validate: function validate(value) {
       return (0, _utils.validate)(field, value || '');
     },
-    testId: "config-panel-date-range-".concat(name)
+    testId: "config-panel-date-range-".concat(name),
+    isDisabled: field.isDisabled
   }, function (_ref5) {
     var fieldProps = _ref5.fieldProps,
       error = _ref5.error;
@@ -161,14 +164,16 @@ var DateRange = function DateRange(_ref3) {
     fieldName: "from",
     onFieldChange: onFieldChange,
     intl: intl,
-    isRequired: field.isRequired
+    isRequired: field.isRequired,
+    isDisabled: field.isDisabled
   }), (0, _react2.jsx)(DateField, {
     scope: name,
     parentField: field,
     fieldName: "to",
     onFieldChange: onFieldChange,
     intl: intl,
-    isRequired: field.isRequired
+    isRequired: field.isRequired,
+    isDisabled: field.isDisabled
   })), (0, _react2.jsx)(_FieldMessages.default, {
     description: field.description
   }));

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

@@ -259,7 +259,8 @@ var FieldsetField = /*#__PURE__*/function (_React$Component) {
         canRemoveFields: field.options.isDynamic && visibleFields.size > 1,
         onClickRemove: this.onClickRemove,
         onFieldChange: onFieldChange,
-        firstVisibleFieldName: firstVisibleFieldName
+        firstVisibleFieldName: firstVisibleFieldName,
+        isDisabled: field.isDisabled
       }), children && (0, _react2.jsx)("div", {
         css: actionsWrapperStyles,
         "data-testId": "fieldset-actions"

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

@@ -22,7 +22,8 @@ function Number(_ref) {
   var label = field.label,
     description = field.description,
     defaultValue = field.defaultValue,
-    isRequired = field.isRequired;
+    isRequired = field.isRequired,
+    isDisabled = field.isDisabled;
   function validateNumber(value) {
     var error = (0, _utils.validate)(field, value || '');
     if (error) {
@@ -42,7 +43,8 @@ function Number(_ref) {
     defaultValue: defaultValue === undefined ? '' : String(defaultValue),
     isRequired: isRequired,
     validate: validateNumber,
-    testId: "config-panel-number-".concat(name)
+    testId: "config-panel-number-".concat(name),
+    isDisabled: isDisabled
   }, function (_ref2) {
     var fieldProps = _ref2.fieldProps,
       error = _ref2.error,

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

@@ -35,7 +35,8 @@ function RadioField(_ref) {
     validate: function validate(value) {
       return (0, _utils.validate)(field, value);
     },
-    testId: "config-panel-radio-group-".concat(field.name)
+    testId: "config-panel-radio-group-".concat(field.name),
+    isDisabled: field.isDisabled
   }, function (_ref2) {
     var fieldProps = _ref2.fieldProps,
       error = _ref2.error;

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

@@ -38,7 +38,8 @@ function SelectField(_ref) {
       // Ignored via go/ees005
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       return (0, _utils.validate)(field, value);
-    }
+    },
+    isDisabled: field.isDisabled
   }, function (_ref2) {
     var fieldProps = _ref2.fieldProps,
       error = _ref2.error;

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

@@ -26,7 +26,8 @@ function String(_ref) {
   var label = field.label,
     description = field.description,
     defaultValue = field.defaultValue,
-    isRequired = field.isRequired;
+    isRequired = field.isRequired,
+    isDisabled = field.isDisabled;
   return /*#__PURE__*/_react.default.createElement(_form.Field, {
     name: name,
     label: label,
@@ -35,7 +36,8 @@ function String(_ref) {
     validate: function validate(value) {
       return (0, _utils.validate)(field, value || '');
     },
-    testId: "config-panel-string-".concat(name)
+    testId: "config-panel-string-".concat(name),
+    isDisabled: isDisabled
   }, function (_ref2) {
     var fieldProps = _ref2.fieldProps,
       error = _ref2.error,

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

@@ -182,7 +182,8 @@ function UserSelect(_ref2) {
     defaultValue = field.defaultValue,
     description = field.description,
     isRequired = field.isRequired,
-    options = field.options;
+    options = field.options,
+    isDisabled = field.isDisabled;
   var type = options.provider.type;
   (0, _react.useEffect)(function () {
     var cancel = false;
@@ -239,7 +240,8 @@ function UserSelect(_ref2) {
     validate: function validate(value) {
       return (0, _utils.validate)(field, value);
     },
-    testId: "config-panel-user-select-".concat(name)
+    testId: "config-panel-user-select-".concat(name),
+    isDisabled: isDisabled
   }, function (_ref3) {
     var fieldProps = _ref3.fieldProps,
       error = _ref3.error,
@@ -249,7 +251,7 @@ function UserSelect(_ref2) {
       return /*#__PURE__*/_react.default.createElement(_UnhandledType.default, {
         key: name,
         field: field,
-        errorMessage: "Field \"".concat(name, "\" can't be renderered. Missing provider for \"").concat(type, "\".")
+        errorMessage: "Field \"".concat(name, "\" can't be rendered. Missing provider for \"").concat(type, "\".")
       });
     }
     function onChange(newValue) {

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

@@ -9,6 +9,7 @@ exports.default = FormContent;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _extensions = require("@atlaskit/editor-common/extensions");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _Boolean = _interopRequireDefault(require("./Fields/Boolean"));
 var _ColorPicker = _interopRequireDefault(require("./Fields/ColorPicker"));
 var _CustomSelect = _interopRequireDefault(require("./Fields/CustomSelect"));
@@ -147,7 +148,8 @@ function FieldComponent(_ref) {
           parameters: resolvedParameters,
           onFieldChange: onFieldChange,
           extensionManifest: extensionManifest,
-          featureFlags: featureFlags
+          featureFlags: featureFlags,
+          isDisabled: field.isDisabled
         }));
       }
     case 'tab-group':
@@ -165,7 +167,8 @@ function FieldComponent(_ref) {
             parameters: tabParameters,
             onFieldChange: onFieldChange,
             extensionManifest: extensionManifest,
-            featureFlags: featureFlags
+            featureFlags: featureFlags,
+            isDisabled: field.isDisabled
           });
         };
         return /*#__PURE__*/_react.default.createElement(_TabGroup.default, {
@@ -199,12 +202,22 @@ function FormContent(_ref3) {
     onFieldChange = _ref3.onFieldChange,
     firstVisibleFieldName = _ref3.firstVisibleFieldName,
     contextIdentifierProvider = _ref3.contextIdentifierProvider,
-    featureFlags = _ref3.featureFlags;
+    featureFlags = _ref3.featureFlags,
+    isDisabled = _ref3.isDisabled;
+  var mappedFields = fields;
+  if ((0, _experiments.editorExperiment)('platform_editor_offline_editing_web', true)) {
+    mappedFields = fields.map(function (field) {
+      var _field$isDisabled;
+      return _objectSpread(_objectSpread({}, field), {}, {
+        isDisabled: (_field$isDisabled = field.isDisabled) !== null && _field$isDisabled !== void 0 ? _field$isDisabled : isDisabled
+      });
+    });
+  }
   return /*#__PURE__*/_react.default.createElement(_FormErrorBoundary.FormErrorBoundary, {
     contextIdentifierProvider: contextIdentifierProvider,
     extensionKey: extensionManifest.key,
-    fields: fields
-  }, fields.map(function (field) {
+    fields: mappedFields
+  }, mappedFields.map(function (field) {
     var fieldElement = /*#__PURE__*/_react.default.createElement(FieldComponent, {
       field: field,
       parameters: parameters || {},

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

@@ -18,7 +18,7 @@ var _reactIntlNext = require("react-intl-next");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _extensions = require("@atlaskit/editor-common/extensions");
-var _primitives = require("@atlaskit/primitives");
+var _compiled = require("@atlaskit/primitives/compiled");
 var _sectionMessage = _interopRequireDefault(require("@atlaskit/section-message"));
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
@@ -130,9 +130,9 @@ var FormErrorBoundaryInner = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/_react.default.createElement(_sectionMessage.default, {
         title: intl.formatMessage(_extensions.configPanelMessages.errorBoundaryTitle),
         appearance: "error"
-      }, /*#__PURE__*/_react.default.createElement(_primitives.Stack, null, /*#__PURE__*/_react.default.createElement(_primitives.Text, {
+      }, /*#__PURE__*/_react.default.createElement(_compiled.Stack, null, /*#__PURE__*/_react.default.createElement(_compiled.Text, {
         as: "p"
-      }, /*#__PURE__*/_react.default.createElement("i", null, error.message)), /*#__PURE__*/_react.default.createElement(_primitives.Text, {
+      }, /*#__PURE__*/_react.default.createElement("i", null, error.message)), /*#__PURE__*/_react.default.createElement(_compiled.Text, {
         as: "p"
       }, intl.formatMessage(_extensions.configPanelMessages.errorBoundaryNote))));
     }