Add monaco editor

2024-03-07 13:41:39 +02:00
parent 650267ca1e
commit de7abfadd9
14 changed files with 334 additions and 197 deletions
--- a/src/assets/app.scss
+++ b/src/assets/app.scss
@ -38,4 +38,7 @@ textarea[id=data] {
 }
 textarea[id=result] {
 	height: 350px;
+}
+div[id=result] {
+	height: 350px;
 }
--- a/src/components/MonacoEditor.vue
+++ b/src/components/MonacoEditor.vue
@ -0,0 +1,60 @@
+<template>
+<div :id="name"></div>
+</template>
+
+<script>
+import loader from '@monaco-editor/loader';
+
+let monacoResultInst = null;
+
+export default {
+  name: "monacoEditor",
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+    language: {
+      type: String,
+      default: 'text',
+    },
+    value: {
+      type: String,
+      default: '',
+    },
+    readonly: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  mounted() {
+    loader.init().then((monaco) => {
+      monacoResultInst = monaco;
+
+      monaco.editor.create(document.querySelector(`#${this.name}`), {
+        value: '',
+        language: this.language,
+        readOnly: this.readonly,
+      });
+    });
+  },
+  watch: {
+    value: {
+      // the callback will be called immediately after the start of the observation
+      immediate: true,
+      deep: true,
+      async handler(value, oldValue) {
+        while (!monacoResultInst) {
+          await new Promise(r => setTimeout(r, 10));
+        }
+
+        monacoResultInst.editor.getModels()[0].setValue(value.toString());
+      }
+    }
+  }
+};
+</script>
+
+<style scoped>
+
+</style>
--- a/src/views/FixRuEnKeyboard.vue
+++ b/src/views/FixRuEnKeyboard.vue
@ -4,15 +4,15 @@

  <div class="input-group">
    <label for="data">Data</label>
-    <textarea id="data" v-model="toolData.data"></textarea>
+    <textarea id="data" v-model="toolData.data" v-on:keyup="result"></textarea>
  </div>

  <div class="input-group">
    <label>Mode</label>

    <div>
-      <input id="keyboard_mode_en_ru" value="en-ru" name="keyboard_mode" v-model="toolData.keyboardMode" type="radio"> <label for="keyboard_mode_en_ru">en -> ru</label><br>
-      <input id="keyboard_mode_ru_en" value="ru-en" name="keyboard_mode" v-model="toolData.keyboardMode" type="radio"> <label for="keyboard_mode_ru_en">ru -> en</label>
+      <input id="keyboard_mode_en_ru" value="en-ru" name="keyboard_mode" v-model="toolData.keyboardMode" v-on:change="result" type="radio"> <label for="keyboard_mode_en_ru">en -> ru</label><br>
+      <input id="keyboard_mode_ru_en" value="ru-en" name="keyboard_mode" v-model="toolData.keyboardMode" v-on:change="result" type="radio"> <label for="keyboard_mode_ru_en">ru -> en</label>
    </div>
  </div>

@ -20,15 +20,18 @@

  <div class="input-group">
    <label for="result">Result</label>
-    <textarea id="result" v-model="toolResult"></textarea>
+    <MonacoEditor name="result" language="text" :value="toolResult"></MonacoEditor>
  </div>
 </template>

 <script>
-
 import { unproxy } from "@/utils/unproxy";
