Codemirror + Validation ( JSON / XML )

Work in progress... This project is created to help us validate XML or JSON scheme inside of Codemirror plugin.

Feat

• Validate XML
• Validate JSON
• Export errors as a file

Installation

npm i @x4kep211/vue-code-editor

Set it as global component

import CodeEditor from "@x4kep211/vue-code-editor"
import "@x4kep211/vue-code-editor/dist/style.css"

const app = createApp(App);
app.use(CodeEditor)
app.mount('#app')

CodeEditor properties:

Available properties on plugin:

| Properties | Short description | Value type | Expected values | | ------ | ------ | ------ | ------ | | type | Content type to be validated | string | XML / JSON | schema | Schema to be used to validate content | string | JSON schema / XML schema | schemaType | Used as label for downloaded file | string | Partners | content | Content to be validated | string | XML or JSON formatted content | language | Content type to be validated | string | EN / RS ( RS is default )

Example of invalid XML

<template>
  <code-editor :type="type" :content="content"></code-editor>
</template>

<script>

export default {
  data() {
    return {
      type: 'xml',
      content: `<?xml version="1.0" encoding="UTF-8" ?>
      <Partners>
        <Partner>
          <Nam>ldMsyR</Name>
          <Address>Test Adresa</Address>
          <BankAccount>000000000000963289</BankAccount>
          <Comment>Test Komentar</Comment>
        </Partner>
      </Partners><Partners>
        <Partner>
          <Nam>ldMsyR</Name>
          <Address>Test Adresa</Address>
          <BankAccount>000000000000963289</BankAccount>
          <Comment>Test Komentar</Comment>
        </Partner>
      </Partners><Partners>
        <Partner>
          <Nam>ldMsyR</Name>
          <Address>Test Adresa</Address>
          <BankAccount>000000000000963289</BankAccount>
          <Comment>Test Komentar</Comment>
        </Partner>
      </Partners><Partners>
        <Partner>
          <Nam>ldMsyR</Name>
          <Address>Test Adresa</Address>
          <BankAccount>000000000000963289</BankAccount>
          <Comment>Test Komentar</Comment>
        </Partner>
      </Partners><Partners>
        <Partner>
          <Nam>ldMsyR</Name>
          <Address>Test Adresa</Address>
          <BankAccount>000000000000963289</BankAccount>
          <Comment>Test Komentar</Comment>
        </Partner>
      </Partners><Partners>
        <Partner>
          <Nam>ldMsyR</Name>
          <Address>Test Adresa</Address>
          <BankAccount>000000000000963289</BankAccount>
          <Comment>Test Komentar</Comment>
        </Partner>
      </Partners><Partners>
        <Partner>
          <Nam>ldMsyR</Name>
          <Address>Test Adresa</Address>
          <BankAccount>000000000000963289</BankAccount>
          <Comment>Test Komentar</Comment>
        </Partner>
      </Partners>`,
    };
  },
};
</script>

Example of invalid JSON

<template>
  <code-editor :type="type" :content="content"></code-editor>
</template>

<script>

export default {
  data() {
    return {
      type: 'json',
      content: `[{
        "Name": "ldMsyR",
        "Address": "Test Adresa",
        "BankAccount": "000000000000963289",
        "Comment": "Test Komentar
      }]`,
    };
  },
};
</script>

TODO:

• Translation XML (СРБ - ENG)
• Translation JSON (СРБ - ENG)

Vue 3 + Vite

This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 <script setup> SFCs, check out the script setup docs to learn more.

Recommended IDE Setup

• VS Code + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).