felixfbecker / svg-screenshots

📸🧩 Browser extension to take scalable, semantic, accessible screenshots of websites in SVG format.
809 stars 29 forks source link

copy-paste of text is broken #104

Closed getify closed 9 months ago

getify commented 1 year ago

I have an HTML/CSS snippet my tool is producing -- it's syntax highlighting of a programming language I'm designing -- and when I select the text and copy-paste, the text pastes through with no extra newlines or spacing.

But when I render this same HTML/CSS page to SVG using the extension, while the image renders/looks perfectly fine, when I select and copy-paste the text, it's coming through with a whole bunch of extra newlines/spacing, so the formatting of the text is all wrong.

Here's what is pasted when I copy-paste from the rendered HTML/CSS:

defn binaryToDecimalConverter(binaryDigits) {
  def < :decimal >: (| ~fold
    binaryDigits,
    < decimal: 0, idx: 0, >,
    (< :decimal, :idx >, digit) {
      def power: size(binaryDigits) - idx - 1;
      decimal := decimal + (digit * pow(2,power));
      < :decimal, idx: |+ idx,1| >;
    }
  |);
  ^decimal;
};

binaryToDecimalConverter("111110011101100");  // 31980

But here's what is pasted when I copy-paste from the rendered SVG:

Click to expand ``` defn binaryToDecimalConverter ( binaryDigits ) { def < : decimal > : ( | ~fold binaryDigits , < decimal : 0 , idx : 0 , > , ( < : decimal , : idx > , digit ) { def power : size ( binaryDigits ) - idx - 1 ; decimal : = decimal + ( digit * pow ( 2 , power ) ) ; < : decimal , idx : | + idx , 1 | > ; } | ) ; ^ decimal ; } ; binaryToDecimalConverter ( " 111110011101100 " ) ; // 31980 ```

I thought maybe this might have been because of extra newlines/whitespace in between the SVG elements, but I tried manually removing that whitespace and that didn't fix the copy-pasting.


If it helps diagnose, here's a part of the SVG the tool is producing, for the first several text tokens on the first line of that snippet:

Click to expand ```svg ... KEYWORD defn GENERAL binaryToDecimalConverter ... ```

And here's the original HTML/CSS for that same bit of text:

Click to expand ```html
defn binaryToDecimalConverter

...
```


Any ideas where the extra spacing while copy-pasting might be coming from?