updated docs version

[sauravpanda]

Update AkiraDocs with New Features and Improvements

• Purpose:
  Introduce new analytics integration and enhance documentation structure.
• Key Changes:
  • Updated version in package.json from 1.0.47 to 1.0.52.
  • Added a new guide for Analytics Integration in en_docs.txt.
  • Enhanced sitemap with additional URLs for better navigation.
  • Introduced new components: ButtonBlock and SpacerBlock for flexible content management.
  • Updated Header and BlockRenderer to support new block types and improved navigation.
• Impact:
  These changes improve user experience by providing better analytics tracking and more versatile content blocks.

✨ Generated with love by Kaizen ❤️

Original Description

## 🔍 Description

Type

• 🐛 Bug Fix
• ✨ Feature
• 📚 Documentation
• 🔧 Other: _____

Checklist

• Tested locally
• Updated docs (if needed)
• Added/updated tests (if needed)

[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 25, 2024 7:43am

[kaizen-bot]

🔍 Code Review Summary

❗ Attention Required: This push has potential issues. 🚨

Overview

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

🚨 Critical Issues

Security (3 issues)

1. Ensure proper sanitization of user input in the ButtonBlock component

---

📁 File: docs/src/components/blocks/ButtonBlock.tsx
🔍 Reasoning:
The ButtonBlock component allows users to input content, which could potentially contain malicious code. It's important to sanitize this input to prevent cross-site scripting (XSS) attacks.

💡 Solution:
Implement input sanitization in the ButtonBlock component to prevent XSS attacks. Use a trusted library like DOMPurify or sanitize-html to sanitize the user input before rendering it.

Current Code:

// Excerpt from ButtonBlock.tsx
<input
  value={content}
  onChange={(e) => onUpdate?.(e.target.value)}
  // ...
/>

Suggested Code:

// Refactored ButtonBlock.tsx
import{sanitize}from 'dompurify';

function ButtonBlock({content, onUpdate}){
  const sanitizedContent = sanitize(content);

  return (
    <input
      value={sanitizedContent}
      onChange={(e) => onUpdate?.(sanitize(e.target.value))}
      // ...
    />
  );
}

2. Optimize the SortableBlock component for performance

---

📁 File: docs/src/components/blocks/SortableBlock.tsx
🔍 Reasoning:
The SortableBlock component is responsible for rendering and updating the various block types. As the number of blocks increases, the performance of this component becomes more critical.

💡 Solution:
Implement memoization techniques in the SortableBlock component to avoid unnecessary re-renders. Use React.memo or useMemo to memoize expensive computations or component renders.

Current Code:

// Excerpt from SortableBlock.tsx
export function SortableBlock({block, updateBlock, updateBlockMetadata}){
  return (
    <BlockRenderer
      // ...
    />
  );
}

Suggested Code:

// Refactored SortableBlock.tsx
import{memo, useMemo}from 'react';

const MemoizedBlockRenderer = memo(BlockRenderer);

function SortableBlock({block, updateBlock, updateBlockMetadata}){
  const memoizedBlockProps = useMemo(() =>{
    return{
      // Memoize expensive computations or props
};
},[block]);

  return (
    <MemoizedBlockRenderer{...memoizedBlockProps}/>
  );
}

3. Use of inline functions in render methods.

---

📁 File: docs/src/components/editor/BlockFormatToolbar.tsx
🔍 Reasoning:
Inline functions in render methods can lead to unnecessary re-renders as they create new function instances on each render.

💡 Solution:
Define event handlers outside of the render method to improve performance.

Current Code:

onValueChange={(value) => onUpdate?.({buttonStyle:{...buttonMetadata?.style, variant: value as any}})}

Suggested Code:

const handleValueChange = (value) =>{onUpdate?.({buttonStyle:{...buttonMetadata?.style, variant: value as any}});}; <Select onValueChange={handleValueChange}>

---

Test Cases

18 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.

[kaizen-bot]

Comment: Ensure proper sanitization of user input in the ButtonBlock component

Solution: Implement input sanitization in the ButtonBlock component to prevent XSS attacks. Use a trusted library like DOMPurify or sanitize-html to sanitize the user input before rendering it.
!! Make sure the following suggestion is correct before committing it !!

Suggested change

	<input
	value={content}
	onChange={(e) => onUpdate?.(e.target.value)}
	onFocus={() => setIsFocused(true)}
	// Refactored ButtonBlock.tsx
	import{sanitize}from 'dompurify';
	function ButtonBlock({content, onUpdate}){
	const sanitizedContent = sanitize(content);
	return (
	<input
	value={sanitizedContent}
	onChange={(e) => onUpdate?.(sanitize(e.target.value))}
	// ...
	/>
	);
	}

[kaizen-bot]

Comment: Optimize the SortableBlock component for performance

Solution: Implement memoization techniques in the SortableBlock component to avoid unnecessary re-renders. Use React.memo or useMemo to memoize expensive computations or component renders.
!! Make sure the following suggestion is correct before committing it !!

Suggested change

	updateBlock(block.id, JSON.stringify(updatedContent));
	}
	}}
	showButtonControls={block.type === 'button'}
	buttonMetadata={{
	url: block.metadata?.buttonUrl,
	style: block.metadata?.buttonStyle
	}}
	onButtonMetadataChange={(metadata) => {
	updateBlockMetadata(block.id, {
	...block.metadata,
	buttonUrl: metadata.buttonUrl,
	buttonStyle: {
	...block.metadata?.buttonStyle,
	...metadata.buttonStyle
	}
	})
	}}
	/>
	)}
	<BlockRenderer
	// Refactored SortableBlock.tsx
	import{memo, useMemo}from 'react';
	const MemoizedBlockRenderer = memo(BlockRenderer);
	function SortableBlock({block, updateBlock, updateBlockMetadata}){
	const memoizedBlockProps = useMemo(() =>{
	return{
	// Memoize expensive computations or props
	};
	},[block]);
	return (
	<MemoizedBlockRenderer{...memoizedBlockProps}/>
	);
	}

[kaizen-bot]

Comment: Use of inline functions in render methods.

Solution: Define event handlers outside of the render method to improve performance.
!! Make sure the following suggestion is correct before committing it !!

Suggested change

	onValueChange={(value) => onButtonMetadataChange?.({
	const handleValueChange = (value) =>{onUpdate?.({buttonStyle:{...buttonMetadata?.style, variant: value as any}});}; <Select onValueChange={handleValueChange}>