Upgrade notification command does not copy properly due to box borders

[trigaten]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I'm using the latest version of Docusaurus.
• I have read the console error message carefully (if applicable).

Description

Summary

It appears that the text does not copy properly from this docusaurus warning message. The file which generates this message is packages/docusaurus/bin/beforeCli.mjs. This could be a non-docusaurus specific problem, but it does not appear to be a shell problem (I tried with zsh and bash).

I recently got this upgrade note, and wanted to upgrade my docusaurus version. I copy and pasted the command into my terminal, but the following happened:

(base) sanderschulhoff@Sanders-MacBook-Pro Learn_Prompting % npm i @docusaurus/core@latest @docusaurus/plugin-client-redirects@latest @docusaurus/plugin-google-analytics@latest     │
   │          @docusaurus/plugin-ideal-image@latest @docusaurus/preset-classic@latest @docusaurus/theme-mermaid@latest           │
   │                                          @docusaurus/module-type-aliases@latest
npm ERR! code EINVALIDTAGNAME
npm ERR! Invalid tag name "│" of package "│": Tags may not have any characters that encodeURIComponent encodes.

npm ERR! A complete log of this run can be found in: /Users/sanderschulhoff/.npm/_logs/2023-08-17T23_20_04_692Z-debug-0.log
zsh: command not found: │
zsh: command not found: │

The | were quite weird as they didn't appear in the image I uploaded. I pasted the text elsewhere, and found that it pasted as:

npm i @docusaurus/core@latest @docusaurus/plugin-client-redirects@latest @docusaurus/plugin-google-analytics@latest     │
   │          @docusaurus/plugin-ideal-image@latest @docusaurus/preset-classic@latest @docusaurus/theme-mermaid@latest           │
   │                                          @docusaurus/module-type-aliases@latest

The terminal (a zsh shell) could not properly handle it. I asked GPT-4 to reformat it, and it gave me the following, which ran properly.

npm i @docusaurus/core@latest \
      @docusaurus/plugin-client-redirects@latest \
      @docusaurus/plugin-google-analytics@latest \
      @docusaurus/plugin-ideal-image@latest \
      @docusaurus/preset-classic@latest \
      @docusaurus/theme-mermaid@latest \
      @docusaurus/module-type-aliases@latest

Reproducible demo

No response

Steps to reproduce

1. Run these individually:

npm install @docusaurus/core@2.4.0 @docusaurus/preset-classic@2.4.0
npx docusaurus --version

2. Copy the command output (between the backticks):

3. Paste the command into the terminal and attempt to run it.

Your environment

npx version: 9.7.2
node version: v20.4.0

VSCode, a bash or zsh terminal

Self-service

[Josh-Cena]

I'm okay to get rid of the box, if it makes the command easier to copy. However it should be immediately obvious for most people that the box borders are also copiable characters so you need to copy them one line at a time.

[trigaten]

it should be immediately obvious for most people that the box borders are also copiable characters so you need to copy them one line at a time.

Could you explain this further? I am only copying the text between the backticks. There is only one npm i command, which should be directly copiable.

[Josh-Cena]

This box you see is entirely comprised of text. When you copy text across multiple lines, you always copy the entire line, so the borders, which are pipe characters, are also copied.

[trigaten]

Ah, that makes sense. I did not think of this :)

Removing the box (or making it uncopiable?) would be good for usability. Thanks for walking me through this!

[homotechsual]

I'm in favour of removing the box here - we should favour usability (the copiable command) rather than "style" in terminal output imo :-)

[slorber]

Ok to remove the box 👍 hope we can find a terminal display that's not too ugly and stand out a bit.

Accepting external contributor PRs. Don't claim: first draft PR gets assigned the issue.