@atlaskit/editor-plugin-synced-block/dist/esm/ui/SourceSyncBlockPlaceholder.js

SyncedBlock plugin for @atlaskit/editor-core

import _defineProperty from "@babel/runtime/helpers/defineProperty";
/**
 * @jsxRuntime classic
 * @jsx jsx
 */
import { useMemo } from 'react';

// Plugin content components need a global selector because the ProseMirror content is not a child
// of this component. This follows the existing layout placeholder pattern.
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
import { css, Global, jsx } from '@emotion/react';
import { useIntl } from 'react-intl';
import { placeholderTextMessages } from '@atlaskit/editor-common/messages';
import { BodiedSyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
var getSourceSyncBlockPlaceholderStyles = function getSourceSyncBlockPlaceholderStyles(placeholderText) {
  return css(_defineProperty({}, ".ProseMirror .".concat(BodiedSyncBlockSharedCssClassName.prefix, ".").concat(BodiedSyncBlockSharedCssClassName.empty, " .").concat(BodiedSyncBlockSharedCssClassName.content, "[contenteditable=\"true\"] > p:only-child"), {
    position: 'relative',
    '&::before': {
      // JSON.stringify produces a quoted and escaped CSS string.
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
      content: placeholderText,
      position: 'absolute',
      boxSizing: 'border-box',
      color: "var(--ds-text-subtlest, #6B6E76)",
      font: 'inherit',
      insetInlineStart: 0,
      width: '100%',
      overflow: 'hidden',
      pointerEvents: 'none',
      textOverflow: 'ellipsis',
      userSelect: 'none',
      whiteSpace: 'nowrap'
    }
  }));
};
export var SourceSyncBlockPlaceholder = function SourceSyncBlockPlaceholder() {
  var _useIntl = useIntl(),
    formatMessage = _useIntl.formatMessage;
  var placeholderStyles = useMemo(function () {
    return getSourceSyncBlockPlaceholderStyles(JSON.stringify(formatMessage(placeholderTextMessages.sourceSyncBlockPlaceholderText)));
  }, [formatMessage]);
  return jsx(Global, {
    styles: placeholderStyles
  });
};