@atlaskit/editor-plugin-extension 0.4.2 → 0.5.0

package/.eslintrc.js

@@ -0,0 +1,26 @@
+module.exports = {
+  rules: {
+    '@typescript-eslint/no-duplicate-imports': 'error',
+    '@typescript-eslint/no-explicit-any': 'error',
+    '@typescript-eslint/ban-types': [
+      'error',
+      {
+        types: {
+          'React.FC':
+            'Please use types directly on props instead, and explicitly define children if required',
+          'React.FunctionalComponent':
+            'Please use types directly on props instead, and explicitly define children if required',
+        },
+        extendDefaults: false,
+      },
+    ],
+  },
+  overrides: [
+    {
+      files: ['**/__tests__/**/*.{js,ts,tsx}', '**/examples/**/*.{js,ts,tsx}'],
+      rules: {
+        '@typescript-eslint/no-explicit-any': 'off',
+      },
+    },
+  ],
+};

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/editor-plugin-extension
 
+## 0.5.0
+
+### Minor Changes
+
+- [#65712](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/65712) [`963b53c64eee`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/963b53c64eee) - Extract code for extension plugin from editor-core to @atlaskit/editor-plugin-extension
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 0.4.2
 
 ### Patch Changes

package/dist/cjs/actions.js

@@ -0,0 +1,236 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.performNodeUpdate = exports.editSelectedExtension = exports.editExtension = exports.createEditSelectedExtensionAction = exports.buildExtensionNode = void 0;
+Object.defineProperty(exports, "transformSliceToRemoveOpenBodiedExtension", {
+  enumerable: true,
+  get: function get() {
+    return _transforms.transformSliceToRemoveOpenBodiedExtension;
+  }
+});
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _transforms = require("@atlaskit/editor-common/transforms");
+var _state2 = require("@atlaskit/editor-prosemirror/state");
+var _utils = require("@atlaskit/editor-prosemirror/utils");
+var _extensionApi = require("./extension-api");
+var _main = require("./pm-plugins/main");
+var _utils2 = 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; }
+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; }
+var buildExtensionNode = exports.buildExtensionNode = function buildExtensionNode(type, schema, attrs, content, marks) {
+  switch (type) {
+    case 'extension':
+      return schema.nodes.extension.createChecked(attrs, content, marks);
+    case 'inlineExtension':
+      return schema.nodes.inlineExtension.createChecked(attrs, content, marks);
+    case 'bodiedExtension':
+      return schema.nodes.bodiedExtension.create(attrs, content, marks);
+  }
+};
+var performNodeUpdate = exports.performNodeUpdate = function performNodeUpdate(editorAnalyticsAPI) {
+  return function (type, newAttrs, content, marks, shouldScrollIntoView) {
+    return function (_state, _dispatch, view) {
+      if (!view) {
+        throw Error('EditorView is required to perform node update!');
+      }
+      // NOTE: `state` and `dispatch` are stale at this point so we need to grab
+      // the latest one from `view` @see HOT-93986
+      var state = view.state,
+        dispatch = view.dispatch;
+      var newNode = buildExtensionNode(type, state.schema, newAttrs, content, marks);
+      if (!newNode) {
+        return false;
+      }
+      var selection = state.selection,
+        schema = state.schema;
+      var _schema$nodes = schema.nodes,
+        extension = _schema$nodes.extension,
+        inlineExtension = _schema$nodes.inlineExtension,
+        bodiedExtension = _schema$nodes.bodiedExtension;
+      var isBodiedExtensionSelected = !!(0, _utils.findSelectedNodeOfType)([bodiedExtension])(selection);
+      var extensionState = (0, _main.getPluginState)(state);
+      var targetSelectionSource = _analytics.TARGET_SELECTION_SOURCE.CURRENT_SELECTION;
+      var action = _analytics.ACTION.UPDATED;
+      var tr = state.tr;
+
+      // When it's a bodiedExtension but not selected
+      if (newNode.type === bodiedExtension && !isBodiedExtensionSelected) {
+        // Bodied extensions can trigger an update when the cursor is inside which means that there is no node selected.
+        // To work around that we replace the parent and create a text selection instead of new node selection
+        tr = (0, _utils.replaceParentNodeOfType)(state.schema.nodes.bodiedExtension, newNode)(tr);
+        // Replacing selected node doesn't update the selection. `selection.node` still returns the old node
+        tr.setSelection(_state2.TextSelection.create(tr.doc, state.selection.anchor));
+      }
+      // If any extension is currently selected
+      else if ((0, _utils.findSelectedNodeOfType)([extension, bodiedExtension, inlineExtension])(selection)) {
+        tr = (0, _utils.replaceSelectedNode)(newNode)(tr);
+        // Replacing selected node doesn't update the selection. `selection.node` still returns the old node
+        tr.setSelection(_state2.NodeSelection.create(tr.doc, tr.mapping.map(state.selection.anchor)));
+      }
+      // When we loose the selection. This usually happens when Synchrony resets or changes
+      // the selection when user is in the middle of updating an extension.
+      else if (extensionState.element) {
+        var pos = view.posAtDOM(extensionState.element, -1);
+        if (pos > -1) {
+          tr = tr.replaceWith(pos, pos + (content.size || 0) + 1, newNode);
+          tr.setSelection(_state2.Selection.near(tr.doc.resolve(pos)));
+          targetSelectionSource = _analytics.TARGET_SELECTION_SOURCE.HTML_ELEMENT;
+        } else {
+          action = _analytics.ACTION.ERRORED;
+        }
+      }
+
+      // Only scroll if we have anything to update, best to avoid surprise scroll
+      if (dispatch && tr.docChanged) {
+        var _newNode$attrs = newNode.attrs,
+          extensionType = _newNode$attrs.extensionType,
+          extensionKey = _newNode$attrs.extensionKey,
+          layout = _newNode$attrs.layout,
+          localId = _newNode$attrs.localId;
+        editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
+          action: action,
+          actionSubject: _analytics.ACTION_SUBJECT.EXTENSION,
+          actionSubjectId: newNode.type.name,
+          eventType: _analytics.EVENT_TYPE.TRACK,
+          attributes: {
+            inputMethod: _analytics.INPUT_METHOD.CONFIG_PANEL,
+            extensionType: extensionType,
+            extensionKey: extensionKey,
+            layout: layout,
+            localId: localId,
+            selection: tr.selection.toJSON(),
+            targetSelectionSource: targetSelectionSource
+          }
+        })(tr);
+        dispatch(shouldScrollIntoView ? tr.scrollIntoView() : tr);
+      }
+      return true;
+    };
+  };
+};
+var updateExtensionParams = function updateExtensionParams(editorAnalyticsAPI) {
+  return function (updateExtension, node, actions) {
+    return /*#__PURE__*/function () {
+      var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(state, dispatch, view) {
+        var _node$node, attrs, type, content, marks, parameters, newParameters, newAttrs;
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _node$node = node.node, attrs = _node$node.attrs, type = _node$node.type, content = _node$node.content, marks = _node$node.marks;
+              if (state.schema.nodes[type.name]) {
+                _context.next = 3;
+                break;
+              }
+              return _context.abrupt("return", false);
+            case 3:
+              parameters = attrs.parameters;
+              _context.prev = 4;
+              _context.next = 7;
+              return updateExtension(parameters, actions);
+            case 7:
+              newParameters = _context.sent;
+              if (!newParameters) {
+                _context.next = 11;
+                break;
+              }
+              newAttrs = _objectSpread(_objectSpread({}, attrs), {}, {
+                parameters: _objectSpread(_objectSpread({}, parameters), newParameters)
+              });
+              return _context.abrupt("return", performNodeUpdate(editorAnalyticsAPI)(type.name, newAttrs, content, marks, true)(state, dispatch, view));
+            case 11:
+              _context.next = 15;
+              break;
+            case 13:
+              _context.prev = 13;
+              _context.t0 = _context["catch"](4);
+            case 15:
+              return _context.abrupt("return", true);
+            case 16:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, null, [[4, 13]]);
+      }));
+      return function (_x, _x2, _x3) {
+        return _ref.apply(this, arguments);
+      };
+    }();
+  };
+};
+
+// This is to decouple extensions from editor core
+// Ideally in the future we completely deprecate `EditorActions`
+var editSelectedExtension = exports.editSelectedExtension = function editSelectedExtension(editorActions) {
+  var editorView = editorActions._privateGetEditorView();
+  var _getPluginState = (0, _main.getPluginState)(editorView.state),
+    updateExtension = _getPluginState.updateExtension,
+    applyChangeToContextPanel = _getPluginState.applyChangeToContextPanel;
+  // The analytics API cannot be accessed in this case because
+  // we do not have access to the plugin injection API. Rather
+  // than change the way this works - we just won't use analytics
+  // here for now.
+  var editorAnalyticsAPI = undefined;
+  return editExtension(null, applyChangeToContextPanel, editorAnalyticsAPI, updateExtension)(editorView.state, editorView.dispatch, editorView);
+};
+var editExtension = exports.editExtension = function editExtension(macroProvider, applyChangeToContextPanel, editorAnalyticsAPI, updateExtension) {
+  return function (state, dispatch, view) {
+    if (!view) {
+      return false;
+    }
+    var _getPluginState2 = (0, _main.getPluginState)(state),
+      localId = _getPluginState2.localId;
+    var nodeWithPos = (0, _utils2.findExtensionWithLocalId)(state, localId);
+    if (!nodeWithPos) {
+      return false;
+    }
+    var editInLegacyMacroBrowser = (0, _extensionApi.getEditInLegacyMacroBrowser)({
+      view: view,
+      macroProvider: macroProvider || undefined,
+      editorAnalyticsAPI: editorAnalyticsAPI
+    });
+    if (updateExtension) {
+      updateExtension.then(function (updateMethod) {
+        if (updateMethod && view) {
+          var actions = (0, _extensionApi.createExtensionAPI)({
+            editorView: view,
+            editInLegacyMacroBrowser: editInLegacyMacroBrowser,
+            applyChange: applyChangeToContextPanel,
+            editorAnalyticsAPI: editorAnalyticsAPI
+          });
+          updateExtensionParams(editorAnalyticsAPI)(updateMethod, nodeWithPos, actions)(state, dispatch, view);
+          return;
+        }
+        if (!updateMethod && macroProvider) {
+          editInLegacyMacroBrowser();
+          return;
+        }
+      });
+    } else {
+      if (!macroProvider) {
+        return false;
+      }
+      editInLegacyMacroBrowser();
+    }
+    return true;
+  };
+};
+var createEditSelectedExtensionAction = exports.createEditSelectedExtensionAction = function createEditSelectedExtensionAction(_ref2) {
+  var editorViewRef = _ref2.editorViewRef,
+    editorAnalyticsAPI = _ref2.editorAnalyticsAPI;
+  return function () {
+    var view = editorViewRef.current;
+    if (!view) {
+      return false;
+    }
+    var _getPluginState3 = (0, _main.getPluginState)(view.state),
+      updateExtension = _getPluginState3.updateExtension,
+      applyChangeToContextPanel = _getPluginState3.applyChangeToContextPanel;
+    return editExtension(null, applyChangeToContextPanel, editorAnalyticsAPI, updateExtension)(view.state, view.dispatch, view);
+  };
+};

