egoist/vue-monaco

How to customize the editor before create

liudonghua123 opened this issue · 4 comments

liudonghua123 commented

Hi, I want to register a customized language like https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-custom-languages.

But whether I got the editor instance via editorDidMount or this.$refs.editor.getEditor(), the editor instance did not contain languages, defineTheme and so on.

I want to execute the following code.

    // Register a new language
    monaco.languages.register({ id: 'bind9' })
    // Register a tokens provider for the language
    monaco.languages.setMonarchTokensProvider('bind9', {
      tokenizer: {
        root: [
          [/IN/, 'record-className'],
          [/(SOA|NS|MX|TXT|A|AAAA|CNAME)/, 'record-type'],
        ],
      },
    })
    // Define a new theme that contains only rules that match this language
    monaco.editor.defineTheme('bind9Theme', {
      base: 'vs',
      inherit: false,
      rules: [
        { token: 'record-className', foreground: '808080' },
        { token: 'record-type', foreground: 'ff0000', fontStyle: 'bold' },
      ],
    })

I also reviewed the readme of https://github.com/Microsoft/monaco-editor-webpack-plugin, but still got nothing help.

liudonghua123 commented

Finally, I can do it like this.

    editorDidMount(editor) {
      const monaco = this.$refs.editor.monaco
      console.info(`monaco: `, monaco)
      // Register a new language
      monaco.languages.register({ id: 'bind9' })
      // Register a tokens provider for the language
      monaco.languages.setMonarchTokensProvider('bind9', {
        tokenizer: {
          root: [[/IN/, 'record-className'], [/(SOA|NS|MX|TXT|A|AAAA|CNAME)/, 'record-type']],
        },
      })
      // Define a new theme that contains only rules that match this language
      monaco.editor.defineTheme('bind9Theme', {
        base: 'vs',
        inherit: false,
        rules: [
          { token: 'record-className', foreground: '808080' },
          { token: 'record-type', foreground: 'ff0000', fontStyle: 'bold' },
        ],
      })
      this.language = 'bind9'
      this.theme = 'bind9Theme'
    },
liudonghua123 commented

@egoist Could we change the implementation getMonaco in src/MonacoEditor.js from

    /** @deprecated */
    getMonaco() {
      return this.editor
    },

to

    /** return the actual monaco instance instead of the editor */
    getMonaco() {
      return this.monaco
    },
egoist commented

getMonaco is deprecated, that would be a breaking change since it's used to get the editor instance previously.

Maybe we should document $refs.editor.monaco in readme instead.

egoist commented

We should probably document how to define a custom theme and use it as well, PR welcome.

  • 👍1