<commit_before>import React, { Component, PropTypes } from 'react';
import { DraggableCore } from 'react-draggable';
import 'react-resizable/css/styles.css';

const Cover = ({ children, style }) => (
  <div style={{ backgroundColor: 'black', position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', zIndex: 3 }}>{children}</div>
);

export default options => Block => {
  const { ratio, relative, coverOnResize } = options;
  return class ResizeableDecorator extends Component {
    static propTypes = {
      getData: PropTypes.func,
      setData: PropTypes.func,
      editor: PropTypes.object,
      style: PropTypes.object,
    }
    state = {
      resize: false,
      width: null,
      height: null,
    };
    getSize = (args = {}) => {
      const { getData } = this.props;
      const width = args.width || this.state.width || getData('width', 200);
      const height = args.height || this.state.height || getData('height', 200);
      return {
        width,
        height: ratio ? (width / ratio) : height,
      };
    }
    onResizeStart = () => {
      this.setState({ resize: true, ...this.getSize() });
    }
    onResizeStop = (event, { node, deltaX, deltaY }) => {
      const { setData } = this.props;
      const width = this.state.width + deltaX;
      const height = this.state.height + deltaY;
      setData({ width, height });
      this.setState({ resize: false, width: null, height: null });
    }
    onResize = (event, { node, deltaX, deltaY }) => {
      const width = this.state.width + deltaX;
      const height = this.state.height + deltaY;
      this.setState(this.getSize({ width, height }));
    }
    render() {
      const { editor } = this.props;
      const { resize } = this.state;
      const { width, height } = this.getSize();
      const style = {
        ...this.props.style,
        height: `${height}px`,
        width: `${width}px`,
      };

      const children = [
        this.props.children,
        resize && coverOnResize ? <Cover key="resizableCover" style={style} children={children} /> : null,
        <DraggableCore
          key="resizableHandle"
          onStop={this.onResizeStop}
          onStart={this.onResizeStart}
          onDrag={this.onResize}
        >
          <span className="react-resizable-handle" />
        </DraggableCore>
      ];

      const inner = <Block {...this.props} style={style} children={children} />;

      if (editor.readOnly) return inner;
      return inner;
    }
  };<commit_msg>fix readOnly in resize deco<commit_after>import React, { Component, PropTypes } from 'react';
import { DraggableCore } from 'react-draggable';
import 'react-resizable/css/styles.css';

const Cover = ({ children, style }) => (
  <div style={{ backgroundColor: 'black', position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', zIndex: 3 }}>{children}</div>
);

export default options => Block => {
  const { ratio, relative, coverOnResize } = options;
  return class ResizeableDecorator extends Component {
    static propTypes = {
      getData: PropTypes.func,
      setData: PropTypes.func,
      editor: PropTypes.object,
      style: PropTypes.object,
    }
    state = {
      resize: false,
      width: null,
      height: null,
    };
    getSize = (args = {}) => {
      const { getData } = this.props;
      const width = args.width || this.state.width || getData('width', 200);
      const height = args.height || this.state.height || getData('height', 200);
      return {
        width,
        height: ratio ? (width / ratio) : height,
      };
    }
    onResizeStart = () => {
      this.setState({ resize: true, ...this.getSize() });
    }
    onResizeStop = (event, { node, deltaX, deltaY }) => {
      const { setData } = this.props;
      const width = this.state.width + deltaX;
      const height = this.state.height + deltaY;
      setData({ width, height });
      this.setState({ resize: false, width: null, height: null });
    }
    onResize = (event, { node, deltaX, deltaY }) => {
      const width = this.state.width + deltaX;
      const height = this.state.height + deltaY;
      this.setState(this.getSize({ width, height }));
    }
    render() {
      const { editor } = this.props;
      const { resize } = this.state;
      const { width, height } = this.getSize();
      const style = {
        ...this.props.style,
        height: `${height}px`,
        width: `${width}px`,
      };

      const children = editor.readOnly ? this.props.children : [
        this.props.children,
        resize && coverOnResize ? <Cover key="resizableCover" style={style} children={children} /> : null,
        <DraggableCore
          key="resizableHandle"
          onStop={this.onResizeStop}
          onStart={this.onResizeStart}
          onDrag={this.onResize}
        >
          <span className="react-resizable-handle" />
        </DraggableCore>
      ];

      return <Block {...this.props} style={style} children={children} />;
    }
  };
{'fraction_non_alphanumeric': 0.15191651615492674, 'fraction_numerical': 0.006020469596628537, 'mean_word_length': 2.451523545706371, 'pattern_counts': {'":': 0, '<': 17, '<?xml version=': 0, '>': 31, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6863325', 'n_tokens_mistral': 1521, 'n_tokens_neox': 1513, 'n_words': 365}