@atlaskit/editor-common 76.34.0 → 76.36.0

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

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "BODIED_EXT_PADDING", {
+  enumerable: true,
+  get: function get() {
+    return _styles.BODIED_EXT_PADDING;
+  }
+});
+exports.overlay = void 0;
+Object.defineProperty(exports, "padding", {
+  enumerable: true,
+  get: function get() {
+    return _styles.EXTENSION_PADDING;
+  }
+});
+exports.wrapperDefault = exports.styledImage = exports.placeholderFallbackParams = exports.placeholderFallback = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = require("@emotion/react");
+var _colors = require("@atlaskit/theme/colors");
+var _styles = require("../../styles");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var wrapperDefault = exports.wrapperDefault = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  border-radius: ", ";\n  position: relative;\n  vertical-align: middle;\n\n  .ProseMirror-selectednode > span > & > .extension-overlay {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n    opacity: 1;\n  }\n\n  &.with-overlay {\n    .extension-overlay {\n      background: ", ";\n      color: transparent;\n    }\n\n    &:hover .extension-overlay {\n      opacity: 1;\n    }\n  }\n"])), "var(--ds-background-neutral, ".concat(_colors.N20, ")"), "var(--ds-border-radius, 3px)", "var(--ds-border-selected, ".concat(_colors.B200, ")"), "var(--ds-background-neutral-hovered, ".concat(_colors.N20A, ")"));
+var overlay = exports.overlay = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: ", ";\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.3s;\n"])), "var(--ds-border-radius, 3px)");
+var placeholderFallback = exports.placeholderFallback = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-flex;\n  align-items: center;\n\n  & > img {\n    margin: 0 ", ";\n  }\n  /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */\n  /* stylelint-disable-next-line */\n  label: placeholder-fallback;\n"])), "var(--ds-space-050, 4px)");
+var placeholderFallbackParams = exports.placeholderFallbackParams = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  max-width: 200px;\n  margin-left: 5px;\n  color: ", ";\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n"])), "var(--ds-text-subtlest, ".concat(_colors.N70, ")"));
+var styledImage = exports.styledImage = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  max-height: 16px;\n  max-width: 16px;\n  /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */\n  /* stylelint-disable-next-line */\n  label: lozenge-image;\n"])));

package/dist/cjs/extensibility/Extension.js

@@ -0,0 +1,79 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Extension = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _providerFactory = require("../provider-factory");
+var _ExtensionComponent = require("./ExtensionComponent");
+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); }; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+var Extension = exports.Extension = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(Extension, _Component);
+  var _super = _createSuper(Extension);
+  function Extension(props) {
+    var _this;
+    (0, _classCallCheck2.default)(this, Extension);
+    _this = _super.call(this, props);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderWithProvider", function (_ref) {
+      var extensionProvider = _ref.extensionProvider;
+      var _this$props = _this.props,
+        node = _this$props.node,
+        getPos = _this$props.getPos,
+        editorView = _this$props.editorView,
+        handleContentDOMRef = _this$props.handleContentDOMRef,
+        extensionHandlers = _this$props.extensionHandlers,
+        references = _this$props.references,
+        editorAppearance = _this$props.editorAppearance,
+        pluginInjectionApi = _this$props.pluginInjectionApi,
+        eventDispatcher = _this$props.eventDispatcher;
+      return /*#__PURE__*/_react.default.createElement(_ExtensionComponent.ExtensionComponent, {
+        editorView: editorView,
+        node: node,
+        getPos: getPos,
+        references: references,
+        extensionProvider: extensionProvider,
+        handleContentDOMRef: handleContentDOMRef,
+        extensionHandlers: extensionHandlers,
+        editorAppearance: editorAppearance,
+        pluginInjectionApi: pluginInjectionApi,
+        eventDispatcher: eventDispatcher
+      });
+    });
+    _this.providerFactory = props.providerFactory || new _providerFactory.ProviderFactory();
+    return _this;
+  }
+  (0, _createClass2.default)(Extension, [{
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      if (!this.props.providerFactory) {
+        // new ProviderFactory is created if no `providers` has been set
+        // in this case when component is unmounted it's safe to destroy this providerFactory
+        this.providerFactory.destroy();
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react.default.createElement(_providerFactory.WithProviders, {
+        providers: ['extensionProvider'],
+        providerFactory: this.providerFactory,
+        renderNode: this.renderWithProvider
+      });
+    }
+  }]);
+  return Extension;
+}(_react.Component);
+(0, _defineProperty2.default)(Extension, "displayName", 'Extension');

