@atlaskit/editor-common/dist/esm/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';
var 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)"
});
var buttonStyles = css({
  display: 'flex',
  alignItems: 'center',
  cursor: 'pointer',
  boxShadow: "0 0 0 1px ".concat("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)"
});
var showButtonContainerStyle = css({
  opacity: 1
});
var iconStyles = xcss({
  marginRight: 'space.075'
});
var 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 var EditToggle = function EditToggle(_ref) {
  var isNodeHovered = _ref.isNodeHovered,
    customContainerStyles = _ref.customContainerStyles,
    setIsNodeHovered = _ref.setIsNodeHovered,
    showBodiedExtensionRendererView = _ref.showBodiedExtensionRendererView,
    setShowBodiedExtensionRendererView = _ref.setShowBodiedExtensionRendererView;
  var intl = useIntl();
  var text = showBodiedExtensionRendererView ? intl.formatMessage(i18n.makeEdits) : intl.formatMessage(i18n.doneEditing);
  var icon = showBodiedExtensionRendererView ? jsx(EditIcon, {
    testId: "edit-icon",
    label: ""
  }) : jsx(CheckMarkIcon, {
    testId: "check-mark-icon",
    label: ""
  });
  var handleClick = useCallback(function () {
    setShowBodiedExtensionRendererView === null || setShowBodiedExtensionRendererView === void 0 || setShowBodiedExtensionRendererView(!showBodiedExtensionRendererView);
  }, [showBodiedExtensionRendererView, setShowBodiedExtensionRendererView]);
  var handleKeyDown = useCallback(function (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: function onMouseOver() {
        return setIsNodeHovered === null || setIsNodeHovered === void 0 ? void 0 : setIsNodeHovered(true);
      },
      onMouseLeave: function onMouseLeave() {
        return 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: function onFocus() {
        return setIsNodeHovered === null || setIsNodeHovered === void 0 ? void 0 : setIsNodeHovered(true);
      },
      onBlur: function onBlur() {
        return setIsNodeHovered === null || setIsNodeHovered === void 0 ? void 0 : setIsNodeHovered(false);
      }
    }, jsx(Flex, {
      as: "span",
      xcss: iconStyles
    }, icon), text))
  );
};