Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix Missing Default Style in HTML Export #368

Merged
merged 6 commits into from
Aug 21, 2024
Merged

Fix Missing Default Style in HTML Export #368

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
cb96b7f
test: add snapshot showcasing error
danstarns Aug 17, 2024
b61aec1
fix: revert index
danstarns Aug 17, 2024
6a15f20
test: fix snapshots
danstarns Aug 17, 2024
b13b40c
Merge branch 'master' into fix/line-height
artf Aug 21, 2024
4992ec8
Up lock
artf Aug 21, 2024
96e81a6
Remove default line-height from mj-text
artf Aug 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
139 changes: 139 additions & 0 deletions tests/specs/__snapshots__/issue-367.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;\\"
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

line-height: 1

This test asserts the issue @RakulAgn found.

Thoughts @artf ?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd say it was wrong on our side to define as default 22px where mj-text has 1 as default (not in px).
IMHO it would make more sense to remove that default value on our side as 1 is not in px so it's not in line with the style manager configuration.

>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>
"
`;
68 changes: 68 additions & 0 deletions tests/specs/issue-367.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
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 defaultLineHeight = "22px";
const lineHeight = mjmlText.getAttributes()["line-height"];
expect(lineHeight).toBe(defaultLineHeight);

const { errors, html } = editor.Commands.run("mjml-code-to-html");

expect(errors).toHaveLength(0);
expect(html).toMatchSnapshot();
});
});
Loading