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

This commit is contained in:
JOYCEQL
2025-03-09 01:38:54 +08:00
committed by qingchen
parent b94e22fd45
commit 46bc8458e5
4 changed files with 31 additions and 106 deletions
+24 -91
View File
@@ -217,94 +217,13 @@
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;
}
@@ -312,22 +231,36 @@ hr {
.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;
}
+3 -3
View File
@@ -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) {
@@ -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;
+1 -12
View File
@@ -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;