Add descriptions to template functions

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

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

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('.') + '…',
-              apply: optionSegments.slice(0, matchSegments.length).join('.'),
+              label: prefix + '.*',
+              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})`,