From 2ce7c0b2635accc6094d5cfdfb6d2d9533a1030f Mon Sep 17 00:00:00 2001
From: Dwindi Ramadhana <dwindown@DwMacMiniM4.local>
Date: Thu, 1 Jan 2026 23:34:41 +0700
Subject: [PATCH] fix: button detection with text alignment

Added data-button attribute selector to TipTap button parseHTML.
This ensures buttons are properly detected when text alignment is
applied, as alignment may affect CSS class detection.

Priority order:
1. a[data-button] - most reliable
2. a.button
3. a.button-outline
---
 .../components/ui/tiptap-button-extension.ts  | 55 ++++++++++---------
 1 file changed, 29 insertions(+), 26 deletions(-)

diff --git a/admin-spa/src/components/ui/tiptap-button-extension.ts b/admin-spa/src/components/ui/tiptap-button-extension.ts
index 14e076b..a5e1666 100644
--- a/admin-spa/src/components/ui/tiptap-button-extension.ts
+++ b/admin-spa/src/components/ui/tiptap-button-extension.ts
@@ -37,6 +37,9 @@ export const ButtonExtension = Node.create<ButtonOptions>({
 
   parseHTML() {
     return [
+      {
+        tag: 'a[data-button]',
+      },
       {
         tag: 'a.button',
       },
@@ -49,29 +52,29 @@ 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: '#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',
-        };
+        display: 'inline-block',
+        background: 'transparent',
+        color: '#7f54b3',
+        padding: '12px 26px',
+        border: '2px solid #7f54b3',
+        borderRadius: '6px',
+        textDecoration: 'none',
+        fontWeight: '600',
+        cursor: 'pointer',
+      };
 
     return [
       'a',
@@ -94,12 +97,12 @@ export const ButtonExtension = Node.create<ButtonOptions>({
     return {
       setButton:
         (options) =>
-        ({ commands }) => {
-          return commands.insertContent({
-            type: this.name,
-            attrs: options,
-          });
-        },
+          ({ commands }) => {
+            return commands.insertContent({
+              type: this.name,
+              attrs: options,
+            });
+          },
     };
   },
 });