@atlaskit/editor-core 189.3.37 → 189.4.0

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # @atlaskit/editor-core
 
+## 189.4.0
+
+### Minor Changes
+
+- [#43569](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/43569) [`8c40410ca78`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8c40410ca78) - ED-20043: MultiBodied Extension changes
+
+### Patch Changes
+
+- Updated dependencies
+
+## 189.3.38
+
+### Patch Changes
+
+- [#43646](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/43646) [`d43f8e9402f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d43f8e9402f) - Make feature flags plugin optional in all plugins including:
+
+  - analytics
+  - base
+  - card
+  - code-block
+  - expand
+  - extension
+  - floating-toolbar
+  - hyperlink
+  - insert-block
+  - layout
+  - layout
+  - list
+  - media
+  - paste
+  - rule
+  - table
+  - tasks-and-decisions
+
+  We already treat it as optional in the plugins, so this is just ensuring that the plugin is not mandatory to be added to the preset.
+
 ## 189.3.37
 
 ### Patch Changes

package/dist/cjs/plugins/extension/commands.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.removeExtension = exports.removeDescendantNodes = exports.forceAutoSave = exports.clearEditingContext = void 0;
+exports.removeExtension = exports.removeDescendantNodes = exports.forceAutoSave = exports.clearEditingContext = exports.checkAndRemoveExtensionNode = void 0;
 exports.setEditingContextToContextPanel = setEditingContextToContextPanel;
 exports.updateExtensionLayout = void 0;
 exports.updateState = updateState;
@@ -83,7 +83,7 @@ var removeExtension = exports.removeExtension = function removeExtension() {
     if ((0, _utils2.getSelectedExtension)(state)) {
       return (0, _utils.removeSelectedNode)(tr);
     } else {
-      return (0, _utils.removeParentNodeOfType)(state.schema.nodes.bodiedExtension)(tr);
+      return checkAndRemoveExtensionNode(state, tr);
     }
   });
 };
@@ -96,4 +96,11 @@ var removeDescendantNodes = exports.removeDescendantNodes = function removeDesce
   }, function (tr, state) {
     return sourceNode ? (0, _utils3.removeConnectedNodes)(state, sourceNode) : tr;
   });
+};
+var checkAndRemoveExtensionNode = exports.checkAndRemoveExtensionNode = function checkAndRemoveExtensionNode(state, tr) {
+  var nodeType = state.schema.nodes.bodiedExtension;
+  if ((0, _utils.findParentNodeOfType)(state.schema.nodes.multiBodiedExtension)(state.selection)) {
+    nodeType = state.schema.nodes.multiBodiedExtension;
+  }
+  return (0, _utils.removeParentNodeOfType)(nodeType)(tr);
 };

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

@@ -16,6 +16,7 @@ var _toolbar = require("./toolbar");
 var _contextPanel = require("./context-panel");
 var _extensionApi = require("./extension-api");
 var _actions2 = require("./actions");
