Merge 10a3babb75 into 67094980c9

components.d.ts

@@ -73,6 +73,7 @@ declare module '@vue/runtime-core' {
     DynamicValues: typeof import('./src/tools/benchmark-builder/dynamic-values.vue')['default']
     Editor: typeof import('./src/tools/html-wysiwyg-editor/editor/editor.vue')['default']
     EmailNormalizer: typeof import('./src/tools/email-normalizer/email-normalizer.vue')['default']
+    EmailParser: typeof import('./src/tools/email-parser/email-parser.vue')['default']
     EmojiCard: typeof import('./src/tools/emoji-picker/emoji-card.vue')['default']
     EmojiGrid: typeof import('./src/tools/emoji-picker/emoji-grid.vue')['default']
     EmojiPicker: typeof import('./src/tools/emoji-picker/emoji-picker.vue')['default']
@@ -135,20 +136,20 @@ declare module '@vue/runtime-core' {
     NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
     NEllipsis: typeof import('naive-ui')['NEllipsis']
-    NForm: typeof import('naive-ui')['NForm']
-    NFormItem: typeof import('naive-ui')['NFormItem']
     NH1: typeof import('naive-ui')['NH1']
     NH3: typeof import('naive-ui')['NH3']
     NIcon: typeof import('naive-ui')['NIcon']
-    NInputNumber: typeof import('naive-ui')['NInputNumber']
     NLayout: typeof import('naive-ui')['NLayout']
     NLayoutSider: typeof import('naive-ui')['NLayoutSider']
     NMenu: typeof import('naive-ui')['NMenu']
+    NRadio: typeof import('naive-ui')['NRadio']
+    NRadioGroup: typeof import('naive-ui')['NRadioGroup']
     NScrollbar: typeof import('naive-ui')['NScrollbar']
-    NSlider: typeof import('naive-ui')['NSlider']
+    NSpace: typeof import('naive-ui')['NSpace']
-    NSwitch: typeof import('naive-ui')['NSwitch']
+    NTable: typeof import('naive-ui')['NTable']
     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']
+    OutlookParser: typeof import('./src/tools/outlook-parser/outlook-parser.vue')['default']
     PasswordStrengthAnalyser: typeof import('./src/tools/password-strength-analyser/password-strength-analyser.vue')['default']
     PdfSignatureChecker: typeof import('./src/tools/pdf-signature-checker/pdf-signature-checker.vue')['default']
     PdfSignatureDetails: typeof import('./src/tools/pdf-signature-checker/components/pdf-signature-details.vue')['default']

package.json

@@ -37,6 +37,8 @@
   "dependencies": {
     "@it-tools/bip39": "^0.0.4",
     "@it-tools/oggen": "^1.3.0",
+    "@kenjiuno/decompressrtf": "^0.1.4",
+    "@kenjiuno/msgreader": "^1.22.0",
     "@sindresorhus/slugify": "^2.2.1",
     "@tiptap/pm": "2.1.6",
     "@tiptap/starter-kit": "2.1.6",
@@ -66,6 +68,7 @@
     "highlight.js": "^11.7.0",
     "iarna-toml-esm": "^3.0.5",
     "ibantools": "^4.3.3",
+    "iconv-lite": "^0.6.3",
     "js-base64": "^3.7.6",
     "json5": "^2.2.3",
     "jwt-decode": "^3.1.2",
@@ -83,7 +86,9 @@
     "pdf-signature-reader": "^1.4.2",
     "pinia": "^2.0.34",
     "plausible-tracker": "^0.3.8",
+    "postal-mime": "^2.2.7",
     "qrcode": "^1.5.1",
+    "rtf-stream-parser": "^3.8.0",
     "sql-formatter": "^13.0.0",
     "ua-parser-js": "^1.0.35",
     "ulid": "^2.3.0",
@@ -136,6 +141,7 @@
     "unplugin-icons": "^0.17.0",
     "unplugin-vue-components": "^0.25.0",
     "vite": "^4.4.9",
+    "vite-plugin-node-polyfills": "^0.22.0",
     "vite-plugin-pwa": "^0.16.0",
     "vite-plugin-vue-markdown": "^0.23.5",
     "vite-svg-loader": "^4.0.0",

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>
+      <div
-        <c-tooltip v-if="value" :tooltip="tooltipText" position="left">
+        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>
 

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 });
+    },
+  };
+}

src/tools/email-parser/email-parser.vue

