@wordpress/block-library/build/freeform/modal.js

Block library for the WordPress editor.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = ModalEdit;
var _blockEditor = require("@wordpress/block-editor");
var _components = require("@wordpress/components");
var _element = require("@wordpress/element");
var _i18n = require("@wordpress/i18n");
var _data = require("@wordpress/data");
var _icons = require("@wordpress/icons");
var _compose = require("@wordpress/compose");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

function ModalAuxiliaryActions({
  onClick,
  isModalFullScreen
}) {
  // 'small' to match the rules in editor.scss.
  const isMobileViewport = (0, _compose.useViewportMatch)('small', '<');
  if (isMobileViewport) {
    return null;
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
    size: "compact",
    onClick: onClick,
    icon: _icons.fullscreen,
    isPressed: isModalFullScreen,
    label: isModalFullScreen ? (0, _i18n.__)('Exit fullscreen') : (0, _i18n.__)('Enter fullscreen')
  });
}
function ClassicEdit(props) {
  const styles = (0, _data.useSelect)(select => select(_blockEditor.store).getSettings().styles);
  (0, _element.useEffect)(() => {
    const {
      baseURL,
      suffix,
      settings
    } = window.wpEditorL10n.tinymce;
    window.tinymce.EditorManager.overrideDefaults({
      base_url: baseURL,
      suffix
    });
    window.wp.oldEditor.initialize(props.id, {
      tinymce: {
        ...settings,
        setup(editor) {
          editor.on('init', () => {
            const doc = editor.getDoc();
            styles.forEach(({
              css
            }) => {
              const styleEl = doc.createElement('style');
              styleEl.innerHTML = css;
              doc.head.appendChild(styleEl);
            });
          });
        }
      }
    });
    return () => {
      window.wp.oldEditor.remove(props.id);
    };
  }, []);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("textarea", {
    ...props
  });
}
function ModalEdit(props) {
  const {
    clientId,
    attributes: {
      content
    },
    setAttributes,
    onReplace
  } = props;
  const [isOpen, setOpen] = (0, _element.useState)(false);
  const [isModalFullScreen, setIsModalFullScreen] = (0, _element.useState)(false);
  const id = `editor-${clientId}`;
  const onClose = () => content ? setOpen(false) : onReplace([]);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.BlockControls, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarGroup, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarButton, {
          onClick: () => setOpen(true),
          children: (0, _i18n.__)('Edit')
        })
      })
    }), content && /*#__PURE__*/(0, _jsxRuntime.jsx)(_element.RawHTML, {
      children: content
    }), (isOpen || !content) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Modal, {
      title: (0, _i18n.__)('Classic Editor'),
      onRequestClose: onClose,
      shouldCloseOnClickOutside: false,
      overlayClassName: "block-editor-freeform-modal",
      isFullScreen: isModalFullScreen,
      className: "block-editor-freeform-modal__content",
      headerActions: /*#__PURE__*/(0, _jsxRuntime.jsx)(ModalAuxiliaryActions, {
        onClick: () => setIsModalFullScreen(!isModalFullScreen),
        isModalFullScreen: isModalFullScreen
      }),
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ClassicEdit, {
        id: id,
        defaultValue: content
      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Flex, {
        className: "block-editor-freeform-modal__actions",
        justify: "flex-end",
        expanded: false,
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
            __next40pxDefaultSize: true,
            variant: "tertiary",
            onClick: onClose,
            children: (0, _i18n.__)('Cancel')
          })
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
            __next40pxDefaultSize: true,
            variant: "primary",
            onClick: () => {
              setAttributes({
                content: window.wp.oldEditor.getContent(id)
              });
              setOpen(false);
            },
            children: (0, _i18n.__)('Save')
          })
        })]
      })]
    })]
  });
}
//# sourceMappingURL=modal.js.map