@wordpress/editor
Version:
Enhanced block editor for WordPress posts.
89 lines (86 loc) • 2.25 kB
JavaScript
/**
* External dependencies
*/
import clsx from 'clsx';
/**
* WordPress dependencies
*/
import { useState, useRef, useCallback } from '@wordpress/element';
import { ResizableBox } from '@wordpress/components';
/**
* Internal dependencies
*/
import ResizeHandle from './resize-handle';
// Removes the inline styles in the drag handles.
import { jsx as _jsx } from "react/jsx-runtime";
const HANDLE_STYLES_OVERRIDE = {
position: undefined,
userSelect: undefined,
cursor: undefined,
width: undefined,
height: undefined,
top: undefined,
right: undefined,
bottom: undefined,
left: undefined
};
function ResizableEditor({
className,
enableResizing,
height,
children
}) {
const [width, setWidth] = useState('100%');
const resizableRef = useRef();
const resizeWidthBy = useCallback(deltaPixels => {
if (resizableRef.current) {
setWidth(resizableRef.current.offsetWidth + deltaPixels);
}
}, []);
return /*#__PURE__*/_jsx(ResizableBox, {
className: clsx('editor-resizable-editor', className, {
'is-resizable': enableResizing
}),
ref: api => {
resizableRef.current = api?.resizable;
},
size: {
width: enableResizing ? width : '100%',
height: enableResizing && height ? height : '100%'
},
onResizeStop: (event, direction, element) => {
setWidth(element.style.width);
},
minWidth: 300,
maxWidth: "100%",
maxHeight: "100%",
enable: {
left: enableResizing,
right: enableResizing
},
showHandle: enableResizing
// The editor is centered horizontally, resizing it only
// moves half the distance. Hence double the ratio to correctly
// align the cursor to the resizer handle.
,
resizeRatio: 2,
handleComponent: {
left: /*#__PURE__*/_jsx(ResizeHandle, {
direction: "left",
resizeWidthBy: resizeWidthBy
}),
right: /*#__PURE__*/_jsx(ResizeHandle, {
direction: "right",
resizeWidthBy: resizeWidthBy
})
},
handleClasses: undefined,
handleStyles: {
left: HANDLE_STYLES_OVERRIDE,
right: HANDLE_STYLES_OVERRIDE
},
children: children
});
}
export default ResizableEditor;
//# sourceMappingURL=index.js.map