Added legacy support of lzma

src/components/TopBar.svelte

@@ -30,7 +30,7 @@
   }
 
   onMount(() => {
-    languages = CodeMirror.modeInfo.map((e) => ({
+    languages = CodeMirror.modeInfo.map((e: any) => ({
       text: e.name,
       value: shorten(e.name),
       data: { mime: e.mime, mode: e.mode },
@@ -64,7 +64,7 @@
   }
 </script>
 
-<div class="flex justify-between p-2 text-sm relative">
+<div class="flex justify-between p-2 text-sm relative z-10 shadow-md">
   <div>NoPaste</div>
   <div class="flex justify-end gap-2">
     <div>

src/globals.d.ts

@@ -1,7 +1,7 @@
 declare class LZMA {
   constructor(any): {}
   compress: (value: string, level: number, callback: (result: number[]) => void) => void
-  decompress: (b: string, callback: (result: any) => void) => void
+  decompress: (b: Uint8Array, callback: (result: string, err: any) => void) => void
 }
 
 declare const CodeMirror: any

src/lib/lzma.ts

@@ -1,22 +1,32 @@
 // LZMA imported from <script> in index.html
-const blob = new Blob(['importScripts("https://cdn.jsdelivr.net/npm/lzma@2.3.2/src/lzma_worker.min.js");']);
-const lzma = new LZMA(window.URL.createObjectURL(blob));
+const blob = new Blob([
+  'importScripts("https://cdn.jsdelivr.net/npm/lzma@2.3.2/src/lzma_worker.min.js");',
+])
+const lzma = new LZMA(window.URL.createObjectURL(blob))
 
 async function compress(value: string): Promise<string> {
   return new Promise((resolve, reject) => {
     lzma.compress(value, 1, (numbers: number[]) => {
-      const bytes = new Uint8Array(numbers);
+      const bytes = new Uint8Array(numbers)
       const b64 = btoa(String.fromCharCode(...bytes))
       resolve(b64)
     })
   })
 }
 
-async function decompress(b: string): Promise<string> {
+async function decompress(base64: string): Promise<string> {
   return new Promise((resolve, reject) => {
-    lzma.decompress(b, (result: any) => {
-      resolve(result)
-    })
+    const req = new XMLHttpRequest()
+    req.open('GET', 'data:application/octet;base64,' + base64)
+    req.responseType = 'arraybuffer'
+    req.onload = (e) => {
+      const bytes = new Uint8Array(req.response)
+      lzma.decompress(bytes, (result, err) => {
+        if (err) reject(err)
+        else resolve(result)
+      })
+    }
+    req.send()
   })
 }
 

src/routes/+page.svelte

@@ -8,13 +8,6 @@
   import TopBar from '../components/TopBar.svelte'
   import { selectedLang, shareUrl } from '../store'
 
-  const algorithm: {
-    compress: (data: string) => Promise<string>
-    decompress: (data: string) => Promise<string>
-  } = brotli
-
-  const host = window.location.protocol + '//' + window.location.host + '/'
-
   let editor: Editor | null = null
   const readOnly = false
 
@@ -29,7 +22,12 @@
     const hash = window.location.hash.slice(1)
     if (hash) {
       // decompress the data
-      const decompressed = await algorithm.decompress(hash)
+      let decompressed: string
+      if (hash.startsWith('XQAAA')) {
+        decompressed = await lzma.decompress(hash)
+      } else {
+        decompressed = await brotli.decompress(hash)
+      }
       // set the editor value
       if (editor) {
         editor.setValue(decompressed)
@@ -44,7 +42,7 @@
   async function updateShareUrl() {
     if (editor) {
       const url = new URL(window.location.href)
-      compressed = await algorithm.compress(editor.getValue())
+      compressed = await brotli.compress(editor.getValue())
       if ($selectedLang) {
         url.searchParams.set('l', $selectedLang)
       }
@@ -88,9 +86,10 @@
   {/if}
 
   <div id="editor" class="grow overflow-hidden" />
+
   {editor?.getValue()}
 
-  <div class="p-2 text-sm">
+  <div id="footer" class="p-2 text-sm z-10">
     Data length: {charLen}
     | Link length: {waiting ? '?' : $shareUrl.length}
     ({waiting || !compressed.length || !charLen
@@ -103,4 +102,11 @@
   :global(div.CodeMirror) {
     height: 100%;
   }
+  #footer {
+    --tw-shadow: 0 -4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --tw-shadow-colored: 0 -4px 6px -1px var(--tw-shadow-color),
+      0 2px 4px -2px var(--tw-shadow-color);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+      var(--tw-shadow);
+  }
 </style>