@atlaskit/editor-core 189.3.19 → 189.3.20

package/dist/es2019/plugins/extension/context-panel.js

@@ -2,12 +2,13 @@ import React from 'react';
 import { getExtensionKeyAndNodeKey } from '@atlaskit/editor-common/extensions';
 import { getPluginState } from './pm-plugins/main';
 import { getSelectedExtension } from './utils';
-import WithEditorActions from '../../ui/WithEditorActions';
 import ConfigPanelLoader from '../../ui/ConfigPanel/ConfigPanelLoader';
-import { duplicateSelection } from '../../utils/selection';
 import { clearEditingContext, forceAutoSave, updateState } from './commands';
 import { buildExtensionNode } from './actions';
 import { SaveIndicator } from './ui/SaveIndicator/SaveIndicator';
+import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
+import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { GapCursorSelection } from '@atlaskit/editor-common/selection';
 const areParametersEqual = (firstParameters, secondParameters) => {
   if (typeof firstParameters === 'object' && typeof secondParameters === 'object' && firstParameters !== null && secondParameters !== null) {
     const firstKeys = Object.keys(firstParameters);
@@ -16,7 +17,18 @@ const areParametersEqual = (firstParameters, secondParameters) => {
   }
   return firstParameters === secondParameters;
 };
-export const getContextPanel = (allowAutoSave, featureFlags, applyChange) => state => {
+export const duplicateSelection = (selectionToDuplicate, doc) => {
+  if (selectionToDuplicate instanceof NodeSelection) {
+    return NodeSelection.create(doc, selectionToDuplicate.from);
+  } else if (selectionToDuplicate instanceof TextSelection) {
+    return TextSelection.create(doc, selectionToDuplicate.from, selectionToDuplicate.to);
+  } else if (selectionToDuplicate instanceof GapCursorSelection) {
+    return new GapCursorSelection(doc.resolve(selectionToDuplicate.from), selectionToDuplicate.side);
+  } else if (selectionToDuplicate instanceof CellSelection) {
+    return new CellSelection(doc.resolve(selectionToDuplicate.$anchorCell.pos), doc.resolve(selectionToDuplicate.$headCell.pos));
+  }
+};
+export const getContextPanel = getEditorView => (allowAutoSave, featureFlags, applyChange) => state => {
   const nodeWithPos = getSelectedExtension(state, true);
 
   // Adding checks to bail out early
@@ -47,51 +59,47 @@ export const getContextPanel = (allowAutoSave, featureFlags, applyChange) => sta
       onSaveStarted,
       onSaveEnded
     }) => {
-      return /*#__PURE__*/React.createElement(WithEditorActions, {
-        render: actions => {
-          const editorView = actions._privateGetEditorView();
-          if (!editorView) {
-            return null;
+      const editorView = getEditorView === null || getEditorView === void 0 ? void 0 : getEditorView();
+      if (!editorView) {
+        return null;
+      }
+      return /*#__PURE__*/React.createElement(ConfigPanelLoader, {
+        showHeader: true,
+        closeOnEsc: true,
+        extensionType: extensionType,
+        extensionKey: extKey,
+        nodeKey: nodeKey,
+        extensionParameters: parameters,
+        parameters: configParams,
+        extensionProvider: extensionProvider,
+        autoSave: allowAutoSave,
+        autoSaveTrigger: autoSaveResolve,
+        autoSaveReject: autoSaveReject,
+        onChange: async updatedParameters => {
+          await onChangeAction(editorView, updatedParameters, parameters, nodeWithPos, onSaveStarted);
+          onSaveEnded();
+          if (autoSaveResolve) {
+            autoSaveResolve();
+          }
+          if (!allowAutoSave) {
+            clearEditingContext(applyChange)(editorView.state, editorView.dispatch);
+          }
+        },
+        onCancel: async () => {
+          if (allowAutoSave) {
+            try {
+              await new Promise((resolve, reject) => {
+                forceAutoSave(applyChange)(resolve, reject)(editorView.state, editorView.dispatch);
+              });
+            } catch (e) {
+              // Even if the save failed, we should proceed with closing the panel
+              // eslint-disable-next-line no-console
+              console.error(`Autosave failed with error`, e);
+            }
           }
-          return /*#__PURE__*/React.createElement(ConfigPanelLoader, {
-            showHeader: true,
-            closeOnEsc: true,
-            extensionType: extensionType,
-            extensionKey: extKey,
-            nodeKey: nodeKey,
-            extensionParameters: parameters,
-            parameters: configParams,
-            extensionProvider: extensionProvider,
-            autoSave: allowAutoSave,
-            autoSaveTrigger: autoSaveResolve,
-            autoSaveReject: autoSaveReject,
-            onChange: async updatedParameters => {
-              await onChangeAction(editorView, updatedParameters, parameters, nodeWithPos, onSaveStarted);
-              onSaveEnded();
-              if (autoSaveResolve) {
-                autoSaveResolve();
-              }
-              if (!allowAutoSave) {
-                clearEditingContext(applyChange)(editorView.state, editorView.dispatch);
-              }
-            },
-            onCancel: async () => {
-              if (allowAutoSave) {
-                try {
-                  await new Promise((resolve, reject) => {
-                    forceAutoSave(applyChange)(resolve, reject)(editorView.state, editorView.dispatch);
-                  });
-                } catch (e) {
-                  // Even if the save failed, we should proceed with closing the panel
-                  // eslint-disable-next-line no-console
-                  console.error(`Autosave failed with error`, e);
-                }
-              }
-              clearEditingContext(applyChange)(editorView.state, editorView.dispatch);
-            },
-            featureFlags: featureFlags
-          });
-        }
+          clearEditingContext(applyChange)(editorView.state, editorView.dispatch);
+        },
+        featureFlags: featureFlags
       });
     });
   }

package/dist/es2019/plugins/extension/extension-api.js

@@ -4,7 +4,7 @@ import { Fragment, Mark } from '@atlaskit/editor-prosemirror/model';
 import { NodeSelection, Selection } from '@atlaskit/editor-prosemirror/state';
 import { insertMacroFromMacroBrowser } from './pm-plugins/macro/actions';
 import { pluginKey as macroPluginKey } from './pm-plugins/macro/plugin-key';
-import { nodeToJSON } from '../../utils';
+import { nodeToJSON } from '@atlaskit/editor-common/utils';
 import { setEditingContextToContextPanel } from './commands';
 import { findNodePosWithLocalId, getDataConsumerMark, getNodeTypesReferenced, getSelectedExtension } from './utils';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';

package/dist/es2019/plugins/extension/index.js

@@ -97,7 +97,10 @@ const extensionPlugin = ({
         applyChangeToContextPanel: api === null || api === void 0 ? void 0 : (_api$contextPanel3 = api.contextPanel) === null || _api$contextPanel3 === void 0 ? void 0 : _api$contextPanel3.actions.applyChange,
         editorAnalyticsAPI: api === null || api === void 0 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions
       }),
-      contextPanel: getContextPanel(options.allowAutoSave, featureFlags, api === null || api === void 0 ? void 0 : (_api$contextPanel4 = api.contextPanel) === null || _api$contextPanel4 === void 0 ? void 0 : _api$contextPanel4.actions.applyChange)
+      contextPanel: getContextPanel(() => {
+        var _editorViewRef$curren;
+        return (_editorViewRef$curren = editorViewRef.current) !== null && _editorViewRef$curren !== void 0 ? _editorViewRef$curren : undefined;
+      })(options.allowAutoSave, featureFlags, api === null || api === void 0 ? void 0 : (_api$contextPanel4 = api.contextPanel) === null || _api$contextPanel4 === void 0 ? void 0 : _api$contextPanel4.actions.applyChange)
     }
   };
 };

