<commit_before>import {DraftStore, QuotedHTMLParser, Utils, DOMUtils, React, ComposerExtension} from 'nylas-exports';
import {Popover} from 'nylas-component-kit';

// Using Giphy testing key for now
let giphy = require('giphy-api')('dc6zaTOxFJmzC');

export class GifSaveState extends ComposerExtension {
  static onBlur(editableNode, range, event) {
    let elem = document.getElementsByClassName('contenteditable')[0];

    if (document.getElementById('n1-gif-marker') !== null) {
      var markerOld = document.getElementById('n1-gif-marker');
      markerOld.outerHTML = '';
      delete markerOld;
    }

    let r = document.createRange();
    r.setStart(range.anchorNode, range.anchorOffset);
    r.setEnd(range.anchorNode, range.anchorOffset);
    let marker = document.createElement('span');
    marker.id = 'n1-gif-marker';
    r.insertNode(marker);
  }

  static onFocus(editableNode, range, event) {
    let elem = document.getElementsByClassName('contenteditable')[0];

    if (document.getElementById('n1-gif-marker') !== null) {
      var markerOld = document.getElementById('n1-gif-marker');
      markerOld.outerHTML = '';
      delete markerOld;
    }
  }
}

export class GifPicker extends React.Component {
  static displayName = 'GifPicker';

  static innerPropTypes = {
    selection: React.PropTypes.object
  };

  static containerStyles = {order: 2};

  constructor(props) {
    super(props);

    this.closePopover = this.closePopover.bind(this);3
    this.render = this.render.bind(this);
  }

  closePopover() {
    this.refs.popover.close();
  }

  render() {
    const button = (
      <button className="btn btn-toolbar narrow">
        Gif it!
      </button>
    );

    return (
      <Popover ref="popover" className="gif-picker" buttonComponent={button}>
        <GifBox closePopover={this.closePopover} />
      </Popover>
    );
  }
}

// Indivigual gif
class Gif extends React.Component {
  static displayName = 'Gif';

  constructor(props) {
    super(props);

    this.chooseGif = this.chooseGif.bind(this);
    this.render = this.render.bind(this);
  }

  chooseGif(event) {
    let gifUrl = this.props.gifUrl;
    let gifElem = `<span><img src="${gifUrl}"></span>`;
    let elem = document.getElementsByClassName('contenteditable')[0];

    let sel = window.getSelection();
    let marker = document.getElementById('n1-gif-marker');
    sel.setBaseAndExtent(marker, 0, marker, 0);
    document.execCommand('insertHTML', true, gifElem);
    elem.focus();
  }

  render() {
    return (
      <div className="gif" onMouseDown={this.chooseGif}
           style={{backgroundImage: 'url(' + this.props.gifUrl + ')'}}>
      </div>
    );
  }
}

// Collection of all gifs in a category
class GifList extends React.Component {<commit_msg>Use EditorAPI's save/restore selection to mark location for gif insert<commit_after>import {DraftStore, QuotedHTMLParser, Utils, DOMUtils, React, ComposerExtension} from 'nylas-exports';
import {Popover} from 'nylas-component-kit';

// Using Giphy testing key for now
let giphy = require('giphy-api')('dc6zaTOxFJmzC');

export class GifSaveState extends ComposerExtension {
  static sel = null;
  static onBlur(editor, event) {
    // Save the current selection when focus is lost
    GifSaveState.sel = editor.currentSelection().exportSelection()
  }

  static onFocus(editor, event) {
    // If we have a saved selection, restore and clear it
    // when contenteditable is focused
    if(GifSaveState.sel) {
      editor.select(GifSaveState.sel);
      GifSaveState.sel = null;
    }
  }
}

export class GifPicker extends React.Component {
  static displayName = 'GifPicker';

  static innerPropTypes = {
    selection: React.PropTypes.object
  };

  static containerStyles = {order: 2};

  constructor(props) {
    super(props);

    this.closePopover = this.closePopover.bind(this);
    this.render = this.render.bind(this);
  }

  closePopover() {
    this.refs.popover.close();
  }

  render() {
    const button = (
      <button className="btn btn-toolbar narrow">
        Gif it!
      </button>
    );

    return (
      <Popover ref="popover" className="gif-picker" buttonComponent={button}>
        <GifBox closePopover={this.closePopover} />
      </Popover>
    );
  }
}

// Individual gif
class Gif extends React.Component {
  static displayName = 'Gif';

  constructor(props) {
    super(props);

    this.chooseGif = this.chooseGif.bind(this);
    this.render = this.render.bind(this);
  }

  chooseGif(event) {
    let gifUrl = this.props.gifUrl;
    let gifElem = `<span><img src="${gifUrl}"></span>`;
    let elem = document.getElementsByClassName('contenteditable')[0];

    elem.focus();
    document.execCommand('insertHTML', true, gifElem);
  }

  render() {
    return (
      <div className="gif" onMouseDown={this.chooseGif}
           style={{backgroundImage: 'url(' + this.props.gifUrl + ')'}}>
      </div>
    );
  }
}

// Collection of all gifs in a category
class GifList extends React.Component {
{'fraction_non_alphanumeric': 0.13509192645883294, 'fraction_numerical': 0.0033972821742605914, 'mean_word_length': 3.3865030674846626, 'pattern_counts': {'":': 0, '<': 23, '<?xml version=': 0, '>': 23, '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': '329703', 'n_tokens_mistral': 1624, 'n_tokens_neox': 1587, 'n_words': 339}