<commit_before><template>
  <div>
    <span class="display" @mousedown="mousedown()" @mouseup="mouseup()">
      <slot v-if="isDisplayMode" name="display" />
    </span>
    <span v-if="isEditMode" class="editor" ref="editorWrap">
      <input v-if="editor === 'textInput'"
        type="text"
        :placeholder="placeholder"
        :value="value"
        @blur="submitEditor"
        @keypress.enter="$event.target.blur()"
        ref="editor" />
      <markdown-editor v-if="editor === 'markdownEditor'"
        :initialValue="value"
        @blur="submitEditor"
        ref="editor" />
    </span>
  </div>
</template>

<script>
import MarkdownEditor from './MarkdownEditor'
import { defer } from 'lodash'

export default {
  components: {
    MarkdownEditor,
  },

  props: {
    editor: {
      type: String,
      required: false,
      default: 'textInput'
    },
    placeholder: String,
    value: String,
  },

  created() {
    this.$on('inline-editor:mode-changed', () => {
      if (this.isDisplayMode)
        return

      defer(() => {
        if (this.$refs.editor && this.$refs.editor.focus)
          this.$refs.editor.focus()
      })
    })
  },

  destroyed() {
    this.removeCustomBlurEventListener()
  },

  data() {
    return {
      mode: 'display',
      longClick: false
    }
  },

  computed: {
    isDisplayMode() {
      return this.mode === 'display'
    },

    isEditMode() {
      return this.mode === 'edit'
    },
  },

  methods: {
    mousedown() {
      this.longClickTimer = setTimeout(() => this.longClick = true, 250)
    },

    mouseup() {
      clearTimeout(this.longClickTimer)
      if (!this.longClick) {
        this.changeMode()
      }
      this.longClick = false
    },

    changeMode() {
      if (this.isDisplayMode) {
        this.mode = 'edit'
        this.addCustomBlurEventListener()
      } else {
        this.mode = 'display'
        this.removeCustomBLurEventListener()
      }
      this.longClick = false
      this.$emit('inline-editor:mode-changed')
    },

    submitEditor() {
      this.$emit('editor-changed', this.$refs.editor.value)
      this.changeMode()
    },

    customBlurClick(e) {
      if (this.isDisplayMode)
        return

      if (!this.$el.contains(e.target)) {
        this.submitEditor()
      }
    },

    addCustomBlurEventListener() {
      document.addEventListener('click', this.customBlurClick)
    },

    removeCustomBlurEventListener() {
      document.removeEventListener('click', this.customBlurClick)
    },<commit_msg>Fix typo<commit_after><template>
  <div>
    <span class="display" @mousedown="mousedown()" @mouseup="mouseup()">
      <slot v-if="isDisplayMode" name="display" />
    </span>
    <span v-if="isEditMode" class="editor" ref="editorWrap">
      <input v-if="editor === 'textInput'"
        type="text"
        :placeholder="placeholder"
        :value="value"
        @blur="submitEditor"
        @keypress.enter="$event.target.blur()"
        ref="editor" />
      <markdown-editor v-if="editor === 'markdownEditor'"
        :initialValue="value"
        @blur="submitEditor"
        ref="editor" />
    </span>
  </div>
</template>

<script>
import MarkdownEditor from './MarkdownEditor'
import { defer } from 'lodash'

export default {
  components: {
    MarkdownEditor,
  },

  props: {
    editor: {
      type: String,
      required: false,
      default: 'textInput'
    },
    placeholder: String,
    value: String,
  },

  created() {
    this.$on('inline-editor:mode-changed', () => {
      if (this.isDisplayMode)
        return

      defer(() => {
        if (this.$refs.editor && this.$refs.editor.focus)
          this.$refs.editor.focus()
      })
    })
  },

  destroyed() {
    this.removeCustomBlurEventListener()
  },

  data() {
    return {
      mode: 'display',
      longClick: false
    }
  },

  computed: {
    isDisplayMode() {
      return this.mode === 'display'
    },

    isEditMode() {
      return this.mode === 'edit'
    },
  },

  methods: {
    mousedown() {
      this.longClickTimer = setTimeout(() => this.longClick = true, 250)
    },

    mouseup() {
      clearTimeout(this.longClickTimer)
      if (!this.longClick) {
        this.changeMode()
      }
      this.longClick = false
    },

    changeMode() {
      if (this.isDisplayMode) {
        this.mode = 'edit'
        this.addCustomBlurEventListener()
      } else {
        this.mode = 'display'
        this.removeCustomBlurEventListener()
      }
      this.longClick = false
      this.$emit('inline-editor:mode-changed')
    },

    submitEditor() {
      this.$emit('editor-changed', this.$refs.editor.value)
      this.changeMode()
    },

    customBlurClick(e) {
      if (this.isDisplayMode)
        return

      if (!this.$el.contains(e.target)) {
        this.submitEditor()
      }
    },

    addCustomBlurEventListener() {
      document.addEventListener('click', this.customBlurClick)
    },

    removeCustomBlurEventListener() {
      document.removeEventListener('click', this.customBlurClick)
    },
{'fraction_non_alphanumeric': 0.15497133820913225, 'fraction_numerical': 0.0011860051393556038, 'mean_word_length': 2.298565840938722, 'pattern_counts': {'":': 0, '<': 27, '<?xml version=': 0, '>': 33, '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': '7651048', 'n_tokens_mistral': 1623, 'n_tokens_neox': 1556, 'n_words': 257}