feat(code-block): support multiple single-line cmd copy #736

zchsh · 2022-10-03T17:16:12Z

Support copy-button copying of shell-session snippets with multiple single-line commands.

Support select-copy-paste copying of shell-session snippets by setting user-select: none CSS on .shell-symbol tokens.

Note: pre-releases has been tested in hashicorp/dev-portal#1149.

PR Checklist 🚀

Items in this checklist may not may not apply to your PR, but please consider each item carefully.

Add Asana and Preview links above.
Conduct thorough self-review.
Add or update tests as appropriate.
Conduct reasonable cross browser testing for both compatibility and responsive behavior (We have a Sauce Labs account for this, if you don't have access, just ask!).
Conduct reasonable accessibility review (use the WAS as a guide or an axe browser plugin until we establish more formal checks).
Identify (in the description above) and document (add Asana tasks on this board) any technical debt that you're aware of, but are not addressing as part of this PR.

changeset-bot · 2022-10-03T17:16:14Z

🦋 Changeset detected

Latest commit: 60e9636

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@hashicorp/react-code-block	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

vercel · 2022-10-03T17:16:15Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
react-components	✅ Ready (Inspect)	Visit Preview	Oct 4, 2022 at 9:50PM (UTC)

github-actions · 2022-10-03T17:18:56Z

📦 Canary Packages Published

Latest commit: 60e9636

Published 3 packages

@hashicorp/react-code-block@6.2.0-canary-20221004215115

npm install @hashicorp/react-code-block@canary

@hashicorp/react-marketo-form@0.1.1-canary-20221004215115

npm install @hashicorp/react-marketo-form@canary

@hashicorp/react-subnav@9.5.0-canary-20221004215115

npm install @hashicorp/react-subnav@canary

zchsh · 2022-10-04T15:20:21Z

packages/code-block/docs.mdx

@@ -5,7 +5,7 @@ componentName: 'CodeBlock'
 A formatted code block for displaying lovely lines of code.

 <LiveComponent>
-{`<CodeBlock language="shell-session" code={\`<span class="token command"><span class="token shell-symbol important">$</span> <span class="token bash language-bash"><span class="token builtin class-name">echo</span> <span class="token string">"hello world!"</span></span></span>\`} />`}
+  {`<CodeBlock language="shell-session" code={\`<span class="token command"><span class="token shell-symbol important">$</span> <span class="token bash language-bash"><span class="token builtin class-name">echo</span> <span class="token string">"hello world!"</span></span></span>\`} />`}


There are some auto-formatting changes here, this is one of them.

zchsh · 2022-10-04T15:20:41Z

packages/code-block/docs.mdx

  theme="dark"
-  code={`<span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'bar'</span>\n<span class="token keyword">function</span> <span class="token function">hello</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n{/* */}  <span class="token keyword control-flow">return</span> <span class="token known-class-name class-name">Math</span><span class="token punctuation">.</span><span class="token method function property-access">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">&gt;</span> <span class="token number">0.5</span> <span class="token operator">?</span> <span class="token string">'Hello'</span> <span class="token operator">:</span> <span class="token string">'Bonjour'</span>\n<span class="token punctuation">}</span>`}
+  code={`<span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'bar'</span>\n<span class="token keyword">function</span> <span class="token function">hello</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n  <span class="token keyword control-flow">return</span> <span class="token known-class-name class-name">Math</span><span class="token punctuation">.</span><span class="token method function property-access">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">&gt;</span> <span class="token number">0.5</span> <span class="token operator">?</span> <span class="token string">'Hello'</span> <span class="token operator">:</span> <span class="token string">'Bonjour'</span>\n<span class="token punctuation">}</span>`}


Removed some weird {/* */} which I think had shown up accidentally.

zchsh · 2022-10-04T15:21:10Z

packages/code-block/docs.mdx

  options={{ showClipboard: true }}
  code={`<span class="token shell-symbol important">$</span> echo "hello world"\nhello world`}
 />

+The following multi-line command will be copied in similar way. Note that when using multi-line commands, subsequent lines such as output or additional commands should be placed in a separate code block, as they will not be copied correctly if they are placed directly after a multi-line command.


Added some examples for multi-line and multiple-single-line code snippets.

zchsh · 2022-10-04T15:21:46Z

packages/code-block/docs.mdx

+| Multi-line commands                        | ✅        | The multi-line command will be copied, without the leading `$`. Do not include lines after the multi-line command, such as output or additional commands, as they will not be processed correctly. | [🔗](https://learn.hashicorp.com/vault/secrets-management/sm-static-secrets#q-how-do-i-save-multiple-values-at-once) |
+| Commands with output                       | ✅        | The command will be copied without the leading `$` or the output.                                                                                                                                  | [🔗](https://learn.hashicorp.com/vault/secrets-management/sm-static-secrets#additional-discussion)                   |
+| Non-shell Snippets                         | ✅        | The entire snippet will be copied.                                                                                                                                                                 | [🔗](https://learn.hashicorp.com/nomad/getting-started/jobs#modifying-a-job)                                         |
+| Single-line commands across multiple lines | ✅        | Commands will be copied without their leading `$ `. Lines that do not start in `$ ` will be omitted from the copied snippet.                                                                       | ⏳ (none yet, relatively new feature)                                                                                |


Updated this table, we now support many single-line commands in a single shell-session snippet 👍

zchsh · 2022-10-04T15:23:41Z

packages/code-block/partials/code-lines/style.module.css

+  /* Prevent shell-symbols from being selected, for better select-copy-paste */
+  &:global(.language-shell-session) {
+    & :global(.token.shell-symbol) {
+      user-select: none;


CSS fix for the "select-copy-paste" use case. This applies to all code-blocks with $ characters (when correctly identified as .shell-symbol, which of course requires highlighting).

zchsh · 2022-10-04T15:24:30Z

packages/code-block/utils/process-snippet.js

+   *      (ruby module of same name, seems to have better docs)
+   *
+   * Related task:
+   * https://app.asana.com/0/1100423001970639/1199504357822173/f


Would love to explore better copying behaviour at some point in the future... but for now, was definitely reaching for a more immediate solution to ensure our "copy these install commands" works on download pages. See hashicorp/dev-portal#1149.

zchsh · 2022-10-04T15:28:28Z

@brkalow This update to code-block fixes things so that on /downloads views in Dev Dot, the "install" commands still copy correctly.

Have proven this out in hashicorp/dev-portal#1149. Let me know what you think 🙇‍♂️

zchsh · 2022-10-04T15:36:43Z

@BrandonRomano Tagging ya here in cause you have extra review bandwidth ☺️

packages/code-block/utils/process-snippet.js

brkalow

Nice improvements to the swingset page! I did some testing and all seems to be working. Left a suggestion on removing a console log

Co-authored-by: Bryce Kalow <bkalow@hashicorp.com>

zchsh added 4 commits October 3, 2022 13:07

docs(code-block): add more examples

Verified

This commit was signed with the committer’s verified signature.

gaborbernat Bernát Gábor

GPG key ID: EEDA44E02406AF79

Verified
Learn about vigilant mode

0066020

fix: prevent shell-symbols from being selected

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.

GPG key ID: B5690EEEBB952194

Verified
Learn about vigilant mode

ed2c27a

feat: allow copying multiple single-line commands

5c8bd28

chore(code-block): add changeset

5addeb2

vercel bot deployed to Preview October 3, 2022 17:16 View deployment

zchsh added the release:canary label Oct 3, 2022

zchsh changed the title ~~feat(code-block): support multiple single-line cmd copy"~~ feat(code-block): support multiple single-line cmd copy Oct 3, 2022

zchsh mentioned this pull request Oct 4, 2022

fix: package-manager code block copy hashicorp/dev-portal#1149

Merged

1 task

zchsh commented Oct 4, 2022

View reviewed changes

zchsh marked this pull request as ready for review October 4, 2022 15:27

zchsh requested a review from brkalow October 4, 2022 15:27

zchsh requested a review from BrandonRomano October 4, 2022 15:36

brkalow reviewed Oct 4, 2022

View reviewed changes

packages/code-block/utils/process-snippet.js Outdated Show resolved Hide resolved

brkalow approved these changes Oct 4, 2022

View reviewed changes

fix: clean up console.log

60e9636

Co-authored-by: Bryce Kalow <bkalow@hashicorp.com>

vercel bot deployed to Preview October 4, 2022 21:50 View deployment

zchsh merged commit 702eb92 into main Oct 4, 2022

zchsh deleted the zs.code-block-multi-command-copy branch October 4, 2022 21:52

hashibot-web mentioned this pull request Oct 4, 2022

Version Packages #744

Merged

This was referenced Oct 20, 2022

fix(code-block): fix language-undefined in MDX CodeTabs #768

Merged

chore: bump code-block for shell-sesh fix hashicorp/dev-portal#1268

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(code-block): support multiple single-line cmd copy #736

feat(code-block): support multiple single-line cmd copy #736

zchsh commented Oct 3, 2022 •

edited

Loading

changeset-bot bot commented Oct 3, 2022 •

edited

Loading

vercel bot commented Oct 3, 2022 •

edited

Loading

github-actions bot commented Oct 3, 2022 •

edited

Loading

@hashicorp/react-code-block@6.2.0-canary-20221004215115

@hashicorp/react-marketo-form@0.1.1-canary-20221004215115

@hashicorp/react-subnav@9.5.0-canary-20221004215115

zchsh Oct 4, 2022

zchsh Oct 4, 2022

zchsh Oct 4, 2022

zchsh Oct 4, 2022

zchsh Oct 4, 2022

zchsh Oct 4, 2022

zchsh commented Oct 4, 2022

zchsh commented Oct 4, 2022

brkalow left a comment

feat(code-block): support multiple single-line cmd copy #736

feat(code-block): support multiple single-line cmd copy #736

Conversation

zchsh commented Oct 3, 2022 • edited Loading

PR Checklist 🚀

changeset-bot bot commented Oct 3, 2022 • edited Loading

🦋 Changeset detected

vercel bot commented Oct 3, 2022 • edited Loading

github-actions bot commented Oct 3, 2022 • edited Loading

📦 Canary Packages Published

@hashicorp/react-code-block@6.2.0-canary-20221004215115

@hashicorp/react-marketo-form@0.1.1-canary-20221004215115

@hashicorp/react-subnav@9.5.0-canary-20221004215115

zchsh Oct 4, 2022

Choose a reason for hiding this comment

zchsh Oct 4, 2022

Choose a reason for hiding this comment

zchsh Oct 4, 2022

Choose a reason for hiding this comment

zchsh Oct 4, 2022

Choose a reason for hiding this comment

zchsh Oct 4, 2022

Choose a reason for hiding this comment

zchsh Oct 4, 2022

Choose a reason for hiding this comment

zchsh commented Oct 4, 2022

zchsh commented Oct 4, 2022

brkalow left a comment

Choose a reason for hiding this comment

zchsh commented Oct 3, 2022 •

edited

Loading

changeset-bot bot commented Oct 3, 2022 •

edited

Loading

vercel bot commented Oct 3, 2022 •

edited

Loading

github-actions bot commented Oct 3, 2022 •

edited

Loading