dubbo-admin-ui/src/components/public/AceEditor.vue

<!--
  - Licensed to the Apache Software Foundation (ASF) under one or more
  - contributor license agreements.  See the NOTICE file distributed with
  - this work for additional information regarding copyright ownership.
  - The ASF licenses this file to You under the Apache License, Version 2.0
  - (the "License"); you may not use this file except in compliance with
  - the License.  You may obtain a copy of the License at
  -
  -     http://www.apache.org/licenses/LICENSE-2.0
  -
  - Unless required by applicable law or agreed to in writing, software
  - distributed under the License is distributed on an "AS IS" BASIS,
  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  - See the License for the specific language governing permissions and
  - limitations under the License.
  -->

<!--
Usage:
  <template>
    <ace-editor v-model="content" width="100%" height="200px" lang="javascript" :theme="theme" />
  </template>
  <script>
  import AceEditor from '@/components/AceEditor'
  export default {
    components: {
      AceEditor
    },
    data: () => ({
      content: 'console.log("Hello Ace Editor!")',
      theme: 'dawn'
    })
  }
</script>
-->
<template>
  <div :style="{height: height, width: width}"></div>
</template>

<script>
import brace from 'brace'

export default {
  name: 'ace-editor',
  props: {
    value: String,
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    },
    lang: {
      type: String,
      default: 'yaml'
    },
    theme: {
      type: String,
      default: 'monokai'
    },
    readonly: {
      type: Boolean,
      default: false
    },
    fontsize: {
      type: Number,
      default: 14
    },
    tabsize: {
      type: Number,
      default: 2
    },
    overrideValueHistory: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      $ace: null,
      _content: ''
    }
  },
  watch: {
    value (newVal, oldVal) {
      if (newVal !== oldVal) {
        if (this._content !== newVal) {
          this._content = newVal
          if (this.overrideValueHistory) {
            this.$ace.getSession().setValue(newVal)
          } else {
            this.$ace.setValue(newVal, 1)
          }
        }
      }
    },
    lang (newVal, oldVal) {
      if (newVal !== oldVal && newVal) {
        require(`brace/mode/${newVal}`)
        this.$ace.getSession().setMode(`ace/mode/${newVal}`)
      }
    },
    theme (newVal, oldVal) {
      if (newVal !== oldVal && newVal) {
        require(`brace/theme/${newVal}`)
        this.$ace.setTheme(`ace/theme/${newVal}`)
      }
    },
    readonly (newVal, oldVal) {
      if (newVal !== oldVal) {
        this.$ace.setReadOnly(newVal)
      }
    },
    fontsize (newVal, oldVal) {
      if (newVal !== oldVal) {
        this.$ace.setFontSize(newVal)
      }
    }
  },
  mounted () {
    this.$ace = brace.edit(this.$el)
    this.$ace.$blockScrolling = Infinity
    let {
        lang,
        theme,
        readonly,
        fontsize,
        tabsize,
        overrideValueHistory
      } = this

    this.$emit('init', this.$ace)

    let session = this.$ace.getSession()

    require(`brace/mode/${lang}`)
    session.setMode(`ace/mode/${lang}`)
    session.setTabSize(tabsize)
    session.setUseSoftTabs(true)
    session.setUseWrapMode(true)

    if (overrideValueHistory) {
      session.setValue(this.value)
    } else {
      this.$ace.setValue(this.value, 1)
    }

    require(`brace/theme/${theme}`)
    this.$ace.setTheme(`ace/theme/${theme}`)
    this.$ace.setReadOnly(readonly)
    this.$ace.setFontSize(fontsize)
    this.$ace.setShowPrintMargin(false)

    this.$ace.on('change', () => {
      var aceValue = this.$ace.getValue()
      this.$emit('input', aceValue)
      this._content = aceValue
    })
  }
}
</script>