fix: style

Author: hunghg255

src/extensions/Color/components/RichTextColor.tsx

@@ -40,29 +40,26 @@ export function RichTextColor() {
   }
 
   return (
-    <div className="richtext-flex richtext-h-[32px] richtext-items-center">
-
-      <ColorPicker
-        colors={colors}
+    <ColorPicker
+      colors={colors}
+      disabled={disabled}
+      onChange={onChange}
+      value={selectedColor}
+    >
+      <ActionButton
         disabled={disabled}
-        onChange={onChange}
-        value={selectedColor}
+        tooltip={tooltip}
+      // tooltipOptions={tooltipOptions}
       >
-        <ActionButton
-          disabled={disabled}
-          tooltip={tooltip}
-        // tooltipOptions={tooltipOptions}
-        >
-          <span className="richtext-flex richtext-items-center richtext-justify-center richtext-gap-[4px] richtext-text-sm">
-            <IconColorFill fill={dataState} />
+        <span className="richtext-flex richtext-items-center richtext-justify-center richtext-gap-[4px] richtext-text-sm">
+          <IconColorFill fill={dataState} />
 
-            <IconComponent className="!richtext-h-3 !richtext-w-3 richtext-text-zinc-500"
-              name="MenuDown"
-            />
+          <IconComponent className="!richtext-h-3 !richtext-w-3 richtext-text-zinc-500"
+            name="MenuDown"
+          />
 
-          </span>
-        </ActionButton>
-      </ColorPicker>
-    </div>
+        </span>
+      </ActionButton>
+    </ColorPicker>
   );
 }

src/extensions/Highlight/components/RichTextHighlight.tsx

@@ -37,30 +37,28 @@ export function RichTextHighlight() {
   }
 
   return (
-    <div className="richtext-flex richtext-h-[32px] richtext-items-center">
-      <ColorPicker
-        colors={colors}
+    <ColorPicker
+      colors={colors}
+      disabled={editorDisabled}
+      highlight
+      onChange={onChange}
+      value={selectedColor}
+    >
+      <ActionButton
         disabled={editorDisabled}
-        highlight
-        onChange={onChange}
-        value={selectedColor}
+        tooltip={tooltip}
+        // tooltipOptions={tooltipOptions}
+        shortcutKeys={shortcutKeys}
       >
-        <ActionButton
-          disabled={editorDisabled}
-          tooltip={tooltip}
-          // tooltipOptions={tooltipOptions}
-          shortcutKeys={shortcutKeys}
-        >
-          <span className="richtext-flex richtext-items-center richtext-justify-center richtext-gap-[4px] richtext-text-sm">
-            <IconHighlightFill fill={selectedColor} />
+        <span className="richtext-flex richtext-items-center richtext-justify-center richtext-gap-[4px] richtext-text-sm">
+          <IconHighlightFill fill={selectedColor} />
 
-               <IconComponent className="!richtext-h-3 !richtext-w-3 richtext-text-zinc-500"
-            name="MenuDown"
-               />
-          </span>
+              <IconComponent className="!richtext-h-3 !richtext-w-3 richtext-text-zinc-500"
+          name="MenuDown"
+              />
+        </span>
 
-        </ActionButton>
-      </ColorPicker>
-    </div>
+      </ActionButton>
+    </ColorPicker>
   );
 }

src/extensions/ImportWord/components/RichTextImportWord.tsx

@@ -129,7 +129,7 @@ export function RichTextImportWord() {
   }
 
   return (
-    <div>
+    <>
       <ActionButton action={triggerFileInput}
         disabled={editorDisabled}
         icon={icon}
@@ -147,6 +147,6 @@ export function RichTextImportWord() {
           display: 'none',
         }}
       />
-    </div>
+    </>
   );
 }