159 add more block types #184
Conversation
feat: Theming in editor
Updating 159
Updating 159
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
![kaizen-bot[bot]](https://avatars.githubusercontent.com/in/480502?s=60&v=4){kind=small}
| type="file" | ||
| id={`video-upload-${id}`} | ||
| className="hidden" | ||
| accept="video/*" |
There was a problem hiding this comment.
Comment: Potential security risk with file uploads.
Solution: Implement file type and size validation for uploads.
!! Make sure the following suggestion is correct before committing it !!
| accept="video/*" | |
| accept='video/*' onChange={validateFileUpload} |
| // Delete files that were explicitly marked for deletion | ||
| await Promise.all( | ||
| deletedImages.map(filename => | ||
| fetch(`/api/upload/delete-from-root?filename=${encodeURIComponent(filename)}`, { | ||
| method: 'DELETE' | ||
| }) |
There was a problem hiding this comment.
Comment: Multiple fetch calls for file deletions and moves can be optimized.
Solution: Implement a batch API endpoint to handle multiple deletions/moves in a single request.
!! Make sure the following suggestion is correct before committing it !!
| // Delete files that were explicitly marked for deletion | |
| await Promise.all( | |
| deletedImages.map(filename => | |
| fetch(`/api/upload/delete-from-root?filename=${encodeURIComponent(filename)}`, { | |
| method: 'DELETE' | |
| }) | |
| await fetch('/api/upload/batch-delete',{ | |
| method: 'POST', | |
| body: JSON.stringify({filenames: deletedImages}) | |
| }); |
| const ALLOWED_FILE_TYPES = new Set([ | ||
| // Images | ||
| 'image/jpeg', | ||
| 'image/png', | ||
| 'image/gif', | ||
| 'image/webp', | ||
| 'image/svg+xml', |
There was a problem hiding this comment.
Comment: Potential security risk with file uploads due to lack of validation.
Solution: Implement server-side validation of file content to prevent malicious uploads.
!! Make sure the following suggestion is correct before committing it !!
| const ALLOWED_FILE_TYPES = new Set([ | |
| // Images | |
| 'image/jpeg', | |
| 'image/png', | |
| 'image/gif', | |
| 'image/webp', | |
| 'image/svg+xml', | |
| const isValidFileContent = (file) =>{/* implement content validation logic */}; |
| const file = e.target.files?.[0] | ||
| if (!file) return |
There was a problem hiding this comment.
Comment: Potential security risk with file uploads.
Solution: Add validation checks for file type and size before processing the upload.
!! Make sure the following suggestion is correct before committing it !!
| const file = e.target.files?.[0] | |
| if (!file) return | |
| if (!file || !['audio/mpeg', 'audio/wav'].includes(file.type) || file.size > 5 * 1024 * 1024){alert('Invalid file type or size.'); return;} |
🔍 Code Review Summary❗ Attention Required: This push has potential issues. 🚨 Overview
🚨 Critical Issuessecurity (5 issues)1. Potential XSS vulnerability with dangerouslySetInnerHTML.📁 File: packages/akiradocs/src/components/blocks/CodeBlock.tsx 💡 Solution: Current Code: dangerouslySetInnerHTML={{__html: code.replace(/\n/g, '<br>')}}Suggested Code: dangerouslySetInnerHTML={{__html: sanitizeHTML(code.replace(/\n/g, '<br>'))}}2. Potential for XSS attacks when rendering user-generated content.📁 File: packages/akiradocs/src/components/blocks/VideoBlock.tsx 💡 Solution: Current Code: src={videoContent.url}Suggested Code: src={sanitize(videoContent.url)}; // Ensure the URL is sanitized3. Sanitize file names before using them in file paths📁 File: packages/editor/src/app/api/upload/route.ts 💡 Solution: Current Code: ["const sanitizedFilename = baseFilename.replace(/[^a-zA-Z0-9]/g, '_');"]Suggested Code: ["const sanitizedFilename = baseFilename.replace(/[^a-zA-Z0-9-_. ]/g, '_');"]4. Optimize audio file loading and caching.📁 File: packages/editor/src/components/blocks/AudioBlock.tsx 💡 Solution: Current Code: <audio
ref={audioRef}
src={audioContent.url}
controls
className="w-full"
/>Suggested Code: <audio
ref={audioRef}
src={audioContent.url}
controls
className="w-full"
preload="metadata"
/>5. Sanitize user input for the audio caption.📁 File: packages/editor/src/components/blocks/AudioBlock.tsx 💡 Solution: Current Code: <figcaption className={cn(
"mt-2 text-sm text-muted-foreground italic",
alignment === 'left' && "text-left",
alignment === 'center' && "text-center",
alignment === 'right' && "text-right",
metadata?.styles?.bold && "font-bold",
metadata?.styles?.italic && "italic",
metadata?.styles?.underline && "underline"
)}>
{audioContent.caption}
</figcaption>Suggested Code: <figcaption className={cn(
"mt-2 text-sm text-muted-foreground italic",
alignment === 'left' && "text-left",
alignment === 'center' && "text-center",
alignment === 'right' && "text-right",
metadata?.styles?.bold && "font-bold",
metadata?.styles?.italic && "italic",
metadata?.styles?.underline && "underline"
)}>
{DOMPurify.sanitize(audioContent.caption)}
</figcaption>Test Cases31 file need updates to their tests. Run
Useful Commands
|
| lineHeight: 'inherit', | ||
| lineHeight: 'inherit' | ||
| }} | ||
| dangerouslySetInnerHTML={{ __html: code.replace(/\n/g, '<br>') }} |
There was a problem hiding this comment.
Comment: Potential XSS vulnerability with dangerouslySetInnerHTML.
Solution: Ensure that any content passed to dangerouslySetInnerHTML is sanitized to prevent XSS vulnerabilities.
!! Make sure the following suggestion is correct before committing it !!
| dangerouslySetInnerHTML={{ __html: code.replace(/\n/g, '<br>') }} | |
| dangerouslySetInnerHTML={{__html: sanitizeHTML(code.replace(/\n/g, '<br>'))}} |
| <div className="relative"> | ||
| <video | ||
| ref={videoRef} | ||
| src={videoContent.url} |
There was a problem hiding this comment.
Comment: Potential for XSS attacks when rendering user-generated content.
Solution: Implement sanitization for any user-generated content before rendering it in the UI.
!! Make sure the following suggestion is correct before committing it !!
| src={videoContent.url} | |
| src={sanitize(videoContent.url)}; // Ensure the URL is sanitized |
| const baseFilename = path.basename(file.name, fileExtension) | ||
| const sanitizedFilename = baseFilename.replace(/[^a-zA-Z0-9]/g, '_') | ||
| const uniqueFilename = `${Date.now()}-${sanitizedFilename}${fileExtension}` |
There was a problem hiding this comment.
Comment: Sanitize file names before using them in file paths
Solution: Implement a more robust file name sanitization process to ensure that only safe characters are used in the file names. This can be done by using a regular expression to replace any unsafe characters with a safe alternative, such as an underscore.
!! Make sure the following suggestion is correct before committing it !!
| const baseFilename = path.basename(file.name, fileExtension) | |
| const sanitizedFilename = baseFilename.replace(/[^a-zA-Z0-9]/g, '_') | |
| const uniqueFilename = `${Date.now()}-${sanitizedFilename}${fileExtension}` | |
| ["const sanitizedFilename = baseFilename.replace(/[^a-zA-Z0-9-_. ]/g, '_');"] |
| <audio | ||
| ref={audioRef} | ||
| src={audioContent.url} | ||
| controls | ||
| className="w-full" |
There was a problem hiding this comment.
Comment: Optimize audio file loading and caching.
Solution: Implement a caching strategy for the audio files, such as using the browser's cache or a content delivery network (CDN). Consider lazy-loading the audio files or using progressive web app (PWA) techniques to improve the initial load time.
!! Make sure the following suggestion is correct before committing it !!
| <audio | |
| ref={audioRef} | |
| src={audioContent.url} | |
| controls | |
| className="w-full" | |
| <audio | |
| ref={audioRef} | |
| src={audioContent.url} | |
| controls | |
| className="w-full" | |
| preload="metadata" | |
| /> |
| <figcaption className={cn( | ||
| "mt-2 text-sm text-muted-foreground italic", | ||
| alignment === 'left' && "text-left", | ||
| alignment === 'center' && "text-center", | ||
| alignment === 'right' && "text-right", | ||
| metadata?.styles?.bold && "font-bold", | ||
| metadata?.styles?.italic && "italic", | ||
| metadata?.styles?.underline && "underline" | ||
| )}> | ||
| {audioContent.caption} | ||
| </figcaption> | ||
| )} |
There was a problem hiding this comment.
Comment: Sanitize user input for the audio caption.
Solution: Use a library like DOMPurify or sanitize-html to sanitize the audio caption before rendering it in the UI.
!! Make sure the following suggestion is correct before committing it !!
| {audioContent.caption && ( | |
| <figcaption className={cn( | |
| "mt-2 text-sm text-muted-foreground italic", | |
| alignment === 'left' && "text-left", | |
| alignment === 'center' && "text-center", | |
| alignment === 'right' && "text-right", | |
| metadata?.styles?.bold && "font-bold", | |
| metadata?.styles?.italic && "italic", | |
| metadata?.styles?.underline && "underline" | |
| )}> | |
| {audioContent.caption} | |
| </figcaption> | |
| <figcaption className={cn( | |
| "mt-2 text-sm text-muted-foreground italic", | |
| alignment === 'left' && "text-left", | |
| alignment === 'center' && "text-center", | |
| alignment === 'right' && "text-right", | |
| metadata?.styles?.bold && "font-bold", | |
| metadata?.styles?.italic && "italic", | |
| metadata?.styles?.underline && "underline" | |
| )}> | |
| {DOMPurify.sanitize(audioContent.caption)} | |
| </figcaption> |
Comprehensive Content Block Enhancements
This pull request introduces significant refactoring and new functionality across various content blocks in the application, including support for additional media types.
AudioBlock,VideoBlock, andFileBlockcomponents to improve handling of content and metadata.Video,Audio, andFileoptions to theAddBlockButtoncomponent.BlockFormatToolbarto manage video and audio controls.BlockRendererto render new media blocks appropriately.ArticleEditorContentfor handling media files.These changes significantly enhance the user experience by providing more interactive and flexible content blocks, improving maintainability and readability of the codebase, and expanding the capabilities of the editor to incorporate a wider range of media types.
Original Description
# Enhance Content Management and Functionality**
Improve the structure, functionality, and file management capabilities of the content editor.
AudioBlock,VideoBlock, andFileBlockto include upload functionality and better state management.CheckListandTablecomponents to support dynamic editing and item management.**
These changes enhance the user experience by providing more interactive and flexible content management options, including the ability to better organize and manage associated files.
Original Description
Editor changes - new blocks, upload apis and block format toolbar changes