package/dist/cjs/extensibility/ExtensionComponent.js

@@ -0,0 +1,252 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ExtensionComponent = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _memoizeOne = _interopRequireDefault(require("memoize-one"));
+var _extensions = require("../extensions");
+var _utils = require("../utils");
+var _Extension = _interopRequireDefault(require("./Extension/Extension"));
+var _InlineExtension = _interopRequireDefault(require("./Extension/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); }; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+var ExtensionComponent = exports.ExtensionComponent = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(ExtensionComponent, _Component);
+  var _super = _createSuper(ExtensionComponent);
+  function ExtensionComponent() {
+    var _this;
+    (0, _classCallCheck2.default)(this, ExtensionComponent);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "privatePropsParsed", false);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {});
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "mounted", false);
+    // memoized to avoid rerender on extension state changes
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getNodeRenderer", (0, _memoizeOne.default)(_extensions.getNodeRenderer));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getExtensionModuleNodePrivateProps", (0, _memoizeOne.default)(_extensions.getExtensionModuleNodePrivateProps));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setStateFromPromise", function (stateKey, promise) {
+      promise && promise.then(function (p) {
+        if (!_this.mounted) {
+          return;
+        }
+        _this.setState((0, _defineProperty2.default)({}, stateKey, p));
+      });
+    });
+    /**
+     * Parses any private nodes once an extension provider is available.
+     *
+     * We do this separately from resolving a node renderer component since the
+     * private props come from extension provider, rather than an extension
+     * handler which only handles `render`/component concerns.
+     */
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "parsePrivateNodePropsIfNeeded", /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+      var _this$props$node$attr, extensionType, extensionKey, privateProps;
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (!(_this.privatePropsParsed || !_this.state.extensionProvider)) {
+              _context.next = 2;
+              break;
+            }
+            return _context.abrupt("return");
+          case 2:
+            _this.privatePropsParsed = true;
+            _this$props$node$attr = _this.props.node.attrs, extensionType = _this$props$node$attr.extensionType, extensionKey = _this$props$node$attr.extensionKey;
+            /**
+             * getExtensionModuleNodePrivateProps can throw if there are issues in the
+             * manifest
+             */
+            _context.prev = 4;
+            _context.next = 7;
+            return _this.getExtensionModuleNodePrivateProps(_this.state.extensionProvider, extensionType, extensionKey);
+          case 7:
+            privateProps = _context.sent;
+            _this.setState({
+              _privateProps: privateProps
+            });
+            _context.next = 14;
+            break;
+          case 11:
+            _context.prev = 11;
+            _context.t0 = _context["catch"](4);
+            // eslint-disable-next-line no-console
+            console.error('Provided extension handler has thrown an error\n', _context.t0);
+            /** We don't want this error to block renderer */
+            /** We keep rendering the default content */
+          case 14:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[4, 11]]);
+    })));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleExtension", function (pmNode, actions) {
+      var _pmNode$marks;
+      var _this$props = _this.props,
+        extensionHandlers = _this$props.extensionHandlers,
+        editorView = _this$props.editorView;
+      var _pmNode$attrs = pmNode.attrs,
+        extensionType = _pmNode$attrs.extensionType,
+        extensionKey = _pmNode$attrs.extensionKey,
+        parameters = _pmNode$attrs.parameters,
+        text = _pmNode$attrs.text;
+      var isBodiedExtension = pmNode.type.name === 'bodiedExtension';
+      if (isBodiedExtension) {
+        return;
+      }
+      var fragmentLocalId = pmNode === null || pmNode === void 0 || (_pmNode$marks = pmNode.marks) === null || _pmNode$marks === void 0 || (_pmNode$marks = _pmNode$marks.find(function (m) {
+        return m.type.name === 'fragment';
+      })) === null || _pmNode$marks === void 0 || (_pmNode$marks = _pmNode$marks.attrs) === null || _pmNode$marks === void 0 ? void 0 : _pmNode$marks.localId;
+      var node = {
+        type: pmNode.type.name,
+        extensionType: extensionType,
+        extensionKey: extensionKey,
+        parameters: parameters,
+        content: text,
+        localId: pmNode.attrs.localId,
+        fragmentLocalId: fragmentLocalId
+      };
+      var result;
+      if (extensionHandlers && extensionHandlers[extensionType]) {
+        var render = (0, _utils.getExtensionRenderer)(extensionHandlers[extensionType]);
+        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;
+          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;
+    });
+    return _this;
+  }
+  (0, _createClass2.default)(ExtensionComponent, [{
+    key: "UNSAFE_componentWillMount",
+    value: function UNSAFE_componentWillMount() {
+      this.mounted = true;
+    }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var extensionProvider = this.props.extensionProvider;
+      if (extensionProvider) {
+        this.setStateFromPromise('extensionProvider', extensionProvider);
+      }
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      this.parsePrivateNodePropsIfNeeded();
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.mounted = false;
+    }
+  }, {
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(nextProps) {
+      var extensionProvider = nextProps.extensionProvider;
+      if (extensionProvider && this.props.extensionProvider !== extensionProvider) {
+        this.setStateFromPromise('extensionProvider', extensionProvider);
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$state$_privateP;
+      var _this$props2 = this.props,
+        node = _this$props2.node,
+        handleContentDOMRef = _this$props2.handleContentDOMRef,
+        editorView = _this$props2.editorView,
+        references = _this$props2.references,
+        editorAppearance = _this$props2.editorAppearance,
+        pluginInjectionApi = _this$props2.pluginInjectionApi,
+        getPos = _this$props2.getPos,
+        eventDispatcher = _this$props2.eventDispatcher;
+      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),
+          eventDispatcher: eventDispatcher,
+          pluginInjectionApi: pluginInjectionApi,
+          editorAppearance: editorAppearance
+        });
+      }
+      var extensionHandlerResult = this.tryExtensionHandler(undefined);
+      switch (node.type.name) {
+        case 'extension':
+        case 'bodiedExtension':
+          return /*#__PURE__*/_react.default.createElement(_Extension.default, {
+            node: node,
+            getPos: this.props.getPos,
+            references: references,
+            extensionProvider: this.state.extensionProvider,
+            handleContentDOMRef: handleContentDOMRef,
+            view: editorView,
+            editorAppearance: editorAppearance,
+            hideFrame: (_this$state$_privateP = this.state._privateProps) === null || _this$state$_privateP === void 0 ? void 0 : _this$state$_privateP.__hideFrame,
+            pluginInjectionApi: pluginInjectionApi
+          }, extensionHandlerResult);
+        case 'inlineExtension':
+          return /*#__PURE__*/_react.default.createElement(_InlineExtension.default, {
+            node: node
+          }, extensionHandlerResult);
+        default:
+          return null;
+      }
+    }
+  }, {
+    key: "tryExtensionHandler",
+    value: function tryExtensionHandler(actions) {
+      var node = this.props.node;
+      try {
+        var extensionContent = this.handleExtension(node, actions);
+        if (extensionContent && /*#__PURE__*/_react.default.isValidElement(extensionContent)) {
+          return extensionContent;
+        }
+      } catch (e) {
+        // eslint-disable-next-line no-console
+        console.error('Provided extension handler has thrown an error\n', e);
+        /** We don't want this error to block renderer */
+        /** We keep rendering the default content */
+      }
+
+      return null;
+    }
+  }]);
+  return ExtensionComponent;
+}(_react.Component);

