diff --git a/app/src/assets/scss/component/_typography.scss b/app/src/assets/scss/component/_typography.scss index b54190a17..9cb6d4f8f 100644 --- a/app/src/assets/scss/component/_typography.scss +++ b/app/src/assets/scss/component/_typography.scss @@ -212,14 +212,13 @@ display: inline-block; width: max-content; - tr td, - tr th { - background-color: var(--b3-theme-surface); - border-top: 1px solid var(--b3-theme-surface-lighter); + tr:nth-child(2n) td { + background-color: var(--b3-theme-background); } td, th { + background-color: var(--b3-theme-surface); padding: 4px 8px; border: 1px solid var(--b3-theme-surface-lighter); box-sizing: border-box; @@ -240,10 +239,6 @@ tbody td { font-weight: normal; } - - tbody tr:nth-child(2n) td { - background-color: var(--b3-theme-background); - } } code:not(.hljs), diff --git a/app/src/assets/scss/protyle/_wysiwyg.scss b/app/src/assets/scss/protyle/_wysiwyg.scss index 0188b0494..d18ec6426 100644 --- a/app/src/assets/scss/protyle/_wysiwyg.scss +++ b/app/src/assets/scss/protyle/_wysiwyg.scss @@ -256,16 +256,14 @@ padding: 0; } - &.table > [spellcheck] { - overflow: auto; + &.table[custom-pinthead="true"] { + table { + height: 50vh; + } - & > table.select { - position: relative; - z-index: 1; - - tr { - background-color: transparent !important; - } + thead { + position: sticky; + top: -1px; } } diff --git a/app/src/menus/protyle.ts b/app/src/menus/protyle.ts index 9d37df202..03f3caebe 100644 --- a/app/src/menus/protyle.ts +++ b/app/src/menus/protyle.ts @@ -1190,11 +1190,21 @@ export const tableMenu = (protyle: IProtyle, nodeElement: Element, cellElement: } }); } - if (cellElement.rowSpan > 1 || cellElement.colSpan > 1 || thMatchElement.style.width) { - menus.push({ - type: "separator" - }); - } + const isPinHead = nodeElement.getAttribute("custom-pinthead") + menus.push({ + icon: "iconPin", + label: isPinHead ? window.siyuan.languages.unpinTableHead : window.siyuan.languages.pinTableHead, + click: () => { + const html = nodeElement.outerHTML; + if (isPinHead) { + nodeElement.removeAttribute("custom-pinthead") + } else { + nodeElement.setAttribute("custom-pinthead", "true") + } + updateTransaction(protyle, nodeElement.getAttribute("data-node-id"), nodeElement.outerHTML, html); + } + }); + menus.push({type: "separator"}); menus.push({ icon: "iconAlignLeft", accelerator: window.siyuan.config.keymap.editor.general.alignLeft.custom, diff --git a/app/src/protyle/wysiwyg/index.ts b/app/src/protyle/wysiwyg/index.ts index c4e52824e..1d12b6be5 100644 --- a/app/src/protyle/wysiwyg/index.ts +++ b/app/src/protyle/wysiwyg/index.ts @@ -397,7 +397,6 @@ export class WYSIWYG { if (target.tagName === "TH" || target.tagName === "TD" || target.firstElementChild?.tagName === "TABLE" || target.classList.contains("table__resize") || target.classList.contains("table__select")) { tableBlockElement = hasClosestBlock(target); if (tableBlockElement) { - tableBlockElement.querySelector("table").classList.remove("select"); tableBlockElement.querySelector(".table__select").removeAttribute("style"); window.siyuan.menus.menu.remove(); event.stopPropagation(); @@ -532,7 +531,6 @@ export class WYSIWYG { width = item.offsetLeft + item.clientWidth - left; } }); - tableBlockElement.querySelector("table").classList.add("select"); tableBlockElement.querySelector(".table__select").setAttribute("style", `left:${left - tableBlockElement.firstElementChild.scrollLeft}px;top:${top}px;height:${height}px;width:${width + 1}px;`); moveCellElement = moveTarget; } @@ -752,7 +750,6 @@ export class WYSIWYG { } } }); - tableBlockElement.querySelector("table").classList.remove("select"); tableSelectElement.removeAttribute("style"); const oldHTML = tableBlockElement.outerHTML; let cellElement = selectCellElements[0]; @@ -840,7 +837,6 @@ export class WYSIWYG { selectCellElements.push(item); } }); - tableBlockElement.querySelector("table").classList.remove("select"); tableSelectElement.removeAttribute("style"); setTableAlign(protyle, selectCellElements, tableBlockElement, "left", getEditorRange(tableBlockElement)); } @@ -862,7 +858,6 @@ export class WYSIWYG { selectCellElements.push(item); } }); - tableBlockElement.querySelector("table").classList.remove("select"); tableSelectElement.removeAttribute("style"); setTableAlign(protyle, selectCellElements, tableBlockElement, "center", getEditorRange(tableBlockElement)); } @@ -884,7 +879,6 @@ export class WYSIWYG { selectCellElements.push(item); } }); - tableBlockElement.querySelector("table").classList.remove("select"); tableSelectElement.removeAttribute("style"); setTableAlign(protyle, selectCellElements, tableBlockElement, "right", getEditorRange(tableBlockElement)); } @@ -905,7 +899,6 @@ export class WYSIWYG { selectCellElements.push(item); } }); - tableBlockElement.querySelector("table").classList.remove("select"); tableSelectElement.removeAttribute("style"); const oldHTML = tableBlockElement.outerHTML; selectCellElements.forEach(item => { @@ -1267,7 +1260,6 @@ export class WYSIWYG { window.siyuan.menus.menu.popup({x, y: y + 13, h: 26}); protyle.toolbar?.element.classList.add("fn__none"); if (nodeElement.classList.contains("table")) { - nodeElement.querySelector("table").classList.remove("select"); nodeElement.querySelector(".table__select").removeAttribute("style"); } } @@ -1541,7 +1533,6 @@ export class WYSIWYG { const tableElement = hasClosestByClassName(event.target, "table"); this.element.querySelectorAll(".table").forEach(item => { if (!tableElement || !item.isSameNode(tableElement)) { - item.querySelector("table").classList.remove("select"); item.querySelector(".table__select").removeAttribute("style"); } if (tableElement && tableElement.isSameNode(item) && item.querySelector(".table__select").getAttribute("style")) {