@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import PostalMime from 'postal-mime';
+
+const inputType = ref<'file' | 'content'>('file');
+const emailContent = ref('');
+const fileInput = ref() as Ref<File | null>;
+const error = ref('');
+
+const parsedEmail = computedAsync(async () => {
+  const emailContentValue = emailContent.value;
+  const file = fileInput.value;
+  error.value = '';
+  try {
+    if (inputType.value === 'file' && file) {
+      return await PostalMime.parse(await file.arrayBuffer());
+    }
+    else if (inputType.value === 'content' && emailContentValue) {
+      return await PostalMime.parse(emailContentValue);
+    }
+    else {
+      return null;
+    }
+  }
+  catch (e: any) {
+    error.value = e.toString();
+    return null;
+  }
+});
+
+function downloadFile(data: ArrayBuffer, fileName: string, fileType: string) {
+  const blob = new Blob([data], { type: fileType || 'application/octet-stream' });
+  const downloadUrl = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = downloadUrl;
+  a.download = fileName;
+  document.body.appendChild(a);
+  a.click();
+  URL.revokeObjectURL(downloadUrl);
+}
+
+function onUpload(file: File) {
+  if (file) {
+    fileInput.value = file;
+  }
+}
+</script>
+
+<template>
+  <div style="max-width: 600px;">
+    <c-card title="Input" mb-2>
+      <n-radio-group v-model:value="inputType" name="radiogroup" mb-2 flex justify-center>
+        <n-space>
+          <n-radio
+            value="file"
+            label="File"
+          />
+          <n-radio
+            value="content"
+            label="Content"
+          />
+        </n-space>
+      </n-radio-group>
+
+      <c-file-upload
+        v-if="inputType === 'file'"
+        title="Drag and drop EML file here, or click to select a file"
+        @file-upload="onUpload"
+      />
+
+      <c-input-text
+        v-if="inputType === 'content'"
+        v-model:value="emailContent"
+        label="Email Content"
+        multiline
+        placeholder="Put your eml/email content here..."
+        rows="15"
+        mb-2
+      />
+    </c-card>
+
+    <c-alert v-if="error">
+      {{ error }}
+    </c-alert>
+
+    <c-card v-if="!error && parsedEmail" title="Output">
+      <input-copyable v-if="fileInput?.name" label="File Name" :value="fileInput?.name" />
+      <input-copyable v-if="parsedEmail.date" label="Date" :value="parsedEmail.date" />
+      <input-copyable v-if="parsedEmail.from?.name" label="From (name)" :value="parsedEmail.from?.name" />
+      <input-copyable v-if="parsedEmail.from" label="From (address)" :value="parsedEmail.from?.address || parsedEmail.from" />
+      <input-copyable v-if="parsedEmail.to" label="To" :value="JSON.stringify(parsedEmail.to)" />
+      <input-copyable v-if="parsedEmail.cc" label="Cc" :value="JSON.stringify(parsedEmail.cc)" />
+      <input-copyable v-if="parsedEmail.bcc" label="Bcc" :value="JSON.stringify(parsedEmail.bcc)" />
+      <input-copyable v-if="parsedEmail.replyTo" label="Reply-To" :value="JSON.stringify(parsedEmail.replyTo)" />
+      <input-copyable v-if="parsedEmail.subject" label="Subject" :value="parsedEmail.subject" />
+      <c-card v-if="parsedEmail.text" title="Plain Content" mb-2>
+        <details>
+          <summary>See content</summary>
+          <textarea-copyable :value="parsedEmail.text" word-wrap />
+        </details>
+      </c-card>
+      <c-card v-if="parsedEmail.html" title="Html Content" mb-2>
+        <details>
+          <summary>See content</summary>
+          <textarea-copyable :value="parsedEmail.html" word-wrap />
+        </details>
+      </c-card>
+      <c-card v-if="parsedEmail?.attachments?.length" title="Attachments" mb-2>
+        <n-table>
+          <thead>
+            <tr>
+              <th scope="col">
+                Attachment
+              </th><th scope="col" />
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="(h, index) in parsedEmail.attachments || []"
+              :key="index"
+            >
+              <td>
+                {{ `${h.filename || h.contentId || 'noname'} (${h.mimeType}) / ${h.disposition}` }}
+              </td>
+              <td>
+                <c-button @click="downloadFile(h.content, h.filename || h.contentId || 'noname', h.mimeType)">
+                  Download
+                </c-button>
+              </td>
+            </tr>
+          </tbody>
+        </n-table>
+      </c-card>
+
+      <input-copyable v-if="parsedEmail.messageId" label="Message Id" :value="parsedEmail.messageId" />
+      <input-copyable v-if="parsedEmail.inReplyTo" label="In Reply To" :value="parsedEmail.inReplyTo" />
+      <input-copyable v-if="parsedEmail.references" label="References" :value="parsedEmail.references" />
+      <input-copyable v-if="parsedEmail.deliveredTo" label="Delivered To" :value="parsedEmail.deliveredTo" />
+      <input-copyable v-if="parsedEmail.returnPath" label="Return Path" :value="parsedEmail.returnPath" />
+      <input-copyable v-if="parsedEmail.sender?.name" label="Sender (name)" :value="parsedEmail.sender?.name" />
+      <input-copyable v-if="parsedEmail.sender" label="Sender (address)" :value="parsedEmail.sender?.address || parsedEmail.sender" />
+
+      <c-card title="All Headers" mt-2>
+        <input-copyable
+          v-for="(h, index) in parsedEmail.headers || []"
+          :key="index"
+          :label="h.key"
+          :value="h.value"
+        />
+      </c-card>
+    </c-card>
+  </div>
+</template>

