feat(new-tool): added unicode conversion utilities (CorentinTh#858)

* feat: add Text to Unicode tool

* Update src/tools/text-to-unicode/index.ts

---------

Co-authored-by: Corentin THOMASSET <[email protected]>

Author: 2 people

components.d.ts

@@ -198,6 +198,7 @@ declare module '@vue/runtime-core' {
     TextStatistics: typeof import('./src/tools/text-statistics/text-statistics.vue')['default']
     TextToBinary: typeof import('./src/tools/text-to-binary/text-to-binary.vue')['default']
     TextToNatoAlphabet: typeof import('./src/tools/text-to-nato-alphabet/text-to-nato-alphabet.vue')['default']
+    TextToUnicode: typeof import('./src/tools/text-to-unicode/text-to-unicode.vue')['default']
     TokenDisplay: typeof import('./src/tools/otp-code-generator-and-validator/token-display.vue')['default']
     'TokenGenerator.tool': typeof import('./src/tools/token-generator/token-generator.tool.vue')['default']
     TomlToJson: typeof import('./src/tools/toml-to-json/toml-to-json.vue')['default']

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 textToUnicode } from './text-to-unicode';
 import { tool as pdfSignatureChecker } from './pdf-signature-checker';
 import { tool as numeronymGenerator } from './numeronym-generator';
 import { tool as macAddressGenerator } from './mac-address-generator';
@@ -93,6 +94,7 @@ export const toolsByCategory: ToolCategory[] = [
       caseConverter,
       textToNatoAlphabet,
       textToBinary,
+      textToUnicode,
       yamlToJson,
       yamlToToml,
       jsonToYaml,

src/tools/text-to-unicode/index.ts

@@ -0,0 +1,12 @@
+import { TextWrap } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Text to Unicode',
+  path: '/text-to-unicode',
+  description: 'Parse and convert text to unicode and vice-versa',
+  keywords: ['text', 'to', 'unicode'],
+  component: () => import('./text-to-unicode.vue'),
+  icon: TextWrap,
+  createdAt: new Date('2024-01-31'),
+});

src/tools/text-to-unicode/text-to-unicode.e2e.spec.ts

@@ -0,0 +1,25 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('Tool - Text to Unicode', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/text-to-unicode');
+  });
+
+  test('Has correct title', async ({ page }) => {
+    await expect(page).toHaveTitle('Text to Unicode - IT Tools');
+  });
+
+  test('Text to unicode conversion', async ({ page }) => {
+    await page.getByTestId('text-to-unicode-input').fill('it-tools');
+    const unicode = await page.getByTestId('text-to-unicode-output').inputValue();
+
+    expect(unicode).toEqual('it-tools');
+  });
+
+  test('Unicode to text conversion', async ({ page }) => {
+    await page.getByTestId('unicode-to-text-input').fill('it-tools');
+    const text = await page.getByTestId('unicode-to-text-output').inputValue();
+
+    expect(text).toEqual('it-tools');
+  });
+});

src/tools/text-to-unicode/text-to-unicode.service.test.ts

@@ -0,0 +1,20 @@
+import { describe, expect, it } from 'vitest';
+import { convertTextToUnicode, convertUnicodeToText } from './text-to-unicode.service';
+
+describe('text-to-unicode', () => {
+  describe('convertTextToUnicode', () => {
+    it('a text string is converted to unicode representation', () => {
+      expect(convertTextToUnicode('A')).toBe('A');
+      expect(convertTextToUnicode('linke the string convert to unicode')).toBe('linke the string convert to unicode');
+      expect(convertTextToUnicode('')).toBe('');
+    });
+  });
+
+  describe('convertUnicodeToText', () => {
+    it('an unicode string is converted to its text representation', () => {
+      expect(convertUnicodeToText('A')).toBe('A');
+      expect(convertUnicodeToText('linke the string convert to unicode')).toBe('linke the string convert to unicode');
+      expect(convertUnicodeToText('')).toBe('');
+    });
+  });
+});

src/tools/text-to-unicode/text-to-unicode.service.ts

@@ -0,0 +1,9 @@
+function convertTextToUnicode(text: string): string {
+  return text.split('').map(value => `&#${value.charCodeAt(0)};`).join('');
+}
+
+function convertUnicodeToText(unicodeStr: string): string {
+  return unicodeStr.replace(/&#(\d+);/g, (match, dec) => String.fromCharCode(dec));
+}
+
+export { convertTextToUnicode, convertUnicodeToText };

src/tools/text-to-unicode/text-to-unicode.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { convertTextToUnicode, convertUnicodeToText } from './text-to-unicode.service';
+import { useCopy } from '@/composable/copy';
+
+const inputText = ref('');
+const unicodeFromText = computed(() => inputText.value.trim() === '' ? '' : convertTextToUnicode(inputText.value));
+const { copy: copyUnicode } = useCopy({ source: unicodeFromText });
+
+const inputUnicode = ref('');
+const textFromUnicode = computed(() => inputUnicode.value.trim() === '' ? '' : convertUnicodeToText(inputUnicode.value));
+const { copy: copyText } = useCopy({ source: textFromUnicode });
+</script>
+
+<template>
+  <c-card title="Text to Unicode">
+    <c-input-text v-model:value="inputText" multiline placeholder="e.g. 'Hello Avengers'" label="Enter text to convert to binary" autosize autofocus raw-text test-id="text-to-unicode-input" />
+    <c-input-text v-model:value="unicodeFromText" label="Unicode from your text" multiline raw-text readonly mt-2 placeholder="The unicode representation of your text will be here" test-id="text-to-unicode-output" />
+    <div mt-2 flex justify-center>
+      <c-button :disabled="!unicodeFromText" @click="copyUnicode()">
+        Copy binary to clipboard
+      </c-button>
+    </div>
+  </c-card>
+
+  <c-card title="Unicode to Text">
+    <c-input-text v-model:value="inputUnicode" multiline placeholder="Input Unicode" label="Enter unicode to convert to text" autosize raw-text test-id="unicode-to-text-input" />
+    <c-input-text v-model:value="textFromUnicode" label="Text from your Unicode" multiline raw-text readonly mt-2 placeholder="The text representation of your unicode will be here" test-id="unicode-to-text-output" />
+    <div mt-2 flex justify-center>
+      <c-button :disabled="!textFromUnicode" @click="copyText()">
+        Copy text to clipboard
+      </c-button>
+    </div>
+  </c-card>
+</template>