@atlaskit/editor-plugin-extension 0.4.2 → 0.5.0

package/dist/es2019/plugin.js

@@ -0,0 +1,138 @@
+import { bodiedExtension, extension, extensionFrame, inlineExtension, multiBodiedExtension } from '@atlaskit/adf-schema';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { createEditSelectedExtensionAction } from './actions';
+import { forceAutoSave } from './commands';
+import { getContextPanel } from './context-panel';
+import { createExtensionAPI } from './extension-api';
+import keymapPlugin from './pm-plugins/keymap';
+import { createPlugin as createMacroPlugin } from './pm-plugins/macro';
+import { insertMacroFromMacroBrowser, runMacroAutoConvert } from './pm-plugins/macro/actions';
+import { createPlugin, pluginKey } from './pm-plugins/main';
+import { createPlugin as createUniqueIdPlugin } from './pm-plugins/unique-id';
+import { getToolbarConfig } from './toolbar';
+export const extensionPlugin = ({
+  config: options = {},
+  api
+}) => {
+  var _api$featureFlags, _api$analytics2, _api$analytics3, _api$contextPanel3, _api$analytics4, _api$contextPanel4;
+  const featureFlags = (api === null || api === void 0 ? void 0 : (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.sharedState.currentState()) || {};
+  //Note: This is a hack to get the editor view reference in the plugin. Copied from table plugin.
+  //This is needed to get the current selection in the editor
+  const editorViewRef = {
+    current: null
+  };
+  return {
+    name: 'extension',
+    nodes() {
+      const extensionNodes = [{
+        name: 'extension',
+        node: extension
+      }, {
+        name: 'bodiedExtension',
+        node: bodiedExtension
+      }, {
+        name: 'inlineExtension',
+        node: inlineExtension
+      }];
+
+      // Revert to returning all nodes without local variable, once FF is removed
+      if (getBooleanFF('platform.editor.multi-bodied-extension_0rygg')) {
+        extensionNodes.push({
+          name: 'extensionFrame',
+          node: extensionFrame
+        });
+        extensionNodes.push({
+          name: 'multiBodiedExtension',
+          node: multiBodiedExtension
+        });
+      }
+      return extensionNodes;
+    },
+    getSharedState(state) {
+      if (!state) {
+        return undefined;
+      }
+      const pluginState = pluginKey.getState(state);
+      return {
+        showContextPanel: pluginState === null || pluginState === void 0 ? void 0 : pluginState.showContextPanel
+      };
+    },
+    pmPlugins() {
+      return [{
+        name: 'extension',
+        plugin: ({
+          dispatch,
+          providerFactory,
+          portalProviderAPI,
+          eventDispatcher
+        }) => {
+          const extensionHandlers = options.extensionHandlers || {};
+          return createPlugin(dispatch, providerFactory, extensionHandlers, portalProviderAPI, eventDispatcher, api, options.useLongPressSelection, {
+            appearance: options.appearance
+          });
+        }
+      }, {
+        name: 'extensionKeymap',
+        plugin: () => {
+          var _api$contextPanel;
+          return keymapPlugin(api === null || api === void 0 ? void 0 : (_api$contextPanel = api.contextPanel) === null || _api$contextPanel === void 0 ? void 0 : _api$contextPanel.actions.applyChange);
+        }
+      }, {
+        name: 'extensionUniqueId',
+        plugin: () => createUniqueIdPlugin()
+      }, {
+        name: 'extensionEditorViewRef',
+        plugin: () => {
+          return new SafePlugin({
+            view: editorView => {
+              // Do not cleanup the editorViewRef on destroy
+              // because some functions may point to a stale
+              // reference and this means we will return null.
+              // EditorView is assumed to be stable so we do not need to
+              // cleanup.
+              // See: #hot-106316
+              editorViewRef.current = editorView;
+              return {};
+            }
+          });
+        }
+      }, {
+        name: 'macro',
+        plugin: ({
+          dispatch,
+          providerFactory
+        }) => createMacroPlugin(dispatch, providerFactory)
+      }];
+    },
+    actions: {
+      api: () => {
+        var _api$contextPanel2, _api$analytics;
+        return createExtensionAPI({
+          editorView: editorViewRef.current,
+          applyChange: api === null || api === void 0 ? void 0 : (_api$contextPanel2 = api.contextPanel) === null || _api$contextPanel2 === void 0 ? void 0 : _api$contextPanel2.actions.applyChange,
+          editorAnalyticsAPI: api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions
+        });
+      },
+      insertMacroFromMacroBrowser: insertMacroFromMacroBrowser(api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions),
+      editSelectedExtension: createEditSelectedExtensionAction({
+        editorViewRef,
+        editorAnalyticsAPI: api === null || api === void 0 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions
+      }),
+      runMacroAutoConvert,
+      forceAutoSave
+    },
+    pluginsOptions: {
+      floatingToolbar: getToolbarConfig({
+        breakoutEnabled: options.breakoutEnabled,
+        hoverDecoration: api === null || api === void 0 ? void 0 : api.decorations.actions.hoverDecoration,
+        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$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions
+      }),
+      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/pm-plugins/keymap.js

@@ -0,0 +1,15 @@
+import { bindKeymapWithCommand, escape } from '@atlaskit/editor-common/keymaps';
+import { keymap } from '@atlaskit/editor-prosemirror/keymap';
+import { clearEditingContext } from '../commands';
+import { getPluginState } from './main';
+export default function keymapPlugin(applyChange) {
+  const list = {};
+  bindKeymapWithCommand(escape.common, (state, dispatch) => {
+    const extensionState = getPluginState(state);
+    if (!extensionState.showContextPanel) {
+      return false;
+    }
+    return clearEditingContext(applyChange)(state, dispatch);
+  }, list);
+  return keymap(list);
+}

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

@@ -0,0 +1,152 @@
+import assert from 'assert';
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD, TARGET_SELECTION_SOURCE } from '@atlaskit/editor-common/analytics';
+import { normaliseNestedLayout } from '@atlaskit/editor-common/insert';
+import { getValidNode } from '@atlaskit/editor-common/validator';
+import { NodeSelection, Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { findSelectedNodeOfType, replaceParentNodeOfType, replaceSelectedNode, safeInsert } from '@atlaskit/editor-prosemirror/utils';
+import { getPluginState as getExtensionPluginState } from '../../plugin-factory';
+import { pluginKey } from './plugin-key';
+export const insertMacroFromMacroBrowser = editorAnalyticsAPI => (macroProvider, macroNode, isEditing) => async view => {
+  if (!macroProvider) {
+    return false;
+  }
+
+  // opens MacroBrowser for editing "macroNode" if passed in
+  const newMacro = await macroProvider.openMacroBrowser(macroNode);
+  if (newMacro && macroNode) {
+    const {
+      state,
+      dispatch
+    } = view;
+    const currentLayout = macroNode && macroNode.attrs.layout || 'default';
+    const node = resolveMacro(newMacro, state, {
+      layout: currentLayout
+    });
+    if (!node) {
+      return false;
+    }
+    const {
+      selection,
+      schema
+    } = state;
+    const {
+      extension,
+      inlineExtension,
+      bodiedExtension
+    } = schema.nodes;
+    const extensionState = getExtensionPluginState(state);
+    let targetSelectionSource = TARGET_SELECTION_SOURCE.CURRENT_SELECTION;
+    let {
+      tr
+    } = state;
+    const isBodiedExtensionSelected = !!findSelectedNodeOfType([bodiedExtension])(selection);
+
+    // When it's a bodiedExtension but not selected
+    if (macroNode.type === bodiedExtension && !isBodiedExtensionSelected) {
+      // `isEditing` is `false` when we are inserting from insert-block toolbar
+      tr = isEditing ? replaceParentNodeOfType(bodiedExtension, node)(tr) : safeInsert(node)(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(node)(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 + macroNode.nodeSize, node);
+        tr.setSelection(Selection.near(tr.doc.resolve(pos)));
+        targetSelectionSource = TARGET_SELECTION_SOURCE.HTML_ELEMENT;
+      }
+    }
+
+    // Only scroll if we have anything to update, best to avoid surprise scroll
+    if (dispatch && tr.docChanged) {
+      const {
+        extensionType,
+        extensionKey,
+        layout,
+        localId
+      } = macroNode.attrs;
+      editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
+        action: ACTION.UPDATED,
+        actionSubject: ACTION_SUBJECT.EXTENSION,
+        actionSubjectId: macroNode.type.name,
+        eventType: EVENT_TYPE.TRACK,
+        attributes: {
+          inputMethod: isEditing ? INPUT_METHOD.MACRO_BROWSER : INPUT_METHOD.TOOLBAR,
+          extensionType,
+          extensionKey,
+          layout,
+          localId,
+          selection: tr.selection.toJSON(),
+          targetSelectionSource
+        }
+      })(tr);
+      dispatch(tr.scrollIntoView());
+    }
+    return true;
+  }
+  return false;
+};
+export const resolveMacro = (macro, state, optionalAttrs) => {
+  if (!macro || !state) {
+    return null;
+  }
+  const {
+    schema
+  } = state;
+  const {
+    type,
+    attrs
+  } = getValidNode(macro, schema);
+  let node = null;
+  if (type === 'extension') {
+    node = schema.nodes.extension.create({
+      ...attrs,
+      ...optionalAttrs
+    });
+  } else if (type === 'bodiedExtension') {
+    node = schema.nodes.bodiedExtension.create({
+      ...attrs,
+      ...optionalAttrs
+    }, schema.nodeFromJSON(macro).content);
+  } else if (type === 'inlineExtension') {
+    node = schema.nodes.inlineExtension.create(attrs);
+  }
+  return node && normaliseNestedLayout(state, node);
+};
+
+// gets the macroProvider from the state and tries to autoConvert a given text
+export const runMacroAutoConvert = (state, text) => {
+  const macroPluginState = pluginKey.getState(state);
+  const macroProvider = macroPluginState && macroPluginState.macroProvider;
+  if (!macroProvider || !macroProvider.autoConvert) {
+    return null;
+  }
+  const macroAttributes = macroProvider.autoConvert(text);
+  if (!macroAttributes) {
+    return null;
+  }
+
+  // decides which kind of macro to render (inline|bodied|bodyless)
+  return resolveMacro(macroAttributes, state);
+};
+export const setMacroProvider = provider => async view => {
+  let resolvedProvider;
+  try {
+    resolvedProvider = await provider;
+    assert(resolvedProvider && resolvedProvider.openMacroBrowser, `MacroProvider promise did not resolve to a valid instance of MacroProvider - ${resolvedProvider}`);
+  } catch (err) {
+    resolvedProvider = null;
+  }
+  view.dispatch(view.state.tr.setMeta(pluginKey, {
+    macroProvider: resolvedProvider
+  }));
+  return true;
+};

package/dist/es2019/pm-plugins/macro/index.js

@@ -0,0 +1,36 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { setMacroProvider } from './actions';
+import { pluginKey } from './plugin-key';
+export { insertMacroFromMacroBrowser, resolveMacro, runMacroAutoConvert, setMacroProvider } from './actions';
+export const createPlugin = (dispatch, providerFactory) => new SafePlugin({
+  state: {
+    init: () => ({
+      macroProvider: null
+    }),
+    apply(tr, state) {
+      const meta = tr.getMeta(pluginKey);
+      if (meta) {
+        const newState = {
+          ...state,
+          ...meta
+        };
+        dispatch(pluginKey, newState);
+        return newState;
+      }
+      return state;
+    }
+  },
+  key: pluginKey,
+  view: view => {
+    const handleProvider = (_name, provider) => provider && setMacroProvider(provider)(view);
+    // make sure editable DOM node is mounted
+    if (view.dom.parentNode) {
+      providerFactory.subscribe('macroProvider', handleProvider);
+    }
+    return {
+      destroy() {
+        providerFactory.unsubscribe('macroProvider', handleProvider);
+      }
+    };
+  }
+});

package/dist/es2019/pm-plugins/macro/plugin-key.js

@@ -0,0 +1,2 @@
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+export const pluginKey = new PluginKey('macroPlugin');

package/dist/es2019/pm-plugins/macro/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,230 @@
+import { ExtensionNodeView } from '@atlaskit/editor-common/extensibility';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { createSelectionClickHandler, isSelectionAtEndOfNode, isSelectionAtStartOfNode } from '@atlaskit/editor-common/selection';
+import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { findParentNodeOfTypeClosestToPos, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
+import { clearEditingContext, updateState } from '../commands';
+import { createCommand, createPluginState, getPluginState } from '../plugin-factory';
+import { pluginKey } from '../plugin-key';
+import { getSelectedDomElement, getSelectedExtension } from '../utils';
+import { updateEditButton } from './utils';
+const shouldShowEditButton = (extensionHandler, extensionProvider) => {
+  const usesLegacyMacroBrowser = !extensionHandler && !extensionProvider || typeof extensionHandler === 'function';
+  const usesModernUpdateMethod = typeof extensionHandler === 'object' && typeof extensionHandler.update === 'function';
+  if (usesLegacyMacroBrowser || usesModernUpdateMethod) {
+    return true;
+  }
+  return false;
+};
+const getUpdateExtensionPromise = async (view, extensionHandler, extensionProvider) => {
+  if (extensionHandler && typeof extensionHandler === 'object') {
+    // Old API with the `update` function
+    return extensionHandler.update;
+  } else if (extensionProvider) {
+    // New API with or without the `update` function, we don't know at this point
+    const updateMethod = await updateEditButton(view, extensionProvider);
+    if (updateMethod) {
+      return updateMethod;
+    }
+  }
+  throw new Error('No update method available');
+};
+export const createExtensionProviderHandler = view => async (name, provider) => {
+  if (name === 'extensionProvider' && provider) {
+    try {
+      const extensionProvider = await provider;
+      updateState({
+        extensionProvider
+      })(view.state, view.dispatch);
+      await updateEditButton(view, extensionProvider);
+    } catch {
+      updateState({
+        extensionProvider: undefined
+      })(view.state, view.dispatch);
+    }
+  }
+};
+export const createContextIdentifierProviderHandler = view => async (name, provider) => {
+  if (name === 'contextIdentifierProvider' && provider) {
+    try {
+      const contextIdentifierProvider = await provider;
+      updateState({
+        contextIdentifierProvider
+      })(view.state, view.dispatch);
+    } catch {
+      updateState({
+        contextIdentifierProvider: undefined
+      })(view.state, view.dispatch);
+    }
+  }
+};
+export const handleUpdate = ({
+  view,
+  prevState,
+  domAtPos,
+  extensionHandlers,
+  applyChange
+}) => {
+  const {
+    state,
+    dispatch
+  } = view;
+  const {
+    element,
+    localId,
+    extensionProvider,
+    showContextPanel,
+    showEditButton
+  } = getPluginState(state);
+
+  // This fetches the selected extension node, either by keyboard selection or click for all types of extensions
+  const selectedExtension = getSelectedExtension(state, true);
+  if (!selectedExtension) {
+    if (showContextPanel) {
+      clearEditingContext(applyChange)(state, dispatch);
+    }
+    return;
+  }
+  const {
+    node
+  } = selectedExtension;
+  const newElement = getSelectedDomElement(state.schema, domAtPos, selectedExtension);
+
+  // In some cases, showEditButton can be stale and the edit button doesn't show - @see ED-15285
+  // To be safe, we update the showEditButton state here
+  const shouldUpdateEditButton = !showEditButton && extensionProvider && element === newElement && !getSelectedExtension(prevState, true);
+  const isNewNodeSelected = node.attrs.localId ? localId !== node.attrs.localId :
+  // This is the current assumption and it's wrong but we are keeping it
+  // as fallback in case we need to turn off `allowLocalIdGeneration`
+  element !== newElement;
+  if (isNewNodeSelected || shouldUpdateEditButton) {
+    if (showContextPanel) {
+      clearEditingContext(applyChange)(state, dispatch);
+      return;
+    }
+    const {
+      extensionType
+    } = node.attrs;
+    const extensionHandler = extensionHandlers[extensionType];
+
+    // showEditButton might change async based on results from extension providers
+    const showEditButton = shouldShowEditButton(extensionHandler, extensionProvider);
+    const updateExtension = getUpdateExtensionPromise(view, extensionHandler, extensionProvider).catch(() => {
+      // do nothing;
+    });
+    updateState({
+      localId: node.attrs.localId,
+      showContextPanel: false,
+      element: newElement,
+      showEditButton,
+      updateExtension
+    })(state, dispatch);
+  }
+  // New DOM element doesn't necessarily mean it's a new Node
+  else if (element !== newElement) {
+    updateState({
+      element: newElement
+    })(state, dispatch);
+  }
+  return true;
+};
+const createPlugin = (dispatch, providerFactory, extensionHandlers, portalProviderAPI, eventDispatcher, pluginInjectionApi, useLongPressSelection = false, options = {}) => {
+  var _pluginInjectionApi$c, _pluginInjectionApi$c2;
+  const state = createPluginState(dispatch, {
+    showEditButton: false,
+    showContextPanel: false,
+    applyChangeToContextPanel: pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c = pluginInjectionApi.contextPanel) === null || _pluginInjectionApi$c === void 0 ? void 0 : (_pluginInjectionApi$c2 = _pluginInjectionApi$c.actions) === null || _pluginInjectionApi$c2 === void 0 ? void 0 : _pluginInjectionApi$c2.applyChange
+  });
+  const extensionNodeViewOptions = {
+    appearance: options.appearance
+  };
+  return new SafePlugin({
+    state,
+    view: editorView => {
+      const domAtPos = editorView.domAtPos.bind(editorView);
+      const extensionProviderHandler = createExtensionProviderHandler(editorView);
+      const contextIdentificationProviderHandler = createContextIdentifierProviderHandler(editorView);
+      providerFactory.subscribe('extensionProvider', extensionProviderHandler);
+      providerFactory.subscribe('contextIdentificationProvider', contextIdentificationProviderHandler);
+      return {
+        update: (view, prevState) => {
+          var _pluginInjectionApi$c3;
+          handleUpdate({
+            view,
+            prevState,
+            domAtPos,
+            extensionHandlers,
+            applyChange: pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c3 = pluginInjectionApi.contextPanel) === null || _pluginInjectionApi$c3 === void 0 ? void 0 : _pluginInjectionApi$c3.actions.applyChange
+          });
+        },
+        destroy: () => {
+          providerFactory.unsubscribe('extensionProvider', extensionProviderHandler);
+          providerFactory.unsubscribe('contextIdentificationProvider', contextIdentificationProviderHandler);
+        }
+      };
+    },
+    key: pluginKey,
+    props: {
+      handleDOMEvents: {
+        /**
+         * ED-18072 - Cannot shift + arrow past bodied extension if it is not empty.
+         * This code is to handle the case where the selection starts inside or on the node and the user is trying to shift + arrow.
+         * For other part of the solution see code in: packages/editor/editor-core/src/plugins/selection/pm-plugins/events/keydown.ts
+         */
+        keydown: (view, event) => {
+          if (event instanceof KeyboardEvent && event.shiftKey && ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
+            const {
+              schema,
+              selection,
+              selection: {
+                $head
+              },
+              doc,
+              tr
+            } = view.state;
+            const {
+              bodiedExtension
+            } = schema.nodes;
+            if (selection instanceof TextSelection || selection instanceof NodeSelection) {
+              const maybeBodiedExtension = selection instanceof TextSelection ? findParentNodeOfTypeClosestToPos($head, bodiedExtension) : findSelectedNodeOfType(bodiedExtension)(selection);
+              if (maybeBodiedExtension) {
+                const end = maybeBodiedExtension.pos + maybeBodiedExtension.node.nodeSize;
+                if (event.key === 'ArrowUp' || event.key === 'ArrowLeft' && isSelectionAtStartOfNode($head, maybeBodiedExtension)) {
+                  const anchor = end + 1;
+
+                  // an offset is used here so that left arrow selects the first character before the node (consistent with arrow right)
+                  const headOffset = event.key === 'ArrowLeft' ? -1 : 0;
+                  const head = maybeBodiedExtension.pos + headOffset;
+                  const newSelection = TextSelection.create(doc, Math.max(anchor, selection.anchor), head);
+                  view.dispatch(tr.setSelection(newSelection));
+                  return true;
+                }
+                if (event.key === 'ArrowDown' || event.key === 'ArrowRight' && isSelectionAtEndOfNode($head, maybeBodiedExtension)) {
+                  const anchor = maybeBodiedExtension.pos - 1;
+                  const head = end + 1;
+                  const newSelection = TextSelection.create(doc, Math.min(anchor, selection.anchor), head);
+                  view.dispatch(tr.setSelection(newSelection));
+                  return true;
+                }
+              }
+            }
+          }
+          return false;
+        }
+      },
+      nodeViews: {
+        // WARNING: referentiality-plugin also creates these nodeviews
+        extension: ExtensionNodeView(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi),
+        // WARNING: referentiality-plugin also creates these nodeviews
+        bodiedExtension: ExtensionNodeView(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi),
+        // WARNING: referentiality-plugin also creates these nodeviews
+        inlineExtension: ExtensionNodeView(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi),
+        multiBodiedExtension: ExtensionNodeView(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi)
+      },
+      handleClickOn: createSelectionClickHandler(['extension', 'bodiedExtension'], target => !target.closest('.extension-content'), {
+        useLongPressSelection
+      })
+    }
+  });
+};
+export { pluginKey, createPlugin, createCommand, getPluginState };

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

@@ -0,0 +1,69 @@
+import { uuid } from '@atlaskit/adf-schema';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { stepAddsOneOf } from '@atlaskit/editor-common/utils';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+const pluginKey = new PluginKey('extensionUniqueIdPlugin');
+const createPlugin = () => new SafePlugin({
+  // TODO: @see ED-8839
+  appendTransaction: (transactions, _oldState, newState) => {
+    const tr = newState.tr;
+    const selectionBookmark = tr.selection.getBookmark();
+    let modified = false;
+    const {
+      extension,
+      bodiedExtension,
+      inlineExtension,
+      multiBodiedExtension
+    } = newState.schema.nodes;
+    const extensionTypes = new Set([extension, bodiedExtension, inlineExtension, multiBodiedExtension]);
+    const idsObserved = new Set();
+    transactions.forEach(transaction => {
+      if (!transaction.docChanged) {
+        return;
+      }
+      const isAddingExtension = transaction.steps.some(step => stepAddsOneOf(step, extensionTypes));
+      if (isAddingExtension) {
+        // Can't simply look at changed nodes, as we could be adding an extension
+        newState.doc.descendants((node, pos) => {
+          const localId = node.attrs.localId;
+
+          // Dealing with an extension - make sure it's a unique ID
+          if (!!node.type && extensionTypes.has(node.type)) {
+            if (localId && !idsObserved.has(localId)) {
+              idsObserved.add(localId);
+              // Also add a localId if it happens to not have one,
+            } else if (!localId || idsObserved.has(localId)) {
+              modified = true;
+              tr.setNodeMarkup(pos, undefined, {
+                ...node.attrs,
+                localId: uuid.generate()
+              });
+            }
+            /**
+             * If it's a multiBodiedExtension or bodiedExtension, we'll need to keep digging;
+             * since we can have more extension nodes within the contents of that
+             */
+            if ([multiBodiedExtension, bodiedExtension].includes(node.type)) {
+              return true;
+            }
+            return false;
+          }
+
+          /**
+           * Otherwise continue traversing, we can encounter extensions nested in
+           * expands/bodiedExtensions
+           */
+          return true;
+        });
+      }
+    });
+    if (modified) {
+      // We want to restore to the original selection but w/o applying the mapping
+      // @see https://github.com/ProseMirror/prosemirror/issues/645
+      return tr.setSelection(selectionBookmark.resolve(tr.doc));
+    }
+    return;
+  },
+  key: pluginKey
+});
+export { createPlugin };

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

@@ -0,0 +1,30 @@
+import { getExtensionModuleNode } from '@atlaskit/editor-common/extensions';
+import { updateState } from '../commands';
+import { getSelectedExtension } from '../utils';
+const maybeGetUpdateMethodFromExtensionProvider = async (view, extensionProvider) => {
+  const nodeWithPos = getSelectedExtension(view.state, true);
+  if (!nodeWithPos) {
+    throw new Error('There is no selection');
+  }
+  const {
+    extensionType,
+    extensionKey
+  } = nodeWithPos.node.attrs;
+  const extensionModuleNode = await getExtensionModuleNode(extensionProvider, extensionType, extensionKey);
+  const newNodeWithPos = getSelectedExtension(view.state, true);
+  if (newNodeWithPos && newNodeWithPos.node.attrs.extensionType === extensionType && newNodeWithPos.node.attrs.extensionKey === extensionKey && newNodeWithPos.pos === nodeWithPos.pos && extensionModuleNode) {
+    return extensionModuleNode.update;
+  }
+};
+export const updateEditButton = async (view, extensionProvider) => {
+  try {
+    const updateMethod = await maybeGetUpdateMethodFromExtensionProvider(view, extensionProvider);
+    updateState({
+      showEditButton: !!updateMethod,
+      updateExtension: updateMethod && Promise.resolve(updateMethod) || undefined
+    })(view.state, view.dispatch);
+    return updateMethod;
+  } catch {
+    // this exception is not important for this case, fail silently
+  }
+};