scripts/core/editor3/components/UnstyledWrapper.tsx
import React from 'react';
import PropTypes from 'prop-types';
import BaseUnstyledComponent from './BaseUnstyledComponent';
/**
* Custom wrapper for draft unstyled blocks.
*
* It allows moving block above existing blocks, adding a dropzone
* above first unstyled block.
*/
class UnstyledWrapper extends BaseUnstyledComponent {
getDropBlockKey: any;
constructor(props) {
super(props);
this.dropInsertionMode = 'before';
this.getDropBlockKey = () => this.props.children[0].key;
}
render() {
const className =
'unstyled ' + (this.state.over ? 'unstyled--over' : '');
const {children} = this.props;
const childrenWithProps = React.Children.map(children, (child: any) =>
React.cloneElement(child, {editorProps: this.props.editorProps}),
);
return (
<div className={className} ref={(div) => (this.div = div)}>
{childrenWithProps}
</div>
);
}
}
UnstyledWrapper.propTypes = {
dispatch: PropTypes.func.isRequired,
children: PropTypes.array,
editorProps: PropTypes.object,
};
export default UnstyledWrapper;