package/dist/cjs/commands.js

@@ -0,0 +1,122 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.removeExtension = exports.removeDescendantNodes = exports.forceAutoSave = exports.clearEditingContext = exports.checkAndRemoveExtensionNode = void 0;
+exports.setEditingContextToContextPanel = setEditingContextToContextPanel;
+exports.updateExtensionLayout = void 0;
+exports.updateState = updateState;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _utils = require("@atlaskit/editor-common/utils");
+var _utils2 = require("@atlaskit/editor-prosemirror/utils");
+var _pluginFactory = require("./plugin-factory");
+var _utils3 = 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; }
+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; }
+// AFP-2532 TODO: Fix automatic suppressions below
+// eslint-disable-next-line @atlassian/tangerine/import/entry-points
+
+function updateState(state) {
+  return (0, _pluginFactory.createCommand)({
+    type: 'UPDATE_STATE',
+    data: state
+  });
+}
+function setEditingContextToContextPanel(processParametersBefore, processParametersAfter, applyChangeToContextPanel) {
+  return (0, _pluginFactory.createCommand)({
+    type: 'UPDATE_STATE',
+    data: {
+      showContextPanel: true,
+      processParametersBefore: processParametersBefore,
+      processParametersAfter: processParametersAfter
+    }
+  }, applyChangeToContextPanel);
+}
+var clearEditingContext = exports.clearEditingContext = function clearEditingContext(applyChangeToContextPanel) {
+  return (0, _pluginFactory.createCommand)({
+    type: 'UPDATE_STATE',
+    data: {
+      showContextPanel: false,
+      processParametersBefore: undefined,
+      processParametersAfter: undefined
+    }
+  }, applyChangeToContextPanel);
+};
+var forceAutoSave = exports.forceAutoSave = function forceAutoSave(applyChangeToContextPanel) {
+  return function (resolve, reject) {
+    return (0, _pluginFactory.createCommand)({
+      type: 'UPDATE_STATE',
+      data: {
+        autoSaveResolve: resolve,
+        autoSaveReject: reject
+      }
+    }, applyChangeToContextPanel);
+  };
+};
+var updateExtensionLayout = exports.updateExtensionLayout = function updateExtensionLayout(layout) {
+  return (0, _pluginFactory.createCommand)({
+    type: 'UPDATE_STATE',
+    data: {
+      layout: layout
+    }
+  }, function (tr, state) {
+    var selectedExtension = (0, _utils3.getSelectedExtension)(state, true);
+    if (selectedExtension) {
+      var trWithNewNodeMarkup = tr.setNodeMarkup(selectedExtension.pos, undefined, _objectSpread(_objectSpread({}, selectedExtension.node.attrs), {}, {
+        layout: layout
+      }));
+      trWithNewNodeMarkup.setMeta('scrollIntoView', false);
+      return trWithNewNodeMarkup;
+    }
+    return tr;
+  });
+};
+var removeExtension = exports.removeExtension = function removeExtension(editorAnalyticsAPI) {
+  return (0, _pluginFactory.createCommand)({
+    type: 'UPDATE_STATE',
+    data: {
+      element: undefined
+    }
+  }, function (tr, state) {
+    if ((0, _utils3.getSelectedExtension)(state)) {
+      return (0, _utils2.removeSelectedNode)(tr);
+    } else {
+      return checkAndRemoveExtensionNode(state, tr, editorAnalyticsAPI);
+    }
+  });
+};
+var removeDescendantNodes = exports.removeDescendantNodes = function removeDescendantNodes(sourceNode) {
+  return (0, _pluginFactory.createCommand)({
+    type: 'UPDATE_STATE',
+    data: {
+      element: undefined
+    }
+  }, function (tr, state) {
+    return sourceNode ? (0, _utils.removeConnectedNodes)(state, sourceNode) : tr;
+  });
+};
+var checkAndRemoveExtensionNode = exports.checkAndRemoveExtensionNode = function checkAndRemoveExtensionNode(state, tr, analyticsApi) {
+  var nodeType = state.schema.nodes.bodiedExtension;
+  var maybeMBENode = (0, _utils2.findParentNodeOfType)(state.schema.nodes.multiBodiedExtension)(state.selection);
+  if (maybeMBENode) {
+    nodeType = state.schema.nodes.multiBodiedExtension;
+    if (analyticsApi) {
+      analyticsApi.attachAnalyticsEvent({
+        action: _analytics.ACTION.DELETED,
+        actionSubject: _analytics.ACTION_SUBJECT.MULTI_BODIED_EXTENSION,
+        eventType: _analytics.EVENT_TYPE.TRACK,
+        attributes: {
+          extensionType: maybeMBENode.node.attrs.extensionType,
+          extensionKey: maybeMBENode.node.attrs.extensionKey,
+          localId: maybeMBENode.node.attrs.localId,
+          maxFramesCount: maybeMBENode.node.attrs.maxFrames,
+          currentFramesCount: maybeMBENode.node.content.childCount
+        }
+      })(tr);
+    }
+  }
+  return (0, _utils2.removeParentNodeOfType)(nodeType)(tr);
+};

