<commit_before><!--
  CODE EDITOR

  README:
    Simple code editor base on the CodeMirror library. Caution: this is a heavyweight
    component as its dependencies add around 61 KB to the overall bundle size.

  USAGE:
    <code-editor v-model="code" mode="text/javascript"/>

    <code-editor v-model="code"
      mode="application/json"
      :read-only="true"
      :match-brackets="false"
      :style-active-line="false"
    />
-->
<template>
  <textarea :readonly="readOnly"/>
</template>

<script>
import CodeMirror from 'codemirror/lib/codemirror';
import 'codemirror/mode/javascript/javascript';
// import 'codemirror/addon/lint/lint';
// import jsonlint from 'jsonlint';
// import 'codemirror/addon/lint/json-lint';
import 'codemirror/addon/edit/matchbrackets';
import 'codemirror/addon/edit/closebrackets';
import 'codemirror/addon/selection/active-line';

// window.jsonlint = jsonlint;

export default {
  name: 'CodeEditor',
  props: {
    mode: {
      type: String,
      required: true,
    },
    value: {
      type: String,
      default: '',
    },
    readOnly: {
      type: Boolean,
      default: false,
    },
    lineNumbers: {
      type: Boolean,
      default: true,
    },
    lineWrapping: {
      type: Boolean,
      default: true,
    },
    matchBrackets: {
      type: Boolean,
      default: true,
    },
    styleActiveLine: {
      type: Boolean,
      default: true,
    },
    // lint: {
    //   type: Boolean,
    //   default: true,
    // },
  },
  data: () => ({
    skipNextChangeEvent: false,
  }),
  watch: {
    // value(newVal, oldVal) {
    value(newVal) {
      const editorValue = this.editor.getValue();

      if (newVal !== editorValue) {
        this.skipNextChangeEvent = true;
        const scrollInfo = this.editor.getScrollInfo();
        this.editor.setValue(newVal);
        this.editor.scrollTo(scrollInfo.left, scrollInfo.top);
      }
    },
  },
  mounted() {
    this.editor = CodeMirror.fromTextArea(this.$el, {
      mode: this.mode,
      readOnly: this.readOnly,
      lineNumbers: this.lineNumbers,
      lineWrapping: this.lineWrapping,
      matchBrackets: this.matchBrackets,
      styleActiveLine: this.styleActiveLine,
      // lint: this.lint,
      // gutters: ['CodeMirror-lint-markers'],
      theme: 'dracula',
      tabSize: 2,
      viewportMargin: Infinity,
      autoCloseBrackets: true,
      // hint: true,
    });
    this.editor.setValue(this.value);
    this.editor.on('change', (cm) => {
      if (this.skipNextChangeEvent) {
        this.skipNextChangeEvent = false;
        return;
      }
      this.$emit('input', cm.getValue());
    });
  },
  beforeDestroy() {
    if (this.editor) {
      this.editor.toTextArea();
    }
  },
};
</script>

<style>
@import "codemirror/lib/codemirror";
@import "codemirror/theme/dracula";
/* @import "codemirror/addon/lint/lint"; */
@import "@wearegenki/ui/import";

.CodeMirror {
  min-width: 100%;
  height: auto;
  box-shadow: var(--shadow-subtle);
}
</style><commit_msg>Change code editor component to use the new style shadows<commit_after><!--
  CODE EDITOR

  README:
    Simple code editor base on the CodeMirror library. Caution: this is a heavyweight
    component as its dependencies add around 61 KB to the overall bundle size.

  USAGE:
    <code-editor v-model="code" mode="text/javascript"/>

    <code-editor v-model="code"
      mode="application/json"
      :read-only="true"
      :match-brackets="false"
      :style-active-line="false"
    />
-->
<template>
  <textarea :readonly="readOnly"/>
</template>

<script>
import CodeMirror from 'codemirror/lib/codemirror';
import 'codemirror/mode/javascript/javascript';
// import 'codemirror/addon/lint/lint';
// import jsonlint from 'jsonlint';
// import 'codemirror/addon/lint/json-lint';
import 'codemirror/addon/edit/matchbrackets';
import 'codemirror/addon/edit/closebrackets';
import 'codemirror/addon/selection/active-line';

// window.jsonlint = jsonlint;

export default {
  name: 'CodeEditor',
  props: {
    mode: {
      type: String,
      required: true,
    },
    value: {
      type: String,
      default: '',
    },
    readOnly: {
      type: Boolean,
      default: false,
    },
    lineNumbers: {
      type: Boolean,
      default: true,
    },
    lineWrapping: {
      type: Boolean,
      default: true,
    },
    matchBrackets: {
      type: Boolean,
      default: true,
    },
    styleActiveLine: {
      type: Boolean,
      default: true,
    },
    // lint: {
    //   type: Boolean,
    //   default: true,
    // },
  },
  data: () => ({
    skipNextChangeEvent: false,
  }),
  watch: {
    // value(newVal, oldVal) {
    value(newVal) {
      const editorValue = this.editor.getValue();

      if (newVal !== editorValue) {
        this.skipNextChangeEvent = true;
        const scrollInfo = this.editor.getScrollInfo();
        this.editor.setValue(newVal);
        this.editor.scrollTo(scrollInfo.left, scrollInfo.top);
      }
    },
  },
  mounted() {
    this.editor = CodeMirror.fromTextArea(this.$el, {
      mode: this.mode,
      readOnly: this.readOnly,
      lineNumbers: this.lineNumbers,
      lineWrapping: this.lineWrapping,
      matchBrackets: this.matchBrackets,
      styleActiveLine: this.styleActiveLine,
      // lint: this.lint,
      // gutters: ['CodeMirror-lint-markers'],
      theme: 'dracula',
      tabSize: 2,
      viewportMargin: Infinity,
      autoCloseBrackets: true,
      // hint: true,
    });
    this.editor.setValue(this.value);
    this.editor.on('change', (cm) => {
      if (this.skipNextChangeEvent) {
        this.skipNextChangeEvent = false;
        return;
      }
      this.$emit('input', cm.getValue());
    });
  },
  beforeDestroy() {
    if (this.editor) {
      this.editor.toTextArea();
    }
  },
};
</script>

<style>
@import "codemirror/lib/codemirror";
@import "codemirror/theme/dracula";
/* @import "codemirror/addon/lint/lint"; */
@import "@wearegenki/ui/import";

.CodeMirror {
  min-width: 100%;
  height: auto;

  @if var(--use-filter-shadow) {
    filter: drop-shadow(var(--shadow-subtle));
  } @else { /* stylelint-disable-line */
    box-shadow: var(--shadow-subtle-nofilter);
  }
}
</style>
{'fraction_non_alphanumeric': 0.14857235037909342, 'fraction_numerical': 0.0019357960961445394, 'mean_word_length': 2.5714285714285716, 'pattern_counts': {'":': 0, '<': 23, '<?xml version=': 0, '>': 27, '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': '7048541', 'n_tokens_mistral': 2112, 'n_tokens_neox': 2062, 'n_words': 400}