@atlaskit/editor-plugin-media
Version:
Media plugin for @atlaskit/editor-core
97 lines (95 loc) • 4.22 kB
JavaScript
/**
* @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
const placeholder = css`
color: ${"var(--ds-text-subtlest, #6B6E76)"};
width: 100%;
text-align: center;
margin-top: ${"var(--ds-space-100, 8px)"} ;
display: block;
`;
const placeholderText = css({
color: "var(--ds-text-subtlest, #6B6E76)"
});
const placeholderButton = xcss({
width: '100%',
marginTop: 'space.100'
});
// platform_editor_typography_ugc clean up
// Remove this component
export const CaptionPlaceholder = /*#__PURE__*/React.forwardRef(({
onClick,
placeholderMessage
}, ref) => {
const handlePointerDown = useCallback(e => {
e.preventDefault();
onClick();
}, [onClick]);
const 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 const CaptionPlaceholderButton = /*#__PURE__*/React.forwardRef(({
onClick,
placeholderMessage
}, ref) => {
const intl = useIntl();
const handleMouseDown = useCallback(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();
}, []);
const 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)));
});