feat(new tool): text to unicode names

Fix #544

components.d.ts

@@ -130,21 +130,14 @@ declare module '@vue/runtime-core' {
     NCode: typeof import('naive-ui')['NCode']
     NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
-    NDivider: typeof import('naive-ui')['NDivider']
     NEllipsis: typeof import('naive-ui')['NEllipsis']
-    NFormItem: typeof import('naive-ui')['NFormItem']
-    NGi: typeof import('naive-ui')['NGi']
-    NGrid: typeof import('naive-ui')['NGrid']
     NH1: typeof import('naive-ui')['NH1']
     NH3: typeof import('naive-ui')['NH3']
     NIcon: typeof import('naive-ui')['NIcon']
-    NInputNumber: typeof import('naive-ui')['NInputNumber']
-    NLabel: typeof import('naive-ui')['NLabel']
     NLayout: typeof import('naive-ui')['NLayout']
     NLayoutSider: typeof import('naive-ui')['NLayoutSider']
     NMenu: typeof import('naive-ui')['NMenu']
     NScrollbar: typeof import('naive-ui')['NScrollbar']
-    NSpin: typeof import('naive-ui')['NSpin']
     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']
@@ -172,6 +165,7 @@ declare module '@vue/runtime-core' {
     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']
+    TextToUnicodeNames: typeof import('./src/tools/text-to-unicode-names/text-to-unicode-names.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']

package.json

@@ -42,6 +42,7 @@
     "@tiptap/starter-kit": "2.1.6",
     "@tiptap/vue-3": "2.0.3",
     "@types/figlet": "^1.5.8",
+    "@unicode/unicode-15.1.0": "^1.5.2",
     "@vicons/material": "^0.12.0",
     "@vicons/tabler": "^0.12.0",
     "@vueuse/core": "^10.3.0",
@@ -87,6 +88,7 @@
     "unicode-emoji-json": "^0.4.0",
     "unplugin-auto-import": "^0.16.4",
     "uuid": "^9.0.0",
+    "vite-plugin-node-polyfills": "^0.22.0",
     "vue": "^3.3.4",
     "vue-i18n": "^9.9.1",
     "vue-router": "^4.1.6",

src/components/TextareaCopyable.vue

@@ -16,6 +16,7 @@ const props = withDefaults(
     language?: string
     copyPlacement?: 'top-right' | 'bottom-right' | 'outside' | 'none'
     copyMessage?: string
+    wordWrap?: boolean
   }>(),
   {
     followHeightOf: null,
@@ -47,7 +48,7 @@ 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>

src/tools/index.ts

@@ -6,6 +6,7 @@ import { tool as asciiTextDrawer } from './ascii-text-drawer';
 
 import { tool as textToUnicode } from './text-to-unicode';
 import { tool as safelinkDecoder } from './safelink-decoder';
+import { tool as textToUnicodeNames } from './text-to-unicode-names';
 import { tool as pdfSignatureChecker } from './pdf-signature-checker';
 import { tool as numeronymGenerator } from './numeronym-generator';
 import { tool as macAddressGenerator } from './mac-address-generator';
@@ -100,6 +101,7 @@ export const toolsByCategory: ToolCategory[] = [
       textToNatoAlphabet,
       textToBinary,
       textToUnicode,
+      textToUnicodeNames,
       yamlToJson,
       yamlToToml,
       jsonToYaml,

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

@@ -0,0 +1,12 @@
+import { Language } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Text to Unicode Names',
+  path: '/text-to-unicode-names',
+  description: 'Convert a text to its hexadecimal character codes and Unicode Names for each character',
+  keywords: ['text', 'unicode', 'name', 'hexa', 'char', 'code'],
+  component: () => import('./text-to-unicode-names.vue'),
+  icon: Language,
+  createdAt: new Date('2024-06-10'),
+});

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

@@ -0,0 +1,23 @@
+import { describe, expect, it } from 'vitest';
+import { convertTextToUnicodeNames } from './text-to-unicode-names.service';
+
+describe('text-to-binary', () => {
+  describe('convertTextToUnicodeNames', () => {
+    it('a text string is converted to its unicode names representation', () => {
+      expect(convertTextToUnicodeNames('A')).toBe(
+        'U+0041 (LATIN CAPITAL LETTER A)');
+      expect(convertTextToUnicodeNames('hello')).toBe(
+        'U+0068 (LATIN SMALL LETTER H) U+0065 (LATIN SMALL LETTER E) U+006C (LATIN SMALL LETTER L) U+006C (LATIN SMALL LETTER L) U+006F (LATIN SMALL LETTER O)');
+      expect(convertTextToUnicodeNames('')).toBe(
+        '');
+      expect(convertTextToUnicodeNames('être 1 $ ¤ …')).toBe(
+        'U+00EA (LATIN SMALL LETTER E WITH CIRCUMFLEX) U+0074 (LATIN SMALL LETTER T) U+0072 (LATIN SMALL LETTER R) U+0065 (LATIN SMALL LETTER E) U+0020 (SPACE) U+0031 (DIGIT ONE) U+0020 (SPACE) U+0024 (DOLLAR SIGN) U+0020 (SPACE) U+00A4 (CURRENCY SIGN) U+0020 (SPACE) U+2026 (HORIZONTAL ELLIPSIS)');
+      expect(convertTextToUnicodeNames('⁇ 𥆧 💩')).toBe(
+        'U+2047 (DOUBLE QUESTION MARK) U+0020 (SPACE) U+251A7 (CJK Ideograph Extension B) U+0020 (SPACE) U+1F4A9 (PILE OF POO)');
+    });
+    it('the separator between octets can be changed', () => {
+      expect(convertTextToUnicodeNames('hello', { separator: ' ; ' })).toBe(
+        'U+0068 (LATIN SMALL LETTER H) ; U+0065 (LATIN SMALL LETTER E) ; U+006C (LATIN SMALL LETTER L) ; U+006C (LATIN SMALL LETTER L) ; U+006F (LATIN SMALL LETTER O)');
+    });
+  });
+});

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

@@ -0,0 +1,7 @@
+import unicode from '@unicode/unicode-15.1.0/Names/index.js';
+
+export function convertTextToUnicodeNames(text: string, { separator = ' ' }: { separator?: string } = {}): string {
+  return [...text]
+    .map(char => `U+${char.codePointAt(0)?.toString(16).toUpperCase().padStart(4, '0')} (${(unicode.get(char.codePointAt(0)) || 'UNKNOWN CHARACTER')})`)
+    .join(separator);
+}

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

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { convertTextToUnicodeNames } from './text-to-unicode-names.service';
+
+const inputText = ref('');
+const unicodeNamesFromText = computed(() => convertTextToUnicodeNames(inputText.value));
+</script>
+
+<template>
+  <c-card title="Text to Unicode Names">
+    <c-input-text
+      v-model:value="inputText"
+      multiline placeholder="e.g. 'Hello world'"
+      label="Enter text to convert to Unicode Names"
+      autosize autofocus raw-text
+    />
+    <textarea-copyable
+      v-model:value="unicodeNamesFromText"
+      word-wrap
+      label="Unicode Names from your text" multiline raw-text readonly mt-2
+      placeholder="The Unicode Names representation of your text will be here"
+    />
+  </c-card>
+</template>

src/tools/text-to-unicode-names/unicode.d.ts

@@ -0,0 +1,4 @@
+declare module '@unicode/unicode-15.1.0/Names/index.js'{
+    const unicode: HashSet<number, string>;
+    export default unicode;
+}

vite.config.ts

@@ -1,5 +1,6 @@
 import { resolve } from 'node:path';
 import { URL, fileURLToPath } from 'node:url';
+import { nodePolyfills } from 'vite-plugin-node-polyfills';
 
 import VueI18n from '@intlify/unplugin-vue-i18n/vite';
 import vue from '@vitejs/plugin-vue';
@@ -97,6 +98,7 @@ export default defineConfig({
       resolvers: [NaiveUiResolver(), IconsResolver({ prefix: 'icon' })],
     }),
     Unocss(),
+    nodePolyfills(),
   ],
   base: baseUrl,
   resolve: {