fix: editor toolbar re-render

[daidr]

WHAT

🤖 Generated by Copilot at 28ee390

This pull request enhances the performance of the UI components and the editor page by using React memoization techniques. It also adds a preview feature for the editor and fixes some variable naming issues. The main files affected are Button.tsx, EditorToolbar.tsx, useDate.ts, and editor.tsx.

🤖 Generated by Copilot at 28ee390

We are the masters of the editor
We optimize the code with memo
We unleash the power of the draft
We preview the doom with onPreviewButtonClick

WHY

Fixed the issue of some editor elements being re-rendered redundantly.

Before:
https://user-images.githubusercontent.com/18638914/232337151-5beb824e-43f6-49a0-ab1e-15e276412066.mp4
After:
https://user-images.githubusercontent.com/18638914/232337155-5cfe16bf-03c9-4361-8755-ec3622e9aaa1.mp4

HOW

🤖 Generated by Copilot at 28ee390

• Wrap Button and EditorToolbar components with memo function and pass areEqual function to compare props and prevent unnecessary re-rendering (link, link, link, link)
• Wrap renderToolbar function with useCallback function and pass dependency array to memoize value and avoid creating new functions on every render (link)
• Wrap date utils returned by useDate hook with useMemo function and pass dependency array to memoize value and avoid recomputing on every render unless language changes (link, link)
• Rename ExtraProperties variable to extraProperties and wrap it with useMemo function and pass dependency array to memoize value and avoid recreating JSX elements on every render unless one of the dependencies changes (link, link)
• Add onPreviewButtonClick function and wrap it with useCallback function and pass dependency array to memoize value and avoid creating new function on every render (link)
• Use onPreviewButtonClick function as previewPage prop of Editor component and onClick prop of Button component instead of creating new functions on every render (link, link)

[vercel]

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

Name	Status	Preview	Comments	Updated (UTC)
xlog	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 16, 2023 7:28pm