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

Renderer component

import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
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 */
import { jsx, css } from '@emotion/react';
import React, { useState } from 'react';
import { WidthConsumer } from '@atlaskit/editor-common/ui';
import { RendererCssClassName } from '../../consts';
import { calcBreakoutWidth } from '@atlaskit/editor-common/utils';
import { useMultiBodiedExtensionActions } from './multiBodiedExtension/actions';
import { useMultiBodiedExtensionContext } from './multiBodiedExtension/context';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import { calcBreakoutWidthCss } from '../utils/breakout';
var containerStyles = 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 jsx("article", {
    "data-testid": "multiBodiedExtension--frames"
  }, children);
};
var MultiBodiedExtensionNavigation = function MultiBodiedExtensionNavigation(_ref2) {
  var children = _ref2.children;
  return 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 = 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 ? RendererCssClassName.EXTENSION_CENTER_ALIGN : '';

  // This hierarchy is copied from regular extension (see extension.tsx)
  return jsx("div", {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
    className: "".concat(RendererCssClassName.EXTENSION, " ").concat(centerAlignClass),
    style: {
      width: (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? isCustomLayout : isTopLevel) ?
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
      calcBreakoutWidth(layout, width) : expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? undefined : '100%'
    },
    "data-layout": layout,
    "data-testid": "multiBodiedExtension--wrapper-renderer"
  }, jsx("div", {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
    className: "".concat(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 = 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 ? RendererCssClassName.EXTENSION_CENTER_ALIGN : '';

  // This hierarchy is copied from regular extension (see extension.tsx)
  return jsx("div", {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
    className: "".concat(RendererCssClassName.EXTENSION, " ").concat(centerAlignClass),
    style: {
      width: (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? isCustomLayout : isTopLevel) ?
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
      calcBreakoutWidthCss(layout) : expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? undefined : '100%'
    },
    "data-layout": layout,
    "data-testid": "multiBodiedExtension--wrapper-renderer"
  }, jsx("div", {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
    className: "".concat(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 = useState(0),
    _useState2 = _slicedToArray(_useState, 2),
    activeChildIndex = _useState2[0],
    setActiveChildIndex = _useState2[1];
  var _useMultiBodiedExtens = useMultiBodiedExtensionContext({
      extensionType: extensionType,
      extensionKey: extensionKey
    }),
    loading = _useMultiBodiedExtens.loading,
    extensionContext = _useMultiBodiedExtens.extensionContext;
  var actions = useMultiBodiedExtensionActions({
    updateActiveChild: setActiveChildIndex,
    children: children,
    childrenContainer: 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 = React.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 jsx(NodeRenderer, {
        node: node,
        actions: actions
      });
    } else {
      return jsx(React.Fragment, null, jsx(MultiBodiedExtensionNavigation, null, jsx(NodeRenderer, {
        node: node,
        actions: actions
      })), 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 = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t\t& [data-extension-frame='true']:nth-of-type(", ") {\n\t\t\tdisplay: block;\n\t\t}\n\t"])), activeChildIndex + 1);
  if (expValEquals('platform_editor_renderer_extension_width_fix', 'isEnabled', true)) {
    var _isTopLevel = path.length < 1;
    var _useCenterWrapper = _isTopLevel && ['wide', 'full-width'].includes(layout) && expValEquals('platform_editor_flex_based_centering', 'isEnabled', true);
    var wrapper = jsx(MultiBodiedExtensionWrapperNext, {
      layout: layout,
      path: path,
      rendererAppearance: rendererAppearance
    }, renderContent());
    return 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 ? jsx("div", {
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
      className: RendererCssClassName.STICKY_SAFE_CENTER_WRAPPER + ' ' + RendererCssClassName.FLEX_CENTER_WRAPPER
    }, wrapper) : wrapper);
  }
  var isTopLevel = path.length < 1;
  var useCenterWrapper = isTopLevel && ['wide', 'full-width'].includes(layout) && expValEquals('platform_editor_flex_based_centering', 'isEnabled', true);
  return 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
  }, jsx(WidthConsumer, null, function (_ref5) {
    var width = _ref5.width;
    var wrapper = jsx(MultiBodiedExtensionWrapperLegacy, {
      layout: layout,
      width: width,
      path: path,
      rendererAppearance: rendererAppearance
    }, renderContent());
    return useCenterWrapper ? jsx("div", {
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
      className: RendererCssClassName.STICKY_SAFE_CENTER_WRAPPER + ' ' + RendererCssClassName.FLEX_CENTER_WRAPPER
    }, wrapper) : wrapper;
  }));
};
export default MultiBodiedExtension;