201 custom component block

[shreyashkgupta]

Add Button and Spacer Block Components

• Purpose:
  Introduce new Button and Spacer block components to enhance the editor's functionality.
• Key Changes:
  • Added ButtonBlock component for customizable buttons with editing capabilities.
  • Introduced SpacerBlock component for adjustable vertical spacing between blocks.
  • Updated SortableBlock and BlockRenderer to support new block types (button and spacer).
  • Enhanced BlockFormatToolbar to manage button properties such as URL and style.
  • Modified AIRewriteButton to include specific rewrite options for button text.
• Impact:
  These additions improve the editor's usability by allowing users to create and customize buttons and spacers easily.

✨ Generated with love by Kaizen ❤️

Original Description

Added spacer and button blocks

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
akira-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 12, 2024 7:18pm

[kaizen-bot]

🔍 Code Review Summary

❗ Attention Required: This push has potential issues. 🚨

Overview

• Total Feedbacks: 2 (Critical: 2, Refinements: 0)
• Files Affected: 2
• Code Quality: [█████████████████░░░] 85% (Good)

🚨 Critical Issues

security (2 issues)

1. Potential XSS vulnerability in button content.

---

📁 File: packages/editor/src/components/blocks/ButtonBlock.tsx
🔍 Reasoning:
The content of buttons is directly rendered from user input without sanitization, which can lead to XSS attacks.

💡 Solution:
Sanitize user input before rendering it in the UI to prevent XSS vulnerabilities.

Current Code:

{content || 'Button text...'}

Suggested Code:

            {sanitize(content) || 'Button text...'}

2. Potential performance hit due to multiple re-renders.

---

📁 File: packages/editor/src/components/editor/BlockFormatToolbar.tsx
🔍 Reasoning:
The current implementation may cause unnecessary re-renders when state changes occur, especially with multiple components relying on the same state.

💡 Solution:
Consider using React.memo or useCallback to optimize performance for components that do not need to re-render on every state change.

Current Code:

export function BlockFormatToolbar({...}){...}

Suggested Code:

export const BlockFormatToolbar = React.memo(({...}) =>{...});

---

Test Cases

19 file need updates to their tests. Run !unittest to generate create and update tests.

---

✨ Generated with love by Kaizen ❤️

Useful Commands

• Feedback: Share feedback on kaizens performance with !feedback [your message]
• Ask PR: Reply with !ask-pr [your question]
• Review: Reply with !review
• Update Tests: Reply with !unittest to create a PR with test changes

[kaizen-bot]

Consider implementing the following changes to improve the code.

[sauravpanda]

This looks awesome!!