Repository navigation
[v2] line-highlight loses its position when line-numbers registers after it #4137
Description
line-highlight renders a 0px-tall highlight with no top when line-numbers is loaded after it.
<!doctype html>
<script type="importmap">
{
"imports": {
"prismjs": "https://cdn.jsdelivr.net/npm/prismjs@2.0.0-alpha.1/dist/index.js",
"prismjs/": "https://cdn.jsdelivr.net/npm/prismjs@2.0.0-alpha.1/dist/"
}
}
</script>
<script>
globalThis.Prism = { manual: true };
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@2.0.0-alpha.1/dist/plugins/line-numbers.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@2.0.0-alpha.1/dist/plugins/line-highlight.css" />
<pre class="line-numbers" data-line="2"><code class="language-js">let a = 1;
let b = 2;
let c = 3;</code></pre>
<script type="module">
import Prism from "prismjs";
await import("prismjs/plugins/line-highlight.js");
await import("prismjs/plugins/line-numbers.js");
Prism.highlightAll();
console.log(document.querySelector(".line-highlight").getAttribute("style"));
</script>Expected: top: 15px; height: 15px; width: … (what swapping the two imports prints)
Actual: width: 929px;, so line 2 is not highlighted
Both plugins use the complete hook, which runs in registration order. line-highlight asks line-numbers for the row of each line (lineNumbers.getLine(pre, start)), but the rows don't exist yet, so startNode is undefined and top/height are never set.
With data-prism-plugins="line-numbers, line-highlight" the order depends on which file finishes loading first, so the bug is intermittent. line-highlight declares optional: 'line-numbers', but the plugin registry doesn't use optional to order effects the way languages do.
prismjs 2.0.0-alpha.1, Chrome
Activity