Skip to content

Record the width of some Protyle elements in the attributes #15043

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: dev
Choose a base branch
from
Open

Record the width of some Protyle elements in the attributes #15043

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions app/src/assets/scss/protyle/_wysiwyg.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -583,6 +583,10 @@
@include text-clamp(1);
max-width: 25vw;
}

.b3-tooltips::after {
max-width: var(--b3-width-protyle-wysiwyg);
}
}

&--animate {
Expand Down
1 change: 0 additions & 1 deletion app/src/assets/template/app/index.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@
<meta charset="UTF-8">
<!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag
<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/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>
Expand Down
1 change: 0 additions & 1 deletion app/src/assets/template/app/window.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<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>
</head>
<body class="fn__flex-column body--window">
Expand Down
1 change: 0 additions & 1 deletion app/src/assets/template/desktop/index.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<link rel="manifest" href="/manifest.webmanifest" crossorigin="use-credentials">
<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>
</head>
<body class="fn__flex-column">
Expand Down
42 changes: 24 additions & 18 deletions app/src/protyle/ui/initUI.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -287,34 +287,40 @@ export const setPadding = (protyle: IProtyle) => {
padding: 0
};
}
const oldLeft = parseInt(protyle.wysiwyg.element.style.paddingLeft);
const oldLeft = parseInt(protyle.wysiwyg.element.style.paddingLeft || "0");
const padding = getPadding(protyle);
const left = padding.left;
const right = padding.right;
const paddingLeft = padding.left;
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) {
protyle.wysiwyg.element.style.padding = `4px ${right}px 4px ${left}px`;
protyle.wysiwyg.element.style.padding = `4px ${paddingRight}px 4px ${paddingLeft}px`;
} 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) {
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) {
// 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 {
width: Math.abs(parseInt(oldWidth) - newWidth),
padding: Math.abs(oldLeft - parseInt(protyle.wysiwyg.element.style.paddingLeft))
width: Math.abs(wysiwygOldWidth - wysiwygNewWidth),
padding: Math.abs(oldLeft - paddingLeft)
};
};

Expand Down
2 changes: 1 addition & 1 deletion kernel/conf/editor.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ type Editor struct {
CodeTabSpaces int `json:"codeTabSpaces"` // 代码块中 Tab 转换空格数，配置为 0 则表示不转换
CodeLineWrap bool `json:"codeLineWrap"` // 代码块是否自动折行
CodeLigatures bool `json:"codeLigatures"` // 代码块是否连字
DisplayBookmarkIcon bool `json:"displayBookmarkIcon"` // 是否显示书签图标
DisplayBookmarkIcon bool `json:"displayBookmarkIcon"` // 是否显示内容块角标
DisplayNetImgMark bool `json:"displayNetImgMark"` // 是否显示网络图片角标
GenerateHistoryInterval int `json:"generateHistoryInterval"` // 生成历史时间间隔，单位：分钟
HistoryRetentionDays int `json:"historyRetentionDays"` // 历史保留天数
Expand Down