@wordpress/editor/build/components/error-boundary/index.js

Enhanced block editor for WordPress posts.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _element = require("@wordpress/element");
var _i18n = require("@wordpress/i18n");
var _components = require("@wordpress/components");
var _data = require("@wordpress/data");
var _compose = require("@wordpress/compose");
var _hooks = require("@wordpress/hooks");
var _store = require("../../store");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function getContent() {
  try {
    // While `select` in a component is generally discouraged, it is
    // used here because it (a) reduces the chance of data loss in the
    // case of additional errors by performing a direct retrieval and
    // (b) avoids the performance cost associated with unnecessary
    // content serialization throughout the lifetime of a non-erroring
    // application.
    return (0, _data.select)(_store.store).getEditedPostContent();
  } catch (error) {}
}
function CopyButton({
  text,
  children,
  variant = 'secondary'
}) {
  const ref = (0, _compose.useCopyToClipboard)(text);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
    __next40pxDefaultSize: true,
    variant: variant,
    ref: ref,
    children: children
  });
}
class ErrorBoundary extends _element.Component {
  constructor() {
    super(...arguments);
    this.state = {
      error: null
    };
  }
  componentDidCatch(error) {
    (0, _hooks.doAction)('editor.ErrorBoundary.errorLogged', error);
  }
  static getDerivedStateFromError(error) {
    return {
      error
    };
  }
  render() {
    const {
      error
    } = this.state;
    const {
      canCopyContent = false
    } = this.props;
    if (!error) {
      return this.props.children;
    }
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
      className: "editor-error-boundary",
      alignment: "baseline",
      spacing: 4,
      justify: "space-between",
      expanded: false,
      wrap: true,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalText, {
        as: "p",
        children: (0, _i18n.__)('The editor has encountered an unexpected error.')
      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
        expanded: false,
        children: [canCopyContent && /*#__PURE__*/(0, _jsxRuntime.jsx)(CopyButton, {
          text: getContent,
          children: (0, _i18n.__)('Copy contents')
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(CopyButton, {
          variant: "primary",
          text: error?.stack,
          children: (0, _i18n.__)('Copy error')
        })]
      })]
    });
  }
}

/**
 * ErrorBoundary is used to catch JavaScript errors anywhere in a child component tree, log those errors, and display a fallback UI.
 *
 * It uses the lifecycle methods getDerivedStateFromError and componentDidCatch to catch errors in a child component tree.
 *
 * getDerivedStateFromError is used to render a fallback UI after an error has been thrown, and componentDidCatch is used to log error information.
 *
 * @class ErrorBoundary
 * @augments Component
 */
var _default = exports.default = ErrorBoundary;
//# sourceMappingURL=index.js.map