[Lexical] Create initial Gallery View with Emoji Plugin Example #28
Conversation
![korbit-ai[bot]](https://avatars.githubusercontent.com/in/322216?s=60&v=4){kind=small}
|
Clone of the PR facebook/lexical#6369 |
|
My review is in progress 📖 - I will have feedback for you in a few minutes! |
|
Important Review skippedAuto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the WalkthroughThe recent modifications to the lexical website enhance its structure and functionality by simplifying the configuration, introducing new React components for a gallery, and improving styling. The removal of the conditional plugin logic streamlines the setup, while new components like Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant GalleryPage
participant GalleryCards
participant Card
User->>GalleryPage: Request gallery
GalleryPage->>GalleryCards: Fetch card data
GalleryCards->>Card: Render individual cards
Card->>User: Display gallery items
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configuration File (
|
| const image = getCardImage(item); | ||
| return ( | ||
| <li key={item.title} className="card shadow--md"> | ||
| <a href={item.uri} target="_blank"> |
There was a problem hiding this comment.
The external link in the Card component is missing important attributes for security and accessibility. When opening links in a new tab (target="_blank"), it's recommended to add rel="noopener noreferrer" to prevent potential security vulnerabilities. Additionally, consider adding an aria-label to the link for better accessibility, especially since it only contains an image.
Chat with Korbit by mentioning @korbit-ai, and give a 👍 or 👎 to help Korbit improve your reviews.
| function CardList({cards}) { | ||
| return ( | ||
| <div className="container"> | ||
| <ul className={clsx('clean-list', styles.cardList)}> | ||
| {cards.map((item) => ( | ||
| <Card key={item.title} item={item} /> | ||
| ))} | ||
| </ul> | ||
| </div> | ||
| ); | ||
| } |
There was a problem hiding this comment.
In the CardList component, it's important to add error handling for the 'cards' prop. Currently, if 'cards' is undefined or not an array, the component will throw an error when trying to map over it. Consider adding a check to ensure 'cards' is defined and is an array before mapping, and provide a fallback UI if it's not. This will improve the robustness of the component and prevent potential runtime errors.
Chat with Korbit by mentioning @korbit-ai, and give a 👍 or 👎 to help Korbit improve your reviews.
| function Card({item}) { | ||
| const image = getCardImage(item); | ||
| return ( | ||
| <li key={item.title} className="card shadow--md"> | ||
| <a href={item.uri} target="_blank"> | ||
| <div className={clsx('card__image', styles.showcaseCardImage)}> | ||
| <img src={image} alt={item.title} /> | ||
| </div> | ||
| </a> | ||
| <div className="card__body"> | ||
| <div className={clsx(styles.showcaseCardHeader)}> | ||
| <Heading as="h4" className={styles.showcaseCardTitle}> | ||
| <Link href={item.website} className={styles.showcaseCardLink}> | ||
| {item.title} | ||
| </Link> | ||
| </Heading> | ||
| </div> | ||
| <p className={styles.showcaseCardBody}>{item.description}</p> | ||
| </div> | ||
| </li> | ||
| ); |
There was a problem hiding this comment.
I noticed that the Card component doesn't handle cases where some properties of the item object might be missing. This could lead to errors if, for example, item.uri or item.website are undefined. Consider adding checks for these properties and providing fallback values. For instance, you could use the optional chaining operator (?.) and nullish coalescing operator (??) to safely access these properties and provide default values.
Chat with Korbit by mentioning @korbit-ai, and give a 👍 or 👎 to help Korbit improve your reviews.
| export default function GalleryPage() { | ||
| return ( | ||
| <main className="margin-vert--lg"> | ||
| <GalleryCards /> | ||
| </main> | ||
| ); | ||
| } |
There was a problem hiding this comment.
The GalleryPage component currently lacks a title or heading. Consider adding an <h1> or <h2> element with an appropriate title (e.g., 'Plugin Gallery') before the <GalleryCards /> component. This will improve the page structure and provide better context for users.
Chat with Korbit by mentioning @korbit-ai, and give a 👍 or 👎 to help Korbit improve your reviews.
| export const plugins = (customFields) => [ | ||
| { | ||
| title: 'EmojiPlugin', | ||
| uri: `${customFields.STACKBLITZ_PREFIX}examples/vanilla-js-plugin?embed=1&file=src%2Femoji-plugin%2FEmojiPlugin.ts&terminalHeight=0&ctl=1`, | ||
| }, | ||
| ]; |
There was a problem hiding this comment.
The plugins function assumes that customFields.STACKBLITZ_PREFIX is always defined, which may not be the case. To improve robustness, consider adding a check for the existence of customFields and STACKBLITZ_PREFIX, or provide a default value. For example:
export const plugins = (customFields = {}) => [
{
title: 'EmojiPlugin',
uri: `${customFields.STACKBLITZ_PREFIX || ''}examples/vanilla-js-plugin?embed=1&file=src%2Femoji-plugin%2FEmojiPlugin.ts&terminalHeight=0&ctl=1`,
},
];This change will prevent potential runtime errors if customFields or STACKBLITZ_PREFIX is undefined.
Chat with Korbit by mentioning @korbit-ai, and give a 👍 or 👎 to help Korbit improve your reviews.
|
/review |
PR Reviewer Guide 🔍(Review updated until commit 080f5c3)
|
|
Persistent review updated to latest commit 080f5c3 |
codiumai-pr-agent-free
bot
added
documentation
|
@coderabbitai full review |
|
Persistent review updated to latest commit 080f5c3 |
Actions performedFull review triggered. |
PR Code Suggestions ✨
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Outside diff range, codebase verification and nitpick comments (1)
packages/lexical-website/src/components/Gallery/styles.module.css (1)
17-21: Consider using CSS variables for colors.Using CSS variables for colors can improve maintainability and consistency across the styles.
Example:
:root { --background-light: #f6fdfd; --background-dark: #232525; } .showcaseFavorite { background-color: var(--background-light); } html[data-theme='dark'] .showcaseFavorite { background-color: var(--background-dark); }
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (8)
- packages/lexical-website/docusaurus.config.js (3 hunks)
- packages/lexical-website/fb/sdoc-cache.json (1 hunks)
- packages/lexical-website/src/components/Gallery/Card.js (1 hunks)
- packages/lexical-website/src/components/Gallery/GalleryCards.js (1 hunks)
- packages/lexical-website/src/components/Gallery/GalleryPage.js (1 hunks)
- packages/lexical-website/src/components/Gallery/pluginList.js (1 hunks)
- packages/lexical-website/src/components/Gallery/styles.module.css (1 hunks)
- packages/lexical-website/src/pages/gallery.md (1 hunks)
Additional comments not posted (5)
packages/lexical-website/fb/sdoc-cache.json (1)
1-4: LGTM!The file appears to be a generated configuration or cache file. No issues found.
packages/lexical-website/src/pages/gallery.md (1)
6-8: LGTM!The import path update and heading change are appropriate and improve the organization and clarity of the documentation.
packages/lexical-website/src/components/Gallery/Card.js (2)
29-29: Add security attributes to external links.When using
target="_blank", addrel="noopener noreferrer"for security reasons.Use this diff to add the attributes:
<a href={item.uri} target="_blank" rel="noopener noreferrer">Likely invalid or redundant comment.
25-45: Handle potential undefined properties inCard.Ensure that properties like
item.urianditem.websiteare defined before use to prevent runtime errors.Use optional chaining and nullish coalescing operators:
const image = getCardImage(item); return ( <li key={item.title} className="card shadow--md"> - <a href={item.uri} target="_blank"> + <a href={item.uri ?? '#'} target="_blank" rel="noopener noreferrer"> <div className={clsx('card__image', styles.showcaseCardImage)}> <img src={image} alt={item.title} /> </div> </a> <div className="card__body"> <div className={clsx(styles.showcaseCardHeader)}> <Heading as="h4" className={styles.showcaseCardTitle}> - <Link href={item.website} className={styles.showcaseCardLink}> + <Link href={item.website ?? '#'} className={styles.showcaseCardLink}> {item.title} </Link> </Heading> </div> <p className={styles.showcaseCardBody}>{item.description}</p> </div> </li>Likely invalid or redundant comment.
packages/lexical-website/docusaurus.config.js (1)
389-392: Verify the impact of removing conditional logic.Ensure that the removal of conditional logic for plugins and configuration does not affect necessary functionality in different environments.
Run the following script to verify the impact:
| function getCardImage(item) { | ||
| return ( | ||
| item.preview ?? | ||
| `https://slorber-api-screenshot.netlify.app/${encodeURIComponent( | ||
| item.uri, | ||
| )}/showcase` | ||
| ); | ||
| } |
There was a problem hiding this comment.
Ensure item.uri is defined before use.
Consider adding a check to ensure item.uri is defined before using it to construct the URL. This will prevent potential errors if item.uri is undefined.
Use this diff to add a check:
return (
item.preview ??
+ (item.uri &&
`https://slorber-api-screenshot.netlify.app/${encodeURIComponent(
item.uri,
)}/showcase`)
);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.
| function getCardImage(item) { | |
| return ( | |
| item.preview ?? | |
| `https://slorber-api-screenshot.netlify.app/${encodeURIComponent( | |
| item.uri, | |
| )}/showcase` | |
| ); | |
| } | |
| function getCardImage(item) { | |
| return ( | |
| item.preview ?? | |
| (item.uri && | |
| `https://slorber-api-screenshot.netlify.app/${encodeURIComponent( | |
| item.uri, | |
| )}/showcase`) | |
| ); | |
| } |
User description
WHAT
Create initial Gallery View with Emoji Plugin Example
Description
Added initial Gallery View to have list of cards from Intern and Extern
TODO Have a details view for a card with description, right now it just kinda opens the example in a separate sandbox
Test plan
https://lexical-agv4wnh6m-fbopensource.vercel.app/gallery
Description by Korbit AI
Note
This feature is in early access. You can enable or disable it in the Korbit Console.
What change is being made?
Create an initial Gallery View with an example of the Emoji Plugin, including new components for the gallery and updates to the Docusaurus configuration.
Why are these changes being made?
This change introduces a new Gallery section to showcase various plugins, starting with the Emoji Plugin. It enhances the documentation site by providing visual examples and interactive demos, making it easier for users to understand and utilize the plugins.
PR Type
enhancement, documentation
Description
Card,GalleryCards,GalleryPage) to support the Gallery view.Changes walkthrough 📝
docusaurus.config.js
Update Docusaurus configuration for Gallery integrationpackages/lexical-website/docusaurus.config.js
Card.js
Add Card component for Gallery itemspackages/lexical-website/src/components/Gallery/Card.js
Cardcomponent for displaying gallery items.clsxfor conditional class names.GalleryCards.js
Implement GalleryCards component for displaying plugin cardspackages/lexical-website/src/components/Gallery/GalleryCards.js
GalleryCardscomponent to render a list of cards.pluginslist for dynamic card generation.GalleryPage.js
Create GalleryPage component for main gallery displaypackages/lexical-website/src/components/Gallery/GalleryPage.js
GalleryPagecomponent to serve as the main gallery page.pluginList.js
Define plugin list for Gallery displaypackages/lexical-website/src/components/Gallery/pluginList.js
EmojiPluginas an initial example.styles.module.css
Add styles for Gallery components and layoutpackages/lexical-website/src/components/Gallery/styles.module.css
sdoc-cache.json
Add generated sdoc-cache.json filepackages/lexical-website/fb/sdoc-cache.json
gallery.md
Update gallery page to use new GalleryPage componentpackages/lexical-website/src/pages/gallery.md
GalleryPage.Summary by CodeRabbit
New Features
Gallerysection with card UI elements to display items dynamically.Bug Fixes
Chores