Feat: autocomplete #2144
Feat: autocomplete #2144
Conversation
Includes custom autocompletions for JSDoc tags. Will customize it to instead autocomplete Sprig functions.
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Currently reads the docs, puts it inside an HTMLElements |
There was a problem hiding this comment.
I love the way the completion looks. However it might break if the documentation doc changes.
Now that the Sprig engine is in the sprig repository, it might be better to generate completion from the [exposed engine API].(
sprig/engine/src/base/index.ts
Line 283 in 12e8321
| import { autocompletion } from "@codemirror/autocomplete"; | ||
| import { | ||
| defaultKeymap, | ||
| history, | ||
| historyKeymap, | ||
| indentWithTab, | ||
| insertNewlineAndIndent, | ||
| } from "@codemirror/commands"; | ||
| import { javascript } from "@codemirror/lang-javascript"; | ||
| import { | ||
| bracketMatching, | ||
| defaultHighlightStyle, | ||
| foldGutter, | ||
| foldKeymap, | ||
| indentOnInput, | ||
| indentUnit, | ||
| syntaxHighlighting, | ||
| } from "@codemirror/language"; | ||
| import { lintGutter } from "@codemirror/lint"; | ||
| import type { NormalizedError } from '../state' | ||
| import { | ||
| getSearchQuery, | ||
| highlightSelectionMatches, | ||
| search, | ||
| searchKeymap, | ||
| setSearchQuery, | ||
| } from "@codemirror/search"; | ||
| import { EditorState } from "@codemirror/state"; | ||
| import { | ||
| crosshairCursor, | ||
| drawSelection, | ||
| dropCursor, | ||
| EditorView, | ||
| highlightActiveLine, | ||
| highlightActiveLineGutter, | ||
| highlightSpecialChars, | ||
| keymap, | ||
| lineNumbers, | ||
| rectangularSelection, | ||
| } from "@codemirror/view"; | ||
| import { effect, signal } from "@preact/signals"; | ||
| import { h, render } from "preact"; | ||
| import SearchBox from "../../components/search-box"; | ||
| import type { NormalizedError } from "../state"; | ||
| import { sprigFunctionCompletion } from "./autocomplete"; | ||
| import widgets from "./widgets"; |
There was a problem hiding this comment.
It's generally good to avoid formatting changes in a PR as it makes it hard to read the diff. Can you undo the formatting here?
| const iter = query.value.getCursor(update.state); | ||
| for ( | ||
| let item = iter.next(); | ||
| !item.done; | ||
| item = iter.next() | ||
| ) { | ||
| count++; | ||
| if ( | ||
| item.value.from <= | ||
| update.state.selection.main.from && | ||
| item.value.to >= update.state.selection.main.to | ||
| ) | ||
| index = count; |
There was a problem hiding this comment.
Please undo the formatting changes. It makes it hard to read what has actually changed.
Added autocomplete to the web editor. Uses the default CodeMirror JavaScript autocomplete with some custom completions for Sprig-specific functions. It also includes tooltips that show the documentation for that function imported from the docs.