TryGhost · kevinansfield · Feb 6, 2025 · Feb 6, 2025
diff --git a/packages/koenig-lexical/src/components/ui/SettingsPanel.jsx b/packages/koenig-lexical/src/components/ui/SettingsPanel.jsx
@@ -264,7 +264,7 @@ export function ColorPickerSetting({label, isExpanded, onSwatchChange, onPickerC
                 document.removeEventListener('click', closePicker);
             };
         }
-    }, [isExpanded]);
+    }, [isExpanded, onTogglePicker]);
 
     return (
         <div className="flex-col" data-testid={dataTestId} onClick={markClickedInside}>

diff --git a/packages/koenig-lexical/src/components/ui/TabView.jsx b/packages/koenig-lexical/src/components/ui/TabView.jsx
@@ -29,7 +29,7 @@ const TabView = ({tabs, defaultTab, tabContent}) => {
                     </button>
                 ))}
             </div>
-            <div className="flex flex-col gap-3 p-6 pt-4">
+            <div className="flex flex-col gap-3 p-6 pt-4" data-testid={`tab-contents-${activeTab}`}>
                 {tabContent[activeTab]}
             </div>
         </>
@@ -47,4 +47,4 @@ TabView.propTypes = {
     tabContent: PropTypes.objectOf(PropTypes.node).isRequired
 };
 
