Left hand code view should allow copying code into comment editor without line numbers

[joshgoebel]

Using Safari on Mac Mojave.

Not very useful:

[bobahop]

Which browser are you using? I haven't picked up line numbers when copying in Chrome, FireFox, nor Edge, all on Windows. One interesting thing is that Chrome removes all blank lines, and FireFox seems to insert multiple blank lines where there is only one, but I can live without blank lines.

[joshgoebel]

Safari on Mac.

[angelikatyborska]

Oh wow, I can confirm what the both of you are saying...

This is how exactly the same solution got copied for me (macOS):

On Firefox

defmodule WordCount do

        

          

  @doc """

        

          

  Count the number of words in the sentence.

        

          

 

        

          

  Words are compared case-insensitively.

        

          

  """

        

          

  @spec count(String.t()) :: map

        

          

  def count(sentence) do

        

          

    String.downcase(sentence)

        

          

    |> String.replace("_", " ")

        

          

    |> String.replace(~r/[^[:alnum:] \-\d]/u, "")

        

          

    |> String.split(" ", trim: true)

        

          

    |> Enum.frequencies

        

          

  end

        

          

end

        

          

On Chrome

defmodule WordCount do
  @doc """
  Count the number of words in the sentence.
 
  Words are compared case-insensitively.
  """
  @spec count(String.t()) :: map
  def count(sentence) do
    String.downcase(sentence)
    |> String.replace("_", " ")
    |> String.replace(~r/[^[:alnum:] \-\d]/u, "")
    |> String.split(" ", trim: true)
    |> Enum.frequencies
  end
end

On Safari

defmodule WordCount do
2
  @doc """
3
  Count the number of words in the sentence.
4
 
5
  Words are compared case-insensitively.
6
  """
7
  @spec count(String.t()) :: map
8
  def count(sentence) do
9
    String.downcase(sentence)
10
    |> String.replace("_", " ")
11
    |> String.replace(~r/[^[:alnum:] \-\d]/u, "")
12
    |> String.split(" ", trim: true)
13
    |> Enum.frequencies
14
  end
15
end
16

[FaisalAfroz]

Can confirm on Safari on MacOS Big Sur.

[cmcaine]

I get this too in the community solutions panel and elsewhere in firefox.

I used this as a workaround in the web console:

Array.from(document.body.querySelectorAll(".loc")).map(x => x.textContent).join("\n")

[iHiD]

I don't understand this tbh.

We set user-select:none on the divs with the numbers in. Safari only supports that with a webkit prefix, which we set. But safari seems to ignore it. All other browsers seem to honour the property.

If anyone can find a CSS fix to it that safari supports, I'll implement it.

[joshgoebel]

Safari is being a real pain here: https://bugs.webkit.org/show_bug.cgi?id=80159

I can fix the copy bug with using dynamic ::before content and CSS counters... evidently dynamically generated content will never be copied. You can also do this with ::before using data-attributes (if for some reason CSS counters were out). That still doesn't copy empty lines though... not sure what's up there.

I've always had the best luck with code blocks (with Highlight.js) when they are a SINGLE large chunk... IF we don't need line wrapping (big if, but currently we don't seem to care) what you can do is just put two text boxes side by side, the line numbers in the narrow left one and the code in the right one. That's how Pastie did it long ago I think... before modern web browsers.

So that's some ideas... hopefully someone else might chime in with the missing pieces.

[iHiD]

Yeah, the reason I moved to single lines is that I want to add the ability to click individual lines (and sections) to add comments referencing lines at some stage (and be able to highlight lines on the LHS when the reading the RHS).

Got a mock up of CSS counters for this? I've not used them. Put me an example together and I'll implement?

[joshgoebel]

I've never used it before either, though I've seen some using it for line numbers in cases just like this, so it can't be too terrible of a choice. :-)

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters

You might of course need slightly more specific CSS scopes:

pre code {
/* would matter if you had multiple code blocks on one page, etc */
counter-reset: linenumber
}

pre code li .loc::before {
  content: counter(linenumber);
  counter-increment: linenumber;
  /* copy styles from li .idx */
}

It's pretty much that simple.

Essentially you're just removing the HTML for line numbers and then re-generating it dynamically with CSS. You could probably simplify the whole HTML structure since now you don't need nested divs inside li, but I just played around with the basic CSS above in the dev tool and it seemed to get me really close. (I didn't copy over .idx styles, no mine was just a bit off padding wise)