From 18a05faf6713acf16f84e4f2b9a736d73e8b5690 Mon Sep 17 00:00:00 2001 From: Dean Date: Fri, 14 Jul 2023 14:19:19 +0100 Subject: [PATCH 1/3] Ensure the code editors are in the correct modes --- .../SetupPanel/AutomationBlockSetup.svelte | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte index 823dcc432b..e26052d1fa 100644 --- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte +++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte @@ -33,6 +33,7 @@ import { bindingsToCompletions, jsAutocomplete, + hbAutocomplete, EditorModes, } from "components/common/CodeEditor" import FilterDrawer from "components/design/settings/controls/FilterEditor/FilterDrawer.svelte" @@ -70,7 +71,10 @@ $: queryLimit = tableId?.includes("datasource") ? "∞" : "1000" $: isTrigger = block?.type === "TRIGGER" $: isUpdateRow = stepId === ActionStepID.UPDATE_ROW - + $: codeMode = + stepId === "EXECUTE_BASH" ? EditorModes.Handlebars : EditorModes.JS + $: buildCompletions = + stepId === "EXECUTE_BASH" ? hbAutocomplete : jsAutocomplete /** * TODO - Remove after November 2023 * ******************************* @@ -497,17 +501,21 @@ inputData[key] = e.detail }} completions={[ - jsAutocomplete([ - ...bindingsToCompletions(bindings, EditorModes.JS), + buildCompletions([ + ...bindingsToCompletions(bindings, codeMode), ]), ]} - mode={EditorModes.JS} + mode={codeMode} height={500} />
-
Add available bindings by typing $
+
+ Add available bindings by typing {codeMode == EditorModes.JS ? "$" : "{{"} +
From 8ea6feb7201615cb9c6bea9f1c259b59b3870ed1 Mon Sep 17 00:00:00 2001 From: Dean Date: Mon, 17 Jul 2023 10:21:35 +0100 Subject: [PATCH 2/3] Added autocomplete flag --- .../SetupPanel/AutomationBlockSetup.svelte | 16 +++++----- .../common/CodeEditor/CodeEditor.svelte | 29 ++++++++++++------- 2 files changed, 26 insertions(+), 19 deletions(-) diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte index e26052d1fa..0a5b61869c 100644 --- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte +++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte @@ -32,7 +32,6 @@ import CodeEditor from "components/common/CodeEditor/CodeEditor.svelte" import { bindingsToCompletions, - jsAutocomplete, hbAutocomplete, EditorModes, } from "components/common/CodeEditor" @@ -73,8 +72,12 @@ $: isUpdateRow = stepId === ActionStepID.UPDATE_ROW $: codeMode = stepId === "EXECUTE_BASH" ? EditorModes.Handlebars : EditorModes.JS - $: buildCompletions = - stepId === "EXECUTE_BASH" ? hbAutocomplete : jsAutocomplete + + $: stepCompletions = + codeMode === EditorModes.Handlebars + ? [hbAutocomplete([...bindingsToCompletions(bindings, codeMode)])] + : [] + /** * TODO - Remove after November 2023 * ******************************* @@ -500,12 +503,9 @@ onChange({ detail: e.detail }, key) inputData[key] = e.detail }} - completions={[ - buildCompletions([ - ...bindingsToCompletions(bindings, codeMode), - ]), - ]} + completions={stepCompletions} mode={codeMode} + autocompleteEnabled={codeMode != EditorModes.JS} height={500} />
diff --git a/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte b/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte index dadca85fac..2ce93e42c8 100644 --- a/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte +++ b/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte @@ -48,6 +48,7 @@ export let mode = EditorModes.Handlebars export let value = "" export let placeholder = null + export let autocompleteEnabled = true // Export a function to expose caret position export const getCaretPosition = () => { @@ -131,12 +132,6 @@ syntaxHighlighting(oneDarkHighlightStyle, { fallback: true }), highlightActiveLineGutter(), highlightSpecialChars(), - autocompletion({ - override: [...completions], - closeOnBlur: true, - icons: false, - optionClass: () => "autocomplete-option", - }), EditorView.lineWrapping, EditorView.updateListener.of(v => { const docStr = v.state.doc?.toString() @@ -159,11 +154,16 @@ const buildExtensions = base => { const complete = [...base] - if (mode.name == "javascript") { - complete.push(javascript()) - complete.push(highlightWhitespace()) - complete.push(lineNumbers()) - complete.push(foldGutter()) + + if (autocompleteEnabled) { + complete.push( + autocompletion({ + override: [...completions], + closeOnBlur: true, + icons: false, + optionClass: () => "autocomplete-option", + }) + ) complete.push( EditorView.inputHandler.of((view, from, to, insert) => { if (insert === "$") { @@ -193,6 +193,13 @@ ) } + if (mode.name == "javascript") { + complete.push(javascript()) + complete.push(highlightWhitespace()) + complete.push(lineNumbers()) + complete.push(foldGutter()) + } + if (placeholder) { complete.push(placeholderFn(placeholder)) } From f17043390226b46cfcf47492506c782847dc6095 Mon Sep 17 00:00:00 2001 From: Dean Date: Mon, 17 Jul 2023 11:15:57 +0100 Subject: [PATCH 3/3] Added the binding drawer back in for the javascript step --- .../SetupPanel/AutomationBlockSetup.svelte | 30 ++++++++++++++----- 1 file changed, 23 insertions(+), 7 deletions(-) diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte index 0a5b61869c..cece075860 100644 --- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte +++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte @@ -15,6 +15,7 @@ Icon, Checkbox, DatePicker, + Detail, } from "@budibase/bbui" import CreateWebhookModal from "components/automation/Shared/CreateWebhookModal.svelte" import { automationStore, selectedAutomation } from "builderStore" @@ -55,6 +56,7 @@ let drawer let fillWidth = true let inputData + let codeBindingOpen = false $: filters = lookForFilters(schemaProperties) || [] $: tempFilters = filters @@ -496,6 +498,18 @@ /> {:else if value.customType === "code"} + {#if codeMode == EditorModes.JS} + (codeBindingOpen = !codeBindingOpen)} + quiet + icon={codeBindingOpen ? "ChevronDown" : "ChevronRight"} + > + Bindings + + {#if codeBindingOpen} + 
{JSON.stringify(bindings, null, 2)}
+ {/if} + {/if} { @@ -509,14 +523,16 @@ height={500} />
- -
-
- Add available bindings by typing {codeMode == EditorModes.JS ? "$" : "{{"} + {#if codeMode == EditorModes.Handlebars} + +
+
+ Add available bindings by typing + }} + +
-
+ {/if}
{:else if value.customType === "loopOption"}