From 6ca01316781af45700e4bd8172d98fc8557fe23c Mon Sep 17 00:00:00 2001
From: naskya <m@naskya.net>
Date: Sun, 26 Mar 2023 08:15:21 +0900
Subject: [PATCH] Create a custom KaTeX macro setting item

---
 .../src/pages/settings/custom-katex-macro.vue | 51 +++++++++++++++++++
 .../client/src/pages/settings/general.vue     |  2 +
 .../pages/settings/preferences-backups.vue    |  1 +
 packages/client/src/router.ts                 | 10 ++++
 packages/client/src/store.ts                  |  4 ++
 5 files changed, 68 insertions(+)
 create mode 100644 packages/client/src/pages/settings/custom-katex-macro.vue

diff --git a/packages/client/src/pages/settings/custom-katex-macro.vue b/packages/client/src/pages/settings/custom-katex-macro.vue
new file mode 100644
index 0000000000..ff37b89d31
--- /dev/null
+++ b/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>
diff --git a/packages/client/src/pages/settings/general.vue b/packages/client/src/pages/settings/general.vue
index 1e18b7aa67..486819e29f 100644
--- a/packages/client/src/pages/settings/general.vue
+++ b/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>
 
diff --git a/packages/client/src/pages/settings/preferences-backups.vue b/packages/client/src/pages/settings/preferences-backups.vue
index 62ad029f30..b9bc979f73 100644
--- a/packages/client/src/pages/settings/preferences-backups.vue
+++ b/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',
diff --git a/packages/client/src/router.ts b/packages/client/src/router.ts
index 48aad0820f..3529032b2b 100644
--- a/packages/client/src/router.ts
+++ b/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",
diff --git a/packages/client/src/store.ts b/packages/client/src/store.ts
index 6c0398ac40..65a89ad94e 100644
--- a/packages/client/src/store.ts
+++ b/packages/client/src/store.ts
@@ -289,6 +289,10 @@ export const defaultStore = markRaw(
 			where: "device",
 			default: false,
 		},
+		enableCustomKaTeXMacro {
+			where: "device",
+			default: false,
+		},
 	}),
 );