PR Feedback updates

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;
+    padding: 4px 6px;
-    margin-left: 2px;
-    /* font-weight: 600; */
   }
 </style>

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,
     },
   })
 }

packages/builder/src/components/common/bindings/BindingPanel.svelte

@@ -195,10 +195,11 @@
                   completions={[
                     hbAutocomplete([
                       ...bindingCompletions,
-                      ...getHelperCompletions(),
+                      ...getHelperCompletions(editorMode),
                     ]),
                   ]}
                   placeholder=""
+                  height="100%"
                 />
               </div>
               <div class="binding-footer">
@@ -292,12 +293,13 @@
                     completions={[
                       jsAutocomplete([
                         ...bindingCompletions,
-                        ...getHelperCompletions(),
+                        ...getHelperCompletions(editorMode),
                       ]),
                     ]}
                     mode={EditorModes.JS}
                     bind:getCaretPosition
                     bind:insertAtPos
+                    height="100%"
                   />
                 </div>
                 <div class="binding-footer">
@@ -349,6 +351,7 @@
           </Button>
           <Button
             cta
+            disabled={!valid}
             on:click={() => {
               bindingDrawerActions.save()
             }}
@@ -419,12 +422,11 @@
     width: 100%;
     display: flex;
     justify-content: space-between;
-    margin-top: var(--spacing-m);
   }
   .main-content {
     display: grid;
     grid-template-columns: 1fr;
-    grid-template-rows: 270px;
+    grid-template-rows: 315px;
   }
   .main-content.binding-panel {
     grid-template-columns: 1fr 320px;
@@ -436,11 +438,14 @@
   }
   .editor {
     padding: var(--spacing-xl);
-    padding-bottom: 0px;
     min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-xl);
   }
   .overlay-wrap {
     position: relative;
+    flex: 1;
   }
   .mode-overlay {
     position: absolute;
@@ -469,4 +474,9 @@
     display: flex;
     gap: var(--spacing-l);
   }
+
+  .binding-drawer :global(.code-editor),
+  .binding-drawer :global(.code-editor > div) {
+    height: 100%;
+  }
 </style>