Issues while integrating the CodeMirror to TextArea (XML/JSON-LD content) using Vuejs

Meta
1

I have an Vuejs/Nuxtjs application with 2 textarea. One textarea is dedicated for XML and another for JSON-LD. To highlight the syntax in respective textarea I have integrated CodeMirror into my application and everything so far working correctly.

I have provided Code Sandbox for testing the same: great-browser-gfzdf - CodeSandbox

I am facing the following minor issues with CodeMirror:

  1. Highlighting of the XML text works perfectly however for JSON-LD all the text are displayed with red font-color. I am not understanding why all key/values are displayed in the same color. Is it actually highlighting the contents? Is this default behavior for CodeMirror application/ld+json contents?

  2. I have added the linting option for the JSON-LD textarea. If there is any syntax error then it will be highlighted and an X arrow with a message will be displayed against that error to provide more information. However, if there is any Syntax error in XML contents then they are just highlighted in red font but it does not show the X arrow against the line and provide more information. How can I achieve the same for the XML area?

Steps to recreate here in CodeSandbox:

  1. Copy the following JSON-LD text and paste it in the JSON-LD textarea, you can see that all information is displayed in the same color:
{
  "@context": "https://json-ld.org/contexts/person.jsonld",
  "@id": "http://dbpedia.org/resource/John_Lennon",
  "spouse": "http://dbpedia.org/resource/Cynthia_Lennon"
}
  1. Remove comma/brackets from the JSON-LD content provided in issue-1 above, we can see that the respective line is highlighted and displayed with X symbol to provide more information. Now copy the XML contents into XML Area and remove one character to make the XML syntactically invalid, we can see that contents are highlighted in red but cannot see any error message against that line
<book id="bk101">
      <title>XML Developer's Guide</title>
      <genre>Computer</genre>
      <price>44.95</price>
</book>

Can someone please help me with this issue? Any help will be really appreciated.

Edited:
I tried the approach mentioned here: javascript - Codemirror Show HTMLLint Errors Inline (.addLineWidget) - Stack Overflow but this is not working as expected for me.

2

Yes, that’s how the editor highlights JSON. And no, there’s no schema-validating XML linter, though you could probably write your own.

3

@marijn Thanks a lot for the response. Ok, so I will keep the same for highlighting the JSON. How to write my own XML Linter? Some examples/documentation I can refer to?

I found the following package which will provide the error if the XML is statically incorrect fast-xml-parser, can this be made use of somehow? Really looking forward to your response. Thanks a lot in advance.

4

The lint addon is what you need to work with to display errors.

5

@marijn Ya I have added that to my CodeMirror if you observe my CodeSandBox: https://codesandbox.io/s/great-browser-gfzdf?file=/pages/index.vue

You can see that I have added it but am still unable to highlight the error.

6

Yes, you’ll need to write the code to integrate it with the errors reported by your xml parser.