From 8cb27cae9095c00c62fe4bbe9cad9a96dc2aa3d0 Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Sat, 27 Aug 2022 22:58:13 +0800
Subject: [PATCH] :art: fix https://github.com/siyuan-note/siyuan/issues/5682

---
 app/appearance/langs/en_US.json        |  2 +-
 app/appearance/langs/es_ES.json        |  2 +-
 app/appearance/langs/fr_FR.json        |  2 +-
 app/appearance/langs/zh_CHT.json       |  2 +-
 app/appearance/langs/zh_CN.json        |  2 +-
 app/src/config/editor.ts               | 73 ++++++++++++++------------
 app/src/config/search.ts               |  6 +--
 app/src/protyle/markdown/mathRender.ts |  8 +++
 app/src/types/index.d.ts               |  1 +
 9 files changed, 57 insertions(+), 41 deletions(-)

diff --git a/app/appearance/langs/en_US.json b/app/appearance/langs/en_US.json
index d7cded1ba..df9080678 100644
--- a/app/appearance/langs/en_US.json
+++ b/app/appearance/langs/en_US.json
@@ -1,6 +1,6 @@
 {
   "katexMacros": "KaTex macro definition",
-  "katexMacrosTip": "Please use JSON object format (<code>{}</code>) to wrap macro definitions, eg <code>{ \\def\\foo{x^2} \\foo + \\foo }</code>",
+  "katexMacrosTip": "Please use JSON object format (<code class='fn__code'>{}</code>) to wrap macro definitions, eg <code class='fn__code'>{ \"\\\\foo\": \"{x^2}\" }</code>",
   "systemLogTip": "Program running records are saved in the system log. By exporting the system log and sending it to developers, it can better help developers diagnose program problems",
   "systemLog": "System log",
   "copyInsertAsAssets": "Copy as asset and insert",
diff --git a/app/appearance/langs/es_ES.json b/app/appearance/langs/es_ES.json
index 455e8d2a5..b37c6a3df 100644
--- a/app/appearance/langs/es_ES.json
+++ b/app/appearance/langs/es_ES.json
@@ -1,6 +1,6 @@
 {
   "katexMacros": "Definición de macro de KaTex",
-  "katexMacrosTip": "Utilice el formato de objeto JSON (<code>{}</code>) para envolver definiciones de macro, por ejemplo, <code>{ \\def\\foo{x^2} \\foo + \\foo }</code>",
+  "katexMacrosTip": "Utilice el formato de objeto JSON (<code class='fn__code'>{}</code>) para envolver definiciones de macro, por ejemplo, <code class='fn__code'>{ \"\\\\foo\": \"{x^2}\" }</code>",
   "systemLogTip": "Los registros de ejecución del programa se guardan en el registro del sistema. Al exportar el registro del sistema y enviarlo a los desarrolladores, puede ayudarlos a diagnosticar mejor los problemas del programa",
   "systemLog": "Registro del sistema",
   "copyInsertAsAssets": "Copiar como archivo de activos e insertar",
diff --git a/app/appearance/langs/fr_FR.json b/app/appearance/langs/fr_FR.json
index 82ca439f7..17d93720d 100644
--- a/app/appearance/langs/fr_FR.json
+++ b/app/appearance/langs/fr_FR.json
@@ -1,6 +1,6 @@
 {
   "katexMacros": "Définition de la macro KaTex",
-  "katexMacrosTip": "Veuillez utiliser le format d'objet JSON (<code>{}</code>) pour envelopper les définitions de macro, par exemple <code>{ \\def\\foo{x^2} \\foo + \\foo }</code>",
+  "katexMacrosTip": "Veuillez utiliser le format d'objet JSON (<code class='fn__code'>{}</code>) pour envelopper les définitions de macro, par exemple <code class='fn__code'>{ \"\\\\foo\": \"{x^2}\" }</code>",
   "systemLogTip": "Les enregistrements en cours d'exécution du programme sont enregistrés dans le journal système. En exportant le journal système et en l'envoyant aux développeurs, cela peut mieux aider les développeurs à diagnostiquer les problèmes du programme",
   "systemLog": "Journal du système",
   "copyInsertAsAssets": "Copier en tant que fichier d'actif et insérer",
diff --git a/app/appearance/langs/zh_CHT.json b/app/appearance/langs/zh_CHT.json
index 4cb32c583..f2908c324 100644
--- a/app/appearance/langs/zh_CHT.json
+++ b/app/appearance/langs/zh_CHT.json
@@ -1,6 +1,6 @@
 {
   "katexMacros": "KaTex 宏定義",
-  "katexMacrosTip": "請使用 JSON 對象格式（<code>{}</code>）來包裹宏定義，例如 <code>{ \\def\\foo{x^2} \\foo + \\foo }</code>",
+  "katexMacrosTip": "請使用 JSON 對象格式（<code class='fn__code'>{}</code>）來包裹宏定義，例如 <code class='fn__code'>{ \"\\\\foo\": \"{x^2}\" }</code>",
   "systemLogTip": "系統日誌中保存了程序運行記錄，通過導出系統日誌發送給開發者可以更好地幫助開發者診斷程序問題",
   "systemLog": "系統日誌",
   "copyInsertAsAssets": "複製為資源文件並插入",
diff --git a/app/appearance/langs/zh_CN.json b/app/appearance/langs/zh_CN.json
index edeb1df17..a777bb83a 100644
--- a/app/appearance/langs/zh_CN.json
+++ b/app/appearance/langs/zh_CN.json
@@ -1,6 +1,6 @@
 {
   "katexMacros": "KaTex 宏定义",
-  "katexMacrosTip": "请使用 JSON 对象格式（<code>{}</code>）来包裹宏定义，例如 <code>{ \\def\\foo{x^2} \\foo + \\foo }</code>",
+  "katexMacrosTip": "请使用 JSON 对象格式（<code class='fn__code'>{}</code>）来包裹宏定义，例如 <code class='fn__code'>{ \"\\\\foo\": \"{x^2}\" }</code>",
   "systemLogTip": "系统日志中保存了程序运行记录，通过导出系统日志发送给开发者可以更好地帮助开发者诊断程序问题",
   "systemLog": "系统日志",
   "copyInsertAsAssets": "复制为资源文件并插入",
diff --git a/app/src/config/editor.ts b/app/src/config/editor.ts
index 0640b5272..736a7b22c 100644
--- a/app/src/config/editor.ts
+++ b/app/src/config/editor.ts
@@ -57,14 +57,6 @@ export const editor = {
     <span class="fn__space"></span>
     <input class="b3-switch fn__flex-center" id="codeSyntaxHighlightLineNum" type="checkbox"${window.siyuan.config.editor.codeSyntaxHighlightLineNum ? " checked" : ""}/>
 </label>
-<label class="fn__flex b3-label">
-    <div class="fn__flex-1">
-        ${window.siyuan.languages.md39}
-        <div class="b3-label__text">${window.siyuan.languages.md40}</div>
-    </div>
-    <span class="fn__space"></span>
-    <input class="b3-text-field fn__flex-center fn__size200" id="plantUMLServePath" value="${window.siyuan.config.editor.plantUMLServePath}"/>
-</label>
 <label class="fn__flex b3-label">
     <div class="fn__flex-1">
         ${window.siyuan.languages.md33}
@@ -83,31 +75,11 @@ export const editor = {
 </label>
 <label class="fn__flex b3-label">
     <div class="fn__flex-1">
-        ${window.siyuan.languages.md29}
-        <div class="b3-label__text">${window.siyuan.languages.md30}</div>
+        ${window.siyuan.languages.md39}
+        <div class="b3-label__text">${window.siyuan.languages.md40}</div>
     </div>
     <span class="fn__space"></span>
-    <div class="b3-tooltips b3-tooltips__n fn__flex-center" aria-label="${window.siyuan.config.editor.codeTabSpaces}">   
-        <input class="b3-slider fn__size200" id="codeTabSpaces" max="8" min="0" step="2" type="range" value="${window.siyuan.config.editor.codeTabSpaces}">
-    </div>
-</label>
-<label class="fn__flex b3-label">
-    <div class="fn__flex-1">
-        ${window.siyuan.languages.fontSize}
-        <div class="b3-label__text">${window.siyuan.languages.fontSizeTip}</div>
-    </div>
-    <span class="fn__space"></span>
-    <div class="b3-tooltips b3-tooltips__n fn__flex-center" aria-label="${window.siyuan.config.editor.fontSize}">   
-        <input class="b3-slider fn__size200" id="fontSize" max="72" min="9" step="1" type="range" value="${window.siyuan.config.editor.fontSize}">
-    </div>
-</label>
-<label class="fn__flex b3-label">
-    <div class="fn__flex-1">
-        ${window.siyuan.languages.font}
-        <div class="b3-label__text">${window.siyuan.languages.font1}</div>
-    </div>
-    <span class="fn__space"></span>
-    ${fontFamilyHTML}
+    <input class="b3-text-field fn__flex-center fn__size200" id="plantUMLServePath" value="${window.siyuan.config.editor.plantUMLServePath}"/>
 </label>
 <label class="fn__flex b3-label">
     <div class="fn__flex-1">
@@ -133,7 +105,41 @@ export const editor = {
     </div>
     <span class="fn__space"></span>
     <input class="b3-text-field fn__flex-center fn__size200" id="historyRetentionDays" type="number" min="0" max="120" value="${window.siyuan.config.editor.historyRetentionDays}"/>
-</label>`;
+</label>
+<label class="fn__flex b3-label">
+    <div class="fn__flex-1">
+        ${window.siyuan.languages.font}
+        <div class="b3-label__text">${window.siyuan.languages.font1}</div>
+    </div>
+    <span class="fn__space"></span>
+    ${fontFamilyHTML}
+</label>
+<label class="fn__flex b3-label">
+    <div class="fn__flex-1">
+        ${window.siyuan.languages.fontSize}
+        <div class="b3-label__text">${window.siyuan.languages.fontSizeTip}</div>
+    </div>
+    <span class="fn__space"></span>
+    <div class="b3-tooltips b3-tooltips__n fn__flex-center" aria-label="${window.siyuan.config.editor.fontSize}">   
+        <input class="b3-slider fn__size200" id="fontSize" max="72" min="9" step="1" type="range" value="${window.siyuan.config.editor.fontSize}">
+    </div>
+</label>
+<label class="fn__flex b3-label">
+    <div class="fn__flex-1">
+        ${window.siyuan.languages.md29}
+        <div class="b3-label__text">${window.siyuan.languages.md30}</div>
+    </div>
+    <span class="fn__space"></span>
+    <div class="b3-tooltips b3-tooltips__n fn__flex-center" aria-label="${window.siyuan.config.editor.codeTabSpaces}">   
+        <input class="b3-slider fn__size200" id="codeTabSpaces" max="8" min="0" step="2" type="range" value="${window.siyuan.config.editor.codeTabSpaces}">
+    </div>
+</label>
+<div class="b3-label">
+    ${window.siyuan.languages.katexMacros}
+    <div class="b3-label__text">${window.siyuan.languages.katexMacrosTip}</div>
+    <div class="fn__hr"></div>
+    <textarea class="b3-text-field fn__block" id="katexMacros">${window.siyuan.config.editor.katexMacros}</textarea>
+</div>`;
     },
     bindEvent: () => {
         const fontFamilyElement = editor.element.querySelector("#fontFamily") as HTMLSelectElement;
@@ -159,6 +165,7 @@ export const editor = {
                 displayNetImgMark: (editor.element.querySelector("#displayNetImgMark") as HTMLInputElement).checked,
                 codeSyntaxHighlightLineNum: (editor.element.querySelector("#codeSyntaxHighlightLineNum") as HTMLInputElement).checked,
                 plantUMLServePath: (editor.element.querySelector("#plantUMLServePath") as HTMLInputElement).value,
+                katexMacros: (editor.element.querySelector("#katexMacros") as HTMLTextAreaElement).value,
                 codeLineWrap: (editor.element.querySelector("#codeLineWrap") as HTMLInputElement).checked,
                 virtualBlockRef: (editor.element.querySelector("#virtualBlockRef") as HTMLInputElement).checked,
                 virtualBlockRefExclude: (editor.element.querySelector("#virtualBlockRefExclude") as HTMLInputElement).value,
@@ -179,7 +186,7 @@ export const editor = {
                 setEditor();
             });
         });
-        editor.element.querySelectorAll("input.b3-text-field, input.b3-slider").forEach((item) => {
+        editor.element.querySelectorAll("textarea.b3-text-field, input.b3-text-field, input.b3-slider").forEach((item) => {
             item.addEventListener("blur", () => {
                 setEditor();
             });
diff --git a/app/src/config/search.ts b/app/src/config/search.ts
index 498ba3415..b98a37c77 100644
--- a/app/src/config/search.ts
+++ b/app/src/config/search.ts
@@ -12,9 +12,9 @@ export const initConfigSearch = (element: HTMLElement) => {
     const configIndex = [
         // 编辑器
         getLang(["config", "fullWidth",
-            "editor", "md2", "md3", "md12", "md16", "md27", "md28", "md29", "md30", "md31", "md32", "md33", "md34", "md39",
+            "editor", "md2", "md3", "md12", "md16", "md27", "md28", "md29", "md30", "md31", "md32", "md33", "md34", "md39", "md40",
             "fontSizeTip", "fontSize", "font", "font1", "generateHistory", "generateHistoryInterval",
-            "historyRetentionDays", "historyRetentionDaysTip", "clearHistory"
+            "historyRetentionDays", "historyRetentionDaysTip", "clearHistory", "katexMacros", "katexMacrosTip"
         ]),
 
         // 文档树
@@ -64,7 +64,7 @@ export const initConfigSearch = (element: HTMLElement) => {
         // 关于
         getLang(["about", "about1", "about2", "about3", "about4", "about5", "about6", "about7", "about8",
             "about11", "about12", "about13", "about14", "about15", "about16",
-            "slogan", "currentVer", "checkUpdate", "updatePath", "snapshotPassword"]),
+            "slogan", "currentVer", "checkUpdate", "updatePath", "snapshotPassword", "systemLog"]),
     ];
     const inputElement = element.querySelector(".b3-form__icon input") as HTMLInputElement;
     if (window.siyuan.config.system.container !== "ios") {
diff --git a/app/src/protyle/markdown/mathRender.ts b/app/src/protyle/markdown/mathRender.ts
index 2b2d407d2..605be8590 100644
--- a/app/src/protyle/markdown/mathRender.ts
+++ b/app/src/protyle/markdown/mathRender.ts
@@ -8,6 +8,7 @@ declare const katex: {
     renderToString(math: string, option: {
         displayMode: boolean;
         output: string;
+        macros: IObject
     }): string;
 };
 
@@ -34,10 +35,17 @@ export const mathRender = (element: Element, cdn = Constants.PROTYLE_CDN, maxWid
                 if (mathElement.tagName === "DIV") {
                     renderElement = mathElement.firstElementChild as HTMLElement;
                 }
+                let macros = {};
+                try {
+                    macros = JSON.parse(window.siyuan.config.editor.katexMacros || "{}")
+                } catch (e) {
+                    console.warn("KaTex macros is not JSON", e);
+                }
                 try {
                     renderElement.innerHTML = katex.renderToString(Lute.UnEscapeHTMLStr(mathElement.getAttribute("data-content")), {
                         displayMode: mathElement.tagName === "DIV",
                         output: "html",
+                        macros
                     });
                     renderElement.classList.remove("ft__error");
                     const blockElement = hasClosestBlock(mathElement);
diff --git a/app/src/types/index.d.ts b/app/src/types/index.d.ts
index 5d0049e6f..24b5987a6 100644
--- a/app/src/types/index.d.ts
+++ b/app/src/types/index.d.ts
@@ -202,6 +202,7 @@ declare interface IExport {
 }
 
 declare interface IEditor {
+    katexMacros: string;
     fullWidth: boolean;
     fontSize: number;
     generateHistoryInterval: number;