feat(ASCII Art Drawer): add coding languages support

Add support for outputing in many coding languages (Python , bash....)
FIx other part of CorentinTh#934

Author: sharevb

components.d.ts

@@ -159,6 +159,7 @@ declare module '@vue/runtime-core' {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     RsaKeyPairGenerator: typeof import('./src/tools/rsa-key-pair-generator/rsa-key-pair-generator.vue')['default']
+    SafelinkDecoder: typeof import('./src/tools/safelink-decoder/safelink-decoder.vue')['default']
     SlugifyString: typeof import('./src/tools/slugify-string/slugify-string.vue')['default']
     SpanCopyable: typeof import('./src/components/SpanCopyable.vue')['default']
     SqlPrettify: typeof import('./src/tools/sql-prettify/sql-prettify.vue')['default']

src/tools/ascii-text-drawer/ascii-text-drawer.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import figlet from 'figlet';
 import TextareaCopyable from '@/components/TextareaCopyable.vue';
+import { languages, translateToLanguage } from '@/utils/ascii-lang-utils';
 
 const input = ref('Ascii ART');
+const language = useStorage('ascii-text-drawer:language', 'raw');
 const font = useStorage('ascii-text-drawer:font', 'Standard');
 const width = useStorage('ascii-text-drawer:width', 80);
 const output = ref('');
@@ -11,16 +13,24 @@ const processing = ref(false);
 
 figlet.defaults({ fontPath: '//unpkg.com/[email protected]/fonts/' });
 
+const languagesOptions = languages.map(lang => ({ value: lang.id, label: lang.name }));
+
+figlet.defaults({ fontPath: '//unpkg.com/[email protected]/fonts/' });
+
 watchEffect(async () => {
+  const inputValue = input.value;
+  const languageValue = language.value;
+  const fontValue = font.value;
+  const widthValue = width.value;
   processing.value = true;
   try {
     const options: figlet.Options = {
-      font: font.value as figlet.Fonts,
-      width: width.value,
+      font: fontValue as figlet.Fonts,
+      width: widthValue,
       whitespaceBreak: true,
     };
-    output.value = await (new Promise<string>((resolve, reject) =>
-      figlet.text(input.value, options,
+    const rawOutput = await (new Promise<string>((resolve, reject) =>
+      figlet.text(inputValue, options,
         (err, text) => {
           if (err) {
             reject(err);
@@ -29,6 +39,8 @@ watchEffect(async () => {
 
           resolve(text ?? '');
         })));
+
+    output.value = translateToLanguage(rawOutput, languageValue);
     errored.value = false;
   }
   catch (e: any) {
@@ -50,6 +62,7 @@ const fonts = ['1Row', '3-D', '3D Diagonal', '3D-ASCII', '3x5', '4Max', '5 Line
       multiline
       rows="4"
     />
+    <c-select v-model:value="language" :options="languagesOptions" searchable mt-3 />
 
     <n-divider />
 

src/utils/ascii-lang-utils.ts

@@ -7,6 +7,7 @@ function escapeXml(unsafe: string) {
       case '\'': return ''';
       case '"': return '"';
     }
+    return '';
   });
 }