Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-12-16 22:50:13 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

🎨 Record the width of some Protyle elements in the attributes (#15043)

Browse source 
fix https://github.com/siyuan-note/siyuan/issues/15021
This commit is contained in:
Jeffrey Chen 2025-10-25 17:16:56 +08:00 • committed by GitHub
parent 2a2645d450
commit 6150e9b7c6
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 29 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

4
app/src/assets/scss/protyle/_wysiwyg.scss
View file

@ -615,6 +615,10 @@
max-width: 25vw; max-width: 25vw;
} }
} }
.b3-tooltips::after {
max-width: var(--b3-width-protyle-wysiwyg);
}
} }
&--animate { &--animate {

1
app/src/assets/template/app/index.tpl
View file

@ -4,7 +4,6 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag <!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag
<meta http-equiv="Content-Security-Policy" content="script-src 'self'"/>--> <meta http-equiv="Content-Security-Policy" content="script-src 'self'"/>-->
<style id="editorAttr" type="text/css"></style>
<link rel="preload" href="../../../appearance/fonts/Noto-COLRv1-2.047/Noto-COLRv1.woff2" as="font" type="font/woff2" crossorigin> <link rel="preload" href="../../../appearance/fonts/Noto-COLRv1-2.047/Noto-COLRv1.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="../../../appearance/fonts/JetBrainsMono-2.304/JetBrainsMono-Regular.woff2" as="font" type="font/woff2" crossorigin> <link rel="preload" href="../../../appearance/fonts/JetBrainsMono-2.304/JetBrainsMono-Regular.woff2" as="font" type="font/woff2" crossorigin>
<script src="../../protyle/js/pdf/pdf.min.mjs?v=4.7.85" type="module"></script> <script src="../../protyle/js/pdf/pdf.min.mjs?v=4.7.85" type="module"></script>

1
app/src/assets/template/app/window.tpl
View file

@ -7,7 +7,6 @@
<meta name="mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<link rel="apple-touch-icon" href="../../icon.png"> <link rel="apple-touch-icon" href="../../icon.png">
<style id="editorAttr" type="text/css"></style>
<script src="../../protyle/js/pdf/pdf.min.mjs?v=4.7.85" type="module"></script> <script src="../../protyle/js/pdf/pdf.min.mjs?v=4.7.85" type="module"></script>
</head> </head>
<body class="fn__flex-column body--window"> <body class="fn__flex-column body--window">

1
app/src/assets/template/desktop/index.tpl
View file

@ -8,7 +8,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<link rel="manifest" href="/manifest.webmanifest" crossorigin="use-credentials"> <link rel="manifest" href="/manifest.webmanifest" crossorigin="use-credentials">
<link rel="apple-touch-icon" href="../../icon.png"> <link rel="apple-touch-icon" href="../../icon.png">
<style id="editorAttr" type="text/css"></style>
<script src="../../protyle/js/pdf/pdf.min.mjs?v=4.7.85" type="module"></script> <script src="../../protyle/js/pdf/pdf.min.mjs?v=4.7.85" type="module"></script>
</head> </head>
<body class="fn__flex-column"> <body class="fn__flex-column">

42
app/src/protyle/ui/initUI.ts
View file

@ -296,34 +296,40 @@ export const setPadding = (protyle: IProtyle) => {
padding: 0 padding: 0
}; };
} }
const oldLeft = parseInt(protyle.wysiwyg.element.style.paddingLeft); const oldLeft = parseInt(protyle.wysiwyg.element.style.paddingLeft || "0");
const padding = getPadding(protyle); const padding = getPadding(protyle);
const left = padding.left; const paddingLeft = padding.left;
const right = padding.right; const paddingRight = padding.right;
const protyleWidth = protyle.element.clientWidth;
const scrollbarWidth = protyle.contentElement.offsetWidth - protyle.contentElement.clientWidth;
const contentWidth = protyleWidth - scrollbarWidth;
const wysiwygOldWidth = parseInt(protyle.wysiwyg.element.getAttribute("data-realwidth") || "0");
const wysiwygNewWidth = contentWidth - paddingLeft - paddingRight;
// https://github.com/siyuan-note/siyuan/issues/15021
protyle.element.style.setProperty("--b3-width-protyle", protyleWidth + "px");
protyle.element.style.setProperty("--b3-width-protyle-content", contentWidth + "px");
protyle.element.style.setProperty("--b3-width-protyle-wysiwyg", wysiwygNewWidth.toString() + "px");
protyle.wysiwyg.element.setAttribute("data-realwidth", wysiwygNewWidth.toString());
if (protyle.options.backlinkData) { if (protyle.options.backlinkData) {
protyle.wysiwyg.element.style.padding = `4px ${right}px 4px ${left}px`; protyle.wysiwyg.element.style.padding = `4px ${paddingRight}px 4px ${paddingLeft}px`;
} else { } else {
protyle.wysiwyg.element.style.padding = `${padding.top}px ${right}px ${padding.bottom}px ${left}px`; protyle.wysiwyg.element.style.padding = `${padding.top}px ${paddingRight}px ${padding.bottom}px ${paddingLeft}px`;
} }
if (protyle.options.render.background) { if (protyle.options.render.background) {
protyle.background.element.querySelector(".protyle-background__ia").setAttribute("style", `margin-left:${left}px;margin-right:${right}px`); protyle.background.element.querySelector(".protyle-background__ia").setAttribute("style", `margin-left:${paddingLeft}px;margin-right:${paddingRight}px`);
} }
if (protyle.options.render.title) { if (protyle.options.render.title) {
// pc 端 文档名 attr 过长和添加标签等按钮重合 // pc 端 文档名 attr 过长和添加标签等按钮重合
protyle.title.element.style.margin = `16px ${right}px 0 ${left}px`; protyle.title.element.style.margin = `16px ${paddingRight}px 0 ${paddingLeft}px`;
} }
if (window.siyuan.config.editor.displayBookmarkIcon) {
const editorAttrElement = document.getElementById("editorAttr");
if (editorAttrElement) {
editorAttrElement.innerHTML = `.protyle-wysiwyg--attr .b3-tooltips::after { max-width: ${protyle.wysiwyg.element.clientWidth - left - right}px; }`;
}
}
const oldWidth = protyle.wysiwyg.element.getAttribute("data-realwidth");
const newWidth = protyle.wysiwyg.element.clientWidth - parseInt(protyle.wysiwyg.element.style.paddingLeft) - parseInt(protyle.wysiwyg.element.style.paddingRight);
protyle.wysiwyg.element.setAttribute("data-realwidth", newWidth.toString());
return { return {
width: Math.abs(parseInt(oldWidth) - newWidth), width: Math.abs(wysiwygOldWidth - wysiwygNewWidth),
padding: Math.abs(oldLeft - parseInt(protyle.wysiwyg.element.style.paddingLeft)) padding: Math.abs(oldLeft - paddingLeft)
}; };
}; };