+var _platformFeatureFlags = require("@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,
@@ -30,7 +31,7 @@ var extensionPlugin = function extensionPlugin(_ref) {
   return {
     name: 'extension',
     nodes: function nodes() {
-      return [{
+      var extensionNodes = [{
         name: 'extension',
         node: _adfSchema.extension
       }, {
@@ -40,6 +41,19 @@ var extensionPlugin = function extensionPlugin(_ref) {
         name: 'inlineExtension',
         node: _adfSchema.inlineExtension
       }];
+
+      // Revert to returning all nodes without local variable, once FF is removed
+      if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.multi-bodied-extension_0rygg')) {
+        extensionNodes.push({
+          name: 'extensionFrame',
+          node: _adfSchema.extensionFrame
+        });
+        extensionNodes.push({
+          name: 'multiBodiedExtension',
+          node: _adfSchema.multiBodiedExtension
+        });
+      }
+      return extensionNodes;
     },
     pmPlugins: function pmPlugins() {
       return [{

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

@@ -310,7 +310,8 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, provid
         // WARNING: referentiality-plugin also creates these nodeviews
         bodiedExtension: (0, _extension.default)(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi),
         // WARNING: referentiality-plugin also creates these nodeviews
-        inlineExtension: (0, _extension.default)(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi)
+        inlineExtension: (0, _extension.default)(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi),
+        multiBodiedExtension: (0, _extension.default)(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi)
       },
       handleClickOn: (0, _selection.createSelectionClickHandler)(['extension', 'bodiedExtension'], function (target) {
         return !target.closest('.extension-content');

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

@@ -128,7 +128,7 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(_ref
     var formatMessage = intl.formatMessage;
     var extensionState = (0, _main.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 = (0, _utils2.getSelectedExtension)(state, true);

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

@@ -17,7 +17,6 @@ var _styles2 = require("../styles");
 var _Lozenge = _interopRequireDefault(require("../Lozenge"));
 var _classnames2 = _interopRequireDefault(require("classnames"));
 var _hooks = require("@atlaskit/editor-common/hooks");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _withPluginState = require("@atlaskit/editor-common/with-plugin-state");
 var _excluded = ["type"];
 /** @jsx jsx */
@@ -35,13 +34,7 @@ function ExtensionWithPluginState(props) {
     shadowClassNames = props.shadowClassNames,
     hideFrame = props.hideFrame,
     editorAppearance = props.editorAppearance;
-  var isMultiBodiedExtension = false;
-  if ((0, _platformFeatureFlags.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/cjs/plugins/extension/ui/Extension/ExtensionComponent.js

@@ -21,6 +21,7 @@ var _extensions = require("@atlaskit/editor-common/extensions");
 var _utils = require("@atlaskit/editor-common/utils");
 var _Extension = _interopRequireDefault(require("./Extension"));
 var _InlineExtension = _interopRequireDefault(require("./InlineExtension"));
+var _MultiBodiedExtension = _interopRequireDefault(require("./MultiBodiedExtension"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
@@ -96,7 +97,7 @@ var ExtensionComponent = exports.default = /*#__PURE__*/function (_Component) {
         }
       }, _callee, null, [[4, 11]]);
     })));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleExtension", function (pmNode) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleExtension", function (pmNode, actions) {
       var _pmNode$marks;
       var _this$props = _this.props,
         extensionHandlers = _this$props.extensionHandlers,
@@ -125,16 +126,24 @@ var ExtensionComponent = exports.default = /*#__PURE__*/function (_Component) {
       var result;
       if (extensionHandlers && extensionHandlers[extensionType]) {
         var render = (0, _utils.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.default.createElement(NodeRenderer, {
-            node: node,
-            references: _this.props.references
-          });
+          if (node.type === 'multiBodiedExtension') {
+            return /*#__PURE__*/_react.default.createElement(NodeRenderer, {
+              node: node,
+              references: _this.props.references,
+              actions: actions
+            });
+          } else {
+            return /*#__PURE__*/_react.default.createElement(NodeRenderer, {
+              node: node,
+              references: _this.props.references
+            });
+          }
         }
       }
       return result;
@@ -182,8 +191,18 @@ var ExtensionComponent = exports.default = /*#__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.default.createElement(_MultiBodiedExtension.default, {
+          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':
@@ -208,10 +227,10 @@ var ExtensionComponent = exports.default = /*#__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.default.isValidElement(extensionContent)) {
           return extensionContent;
         }

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

@@ -7,6 +7,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _utils = require("@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;

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

@@ -0,0 +1,154 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("@emotion/react");
+var _colors = require("@atlaskit/theme/colors");
+var _react2 = _interopRequireWildcard(require("react"));
+var _templateObject;
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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; } /** @jsx jsx */
+var useMultiBodiedExtensionActions = function useMultiBodiedExtensionActions(_ref) {
+  var updateActiveChild = _ref.updateActiveChild,
+    editorView = _ref.editorView,
+    getPos = _ref.getPos,
+    node = _ref.node;
+  var actions = _react2.default.useMemo(function () {
+    return {
+      changeActive: function changeActive(index) {
+        return updateActiveChild(index);
+      },
+      addChild: function addChild() {
+        var state = editorView.state,
+          dispatch = editorView.dispatch;
+        if (node.content.childCount >= node.attrs.maxFrames) {
+          // TODO: add proper log on this
+          return false;
+        }
+        var p = state.schema.nodes.paragraph.createAndFill({});
+        if (!p) {
+          return false;
+        }
+        var frame = state.schema.nodes.extensionFrame.createAndFill({}, [p]);
+        var pos = getPos();
+        if (typeof pos !== 'number' || !frame) {
+          return false;
+        }
+        var insertAt = Math.min((pos || 1) + node.content.size, state.doc.content.size);
+        dispatch(state.tr.insert(insertAt, frame));
+        return true;
+      },
+      getChildrenCount: function getChildrenCount() {
+        return node.content.childCount;
+      },
+      removeChild: function removeChild(index) {
+        var pos = getPos();
+        // TODO: Add child index validation here, don't trust this data
+        if (typeof pos !== 'number' || typeof index !== 'number') {
+          return false;
+        }
+        var state = editorView.state,
+          dispatch = editorView.dispatch;
+        if (node.content.childCount === 1) {
+          var _tr = state.tr;
+          _tr.deleteRange(pos, pos + node.content.size);
+          dispatch(_tr);
+          return true;
+        }
+        var $pos = state.doc.resolve(pos);
+        var $startNodePos = state.doc.resolve($pos.start($pos.depth + 1));
+        var startFramePosition = $startNodePos.posAtIndex(index);
+        var maybeFrameNode = state.doc.nodeAt(startFramePosition);
+        if (!maybeFrameNode) {
+          return false;
+        }
+        var endFramePosition = maybeFrameNode.content.size + startFramePosition;
+        var tr = state.tr;
+        tr.deleteRange(startFramePosition, endFramePosition);
+        dispatch(tr);
+        return true;
+      },
+      updateParameters: function updateParameters(parameters) {
+        var state = editorView.state,
+          dispatch = editorView.dispatch;
+        var pos = getPos();
+        if (typeof pos !== 'number') {
+          return false;
+        }
+        var tr = state.tr.setNodeMarkup(pos, undefined, _objectSpread(_objectSpread({}, node.attrs), {}, {
+          parameters: parameters
+        }));
+        dispatch(tr);
+        return true;
+      },
+      getChildren: function getChildren() {
+        var _state$doc$nodeAt;
+        var state = editorView.state;
+        var pos = getPos();
+        if (typeof pos !== 'number') {
+          return [];
+        }
+        var 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;
+};
+var MultiBodiedExtension = function MultiBodiedExtension(_ref2) {
+  var node = _ref2.node,
+    handleContentDOMRef = _ref2.handleContentDOMRef,
+    getPos = _ref2.getPos,
+    tryExtensionHandler = _ref2.tryExtensionHandler,
+    editorView = _ref2.editorView;
+  var _useState = (0, _react2.useState)(0),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    activeChildIndex = _useState2[0],
+    setActiveChildIndex = _useState2[1];
+  // Adding to avoid aliasing `this` for the callbacks
+  var updateActiveChild = _react2.default.useCallback(function (index) {
+    if (typeof index !== 'number') {
+      // TODO: Make sure we log this somewhere if this happens
+      setActiveChildIndex(0);
+      return false;
+    }
+    setActiveChildIndex(index);
+    return true;
+  }, [setActiveChildIndex]);
+  var actions = useMultiBodiedExtensionActions({
+    updateActiveChild: updateActiveChild,
+    editorView: editorView,
+    getPos: getPos,
+    node: node
+  });
+  var extensionHandlerResult = _react2.default.useMemo(function () {
+    return tryExtensionHandler(actions);
+  }, [tryExtensionHandler, actions]);
+  var articleRef = _react2.default.useCallback(function (node) {
+    return handleContentDOMRef(node);
+  }, [handleContentDOMRef]);
+  var containerCss = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    border: 1px solid ", ";\n    padding: ", ";\n    .multiBodiedExtension-content-dom-wrapper > [data-extension-frame='true'] {\n      display: none;\n    }\n\n    .multiBodiedExtension-content-dom-wrapper\n      > [data-extension-frame='true']:nth-of-type(", ") {\n      display: block;\n    }\n  "])), "var(--ds-border, ".concat(_colors.N30, ")"), "var(--ds-space-050, 4px)", activeChildIndex + 1);
+  return (0, _react.jsx)("section", {
+    className: "multiBodiedExtension--container",
+    css: containerCss,
+    "data-testid": "multiBodiedExtension--container",
+    "data-active-child-index": activeChildIndex
+  }, (0, _react.jsx)("nav", {
+    className: "multiBodiedExtension-navigation",
+    "data-testid": "multiBodiedExtension-navigation"
+  }, extensionHandlerResult), (0, _react.jsx)("article", {
+    className: "multiBodiedExtension--frames",
+    "data-testid": "multiBodiedExtension--frames",
+    ref: articleRef
+  }));
+};
+var _default = exports.default = MultiBodiedExtension;

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

@@ -11,8 +11,9 @@ var getSelectedExtension = exports.getSelectedExtension = function getSelectedEx
   var _state$schema$nodes = state.schema.nodes,
     inlineExtension = _state$schema$nodes.inlineExtension,
     extension = _state$schema$nodes.extension,
-    bodiedExtension = _state$schema$nodes.bodiedExtension;
-  var nodeTypes = [extension, bodiedExtension, inlineExtension];
+    bodiedExtension = _state$schema$nodes.bodiedExtension,
+    multiBodiedExtension = _state$schema$nodes.multiBodiedExtension;
+  var nodeTypes = [extension, bodiedExtension, inlineExtension, multiBodiedExtension];
   return (0, _utils.findSelectedNodeOfType)(nodeTypes)(state.selection) || searchParent && (0, _utils.findParentNodeOfType)(nodeTypes)(state.selection) || undefined;
 };
 var findExtensionWithLocalId = exports.findExtensionWithLocalId = function findExtensionWithLocalId(state, localId) {
@@ -26,8 +27,9 @@ var findExtensionWithLocalId = exports.findExtensionWithLocalId = function findE
   var _state$schema$nodes2 = state.schema.nodes,
     inlineExtension = _state$schema$nodes2.inlineExtension,
     extension = _state$schema$nodes2.extension,
-    bodiedExtension = _state$schema$nodes2.bodiedExtension;
-  var nodeTypes = [extension, bodiedExtension, inlineExtension];
+    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) {

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

@@ -9,4 +9,5 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _react = require("@emotion/react");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _templateObject;
-var extensionStyles = exports.extensionStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .extensionView-content-wrap,\n  .bodiedExtensionView-content-wrap {\n    margin: ", " 0;\n\n    &:first-of-type {\n      margin-top: 0;\n    }\n\n    &:last-of-type {\n      margin-bottom: 0;\n    }\n\n    &:not(.danger).", " {\n      & > span > .extension-container {\n        ", "\n      }\n    }\n\n    &.danger > span > .extension-container {\n      box-shadow: 0 0 0 ", "px\n        ", ";\n      background-color: ", ";\n    }\n\n    &.inline {\n      word-wrap: break-all;\n    }\n  }\n\n  .extensionView-content-wrap .extension-container {\n    overflow: hidden;\n  }\n\n  .bodiedExtensionView-content-wrap\n    .extensionView-content-wrap\n    .extension-container {\n    width: 100%;\n    max-width: 100%; // ensure width can't go over 100%;\n  }\n\n  [data-mark-type='fragment'] {\n    & > .extensionView-content-wrap,\n    & > .bodiedExtensionView-content-wrap {\n      margin: ", " 0;\n    }\n\n    & > [data-mark-type='dataConsumer'] {\n      & > .extensionView-content-wrap,\n      & > .bodiedExtensionView-content-wrap {\n        margin: ", " 0;\n      }\n    }\n\n    &:first-child {\n      & > .extensionView-content-wrap,\n      & > .bodiedExtensionView-content-wrap {\n        margin-top: 0;\n      }\n\n      & > [data-mark-type='dataConsumer'] {\n        & > .extensionView-content-wrap,\n        & > .bodiedExtensionView-content-wrap {\n          margin-top: 0;\n        }\n      }\n    }\n\n    &:nth-last-of-type(-n + 2):not(:first-of-type) {\n      & > .extensionView-content-wrap,\n      & > .bodiedExtensionView-content-wrap {\n        margin-bottom: 0;\n      }\n\n      & > [data-mark-type='dataConsumer'] {\n        & > .extensionView-content-wrap,\n        & > .bodiedExtensionView-content-wrap {\n          margin-bottom: 0;\n        }\n      }\n    }\n  }\n"])), _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin);
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+var extensionStyles = exports.extensionStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .multiBodiedExtensionView-content-wrap.", ":not(.danger) {\n    ", "\n  }\n\n  .extensionView-content-wrap,\n  .multiBodiedExtensionView-content-wrap,\n  .bodiedExtensionView-content-wrap {\n    margin: ", " 0;\n\n    &:first-of-type {\n      margin-top: 0;\n    }\n\n    &:last-of-type {\n      margin-bottom: 0;\n    }\n\n    &:not(.danger).", " {\n      & > span > .extension-container {\n        ", "\n      }\n    }\n\n    &.danger > span > .extension-container {\n      box-shadow: 0 0 0 ", "px\n        ", ";\n      background-color: ", ";\n    }\n\n    &.inline {\n      word-wrap: break-all;\n    }\n  }\n\n  .extensionView-content-wrap .extension-container {\n    overflow: hidden;\n  }\n\n  .bodiedExtensionView-content-wrap\n    .extensionView-content-wrap\n    .extension-container {\n    width: 100%;\n    max-width: 100%; // ensure width can't go over 100%;\n  }\n\n  [data-mark-type='fragment'] {\n    & > .extensionView-content-wrap,\n    & > .bodiedExtensionView-content-wrap {\n      margin: ", " 0;\n    }\n\n    & > [data-mark-type='dataConsumer'] {\n      & > .extensionView-content-wrap,\n      & > .bodiedExtensionView-content-wrap {\n        margin: ", " 0;\n      }\n    }\n\n    &:first-child {\n      & > .extensionView-content-wrap,\n      & > .bodiedExtensionView-content-wrap {\n        margin-top: 0;\n      }\n\n      & > [data-mark-type='dataConsumer'] {\n        & > .extensionView-content-wrap,\n        & > .bodiedExtensionView-content-wrap {\n          margin-top: 0;\n        }\n      }\n    }\n\n    &:nth-last-of-type(-n + 2):not(:first-of-type) {\n      & > .extensionView-content-wrap,\n      & > .bodiedExtensionView-content-wrap {\n        margin-bottom: 0;\n      }\n\n      & > [data-mark-type='dataConsumer'] {\n        & > .extensionView-content-wrap,\n        & > .bodiedExtensionView-content-wrap {\n          margin-bottom: 0;\n        }\n      }\n    }\n  }\n"])), _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Blanket]), _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin);

package/dist/cjs/version-wrapper.js

@@ -5,4 +5,4 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.version = exports.name = void 0;
 var name = exports.name = "@atlaskit/editor-core";
-var version = exports.version = "189.3.37";
+var version = exports.version = "189.4.0";

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

@@ -1,4 +1,4 @@
-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';
@@ -61,7 +61,7 @@ export const removeExtension = () => createCommand({
   if (getSelectedExtension(state)) {
     return removeSelectedNode(tr);
   } else {
-    return removeParentNodeOfType(state.schema.nodes.bodiedExtension)(tr);
+    return checkAndRemoveExtensionNode(state, tr);
   }
 });
 export const removeDescendantNodes = sourceNode => createCommand({
@@ -71,4 +71,11 @@ export const removeDescendantNodes = sourceNode => createCommand({
   }
 }, (tr, state) => {
   return sourceNode ? removeConnectedNodes(state, sourceNode) : tr;
-});
+});
+export const checkAndRemoveExtensionNode = (state, tr) => {
+  let nodeType = state.schema.nodes.bodiedExtension;
+  if (findParentNodeOfType(state.schema.nodes.multiBodiedExtension)(state.selection)) {
+    nodeType = state.schema.nodes.multiBodiedExtension;
+  }
+  return removeParentNodeOfType(nodeType)(tr);
+};

package/dist/es2019/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';
 const extensionPlugin = ({
   config: options = {},
   api
@@ -23,7 +24,7 @@ const extensionPlugin = ({
   return {
     name: 'extension',
     nodes() {
-      return [{
+      const extensionNodes = [{
         name: 'extension',
         node: extension
       }, {
@@ -33,6 +34,19 @@ const extensionPlugin = ({
         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() {
       return [{

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

@@ -218,7 +218,8 @@ const createPlugin = (dispatch, providerFactory, extensionHandlers, portalProvid
         // 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'], target => !target.closest('.extension-content'), {
         useLongPressSelection

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

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

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

@@ -10,7 +10,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) {
   const {
     node,
@@ -24,13 +23,7 @@ function ExtensionWithPluginState(props) {
     hideFrame,
     editorAppearance
   } = props;
-  let isMultiBodiedExtension = false;
-  if (getBooleanFF('platform.editor.multi-bodied-extension_0rygg')) {
-    isMultiBodiedExtension = true;
-  }
-
-  //TODO: clean-up after removing multi-bodied-extension FF
-  const hasBody = node.type.name === 'bodiedExtension' || isMultiBodiedExtension && node.type.name === 'multiBodiedExtension';
+  const hasBody = ['bodiedExtension', 'multiBodiedExtension'].includes(node.type.name);
   const isMobile = editorAppearance === 'mobile';
   const hasChildren = !!children;
   const removeBorder = hideFrame && !isMobile && !hasBody || false;