<commit_before>Utils = require './utils'
SimpleMDE = require 'simplemde'
nylas = require 'nylas-exports'
React = nylas.React
ReactDOM = nylas.ReactDOM

# Keep a file-scope variable containing the contents of the markdown stylesheet.
# This will be embedded in the markdown preview iFrame, as well as the email body.
# The stylesheet is loaded when a preview component is first mounted.
markdownStylesheet = null

class MarkdownEditor extends React.Component
  @displayName: 'MarkdownEditor'

  @propTypes:
    body: React.PropTypes.string.isRequired,
    onBodyChanged: React.PropTypes.func.isRequired,

  componentDidMount: =>
    textarea = ReactDOM.findDOMNode(@refs.textarea)
    @mde = new SimpleMDE(
      element: textarea,
      hideIcons: ['fullscreen', 'side-by-side']
      showIcons: ['code', 'table']
    )
    @mde.codemirror.on "change", @_onBodyChanged
    @mde.value(Utils.getTextFromHtml(@props.body))

  componentWillReceiveProps: (newProps) =>
    currentText = Utils.getTextFromHtml(@props.body)
    if @props.body isnt newProps.body and currentText.length is 0
      @mde.value(Utils.getTextFromHtml(newProps.body))
      @mde.codemirror.execCommand('goDocEnd')

  focus: =>
    @mde.codemirror.focus()
    @mde.codemirror.execCommand('goDocEnd')

  focusAbsoluteEnd: =>
    @focus()

  getCurrentSelection: ->

  getPreviousSelection: ->

  setSelection: ->

  _onDOMMutated: ->

  _onBodyChanged: =>
    setImmediate =>
      @props.onBodyChanged(target: {value: @mde.value()})

  render: ->
    # TODO sorry
    # Add style tag to disable incompatible plugins
    <div className="markdown-editor">
      <style>
        {".btn-mail-merge { display:none; }"}
        {".btn-emoji { display:none; }"}
        {".btn-templates { display:none; }"}
        {".btn-scheduler { display:none; }"}
        {".btn-translate { display:none; }"}
        {".signature-button-dropdown { display:none; }"}
      </style>
      <textarea
        ref="textarea"
        className="editing-region"
      />
    </div>

module.exports = MarkdownEditor
<commit_msg>fix(markdown): Fix tabbing into composer<commit_after>Utils = require './utils'
SimpleMDE = require 'simplemde'
nylas = require 'nylas-exports'
React = nylas.React
ReactDOM = nylas.ReactDOM

# Keep a file-scope variable containing the contents of the markdown stylesheet.
# This will be embedded in the markdown preview iFrame, as well as the email body.
# The stylesheet is loaded when a preview component is first mounted.
markdownStylesheet = null

class MarkdownEditor extends React.Component
  @displayName: 'MarkdownEditor'

  @containerRequired: false

  @contextTypes:
    parentTabGroup: React.PropTypes.object,

  @propTypes:
    body: React.PropTypes.string.isRequired,
    onBodyChanged: React.PropTypes.func.isRequired,

  componentDidMount: =>
    textarea = ReactDOM.findDOMNode(@refs.textarea)
    @mde = new SimpleMDE(
      element: textarea,
      hideIcons: ['fullscreen', 'side-by-side']
      showIcons: ['code', 'table']
    )
    @mde.codemirror.on "change", @_onBodyChanged
    @mde.codemirror.on "keydown", @_onKeyDown
    @mde.value(Utils.getTextFromHtml(@props.body))
    @focus()

  componentWillReceiveProps: (newProps) =>
    currentText = Utils.getTextFromHtml(@props.body)
    if @props.body isnt newProps.body and currentText.length is 0
      @mde.value(Utils.getTextFromHtml(newProps.body))

  focus: =>
    @mde.codemirror.focus()

  focusAbsoluteEnd: =>
    @focus()

  getCurrentSelection: ->

  getPreviousSelection: ->

  setSelection: ->

  _onDOMMutated: ->

  _onBodyChanged: =>
    setImmediate =>
      @props.onBodyChanged(target: {value: @mde.value()})

  _onKeyDown: (codemirror, e)=>
    if e.key is 'Tab' and e.shiftKey is true
      position = codemirror.cursorCoords(true, 'local')
      isAtBeginning = position.top <= 5 and position.left <= 5
      if isAtBeginning
        # TODO i'm /really/ sorry
        # Subject is at position 2 within the tab group, the focused text area
        # in this component is at position 17, so that's why we shift back 15
        # positions.
        # This will break if the dom elements between here and the subject ever
        # change
        @context.parentTabGroup.shiftFocus(-15)
        e.preventDefault()
        e.codemirrorIgnore = true

  render: ->
    # TODO sorry
    # Add style tag to disable incompatible plugins
    <div tabIndex="1" className="markdown-editor" onFocus={@focus}>
      <style>
        {".btn-mail-merge { display:none; }"}
        {".btn-emoji { display:none; }"}
        {".btn-templates { display:none; }"}
        {".btn-scheduler { display:none; }"}
        {".btn-translate { display:none; }"}
      </style>
      <textarea
        ref="textarea"
        className="editing-region"
      />
    </div>

module.exports = MarkdownEditor

{'fraction_non_alphanumeric': 0.12091773460107483, 'fraction_numerical': 0.0024803637866887144, 'mean_word_length': 3.1932409012131715, 'pattern_counts': {'":': 0, '<': 15, '<?xml version=': 0, '>': 36, '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': '935332', 'n_tokens_mistral': 1547, 'n_tokens_neox': 1504, 'n_words': 365}