Wrap/Modify Existing Autocompletes

filip · May 13, 2022, 8:31pm

Is there a way to wrap/modify existing code autocompletes?

I want to use @codemirror/lang-sql but modify the format that gets shown. Remove the “type” and add an “apply” to the autocompletes.

Do i need to write my own custom completion and re-implement all the autocompletes, or is there a way to modify the current autocompletes provided by the package?

https://codemirror.net/6/examples/autocompletion/

bilobom · May 23, 2022, 8:29am

hello filip, I created this gist to show how to add/extend autocomplete without overriding the original autocomplete.

gist.github.com

https://gist.github.com/bilobom/8076d2d4ff6bda55fc2a13aa5e803eea

gistfile1.mdx

In this gist we add Custom HTML and JSON autocomplete without overriding the original autocomplete.
Each language support in code mirror exports `nameLanguage` (eg: htmlLanguage) to allow you to add custom autocomplete.

```js
import React, { useMemo } from 'react'
import CodeMirror from '@uiw/react-codemirror'
import { json, jsonLanguage } from '@codemirror/lang-json'
import { html, htmlLanguage } from '@codemirror/lang-html'
import { syntaxTree } from '@codemirror/language'

This file has been truncated. show original

marijn · May 24, 2022, 7:50am

You can wrap the completion source functions with your own function that further processes its output, and then add it to the editor using Language.data. But the SQL package wasn’t exporting completion sources directly, making it hard to get hold of the function you’d want to wrap. Version 0.20.1 exports schemaCompletionSource, which should help with that.