vue-cm/dist/cm.common.js

CodeMirror component for Vue.js

'use strict';

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var CodeMirror = _interopDefault(require('codemirror'));
var deepEqual = _interopDefault(require('fast-deep-equal'));

var CodeMirror$2 = {
  name: 'CodeMirror',

  model: {
    event: 'change'
  },

  props: {
    value: String,
    options: Object,
    preserveScrollPosition: Boolean
  },

  methods: {
    focus: function focus() {
      this.codemirror && this.codemirror.focus();
    },

    getCodeMirror: function getCodeMirror() {
      return this.codemirror
    },

    setOptionIfChanged: function setOptionIfChanged(name, newValue) {
      var oldValue = this.codemirror.getOption(name);
      if (!deepEqual(oldValue, newValue)) {
        this.codemirror.setOption(name, newValue);
      }
    }
  },

  watch: {
    value: function value(newValue) {
      if (this.codemirror && newValue !== this.codemirror.getValue()) {
        if (this.preserveScrollPosition) {
          var prevScrollPosition = this.codemirror.getScrollInfo();
          this.codemirror.setValue(newValue);
          this.codemirror.scrollTo(
            prevScrollPosition.left,
            prevScrollPosition.top
          );
        } else {
          this.codemirror.setValue(newValue);
        }
      }
    },

    options: {
      deep: true,
      handler: function handler(newValue) {
        var this$1 = this;

        if (this.codemirror) {
          // eslint-disable-next-line guard-for-in
          for (var name in newValue) {
            this$1.setOptionIfChanged(name, newValue[name]);
          }
        }
      }
    }
  },

  mounted: function mounted() {
    var this$1 = this;

    this.codemirror = CodeMirror.fromTextArea(this.$el, this.options);

    this.codemirror.on('change', function (e) { return this$1.$emit('change', e.getValue()); });
    this.codemirror.on('focus', function () { return this$1.$emit('focus'); });
    this.codemirror.on('blur', function () { return this$1.$emit('blur'); });
    this.codemirror.on('scroll', function (cm) { return this$1.$emit('scroll', cm.getScrollInfo()); });
    this.codemirror.on('cursorActivity', function (cm) { return this$1.$emit('cursorActivity', cm); });
  },

  beforeDestroy: function beforeDestroy() {
    this.codemirror && this.codemirror.toTextArea();
  },

  render: function render(h) {
    return h('textarea', null, [this.value])
  }
};

if (typeof window !== 'undefined' && window.Vue) {
  window.Vue.component(CodeMirror$2.name, CodeMirror$2);
}

module.exports = CodeMirror$2;