Merge pull request #368 from GrapesJS/fix/line-height Closes #367 #369

GrapesJS · Aug 21, 2024 · a3f0cc2 · a3f0cc2
2 parents c59ace8 + 96e81a6
commit a3f0cc2
Show file tree

Hide file tree

Showing 5 changed files with 296 additions and 55 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,10 @@
+{
+  "endOfLine": "lf",
+  "insertPragma": false,
+  "requirePragma": false,
+  "trailingComma": "all",
+  "tabWidth": 2,
+  "useTabs": false,
+  "singleQuote": true,
+  "printWidth": 120
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/Text.ts b/src/components/Text.ts
@@ -20,19 +20,31 @@ export default (editor: Editor, { coreMjmlModel, coreMjmlView }: ComponentPlugin
         draggable: componentsToQuery([typeColumn, typeHero]),
         highlightable: false,
         stylable: [
-          'height', 'font-style', 'font-size', 'font-weight', 'font-family', 'color',
-          'line-height', 'letter-spacing', 'text-decoration', 'align', 'text-transform',
-          'padding', 'padding-top', 'padding-left', 'padding-right', 'padding-bottom',
-          'container-background-color'
+          'height',
+          'font-style',
+          'font-size',
+          'font-weight',
+          'font-family',
+          'color',
+          'line-height',
+          'letter-spacing',
+          'text-decoration',
+          'align',
+          'text-transform',
+          'padding',
+          'padding-top',
+          'padding-left',
+          'padding-right',
+          'padding-bottom',
+          'container-background-color',
         ],
         'style-default': {
           'padding-top': '10px',
           'padding-bottom': '10px',
           'padding-right': '25px',
           'padding-left': '25px',
           'font-size': '13px',
-          'line-height': '22px',
-          'align': 'left',
+          align: 'left',
         },
       },
     },

