I spent 2 days trying to apply a few more suggestions using autocomplete system.
My setup is CodeMirror with sql-lang extension, which (as we know) doesnt suggest you column names at particular places, such as WHERE … So im trying to add this manually using autocomplete extension method:
const [ext, setExt] = useState<any>();
useEffect(() => {
setExt(
sql({
dialect: StandardSQL,
upperCaseKeywords: true,
// schema,
})
);
}, [schema]);
const columnCompletion: CompletionSource = useCallback((context: CompletionContext) => {
const whereMatch = context.matchBefore(/WHERE\s+([\w\d_]*)$/);
if (!whereMatch) {
return schemaCompletionSource({ schema })(context);
}
const columnPrefix = whereMatch.text.match(/WHERE\s+([\w\d_]*)$/)?.[1] || "";
const sqlBeforeWhere = context.state.sliceDoc(0, whereMatch.from);
const tableMatch = sqlBeforeWhere.match(/FROM\s+['"]?([\w\d_]+)['"]?/);
const tableName = tableMatch ? tableMatch[1] : null;
if (!tableName) return null;
const columnSuggestions = schema[tableName] || []; // Берём колонки таблицы
console.log('columns ', columnSuggestions
.filter(c => c.startsWith(columnPrefix)) // Фильтруем по уже введённому
.map(c => ({ label: c, type: "variable" })))
return {
from: whereMatch.from,
to: whereMatch.to,
options: columnSuggestions
.filter(c => c.startsWith(columnPrefix)) // Фильтруем по уже введённому
.map(c => ({ label: c, type: "variable", boost: 100 }))
};
}, [schema])
<CodeMirror
value={values?.query}
defaultValue={initialQuery}
onChange={handleChangeQuery}
ref={inputRef}
basicSetup={{
lineNumbers: false,
autocompletion: true,
}}
extensions={[
ext,
ext?.language.data.of({
autocomplete: columnCompletion,
}),
]}
/>
It gives me basic autocomplete and also triggers column completion logic, BUT THERE IS NO HINTS list.
I literally search through the whole forum + official website + stackoverflow + github and there is no solution to such problems. Can you imagine?