Markdown Preview - Ghost Elements

[AirAKose]

Type: Bug

While editing markdown, the preview is constantly building up ghost elements - namely when including custom HTML.

It seems to sometimes duplicate nodes, or lift a node out of its parent (especially when mid-typing an HTML tag open/close pair). I'm adding details and summary HTML elements, so sometimes I'll see a duplicate one of those details nodes. These ghost nodes won't go away until I close the preview entirely and re-open it.

I have the preview panel docked to the right side and visible while I'm editing the markdown file on the left.

VS Code version: Code 1.79.2 (695af097c7bd098fbf017ce3ac85e09bbc5dda06, 2023-06-14T08:57:04.379Z) OS version: Windows_NT x64 10.0.19045 Modes:

System Info

|Item|Value| |---|---| |CPUs|Intel(R) Core(TM) i7-6700K CPU @ 4.00GHz (8 x 4008)| |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
video_decode: enabled
video_encode: enabled
vulkan: disabled_off
webgl: enabled
webgl2: enabled
webgpu: enabled| |Load (avg)|undefined| |Memory (System)|15.96GB (5.20GB free)| |Process Argv|--crash-reporter-id 3cb71cfb-e545-4eec-83ff-c3baafe6fbc7| |Screen Reader|no| |VM|0%|

Extensions (15)

Extension|Author (truncated)|Version ---|---|--- language-mcfunction|arc|0.18.0 vscode-generate-getter-setter|DSK|0.5.0 luxe|lux|0.0.44 isort|ms-|2022.8.0 python|ms-|2023.10.1 vscode-pylance|ms-|2023.6.40 jupyter|ms-|2023.5.1101742258 jupyter-keymap|ms-|1.1.2 jupyter-renderers|ms-|1.0.15 vscode-jupyter-cell-tags|ms-|0.1.8 vscode-jupyter-slideshow|ms-|0.1.5 remote-wsl|ms-|0.79.5 cpptools|ms-|1.16.3 live-server|ms-|0.4.8 datapack-language-server|SPG|3.4.16

A/B Experiments

``` vsliv368:30146709 vsreu685:30147344 python383cf:30185419 vspor879:30202332 vspor708:30202333 vspor363:30204092 vslsvsres303:30308271 vserr242:30382549 pythontb:30283811 vsjup518:30340749 pythonptprofiler:30281270 vshan820:30294714 vstes263:30335439 vscorecescf:30445987 vscod805:30301674 binariesv615:30325510 bridge0708:30335490 bridge0723:30353136 vsaa593cf:30376535 pythonvs932:30410667 py29gd2263:30776702 vsclangdc:30486549 c4g48928:30535728 dsvsc012:30540252 pynewext54:30695312 azure-dev_surveyone:30548225 vsccc:30610678 282f8724:30602487 pyind779:30671433 89544117:30613380 pythonsymbol12:30671437 showlangstatbar:30737416 vsctsb:30748421 pythonms35:30701012 03d35959:30757346 pythonfmttext:30731395 pythoncmv:30756943 fixshowwlkth:30771522 showindicator:30766890 pythongtdpath:30769146 bgfeh915:30780428 pythonnosm12tcf:30779713 pythonidxptcf:30772540 pythonnoceb:30776495 cmakesidepanelv2:30779593 ```

[AirAKose]

More information: I have "id" attributes on the "details" HTML nodes, and if two nodes have the same ID (like from copy-pasting the same markup) - changing one of those IDs seems to be a 100% repro for creating these ghost elements

[mjbvz]

Does this reproduce in the latest VS Code insiders build with all extensions disabled?

If it does, please share steps to reproduce the issue

[AirAKose]

Yep, still occurs in the latest insiders build with all extensions disabled:

Minimal steps to reproduce:

1. Make a markdown (.md) file with this content:

<div id="dupe-me">Hello</div>
<div id="dupe-me">World</div>

2. Click on the Open Preview to the Side (Ctrl+K V) button in the top-right if the preview isn't already open.
3. Change the ID attribute of either div tag to anything else, like dupe-me-not.

Note that the open preview pane shows a duplicate of the node you changed the ID for, like in the attached screenshot.

Insiders version info:

Version: 1.81.0-insider (user setup) Commit: f8782370c90ec98467dc3590bcfa2eeb1f218107 Date: 2023-07-11T14:28:05.103Z Electron: 22.3.14 ElectronBuildId: 21893604 Chromium: 108.0.5359.215 Node.js: 16.17.1 V8: 10.8.168.25-electron.0 OS: Windows_NT x64 10.0.19045

[mjbvz]

Caused by the duplicate ids. Upstream issue https://github.com/patrick-steele-idem/morphdom/issues/205

[weartist]

I'll try to fix it

[weartist]

@mjbvz Hi, I have a question regarding a breakpoint issue I'm facing. When debugging markdown, my breakpoints are not getting hit. It seems that markdown updates are happening via IPC calls. Do you have any suggestions on how I can get my breakpoints to trigger within markdown-language-features? I would appreciate any advice you can provide on troubleshooting breakpoints with IPC.

[mjbvz]

@weartist To fix this, we likely need an upstream fix for https://github.com/patrick-steele-idem/morphdom/issues/205 first. Try looking into making a PR against that project

The relevant call in VS Code is: https://github.com/microsoft/vscode/blob/3f47134460c8772f45b18daadf9fd045f7c6ef45/extensions/markdown-language-features/preview-src/index.ts#L256

This runs inside of the webview itself so you can't see normal editor breakpoints to hit it. Instead see: https://code.visualstudio.com/api/extension-guides/webview#inspecting-and-debugging-webviews

[weartist]

@weartist To fix this, we likely need an upstream fix for patrick-steele-idem/morphdom#205 first. Try looking into making a PR against that project

The relevant call in VS Code is:

https://github.com/microsoft/vscode/blob/3f47134460c8772f45b18daadf9fd045f7c6ef45/extensions/markdown-language-features/preview-src/index.ts#L256

This runs inside of the webview itself so you can't see normal editor breakpoints to hit it. Instead see: https://code.visualstudio.com/api/extension-guides/webview#inspecting-and-debugging-webviews

thanks!

[weartist]

It seems that there is no good way to do it for the time being unless modified upstream