How To Highlight The Syntax Error Using The Lint In Codemirror Lint And Remove The Codemirror To Make Normal Textarea

I have a Nuxtjs/Vuejs application within which I have 2 textarea. One for XML and another for JSON. I want to highlight the syntax error if present within the XML/JSON against the

Solution 1:

I was finally able to find the resolution.

For removing the CodeMirror we can do something like this:

this.xmlEditor.toTextArea()
      this.xmlEditor = null

or make some validation and then reset the values:

if (this.xmlEditor !== null) {
        document.getElementById('xml').value = ''this.xmlEditor.setValue('')
        this.xmlEditor.toTextArea()
        this.xmlEditor = null
      }

For beautifying and the showing the syntax error, I am using something like this:

<template><div>
    CODE MIRROR
    <divclass="row"><divclass="col-sm-3"><buttonclass="btn btn-primary" @click="resetArea">
          Reset
        </button></div></div><divclass="row"><divclass="col-md-1" /><divclass="col-md-5"><divclass="row"><divclass="col-md-12"style="display: flex"><textareaid="xml"v-model="xmlInput"class="form-control"placeholder="XML Document"spellcheck="false"data-gramm="false"
              @input="convertToJSON()"
            /></div></div></div><divclass="col-md-5"><divclass="row"><divclass="col-md-12"><textareaid="json"v-model="jsonInput"class="form-control"placeholder="JSON Document"spellcheck="false"data-gramm="false"
              @input="convertToXML()"
            /></div></div></div><divclass="col-md-1" /></div></div></template><script>letCodeMirror = nullif (typeofwindow !== 'undefined' && typeofwindow.navigator !== 'undefined') {
  CodeMirror = require('codemirror')
  require('codemirror/mode/xml/xml.js')
  require('codemirror/mode/javascript/javascript.js')
  require('codemirror/lib/codemirror.css')
  require('codemirror/addon/lint/lint.js')
  require('codemirror/addon/lint/lint.css')
  require('codemirror/addon/lint/json-lint')
  require('codemirror/addon/lint/javascript-lint.js')
  require('codemirror/addon/hint/javascript-hint.js')
  window.jsonlint = require('jsonlint-mod')
}

exportdefault {
  data () {
    return {
      xmlInput: '',
      jsonInput: '',
      xmlEditor: null,
      jsonEditor: null
    }
  },
  mounted () {},
  methods: {
    convertToJSON () {
      // Make the textarea as CodeMirror beautified XMLif (this.xmlEditor === null) {
        this.xmlEditor = CodeMirror.fromTextArea(document.getElementById('xml'), {
          mode: 'application/xml',
          lineNumbers: true,
          indentWithTabs: true,
          gutters: ['CodeMirror-lint-markers'],
          lint: true,
          autoCloseBrackets: true,
          autoCloseTags: true
        })

        this.xmlEditor.setValue(document.getElementById('xml').value)
      } else {
        this.xmlEditor.setValue(document.getElementById('xml').value)
      }
    },
    convertToXML () {
      // Make the textarea as CodeMirror beautified JSONif (this.jsonEditor === null) {
        this.jsonEditor = CodeMirror.fromTextArea(document.getElementById('json'), {
          mode: 'applicaton/ld+json',
          lineNumbers: true,
          lineWrapping: true,
          autoCloseBrackets: true,
          gutters: ['CodeMirror-lint-markers'],
          lint: true
        })
        this.jsonEditor.setValue(document.getElementById('json').value)
      } else {
        this.jsonEditor.setValue(document.getElementById('json').value)
      }
    },
    resetArea () {
      // Remove the CodeMirror and make it normal textareaif (this.xmlEditor !== null) {
        document.getElementById('xml').value = ''this.xmlEditor.setValue('')
        this.xmlEditor.toTextArea()
        this.xmlEditor = null
      }

      if (this.jsonEditor !== null) {
        document.getElementById('json').value = ''this.jsonEditor.setValue('')
        this.jsonEditor.toTextArea()
        this.jsonEditor = null
      }
    }
  }
}
</script><stylescoped>textarea {
  height: 78vh;
  white-space: nowrap;
  resize: both;
}

::-webkit-input-placeholder {
  color: #f1948a;
  text-align: center;
}

.CodeMirror {
  height: 78vh!important;
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid black;
}
</style>