@wordpress/editor/build/components/post-title/index.native.js

Enhanced block editor for WordPress posts.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _element = require("@wordpress/element");

var _reactNative = require("react-native");

var _lodash = require("lodash");

var _richText = require("@wordpress/rich-text");

var _htmlEntities = require("@wordpress/html-entities");

var _data = require("@wordpress/data");

var _components = require("@wordpress/components");

var _compose = require("@wordpress/compose");

var _i18n = require("@wordpress/i18n");

var _blocks = require("@wordpress/blocks");

var _style = _interopRequireDefault(require("./style.scss"));

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
class PostTitle extends _element.Component {
  constructor(props) {
    super(props);
    this.setRef = this.setRef.bind(this);
  }

  componentDidUpdate(prevProps) {
    // Unselect if any other block is selected and blur the RichText
    if (this.props.isSelected && !prevProps.isAnyBlockSelected && this.props.isAnyBlockSelected) {
      if (this.richTextRef) {
        this.richTextRef.blur();
      }

      this.props.onUnselect();
    }
  }

  componentDidMount() {
    if (this.props.innerRef) {
      this.props.innerRef(this);
    }
  }

  handleFocusOutside() {
    this.props.onUnselect();
  }

  focus() {
    this.props.onSelect();
  }

  onPaste({
    value,
    onChange,
    plainText
  }) {
    const content = (0, _blocks.pasteHandler)({
      plainText,
      mode: 'INLINE',
      tagName: 'p'
    });

    if (typeof content === 'string') {
      const valueToInsert = (0, _richText.create)({
        html: content
      });
      onChange((0, _richText.insert)(value, valueToInsert));
    }
  }

  setRef(richText) {
    this.richTextRef = richText;
  }

  getTitle(title, postType) {
    if ('page' === postType) {
      return (0, _lodash.isEmpty)(title) ?
      /* translators: accessibility text. empty page title. */
      (0, _i18n.__)('Page title. Empty') : (0, _i18n.sprintf)(
      /* translators: accessibility text. %s: text content of the page title. */
      (0, _i18n.__)('Page title. %s'), title);
    }

    return (0, _lodash.isEmpty)(title) ?
    /* translators: accessibility text. empty post title. */
    (0, _i18n.__)('Post title. Empty') : (0, _i18n.sprintf)(
    /* translators: accessibility text. %s: text content of the post title. */
    (0, _i18n.__)('Post title. %s'), title);
  }

  render() {
    const {
      placeholder,
      style,
      title,
      focusedBorderColor,
      borderStyle,
      isDimmed,
      postType
    } = this.props;
    const decodedPlaceholder = (0, _htmlEntities.decodeEntities)(placeholder);
    const borderColor = this.props.isSelected ? focusedBorderColor : 'transparent';
    return (0, _element.createElement)(_reactNative.View, {
      style: [_style.default.titleContainer, borderStyle, {
        borderColor
      }, isDimmed && _style.default.dimmed],
      accessible: !this.props.isSelected,
      accessibilityLabel: this.getTitle(title, postType),
      accessibilityHint: (0, _i18n.__)('Updates the title.')
    }, (0, _element.createElement)(_richText.__experimentalRichText, {
      setRef: this.setRef,
      accessibilityLabel: this.getTitle(title, postType),
      tagName: 'p',
      tagsToEliminate: ['strong'],
      unstableOnFocus: this.props.onSelect,
      onBlur: this.props.onBlur // always assign onBlur as a props
      ,
      multiline: false,
      style: style,
      styles: _style.default,
      fontSize: 24,
      fontWeight: 'bold',
      deleteEnter: true,
      onChange: value => {
        this.props.onUpdate(value);
      },
      onPaste: this.onPaste,
      placeholder: decodedPlaceholder,
      value: title,
      onSelectionChange: () => {},
      onEnter: this.props.onEnterPress,
      disableEditingMenu: true,
      __unstableIsSelected: this.props.isSelected,
      __unstableOnCreateUndoLevel: () => {}
    }));
  }

}

var _default = (0, _compose.compose)((0, _data.withSelect)(select => {
  const {
    isPostTitleSelected,
    getEditedPostAttribute
  } = select('core/editor');
  const {
    getSelectedBlockClientId,
    getBlockRootClientId
  } = select('core/block-editor');
  const selectedId = getSelectedBlockClientId();
  const selectionIsNested = !!getBlockRootClientId(selectedId);
  return {
    postType: getEditedPostAttribute('type'),
    isAnyBlockSelected: !!selectedId,
    isSelected: isPostTitleSelected(),
    isDimmed: selectionIsNested
  };
}), (0, _data.withDispatch)(dispatch => {
  const {
    undo,
    redo,
    togglePostTitleSelection
  } = dispatch('core/editor');
  const {
    clearSelectedBlock,
    insertDefaultBlock
  } = dispatch('core/block-editor');
  return {
    onEnterPress() {
      insertDefaultBlock(undefined, undefined, 0);
    },

    onUndo: undo,
    onRedo: redo,

    onSelect() {
      togglePostTitleSelection(true);
      clearSelectedBlock();
    },

    onUnselect() {
      togglePostTitleSelection(false);
    }

  };
}), _compose.withInstanceId, _components.withFocusOutside)(PostTitle);

exports.default = _default;
//# sourceMappingURL=index.native.js.map