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

Media plugin for @atlaskit/editor-core

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.CaptionPlaceholderButton = exports.CaptionPlaceholder = void 0;
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
var _react = _interopRequireWildcard(require("react"));
var _react2 = require("@emotion/react");
var _reactIntlNext = require("react-intl-next");
var _media = require("@atlaskit/editor-common/media");
var _mediaSingle = require("@atlaskit/editor-common/media-single");
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _primitives = require("@atlaskit/primitives");
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
var _templateObject;
/**
 * @jsxRuntime classic
 * @jsx jsx
 */
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
// 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 = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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 = (0, _react2.css)({
  color: "var(--ds-text-subtlest, #6B6E76)"
});
var placeholderButton = (0, _primitives.xcss)({
  width: '100%',
  marginTop: 'space.100'
});
// platform_editor_typography_ugc clean up
// Remove this component
var CaptionPlaceholder = exports.CaptionPlaceholder = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
  var onClick = _ref.onClick,
    placeholderMessage = _ref.placeholderMessage;
  var handlePointerDown = (0, _react.useCallback)(function (e) {
    e.preventDefault();
    onClick();
  }, [onClick]);
  var computedPlaceholderMessage = placeholderMessage ? placeholderMessage : _media.captionMessages.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
    (0, _react2.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: (0, _expValEquals.expValEquals)('confluence_compact_text_format', 'isEnabled', true) || (0, _expValEquals.expValEquals)('cc_editor_ai_content_mode', 'variant', 'test') && (0, _platformFeatureFlags.fg)('platform_editor_content_mode_button_mvp') ? _mediaSingle.CAPTION_PLACEHOLDER_ID : undefined,
      "data-id": _mediaSingle.CAPTION_PLACEHOLDER_ID,
      "data-testid": "caption-placeholder"
    }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage
    // Ignored via go/ees005
    // eslint-disable-next-line react/jsx-props-no-spreading
    , computedPlaceholderMessage))
  );
});
var CaptionPlaceholderButton = exports.CaptionPlaceholderButton = /*#__PURE__*/_react.default.forwardRef(function (_ref2, ref) {
  var onClick = _ref2.onClick,
    placeholderMessage = _ref2.placeholderMessage;
  var intl = (0, _reactIntlNext.useIntl)();
  var handleMouseDown = (0, _react.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 : _media.captionMessages.placeholder;
  return (0, _react2.jsx)(_primitives.Pressable, {
    ref: ref,
    backgroundColor: "color.background.neutral.subtle",
    onClick: onClick,
    onMouseDown: handleMouseDown,
    "data-id": _mediaSingle.CAPTION_PLACEHOLDER_ID,
    testId: "caption-placeholder",
    padding: "space.0",
    xcss: placeholderButton
  }, (0, _expValEquals.expValEquals)('confluence_compact_text_format', 'isEnabled', true) || (0, _expValEquals.expValEquals)('cc_editor_ai_content_mode', 'variant', 'test') && (0, _platformFeatureFlags.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
  (0, _react2.jsx)("span", {
    css: placeholderText,
    id: _mediaSingle.CAPTION_PLACEHOLDER_ID
  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage
  // Ignored via go/ees005
  // eslint-disable-next-line react/jsx-props-no-spreading
  , computedPlaceholderMessage)) : (0, _react2.jsx)(_primitives.Text, {
    color: "color.text.subtlest",
    size: "large"
  }, intl.formatMessage(computedPlaceholderMessage)));
});