Add descriptions to template functions

plugin-runtime-types/src/bindings/events.ts

@@ -95,7 +95,12 @@ export type SendHttpRequestResponse = { httpResponse: HttpResponse, };
 
 export type ShowToastRequest = { message: string, color?: Color, icon?: Icon, };
 
-export type TemplateFunction = { name: string, aliases?: Array<string>, args: Array<TemplateFunctionArg>, };
+export type TemplateFunction = { name: string, description?: string, 
+/**
+ * Also support alternative names. This is useful for not breaking existing
+ * tags when changing the `name` property
+ */
+aliases?: Array<string>, args: Array<TemplateFunctionArg>, };
 
 export type TemplateFunctionArg = { "type": "text" } & TemplateFunctionTextArg | { "type": "select" } & TemplateFunctionSelectArg | { "type": "checkbox" } & TemplateFunctionCheckboxArg | { "type": "http_request" } & TemplateFunctionHttpRequestArg | { "type": "file" } & TemplateFunctionFileArg;
 

src-tauri/yaak_plugin_runtime/bindings/events.ts

@@ -95,7 +95,12 @@ export type SendHttpRequestResponse = { httpResponse: HttpResponse, };
 
 export type ShowToastRequest = { message: string, color?: Color, icon?: Icon, };
 
-export type TemplateFunction = { name: string, aliases?: Array<string>, args: Array<TemplateFunctionArg>, };
+export type TemplateFunction = { name: string, description?: string, 
+/**
+ * Also support alternative names. This is useful for not breaking existing
+ * tags when changing the `name` property
+ */
+aliases?: Array<string>, args: Array<TemplateFunctionArg>, };
 
 export type TemplateFunctionArg = { "type": "text" } & TemplateFunctionTextArg | { "type": "select" } & TemplateFunctionSelectArg | { "type": "checkbox" } & TemplateFunctionCheckboxArg | { "type": "http_request" } & TemplateFunctionHttpRequestArg | { "type": "file" } & TemplateFunctionFileArg;
 

src-tauri/yaak_plugin_runtime/src/events.rs

@@ -294,6 +294,8 @@ pub struct GetTemplateFunctionsResponse {
 #[ts(export, export_to = "events.ts")]
 pub struct TemplateFunction {
     pub name: String,
+    #[ts(optional)]
+    pub description: Option<String>,
     
     /// Also support alternative names. This is useful for not breaking existing
     /// tags when changing the `name` property

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

@@ -285,12 +285,8 @@
     }
   }
 
-  &.cm-completionInfo-right {
+  &.cm-completionInfo {
-    @apply ml-1 -mt-0.5 font-sans;
+    @apply mx-0.5 -mt-0.5 font-sans;
-  }
-
-  &.cm-completionInfo-right-narrow {
-    @apply ml-1;
   }
 
   * {

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

@@ -174,6 +174,7 @@ export const Editor = forwardRef<EditorView | undefined, EditorProps>(function E
         id: 'template-function',
         size: 'sm',
         title: 'Configure Function',
+        description: fn.description || null,
         render: ({ hide }) => (
           <TemplateFunctionDialog
             templateFunction={fn}

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

@@ -24,6 +24,7 @@ export type TwigCompletionOption = (
 ) & {
   name: string;
   label: string;
+  description?: string;
   onClick: (rawTag: string, startPos: number) => void;
   value: string | null;
   invalid?: boolean;
@@ -63,10 +64,11 @@ export function twigCompletion({ options }: TwigCompletionConfig) {
 
         // If not on the last segment, only complete the namespace
         if (matchSegments.length < optionSegments.length) {
+          const prefix = optionSegments.slice(0, matchSegments.length).join('.');
           return [
             {
-              label: optionSegments.slice(0, matchSegments.length).join('.') + '…',
+              label: prefix + '.*',
-              apply: optionSegments.slice(0, matchSegments.length).join('.'),
+              apply: prefix,
               type: 'namespace',
             },
           ];
@@ -78,6 +80,8 @@ export function twigCompletion({ options }: TwigCompletionConfig) {
           {
             label: o.name,
             apply: openTag + inner + closeTag,
+            info: o.description,
+            detail: o.type,
             type: o.type === 'variable' ? 'variable' : 'function',
           },
         ];

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

@@ -52,6 +52,7 @@ export function twig({
         name: fn.name,
         aliases: fn.aliases,
         type: 'function',
+        description: fn.description,
         args: fn.args.map((a) => ({ name: a.name })),
         value: null,
         label: `${fn.name}(${shortArgs})`,