src/tools/email-parser/index.ts

@@ -0,0 +1,12 @@
+import { Mail } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Email Parser',
+  path: '/email-parser',
+  description: 'Parse and extract information from raw Email content',
+  keywords: ['email', 'parser', 'header', 'rfc2822', 'rfc5322', 'rfc822'],
+  component: () => import('./email-parser.vue'),
+  icon: Mail,
+  createdAt: new Date('2024-08-15'),
+});

src/tools/index.ts

@@ -2,6 +2,8 @@ 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 emailNormalizer } from './email-normalizer';
+import { tool as emailParser } from './email-parser';
+import { tool as outlookParser } from './outlook-parser';
 
 import { tool as asciiTextDrawer } from './ascii-text-drawer';
 
@@ -160,7 +162,16 @@ export const toolsByCategory: ToolCategory[] = [
   },
   {
     name: 'Network',
-    components: [ipv4SubnetCalculator, ipv4AddressConverter, ipv4RangeExpander, macAddressLookup, macAddressGenerator, ipv6UlaGenerator],
+    components: [
+      ipv4SubnetCalculator,
+      ipv4AddressConverter,
+      ipv4RangeExpander,
+      macAddressLookup,
+      macAddressGenerator,
+      ipv6UlaGenerator,
+      emailParser,
+      outlookParser,
+    ],
   },
   {
     name: 'Math',

src/tools/outlook-parser/index.ts

@@ -0,0 +1,12 @@
+import { Mail } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Outlook MSG Parser',
+  path: '/outlook-parser',
+  description: 'Parse Outlook MSG Files',
+  keywords: ['outlook', 'email', 'msg', 'parser'],
+  component: () => import('./outlook-parser.vue'),
+  icon: Mail,
+  createdAt: new Date('2024-08-15'),
+});

src/tools/outlook-parser/outlook-parser.vue

