@atlaskit/editor-plugin-extension 0.4.2 → 0.5.1

package/dist/cjs/ui/ConfigPanel/use-abortable-effect/index.js

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAbortableEffect = useAbortableEffect;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _react = require("react");
+var safeError = function safeError(message) {
+  if (process.env.NODE_ENV !== 'production') {
+    throw new Error(message);
+  }
+
+  // eslint-disable-next-line no-console
+  console.error(message);
+};
+var createAbortController = function createAbortController() {
+  if (typeof AbortController === 'undefined') {
+    safeError('Missing AbortController');
+  }
+  return new AbortController();
+};
+/**
+ * Similar to useEffect but integrated with the AbortController to make it useful for async operations.
+ * On unmount, the abort function will be called and the signal will be passed down to the function so
+ * we get the chance to cancel any operation we want.
+ *
+ * Note: This hook follows the signature of useEffect so it can be linted if enabled through the
+ * `additionalHooks` config.
+ *
+ * @param callback
+ * @param deps
+ */
+function useAbortableEffect(callback, deps) {
+  var abortController = (0, _react.useMemo)(function () {
+    return createAbortController();
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  deps);
+  var abort = (0, _react.useCallback)(function () {
+    return abortController.abort();
+  }, [abortController]);
+  // AFP-2511 TODO: Fix automatic suppressions below
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  var fn = (0, _react.useCallback)(callback, deps);
+  (0, _react.useEffect)(function () {
+    var teardown = fn(abortController.signal);
+    return function () {
+      if (typeof teardown === 'function') {
+        teardown();
+      }
+      abort();
+    };
+  }, [abortController, abort, fn].concat((0, _toConsumableArray2.default)(deps)));
+}

package/dist/cjs/ui/ConfigPanel/use-state-from-promise/index.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useStateFromPromise = useStateFromPromise;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _useAbortableEffect = require("../use-abortable-effect");
+/**
+ * Similar to useState but deals with async values.
+ * Simply pass a promise and it will set the state when it resolves. It won't try to set if
+ * the component unmounts
+ *
+ * Note: This hook follows the signature of useEffect so it can be linted if enabled through the
+ * `additionalHooks` config.
+ *
+ * @param callback
+ * @param deps
+ */
+function useStateFromPromise(callback, deps, initialValue) {
+  // AFP-2511 TODO: Fix automatic suppressions below
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  var fn = (0, _react.useCallback)(callback, deps);
+  var _useState = (0, _react.useState)(initialValue),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  (0, _useAbortableEffect.useAbortableEffect)(function (signal) {
+    Promise.resolve(fn()).then(function (result) {
+      if (signal.aborted) {
+        return;
+      }
+      setValue(result);
+    });
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  (0, _toConsumableArray2.default)(deps));
+  return [value, setValue];
+}

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

@@ -0,0 +1,116 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.validateRequired = exports.validate = exports.parseParamType = exports.isDuplicateField = exports.getSafeParentedName = exports.getOptionFromValue = exports.getNameFromDuplicateField = exports.getLoggedParameters = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _select = require("@atlaskit/select");
+var _constants = require("./constants");
+var _types = require("./types");
+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 validate = exports.validate = function validate(field, value) {
+  return validateRequired(field, value);
+};
+var isEmptyString = function isEmptyString(value) {
+  return typeof value === 'string' && value === '';
+};
+var isEmptyArray = function isEmptyArray(value) {
+  return Array.isArray(value) && value.length === 0;
+};
+var getUngroupedOptions = function getUngroupedOptions(groupedOptions) {
+  return groupedOptions.flatMap(function (option) {
+    return option.options;
+  });
+};
+var validateRequired = exports.validateRequired = function validateRequired(_ref, value) {
+  var isRequired = _ref.isRequired,
+    isMultiple = _ref.isMultiple;
+  if (isRequired) {
+    var isUndefined = typeof value === 'undefined';
+    var isEmpty = isEmptyString(value) || isMultiple && isEmptyArray(value) || false;
+    return isUndefined || isEmpty ? _types.ValidationError.Required : undefined;
+  }
+  return undefined;
+};
+var getOptionFromValue = exports.getOptionFromValue = function getOptionFromValue(options, value) {
+  if (!Array.isArray(options) || options.length === 0) {
+    return undefined;
+  }
+  if (Array.isArray(value)) {
+    if ((0, _select.isOptionsGrouped)(options)) {
+      return getUngroupedOptions(options).filter(function (option) {
+        return value.includes(option.value);
+      });
+    }
+    return options.filter(function (option) {
+      return value.includes(option.value);
+    });
+  }
+  if ((0, _select.isOptionsGrouped)(options)) {
+    return getUngroupedOptions(options).find(function (option) {
+      return value === option.value;
+    });
+  }
+  return options.find(function (option) {
+    return value === option.value;
+  });
+};
+
+// Atlaskit uses final-form to power the form.
+// Final-form will create nesting in the tree if a dot (.) is used in the name of the field.
+// A parent is provided from a <Fieldset /> and is appended to the name here for simplicity
+var getSafeParentedName = exports.getSafeParentedName = function getSafeParentedName(name, parentName) {
+  if (parentName && name.indexOf("".concat(parentName, ".")) === -1) {
+    return "".concat(parentName, ".").concat(name);
+  }
+  return name;
+};
+var duplicateFieldRegex = /:[0-9]+$/;
+var isDuplicateField = exports.isDuplicateField = function isDuplicateField(key) {
+  return duplicateFieldRegex.test(key);
+};
+var getNameFromDuplicateField = exports.getNameFromDuplicateField = function getNameFromDuplicateField(key) {
+  return key.replace(duplicateFieldRegex, '');
+};
+
+// An overly cautious parser for sanitizing configuration parameters of UGC
+var parseParamType = exports.parseParamType = function parseParamType(paramValue, paramField) {
+  if (paramValue && paramField) {
+    if (paramField.type === 'string') {
+      if (paramField.name === 'types') {
+        // Parse types field as an array of valid content types
+        var contentTypes = ['page', 'blogpost', 'comment', 'attachment'];
+        return paramValue && paramValue.split(',').map(function (type) {
+          return type.trim();
+        }).filter(function (type) {
+          return contentTypes.includes(type);
+        });
+      }
+      if (paramField.name === 'width') {
+        return parseFloat(paramValue);
+      }
+      // Strings are very risky - return empty string in case anything slips through
+      return '';
+    }
+    if (_constants.ALLOWED_PARAM_TYPES.includes(paramField.type)) {
+      // The param types defined here are already parsed and safe to log
+      return paramValue;
+    }
+  }
+  // Safety net
+  return null;
+};
+var getLoggedParameters = exports.getLoggedParameters = function getLoggedParameters(macroKey, currentParams, macroFields) {
+  // Get the parameters only defined in the allowlist of logged macro/parameter keys
+  return Object.keys(currentParams).filter(function (paramKey) {
+    var _ALLOWED_LOGGED_MACRO;
+    return (_ALLOWED_LOGGED_MACRO = _constants.ALLOWED_LOGGED_MACRO_PARAMS[macroKey]) === null || _ALLOWED_LOGGED_MACRO === void 0 ? void 0 : _ALLOWED_LOGGED_MACRO.includes(paramKey);
+  }).reduce(function (obj, param) {
+    return _objectSpread(_objectSpread({}, obj), {}, (0, _defineProperty2.default)({}, param, parseParamType(currentParams[param], macroFields === null || macroFields === void 0 ? void 0 : macroFields.find(function (field) {
+      return field.name === param;
+    }))));
+  }, {});
+};

package/dist/cjs/ui/SaveIndicator/SaveIndicator.js

@@ -0,0 +1,79 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SaveIndicator = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
+var _checkCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/check-circle"));
+var _colors = require("@atlaskit/theme/colors");
+var _messages = require("./messages");
+/** @jsx jsx */
+
+var noop = function noop() {};
+var saveIndicatorWrapperStyles = (0, _react2.css)({
+  display: 'flex',
+  justifyContent: 'center'
+});
+var saveIndicatorContentStyles = (0, _react2.css)({
+  position: 'fixed',
+  width: '256px',
+  bottom: "var(--ds-space-250, 20px)",
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+  padding: "var(--ds-space-075, 6px)".concat(" ", "var(--ds-space-150, 12px)"),
+  background: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
+  /* E300 */
+  boxShadow: "var(--ds-shadow-overlay, ".concat("0px 8px 12px rgba(9, 30, 66, 0.15), 0px 0px 1px rgba(9, 30, 66, 0.31)", ")"),
+  borderRadius: '16px'
+});
+var saveIndicatorTextStyles = (0, _react2.css)({
+  paddingLeft: "var(--ds-space-075, 6px)"
+});
+var SaveIndicator = exports.SaveIndicator = function SaveIndicator(_ref) {
+  var children = _ref.children,
+    duration = _ref.duration,
+    _ref$visible = _ref.visible,
+    visible = _ref$visible === void 0 ? true : _ref$visible;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    saving = _useState2[0],
+    setSaving = _useState2[1];
+  var shown = (0, _react.useRef)(false);
+  var onSaveStarted = (0, _react.useCallback)(function () {
+    if (!shown.current) {
+      setSaving(true);
+      shown.current = true;
+    }
+  }, []);
+  (0, _react.useEffect)(function () {
+    if (saving) {
+      var handleId = setTimeout(function () {
+        setSaving(false);
+      }, duration);
+      return function () {
+        return clearTimeout(handleId);
+      };
+    }
+  }, [saving, duration]);
+  return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)("div", null, children({
+    onSaveStarted: onSaveStarted,
+    onSaveEnded: noop
+  })), visible && saving && (0, _react2.jsx)("div", {
+    css: saveIndicatorWrapperStyles
+  }, (0, _react2.jsx)("div", {
+    css: saveIndicatorContentStyles,
+    "data-testid": "save-indicator-content"
+  }, (0, _react2.jsx)(_checkCircle.default, {
+    label: "Saving",
+    primaryColor: "var(--ds-icon-success, ".concat(_colors.G300, ")"),
+    size: "small"
+  }), (0, _react2.jsx)("span", {
+    css: saveIndicatorTextStyles
+  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.saveIndicator)))));
+};