diff --git a/tests/specs/__snapshots__/issue-367.test.ts.snap b/tests/specs/__snapshots__/issue-367.test.ts.snap
@@ -0,0 +1,139 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Line Height should expect default line height as 22px and export correctly in html 1`] = `
+"<!doctype html>
+<html xmlns=\\"http://www.w3.org/1999/xhtml\\" xmlns:v=\\"urn:schemas-microsoft-com:vml\\" xmlns:o=\\"urn:schemas-microsoft-com:office:office\\">
+  <head>
+    <title></title>
+    <!--[if !mso]><!-->
+    <meta http-equiv=\\"X-UA-Compatible\\" content=\\"IE=edge\\">
+    <!--<![endif]-->
+    <meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=UTF-8\\">
+    <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1\\">
+    <style type=\\"text/css\\">
+      #outlook a { padding:0; }
+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }
+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }
+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }
+      p { display:block;margin:13px 0; }
+    </style>
+    <!--[if mso]>
+    <noscript>
+    <xml>
+    <o:OfficeDocumentSettings>
+      <o:AllowPNG/>
+      <o:PixelsPerInch>96</o:PixelsPerInch>
+    </o:OfficeDocumentSettings>
+    </xml>
+    </noscript>
+    <![endif]-->
+    <!--[if lte mso 11]>
+    <style type=\\"text/css\\">
+      .mj-outlook-group-fix { width:100% !important; }
+    </style>
+    <![endif]-->
+    
+      <!--[if !mso]><!-->
+        <link href=\\"https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700\\" rel=\\"stylesheet\\" type=\\"text/css\\">
+        <style type=\\"text/css\\">
+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);
+        </style>
+      <!--<![endif]-->
+
+    
+    
+    <style type=\\"text/css\\">
+      @media only screen and (min-width:480px) {
+        .mj-column-per-100 { width:100% !important; max-width: 100%; }
+      }
+    </style>
+    <style media=\\"screen and (min-width:480px)\\">
+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }
+    </style>
+    
+  
+    <style type=\\"text/css\\">
+    
+    
+    </style>
+    <style type=\\"text/css\\">
+    
+    </style>
+    
+  </head>
+  <body style=\\"word-spacing:normal;\\">
+    
+    
+      <div
+         style=\\"\\"
+      >
+        
+      
+      <!--[if mso | IE]><table align=\\"center\\" border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" class=\\"\\" role=\\"presentation\\" style=\\"width:600px;\\" width=\\"600\\" ><tr><td style=\\"line-height:0px;font-size:0px;mso-line-height-rule:exactly;\\"><![endif]-->
+    
+      
+      <div  style=\\"margin:0px auto;max-width:600px;\\">
+        
+        <table
+           align=\\"center\\" border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" role=\\"presentation\\" style=\\"width:100%;\\"
+        >
+          <tbody>
+            <tr>
+              <td
+                 style=\\"direction:ltr;font-size:0px;padding:20px 0;text-align:center;\\"
+              >
+                <!--[if mso | IE]><table role=\\"presentation\\" border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\"><tr><td class=\\"\\" style=\\"vertical-align:top;width:600px;\\" ><![endif]-->
+            
+      <div
+         class=\\"mj-column-per-100 mj-outlook-group-fix\\" style=\\"font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;\\"
+      >
+        
+      <table
+         border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" role=\\"presentation\\" style=\\"vertical-align:top;\\" width=\\"100%\\"
+      >
+        <tbody>
+          
+              <tr>
+                <td
+                   align=\\"left\\" style=\\"font-size:0px;padding:10px 25px;word-break:break-word;\\"
+                >
+                  
+      <div
+         style=\\"font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;\\"
+      >Lorem Ipsum is simply dummy text of the printing and
+                typesetting industry. Lorem Ipsum has been the industry's
+                standard dummy text ever since the 1500s, when an unknown
+                printer took a galley of type and scrambled it to make a type
+                specimen book. It has survived not only five centuries, but also
+                the leap into electronic typesetting, remaining essentially
+                unchanged. It was popularised in the 1960s with the release of
+                Letraset sheets containing Lorem Ipsum passages, and more
+                recently with desktop publishing software like Aldus PageMaker
+                including versions of Lorem Ipsum.</div>
+    
+                </td>
+              </tr>
+            
+        </tbody>
+      </table>
+    
+      </div>
+    
+          <!--[if mso | IE]></td></tr></table><![endif]-->
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        
+      </div>
+    
+      
+      <!--[if mso | IE]></td></tr></table><![endif]-->
+    
+    
+      </div>
+    
+  </body>
+</html>
+  "
+`;
diff --git a/tests/specs/issue-367.test.ts b/tests/specs/issue-367.test.ts
@@ -0,0 +1,67 @@
+import grapesjs, { Editor } from 'grapesjs';
+import grapesJSMJML from '../../src';
+
+const rawMjml = `
+    <mjml>
+        <mj-body>
+          <mj-section>
+            <mj-column>
+              <mj-text
+                >Lorem Ipsum is simply dummy text of the printing and
+                typesetting industry. Lorem Ipsum has been the industry's
+                standard dummy text ever since the 1500s, when an unknown
+                printer took a galley of type and scrambled it to make a type
+                specimen book. It has survived not only five centuries, but also
+                the leap into electronic typesetting, remaining essentially
+                unchanged. It was popularised in the 1960s with the release of
+                Letraset sheets containing Lorem Ipsum passages, and more
+                recently with desktop publishing software like Aldus PageMaker
+                including versions of Lorem Ipsum.
+              </mj-text>
+            </mj-column>
+          </mj-section>
+        </mj-body>
+      </mjml>
+`;
+
+// https://github.com/GrapesJS/mjml/issues/367
+describe('Line Height', () => {
+  let editor: Editor;
+
+  beforeEach((done) => {
+    const e = grapesjs.init({
+      container: '#gjs',
+      plugins: [grapesJSMJML],
+    });
+    editor = e;
+
+    editor.getModel().loadOnStart();
+    editor.on('change:readyLoad', () => done());
+  });
+
+  afterEach(() => {
+    editor.destroy();
+  });
+
+  test('Editor exists', () => {
+    expect(editor).toBeTruthy();
+  });
+
+  test('should expect default line height as 22px and export correctly in html', () => {
+    editor.addComponents(rawMjml);
+
+    const mjmlComponent = editor.getComponents().at(0);
+    const mjmlBody = mjmlComponent.components().at(0);
+    const mjmlSection = mjmlBody.components().at(0);
+    const mjmlColumn = mjmlSection.components().at(0);
+    const mjmlText = mjmlColumn.components().at(0);
+
+    const lineHeight = mjmlText.getAttributes()['line-height'];
+    expect(lineHeight).toBe(undefined);
+
+    const { errors, html } = editor.Commands.run('mjml-code-to-html');
+
+    expect(errors).toHaveLength(0);
+    expect(html).toMatchSnapshot();
+  });
+});