@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 -- Ignored via go/DSP-18766
import { css, jsx } from '@emotion/react';
import { defineMessages, useIntl } from 'react-intl-next';
import CheckMarkIcon from '@atlaskit/icon/core/check-mark';
import EditIcon from '@atlaskit/icon/core/edit';
import { Flex, xcss } from '@atlaskit/primitives';
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, #44546F)"
});
const buttonStyles = css({
  display: 'flex',
  alignItems: 'center',
  cursor: 'pointer',
  boxShadow: `0 0 0 1px ${"var(--ds-border, #091E4224)"}`,
  minHeight: "var(--ds-space-300, 24px)",
  borderRadius: "var(--ds-border-radius, 4px)",
  paddingLeft: "var(--ds-space-150, 12px)",
  paddingRight: "var(--ds-space-150, 12px)",
  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
  '&:hover': {
    backgroundColor: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
  },
  outlineColor: "var(--ds-border-focused, #388BFF)",
  border: 'none',
  backgroundColor: "var(--ds-background-neutral-subtle, #00000000)",
  color: "var(--ds-text-subtle, #44546F)"
});
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 (
    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
    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: isNodeHovered ? [buttonContainerStyles, showButtonContainerStyle] : buttonContainerStyles
      // 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"
      // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
      ,
      onMouseOver: () => setIsNodeHovered === null || setIsNodeHovered === void 0 ? void 0 : setIsNodeHovered(true),
      onMouseLeave: () => setIsNodeHovered === null || setIsNodeHovered === void 0 ? void 0 : setIsNodeHovered(false),
      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))
  );
};