refactor: remove dark mode functionality from text editor components

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

@@ -21,7 +21,7 @@ export const EditorButton = (properties: TProperties) => {
       onClick={onClick}
       disabled={disabled}
       className={twMerge(
-        'flex h-6 w-8 items-center justify-center rounded-md p-2 hover:bg-[#2E2F7C] hover:text-white disabled:cursor-not-allowed disabled:bg-[#2E2F7C]/50 disabled:text-white disabled:hover:bg-[#2E2F7C]/50',
+        'flex h-6 w-8 cursor-pointer items-center justify-center rounded-md p-2 hover:bg-[#2E2F7C] hover:text-white disabled:cursor-not-allowed disabled:bg-[#2E2F7C]/50 disabled:text-white disabled:hover:bg-[#2E2F7C]/50',
         isActive ? 'bg-[#2E2F7C]/10' : '',
         className,
       )}

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

@@ -15,11 +15,9 @@ import {
   LinkIcon,
   LinkSlashIcon,
   ListBulletIcon,
-  MoonIcon,
   NumberedListIcon,
   PhotoIcon,
   StrikethroughIcon,
-  SunIcon,
   SwatchIcon,
 } from '@heroicons/react/20/solid'
 import type { Editor } from '@tiptap/react'
@@ -41,8 +39,6 @@ type TProperties = {
   editor: Editor | null
   setIsPlainHTML: Dispatch<SetStateAction<boolean>>
   category: string
-  darkMode: boolean
-  setDarkMode: Dispatch<SetStateAction<boolean>>
   disabled?: boolean
 }
 
@@ -51,8 +47,6 @@ export const EditorMenuBar = (properties: TProperties) => {
     editor,
     setIsPlainHTML,
     // category,
-    darkMode,
-    setDarkMode,
     disabled = false,
   } = properties
   // const [isOpenImage, setIsOpenImage] = useState(false)
@@ -114,11 +108,6 @@ export const EditorMenuBar = (properties: TProperties) => {
     }
   }
 
-  const toggleDark = () => {
-    setDarkMode(!darkMode)
-    // localStorage.setItem(editorKey, JSON.stringify(!darkMode))
-  }
-
   return (
     <>
       <div className="flex items-start justify-between gap-4 rounded-[5px_5px_0_0] px-4 py-3">
@@ -384,13 +373,6 @@ export const EditorMenuBar = (properties: TProperties) => {
             >
               <ArrowUturnRightIcon />
             </EditorButton>
-            <EditorButton
-              onClick={() => toggleDark()}
-              title={darkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
-              isActive={true}
-            >
-              {darkMode ? <MoonIcon /> : <SunIcon />}
-            </EditorButton>
           </div>
         </div>
         <div>
@@ -398,7 +380,6 @@ export const EditorMenuBar = (properties: TProperties) => {
             <EditorButton
               onClick={() => setIsPlainHTML(true)}
               title="Switch to Plain Text"
-              isActive={true}
             >
               <DocumentTextIcon />
             </EditorButton>

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

@@ -27,7 +27,6 @@ export const EditorTextArea = (properties: TProperties) => {
           <EditorButton
             onClick={() => setIsPlainHTML(false)}
             title="Switch to Rich Text"
-            isActive={true}
           >
             <CodeBracketSquareIcon />
           </EditorButton>

app/components/text-editor/index.tsx

@@ -53,7 +53,6 @@ export const TextEditor = <TFormValues extends Record<string, unknown>>(
 
   const [isPlainHTML, setIsPlainHTML] = useState(false)
   const [init, setInit] = useState(true)
-  const [darkMode, setDarkMode] = useState(false)
   const generatedId = useId()
 
   const {
@@ -129,16 +128,13 @@ export const TextEditor = <TFormValues extends Record<string, unknown>>(
             category={category}
             editor={editor}
             setIsPlainHTML={setIsPlainHTML}
-            darkMode={darkMode}
-            setDarkMode={setDarkMode}
           />
           <EditorContent
             readOnly={disabled}
             editor={editor}
             id={id ?? generatedId}
             className={twMerge(
-              'prose-invert max-h-96 max-w-none cursor-text overflow-y-auto rounded-[0_0_5px_5px] border border-[#D2D2D2] p-2',
+              'prose prose-headings:my-0 prose-p:my-0 max-h-96 max-w-none cursor-text overflow-y-auto rounded-[0_0_5px_5px] border border-[#D2D2D2] p-2',
-              darkMode ? 'bg-[#00000055]' : '',
               inputClassName,
             )}
             onClick={() => editor?.commands.focus()}