Add an option to allow jsonpath/xpath to return as array (#297)

Co-authored-by: Gregory Schier <gschier1990@gmail.com>

src-web/components/core/Dropdown.tsx

@@ -655,7 +655,7 @@ function MenuItem({ className, focused, onFocus, item, onSelect, ...props }: Men
         className,
         'h-xs', // More compact
         'min-w-[8rem] outline-none px-2 mx-1.5 flex whitespace-nowrap',
-        'focus:bg-surface-highlight focus:text rounded',
+        'focus:bg-surface-highlight focus:text rounded focus:outline-none focus-visible:outline-1',
         item.color === 'danger' && '!text-danger',
         item.color === 'primary' && '!text-primary',
         item.color === 'success' && '!text-success',

src-web/components/core/Editor/Editor.css

@@ -78,9 +78,19 @@
         @apply cursor-default;
       }
 
+    }
+
+    .cm-gutter-lint {
+      @apply w-auto !important;
+
+      .cm-gutterElement {
+        @apply px-0;
+      }
+
       .cm-lint-marker {
         @apply cursor-default opacity-80 hover:opacity-100 transition-opacity;
         @apply rounded-full w-[0.9em] h-[0.9em];
+
         content: '';
 
         &.cm-lint-marker-error {

src-web/components/core/Editor/Editor.tsx

@@ -290,6 +290,8 @@ export function Editor({
         showDialog({
           id: 'template-function-' + Math.random(), // Allow multiple at once
           size: 'md',
+          className: 'h-[90vh]',
+          noPadding: true,
           title: <InlineCode>{fn.name}(…)</InlineCode>,
           description: fn.description,
           render: ({ hide }) => {
@@ -354,6 +356,7 @@ export function Editor({
     const ext = getLanguageExtension({
       useTemplating,
       language,
+      hideGutter,
       environmentVariables,
       autocomplete,
       completionOptions,
@@ -374,6 +377,7 @@ export function Editor({
     completionOptions,
     useTemplating,
     graphQLSchema,
+    hideGutter,
   ]);
 
   // Initialize the editor when ref mounts

src-web/components/core/Editor/extensions.ts

@@ -105,6 +105,7 @@ export function getLanguageExtension({
   language = 'text',
   environmentVariables,
   autocomplete,
+  hideGutter,
   onClickVariable,
   onClickMissingVariable,
   onClickPathParameter,
@@ -118,7 +119,7 @@ export function getLanguageExtension({
   onClickPathParameter: (name: string) => void;
   completionOptions: TwigCompletionOption[];
   graphQLSchema: GraphQLSchema | null;
-} & Pick<EditorProps, 'language' | 'autocomplete'>) {
+} & Pick<EditorProps, 'language' | 'autocomplete' | 'hideGutter'>) {
   const extraExtensions: Extension[] = [];
 
   if (language === 'url') {
@@ -155,7 +156,10 @@ export function getLanguageExtension({
   }
 
   if (language === 'json') {
-    extraExtensions.push(linter(jsonParseLinter()), lintGutter());
+    extraExtensions.push(linter(jsonParseLinter()));
+    if (!hideGutter) {
+      extraExtensions.push(lintGutter());
+    }
   }
 
   const maybeBase = language ? syntaxExtensions[language] : null;