@wordpress/block-library
Version:
Block library for the WordPress editor.
131 lines • 4.07 kB
JavaScript
/**
* WordPress dependencies
*/
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 { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
function ModalAuxiliaryActions({
onClick,
isModalFullScreen
}) {
// 'small' to match the rules in editor.scss.
const isMobileViewport = useViewportMatch('small', '<');
if (isMobileViewport) {
return null;
}
return /*#__PURE__*/_jsx(Button, {
size: "compact",
onClick: 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
});
}
export default 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: isModalFullScreen
}),
children: [/*#__PURE__*/_jsx(ClassicEdit, {
id: 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')
})
})]
})]
})]
});
}
//# sourceMappingURL=modal.js.map