Skip to content

markdown preview: trouble with <details> blocks  #175353

@sethp

Description

@sethp

Type: Bug

When editing a document with <details> blocks, I observe twothree issues (third in a comment below):

  1. every refresh, the details blocks are closed (they lose their open attribute). I think I would find it more helpful if they retained their open/closed state between refreshes
  2. the synchronized scrolling between the editor and the preview is a little off. I can fully expand my (so far, two) <details> blocks and the scrolling seems to be in sync again, so I suspect the sync operates as if the details blocks are always fully expanded, when they are not. Unfortunately, due to the first problem, this isn't really tenable and so I've had to disable the sync for now.

For the second, I suspect the trouble is in getCodeLineElements:

for (const element of document.getElementsByClassName(codeLineClass)) {
const line = +element.getAttribute('data-line')!;
if (isNaN(line)) {
continue;
}
if (element.tagName === 'CODE' && element.parentElement && element.parentElement.tagName === 'PRE') {
// Fenced code blocks are a special case since the `code-line` can only be marked on
// the `<code>` element and not the parent `<pre>` element.
cachedElements.push({ element: element.parentElement as HTMLElement, line: line, codeElement: element as HTMLElement });
} else if (element.tagName === 'UL' || element.tagName === 'OL') {
// Skip adding list elements since the first child has the same code line (and should be preferred)
} else {
cachedElements.push({ element: element as HTMLElement, line });
}
}

codeLineClass here appears to be 'code-line', which I think will grab the contents of a closed <details>, as the DOM looks like this (note the difference between the two <details> blocks, the one with the open attribute is expanded):

image

And there doesn't appear to be any filtering to exclude elements that aren't visible (e.g. the parent is a <details> missing an open, as in my case).

Sorry if this should be two issues, they seemed related enough to at least start here.

Example document:

# document

some introductory text that gives the rough outline of what the thing should do

<details>
<summary>my very long aside, including a code block that spans a dozen lines or so, on how the thing actually works</summary>

<pre>
line 1
line 2
line 3
line 4
line 5
line 6
line 7
line 8
line 9
line 10
</pre>

</details>

Some more text that follows the aside.

VS Code version: Code - OSS 1.75.1 (441438a, 2023-02-09T20:16:38.064Z)
OS version: Linux x64 5.15.94-1-MANJARO
Modes:
Sandboxed: No

System Info
Item Value
CPUs AMD Ryzen 7 3700X 8-Core Processor (16 x 2200)
GPU Status 2d_canvas: enabled
canvas_oop_rasterization: disabled_off
direct_rendering_display_compositor: disabled_off_ok
gpu_compositing: enabled
multiple_raster_threads: enabled_on
opengl: enabled_on
rasterization: enabled
raw_draw: disabled_off_ok
skia_renderer: enabled_on
video_decode: disabled_software
video_encode: disabled_software
vulkan: disabled_off
webgl: enabled
webgl2: enabled
webgpu: disabled_off
Load (avg) 1, 1, 1
Memory (System) 62.74GB (47.06GB free)
Process Argv --unity-launch
Screen Reader no
VM 0%
DESKTOP_SESSION plasma
XDG_CURRENT_DESKTOP KDE
XDG_SESSION_DESKTOP KDE
XDG_SESSION_TYPE x11
Extensions (37)
Extension Author (truncated) Version
troff ban 1.0.24
calva bet 2.0.334
vscode-postgres cko 1.4.0
vscode-eslint dba 2.4.0
EditorConfig Edi 0.16.4
prettier-vscode esb 9.10.4
go gol 0.37.1
test-adapter-converter hbe 0.1.2
vscode-test-explorer hbe 2.21.1
jsonnet hep 0.1.0
jq-syntax-highlighting jq- 0.0.2
vscode-jest-test-adapter kav 0.8.1
vscode-clangd llv 0.1.23
shfmt mkh 1.2.0
vscode-docker ms- 1.24.0
vscode-kubernetes-tools ms- 1.3.11
isort ms- 2022.8.0
python ms- 2023.2.0
vscode-pylance ms- 2023.2.40
remote-containers ms- 0.275.1
cmake-tools ms- 1.13.45
cpptools ms- 1.14.3
cpptools-extension-pack ms- 1.3.0
test-adapter-converter ms- 0.1.6
vscode-selfhost-test-provider ms- 0.3.13
vsliveshare ms- 1.0.5832
vsliveshare-audio ms- 0.1.93
vsliveshare-pack ms- 0.4.0
vscode-commons red 0.0.6
vscode-yaml red 1.11.0
rust-analyzer rus 0.3.1410
shopify-liquid sis 3.2.2
even-better-toml tam 0.19.0
tilt Tch 1.0.9
shellcheck tim 0.29.4
cmake twx 0.0.17
vscode-proto3 zxh 0.5.5

(1 theme extensions excluded)

Metadata

Metadata

Assignees

Labels

bugIssue identified by VS Code Team member as probable buginsiders-releasedPatch has been released in VS Code InsidersmarkdownMarkdown support issuesverifiedVerification succeeded

Type

No type

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions