fix: remove emoji from TipTap button, add subtle background
- Removed 🔘 emoji prefix from button text
- Button now shows text with subtle purple background pill
- Added padding and border-radius to differentiate from regular links
- Hover tooltip still shows 'Button: text → url' for clarity
This commit is contained in:
@@ -69,20 +69,20 @@ export const ButtonExtension = Node.create<ButtonOptions>({
|
|||||||
|
|
||||||
// Simple link styling - no fancy button appearance in editor
|
// Simple link styling - no fancy button appearance in editor
|
||||||
// The actual button styling happens in email rendering (EmailRenderer.php)
|
// The actual button styling happens in email rendering (EmailRenderer.php)
|
||||||
// In editor, just show as a link with visual indicator it's a button
|
// In editor, just show as a styled link (differentiable from regular links)
|
||||||
return [
|
return [
|
||||||
'a',
|
'a',
|
||||||
mergeAttributes(this.options.HTMLAttributes, {
|
mergeAttributes(this.options.HTMLAttributes, {
|
||||||
href,
|
href,
|
||||||
class: 'button-node',
|
class: 'button-node',
|
||||||
style: 'color: #7f54b3; text-decoration: underline; cursor: pointer; font-weight: 500;',
|
style: 'color: #7f54b3; text-decoration: underline; cursor: pointer; font-weight: 600; background: rgba(127,84,179,0.1); padding: 2px 6px; border-radius: 3px;',
|
||||||
'data-button': '',
|
'data-button': '',
|
||||||
'data-text': text,
|
'data-text': text,
|
||||||
'data-href': href,
|
'data-href': href,
|
||||||
'data-style': style,
|
'data-style': style,
|
||||||
title: `Button: ${text} → ${href}`,
|
title: `Button: ${text} → ${href}`,
|
||||||
}),
|
}),
|
||||||
`🔘 ${text}`,
|
text,
|
||||||
];
|
];
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user