package/dist/cjs/ui/SaveIndicator/messages.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.messages = void 0;
+var _reactIntlNext = require("react-intl-next");
+var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
+  saveIndicator: {
+    id: 'fabric.editor.extensions.config-panel.save-indicator',
+    defaultMessage: 'All changes are always autosaved',
+    description: 'Message shown to the user to notify to them that we save the changes automatically.'
+  }
+});

package/dist/cjs/ui/SaveIndicator/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/utils.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getSelectedExtension = exports.getSelectedDomElement = exports.getNodeTypesReferenced = exports.getDataConsumerMark = exports.findNodePosWithLocalId = exports.findExtensionWithLocalId = void 0;
+var _utils = require("@atlaskit/editor-common/utils");
+var _utils2 = require("@atlaskit/editor-prosemirror/utils");
+var getSelectedExtension = exports.getSelectedExtension = function getSelectedExtension(state) {
+  var searchParent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var _state$schema$nodes = state.schema.nodes,
+    inlineExtension = _state$schema$nodes.inlineExtension,
+    extension = _state$schema$nodes.extension,
+    bodiedExtension = _state$schema$nodes.bodiedExtension,
+    multiBodiedExtension = _state$schema$nodes.multiBodiedExtension;
+  var nodeTypes = [extension, bodiedExtension, inlineExtension, multiBodiedExtension];
+  return (0, _utils2.findSelectedNodeOfType)(nodeTypes)(state.selection) || searchParent && (0, _utils2.findParentNodeOfType)(nodeTypes)(state.selection) || undefined;
+};
+var findExtensionWithLocalId = exports.findExtensionWithLocalId = function findExtensionWithLocalId(state, localId) {
+  var selectedExtension = getSelectedExtension(state, true);
+  if (!localId) {
+    return selectedExtension;
+  }
+  if (selectedExtension && selectedExtension.node.attrs.localId === localId) {
+    return selectedExtension;
+  }
+  var _state$schema$nodes2 = state.schema.nodes,
+    inlineExtension = _state$schema$nodes2.inlineExtension,
+    extension = _state$schema$nodes2.extension,
+    bodiedExtension = _state$schema$nodes2.bodiedExtension,
+    multiBodiedExtension = _state$schema$nodes2.multiBodiedExtension;
+  var nodeTypes = [extension, bodiedExtension, inlineExtension, multiBodiedExtension];
+  var matched;
+  state.doc.descendants(function (node, pos) {
+    if (nodeTypes.includes(node.type) && node.attrs.localId === localId) {
+      matched = {
+        node: node,
+        pos: pos
+      };
+    }
+  });
+  return matched;
+};
+var getSelectedDomElement = exports.getSelectedDomElement = function getSelectedDomElement(schema, domAtPos, selectedExtensionNode) {
+  var selectedExtensionDomNode = (0, _utils2.findDomRefAtPos)(selectedExtensionNode.pos, domAtPos);
+  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
+  );
+};
+var getDataConsumerMark = exports.getDataConsumerMark = function getDataConsumerMark(newNode) {
+  var _newNode$marks;
+  return (_newNode$marks = newNode.marks) === null || _newNode$marks === void 0 ? void 0 : _newNode$marks.find(function (mark) {
+    return mark.type.name === 'dataConsumer';
+  });
+};
+var getNodeTypesReferenced = exports.getNodeTypesReferenced = function getNodeTypesReferenced(ids, state) {
+  return (0, _utils.findNodePosByLocalIds)(state, ids, {
+    includeDocNode: true
+  }).map(function (_ref) {
+    var node = _ref.node;
+    return node.type.name;
+  });
+};
+var findNodePosWithLocalId = exports.findNodePosWithLocalId = function findNodePosWithLocalId(state, localId) {
+  var nodes = (0, _utils.findNodePosByLocalIds)(state, [localId]);
+  return nodes.length >= 1 ? nodes[0] : undefined;
+};