package/dist/es2019/plugins/extension/plugin-factory.js

@@ -1,4 +1,4 @@
-import { pluginFactory } from '../../utils/plugin-state-factory';
+import { pluginFactory } from '@atlaskit/editor-common/utils';
 import reducer from './reducer';
 import { pluginKey } from './plugin-key';
 const factory = pluginFactory(pluginKey, reducer, {

package/dist/es2019/plugins/extension/pm-plugins/macro/actions.js

@@ -4,8 +4,7 @@ import { safeInsert, replaceSelectedNode, findSelectedNodeOfType, replaceParentN
 import { getValidNode } from '@atlaskit/editor-common/validator';
 import { normaliseNestedLayout } from '@atlaskit/editor-common/insert';
 import { getPluginState as getExtensionPluginState } from '../../plugin-factory';
-import { ACTION, ACTION_SUBJECT, INPUT_METHOD, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
-import { TARGET_SELECTION_SOURCE } from '@atlaskit/editor-common/analytics';
+import { ACTION, ACTION_SUBJECT, INPUT_METHOD, EVENT_TYPE, TARGET_SELECTION_SOURCE } from '@atlaskit/editor-common/analytics';
 import { pluginKey } from './plugin-key';
 export const insertMacroFromMacroBrowser = editorAnalyticsAPI => (macroProvider, macroNode, isEditing) => async view => {
   if (!macroProvider) {

package/dist/es2019/plugins/extension/pm-plugins/unique-id.js

@@ -1,7 +1,7 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { uuid } from '@atlaskit/adf-schema';
-import { stepAddsOneOf } from '../../../utils/step';
+import { stepAddsOneOf } from '@atlaskit/editor-common/utils';
 const pluginKey = new PluginKey('extensionUniqueIdPlugin');
 const createPlugin = () => new SafePlugin({
   // TODO: @see ED-8839

package/dist/es2019/plugins/extension/toolbar.js

@@ -5,7 +5,7 @@ import EditIcon from '@atlaskit/icon/glyph/editor/edit';
 import FullWidthIcon from '@atlaskit/icon/glyph/editor/media-full-width';
 import WideIcon from '@atlaskit/icon/glyph/editor/media-wide';
 import CenterIcon from '@atlaskit/icon/glyph/editor/media-center';
-import commonMessages from '../../messages';
+import commonMessages from '@atlaskit/editor-common/messages';
 import { editExtension } from './actions';
 import { getPluginState } from './pm-plugins/main';
 import { getSelectedExtension } from './utils';

package/dist/es2019/plugins/extension/utils.js

@@ -1,6 +1,5 @@
 import { findParentNodeOfType, findSelectedNodeOfType, findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
-import { closestElement } from '../../utils/dom';
-import { findNodePosByLocalIds } from '../../utils/nodes-by-localIds';
+import { findNodePosByLocalIds, closestElement } from '@atlaskit/editor-common/utils';
 export const getSelectedExtension = (state, searchParent = false) => {
   const {
     inlineExtension,

package/dist/es2019/plugins/find-replace/plugin.js

@@ -5,7 +5,7 @@ import reducer from './reducer';
 import { findReplacePluginKey } from './types';
 import { findMatches, createDecorations, removeDecorationsFromSet, findSearchIndex, removeMatchesFromSet, findDecorationFromMatch, isMatchAffectedByStep } from './utils';
 import { findUniqueItemsIn } from '../../utils/array';
-import { stepHasSlice } from '../../utils/step';
+import { stepHasSlice } from '@atlaskit/editor-common/utils';
 export const initialState = {
   isActive: false,
   shouldFocus: false,

package/dist/es2019/ui/ContentStyles/index.js

@@ -13,7 +13,7 @@ import { mediaStyles } from './media';
 import { layoutStyles } from './layout';
 import { panelStyles } from './panel';
 import { placeholderTextStyles } from '@atlaskit/editor-plugin-placeholder-text/styles';
-import { extensionStyles } from '../../plugins/extension/ui/styles';
+import { extensionStyles } from './extension';
 import { expandStyles } from './expand';
 import { MediaSharedClassNames } from '@atlaskit/editor-common/styles';
 import { findReplaceStyles } from '../../plugins/find-replace/styles';

package/dist/es2019/utils/nodes-by-localIds.js

@@ -1,30 +1,3 @@
-export const findNodePosByLocalIds = (state, ids, option = {}) => {
-  var _state$doc$attrs;
-  if (ids.length === 0) {
-    return [];
-  }
-  const nodes = [];
-  const localIdSet = new Set(ids);
-  if (option.includeDocNode && localIdSet.has((_state$doc$attrs = state.doc.attrs) === null || _state$doc$attrs === void 0 ? void 0 : _state$doc$attrs.localId)) {
-    nodes.push({
-      node: state.doc,
-      pos: 0
-    });
-  }
-  state.doc.descendants((node, pos) => {
-    var _node$attrs;
-    if (localIdSet.has((_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.localId)) {
-      nodes.push({
-        node,
-        pos
-      });
-    }
-
-    // stop traversing once we found all the nodes
-    return localIdSet.size !== nodes.length;
-  });
-  return nodes;
-};
 export const findNodePosByFragmentLocalIds = (state, ids) => {
   if (ids.length === 0) {
     return [];

package/dist/es2019/utils/selection.js

@@ -1,6 +1,3 @@
-import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
-import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
-import { GapCursorSelection } from '@atlaskit/editor-common/selection';
 export { setNodeSelection, setTextSelection, setAllSelection, setCellSelection } from '@atlaskit/editor-common/utils';
 
 // checks if the given position is within the ProseMirror document
@@ -9,15 +6,4 @@ export const isValidPosition = (pos, state) => {
     return true;
   }
   return false;
-};
-export const duplicateSelection = (selectionToDuplicate, doc) => {
-  if (selectionToDuplicate instanceof NodeSelection) {
-    return NodeSelection.create(doc, selectionToDuplicate.from);
-  } else if (selectionToDuplicate instanceof TextSelection) {
-    return TextSelection.create(doc, selectionToDuplicate.from, selectionToDuplicate.to);
-  } else if (selectionToDuplicate instanceof GapCursorSelection) {
-    return new GapCursorSelection(doc.resolve(selectionToDuplicate.from), selectionToDuplicate.side);
-  } else if (selectionToDuplicate instanceof CellSelection) {
-    return new CellSelection(doc.resolve(selectionToDuplicate.$anchorCell.pos), doc.resolve(selectionToDuplicate.$headCell.pos));
-  }
 };

package/dist/es2019/version-wrapper.js

@@ -1,2 +1,2 @@
 export const name = "@atlaskit/editor-core";
-export const version = "189.3.19";
+export const version = "189.3.20";

package/dist/esm/actions/index.js

@@ -6,10 +6,9 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { Node } from '@atlaskit/editor-prosemirror/model';
 import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNode, safeInsert } from '@atlaskit/editor-prosemirror/utils';
-import { analyticsEventKey, isEmptyDocument, processRawValue } from '@atlaskit/editor-common/utils';
+import { analyticsEventKey, isEmptyDocument, processRawValue, findNodePosByLocalIds } from '@atlaskit/editor-common/utils';
 import { createDispatch } from '../event-dispatcher';
 import { getCollabProvider } from '../plugins/collab-edit/native-collab-provider-plugin';
-import { findNodePosWithLocalId } from '../plugins/extension/utils';
 import { toJSON } from '../utils';
 import { __temporaryFixForConfigPanel as _temporaryFixForConfigPanel, getEditorValueWithMedia } from '../utils/action';
 import deprecationWarnings from '../utils/deprecation-warnings';
@@ -255,8 +254,10 @@ var EditorActions = /*#__PURE__*/function () {
     value: function getNodeByLocalId(id) {
       var _this$editorView;
       if ((_this$editorView = this.editorView) !== null && _this$editorView !== void 0 && _this$editorView.state) {
-        var _findNodePosWithLocal, _this$editorView2;
-        return (_findNodePosWithLocal = findNodePosWithLocalId((_this$editorView2 = this.editorView) === null || _this$editorView2 === void 0 ? void 0 : _this$editorView2.state, id)) === null || _findNodePosWithLocal === void 0 ? void 0 : _findNodePosWithLocal.node;
+        var _this$editorView2;
+        var nodes = findNodePosByLocalIds((_this$editorView2 = this.editorView) === null || _this$editorView2 === void 0 ? void 0 : _this$editorView2.state, [id]);
+        var node = nodes.length >= 1 ? nodes[0] : undefined;
+        return node === null || node === void 0 ? void 0 : node.node;
       }
     }
   }, {

package/dist/esm/plugins/code-bidi-warning/pm-plugins/plugin-factory.js

@@ -7,7 +7,7 @@ import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import CodeBidiWarning from '@atlaskit/code/bidi-warning';
 import codeBidiWarningDecorator from '@atlaskit/code/bidi-warning-decorator';
 import { pluginFactory } from '../../../utils/plugin-state-factory';
-import { stepHasSlice } from '../../../utils/step';
+import { stepHasSlice } from '@atlaskit/editor-common/utils';
 import { codeBidiWarningPluginKey } from '../plugin-key';
 import reducer from './reducer';
 var _pluginFactory = pluginFactory(codeBidiWarningPluginKey, reducer, {

package/dist/esm/plugins/extension/context-panel.js

@@ -9,12 +9,13 @@ import React from 'react';
 import { getExtensionKeyAndNodeKey } from '@atlaskit/editor-common/extensions';
 import { getPluginState } from './pm-plugins/main';
 import { getSelectedExtension } from './utils';
-import WithEditorActions from '../../ui/WithEditorActions';
 import ConfigPanelLoader from '../../ui/ConfigPanel/ConfigPanelLoader';
-import { duplicateSelection } from '../../utils/selection';
 import { clearEditingContext, forceAutoSave, updateState } from './commands';
 import { buildExtensionNode } from './actions';
 import { SaveIndicator } from './ui/SaveIndicator/SaveIndicator';
+import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
+import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { GapCursorSelection } from '@atlaskit/editor-common/selection';
 var areParametersEqual = function areParametersEqual(firstParameters, secondParameters) {
   if (_typeof(firstParameters) === 'object' && _typeof(secondParameters) === 'object' && firstParameters !== null && secondParameters !== null) {
     var firstKeys = Object.keys(firstParameters);
@@ -25,116 +26,125 @@ var areParametersEqual = function areParametersEqual(firstParameters, secondPara
   }
   return firstParameters === secondParameters;
 };
-export var getContextPanel = function getContextPanel(allowAutoSave, featureFlags, applyChange) {
-  return function (state) {
-    var nodeWithPos = getSelectedExtension(state, true);
+export var duplicateSelection = function duplicateSelection(selectionToDuplicate, doc) {
+  if (selectionToDuplicate instanceof NodeSelection) {
+    return NodeSelection.create(doc, selectionToDuplicate.from);
+  } else if (selectionToDuplicate instanceof TextSelection) {
+    return TextSelection.create(doc, selectionToDuplicate.from, selectionToDuplicate.to);
+  } else if (selectionToDuplicate instanceof GapCursorSelection) {
+    return new GapCursorSelection(doc.resolve(selectionToDuplicate.from), selectionToDuplicate.side);
+  } else if (selectionToDuplicate instanceof CellSelection) {
+    return new CellSelection(doc.resolve(selectionToDuplicate.$anchorCell.pos), doc.resolve(selectionToDuplicate.$headCell.pos));
+  }
+};
+export var getContextPanel = function getContextPanel(getEditorView) {
+  return function (allowAutoSave, featureFlags, applyChange) {
+    return function (state) {
+      var nodeWithPos = getSelectedExtension(state, true);
 
-    // Adding checks to bail out early
-    if (!nodeWithPos) {
-      return;
-    }
-    var extensionState = 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 = getExtensionKeyAndNodeKey(extensionKey, extensionType),
-        _getExtensionKeyAndNo2 = _slicedToArray(_getExtensionKeyAndNo, 2),
-        extKey = _getExtensionKeyAndNo2[0],
-        nodeKey = _getExtensionKeyAndNo2[1];
-      var configParams = processParametersBefore ? processParametersBefore(parameters || {}) : parameters;
-      return /*#__PURE__*/React.createElement(SaveIndicator, {
-        duration: 5000,
-        visible: allowAutoSave
-      }, function (_ref) {
-        var onSaveStarted = _ref.onSaveStarted,
-          onSaveEnded = _ref.onSaveEnded;
-        return /*#__PURE__*/React.createElement(WithEditorActions, {
-          render: function render(actions) {
-            var editorView = actions._privateGetEditorView();
-            if (!editorView) {
-              return null;
-            }
-            return /*#__PURE__*/React.createElement(ConfigPanelLoader, {
-              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 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(updatedParameters) {
-                  return _regeneratorRuntime.wrap(function _callee$(_context) {
-                    while (1) switch (_context.prev = _context.next) {
-                      case 0:
-                        _context.next = 2;
-                        return onChangeAction(editorView, updatedParameters, parameters, nodeWithPos, onSaveStarted);
-                      case 2:
-                        onSaveEnded();
-                        if (autoSaveResolve) {
-                          autoSaveResolve();
-                        }
-                        if (!allowAutoSave) {
-                          clearEditingContext(applyChange)(editorView.state, editorView.dispatch);
-                        }
-                      case 5:
-                      case "end":
-                        return _context.stop();
-                    }
-                  }, _callee);
-                }));
-                return function (_x) {
-                  return _ref2.apply(this, arguments);
-                };
-              }(),
-              onCancel: /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-                return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-                  while (1) switch (_context2.prev = _context2.next) {
+      // Adding checks to bail out early
+      if (!nodeWithPos) {
+        return;
+      }
+      var extensionState = 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 = getExtensionKeyAndNodeKey(extensionKey, extensionType),
+          _getExtensionKeyAndNo2 = _slicedToArray(_getExtensionKeyAndNo, 2),
+          extKey = _getExtensionKeyAndNo2[0],
+          nodeKey = _getExtensionKeyAndNo2[1];
+        var configParams = processParametersBefore ? processParametersBefore(parameters || {}) : parameters;
+        return /*#__PURE__*/React.createElement(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.createElement(ConfigPanelLoader, {
+            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 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(updatedParameters) {
+                return _regeneratorRuntime.wrap(function _callee$(_context) {
+                  while (1) switch (_context.prev = _context.next) {
                     case 0:
+                      _context.next = 2;
+                      return onChangeAction(editorView, updatedParameters, parameters, nodeWithPos, onSaveStarted);
+                    case 2:
+                      onSaveEnded();
+                      if (autoSaveResolve) {
+                        autoSaveResolve();
+                      }
                       if (!allowAutoSave) {
-                        _context2.next = 9;
-                        break;
+                        clearEditingContext(applyChange)(editorView.state, editorView.dispatch);
                       }
-                      _context2.prev = 1;
-                      _context2.next = 4;
-                      return new Promise(function (resolve, reject) {
-                        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:
-                      clearEditingContext(applyChange)(editorView.state, editorView.dispatch);
-                    case 10:
+                    case 5:
                     case "end":
-                      return _context2.stop();
+                      return _context.stop();
                   }
-                }, _callee2, null, [[1, 6]]);
-              })),
-              featureFlags: featureFlags
-            });
-          }
+                }, _callee);
+              }));
+              return function (_x) {
+                return _ref2.apply(this, arguments);
+              };
+            }(),
+            onCancel: /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+              return _regeneratorRuntime.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) {
+                      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:
+                    clearEditingContext(applyChange)(editorView.state, editorView.dispatch);
+                  case 10:
+                  case "end":
+                    return _context2.stop();
+                }
+              }, _callee2, null, [[1, 6]]);
+            })),
+            featureFlags: featureFlags
+          });
         });
-      });
-    }
+      }
+    };
   };
 };
 export function onChangeAction(_x2) {

package/dist/esm/plugins/extension/extension-api.js

@@ -5,7 +5,7 @@ import { Fragment, Mark } from '@atlaskit/editor-prosemirror/model';
 import { NodeSelection, Selection } from '@atlaskit/editor-prosemirror/state';
 import { insertMacroFromMacroBrowser } from './pm-plugins/macro/actions';
 import { pluginKey as macroPluginKey } from './pm-plugins/macro/plugin-key';
-import { nodeToJSON } from '../../utils';
+import { nodeToJSON } from '@atlaskit/editor-common/utils';
 import { setEditingContextToContextPanel } from './commands';
 import { findNodePosWithLocalId, getDataConsumerMark, getNodeTypesReferenced, getSelectedExtension } from './utils';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';

package/dist/esm/plugins/extension/index.js

@@ -99,7 +99,10 @@ var extensionPlugin = function extensionPlugin(_ref) {
         applyChangeToContextPanel: _api === null || _api === void 0 || (_api$contextPanel3 = _api.contextPanel) === null || _api$contextPanel3 === void 0 ? void 0 : _api$contextPanel3.actions.applyChange,
         editorAnalyticsAPI: _api === null || _api === void 0 || (_api$analytics3 = _api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions
       }),
-      contextPanel: getContextPanel(options.allowAutoSave, featureFlags, _api === null || _api === void 0 || (_api$contextPanel4 = _api.contextPanel) === null || _api$contextPanel4 === void 0 ? void 0 : _api$contextPanel4.actions.applyChange)
+      contextPanel: getContextPanel(function () {
+        var _editorViewRef$curren;
+        return (_editorViewRef$curren = editorViewRef.current) !== null && _editorViewRef$curren !== void 0 ? _editorViewRef$curren : undefined;
+      })(options.allowAutoSave, featureFlags, _api === null || _api === void 0 || (_api$contextPanel4 = _api.contextPanel) === null || _api$contextPanel4 === void 0 ? void 0 : _api$contextPanel4.actions.applyChange)
     }
   };
 };

package/dist/esm/plugins/extension/plugin-factory.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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) { _defineProperty(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; }
-import { pluginFactory } from '../../utils/plugin-state-factory';
+import { pluginFactory } from '@atlaskit/editor-common/utils';
 import reducer from './reducer';
 import { pluginKey } from './plugin-key';
 var factory = pluginFactory(pluginKey, reducer, {

package/dist/esm/plugins/extension/pm-plugins/macro/actions.js

@@ -9,8 +9,7 @@ import { safeInsert, replaceSelectedNode, findSelectedNodeOfType, replaceParentN
 import { getValidNode } from '@atlaskit/editor-common/validator';
 import { normaliseNestedLayout } from '@atlaskit/editor-common/insert';
 import { getPluginState as getExtensionPluginState } from '../../plugin-factory';
-import { ACTION, ACTION_SUBJECT, INPUT_METHOD, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
-import { TARGET_SELECTION_SOURCE } from '@atlaskit/editor-common/analytics';
+import { ACTION, ACTION_SUBJECT, INPUT_METHOD, EVENT_TYPE, TARGET_SELECTION_SOURCE } from '@atlaskit/editor-common/analytics';
 import { pluginKey } from './plugin-key';
 export var insertMacroFromMacroBrowser = function insertMacroFromMacroBrowser(editorAnalyticsAPI) {
   return function (macroProvider, macroNode, isEditing) {

package/dist/esm/plugins/extension/pm-plugins/unique-id.js

@@ -4,7 +4,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { uuid } from '@atlaskit/adf-schema';
-import { stepAddsOneOf } from '../../../utils/step';
+import { stepAddsOneOf } from '@atlaskit/editor-common/utils';
 var pluginKey = new PluginKey('extensionUniqueIdPlugin');
 var createPlugin = function createPlugin() {
   return new SafePlugin({

package/dist/esm/plugins/extension/toolbar.js

@@ -6,7 +6,7 @@ import EditIcon from '@atlaskit/icon/glyph/editor/edit';
 import FullWidthIcon from '@atlaskit/icon/glyph/editor/media-full-width';
 import WideIcon from '@atlaskit/icon/glyph/editor/media-wide';
 import CenterIcon from '@atlaskit/icon/glyph/editor/media-center';
-import commonMessages from '../../messages';
+import commonMessages from '@atlaskit/editor-common/messages';
 import { editExtension } from './actions';
 import { getPluginState } from './pm-plugins/main';
 import { getSelectedExtension } from './utils';