Single Line Mode Monaco Editor for Vue

Single line mode monaco editor for Vue.

Installation

# npm
npm install vue-monaco-singleline

# or yarn
yarn add vue-monaco-singleline

Online Demo

• Simple
• Change Height, Width, FontSize
• Custom Language and Theme

Using inside Vue Component

<template>
  <div id="app">
    <monaco-singleline v-model="value" :options="options" />
  </div>
</template>

<script>
import MonacoSingleline from 'vue-monaco-singleline'
export default {
  name: 'App',
  components: {
    MonacoSingleline,
  },
  data() {
    return {
      value: 'abc 123',
      options: {
        // Monaco Editor Options
        // all options: https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.istandaloneeditorconstructionoptions.html
      },
    }
  },
  methods: {
    onChange(value) {
      console.log(value)
    },
  },
}
</script>

Want normal language highlight

First of all, install npm package if want normal language highlight:

# npm
npm install -D [email protected]

# or yarn
yarn add -D [email protected]

Then:

If using [Vue CLI], can add to vue.config.js:

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')

module.exports = {
  chainWebpack: config => {
    config.plugin('monaco-editor').use(MonacoWebpackPlugin, [
      {
        // Languages are loaded on demand at runtime
        languages: ['json', 'javascript', 'html', 'xml'],
      },
    ])
  },
}

If also want Javascript autocompletion, add typescript to languages, because typescript is the instantiator of javascript:

see: Some languages share the same web worker. If one of the following languages is included, you must also include the language responsible for instantiating their shared worker

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')

module.exports = {
  chainWebpack: config => {
    config.plugin('monaco-editor').use(MonacoWebpackPlugin, [
      {
        // Languages are loaded on demand at runtime
        languages: ['json', 'typescript', 'javascript', 'html', 'xml'],
      },
    ])
  },
}

If using with Webpack only, see here.

Props

Support full props of monaco-editor-vue.

• value: editor content
  • default: ''
• v-model: bind editor content (should not use value at this time)
• placeholder: placeholder
• width: width of monaco editor (not this component)
  • Type: Number(px) or String(same as css width)
  • default: 100%
  • should not use this prop in most case, should set style or class to this component <monaco-singleline>
• height: height of monaco editor (not this component)
  • Type: Number(px) or String(same as css width)
  • default: 21（px）
• diffEditor: monaco editor diff mode
  • Type: 'Boolean'
  • default: false
  • example: TODO: codesandbox
• original original conent of editor, only works when diffEditor is true
  • in contrast, value or v-model is the modified content
• language the initial language of the auto created model in the editor. Defaults to javascript.
  • default: 'javascript'
  • notice: no any highlight or autocompletion, if not adding MonacoWebpackPlugin to vue.config.js
• theme the theme of the editor. Defaults to vs.
  • default: vs
  • all out-of-the-box themes: vs, vs-dark, hc-black, see here
• options refer to Monaco interface IEditorConstructionOptions.
  • default: see DefaultOptions inside source file monaco-singleline.vue
• editorBeforeMount(monaco) The function called before the editor mounted (similar to beforeMount of Vue).
  • editorBeforeMount is Vue props not event, should be used like :editorBeforeMount not @editorBeforeMount
• editorMounted(editor, monaco) The function called when the editor has been mounted (similar to mounted of Vue).
  • editorMounted is Vue props not event, should use like :editorMounted

Default Options

See DefaultOptions inside source file monaco-singleline.vue.

Events

• change(newValue, event) an event emitted when the content of the current model has changed.
  • this event will not emit before value change, if want to, should make monaco editor instance to listen onKeyUp event or so. seet this demo

More events should be found on monaco editor events, and be set on editorMounted.

Methods

• focus
  • example: this.$refs.myEditor.focus(), or this.editor.focus()(on monaco instance)

More methods should be found on monaco editor methods, and be used on monaco editor instance(not this component's ref).

Height and Width

When set option automaticLayout: true(already default), Monaco has a built-in auto resize to parent container functionality.

It is highly recommended that change this component height and width by CSS on this component.

Custom Style

It is highly recommended that custom this component by override CSS style inside.

See Vue Deep Selectors

• wrapper class: monaco-singleline
  • controls padding to border e.t.c
• placeholder class: placeholder

Font Size and height

Online Demo here.

If want to change font size, you should change:

• change monaco editor options fontSize
• and, change the height prop to a suitable value

You may need some art to fine tuning the best you like.

Q: Why not auto ?

A: monaco editor will fit to parent element size, not parent fit to monaco editor.

ReadOnly mode

<monaco-singleline readOnly />

Will:

• disable editing
• hide edit cursor

Development

npm:

# install dependencies
npm install

# run local example app
npm run serve

# compiles and minifies for production
npm run build

yarn:

# install dependencies
yarn

# run local example app
yarn serve

# compiles and minifies for production
yarn build

Useful Resources

• monaco-editor-vue
• monaco editor create options
• monaco editor issue: Single line mode
• monaco editor issue: Is there any way to switch to one-line mode?

Thanks

monaco-editor-vue