Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2026-02-05 15:11:48 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

🎨 font size

Browse source
This commit is contained in:
Vanessa 2023-09-26 12:43:13 +08:00
parent aa22b4892a
commit 713aba12e2
6 changed files with 36 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

2
app/src/protyle/render/highlightRender.ts
View file

@ -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};`);

23
app/src/protyle/toolbar/Font.ts
View file

@ -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 {