From 713aba12e2ecd7f34dece034d178ed39338e2d13 Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Tue, 26 Sep 2023 12:43:13 +0800
Subject: [PATCH] :art: font size

---
 app/src/assets/scss/component/_chip.scss      |  1 -
 .../assets/scss/component/_typography.scss    |  4 ++--
 app/src/mobile/util/keyboardToolbar.ts        | 18 +++++++++++----
 app/src/protyle/render/highlightRender.ts     |  2 ++
 app/src/protyle/toolbar/Font.ts               | 23 +++++++++++++++----
 app/src/util/assets.ts                        |  3 ---
 6 files changed, 36 insertions(+), 15 deletions(-)

diff --git a/app/src/assets/scss/component/_chip.scss b/app/src/assets/scss/component/_chip.scss
index 5925d251f..94e395f9c 100644
--- a/app/src/assets/scss/component/_chip.scss
+++ b/app/src/assets/scss/component/_chip.scss
@@ -34,7 +34,6 @@
   &--small {
     padding: 0 8px;
     font-size: 12px;
-    line-height: 16px;
   }
 
   &--secondary {
diff --git a/app/src/assets/scss/component/_typography.scss b/app/src/assets/scss/component/_typography.scss
index 11a3786f5..487783ab5 100644
--- a/app/src/assets/scss/component/_typography.scss
+++ b/app/src/assets/scss/component/_typography.scss
@@ -297,7 +297,7 @@
 
   .hljs {
     border-radius: var(--b3-border-radius);
-    padding: 22px 4px;
+    padding: 1.6em 4px;
     font-size: 85%;
     overflow: auto;
     font-family: var(--b3-font-family-code);
@@ -548,7 +548,7 @@
       font-size: 85%;
       line-height: 1.625;
       background-color: var(--b3-theme-surface);
-      padding: 22px 4px;
+      padding: 1.6em 4px;
       box-sizing: border-box;
       border-radius: var(--b3-border-radius) 0 0 var(--b3-border-radius);
       width: 3.6em;
diff --git a/app/src/mobile/util/keyboardToolbar.ts b/app/src/mobile/util/keyboardToolbar.ts
index d4a29684a..43eeaad3b 100644
--- a/app/src/mobile/util/keyboardToolbar.ts
+++ b/app/src/mobile/util/keyboardToolbar.ts
@@ -49,6 +49,15 @@ export const renderTextMenu = (protyle: IProtyle, toolbarElement: Element) => {
 </button>`;
     });
 
+    const nodeElements = getFontNodeElements(protyle);
+    let disableFont = false;
+    nodeElements?.find((item: HTMLElement) => {
+        if (item.classList.contains("list") || item.classList.contains("li")) {
+            disableFont = true;
+            return true;
+        }
+    });
+
     let lastColorHTML = "";
     const lastFonts = window.siyuan.storage[Constants.LOCAL_FONTSTYLES];
     if (lastFonts.length > 0) {
@@ -82,9 +91,11 @@ export const renderTextMenu = (protyle: IProtyle, toolbarElement: Element) => {
 </button>`;
                     break;
                 case "fontSize":
-                    lastColorHTML += `<button class="keyboard__slash-item" data-type="${lastFontStatus[0]}">
+                    if (!disableFont) {
+                        lastColorHTML += `<button class="keyboard__slash-item" data-type="${lastFontStatus[0]}">
     <span class="keyboard__slash-text">${lastFontStatus[1]}</span>
 </button>`;
+                    }
                     break;
                 case "style1":
                     lastColorHTML += `<button class="keyboard__slash-item" data-type="${lastFontStatus[0]}">
@@ -103,7 +114,6 @@ export const renderTextMenu = (protyle: IProtyle, toolbarElement: Element) => {
     }
     let textElement: HTMLElement;
     let fontSize = "16px";
-    const nodeElements = getFontNodeElements(protyle);
     if (nodeElements && nodeElements.length > 0) {
         textElement = nodeElements[0] as HTMLElement;
     } else {
@@ -157,8 +167,8 @@ export const renderTextMenu = (protyle: IProtyle, toolbarElement: Element) => {
         <span class="keyboard__slash-text">${window.siyuan.languages.clearFontStyle}</span>
     </button>
 </div>
-<div class="keyboard__slash-title">${window.siyuan.languages.fontSize}</div>
-<div class="keyboard__slash-block">
+<div class="keyboard__slash-title${disableFont ? " fn__none" : ""}">${window.siyuan.languages.fontSize}</div>
+<div class="keyboard__slash-block${disableFont ? " fn__none" : ""}">
     <select class="b3-select fn__block" style="width: calc(50% - 8px);margin: 4px 0 8px 0;">
         <option ${fontSize === "12px" ? "selected" : ""} value="12px">12px</option>
         <option ${fontSize === "13px" ? "selected" : ""} value="13px">13px</option>
diff --git a/app/src/protyle/render/highlightRender.ts b/app/src/protyle/render/highlightRender.ts
index 810c3cb17..7d524531f 100644
--- a/app/src/protyle/render/highlightRender.ts
+++ b/app/src/protyle/render/highlightRender.ts
@@ -132,6 +132,8 @@ export const lineNumberRender = (block: HTMLElement) => {
         return;
     }
     block.classList.add("protyle-linenumber");
+    // clientHeight 总是取的整数
+    block.parentElement.style.lineHeight = `${((parseInt(block.parentElement.style.fontSize) || window.siyuan.config.editor.fontSize) * 1.625 * 0.85).toFixed(0)}px`;
     const lineNumberTemp = document.createElement("div");
     lineNumberTemp.className = "hljs protyle-linenumber";
     lineNumberTemp.setAttribute("style", `padding-top:0 !important;padding-bottom:0 !important;min-height:auto !important;white-space:${block.style.whiteSpace};word-break:${block.style.wordBreak};font-variant-ligatures:${block.style.fontVariantLigatures};`);
diff --git a/app/src/protyle/toolbar/Font.ts b/app/src/protyle/toolbar/Font.ts
index d97841d54..c21137208 100644
--- a/app/src/protyle/toolbar/Font.ts
+++ b/app/src/protyle/toolbar/Font.ts
@@ -5,6 +5,7 @@ import {focusByRange, getSelectionPosition} from "../util/selection";
 import {Constants} from "../../constants";
 import {hasClosestBlock, hasClosestByAttribute} from "../util/hasClosest";
 import {updateBatchTransaction} from "../wysiwyg/transaction";
+import {lineNumberRender} from "../render/highlightRender";
 
 export class Font extends ToolbarItem {
     public element: HTMLElement;
@@ -46,6 +47,13 @@ export const appearanceMenu = (protyle: IProtyle, nodeElements?: Element[]) => {
 
     const element = document.createElement("div");
     element.classList.add("protyle-font");
+    let disableFont = false;
+    nodeElements?.find((item: HTMLElement) => {
+        if (item.classList.contains("list") || item.classList.contains("li")) {
+            disableFont = true;
+            return true;
+        }
+    });
     let lastColorHTML = "";
     const lastFonts = window.siyuan.storage[Constants.LOCAL_FONTSTYLES];
     if (lastFonts.length > 0) {
@@ -72,7 +80,9 @@ export const appearanceMenu = (protyle: IProtyle, nodeElements?: Element[]) => {
                     lastColorHTML += `<button data-type="${lastFontStatus[0]}" class="protyle-font__style" style="text-shadow: 1px 1px var(--b3-theme-surface-lighter), 2px 2px var(--b3-theme-surface-lighter), 3px 3px var(--b3-theme-surface-lighter), 4px 4px var(--b3-theme-surface-lighter)">${window.siyuan.languages.shadow}</button>`;
                     break;
                 case "fontSize":
-                    lastColorHTML += `<button data-type="${lastFontStatus[0]}" class="protyle-font__style">${lastFontStatus[1]}</button>`;
+                    if (!disableFont) {
+                        lastColorHTML += `<button data-type="${lastFontStatus[0]}" class="protyle-font__style">${lastFontStatus[1]}</button>`;
+                    }
                     break;
                 case "style1":
                     lastColorHTML += `<button data-type="${lastFontStatus[0]}" style="background-color:${lastFontStatus[1]};color:${lastFontStatus[2]}" class="color__square">A</button>`;
@@ -126,10 +136,10 @@ export const appearanceMenu = (protyle: IProtyle, nodeElements?: Element[]) => {
     <button data-type="style2" class="protyle-font__style" style="-webkit-text-stroke: 0.2px var(--b3-theme-on-background);-webkit-text-fill-color : transparent;">${window.siyuan.languages.hollow}</button>
     <button data-type="style4" class="protyle-font__style" style="text-shadow: 1px 1px var(--b3-theme-surface-lighter), 2px 2px var(--b3-theme-surface-lighter), 3px 3px var(--b3-theme-surface-lighter), 4px 4px var(--b3-theme-surface-lighter)">${window.siyuan.languages.shadow}</button>
 </div>
-<div class="fn__hr"></div>
-<div>${window.siyuan.languages.fontSize}</div>
-<div class="fn__hr--small"></div>
-<div class="fn__flex">
+<div class="fn__hr${disableFont ? " fn__none" : ""}"></div>
+<div class="${disableFont ? " fn__none" : ""}">${window.siyuan.languages.fontSize}</div>
+<div class="fn__hr--small${disableFont ? " fn__none" : ""}"></div>
+<div class="fn__flex${disableFont ? " fn__none" : ""}">
     <select class="b3-select fn__block">
         <option ${fontSize === "12px" ? "selected" : ""} value="12px">12px</option>
         <option ${fontSize === "13px" ? "selected" : ""} value="13px">13px</option>
@@ -221,6 +231,9 @@ export const fontEvent = (protyle: IProtyle, nodeElements: Element[], type?: str
             } else if (type === "fontSize") {
                 e.style.fontSize = color;
             }
+            if ((type === "fontSize" || type === "clear") && e.getAttribute("data-type") === "NodeCodeBlock") {
+                lineNumberRender(e.querySelector(".hljs"));
+            }
         });
         focusByRange(protyle.toolbar.range);
     } else {
diff --git a/app/src/util/assets.ts b/app/src/util/assets.ts
index 75de48aa3..634747519 100644
--- a/app/src/util/assets.ts
+++ b/app/src/util/assets.ts
@@ -199,7 +199,6 @@ export const addGA = () => {
 
 export const setInlineStyle = (set = true) => {
     const height = Math.floor(window.siyuan.config.editor.fontSize * 1.625);
-    // .protyle-wysiwyg .hljs.protyle-linenumber 的设置是由于 lineNumberRender 中 clientHeight 总是取的整数
     let style = `.b3-typography, .protyle-wysiwyg, .protyle-title {font-size:${window.siyuan.config.editor.fontSize}px !important}
 .b3-typography code:not(.hljs), .protyle-wysiwyg span[data-type~=code] { font-variant-ligatures: ${window.siyuan.config.editor.codeLigatures ? "normal" : "none"} }
 .li > .protyle-action {height:${height + 8}px;line-height: ${height + 8}px}
@@ -210,8 +209,6 @@ export const setInlineStyle = (set = true) => {
 .protyle-wysiwyg [data-node-id] [spellcheck] {min-height:${height}px;}
 .protyle-wysiwyg [data-node-id] {${window.siyuan.config.editor.rtl ? " direction: rtl;" : ""}${window.siyuan.config.editor.justify ? " text-align: justify;" : ""}}
 .protyle-wysiwyg .li {min-height:${height + 8}px}
-.protyle-wysiwyg .hljs.protyle-linenumber {line-height: ${(height * 0.85).toFixed(0)}px}
-.protyle-wysiwyg .av__calc {line-height: ${height}px}
 .protyle-gutters button svg {height:${height}px}
 .protyle-wysiwyg img.emoji, .b3-typography img.emoji {width:${height - 8}px}
 .protyle-wysiwyg .h1 img.emoji, .b3-typography h1 img.emoji {width:${Math.floor(window.siyuan.config.editor.fontSize * 1.75 * 1.25)}px}