upagge/noteshare.space
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

new raw renderer

Browse Source
This commit is contained in:
Maxime Cannoodt 2022-07-04 20:53:29 +02:00
parent c5c8f08a9a
commit 5a370900fc
3 changed files with 22 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
webapp/src/lib/components/RawRenderer.svelte Normal file
View File

@ -0,0 +1,4 @@
<pre
class="whitespace-pre-wrap text-black dark:text-white bg-zinc-100 dark:bg-zinc-900 py-3 px-6 border dark:border-zinc-700 mt-4">
<slot />
</pre>

0
webapp/src/routes/note/[id].raw.svelte Normal file
View File

36
webapp/src/routes/note/[id].svelte
View File

@ -23,14 +23,15 @@
import IconEncrypted from 'svelte-icons/md/MdLockOutline.svelte';
import type { EncryptedNote } from '$lib/model/EncryptedNote';
import { browser } from '$app/env';
import RawRenderer from '$lib/components/RawRenderer.svelte';
import LogoDocument from 'svelte-icons/md/MdUndo.svelte';
// Auto-loaded from [id].ts endpoint
export let note: EncryptedNote;
let plaintext: string;
let timeString: string;
let decryptFailed = false;
// let downloadUrl: string;
let downloadRef: HTMLAnchorElement;
let showRaw = false;
onMount(() => {
if (browser) {
@ -47,23 +48,8 @@
timeString = msToString(diff_ms);
}
// $: if (plaintext) {
// downloadUrl = downloadMd(plaintext);
// }
// https://stackoverflow.com/questions/19327749/javascript-blob-filename-without-link
function downloadMd() {
if (plaintext === undefined) return;
// Make sure the browser reads the data as UTF-8
// https://stackoverflow.com/questions/6672834/specifying-blob-encoding-in-google-chrome
const BOM = new Uint8Array([0xef, 0xbb, 0xbf]);
const blob = new Blob([BOM, plaintext], { type: 'text/plain' });
const url = window.URL.createObjectURL(blob);
console.log(url);
downloadRef.href = url;
downloadRef.click();
window.URL.revokeObjectURL(blob);
return url;
function toggleRaw() {
showRaw = !showRaw;
}
function msToString(ms: number): string {
@ -91,13 +77,21 @@
<span class="h-5"><IconEncrypted /></span>
<span>e2e encrypted | <span>Shared {timeString} ago</span></span>
</span>
<button on:click={downloadMd} class="flex gap-1.5 uppercase items-center hover:underline">
<button on:click={toggleRaw} class="flex gap-1.5 uppercase items-center hover:underline">
{#if showRaw}
<span class="h-6"><LogoDocument /> </span>
<span>Render Document</span>
{:else}
<span>Raw Markdown</span>
<span class="h-6"><LogoMarkdown /> </span>
<a hidden bind:this={downloadRef} href="./">.</a>
{/if}
</button>
</p>
{#if showRaw}
<RawRenderer>{plaintext}</RawRenderer>
{:else}
<MarkdownRenderer {plaintext} />
{/if}
</div>
{/if}