KaTeX & Syntax Highlighting support

2025-09-09 13:17:53 +07:00
parent d310b6df64
commit 8540d72993
10 changed files with 709 additions and 152 deletions
@@ -29,7 +29,7 @@ body {
    color: var(--theme-foreground);
 }

-.btn {
+@utility btn {
    @apply px-2 py-1 cursor-pointer;
 }

@@ -41,9 +41,38 @@ body {
    @apply border py-1 px-2 rounded;
 }

+.hljs {
+    @apply rounded;
+}
+
 .printarea {
    visibility: hidden;
    display: none;
+
+    code {
+        text-wrap: wrap;
+    }
+}
+
+img {
+    display: inline-block;
+    margin: 0;
+}
+
+.top-menu-button {
+    @apply hover:bg-gray-300/40 dark:hover:bg-gray-500/40 btn rounded transition-colors flex-1 text-left;
+}
+
+.max-h-half {
+    max-height: calc(50vh - 32px);
+}
+
+@utility h-screen-trimmed {
+    height: calc(100vh - 64px);
+}
+
+@utility max-h-screen-trimmed {
+    max-height: calc(100vh - 64px);
 }

@media print {
@@ -0,0 +1,15 @@
+<!-- Component for highlighting menu bar actions with their respective button when Alt is pressed -->
+
+<script lang="ts">
+	import type { Snippet } from "svelte";
+
+	const {
+		altMenu,
+		children
+	}: {
+		altMenu: boolean;
+		children: Snippet;
+	} = $props();
+</script>
+
+<span class={altMenu ? "underline" : ""}>{@render children()}</span>
@@ -1,46 +1,86 @@
 <script lang="ts">
-	import { download } from '$lib/download';
-	import DOMPurify from 'dompurify';
-	import { marked } from 'marked';
+	import { download } from "$lib/download";
+	import DOMPurify from "dompurify";
+	import hljs from "highlight.js";
+	import { Marked } from "marked";
+	import { markedHighlight } from "marked-highlight";
+	import markedKatex from "marked-katex-extension";

 	const { content }: { content: string } = $props();

 	let exportDialog: HTMLDialogElement;
-	let format = $state('html');
+	let format = $state("html");
 	let processing = $state(false);
-	let printContent: string = $state('');
+	let printContent: string = $state("");

 	export function showModal() {
 		exportDialog.showModal();
 	}

+	async function getHtml() {
+		const marked = new Marked(
+			markedHighlight({
+				emptyLangClass: "hljs",
+				langPrefix: "hljs language-",
+				highlight(code, lang, info) {
+					const language = hljs.getLanguage(lang) ? lang : "plaintext";
+					return hljs.highlight(code, { language }).value;
+				}
+			}),
+			markedKatex({
+				throwOnError: false
+			})
+		);
+		const htmlContent = await marked.parse(content);
+
+		return htmlContent;
+	}
+
 	async function exportHtml() {
-		const html = await marked.parse(content);
+		const html = `<!DOCTYPE html>
+<html>
+<head>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.22/dist/katex.min.css" integrity="sha384-5TcZemv2l/9On385z///+d7MSYlvIEw9FuZTIdZ14vJLqWphw7e7ZPuOiCHJcFCP" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.11.1/build/styles/dark.min.css">
+    <style>
+        body {
+            margin: 1rem 1.5rem;
+            font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+        }
+        .hljs {
+            border-radius: 0.25rem;
+        }
+    
+</style>
+</head>
+<body>
+    ${await getHtml()}
+</body>
 </html>`;
-			type: 'text/html'
+		const blob = new Blob([html], {
 			type: "text/html"
-		download(blob, 'litewriter-document.html');
+		});
 		download(blob, "litewriter-document.html");
 	}

-		printContent = DOMPurify.sanitize(await marked.parse(content));
+	export async function exportPdf() {
 		printContent = DOMPurify.sanitize(await getHtml());

 		setTimeout(() => {
-			printContent = '';
+			window.print();
 			// printContent = "";
 		}, 1000);
 	}

 	async function exportBtn() {
-			case 'html':
+		switch (format) {
 			case "html":
 				await exportHtml();
-			case 'pdf':
+				break;
 			case "pdf":
 				await exportPdf();
-			case 'odt':
-				await (await import('../opendocument')).exportOdt(content);
+				break;
+			case "odt":
 				await (await import("../opendocument")).exportOdt(content);
 				break;
 		}
@@ -48,7 +88,7 @@
 		exportDialog.close();
 	}
 </script>
-<div class="printarea prose">
+
 <div class="printarea prose bg-white max-w-[unset]">
 	{@html printContent}
 </div>
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import type { MouseEventHandler } from "svelte/elements";
+
+	const {
+		onclick,
+		children
+	}: {
+		onclick: MouseEventHandler<HTMLButtonElement>;
+		children: Snippet;
+	} = $props();
+</script>
+
+<li class="flex">
+	<button class="top-menu-button" {onclick}>
+		{@render children()}
+	</button>
+</li>
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+
+	const {
+		shownMenu,
+		name,
+		children
+	}: {
+		shownMenu: string | null;
+		name: string;
+		children: Snippet;
+	} = $props();
+</script>
+
+<div
+	class={`z-10 w-44 absolute bg-theme-floating rounded ${shownMenu === name ? "" : "hidden"} shadow`}
+	role="menu"
+>
+	<ul>
+		{@render children()}
+	</ul>
+</div>
@@ -1,24 +1,58 @@
 <script lang="ts">
-	import { Decoration, MatchDecorator, ViewPlugin, EditorView } from '@codemirror/view';
-	import { markdown } from '@codemirror/lang-markdown';
-	import CodeMirror from 'svelte-codemirror-editor';
-	import type { PageTheme } from '$lib/themes/theme';
-	import { dracula } from '$lib/themes/dracula';
-	import { enhance } from '$app/forms';
-	import { onMount } from 'svelte';
-	import MenuButton from '$lib/components/MenuButton.svelte';
-	import ExportDialog from '$lib/components/ExportDialog.svelte';
-	import '../css/codemirror.css';
+	import type { PageTheme } from "$lib/themes/theme";
+	import MenuButton from "$lib/components/MenuButton.svelte";
+	import MenuActionList from "$lib/components/MenuActionList.svelte";
+	import MenuAction from "$lib/components/MenuAction.svelte";
+	import markedKatex from "marked-katex-extension";
+	import hljs from "highlight.js";
+	import ExportDialog from "$lib/components/ExportDialog.svelte";
+	import DOMPurify from "isomorphic-dompurify";
+	import CodeMirror from "svelte-codemirror-editor";
+	import AltHighlight from "$lib/components/AltHighlight.svelte";
+	import { onMount } from "svelte";
+	import { markedHighlight } from "marked-highlight";
+	import { Marked } from "marked";
+	import { markdown } from "@codemirror/lang-markdown";
+	import { enhance } from "$app/forms";
+	import { dracula } from "$lib/themes/dracula";
+	import { Decoration, MatchDecorator, ViewPlugin, EditorView } from "@codemirror/view";
+	import "katex/dist/katex.min.css";
+	import "highlight.js/styles/dark.min.css";
+	import "../css/codemirror.css";

 	let { data } = $props();

 	let { themeName } = data;

-	let content = $state(`# Heading 1
-## Heading 2
-### Heading 3
+	let content = $state(``);

-**bold** *italic*`);
+	let unsaved = $derived(content !== "");
+
+	const marked = new Marked(
+		markedKatex({
+			throwOnError: false
+		}),
+		markedHighlight({
+			emptyLangClass: "hljs",
+			langPrefix: "hljs language-",
+			highlight(code, lang, info) {
+				const language = hljs.getLanguage(lang) ? lang : "plaintext";
+				return hljs.highlight(code, { language }).value;
+			}
+		})
+	);
+
+	let documentPreview = $derived.by(() => {
+		const sanitized = DOMPurify.sanitize(
+			marked
+				.parse(content, {
+					async: false
+				})
+				.replaceAll("<pre>", '<pre class="not-prose">')
+		);
+
+		return sanitized;
+	});

 	let changeThemeForm: HTMLFormElement;

@@ -27,21 +61,38 @@
 		Dracula: dracula
 	};

+	function beforeUnload(e: BeforeUnloadEvent) {
+		if (!unsaved || content.trim() === "") return;
+
+		e.preventDefault();
+	}
+
+	$effect(() => {
+		unsaved;
+
+		if (unsaved) {
+			window.addEventListener("beforeunload", beforeUnload);
+			return;
+		}
+
+		window.removeEventListener("beforeunload", beforeUnload);
+	});
+
 	let cmTheme = themeOptions[themeName]?.codemirror ?? null;

 	let headingDecorations: { [key: string]: Decoration } = {
-		'#': Decoration.mark({ class: 'h1' }),
-		'##': Decoration.mark({ class: 'h2' }),
-		'###': Decoration.mark({ class: 'h3' }),
-		'####': Decoration.mark({ class: 'h4' }),
-		'#####': Decoration.mark({ class: 'h5' }),
-		'######': Decoration.mark({ class: 'h6' })
+		"#": Decoration.mark({ class: "h1" }),
+		"##": Decoration.mark({ class: "h2" }),
+		"###": Decoration.mark({ class: "h3" }),
+		"####": Decoration.mark({ class: "h4" }),
+		"#####": Decoration.mark({ class: "h5" }),
+		"######": Decoration.mark({ class: "h6" })
 	};

 	let decorator = new MatchDecorator({
 		regexp: /^#{1,6} .*/gm,
 		decoration(match, view, pos) {
-			return headingDecorations[match[0].split(' ')[0]];
+			return headingDecorations[match[0].split(" ")[0]];
 		}
 	});

@@ -61,13 +112,13 @@
 		const pageTheme = themeOptions[themeName];

 		if (pageTheme?.dark) {
-			document.body.classList.add('dark');
+			document.body.classList.add("dark");
 		}

-		document.body.style.setProperty('--theme-background', pageTheme?.background ?? null);
-		document.body.style.setProperty('--theme-background-darker', pageTheme?.backgroundDark ?? null);
-		document.body.style.setProperty('--theme-floating', pageTheme?.floatingControls ?? null);
-		document.body.style.setProperty('--theme-foreground', pageTheme?.foreground ?? null);
+		document.body.style.setProperty("--theme-background", pageTheme?.background ?? null);
+		document.body.style.setProperty("--theme-background-darker", pageTheme?.backgroundDark ?? null);
+		document.body.style.setProperty("--theme-floating", pageTheme?.floatingControls ?? null);
+		document.body.style.setProperty("--theme-foreground", pageTheme?.foreground ?? null);
 	});

 	let shownMenu = $state<string | null>(null);
