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

SyncedBlock plugin for @atlaskit/editor-core

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.SourceSyncBlockPlaceholder = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = require("react");
var _react2 = require("@emotion/react");
var _reactIntl = require("react-intl");
var _messages = require("@atlaskit/editor-common/messages");
var _syncBlock = require("@atlaskit/editor-common/sync-block");
/**
 * @jsxRuntime classic
 * @jsx jsx
 */

// 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

var getSourceSyncBlockPlaceholderStyles = function getSourceSyncBlockPlaceholderStyles(placeholderText) {
  return (0, _react2.css)((0, _defineProperty2.default)({}, ".ProseMirror .".concat(_syncBlock.BodiedSyncBlockSharedCssClassName.prefix, ".").concat(_syncBlock.BodiedSyncBlockSharedCssClassName.empty, " .").concat(_syncBlock.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'
    }
  }));
};
var SourceSyncBlockPlaceholder = exports.SourceSyncBlockPlaceholder = function SourceSyncBlockPlaceholder() {
  var _useIntl = (0, _reactIntl.useIntl)(),
    formatMessage = _useIntl.formatMessage;
  var placeholderStyles = (0, _react.useMemo)(function () {
    return getSourceSyncBlockPlaceholderStyles(JSON.stringify(formatMessage(_messages.placeholderTextMessages.sourceSyncBlockPlaceholderText)));
  }, [formatMessage]);
  return (0, _react2.jsx)(_react2.Global, {
    styles: placeholderStyles
  });
};