Official 1Password Template Function (#305)

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

@@ -10,7 +10,6 @@ import { vscodeKeymap } from '@replit/codemirror-vscode-keymap';
 import type { EditorKeymap } from '@yaakapp-internal/models';
 import { settingsAtom } from '@yaakapp-internal/models';
 import type { EditorLanguage, TemplateFunction } from '@yaakapp-internal/plugins';
-import { parseTemplate } from '@yaakapp-internal/templates';
 import classNames from 'classnames';
 import type { GraphQLSchema } from 'graphql';
 import { useAtomValue } from 'jotai';
@@ -27,20 +26,17 @@ import {
   useRef,
 } from 'react';
 import { activeEnvironmentAtom } from '../../../hooks/useActiveEnvironment';
-import { activeWorkspaceAtom } from '../../../hooks/useActiveWorkspace';
 import type { WrappedEnvironmentVariable } from '../../../hooks/useEnvironmentVariables';
 import { useEnvironmentVariables } from '../../../hooks/useEnvironmentVariables';
 import { useRandomKey } from '../../../hooks/useRandomKey';
 import { useRequestEditor } from '../../../hooks/useRequestEditor';
 import { useTemplateFunctionCompletionOptions } from '../../../hooks/useTemplateFunctions';
-import { showDialog } from '../../../lib/dialog';
 import { editEnvironment } from '../../../lib/editEnvironment';
 import { tryFormatJson, tryFormatXml } from '../../../lib/formatters';
 import { jotaiStore } from '../../../lib/jotai';
 import { withEncryptionEnabled } from '../../../lib/setupOrConfigureEncryption';
 import { TemplateFunctionDialog } from '../../TemplateFunctionDialog';
 import { IconButton } from '../IconButton';
-import { InlineCode } from '../InlineCode';
 import { HStack } from '../Stacks';
 import './Editor.css';
 import {
@@ -285,32 +281,10 @@ export function Editor({
 
   const onClickFunction = useCallback(
     async (fn: TemplateFunction, tagValue: string, startPos: number) => {
-      const initialTokens = parseTemplate(tagValue);
-      const show = () =>
-        showDialog({
-          id: 'template-function-' + Math.random(), // Allow multiple at once
-          size: 'md',
-          className: 'h-[90vh] max-h-[60rem]',
-          noPadding: true,
-          title: <InlineCode>{fn.name}(…)</InlineCode>,
-          description: fn.description,
-          render: ({ hide }) => {
-            const model = jotaiStore.get(activeWorkspaceAtom)!;
-            return (
-              <TemplateFunctionDialog
-                templateFunction={fn}
-                model={model}
-                hide={hide}
-                initialTokens={initialTokens}
-                onChange={(insert) => {
-                  cm.current?.view.dispatch({
-                    changes: [{ from: startPos, to: startPos + tagValue.length, insert }],
-                  });
-                }}
-              />
-            );
-          },
-        });
+      const show = () => {
+        if (cm.current === null) return;
+        TemplateFunctionDialog.show(fn, tagValue, startPos, cm.current.view);
+      };
 
       if (fn.name === 'secure') {
         withEncryptionEnabled(show);

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

@@ -1,5 +1,6 @@
 import type { CompletionContext } from '@codemirror/autocomplete';
 import type { GenericCompletionOption } from '@yaakapp-internal/plugins';
+import { defaultBoost } from './twig/completion';
 
 export interface GenericCompletionConfig {
   minMatch?: number;
@@ -23,7 +24,12 @@ export function genericCompletion(config?: GenericCompletionConfig) {
     const matchedMinimumLength = toMatch.to - toMatch.from >= minMatch;
     if (!matchedMinimumLength && !context.explicit) return null;
 
-    const optionsWithoutExactMatches = options.filter((o) => o.label !== toMatch.text);
+    const optionsWithoutExactMatches = options
+      .filter((o) => o.label !== toMatch.text)
+      .map((o) => ({
+        ...o,
+        boost: defaultBoost(o),
+      }));
     return {
       validFor: () => true, // Not really sure why this is all it needs
       from: toMatch.from,

src-web/components/core/Editor/twig/completion.ts

@@ -1,4 +1,6 @@
 import type { Completion, CompletionContext } from '@codemirror/autocomplete';
+import { startCompletion } from '@codemirror/autocomplete';
+import type { TemplateFunction } from '@yaakapp-internal/plugins';
 
 const openTag = '${[ ';
 const closeTag = ' ]}';
@@ -11,9 +13,7 @@ export type TwigCompletionOptionNamespace = {
   type: 'namespace';
 };
 
-export type TwigCompletionOptionFunction = {
-  args: { name: string }[];
-  aliases?: string[];
+export type TwigCompletionOptionFunction = TemplateFunction & {
   type: 'function';
 };
 
@@ -34,32 +34,24 @@ export interface TwigCompletionConfig {
   options: TwigCompletionOption[];
 }
 
-const MIN_MATCH_VAR = 1;
-const MIN_MATCH_NAME = 1;
+const MIN_MATCH_NAME = 2;
 
 export function twigCompletion({ options }: TwigCompletionConfig) {
   return function completions(context: CompletionContext) {
     const toStartOfName = context.matchBefore(/[\w_.]*/);
-    const toStartOfVariable = context.matchBefore(/\$\{?\[?\s*[\w_]*/);
-    const toMatch = toStartOfVariable ?? toStartOfName ?? null;
+    const toMatch = toStartOfName ?? null;
 
     if (toMatch === null) return null;
 
     const matchLen = toMatch.to - toMatch.from;
 
-    const failedVarLen = toStartOfVariable !== null && matchLen < MIN_MATCH_VAR;
-    if (failedVarLen && !context.explicit) {
-      return null;
-    }
-
-    const failedNameLen = toStartOfVariable === null && matchLen < MIN_MATCH_NAME;
-    if (failedNameLen && !context.explicit) {
+    if (toMatch.from >0 && matchLen < MIN_MATCH_NAME) {
       return null;
     }
 
     const completions: Completion[] = options
       .flatMap((o): Completion[] => {
-        const matchSegments = toStartOfName!.text.split('.');
+        const matchSegments = toMatch!.text.replace(/^\$/, '').split('.');
         const optionSegments = o.name.split('.');
 
         // If not on the last segment, only complete the namespace
@@ -68,8 +60,17 @@ export function twigCompletion({ options }: TwigCompletionConfig) {
           return [
             {
               label: prefix + '.*',
-              apply: prefix,
               type: 'namespace',
+              detail: 'namespace',
+              apply: (view, _completion, from, to) => {
+                const insert = `${prefix}.`;
+                view.dispatch({
+                  changes: { from, to, insert: insert },
+                  selection: { anchor: from + insert.length },
+                });
+                // Leave the autocomplete open so the user can continue typing the rest of the namespace
+                startCompletion(view);
+              },
             },
           ];
         }
@@ -79,24 +80,49 @@ export function twigCompletion({ options }: TwigCompletionConfig) {
         return [
           {
             label: o.name,
-            apply: openTag + inner + closeTag,
             info: o.description,
             detail: o.type,
             type: o.type === 'variable' ? 'variable' : 'function',
+            apply: (view, _completion, from, to) => {
+              const insert = openTag + inner + closeTag;
+              view.dispatch({
+                changes: { from, to, insert: insert },
+                selection: { anchor: from + insert.length },
+              });
+            },
           },
         ];
       })
       .filter((v) => v != null);
 
-    // TODO: Figure out how to make autocomplete stay open if opened explicitly. It sucks when you explicitly
-    //  open it, then it closes when you type the next character.
+    const uniqueCompletions = uniqueBy(completions, 'label');
+    const sortedCompletions = uniqueCompletions.sort((a, b) => {
+      const boostDiff = defaultBoost(b) - defaultBoost(a);
+      if (boostDiff !== 0) return boostDiff;
+      return a.label.localeCompare(b.label);
+    });
+
     return {
+      matchLen,
       validFor: () => true, // Not really sure why this is all it needs
       from: toMatch.from,
-      matchLen,
-      options: completions
-        // Filter out exact matches
-        .filter((o) => o.label !== toMatch.text),
+      options: sortedCompletions,
     };
   };
 }
+
+export function uniqueBy<T, K extends keyof T>(arr: T[], key: K): T[] {
+  const map = new Map<T[K], T>();
+  for (const item of arr) {
+    map.set(item[key], item); // overwrites → keeps last
+  }
+  return [...map.values()];
+}
+
+export function defaultBoost(o: Completion) {
+  if (o.type === 'variable') return 4;
+  if (o.type === 'constant') return 3;
+  if (o.type === 'function') return 2;
+  if (o.type === 'namespace') return 1;
+  return 0;
+}

src-web/components/core/Editor/twig/templateTags.ts

@@ -3,7 +3,9 @@ import type { Range } from '@codemirror/state';
 import type { DecorationSet, ViewUpdate } from '@codemirror/view';
 import { Decoration, ViewPlugin, WidgetType, EditorView } from '@codemirror/view';
 import type { SyntaxNodeRef } from '@lezer/common';
+import { parseTemplate } from '@yaakapp-internal/templates';
 import type { TwigCompletionOption } from './completion';
+import { collectArgumentValues } from './util';
 
 class TemplateTagWidget extends WidgetType {
   readonly #clickListenerCallback: () => void;
@@ -40,10 +42,7 @@ class TemplateTagWidget extends WidgetType {
     }`;
     elt.title = this.option.invalid ? 'Not Found' : (this.option.value ?? '');
     elt.setAttribute('data-tag-type', this.option.type);
-    elt.textContent =
-      this.option.type === 'function'
-        ? `${this.option.name}(${this.option.args.length ? '…' : ''})`
-        : this.option.name;
+    elt.textContent = this.option.label;
     elt.addEventListener('click', this.#clickListenerCallback);
     return elt;
   }
@@ -107,7 +106,20 @@ function templateTags(
             };
           }
 
-          const widget = new TemplateTagWidget(option, rawTag, node.from);
+          let invalid = false;
+          if (option.type === 'function') {
+            const tokens = parseTemplate(rawTag);
+            const values = collectArgumentValues(tokens, option);
+            for (const arg of option.args) {
+              if (!('optional' in arg)) continue;
+              if (!arg.optional && values[arg.name] == null) {
+                invalid = true;
+                break;
+              }
+            }
+          }
+
+          const widget = new TemplateTagWidget({ ...option, invalid }, rawTag, node.from);
           const deco = Decoration.replace({ widget, inclusive: true });
           widgets.push(deco.range(node.from, node.to));
         }

src-web/components/core/Editor/twig/util.ts

@@ -0,0 +1,37 @@
+import type { FormInput, TemplateFunction } from '@yaakapp-internal/plugins';
+import type { Tokens } from '@yaakapp-internal/templates';
+
+/**
+ * Process the initial tokens from the template and merge those with the default values pulled from
+ * the template function definition.
+ */
+export function collectArgumentValues(initialTokens: Tokens, templateFunction: TemplateFunction) {
+  const initial: Record<string, string | boolean> = {};
+  const initialArgs =
+    initialTokens.tokens[0]?.type === 'tag' && initialTokens.tokens[0]?.val.type === 'fn'
+      ? initialTokens.tokens[0]?.val.args
+      : [];
+
+  const processArg = (arg: FormInput) => {
+    if ('inputs' in arg && arg.inputs) {
+      arg.inputs.forEach(processArg);
+    }
+    if (!('name' in arg)) return;
+
+    const initialArg = initialArgs.find((a) => a.name === arg.name);
+    const initialArgValue =
+      initialArg?.value.type === 'str'
+        ? initialArg?.value.text
+        : initialArg?.value.type === 'bool'
+          ? initialArg.value.value
+          : undefined;
+    const value = initialArgValue ?? arg.defaultValue;
+    if (value != null) {
+      initial[arg.name] = value;
+    }
+  };
+
+  templateFunction.args.forEach(processArg);
+
+  return initial;
+}

src-web/components/core/Select.tsx

@@ -24,6 +24,7 @@ export interface SelectProps<T extends string> {
   size?: ButtonProps['size'];
   className?: string;
   disabled?: boolean;
+  filterable?: boolean;
 }
 
 export function Select<T extends string>({
@@ -40,6 +41,7 @@ export function Select<T extends string>({
   onChange,
   className,
   defaultValue,
+  filterable,
   size = 'md',
 }: SelectProps<T>) {
   const [focused, setFocused] = useState<boolean>(false);
@@ -64,7 +66,7 @@ export function Select<T extends string>({
       <Label htmlFor={id} visuallyHidden={hideLabel} className={labelClassName} help={help}>
         {label}
       </Label>
-      {type() === 'macos' ? (
+      {type() === 'macos' && !filterable ? (
         <HStack
           space={2}
           className={classNames(