@atlaskit/editor-plugin-media/dist/esm/ui/CaptionPlaceholder/index.js

Media plugin for @atlaskit/editor-core

import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
var _templateObject;
/**
 * @jsxRuntime classic
 * @jsx jsx
 */
import React, { 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 { FormattedMessage, useIntl } from 'react-intl';
import { captionMessages as messages } from '@atlaskit/editor-common/media';
import { CAPTION_PLACEHOLDER_ID } from '@atlaskit/editor-common/media-single';
import { fg } from '@atlaskit/platform-feature-flags';
// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
import { Pressable, Text, xcss } from '@atlaskit/primitives';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
var placeholder = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\tcolor: ", ";\n\twidth: 100%;\n\ttext-align: center;\n\tmargin-top: ", " !important;\n\tdisplay: block;\n"])), "var(--ds-text-subtlest, #6B6E76)", "var(--ds-space-100, 8px)");
var placeholderText = css({
  color: "var(--ds-text-subtlest, #6B6E76)"
});
var placeholderButton = xcss({
  width: '100%',
  marginTop: 'space.100'
});
// platform_editor_typography_ugc clean up
// Remove this component
export var CaptionPlaceholder = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
  var onClick = _ref.onClick,
    placeholderMessage = _ref.placeholderMessage;
  var handlePointerDown = useCallback(function (e) {
    e.preventDefault();
    onClick();
  }, [onClick]);
  var computedPlaceholderMessage = placeholderMessage ? placeholderMessage : messages.placeholder;

  // This issue is a temporary fix for users being able to edit captions on edge browsers. This will be removed
  // replaced with CaptionPlaceholderButton in the near future and this code can be removed.
  return (
    // eslint-disable-next-line @atlaskit/design-system/use-primitives-text
    jsx("span", {
      ref: ref,
      css: placeholder,
      onPointerDown: handlePointerDown
      // This id is just used for setting styles at the moment, if it's needed for anything more specific
      // It may need to be generated to avoid overlap
      ,
      id: expValEquals('confluence_compact_text_format', 'isEnabled', true) || expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp') ? CAPTION_PLACEHOLDER_ID : undefined,
      "data-id": CAPTION_PLACEHOLDER_ID,
      "data-testid": "caption-placeholder"
    }, jsx(FormattedMessage
    // Ignored via go/ees005
    // eslint-disable-next-line react/jsx-props-no-spreading
    , computedPlaceholderMessage))
  );
});
export var CaptionPlaceholderButton = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
  var onClick = _ref2.onClick,
    placeholderMessage = _ref2.placeholderMessage;
  var intl = useIntl();
  var handleMouseDown = useCallback(function (e) {
    // In firefox, button is focused when mouse down, which make editor lose focus
    // Hence we want to disabled it so that user can type in caption directly after click
    e.preventDefault();
  }, []);
  var computedPlaceholderMessage = placeholderMessage ? placeholderMessage : messages.placeholder;
  return jsx(Pressable, {
    ref: ref,
    backgroundColor: "color.background.neutral.subtle",
    onClick: onClick,
    onMouseDown: handleMouseDown,
    "data-id": CAPTION_PLACEHOLDER_ID,
    testId: "caption-placeholder",
    padding: "space.0",
    xcss: placeholderButton
  }, expValEquals('confluence_compact_text_format', 'isEnabled', true) || expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp') ?
  // This id is just used for setting styles at the moment, if it's needed for anything more specific
  // It may need to be generated to avoid overlap
  // eslint-disable-next-line @atlaskit/design-system/use-primitives-text
  jsx("span", {
    css: placeholderText,
    id: CAPTION_PLACEHOLDER_ID
  }, jsx(FormattedMessage
  // Ignored via go/ees005
  // eslint-disable-next-line react/jsx-props-no-spreading
  , computedPlaceholderMessage)) : jsx(Text, {
    color: "color.text.subtlest",
    size: "large"
  }, intl.formatMessage(computedPlaceholderMessage)));
});