package/dist/cjs/extensibility/ExtensionNodeWrapper.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ExtensionNodeWrapper = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _utils = require("../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 = exports.ExtensionNodeWrapper = function ExtensionNodeWrapper(_ref) {
+  var children = _ref.children,
+    nodeType = _ref.nodeType;
+  return /*#__PURE__*/_react.default.createElement("span", null, children, nodeType === 'inlineExtension' && _utils.ZERO_WIDTH_SPACE);
+};

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

@@ -0,0 +1,264 @@
+"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 _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime/helpers/objectDestructuringEmpty"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+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 _hooks = require("../../hooks");
+var _utils = require("../../utils");
+var _withPluginState = require("../../with-plugin-state");
+var _templateObject, _templateObject2;
+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;
+};
+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 _useState = (0, _react.useState)(0),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    activeChildIndex = _useState2[0],
+    setActiveChildIndex = _useState2[1];
+  // Adding to avoid aliasing `this` for the callbacks
+  var updateActiveChild = _react.default.useCallback(function (index) {
+    if (typeof index !== 'number') {
+      setActiveChildIndex(0);
+      throw new Error('Index is not valid');
+    }
+    setActiveChildIndex(index);
+    return true;
+  }, [setActiveChildIndex]);
+  var actions = useMultiBodiedExtensionActions({
+    updateActiveChild: updateActiveChild,
+    editorView: editorView,
+    getPos: getPos,
+    eventDispatcher: eventDispatcher,
+    node: node
+  });
+  var extensionHandlerResult = _react.default.useMemo(function () {
+    return tryExtensionHandler(actions);
+  }, [tryExtensionHandler, actions]);
+  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 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 = {};
+  if (shouldBreakout) {
+    var _calculateBreakoutSty = (0, _utils.calculateBreakoutStyles)({
+        mode: node.attrs.layout,
+        widthStateLineLength: widthState === null || widthState === void 0 ? void 0 : widthState.lineLength,
+        widthStateWidth: widthState === null || widthState === void 0 ? void 0 : widthState.width
+      }),
+      breakoutStyles = (0, _extends2.default)({}, ((0, _objectDestructuringEmpty2.default)(_calculateBreakoutSty), _calculateBreakoutSty));
+    mbeContainerStyles = breakoutStyles;
+  }
+  return (0, _react2.jsx)("section", {
+    className: "multiBodiedExtension--container",
+    css: containerCSS,
+    "data-testid": "multiBodiedExtension--container",
+    "data-active-child-index": activeChildIndex,
+    style: mbeContainerStyles
+  }, (0, _react2.jsx)("nav", {
+    className: "multiBodiedExtension-navigation",
+    css: navigationCSS,
+    "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;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['width']),
+    widthState = _useSharedPluginState.widthState;
+  return (0, _react2.jsx)(MultiBodiedExtensionWithWidth, (0, _extends2.default)({
+    widthState: widthState
+  }, props));
+};
+
+// Workaround taken from platform/packages/editor/editor-core/src/plugins/extension/ui/Extension/Extension/index.tsx
+var MultiBodiedExtension = function MultiBodiedExtension(props) {
+  // TODO: ED-17836 This code is here because confluence injects
+  // the `editor-referentiality` plugin via `dangerouslyAppendPlugins`
+  // which cannot access the `pluginInjectionApi`. When we move
+  // Confluence to using presets we can remove this workaround.
+  var pluginInjectionApi = props.pluginInjectionApi;
+  return pluginInjectionApi === undefined ? (0, _react2.jsx)(MultiBodiedExtensionDeprecated, props) : (0, _react2.jsx)(MultiBodiedExtensionWithSharedState, props);
+};
+
+// TODO: ED-17836 This code is here because Confluence injects
+// the `editor-referentiality` plugin via `dangerouslyAppendPlugins`
+// which cannot access the `pluginInjectionApi`. When we move
+// Confluence to using presets we can remove this workaround.
+// @ts-ignore
+var widthPluginKey = {
+  key: 'widthPlugin$',
+  getState: function getState(state) {
+    return state['widthPlugin$'];
+  }
+};
+var MultiBodiedExtensionDeprecated = function MultiBodiedExtensionDeprecated(props) {
+  return (0, _react2.jsx)(_withPluginState.WithPluginState, {
+    editorView: props.editorView,
+    plugins: {
+      widthState: widthPluginKey
+    },
+    render: function render(_ref3) {
+      var widthState = _ref3.widthState;
+      return (0, _react2.jsx)(MultiBodiedExtensionWithWidth, (0, _extends2.default)({
+        widthState: widthState
+      }, props));
+    }
+  });
+};
+/**
+ * End workaround
+ */
+var _default = exports.default = MultiBodiedExtension;