Skip to content

Updated html markup for CTA card frontend rendering #1442

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 16 commits into from
Feb 13, 2025
Merged

Updated html markup for CTA card frontend rendering #1442

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
57244a7
Updated html markup for CTA card frontend rendering
sanne-san Feb 11, 2025
8eec344
Updated CTA card email rendering
sanne-san Feb 11, 2025
37897fb
Merge branch 'main' into ctacard-rendering
ronaldlangeveld Feb 12, 2025
aece70e
Fixed regex not taking hex color into account
ronaldlangeveld Feb 12, 2025
059302d
Added sponsorLabel to email
ronaldlangeveld Feb 12, 2025
ac64145
Cleanup
ronaldlangeveld Feb 12, 2025
c5c512d
Updated email CTA card rendering
sanne-san Feb 12, 2025
96df53b
Merge branch 'main' into ctacard-rendering
ronaldlangeveld Feb 13, 2025
19c7141
Added image sizes to CTA Card Node
ronaldlangeveld Feb 13, 2025
3eb9140
Added width / height loading to uploader
ronaldlangeveld Feb 13, 2025
3777a50
Added height and width to email rendering
ronaldlangeveld Feb 13, 2025
31dcacd
Merge branch 'main' into ctacard-rendering
ronaldlangeveld Feb 13, 2025
b8ee167
Added cleanup to image change
ronaldlangeveld Feb 13, 2025
d028e71
Added imageWidth and imageHeight to remove media
ronaldlangeveld Feb 13, 2025
8e66d4f
Fixed test
ronaldlangeveld Feb 13, 2025
dc8346b
Cleanup todo comments
ronaldlangeveld Feb 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
174 changes: 136 additions & 38 deletions packages/kg-default-nodes/lib/nodes/call-to-action/calltoaction-renderer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,65 +1,156 @@
import {addCreateDocumentOption} from '../../utils/add-create-document-option';
import {renderWithVisibility} from '../../utils/visibility';
import {resizeImage} from '../../utils/resize-image';

