All files / src/ui DragAndDropEditor.js

74.07% Statements 20/27
40% Branches 4/10
75% Functions 6/8
76% Lines 19/25

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 851x 1x 1x 1x 1x 1x 1x 1x       118x     1x 1x     1x 1x         1x 1x         1x         1x       354x                                   20946x                                                      
import {UnControlled as CodeMirror} from 'react-codemirror2';
import React, {Component}  from 'react';
import PropTypes from 'prop-types/prop-types';
import {DropNodeTarget} from '../dnd';
import {drop, OverwriteTarget} from '../actions';
import {connect} from 'react-redux';
import SHARED from '../shared';
import {playSound, BEEP} from '../utils';
 
export default
 
@connect(null, dispatch => ({dispatch}))
 
@DropNodeTarget(function(monitor) {
  const roots = SHARED.cm.getAllMarks().filter(m => m.BLOCK_NODE_ID);
  const {x:left, y:top} = monitor.getClientOffset();
 
  // Did we get proper coordinate information from react DND?
  let droppedOn = false;
  Iif (left && top) {
    droppedOn = document.elementFromPoint(left, top);
  }
  
  // Do those coordinates land outside all roots, but still in CM whitespace?
  let isDroppedOnWhitespace = false;
  Iif (droppedOn) {
    isDroppedOnWhitespace = !roots.some(r => r.replacedWith.contains(droppedOn));
  }
 
  // If it's in a valid part of CM whitespace, translate to "insert at loc" edit
  Iif (isDroppedOnWhitespace) {
    const loc = SHARED.cm.coordsChar({left, top});
    drop(monitor.getItem(), new OverwriteTarget(loc, loc));
  // Or else beep and make it a no-op
  } else {
    playSound(BEEP);
  }
})
 
class WrappedCodeMirror extends Component {
 
  static propTypes = {
    connectDropTarget: PropTypes.func.isRequired,
  }
 
  handleDragOver = (ed, e) => {
    if (!e.target.classList.contains('CodeMirror-line')) {
      e.preventDefault();
    }
  }
 
  handleDrop = _ => {
    // :( this never fire because of the other onDrop, although this onDrop
    // has the access to the information whether we drop at the right place :(
  }
 
  render() {
    return this.props.connectDropTarget(
      <div>
        <CodeMirror
          onDrop={this.handleDrop}
          onDragOver={this.handleDragOver}
          {...this.props} />
          {/* 
            Invisible form for error logging
            NOTE(Emmanuel) we should re-evaluate this when dealing 
            with pages that have multiple block editors 
          */ }
          <iframe name="hidden_iframe" id="hidden_iframe" style={{display:'none'}}></iframe>
          <form method="post"
                action="https://docs.google.com/forms/d/e/1FAIpQLScJMw-00Kl3bxqp9NhCjijn0I8okCtVeX3VrwT7M1uTsYqBkw/formResponse"
                name="theForm" 
                id="errorLogForm" 
                target="hidden_iframe" 
                style={{display:'none'}}>
                <textarea name="entry.1311696515" id="description" defaultValue="Auto-Generated Crash Log"/>
                <textarea name="entry.1568521986" id="history"     defaultValue="default_history"/>
                <textarea name="entry.785063835"  id="exception"   defaultValue="default_exception"/>
                <input type="button" value="Submit" className="submit"/>
          </form>
      </div>
    );
  }
}