loadDesign - Cannot convert undefined or null to object

[johnykes]

Hi guys,

Scenario with no errors:

1. create a span with Hello world
2. export
   htmlEditorRef?.current?.editor?.exportHtml((data) => {
   const newTemplate = {
   name: values.name,
   content: data.html,
   design: JSON.stringify(data.design),
   subject: values.subject
   };
3. restore later from the design
   htmlEditorRef?.current?.editor?.loadDesign(design)

=> All good

Scenario with errors:

1. create a simple button
2. save and load in the same way
   then I see this error:

TypeError: Cannot convert undefined or null to object
    at Function.values (<anonymous>)
    at editor.js:2:1762513
    at produce (editor.js:2:3506765)
    at 16 (editor.js:2:1762490)
    at P (editor.js:2:1765883)
    at P (editor.js:2:1765875)
    at P (editor.js:2:1765875)
    at P (editor.js:2:1765875)
    at P (editor.js:2:1765875)
    at P (editor.js:2:1765875)

Data with the button created using this package, version 1.7.11:

{"counters":{"u_column":1,"u_row":1,"u_content_html":1,"u_content_button":1},"body":{"id":"5ge3qCVTnh","rows":[{"id":"GsM1br6nr3","cells":[1],"columns":[{"id":"QNDsfnxmPP","contents":[{"id":"4CEEZkTyZ5","type":"html","values":{"html":"<strong>Hello, world!</strong>","displayCondition":null,"_styleGuide":null,"containerPadding":"10px","anchor":"","_meta":{"htmlID":"u_content_html_1","htmlClassNames":"u_content_html"},"selectable":true,"draggable":true,"duplicatable":true,"deletable":true,"hideable":true}},{"id":"4CWcH7v4p7","type":"button","values":{"href":{"name":"phone","attrs":{"href":"tel:{{phone}}"},"values":{"phone":"24626424624"}},"buttonColors":{"color":"#dc2727","backgroundColor":"#3AAEE0","hoverColor":"#FFFFFF","hoverBackgroundColor":"#3AAEE0"},"size":{"autoWidth":true,"width":"100%"},"fontSize":"14px","lineHeight":"120%","textAlign":"center","padding":"10px 20px","border":{},"borderRadius":"4px","displayCondition":null,"_styleGuide":null,"containerPadding":"10px","anchor":"","_meta":{"htmlID":"u_content_button_1","htmlClassNames":"u_content_button"},"selectable":true,"draggable":true,"duplicatable":true,"deletable":true,"hideable":true,"text":"<span style="\&quot;line-height:">Button Text</span>","_languages":{},"calculatedWidth":110,"calculatedHeight":37}}],"values":{"backgroundColor":"","padding":"0px","border":{},"borderRadius":"0px","_meta":{"htmlID":"u_column_1","htmlClassNames":"u_column"}}}],"values":{"displayCondition":null,"columns":false,"_styleGuide":null,"backgroundColor":"","columnsBackgroundColor":"","backgroundImage":{"url":"","fullWidth":true,"repeat":"no-repeat","size":"custom","position":"center","customPosition":["50%","50%"]},"padding":"0px","anchor":"","hideDesktop":false,"_meta":{"htmlID":"u_row_1","htmlClassNames":"u_row"},"selectable":true,"draggable":true,"duplicatable":true,"deletable":true,"hideable":true}}],"headers":[],"footers":[],"values":{"_styleGuide":null,"popupPosition":"center","popupWidth":"600px","popupHeight":"auto","borderRadius":"10px","contentAlign":"center","contentVerticalAlign":"center","contentWidth":"500px","fontFamily":{"label":"Arial","value":"arial,helvetica,sans-serif"},"textColor":"#000000","popupBackgroundColor":"#FFFFFF","popupBackgroundImage":{"url":"","fullWidth":true,"repeat":"no-repeat","size":"cover","position":"center"},"popupOverlay_backgroundColor":"rgba(0, 0, 0, 0.1)","popupCloseButton_position":"top-right","popupCloseButton_backgroundColor":"#DDDDDD","popupCloseButton_iconColor":"#000000","popupCloseButton_borderRadius":"0px","popupCloseButton_margin":"0px","popupCloseButton_action":{"name":"close_popup","attrs":{"onClick":"document.querySelector('.u-popup-container').style.display = 'none';"}},"language":{},"backgroundColor":"#F7F8F9","preheaderText":"","linkStyle":{"body":true,"linkColor":"#0000ee","linkHoverColor":"#0000ee","linkUnderline":true,"linkHoverUnderline":true},"backgroundImage":{"url":"","fullWidth":true,"repeat":"no-repeat","size":"custom","position":"center"},"_meta":{"htmlID":"u_body","htmlClassNames":"u_body"}}},"schemaVersion":17}

Am I doing something wrong? I guess not since it's working for other elements, but not for buttons...

[pnp-os]

@johnykes I was facing a similar issue, Resolved this by adding a proper null check on loadDesign function. Calling loadDesign with empty data is throwing NPE internally.