// TODO - this is a placeholder for the cta card web template
function ctaCardTemplate(dataset) {
const backgroundAccent = dataset.backgroundColor === 'accent' ? 'kg-style-accent' : '';
// Add validation for buttonColor
if (!dataset.buttonColor || !dataset.buttonColor.match(/^[a-zA-Z\d-]+|#([a-fA-F\d]{3}|[a-fA-F\d]{6})$/)) {
dataset.buttonColor = 'accent';
}
const buttonAccent = dataset.buttonColor === 'accent' ? 'kg-style-accent' : '';
const buttonStyle = dataset.buttonColor !== 'accent' ? `background-color: ${dataset.buttonColor};` : '';

const buttonStyle = dataset.buttonColor === 'accent'
? `style="color: ${dataset.buttonTextColor};"`
: `style="background-color: ${dataset.buttonColor}; color: ${dataset.buttonTextColor};"`;
return `
<div class="cta-card ${backgroundAccent}" data-layout="${dataset.layout}" style="background-color: ${dataset.backgroundColor};">
${dataset.hasImage ? `<img src="${dataset.imageUrl}" alt="CTA Image">` : ''}
<div>
${dataset.textValue}
</div>
${dataset.showButton ? `
<a href="${dataset.buttonUrl}" class="kg-cta-button ${buttonAccent}"
style="${buttonStyle} color: ${dataset.buttonTextColor};">
${dataset.buttonText}
</a>
` : ''}
<div class="kg-card kg-cta-card kg-cta-bg-${dataset.backgroundColor} kg-cta-${dataset.layout}" data-layout="${dataset.layout}">
${dataset.hasSponsorLabel ? `
<div class="kg-sponsor-label">
<div class="kg-cta-sponsor-label">
${dataset.sponsorLabel}
</div>
` : ''}
<div class="kg-cta-content">
${dataset.hasImage ? `
<div class="kg-cta-image-container">
<img src="${dataset.imageUrl}" alt="CTA Image">
</div>
` : ''}
<div class="kg-cta-content-inner">
<div class="kg-cta-text">
${dataset.textValue}
</div>
${dataset.showButton ? `
<a href="${dataset.buttonUrl}" class="kg-cta-button ${buttonAccent}"
${buttonStyle}>
${dataset.buttonText}
</a>
` : ''}
</div>
</div>
</div>
`;
}

// TODO - this is a placeholder for the email template
function emailCTATemplate(dataset) {
const buttonStyle = dataset.buttonColor !== 'accent' ? `background-color: ${dataset.buttonColor};` : '';
const backgroundStyle = `background-color: ${dataset.backgroundColor};`;
const buttonStyle = dataset.buttonColor === 'accent'
? `color: ${dataset.buttonTextColor};`
: `background-color: ${dataset.buttonColor}; color: ${dataset.buttonTextColor};`;

let imageDimensions;

if (dataset.imageWidth && dataset.imageHeight) {
imageDimensions = {
width: dataset.imageWidth,
height: dataset.imageHeight
};

if (dataset.imageWidth >= 560) {
imageDimensions = resizeImage(imageDimensions, {width: 560});
}
}

const renderContent = () => {
if (dataset.layout === 'minimal') {
return `
<tr>
<td class="kg-cta-content">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="kg-cta-content-wrapper">
<tr>
${dataset.hasImage ? `
<td class="kg-cta-image-container" width="64">
<img src="${dataset.imageUrl}" alt="CTA Image" class="kg-cta-image" width="64" height="64">
</td>
` : ''}
<td class="kg-cta-content-inner">
<div class="kg-cta-text">
${dataset.textValue}
</div>
${dataset.showButton ? `
<a href="${dataset.buttonUrl}"
class="kg-cta-button ${dataset.buttonColor === 'accent' ? 'kg-style-accent' : ''}"
style="${buttonStyle}">
${dataset.buttonText}
</a>
` : ''}
</td>
</tr>
</table>
</td>
</tr>
`;
}

return `
<tr>
<td class="kg-cta-content">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="kg-cta-content-wrapper">
${dataset.hasImage ? `
<tr>
<td class="kg-cta-image-container">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<img src="${dataset.imageUrl}" alt="CTA Image" class="kg-cta-image" ${imageDimensions ? `width="${imageDimensions.width}"` : ''} ${imageDimensions ? `height="${imageDimensions.height}"` : ''}>
</td>
</tr>
</table>
</td>
</tr>
` : ''}
<tr>
<td class="kg-cta-text">
${dataset.textValue}
</td>
</tr>
${dataset.showButton ? `
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="kg-cta-button-container" style="${buttonStyle}">
<a href="${dataset.buttonUrl}"
class="kg-cta-button ${dataset.buttonColor === 'accent' ? 'kg-style-accent' : ''}"
style="${buttonStyle}">
${dataset.buttonText}
</a>
</td>
</tr>
</table>
</td>
</tr>
` : ''}
</table>
</td>
</tr>
`;
};

return `
<div class="cta-card-email" style="${backgroundStyle} padding: 16px; text-align: center; border-radius: 8px;">
${dataset.hasImage ? `<img src="${dataset.imageUrl}" alt="CTA Image" style="max-width: 100%; border-radius: 4px;">` : ''}
<div class="cta-text" style="margin-top: 12px; color: ${dataset.textColor};">
${dataset.textValue}
</div>
${dataset.showButton ? `
<a href="${dataset.buttonUrl}" class="cta-button"
style="display: inline-block; margin-top: 12px; padding: 10px 16px;
${buttonStyle} color: ${dataset.buttonTextColor}; text-decoration: none;
border-radius: 4px;">
${dataset.buttonText}
</a>
` : ''}
<table class="kg-card kg-cta-card kg-cta-bg-${dataset.backgroundColor} kg-cta-${dataset.layout}" border="0" cellpadding="0" cellspacing="0" width="100%">
${dataset.hasSponsorLabel ? `
<div class="sponsor-label" style="margin-top: 8px; font-size: 12px; color: #888;">
${dataset.sponsorLabel}
</div>
<tr>
<td class="kg-cta-sponsor-label">
${dataset.sponsorLabel}
</td>
</tr>
` : ''}
</div>
${renderContent()}
</table>
`;
}

export function renderCallToActionNode(node, options = {}) {
addCreateDocumentOption(options);
const document = options.createDocument();

const dataset = {
layout: node.layout,
textValue: node.textValue,
Expand All @@ -73,9 +164,16 @@ export function renderCallToActionNode(node, options = {}) {
sponsorLabel: node.sponsorLabel,
hasImage: node.hasImage,
imageUrl: node.imageUrl,
textColor: node.textColor
imageWidth: node.imageWidth,
imageHeight: node.imageHeight
};

// Add validation for backgroundColor

if (!dataset.backgroundColor || !dataset.backgroundColor.match(/^[a-zA-Z\d-]+|#([a-fA-F\d]{3}|[a-fA-F\d]{6})$/)) {
dataset.backgroundColor = 'white';
}

if (options.target === 'email') {
const emailDoc = options.createDocument();
const emailDiv = emailDoc.createElement('div');
Expand Down
29 changes: 27 additions & 2 deletions packages/kg-default-nodes/test/nodes/call-to-action.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -219,7 +219,7 @@ describe('CallToActionNode', function () {

const html = element.outerHTML.toString();
html.should.containEql('data-layout="minimal"');
html.should.containEql('background-color: green');
html.should.containEql('kg-cta-bg-green');
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Add test coverage for color validation.

The test suite should include cases for color validation, including:

  • Valid hex colors
  • Invalid color formats
  • Default color fallbacks
it('validates buttonColor format', editorTest(function () {
    const testCases = [
        {input: '#123', expected: '#123'},
        {input: '#123456', expected: '#123456'},
        {input: 'invalid<script>', expected: 'accent'},
        {input: undefined, expected: 'accent'}
    ];
    
    testCases.forEach(({input, expected}) => {
        const node = new CallToActionNode({...dataset, buttonColor: input});
        const {element} = node.exportDOM(exportOptions);
        if (expected === 'accent') {
            element.outerHTML.should.containEql('kg-style-accent');
        } else {
            element.outerHTML.should.containEql(`background-color: ${expected}`);
        }
    });
}));

html.should.containEql('background-color: #F0F0F0');
html.should.containEql('Get access now');
html.should.containEql('http://someblog.com/somepost');
Expand Down Expand Up @@ -249,7 +249,7 @@ describe('CallToActionNode', function () {
const {element} = callToActionNode.exportDOM(exportOptions);

const html = element.outerHTML.toString();
html.should.containEql('cta-card-email');
html.should.containEql('kg-cta-bg-green');
html.should.containEql('background-color: #F0F0F0');
html.should.containEql('Get access now');
html.should.containEql('http://someblog.com/somepost');
Expand All @@ -258,6 +258,31 @@ describe('CallToActionNode', function () {
html.should.containEql('This is a new CTA Card via email.');
}));

it('renders email with img width and height when immersive', editorTest(function () {
exportOptions.target = 'email';
dataset = {
backgroundColor: 'green',
buttonColor: '#F0F0F0',
buttonText: 'Get access now',
buttonTextColor: '#000000',
buttonUrl: 'http://someblog.com/somepost',
hasImage: true,
hasSponsorLabel: true,
sponsorLabel: '<p><span style="white-space: pre-wrap;">SPONSORED</span></p>',
imageUrl: '/content/images/2022/11/koenig-lexical.jpg',
layout: 'immersive',
showButton: true,
textValue: '<p><span style="white-space: pre-wrap;">This is a new CTA Card via email.</span></p>',
imageWidth: 200,
imageHeight: 100
};
const callToActionNode = new CallToActionNode(dataset);
const {element} = callToActionNode.exportDOM(exportOptions);

const html = element.outerHTML.toString();
html.should.containEql('<img src="/content/images/2022/11/koenig-lexical.jpg" alt="CTA Image" class="kg-cta-image" width="200" height="100">');
}));

it('parses textValue correctly', editorTest(function () {
const callToActionNode = new CallToActionNode(dataset);
const {element} = callToActionNode.exportDOM(exportOptions);
Expand Down
26 changes: 16 additions & 10 deletions packages/koenig-lexical/src/nodes/CallToActionNodeComponent.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,16 +93,20 @@ export const CallToActionNodeComponent = ({

const handleImageChange = async (files) => {
const imgPreviewUrl = URL.createObjectURL(files[0]);
const {width, height} = await getImageDimensions(imgPreviewUrl);
const result = await imageUploader.upload(files);
// reset original src so it can be replaced with preview and upload progress
editor.update(() => {
const node = $getNodeByKey(nodeKey);
node.imageUrl = result?.[0].url;
node.hasImage = true;
node.imageWidth = width;
node.imageHeight = height;
});
try {
const {width, height} = await getImageDimensions(imgPreviewUrl);
const result = await imageUploader.upload(files);
// reset original src so it can be replaced with preview and upload progress
editor.update(() => {
const node = $getNodeByKey(nodeKey);
node.imageUrl = result?.[0].url;
node.hasImage = true;
node.imageWidth = width;
node.imageHeight = height;
});
} finally {
URL.revokeObjectURL(imgPreviewUrl);
}
};

const onFileChange = async (e) => {
Expand All @@ -114,6 +118,8 @@ export const CallToActionNodeComponent = ({
const node = $getNodeByKey(nodeKey);
node.imageUrl = '';
node.hasImage = false;
node.imageWidth = null;
node.imageHeight = null;
});
};
const handleUpdatingLayout = (val) => {
Expand Down
Loading