feat: simplify TipTap button styling + add click-to-edit

Button Styling:
- Buttons now render as simple links with 🔘 prefix in editor
- No more styled button appearance in TipTap (was inconsistent)
- Actual button styling still happens in email (EmailRenderer.php)

Click-to-Edit:
- Click any button in the editor to open edit dialog
- Edit button text, link URL, and style (solid/outline)
- Delete button option in edit mode
- Updates button in-place instead of requiring recreation

Dialog improvements:
- Shows 'Edit Button' title in edit mode
- Shows 'Update Button' vs 'Insert Button' based on mode
- Delete button (red) appears only in edit mode

admin-spa/src/components/ui/tiptap-button-extension.ts

@@ -66,45 +66,23 @@ export const ButtonExtension = Node.create<ButtonOptions>({
 
   renderHTML({ HTMLAttributes }) {
     const { text, href, style } = HTMLAttributes;
-    const className = style === 'outline' ? 'button-outline' : 'button';
-
-    const buttonStyle: Record<string, string> = style === 'solid'
-      ? {
-        display: 'inline-block',
-        background: '#7f54b3',
-        color: '#fff',
-        padding: '14px 28px',
-        borderRadius: '6px',
-        textDecoration: 'none',
-        fontWeight: '600',
-        cursor: 'pointer',
-      }
-      : {
-        display: 'inline-block',
-        background: 'transparent',
-        color: '#7f54b3',
-        padding: '12px 26px',
-        border: '2px solid #7f54b3',
-        borderRadius: '6px',
-        textDecoration: 'none',
-        fontWeight: '600',
-        cursor: 'pointer',
-      };
 
+    // Simple link styling - no fancy button appearance in editor
+    // The actual button styling happens in email rendering (EmailRenderer.php)
+    // In editor, just show as a link with visual indicator it's a button
     return [
       'a',
       mergeAttributes(this.options.HTMLAttributes, {
         href,
-        class: className,
-        style: Object.entries(buttonStyle)
-          .map(([key, value]) => `${key.replace(/([A-Z])/g, '-$1').toLowerCase()}: ${value}`)
-          .join('; '),
+        class: 'button-node',
+        style: 'color: #7f54b3; text-decoration: underline; cursor: pointer; font-weight: 500;',
         'data-button': '',
         'data-text': text,
         'data-href': href,
         'data-style': style,
+        title: `Button: ${text} → ${href}`,
       }),
-      text,
+      `🔘 ${text}`,
     ];
   },