@atlaskit/editor-common/dist/es2019/ui/Caption/index.js

A package that contains common classes and components for editor and renderer

import _extends from "@babel/runtime/helpers/extends";
/** @jsx jsx */
import React from 'react';
import { css, jsx } from '@emotion/react';
import { injectIntl } from 'react-intl-next';
import { N200, N400 } from '@atlaskit/theme/colors';
import { messages } from './messages';
const captionWrapperStyle = css`
  margin-top: ${"var(--ds-space-100, 8px)"};
  text-align: center;
  position: relative;
  color: ${`var(--ds-text-subtle, ${N400})`};
`;
const placeholderStyle = css`
  color: ${`var(--ds-text-subtlest, ${N200})`};
  position: absolute;
  top: 0;
  width: 100%;
`;
export class CaptionComponent extends React.Component {
  render() {
    const {
      selected,
      hasContent,
      children,
      dataAttributes,
      intl: {
        formatMessage
      }
    } = this.props;
    const showPlaceholder = !selected && !hasContent;
    return jsx("div", _extends({
      "data-media-caption": true,
      "data-testid": "media-caption"
    }, dataAttributes, {
      css: captionWrapperStyle
    }), showPlaceholder ? jsx("p", {
      css: placeholderStyle
    }, formatMessage(messages.placeholder)) : null, children);
  }
}
export default injectIntl(CaptionComponent);