package/dist/cjs/context-panel.js

@@ -0,0 +1,269 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getContextPanel = exports.duplicateSelection = void 0;
+exports.onChangeAction = onChangeAction;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _react = _interopRequireDefault(require("react"));
+var _extensions = require("@atlaskit/editor-common/extensions");
+var _selection = require("@atlaskit/editor-common/selection");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
+var _actions = require("./actions");
+var _commands = require("./commands");
+var _main = require("./pm-plugins/main");
+var _ConfigPanelLoader = _interopRequireDefault(require("./ui/ConfigPanel/ConfigPanelLoader"));
+var _SaveIndicator = require("./ui/SaveIndicator/SaveIndicator");
+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; }
+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; }
+var areParametersEqual = function areParametersEqual(firstParameters, secondParameters) {
+  if ((0, _typeof2.default)(firstParameters) === 'object' && (0, _typeof2.default)(secondParameters) === 'object' && firstParameters !== null && secondParameters !== null) {
+    var firstKeys = Object.keys(firstParameters);
+    var secondKeys = Object.keys(secondParameters);
+    return firstKeys.length === secondKeys.length && firstKeys.every(function (key) {
+      return firstParameters[key] === secondParameters[key];
+    });
+  }
+  return firstParameters === secondParameters;
+};
+var duplicateSelection = exports.duplicateSelection = function duplicateSelection(selectionToDuplicate, doc) {
+  if (selectionToDuplicate instanceof _state.NodeSelection) {
+    return _state.NodeSelection.create(doc, selectionToDuplicate.from);
+  } else if (selectionToDuplicate instanceof _state.TextSelection) {
+    return _state.TextSelection.create(doc, selectionToDuplicate.from, selectionToDuplicate.to);
+  } else if (selectionToDuplicate instanceof _selection.GapCursorSelection) {
+    return new _selection.GapCursorSelection(doc.resolve(selectionToDuplicate.from), selectionToDuplicate.side);
+  } else if (selectionToDuplicate instanceof _cellSelection.CellSelection) {
+    return new _cellSelection.CellSelection(doc.resolve(selectionToDuplicate.$anchorCell.pos), doc.resolve(selectionToDuplicate.$headCell.pos));
+  }
+};
+var getContextPanel = exports.getContextPanel = function getContextPanel(getEditorView) {
+  return function (allowAutoSave, featureFlags, applyChange) {
+    return function (state) {
+      var nodeWithPos = (0, _utils.getSelectedExtension)(state, true);
+
+      // Adding checks to bail out early
+      if (!nodeWithPos) {
+        return;
+      }
+      var extensionState = (0, _main.getPluginState)(state);
+      var autoSaveResolve = extensionState.autoSaveResolve,
+        autoSaveReject = extensionState.autoSaveReject,
+        showContextPanel = extensionState.showContextPanel,
+        extensionProvider = extensionState.extensionProvider,
+        processParametersBefore = extensionState.processParametersBefore,
+        processParametersAfter = extensionState.processParametersAfter;
+      if (extensionState && showContextPanel && extensionProvider && processParametersAfter) {
+        var _nodeWithPos$node$att = nodeWithPos.node.attrs,
+          extensionType = _nodeWithPos$node$att.extensionType,
+          extensionKey = _nodeWithPos$node$att.extensionKey,
+          parameters = _nodeWithPos$node$att.parameters;
+        var _getExtensionKeyAndNo = (0, _extensions.getExtensionKeyAndNodeKey)(extensionKey, extensionType),
+          _getExtensionKeyAndNo2 = (0, _slicedToArray2.default)(_getExtensionKeyAndNo, 2),
+          extKey = _getExtensionKeyAndNo2[0],
+          nodeKey = _getExtensionKeyAndNo2[1];
+        var configParams = processParametersBefore ? processParametersBefore(parameters || {}) : parameters;
+        return /*#__PURE__*/_react.default.createElement(_SaveIndicator.SaveIndicator, {
+          duration: 5000,
+          visible: allowAutoSave
+        }, function (_ref) {
+          var onSaveStarted = _ref.onSaveStarted,
+            onSaveEnded = _ref.onSaveEnded;
+          var editorView = getEditorView === null || getEditorView === void 0 ? void 0 : getEditorView();
+          if (!editorView) {
+            return null;
+          }
+          return /*#__PURE__*/_react.default.createElement(_ConfigPanelLoader.default, {
+            showHeader: true,
+            closeOnEsc: true,
+            extensionType: extensionType,
+            extensionKey: extKey,
+            nodeKey: nodeKey,
+            extensionParameters: parameters,
+            parameters: configParams,
+            extensionProvider: extensionProvider,
+            autoSave: allowAutoSave,
+            autoSaveTrigger: autoSaveResolve,
+            autoSaveReject: autoSaveReject,
+            onChange: /*#__PURE__*/function () {
+              var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(updatedParameters) {
+                return _regenerator.default.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();
+                      }
+                      if (!allowAutoSave) {
+                        (0, _commands.clearEditingContext)(applyChange)(editorView.state, editorView.dispatch);
+                      }
+                    case 5:
+                    case "end":
+                      return _context.stop();
+                  }
+                }, _callee);
+              }));
+              return function (_x) {
+                return _ref2.apply(this, arguments);
+              };
+            }(),
+            onCancel: /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
+              return _regenerator.default.wrap(function _callee2$(_context2) {
+                while (1) switch (_context2.prev = _context2.next) {
+                  case 0:
+                    if (!allowAutoSave) {
+                      _context2.next = 9;
+                      break;
+                    }
+                    _context2.prev = 1;
+                    _context2.next = 4;
+                    return new Promise(function (resolve, reject) {
+                      (0, _commands.forceAutoSave)(applyChange)(resolve, reject)(editorView.state, editorView.dispatch);
+                    });
+                  case 4:
+                    _context2.next = 9;
+                    break;
+                  case 6:
+                    _context2.prev = 6;
+                    _context2.t0 = _context2["catch"](1);
+                    // 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 9:
+                    (0, _commands.clearEditingContext)(applyChange)(editorView.state, editorView.dispatch);
+                  case 10:
+                  case "end":
+                    return _context2.stop();
+                }
+              }, _callee2, null, [[1, 6]]);
+            })),
+            featureFlags: featureFlags
+          });
+        });
+      }
+    };
+  };
+};
+function onChangeAction(_x2) {
+  return _onChangeAction.apply(this, arguments);
+}
+function _onChangeAction() {
+  _onChangeAction = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(editorView) {
+    var updatedParameters,
+      oldParameters,
+      nodeWithPos,
+      onSaving,
+      _ref4,
+      processParametersAfter,
+      processParametersBefore,
+      unwrappedOldParameters,
+      key,
+      _ref5,
+      previousPositions,
+      newParameters,
+      _ref6,
+      positions,
+      node,
+      newNode,
+      positionUpdated,
+      transaction,
+      prevSelection,
+      selection,
+      positionsLess,
+      _args3 = arguments;
+    return _regenerator.default.wrap(function _callee3$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
+        case 0:
+          updatedParameters = _args3.length > 1 && _args3[1] !== undefined ? _args3[1] : {};
+          oldParameters = _args3.length > 2 && _args3[2] !== undefined ? _args3[2] : {};
+          nodeWithPos = _args3.length > 3 ? _args3[3] : undefined;
+          onSaving = _args3.length > 4 ? _args3[4] : undefined;
+          // WARNING: editorView.state stales quickly, do not unpack
+          _ref4 = (0, _main.getPluginState)(editorView.state), processParametersAfter = _ref4.processParametersAfter, processParametersBefore = _ref4.processParametersBefore;
+          if (processParametersAfter) {
+            _context3.next = 7;
+            break;
+          }
+          return _context3.abrupt("return");
+        case 7:
+          unwrappedOldParameters = processParametersBefore ? processParametersBefore(oldParameters) : oldParameters; // todo: update to only check parameters which are in the manifest's field definitions
+          if (!areParametersEqual(unwrappedOldParameters, updatedParameters)) {
+            _context3.next = 10;
+            break;
+          }
+          return _context3.abrupt("return");
+        case 10:
+          if (onSaving) {
+            onSaving();
+          }
+          key = Date.now();
+          _ref5 = (0, _main.getPluginState)(editorView.state), previousPositions = _ref5.positions;
+          _context3.next = 15;
+          return (0, _commands.updateState)({
+            positions: _objectSpread(_objectSpread({}, previousPositions), {}, (0, _defineProperty2.default)({}, key, nodeWithPos.pos))
+          })(editorView.state, editorView.dispatch);
+        case 15:
+          _context3.next = 17;
+          return processParametersAfter(updatedParameters);
+        case 17:
+          newParameters = _context3.sent;
+          _ref6 = (0, _main.getPluginState)(editorView.state), positions = _ref6.positions;
+          if (positions) {
+            _context3.next = 21;
+            break;
+          }
+          return _context3.abrupt("return");
+        case 21:
+          if (key in positions) {
+            _context3.next = 23;
+            break;
+          }
+          return _context3.abrupt("return");
+        case 23:
+          node = nodeWithPos.node;
+          newNode = (0, _actions.buildExtensionNode)(nodeWithPos.node.toJSON().type, editorView.state.schema, _objectSpread(_objectSpread({}, node.attrs), {}, {
+            parameters: _objectSpread(_objectSpread({}, oldParameters), newParameters)
+          }), node.content, node.marks);
+          if (newNode) {
+            _context3.next = 27;
+            break;
+          }
+          return _context3.abrupt("return");
+        case 27:
+          positionUpdated = positions[key];
+          transaction = editorView.state.tr.replaceWith(positionUpdated, positionUpdated + newNode.nodeSize, newNode); // Ensure we preserve the selection, tr.replaceWith causes it to be lost in some cases
+          // when replacing the node
+          prevSelection = editorView.state.selection;
+          if (!prevSelection.eq(transaction.selection)) {
+            selection = duplicateSelection(prevSelection, transaction.doc);
+            if (selection) {
+              transaction.setSelection(selection);
+            }
+          }
+          positionsLess = _objectSpread({}, (0, _main.getPluginState)(editorView.state).positions);
+          delete positionsLess[key];
+          _context3.next = 35;
+          return (0, _commands.updateState)({
+            positions: positionsLess
+          })(editorView.state, editorView.dispatch);
+        case 35:
+          editorView.dispatch(transaction);
+        case 36:
+        case "end":
+          return _context3.stop();
+      }
+    }, _callee3);
+  }));
+  return _onChangeAction.apply(this, arguments);
+}