From 985c7eb56e35780acf104b8493fe5dd88db399da Mon Sep 17 00:00:00 2001 From: Dean Date: Wed, 31 May 2023 11:26:03 +0100 Subject: [PATCH] PR Feedback updates --- .../common/CodeEditor/CodeEditor.svelte | 15 +++++----- .../src/components/common/CodeEditor/index.js | 30 ++++++++++++++----- .../common/bindings/BindingPanel.svelte | 20 +++++++++---- 3 files changed, 46 insertions(+), 19 deletions(-) diff --git a/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte b/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte index f215bac4de..7be05ab54e 100644 --- a/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte +++ b/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte @@ -77,7 +77,7 @@ // For handlebars only. const bindStyle = new MatchDecorator({ - regexp: /{{[."#\-\w\s]*}}/g, + regexp: /{{[."#\-\w\s\]\[]*}}/g, decoration: () => { return Decoration.mark({ tag: "span", @@ -133,7 +133,7 @@ highlightSpecialChars(), autocompletion({ override: [...completions], - closeOnBlur: false, + closeOnBlur: true, icons: false, optionClass: () => "autocomplete-option", }), @@ -148,7 +148,7 @@ keymap.of(buildKeymap()), themeConfig.of([ getDefaultTheme({ - height, + height: editorHeight, resize, dark: isDark, }), @@ -181,6 +181,7 @@ }, { scrollIntoView: true, + userEvent: "input.type", } ) view.dispatch(tr) @@ -213,6 +214,8 @@ }) } + $: editorHeight = typeof height === "number" ? `${height}px` : height + // Init when all elements are ready $: if (mounted && !isEditorInitialised) { isEditorInitialised = true @@ -229,7 +232,7 @@ editor.dispatch({ effects: themeConfig.reconfigure([ getDefaultTheme({ - height, + height: editorHeight, resize, dark: isDark, }), @@ -279,8 +282,6 @@ .code-editor :global(.autocomplete-option .cm-completionDetail) { background-color: var(--spectrum-global-color-gray-200); border-radius: var(--border-radius-s); - padding: 2px 4px; - margin-left: 2px; - /* font-weight: 600; */ + padding: 4px 6px; } diff --git a/packages/builder/src/components/common/CodeEditor/index.js b/packages/builder/src/components/common/CodeEditor/index.js index 569faf14e1..8815b1aec2 100644 --- a/packages/builder/src/components/common/CodeEditor/index.js +++ b/packages/builder/src/components/common/CodeEditor/index.js @@ -35,7 +35,7 @@ export const getDefaultTheme = opts => { borderLeftColor: "var(--spectrum-alias-text-color)", }, "&": { - height: height ? `${height}px` : "", + height: height ? `${height}` : "", lineHeight: "1.3", border: "var(--spectrum-alias-border-size-thin) solid var(--spectrum-alias-border-color)", @@ -49,6 +49,7 @@ export const getDefaultTheme = opts => { "& .cm-tooltip.cm-tooltip-autocomplete > ul": { fontFamily: "var(--spectrum-alias-body-text-font-family, var(--spectrum-global-font-family-base))", + maxHeight: "16em", }, "& .cm-placeholder": { color: "var(--spectrum-alias-text-color)", @@ -62,6 +63,7 @@ export const getDefaultTheme = opts => { "& .cm-completionDetail": { fontStyle: "unset", textTransform: "uppercase", + fontSize: "10px", }, "& .info-bubble": { fontSize: "var(--font-size-s)", @@ -145,7 +147,7 @@ export const buildSectionHeader = (type, sectionName, icon, rank) => { } } -export const helpersToCompletion = helpers => { +export const helpersToCompletion = (helpers, mode) => { const { type, name: sectionName, icon } = SECTIONS.HB_HELPER const helperSection = buildSectionHeader(type, sectionName, icon, 99) @@ -159,16 +161,19 @@ export const helpersToCompletion = helpers => { type: "helper", section: helperSection, detail: "FUNCTION", + apply: (view, completion, from, to) => { + insertBinding(view, from, to, key, mode) + }, }) return acc }, []) } -export const getHelperCompletions = () => { +export const getHelperCompletions = mode => { const manifest = getManifest() return Object.keys(manifest).reduce((acc, key) => { acc = acc || [] - return [...acc, ...helpersToCompletion(manifest[key])] + return [...acc, ...helpersToCompletion(manifest[key], mode)] }, []) } @@ -194,7 +199,7 @@ export const hbAutocomplete = baseCompletions => { if (!bindingStart) { return null } - // Accomodate spaces + // Accommodate spaces const match = bindingStart.text.match(/{{[\s]*/) const query = bindingStart.text.replace(match[0], "") let filtered = bindingFilter(options, query) @@ -215,7 +220,7 @@ export const jsAutocomplete = baseCompletions => { let options = baseCompletions || [] if (jsBinding) { - // Accomodate spaces + // Accommodate spaces const match = jsBinding.text.match(/\$\("[\s]*/) const query = jsBinding.text.replace(match[0], "") let filtered = bindingFilter(options, query) @@ -263,6 +268,7 @@ export const hbInsert = (value, from, to, text) => { } else { parsedInsert = ` ${text} ` } + return parsedInsert } @@ -296,6 +302,16 @@ export const insertBinding = (view, from, to, text, mode) => { return } + let bindingClosePattern = mode.name == "javascript" ? /[\s]*"\)/ : /[\s]*}}/ + let sliced = view.state.doc?.toString().slice(to) + + const rightBrace = sliced.match(bindingClosePattern) + let cursorPos = from + parsedInsert.length + + if (rightBrace) { + cursorPos = from + parsedInsert.length + rightBrace[0].length + } + view.dispatch({ changes: { from, @@ -303,7 +319,7 @@ export const insertBinding = (view, from, to, text, mode) => { insert: parsedInsert, }, selection: { - anchor: from + parsedInsert.length, + anchor: cursorPos, }, }) } diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte index 2d51f3ef1f..f74a79c387 100644 --- a/packages/builder/src/components/common/bindings/BindingPanel.svelte +++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte @@ -195,10 +195,11 @@ completions={[ hbAutocomplete([ ...bindingCompletions, - ...getHelperCompletions(), + ...getHelperCompletions(editorMode), ]), ]} placeholder="" + height="100%" />
@@ -292,12 +293,13 @@ completions={[ jsAutocomplete([ ...bindingCompletions, - ...getHelperCompletions(), + ...getHelperCompletions(editorMode), ]), ]} mode={EditorModes.JS} bind:getCaretPosition bind:insertAtPos + height="100%" />
@@ -349,6 +351,7 @@