Added button text editing to CTA Card (#1416)

ref https://linear.app/ghost/issue/PLG-312/implement-button-text-update - Added ability to update the text of a button - added test
TryGhost · Jan 23, 2025 · 1b01b14 · 1b01b14
1 parent 8e9268a
commit 1b01b14
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 1 deletion.
diff --git a/packages/koenig-lexical/src/nodes/CallToActionNodeComponent.jsx b/packages/koenig-lexical/src/nodes/CallToActionNodeComponent.jsx
@@ -40,6 +40,13 @@ export const CallToActionNodeComponent = ({
         });
     };
 
+    const handleButtonTextChange = (event) => {
+        editor.update(() => {
+            const node = $getNodeByKey(nodeKey);
+            node.buttonText = event.target.value;
+        });
+    };
+
     return (
         <>
             <CtaCard
@@ -60,7 +67,7 @@ export const CallToActionNodeComponent = ({
                 setEditing={setEditing}
                 showButton={showButton}
                 text={textValue}
-                updateButtonText={() => {}}
+                updateButtonText={handleButtonTextChange}
                 updateButtonUrl={() => {}}
                 updateHasSponsorLabel={() => {}}
                 updateLayout={() => {}}

diff --git a/packages/koenig-lexical/test/e2e/cards/cta-card.test.js b/packages/koenig-lexical/test/e2e/cards/cta-card.test.js
@@ -55,4 +55,12 @@ test.describe('Call To Action Card', async () => {
         expect(await page.isVisible('[data-testid="button-text"]')).toBe(false);
         expect(await page.isVisible('[data-testid="button-url"]')).toBe(false);
     });
+
+    test('can set button text', async function () {
+        await focusEditor(page);
+        await insertCard(page, {cardName: 'call-to-action'});
+        await page.click('[data-testid="button-settings"]');
+        await page.fill('[data-testid="button-text"]', 'Click me');
+        expect(await page.textContent('[data-testid="cta-button"]')).toBe('Click me');
+    });
 });