@atlaskit/editor-core 189.3.38 → 189.4.1

package/dist/es2019/plugins/extension/ui/Extension/ExtensionComponent.js

@@ -6,6 +6,7 @@ import { getNodeRenderer, getExtensionModuleNodePrivateProps } from '@atlaskit/e
 import { getExtensionRenderer } from '@atlaskit/editor-common/utils';
 import Extension from './Extension';
 import InlineExtension from './InlineExtension';
+import MultiBodiedExtension from './MultiBodiedExtension';
 export default class ExtensionComponent extends Component {
   constructor(...args) {
     super(...args);
@@ -58,7 +59,7 @@ export default class ExtensionComponent extends Component {
         /** We keep rendering the default content */
       }
     });
-    _defineProperty(this, "handleExtension", pmNode => {
+    _defineProperty(this, "handleExtension", (pmNode, actions) => {
       var _pmNode$marks, _pmNode$marks$find, _pmNode$marks$find$at;
       const {
         extensionHandlers,
@@ -87,16 +88,24 @@ export default class ExtensionComponent extends Component {
       let result;
       if (extensionHandlers && extensionHandlers[extensionType]) {
         const render = getExtensionRenderer(extensionHandlers[extensionType]);
-        result = render(node, editorView.state.doc);
+        result = render(node, editorView.state.doc, actions);
       }
       if (!result) {
         const extensionHandlerFromProvider = this.state.extensionProvider && this.getNodeRenderer(this.state.extensionProvider, extensionType, extensionKey);
         if (extensionHandlerFromProvider) {
           const NodeRenderer = extensionHandlerFromProvider;
-          return /*#__PURE__*/React.createElement(NodeRenderer, {
-            node: node,
-            references: this.props.references
-          });
+          if (node.type === 'multiBodiedExtension') {
+            return /*#__PURE__*/React.createElement(NodeRenderer, {
+              node: node,
+              references: this.props.references,
+              actions: actions
+            });
+          } else {
+            return /*#__PURE__*/React.createElement(NodeRenderer, {
+              node: node,
+              references: this.props.references
+            });
+          }
         }
       }
       return result;
@@ -135,9 +144,19 @@ export default class ExtensionComponent extends Component {
       editorView,
       references,
       editorAppearance,
-      pluginInjectionApi
+      pluginInjectionApi,
+      getPos
     } = this.props;
-    const extensionHandlerResult = this.tryExtensionHandler();
+    if (node.type.name === 'multiBodiedExtension') {
+      return /*#__PURE__*/React.createElement(MultiBodiedExtension, {
+        node: node,
+        editorView: editorView,
+        getPos: getPos,
+        handleContentDOMRef: handleContentDOMRef,
+        tryExtensionHandler: this.tryExtensionHandler.bind(this)
+      });
+    }
+    const extensionHandlerResult = this.tryExtensionHandler(undefined);
     switch (node.type.name) {
       case 'extension':
       case 'bodiedExtension':
@@ -160,12 +179,12 @@ export default class ExtensionComponent extends Component {
         return null;
     }
   }
-  tryExtensionHandler() {
+  tryExtensionHandler(actions) {
     const {
       node
     } = this.props;
     try {
-      const extensionContent = this.handleExtension(node);
+      const extensionContent = this.handleExtension(node, actions);
       if (extensionContent && /*#__PURE__*/React.isValidElement(extensionContent)) {
         return extensionContent;
       }

package/dist/es2019/plugins/extension/ui/Extension/ExtensionNodeWrapper.js

@@ -1,5 +1,12 @@
 import React from 'react';
 import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/utils';
+/**
+ * If inlineExtension, add zero width space to the end of the nodes and wrap with span;
+ * else wrap with a div (for multi bodied extensions)
+ *
+ * @param param0
+ * @returns
+ */
 const ExtensionNodeWrapper = ({
   children,
   nodeType

package/dist/es2019/plugins/extension/ui/Extension/MultiBodiedExtension/index.js

@@ -0,0 +1,159 @@
+/** @jsx jsx */
+
+import { jsx, css } from '@emotion/react';
+import { N30 } from '@atlaskit/theme/colors';
+import React, { useState } from 'react';
+const useMultiBodiedExtensionActions = ({
+  updateActiveChild,
+  editorView,
+  getPos,
+  node
+}) => {
+  const actions = React.useMemo(() => {
+    return {
+      changeActive(index) {
+        return updateActiveChild(index);
+      },
+      addChild() {
+        const {
+          state,
+          dispatch
+        } = editorView;
+        if (node.content.childCount >= node.attrs.maxFrames) {
+          // TODO: add proper log on this
+          return false;
+        }
+        const p = state.schema.nodes.paragraph.createAndFill({});
+        if (!p) {
+          return false;
+        }
+        const frame = state.schema.nodes.extensionFrame.createAndFill({}, [p]);
+        const pos = getPos();
+        if (typeof pos !== 'number' || !frame) {
+          return false;
+        }
+        const insertAt = Math.min((pos || 1) + node.content.size, state.doc.content.size);
+        dispatch(state.tr.insert(insertAt, frame));
+        return true;
+      },
+      getChildrenCount() {
+        return node.content.childCount;
+      },
+      removeChild(index) {
+        const pos = getPos();
+        // TODO: Add child index validation here, don't trust this data
+        if (typeof pos !== 'number' || typeof index !== 'number') {
+          return false;
+        }
+        const {
+          state,
+          dispatch
+        } = editorView;
+        if (node.content.childCount === 1) {
+          const tr = state.tr;
+          tr.deleteRange(pos, pos + node.content.size);
+          dispatch(tr);
+          return true;
+        }
+        const $pos = state.doc.resolve(pos);
+        const $startNodePos = state.doc.resolve($pos.start($pos.depth + 1));
+        const startFramePosition = $startNodePos.posAtIndex(index);
+        const maybeFrameNode = state.doc.nodeAt(startFramePosition);
+        if (!maybeFrameNode) {
+          return false;
+        }
+        const endFramePosition = maybeFrameNode.content.size + startFramePosition;
+        const tr = state.tr;
+        tr.deleteRange(startFramePosition, endFramePosition);
+        dispatch(tr);
+        return true;
+      },
+      updateParameters(parameters) {
+        const {
+          state,
+          dispatch
+        } = editorView;
+        const pos = getPos();
+        if (typeof pos !== 'number') {
+          return false;
+        }
+        const tr = state.tr.setNodeMarkup(pos, undefined, {
+          ...node.attrs,
+          parameters
+        });
+        dispatch(tr);
+        return true;
+      },
+      getChildren() {
+        var _state$doc$nodeAt;
+        const {
+          state
+        } = editorView;
+        const pos = getPos();
+        if (typeof pos !== 'number') {
+          return [];
+        }
+        const children = (_state$doc$nodeAt = state.doc.nodeAt(pos)) === null || _state$doc$nodeAt === void 0 ? void 0 : _state$doc$nodeAt.content;
+        return children ? children.toJSON() : [];
+      }
+    };
+  }, [node, editorView, getPos, updateActiveChild]);
+  return actions;
+};
+const MultiBodiedExtension = ({
+  node,
+  handleContentDOMRef,
+  getPos,
+  tryExtensionHandler,
+  editorView
+}) => {
+  const [activeChildIndex, setActiveChildIndex] = useState(0);
+  // Adding to avoid aliasing `this` for the callbacks
+  const updateActiveChild = React.useCallback(index => {
+    if (typeof index !== 'number') {
+      // TODO: Make sure we log this somewhere if this happens
+      setActiveChildIndex(0);
+      return false;
+    }
+    setActiveChildIndex(index);
+    return true;
+  }, [setActiveChildIndex]);
+  const actions = useMultiBodiedExtensionActions({
+    updateActiveChild,
+    editorView,
+    getPos,
+    node
+  });
+  const extensionHandlerResult = React.useMemo(() => {
+    return tryExtensionHandler(actions);
+  }, [tryExtensionHandler, actions]);
+  const articleRef = React.useCallback(node => {
+    return handleContentDOMRef(node);
+  }, [handleContentDOMRef]);
+  const containerCss = css`
+    border: 1px solid ${`var(--ds-border, ${N30})`};
+    padding: ${"var(--ds-space-050, 4px)"};
+    .multiBodiedExtension-content-dom-wrapper > [data-extension-frame='true'] {
+      display: none;
+    }
+
+    .multiBodiedExtension-content-dom-wrapper
+      > [data-extension-frame='true']:nth-of-type(${activeChildIndex + 1}) {
+      display: block;
+    }
+  `;
+  return jsx("section", {
+    className: "multiBodiedExtension--container",
+    css: containerCss,
+    "data-testid": "multiBodiedExtension--container",
+    "data-active-child-index": activeChildIndex
+  }, jsx("nav", {
+    className: "multiBodiedExtension-navigation",
+    "data-testid": "multiBodiedExtension-navigation"
+  }, extensionHandlerResult), jsx("article", {
+    className: "multiBodiedExtension--frames",
+    "data-testid": "multiBodiedExtension--frames",
+    ref: articleRef
+  }));
+};
+export default MultiBodiedExtension;

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

@@ -4,9 +4,10 @@ export const getSelectedExtension = (state, searchParent = false) => {
   const {
     inlineExtension,
     extension,
-    bodiedExtension
+    bodiedExtension,
+    multiBodiedExtension
   } = state.schema.nodes;
-  const nodeTypes = [extension, bodiedExtension, inlineExtension];
+  const nodeTypes = [extension, bodiedExtension, inlineExtension, multiBodiedExtension];
   return findSelectedNodeOfType(nodeTypes)(state.selection) || searchParent && findParentNodeOfType(nodeTypes)(state.selection) || undefined;
 };
 export const findExtensionWithLocalId = (state, localId) => {
@@ -20,9 +21,10 @@ export const findExtensionWithLocalId = (state, localId) => {
   const {
     inlineExtension,
     extension,
-    bodiedExtension
+    bodiedExtension,
+    multiBodiedExtension
   } = state.schema.nodes;
-  const nodeTypes = [extension, bodiedExtension, inlineExtension];
+  const nodeTypes = [extension, bodiedExtension, inlineExtension, multiBodiedExtension];
   let matched;
   state.doc.descendants((node, pos) => {
     if (nodeTypes.includes(node.type) && node.attrs.localId === localId) {

package/dist/es2019/plugins/index.js

@@ -1,7 +1,6 @@
 export { default as clearMarksOnChangeToEmptyDocumentPlugin } from './clear-marks-on-change-to-empty-document';
 export { default as collabEditPlugin } from './collab-edit';
 export { default as extensionPlugin } from './extension';
-export { default as insertBlockPlugin } from './insert-block';
 export { default as jiraIssuePlugin } from './jira-issue';
 export { default as toolbarListsIndentationPlugin } from './toolbar-lists-indentation';
 export { default as pastePlugin } from './paste';

package/dist/es2019/presets/universal.js

@@ -1,10 +1,11 @@
-import { breakoutPlugin, collabEditPlugin, dataConsumerMarkPlugin, extensionPlugin, insertBlockPlugin, jiraIssuePlugin, toolbarListsIndentationPlugin, alignmentPlugin, customAutoformatPlugin, feedbackDialogPlugin, mobileDimensionsPlugin, findReplacePlugin, mobileSelectionPlugin, annotationPlugin, avatarGroupPlugin, viewUpdateSubscriptionPlugin, beforePrimaryToolbarPlugin, codeBidiWarningPlugin } from '../plugins';
+import { breakoutPlugin, collabEditPlugin, dataConsumerMarkPlugin, extensionPlugin, jiraIssuePlugin, toolbarListsIndentationPlugin, alignmentPlugin, customAutoformatPlugin, feedbackDialogPlugin, mobileDimensionsPlugin, findReplacePlugin, mobileSelectionPlugin, annotationPlugin, avatarGroupPlugin, viewUpdateSubscriptionPlugin, beforePrimaryToolbarPlugin, codeBidiWarningPlugin } from '../plugins';
 import { tasksAndDecisionsPlugin } from '@atlaskit/editor-plugin-tasks-and-decisions';
 import { panelPlugin } from '@atlaskit/editor-plugin-panel';
 import { textColorPlugin } from '@atlaskit/editor-plugin-text-color';
 import { historyPlugin } from '@atlaskit/editor-plugin-history';
 import { indentationPlugin } from '@atlaskit/editor-plugin-indentation';
 import { statusPlugin } from '@atlaskit/editor-plugin-status';
+import { insertBlockPlugin } from '@atlaskit/editor-plugin-insert-block';
 import { datePlugin } from '@atlaskit/editor-plugin-date';
 import { maxContentSizePlugin } from '@atlaskit/editor-plugin-max-content-size';
 import { captionPlugin } from '@atlaskit/editor-plugin-caption';

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

@@ -1,7 +1,13 @@
 import { css } from '@emotion/react';
 import { blockNodesVerticalMargin, akEditorSelectedBorderSize, akEditorDeleteBorder, akEditorDeleteBackground, SelectionStyle, getSelectionStyles, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export const extensionStyles = css`
+  .multiBodiedExtensionView-content-wrap.${akEditorSelectedNodeClassName}:not(.danger) {
+    ${getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Blanket])}
+  }
+
   .extensionView-content-wrap,
+  .multiBodiedExtensionView-content-wrap,
   .bodiedExtensionView-content-wrap {
     margin: ${blockNodesVerticalMargin} 0;
 

package/dist/es2019/version-wrapper.js

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

package/dist/esm/plugins/extension/commands.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 { removeSelectedNode, removeParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
+import { removeSelectedNode, removeParentNodeOfType, findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { createCommand } from './plugin-factory';
 import { getSelectedExtension } from './utils';
 import { removeConnectedNodes } from '@atlaskit/editor-common/utils';
@@ -72,7 +72,7 @@ export var removeExtension = function removeExtension() {
     if (getSelectedExtension(state)) {
       return removeSelectedNode(tr);
     } else {
-      return removeParentNodeOfType(state.schema.nodes.bodiedExtension)(tr);
+      return checkAndRemoveExtensionNode(state, tr);
     }
   });
 };
@@ -85,4 +85,11 @@ export var removeDescendantNodes = function removeDescendantNodes(sourceNode) {
   }, function (tr, state) {
     return sourceNode ? removeConnectedNodes(state, sourceNode) : tr;
   });
+};
+export var checkAndRemoveExtensionNode = function checkAndRemoveExtensionNode(state, tr) {
+  var nodeType = state.schema.nodes.bodiedExtension;
+  if (findParentNodeOfType(state.schema.nodes.multiBodiedExtension)(state.selection)) {
+    nodeType = state.schema.nodes.multiBodiedExtension;
+  }
+  return removeParentNodeOfType(nodeType)(tr);
 };

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

@@ -1,4 +1,4 @@
-import { extension, bodiedExtension, inlineExtension } from '@atlaskit/adf-schema';
+import { extension, bodiedExtension, inlineExtension, multiBodiedExtension, extensionFrame } from '@atlaskit/adf-schema';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { createPlugin } from './pm-plugins/main';
 import { createPlugin as createMacroPlugin } from './pm-plugins/macro';
@@ -9,6 +9,7 @@ import { getToolbarConfig } from './toolbar';
 import { getContextPanel } from './context-panel';
 import { createExtensionAPI } from './extension-api';
 import { createEditSelectedExtensionAction } from './actions';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 var extensionPlugin = function extensionPlugin(_ref) {
   var _api$featureFlags, _api$analytics2, _api$analytics3, _api$contextPanel3, _api$analytics4, _api$contextPanel4;
   var _ref$config = _ref.config,
@@ -23,7 +24,7 @@ var extensionPlugin = function extensionPlugin(_ref) {
   return {
     name: 'extension',
     nodes: function nodes() {
-      return [{
+      var extensionNodes = [{
         name: 'extension',
         node: extension
       }, {
@@ -33,6 +34,19 @@ var extensionPlugin = function extensionPlugin(_ref) {
         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;
     },
     pmPlugins: function pmPlugins() {
       return [{

package/dist/esm/plugins/extension/pm-plugins/main.js

@@ -284,7 +284,8 @@ var createPlugin = function createPlugin(dispatch, providerFactory, extensionHan
         // 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)
+        inlineExtension: ExtensionNodeView(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi),
+        multiBodiedExtension: ExtensionNodeView(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi)
       },
       handleClickOn: createSelectionClickHandler(['extension', 'bodiedExtension'], function (target) {
         return !target.closest('.extension-content');

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

@@ -121,7 +121,7 @@ export var getToolbarConfig = function getToolbarConfig(_ref) {
     var formatMessage = intl.formatMessage;
     var extensionState = getPluginState(state);
     if (extensionState && !extensionState.showContextPanel && extensionState.element) {
-      var nodeType = [state.schema.nodes.extension, state.schema.nodes.inlineExtension, state.schema.nodes.bodiedExtension];
+      var nodeType = [state.schema.nodes.extension, state.schema.nodes.inlineExtension, state.schema.nodes.bodiedExtension, state.schema.nodes.multiBodiedExtension];
       var editButtonArray = editButton(formatMessage, extensionState, applyChangeToContextPanel, editorAnalyticsAPI);
       var breakoutButtonArray = breakoutOptions(state, formatMessage, extensionState, breakoutEnabled);
       var extensionObj = getSelectedExtension(state, true);

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

@@ -15,7 +15,6 @@ import { overlay } from '../styles';
 import ExtensionLozenge from '../Lozenge';
 import classnames from 'classnames';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 function ExtensionWithPluginState(props) {
   var node = props.node,
     handleContentDOMRef = props.handleContentDOMRef,
@@ -28,13 +27,7 @@ function ExtensionWithPluginState(props) {
     shadowClassNames = props.shadowClassNames,
     hideFrame = props.hideFrame,
     editorAppearance = props.editorAppearance;
-  var isMultiBodiedExtension = false;
-  if (getBooleanFF('platform.editor.multi-bodied-extension_0rygg')) {
-    isMultiBodiedExtension = true;
-  }
-
-  //TODO: clean-up after removing multi-bodied-extension FF
-  var hasBody = node.type.name === 'bodiedExtension' || isMultiBodiedExtension && node.type.name === 'multiBodiedExtension';
+  var hasBody = ['bodiedExtension', 'multiBodiedExtension'].includes(node.type.name);
   var isMobile = editorAppearance === 'mobile';
   var hasChildren = !!children;
   var removeBorder = hideFrame && !isMobile && !hasBody || false;

package/dist/esm/plugins/extension/ui/Extension/ExtensionComponent.js

@@ -16,6 +16,7 @@ import { getNodeRenderer, getExtensionModuleNodePrivateProps } from '@atlaskit/e
 import { getExtensionRenderer } from '@atlaskit/editor-common/utils';
 import Extension from './Extension';
 import InlineExtension from './InlineExtension';
+import MultiBodiedExtension from './MultiBodiedExtension';
 var ExtensionComponent = /*#__PURE__*/function (_Component) {
   _inherits(ExtensionComponent, _Component);
   var _super = _createSuper(ExtensionComponent);
@@ -87,7 +88,7 @@ var ExtensionComponent = /*#__PURE__*/function (_Component) {
         }
       }, _callee, null, [[4, 11]]);
     })));
-    _defineProperty(_assertThisInitialized(_this), "handleExtension", function (pmNode) {
+    _defineProperty(_assertThisInitialized(_this), "handleExtension", function (pmNode, actions) {
       var _pmNode$marks;
       var _this$props = _this.props,
         extensionHandlers = _this$props.extensionHandlers,
@@ -116,16 +117,24 @@ var ExtensionComponent = /*#__PURE__*/function (_Component) {
       var result;
       if (extensionHandlers && extensionHandlers[extensionType]) {
         var render = getExtensionRenderer(extensionHandlers[extensionType]);
-        result = render(node, editorView.state.doc);
+        result = render(node, editorView.state.doc, actions);
       }
       if (!result) {
         var extensionHandlerFromProvider = _this.state.extensionProvider && _this.getNodeRenderer(_this.state.extensionProvider, extensionType, extensionKey);
         if (extensionHandlerFromProvider) {
           var NodeRenderer = extensionHandlerFromProvider;
-          return /*#__PURE__*/React.createElement(NodeRenderer, {
-            node: node,
-            references: _this.props.references
-          });
+          if (node.type === 'multiBodiedExtension') {
+            return /*#__PURE__*/React.createElement(NodeRenderer, {
+              node: node,
+              references: _this.props.references,
+              actions: actions
+            });
+          } else {
+            return /*#__PURE__*/React.createElement(NodeRenderer, {
+              node: node,
+              references: _this.props.references
+            });
+          }
         }
       }
       return result;
@@ -173,8 +182,18 @@ var ExtensionComponent = /*#__PURE__*/function (_Component) {
         editorView = _this$props2.editorView,
         references = _this$props2.references,
         editorAppearance = _this$props2.editorAppearance,
-        pluginInjectionApi = _this$props2.pluginInjectionApi;
-      var extensionHandlerResult = this.tryExtensionHandler();
+        pluginInjectionApi = _this$props2.pluginInjectionApi,
+        getPos = _this$props2.getPos;
+      if (node.type.name === 'multiBodiedExtension') {
+        return /*#__PURE__*/React.createElement(MultiBodiedExtension, {
+          node: node,
+          editorView: editorView,
+          getPos: getPos,
+          handleContentDOMRef: handleContentDOMRef,
+          tryExtensionHandler: this.tryExtensionHandler.bind(this)
+        });
+      }
+      var extensionHandlerResult = this.tryExtensionHandler(undefined);
       switch (node.type.name) {
         case 'extension':
         case 'bodiedExtension':
@@ -199,10 +218,10 @@ var ExtensionComponent = /*#__PURE__*/function (_Component) {
     }
   }, {
     key: "tryExtensionHandler",
-    value: function tryExtensionHandler() {
+    value: function tryExtensionHandler(actions) {
       var node = this.props.node;
       try {
-        var extensionContent = this.handleExtension(node);
+        var extensionContent = this.handleExtension(node, actions);
         if (extensionContent && /*#__PURE__*/React.isValidElement(extensionContent)) {
           return extensionContent;
         }

package/dist/esm/plugins/extension/ui/Extension/ExtensionNodeWrapper.js

@@ -1,5 +1,12 @@
 import React from 'react';
 import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/utils';
+/**
+ * If inlineExtension, add zero width space to the end of the nodes and wrap with span;
+ * else wrap with a div (for multi bodied extensions)
+ *
+ * @param param0
+ * @returns
+ */
 var ExtensionNodeWrapper = function ExtensionNodeWrapper(_ref) {
   var children = _ref.children,
     nodeType = _ref.nodeType;