mirror of
https://github.com/t8y2/dbx.git
synced 2026-10-19 16:16:45 +00:00
fix(editor): keep SQL table names highlighted
This commit is contained in:
@@ -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,
|
||||
|
||||
+7
@@ -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');
|
||||
|
||||
@@ -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`,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user