brotli link get/set ok

This commit is contained in:
Simon Cambier 2023-10-29 20:39:41 +01:00
parent 36bc353ff5
commit 42c7db0810
3 changed files with 55 additions and 46 deletions

View File

@ -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>

View File

@ -6,6 +6,7 @@
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>
@ -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 () => {
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) {
compressed = await algorithm.compress(editor.getValue())
console.log(compressed)
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>

4
src/store.ts Normal file
View File

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