fix(editor): keep SQL table names highlighted

This commit is contained in:
zipg
2026-09-13 01:59:21 +08:00
committed by GitHub
parent 579008ffbd
commit 6694e4382e
3 changed files with 21 additions and 4 deletions
@@ -6079,6 +6079,7 @@ onMounted(async () => {
queryEditorLineCommentToken(props.databaseType) === "//" ? shellLineCommentHighlightPlugin : [],
];
const MAX_SQL_SEMANTIC_HIGHLIGHT_WINDOWS = 32;
const MAX_FULL_DOCUMENT_SQL_SEMANTIC_HIGHLIGHT_LENGTH = 128_000;
const SQL_SEMANTIC_HIGHLIGHT_DEBOUNCE_MS = 100;
const refreshSqlSemanticHighlightEffect = StateEffect.define<null>();
buildSqlSemanticHighlightExtension = () => [
@@ -6090,6 +6091,7 @@ onMounted(async () => {
if (this.currentView.dom.isConnected) this.currentView.dispatch({ effects: refreshSqlSemanticHighlightEffect.of(null) });
}, SQL_SEMANTIC_HIGHLIGHT_DEBOUNCE_MS);
private cachedDoc: import("@codemirror/state").Text | null = null;
private prewarmedDoc: import("@codemirror/state").Text | null = null;
private cachedSql = "";
private cachedDialectId = "";
private cachedDatabaseType: DatabaseType | undefined;
@@ -6100,6 +6102,7 @@ onMounted(async () => {
}> = [];
constructor(private currentView: import("@codemirror/view").EditorView) {
this.decorations = Decoration.none;
this.decorations = this.buildDecorations(currentView);
}
@@ -6145,13 +6148,15 @@ onMounted(async () => {
}
const sql = this.cachedSql;
const shouldPrewarmFullDocument = this.cachedWindows.length === 0 && this.prewarmedDoc !== doc && sql.length <= MAX_FULL_DOCUMENT_SQL_SEMANTIC_HIGHLIGHT_LENGTH;
const windows: Array<{
from: number;
to: number;
spans: Array<{ start: number; end: number }>;
}> = [];
const pendingWindows: Array<{ from: number; to: number }> = [];
for (const visibleRange of currentView.visibleRanges) {
const rangesToHighlight = shouldPrewarmFullDocument ? [{ from: 0, to: sql.length }] : currentView.visibleRanges;
for (const visibleRange of rangesToHighlight) {
const cached = this.cachedWindows.find((candidate) => candidate.from <= visibleRange.from && candidate.to >= visibleRange.to);
if (cached) {
if (!windows.includes(cached)) windows.push(cached);
@@ -6171,8 +6176,10 @@ onMounted(async () => {
}
if (pendingWindows.length > 0) {
const tree = ensureSyntaxTree(currentView.state, Math.max(...pendingWindows.map((window) => window.to)), 25);
if (!tree) return Decoration.set([]);
const requestedTo = Math.max(...pendingWindows.map((window) => window.to));
const tree = ensureSyntaxTree(currentView.state, requestedTo, requestedTo === sql.length ? 250 : 25);
if (!tree) return this.decorations;
if (shouldPrewarmFullDocument) this.prewarmedDoc = doc;
for (const window of pendingWindows) {
const entry = {
...window,
@@ -29,6 +29,13 @@ describe("QueryEditor semantic highlighting while scrolling", () => {
expect(queryEditorSource).toContain("refreshSqlSemanticHighlightEffect.of(null)");
});
it("never exposes undefined decorations and prewarms the full document only once per document", () => {
expect(queryEditorSource).toContain("this.decorations = Decoration.none;");
expect(queryEditorSource).toContain('private prewarmedDoc: import("@codemirror/state").Text | null = null;');
expect(queryEditorSource).toContain("const shouldPrewarmFullDocument =");
expect(queryEditorSource).toContain("if (shouldPrewarmFullDocument) this.prewarmedDoc = doc;");
});
it("keeps preview and diagnostics on the shared statement-range cache", () => {
expect(queryEditorSource).toContain("executableStatementRangeCache = executableStatementRangeCacheForDoc");
expect(queryEditorSource).toContain('props.databaseType === "sqlserver" ? undefined : executableStatementRangeCache?.ranges');
+4 -1
View File
@@ -31,7 +31,10 @@ export function createRunStatementButtonDom(ariaLabel = "Execute statement"): HT
export function sqlSemanticHighlightTheme(EditorView: typeof import("@codemirror/view").EditorView): Extension {
return EditorView.theme({
".cm-sql-table-name, .cm-sql-table-name *": {
color: `var(${SQL_TABLE_COLOR_CSS_VAR}) !important`,
// Built-in CodeMirror themes do not define the editor-specific table color
// variable. Keep semantic table names visible there as well, while custom
// and IDE themes continue to use their configured table color.
color: `var(${SQL_TABLE_COLOR_CSS_VAR}, #b4530b) !important`,
},
});
}