diff --git a/packages/builder/src/components/common/CodeEditor/index.ts b/packages/builder/src/components/common/CodeEditor/index.ts index 0c974e0bf4..4f0cb76861 100644 --- a/packages/builder/src/components/common/CodeEditor/index.ts +++ b/packages/builder/src/components/common/CodeEditor/index.ts @@ -217,6 +217,25 @@ export const jsAutocomplete = (baseCompletions: BindingCompletion[]) => { return coreCompletion } +export const jsHelperAutocomplete = (baseCompletions: BindingCompletion[]) => { + async function coreCompletion(context: CompletionContext) { + let jsBinding = context.matchBefore(/\bhelpers\./) + let options = baseCompletions || [] + + if (jsBinding) { + return { + from: jsBinding.from + (jsBinding.to - jsBinding.from), + filter: false, + options, + } + } + + return null + } + + return coreCompletion +} + export const buildBindingInfoNode = ( completion: BindingCompletion, binding: any diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte index ffb477012c..6fea2baccf 100644 --- a/packages/builder/src/components/common/bindings/BindingPanel.svelte +++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte @@ -23,6 +23,7 @@ snippetAutoComplete, EditorModes, bindingsToCompletions, + jsHelperAutocomplete, } from "../CodeEditor" import BindingSidePanel from "./BindingSidePanel.svelte" import EvaluationSidePanel from "./EvaluationSidePanel.svelte" @@ -114,10 +115,8 @@ useSnippets?: boolean ) => { const completions: ((_: CompletionContext) => any)[] = [ - jsAutocomplete([ - ...bindingCompletions, - ...getHelperCompletions(EditorModes.JS), - ]), + jsAutocomplete([...bindingCompletions.filter(c => c.label)]), + jsHelperAutocomplete([...getHelperCompletions(EditorModes.JS)]), ] if (useSnippets && snippets) { completions.push(snippetAutoComplete(snippets))