Added image dimensions to CTA Card #1446
Conversation
- In order for us to resize the images properly, we need to set the dimentions of the images in order for us to ratio it correctly when it gets scaled for different disply types, eg email
WalkthroughThis pull request adds two new properties, Possibly related PRs
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 ESLint
packages/koenig-lexical/src/nodes/CallToActionNodeComponent.jsxOops! Something went wrong! :( ESLint: 8.57.0 ESLint couldn't find the config "react-app" to extend from. Please check that the name of the config is correct. The config "react-app" was referenced from the config file in "/packages/koenig-lexical/.eslintrc.cjs". If you still have problems, please stop by https://eslint.org/chat/help to chat with the team. packages/kg-default-nodes/lib/nodes/call-to-action/CallToActionNode.jsOops! Something went wrong! :( ESLint: 8.57.0 Error: Failed to load parser '@babel/eslint-parser' declared in 'packages/kg-default-nodes/.eslintrc.js': Cannot find module '@babel/eslint-parser'
✨ Finishing Touches
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 using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![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
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
packages/kg-default-nodes/lib/nodes/call-to-action/CallToActionNode.js(1 hunks)packages/kg-default-nodes/test/nodes/call-to-action.test.js(5 hunks)packages/koenig-lexical/src/nodes/CallToActionNodeComponent.jsx(2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Node 20.11.1
🔇 Additional comments (3)
packages/kg-default-nodes/lib/nodes/call-to-action/CallToActionNode.js (1)
21-22: LGTM! Properties added correctly.The new
imageWidthandimageHeightproperties are properly added withnulldefaults, following the existing pattern.packages/koenig-lexical/src/nodes/CallToActionNodeComponent.jsx (1)
10-10: LGTM! Import added correctly.The
getImageDimensionsutility is properly imported.packages/kg-default-nodes/test/nodes/call-to-action.test.js (1)
41-42: LGTM! Test coverage is comprehensive.The tests thoroughly cover the new image dimension properties:
- Default values
- Getter/setter functionality
- JSON export
Also applies to: 74-75, 128-134, 324-325, 346-347
| const handleImageChange = async (files) => { | ||
| const imgPreviewUrl = URL.createObjectURL(files[0]); | ||
| const {width, height} = await getImageDimensions(imgPreviewUrl); | ||
| const result = await imageUploader.upload(files); | ||
| // reset original src so it can be replaced with preview and upload progress | ||
| editor.update(() => { | ||
| const node = $getNodeByKey(nodeKey); | ||
| node.imageUrl = result?.[0].url; | ||
| node.hasImage = true; | ||
| node.imageWidth = width; | ||
| node.imageHeight = height; | ||
| }); | ||
| }; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Consider cleanup of object URL.
The implementation correctly retrieves and stores image dimensions. However, the created object URL should be revoked after use to prevent memory leaks.
Apply this diff to add cleanup:
const handleImageChange = async (files) => {
const imgPreviewUrl = URL.createObjectURL(files[0]);
- const {width, height} = await getImageDimensions(imgPreviewUrl);
+ try {
+ const {width, height} = await getImageDimensions(imgPreviewUrl);
+ const result = await imageUploader.upload(files);
+ editor.update(() => {
+ const node = $getNodeByKey(nodeKey);
+ node.imageUrl = result?.[0].url;
+ node.hasImage = true;
+ node.imageWidth = width;
+ node.imageHeight = height;
+ });
+ } finally {
+ URL.revokeObjectURL(imgPreviewUrl);
+ }
- const result = await imageUploader.upload(files);
- editor.update(() => {
- const node = $getNodeByKey(nodeKey);
- node.imageUrl = result?.[0].url;
- node.hasImage = true;
- node.imageWidth = width;
- node.imageHeight = height;
- });
};📝 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.
| const handleImageChange = async (files) => { | |
| const imgPreviewUrl = URL.createObjectURL(files[0]); | |
| const {width, height} = await getImageDimensions(imgPreviewUrl); | |
| const result = await imageUploader.upload(files); | |
| // reset original src so it can be replaced with preview and upload progress | |
| editor.update(() => { | |
| const node = $getNodeByKey(nodeKey); | |
| node.imageUrl = result?.[0].url; | |
| node.hasImage = true; | |
| node.imageWidth = width; | |
| node.imageHeight = height; | |
| }); | |
| }; | |
| const handleImageChange = async (files) => { | |
| const imgPreviewUrl = URL.createObjectURL(files[0]); | |
| try { | |
| const {width, height} = await getImageDimensions(imgPreviewUrl); | |
| const result = await imageUploader.upload(files); | |
| editor.update(() => { | |
| const node = $getNodeByKey(nodeKey); | |
| node.imageUrl = result?.[0].url; | |
| node.hasImage = true; | |
| node.imageWidth = width; | |
| node.imageHeight = height; | |
| }); | |
| } finally { | |
| URL.revokeObjectURL(imgPreviewUrl); | |
| } | |
| }; |
no issue