@atlaskit/editor-core/dist/esm/ui/Appearance/Comment/Toolbar.js

A package contains Atlassian editor core functionality

import _extends from "@babel/runtime/helpers/extends";
import _typeof from "@babel/runtime/helpers/typeof";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
/**
 * @jsxRuntime classic
 * @jsx jsx
 */

import React, { useEffect, useState } from 'react';

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports -- Ignored via go/DSP-18766; jsx required at runtime for @jsxRuntime classic
import { css, jsx } from '@emotion/react';
import { fg } from '@atlaskit/platform-feature-flags';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
var MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT = 490;
var akEditorMenuZIndex = 500;
var akEditorToolbarKeylineHeight = 2;
var mainToolbarWrapperStyleNew = css({
  position: 'relative',
  alignItems: 'center',
  padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-100, 8px)", " 0"),
  display: 'flex',
  height: 'auto',
  backgroundColor: "var(--ds-surface, #FFFFFF)",
  boxShadow: 'none',
  paddingLeft: "var(--ds-space-250, 20px)",
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '> div': {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
    '> div:first-of-type:not(style), > style:first-of-type + *': {
      marginLeft: 0
    }
  },
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
  '.block-type-btn': {
    paddingLeft: 0
  }
});

/** keep default padding for entire toolbar */
var mainToolbarWithoutLeftPadding = css({
  padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-100, 8px)", " 0")
});
var mainToolbarWithPadding = css({
  padding: "var(--ds-space-100, 8px)"
});
var mainToolbarTwoLineStylesNew = css({
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '& > div': _defineProperty(_defineProperty({}, "@media (max-width: ".concat(MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, "px)"), {
    flexDirection: 'column-reverse',
    alignItems: 'end',
    display: 'flex',
    justifyContent: 'flex-end'
  }), '> div:first-of-type', _defineProperty({}, "@media (max-width: ".concat(MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, "px)"), {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
    '> div:nth-of-type(2)': {
      justifyContent: 'flex-end',
      display: 'flex'
    }
  }))
});
var mainToolbarWrapperStylesVisualRefresh = css({
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  'span svg': {
    maxWidth: '100%'
  }
});
var mainToolbarWithRadiusStyle = css({
  borderRadius: "var(--ds-radius-small, 3px)".concat(" ", "var(--ds-radius-small, 3px)", " 0 0")
});
var mainToolbarRadius = css({
  borderRadius: "var(--ds-radius-medium, 6px)".concat(" ", "var(--ds-radius-medium, 6px)", " 0 0")
});
var stickyToolbarWrapperStyleNew = css({
  position: 'sticky',
  paddingBottom: "var(--ds-space-100, 8px)",
  zIndex: akEditorMenuZIndex,
  transition: 'box-shadow ease-in-out 0.2s',
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '&.show-keyline': {
    boxShadow: "0 ".concat(akEditorToolbarKeylineHeight, "px 0 0 ", "var(--ds-background-accent-gray-subtlest, #F0F1F2)")
  }
});
var StickyToolbar = function StickyToolbar(props) {
  var _useState = useState(0),
    _useState2 = _slicedToArray(_useState, 2),
    top = _useState2[0],
    setTop = _useState2[1];

  // ED-15802: if externalToolbarRef is passed in, set top to externalToolbarRef?.current?.clientHeight
  // else if offsetTop is a number set top to offsetTop
  // otherwise top is 0 as initial state
  useEffect(function () {
    var _props$externalToolba;
    if ((_props$externalToolba = props.externalToolbarRef) !== null && _props$externalToolba !== void 0 && (_props$externalToolba = _props$externalToolba.current) !== null && _props$externalToolba !== void 0 && _props$externalToolba.clientHeight) {
      setTop(props.externalToolbarRef.current.clientHeight);
    } else {
      setTop(props.offsetTop || 0);
    }
  }, [props.externalToolbarRef, props.offsetTop]);
  return (
    // eslint-disable-next-line @atlaskit/design-system/prefer-primitives
    jsx("div", {
      css: [mainToolbarWrapperStyleNew, props.twoLineEditorToolbar && mainToolbarTwoLineStylesNew, mainToolbarWrapperStylesVisualRefresh, stickyToolbarWrapperStyleNew, props.isNewToolbarEnabled && mainToolbarWithPadding, expValEquals('platform_editor_fix_comment_border', 'isEnabled', true) && expValEquals('platform_editor_comment_editor_border_radius', 'isEnabled', true) && mainToolbarRadius, expValEquals('platform_editor_fix_comment_border', 'isEnabled', true) && !expValEquals('platform_editor_comment_editor_border_radius', 'isEnabled', true) && fg('platform_editor_comments_border_radius') && mainToolbarWithRadiusStyle]
      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
      ,
      style: {
        top: "".concat(top, "px")
      },
      "data-testid": "ak-editor-main-toolbar"
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
      ,
      className: 'show-keyline'
    }, props.children)
  );
};
var FixedToolbar = function FixedToolbar(props) {
  return (
    // eslint-disable-next-line @atlaskit/design-system/prefer-primitives
    jsx("div", {
      css: [mainToolbarWrapperStyleNew, props.twoLineEditorToolbar && mainToolbarTwoLineStylesNew, mainToolbarWrapperStylesVisualRefresh, props.isNewToolbarEnabled && mainToolbarWithoutLeftPadding, !expValEquals('platform_editor_comment_editor_border_radius', 'isEnabled', true) && fg('platform_editor_comments_border_radius') && mainToolbarWithRadiusStyle, expValEquals('platform_editor_comment_editor_border_radius', 'isEnabled', true) && mainToolbarRadius],
      "data-testid": "ak-editor-main-toolbar"
    }, props.children)
  );
};

/**
 * ED-15802: Scenarios when a sticky bar is used:
 * 1. useStickyToolbar is true
 * 2. useStickyToolbar is a DOM element
 * 3. useStickyToolbar is an object and has offsetTop key;
 */
var getStickyParameters = function getStickyParameters(configuration) {
  // const isUsingStickyOffset, isHTMLElement is used so TS can properly infer types.
  var isHTMLElement = _typeof(configuration) === 'object' && !('offsetTop' in configuration);
  var isUsingStickyOffset = _typeof(configuration) === 'object' && 'offsetTop' in configuration;
  if (_typeof(configuration) !== 'object') {
    return {
      externalToolbarRef: undefined,
      offsetTop: undefined
    };
  }
  if (isUsingStickyOffset) {
    return {
      offsetTop: configuration.offsetTop
    };
  }
  if (isHTMLElement) {
    return {
      externalToolbarRef: configuration
    };
  }
};
export var MainToolbar = function MainToolbar(_ref) {
  var useStickyToolbar = _ref.useStickyToolbar,
    twoLineEditorToolbar = _ref.twoLineEditorToolbar,
    children = _ref.children,
    isNewToolbarEnabled = _ref.isNewToolbarEnabled;
  if (useStickyToolbar) {
    return jsx(StickyToolbar
    // Ignored via go/ees005
    // eslint-disable-next-line react/jsx-props-no-spreading
    , _extends({}, getStickyParameters(useStickyToolbar), {
      twoLineEditorToolbar: twoLineEditorToolbar,
      isNewToolbarEnabled: isNewToolbarEnabled
    }), children);
  }
  return jsx(FixedToolbar, {
    twoLineEditorToolbar: twoLineEditorToolbar,
    isNewToolbarEnabled: isNewToolbarEnabled
  }, children);
};