From 42c7db08105b14d38d14184db90b139ff9b0274e Mon Sep 17 00:00:00 2001 From: Simon Cambier Date: Sun, 29 Oct 2023 20:39:41 +0100 Subject: [PATCH] brotli link get/set ok --- src/components/TopBar.svelte | 43 ++++++++-------------------- src/routes/+page.svelte | 54 ++++++++++++++++++++++++++---------- src/store.ts | 4 +++ 3 files changed, 55 insertions(+), 46 deletions(-) create mode 100644 src/store.ts diff --git a/src/components/TopBar.svelte b/src/components/TopBar.svelte index c719682..39276da 100644 --- a/src/components/TopBar.svelte +++ b/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 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} /> diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 699269f..cc60d93 100644 --- a/src/routes/+page.svelte +++ b/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 decompress: (data: string) => Promise } = 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() - })
{#if !!editor} - + {/if}
@@ -68,10 +92,10 @@
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)
diff --git a/src/store.ts b/src/store.ts new file mode 100644 index 0000000..0f52cb0 --- /dev/null +++ b/src/store.ts @@ -0,0 +1,4 @@ +import { writable } from 'svelte/store' + +export const shareUrl = writable('') +export const selectedLang = writable(null)