From 5eef910b8c213d50fc8818f590236c30f34f258d Mon Sep 17 00:00:00 2001
From: Gregory Schier <gschier1990@gmail.com>
Date: Tue, 13 Aug 2024 10:19:21 -0700
Subject: [PATCH] Variable value as title attr

---
 src-web/components/core/Editor/twig/placeholder.ts | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src-web/components/core/Editor/twig/placeholder.ts b/src-web/components/core/Editor/twig/placeholder.ts
index 4c06dfae..e9de1b49 100644
--- a/src-web/components/core/Editor/twig/placeholder.ts
+++ b/src-web/components/core/Editor/twig/placeholder.ts
@@ -5,9 +5,11 @@ import { BetterMatchDecorator } from '../BetterMatchDecorator';
 class PlaceholderWidget extends WidgetType {
   constructor(
     readonly name: string,
+    readonly value: string,
     readonly exists: boolean,
     readonly type: 'function' | 'variable' = 'variable',
   ) {
+    console.log('PLACEHOLDER', { name, value });
     super();
   }
 
@@ -24,7 +26,7 @@ class PlaceholderWidget extends WidgetType {
         ? 'x-theme-placeholder--primary'
         : 'x-theme-placeholder--info'
     }`;
-    elt.title = !this.exists ? 'Variable not found in active environment' : '';
+    elt.title = !this.exists ? 'Variable not found in active environment' : this.value ?? '';
     elt.textContent = this.name;
     return elt;
   }
@@ -34,7 +36,7 @@ class PlaceholderWidget extends WidgetType {
   }
 }
 
-export const placeholders = function (variables: { name: string }[]) {
+export const placeholders = function (variables: { name: string; value?: string }[]) {
   const placeholderMatcher = new BetterMatchDecorator({
     regexp: /\$\{\[\s*([^\]\s]+)\s*]}/g,
     decoration(match, view, matchStartPos) {
@@ -59,6 +61,7 @@ export const placeholders = function (variables: { name: string }[]) {
         inclusive: true,
         widget: new PlaceholderWidget(
           groupMatch,
+          variables.find((v) => v.name === groupMatch)?.value ?? '',
           isFunction ? true : variables.some((v) => v.name === groupMatch),
           isFunction ? 'function' : 'variable',
         ),