import { useTheme } from 'hooks';

export const Placeholder = () => {
  const { theme } = useTheme();
  const { colors } = theme;
  return (
    <div
      className="editor-placeholder"
      style={{
        color: colors['caption-01'],
        fontFamily: 'CircularStd-Book',
        overflow: 'hidden',
        position: 'absolute',
        textOverflow: 'ellipsis',
        top: 10,
        left: 20,
        fontSize: 14,
        userSelect: 'none',
        display: 'inline-block',
        pointerEvents: 'none',
      }}
    >
      Enter some rich text...
    </div>
  );
};