@@ -0,0 +1,182 @@
+<script setup lang="ts">
+import { Buffer } from 'node:buffer';
+import MsgReader, { type FieldsData } from '@kenjiuno/msgreader';
+import { getProps } from '@kenjiuno/msgreader/lib/Defs.js';
+import { deEncapsulateSync } from 'rtf-stream-parser';
+import { decompressRTF } from '@kenjiuno/decompressrtf';
+import iconv from 'iconv-lite';
+
+const fileInput = ref() as Ref<File | null>;
+const error = ref('');
+
+function getPropertyName(tag: string | undefined) {
+  if (!tag) {
+    return '';
+  }
+  const tagLower = tag.toLocaleLowerCase();
+  const prop = getProps().find(p => p.key?.toLocaleLowerCase() === tagLower);
+  if (!prop) {
+    return tag;
+  }
+  return `${prop.name} (${prop.area})`;
+}
+
+const parsedEmailRaw = computedAsync(async () => {
+  const file = fileInput.value;
+  error.value = '';
+  if (file == null) {
+    return null;
+  }
+  try {
+    const msg = new MsgReader(await file.arrayBuffer());
+    msg.parserConfig = {
+      includeRawProps: true,
+    };
+    return msg;
+  }
+  catch (e: any) {
+    error.value = e.toString();
+    return null;
+  }
+});
+const parsedEmail = computed(() => parsedEmailRaw.value?.getFileData());
+const parsedRtf = computed(() => {
+  if (!parsedEmail.value?.compressedRtf) {
+    return { rtf: '', html: '' };
+  }
+  try {
+    const rtfBlob = decompressRTF(Array.from(parsedEmail.value?.compressedRtf));
+    const rtfText = iconv.decode(
+      Buffer.from(rtfBlob),
+      'latin1',
+    );
+    try {
+      return { rtf: rtfText, html: deEncapsulateSync(rtfText, { decode: iconv.decode })?.text };
+    }
+    catch (dex: any) {
+      return { rtf: rtfText, html: dex.toString() };
+    }
+  }
+  catch (ex: any) {
+    return { rtf: ex.toString(), html: '' };
+  }
+});
+
+function downloadFile(attachment: FieldsData) {
+  const attachmentData = parsedEmailRaw.value?.getAttachment(attachment);
+  if (!attachmentData) {
+    return;
+  }
+  const blob = new Blob([attachmentData.content], { type: 'application/octet-stream' });
+  const downloadUrl = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = downloadUrl;
+  a.download = attachmentData.fileName;
+  document.body.appendChild(a);
+  a.click();
+  URL.revokeObjectURL(downloadUrl);
+}
+
+function onUpload(file: File) {
+  if (file) {
+    fileInput.value = file;
+  }
+}
+</script>
+
+<template>
+  <div style="max-width: 600px;">
+    <c-card title="Input" mb-2>
+      <c-file-upload
+        title="Drag and drop MSG file here, or click to select a file"
+        @file-upload="onUpload"
+      />
+    </c-card>
+
+    <c-alert v-if="error">
+      {{ error }}
+    </c-alert>
+
+    <c-card v-if="!error && parsedEmail" title="Output">
+      <input-copyable v-if="fileInput?.name" label="File Name" :value="fileInput?.name" />
+      <input-copyable v-if="parsedEmail.creationTime" label="Creation Date" :value="parsedEmail.creationTime" />
+      <input-copyable v-if="parsedEmail.clientSubmitTime" label="Submit Date" :value="parsedEmail.clientSubmitTime" />
+      <input-copyable v-if="parsedEmail.messageDeliveryTime" label="Delivery Date" :value="parsedEmail.messageDeliveryTime" />
+      <input-copyable v-if="parsedEmail.lastModificationTime" label="Last Mod. Date" :value="parsedEmail.lastModificationTime" />
+      <c-card title="Recipients" mt-2>
+        <input-copyable
+          v-for="(h, index) in parsedEmail.recipients || []"
+          :key="index"
+          :label="h.recipType || 'unk'"
+          :value="`${h.name}/${h.email}`"
+        />
+      </c-card>
+      <input-copyable v-if="parsedEmail.subject" label="Subject" :value="parsedEmail.subject" />
+      <c-card v-if="parsedEmail.body" title="Plain Content" mb-2>
+        <details>
+          <summary>See content</summary>
+          <textarea-copyable :value="parsedEmail.body" />
+        </details>
+      </c-card>
+      <c-card v-if="parsedEmail.bodyHtml" title="Html Content" mb-2>
+        <details>
+          <summary>See content</summary>
+          <textarea-copyable :value="parsedEmail.bodyHtml" word-wrap />
+        </details>
+      </c-card>
+      <c-card v-if="parsedRtf.rtf || parsedRtf.html" title="RTF Content" mb-2>
+        <details>
+          <summary>See Raw RTF</summary>
+          <textarea-copyable :value="parsedRtf.rtf" word-wrap />
+        </details>
+        <details>
+          <summary>See RTF converted HTML</summary>
+          <textarea-copyable :value="parsedRtf.html" word-wrap />
+        </details>
+      </c-card>
+      <c-card v-if="parsedEmail?.attachments?.length" title="Attachments" mb-2>
+        <n-table>
+          <thead>
+            <tr>
+              <th scope="col">
+                Attachment
+              </th><th scope="col" />
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="(h, index) in parsedEmail.attachments || []"
+              :key="index"
+            >
+              <td>
+                {{ `${h.fileName || h.fileNameShort || 'noname'}` }}
+              </td>
+              <td>
+                <c-button @click="downloadFile(h)">
+                  Download
+                </c-button>
+              </td>
+            </tr>
+          </tbody>
+        </n-table>
+      </c-card>
+
+      <input-copyable v-if="parsedEmail.messageId" label="Message Id" :value="parsedEmail.messageId" />
+      <input-copyable v-if="parsedEmail.senderName" label="Sender (name)" :value="parsedEmail.senderName" />
+      <input-copyable v-if="parsedEmail.senderEmail" label="Sender (email)" :value="parsedEmail.senderEmail" />
+
+      <c-card v-if="parsedEmail.headers" title="All Headers" mt-2>
+        <textarea-copyable :value="parsedEmail.headers" />
+      </c-card>
+
+      <c-card title="All RawProps" mt-2>
+        <input-copyable
+          v-for="(h, index) in parsedEmail.rawProps || []"
+          :key="index"
+          :label="h.propertyName || getPropertyName(h.propertyTag)"
+          :value="h.value"
+        />
+      </c-card>
+    </c-card>
+  </div>
+</template>

vite.config.ts

@@ -15,6 +15,7 @@ import { VitePWA } from 'vite-plugin-pwa';
 import markdown from 'vite-plugin-vue-markdown';
 import svgLoader from 'vite-svg-loader';
 import { configDefaults } from 'vitest/config';
+import { nodePolyfills } from 'vite-plugin-node-polyfills';
 
 const baseUrl = process.env.BASE_URL ?? '/';
 
@@ -97,6 +98,7 @@ export default defineConfig({
       resolvers: [NaiveUiResolver(), IconsResolver({ prefix: 'icon' })],
     }),
     Unocss(),
+    nodePolyfills(),
   ],
   base: baseUrl,
   resolve: {