@@ -83,7 +134,7 @@
 	function menuButtonClicked(menuName: string) {
 		if (shownMenu === menuName) {
 			shownMenu = null;
-			menuTriggeredWithAlt = false;
+			altMenu = false;
 			return;
 		}

@@ -93,7 +144,7 @@
 	function menuButtonBlur(e: FocusEvent) {
 		if (
 			e.relatedTarget !== null &&
-			(e.relatedTarget as HTMLElement).classList.contains('top-menu-button')
+			(e.relatedTarget as HTMLElement).classList.contains("top-menu-button")
 		) {
 			return;
 		}
@@ -106,7 +157,7 @@
 	}

 	function newFileBtn() {
-		content = '';
+		content = "";
 		menuActionComplete();
 	}

@@ -126,10 +177,10 @@
 	}

 	let altPressed = $state(false);
-	let menuTriggeredWithAlt = $state(false);
+	let altMenu = $state(false);
 	const altMenuMapping: { [key: string]: string } = {
-		f: 'file',
-		h: 'help'
+		f: "file",
+		h: "help"
 	};
 	const altSubmenuMapping: { [menu: string]: { [key: string]: Function } } = {
 		file: {
@@ -143,12 +194,12 @@
 	};

 	function keyDownListener(ev: KeyboardEvent) {
-		if (menuTriggeredWithAlt && shownMenu !== null && altSubmenuMapping[shownMenu]?.[ev.key]) {
+		if (altMenu && shownMenu !== null && altSubmenuMapping[shownMenu]?.[ev.key]) {
 			ev.preventDefault();
 			ev.stopPropagation();

 			altSubmenuMapping[shownMenu][ev.key]();
-			menuTriggeredWithAlt = false;
+			altMenu = false;
 			shownMenu = null;
 		}

@@ -159,29 +210,32 @@
 				ev.preventDefault();
 				ev.stopPropagation();

-				menuTriggeredWithAlt = true;
+				altMenu = true;
 				menuButtonClicked(menu);
 				return;
 			}

-			if (ev.key === 'Alt') {
-				ev.preventDefault();
-				ev.stopPropagation();
+			if (ev.key === "Alt") {
 				altPressed = true;
-				menuTriggeredWithAlt = false;
+				altMenu = false;
+
+				if (shownMenu !== null) {
+					shownMenu = null;
+				}
 			}
-			return;
 		}
 	}

 	function keyUpListener(ev: KeyboardEvent) {
-		if (ev.key === 'Alt') {
+		if (ev.key === "Alt") {
+			ev.preventDefault();
+			ev.stopPropagation();
 			altPressed = false;
 		}
 	}

 	const ariaAttribute = EditorView.contentAttributes.of({
-		'aria-label': 'The Markdown editor'
+		"aria-label": "The Markdown editor"
 	});
 </script>

@@ -192,8 +246,8 @@

 <svelte:body onkeydown={keyDownListener} onkeyup={keyUpListener} />

-<header class="p-4 flex justify-between bg-theme-darker">
-	<ul class="flex" role="list">
+<header class="p-4 flex justify-between bg-theme-darker fixed h-auto w-full z-10">
+	<ul class="flex">
 		<li>
 			<MenuButton
 				{shownMenu}
@@ -202,39 +256,19 @@
 				buttonClicked={menuButtonClicked}
 				blurEvent={menuButtonBlur}
 			>
-				<span class={altPressed ? 'underline' : ''}>F</span>ile
+				<AltHighlight altMenu={altPressed}>F</AltHighlight>ile
 			</MenuButton>
-			<div
-				class={`z-10 w-44 absolute bg-theme-floating rounded ${shownMenu === 'file' ? '' : 'hidden'} shadow`}
-				role="menu"
-			>
-				<ul>
-					<li class="flex">
-						<button
-							class="hover:bg-gray-300/40 dark:hover:bg-gray-500/40 btn rounded transition-colors flex-1 text-left top-menu-button"
-							onclick={newFileBtn}
-						>
-							<span class={menuTriggeredWithAlt ? 'underline' : ''}>N</span>ew File
-						</button>
-					</li>
-					<li class="flex">
-						<button
-							class="hover:bg-gray-300/40 dark:hover:bg-gray-500/40 btn rounded transition-colors flex-1 text-left top-menu-button"
-							onclick={exportFileBtn}
-						>
-							<span class={menuTriggeredWithAlt ? 'underline' : ''}>E</span>xport...
-						</button>
-					</li>
-					<li class="flex">
-						<button
-							class="hover:bg-gray-300/40 dark:hover:bg-gray-500/40 btn rounded transition-colors flex-1 text-left top-menu-button"
-							onclick={printFileBtn}
-						>
-							<span class={menuTriggeredWithAlt ? 'underline' : ''}>P</span>rint...
-						</button>
-					</li>
-				</ul>
-			</div>
+			<MenuActionList {shownMenu} name="file">
+				<MenuAction onclick={newFileBtn}>
+					<AltHighlight {altMenu}>N</AltHighlight>ew File
+				</MenuAction>
+				<MenuAction onclick={exportFileBtn}>
+					<AltHighlight {altMenu}>E</AltHighlight>xport
+				</MenuAction>
+				<MenuAction onclick={printFileBtn}>
+					<AltHighlight {altMenu}>P</AltHighlight>rint...
+				</MenuAction>
+			</MenuActionList>
 		</li>
 		<li>
 			<MenuButton
@@ -244,22 +278,13 @@
 				buttonClicked={menuButtonClicked}
 				blurEvent={menuButtonBlur}
 			>
-				<span class={altPressed ? 'underline' : ''}>H</span>elp
+				<AltHighlight altMenu={altPressed}>H</AltHighlight>elp
 			</MenuButton>
-			<div
-				class={`z-10 w-44 absolute bg-theme-floating rounded ${shownMenu === 'help' ? '' : 'hidden'} shadow`}
-				role="menu"
-			>
-				<ul>
-					<li class="flex">
-						<button
-							class="hover:bg-gray-300/40 dark:hover:bg-gray-500/40 btn rounded transition-colors flex-1 text-left top-menu-button"
-						>
-							<span class={menuTriggeredWithAlt ? 'underline' : ''}>A</span>bout
-						</button>
-					</li>
-				</ul>
-			</div>
+			<MenuActionList {shownMenu} name="help">
+				<MenuAction onclick={aboutBtn}>
+					<AltHighlight {altMenu}>A</AltHighlight>bout
+				</MenuAction>
+			</MenuActionList>
 		</li>
 	</ul>
 	<form method="POST" use:enhance action="?/changeTheme" bind:this={changeThemeForm}>
@@ -279,9 +304,18 @@

 <ExportDialog bind:this={exportDialog} {content} />

-<CodeMirror
-	bind:value={content}
-	theme={cmTheme}
-	lang={markdown()}
-	extensions={[headingPlugin, ariaAttribute]}
-/>
+<div class="grid grid-rows-2 lg:grid-cols-2 pt-16 max-h-screen">
+	<CodeMirror
+		bind:value={content}
+		theme={cmTheme}
+		lang={markdown()}
+		extensions={[headingPlugin, ariaAttribute]}
+		class="overflow-auto lg:h-screen-trimmed! lg:max-w-[50vw]"
+	/>
+	<div
+		id="livePreview"
+		class="prose bg-white max-w-full p-4 lg:h-screen-trimmed! lg:max-w-[50vw] overflow-auto"
+	>
+		{@html documentPreview}
+	</div>
+</div>