2
kernel/conf/editor.go
View file

@ -27,7 +27,7 @@ type Editor struct {
CodeTabSpaces int `json:"codeTabSpaces"` // 代码块中 Tab 转换空格数，配置为 0 则表示不转换 CodeTabSpaces int `json:"codeTabSpaces"` // 代码块中 Tab 转换空格数，配置为 0 则表示不转换
CodeLineWrap bool `json:"codeLineWrap"` // 代码块是否自动折行 CodeLineWrap bool `json:"codeLineWrap"` // 代码块是否自动折行
CodeLigatures bool `json:"codeLigatures"` // 代码块是否连字 CodeLigatures bool `json:"codeLigatures"` // 代码块是否连字
DisplayBookmarkIcon bool `json:"displayBookmarkIcon"` // 是否显示书签图标 DisplayBookmarkIcon bool `json:"displayBookmarkIcon"` // 是否显示内容块角标
DisplayNetImgMark bool `json:"displayNetImgMark"` // 是否显示网络图片角标 DisplayNetImgMark bool `json:"displayNetImgMark"` // 是否显示网络图片角标
GenerateHistoryInterval int `json:"generateHistoryInterval"` // 生成历史时间间隔，单位：分钟 GenerateHistoryInterval int `json:"generateHistoryInterval"` // 生成历史时间间隔，单位：分钟
HistoryRetentionDays int `json:"historyRetentionDays"` // 历史保留天数 HistoryRetentionDays int `json:"historyRetentionDays"` // 历史保留天数