<commit_before><template>
  <div class="editor">
    <codemirror ref="myEditor"
                v-model="mdContent"
                :options="editorOptions"
                @change="onEditorCodeChange">
    </codemirror>
  </div>
</template>

<script>
import { codemirror } from 'vue-codemirror';
import elementUtils from 'src/helpers/elementUtils';
import 'codemirror/keymap/sublime';

let codeMirrorInstance = null;

export default {
  components: {
    codemirror
  },
  props: ['value', 'scrollPosition'],
  data() {
    return {
      isBeingLoaded: true,
      mdContent: this.value,
      editorOptions: {
        tabSize: 4,
        mode: 'text/x-markdown',
        theme: 'base16-dark',
        lineNumbers: true,
        lineWrapping: true,
        line: true,
        keyMap: 'sublime',
        foldGutter: true,
        gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
        styleSelectedText: true,
        highlightSelectionMatches: { showToken: /\w/, annotateScrollbar: true },
      },
      // Scroll related functions
      localScrollPosition: 1,
      canUserScroll: true,
      canOtherScroll: true,
      enableUserScrollListener: () => { this.canUserScroll = true; },
      disableUserScrollListener: () => { this.canUserScroll = false; },
      userScrollListeners: [],
      enableOtherScrolledListener: () => { this.canOtherScroll = true; },
      disableOtherScrolledListener: () => { this.canOtherScroll = false; },
      otherScrollListeners: [],
      /**
       * This function is called user is scrolling the component
       */
      broadcastNewScrollPosition: (cmInstance) => {
        // If it is being scrolled by other component,
        // no need to broadcast scroll position again
        if (!this.canUserScroll) return;

        // Prevent programatic updating by own component
        this.disableOtherScrolledListener();
        this.userScrollListeners.forEach(clearTimeout);

        // Retrieve scroll information for emitting
        const cmScrollTop = cmInstance.getScrollInfo().top;
        const newLinePosition = cmInstance.lineAtHeight(cmScrollTop, 'local') + 1;
        this.$emit('updateViewerScrollPosition', newLinePosition);

        // Welcome programatic updating by own component again after a while
        this.userScrollListeners.push(setTimeout(this.enableOtherScrolledListener, 1000));
      },
      /**
       * This function is called when the component receive scroll update signal
       * from other component
       */
      updateScrollPosition: (position) => {
        // If user is scrolling this component, disable scroll manipulation
        if (!this.canOtherScroll) return;
        if (this.localScrollPosition === position) return;

        // Prevent scroll position listener from manually adjusting the scroll height again
        this.disableUserScrollListener();
        this.userScrollListeners.forEach(clearTimeout);

        // Retrieve scroll information for setting height
        const destinationPosition = codeMirrorInstance.heightAtLine(position - 1, 'local');
        codeMirrorInstance.scrollTo(null, destinationPosition);

        // listener for scroll position from
        this.userScrollListeners.push(setTimeout(this.enableUserScrollListener, 1000));
      }
    };
  },
  methods: {
    onEditorCodeChange(newCode) {
      this.$emit('input', newCode);
    },
  },
  watch: {
    value(data) {
      if (this.isBeingLoaded) {
        this.mdContent = data;
        codeMirrorInstance.setCursor(data.length);
        this.isBeingLoaded = false;
      }
    },
    scrollPosition(position) {
      this.updateScrollPosition(position);
    }
  },
  mounted() {
    codeMirrorInstance = this.$refs.myEditor.editor;
    codeMirrorInstance.on('scroll', this.broadcastNewScrollPosition);
  }
};

</script>

<style scoped lang="scss">
@import 'src/assets/styles/variables.scss';

