@wordpress/editor/build/components/post-text-editor/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 = PostTextEditor;

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

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

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

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

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

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

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

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */
function PostTextEditor() {
  const postContent = (0, _data.useSelect)(select => select('core/editor').getEditedPostContent(), []);
  const {
    editPost,
    resetEditorBlocks
  } = (0, _data.useDispatch)('core/editor');
  const [value, setValue] = (0, _element.useState)(postContent);
  const [isDirty, setIsDirty] = (0, _element.useState)(false);
  const instanceId = (0, _compose.useInstanceId)(PostTextEditor);

  if (!isDirty && value !== postContent) {
    setValue(postContent);
  }
  /**
   * Handles a textarea change event to notify the onChange prop callback and
   * reflect the new value in the component's own state. This marks the start
   * of the user's edits, if not already changed, preventing future props
   * changes to value from replacing the rendered value. This is expected to
   * be followed by a reset to dirty state via `stopEditing`.
   *
   * @see stopEditing
   *
   * @param {Event} event Change event.
   */


  const onChange = event => {
    const newValue = event.target.value;
    editPost({
      content: newValue
    });
    setValue(newValue);
    setIsDirty(true);
  };
  /**
   * Function called when the user has completed their edits, responsible for
   * ensuring that changes, if made, are surfaced to the onPersist prop
   * callback and resetting dirty state.
   */


  const stopEditing = () => {
    if (isDirty) {
      const blocks = (0, _blocks.parse)(value);
      resetEditorBlocks(blocks);
      setIsDirty(false);
    }
  };

  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.VisuallyHidden, {
    as: "label",
    htmlFor: `post-content-${instanceId}`
  }, (0, _i18n.__)('Type text or HTML')), (0, _element.createElement)(_reactAutosizeTextarea.default, {
    autoComplete: "off",
    dir: "auto",
    value: value,
    onChange: onChange,
    onBlur: stopEditing,
    className: "editor-post-text-editor",
    id: `post-content-${instanceId}`,
    placeholder: (0, _i18n.__)('Start writing with text or HTML')
  }));
}
//# sourceMappingURL=index.js.map