feat(new tool): Math Formula format converter

Fix part of #1009

src/tools/index.ts

@@ -1,6 +1,7 @@
 import { tool as base64FileConverter } from './base64-file-converter';
 import { tool as base64StringConverter } from './base64-string-converter';
 import { tool as basicAuthGenerator } from './basic-auth-generator';
+import { tool as mathFormatsConverter } from './math-formats-converter';
 
 import { tool as asciiTextDrawer } from './ascii-text-drawer';
 
@@ -156,7 +157,12 @@ export const toolsByCategory: ToolCategory[] = [
   },
   {
     name: 'Math',
-    components: [mathEvaluator, etaCalculator, percentageCalculator],
+    components: [
+      mathEvaluator,
+      etaCalculator,
+      percentageCalculator,
+      mathFormatsConverter,
+    ],
   },
   {
     name: 'Measurement',

src/tools/math-formats-converter/index.ts

@@ -0,0 +1,12 @@
+import { EqualNot } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Math Gormats Converter',
+  path: '/math-formats-converter',
+  description: 'Convert mathematical expression between formats',
+  keywords: ['math', 'formats', 'converter', 'latex', 'mathml', 'asciimath'],
+  component: () => import('./math-formats-converter.vue'),
+  icon: EqualNot,
+  createdAt: new Date('2024-05-11'),
+});

src/tools/math-formats-converter/math-formats-converter.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import Plurimath from '@plurimath/plurimath';
+
+const formats = [
+  { value: 'asciimath', label: 'AsciiMath' },
+  { value: 'latex', label: 'Latex' },
+  { value: 'mathml', label: 'MathML' },
+  { value: 'html', label: 'Html' },
+  { value: 'omml', label: 'OOML' },
+];
+
+const source = ref('');
+const sourceFormat = ref('');
+const targetFormat = ref('');
+const target = computed(() => {
+  if (sourceFormat.value === targetFormat.value) {
+    return source.value;
+  }
+  const formula = new Plurimath(source.value, sourceFormat.value);
+  switch (targetFormat.value) {
+    case 'asciimath':
+      return formula.toAsciimath();
+    case 'latex':
+      return formula.toLatex();
+    case 'mathml':
+      return formula.toMathml();
+    case 'html':
+      return formula.toHtml();
+    case 'omml':
+      return formula.toOmml();
+  }
+  return '# unknown format';
+});
+</script>
+
+<template>
+  <div>
+    <c-input-text
+      v-model:value="source"
+      multiline
+      placeholder="Put your math expression here..."
+      rows="5"
+      label="Mathematical expression to convert"
+      raw-text
+      mb-5
+    />
+    <c-select
+      v-model:value="sourceFormat"
+      :options="formats"
+      placeholder="Source format"
+    />
+
+    <n-divider />
+
+    <c-select
+      v-model:value="targetFormat"
+      :options="formats"
+      placeholder="Source format"
+    />
+    <textarea-copyable :value="target" :language="targetFormat" />
+  </div>
+</template>