diff --git a/packages/koenig-lexical/src/components/ui/cards/CtaCard.jsx b/packages/koenig-lexical/src/components/ui/cards/CtaCard.jsx index 725d411f4..c7402b3f5 100644 --- a/packages/koenig-lexical/src/components/ui/cards/CtaCard.jsx +++ b/packages/koenig-lexical/src/components/ui/cards/CtaCard.jsx @@ -125,6 +125,7 @@ export function CtaCard({ /> {/* Sponsor label setting */} -

Sponsored

+

Sponsored

)} diff --git a/packages/koenig-lexical/src/nodes/CallToActionNodeComponent.jsx b/packages/koenig-lexical/src/nodes/CallToActionNodeComponent.jsx index 97da8e91f..25c0bbc05 100644 --- a/packages/koenig-lexical/src/nodes/CallToActionNodeComponent.jsx +++ b/packages/koenig-lexical/src/nodes/CallToActionNodeComponent.jsx @@ -62,7 +62,13 @@ export const CallToActionNodeComponent = ({ node.buttonTextColor = matchingTextColor; }); }; - + const handleHasSponsorLabelChange = (val) => { + editor.update(() => { + const node = $getNodeByKey(nodeKey); + // get the current value and toggle it + node.hasSponsorLabel = !node.hasSponsorLabel; + }); + }; const handleBackgroundColorChange = (val) => { editor.update(() => { const node = $getNodeByKey(nodeKey); @@ -93,7 +99,7 @@ export const CallToActionNodeComponent = ({ text={textValue} updateButtonText={handleButtonTextChange} updateButtonUrl={handleButtonUrlChange} - updateHasSponsorLabel={() => {}} + updateHasSponsorLabel={handleHasSponsorLabelChange} updateLayout={() => {}} updateShowButton={toggleShowButton} /> diff --git a/packages/koenig-lexical/test/e2e/cards/cta-card.test.js b/packages/koenig-lexical/test/e2e/cards/cta-card.test.js index 5394eac72..9507aa5ee 100644 --- a/packages/koenig-lexical/test/e2e/cards/cta-card.test.js +++ b/packages/koenig-lexical/test/e2e/cards/cta-card.test.js @@ -175,6 +175,16 @@ test.describe('Call To Action Card', async () => { expect(await page.getAttribute('[data-testid="cta-button"]', 'style')).toContain('color: rgb(0, 0, 0);'); }); + test('can toggle has sponsor label', async function () { + await focusEditor(page); + await insertCard(page, {cardName: 'call-to-action'}); + await page.click('[data-testid="sponsor-label-toggle"]'); + expect(await page.isVisible('[data-testid="sponsor-label"]')).toBe(true); + + await page.click('[data-testid="sponsor-label-toggle"]'); + expect(await page.isVisible('[data-testid="sponsor-label"]')).toBe(false); + }); + test('can change background colours', async function () { const colors = [ {testId: 'color-picker-none', expectedClass: 'bg-transparent border-transparent'},