Fix boolean values when getting HTML with withProp

GrapesJS · Mar 9, 2024 · d406685 · d406685
1 parent 78a5f19
commit d406685
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 4 deletions.
diff --git a/src/dom_components/model/Component.ts b/src/dom_components/model/Component.ts
@@ -1590,7 +1590,8 @@ export default class Component extends StyleableModel<ComponentProperties> {
       forEach(props, (value, key) => {
         const skipProps = ['classes', 'attributes', 'components'];
         if (key[0] !== '_' && skipProps.indexOf(key) < 0) {
-          attributes[`data-gjs-${key}`] = isArray(value) || isObject(value) ? JSON.stringify(value) : value;
+          attributes[`data-gjs-${key}`] =
+            isArray(value) || isObject(value) ? JSON.stringify(value) : isBoolean(value) ? `${value}` : value;
         }
       });
     }

diff --git a/test/specs/dom_components/model/Component.ts b/test/specs/dom_components/model/Component.ts
@@ -152,7 +152,7 @@ describe('Component', () => {
     obj = new Component({}, compOpts);
     obj.set({
       bool: true,
-      boolf: false,
+      removable: false,
       string: 'st\'ri"ng',
       array: [1, 'string', true],
       object: { a: 1, b: 'string', c: true },
@@ -165,12 +165,12 @@ describe('Component', () => {
     let resStr = "st'ri&quot;ng";
     let resArr = '[1,&quot;string&quot;,true]';
     let resObj = '{&quot;a&quot;:1,&quot;b&quot;:&quot;string&quot;,&quot;c&quot;:true}';
-    let res = `<div data-gjs-bool data-gjs-string="${resStr}" data-gjs-array="${resArr}" data-gjs-object="${resObj}" data-gjs-empty="" data-gjs-zero="0"></div>`;
+    let res = `<div data-gjs-removable="false" data-gjs-bool="true" data-gjs-string="${resStr}" data-gjs-array="${resArr}" data-gjs-object="${resObj}" data-gjs-empty="" data-gjs-zero="0"></div>`;
     expect(obj.toHTML({ withProps: true })).toEqual(res);
     resStr = 'st&apos;ri"ng';
     resArr = '[1,"string",true]';
     resObj = '{"a":1,"b":"string","c":true}';
-    res = `<div data-gjs-bool data-gjs-string='${resStr}' data-gjs-array='${resArr}' data-gjs-object='${resObj}' data-gjs-empty="" data-gjs-zero="0"></div>`;
+    res = `<div data-gjs-removable="false" data-gjs-bool="true" data-gjs-string='${resStr}' data-gjs-array='${resArr}' data-gjs-object='${resObj}' data-gjs-empty="" data-gjs-zero="0"></div>`;
     expect(obj.toHTML({ withProps: true, altQuoteAttr: true })).toEqual(res);
   });