[WEB-2450] dev: custom image extension #5585
Conversation
WalkthroughThe changes primarily focus on refactoring file handling and image upload functionalities within the editor. The Changes
Possibly related PRs
Suggested labels
Poem
Recent review detailsConfiguration used: CodeRabbit UI Files selected for processing (1)
Files skipped from review as they are similar to previous changes (1)
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 (
|
Palanikannan1437
changed the title
aaryan610
changed the title
Palanikannan1437
force-pushed
the
fix/image-upload-realtime
branch
from
634f5c1 to
d8308cf
Compare
Palanikannan1437
force-pushed
the
fix/image-upload-realtime
branch
from
e0c8453 to
78b1c50
Compare
Palanikannan1437
force-pushed
the
fix/image-upload-realtime
branch
from
2942c35 to
8b9418d
Compare
Palanikannan1437
force-pushed
the
fix/image-upload-realtime
branch
2 times, most recently
from
74fa836 to
d7484df
Compare
Palanikannan1437
force-pushed
the
fix/image-upload-realtime
branch
from
d7484df to
5da5770
Compare
Palanikannan1437
force-pushed
the
fix/image-upload-realtime
branch
from
74e72b3 to
889dbb5
Compare
![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
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files ignored due to path filters (1)
yarn.lockis excluded by!**/yarn.lock,!**/*.lock
Files selected for processing (25)
- packages/editor/src/ce/extensions/document-extensions.tsx (1 hunks)
- packages/editor/src/core/components/editors/editor-content.tsx (0 hunks)
- packages/editor/src/core/components/menus/block-menu.tsx (1 hunks)
- packages/editor/src/core/components/menus/menu-items.ts (3 hunks)
- packages/editor/src/core/extensions/custom-image/components/image-node.tsx (1 hunks)
- packages/editor/src/core/extensions/custom-image/custom-image.ts (1 hunks)
- packages/editor/src/core/extensions/custom-image/read-only-custom-image.ts (1 hunks)
- packages/editor/src/core/extensions/extensions.tsx (4 hunks)
- packages/editor/src/core/extensions/image/extension.tsx (2 hunks)
- packages/editor/src/core/extensions/image/image-component-without-props.tsx (1 hunks)
- packages/editor/src/core/extensions/image/image-extension-without-props.tsx (2 hunks)
- packages/editor/src/core/extensions/image/image-resize.tsx (0 hunks)
- packages/editor/src/core/extensions/image/index.ts (0 hunks)
- packages/editor/src/core/extensions/image/read-only-image.tsx (2 hunks)
- packages/editor/src/core/hooks/use-editor.ts (5 hunks)
- packages/editor/src/core/hooks/use-file-upload.ts (1 hunks)
- packages/editor/src/core/hooks/use-read-only-editor.ts (2 hunks)
- packages/editor/src/core/plugins/image/delete-image.ts (3 hunks)
- packages/editor/src/core/plugins/image/restore-image.ts (2 hunks)
- packages/editor/src/core/plugins/image/utils/validate-file.ts (1 hunks)
- packages/editor/src/index.ts (0 hunks)
- packages/editor/src/styles/drag-drop.css (3 hunks)
- packages/editor/src/styles/editor.css (1 hunks)
- packages/helpers/package.json (1 hunks)
- packages/helpers/tsconfig.json (1 hunks)
Files not reviewed due to no reviewable changes (4)
- packages/editor/src/core/components/editors/editor-content.tsx
- packages/editor/src/core/extensions/image/image-resize.tsx
- packages/editor/src/core/extensions/image/index.ts
- packages/editor/src/index.ts
Files skipped from review as they are similar to previous changes (4)
- packages/editor/src/ce/extensions/document-extensions.tsx
- packages/editor/src/core/components/menus/menu-items.ts
- packages/editor/src/core/hooks/use-editor.ts
- packages/editor/src/core/hooks/use-file-upload.ts
Additional context used
Biome
packages/editor/src/core/extensions/custom-image/components/image-node.tsx
[error] 79-79: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
Additional comments not posted (37)
packages/helpers/tsconfig.json (1)
1-8: LGTM!The TypeScript configuration file is well-structured and follows best practices:
- Extending from
react-library.jsonreuses base settings tailored for React library development.- Setting
jsxtoreactenables the use of React components and features within the TypeScript files.- Including all files in the current directory and its subdirectories ensures that all relevant source files are processed by the TypeScript compiler.
- Excluding
dist,build, andnode_modulesdirectories optimizes the build process and prevents unnecessary compilation of output or dependency files.packages/editor/src/core/extensions/image/read-only-image.tsx (1)
18-20: Great work on enhancing the image node with a custom view!Using
ReactNodeViewRendererwith a customCustomImageNodecomponent is an excellent way to tailor the rendering and behavior of the image node. This approach allows for more flexibility in implementing features like resize handles, selection overlays, and other UI enhancements mentioned in the PR summary.The custom node view can greatly improve the user experience by providing visual cues and intuitive interactions. Keep up the good work!
packages/editor/src/core/extensions/image/image-extension-without-props.tsx (1)
20-22: LGTM! The custom node view enhances image rendering flexibility.The addition of the
addNodeViewmethod and the use ofReactNodeViewRendererto render a customCustomImageNodecomponent is a great way to extend the functionality of the image extension.Benefits of using a custom node view:
- Allows for more control over how images are rendered within the editor.
- Enables the integration of custom properties and behaviors specific to the project's requirements.
- Promotes modularity by separating the image rendering logic into a dedicated component.
packages/helpers/package.json (5)
6-6: LGTM!Updating the
mainentry point to target the compiled JavaScript file in thedistdirectory follows the best practice for distributing packages.
7-8: Great additions!The new
moduleandtypesfields improve the package's compatibility and usability:
- The
moduleentry enables support for ES module syntax, aligning with modern JavaScript standards.- The
typesfield ensures that TypeScript projects can properly consume this package by providing type definitions.
9-11: Good practice!Defining the
filesarray to include only thedistdirectory is a great way to keep the package lightweight and ensure only necessary files are distributed.
12-14: Excellent build script!The new
buildscript efficiently automates the compilation process withtsup:
- Generating both ESM and CommonJS formats ensures broad compatibility.
- Emitting type definitions is essential for TypeScript consumers.
- Minifying the output and excluding React from the bundle optimizes the package size and prevents potential issues.
18-19: Appropriate dev dependencies!The updated
devDependenciessection looks good:
- Including
tsupis necessary for the new build process.- Updating
typescriptensures compatibility with the latest features and improvements.- Using caret version specifiers allows for seamless updates to compatible versions.
packages/editor/src/core/plugins/image/utils/validate-file.ts (1)
Line range hint
1-26: LGTM!The addition of the
showAlertparameter is a good enhancement. It provides flexibility to the caller to suppress alerts if needed, without affecting the core validation logic. The implementation looks correct and the changes are non-breaking.packages/editor/src/core/extensions/custom-image/read-only-custom-image.ts (1)
1-54: LGTM! Just one minor type suggestion.The custom read-only image extension is well-structured and follows the Tiptap extension API. The read-only nature of the extension is appropriate for scenarios where user interaction is not desired. The default attributes,
parseHTML,renderHTML, and storage mechanism are all implemented correctly. The integration of a React component ensures compatibility with React applications.Overall, this extension provides a clean and structured approach to display read-only images in Tiptap.
Define the generic type parameter explicitly instead of using
{}.The static analysis hint correctly flags the usage of
{}as a type. Using{}is equivalent toanyand loses type safety.Define the generic type parameter explicitly like this:
-Image.extend<{}, UploadImageExtensionStorage>({ +Image.extend<Record<string, unknown>, UploadImageExtensionStorage>({
Record<string, unknown>is a more explicit way to define an object type with string keys and values of any type.packages/editor/src/core/plugins/image/delete-image.ts (4)
8-8: LGTM! The additionalnodeTypeparameter makes the plugin more flexible.The modification to the
TrackImageDeletionPluginfunction signature to accept anodeTypeparameter is a great improvement. It allows the plugin to handle different types of image nodes dynamically, making it more generic and adaptable to various contexts.This change eliminates the hardcoded reference to a specific image node type, enhancing the plugin's usability and flexibility.
10-10: LGTM! The dynamic plugin key ensures uniqueness for each image node type.Updating the plugin key to include the
nodeTypeparameter is a smart move. It ensures that each instance of the plugin has a unique key associated with the specific image node type it handles.This dynamic plugin key allows multiple instances of the plugin to coexist, each tracking deletions for a different image node type without conflicts. It enhances the plugin's flexibility and ensures proper functionality in various scenarios.
14-14: LGTM! UsingnodeTypefor identifying image nodes makes the plugin more versatile.Updating the logic to use the provided
nodeTypeparameter for identifying image nodes in both the new and old document states is a great improvement. It allows the plugin to accurately track deletions for different types of image nodes based on the specifiednodeType.This change makes the plugin more versatile and adaptable to various use cases, as it can now work with different image node types instead of being limited to a hardcoded type. It enhances the plugin's flexibility and ensures accurate tracking of image deletions.
Also applies to: 28-28
38-38: LGTM! UsingnodeTypefor accessing the storage structure enhances organization.Updating the storage mechanism to use the
nodeTypefor accessing the appropriate storage structure is a valuable improvement. It allows the plugin to maintain separate storage for different types of image nodes, ensuring proper organization and tracking of deleted images based on their respective types.By using the
nodeTypeto access the storage, the plugin prevents conflicts and maintains a clear separation between different image node types. This enhances the plugin's ability to handle multiple image types efficiently and keeps the storage well-structured.packages/editor/src/core/plugins/image/restore-image.ts (5)
8-10: LGTM!The changes to the
TrackImageRestorationPluginfunction signature andPluginKeygeneration enhance the plugin's flexibility and reusability for different image node types. This improves the plugin's integration within the editor's ecosystem.
14-14: LGTM!Utilizing the
nodeTypeparameter to identify image nodes makes the plugin more adaptable to different image node types. This is a positive change that enhances the plugin's flexibility.
25-25: LGTM!Using the
nodeTypeparameter to process newly added images ensures that the plugin works correctly with the specified image node type. This change enhances the plugin's adaptability.
32-39: LGTM!Adjusting the handling of the deleted image set to reference the
nodeTypeensures that the plugin accesses the correct storage for deleted images based on the specified image node type. This change improves the plugin's compatibility with different image node types.
Line range hint
1-60: Overall, the changes in this file are well-designed and enhance the plugin's functionality.The modifications make the plugin more generic and reusable for different image node types, improving its integration within the editor's ecosystem. The changes are consistent and do not introduce any apparent issues or side effects. Great work!
packages/editor/src/core/extensions/image/extension.tsx (4)
16-17: LGTM!The keyboard shortcuts have been updated to use
this.name, which improves adaptability if the node type name changes in the future. The changes look good.
22-23: LGTM!The changes to pass
this.nameto theTrackImageDeletionPluginandTrackImageRestorationPluginlook good. This likely improves the context in which these plugins operate.
30-30: LGTM!The change to use
this.namefor checking the image node type looks good. This ensures consistency with the new dynamic naming approach.
65-67: Verify the custom image node renderer's integration and testing.The addition of the
addNodeViewmethod to integrate a custom image node renderer usingReactNodeViewRendererandCustomImageNodelooks good. This allows for a more tailored rendering of image nodes, potentially improving the user experience.Please ensure that the custom renderer is thoroughly tested and handles all relevant use cases. Also, verify that it integrates well with other parts of the codebase, such as the
CustomImageNodecomponent.packages/editor/src/styles/drag-drop.css (3)
Line range hint
42-66: LGTM!The changes to the selector for
.ProseMirror-selectednodeimprove the precision of styling for non-image nodes during drag-and-drop operations. The use of a pseudo-element (::after) to apply styles such as the horizontal offset and background color enhances the visual feedback for different node types.
67-74: LGTM!The introduction of new styles for nodes with classes
.node-imageComponentand.node-imageenhances the visual distinction for image components during drag-and-drop interactions. The custom horizontal offset and background color applied via a pseudo-element (::after) provide clear visual cues for image nodes, improving the user experience.
108-109: LGTM!The modification of the selector for image transitions to target nodes with classes
.node-imageComponentand.node-imageallows for more granular control over the styling of image nodes. The transition effect applied specifically to image nodes provides visual feedback during interactions, enhancing the user experience.packages/editor/src/core/hooks/use-read-only-editor.ts (2)
61-61: Preserve whitespace when setting editor content.The changes to the
setContentmethod ensure that whitespace is preserved in its entirety when setting the initial editor value. This enhancement aligns with the PR objective of improving content management functionality in the editor.Note that preserving whitespace may affect how content is rendered or displayed, especially if the content relies on specific whitespace formatting. Ensure that this behavior is desired and thoroughly test the editor with various content scenarios to confirm the expected results.
71-71: Maintain consistency in whitespace preservation.The changes to the
setEditorValuemethod mirror the updates made to thesetContentmethod in theuseEffecthook. This consistency ensures that whitespace is preserved uniformly across different content-setting scenarios within the editor.Maintaining a consistent approach to whitespace handling enhances the predictability and reliability of the editor's behavior. It also aligns with the PR objective of improving content management functionality.
packages/editor/src/core/extensions/custom-image/components/image-node.tsx (1)
1-122: Excellent work on theCustomImageNodecomponent!The component is well-structured and efficiently handles image uploads and rendering within the Prosemirror editor. The use of React hooks, such as
useState,useEffect,useRef,useCallback, anduseMemo, demonstrates a solid understanding of state management and performance optimization techniques.The component effectively manages different upload scenarios (drop and insert) and updates the node's attributes accordingly. The conditional rendering logic ensures a seamless user experience by displaying either the
CustomImageBlockorCustomImageUploaderbased on the upload state.Overall, the implementation enhances the image upload functionality within the editor and provides a user-friendly experience.
Tools
Biome
[error] 79-79: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
packages/editor/src/core/extensions/extensions.tsx (3)
15-15: LGTM!The import statement for
CustomImageExtensionis syntactically correct and aligns with the PR objective of introducing a new custom image extension to enhance image upload functionality.
108-113: LGTM!The configuration of
CustomImageExtensionwith parameters fordelete,restore,upload, andcancelaligns with the PR objective of enhancing image management capabilities within the editor. The defensive programming practice of setting thecancelparameter to an empty function ifcancelUploadImageis not provided is appreciated.
83-83: Verify the impact of removing theuploadFileargument fromDropHandlerExtension.The PR summary does not provide any context about the impact of this change. Please ensure that removing the
uploadFileargument does not negatively affect the file upload functionality when files are dropped into the editor, especially for images.Run the following script to verify the usage of
DropHandlerExtension:Verification successful
Verification successful: Removal of
uploadFileargument is consistent with implementationThe removal of the
uploadFileargument fromDropHandlerExtensionis consistent with its implementation and usage across the codebase. The extension is defined and called without any parameters, indicating that the change is intentional and part of a larger refactoring effort.File upload functionality still exists in the codebase, but it's not directly linked to the
DropHandlerExtension. This suggests that the responsibility for file uploads has been moved elsewhere, improving separation of concerns.Based on the available evidence, this change does not appear to negatively affect the file upload functionality when files are dropped into the editor.
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the usage of `DropHandlerExtension` and its impact on file uploads. # Test 1: Search for the usage of `DropHandlerExtension`. Expect: No occurrences of `DropHandlerExtension` with the `uploadFile` argument. rg --type typescript -A 5 $'DropHandlerExtension' # Test 2: Search for the implementation of `DropHandlerExtension`. Expect: The implementation should handle file uploads without the `uploadFile` argument. ast-grep --lang typescript --pattern $'DropHandlerExtension($$$) { $$$ }'Length of output: 618
Script:
#!/bin/bash # Description: Verify the usage and implementation of `DropHandlerExtension` # Search for the usage of `DropHandlerExtension` echo "Searching for DropHandlerExtension usage:" rg -A 5 "DropHandlerExtension" # Search for the definition of DropHandlerExtension echo -e "\nSearching for DropHandlerExtension definition:" rg -A 10 "function DropHandlerExtension" # Use ast-grep to find function declarations named DropHandlerExtension echo -e "\nSearching for DropHandlerExtension function declaration:" ast-grep --lang javascript --pattern "function DropHandlerExtension" # Search for any mentions of file upload functionality echo -e "\nSearching for file upload related code:" rg -i "file.?upload"Length of output: 3397
packages/editor/src/core/components/menus/block-menu.tsx (1)
104-105: LGTM!The additional condition to disable the "Duplicate" action when the editor is active on an "imageComponent" enhances the control flow and user experience. The logic is correct, and the implementation is accurate.
packages/editor/src/core/extensions/custom-image/custom-image.ts (2)
1-157: Excellent implementation of the custom image extension!The custom image extension is well-structured and follows best practices for extending the Tiptap editor. It provides a user-friendly experience for uploading images via drag-and-drop or insertion methods.
Key highlights:
- The
setImageUploadcommand effectively handles image uploads based on the event type and generates unique identifiers for each image.- The
uploadImagecommand asynchronously uploads image files and returns their URLs.- The extension specifies appropriate attributes for the custom image component, such as width, height, and an ID for tracking purposes.
- The storage mechanism efficiently manages the mapping of uploaded files.
- The React node view renderer ensures seamless integration of the custom image component into the editor interface.
Overall, this extension significantly enhances the editor's image handling capabilities while maintaining a clean and maintainable codebase.
32-32: Explicitly define the object shape.The past review comment suggests explicitly defining the object shape instead of using
{}as a type.{}means "any non-nullable value", which is not a good practice.Explicitly define the object shape to improve the type safety and readability of the code. For example:
-Image.extend<Record<string, unknown>, UploadImageExtensionStorage>({ +Image.extend<{ /* define the object shape here */ }, UploadImageExtensionStorage>({packages/editor/src/styles/editor.css (2)
125-125: LGTM!The
margin-top: 0 !importantrule for images within the.ProseMirrorclass is correct and ensures that images do not have any top margin in the editor.
128-139: LGTM!The conditional hover effect for images is implemented correctly:
- Images without the
.read-only-imageclass have a brightness filter applied on hover, with a smooth transition.- Selected images (with the
.ProseMirror-selectednodeclass) have a blue outline and brightness filter.The CSS rules are well-structured and achieve the desired visual effects for image interaction within the editor.
packages/editor/src/core/extensions/image/image-component-without-props.tsx
Show resolved
Hide resolved
packages/editor/src/core/extensions/custom-image/components/image-node.tsx
Show resolved
Hide resolved
What's new?
This PR adds a new custom image extension to handle image uploads.
Improvements:
Media:
Screen.Recording.2024-09-13.at.16.18.35.mov
Plane issue: WEB-2450
Summary by CodeRabbit
Release Notes
New Features
Improvements
Bug Fixes
These updates aim to enhance the user experience and functionality of the document editor.