${values.title}
${values.description}
${salePrice !== null ? `$${price.toFixed(2)}` : ''}
$${(salePrice ?? price).toFixed(2)}
|
{{#if showLabel}}
{{label || 'Your Coupon Code'}}
{{/if}}
{{code}}
{{#if showExpiry}}
Expires: {{expiryDate}}
{{/if}}
|
|
|
${values.title}${values.description}
${salePrice !== null ? `$${price.toFixed(2)}` : ''}
$${(salePrice ?? price).toFixed(2)}
|
{{productDescription}}
| {{buttonText}} |
| `, ` | ` or spacer rows instead |
| `border-radius` | Works in modern clients, ignored in Outlook |
### Unsafe CSS (Avoid in Email Templates)
| Unsafe | Why |
|---|---|
| `flexbox`, `grid` | No support in Outlook |
| `position`, `float` | Inconsistent across clients |
| `box-shadow`, `text-shadow` | No Outlook support |
| `opacity` | Ignored in many clients |
| `max-width`, `min-width` | Unreliable — use fixed `width` |
| `background-image` | Requires VML fallback for Outlook |
| `calc()` | Not supported in email |
| `@media` queries | Limited — only some clients support |
| `CSS custom properties (--var)` | No support |
| `transform`, `animation`, `transition` | Not supported |
---
## Common Mistakes
### 1. Tool name not camelCase
```typescript
// WRONG — will be rejected
{ name: 'my-tool', ... } // kebab-case
{ name: 'MyTool', ... } // PascalCase
{ name: 'my_tool', ... } // snake_case
{ name: 'TOOL', ... } // uppercase
// CORRECT
{ name: 'myTool', ... }
{ name: 'coupon', ... }
{ name: 'productCard', ... }
```
Name must match `/^[a-z][a-zA-Z0-9]*$/`.
### 2. Both template and renderer
```typescript
// WRONG — error: cannot have both
{
name: 'myTool',
template: ' {{value}} ',
renderer: (v) => `${v.value} `,
}
// CORRECT — pick one
{ name: 'myTool', template: '{{value}} ', ... }
// OR
{ name: 'myTool', renderer: (v) => `${v.value} `, ... }
```
### 3. Missing emailTemplate for email tools
If your tool is used in email mode and the web template uses non-email-safe CSS (flexbox, grid), provide a table-based `emailTemplate`. Without it, the web template is used for email export too, which may break in Outlook.
### 4. Mixing flat and grouped properties
```typescript
// WRONG — cannot mix flat and grouped
properties: {
bgColor: { editor: 'color_picker', default: '#fff' }, // flat
content: { // grouped
title: 'Content',
properties: { title: { editor: 'text', default: '' } },
},
}
// CORRECT — pick one style
// All flat:
properties: {
bgColor: { editor: 'color_picker', default: '#fff' },
title: { editor: 'text', default: '' },
}
// All grouped:
properties: {
style: { title: 'Style', position: 1, properties: { bgColor: { editor: 'color_picker', default: '#fff' } } },
content: { title: 'Content', position: 2, properties: { title: { editor: 'text', default: '' } } },
}
```
### 5. Closures in serialized functions
```typescript
// WRONG — `API_BASE` is captured from outer scope, will be undefined after serialization
const API_BASE = 'https://api.example.com';
dragble.registerTool({
name: 'myTool',
renderer: (values) => ` `, // API_BASE is gone!
});
// CORRECT — inline all values
dragble.registerTool({
name: 'myTool',
renderer: (values) => ` `,
});
```
### 6. Using `default` instead of `defaultValue`
```typescript
// WRONG — this is the old Unlayer convention
properties: {
color: { editor: 'color_picker', defaultValue: '#fff' },
}
// CORRECT — Dragble uses 'default'
properties: {
color: { editor: 'color_picker', default: '#fff' },
}
```
### 7. Property state references unknown property
```typescript
// WRONG — 'theme' doesn't exist in properties
propertyStates: {
borderColor: { show: { property: 'theme', equals: 'dark' } },
}
// CORRECT — reference a property that exists in the tool's properties
properties: {
style: { editor: 'dropdown', default: 'solid', data: { options: [...] } },
borderColor: { editor: 'color_picker', default: '#000' },
},
propertyStates: {
borderColor: { show: { property: 'style', equals: 'outlined' } },
}
```
### 8. Expecting transformer cascading
Transformers run **once** per property change. If transformer A sets property B, and property B has a transformer rule, that rule does **not** fire. This prevents infinite loops.
### 9. Using `custom#` prefix in tool name
```typescript
// WRONG — the editor adds custom# internally
{ name: 'custom#coupon', ... }
// CORRECT — just the camelCase name
{ name: 'coupon', ... }
```
### 10. createWidget before init
```typescript
// WRONG — throws "Editor not initialized"
dragble.createWidget({ name: 'myWidget', render: ... });
dragble.init({ ... });
// CORRECT — init first, then create widget (it queues automatically)
dragble.init({ ... });
dragble.createWidget({ name: 'myWidget', render: ... });
// Widget is queued and flushed after INIT handshake completes
```
|