@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 = void 0;
var _clsx = _interopRequireDefault(require("clsx"));
var _i18n = require("@wordpress/i18n");
var _element = require("@wordpress/element");
var _htmlEntities = require("@wordpress/html-entities");
var _data = require("@wordpress/data");
var _blockEditor = require("@wordpress/block-editor");
var _keycodes = require("@wordpress/keycodes");
var _blocks = require("@wordpress/blocks");
var _richText = require("@wordpress/rich-text");
var _compose = require("@wordpress/compose");
var _dom = require("@wordpress/dom");
var _constants = require("./constants");
var _usePostTitleFocus = _interopRequireDefault(require("./use-post-title-focus"));
var _usePostTitle = _interopRequireDefault(require("./use-post-title"));
var _postTypeSupportCheck = _interopRequireDefault(require("../post-type-support-check"));
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function PostTitle(_, forwardedRef) {
  const {
    placeholder
  } = (0, _data.useSelect)(select => {
    const {
      getSettings
    } = select(_blockEditor.store);
    const {
      titlePlaceholder
    } = getSettings();
    return {
      placeholder: titlePlaceholder
    };
  }, []);
  const [isSelected, setIsSelected] = (0, _element.useState)(false);
  const {
    ref: focusRef
  } = (0, _usePostTitleFocus.default)(forwardedRef);
  const {
    title,
    setTitle: onUpdate
  } = (0, _usePostTitle.default)();
  const [selection, setSelection] = (0, _element.useState)({});
  const {
    clearSelectedBlock,
    insertBlocks,
    insertDefaultBlock
  } = (0, _data.useDispatch)(_blockEditor.store);
  const decodedPlaceholder = (0, _htmlEntities.decodeEntities)(placeholder) || (0, _i18n.__)('Add title');
  const {
    value,
    onChange,
    ref: richTextRef
  } = (0, _richText.__unstableUseRichText)({
    value: title,
    onChange(newValue) {
      onUpdate(newValue.replace(_constants.REGEXP_NEWLINES, ' '));
    },
    placeholder: decodedPlaceholder,
    selectionStart: selection.start,
    selectionEnd: selection.end,
    onSelectionChange(newStart, newEnd) {
      setSelection(sel => {
        const {
          start,
          end
        } = sel;
        if (start === newStart && end === newEnd) {
          return sel;
        }
        return {
          start: newStart,
          end: newEnd
        };
      });
    },
    __unstableDisableFormats: false
  });
  function onInsertBlockAfter(blocks) {
    insertBlocks(blocks, 0);
  }
  function onSelect() {
    setIsSelected(true);
    clearSelectedBlock();
  }
  function onUnselect() {
    setIsSelected(false);
    setSelection({});
  }
  function onEnterPress() {
    insertDefaultBlock(undefined, undefined, 0);
  }
  function onKeyDown(event) {
    if (event.keyCode === _keycodes.ENTER) {
      event.preventDefault();
      onEnterPress();
    }
  }
  function onPaste(event) {
    const clipboardData = event.clipboardData;
    let plainText = '';
    let html = '';
    try {
      plainText = clipboardData.getData('text/plain');
      html = clipboardData.getData('text/html');
    } catch (error) {
      // 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
    });
    event.preventDefault();
    if (!content.length) {
      return;
    }
    if (typeof content !== 'string') {
      const [firstBlock] = content;
      if (!title && (firstBlock.name === 'core/heading' || firstBlock.name === 'core/paragraph')) {
        // Strip HTML to avoid unwanted HTML being added to the title.
        // In the majority of cases it is assumed that HTML in the title
        // is undesirable.
        const contentNoHTML = (0, _dom.__unstableStripHTML)(firstBlock.attributes.content);
        onUpdate(contentNoHTML);
        onInsertBlockAfter(content.slice(1));
      } else {
        onInsertBlockAfter(content);
      }
    } else {
      // Strip HTML to avoid unwanted HTML being added to the title.
      // In the majority of cases it is assumed that HTML in the title
      // is undesirable.
      const contentNoHTML = (0, _dom.__unstableStripHTML)(content);
      onChange((0, _richText.insert)(value, (0, _richText.create)({
        html: contentNoHTML
      })));
    }
  }

  // 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, _clsx.default)(_constants.DEFAULT_CLASSNAMES, {
    'is-selected': isSelected
  });
  return (
    /*#__PURE__*/
    /* eslint-disable jsx-a11y/heading-has-content, jsx-a11y/no-noninteractive-element-to-interactive-role */
    (0, _jsxRuntime.jsx)(_postTypeSupportCheck.default, {
      supportKeys: "title",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("h1", {
        ref: (0, _compose.useMergeRefs)([richTextRef, focusRef]),
        contentEditable: true,
        className: className,
        "aria-label": decodedPlaceholder,
        role: "textbox",
        "aria-multiline": "true",
        onFocus: onSelect,
        onBlur: onUnselect,
        onKeyDown: onKeyDown,
        onPaste: onPaste
      })
    })
    /* eslint-enable jsx-a11y/heading-has-content, jsx-a11y/no-noninteractive-element-to-interactive-role */
  );
}

/**
 * Renders the `PostTitle` component.
 *
 * @param {Object}  _            Unused parameter.
 * @param {Element} forwardedRef Forwarded ref for the component.
 *
 * @return {Component} The rendered PostTitle component.
 */
var _default = exports.default = (0, _element.forwardRef)(PostTitle);
//# sourceMappingURL=index.js.map