From dc0a140e0edf9cc23a60a67dec7ce03b7758038c Mon Sep 17 00:00:00 2001 From: Jeffrey Chen <78434827+TCOTC@users.noreply.github.com> Date: Mon, 16 Jun 2025 19:48:23 +0800 Subject: [PATCH] :art: Record the width of some Protyle elements in the attributes fix https://github.com/siyuan-note/siyuan/issues/15021 --- app/src/assets/scss/protyle/_wysiwyg.scss | 4 +++ app/src/assets/template/app/index.tpl | 1 - app/src/assets/template/app/window.tpl | 1 - app/src/assets/template/desktop/index.tpl | 1 - app/src/protyle/ui/initUI.ts | 42 +++++++++++++---------- kernel/conf/editor.go | 2 +- 6 files changed, 29 insertions(+), 22 deletions(-) diff --git a/app/src/assets/scss/protyle/_wysiwyg.scss b/app/src/assets/scss/protyle/_wysiwyg.scss index ff9d296ca82..f6bddede972 100644 --- a/app/src/assets/scss/protyle/_wysiwyg.scss +++ b/app/src/assets/scss/protyle/_wysiwyg.scss @@ -583,6 +583,10 @@ @include text-clamp(1); max-width: 25vw; } + + .b3-tooltips::after { + max-width: var(--b3-width-protyle-wysiwyg); + } } &--animate { diff --git a/app/src/assets/template/app/index.tpl b/app/src/assets/template/app/index.tpl index a8972a3c10a..e6ae935917d 100644 --- a/app/src/assets/template/app/index.tpl +++ b/app/src/assets/template/app/index.tpl @@ -4,7 +4,6 @@ - diff --git a/app/src/assets/template/app/window.tpl b/app/src/assets/template/app/window.tpl index a3a8b1a5959..f112ab5aee0 100644 --- a/app/src/assets/template/app/window.tpl +++ b/app/src/assets/template/app/window.tpl @@ -7,7 +7,6 @@ - diff --git a/app/src/assets/template/desktop/index.tpl b/app/src/assets/template/desktop/index.tpl index 9f4ba442dee..b98770f58dd 100644 --- a/app/src/assets/template/desktop/index.tpl +++ b/app/src/assets/template/desktop/index.tpl @@ -8,7 +8,6 @@ - diff --git a/app/src/protyle/ui/initUI.ts b/app/src/protyle/ui/initUI.ts index 0522aba893a..a11b98ea859 100644 --- a/app/src/protyle/ui/initUI.ts +++ b/app/src/protyle/ui/initUI.ts @@ -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) }; }; diff --git a/kernel/conf/editor.go b/kernel/conf/editor.go index cffeb053478..40136cef9a4 100644 --- a/kernel/conf/editor.go +++ b/kernel/conf/editor.go @@ -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"` // 历史保留天数