refactor: clean up global styles and enhance list styling in rich text editor

Author: JOYCEQL

src/app/globals.css

@@ -217,117 +217,50 @@
   animation-delay: 4s;
 }
 
-/* List styles */
-ul,
-ol {
-  list-style: none;
-  margin: 0;
-
-  li p {
-    display: inline;
-  }
-}
-ol {
-  list-style-type: none;
-  counter-reset: list-0 list-1 list-2 list-3 list-4;
-  margin: 0;
-}
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-}
-
-h1,
-h2 {
-}
-
-h1 {
-  font-size: 1.4rem;
-}
-
-h2 {
-  font-size: 1.2rem;
-}
-
-h3 {
-  font-size: 1.1rem;
-}
-
-h4,
-h5,
-h6 {
-  font-size: 1rem;
-}
-
-code {
-  background-color: rgba(27, 31, 35, 0.05);
-  border-radius: 0.4rem;
-  color: black;
-  font-size: 0.85rem;
-  padding: 0.25em 0.3em;
-}
-
-pre {
-  background: black;
-  border-radius: 0.5rem;
-  color: white;
-  font-family: "JetBrainsMono", monospace;
-  margin: 1.5rem 0;
-  padding: 0.75rem 1rem;
-
-  code {
-    background: none;
-    color: inherit;
-    font-size: 0.8rem;
-    padding: 0;
-  }
-}
-
-blockquote {
-  border-left: 3px solid gray;
-  margin: 1.5rem 0;
-  padding-left: 1rem;
-}
-
-hr {
-  border: none;
-  border-top: 1px solid gray;
-  margin: 2rem 0;
-}
-
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }
 
-.custom-list,
+/* .custom-list,
 .custom-list-ordered {
   list-style-type: none;
 }
 
 .custom-list li::marker,
 .custom-list-ordered li::marker {
   display: none;
-}
+} */
 
-.custom-list li::before {
+/* .custom-list li::before {
   content: "•";
-  /* width: 4px;
-  height: 4px;
-  border-radius: 50%;
-  background: #000;
-  vertical-align: middle; */
   display: inline-block;
   margin-right: 10px;
-}
+} */
 
-.custom-list-ordered li::before {
+/* .custom-list-ordered li::before {
   content: counter(list-0, decimal) ". ";
   counter-increment: list-0;
   display: inline-block;
   margin-right: 5px;
+} */
+
+.custom-list {
+  list-style-type: disc;
+  padding: 0 1rem;
+}
+
+.custom-list li p {
+  margin-top: 0.25em;
+  margin-bottom: 0.25em;
+}
+
+.custom-list-ordered {
+  list-style-type: decimal;
+  padding: 0 1rem;
+}
+
+.custom-list-ordered li p {
+  margin-top: 0.25em;
 }

src/app/layout.tsx

@@ -17,9 +17,9 @@ export const metadata: Metadata = {
       follow: true,
       "max-video-preview": -1,
       "max-image-preview": "large",
-      "max-snippet": -1
-    }
-  }
+      "max-snippet": -1,
+    },
+  },
 };
 
 export default function RootLayout({ children }: Props) {

src/components/shared/rich-editor/RichEditor.tsx

@@ -37,6 +37,9 @@ import { cn } from "@/lib/utils";
 import ListItem from "@tiptap/extension-list-item";
 import BulletList from "@tiptap/extension-bullet-list";
 import OrderedList from "@tiptap/extension-ordered-list";
+
+import "@/styles/tiptap.scss";
+
 interface RichTextEditorProps {
   content?: string;
   onChange: (content: string) => void;

src/styles/tiptap.scss

@@ -1,19 +1,10 @@
-/* Basic editor styles */
 .tiptap {
   min-height: 300px;
-  border: 1px solid #d1d5db;
-  padding: 2px;
   border-radius: 0 0 4px 4px;
-  :first-child {
-    margin-top: 0;
-  }
-
-  /* List styles */
   ul,
   ol {
     list-style-type: disc;
     padding: 0 1rem;
-    margin: 1.25rem 1rem 1.25rem 0.4rem;
 
     li p {
       margin-top: 0.25em;
@@ -22,8 +13,7 @@
   }
   ol {
     list-style-type: decimal;
-    padding: 0 1rem;
-    margin: 1.25rem 1rem 1.25rem 0.4rem;
+    padding: 1rem;
 
     li p {
       margin-top: 0.25em;
@@ -66,7 +56,6 @@
     font-size: 1rem;
   }
 
-  /* Code and preformatted text styles */
   code {
     background-color: rgba(27, 31, 35, 0.05);
     border-radius: 0.4rem;