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

Block library for the WordPress editor.

// packages/block-library/src/freeform/modal.js
import { BlockControls, store } from "@wordpress/block-editor";
import {
  ToolbarGroup,
  ToolbarButton,
  Modal,
  Button,
  Flex,
  FlexItem
} from "@wordpress/components";
import { useEffect, useState, RawHTML } from "@wordpress/element";
import { __ } from "@wordpress/i18n";
import { useSelect } from "@wordpress/data";
import { fullscreen } from "@wordpress/icons";
import { useViewportMatch } from "@wordpress/compose";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
function ModalAuxiliaryActions({ onClick, isModalFullScreen }) {
  const isMobileViewport = useViewportMatch("small", "<");
  if (isMobileViewport) {
    return null;
  }
  return /* @__PURE__ */ jsx(
    Button,
    {
      size: "compact",
      onClick,
      icon: fullscreen,
      isPressed: isModalFullScreen,
      label: isModalFullScreen ? __("Exit fullscreen") : __("Enter fullscreen")
    }
  );
}
function ClassicEdit(props) {
  const styles = useSelect(
    (select) => select(store).getSettings().styles
  );
  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__ */ jsx("textarea", { ...props });
}
function ModalEdit(props) {
  const {
    clientId,
    attributes: { content },
    setAttributes,
    onReplace
  } = props;
  const [isOpen, setOpen] = useState(false);
  const [isModalFullScreen, setIsModalFullScreen] = useState(false);
  const id = `editor-${clientId}`;
  const onClose = () => content ? setOpen(false) : onReplace([]);
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx(BlockControls, { children: /* @__PURE__ */ jsx(ToolbarGroup, { children: /* @__PURE__ */ jsx(ToolbarButton, { onClick: () => setOpen(true), children: __("Edit") }) }) }),
    content && /* @__PURE__ */ jsx(RawHTML, { children: content }),
    (isOpen || !content) && /* @__PURE__ */ jsxs(
      Modal,
      {
        title: __("Classic Editor"),
        onRequestClose: onClose,
        shouldCloseOnClickOutside: false,
        overlayClassName: "block-editor-freeform-modal",
        isFullScreen: isModalFullScreen,
        className: "block-editor-freeform-modal__content",
        headerActions: /* @__PURE__ */ jsx(
          ModalAuxiliaryActions,
          {
            onClick: () => setIsModalFullScreen(!isModalFullScreen),
            isModalFullScreen
          }
        ),
        children: [
          /* @__PURE__ */ jsx(ClassicEdit, { id, defaultValue: content }),
          /* @__PURE__ */ jsxs(
            Flex,
            {
              className: "block-editor-freeform-modal__actions",
              justify: "flex-end",
              expanded: false,
              children: [
                /* @__PURE__ */ jsx(FlexItem, { children: /* @__PURE__ */ jsx(
                  Button,
                  {
                    __next40pxDefaultSize: true,
                    variant: "tertiary",
                    onClick: onClose,
                    children: __("Cancel")
                  }
                ) }),
                /* @__PURE__ */ jsx(FlexItem, { children: /* @__PURE__ */ jsx(
                  Button,
                  {
                    __next40pxDefaultSize: true,
                    variant: "primary",
                    onClick: () => {
                      setAttributes({
                        content: window.wp.oldEditor.getContent(
                          id
                        )
                      });
                      setOpen(false);
                    },
                    children: __("Save")
                  }
                ) })
              ]
            }
          )
        ]
      }
    )
  ] });
}
export {
  ModalEdit as default
};
//# sourceMappingURL=modal.js.map