Fix double border in Column. Closes #290

GrapesJS · Jun 20, 2023 · 3bdd9a8 · 3bdd9a8
1 parent 673f038
commit 3bdd9a8
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -45,7 +45,7 @@
       <mj-body>
         <!-- Company Header -->
         <mj-section background-color="#f0f0f0">
-          <mj-column>
+          <mj-column border="10px solid #F45E43">
             <mj-text font-family="Barlow">A first line of text</mj-text>
             <mj-spacer height="50px" />
           </mj-column>

diff --git a/src/components/Column.ts b/src/components/Column.ts
@@ -89,9 +89,16 @@ export default (editor: Editor, { opt, coreMjmlModel, coreMjmlView, sandboxEl }:
       },
 
       renderStyle() {
-        const model_style = this.model.get('style') || {};
-        const style = Object.keys(this.model.get('style')).map(attr=>`${attr}:${model_style[attr]};`);
-        this.el.setAttribute('style', `${this.attributes.style} ${style.join(' ')} ${this.el.getAttribute('style')}`);
+        const { model, attributes, el } = this;
+        const modelStyle = model.get('style') || {};
+        const stylable = model.get('stylable') as string[];
+        const styles = Object.keys(modelStyle)
+          .filter(prop => stylable.indexOf(prop) > -1)
+          .map(prop => `${prop}:${modelStyle[prop]};`);
+        const styleResult = `${attributes.style} ${styles.join(' ')} ${el.getAttribute('style')}`;
+        el.setAttribute('style', styleResult);
+        // #290 Fix double borders
+        el.firstElementChild?.setAttribute('style', '');
         this.checkVisibility();
       },