codemirror-editor-vue3-knowit-vite

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 codemirror-editor-vue3-knowit-vite

Set it as global component

import CodeEditor from "codemirror-editor-vue3-knowit-vite"
import "codemirror-editor-vue3-knowit-vite/dist/style.css"

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

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>`,
      schemaUrl: ''
    };
  },
};
</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).