Add Table to Markdown table tool

src/components/Sidebar.vue

@@ -37,6 +37,7 @@ export default {
       'General': {
         'home': 'Home',
         'explain_crontab': 'Explain crontab',
+        'table_to_markdown_table': 'Table to Markdown table',
         'table_to_mediawiki_table': 'Table to Mediawiki table',
         'dummy_image': 'Dummy image',
         'humans_txt': 'humans.txt generator',

src/router/index.js

@@ -16,6 +16,11 @@ const router = createRouter({
 			name: 'explain_crontab',
 			component: () => import('../views/ExplainCrontab.vue'),
 		},
+		{
+			path: '/table_to_markdown_table',
+			name: 'table_to_markdown_table',
+			component: () => import('../views/TableToMarkdownTable.vue'),
+		},
 		{
 			path: '/table_to_mediawiki_table',
 			name: 'table_to_mediawiki_table',

src/views/TableToMarkdownTable.vue

@@ -0,0 +1,101 @@
+<template>
+  <h2 class="tool-title">Table to Markdown table</h2>
+  <hr class="mt-5 mb-5">
+
+  <div class="input-group">
+    <label for="data">Data (paste from excel)</label>
+    <textarea id="data" v-model="toolData.data" v-on:keyup="result"></textarea>
+  </div>
+
+  <div class="input-group">
+    <label for="style">Table Style</label>
+      <div>
+      <select id="style" v-model="toolData.selectedStyle" v-on:change="result">
+        <option value="">Default</option>
+      </select>
+    </div>
+  </div>
+
+  <div class="input-group">
+    <label>Transpose table</label>
+
+    <div>
+      <input id="transpose" name="transpose" v-model="toolData.transpose" v-on:change="result" type="checkbox"> <label for="transpose">transpose</label>
+    </div>
+  </div>
+
+  <hr class="mt-5 mb-5">
+
+  <div class="input-group">
+    <label for="result">Result</label>
+    <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: {
+        data: '',
+        selectedStyle: '',
+        transpose: false,
+      },
+      toolResult: '',
+    };
+  },
+  methods: {
+    result() {
+      let rows = unproxy(this.toolData.data).split('\n');
+      let numCols = rows[0].split('\t').length;
+
+      // Transpose the table if the option is selected
+      if (this.toolData.transpose) {
+        const transposedData = [];
+        for (let j = 0; j < numCols; j++) {
+          const newRow = [];
+          for (let i = 0; i < rows.length; i++) {
+            newRow.push(rows[i].split('\t')[j] || '');
+          }
+          transposedData.push(newRow.join('\t'));
+        }
+        rows = transposedData;
+        numCols = rows[0].split('\t').length;
+      }
+
+      let output = '';
+
+      // Generate header row
+      output += '| ' + rows[0].split('\t').join(' | ') + ' |\n';
+
+      // Generate separator row based on selected style
+      switch (this.toolData.selectedStyle) {
+        default:
+          output += '| ' + '-'.repeat(numCols).split('').join(' | ') + ' |\n';
+          break;
+      }
+
+      // Generate data rows
+      for (let i = 1; i < rows.length; i++) {
+        if (this.toolData.selectedStyle === 'grid') {
+          output += '| ' + rows[i].split('\t').join(' | ') + ' |\n';
+        } else {
+          output += '| ' + rows[i].split('\t').join(' | ') + ' |\n';
+        }
+      }
+
+      this.toolResult = output;
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+
+</style>