xfy/yggdrasil
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修复编辑器暗色主题和列表样式

Browse Source 
- CSS 暗色主题选择器从 [data-theme="dark"] 改为 .dark
- 恢复无序列表圆点（覆盖 Tailwind preflight 重置）
- placeholder 改用 :has() 选择器适配 Tiptap v3

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
xfy 2026-05-26 18:02:52 +08:00
parent f6d60520eb
commit 956b2d7374
2 changed files with 24 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
libs/tiptap-editor/src/style.css
View File

@ -23,9 +23,9 @@
outline: none;
}
/* Placeholder */
.tiptap-editor .ProseMirror p.is-editor-empty:first-child::before {
content: attr(data-placeholder);
/* Placeholder - shown when document has only one empty paragraph */
.tiptap-editor .ProseMirror p:first-child:last-child:has(br.ProseMirror-trailingBreak:only-child)::before {
content: '在此输入内容...';
float: left;
color: #999;
pointer-events: none;
@ -111,8 +111,14 @@
font-style: italic;
}
.tiptap-editor ul,
.tiptap-editor ul {
list-style-type: disc;
margin: 0.6em 0;
padding-left: 2em;
}
.tiptap-editor ol {
list-style-type: decimal;
margin: 0.6em 0;
padding-left: 2em;
}
@ -173,47 +179,47 @@
/* ========== Dark Theme ========== */
[data-theme="dark"] .tiptap-editor {
.dark .tiptap-editor {
color: #dadadb;
}
[data-theme="dark"] .tiptap-editor h1,
[data-theme="dark"] .tiptap-editor h2,
[data-theme="dark"] .tiptap-editor h3,
[data-theme="dark"] .tiptap-editor strong {
.dark .tiptap-editor h1,
.dark .tiptap-editor h2,
.dark .tiptap-editor h3,
.dark .tiptap-editor strong {
color: #f0f0f0;
}
[data-theme="dark"] .tiptap-editor .ProseMirror p.is-editor-empty:first-child::before {
.dark .tiptap-editor .ProseMirror p.is-editor-empty:first-child::before {
color: #666;
}
[data-theme="dark"] .tiptap-editor code {
.dark .tiptap-editor code {
background: #2e2e33;
color: #ff7b72;
}
[data-theme="dark"] .tiptap-editor pre {
.dark .tiptap-editor pre {
background: #2e2e33;
}
[data-theme="dark"] .tiptap-editor pre code {
.dark .tiptap-editor pre code {
color: #dadadb;
}
[data-theme="dark"] .tiptap-editor blockquote {
.dark .tiptap-editor blockquote {
border-left-color: #444;
color: #9b9c9d;
}
[data-theme="dark"] .tiptap-editor hr {
.dark .tiptap-editor hr {
border-top-color: #333;
}
[data-theme="dark"] .tiptap-editor a {
.dark .tiptap-editor a {
color: #58a6ff;
}
[data-theme="dark"] .tiptap-editor .ProseMirror ::selection {
.dark .tiptap-editor .ProseMirror ::selection {
background: #1c4e80;
}

2
public/tiptap/editor.css
View File

@ -1 +1 @@
.tiptap-editor{position:relative;width:100%;height:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:1.75;color:#2c2c2c;outline:none}.tiptap-editor .ProseMirror{width:100%;height:100%;padding:24px 32px;outline:none;overflow-y:auto}.tiptap-editor .ProseMirror-focused{outline:none}.tiptap-editor .ProseMirror p.is-editor-empty:first-child:before{content:attr(data-placeholder);float:left;color:#999;pointer-events:none;height:0}.tiptap-editor h1{font-size:2em;font-weight:700;margin:1.2em 0 .6em;line-height:1.3;color:#1a1a1a}.tiptap-editor h2{font-size:1.5em;font-weight:600;margin:1em 0 .5em;line-height:1.35;color:#1a1a1a}.tiptap-editor h3{font-size:1.25em;font-weight:600;margin:.8em 0 .4em;color:#1a1a1a}.tiptap-editor p{margin:.6em 0}.tiptap-editor p:first-child{margin-top:0}.tiptap-editor strong{font-weight:700;color:#1a1a1a}.tiptap-editor em{font-style:italic}.tiptap-editor s{text-decoration:line-through;opacity:.7}.tiptap-editor code{font-family:SF Mono,Monaco,Cascadia Code,Roboto Mono,Consolas,monospace;font-size:.875em;background:#f3f3f3;padding:.15em .4em;border-radius:3px;color:#d73a49}.tiptap-editor pre{background:#f6f8fa;border-radius:6px;padding:16px;overflow-x:auto;margin:1em 0}.tiptap-editor pre code{background:none;padding:0;color:#24292e;font-size:.85em;line-height:1.6}.tiptap-editor blockquote{border-left:4px solid #dfe2e5;padding-left:16px;margin:1em 0;color:#6a737d;font-style:italic}.tiptap-editor ul,.tiptap-editor ol{margin:.6em 0;padding-left:2em}.tiptap-editor li{margin:.2em 0}.tiptap-editor li>p{margin:.2em 0}.tiptap-editor hr{border:none;border-top:1px solid #e1e4e8;margin:1.5em 0}.tiptap-editor a{color:#0366d6;text-decoration:none}.tiptap-editor a:hover{text-decoration:underline}.tiptap-editor ul[data-type=taskList]{list-style:none;padding-left:0}.tiptap-editor ul[data-type=taskList] li{display:flex;align-items:flex-start;gap:.5em}.tiptap-editor ul[data-type=taskList] li>label{flex-shrink:0;margin-top:.3em}.tiptap-editor ul[data-type=taskList] li>div{flex:1}.tiptap-editor .ProseMirror ::selection{background:#b4d7ff}.tiptap-editor .ProseMirror-focused .ProseMirror-gapcursor{display:none}[data-theme=dark] .tiptap-editor{color:#dadadb}[data-theme=dark] .tiptap-editor h1,[data-theme=dark] .tiptap-editor h2,[data-theme=dark] .tiptap-editor h3,[data-theme=dark] .tiptap-editor strong{color:#f0f0f0}[data-theme=dark] .tiptap-editor .ProseMirror p.is-editor-empty:first-child:before{color:#666}[data-theme=dark] .tiptap-editor code{background:#2e2e33;color:#ff7b72}[data-theme=dark] .tiptap-editor pre{background:#2e2e33}[data-theme=dark] .tiptap-editor pre code{color:#dadadb}[data-theme=dark] .tiptap-editor blockquote{border-left-color:#444;color:#9b9c9d}[data-theme=dark] .tiptap-editor hr{border-top-color:#333}[data-theme=dark] .tiptap-editor a{color:#58a6ff}[data-theme=dark] .tiptap-editor .ProseMirror ::selection{background:#1c4e80}
.tiptap-editor{position:relative;width:100%;height:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:1.75;color:#2c2c2c;outline:none}.tiptap-editor .ProseMirror{width:100%;height:100%;padding:24px 32px;outline:none;overflow-y:auto}.tiptap-editor .ProseMirror-focused{outline:none}.tiptap-editor .ProseMirror p:first-child:last-child:has(br.ProseMirror-trailingBreak:only-child):before{content:"在此输入内容...";float:left;color:#999;pointer-events:none;height:0}.tiptap-editor h1{font-size:2em;font-weight:700;margin:1.2em 0 .6em;line-height:1.3;color:#1a1a1a}.tiptap-editor h2{font-size:1.5em;font-weight:600;margin:1em 0 .5em;line-height:1.35;color:#1a1a1a}.tiptap-editor h3{font-size:1.25em;font-weight:600;margin:.8em 0 .4em;color:#1a1a1a}.tiptap-editor p{margin:.6em 0}.tiptap-editor p:first-child{margin-top:0}.tiptap-editor strong{font-weight:700;color:#1a1a1a}.tiptap-editor em{font-style:italic}.tiptap-editor s{text-decoration:line-through;opacity:.7}.tiptap-editor code{font-family:SF Mono,Monaco,Cascadia Code,Roboto Mono,Consolas,monospace;font-size:.875em;background:#f3f3f3;padding:.15em .4em;border-radius:3px;color:#d73a49}.tiptap-editor pre{background:#f6f8fa;border-radius:6px;padding:16px;overflow-x:auto;margin:1em 0}.tiptap-editor pre code{background:none;padding:0;color:#24292e;font-size:.85em;line-height:1.6}.tiptap-editor blockquote{border-left:4px solid #dfe2e5;padding-left:16px;margin:1em 0;color:#6a737d;font-style:italic}.tiptap-editor ul{list-style-type:disc;margin:.6em 0;padding-left:2em}.tiptap-editor ol{list-style-type:decimal;margin:.6em 0;padding-left:2em}.tiptap-editor li{margin:.2em 0}.tiptap-editor li>p{margin:.2em 0}.tiptap-editor hr{border:none;border-top:1px solid #e1e4e8;margin:1.5em 0}.tiptap-editor a{color:#0366d6;text-decoration:none}.tiptap-editor a:hover{text-decoration:underline}.tiptap-editor ul[data-type=taskList]{list-style:none;padding-left:0}.tiptap-editor ul[data-type=taskList] li{display:flex;align-items:flex-start;gap:.5em}.tiptap-editor ul[data-type=taskList] li>label{flex-shrink:0;margin-top:.3em}.tiptap-editor ul[data-type=taskList] li>div{flex:1}.tiptap-editor .ProseMirror ::selection{background:#b4d7ff}.tiptap-editor .ProseMirror-focused .ProseMirror-gapcursor{display:none}.dark .tiptap-editor{color:#dadadb}.dark .tiptap-editor h1,.dark .tiptap-editor h2,.dark .tiptap-editor h3,.dark .tiptap-editor strong{color:#f0f0f0}.dark .tiptap-editor .ProseMirror p.is-editor-empty:first-child:before{color:#666}.dark .tiptap-editor code{background:#2e2e33;color:#ff7b72}.dark .tiptap-editor pre{background:#2e2e33}.dark .tiptap-editor pre code{color:#dadadb}.dark .tiptap-editor blockquote{border-left-color:#444;color:#9b9c9d}.dark .tiptap-editor hr{border-top-color:#333}.dark .tiptap-editor a{color:#58a6ff}.dark .tiptap-editor .ProseMirror ::selection{background:#1c4e80}