+import MonacoEditor from "@/components/MonacoEditor.vue";

 export default {
+  components: {
+    MonacoEditor
+  },
  data() {
    return {
      toolData: {
@ -39,10 +42,11 @@ export default {
        'en-ru': '`~!@#$%^&qwertyuiop[]asdfghjkl;\'zxcvbnm,./QWERTYUIOP{}ASDFGHJKL:"ZXCVBNM<>?',
        'ru-en': 'ёЁ!"№;%:?йцукенгшщзхъфывапролджэячсмитьбю.ЙЦУКЕНГШЩЗХЪФЫВАПРОЛДЖЭЯЧСМИТЬБЮ,',
      },
+      toolResult: '',
    };
  },
-  computed: {
-    toolResult() {
+  methods: {
+    result() {
      let data = unproxy(this.toolData.data).split('');

      const dict = this.dictionary[this.toolData.keyboardMode];
@ -55,7 +59,7 @@ export default {
        data[i] = unproxy(dictOpposite[dictPos]);
      }

-      return data.join('');
+      this.toolResult = data.join('');
    },
  },
 }
--- a/src/views/JSONFormatter.vue
+++ b/src/views/JSONFormatter.vue
@ -11,12 +11,17 @@

  <div class="input-group">
    <label for="result">Result</label>
-    <textarea id="result" v-model="toolResult"></textarea>
+    <MonacoEditor name="result" language="json" :value="toolResult"></MonacoEditor>
  </div>
 </template>

 <script>
+import MonacoEditor from "@/components/MonacoEditor.vue";
+
 export default {
+  components: {
+    MonacoEditor
+  },
  data() {
    return {
      toolData: {
@ -26,22 +31,19 @@ export default {
      toolResult: '',
    };
  },
-  mounted() {
-    this.result();
-  },
  methods: {
    result() {
      if (!this.toolData.data.length) {
-        return '';
-      }
-
-      try {
-        this.toolResult = JSON.stringify(JSON.parse(this.toolData.data), null, 4);
-      } catch (e) {
-        this.toolResult = 'invalid syntax';
+        this.toolResult = '';
+      } else {
+        try {
+          this.toolResult = JSON.stringify(JSON.parse(this.toolData.data), null, 4);
+        } catch (e) {
+          this.toolResult = 'invalid syntax';
+        }
      }
    }
-  }
+  },
 }
 </script>

--- a/src/views/SQLFormatter.vue
+++ b/src/views/SQLFormatter.vue
@ -11,14 +11,18 @@

  <div class="input-group">
    <label for="result">Result</label>
-    <textarea id="result" v-model="toolResult"></textarea>
+    <MonacoEditor name="result" language="sql" :value="toolResult"></MonacoEditor>
  </div>
 </template>

 <script>
 import { format } from 'sql-formatter';
+import MonacoEditor from "@/components/MonacoEditor.vue";

 export default {
+  components: {
+    MonacoEditor
+  },
  data() {
    return {
      toolData: {
@ -28,9 +32,6 @@ export default {
      toolResult: '',
    };
  },
-  mounted() {
-    this.result();
-  },
  methods: {
    result() {
      try {
--- a/src/views/SQLSplitInView.vue
+++ b/src/views/SQLSplitInView.vue
@ -4,43 +4,45 @@

  <div class="input-group">
    <label for="field_name">Field name</label>
-    <input id="field_name" v-model="toolData.fieldName" placeholder="D.ID" type="text">
+    <input id="field_name" v-model="toolData.fieldName" v-on:keyup="result" placeholder="D.ID" type="text">
  </div>

  <div class="input-group">
    <label for="data">Data</label>
-    <textarea id="data" v-model="toolData.data"></textarea>
+    <textarea id="data" v-model="toolData.data" v-on:keyup="result"></textarea>
  </div>

  <div class="input-group">
    <label for="data_delimiter">Delimiter</label>
-    <input id="data_delimiter" v-model="toolData.dataDelimiter" placeholder="," type="text">
+    <input id="data_delimiter" v-model="toolData.dataDelimiter" v-on:keyup="result" placeholder="," type="text">
  </div>

  <div class="input-group">
    <label>Wrap in quotes</label>

    <div>
-      <input id="wrap_in_quotes_no" value="" name="wrap_in_quotes" v-model="toolData.wrapInQuotes" type="radio"> <label for="wrap_in_quotes_no">No</label><br>
-      <input id="wrap_in_quotes_single" value="single" name="wrap_in_quotes" v-model="toolData.wrapInQuotes" type="radio"> <label for="wrap_in_quotes_single">Single</label><br>
-      <input id="wrap_in_quotes_double" value="double" name="wrap_in_quotes" v-model="toolData.wrapInQuotes" type="radio"> <label for="wrap_in_quotes_double">Double</label>
+      <input id="wrap_in_quotes_no" value="" name="wrap_in_quotes" v-model="toolData.wrapInQuotes" v-on:change="result" type="radio"> <label for="wrap_in_quotes_no">No</label><br>
+      <input id="wrap_in_quotes_single" value="single" name="wrap_in_quotes" v-model="toolData.wrapInQuotes" v-on:change="result" type="radio"> <label for="wrap_in_quotes_single">Single</label><br>
+      <input id="wrap_in_quotes_double" value="double" name="wrap_in_quotes" v-model="toolData.wrapInQuotes" v-on:change="result" type="radio"> <label for="wrap_in_quotes_double">Double</label>
    </div>
  </div>

  <div class="input-group">
    <label for="chunk_by">Chunk by</label>
-    <input id="chunk_by" v-model="toolData.chunkBy" placeholder="900" min="1" type="number">
+    <input id="chunk_by" v-model="toolData.chunkBy" v-on:keyup="result" placeholder="900" min="1" type="number">
  </div>

  <hr class="mt-5 mb-5">

  <div class="input-group">
    <label for="result">Result</label>
-    <textarea id="result" v-model="toolResult"></textarea>
+    <MonacoEditor name="result" language="sql" :value="toolResult"></MonacoEditor>
  </div>
 </template>

 <script>
+import MonacoEditor from "@/components/MonacoEditor.vue";
+
 function arrayChunk(arr, chunkSize) {
  const res = [];
  while (arr.length > 0) {
@ -51,6 +53,9 @@ function arrayChunk(arr, chunkSize) {
 }

 export default {
+  components: {
+    MonacoEditor
+  },
  data() {
    return {
      toolData: {
@ -60,10 +65,11 @@ export default {
        wrapInQuotes: '',
        chunkBy: 900,
      },
+      toolResult: '',
    };
  },
-  computed: {
-    toolResult() {
+  methods: {
+    result() {
      let data = this.toolData.data
        .split(this.toolData.dataDelimiter ? this.toolData.dataDelimiter : '\n');

@ -91,7 +97,7 @@ export default {
        data[i] = '(' + chunk.join(',') + ')';
      }

-      return '(' + this.toolData.fieldName + ' IN ' + data.join(' OR ' + this.toolData.fieldName + ' IN ') + ')';
+      this.toolResult = '(' + this.toolData.fieldName + ' IN ' + data.join(' OR ' + this.toolData.fieldName + ' IN ') + ')';
    },
  },
 }
--- a/src/views/StrLength.vue
+++ b/src/views/StrLength.vue
@ -4,17 +4,17 @@

  <div class="input-group">
    <label for="data">Data</label>
-    <textarea id="data" v-model="toolData.data"></textarea>
+    <textarea id="data" v-model="toolData.data" v-on:keyup="result"></textarea>
  </div>

  <div class="input-group">
    <label for="data_delimiter">Delimiter</label>
-    <input id="data_delimiter" v-model="toolData.dataDelimiter" placeholder="," type="text">
+    <input id="data_delimiter" v-model="toolData.dataDelimiter" v-on:keyup="result" placeholder="," type="text">

    <div>
-      <input id="count_mode_characters" value="characters" name="count_mode" v-model="toolData.countMode" :disabled="toolData.dataDelimiter.length" type="radio"> <label for="count_mode_characters">characters</label><br>
-      <input id="count_mode_words" value="words" name="count_mode" v-model="toolData.countMode" :disabled="toolData.dataDelimiter.length" type="radio"> <label for="count_mode_words">words</label><br>
-      <input id="count_mode_lines" value="lines" name="count_mode" v-model="toolData.countMode" :disabled="toolData.dataDelimiter.length" type="radio"> <label for="count_mode_lines">lines</label>
+      <input id="count_mode_characters" value="characters" name="count_mode" v-model="toolData.countMode" v-on:change="result" :disabled="toolData.dataDelimiter.length" type="radio"> <label for="count_mode_characters">characters</label><br>
+      <input id="count_mode_words" value="words" name="count_mode" v-model="toolData.countMode" v-on:change="result" :disabled="toolData.dataDelimiter.length" type="radio"> <label for="count_mode_words">words</label><br>
+      <input id="count_mode_lines" value="lines" name="count_mode" v-model="toolData.countMode" v-on:change="result" :disabled="toolData.dataDelimiter.length" type="radio"> <label for="count_mode_lines">lines</label>
    </div>
  </div>

@ -22,12 +22,17 @@

  <div class="input-group">
    <label for="result">Result</label>
-    <textarea id="result" v-model="toolResult"></textarea>
+    <MonacoEditor name="result" language="text" :value="toolResult"></MonacoEditor>
  </div>
 </template>

 <script>
+import MonacoEditor from "@/components/MonacoEditor.vue";
+
 export default {
+  components: {
+    MonacoEditor
+  },
  data() {
    return {
      toolData: {
@ -35,25 +40,27 @@ export default {
        dataDelimiter: '',
        countMode: 'characters',
      },
+      toolResult: '',
    };
  },
-  computed: {
-    toolResult() {
+  methods: {
+    result() {
      if (!this.toolData.data.length) {
-        return 0;
-      }
-
-      if (this.toolData.dataDelimiter.length) {
-        return this.toolData.data.split(this.toolData.dataDelimiter).length;
-      }
-
-      switch (this.toolData.countMode) {
-        case 'characters':
-          return this.toolData.data.length;
-        case 'words':
-          return this.toolData.data.trim().split(/\s+/).length;
-        case 'lines':
-          return this.toolData.data.split('\n').length;
+        this.toolResult = 0;
+      }else if (this.toolData.dataDelimiter.length) {
+        this.toolResult = this.toolData.data.split(this.toolData.dataDelimiter).length;
+      } else {
+        switch (this.toolData.countMode) {
+          case 'characters':
+            this.toolResult = this.toolData.data.length;
+            break;
+          case 'words':
+            this.toolResult = this.toolData.data.trim().split(/\s+/).length;
+            break;
+          case 'lines':
+            this.toolResult = this.toolData.data.split('\n').length;
+            break;
+        }
      }
    },
  },
--- a/src/views/StrRemoveDuplicateLines.vue
+++ b/src/views/StrRemoveDuplicateLines.vue
@ -4,33 +4,39 @@

  <div class="input-group">
    <label for="data">Data</label>
-    <textarea id="data" v-model="toolData.data"></textarea>
+    <textarea id="data" v-model="toolData.data" v-on:keyup="result"></textarea>
  </div>

  <hr class="mt-5 mb-5">

  <div class="input-group">
    <label for="result">Result</label>
-    <textarea id="result" v-model="toolResult"></textarea>
+    <MonacoEditor name="result" language="text" :value="toolResult"></MonacoEditor>
  </div>
 </template>

 <script>
+import MonacoEditor from "@/components/MonacoEditor.vue";
+
 function arrayUnique(value, index, array) {
  return array.indexOf(value) === index;
 }

 export default {
+  components: {
+    MonacoEditor
+  },
  data() {
    return {
      toolData: {
        data: '',
      },
+      toolResult: '',
    };
  },
-  computed: {
-    toolResult() {
-      return this.toolData.data.split('\n').filter(arrayUnique).join('\n');
+  methods: {
+    result() {
+      this.toolResult = this.toolData.data.split('\n').filter(arrayUnique).join('\n');
    },
  },
 }
--- a/src/views/StrSortLines.vue
+++ b/src/views/StrSortLines.vue
@ -4,19 +4,19 @@

  <div class="input-group">
    <label for="data">Data</label>
-    <textarea id="data" v-model="toolData.data"></textarea>
+    <textarea id="data" v-model="toolData.data" v-on:keyup="result"></textarea>
  </div>

  <div class="input-group">
    <label>Mode</label>

    <div>
-      <input id="sort_mode_alpha" value="alpha" name="sort_mode" v-model="toolData.sortMode" type="radio"> <label for="sort_mode_alpha">alphabetically</label><br>
-      <input id="sort_mode_numerically" value="numerically" name="sort_mode" v-model="toolData.sortMode" type="radio"> <label for="sort_mode_numerically">numerically</label><br>
-      <input id="sort_mode_by_length" value="by_length" name="sort_mode" v-model="toolData.sortMode" type="radio"> <label for="sort_mode_by_length">by length</label><br>
-      <input id="sort_mode_random" value="random" name="sort_mode" v-model="toolData.sortMode" type="radio"> <label for="sort_mode_random">random</label><br>
+      <input id="sort_mode_alpha" value="alpha" name="sort_mode" v-model="toolData.sortMode" v-on:change="result" type="radio"> <label for="sort_mode_alpha">alphabetically</label><br>
+      <input id="sort_mode_numerically" value="numerically" name="sort_mode" v-model="toolData.sortMode" v-on:change="result" type="radio"> <label for="sort_mode_numerically">numerically</label><br>
+      <input id="sort_mode_by_length" value="by_length" name="sort_mode" v-model="toolData.sortMode" v-on:change="result" type="radio"> <label for="sort_mode_by_length">by length</label><br>
+      <input id="sort_mode_random" value="random" name="sort_mode" v-model="toolData.sortMode" v-on:change="result" type="radio"> <label for="sort_mode_random">random</label><br>
      <br>
-      <input id="sort_mode_reverse" value="random" name="sort_mode_reverse" v-model="toolData.sortModeReverse" type="checkbox"> <label for="sort_mode_reverse">reverse</label>
+      <input id="sort_mode_reverse" value="random" name="sort_mode_reverse" v-model="toolData.sortModeReverse" v-on:change="result" type="checkbox"> <label for="sort_mode_reverse">reverse</label>
    </div>
  </div>

@ -24,12 +24,17 @@

  <div class="input-group">
    <label for="result">Result</label>
-    <textarea id="result" v-model="toolResult"></textarea>
+    <MonacoEditor name="result" language="text" :value="toolResult"></MonacoEditor>
  </div>
 </template>

 <script>
+import MonacoEditor from "@/components/MonacoEditor.vue";
+
 export default {
+  components: {
+    MonacoEditor
+  },
  data() {
    return {
      toolData: {
@ -37,10 +42,11 @@ export default {
        sortMode: 'alpha',
        sortModeReverse: false,
      },
+      toolResult: '',
    };
  },
-  computed: {
-    toolResult() {
+  methods: {
+    result() {
      let result = []
      const data = this.toolData.data.split('\n');

@ -73,7 +79,7 @@ export default {
        result = result.reverse();
      }

-      return result.join('\n');
+      this.toolResult = result.join('\n');
    },
  },
 }
--- a/src/views/StrToLowerUppper.vue
+++ b/src/views/StrToLowerUppper.vue
@ -4,15 +4,15 @@

  <div class="input-group">
    <label for="data">Data</label>
-    <textarea id="data" v-model="toolData.data"></textarea>
+    <textarea id="data" v-model="toolData.data" v-on:keyup="result"></textarea>
  </div>

  <div class="input-group">
    <label>Mode</label>

    <div>
-      <input id="case_mode_lower" value="lower" name="case_mode" v-model="toolData.caseMode" type="radio"> <label for="case_mode_lower">to lower</label><br>
-      <input id="case_mode_upper" value="upper" name="case_mode" v-model="toolData.caseMode" type="radio"> <label for="case_mode_upper">to upper</label>
+      <input id="case_mode_lower" value="lower" name="case_mode" v-model="toolData.caseMode" v-on:change="result" type="radio"> <label for="case_mode_lower">to lower</label><br>
+      <input id="case_mode_upper" value="upper" name="case_mode" v-model="toolData.caseMode" v-on:change="result" type="radio"> <label for="case_mode_upper">to upper</label>
    </div>
  </div>

@ -20,27 +20,35 @@

  <div class="input-group">
    <label for="result">Result</label>
-    <textarea id="result" v-model="toolResult"></textarea>
+    <MonacoEditor name="result" language="text" :value="toolResult"></MonacoEditor>
  </div>
 </template>

 <script>
+import MonacoEditor from "@/components/MonacoEditor.vue";
+
 export default {
+  components: {
+    MonacoEditor
+  },
  data() {
    return {
      toolData: {
        data: '',
        caseMode: 'upper',
      },
+      toolResult: '',
    };
  },
-  computed: {
-    toolResult() {
+  methods: {
+    result() {
      switch (this.toolData.caseMode) {
        case 'lower':
-          return this.toolData.data.toLocaleLowerCase();
+          this.toolResult = this.toolData.data.toLocaleLowerCase();
+          break;
        case 'upper':
-          return this.toolData.data.toLocaleUpperCase();
+          this.toolResult = this.toolData.data.toLocaleUpperCase();
+          break;
      }
    },
  },
--- a/src/views/StrToPHPArray.vue
+++ b/src/views/StrToPHPArray.vue
@ -20,15 +20,19 @@

  <div class="input-group">
    <label for="result">Result</label>
-    <textarea id="result" v-model="toolResult"></textarea>
+    <MonacoEditor name="result" language="php" :value="toolResult"></MonacoEditor>
  </div>
 </template>

 <script>
 import axios from 'axios'
 import { config } from '../../config';
+import MonacoEditor from "@/components/MonacoEditor.vue";

 export default {
+  components: {
+    MonacoEditor
+  },
  data() {
    return {
      toolData: {
--- a/src/views/UrlEncodeDecode.vue
+++ b/src/views/UrlEncodeDecode.vue
@ -4,15 +4,15 @@

  <div class="input-group">
    <label for="data">Data</label>
-    <textarea id="data" v-model="toolData.data"></textarea>
+    <textarea id="data" v-model="toolData.data" v-on:keyup="result"></textarea>
  </div>

  <div class="input-group">
    <label>Mode</label>

    <div>
-      <input id="encode_mode_encode" value="encode" name="encode_mode" v-model="toolData.encodeMode" type="radio"> <label for="encode_mode_encode">endode</label><br>
-      <input id="encode_mode_decode" value="decode" name="encode_mode" v-model="toolData.encodeMode" type="radio"> <label for="encode_mode_decode">decode</label>
+      <input id="encode_mode_encode" value="encode" name="encode_mode" v-model="toolData.encodeMode" v-on:change="result" type="radio"> <label for="encode_mode_encode">encode</label><br>
+      <input id="encode_mode_decode" value="decode" name="encode_mode" v-model="toolData.encodeMode" v-on:change="result" type="radio"> <label for="encode_mode_decode">decode</label>
    </div>
  </div>

@ -20,27 +20,35 @@

  <div class="input-group">
    <label for="result">Result</label>
-    <textarea id="result" v-model="toolResult"></textarea>
+    <MonacoEditor name="result" language="text" :value="toolResult"></MonacoEditor>
  </div>
 </template>

 <script>
+import MonacoEditor from "@/components/MonacoEditor.vue";
+
 export default {
+  components: {
+    MonacoEditor
+  },
  data() {
    return {
      toolData: {
        data: '',
        encodeMode: 'decode',
      },
+      toolResult: '',
    };
  },
-  computed: {
-    toolResult() {
+  methods: {
+    result() {
      switch (this.toolData.encodeMode) {
        case 'encode':
-          return this.toolData.data.split('\n').map(encodeURIComponent).join('\n');
+          this.toolResult = this.toolData.data.split('\n').map(encodeURIComponent).join('\n');
+          break;
        case 'decode':
-          return this.toolData.data.split('\n').map(decodeURIComponent).join('\n');
+          this.toolResult = this.toolData.data.split('\n').map(decodeURIComponent).join('\n');
+          break;
      }
    },
  },