Merge 6571963332 into e1b4f9aafe

components.d.ts

@@ -132,20 +132,18 @@ declare module '@vue/runtime-core' {
     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']
+    NSpace: typeof import('naive-ui')['NSpace']
     NSpin: typeof import('naive-ui')['NSpin']
+    NStatistic: typeof import('naive-ui')['NStatistic']
     NumeronymGenerator: typeof import('./src/tools/numeronym-generator/numeronym-generator.vue')['default']
+    OcrImage: typeof import('./src/tools/ocr-image/ocr-image.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']
     PdfSignatureChecker: typeof import('./src/tools/pdf-signature-checker/pdf-signature-checker.vue')['default']

package.json

@@ -41,6 +41,7 @@
     "@tiptap/pm": "2.1.6",
     "@tiptap/starter-kit": "2.1.6",
     "@tiptap/vue-3": "2.0.3",
+    "@types/pdfjs-dist": "^2.10.378",
     "@types/figlet": "^1.5.8",
     "@vicons/material": "^0.12.0",
     "@vicons/tabler": "^0.12.0",
@@ -77,11 +78,14 @@
     "netmask": "^2.0.2",
     "node-forge": "^1.3.1",
     "oui-data": "^1.0.10",
+    "path2d-polyfill": "^3.0.1",
     "pdf-signature-reader": "^1.4.2",
+    "pdfjs-dist": "^4.0.379",
     "pinia": "^2.0.34",
     "plausible-tracker": "^0.3.8",
     "qrcode": "^1.5.1",
     "sql-formatter": "^13.0.0",
+    "tesseract.js": "^5.0.4",
     "ua-parser-js": "^1.0.35",
     "ulid": "^2.3.0",
     "unicode-emoji-json": "^0.4.0",

src/composable/queryParams.ts

@@ -1,7 +1,8 @@
 import { useRouteQuery } from '@vueuse/router';
 import { computed } from 'vue';
+import { useStorage } from '@vueuse/core';
 
-export { useQueryParam };
+export { useQueryParam, useQueryParamOrStorage };
 
 const transformers = {
   number: {
@@ -16,6 +17,12 @@ const transformers = {
     fromQuery: (value: string) => value.toLowerCase() === 'true',
     toQuery: (value: boolean) => (value ? 'true' : 'false'),
   },
+  object: {
+    fromQuery: (value: string) => {
+      return JSON.parse(value);
+    },
+    toQuery: (value: object) => JSON.stringify(value),
+  },
 };
 
 function useQueryParam<T>({ name, defaultValue }: { name: string; defaultValue: T }) {
@@ -33,3 +40,27 @@ function useQueryParam<T>({ name, defaultValue }: { name: string; defaultValue:
     },
   });
 }
+
+function useQueryParamOrStorage<T>({ name, storageName, defaultValue }: { name: string; storageName: string; defaultValue: T }) {
+  const type = typeof defaultValue;
+  const transformer = transformers[type as keyof typeof transformers] ?? transformers.string;
+
+  const storageRef = useStorage(storageName, defaultValue);
+  const proxyDefaultValue = transformer.toQuery(defaultValue as never);
+  const proxy = useRouteQuery(name, proxyDefaultValue);
+
+  const r = ref(defaultValue);
+
+  watch(r,
+    (value) => {
+      proxy.value = transformer.toQuery(value as never);
+      storageRef.value = value as never;
+    },
+    { deep: true });
+
+  r.value = (proxy.value && proxy.value !== proxyDefaultValue
+    ? transformer.fromQuery(proxy.value) as unknown as T
+    : storageRef.value as T) as never;
+
+  return r;
+}

src/tools/index.ts

@@ -5,6 +5,7 @@ import { tool as basicAuthGenerator } from './basic-auth-generator';
 import { tool as asciiTextDrawer } from './ascii-text-drawer';
 
 import { tool as textToUnicode } from './text-to-unicode';
+import { tool as ocrImage } from './ocr-image';
 import { tool as safelinkDecoder } from './safelink-decoder';
 import { tool as pdfSignatureChecker } from './pdf-signature-checker';
 import { tool as numeronymGenerator } from './numeronym-generator';
@@ -132,7 +133,13 @@ export const toolsByCategory: ToolCategory[] = [
   },
   {
     name: 'Images and videos',
-    components: [qrCodeGenerator, wifiQrCodeGenerator, svgPlaceholderGenerator, cameraRecorder],
+    components: [
+      qrCodeGenerator,
+      wifiQrCodeGenerator,
+      svgPlaceholderGenerator,
+      cameraRecorder,
+      ocrImage,
+    ],
   },
   {
     name: 'Development',

src/tools/ocr-image/index.ts

@@ -0,0 +1,12 @@
+import { Scan } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'OCRize image and PDF',
+  path: '/ocr-image',
+  description: 'Perform OCR (Tesseract) on an image or PDF',
+  keywords: ['ocr', 'image', 'tesseract', 'pdf'],
+  component: () => import('./ocr-image.vue'),
+  icon: Scan,
+  createdAt: new Date('2024-03-09'),
+});

