brotli link get/set ok

src/components/TopBar.svelte

@@ -3,6 +3,7 @@
   import { shorten } from '$lib/utils'
   import Select from './Select.svelte'
   import type { Editor } from 'codemirror'
+  import { shareUrl, selectedLang } from '../store'
 
   type Language = {
     text: string
@@ -11,6 +12,7 @@
   }
 
   export let editor: Editor
+  export let updateShareUrl: () => Promise<void>
 
   let languages: Language[] = []
   let selectedLanguage: Language | null = null
@@ -24,50 +26,29 @@
     // @ts-ignore
     editor.setOption('mode', language.mime)
     CodeMirror.autoLoadMode(editor, language.mode)
+    $selectedLang = selectedLanguage?.value ?? null
   }
 
-  // const initLangSelector = () => {
-  //   select = new SlimSelect({
-  //     select: '#language',
-  //     data: CodeMirror.modeInfo.map((e) => ({
-  //       text: e.name,
-  //       value: shorten(e.name),
-  //       data: { mime: e.mime, mode: e.mode },
-  //     })),
-  //     settings: {
-  //       openPosition: 'down',
-  //     },
-  //     events: {
-  //       afterChange: (e) => {
-  //         console.log(e)
-  //         // const language = e.data || { mime: null, mode: null }
-  //         // editor.setOption('mode', language.mime)
-  //         // CodeMirror.autoLoadMode(editor, language.mode)
-  //         // document.title =
-  //         //   e.text && e.text !== 'Plain Text' ? `NoPaste - ${e.text} code snippet` : 'NoPaste'
-  //       },
-  //     },
-  //   })
-
-  //   // Set lang selector
-  //   const l = new URLSearchParams(window.location.search).get('l')
-  // }
-
   onMount(() => {
     languages = CodeMirror.modeInfo.map((e) => ({
       text: e.name,
       value: shorten(e.name),
       data: { mime: e.mime, mode: e.mode },
     }))
-    // initLangSelector()
   })
 
+  export function setLanguage(lang: string) {
+    const language = languages.find((e) => e.value === lang)!
+    selectedLanguage = language
+  }
+
   function setDefaultLanguage(languages: Language[]) {
-    const lang = languages.find((e) => e.text.toLowerCase() === 'plain text')!
-    selectedLanguage = lang
+    setLanguage('plt')
   }
 
   async function showUrlInput() {
+    // Make sure the url is up to date
+    await updateShareUrl()
     isUrlInputVisible = true
     await tick()
     urlInput.select()
@@ -105,7 +86,7 @@
           bind:this={urlInput}
           type="text"
           class="border border-gray-300 bg-transparent p-1 grow"
-          value="url goes here"
+          value={$shareUrl}
         />
         <button on:click={copyUrl}> Copy </button>
         <button on:click={closeUrlInput}> Close </button>

src/routes/+page.svelte

@@ -6,12 +6,13 @@
   import * as lzma from '$lib/lzma'
   import { byId } from '$lib/utils'
   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
@@ -20,13 +21,40 @@
   let charLen = 0
   let compressed: string = ''
   let waiting = false
-  $: shareUrl = host + compressed
+  let setLanguage: (lang: string) => void
 
-  const updateCompressed = debounce(async () => {
-    if (editor) {
-      compressed = await algorithm.compress(editor.getValue())
-      console.log(compressed)
+  onMount(async () => {
+    initCodeEditor()
+    // extract the part in the url after the hash
+    const hash = window.location.hash.slice(1)
+    if (hash) {
+      // decompress the data
+      const decompressed = await algorithm.decompress(hash)
+      // set the editor value
+      if (editor) {
+        editor.setValue(decompressed)
+      }
     }
+    const lang = new URLSearchParams(window.location.search).get('l')
+    if (lang) {
+      setLanguage(lang)
+    }
+  })
+
+  async function updateShareUrl() {
+    if (editor) {
+      const url = new URL(window.location.href)
+      compressed = await algorithm.compress(editor.getValue())
+      if ($selectedLang) {
+        url.searchParams.set('l', $selectedLang)
+      }
+      url.hash = compressed
+      $shareUrl = url.toString()
+    }
+  }
+
+  const updateShareUrlDebounced = debounce(async () => {
+    updateShareUrl()
     waiting = false
   }, 1000)
 
@@ -39,7 +67,7 @@
       lineWrapping: false,
       scrollbarStyle: 'native',
     }) as Editor
-    console.log(editor)
+
     if (readOnly) {
       document.body.classList.add('readonly')
     }
@@ -48,19 +76,15 @@
       if (editor) {
         waiting = true
         charLen = editor.getValue().length
-        updateCompressed()
+        updateShareUrlDebounced()
       }
     })
   }
-
-  onMount(async () => {
-    initCodeEditor()
-  })
 </script>
 
 <div class="flex flex-col font-mono h-screen bg-gray-700">
   {#if !!editor}
-    <TopBar {editor} />
+    <TopBar {editor} {updateShareUrl} bind:setLanguage />
   {/if}
 
   <div id="editor" class="grow overflow-hidden" />
@@ -68,10 +92,10 @@
 
   <div class="p-2 text-sm">
     Data length: {charLen}
-    | Link length: {waiting ? '?' : shareUrl.length}
+    | Link length: {waiting ? '?' : $shareUrl.length}
     ({waiting || !compressed.length || !charLen
       ? '?'
-      : Math.round((shareUrl.length / charLen) * 100)}% of original)
+      : Math.round(($shareUrl.length / charLen) * 100)}% of original)
   </div>
 </div>
 

src/store.ts

@@ -0,0 +1,4 @@
+import { writable } from 'svelte/store'
+
+export const shareUrl = writable('')
+export const selectedLang = writable<string | null>(null)