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
+          <EditorButton
-              onClick={() => editor.chain().focus().setParagraph().run()}
+            onClick={() => editor.chain().focus().toggleCodeBlock().run()}
-              isActive={editor.isActive('paragraph')}
+            isActive={editor.isActive('codeBlock')}
-              title="Paragraph"
+            title="Code Block"
-              disabled={disabled}
+            disabled={disabled}
-            >
+          >
-              <RiParagraph />
+            <CodeBracketIcon className="size-4" />
-            </EditorButton> */}
+          </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
+          {/* <EditorButton
-            onClick={() => editor.chain().focus().toggleCodeBlock().run()}
+            onClick={() => editor.chain().focus().setParagraph().run()}
-            isActive={editor.isActive('codeBlock')}
+            isActive={editor.isActive('paragraph')}
-            title="Code Block"
+            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>
+          <EditorButton
-        {/* <div className="flex items-start gap-1 px-1">
+            onClick={() => {
-            <EditorButton
+              editor.chain().focus().unsetAllMarks().run()
-              onClick={() => editor.chain().focus().toggleBlockquote().run()}
+              editor.chain().focus().clearNodes().run()
-              isActive={editor.isActive('blockquote')}
+            }}
-              title="Blockquote"
+            title="Clear Format"
-              disabled={disabled}
+            disabled={disabled}
-            >
+          >
-              <RiDoubleQuotesL />
+            <XCircleIcon className="size-4" />
-            </EditorButton>
+          </EditorButton>
-            <EditorButton
+          {/* <EditorButton
               onClick={() => editor.chain().focus().setHorizontalRule().run()}
               title="Horizontal Rule"
               disabled={disabled}
             >
               <RiSeparator />
-            </EditorButton>
+            </EditorButton> */}
-          </div> */}
+        </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">

app/components/ui/combobox.tsx

@@ -96,7 +96,7 @@ export const Combobox = <TFormValues extends Record<string, unknown>>(
                 displayValue={(option: TComboboxOption) => option?.name}
                 onChange={(event) => setQuery(event.target.value)}
                 className={twMerge(
-                  'focus:inheriten h-[42px] w-full rounded-md border border-[#DFDFDF] p-2',
+                  'focus:inheriten h-[42px] w-full rounded-md border border-[#DFDFDF] p-2 placeholder:text-inherit',
                   className,
                 )}
               />

package.json

@@ -21,6 +21,7 @@
     "@react-router/fs-routes": "^7.1.3",
     "@react-router/node": "^7.1.3",
     "@react-router/serve": "^7.1.3",
+    "@sidekickicons/react": "^0.12.0",
     "@tiptap/extension-color": "^2.11.5",
     "@tiptap/extension-highlight": "^2.11.5",
     "@tiptap/extension-image": "^2.11.5",

pnpm-lock.yaml

@@ -29,6 +29,9 @@ importers:
       '@react-router/serve':
         specifier: ^7.1.3
         version: 7.1.3(react-router@7.1.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(typescript@5.7.3)
+      '@sidekickicons/react':
+        specifier: ^0.12.0
+        version: 0.12.0(react@19.0.0)
       '@tiptap/extension-color':
         specifier: ^2.11.5
         version: 2.11.5(@tiptap/core@2.11.5(@tiptap/pm@2.11.5))(@tiptap/extension-text-style@2.11.5(@tiptap/core@2.11.5(@tiptap/pm@2.11.5)))
@@ -1381,6 +1384,11 @@ packages:
   '@rtsao/scc@1.1.0':
     resolution: {integrity: sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==}
 
+  '@sidekickicons/react@0.12.0':
+    resolution: {integrity: sha512-cwl76tv4cSXoqGuPb5WpOCSLhS6Wsm90YeFqlVzR0Gwna+q6BbD414UalLfX/1fhsz+jDIPDs3E94BpZNAiMvA==}
+    peerDependencies:
+      react: '>= 16 || ^19.0.0-rc'
+
   '@snyk/github-codeowners@1.1.0':
     resolution: {integrity: sha512-lGFf08pbkEac0NYgVf4hdANpAgApRjNByLXB+WBip3qj1iendOIyAwP2GKkKbQMNVy2r1xxDf0ssfWscoiC+Vw==}
     engines: {node: '>=8.10'}
@@ -6004,6 +6012,10 @@ snapshots:
 
   '@rtsao/scc@1.1.0': {}
 
+  '@sidekickicons/react@0.12.0(react@19.0.0)':
+    dependencies:
+      react: 19.0.0
+
   '@snyk/github-codeowners@1.1.0':
     dependencies:
       commander: 4.1.1