src/tools/ocr-image/ocr-image.vue

@@ -0,0 +1,251 @@
+<script setup lang="ts">
+import type { Ref } from 'vue';
+import { createWorker } from 'tesseract.js';
+import { getDocument } from 'pdfjs-dist';
+import * as pdfJS from 'pdfjs-dist';
+import pdfJSWorkerURL from 'pdfjs-dist/build/pdf.worker?url';
+import { textStatistics } from '../text-statistics/text-statistics.service';
+import TextareaCopyable from '@/components/TextareaCopyable.vue';
+import { useQueryParamOrStorage } from '@/composable/queryParams';
+
+const languages = [
+  { name: 'English', code: 'eng' },
+  { name: 'Portuguese', code: 'por' },
+  { name: 'Afrikaans', code: 'afr' },
+  { name: 'Albanian', code: 'sqi' },
+  { name: 'Amharic', code: 'amh' },
+  { name: 'Arabic', code: 'ara' },
+  { name: 'Assamese', code: 'asm' },
+  { name: 'Azerbaijani', code: 'aze' },
+  { name: 'Azerbaijani - Cyrillic', code: 'aze_cyrl' },
+  { name: 'Basque', code: 'eus' },
+  { name: 'Belarusian', code: 'bel' },
+  { name: 'Bengali', code: 'ben' },
+  { name: 'Bosnian', code: 'bos' },
+  { name: 'Bulgarian', code: 'bul' },
+  { name: 'Burmese', code: 'mya' },
+  { name: 'Catalan; Valencian', code: 'cat' },
+  { name: 'Cebuano', code: 'ceb' },
+  { name: 'Central Khmer', code: 'khm' },
+  { name: 'Cherokee', code: 'chr' },
+  { name: 'Chinese - Simplified', code: 'chi_sim' },
+  { name: 'Chinese - Traditional', code: 'chi_tra' },
+  { name: 'Croatian', code: 'hrv' },
+  { name: 'Czech', code: 'ces' },
+  { name: 'Danish', code: 'dan' },
+  { name: 'Dutch; Flemish', code: 'nld' },
+  { name: 'Dzongkha', code: 'dzo' },
+  { name: 'English, Middle (1100-1500)', code: 'enm' },
+  { name: 'Esperanto', code: 'epo' },
+  { name: 'Estonian', code: 'est' },
+  { name: 'Finnish', code: 'fin' },
+  { name: 'French', code: 'fra' },
+  { name: 'French, Middle (ca. 1400-1600)', code: 'frm' },
+  { name: 'Galician', code: 'glg' },
+  { name: 'Georgian', code: 'kat' },
+  { name: 'German', code: 'deu' },
+  { name: 'German Fraktur', code: 'frk' },
+  { name: 'Greek, Modern (1453-)', code: 'ell' },
+  { name: 'Greek, Ancient (-1453)', code: 'grc' },
+  { name: 'Gujarati', code: 'guj' },
+  { name: 'Haitian; Haitian Creole', code: 'hat' },
+  { name: 'Hebrew', code: 'heb' },
+  { name: 'Hindi', code: 'hin' },
+  { name: 'Hungarian', code: 'hun' },
+  { name: 'Icelandic', code: 'isl' },
+  { name: 'Indonesian', code: 'ind' },
+  { name: 'Inuktitut', code: 'iku' },
+  { name: 'Irish', code: 'gle' },
+  { name: 'Italian', code: 'ita' },
+  { name: 'Japanese', code: 'jpn' },
+  { name: 'Javanese', code: 'jav' },
+  { name: 'Kannada', code: 'kan' },
+  { name: 'Kazakh', code: 'kaz' },
+  { name: 'Kirghiz; Kyrgyz', code: 'kir' },
+  { name: 'Korean', code: 'kor' },
+  { name: 'Kurdish', code: 'kur' },
+  { name: 'Lao', code: 'lao' },
+  { name: 'Latin', code: 'lat' },
+  { name: 'Latvian', code: 'lav' },
+  { name: 'Lithuanian', code: 'lit' },
+  { name: 'Macedonian', code: 'mkd' },
+  { name: 'Malay', code: 'msa' },
+  { name: 'Malayalam', code: 'mal' },
+  { name: 'Maltese', code: 'mlt' },
+  { name: 'Marathi', code: 'mar' },
+  { name: 'Nepali', code: 'nep' },
+  { name: 'Norwegian', code: 'nor' },
+  { name: 'Oriya', code: 'ori' },
+  { name: 'Panjabi; Punjabi', code: 'pan' },
+  { name: 'Persian', code: 'fas' },
+  { name: 'Polish', code: 'pol' },
+  { name: 'Pushto; Pashto', code: 'pus' },
+  { name: 'Romanian; Moldavian; Moldovan', code: 'ron' },
+  { name: 'Russian', code: 'rus' },
+  { name: 'Sanskrit', code: 'san' },
+  { name: 'Serbian', code: 'srp' },
+  { name: 'Serbian - Latin', code: 'srp_latn' },
+  { name: 'Sinhala; Sinhalese', code: 'sin' },
+  { name: 'Slovak', code: 'slk' },
+  { name: 'Slovenian', code: 'slv' },
+  { name: 'Spanish; Castilian', code: 'spa' },
+  { name: 'Swahili', code: 'swa' },
+  { name: 'Swedish', code: 'swe' },
+  { name: 'Syriac', code: 'syr' },
+  { name: 'Tagalog', code: 'tgl' },
+  { name: 'Tajik', code: 'tgk' },
+  { name: 'Tamil', code: 'tam' },
+  { name: 'Telugu', code: 'tel' },
+  { name: 'Thai', code: 'tha' },
+  { name: 'Tibetan', code: 'bod' },
+  { name: 'Tigrinya', code: 'tir' },
+  { name: 'Turkish', code: 'tur' },
+  { name: 'Uighur; Uyghur', code: 'uig' },
+  { name: 'Ukrainian', code: 'ukr' },
+  { name: 'Urdu', code: 'urd' },
+  { name: 'Uzbek', code: 'uzb' },
+  { name: 'Uzbek - Cyrillic', code: 'uzb_cyrl' },
+  { name: 'Vietnamese', code: 'vie' },
+  { name: 'Welsh', code: 'cym' },
+  { name: 'Yiddish', code: 'yid' },
+];
+const languagesOptions = Array.from(languages.map(l => ({
+  label: l.name,
+  value: l.code,
+})));
+
+const language = useQueryParamOrStorage({ name: 'lang', storageName: 'ocr-image:lang', defaultValue: 'eng' });
+
+const pageSeparator = '\n=============\n';
+const ocrInProgress = ref(false);
+const fileInput = ref() as Ref<File>;
+const ocrText = computedAsync(async () => {
+  try {
+    return (await ocr(fileInput.value, language.value));
+  }
+  catch (e: any) {
+    return e.toString();
+  }
+});
+const stats = computed(() => textStatistics(ocrText.value?.replace(new RegExp(pageSeparator, 'g'), ' ') || ''));
+const pageCount = computed(() => ocrText.value?.split(new RegExp(pageSeparator, 'g')).length || 0);
+
+async function onUpload(file: File) {
+  if (file) {
+    fileInput.value = file;
+  }
+}
+
+async function loadPdfFile(file: File) {
+  const arrBuffer = await file.arrayBuffer();
+  const byteArray = new Uint8Array(arrBuffer);
+  return getDocument({ data: byteArray }).promise;
+}
+
+async function convertPdfToImage(file: File) {
+  const pdf = await loadPdfFile(file);
+  const container = document.getElementById('container');
+  const images = [];
+  for (let pageNumber = 1; pageNumber <= pdf.numPages; pageNumber++) {
+    const page = await pdf.getPage(pageNumber);
+    const viewport = page.getViewport({ scale: 1.5 });
+    const canvas = document.createElement('canvas');
+    canvas.height = viewport.height;
+    canvas.width = viewport.width;
+    container?.appendChild(canvas);
+    await page.render({
+      canvasContext: canvas.getContext('2d') as CanvasRenderingContext2D,
+      viewport,
+    }).promise;
+    images.push(canvas.toDataURL('image/png'));
+  }
+  return images;
+};
+
+async function ocr(file: File, language: string) {
+  if (!file) {
+    return '';
+  }
+  ocrInProgress.value = true;
+  const worker = await createWorker();
+  await worker.reinitialize(language);
+  const allTexts = [];
+  if (file.type.match('^image/')) {
+    const ret = await worker.recognize(file);
+    allTexts.push(ret.data.text);
+  }
+  else {
+    pdfJS.GlobalWorkerOptions.workerSrc = pdfJSWorkerURL;
+
+    for (const image of (await convertPdfToImage(file))) {
+      const ret = await worker.recognize(image);
+      allTexts.push(ret.data.text);
+    }
+  }
+  await worker.terminate();
+  ocrInProgress.value = false;
+  return allTexts.join(pageSeparator);
+};
+</script>
+
+<template>
+  <div style="max-width: 600px;">
+    <c-select
+      v-model:value="language"
+      label="Language"
+      :options="languagesOptions"
+      searchable mb-2
+    />
+
+    <c-file-upload
+      title="Drag and drop a Image or PDF here, or click to select a file"
+      :paste-image="true"
+      @file-upload="onUpload"
+    />
+
+    <n-divider />
+
+    <div id="container" style="display: none;" />
+
+    <div>
+      <h3>OCR</h3>
+      <TextareaCopyable
+        v-if="!ocrInProgress"
+        v-model:value="ocrText"
+        :word-wrap="true"
+      />
+      <n-spin
+        v-if="ocrInProgress"
+        size="small"
+      />
+    </div>
+
+    <c-card v-if="!ocrInProgress && stats" title="Statistics">
+      <n-space mt-3>
+        <n-statistic label="Character count" :value="stats.chars" />
+        <n-statistic label="Word count" :value="stats.words" />
+        <n-statistic label="Line count" :value="stats.lines" />
+        <n-statistic label="Pages count" :value="pageCount" />
+        <n-statistic label="Sentences count" :value="stats.sentences" />
+      </n-space>
+
+      <n-divider />
+
+      <n-space>
+        <n-statistic label="Chars (no spaces)" :value="stats.chars_no_spaces" />
+        <n-statistic label="Uppercase chars" :value="stats.chars_upper" />
+        <n-statistic label="Lowercase chars" :value="stats.chars_lower" />
+        <n-statistic label="Digit chars" :value="stats.chars_digits" />
+        <n-statistic label="Punctuations" :value="stats.chars_puncts" />
+        <n-statistic label="Spaces chars" :value="stats.chars_spaces" />
+        <n-statistic label="Word count (no punct)" :value="stats.words_no_puncs" />
+      </n-space>
+    </c-card>
+  </div>
+</template>
+
+<style lang="less" scoped>
+::v-deep(.n-upload-trigger) {
+  width: 100%;
+}
+</style>