-export {TabView};
+export {TabView};
diff --git a/packages/koenig-lexical/src/components/ui/VisibilitySettings.jsx b/packages/koenig-lexical/src/components/ui/VisibilitySettings.jsx
@@ -15,7 +15,7 @@ export function VisibilitySettings({visibilityOptions, toggleVisibility}) {
         });
 
         return (
-            <div key={group.key} className="flex flex-col gap-3">
+            <div key={group.key} className="flex flex-col gap-3" data-testid="visibility-settings">
                 <p className="text-sm font-bold tracking-normal text-grey-900 dark:text-grey-300">{group.label}</p>
                 {toggles}
                 {index < visibilityOptions.length - 1 && (

diff --git a/packages/koenig-lexical/src/components/ui/cards/CtaCard.jsx b/packages/koenig-lexical/src/components/ui/cards/CtaCard.jsx
@@ -8,6 +8,7 @@ import clsx from 'clsx';
 import {Button} from '../Button';
 import {ButtonGroupSetting, ColorOptionSetting, ColorPickerSetting, InputSetting, InputUrlSetting, MediaUploadSetting, SettingsPanel, ToggleSetting} from '../SettingsPanel';
 import {ReadOnlyOverlay} from '../ReadOnlyOverlay';
+import {VisibilitySettings} from '../VisibilitySettings';
 import {getAccentColor} from '../../../utils/getAccentColor';
 import {textColorForBackgroundColor} from '@tryghost/color-utils';
 
@@ -72,6 +73,7 @@ export function CtaCard({
     isEditing = false,
     layout = 'immersive',
     showButton = false,
+    visibilityOptions = {},
     handleButtonColor = () => {},
     handleColorChange = () => {},
     onFileChange = () => {},
@@ -81,7 +83,8 @@ export function CtaCard({
     updateButtonUrl = () => {},
     updateHasSponsorLabel = () => {},
     updateLayout = () => {},
-    updateShowButton = () => {}
+    updateShowButton = () => {},
+    toggleVisibility = () => {}
 }) {
     const [buttonColorPickerExpanded, setButtonColorPickerExpanded] = useState(false);
 
@@ -193,26 +196,10 @@ export function CtaCard({
     );
 
     const visibilitySettings = (
-        <>
-            <p className="text-sm font-bold tracking-normal text-grey-900 dark:text-grey-300">Web</p>
-            <ToggleSetting
-                label="Anonymous visitors"
-            />
-            <ToggleSetting
-                label="Free members"
-            />
-            <ToggleSetting
-                label="Paid members"
-            />
-            <hr className="not-kg-prose my-2 block border-t-grey-300 dark:border-t-grey-900" />
-            <p className="text-sm font-bold tracking-normal text-grey-900 dark:text-grey-300">Email</p>
-            <ToggleSetting
-                label="Free members"
-            />
-            <ToggleSetting
-                label="Paid members"
-            />
-        </>
+        <VisibilitySettings
+            toggleVisibility={toggleVisibility}
+            visibilityOptions={visibilityOptions}
+        />
     );
 
     return (
@@ -247,13 +234,13 @@ export function CtaCard({
                             'block',
                             layout === 'immersive' ? 'w-full' : 'w-16 shrink-0'
                         )}>
-                            <img 
-                                alt="Placeholder" 
+                            <img
+                                alt="Placeholder"
                                 className={clsx(
                                     layout === 'immersive' ? 'h-auto w-full' : 'aspect-square w-16 object-cover',
                                     'rounded-md'
-                                )} 
-                                src={imageSrc} 
+                                )}
+                                src={imageSrc}
                             />
                         </div>
                     )}
@@ -279,10 +266,10 @@ export function CtaCard({
                         {/* Button */}
                         { (showButton && (isEditing || (buttonText && buttonUrl))) &&
                             <div data-test-cta-button-current-url={buttonUrl}>
-                                <Button 
-                                    color={'accent'} 
-                                    dataTestId="cta-button" 
-                                    placeholder="Add button text" 
+                                <Button
+                                    color={'accent'}
+                                    dataTestId="cta-button"
+                                    placeholder="Add button text"
                                     size={layout === 'immersive' ? 'medium' : 'small'}
                                     style={buttonColor ? {
                                         backgroundColor: buttonColor === 'accent' ? 'var(--accent-color)' : buttonColor,
@@ -322,7 +309,7 @@ CtaCard.propTypes = {
     buttonColor: PropTypes.string,
     buttonTextColor: PropTypes.string,
     color: PropTypes.oneOf(['none', 'grey', 'white', 'blue', 'green', 'yellow', 'red']),
-    hasSponsorLabel: PropTypes.bool,    
+    hasSponsorLabel: PropTypes.bool,
     imageSrc: PropTypes.string,
     isEditing: PropTypes.bool,
     layout: PropTypes.oneOf(['minimal', 'immersive']),
@@ -338,5 +325,7 @@ CtaCard.propTypes = {
     handleButtonColor: PropTypes.func,
     onFileChange: PropTypes.func,
     setFileInputRef: PropTypes.func,
-    onRemoveMedia: PropTypes.func
+    onRemoveMedia: PropTypes.func,
+    visibilityOptions: PropTypes.object,
+    toggleVisibility: PropTypes.func
 };
diff --git a/packages/koenig-lexical/src/nodes/CallToActionNodeComponent.jsx b/packages/koenig-lexical/src/nodes/CallToActionNodeComponent.jsx
@@ -7,6 +7,7 @@ import {CtaCard} from '../components/ui/cards/CtaCard';
 import {SnippetActionToolbar} from '../components/ui/SnippetActionToolbar.jsx';
 import {ToolbarMenu, ToolbarMenuItem, ToolbarMenuSeparator} from '../components/ui/ToolbarMenu.jsx';
 import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+import {useVisibilityToggle} from '../hooks/useVisibilityToggle.js';
 
 export const CallToActionNodeComponent = ({
     nodeKey,
@@ -28,6 +29,9 @@ export const CallToActionNodeComponent = ({
     const {isEditing, isSelected, setEditing} = React.useContext(CardContext);
     const {fileUploader, cardConfig} = React.useContext(KoenigComposerContext);
     const [showSnippetToolbar, setShowSnippetToolbar] = React.useState(false);
+
+    const {visibilityOptions, toggleVisibility} = useVisibilityToggle(editor, nodeKey, cardConfig);
+
     const handleToolbarEdit = (event) => {
         event.preventDefault();
         event.stopPropagation();
@@ -136,11 +140,13 @@ export const CallToActionNodeComponent = ({
                 setFileInputRef={ref => fileInputRef.current = ref}
                 showButton={showButton}
                 text={textValue}
+                toggleVisibility={toggleVisibility}
                 updateButtonText={handleButtonTextChange}
                 updateButtonUrl={handleButtonUrlChange}
                 updateHasSponsorLabel={handleHasSponsorLabelChange}
                 updateLayout={handleUpdatingLayout}
                 updateShowButton={toggleShowButton}
+                visibilityOptions={visibilityOptions}
                 onFileChange={onFileChange}
                 onRemoveMedia={onRemoveMedia}
             />

diff --git a/packages/koenig-lexical/src/nodes/HtmlNodeComponent.jsx b/packages/koenig-lexical/src/nodes/HtmlNodeComponent.jsx
@@ -26,12 +26,6 @@ export function HtmlNodeComponent({nodeKey, html}) {
         {id: 'visibility', label: 'Visibility'}
     ];
 
-    const visibilitySettings = <VisibilitySettings toggleVisibility={toggleVisibility} visibilityOptions={visibilityOptions} />;
-
-    const settingsTabContents = {
-        visibility: visibilitySettings
-    };
-
     const updateHtml = (value) => {
         editor.update(() => {
             const node = $getNodeByKey(nodeKey);
@@ -52,6 +46,13 @@ export function HtmlNodeComponent({nodeKey, html}) {
         }
     };
 
+    const visibilitySettings = (
+        <VisibilitySettings
+            toggleVisibility={toggleVisibility}
+            visibilityOptions={visibilityOptions}
+        />
+    );
+
     return (
         <>
             <HtmlCard
@@ -100,7 +101,9 @@ export function HtmlNodeComponent({nodeKey, html}) {
                     tabs={settingsTabs}
                     onMouseDown={e => e.preventDefault()}
                 >
-                    {settingsTabContents}
+                    {{
+                        visibility: visibilitySettings
+                    }}
                 </SettingsPanel>
             )}
         </>

diff --git a/packages/koenig-lexical/test/e2e/cards/cta-card.test.js b/packages/koenig-lexical/test/e2e/cards/cta-card.test.js
@@ -1,19 +1,35 @@
 import path from 'path';
-import {assertHTML, focusEditor, html, initialize, insertCard} from '../../utils/e2e';
+import {assertHTML, focusEditor, getEditorStateJSON, html, initialize, insertCard} from '../../utils/e2e';
 import {expect, test} from '@playwright/test';
 import {fileURLToPath} from 'url';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
 test.describe('Call To Action Card', async () => {
     let page;
+    let serializedTestCard;
 
     test.beforeAll(async ({browser}) => {
         page = await browser.newPage();
     });
 
     test.beforeEach(async () => {
         await initialize({page, uri: '/#/?content=false&labs=contentVisibility,contentVisibilityAlpha'});
+
+        serializedTestCard = {
+            type: 'call-to-action',
+            backgroundColor: 'green',
+            buttonColor: '#F0F0F0',
+            buttonText: 'Get access now',
+            buttonTextColor: '#000000',
+            buttonUrl: 'http://someblog.com/somepost',
+            hasImage: true,
+            hasSponsorLabel: true,
+            imageUrl: '/content/images/2022/11/koenig-lexical.jpg',
+            layout: 'minimal',
+            showButton: true,
+            textValue: '<p><span style="white-space: pre-wrap;">This is a new CTA Card.</span></p>'
+        };
     });
 
     test.afterAll(async () => {
@@ -23,20 +39,7 @@ test.describe('Call To Action Card', async () => {
     test('can import serialized CTA card nodes', async function () {
         const contentParam = encodeURIComponent(JSON.stringify({
             root: {
-                children: [{
-                    type: 'call-to-action',
-                    backgroundColor: 'green',
-                    buttonColor: '#F0F0F0',
-                    buttonText: 'Get access now',
-                    buttonTextColor: '#000000',
-                    buttonUrl: 'http://someblog.com/somepost',
-                    hasImage: true,
-                    hasSponsorLabel: true,
-                    imageUrl: '/content/images/2022/11/koenig-lexical.jpg',
-                    layout: 'minimal',
-                    showButton: true,
-                    textValue: '<p><span style="white-space: pre-wrap;">This is a new CTA Card.</span></p>'
-                }],
+                children: [serializedTestCard],
                 direction: null,
                 format: '',
                 indent: 0,
@@ -362,4 +365,79 @@ test.describe('Call To Action Card', async () => {
         const previewImage = await page.locator('[data-testid="media-upload-filled"] img');
         await expect(previewImage).toBeVisible();
     });
+
+    test('can change visibility settings', async function () {
+        await focusEditor(page);
+        const card = await insertCard(page, {cardName: 'call-to-action'});
+
+        // switch to visibility settings
+        await card.getByTestId('tab-visibility').click();
+
+        // check visibility icon and toggles match default state
+        await expect(page.getByTestId('visibility-indicator')).not.toBeVisible();
+        await expect(card.getByTestId('visibility-toggle-web-nonMembers')).toBeChecked();
+        await expect(card.getByTestId('visibility-toggle-web-freeMembers')).toBeChecked();
+        await expect(card.getByTestId('visibility-toggle-web-paidMembers')).toBeChecked();
+        await expect(card.getByTestId('visibility-toggle-email-freeMembers')).toBeChecked();
+        await expect(card.getByTestId('visibility-toggle-email-paidMembers')).toBeChecked();
+
+        // change toggles
+        await card.getByTestId('visibility-toggle-web-paidMembers').click();
+        await card.getByTestId('visibility-toggle-email-paidMembers').click();
+
+        // visibility icon appears
+        await expect(page.getByTestId('visibility-indicator')).toBeVisible();
+
+        // serialized state gets updated
+        const serializedState = JSON.parse(await getEditorStateJSON(page));
+        expect(serializedState.root.children[0].visibility).toEqual({
+            web: {
+                nonMember: true,
+                memberSegment: 'status:free'
+            },
+            email: {
+                memberSegment: 'status:free'
+            }
+        });
+    });
+
+    test('can import serialized visibility settings', async function () {
+        const contentParam = encodeURIComponent(JSON.stringify({
+            root: {
+                children: [{
+                    ...serializedTestCard,
+                    visibility: {
+                        web: {
+                            nonMember: false,
+                            memberSegment: 'status:free'
+                        },
+                        email: {
+                            memberSegment: 'status:free'
+                        }
+                    }
+                }],
+                direction: null,
+                format: '',
+                indent: 0,
+                type: 'root',
+                version: 1
+            }
+        }));
+
+        await initialize({page, uri: `/#/?content=${contentParam}`});
+
+        // assert visibility icon is visible
+        await expect(page.getByTestId('visibility-indicator')).toBeVisible();
+
+        // put card into edit mode
+        await page.dblclick('[data-kg-card="call-to-action"]');
+
+        // check toggles match the serialized data
+        await page.click('[data-testid="tab-visibility"]');
+        await expect(page.getByTestId('visibility-toggle-web-nonMembers')).not.toBeChecked();
+        await expect(page.getByTestId('visibility-toggle-web-freeMembers')).toBeChecked();
+        await expect(page.getByTestId('visibility-toggle-web-paidMembers')).not.toBeChecked();
+        await expect(page.getByTestId('visibility-toggle-email-freeMembers')).toBeChecked();
+        await expect(page.getByTestId('visibility-toggle-email-paidMembers')).not.toBeChecked();
+    });
 });
diff --git a/packages/koenig-lexical/test/utils/e2e.js b/packages/koenig-lexical/test/utils/e2e.js
@@ -102,7 +102,7 @@
        ignoreDataTestId,
        ignoreCardCaptionContents
    });
    expect(actual).toEqual(expected);
 }

 export function prettifyHTML(string, options = {}) {
@@ -409,8 +409,10 @@
     // hr is the one case we don't match the card name to the data attribute
     if (card === 'Divider') {
         await expect(page.locator(`[data-kg-card="horizontalrule"]`).nth(nth)).toBeVisible();
+        return page.locator(`[data-kg-card="horizontalrule"]`).nth(nth);
     } else {
         await expect(page.locator(`[data-kg-card="${cardName}" i]`).nth(nth)).toBeVisible();
+        return page.locator(`[data-kg-card="${cardName}" i]`).nth(nth);
     }
 }