chore: better code

Author: lumixraku

src/components/editor/components/toolbar/selection-toolbar/SelectionToolbar.tsx

@@ -46,7 +46,7 @@ export function SelectionToolbar() {
       <div
         ref={ref}
         className={
-          'selection-toolbar pointer-events-none transform transition-opacity duration-200 absolute z-[100] flex min-h-[32px] w-fit flex-grow items-center rounded-lg bg-[var(--surface-primary)] px-2 py-[var(--spacing-spacing-xs)] opacity-0 shadow-toolbar'
+          'selection-toolbar pointer-events-none transform transition-opacity duration-200 absolute z-[100] flex min-h-[32px] w-fit flex-grow items-center rounded-[var(--border-radius-border-radius-l)] bg-[var(--surface-primary)] px-2 py-[var(--spacing-spacing-xs)] opacity-0 shadow-toolbar'
         }
         onMouseDown={(e) => {
           // prevent toolbar from taking focus away from editor

src/components/editor/components/toolbar/selection-toolbar/actions/Align.tsx

@@ -1,10 +1,9 @@
 import Button from '@mui/material/Button';
 import { PopoverProps } from '@mui/material/Popover';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { cloneElement, useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Element } from 'slate';
 import { useSlateStatic } from 'slate-react';
-import React from 'react';
 
 import { YjsEditor } from '@/application/slate-yjs';
 import { CustomEditor } from '@/application/slate-yjs/command';
@@ -76,6 +75,7 @@ export function Align({ blockId, enabled = true }: { blockId?: string; enabled?:
   const getAlign = useCallback(() => {
     try {
       const node = getNode();
+
       return (node.data as BlockData).align;
     } catch (e) {
       return;
@@ -93,7 +93,8 @@ export function Align({ blockId, enabled = true }: { blockId?: string; enabled?:
   const activeIcon = useCallback(() => {
     const align = getAlign();
     const option = alignOptions.find(opt => opt.type === align) || alignOptions[0];
-    return React.cloneElement(option.icon, {
+
+    return cloneElement(option.icon, {
       className: `h-5 w-5 ${align ? 'text-fill-default' : ''}`
     });
   }, [getAlign]);
@@ -103,6 +104,7 @@ export function Align({ blockId, enabled = true }: { blockId?: string; enabled?:
       return () => {
         try {
           const node = getNode();
+
           CustomEditor.setBlockData(editor, node.blockId as string, { align });
           handleClose();
           rePosition();

src/components/editor/components/toolbar/selection-toolbar/actions/BulletedList.tsx

@@ -10,8 +10,6 @@ import { ReactComponent as BulletedListSvg } from '@/assets/icons/bulleted_list.
 
 import ActionButton from './ActionButton';
 
-
-
 export function BulletedList() {
   const { t } = useTranslation();
   const editor = useSlateStatic() as YjsEditor;

src/components/editor/components/toolbar/selection-toolbar/actions/Color.tsx

@@ -14,8 +14,6 @@ import { renderColor } from '@/utils/color';
 
 import ActionButton from './ActionButton';
 
-
-
 function Color() {
   const { t } = useTranslation();
   const { visible: toolbarVisible } = useSelectionToolbarContext();

src/components/editor/components/toolbar/selection-toolbar/actions/NumberedList.tsx

@@ -10,8 +10,6 @@ import { ReactComponent as NumberedListSvg } from '@/assets/icons/numbered_list.
 
 import ActionButton from './ActionButton';
 
-
-
 export function NumberedList() {
   const { t } = useTranslation();
   const editor = useSlateStatic() as YjsEditor;

src/components/editor/components/toolbar/selection-toolbar/actions/Quote.tsx

@@ -10,8 +10,6 @@ import { ReactComponent as QuoteSvg } from '@/assets/icons/quote.svg';
 
 import ActionButton from './ActionButton';
 
-
-
 export function Quote() {
   const { t } = useTranslation();
   const editor = useSlateStatic() as YjsEditor;