@atlaskit/renderer/dist/cjs/react/nodes/multiBodiedExtension.js

Renderer component

"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 _react = require("@emotion/react");
var _react2 = _interopRequireWildcard(require("react"));
var _ui = require("@atlaskit/editor-common/ui");
var _consts = require("../../consts");
var _utils = require("@atlaskit/editor-common/utils");
var _actions = require("./multiBodiedExtension/actions");
var _context = require("./multiBodiedExtension/context");
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
var _breakout = require("../utils/breakout");
var _templateObject;
/* eslint-disable @atlaskit/design-system/prefer-primitives, @atlaskit/design-system/consistent-css-prop-usage */
/**
 * @jsxRuntime classic
 * @jsx jsx
 * @jsxFrag
 */
/* eslint-disable @typescript-eslint/consistent-type-imports, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766; jsx required at runtime for @jsxRuntime classic */
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var containerStyles = (0, _react.css)({
  // Remove top margin if MBE is the first on the doc/page (MBE can only be on the first level)
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-nested-selectors
  '&:first-child > .ak-renderer-extension': {
    marginTop: 0
  },
  // When patch is on, direct child is center wrapper (not extension); same first-child behaviour
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-nested-selectors
  '&:first-child > .ak-renderer-sticky-safe-center-wrapper': {
    marginTop: 0
  }
});
var MultiBodiedExtensionChildrenContainer = function MultiBodiedExtensionChildrenContainer(_ref) {
  var children = _ref.children;
  return (0, _react.jsx)("article", {
    "data-testid": "multiBodiedExtension--frames"
  }, children);
};
var MultiBodiedExtensionNavigation = function MultiBodiedExtensionNavigation(_ref2) {
  var children = _ref2.children;
  return (0, _react.jsx)("nav", {
    "data-testid": "multiBodiedExtension-navigation"
  }, children);
};
var MultiBodiedExtensionWrapperLegacy = function MultiBodiedExtensionWrapperLegacy(_ref3) {
  var width = _ref3.width,
    path = _ref3.path,
    layout = _ref3.layout,
    rendererAppearance = _ref3.rendererAppearance,
    children = _ref3.children;
  var isTopLevel = path.length < 1;
  // we should only use custom layout for full-page appearance
  var canUseCustomLayout = (0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererAppearance === 'full-page' : true;
  var isCustomLayout = isTopLevel && ['wide', 'full-width'].includes(layout) && canUseCustomLayout;
  var centerAlignClass = isCustomLayout ? _consts.RendererCssClassName.EXTENSION_CENTER_ALIGN : '';

  // This hierarchy is copied from regular extension (see extension.tsx)
  return (0, _react.jsx)("div", {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
    className: "".concat(_consts.RendererCssClassName.EXTENSION, " ").concat(centerAlignClass),
    style: {
      width: ((0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? isCustomLayout : isTopLevel) ?
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
      (0, _utils.calcBreakoutWidth)(layout, width) : (0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? undefined : '100%'
    },
    "data-layout": layout,
    "data-testid": "multiBodiedExtension--wrapper-renderer"
  }, (0, _react.jsx)("div", {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
    className: "".concat(_consts.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER)
  }, children));
};
var MultiBodiedExtensionWrapperNext = function MultiBodiedExtensionWrapperNext(_ref4) {
  var path = _ref4.path,
    layout = _ref4.layout,
    rendererAppearance = _ref4.rendererAppearance,
    children = _ref4.children;
  var isTopLevel = path.length < 1;
  // we should only use custom layout for full-page appearance
  var canUseCustomLayout = (0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererAppearance === 'full-page' : true;
  var isCustomLayout = isTopLevel && ['wide', 'full-width'].includes(layout) && canUseCustomLayout;
  var centerAlignClass = isCustomLayout ? _consts.RendererCssClassName.EXTENSION_CENTER_ALIGN : '';

  // This hierarchy is copied from regular extension (see extension.tsx)
  return (0, _react.jsx)("div", {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
    className: "".concat(_consts.RendererCssClassName.EXTENSION, " ").concat(centerAlignClass),
    style: {
      width: ((0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? isCustomLayout : isTopLevel) ?
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
      (0, _breakout.calcBreakoutWidthCss)(layout) : (0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? undefined : '100%'
    },
    "data-layout": layout,
    "data-testid": "multiBodiedExtension--wrapper-renderer"
  }, (0, _react.jsx)("div", {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
    className: "".concat(_consts.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER)
  }, children));
};
var MultiBodiedExtension = function MultiBodiedExtension(props) {
  var _extensionContext$pri;
  var children = props.children,
    _props$layout = props.layout,
    layout = _props$layout === void 0 ? 'default' : _props$layout,
    _props$path = props.path,
    path = _props$path === void 0 ? [] : _props$path,
    parameters = props.parameters,
    extensionType = props.extensionType,
    extensionKey = props.extensionKey,
    content = props.content,
    marks = props.marks,
    localId = props.localId,
    rendererAppearance = props.rendererAppearance;
  var _useState = (0, _react2.useState)(0),
    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
    activeChildIndex = _useState2[0],
    setActiveChildIndex = _useState2[1];
  var _useMultiBodiedExtens = (0, _context.useMultiBodiedExtensionContext)({
      extensionType: extensionType,
      extensionKey: extensionKey
    }),
    loading = _useMultiBodiedExtens.loading,
    extensionContext = _useMultiBodiedExtens.extensionContext;
  var actions = (0, _actions.useMultiBodiedExtensionActions)({
    updateActiveChild: setActiveChildIndex,
    children: children,
    childrenContainer: (0, _react.jsx)(MultiBodiedExtensionChildrenContainer, null, children),
    allowBodiedOverride: extensionContext === null || extensionContext === void 0 || (_extensionContext$pri = extensionContext.privateProps) === null || _extensionContext$pri === void 0 ? void 0 : _extensionContext$pri.__allowBodiedOverride
  });
  var renderContent = _react2.default.useCallback(function () {
    var _marks$find;
    if (loading || !extensionContext) {
      return null;
    }
    var NodeRenderer = extensionContext.NodeRenderer,
      privateProps = extensionContext.privateProps;
    var fragmentLocalId = marks === null || marks === void 0 || (_marks$find = marks.find(function (m) {
      return m.type.name === 'fragment';
    })) === null || _marks$find === void 0 || (_marks$find = _marks$find.attrs) === null || _marks$find === void 0 ? void 0 : _marks$find.localId;
    var node = {
      type: 'multiBodiedExtension',
      extensionKey: extensionKey,
      extensionType: extensionType,
      parameters: parameters,
      content: content,
      localId: localId,
      fragmentLocalId: fragmentLocalId
    };
    if (privateProps.__allowBodiedOverride) {
      return (0, _react.jsx)(NodeRenderer, {
        node: node,
        actions: actions
      });
    } else {
      return (0, _react.jsx)(_react2.default.Fragment, null, (0, _react.jsx)(MultiBodiedExtensionNavigation, null, (0, _react.jsx)(NodeRenderer, {
        node: node,
        actions: actions
      })), (0, _react.jsx)(MultiBodiedExtensionChildrenContainer, null, children));
    }
  }, [loading, extensionContext, marks, extensionKey, extensionType, parameters, content, localId, actions, children]);

  // make the frame visible
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
  var containerActiveFrameStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t\t& [data-extension-frame='true']:nth-of-type(", ") {\n\t\t\tdisplay: block;\n\t\t}\n\t"])), activeChildIndex + 1);
  if ((0, _expValEquals.expValEquals)('platform_editor_renderer_extension_width_fix', 'isEnabled', true)) {
    var _isTopLevel = path.length < 1;
    var _useCenterWrapper = _isTopLevel && ['wide', 'full-width'].includes(layout) && (0, _expValEquals.expValEquals)('platform_editor_flex_based_centering', 'isEnabled', true);
    var wrapper = (0, _react.jsx)(MultiBodiedExtensionWrapperNext, {
      layout: layout,
      path: path,
      rendererAppearance: rendererAppearance
    }, renderContent());
    return (0, _react.jsx)("section", {
      css: [containerStyles, containerActiveFrameStyles],
      "data-testid": "multiBodiedExtension--container",
      "data-multiBodiedExtension-container": true,
      "data-active-child-index": activeChildIndex,
      "data-layout": layout,
      "data-local-id": localId,
      "data-node-type": "multiBodiedExtension"
    }, _useCenterWrapper ? (0, _react.jsx)("div", {
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
      className: _consts.RendererCssClassName.STICKY_SAFE_CENTER_WRAPPER + ' ' + _consts.RendererCssClassName.FLEX_CENTER_WRAPPER
    }, wrapper) : wrapper);
  }
  var isTopLevel = path.length < 1;
  var useCenterWrapper = isTopLevel && ['wide', 'full-width'].includes(layout) && (0, _expValEquals.expValEquals)('platform_editor_flex_based_centering', 'isEnabled', true);
  return (0, _react.jsx)("section", {
    css: [containerStyles, containerActiveFrameStyles],
    "data-testid": "multiBodiedExtension--container",
    "data-multiBodiedExtension-container": true,
    "data-active-child-index": activeChildIndex,
    "data-layout": layout,
    "data-local-id": localId
  }, (0, _react.jsx)(_ui.WidthConsumer, null, function (_ref5) {
    var width = _ref5.width;
    var wrapper = (0, _react.jsx)(MultiBodiedExtensionWrapperLegacy, {
      layout: layout,
      width: width,
      path: path,
      rendererAppearance: rendererAppearance
    }, renderContent());
    return useCenterWrapper ? (0, _react.jsx)("div", {
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
      className: _consts.RendererCssClassName.STICKY_SAFE_CENTER_WRAPPER + ' ' + _consts.RendererCssClassName.FLEX_CENTER_WRAPPER
    }, wrapper) : wrapper;
  }));
};
var _default = exports.default = MultiBodiedExtension;