Split field and helpers

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

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([
+      jsAutocomplete([...bindingCompletions.filter(c => c.label)]),
-        ...bindingCompletions,
+      jsHelperAutocomplete([...getHelperCompletions(EditorModes.JS)]),
-        ...getHelperCompletions(EditorModes.JS),
-      ]),
     ]
     if (useSnippets && snippets) {
       completions.push(snippetAutoComplete(snippets))