Skip to content

Commit 0afec90

Browse files
sfc-gh-dmatthewssfc-gh-tteixeira
sfc-gh-dmatthews
and
sfc-gh-tteixeira
authored
Fix code block copy button (#1385)
* Fix code block copy button * Add custom code style for RefCard * Change code blocks with theme * Unify syntax highlighting color; update light mode * feature/code-block-language-header (#1389) * feature/code-block-language-header * Include none language * Debug none language * Hide language when none * Use right padding * Add header to Autofunctio code * feature/code-block-description (#1390) * feature/code-block-description * Filename color * Replace language with filename; optionally both * Revert content changes * Revert more content changes * feature/try-it-code-block-button (#1391) * feature/code-block-description * Filename color * Replace language with filename; optionally both * Revert content changes * Revert more content changes * feature/try-it-code-block-button * Use named target * Design edits * Fix gray code header in dark mode * Remove filename * Design tweaks * Update Autofunction code block to match * Fix the font-family used in inline code. * Update styling for code blocks. * Unrelated but make radius of Kapa dialog nicer. * Unrelated but fix arrows and padding in component slider. * Refactor <Code> and add nicer timeout for copy button * Add example of code block without header. * Fix hydration errors. * Rename Bash->Terminal in code blocks. * Fix rebase errors and improve design of `try it` button * Fix bug where copy button wasn't showing. This will lead to hydration errors, though * Add comment. * Fix ref cards * Add hideHeader boolean flag --------- Co-authored-by: Thiago Teixeira <thiago.teixeira@snowflake.com>
1 parent 0afbb2a commit 0afec90

File tree

19 files changed

+803
-452
lines changed

19 files changed

+803
-452
lines changed

‎components/blocks/autofunction.js‎

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -84,17 +84,34 @@ const Autofunction = ({
8484
blockRef.current.getElementsByTagName("pre"),
8585
);
8686

87+
// Important: keep this in sync with components/block/code.js
8788
pres.forEach((ele) => {
89+
// Detect language based on pre element class
90+
const isLiteralBlock = ele.classList.contains("literal-block");
91+
const language = isLiteralBlock ? "bash" : "python";
92+
const displayLanguage = isLiteralBlock ? "BASH" : "PYTHON";
93+
8894
const codeText = ele.innerHTML;
8995
const preTag = ele.cloneNode(true);
9096
const codeWrap = document.createElement("div");
9197
codeWrap.setAttribute("class", styles.CodeBlockContainer);
98+
99+
// Create language header
100+
const header = document.createElement("div");
101+
header.setAttribute("class", `${styles.Header} code-block-header`);
102+
const langSpan = document.createElement("span");
103+
langSpan.setAttribute("class", styles.Language);
104+
langSpan.textContent = displayLanguage;
105+
header.appendChild(langSpan);
106+
92107
const codeTag = document.createElement("code");
93-
codeTag.setAttribute("class", "language-python");
108+
codeTag.setAttribute("class", `language-${language}`);
94109
preTag.classList.add("line-numbers");
95110
codeTag.innerHTML = codeText;
96111
preTag.textContent = null;
97112
preTag.appendChild(codeTag);
113+
114+
codeWrap.appendChild(header);
98115
codeWrap.appendChild(preTag);
99116
ele.replaceWith(codeWrap);
100117
});
@@ -536,7 +553,12 @@ const Autofunction = ({
536553
);
537554

538555
return (
539-
<section className={styles.Container} ref={blockRef} key={slug}>
556+
<section
557+
className={styles.Container}
558+
ref={blockRef}
559+
key={slug}
560+
data-prismjs-copy-timeout="1000"
561+
>
540562
{header}
541563
{body}
542564
</section>

‎components/blocks/autofunction.module.css‎

Lines changed: 68 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22
@apply mt-6;
33
}
44

5+
.Container h4 {
6+
@apply mb-4;
7+
}
8+
59
.HeaderContainer {
610
@apply mb-6;
711
}
@@ -55,92 +59,99 @@
5559
}
5660

5761
.CodeBlockContainer {
58-
@apply mb-7 relative;
62+
@apply mb-7 relative bg-gray-90 rounded-xl;
5963
}
6064

61-
.CodeBlockContainer pre,
62-
.CodeBlockContainer code {
63-
@apply overflow-auto max-w-full whitespace-pre;
65+
/* Keep in sync with components/blocks/code.module.css */
66+
.Header {
67+
@apply flex items-center
68+
min-h-10 px-3
69+
border-b border-gray-80
70+
text-gray-50 text-xs font-medium tracking-wide;
6471
}
6572

73+
/* Keep in sync with components/blocks/code.module.css */
74+
.Language {
75+
@apply uppercase tracking-wider leading-none;
76+
}
77+
78+
/* Keep in sync with components/blocks/code.module.css */
6679
.CodeBlockContainer pre {
67-
@apply p-4 bg-gray-90 text-white font-medium rounded-xl relative py-6 px-8 leading-relaxed;
80+
@apply p-6 text-white font-medium relative leading-relaxed;
6881
}
6982

83+
/* Keep in sync with components/blocks/code.module.css */
84+
.CodeBlockContainer pre,
85+
.CodeBlockContainer code {
86+
@apply overflow-auto max-w-full whitespace-pre;
87+
}
88+
89+
/* Keep in sync with components/blocks/autofunction.module.css */
7090
.CodeBlockContainer pre code {
7191
@apply z-10 relative;
7292
}
7393

94+
/* Keep in sync with components/blocks/code.module.css */
7495
.LineHighlight {
7596
@apply bg-gray-80 opacity-30 z-0;
7697
}
7798

78-
.CodeBlockContainer button {
79-
@apply absolute top-2 right-2 cursor-pointer h-8 w-8 mb-0 flex items-center;
80-
}
81-
82-
.CodeBlockContainer button::before {
83-
@apply absolute top-2 right-2 z-10 transition-all duration-75 hover:opacity-40;
84-
content: url("/clipboard.svg");
99+
/* Keep in sync with components/blocks/code.module.css */
100+
.Container :global(.toolbar) {
101+
@apply absolute top-0 right-0
102+
flex items-center justify-end
103+
px-3 h-10
104+
text-gray-80 text-xs font-medium tracking-wide;
85105
}
86106

87-
.CodeBlockContainer button span {
88-
@apply absolute right-10 text-white font-mono text-sm tracking-tight font-normal opacity-0;
107+
/* Keep in sync with components/blocks/code.module.css */
108+
.Container :global(.toolbar-item) {
109+
@apply flex items-center justify-end;
89110
}
90111

91-
.CodeBlockContainer button:hover span {
92-
@apply opacity-100;
93-
}
94-
95-
/* Code block adjustments */
96-
.CodeBlockContainer pre code :global(.decorator.annotation.punctuation) {
97-
@apply text-red-50;
98-
}
99-
100-
.CodeBlockContainer pre code :global(.operator) {
101-
@apply text-yellow-50;
102-
}
103-
104-
.CodeBlockContainer pre code :global(.decorator) {
105-
@apply text-yellow-80;
106-
}
107-
108-
.CodeBlockContainer pre code :global(.keyword) {
109-
@apply text-darkBlue-50;
110-
}
111-
112-
.CodeBlockContainer pre code :global(.builtin) {
113-
@apply text-lightBlue-40;
114-
}
115-
116-
.CodeBlockContainer pre code :global(.string) {
117-
@apply text-green-80;
112+
/* Keep in sync with components/blocks/code.module.css */
113+
.CodeBlockContainer button {
114+
@apply flex flex-row gap-1
115+
h-full
116+
text-xs leading-none
117+
text-gray-50 hover:text-white;
118118
}
119119

120-
.CodeBlockContainer pre code :global(.number),
121-
.CodeBlockContainer pre code :global(.boolean) {
122-
@apply text-green-40;
120+
/* Keep in sync with components/blocks/code.module.css */
121+
.CodeBlockContainer button span {
122+
@apply flex items-center justify-start
123+
tracking-wide font-medium;
123124
}
124125

125-
.CodeBlockContainer pre code :global(.function) {
126-
@apply text-red-50;
127-
}
126+
/* Keep in sync with components/blocks/code.module.css */
127+
.CodeBlockContainer :global(.copy-to-clipboard-button) {
128+
&::after {
129+
@apply block text-gray-50 hover:text-white h-3 w-3 cursor-pointer;
130+
content: "";
131+
background-color: currentColor;
132+
-webkit-mask-image: url("/clipboard.svg");
133+
mask-image: url("/clipboard.svg");
134+
mask-size: contain;
135+
-webkit-mask-size: contain;
136+
mask-repeat: no-repeat;
137+
}
128138

129-
.CodeBlockContainer pre code :global(.punctuation) {
130-
@apply text-gray-60;
131-
}
139+
& span {
140+
@apply text-white
141+
opacity-0 translate-x-2 transition-transform
142+
pointer-events-none;
143+
}
132144

133-
.CodeBlockContainer pre code :global(.comment) {
134-
@apply text-gray-60 italic font-normal;
145+
&:hover span {
146+
@apply opacity-100 translate-x-0;
147+
}
135148
}
136149

137-
.CodeBlockContainer pre code :global(.string) {
138-
@apply text-darkBlue-30;
150+
.NoCopyButton :global(.copy-to-clipboard-button) {
151+
@apply hidden;
139152
}
140153

141-
.CodeBlockContainer pre code :global(.table) {
142-
@apply inline;
143-
}
154+
/* Syntax highlighting is now handled globally via styles/syntax-highlighting.scss */
144155

145156
/* Styles for deprecation notice in param */
146157
.DeprecatedContent {

0 commit comments

Comments
 (0)