feat: update editor menubar icons and add clear format functionality

app/components/text-editor/editor-menubar.tsx

@@ -5,7 +5,6 @@ import {
   Bars3BottomLeftIcon,
   Bars3BottomRightIcon,
   Bars3Icon,
-  Bars4Icon,
   BoldIcon,
   CloudArrowUpIcon,
   CodeBracketIcon,
@@ -21,7 +20,12 @@ import {
   PhotoIcon,
   StrikethroughIcon,
   SwatchIcon,
+  XCircleIcon,
 } from '@heroicons/react/20/solid'
+import {
+  Bars3BottomCenterIcon,
+  QuotationMarkIcon,
+} from '@sidekickicons/react/24/solid'
 import type { Editor } from '@tiptap/react'
 import {
   type SetStateAction,
@@ -202,7 +206,7 @@ export const EditorMenuBar = (properties: TProperties) => {
             isActive={editor.isActive({ textAlign: 'center' })}
             title="Align Center"
           >
-            <Bars3Icon className="size-4" />
+            <Bars3BottomCenterIcon className="size-4" />
           </EditorButton>
           <EditorButton
             onClick={() => editor.chain().focus().setTextAlign('right').run()}
@@ -224,7 +228,7 @@ export const EditorMenuBar = (properties: TProperties) => {
             isActive={editor.isActive({ textAlign: 'justify' })}
             title="Align Justify"
           >
-            <Bars4Icon className="size-4" />
+            <Bars3Icon className="size-4" />
           </EditorButton>
         </div>
         <div className="flex max-w-[150px] flex-wrap items-start gap-1 px-1">
@@ -258,14 +262,14 @@ export const EditorMenuBar = (properties: TProperties) => {
           >
             <H3Icon className="size-4" />
           </EditorButton>
-          {/* <EditorButton
-              onClick={() => editor.chain().focus().setParagraph().run()}
-              isActive={editor.isActive('paragraph')}
-              title="Paragraph"
-              disabled={disabled}
-            >
-              <RiParagraph />
-            </EditorButton> */}
+          <EditorButton
+            onClick={() => editor.chain().focus().toggleCodeBlock().run()}
+            isActive={editor.isActive('codeBlock')}
+            title="Code Block"
+            disabled={disabled}
+          >
+            <CodeBracketIcon className="size-4" />
+          </EditorButton>
           <EditorButton
             onClick={() => editor.chain().focus().toggleBulletList().run()}
             isActive={editor.isActive('bulletList')}
@@ -282,32 +286,40 @@ export const EditorMenuBar = (properties: TProperties) => {
           >
             <NumberedListIcon className="size-4" />
           </EditorButton>
-          <EditorButton
-            onClick={() => editor.chain().focus().toggleCodeBlock().run()}
-            isActive={editor.isActive('codeBlock')}
-            title="Code Block"
+          {/* <EditorButton
+            onClick={() => editor.chain().focus().setParagraph().run()}
+            isActive={editor.isActive('paragraph')}
+            title="Paragraph"
             disabled={disabled}
           >
-            <CodeBracketIcon className="size-4" />
+            <PilcrowIcon className="size-4" />
+          </EditorButton> */}
+          <EditorButton
+            onClick={() => editor.chain().focus().toggleBlockquote().run()}
+            isActive={editor.isActive('blockquote')}
+            title="Blockquote"
+            disabled={disabled}
+          >
+            <QuotationMarkIcon className="size-4" />
           </EditorButton>
-        </div>
-        {/* <div className="flex items-start gap-1 px-1">
-            <EditorButton
-              onClick={() => editor.chain().focus().toggleBlockquote().run()}
-              isActive={editor.isActive('blockquote')}
-              title="Blockquote"
-              disabled={disabled}
-            >
-              <RiDoubleQuotesL />
-            </EditorButton>
-            <EditorButton
+          <EditorButton
+            onClick={() => {
+              editor.chain().focus().unsetAllMarks().run()
+              editor.chain().focus().clearNodes().run()
+            }}
+            title="Clear Format"
+            disabled={disabled}
+          >
+            <XCircleIcon className="size-4" />
+          </EditorButton>
+          {/* <EditorButton
               onClick={() => editor.chain().focus().setHorizontalRule().run()}
               title="Horizontal Rule"
               disabled={disabled}
             >
               <RiSeparator />
-            </EditorButton>
-          </div> */}
+            </EditorButton> */}
+        </div>
         {/* <div className="flex items-start gap-1 px-1">
             <EditorButton
               onClick={() => editor.chain().focus().setHardBreak().run()}
@@ -316,16 +328,6 @@ export const EditorMenuBar = (properties: TProperties) => {
             >
               <RiTextWrap />
             </EditorButton>
-            <EditorButton
-              onClick={() => {
-                editor.chain().focus().unsetAllMarks().run()
-                editor.chain().focus().clearNodes().run()
-              }}
-              title="Clear Format"
-              disabled={disabled}
-            >
-              <RiFormatClear />
-            </EditorButton>
           </div> */}
         <div className="flex items-start gap-1 px-1">
           <div className="relative">