@atlaskit/editor-common 77.0.6 → 77.1.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-common
 
+## 77.1.0
+
+### Minor Changes
+
+- [#68790](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/68790) [`c6d8affc52d1`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c6d8affc52d1) - Support maybeAdd plugins in usePreset. Add typing support for universal preset.
+
+  Now when using the editor API with the universal preset
+
+### Patch Changes
+
+- [#68535](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/68535) [`9d9c89e4ff0c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9d9c89e4ff0c) - Implement smart-card actionOptions prop within editor and expose prop to editor and renderer
+- [#69366](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/69366) [`7241925578c1`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7241925578c1) - [ED-21934] Upgrade markdown-it dependency for prosemirror bump
+- [#68264](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/68264) [`daa71f6aa162`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/daa71f6aa162) - [ux] ED-21883: Updated MultiBodied Extension related CSS and selections
+- Updated dependencies
+
 ## 77.0.6
 
 ### Patch Changes

package/dist/cjs/extensibility/MultiBodiedExtension/action-api.js

@@ -0,0 +1,131 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useMultiBodiedExtensionActions = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _analytics = require("../../analytics");
+var _utils = require("./utils");
+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 useMultiBodiedExtensionActions = exports.useMultiBodiedExtensionActions = function useMultiBodiedExtensionActions(_ref) {
+  var updateActiveChild = _ref.updateActiveChild,
+    editorView = _ref.editorView,
+    getPos = _ref.getPos,
+    node = _ref.node,
+    eventDispatcher = _ref.eventDispatcher;
+  var actions = _react.default.useMemo(function () {
+    return {
+      changeActive: function changeActive(index) {
+        var state = editorView.state,
+          dispatch = editorView.dispatch;
+        var updateActiveChildResult = updateActiveChild(index);
+        if (eventDispatcher) {
+          (0, _utils.sendMBEAnalyticsEvent)(_analytics.ACTION.CHANGE_ACTIVE, node, eventDispatcher);
+        }
+        // On selection of a childFrame, we need to change the focus/selection to the end of the target child Frame
+        var mbeNode = state.doc.nodeAt(state.tr.selection.from);
+        var desiredPos = state.tr.selection.from || 0;
+        if (mbeNode && mbeNode !== null && mbeNode !== void 0 && mbeNode.content) {
+          for (var i = 0; i <= index && i < (mbeNode === null || mbeNode === void 0 || (_mbeNode$content = mbeNode.content) === null || _mbeNode$content === void 0 ? void 0 : _mbeNode$content.childCount); i++) {
+            var _mbeNode$content, _mbeNode$content2;
+            desiredPos += (mbeNode === null || mbeNode === void 0 || (_mbeNode$content2 = mbeNode.content) === null || _mbeNode$content2 === void 0 || (_mbeNode$content2 = _mbeNode$content2.child(i)) === null || _mbeNode$content2 === void 0 ? void 0 : _mbeNode$content2.nodeSize) || 0;
+          }
+          dispatch(state.tr.setSelection(new _state.TextSelection(state.doc.resolve(desiredPos))));
+        }
+        return updateActiveChildResult;
+      },
+      addChild: function addChild() {
+        var state = editorView.state,
+          dispatch = editorView.dispatch;
+        if (node.content.childCount >= node.attrs.maxFrames) {
+          throw new Error("Cannot add more than ".concat(node.attrs.maxFrames, " frames"));
+        }
+        var p = state.schema.nodes.paragraph.createAndFill({});
+        if (!p) {
+          throw new Error('Could not create paragraph');
+        }
+        var frame = state.schema.nodes.extensionFrame.createAndFill({}, [p]);
+        var pos = getPos();
+        if (typeof pos !== 'number' || !frame) {
+          throw new Error('Could not create frame or position not valid');
+        }
+        var insertAt = Math.min((pos || 1) + node.content.size, state.doc.content.size);
+        dispatch(state.tr.insert(insertAt, frame));
+        if (eventDispatcher) {
+          (0, _utils.sendMBEAnalyticsEvent)(_analytics.ACTION.ADD_CHILD, node, eventDispatcher);
+        }
+        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') {
+          throw new Error('Position or index not valid');
+        }
+        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) {
+          throw new Error('Could not find frame node');
+        }
+        var endFramePosition = maybeFrameNode.content.size + startFramePosition;
+        var tr = state.tr;
+        tr.deleteRange(startFramePosition, endFramePosition);
+        dispatch(tr);
+        if (eventDispatcher) {
+          (0, _utils.sendMBEAnalyticsEvent)(_analytics.ACTION.REMOVE_CHILD, node, eventDispatcher);
+        }
+        return true;
+      },
+      updateParameters: function updateParameters(parameters) {
+        var state = editorView.state,
+          dispatch = editorView.dispatch;
+        var pos = getPos();
+        if (typeof pos !== 'number') {
+          throw new Error('Position not valid');
+        }
+        var tr = state.tr.setNodeMarkup(pos, undefined, _objectSpread(_objectSpread({}, node.attrs), {}, {
+          parameters: _objectSpread(_objectSpread({}, node.attrs.parameters), {}, {
+            macroParams: parameters
+          })
+        }));
+        dispatch(tr);
+        if (eventDispatcher) {
+          (0, _utils.sendMBEAnalyticsEvent)(_analytics.ACTION.UPDATE_PARAMETERS, node, eventDispatcher);
+        }
+        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;
+        if (eventDispatcher) {
+          (0, _utils.sendMBEAnalyticsEvent)(_analytics.ACTION.GET_CHILDERN, node, eventDispatcher);
+        }
+        return children ? children.toJSON() : [];
+      }
+    };
+  }, [node, editorView, getPos, updateActiveChild, eventDispatcher]);
+  return actions;
+};

package/dist/cjs/extensibility/MultiBodiedExtension/index.js

@@ -7,138 +7,62 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime/helpers/objectDestructuringEmpty"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
-var _colors = require("@atlaskit/theme/colors");
-var _analytics = require("../../analytics");
-var _eventDispatcher = require("../../event-dispatcher");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _file = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/file"));
 var _hooks = require("../../hooks");
 var _utils = require("../../utils");
 var _withPluginState = require("../../with-plugin-state");
+var _actionApi = require("./action-api");
+var _styles = require("./styles");
 var _templateObject, _templateObject2;
+var _excluded = ["url"];
+/* eslint-disable @atlaskit/design-system/prefer-primitives */
+/** @jsx jsx */
 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,
-    eventDispatcher = _ref.eventDispatcher;
-  var actions = _react.default.useMemo(function () {
-    return {
-      changeActive: function changeActive(index) {
-        var updateActiveChildResult = updateActiveChild(index);
-        if (eventDispatcher) {
-          sendMBEAnalyticsEvent(_analytics.ACTION.CHANGE_ACTIVE, node, eventDispatcher);
-        }
-        return updateActiveChildResult;
-      },
-      addChild: function addChild() {
-        var state = editorView.state,
-          dispatch = editorView.dispatch;
-        if (node.content.childCount >= node.attrs.maxFrames) {
-          throw new Error("Cannot add more than ".concat(node.attrs.maxFrames, " frames"));
-        }
-        var p = state.schema.nodes.paragraph.createAndFill({});
-        if (!p) {
-          throw new Error('Could not create paragraph');
-        }
-        var frame = state.schema.nodes.extensionFrame.createAndFill({}, [p]);
-        var pos = getPos();
-        if (typeof pos !== 'number' || !frame) {
-          throw new Error('Could not create frame or position not valid');
-        }
-        var insertAt = Math.min((pos || 1) + node.content.size, state.doc.content.size);
-        dispatch(state.tr.insert(insertAt, frame));
-        if (eventDispatcher) {
-          sendMBEAnalyticsEvent(_analytics.ACTION.ADD_CHILD, node, eventDispatcher);
-        }
-        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') {
-          throw new Error('Position or index not valid');
-        }
-        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) {
-          throw new Error('Could not find frame node');
-        }
-        var endFramePosition = maybeFrameNode.content.size + startFramePosition;
-        var tr = state.tr;
-        tr.deleteRange(startFramePosition, endFramePosition);
-        dispatch(tr);
-        if (eventDispatcher) {
-          sendMBEAnalyticsEvent(_analytics.ACTION.REMOVE_CHILD, node, eventDispatcher);
-        }
-        return true;
-      },
-      updateParameters: function updateParameters(parameters) {
-        var state = editorView.state,
-          dispatch = editorView.dispatch;
-        var pos = getPos();
-        if (typeof pos !== 'number') {
-          throw new Error('Position not valid');
-        }
-        var tr = state.tr.setNodeMarkup(pos, undefined, _objectSpread(_objectSpread({}, node.attrs), {}, {
-          parameters: _objectSpread(_objectSpread({}, node.attrs.parameters), {}, {
-            macroParams: parameters
-          })
-        }));
-        dispatch(tr);
-        if (eventDispatcher) {
-          sendMBEAnalyticsEvent(_analytics.ACTION.UPDATE_PARAMETERS, node, eventDispatcher);
-        }
-        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;
-        if (eventDispatcher) {
-          sendMBEAnalyticsEvent(_analytics.ACTION.GET_CHILDERN, node, eventDispatcher);
-        }
-        return children ? children.toJSON() : [];
-      }
-    };
-  }, [node, editorView, getPos, updateActiveChild, eventDispatcher]);
-  return actions;
+// Similar to the one in platform/packages/editor/editor-common/src/extensibility/Extension/Lozenge.tsx
+var getWrapperTitleContent = function getWrapperTitleContent(imageData, title) {
+  if (imageData) {
+    var url = imageData.url,
+      rest = (0, _objectWithoutProperties2.default)(imageData, _excluded);
+    return (0, _react2.jsx)("div", {
+      className: "extension-title"
+    }, (0, _react2.jsx)("img", (0, _extends2.default)({
+      css: (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n            max-height: 24px;\n            max-width: 24px;\n          "]))),
+      src: url
+    }, rest, {
+      alt: title
+    })), title);
+  }
+  return (0, _react2.jsx)("div", {
+    className: "extension-title"
+  }, (0, _react2.jsx)(_file.default, {
+    label: title
+  }), title);
 };
-var navigationCSS = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  // make sure the user can't see a range selection inside the navigation\n  // This is really important to keep the navigation working properly\n  user-select: none;\n  -webkit-user-modify: read-only;\n  border: 1px solid ", ";\n"])), "var(--ds-border, ".concat(_colors.N40, ")"));
-var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref2) {
-  var node = _ref2.node,
-    handleContentDOMRef = _ref2.handleContentDOMRef,
-    getPos = _ref2.getPos,
-    tryExtensionHandler = _ref2.tryExtensionHandler,
-    editorView = _ref2.editorView,
-    eventDispatcher = _ref2.eventDispatcher,
-    widthState = _ref2.widthState,
-    editorAppearance = _ref2.editorAppearance;
+var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref) {
+  var node = _ref.node,
+    handleContentDOMRef = _ref.handleContentDOMRef,
+    getPos = _ref.getPos,
+    tryExtensionHandler = _ref.tryExtensionHandler,
+    editorView = _ref.editorView,
+    eventDispatcher = _ref.eventDispatcher,
+    widthState = _ref.widthState,
+    editorAppearance = _ref.editorAppearance;
+  var _node$attrs = node.attrs,
+    parameters = _node$attrs.parameters,
+    extensionKey = _node$attrs.extensionKey;
+  var title = parameters && parameters.extensionTitle || parameters && parameters.macroMetadata && parameters.macroMetadata.title || extensionKey || node.type.name;
+  var imageData = (0, _utils.getExtensionLozengeData)({
+    node: node,
+    type: 'image'
+  });
   var _useState = (0, _react.useState)(0),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     activeChildIndex = _useState2[0],
@@ -152,7 +76,7 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref2
     setActiveChildIndex(index);
     return true;
   }, [setActiveChildIndex]);
