fix: replace style.display in livePreview with CSS class

This commit is contained in:
黄鸿峰 2026-04-28 09:18:45 +08:00
parent 8af1ff7f57
commit 31ad20aa4c
2 changed files with 14 additions and 4 deletions

View file

@ -99,8 +99,9 @@ export function buildLivePreviewExt() {
/**
* Apply the model's merge structure to an already-rendered `<table>` without
* touching cell content. Anchor cells receive their `rowspan` / `colspan`
* attributes; placeholder cells are visually removed via `display: none` so
* the row/column geometry collapses around them.
* attributes; placeholder cells are visually removed via the
* `.tm-merge-placeholder` CSS class so the row/column geometry collapses
* around them.
*/
function applyMergesInPlace(table: HTMLTableElement, model: TableModel): void {
const rows = Array.from(table.rows);
@ -119,7 +120,7 @@ function applyMergesInPlace(table: HTMLTableElement, model: TableModel): void {
else td.removeAttribute("rowspan");
if (modelCell.colspan > 1) td.setAttribute("colspan", String(modelCell.colspan));
else td.removeAttribute("colspan");
if (td.style.display === "none") td.style.display = "";
td.classList.remove("tm-merge-placeholder");
td.dataset.tmMerge = modelCell.rowspan > 1 || modelCell.colspan > 1 ? "anchor" : "";
// Some Obsidian builds render raw `<br>` in a GFM table cell as plain
// text instead of a real line break. Promote any literal `<br>` text
@ -127,7 +128,7 @@ function applyMergesInPlace(table: HTMLTableElement, model: TableModel): void {
// visually break to a new line in Live Preview too.
upgradeLiteralBrs(td);
} else {
td.style.display = "none";
td.classList.add("tm-merge-placeholder");
td.dataset.tmMerge = "placeholder";
}
}

View file

@ -33,6 +33,15 @@
display: none !important;
}
/* Live Preview merged-cell placeholder: anchors keep their colspan/rowspan
* attributes, while the cells they cover are hidden via this class so the
* row/column geometry collapses around the anchor. Toggled in JS via
* classList instead of writing element.style.display directly. */
table td.tm-merge-placeholder,
table th.tm-merge-placeholder {
display: none !important;
}
.tm-floating-toolbar .tm-group {
display: flex;
align-items: center;