src/tools/text-statistics/text-statistics.service.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import { getStringSizeInBytes } from './text-statistics.service';
+import { getStringSizeInBytes, textStatistics } from './text-statistics.service';
 
 describe('text-statistics', () => {
   describe('getStringSizeInBytes', () => {
@@ -11,4 +11,114 @@ describe('text-statistics', () => {
       expect(getStringSizeInBytes('aaaaaaaaaa')).toEqual(10);
     });
   });
+
+  describe('textStatistics', () => {
+    it('should return text statistics', () => {
+      expect(textStatistics('a')).toEqual({
+        chars: 1,
+        chars_digits: 0,
+        chars_lower: 1,
+        chars_no_spaces: 1,
+        chars_puncts: 0,
+        chars_spaces: 0,
+        chars_upper: 0,
+        lines: 1,
+        sentences: 1,
+        words: 1,
+        words_no_puncs: 1,
+      });
+      expect(textStatistics('A')).toEqual({
+        chars: 1,
+        chars_digits: 0,
+        chars_lower: 0,
+        chars_no_spaces: 1,
+        chars_puncts: 0,
+        chars_spaces: 0,
+        chars_upper: 1,
+        lines: 1,
+        sentences: 1,
+        words: 1,
+        words_no_puncs: 1,
+      });
+      expect(textStatistics('a a')).toEqual({
+        chars: 3,
+        chars_digits: 0,
+        chars_lower: 2,
+        chars_no_spaces: 2,
+        chars_puncts: 0,
+        chars_spaces: 1,
+        chars_upper: 0,
+        lines: 1,
+        sentences: 1,
+        words: 2,
+        words_no_puncs: 2,
+      });
+      expect(textStatistics('A a ; 1')).toEqual({
+        chars: 7,
+        chars_digits: 1,
+        chars_lower: 1,
+        chars_no_spaces: 4,
+        chars_puncts: 1,
+        chars_spaces: 3,
+        chars_upper: 1,
+        lines: 1,
+        sentences: 1,
+        words: 4,
+        words_no_puncs: 3,
+      });
+      expect(textStatistics('Some sentence! Une autre phrase ? « et avec des chiffres 1234 ! »')).toEqual({
+        chars: 65,
+        chars_digits: 4,
+        chars_lower: 41,
+        chars_no_spaces: 52,
+        chars_puncts: 5,
+        chars_spaces: 13,
+        chars_upper: 2,
+        lines: 1,
+        sentences: 3,
+        words: 14,
+        words_no_puncs: 10,
+      });
+      expect(textStatistics(`Some sentence! Une autre phrase ? 
+      « et avec des chiffres 1234 ! »`)).toEqual({
+        chars: 72,
+        chars_digits: 4,
+        chars_lower: 41,
+        chars_no_spaces: 52,
+        chars_puncts: 5,
+        chars_spaces: 20,
+        chars_upper: 2,
+        lines: 2,
+        sentences: 3,
+        words: 14,
+        words_no_puncs: 10,
+      });
+      expect(textStatistics('12 35')).toEqual({
+        chars: 5,
+        chars_digits: 4,
+        chars_lower: 0,
+        chars_no_spaces: 4,
+        chars_puncts: 0,
+        chars_spaces: 1,
+        chars_upper: 0,
+        lines: 1,
+        sentences: 1,
+        words: 2,
+        words_no_puncs: 2,
+      });
+      expect(textStatistics(' 1 2 3. Other ')).toEqual({
+        chars: 14,
+        chars_digits: 3,
+        chars_lower: 4,
+        chars_no_spaces: 9,
+        chars_puncts: 1,
+        chars_spaces: 5,
+        chars_upper: 1,
+        lines: 1,
+        sentences: 2,
+        words: 4,
+        words_no_puncs: 4,
+      });
+    });
+  });
 });

