Selection of code leaves gaps on new-lines

[EmilHvitfeldt]

Bug description

When you select code in a code chunk in revealjs slides (could not reproduce with html format) it leaves a gap in the selection.

Steps to reproduce

---
format: revealjs
---

```{r}
#| echo: true
mtcars |>
  head()

### Expected behavior

I expect it to look like this:

![fixed](https://github.com/quarto-dev/quarto-cli/assets/14034784/d5b25fb8-0395-4b1f-9bd3-7066c4a957f6)

### Actual behavior

This is what happens when you select

<img width="810" alt="Screenshot 2023-07-12 at 11 51 41 AM" src="https://github.com/quarto-dev/quarto-cli/assets/14034784/c48816cf-16a9-413a-9d92-3569a6ccf515">

### Your environment

- IDE: Version 2023.09.0-daily+203 (2023.09.0-daily+203)
- OS: macOS Venture 13.4

### Quarto check output

```bash
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.1.5: OK
      Dart Sass version 1.55.0: OK
      Deno version 1.33.2: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 1.4.220
      Path: /Applications/quarto/bin

[✓] Checking basic markdown render....OK

[✓] Checking Python 3 installation....OK
      Version: 3.9.7 (Conda)
      Path: /Users/emilhvitfeldt/miniforge3/bin/python
      Jupyter: (None)

      Jupyter is not available in this Python installation.
      Install with conda install jupyter

[✓] Checking R installation...........OK
      Version: 4.2.1
      Path: /Library/Frameworks/R.framework/Versions/4.2-arm64/Resources
      LibPaths:
        - /Users/emilhvitfeldt/Library/R/arm64/4.2/library
        - /Library/Frameworks/R.framework/Versions/4.2-arm64/Resources/library
      knitr: 1.43
      rmarkdown: 2.22

[✓] Checking Knitr engine render......OK

[mcanouil]

Thanks for the report! Do you have any particular configuration/options enabled in case it's some kind of "conflict"?

Could you share a small self-contained "working" (reproducible) example to work with, i.e., a complete Quarto document or a Git repository? Thanks.

You can share a Quarto document using the following syntax, i.e., using more backticks than you have in your document (usually four ````).

````qmd
---
title: "Reproducible Quarto Document"
format: html
---

This is a reproducible Quarto document using `format: html`.
It is written in Markdown and contains embedded R code.
When you run the code, it will produce a plot.

```{r}
plot(cars)

The end.

[cderv]

I edited the post. The backticks were missing.

I can reproduce. I believe this is related to revealJS or maybe our custom CSS.

This get better with

format: 
  revealjs:
    code-line-numbers: true

So possibly related to this CSS rule.

• position: relative here

pre.numberSource code > span {
    position: relative;
    left: -4em;
    counter-increment: source-line;
}

I wonder if this is not something browser and CSS related. I don't know if we can do something about it.

However, copy paste works ok with the selection it seems. No missed or added character.

[EmilHvitfeldt]

I dug into it a little.

The lines are styled with:

.reveal pre.numberSource code > span {
    left: -2.1em;
}

and the line numbers are styled with this: (only showing relevant lines)

pre.numberSource code > span > a:first-child::before {
    width: 4em;
}

If we change to the following it looks fine on my end.

.reveal pre.numberSource code > span {
    left: 0em;
}

pre.numberSource code > span > a:first-child::before {
    width: 1.9em;
}

This change also means that the line numbers div fits inside the code div

Current

Proposed solution

[mcanouil]

FYI, the file in question https://github.com/quarto-dev/quarto-cli/blob/main/src/resources/formats/revealjs/plugins/line-highlight/line-highlight.css

[cderv]

interesting ! Thanks for find this @EmilHvitfeldt.

FWIW the default styling comes from Pandoc's highlighting directly https://github.com/jgm/skylighting/blob/0c2a119496ece5c40c3c1a6aa7293376bc433b08/skylighting-format-blaze-html/src/Skylighting/Format/HTML.hs#L176-L185

But we can indeed overwrite it in our line-highlight plugin.... 🤔

[cderv]

(could not reproduce with html format)

And by the way, this can reproduce with HTML format, but you need to activate code line number

format: 
  revealjs: default
  html: default
code-line-numbers: true

So it means we need a more generic fix 🤔 A bit more tricky to adjust this width and left position setting without messing something...

Moreover I still don't understand what this space in the selection is really... I can't identify what creates it. 🤷‍♂️

[EmilHvitfeldt]

Moreover I still don't understand what this space in the selection is really... I can't identify what creates it. 🤷‍♂️

I think it is the "new-line" character. You can select just that thing and copy-paste it.

[cderv]

I think it is the "new-line" character.

Oh ok. But still puzzling that it does not move to the left with other character...