dwindown/WooNooW
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: button href broken by variable highlighting HTML spans

Browse Source 
ROOT CAUSE (from screenshot DevTools):
href="<span style=...>[login_url]</span>" - HTML span inside href attribute!

Flow causing the bug:
1. parseCardsForPreview converts [button url="{login_url}"] to <a href="{login_url}">
2. sampleData replacement runs but login_url NOT in sampleData
3. Variable highlighting injects <span>[login_url]</span> INTO href="..."
4. HTML is completely broken

FIXES APPLIED:
1. Added missing URL variables to sampleData:
   - login_url, reset_link, reset_key
   - user_login, user_email, user_temp_password
   - customer_first_name, customer_last_name

2. Changed variable highlighting from HTML spans to plain text [variable]
   - Prevents breaking HTML attributes if variable is inside href, src, etc.
This commit is contained in:
Dwindi Ramadhana
2026-01-01 22:04:20 +07:00
parent 5a831ddf9d
commit 6bd50c1659
1 changed files with 11 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
admin-spa/src/routes/Settings/Notifications/EditTemplate.tsx
View File

@@ -264,6 +264,15 @@ export default function EditTemplate() {
store_url: '#', store_url: '#',
store_email: 'store@example.com', store_email: 'store@example.com',
support_email: 'support@example.com', support_email: 'support@example.com',
// Account-related URLs and variables
login_url: '#',
reset_link: '#',
reset_key: 'abc123xyz',
user_login: 'johndoe',
user_email: 'john@example.com',
user_temp_password: '••••••••',
customer_first_name: 'John',
customer_last_name: 'Doe',
}; };
Object.keys(sampleData).forEach((key) => { Object.keys(sampleData).forEach((key) => {
@@ -272,10 +281,10 @@ export default function EditTemplate() {
}); });
// Highlight variables that don't have sample data // Highlight variables that don't have sample data
// Use plain text [variable] instead of HTML spans to avoid breaking href attributes
variableKeys.forEach((key: string) => { variableKeys.forEach((key: string) => {
if (!storeVariables[key] && !sampleData[key]) { if (!storeVariables[key] && !sampleData[key]) {
const sampleValue = `<span style="background: #fef3c7; padding: 2px 4px; border-radius: 2px;">[${key}]</span>`; previewBody = previewBody.replace(new RegExp(`\\{${key}\\}`, 'g'), `[${key}]`);
previewBody = previewBody.replace(new RegExp(`\\{${key}\\}`, 'g'), sampleValue);
} }
}); });