fix(codemirror): 编辑器未撑满容器导致上下背景割裂

现象:编辑器「有行号的上半部分」与「空白下半部分」背景色不一致。

根因:CodeMirror core 的 base theme 给 `.cm-editor`(&)只设了
position: relative + display: flex,没有 height。编辑器默认只占
内容高度(几行 ≈ 60px),不填满父容器。容器 div 设了 min-height:
280px,但 .cm-editor 不会自动撑到 280px——剩余空间透出容器的
paper-entry(mantle #e6e9ef) 背景,与 .cm-editor 的 base(#eff1f5)
形成「上半 base / 下半 mantle」的上下色差。

修复:themes.ts 的覆盖里加 `& { height: 100% }`,让 .cm-editor
撑满父容器。配合容器已有的 min-height: 280px,编辑器完整填充,
背景统一为 base 色,上下割裂消失。
This commit is contained in:
xfy 2026-07-06 00:06:00 +08:00
parent 64907401a0
commit 3c10f72444

View File

@ -7,17 +7,20 @@ import type { Extension } from '@codemirror/state';
export type ThemeName = 'light' | 'dark';
/**
* CodeMirror core base theme `.cm-gutters`
* CodeMirror core base theme
*
* CodeMirror core base theme `&light .cm-gutters` / `&dark .cm-gutters`
* `.cm-editor.cm-light .cm-gutters`/
* light `#f5f5f5`dark `#333338` catppuccin `.cm-gutters`
* contentcatppuccin base
* 1. `.cm-gutters` core `&light .cm-gutters``#f5f5f5`/ `&dark`
* `#333338` catppuccin `.cm-gutters`catppuccin base
* `!important` editor base
*
* `!important` gutter 使 `.cm-editor` base
*
* 2. `.cm-editor` core `&` height
*
* `& { height: 100% }`
*/
const gutterBackgroundOverride: Extension = EditorView.theme({
'&': {
height: '100%',
},
'.cm-gutters': {
backgroundColor: 'transparent !important',
},