Merge 2f4bda93b7 into 07eea0f484

2025-04-20 14:56:17 -04:00 · 2025-04-13 04:12:06 +02:00 · 2025-04-13 04:12:06 +02:00 · 7070580dc3
commit 7070580dc3
parent 07eea0f484 2f4bda93b7
18 changed files with 6735 additions and 8126 deletions
--- a/.eslintrc-auto-import.json
+++ b/.eslintrc-auto-import.json
@ -286,6 +286,9 @@
    "watchTriggerable": true,
    "watchWithFilter": true,
    "whenever": true,
-    "toValue": true
+    "toValue": true,
+    "injectLocal": true,
+    "provideLocal": true,
+    "useClipboardItems": true
  }
 }
--- a/auto-imports.d.ts
+++ b/auto-imports.d.ts
@ -36,6 +36,7 @@ declare global {
  const h: typeof import('vue')['h']
  const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
  const inject: typeof import('vue')['inject']
+  const injectLocal: typeof import('@vueuse/core')['injectLocal']
  const isDefined: typeof import('@vueuse/core')['isDefined']
  const isProxy: typeof import('vue')['isProxy']
  const isReactive: typeof import('vue')['isReactive']
@ -65,6 +66,7 @@ declare global {
  const onUpdated: typeof import('vue')['onUpdated']
  const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
  const provide: typeof import('vue')['provide']
+  const provideLocal: typeof import('@vueuse/core')['provideLocal']
  const reactify: typeof import('@vueuse/core')['reactify']
  const reactifyObject: typeof import('@vueuse/core')['reactifyObject']
  const reactive: typeof import('vue')['reactive']
@ -128,6 +130,7 @@ declare global {
  const useBrowserLocation: typeof import('@vueuse/core')['useBrowserLocation']
  const useCached: typeof import('@vueuse/core')['useCached']
  const useClipboard: typeof import('@vueuse/core')['useClipboard']
+  const useClipboardItems: typeof import('@vueuse/core')['useClipboardItems']
  const useCloned: typeof import('@vueuse/core')['useCloned']
  const useColorMode: typeof import('@vueuse/core')['useColorMode']
  const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog']
@ -326,6 +329,7 @@ declare module 'vue' {
    readonly h: UnwrapRef<typeof import('vue')['h']>
    readonly ignorableWatch: UnwrapRef<typeof import('@vueuse/core')['ignorableWatch']>
    readonly inject: UnwrapRef<typeof import('vue')['inject']>
+    readonly injectLocal: UnwrapRef<typeof import('@vueuse/core')['injectLocal']>
    readonly isDefined: UnwrapRef<typeof import('@vueuse/core')['isDefined']>
    readonly isProxy: UnwrapRef<typeof import('vue')['isProxy']>
    readonly isReactive: UnwrapRef<typeof import('vue')['isReactive']>
@ -355,6 +359,7 @@ declare module 'vue' {
    readonly onUpdated: UnwrapRef<typeof import('vue')['onUpdated']>
    readonly pausableWatch: UnwrapRef<typeof import('@vueuse/core')['pausableWatch']>
    readonly provide: UnwrapRef<typeof import('vue')['provide']>
+    readonly provideLocal: UnwrapRef<typeof import('@vueuse/core')['provideLocal']>
    readonly reactify: UnwrapRef<typeof import('@vueuse/core')['reactify']>
    readonly reactifyObject: UnwrapRef<typeof import('@vueuse/core')['reactifyObject']>
    readonly reactive: UnwrapRef<typeof import('vue')['reactive']>
@ -418,6 +423,7 @@ declare module 'vue' {
    readonly useBrowserLocation: UnwrapRef<typeof import('@vueuse/core')['useBrowserLocation']>
    readonly useCached: UnwrapRef<typeof import('@vueuse/core')['useCached']>
    readonly useClipboard: UnwrapRef<typeof import('@vueuse/core')['useClipboard']>
+    readonly useClipboardItems: UnwrapRef<typeof import('@vueuse/core')['useClipboardItems']>
    readonly useCloned: UnwrapRef<typeof import('@vueuse/core')['useCloned']>
    readonly useColorMode: UnwrapRef<typeof import('@vueuse/core')['useColorMode']>
    readonly useConfirmDialog: UnwrapRef<typeof import('@vueuse/core')['useConfirmDialog']>
@ -610,6 +616,7 @@ declare module '@vue/runtime-core' {
    readonly h: UnwrapRef<typeof import('vue')['h']>
    readonly ignorableWatch: UnwrapRef<typeof import('@vueuse/core')['ignorableWatch']>
    readonly inject: UnwrapRef<typeof import('vue')['inject']>
+    readonly injectLocal: UnwrapRef<typeof import('@vueuse/core')['injectLocal']>
    readonly isDefined: UnwrapRef<typeof import('@vueuse/core')['isDefined']>
    readonly isProxy: UnwrapRef<typeof import('vue')['isProxy']>
    readonly isReactive: UnwrapRef<typeof import('vue')['isReactive']>
@ -639,6 +646,7 @@ declare module '@vue/runtime-core' {
    readonly onUpdated: UnwrapRef<typeof import('vue')['onUpdated']>
    readonly pausableWatch: UnwrapRef<typeof import('@vueuse/core')['pausableWatch']>
    readonly provide: UnwrapRef<typeof import('vue')['provide']>
+    readonly provideLocal: UnwrapRef<typeof import('@vueuse/core')['provideLocal']>
    readonly reactify: UnwrapRef<typeof import('@vueuse/core')['reactify']>
    readonly reactifyObject: UnwrapRef<typeof import('@vueuse/core')['reactifyObject']>
    readonly reactive: UnwrapRef<typeof import('vue')['reactive']>
@ -702,6 +710,7 @@ declare module '@vue/runtime-core' {
    readonly useBrowserLocation: UnwrapRef<typeof import('@vueuse/core')['useBrowserLocation']>
    readonly useCached: UnwrapRef<typeof import('@vueuse/core')['useCached']>
    readonly useClipboard: UnwrapRef<typeof import('@vueuse/core')['useClipboard']>
+    readonly useClipboardItems: UnwrapRef<typeof import('@vueuse/core')['useClipboardItems']>
    readonly useCloned: UnwrapRef<typeof import('@vueuse/core')['useCloned']>
    readonly useColorMode: UnwrapRef<typeof import('@vueuse/core')['useColorMode']>
    readonly useConfirmDialog: UnwrapRef<typeof import('@vueuse/core')['useConfirmDialog']>
--- a/components.d.ts
+++ b/components.d.ts
@ -90,17 +90,28 @@ declare module '@vue/runtime-core' {
    HttpStatusCodes: typeof import('./src/tools/http-status-codes/http-status-codes.vue')['default']
    IbanValidatorAndParser: typeof import('./src/tools/iban-validator-and-parser/iban-validator-and-parser.vue')['default']
    'IconMdi:brushVariant': typeof import('~icons/mdi/brush-variant')['default']
+    'IconMdi:contentCopy': typeof import('~icons/mdi/content-copy')['default']
    'IconMdi:kettleSteamOutline': typeof import('~icons/mdi/kettle-steam-outline')['default']
+    IconMdiArrowDown: typeof import('~icons/mdi/arrow-down')['default']
+    IconMdiArrowRightBottom: typeof import('~icons/mdi/arrow-right-bottom')['default']
+    IconMdiCamera: typeof import('~icons/mdi/camera')['default']
    IconMdiChevronDown: typeof import('~icons/mdi/chevron-down')['default']
    IconMdiChevronRight: typeof import('~icons/mdi/chevron-right')['default']
    IconMdiClose: typeof import('~icons/mdi/close')['default']
    IconMdiContentCopy: typeof import('~icons/mdi/content-copy')['default']
+    IconMdiDeleteOutline: typeof import('~icons/mdi/delete-outline')['default']
+    IconMdiDownload: typeof import('~icons/mdi/download')['default']
    IconMdiEye: typeof import('~icons/mdi/eye')['default']
    IconMdiEyeOff: typeof import('~icons/mdi/eye-off')['default']
    IconMdiHeart: typeof import('~icons/mdi/heart')['default']
+    IconMdiPause: typeof import('~icons/mdi/pause')['default']
+    IconMdiPlay: typeof import('~icons/mdi/play')['default']
+    IconMdiRecord: typeof import('~icons/mdi/record')['default']
+    IconMdiRefresh: typeof import('~icons/mdi/refresh')['default']
    IconMdiSearch: typeof import('~icons/mdi/search')['default']
    IconMdiTranslate: typeof import('~icons/mdi/translate')['default']
    IconMdiTriangleDown: typeof import('~icons/mdi/triangle-down')['default']
+    IconMdiVideo: typeof import('~icons/mdi/video')['default']
    InputCopyable: typeof import('./src/components/InputCopyable.vue')['default']
    IntegerBaseConverter: typeof import('./src/tools/integer-base-converter/integer-base-converter.vue')['default']
    Ipv4AddressConverter: typeof import('./src/tools/ipv4-address-converter/ipv4-address-converter.vue')['default']
@ -123,26 +134,47 @@ declare module '@vue/runtime-core' {
    MacAddressLookup: typeof import('./src/tools/mac-address-lookup/mac-address-lookup.vue')['default']
    MarkdownToHtml: typeof import('./src/tools/markdown-to-html/markdown-to-html.vue')['default']
    MathEvaluator: typeof import('./src/tools/math-evaluator/math-evaluator.vue')['default']
+    MathFormatsConverter: typeof import('./src/tools/math-formats-converter/math-formats-converter.vue')['default']
    MenuBar: typeof import('./src/tools/html-wysiwyg-editor/editor/menu-bar.vue')['default']
    MenuBarItem: typeof import('./src/tools/html-wysiwyg-editor/editor/menu-bar-item.vue')['default']
    MenuIconItem: typeof import('./src/components/MenuIconItem.vue')['default']
    MenuLayout: typeof import('./src/components/MenuLayout.vue')['default']
    MetaTagGenerator: typeof import('./src/tools/meta-tag-generator/meta-tag-generator.vue')['default']
    MimeTypes: typeof import('./src/tools/mime-types/mime-types.vue')['default']
+    NAlert: typeof import('naive-ui')['NAlert']
    NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default']
    NCheckbox: typeof import('naive-ui')['NCheckbox']
+    NCode: typeof import('naive-ui')['NCode']
    NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']
+    NColorPicker: typeof import('naive-ui')['NColorPicker']
    NConfigProvider: typeof import('naive-ui')['NConfigProvider']
+    NDatePicker: typeof import('naive-ui')['NDatePicker']
    NDivider: typeof import('naive-ui')['NDivider']
+    NDynamicInput: typeof import('naive-ui')['NDynamicInput']
    NEllipsis: typeof import('naive-ui')['NEllipsis']
+    NForm: typeof import('naive-ui')['NForm']
+    NFormItem: typeof import('naive-ui')['NFormItem']
+    NGi: typeof import('naive-ui')['NGi']
+    NGrid: typeof import('naive-ui')['NGrid']
    NH1: typeof import('naive-ui')['NH1']
+    NH2: typeof import('naive-ui')['NH2']
    NH3: typeof import('naive-ui')['NH3']
    NIcon: typeof import('naive-ui')['NIcon']
+    NImage: typeof import('naive-ui')['NImage']
+    NInputGroup: typeof import('naive-ui')['NInputGroup']
+    NInputGroupLabel: typeof import('naive-ui')['NInputGroupLabel']
+    NInputNumber: typeof import('naive-ui')['NInputNumber']
    NLayout: typeof import('naive-ui')['NLayout']
    NLayoutSider: typeof import('naive-ui')['NLayoutSider']
    NMenu: typeof import('naive-ui')['NMenu']
-    NSpace: typeof import('naive-ui')['NSpace']
+    NProgress: typeof import('naive-ui')['NProgress']
+    NScrollbar: typeof import('naive-ui')['NScrollbar']
+    NSlider: typeof import('naive-ui')['NSlider']
+    NSpin: typeof import('naive-ui')['NSpin']
+    NStatistic: typeof import('naive-ui')['NStatistic']
+    NSwitch: typeof import('naive-ui')['NSwitch']
    NTable: typeof import('naive-ui')['NTable']
+    NTag: typeof import('naive-ui')['NTag']
    NumeronymGenerator: typeof import('./src/tools/numeronym-generator/numeronym-generator.vue')['default']
    OtpCodeGeneratorAndValidator: typeof import('./src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue')['default']
    PasswordStrengthAnalyser: typeof import('./src/tools/password-strength-analyser/password-strength-analyser.vue')['default']
--- a/package.json
+++ b/package.json
@ -70,7 +70,7 @@
    "highlight.js": "^11.7.0",
    "iarna-toml-esm": "^3.0.5",
    "ibantools": "^4.3.3",
-    "js-base64": "^3.7.6",
+    "js-base64": "^3.7.7",
    "json5": "^2.2.3",
    "jwt-decode": "^3.1.2",
    "libphonenumber-js": "^1.10.28",
@ -115,7 +115,7 @@
    "@types/bcryptjs": "^2.4.2",
    "@types/crypto-js": "^4.1.1",
    "@types/dompurify": "^3.0.5",
-    "@types/jsdom": "^21.0.0",
+    "@types/jsdom": "^21.1.0",
    "@types/lodash": "^4.14.192",
    "@types/mime-types": "^2.1.1",
    "@types/netmask": "^2.0.0",
@ -124,7 +124,7 @@
    "@types/qrcode": "^1.5.0",
    "@types/ua-parser-js": "^0.7.36",
    "@types/uuid": "^9.0.0",
-    "@unocss/eslint-config": "^0.57.0",
+    "@unocss/eslint-config": "^0.57.1",
    "@vitejs/plugin-vue": "^4.3.2",
    "@vitejs/plugin-vue-jsx": "^3.0.2",
    "@vue/compiler-sfc": "^3.2.47",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/public/index.js:Zone.Identifier
+++ b/public/index.js:Zone.Identifier
--- a/public/plurimath-opal.js:Zone.Identifier
+++ b/public/plurimath-opal.js:Zone.Identifier
--- a/public/plurimath/index.js
+++ b/public/plurimath/index.js
@ -0,0 +1,25 @@
+import "./plurimath-opal.js";
+Opal.require("plurimath");
+window.Plurimath = class Plurimath {
+    constructor(data, format) {
+        this.data = Opal.Plurimath.Math.$parse(data, format);
+    }
+    toAsciimath() {
+        return this.data.$to_asciimath();
+    }
+    toLatex() {
+        return this.data.$to_latex();
+    }
+    toMathml() {
+        return this.data.$to_mathml();
+    }
+    toHtml() {
+        return this.data.$to_html();
+    }
+    toOmml() {
+        return this.data.$to_omml();
+    }
+    toDisplay(lang) {
+        return this.data.$to_display(lang);
+    }
+}
--- a/public/plurimath/plurimath-opal.js
+++ b/public/plurimath/plurimath-opal.js
--- a/src/components/TextareaCopyable.vue
+++ b/src/components/TextareaCopyable.vue
@ -7,8 +7,15 @@ import sqlHljs from 'highlight.js/lib/languages/sql';
 import xmlHljs from 'highlight.js/lib/languages/xml';
 import yamlHljs from 'highlight.js/lib/languages/yaml';
 import iniHljs from 'highlight.js/lib/languages/ini';
+import bashHljs from 'highlight.js/lib/languages/bash';
 import markdownHljs from 'highlight.js/lib/languages/markdown';
+import jsHljs from 'highlight.js/lib/languages/javascript';
+import cssHljs from 'highlight.js/lib/languages/css';
+import goHljs from 'highlight.js/lib/languages/go';
+import csharpHljs from 'highlight.js/lib/languages/csharp';
+import { Base64 } from 'js-base64';
 import { useCopy } from '@/composable/copy';
+import { useDownloadFileFromBase64 } from '@/composable/downloadBase64';

 const props = withDefaults(
  defineProps<{
@ -17,12 +24,17 @@ const props = withDefaults(
    language?: string
    copyPlacement?: 'top-right' | 'bottom-right' | 'outside' | 'none'
    copyMessage?: string
+    wordWrap?: boolean
+    downloadFileName?: string
+    downloadButtonText?: string
  }>(),
  {
    followHeightOf: null,
    language: 'txt',
    copyPlacement: 'top-right',
    copyMessage: 'Copy to clipboard',
+    downloadFileName: '',
+    downloadButtonText: 'Download',
  },
 );
 hljs.registerLanguage('sql', sqlHljs);
@ -31,13 +43,25 @@ hljs.registerLanguage('html', xmlHljs);
 hljs.registerLanguage('xml', xmlHljs);
 hljs.registerLanguage('yaml', yamlHljs);
 hljs.registerLanguage('toml', iniHljs);
+hljs.registerLanguage('bash', bashHljs);
 hljs.registerLanguage('markdown', markdownHljs);
+hljs.registerLanguage('css', cssHljs);
+hljs.registerLanguage('javascript', jsHljs);
+hljs.registerLanguage('go', goHljs);
+hljs.registerLanguage('csharp', csharpHljs);

-const { value, language, followHeightOf, copyPlacement, copyMessage } = toRefs(props);
+const { value, language, followHeightOf, copyPlacement, copyMessage, downloadFileName, downloadButtonText } = toRefs(props);
 const { height } = followHeightOf.value ? useElementSize(followHeightOf) : { height: ref(null) };

 const { copy, isJustCopied } = useCopy({ source: value, createToast: false });
 const tooltipText = computed(() => isJustCopied.value ? 'Copied!' : copyMessage.value);
+
+const valueBase64 = computed(() => Base64.encode(value.value));
+const { download } = useDownloadFileFromBase64(
+  {
+    source: valueBase64,
+    filename: downloadFileName,
+  });
 </script>

 <template>
@ -49,11 +73,16 @@ const tooltipText = computed(() => isJustCopied.value ? 'Copied!' : copyMessage.
        :style="height ? `min-height: ${height - 40 /* card padding */ + 10 /* negative margin compensation */}px` : ''"
      >
        <n-config-provider :hljs="hljs">
-          <n-code :code="value" :language="language" :trim="false" data-test-id="area-content" />
+          <n-code :code="value" :language="language" :word-wrap="wordWrap" :trim="false" data-test-id="area-content" />
        </n-config-provider>
      </n-scrollbar>
-      <div absolute right-10px top-10px>
-        <c-tooltip v-if="value" :tooltip="tooltipText" position="left">
+      <div
+        v-if="value && copyPlacement !== 'none'"
+        absolute right-10px
+        :top-10px="copyPlacement === 'top-right' ? '' : 'no'"
+        :bottom-10px="copyPlacement === 'bottom-right' ? '' : 'no'"
+      >
+        <c-tooltip v-if="value && copyPlacement !== 'outside'" :tooltip="tooltipText" position="left">
          <c-button circle important:h-10 important:w-10 @click="copy()">
            <n-icon size="22" :component="Copy" />
          </c-button>
@ -65,6 +94,11 @@ const tooltipText = computed(() => isJustCopied.value ? 'Copied!' : copyMessage.
        {{ tooltipText }}
      </c-button>
    </div>
+    <div v-if="downloadFileName !== '' && value !== ''" mt-5 flex justify-center>
+      <c-button secondary @click="download">
+        {{ downloadButtonText }}
+      </c-button>
+    </div>
  </div>
 </template>

--- a/src/composable/downloadBase64.ts
+++ b/src/composable/downloadBase64.ts
@ -1,6 +1,7 @@
 import { extension as getExtensionFromMimeType, extension as getMimeTypeFromExtension } from 'mime-types';
-import type { Ref } from 'vue';
+import type { MaybeRef, Ref } from 'vue';
 import _ from 'lodash';
+import { get } from '@vueuse/core';

 export {
  getMimeTypeFromBase64,
@ -75,21 +76,11 @@ function downloadFromBase64({ sourceValue, filename, extension, fileMimeType }:
 }

 function useDownloadFileFromBase64(
-  { source, filename, extension, fileMimeType }:
-  { source: Ref<string>; filename?: string; extension?: string; fileMimeType?: string }) {
-  return {
-    download() {
-      downloadFromBase64({ sourceValue: source.value, filename, extension, fileMimeType });
-    },
-  };
-}
-
-function useDownloadFileFromBase64Refs(
  { source, filename, extension }:
-  { source: Ref<string>; filename?: Ref<string>; extension?: Ref<string> }) {
+  { source: MaybeRef<string>; filename?: MaybeRef<string>; extension?: MaybeRef<string> }) {
  return {
    download() {
-      downloadFromBase64({ sourceValue: source.value, filename: filename?.value, extension: extension?.value });
+      downloadFromBase64({ sourceValue: get(source), filename: get(filename), extension: get(extension) });
    },
  };
 }
@ -116,3 +107,13 @@ function previewImageFromBase64(base64String: string): HTMLImageElement {

  return img;
 }
+
+function useDownloadFileFromBase64Refs(
+  { source, filename, extension }:
+  { source: Ref<string>; filename?: Ref<string>; extension?: Ref<string> }) {
+  return {
+    download() {
+      downloadFromBase64({ sourceValue: source.value, filename: filename?.value, extension: extension?.value });
+    },
+  };
+}
--- a/src/modules/command-palette/command-palette.vue
+++ b/src/modules/command-palette/command-palette.vue
@ -128,7 +128,7 @@ function activateOption(option: PaletteOption) {
      <c-input-text ref="inputRef" v-model:value="searchPrompt" raw-text placeholder="Type to search a tool or a command..." autofocus clearable />

      <div v-for="(options, category) in filteredSearchResult" :key="category">
-        <div ml-3 mt-3 text-sm font-bold text-primary op-60>
+        <div ml-3 mt-3 text-sm text-primary font-bold op-60>
          {{ category }}
        </div>
        <command-palette-option v-for="option in options" :key="option.name" :option="option" :selected="selectedOptionIndex === getOptionIndex(option)" @activated="activateOption" />
--- a/src/tools/index.ts
+++ b/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 emailNormalizer } from './email-normalizer';

 import { tool as asciiTextDrawer } from './ascii-text-drawer';
@ -168,7 +169,12 @@ export const toolsByCategory: ToolCategory[] = [
  },
  {
    name: 'Math',
-    components: [mathEvaluator, etaCalculator, percentageCalculator],
+    components: [
+      mathEvaluator,
+      etaCalculator,
+      percentageCalculator,
+      mathFormatsConverter,
+    ],
  },
  {
    name: 'Measurement',
--- a/src/tools/math-formats-converter/index.ts
+++ b/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 Formats Converter',
+  path: '/math-formats-converter',
+  description: 'Convert mathematical expression between formats',
+  keywords: ['math', 'formats', 'converter', 'latex', 'mathml', 'asciimath', 'omml', 'html'],
+  component: () => import('./math-formats-converter.vue'),
+  icon: EqualNot,
+  createdAt: new Date('2024-05-11'),
+});
--- a/src/tools/math-formats-converter/math-formats-converter.vue
+++ b/src/tools/math-formats-converter/math-formats-converter.vue
@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { useScriptTag } from '@vueuse/core';
+import { useQueryParamOrStorage } from '@/composable/queryParams';
+
+const { load: loadPlurimath } = useScriptTag('/plurimath/index.js', undefined, { type: 'module', manual: true });
+
+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 = useQueryParamOrStorage({ name: 'src', storageName: 'math-fmts-conv:src', defaultValue: 'latex' });
+const targetFormat = useQueryParamOrStorage({ name: 'target', storageName: 'math-fmts-conv:target', defaultValue: 'mathml' });
+const target = computedAsync(async () => {
+  const sourceValue = source.value;
+  const sourceFormatValue = sourceFormat.value;
+  const targetFormatValue = targetFormat.value;
+  if (!sourceValue) {
+    return '';
+  }
+  if (sourceFormatValue === targetFormatValue) {
+    return sourceValue;
+  }
+  await loadPlurimath();
+  return new Promise<string>((resolve, _reject) => {
+    try {
+      const formula = new Plurimath(sourceValue, sourceFormatValue);
+      let result;
+      switch (targetFormatValue) {
+        case 'asciimath':
+          result = formula.toAsciimath();
+          break;
+        case 'latex':
+          result = formula.toLatex();
+          break;
+        case 'mathml':
+          result = formula.toMathml();
+          break;
+        case 'html':
+          result = formula.toHtml();
+          break;
+        case 'omml':
+          result = formula.toOmml();
+          break;
+        default:
+          result = '# unknown format';
+          break;
+      }
+      resolve(result);
+    }
+    catch (e: any) {
+      resolve(`# error converting formula: ${e.toString()}`);
+    }
+  });
+});
+</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 v-if="target" :value="target" :language="targetFormat" word-wrap />
+  </div>
+</template>
--- a/src/tools/math-formats-converter/plurimath.d.ts
+++ b/src/tools/math-formats-converter/plurimath.d.ts
@ -0,0 +1,15 @@
+class Plurimath {
+    constructor(data: string, format: string);
+    toAsciimath(): string;
+    toLatex(): string;
+    toMathml(): string;
+    toHtml(): string;
+    toOmml(): string;
+    toDisplay(lang: string): string;
+}
+
+declare global {
+    interface Window {
+        Plurimath: Plurimath
+    }
+  }
--- a/src/ui/c-select/c-select.vue
+++ b/src/ui/c-select/c-select.vue
@ -151,7 +151,7 @@ function onSearchInput() {
      >
        <div flex-1 truncate>
          <slot name="displayed-value">
-            <input v-if="searchable && isOpen" ref="searchInputRef" v-model="searchQuery" type="text" placeholder="Search..." class="search-input" w-full lh-normal color-current @input="onSearchInput">
+            <input v-if="searchable && isOpen" ref="searchInputRef" v-model="searchQuery" type="text" placeholder="Search..." class="search-input" w-full color-current lh-normal @input="onSearchInput">
            <span v-else-if="selectedOption" lh-normal>
              {{ selectedOption.label }}
            </span>
--- a/src/ui/c-table/c-table.vue
+++ b/src/ui/c-table/c-table.vue
@ -39,7 +39,7 @@ const headers = computed(() => {
 <template>
  <div class="relative overflow-x-auto rounded">
    <table class="w-full border-collapse text-left text-sm text-gray-500 dark:text-gray-400" role="table" :aria-label="description">
-      <thead v-if="!hideHeaders" class="bg-#ffffff uppercase text-gray-700 dark:bg-#333333 dark:text-gray-400" border-b="1px solid dark:transparent #efeff5">
+      <thead v-if="!hideHeaders" class="bg-#ffffff text-gray-700 uppercase dark:bg-#333333 dark:text-gray-400" border-b="1px solid dark:transparent #efeff5">
        <tr>
          <th v-for="header in headers" :key="header.key" scope="col" class="px-6 py-3 text-xs">
            {{ header.label }}