-  var actions = useMultiBodiedExtensionActions({
+  var actions = (0, _actionApi.useMultiBodiedExtensionActions)({
     updateActiveChild: updateActiveChild,
     editorView: editorView,
     getPos: getPos,
@@ -165,13 +89,13 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref2
   var articleRef = _react.default.useCallback(function (node) {
     return handleContentDOMRef(node);
   }, [handleContentDOMRef]);
-  var containerCSS = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    border: 1px solid ", ";\n    min-height: 100px;\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      border: 1px solid ", ";\n      display: block;\n      min-height: 100px;\n    }\n  "])), "var(--ds-border, ".concat(_colors.N30, ")"), activeChildIndex + 1, "var(--ds-border, ".concat(_colors.N50, ")"));
+  var containerCssExtended = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    ", ";\n    .multiBodiedExtension-content-dom-wrapper\n      > [data-extension-frame='true']:nth-of-type(", ") {\n      ", "\n    }\n  "])), _styles.mbeExtensionContainerCSS, activeChildIndex + 1, _styles.extensionFrameContentCSS);
   var shouldBreakout =
   // Extension should breakout when the layout is set to 'full-width' or 'wide'.
   ['full-width', 'wide'].includes(node.attrs.layout) &&
   // Extension breakout state should not be respected when the editor appearance is full-width mode
   editorAppearance !== 'full-width';
-  var mbeContainerStyles = {};
+  var mbeWrapperStyles = {};
   if (shouldBreakout) {
     var _calculateBreakoutSty = (0, _utils.calculateBreakoutStyles)({
         mode: node.attrs.layout,
@@ -179,40 +103,28 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref2
         widthStateWidth: widthState === null || widthState === void 0 ? void 0 : widthState.width
       }),
       breakoutStyles = (0, _extends2.default)({}, ((0, _objectDestructuringEmpty2.default)(_calculateBreakoutSty), _calculateBreakoutSty));
-    mbeContainerStyles = breakoutStyles;
+    mbeWrapperStyles = breakoutStyles;
   }
-  return (0, _react2.jsx)("section", {
+  var wrapperClassNames = (0, _classnames.default)('multiBodiedExtension--wrapper', 'extension-container', 'block');
+  return (0, _react2.jsx)("div", {
+    className: wrapperClassNames,
+    css: _styles.mbeExtensionWrapperCSS,
+    "data-testid": "multiBodiedExtension--wrapper",
+    style: mbeWrapperStyles
+  }, getWrapperTitleContent(imageData, title), (0, _react2.jsx)("div", {
     className: "multiBodiedExtension--container",
-    css: containerCSS,
+    css: containerCssExtended,
     "data-testid": "multiBodiedExtension--container",
-    "data-active-child-index": activeChildIndex,
-    style: mbeContainerStyles
+    "data-active-child-index": activeChildIndex
   }, (0, _react2.jsx)("nav", {
     className: "multiBodiedExtension-navigation",
-    css: navigationCSS,
+    css: _styles.mbeNavigationCSS,
     "data-testid": "multiBodiedExtension-navigation"
   }, extensionHandlerResult), (0, _react2.jsx)("article", {
     className: "multiBodiedExtension--frames",
     "data-testid": "multiBodiedExtension--frames",
     ref: articleRef
-  }));
-};
-var sendMBEAnalyticsEvent = function sendMBEAnalyticsEvent(action, node, eventDispatcher) {
-  var analyticsDispatch = (0, _eventDispatcher.createDispatch)(eventDispatcher);
-  analyticsDispatch(_utils.analyticsEventKey, {
-    payload: {
-      action: action,
-      actionSubject: _analytics.ACTION_SUBJECT.MULTI_BODIED_EXTENSION,
-      eventType: _analytics.EVENT_TYPE.TRACK,
-      attributes: {
-        extensionType: node.attrs.extensionType,
-        extensionKey: node.attrs.extensionKey,
-        localId: node.attrs.localId,
-        maxFramesCount: node.attrs.maxFrames,
-        currentFramesCount: node.content.childCount
-      }
-    }
-  });
+  })));
 };
 var MultiBodiedExtensionWithSharedState = function MultiBodiedExtensionWithSharedState(props) {
   var pluginInjectionApi = props.pluginInjectionApi;
@@ -250,8 +162,8 @@ var MultiBodiedExtensionDeprecated = function MultiBodiedExtensionDeprecated(pro
     plugins: {
       widthState: widthPluginKey
     },
-    render: function render(_ref3) {
-      var widthState = _ref3.widthState;
+    render: function render(_ref2) {
+      var widthState = _ref2.widthState;
       return (0, _react2.jsx)(MultiBodiedExtensionWithWidth, (0, _extends2.default)({
         widthState: widthState
       }, props));

package/dist/cjs/extensibility/MultiBodiedExtension/styles.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mbeNavigationCSS = exports.mbeExtensionWrapperCSS = exports.mbeExtensionContainerCSS = exports.extensionFrameContentCSS = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = require("@emotion/react");
+var _colors = require("@atlaskit/theme/colors");
+var _styles = require("../Extension/styles");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+// Wrapper the extension title and extensionContainer
+var mbeExtensionWrapperCSS = exports.mbeExtensionWrapperCSS = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  cursor: pointer;\n  .extension-title {\n    display: flex;\n    align-items: center;\n    line-height: 16px !important;\n    margin-bottom: ", ";\n    margin-left: ", " !important;\n    margin-right: ", ";\n    padding-top: ", " !important;\n  }\n"])), _styles.wrapperDefault, "var(--ds-space-100, 8px)", "var(--ds-space-050, 4px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)");
+
+// Wraps the navigation bar and extensionFrames
+var mbeExtensionContainerCSS = exports.mbeExtensionContainerCSS = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background: transpaent !important;\n  padding: {\n    bottom: ", " !important;\n    left: ", " !important;\n    right: ", " !important;\n  }\n  padding-bottom: ", ";\n  position: relative;\n  vertical-align: middle;\n  cursor: pointer;\n\n  .multiBodiedExtension-content-dom-wrapper > [data-extension-frame='true'] {\n    display: none;\n    background: ", ";\n  }\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-surface, white)");
+var mbeNavigationCSS = exports.mbeNavigationCSS = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  // make sure the user can't see a range selection inside the navigation\n  // This is really important to keep the navigation working properly\n  border-top-left-radius: ", ";\n  border-top-right-radius: ", ";\n\n  user-select: none;\n  -webkit-user-modify: read-only;\n  border: 1px solid ", ";\n  border-bottom: none;\n  background: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n"])), "var(--ds-border-radius, 3px)", "var(--ds-border-radius, 3px)", "var(--ds-border, ".concat(_colors.N40, ")"), "var(--ds-surface, white)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)");
+var extensionFrameContentCSS = exports.extensionFrameContentCSS = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", " !important;\n  border: 1px solid ", ";\n  display: block;\n  min-height: 100px;\n  background: ", ";\n  border-bottom-left-radius: ", ";\n  border-bottom-right-radius: ", ";\n\n  margin-left: ", ";\n  margin-right: ", ";\n  cursor: initial;\n\n  .pm-table-container {\n    margin-left: ", " !important;\n    padding-right: ", " !important;\n  }\n  .pm-table-with-controls {\n    margin-left: ", " !important;\n    padding-right: ", " !important;\n  }\n  .bodiedExtensionView-content-wrap {\n    margin-top: ", " !important;\n  }\n  // Extension wrap have an additional margin on all four borders, so we need to adjust the spacing\n  // compared to the bodiedExtensionView-content-wrap\n  .extensionView-content-wrap {\n    margin-top: ", " !important;\n  }\n"])), "var(--ds-space-100, 8px)", "var(--ds-border, ".concat(_colors.N30, ")"), "var(--ds-surface, white)", "var(--ds-border-radius, 3px)", "var(--ds-border-radius, 3px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-200, 16px)", "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)", "var(--ds-space-100, 8px)");

package/dist/cjs/extensibility/MultiBodiedExtension/utils.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.sendMBEAnalyticsEvent = void 0;
+var _analytics = require("../../analytics");
+var _eventDispatcher = require("../../event-dispatcher");
+var _utils = require("../../utils");
+var sendMBEAnalyticsEvent = exports.sendMBEAnalyticsEvent = function sendMBEAnalyticsEvent(action, node, eventDispatcher) {
+  var analyticsDispatch = (0, _eventDispatcher.createDispatch)(eventDispatcher);
+  analyticsDispatch(_utils.analyticsEventKey, {
+    payload: {
+      action: action,
+      actionSubject: _analytics.ACTION_SUBJECT.MULTI_BODIED_EXTENSION,
+      eventType: _analytics.EVENT_TYPE.TRACK,
+      attributes: {
+        extensionType: node.attrs.extensionType,
+        extensionKey: node.attrs.extensionKey,
+        localId: node.attrs.localId,
+        maxFramesCount: node.attrs.maxFrames,
+        currentFramesCount: node.content.childCount
+      }
+    }
+  });
+};

package/dist/cjs/i18n/cs.js

@@ -15,9 +15,7 @@ exports.default = void 0;
 var _default = exports.default = {
   'fabric.editor.action': 'Aktuální úkol',
   'fabric.editor.action.description': 'Vytvořit a přiřadit aktuální úkol',
-  'fabric.editor.addColumn': 'Přidat sloupec vpravo',
   'fabric.editor.addMediaFiles': 'Přidat obrázek, video nebo soubor',
-  'fabric.editor.addRow': 'Přidat řádek pod',
   'fabric.editor.alignCenter': 'Zarovnat na střed',
   'fabric.editor.alignImageCenter': 'Zarovnat na střed',
   'fabric.editor.alignImageLeft': 'Zarovnat vlevo',
@@ -167,7 +165,6 @@ var _default = exports.default = {
   'fabric.editor.mediaAddLink': 'Přidat odkaz',
   'fabric.editor.mediaFiles': 'Obrázek, video nebo soubor',
   'fabric.editor.mediaFiles.description': 'Přidejte na svou stránku obrázky a další soubory',
-  'fabric.editor.media_change_mediainline': 'Vložený',
   'fabric.editor.media_change_mediasingle': 'Původní velikost',
   'fabric.editor.mention': 'Zmínka',
   'fabric.editor.mention.description': 'Zmiňte někoho, abyste jim zaslali oznámení',

package/dist/cjs/i18n/da.js

@@ -15,9 +15,11 @@ exports.default = void 0;
 var _default = exports.default = {
   'fabric.editor.action': 'Handlingsgenstand',
   'fabric.editor.action.description': 'Opret og tildel handlingsgenstande',
-  'fabric.editor.addColumn': 'Tilføj kolonne til højre',
+  'fabric.editor.addColumnLeft': 'Tilføj kolonne til venstre',
+  'fabric.editor.addColumnRight': 'Tilføj kolonne til højre',
   'fabric.editor.addMediaFiles': 'Tilføj billede, video eller fil',
-  'fabric.editor.addRow': 'Tilføj række nedenfor',
+  'fabric.editor.addRowAbove': 'Tilføj række ovenfor',
+  'fabric.editor.addRowBelow': 'Tilføj række nedenfor',
   'fabric.editor.alignCenter': 'Centrér',
   'fabric.editor.alignImageCenter': 'Centrér',
   'fabric.editor.alignImageLeft': 'Venstrejustér',
@@ -55,6 +57,7 @@ var _default = exports.default = {
   'fabric.editor.codeblock.description': 'Vis kode med syntaksfremhævning',
   'fabric.editor.collapseNode': 'skjul indhold',
   'fabric.editor.collapseTable': 'Luk tabel',
+  'fabric.editor.columnDragHandle': 'Kolonneindstillinger',
   'fabric.editor.columns': 'Layout',
   'fabric.editor.columns.description': 'Opdel din side i afsnit',
   'fabric.editor.copiedToClipboard': 'Kopieret!',
@@ -92,6 +95,11 @@ var _default = exports.default = {
   'fabric.editor.elementbrowser.search.empty-state.heading': 'Ingen resultater matcher din søgning',
   'fabric.editor.elementbrowser.search.empty-state.sub-heading': 'Prøv et andet søgeord, eller find nye apps til Atlassian-produkter.',
   'fabric.editor.elementbrowser.search.empty-state.sub-heading.link': 'Gå på opdagelse på Atlassian Marketplace',
+  'fabric.editor.elementbrowser.searchbar.assistive.text.nothing': 'Ingen resultater matcher din søgning',
+  'fabric.editor.elementbrowser.searchbar.assistive.text.suggestion': 'muligt forslag til indtastet tekst.',
+  'fabric.editor.elementbrowser.searchbar.assistive.text.suggestions': 'mulige forslag til indtastet tekst.',
+  'fabric.editor.elementbrowser.searchbar.elementAfterInput': 'Indtast',
+  'fabric.editor.elementbrowser.searchbar.placeholder': 'Søg',
   'fabric.editor.elementbrowser.sidebar.heading': 'Gennemse',
   'fabric.editor.embedTitle': 'Indlejr',
   'fabric.editor.emoji': 'Emoji',
@@ -147,6 +155,7 @@ var _default = exports.default = {
   'fabric.editor.infoPanel': 'Informationspanel',
   'fabric.editor.infoPanel.description': 'Fremhæv information i et farvet panel',
   'fabric.editor.inlineDescription': 'Vis link som indbygget tekst',
+  'fabric.editor.inlineOverlay': 'Konfigurer',
   'fabric.editor.inlineTitle': 'Indbyg',
   'fabric.editor.insertColumn': 'Indsæt kolonne til højre',
   'fabric.editor.insertColumnDrag': 'Indsæt kolonne',
@@ -167,12 +176,15 @@ var _default = exports.default = {
   'fabric.editor.mediaAddLink': 'Tilføj link',
   'fabric.editor.mediaFiles': 'Billede, video eller fil',
   'fabric.editor.mediaFiles.description': 'Tilføj billeder eller andre filer til din side',
-  'fabric.editor.media_change_mediainline': 'Indbyg',
   'fabric.editor.media_change_mediasingle': 'Original størrelse',
   'fabric.editor.mention': 'Benævnelse',
   'fabric.editor.mention.description': 'Omtal nogen for at sende dem en notifikation',
   'fabric.editor.mergeCells': 'Flet celler',
   'fabric.editor.moreFormatting': 'Mere formatering',
+  'fabric.editor.moveColumnLeft': '{0, plural, one {Flyt kolonne til venstre} other {Flyt kolonner til venstre}}',
+  'fabric.editor.moveColumnRight': '{0, plural, one {Flyt kolonne til højre} other {Flyt kolonner til højre}}',
+  'fabric.editor.moveDownDown': '{0, plural, one {Flyt række ned} other {Flyt rækker ned}}',
+  'fabric.editor.moveRowUp': '{0, plural, one {Flyt række op} other {Flyt rækker op}}',
   'fabric.editor.navigate.toolbar.editor': 'Naviger til værktøjslinje til redigeringsprogram',
   'fabric.editor.navigate.toolbar.floating': 'Naviger til flydende værktøjslinje',
   'fabric.editor.normal': 'Normal tekst',
@@ -198,11 +210,14 @@ var _default = exports.default = {
   'fabric.editor.removeRows': '{0, plural, one {Slet række} other {Slet rækker}}',
   'fabric.editor.rightSidebar': 'Højre sidebjælke',
   'fabric.editor.rowControl': 'Fremhæv række',
+  'fabric.editor.rowDragHandle': 'Rækkeindstillinger',
   'fabric.editor.saveButton': 'Gem',
   'fabric.editor.settingsLinks': 'Gå til Indstillinger for links',
   'fabric.editor.single': 'Enkelt kolonne',
   'fabric.editor.sortColumnASC': 'Sorter kolonnen fra A → Å',
   'fabric.editor.sortColumnDESC': 'Sorter kolonnen fra Å → A',
+  'fabric.editor.sortColumnDecreasing': 'Sortér faldende',
+  'fabric.editor.sortColumnIncreasing': 'Sortér stigende',
   'fabric.editor.splitCell': 'Opdel celle',
   'fabric.editor.status': 'Status',
   'fabric.editor.status.description': 'Tilføj en brugerdefineret statusetiket',
@@ -221,6 +236,10 @@ var _default = exports.default = {
   'fabric.editor.tableOptions': 'Egenskaber for tabel',
   'fabric.editor.tableResizeDecreaseScreenReaderInformation': '{newWidth, plural, one {Tabelbredde reduceret til {newWidth,number} pixel.} other {Tabelbredde reduceret til {newWidth,number} pixel.}}',
   'fabric.editor.tableResizeIncreaseScreenReaderInformation': '{newWidth, plural, one {Tabelbredde øget til {newWidth,number} pixel.} other {Tabelbredde øget til {newWidth,number} pixels.}}',
+  'fabric.editor.tableSelector': 'Tabelstørrelse',
+  'fabric.editor.tableSelector.description': 'Tilføj en tabel ved hjælp af popup for at vælge en brugerdefineret størrelse',
+  'fabric.editor.tableSizeSelectorButton': 'Opret tabel med størrelsen',
+  'fabric.editor.tableSizeSelectorPopup': 'Vælger til tabelstørrelse',
   'fabric.editor.tables.adjustColumn': 'Tilpas kolonne',
   'fabric.editor.tables.confirmDeleteLinkedModalMessage': 'Hvis du sletter {nodeName}, brydes forbindelsen til alt, der er forbundet til den.',
   'fabric.editor.tables.confirmDeleteLinkedModalOKButton': 'Slet',
@@ -311,5 +330,6 @@ var _default = exports.default = {
   'fabric.theme.subtle-yellow': 'Svag gul',
   'fabric.theme.teal': 'Teal',
   'fabric.theme.white': 'Hvid',
-  'fabric.theme.yellow': 'Gul'
+  'fabric.theme.yellow': 'Gul',
+  'fabrid.editor.rowNumbers': 'Rækkenumre'
 };

package/dist/cjs/i18n/de.js

@@ -15,9 +15,7 @@ exports.default = void 0;
 var _default = exports.default = {
   'fabric.editor.action': 'Aufgabe',
   'fabric.editor.action.description': 'Aufgaben erstellen und zuweisen',
-  'fabric.editor.addColumn': 'Spalte rechts hinzufügen',
   'fabric.editor.addMediaFiles': 'Bild, Video oder Datei hinzufügen',
-  'fabric.editor.addRow': 'Zeile unterhalb hinzufügen',
   'fabric.editor.alignCenter': 'Mittig ausrichten',
   'fabric.editor.alignImageCenter': 'Mittig ausrichten',
   'fabric.editor.alignImageLeft': 'Links ausrichten',
@@ -167,7 +165,6 @@ var _default = exports.default = {
   'fabric.editor.mediaAddLink': 'Link hinzufügen',
   'fabric.editor.mediaFiles': 'Bild, Video oder Datei',
   'fabric.editor.mediaFiles.description': 'Bilder oder andere Dateien zu Ihrer Seite hinzufügen',
-  'fabric.editor.media_change_mediainline': 'Inline',
   'fabric.editor.media_change_mediasingle': 'Originalgröße',
   'fabric.editor.mention': 'Erwähnen',
   'fabric.editor.mention.description': 'Erwähnen Sie einen Benutzer, um ihm eine Benachrichtigung zu senden.',