Skip to content

Commit dc0a140

Browse files
TCOTCTCOTC
committed
🎨 Record the width of some Protyle elements in the attributes
fix #15021
1 parent 09051c4 commit dc0a140

6 files changed

Lines changed: 29 additions & 22 deletions

File tree

‎app/src/assets/scss/protyle/_wysiwyg.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -583,6 +583,10 @@
583583
@include text-clamp(1);
584584
max-width: 25vw;
585585
}
586+
587+
.b3-tooltips::after {
588+
max-width: var(--b3-width-protyle-wysiwyg);
589+
}
586590
}
587591

588592
&--animate {

‎app/src/assets/template/app/index.tpl‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
<meta charset="UTF-8">
55
<!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag
66
<meta http-equiv="Content-Security-Policy" content="script-src 'self'"/>-->
7-
<style id="editorAttr" type="text/css"></style>
87
<link rel="preload" href="../../../appearance/fonts/Noto-COLRv1-2.047/Noto-COLRv1.woff2" as="font" type="font/woff2" crossorigin>
98
<link rel="preload" href="../../../appearance/fonts/JetBrainsMono-2.304/JetBrainsMono-Regular.woff2" as="font" type="font/woff2" crossorigin>
109
<script src="../../protyle/js/pdf/pdf.min.mjs?v=4.7.85" type="module"></script>

‎app/src/assets/template/app/window.tpl‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77
<meta name="apple-mobile-web-app-capable" content="yes">
88
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
99
<link rel="apple-touch-icon" href="../../icon.png">
10-
<style id="editorAttr" type="text/css"></style>
1110
<script src="../../protyle/js/pdf/pdf.min.mjs?v=4.7.85" type="module"></script>
1211
</head>
1312
<body class="fn__flex-column body--window">

‎app/src/assets/template/desktop/index.tpl‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@
88
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
99
<link rel="manifest" href="/manifest.webmanifest" crossorigin="use-credentials">
1010
<link rel="apple-touch-icon" href="../../icon.png">
11-
<style id="editorAttr" type="text/css"></style>
1211
<script src="../../protyle/js/pdf/pdf.min.mjs?v=4.7.85" type="module"></script>
1312
</head>
1413
<body class="fn__flex-column">

‎app/src/protyle/ui/initUI.ts‎

Lines changed: 24 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -287,34 +287,40 @@ export const setPadding = (protyle: IProtyle) => {
287287
padding: 0
288288
};
289289
}
290-
const oldLeft = parseInt(protyle.wysiwyg.element.style.paddingLeft);
290+
const oldLeft = parseInt(protyle.wysiwyg.element.style.paddingLeft || "0");
291291
const padding = getPadding(protyle);
292-
const left = padding.left;
293-
const right = padding.right;
292+
const paddingLeft = padding.left;
293+
const paddingRight = padding.right;
294+
295+
const protyleWidth = protyle.element.clientWidth;
296+
const scrollbarWidth = protyle.contentElement.offsetWidth - protyle.contentElement.clientWidth;
297+
const contentWidth = protyleWidth - scrollbarWidth;
298+
299+
const wysiwygOldWidth = parseInt(protyle.wysiwyg.element.getAttribute("data-realwidth") || "0");
300+
const wysiwygNewWidth = contentWidth - paddingLeft - paddingRight;
301+
302+
// https://github.com/siyuan-note/siyuan/issues/15021
303+
protyle.element.style.setProperty("--b3-width-protyle", protyleWidth + "px");
304+
protyle.element.style.setProperty("--b3-width-protyle-content", contentWidth + "px");
305+
protyle.element.style.setProperty("--b3-width-protyle-wysiwyg", wysiwygNewWidth.toString() + "px");
306+
protyle.wysiwyg.element.setAttribute("data-realwidth", wysiwygNewWidth.toString());
307+
294308
if (protyle.options.backlinkData) {
295-
protyle.wysiwyg.element.style.padding = `4px ${right}px 4px ${left}px`;
309+
protyle.wysiwyg.element.style.padding = `4px ${paddingRight}px 4px ${paddingLeft}px`;
296310
} else {
297-
protyle.wysiwyg.element.style.padding = `${padding.top}px ${right}px ${padding.bottom}px ${left}px`;
311+
protyle.wysiwyg.element.style.padding = `${padding.top}px ${paddingRight}px ${padding.bottom}px ${paddingLeft}px`;
298312
}
299313
if (protyle.options.render.background) {
300-
protyle.background.element.querySelector(".protyle-background__ia").setAttribute("style", `margin-left:${left}px;margin-right:${right}px`);
314+
protyle.background.element.querySelector(".protyle-background__ia").setAttribute("style", `margin-left:${paddingLeft}px;margin-right:${paddingRight}px`);
301315
}
302316
if (protyle.options.render.title) {
303317
// pc 端 文档名 attr 过长和添加标签等按钮重合
304-
protyle.title.element.style.margin = `16px ${right}px 0 ${left}px`;
318+
protyle.title.element.style.margin = `16px ${paddingRight}px 0 ${paddingLeft}px`;
305319
}
306-
if (window.siyuan.config.editor.displayBookmarkIcon) {
307-
const editorAttrElement = document.getElementById("editorAttr");
308-
if (editorAttrElement) {
309-
editorAttrElement.innerHTML = `.protyle-wysiwyg--attr .b3-tooltips::after { max-width: ${protyle.wysiwyg.element.clientWidth - left - right}px; }`;
310-
}
311-
}
312-
const oldWidth = protyle.wysiwyg.element.getAttribute("data-realwidth");
313-
const newWidth = protyle.wysiwyg.element.clientWidth - parseInt(protyle.wysiwyg.element.style.paddingLeft) - parseInt(protyle.wysiwyg.element.style.paddingRight);
314-
protyle.wysiwyg.element.setAttribute("data-realwidth", newWidth.toString());
320+
315321
return {
316-
width: Math.abs(parseInt(oldWidth) - newWidth),
317-
padding: Math.abs(oldLeft - parseInt(protyle.wysiwyg.element.style.paddingLeft))
322+
width: Math.abs(wysiwygOldWidth - wysiwygNewWidth),
323+
padding: Math.abs(oldLeft - paddingLeft)
318324
};
319325
};
320326

‎kernel/conf/editor.go‎

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

0 commit comments

Comments
 (0)