Added initial HTML and Email rendering

packages/kg-default-nodes/lib/nodes/call-to-action/CallToActionNode.js

@@ -1,5 +1,6 @@
 // eslint-disable-next-line ghost/filenames/match-exported-class
 import {generateDecoratorNode} from '../../generate-decorator-node';
+import {renderCallToActionNode} from './calltoaction-renderer';
 
 export class CallToActionNode extends generateDecoratorNode({
     nodeType: 'call-to-action',
@@ -19,6 +20,9 @@ export class CallToActionNode extends generateDecoratorNode({
     ]
 }) {
     /* overrides */
+    exportDOM(options = {}) {
+        return renderCallToActionNode(this, options);
+    }
 }
 
 export const $createCallToActionNode = (dataset) => {

packages/kg-default-nodes/lib/nodes/call-to-action/calltoaction-renderer.js

@@ -0,0 +1,91 @@
+import {addCreateDocumentOption} from '../../utils/add-create-document-option';
+
+// TODO - this is a placeholder for the cta card web template
+function ctaCardTemplate(dataset) {
+    const backgroundAccent = dataset.backgroundColor === 'accent' ? 'kg-style-accent' : '';
+    const buttonAccent = dataset.buttonColor === 'accent' ? 'kg-style-accent' : '';
+    const buttonStyle = dataset.buttonColor !== 'accent' ? `background-color: ${dataset.buttonColor};` : '';
+
+    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>
+            ` : ''}
+            ${dataset.hasSponsorLabel ? `
+                <div class="kg-sponsor-label">
+                    Sponsored
+                </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};`;
+
+    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>
+            ` : ''}
+            ${dataset.hasSponsorLabel ? `
+                <div class="sponsor-label" style="margin-top: 8px; font-size: 12px; color: #888;">
+                    Sponsored
+                </div>
+            ` : ''}
+        </div>
+    `;
+}
+
+export function renderCallToActionNode(node, options = {}) {
+    addCreateDocumentOption(options);
+    const document = options.createDocument();
+
+    const dataset = {
+        layout: node.layout,
+        textValue: node.textValue,
+        showButton: node.showButton,
+        buttonText: node.buttonText,
+        buttonUrl: node.buttonUrl,
+        buttonColor: node.buttonColor,
+        buttonTextColor: node.buttonTextColor,
+        hasSponsorLabel: node.hasSponsorLabel,
+        backgroundColor: node.backgroundColor,
+        hasImage: node.hasImage,
+        imageUrl: node.imageUrl,
+        textColor: node.textColor
+    };
+
+    if (options.target === 'email') {
+        const emailDoc = options.createDocument();
+        const emailDiv = emailDoc.createElement('div');
+
+        emailDiv.innerHTML = emailCTATemplate(dataset, options);
+
+        return {element: emailDiv.firstElementChild};
+    }
+
+    const htmlString = ctaCardTemplate(dataset);
+    const element = document.createElement('div');
+    element.innerHTML = htmlString?.trim();
+
+    return {element: element.firstElementChild};
+}

packages/kg-default-nodes/test/nodes/call-to-action.test.js

@@ -1,13 +1,13 @@
 const {dom} = require('../test-utils');
 const {createHeadlessEditor} = require('@lexical/headless');
 const {CallToActionNode, $isCallToActionNode, utils} = require('../../');
-
+const {$getRoot} = require('lexical');
 const editorNodes = [CallToActionNode];
 
 describe('CallToActionNode', function () {
     let editor;
     let dataset;
-    let exportOptions; // eslint-disable-line no-unused-vars
+    let exportOptions;
 
     // NOTE: all tests should use this function, without it you need manual
     // try/catch and done handling to avoid assertion failures not triggering
@@ -39,6 +39,7 @@ describe('CallToActionNode', function () {
             imageUrl: 'http://blog.com/image1.jpg'
         };
         exportOptions = {
+            exportFormat: 'html',
             dom
         };
     });
@@ -174,15 +175,174 @@ describe('CallToActionNode', function () {
     });
 
     describe('exportDOM', function () {
-        // not yet implemented
+        it('has all data attributes in Web', editorTest(function () {
+            dataset = {
+                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>'
+            };
+            const callToActionNode = new CallToActionNode(dataset);
+            const {element} = callToActionNode.exportDOM(exportOptions);
+
+            const html = element.outerHTML.toString();
+            html.should.containEql('data-layout="minimal"');
+            html.should.containEql('background-color: green');
+            html.should.containEql('background-color: #F0F0F0');
+            html.should.containEql('Get access now');
+            html.should.containEql('http://someblog.com/somepost');
+            html.should.containEql('/content/images/2022/11/koenig-lexical.jpg');// because hasImage is true
+            html.should.containEql('This is a new CTA Card.');
+            html.should.containEql('Sponsored'); // because hasSponsorLabel is true
+            html.should.containEql('cta-card');
+        }));
+
+        it('has all data attributes in Email', 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,
+                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 via email.</span></p>'
+            };
+            const callToActionNode = new CallToActionNode(dataset);
+            const {element} = callToActionNode.exportDOM(exportOptions);
+
+            const html = element.outerHTML.toString();
+            html.should.containEql('cta-card-email');
+            html.should.containEql('background-color: green');
+            html.should.containEql('background-color: #F0F0F0');
+            html.should.containEql('Get access now');
+            html.should.containEql('http://someblog.com/somepost');
+            html.should.containEql('/content/images/2022/11/koenig-lexical.jpg'); // because hasImage is true
+            html.should.containEql('This is a new CTA Card via email.');
+        }));
+
+        it('parses textValue correctly', editorTest(function () {
+            const callToActionNode = new CallToActionNode(dataset);
+            const {element} = callToActionNode.exportDOM(exportOptions);
+
+            const html = element.outerHTML.toString();
+            html.should.containEql('This is a cool advertisement');
+        }));
+
+        it('renders img tag when hasImage is true', editorTest(function () {
+            const callToActionNode = new CallToActionNode(dataset);
+            const {element} = callToActionNode.exportDOM(exportOptions);
+
+            const html = element.outerHTML.toString();
+            html.should.containEql('<img src="http://blog.com/image1.jpg" alt="CTA Image">');
+        }));
+
+        it('does not render img tag when hasImage is false', editorTest(function () {
+            dataset.hasImage = false;
+            const callToActionNode = new CallToActionNode(dataset);
+            const {element} = callToActionNode.exportDOM(exportOptions);
+
+            const html = element.outerHTML.toString();
+            html.should.not.containEql('<img src="http://blog.com/image1.jpg" alt="CTA Image">');
+        }));
     });
 
     describe('exportJSON', function () {
-        // not yet implemented
+        it('contains all data', editorTest(function () {
+            dataset = {
+                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>'
+            };
+            const callToActionNode = new CallToActionNode(dataset);
+            const json = callToActionNode.exportJSON();
+
+            json.should.deepEqual({
+                type: 'call-to-action',
+                version: 1,
+                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>',
+                visibility: {
+                    web: {
+                        nonMember: true,
+                        memberSegment: 'status:free,status:-free'
+                    },
+                    email: {
+                        memberSegment: 'status:free,status:-free'
+                    }
+                }
+            });
+        }));
     });
 
     describe('importJSON', function () {
-        // not yet implemented
+        it('imports all data', function (done) {
+            const serializedData = 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>'
+                    }],
+                    direction: null,
+                    format: '',
+                    indent: 0,
+                    type: 'root',
+                    version: 1
+                }
+            });
+
+            const editorState = editor.parseEditorState(serializedData);
+            editor.setEditorState(editorState);
+
+            editor.getEditorState().read(() => {
+                try {
+                    const [callToActionNode] = $getRoot().getChildren();
+                    $isCallToActionNode(callToActionNode).should.be.true();
+
+                    done();
+                } catch (e) {
+                    done(e);
+                }
+            });
+        });
     });
 
     describe('static properties', function () {
@@ -200,6 +360,9 @@ describe('CallToActionNode', function () {
     });
 
     describe('getTextContent', function () {
-        // not yet implemented
+        it('returns textValue', editorTest(function () {
+            const callToActionNode = new CallToActionNode(dataset);
+            callToActionNode.getTextContent().should.equal('This is a cool advertisement\n\n');
+        }));
     });
 });