Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a814dee
fix(code-block): copy pre instead of script for prerendered code
zeroedin Nov 6, 2024
a770553
fix(code-block): add word wrap to prerendered content
zeroedin Nov 6, 2024
15a493b
chore(code-block): add changeset
zeroedin Nov 6, 2024
6f6a2f9
Merge branch 'main' into fix/code-block/prerender-copy
zeroedin Nov 22, 2024
635848a
Merge branch 'main' into fix/code-block/prerender-copy
bennypowers Nov 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/fresh-lions-fly.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@rhds/elements": patch
---

`<rh-code-block>`: enables copy and word wrap action for prerendered content
18 changes: 15 additions & 3 deletions elements/rh-code-block/demo/prerendered-prism-highlighting.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
14 changes: 0 additions & 14 deletions elements/rh-code-block/prism.css.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
Expand Down
22 changes: 22 additions & 0 deletions elements/rh-code-block/rh-code-block.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,6 +127,28 @@
color: inherit;
}

#content::slotted(:is(code[class*='language-'], pre[class*='language-'])) {
bennypowers marked this conversation as resolved.
Show resolved Hide resolved
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);
}
Expand Down
12 changes: 9 additions & 3 deletions elements/rh-code-block/rh-code-block.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"]');
Expand Down
Loading