Added image dimensions to CTA Card (#1446)

no issue

- In order for us to resize the images properly, we need to set the
  dimentions of the images in order for us to ratio it correctly when it
gets scaled for different disply types, eg email.
- This adds two new props to the `CallToActionNode` namely `imageWidth` and `imageHeight`.

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

@@ -18,6 +18,8 @@ export class CallToActionNode extends generateDecoratorNode({
         {name: 'backgroundColor', default: 'grey'},
         {name: 'hasImage', default: false},
         {name: 'imageUrl', default: ''},
+        {name: 'imageWidth', default: null},
+        {name: 'imageHeight', default: null},
         {name: 'href', default: '', urlType: 'url'}
     ]
 }) {

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

@@ -38,6 +38,8 @@ describe('CallToActionNode', function () {
             backgroundColor: 'none',
             hasImage: true,
             imageUrl: 'http://blog.com/image1.jpg',
+            imageWidth: 200,
+            imageHeight: 100,
             href: ''
         };
         exportOptions = {
@@ -69,11 +71,12 @@ describe('CallToActionNode', function () {
             callToActionNode.imageUrl.should.equal(dataset.imageUrl);
             callToActionNode.visibility.should.deepEqual(utils.visibility.buildDefaultVisibility());
             callToActionNode.href.should.equal(dataset.href);
+            callToActionNode.imageHeight.should.equal(dataset.imageHeight);
+            callToActionNode.imageWidth.should.equal(dataset.imageWidth);
         }));
 
         it('has setters for all properties', editorTest(function () {
             const callToActionNode = new CallToActionNode();
-
             callToActionNode.layout.should.equal('minimal');
             callToActionNode.layout = 'compact';
             callToActionNode.layout.should.equal('compact');
@@ -122,6 +125,14 @@ describe('CallToActionNode', function () {
             callToActionNode.imageUrl = 'http://blog.com/image1.jpg';
             callToActionNode.imageUrl.should.equal('http://blog.com/image1.jpg');
 
+            should(callToActionNode.imageHeight).be.null();
+            callToActionNode.imageHeight = 100;
+            callToActionNode.imageHeight.should.equal(100);
+
+            should(callToActionNode.imageWidth).be.null();
+            callToActionNode.imageWidth = 200;
+            callToActionNode.imageWidth.should.equal(200);
+
             callToActionNode.href.should.equal('');
             callToActionNode.href = 'http://blog.com/post1';
             callToActionNode.href.should.equal('http://blog.com/post1');
@@ -239,7 +250,6 @@ describe('CallToActionNode', function () {
 
             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');
@@ -311,6 +321,8 @@ describe('CallToActionNode', function () {
                 hasSponsorLabel: true,
                 sponsorLabel: '<p>This post is brought to you by our sponsors</p>',
                 imageUrl: '/content/images/2022/11/koenig-lexical.jpg',
+                imageWidth: 200,
+                imageHeight: 100,
                 layout: 'minimal',
                 showButton: true,
                 textValue: '<p><span style="white-space: pre-wrap;">This is a new CTA Card.</span></p>',
@@ -331,6 +343,8 @@ describe('CallToActionNode', function () {
                 hasSponsorLabel: true,
                 sponsorLabel: '<p>This post is brought to you by our sponsors</p>',
                 imageUrl: '/content/images/2022/11/koenig-lexical.jpg',
+                imageWidth: 200,
+                imageHeight: 100,
                 layout: 'minimal',
                 showButton: true,
                 textValue: '<p><span style="white-space: pre-wrap;">This is a new CTA Card.</span></p>',

packages/koenig-lexical/src/nodes/CallToActionNodeComponent.jsx

@@ -7,6 +7,7 @@ import {CallToActionCard} from '../components/ui/cards/CallToActionCard.jsx';
 import {LinkInput} from '../components/ui/LinkInput';
 import {SnippetActionToolbar} from '../components/ui/SnippetActionToolbar.jsx';
 import {ToolbarMenu, ToolbarMenuItem, ToolbarMenuSeparator} from '../components/ui/ToolbarMenu.jsx';
+import {getImageDimensions} from '../utils/getImageDimensions';
 import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
 import {useVisibilityToggle} from '../hooks/useVisibilityToggle.js';
 
@@ -91,12 +92,16 @@ 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;
         });
     };