Skip to content

Commit 6150e9b

Browse files
TCOTCTCOTC
authored
🎨 Record the width of some Protyle elements in the attributes (#15043)
fix #15021
1 parent 2a2645d commit 6150e9b

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
@@ -615,6 +615,10 @@
615615
max-width: 25vw;
616616
}
617617
}
618+
619+
.b3-tooltips::after {
620+
max-width: var(--b3-width-protyle-wysiwyg);
621+
}
618622
}
619623

620624
&--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="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
@@ -296,34 +296,40 @@ export const setPadding = (protyle: IProtyle) => {
296296
padding: 0
297297
};
298298
}
299-
const oldLeft = parseInt(protyle.wysiwyg.element.style.paddingLeft);
299+
const oldLeft = parseInt(protyle.wysiwyg.element.style.paddingLeft || "0");
300300
const padding = getPadding(protyle);
301-
const left = padding.left;
302-
const right = padding.right;
301+
const paddingLeft = padding.left;
302+
const paddingRight = padding.right;
303+
304+
const protyleWidth = protyle.element.clientWidth;
305+
const scrollbarWidth = protyle.contentElement.offsetWidth - protyle.contentElement.clientWidth;
306+
const contentWidth = protyleWidth - scrollbarWidth;
307+
308+
const wysiwygOldWidth = parseInt(protyle.wysiwyg.element.getAttribute("data-realwidth") || "0");
309+
const wysiwygNewWidth = contentWidth - paddingLeft - paddingRight;
310+
311+
// https://github.com/siyuan-note/siyuan/issues/15021
312+
protyle.element.style.setProperty("--b3-width-protyle", protyleWidth + "px");
313+
protyle.element.style.setProperty("--b3-width-protyle-content", contentWidth + "px");
314+
protyle.element.style.setProperty("--b3-width-protyle-wysiwyg", wysiwygNewWidth.toString() + "px");
315+
protyle.wysiwyg.element.setAttribute("data-realwidth", wysiwygNewWidth.toString());
316+
303317
if (protyle.options.backlinkData) {
304-
protyle.wysiwyg.element.style.padding = `4px ${right}px 4px ${left}px`;
318+
protyle.wysiwyg.element.style.padding = `4px ${paddingRight}px 4px ${paddingLeft}px`;
305319
} else {
306-
protyle.wysiwyg.element.style.padding = `${padding.top}px ${right}px ${padding.bottom}px ${left}px`;
320+
protyle.wysiwyg.element.style.padding = `${padding.top}px ${paddingRight}px ${padding.bottom}px ${paddingLeft}px`;
307321
}
308322
if (protyle.options.render.background) {
309-
protyle.background.element.querySelector(".protyle-background__ia").setAttribute("style", `margin-left:${left}px;margin-right:${right}px`);
323+
protyle.background.element.querySelector(".protyle-background__ia").setAttribute("style", `margin-left:${paddingLeft}px;margin-right:${paddingRight}px`);
310324
}
311325
if (protyle.options.render.title) {
312326
// pc 端 文档名 attr 过长和添加标签等按钮重合
313-
protyle.title.element.style.margin = `16px ${right}px 0 ${left}px`;
327+
protyle.title.element.style.margin = `16px ${paddingRight}px 0 ${paddingLeft}px`;
314328
}
315-
if (window.siyuan.config.editor.displayBookmarkIcon) {
316-
const editorAttrElement = document.getElementById("editorAttr");
317-
if (editorAttrElement) {
318-
editorAttrElement.innerHTML = `.protyle-wysiwyg--attr .b3-tooltips::after { max-width: ${protyle.wysiwyg.element.clientWidth - left - right}px; }`;
319-
}
320-
}
321-
const oldWidth = protyle.wysiwyg.element.getAttribute("data-realwidth");
322-
const newWidth = protyle.wysiwyg.element.clientWidth - parseInt(protyle.wysiwyg.element.style.paddingLeft) - parseInt(protyle.wysiwyg.element.style.paddingRight);
323-
protyle.wysiwyg.element.setAttribute("data-realwidth", newWidth.toString());
329+
324330
return {
325-
width: Math.abs(parseInt(oldWidth) - newWidth),
326-
padding: Math.abs(oldLeft - parseInt(protyle.wysiwyg.element.style.paddingLeft))
331+
width: Math.abs(wysiwygOldWidth - wysiwygNewWidth),
332+
padding: Math.abs(oldLeft - paddingLeft)
327333
};
328334
};
329335

‎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)