package/dist/es2019/actions.js

@@ -0,0 +1,203 @@
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD, TARGET_SELECTION_SOURCE } from '@atlaskit/editor-common/analytics';
+export { transformSliceToRemoveOpenBodiedExtension } from '@atlaskit/editor-common/transforms';
+import { NodeSelection, Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { findSelectedNodeOfType, replaceParentNodeOfType, replaceSelectedNode } from '@atlaskit/editor-prosemirror/utils';
+import { createExtensionAPI, getEditInLegacyMacroBrowser } from './extension-api';
+import { getPluginState } from './pm-plugins/main';
+import { findExtensionWithLocalId } from './utils';
+export const 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);
+  }
+};
+export const performNodeUpdate = editorAnalyticsAPI => (type, newAttrs, content, marks, shouldScrollIntoView) => (_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
+  const {
+    state,
+    dispatch
+  } = view;
+  const newNode = buildExtensionNode(type, state.schema, newAttrs, content, marks);
+  if (!newNode) {
+    return false;
+  }
+  const {
+    selection,
+    schema
+  } = state;
+  const {
+    extension,
+    inlineExtension,
+    bodiedExtension
+  } = schema.nodes;
+  const isBodiedExtensionSelected = !!findSelectedNodeOfType([bodiedExtension])(selection);
+  const extensionState = getPluginState(state);
+  let targetSelectionSource = TARGET_SELECTION_SOURCE.CURRENT_SELECTION;
+  let action = ACTION.UPDATED;
+  let {
+    tr
+  } = state;
+
+  // 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 = replaceParentNodeOfType(state.schema.nodes.bodiedExtension, newNode)(tr);
+    // Replacing selected node doesn't update the selection. `selection.node` still returns the old node
+    tr.setSelection(TextSelection.create(tr.doc, state.selection.anchor));
+  }
+  // If any extension is currently selected
+  else if (findSelectedNodeOfType([extension, bodiedExtension, inlineExtension])(selection)) {
+    tr = replaceSelectedNode(newNode)(tr);
+    // Replacing selected node doesn't update the selection. `selection.node` still returns the old node
+    tr.setSelection(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) {
+    const pos = view.posAtDOM(extensionState.element, -1);
+    if (pos > -1) {
+      tr = tr.replaceWith(pos, pos + (content.size || 0) + 1, newNode);
+      tr.setSelection(Selection.near(tr.doc.resolve(pos)));
+      targetSelectionSource = TARGET_SELECTION_SOURCE.HTML_ELEMENT;
+    } else {
+      action = ACTION.ERRORED;
+    }
+  }
+
+  // Only scroll if we have anything to update, best to avoid surprise scroll
+  if (dispatch && tr.docChanged) {
+    const {
+      extensionType,
+      extensionKey,
+      layout,
+      localId
+    } = newNode.attrs;
+    editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
+      action,
+      actionSubject: ACTION_SUBJECT.EXTENSION,
+      actionSubjectId: newNode.type.name,
+      eventType: EVENT_TYPE.TRACK,
+      attributes: {
+        inputMethod: INPUT_METHOD.CONFIG_PANEL,
+        extensionType,
+        extensionKey,
+        layout,
+        localId,
+        selection: tr.selection.toJSON(),
+        targetSelectionSource
+      }
+    })(tr);
+    dispatch(shouldScrollIntoView ? tr.scrollIntoView() : tr);
+  }
+  return true;
+};
+const updateExtensionParams = editorAnalyticsAPI => (updateExtension, node, actions) => async (state, dispatch, view) => {
+  const {
+    attrs,
+    type,
+    content,
+    marks
+  } = node.node;
+  if (!state.schema.nodes[type.name]) {
+    return false;
+  }
+  const {
+    parameters
+  } = attrs;
+  try {
+    const newParameters = await updateExtension(parameters, actions);
+    if (newParameters) {
+      const newAttrs = {
+        ...attrs,
+        parameters: {
+          ...parameters,
+          ...newParameters
+        }
+      };
+      return performNodeUpdate(editorAnalyticsAPI)(type.name, newAttrs, content, marks, true)(state, dispatch, view);
+    }
+  } catch {}
+  return true;
+};
+
+// This is to decouple extensions from editor core
+// Ideally in the future we completely deprecate `EditorActions`
+export const editSelectedExtension = editorActions => {
+  const editorView = editorActions._privateGetEditorView();
+  const {
+    updateExtension,
+    applyChangeToContextPanel
+  } = getPluginState(editorView.state);
+  // 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.
+  const editorAnalyticsAPI = undefined;
+  return editExtension(null, applyChangeToContextPanel, editorAnalyticsAPI, updateExtension)(editorView.state, editorView.dispatch, editorView);
+};
+export const editExtension = (macroProvider, applyChangeToContextPanel, editorAnalyticsAPI, updateExtension) => (state, dispatch, view) => {
+  if (!view) {
+    return false;
+  }
+  const {
+    localId
+  } = getPluginState(state);
+  const nodeWithPos = findExtensionWithLocalId(state, localId);
+  if (!nodeWithPos) {
+    return false;
+  }
+  const editInLegacyMacroBrowser = getEditInLegacyMacroBrowser({
+    view,
+    macroProvider: macroProvider || undefined,
+    editorAnalyticsAPI
+  });
+  if (updateExtension) {
+    updateExtension.then(updateMethod => {
+      if (updateMethod && view) {
+        const actions = createExtensionAPI({
+          editorView: view,
+          editInLegacyMacroBrowser,
+          applyChange: applyChangeToContextPanel,
+          editorAnalyticsAPI
+        });
+        updateExtensionParams(editorAnalyticsAPI)(updateMethod, nodeWithPos, actions)(state, dispatch, view);
+        return;
+      }
+      if (!updateMethod && macroProvider) {
+        editInLegacyMacroBrowser();
+        return;
+      }
+    });
+  } else {
+    if (!macroProvider) {
+      return false;
+    }
+    editInLegacyMacroBrowser();
+  }
+  return true;
+};
+export const createEditSelectedExtensionAction = ({
+  editorViewRef,
+  editorAnalyticsAPI
+}) => () => {
+  const {
+    current: view
+  } = editorViewRef;
+  if (!view) {
+    return false;
+  }
+  const {
+    updateExtension,
+    applyChangeToContextPanel
+  } = getPluginState(view.state);
+  return editExtension(null, applyChangeToContextPanel, editorAnalyticsAPI, updateExtension)(view.state, view.dispatch, view);
+};