fix(code-block): pre-rendered copy and word wrap actions (#2039)

* fix(code-block): copy pre instead of script for prerendered code * fix(code-block): add word wrap to prerendered content * chore(code-block): add changeset --------- Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]>
RedHat-UX · Jan 8, 2025 · 64dab19 · 64dab19
1 parent 8dd9a5f
commit 64dab19
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 20 deletions.
diff --git a/.changeset/fresh-lions-fly.md b/.changeset/fresh-lions-fly.md
@@ -0,0 +1,5 @@
+---
+"@rhds/elements": patch
+---
+
+`<rh-code-block>`: enables copy and word wrap action for prerendered content
diff --git a/elements/rh-code-block/demo/prerendered-prism-highlighting.html b/elements/rh-code-block/demo/prerendered-prism-highlighting.html
@@ -1,5 +1,9 @@
 <rh-context-demo>
-  <rh-code-block highlighting="prerendered">
+  <rh-code-block highlighting="prerendered" actions="copy wrap">
+  <span slot="action-label-copy">Copy to Clipboard</span>
+  <span slot="action-label-copy" hidden data-code-block-state="active">Copied!</span>
+  <span slot="action-label-wrap">Toggle word wrap</span>
+  <span slot="action-label-wrap" hidden data-code-block-state="active">Toggle overflow</span>
     <pre class="language-html"><code class="language-html"><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
@@ -24,7 +28,11 @@
 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span></code></pre>
   </rh-code-block>
 
-  <rh-code-block highlighting="prerendered">
+  <rh-code-block highlighting="prerendered" actions="copy wrap">
+  <span slot="action-label-copy">Copy to Clipboard</span>
+  <span slot="action-label-copy" hidden data-code-block-state="active">Copied!</span>
+  <span slot="action-label-wrap">Toggle word wrap</span>
+  <span slot="action-label-wrap" hidden data-code-block-state="active">Toggle overflow</span>
     <pre class="language-css"><code class="language-css"><span class="token selector">rh-card.avatar-card</span> <span class="token punctuation">{</span>
   <span class="token property">width</span><span class="token punctuation">:</span> 360px<span class="token punctuation">;</span>
   <span class="token selector">&amp;::part(body)</span> <span class="token punctuation">{</span>
@@ -44,7 +52,11 @@
 <span class="token punctuation">}</span></code></pre>
   </rh-code-block>
 
-  <rh-code-block highlighting="prerendered">
+  <rh-code-block highlighting="prerendered" actions="copy wrap">
+  <span slot="action-label-copy">Copy to Clipboard</span>
+  <span slot="action-label-copy" hidden data-code-block-state="active">Copied!</span>
+  <span slot="action-label-wrap">Toggle word wrap</span>
+  <span slot="action-label-wrap" hidden data-code-block-state="active">Toggle overflow</span>
     <pre class="language-yaml"><code class="language-yaml"><span class="token key atrule">extends</span><span class="token punctuation">:</span>
   <span class="token punctuation">-</span> stylelint<span class="token punctuation">-</span>config<span class="token punctuation">-</span>standard
   <span class="token punctuation">-</span> <span class="token string">'@stylistic/stylelint-config'</span>

diff --git a/elements/rh-code-block/prism.css.ts b/elements/rh-code-block/prism.css.ts
@@ -1,20 +1,6 @@
 import { css } from 'lit';
 
 const styles = css`
-  & code[class*="language-"],
-  & pre[class*="language-"] {
-    color: var(--_code-color);
-    font-family: var(--rh-font-family-code, RedHatMono, "Red Hat Mono", "Courier New", Courier, monospace);
-    text-align: left;
-    white-space: pre;
-    word-spacing: normal;
-    word-break: normal;
-    word-wrap: normal;
-    line-height: var(--rh-line-height-code, 1.5);
-    tab-size: 4;
-    hyphens: none;
-    background: transparent;
-  }
 
   & pre[class*="language-"]::selection,
   & pre[class*="language-"] ::selection,

diff --git a/elements/rh-code-block/rh-code-block.css b/elements/rh-code-block/rh-code-block.css
@@ -127,6 +127,28 @@
   color: inherit;
 }
 
+#content::slotted(:is(code[class*='language-'], pre[class*='language-'])) {
+  color: var(--_code-color);
+  font-family: var(--rh-font-family-code, RedHatMono, 'Red Hat Mono', 'Courier New', Courier, monospace);
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: var(--rh-line-height-code, 1.5);
+  tab-size: 4;
+  hyphens: none;
+  background: transparent;
+}
+
+:host([highlighting='prerendered']) {
+  .wrap {
+    #content::slotted(pre[class*='language-']) {
+      white-space: pre-wrap;
+    }
+  }
+}
+
 #content::slotted(rh-tag) {
   width: var(--rh-size-icon-06, 64px);
 }

diff --git a/elements/rh-code-block/rh-code-block.ts b/elements/rh-code-block/rh-code-block.ts
@@ -382,11 +382,17 @@ export class RhCodeBlock extends LitElement {
   }
 
   async #copy() {
-    await navigator.clipboard.writeText(
-      Array.from(
+    let content: string;
+    if (this.highlighting === 'prerendered') {
+      content = this.querySelector('pre')?.textContent ?? '';
+    } else {
+      content = Array.from(
         this.querySelectorAll('script'),
         x => x.textContent,
-      ).join('')
+      ).join('');
+    }
+    await navigator.clipboard.writeText(
+      content
     );
     // TODO: handle slotted fabs
     const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot[name="action-label-copy"]');