<commit_before><style lang=scss scoped>

@import '../styles/variables.scss';

.virtual-input {
  font-size: 1em;

  overflow: hidden;
  border: 1px solid $grey-50;
  border-radius: 5px;
}

.input {
  padding: 0.6em 0.55em;
  min-width: 500px;

  font-size: 1.6em;
  font-family: 'Menlo', monospace;
  font-weight: 100;

  height: 30px;


  outline: none;
}

</style>

<template>
  <div class="virtual-input">
    <div class="input" contenteditable="true">
    </div>
  </div>
</template>

<script>
export default {

  data: () => ({
    value: '',
  }),

  props: {
    placeholder: String,
  },

  mounted () {
    // Get the input element from the children
    this.inputEl = Array.from(this.$el.children)[0]

    this.addEventListeners()
  },

  methods: {

    changeValue (event) {
      this.value = event.target.innerText
    },

    addEventListeners () {
      this.inputEl.addEventListener('input', event => this.changeValue(event))
    },

  },

}
</script><commit_msg>Replace #<commit_after><style lang=scss scoped>

@import '../styles/variables.scss';

.virtual-input {
  font-size: 1em;

  overflow: hidden;
  border: 1px solid $grey-50;
  border-radius: 5px;
}

.input {
  padding: 0.6em 0.55em;
  min-width: 500px;

  font-size: 1.6em;
  font-family: 'Menlo', monospace;
  font-weight: 100;

  height: 30px;


  outline: none;
}

</style>

<template>
  <div class="virtual-input">
    <div class="input" contenteditable="true">
    </div>
  </div>
</template>

<script>
export default {

  data: () => ({
    value: '',
  }),

  props: {
    placeholder: String,
  },

  mounted () {
    // Get the input element from the children
    this.inputEl = Array.from(this.$el.children)[0]

    this.addEventListeners()
  },

  methods: {

    changeValue (event) {
      let text = event.target.innerText

      if (text[0] === '#') {
        text = text.substring(1);
        event.target.innerHTML = '<span color="grey">#</span>${text}'
      }

      this.value = text
    },

    addEventListeners () {
      this.inputEl.addEventListener('input', event => this.changeValue(event))
    },

  },

}
</script>
{'fraction_non_alphanumeric': 0.17067421027817067, 'fraction_numerical': 0.020744931636020744, 'mean_word_length': 2.7557522123893805, 'pattern_counts': {'":': 0, '<': 25, '<?xml version=': 0, '>': 29, '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': '1533131', 'n_tokens_mistral': 810, 'n_tokens_neox': 750, 'n_words': 154}