Copy control in the getting-started tutorial copies confusing code

[steveharman]

📚 Documentation

I'm working my way through the Getting Started guide and tried the "Configure the Sidebar" example from docs/tutorial-basics/create-a-document

Using the embedded "Copy" control I copied and pasted the example code into my hello.md document, but the code is displayed in the resulting page, rather than affecting the position of my document in the sidebar.

Thanks to some input from another user it appears that the "+" symbols are there to indicate that the relevant lines should be added.

Which is fine, but in that case the "Copy" control probably shouldn't also copy the plus symbols, as new users like me working through the tutorial will Copy > Paste and expect the pasted code to have the desired effect.

I'm sure it's obvious to seasoned users, but that audience most likely won't be in the tutorial section! :-)

Thanks.

[slorber]

Hi,

The "copy" feature is something that all Docusaurus code blocks have, it's not just a feature of the tutorial, it's a generic feature.

Maybe in case of a "diff" code block showing + and - prefix, we could improve the logic and make it only copy the final code (removing the - lines and the + prefixes?

Or we could mention that the "+" is there to indicate that the line should be added?

Will think about it

[steveharman]

Hi!

Understood about the Copy function being on all code blocks, my point was more about the "gotcha" with the "+" symbols being copied when it's used. Especially for us newcomers trying to learn Docusauraus.

For example the Docusaurus Blog tutorial has a similar looking code block and of course Copy function, but isn't a "diff" style so doesn't have the + symbols. Using Copy on the Blog code block works fine, but for people just getting started it was far from obvious why the Sidebar code block in my example didn't.

eg; I copy one code block - it works. I copy a different code block - it doesn't work. this is more about the UX on the Sidebar example tripping up us newcomers.

Thanks

Steve

[tom-sherman]

Is there really a need for diff syntax here? I agree that this can confuse people. The other snippets read just fine with highlighted lines, can that be used here?

[Josh-Cena]

Agreed that the diff syntax is counterintuitive with copying. Running a global search reveals 78 occurrences of this use:

Most of them can be replaced by line highlights, which has the additional merit of better syntax highlighting for the rest of the snippet. Should we go for that instead of patching the copy function?