Create a custom KaTeX macro setting item

packages/client/src/pages/settings/custom-katex-macro.vue

@@ -0,0 +1,51 @@
+<template>
+<div class="_formRoot">
+	<FormInfo class="_formBlock">{{ i18n.ts.customKaTeXMacroDescription }}</FormInfo>
+
+	<FormTextarea v-model="localCustomKaTeXMacro" manual-save tall class="_monospace _formBlock" style="tab-size: 2;">
+		<template #label>{{ i18n.ts.customKaTeXMacro }}</template>
+	</FormTextarea>
+
+	<FormSwitch v-model="enableCustomKaTeXMacro" class="_formBlock">{{ i18n.ts.enableCustomKaTeXMacro }}</FormSwitch>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
+import FormTextarea from '@/components/form/textarea.vue';
+import FormInfo from '@/components/MkInfo.vue';
+import * as os from '@/os';
+import { unisonReload } from '@/scripts/unison-reload';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+import { parseKaTeXMacros } from '@/scripts/katex-macro';
+
+const localCustomKaTeXMacro = ref(localStorage.getItem('customKaTeXMacro') ?? '');
+const enableCustomKaTeXMacro = computed(defaultStore.makeGetterSetter('enableCustomKaTeXMacro'));
+
+async function apply() {
+	localStorage.setItem('customKaTeXMacro', localCustomKaTeXMacro.value);
+	localStorage.setItem('customKaTeXMacroParsed', parseKaTeXMacros(localCustomKaTeXMacro.value));
+
+	const { canceled } = await os.confirm({
+		type: 'info',
+		text: i18n.ts.reloadToApplySetting,
+	});
+	if (canceled) return;
+
+	unisonReload();
+}
+
+watch(localCustomKaTeXMacro, async () => {
+	await apply();
+});
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.customKaTeXMacro,
+	icon: 'ph-code ph-bold ph-lg',
+});
+</script>

packages/client/src/pages/settings/general.vue

@@ -98,6 +98,8 @@
 	<FormLink to="/settings/deck" class="_formBlock">{{ i18n.ts.deck }}</FormLink>
 
 	<FormLink to="/settings/custom-css" class="_formBlock"><template #icon><i class="ph-code ph-bold ph-lg"></i></template>{{ i18n.ts.customCss }}</FormLink>
+
+	<FormLink to="/settings/custom-katex-macro" class="_formBlock"><template #icon><i class="ph-code ph-bold ph-lg"></i></template>{{ i18n.ts.customKaTeXMacro }}</FormLink>
 </div>
 </template>
 

packages/client/src/pages/settings/preferences-backups.vue

@@ -87,6 +87,7 @@ const defaultStoreSaveKeys: (keyof typeof defaultStore['state'])[] = [
 	'showUpdates',
 	'swipeOnDesktop',
 	'showAdminUpdates',
+	'enableCustomKaTeXMacro',
 ];
 const coldDeviceStorageSaveKeys: (keyof typeof ColdDeviceStorage.default)[] = [
 	'lightTheme',

packages/client/src/router.ts

@@ -133,6 +133,11 @@ export const routes = [
 				name: "custom-css",
 				component: page(() => import("./pages/settings/custom-css.vue")),
 			},
+			{
+				path: "/custom-katex-macro",
+				name: "custom-katex-macro",
+				component: page(() => import("./pages/settings/custom-katex-macro.vue")),
+			},
 			{
 				path: "/account-info",
 				name: "account-info",
@@ -235,6 +240,11 @@ export const routes = [
 				name: "general",
 				component: page(() => import("./pages/settings/custom-css.vue")),
 			},
+			{
+				path: "/custom-katex-macro",
+				name: "general",
+				component: page(() => import("./pages/settings/custom-katex-macro.vue")),
+			},
 			{
 				path: "/accounts",
 				name: "profile",

packages/client/src/store.ts

@@ -289,6 +289,10 @@ export const defaultStore = markRaw(
 			where: "device",
 			default: false,
 		},
+		enableCustomKaTeXMacro {
+			where: "device",
+			default: false,
+		},
 	}),
 );