.editor {
  box-shadow: 4px 0 12px 0px rgba(0, 0, 0, 0.3);
  height: calc(100vh - #{$content-navbar-height});
}
</style>

<style lang="scss">
.editor {
  .CodeMirror {
    height: 100%;
    line-height: 140%;
    font-size: 16px;
  }
}
</style>
<commit_msg>Remove unused dependency for editor<commit_after><template>
  <div class="editor">
    <codemirror ref="myEditor"
                v-model="mdContent"
                :options="editorOptions"
                @change="onEditorCodeChange">
    </codemirror>
  </div>
</template>

<script>
import { codemirror } from 'vue-codemirror';
import 'codemirror/keymap/sublime';

let codeMirrorInstance = null;

export default {
  components: {
    codemirror
  },
  props: ['value', 'scrollPosition'],
  data() {
    return {
      isBeingLoaded: true,
      mdContent: this.value,
      editorOptions: {
        tabSize: 4,
        mode: 'text/x-markdown',
        theme: 'base16-dark',
        lineNumbers: true,
        lineWrapping: true,
        line: true,
        keyMap: 'sublime',
        foldGutter: true,
        gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
        styleSelectedText: true,
        highlightSelectionMatches: { showToken: /\w/, annotateScrollbar: true },
      },
      // Scroll related functions
      localScrollPosition: 1,
      canUserScroll: true,
      canOtherScroll: true,
      enableUserScrollListener: () => { this.canUserScroll = true; },
      disableUserScrollListener: () => { this.canUserScroll = false; },
      userScrollListeners: [],
      enableOtherScrolledListener: () => { this.canOtherScroll = true; },
      disableOtherScrolledListener: () => { this.canOtherScroll = false; },
      otherScrollListeners: [],
      /**
       * This function is called user is scrolling the component
       */
      broadcastNewScrollPosition: (cmInstance) => {
        // If it is being scrolled by other component,
        // no need to broadcast scroll position again
        if (!this.canUserScroll) return;

        // Prevent programatic updating by own component
        this.disableOtherScrolledListener();
        this.userScrollListeners.forEach(clearTimeout);

        // Retrieve scroll information for emitting
        const cmScrollTop = cmInstance.getScrollInfo().top;
        const newLinePosition = cmInstance.lineAtHeight(cmScrollTop, 'local') + 1;
        this.$emit('updateViewerScrollPosition', newLinePosition);

        // Welcome programatic updating by own component again after a while
        this.userScrollListeners.push(setTimeout(this.enableOtherScrolledListener, 1000));
      },
      /**
       * This function is called when the component receive scroll update signal
       * from other component
       */
      updateScrollPosition: (position) => {
        // If user is scrolling this component, disable scroll manipulation
        if (!this.canOtherScroll) return;
        if (this.localScrollPosition === position) return;

        // Prevent scroll position listener from manually adjusting the scroll height again
        this.disableUserScrollListener();
        this.userScrollListeners.forEach(clearTimeout);

        // Retrieve scroll information for setting height
        const destinationPosition = codeMirrorInstance.heightAtLine(position - 1, 'local');
        codeMirrorInstance.scrollTo(null, destinationPosition);

        // listener for scroll position from
        this.userScrollListeners.push(setTimeout(this.enableUserScrollListener, 1000));
      }
    };
  },
  methods: {
    onEditorCodeChange(newCode) {
      this.$emit('input', newCode);
    },
  },
  watch: {
    value(data) {
      if (this.isBeingLoaded) {
        this.mdContent = data;
        codeMirrorInstance.setCursor(data.length);
        this.isBeingLoaded = false;
      }
    },
    scrollPosition(position) {
      this.updateScrollPosition(position);
    }
  },
  mounted() {
    codeMirrorInstance = this.$refs.myEditor.editor;
    codeMirrorInstance.on('scroll', this.broadcastNewScrollPosition);
    console.log(codeMirrorInstance)
  }
};

</script>

<style scoped lang="scss">
@import 'src/assets/styles/variables.scss';

.editor {
  box-shadow: 4px 0 12px 0px rgba(0, 0, 0, 0.3);
  height: calc(100vh - #{$content-navbar-height});
}
</style>

<style lang="scss">
.editor {
  .CodeMirror {
    height: 100%;
    line-height: 140%;
    font-size: 16px;
  }
}
</style>

{'fraction_non_alphanumeric': 0.11273033843189209, 'fraction_numerical': 0.008430687703239792, 'mean_word_length': 2.803939532753092, 'pattern_counts': {'":': 0, '<': 27, '<?xml version=': 0, '>': 39, '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': '412202', 'n_tokens_mistral': 2411, 'n_tokens_neox': 2288, 'n_words': 537}