@atlaskit/editor-common/dist/es2019/extensibility/Extension/Lozenge/EditToggle.js

A package that contains common classes and components for editor and renderer

/**
 * @jsxRuntime classic
 * @jsx jsx
 */

import { useCallback } 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 { defineMessages, useIntl } from 'react-intl';
import CheckMarkIcon from '@atlaskit/icon/core/check-mark';
import EditIcon from '@atlaskit/icon/core/edit';
// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
import { Flex, xcss } from '@atlaskit/primitives';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
const buttonContainerStyles = css({
  opacity: 0,
  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
  lineHeight: 1,
  position: 'absolute',
  width: 'max-content',
  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
  top: '-28px',
  display: 'inline-flex',
  justifyContent: 'flex-end',
  color: "var(--ds-text-subtle, #505258)"
});
const buttonStyles = css({
  display: 'flex',
  alignItems: 'center',
  cursor: 'pointer',
  boxShadow: `0 0 0 1px ${"var(--ds-border, #0B120E24)"}`,
  minHeight: "var(--ds-space-300, 24px)",
  borderRadius: "var(--ds-radius-small, 4px)",
  paddingLeft: "var(--ds-space-150, 12px)",
  paddingRight: "var(--ds-space-150, 12px)",
  font: "var(--ds-font-body, normal 400 14px/20px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
  '&:hover': {
    backgroundColor: "var(--ds-background-input-hovered, #F8F8F8)"
  },
  outlineColor: "var(--ds-border-focused, #4688EC)",
  border: 'none',
  backgroundColor: "var(--ds-background-input, #FFFFFF)",
  color: "var(--ds-text-subtle, #505258)"
});
const showButtonContainerStyle = css({
  opacity: 1
});
const iconStyles = xcss({
  marginRight: 'space.075'
});
const i18n = defineMessages({
  doneEditing: {
    id: 'editor-common-extensibility-extension-lozenge-editToggle.done.editing',
    defaultMessage: 'Done editing',
    description: 'Text in button when on click switches back to view mode of a macro'
  },
  makeEdits: {
    id: 'editor-common-extensibility-extension-lozenge-editToggle.make.edits',
    defaultMessage: 'Make edits',
    description: 'Text in button when on click switches back to edit mode of a macro'
  }
});
// Used to toggle between edit and renderer mode for bodied macros in live pages
export const EditToggle = ({
  isNodeHovered,
  customContainerStyles,
  setIsNodeHovered,
  showBodiedExtensionRendererView,
  setShowBodiedExtensionRendererView
}) => {
  const intl = useIntl();
  const text = showBodiedExtensionRendererView ? intl.formatMessage(i18n.makeEdits) : intl.formatMessage(i18n.doneEditing);
  const icon = showBodiedExtensionRendererView ? jsx(EditIcon, {
    testId: "edit-icon",
    label: ""
  }) : jsx(CheckMarkIcon, {
    testId: "check-mark-icon",
    label: ""
  });
  const handleClick = useCallback(() => {
    setShowBodiedExtensionRendererView === null || setShowBodiedExtensionRendererView === void 0 ? void 0 : setShowBodiedExtensionRendererView(!showBodiedExtensionRendererView);
  }, [showBodiedExtensionRendererView, setShowBodiedExtensionRendererView]);
  const handleKeyDown = useCallback(event => {
    if (event.key === 'Enter') {
      handleClick();
    }
  }, [handleClick]);
  return jsx("div", {
    "data-testid": "extension-edit-toggle-container"
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
    ,
    css: [buttonContainerStyles, expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) ? null : isNodeHovered && showButtonContainerStyle]
    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
    ,
    style: customContainerStyles
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
    ,
    className: "extension-edit-toggle-container",
    onMouseOver: () => setIsNodeHovered === null || setIsNodeHovered === void 0 ? void 0 : setIsNodeHovered(true)
    // @atlassian/a11y/mouse-events-have-key-events: keyboard focus is already handled by the
    // inner <button>'s onFocus/onBlur. No-ops here satisfy the rule without duplicating state updates.
    ,
    onFocus: expValEquals('editor_a11y__enghealth-46814_fy26', 'isEnabled', true) ? () => {} : undefined,
    onMouseLeave: () => setIsNodeHovered === null || setIsNodeHovered === void 0 ? void 0 : setIsNodeHovered(false),
    onBlur: expValEquals('editor_a11y__enghealth-46814_fy26', 'isEnabled', true) ? () => {} : undefined,
    tabIndex: -1
  }, jsx("button", {
    type: "button",
    "data-testid": "edit-toggle"
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
    ,
    css: buttonStyles
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
    ,
    className: "extension-edit-toggle",
    onClick: handleClick,
    onKeyDown: handleKeyDown,
    onFocus: () => setIsNodeHovered === null || setIsNodeHovered === void 0 ? void 0 : setIsNodeHovered(true),
    onBlur: () => setIsNodeHovered === null || setIsNodeHovered === void 0 ? void 0 : setIsNodeHovered(false)
  }, jsx(Flex, {
    as: "span",
    xcss: iconStyles
  }, icon), text));
};