feat(design): replace 'Copied!' text with check icon in code block #5039
Conversation
SumitMondal2311
requested review from
Mayaleeeee,
akshatnema,
anshgoyalevil,
asyncapi-bot-eve,
derberg,
princerajpoot20 and
sambhavgupta0705
as code owners
✅ Deploy Preview for asyncapi-website ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify project configuration. |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
Welcome to AsyncAPI. Thanks a lot for creating your first pull request. Please check out our contributors guide useful for opening a pull request.
Keep in mind there are also other channels you can use to interact with AsyncAPI community. For more details check out this issue.
📝 WalkthroughWalkthroughThe copy button feedback in the code block component is enhanced by replacing the "Copied!" text indicator with a two-icon toggle system that transitions between a clipboard icon and a check mark icon using opacity and scale animations. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In `@components/editor/CodeBlock.tsx`:
- Around line 338-358: The JSX in the CodeBlock component has Prettier/ESLint
formatting issues: change double quotes to single quotes for JSX attributes
(e.g., className attributes on the span elements), remove trailing commas in
prop lists passed to twMerge, and collapse the ternary expressions used inside
twMerge onto single lines so each conditional is one line (affecting the
className calls that reference showIsCopied, IconClipboard, and CheckIcon).
Ensure the twMerge invocations and the two nested span elements use
single-quoted strings and no trailing commas and that the ternary operators are
formatted as single-line expressions.
- Around line 4-5: Import order in CodeBlock.tsx does not match the project's
simple-import-sort rules; reorder the imports so they comply (or run the
autofix). Open CodeBlock.tsx and adjust the two imports (CheckIcon from
'@heroicons/react/outline' and twMerge from 'tailwind-merge') into the order
expected by your simple-import-sort configuration (or simply run npm run
lint:fix to auto-fix), then re-run CI to confirm and commit the updated import
order.
| import { CheckIcon } from '@heroicons/react/outline'; | ||
| import { twMerge } from 'tailwind-merge'; |
There was a problem hiding this comment.
Fix import sorting to pass CI.
The pipeline is failing due to import order not matching the project's simple-import-sort configuration. The imports need to be reordered.
🔧 Proposed fix for import sorting
import React, { useState } from 'react';
+
+import { CheckIcon } from '@heroicons/react/outline';
import Highlight from 'react-syntax-highlighter';
+import { twMerge } from 'tailwind-merge';
-import { CheckIcon } from '@heroicons/react/outline';
-import { twMerge } from 'tailwind-merge';
import Caption from '../Caption';
import IconClipboard from '../icons/Clipboard';Note: The exact order depends on the project's simple-import-sort configuration. Run npm run lint:fix or the equivalent autofix command to get the correct order.
🤖 Prompt for AI Agents
In `@components/editor/CodeBlock.tsx` around lines 4 - 5, Import order in
CodeBlock.tsx does not match the project's simple-import-sort rules; reorder the
imports so they comply (or run the autofix). Open CodeBlock.tsx and adjust the
two imports (CheckIcon from '@heroicons/react/outline' and twMerge from
'tailwind-merge') into the order expected by your simple-import-sort
configuration (or simply run npm run lint:fix to auto-fix), then re-run CI to
confirm and commit the updated import order.
| <span className="relative inline-block mt-[3px] size-4"> | ||
| <span | ||
| className={twMerge( | ||
| 'absolute inset-0 transition-all duration-200 ease-out', | ||
| showIsCopied | ||
| ? 'opacity-0 scale-50' | ||
| : 'opacity-100 scale-100', | ||
| )} | ||
| > | ||
| <IconClipboard /> | ||
| </span> | ||
| <span | ||
| className={twMerge( | ||
| 'absolute inset-0 transition-all duration-200 ease-out', | ||
| showIsCopied | ||
| ? 'opacity-100 scale-100' | ||
| : 'opacity-0 scale-50', | ||
| )} | ||
| > | ||
| <CheckIcon /> | ||
| </span> |
There was a problem hiding this comment.
Fix formatting issues to pass CI.
Multiple linting/formatting errors are causing the pipeline to fail:
- Line 338: Use single quotes instead of double quotes for JSX attributes
- Lines 344, 354: Remove trailing commas
- Ternary operators should be on single lines per Prettier config
🔧 Proposed fix for formatting issues
- <span className="relative inline-block mt-[3px] size-4">
+ <span className='relative inline-block mt-[3px] size-4'>
<span
className={twMerge(
'absolute inset-0 transition-all duration-200 ease-out',
- showIsCopied
- ? 'opacity-0 scale-50'
- : 'opacity-100 scale-100',
+ showIsCopied ? 'opacity-0 scale-50' : 'opacity-100 scale-100'
)}
>
<IconClipboard />
</span>
<span
className={twMerge(
'absolute inset-0 transition-all duration-200 ease-out',
- showIsCopied
- ? 'opacity-100 scale-100'
- : 'opacity-0 scale-50',
+ showIsCopied ? 'opacity-100 scale-100' : 'opacity-0 scale-50'
)}
>
<CheckIcon />
</span>
</span>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <span className="relative inline-block mt-[3px] size-4"> | |
| <span | |
| className={twMerge( | |
| 'absolute inset-0 transition-all duration-200 ease-out', | |
| showIsCopied | |
| ? 'opacity-0 scale-50' | |
| : 'opacity-100 scale-100', | |
| )} | |
| > | |
| <IconClipboard /> | |
| </span> | |
| <span | |
| className={twMerge( | |
| 'absolute inset-0 transition-all duration-200 ease-out', | |
| showIsCopied | |
| ? 'opacity-100 scale-100' | |
| : 'opacity-0 scale-50', | |
| )} | |
| > | |
| <CheckIcon /> | |
| </span> | |
| <span className='relative inline-block mt-[3px] size-4'> | |
| <span | |
| className={twMerge( | |
| 'absolute inset-0 transition-all duration-200 ease-out', | |
| showIsCopied ? 'opacity-0 scale-50' : 'opacity-100 scale-100' | |
| )} | |
| > | |
| <IconClipboard /> | |
| </span> | |
| <span | |
| className={twMerge( | |
| 'absolute inset-0 transition-all duration-200 ease-out', | |
| showIsCopied ? 'opacity-100 scale-100' : 'opacity-0 scale-50' | |
| )} | |
| > | |
| <CheckIcon /> | |
| </span> | |
| </span> |
🧰 Tools
🪛 GitHub Actions: PR testing - if Node project
[error] 338-338: Replace "relative·inline-block·mt-[3px]·size-4" with 'relative·inline-block·mt-[3px]·size-4' prettier/prettier
[error] 338-338: Unexpected usage of doublequote. jsx-quotes
[error] 342-342: Replace ⏎······················?·'opacity-0·scale-50'⏎······················:·'opacity-100·scale-100', with ·?·'opacity-0·scale-50'·:·'opacity-100·scale-100' prettier/prettier
[error] 344-344: Unexpected trailing comma. comma-dangle
[error] 352-352: Replace ⏎······················?·'opacity-100·scale-100'⏎······················:·'opacity-0·scale-50', with ·?·'opacity-100·scale-100'·:·'opacity-0·scale-50' prettier/prettier
[error] 354-354: Unexpected trailing comma. comma-dangle
🤖 Prompt for AI Agents
In `@components/editor/CodeBlock.tsx` around lines 338 - 358, The JSX in the
CodeBlock component has Prettier/ESLint formatting issues: change double quotes
to single quotes for JSX attributes (e.g., className attributes on the span
elements), remove trailing commas in prop lists passed to twMerge, and collapse
the ternary expressions used inside twMerge onto single lines so each
conditional is one line (affecting the className calls that reference
showIsCopied, IconClipboard, and CheckIcon). Ensure the twMerge invocations and
the two nested span elements use single-quoted strings and no trailing commas
and that the ternary operators are formatted as single-line expressions.
|
⚡️ Lighthouse report for the changes in this PR:
Lighthouse ran on https://deploy-preview-5039--asyncapi-website.netlify.app/ |
2 participants
Summary
Replaces the "Copied!" text feedback in code block copy interaction with a check icon for a cleaner, less intrusive UI.
Closes #5037
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.