fix(editor): 修复 CodeMirror 折叠图标垂直不居中
折叠三角 (▾/▸) 在每行行框里偏低，根因有二：
1. 图标字符本身基线不稳。codemirror 包的 basicSetup 调 foldGutter() 用默认
openText "⌄" (U+2304「下花括号」)，这是个基线/字形表现不稳定的符号字符，
在多数 mono 字体里墨迹落在字符框底部，三角明显偏低。本地内联一份 basicSetup
（CodeMirror 官方推荐的定制方式），改用几何形状块字符 ▾ (U+25BE) /
▸ (U+25B8)，字形本身在字符框内居中；同时把 foldGutter() 展开后丢弃的
@codemirror/{lint,search} 显式声明为依赖。
2. core 没给图标 <span> 设 vertical-align/display。baseTheme 只给
.cm-foldGutter span 设了 padding/cursor，图标默认按基线贴在格子底部。
themes.ts 加一条 flex 居中规则，把 .cm-foldGutter .cm-gutterElement 变成
flex 容器，三角稳稳落在行框中央。
文章页 CodeRunner 与后台 SQL 控制台共用同一份 editor.js，一处修复两处生效。
This commit is contained in:
parent
7d0922c0f9
commit
533f12e851
@ -18,6 +18,8 @@
|
||||
"@codemirror/lang-python": "^6.2.0",
|
||||
"@codemirror/lang-sql": "^6.10.0",
|
||||
"@codemirror/language": "^6.11.0",
|
||||
"@codemirror/lint": "^6.9.7",
|
||||
"@codemirror/search": "^6.7.1",
|
||||
"@codemirror/state": "^6.5.0",
|
||||
"@codemirror/view": "^6.36.0",
|
||||
"@replit/codemirror-vim": "^6.3.0",
|
||||
|
||||
@ -1,12 +1,87 @@
|
||||
import {
|
||||
autocompletion,
|
||||
closeBrackets,
|
||||
closeBracketsKeymap,
|
||||
completionKeymap,
|
||||
} from '@codemirror/autocomplete';
|
||||
import { defaultKeymap, history, historyKeymap } from '@codemirror/commands';
|
||||
import { javascript } from '@codemirror/lang-javascript';
|
||||
import { python } from '@codemirror/lang-python';
|
||||
import { PostgreSQL, sql } from '@codemirror/lang-sql';
|
||||
import {
|
||||
bracketMatching,
|
||||
codeFolding,
|
||||
defaultHighlightStyle,
|
||||
foldGutter,
|
||||
foldKeymap,
|
||||
indentOnInput,
|
||||
syntaxHighlighting,
|
||||
} from '@codemirror/language';
|
||||
import { lintKeymap } from '@codemirror/lint';
|
||||
import { highlightSelectionMatches, searchKeymap } from '@codemirror/search';
|
||||
import { Compartment, EditorState, type Extension, Prec } from '@codemirror/state';
|
||||
import { EditorView, keymap } from '@codemirror/view';
|
||||
import {
|
||||
crosshairCursor,
|
||||
drawSelection,
|
||||
dropCursor,
|
||||
EditorView,
|
||||
highlightActiveLine,
|
||||
highlightActiveLineGutter,
|
||||
highlightSpecialChars,
|
||||
keymap,
|
||||
lineNumbers,
|
||||
rectangularSelection,
|
||||
} from '@codemirror/view';
|
||||
import { vim } from '@replit/codemirror-vim';
|
||||
import { basicSetup } from 'codemirror';
|
||||
import { type ThemeName, themeExtension } from './themes';
|
||||
|
||||
/**
|
||||
* 本地版 basicSetup：与 `codemirror` 包同名的便利数组成员完全一致，唯一差别是
|
||||
* 折叠图标换成几何三角形字符。
|
||||
*
|
||||
* 原因：`codemirror` 的 basicSetup 调 `foldGutter()` 用默认 `openText: "⌄"`
|
||||
* (U+2304 DOWNWARDS HARPOON WITH BARB… 实为「下花括号」)，这是个基线/字形表现
|
||||
* 不稳定的符号字符——在多数 mono 字体里墨迹落在字符框底部，导致折叠三角在行框里
|
||||
* 明显偏低。改成 `▾` (U+25BE BLACK DOWN-POINTING SMALL TRIANGLE) / `▸`
|
||||
* (U+25B8 BLACK RIGHT-POINTING SMALL TRIANGLE) 两个「几何形状」块字符，字形稳定
|
||||
* 居中，配合 themes.ts 的 flex 居中后，三角精准落在每行行框中央。
|
||||
*
|
||||
* 按 CodeMirror 官方建议：basicSetup 「does not allow customization」，需要定制时
|
||||
* 「copy this package's source ... and adjust as desired」，此处即采用此法。
|
||||
*/
|
||||
const basicSetup: Extension[] = [
|
||||
lineNumbers(),
|
||||
highlightActiveLineGutter(),
|
||||
highlightSpecialChars(),
|
||||
history(),
|
||||
foldGutter({
|
||||
openText: '▾',
|
||||
closedText: '▸',
|
||||
}),
|
||||
drawSelection(),
|
||||
dropCursor(),
|
||||
EditorState.allowMultipleSelections.of(true),
|
||||
indentOnInput(),
|
||||
syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
|
||||
bracketMatching(),
|
||||
closeBrackets(),
|
||||
autocompletion(),
|
||||
rectangularSelection(),
|
||||
crosshairCursor(),
|
||||
highlightActiveLine(),
|
||||
highlightSelectionMatches(),
|
||||
keymap.of([
|
||||
...closeBracketsKeymap,
|
||||
...defaultKeymap,
|
||||
...searchKeymap,
|
||||
...historyKeymap,
|
||||
...foldKeymap,
|
||||
...completionKeymap,
|
||||
...lintKeymap,
|
||||
]),
|
||||
codeFolding(),
|
||||
];
|
||||
|
||||
/** SQL 补全用 schema 数据（由 Rust 侧从实时库拉取注入）。 */
|
||||
export interface SqlSchema {
|
||||
tables: { name: string; columns: string[] }[];
|
||||
|
||||
@ -28,8 +28,29 @@ const gutterBackgroundOverride: Extension = EditorView.theme({
|
||||
},
|
||||
});
|
||||
|
||||
/**
|
||||
* 修复 CodeMirror 折叠图标（fold gutter 的 ▾ / ▸）垂直不居中。
|
||||
*
|
||||
* core 的 baseTheme（@codemirror/language）只给 `.cm-foldGutter span` 设了
|
||||
* `padding`/`cursor`，没设 `display`/`vertical-align`。折叠图标是个 <span>，
|
||||
* 装在 `.cm-gutterElement` 里（高度被 core 固定为行高的格子），默认按基线对齐，
|
||||
* 图标贴在格子底部而非中央。
|
||||
*
|
||||
* editor.ts 已把图标字符从基线不稳的 `⌄`(U+2304)/`›`(U+203A) 换成几何三角形
|
||||
* `▾`(U+25BE)/`▸`(U+25B8)——字形本身在字符框内居中；再配合这里的 flex 居中，
|
||||
* 三角稳稳落在行框中央。只作用到 `.cm-foldGutter`，不影响行号列（行号文本仍按
|
||||
* 基线，正常可读）。
|
||||
*/
|
||||
const foldGutterCenterOverride: Extension = EditorView.theme({
|
||||
'.cm-foldGutter .cm-gutterElement': {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
});
|
||||
|
||||
/** 根据主题名返回对应的 CodeMirror 主题 Extension。 */
|
||||
export function themeExtension(name: ThemeName): Extension {
|
||||
const catppuccin = name === 'light' ? catppuccinLatte : catppuccinMocha;
|
||||
return [catppuccin, gutterBackgroundOverride];
|
||||
return [catppuccin, gutterBackgroundOverride, foldGutterCenterOverride];
|
||||
}
|
||||
|
||||
6
libs/pnpm-lock.yaml
generated
6
libs/pnpm-lock.yaml
generated
@ -47,6 +47,12 @@ importers:
|
||||
'@codemirror/language':
|
||||
specifier: ^6.11.0
|
||||
version: 6.12.4
|
||||
'@codemirror/lint':
|
||||
specifier: ^6.9.7
|
||||
version: 6.9.7
|
||||
'@codemirror/search':
|
||||
specifier: ^6.7.1
|
||||
version: 6.7.1
|
||||
'@codemirror/state':
|
||||
specifier: ^6.5.0
|
||||
version: 6.7.0
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user