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

Enhanced block editor for WordPress posts.

"use strict";

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

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

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

var _reactAutosizeTextarea = _interopRequireDefault(require("react-autosize-textarea"));

var _classnames = _interopRequireDefault(require("classnames"));

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

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

var _keycodes = require("@wordpress/keycodes");

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

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

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

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

var _blockEditor = require("@wordpress/block-editor");

var _postTypeSupportCheck = _interopRequireDefault(require("../post-type-support-check"));

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

/**
 * Constants
 */
const REGEXP_NEWLINES = /[\r\n]+/g;

function PostTitle() {
  const instanceId = (0, _compose.useInstanceId)(PostTitle);
  const ref = (0, _element.useRef)();
  const [isSelected, setIsSelected] = (0, _element.useState)(false);
  const {
    editPost
  } = (0, _data.useDispatch)('core/editor');
  const {
    insertDefaultBlock,
    clearSelectedBlock,
    insertBlocks
  } = (0, _data.useDispatch)(_blockEditor.store);
  const {
    isCleanNewPost,
    title,
    placeholder,
    isFocusMode,
    hasFixedToolbar
  } = (0, _data.useSelect)(select => {
    const {
      getEditedPostAttribute,
      isCleanNewPost: _isCleanNewPost
    } = select('core/editor');
    const {
      getSettings
    } = select(_blockEditor.store);
    const {
      titlePlaceholder,
      focusMode,
      hasFixedToolbar: _hasFixedToolbar
    } = getSettings();
    return {
      isCleanNewPost: _isCleanNewPost(),
      title: getEditedPostAttribute('title'),
      placeholder: titlePlaceholder,
      isFocusMode: focusMode,
      hasFixedToolbar: _hasFixedToolbar
    };
  });
  (0, _element.useEffect)(() => {
    if (!ref.current) {
      return;
    }

    const {
      ownerDocument
    } = ref.current;
    const {
      activeElement,
      body
    } = ownerDocument; // Only autofocus the title when the post is entirely empty. This should
    // only happen for a new post, which means we focus the title on new
    // post so the author can start typing right away, without needing to
    // click anything.

    if (isCleanNewPost && (!activeElement || body === activeElement)) {
      ref.current.focus();
    }
  }, [isCleanNewPost]);

  function onEnterPress() {
    insertDefaultBlock(undefined, undefined, 0);
  }

  function onInsertBlockAfter(blocks) {
    insertBlocks(blocks, 0);
  }

  function onUpdate(newTitle) {
    editPost({
      title: newTitle
    });
  }

  function onSelect() {
    setIsSelected(true);
    clearSelectedBlock();
  }

  function onUnselect() {
    setIsSelected(false);
  }

  function onChange(event) {
    onUpdate(event.target.value.replace(REGEXP_NEWLINES, ' '));
  }

  function onKeyDown(event) {
    if (event.keyCode === _keycodes.ENTER) {
      event.preventDefault();
      onEnterPress();
    }
  }

  function onPaste(event) {
    const clipboardData = event.clipboardData;
    let plainText = '';
    let html = ''; // IE11 only supports `Text` as an argument for `getData` and will
    // otherwise throw an invalid argument error, so we try the standard
    // arguments first, then fallback to `Text` if they fail.

    try {
      plainText = clipboardData.getData('text/plain');
      html = clipboardData.getData('text/html');
    } catch (error1) {
      try {
        html = clipboardData.getData('Text');
      } catch (error2) {
        // Some browsers like UC Browser paste plain text by default and
        // don't support clipboardData at all, so allow default
        // behaviour.
        return;
      }
    } // Allows us to ask for this information when we get a report.


    window.console.log('Received HTML:\n\n', html);
    window.console.log('Received plain text:\n\n', plainText);
    const content = (0, _blocks.pasteHandler)({
      HTML: html,
      plainText
    });

    if (typeof content !== 'string' && content.length) {
      event.preventDefault();
      const [firstBlock] = content;

      if (!title && (firstBlock.name === 'core/heading' || firstBlock.name === 'core/paragraph')) {
        onUpdate(firstBlock.attributes.content);
        onInsertBlockAfter(content.slice(1));
      } else {
        onInsertBlockAfter(content);
      }
    }
  } // The wp-block className is important for editor styles.
  // This same block is used in both the visual and the code editor.


  const className = (0, _classnames.default)('wp-block editor-post-title editor-post-title__block', {
    'is-selected': isSelected,
    'is-focus-mode': isFocusMode,
    'has-fixed-toolbar': hasFixedToolbar
  });
  const decodedPlaceholder = (0, _htmlEntities.decodeEntities)(placeholder);
  return (0, _element.createElement)(_postTypeSupportCheck.default, {
    supportKeys: "title"
  }, (0, _element.createElement)("div", {
    className: className
  }, (0, _element.createElement)(_components.VisuallyHidden, {
    as: "label",
    htmlFor: `post-title-${instanceId}`
  }, decodedPlaceholder || (0, _i18n.__)('Add title')), (0, _element.createElement)(_reactAutosizeTextarea.default, {
    ref: ref,
    id: `post-title-${instanceId}`,
    className: "editor-post-title__input",
    value: title,
    onChange: onChange,
    placeholder: decodedPlaceholder || (0, _i18n.__)('Add title'),
    onFocus: onSelect,
    onBlur: onUnselect,
    onKeyDown: onKeyDown,
    onKeyPress: onUnselect,
    onPaste: onPaste
  })));
}
//# sourceMappingURL=index.js.map