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

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

@ -23,14 +23,15 @@
import IconEncrypted from 'svelte-icons/md/MdLockOutline.svelte'; import IconEncrypted from 'svelte-icons/md/MdLockOutline.svelte';
import type { EncryptedNote } from '$lib/model/EncryptedNote'; import type { EncryptedNote } from '$lib/model/EncryptedNote';
import { browser } from '$app/env'; 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 // Auto-loaded from [id].ts endpoint
export let note: EncryptedNote; export let note: EncryptedNote;
let plaintext: string; let plaintext: string;
let timeString: string; let timeString: string;
let decryptFailed = false; let decryptFailed = false;
// let downloadUrl: string; let showRaw = false;
let downloadRef: HTMLAnchorElement;
onMount(() => { onMount(() => {
if (browser) { if (browser) {
@ -47,23 +48,8 @@
timeString = msToString(diff_ms); timeString = msToString(diff_ms);
} }
// $: if (plaintext) { function toggleRaw() {
// downloadUrl = downloadMd(plaintext); showRaw = !showRaw;
// }
// 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 msToString(ms: number): string { function msToString(ms: number): string {
@ -91,13 +77,21 @@
<span class="h-5"><IconEncrypted /></span> <span class="h-5"><IconEncrypted /></span>
<span>e2e encrypted | <span>Shared {timeString} ago</span></span> <span>e2e encrypted | <span>Shared {timeString} ago</span></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">
<span>Raw Markdown</span> {#if showRaw}
<span class="h-6"><LogoMarkdown /></span> <span class="h-6"><LogoDocument /> </span>
<a hidden bind:this={downloadRef} href="./">.</a> <span>Render Document</span>
{:else}
<span>Raw Markdown</span>
<span class="h-6"><LogoMarkdown /> </span>
{/if}
</button> </button>
</p> </p>
<MarkdownRenderer {plaintext} /> {#if showRaw}
<RawRenderer>{plaintext}</RawRenderer>
{:else}
<MarkdownRenderer {plaintext} />
{/if}
</div> </div>
{/if} {/if}