src/tools/text-statistics/text-statistics.service.ts

@@ -1,3 +1,19 @@
 export function getStringSizeInBytes(text: string) {
   return new TextEncoder().encode(text).buffer.byteLength;
 }
+
+export function textStatistics(text: string) {
+  return {
+    chars: text.length,
+    chars_no_spaces: text.replace(/\s+/ug, '').length,
+    chars_upper: text.replace(/[^\p{Lu}]/ug, '').length,
+    chars_lower: text.replace(/[^\p{Ll}]/ug, '').length,
+    chars_digits: text.replace(/\D+/ug, '').length,
+    chars_puncts: text.replace(/[^\p{P}]/ug, '').length,
+    chars_spaces: text.replace(/\S/ug, '').length,
+    words: text.trim().split(/\s+/).length,
+    words_no_puncs: text.replace(/\p{P}/ug, '').trim().split(/\s+/).length,
+    sentences: (`${text} `).split(/\w\s*[\.!\?][\s\p{P}]*\s/u).filter(s => s && s?.length > 0).length,
+    lines: text.split(/\r\n|\r|\n/).length,
+  };
+}

src/ui/c-file-upload/c-file-upload.vue

@@ -5,10 +5,12 @@ const props = withDefaults(defineProps<{
   multiple?: boolean
   accept?: string
   title?: string
+  pasteImage?: boolean
 }>(), {
   multiple: false,
   accept: undefined,
   title: 'Drag and drop files here, or click to select files',
+  pasteImage: false,
 });
 
 const emit = defineEmits<{
@@ -16,11 +18,31 @@ const emit = defineEmits<{
   (event: 'fileUpload', file: File): void
 }>();
 
-const { multiple } = toRefs(props);
+const { multiple, pasteImage } = toRefs(props);
 
 const isOverDropZone = ref(false);
 
+function toBase64(file: File) {
+  return new Promise<string>((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => resolve(reader.result?.toString() ?? '');
+    reader.onerror = error => reject(error);
+  });
+}
+
 const fileInput = ref<HTMLInputElement | null>(null);
+const imgPreview = ref<HTMLImageElement | null>(null);
+async function handlePreview(image: File) {
+  if (imgPreview.value) {
+    imgPreview.value.src = await toBase64(image);
+  }
+}
+function clearPreview() {
+  if (imgPreview.value) {
+    imgPreview.value.src = '';
+  }
+}
 
 function triggerFileInput() {
   fileInput.value?.click();
@@ -39,7 +61,30 @@ function handleDrop(event: DragEvent) {
   handleUpload(files);
 }
 
-function handleUpload(files: FileList | null | undefined) {
+async function onPasteImage(evt: ClipboardEvent) {
+  if (!pasteImage.value) {
+    return false;
+  }
+
+  const items = evt.clipboardData?.items;
+  if (!items) {
+    return false;
+  }
+  for (let i = 0; i < items.length; i++) {
+    if (items[i].type.includes('image')) {
+      const imageFile = items[i].getAsFile();
+      if (imageFile) {
+        await handlePreview(imageFile);
+        emit('fileUpload', imageFile);
+      }
+    }
+  }
+  return true;
+}
+
+async function handleUpload(files: FileList | null | undefined) {
+  clearPreview();
+
   if (_.isNil(files) || _.isEmpty(files)) {
     return;
   }
@@ -49,6 +94,7 @@ function handleUpload(files: FileList | null | undefined) {
     return;
   }
 
+  await handlePreview(files[0]);
   emit('fileUpload', files[0]);
 }
 </script>
@@ -60,6 +106,7 @@ function handleUpload(files: FileList | null | undefined) {
       'border-primary border-opacity-100': isOverDropZone,
     }"
     @click="triggerFileInput"
+    @paste.prevent="onPasteImage"
     @drop.prevent="handleDrop"
     @dragover.prevent
     @dragenter="isOverDropZone = true"
@@ -73,6 +120,7 @@ function handleUpload(files: FileList | null | undefined) {
       :accept="accept"
       @change="handleFileInput"
     >
+
     <slot>
       <span op-70>
         {{ title }}
@@ -90,6 +138,22 @@ function handleUpload(files: FileList | null | undefined) {
       <c-button>
         Browse files
       </c-button>
+
+      <div v-if="pasteImage">
+        <!-- separator -->
+        <div my-4 w-full flex items-center justify-center op-70>
+          <div class="h-1px max-w-100px flex-1 bg-gray-300 op-50" />
+          <div class="mx-2 text-gray-400">
+            or
+          </div>
+          <div class="h-1px max-w-100px flex-1 bg-gray-300 op-50" />
+        </div>
+
+        <p>Paste an image from clipboard</p>
+      </div>
     </slot>
+    <div mt-2>
+      <img ref="imgPreview" width="150">
+    </div>
   </div>
 </template>

vite.config.ts

@@ -113,4 +113,12 @@ export default defineConfig({
   build: {
     target: 'esnext',
   },
+  optimizeDeps: {
+    include: ['pdfjs-dist'], // optionally specify dependency name
+    esbuildOptions: {
+      supported: {
+        'top-level-await': true,
+      },
+    },
+  },
 });