fix(editor): 修复草稿被默认文本覆盖的数据丢失 bug 与编辑器无法滚动
- 编辑器初始化等待文章和草稿两个查询都返回,此前草稿接口先返回 空内容时会用默认文本初始化并被自动保存覆盖真实草稿 - CodeMirror 容器加 min-h-0(flex 子项默认 min-height:auto 会被 内容撑开),并约束 .cm-editor 高度为 100% 使内部滚动生效 - 修复规则必须放在 @layer 外,否则被 Tailwind 当作未使用样式裁剪
This commit is contained in:
@@ -285,3 +285,9 @@
|
||||
@apply shadow-[0_0_0_3px_rgba(129,140,248,0.2)];
|
||||
}
|
||||
}
|
||||
|
||||
/* CodeMirror 编辑器内部滚动(必须是无层级的普通 CSS,
|
||||
放在 @layer 里会被 Tailwind 当作未使用样式裁剪掉) */
|
||||
.cm-editor {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@@ -234,7 +234,7 @@ export function AdminProfilePage() {
|
||||
theme={theme === 'dark' ? oneDark : 'light'}
|
||||
extensions={[markdown()]}
|
||||
onChange={(value) => setContent(value)}
|
||||
className="flex-1 text-sm"
|
||||
className="flex-1 min-h-0 text-sm"
|
||||
basicSetup={{ lineNumbers: true, highlightActiveLineGutter: true, highlightActiveLine: true, foldGutter: false }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -53,14 +53,16 @@ export function EditorPage() {
|
||||
enabled: isEdit,
|
||||
});
|
||||
|
||||
const { data: draft } = useQuery({
|
||||
const { data: draft, isLoading: draftLoading } = useQuery({
|
||||
queryKey: ['admin-draft', id],
|
||||
queryFn: () => api.getDraft(id!),
|
||||
enabled: isEdit,
|
||||
});
|
||||
|
||||
// 必须等文章和草稿两个查询都返回后再初始化,
|
||||
// 否则会先用默认文本渲染,自动保存随即覆盖掉真实草稿(数据丢失)
|
||||
useEffect(() => {
|
||||
if (!initialized && (post || draft)) {
|
||||
if (!initialized && !isLoading && !draftLoading && (post || draft)) {
|
||||
setTitle(post?.title || '');
|
||||
setSlug(post?.slug || '');
|
||||
setSummary(post?.summary || '');
|
||||
@@ -70,7 +72,7 @@ export function EditorPage() {
|
||||
setContentMd(md);
|
||||
setInitialized(true);
|
||||
}
|
||||
}, [post, draft, initialized]);
|
||||
}, [post, draft, isLoading, draftLoading, initialized]);
|
||||
|
||||
// 自动保存草稿
|
||||
useEffect(() => {
|
||||
@@ -356,7 +358,7 @@ export function EditorPage() {
|
||||
theme={theme === 'dark' ? oneDark : 'light'}
|
||||
extensions={[markdown()]}
|
||||
onChange={(value) => setContentMd(value)}
|
||||
className="flex-1 text-sm"
|
||||
className="flex-1 min-h-0 text-sm"
|
||||
basicSetup={{
|
||||
lineNumbers: true,
|
||||
highlightActiveLineGutter: true,
|
||||
|
||||
Reference in New Issue
Block a user