Skip to content

Commit b798b96

Browse files
mttrbrtsmttrbrts
authored
feat(ToHtmlStringVisitor): Switch variable elements to span tags
* feat(ToHtmlStringVisitor): Switch variable elements to span tags Signed-off-by: Matt Roberts <[email protected]> * test(HtmlTransformer): Update snapshots Signed-off-by: Matt Roberts <[email protected]>
1 parent 76601cb commit b798b96

File tree

2 files changed

+74
-22
lines changed

2 files changed

+74
-22
lines changed

‎packages/markdown-html/src/ToHtmlStringVisitor.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -96,10 +96,10 @@ class ToHtmlStringVisitor {
9696
parameters.result += `<div class="clause" clauseid="${thing.clauseid}" src="${thing.src}">\n${ToHtmlStringVisitor.visitChildren(this, thing)}</div>\n`;
9797
break;
9898
case 'Variable':
99-
parameters.result += `<div class="variable" id="${thing.id}">${thing.value}</div>\n`;
99+
parameters.result += `<span class="variable" id="${thing.id}">${thing.value}</span>\n`;
100100
break;
101101
case 'ComputedVariable':
102-
parameters.result += `<div class="computed>${thing.value}</div>\n`;
102+
parameters.result += `<span class="computed">${thing.value}</span>\n`;
103103
break;
104104
case 'CodeBlock':
105105
parameters.result += `<pre><code>\n${thing.text}</pre></code>\n`;
@@ -175,7 +175,7 @@ class ToHtmlStringVisitor {
175175
parameters.result += `<li>${ToHtmlStringVisitor.visitChildren(this, thing)}</li>\n`;
176176
break;
177177
case 'Document':
178-
parameters.result += `<html>\n<body>\n${ToHtmlStringVisitor.visitChildren(this, thing)}</body>\n</html>`;
178+
parameters.result += `<html>\n<body>\n<div class="document">\n${ToHtmlStringVisitor.visitChildren(this, thing)}</div>\n</body>\n</html>`;
179179
break;
180180
default:
181181
throw new Error(`Unhandled type ${thing.getType()}`);

‎packages/markdown-html/src/__snapshots__/HtmlTransformer.test.js.snap‎

Lines changed: 71 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -240,27 +240,29 @@ Object {
240240
exports[`html converts acceptance.md to html 2`] = `
241241
"<html>
242242
<body>
243+
<div class=\\"document\\">
243244
<h1>HELLO! This is the contract editor.</h1>
244245
<p>And below is a <strong>clause</strong>.</p>
245246
<div class=\\"clause\\" clauseid=\\"479adbb4-dc55-4d1a-ab12-b6c5e16900c0\\" src=\\"ap://[email protected]#721d1aa0999a5d278653e211ae2a64b75fdd8ca6fa1f34255533c942404c5c1f\\">
246-
<p>Acceptance of Delivery. <div class=\\"variable\\" id=\\"shipper\\">\\"Party A\\"</div>
247-
will be deemed to have completed its delivery obligations if in <div class=\\"variable\\" id=\\"receiver\\">\\"Party B\\"</div>
248-
's opinion, the <div class=\\"variable\\" id=\\"deliverable\\">\\"Widgets\\"</div>
249-
satisfies the Acceptance Criteria, and <div class=\\"variable\\" id=\\"receiver\\">\\"Party B\\"</div>
250-
notifies <div class=\\"variable\\" id=\\"shipper\\">\\"Party A\\"</div>
251-
in writing that it is accepting the <div class=\\"variable\\" id=\\"deliverable\\">\\"Widgets\\"</div>
247+
<p>Acceptance of Delivery. <span class=\\"variable\\" id=\\"shipper\\">\\"Party A\\"</span>
248+
will be deemed to have completed its delivery obligations if in <span class=\\"variable\\" id=\\"receiver\\">\\"Party B\\"</span>
249+
's opinion, the <span class=\\"variable\\" id=\\"deliverable\\">\\"Widgets\\"</span>
250+
satisfies the Acceptance Criteria, and <span class=\\"variable\\" id=\\"receiver\\">\\"Party B\\"</span>
251+
notifies <span class=\\"variable\\" id=\\"shipper\\">\\"Party A\\"</span>
252+
in writing that it is accepting the <span class=\\"variable\\" id=\\"deliverable\\">\\"Widgets\\"</span>
252253
.</p>
253-
<p>Inspection and Notice. <div class=\\"variable\\" id=\\"receiver\\">\\"Party B\\"</div>
254-
will have <div class=\\"variable\\" id=\\"businessDays\\">10</div>
255-
Business Days' to inspect and evaluate the <div class=\\"variable\\" id=\\"deliverable\\">\\"Widgets\\"</div>
256-
on the delivery date before notifying <div class=\\"variable\\" id=\\"shipper\\">\\"Party A\\"</div>
257-
that it is either accepting or rejecting the <div class=\\"variable\\" id=\\"deliverable\\">\\"Widgets\\"</div>
254+
<p>Inspection and Notice. <span class=\\"variable\\" id=\\"receiver\\">\\"Party B\\"</span>
255+
will have <span class=\\"variable\\" id=\\"businessDays\\">10</span>
256+
Business Days' to inspect and evaluate the <span class=\\"variable\\" id=\\"deliverable\\">\\"Widgets\\"</span>
257+
on the delivery date before notifying <span class=\\"variable\\" id=\\"shipper\\">\\"Party A\\"</span>
258+
that it is either accepting or rejecting the <span class=\\"variable\\" id=\\"deliverable\\">\\"Widgets\\"</span>
258259
.</p>
259-
<p>Acceptance Criteria. The \\"Acceptance Criteria\\" are the specifications the <div class=\\"variable\\" id=\\"deliverable\\">\\"Widgets\\"</div>
260-
must meet for the <div class=\\"variable\\" id=\\"shipper\\">\\"Party A\\"</div>
261-
to comply with its requirements and obligations under this agreement, detailed in <div class=\\"variable\\" id=\\"attachment\\">\\"Attachment X\\"</div>
260+
<p>Acceptance Criteria. The \\"Acceptance Criteria\\" are the specifications the <span class=\\"variable\\" id=\\"deliverable\\">\\"Widgets\\"</span>
261+
must meet for the <span class=\\"variable\\" id=\\"shipper\\">\\"Party A\\"</span>
262+
to comply with its requirements and obligations under this agreement, detailed in <span class=\\"variable\\" id=\\"attachment\\">\\"Attachment X\\"</span>
262263
, attached to this agreement.</p>
263264
</div>
265+
</div>
264266
</body>
265267
</html>"
266268
`;
@@ -300,9 +302,11 @@ Object {
300302
exports[`html converts blockquote.md to html 2`] = `
301303
"<html>
302304
<body>
305+
<div class=\\"document\\">
303306
<p>This is</p>
304307
<blockquote><p>A quote.</p>
305308
</blockquote>
309+
</div>
306310
</body>
307311
</html>"
308312
`;
@@ -443,24 +447,26 @@ Object {
443447
exports[`html converts clause.md to html 2`] = `
444448
"<html>
445449
<body>
446-
<p>This is a fixed interest loan to the amount of <div class=\\"variable\\" id=\\"loanAmount\\">100000.0</div>
450+
<div class=\\"document\\">
451+
<p>This is a fixed interest loan to the amount of <span class=\\"variable\\" id=\\"loanAmount\\">100000.0</span>
447452
448-
at the yearly interest rate of <div class=\\"variable\\" id=\\"rate\\">2.5</div>
453+
at the yearly interest rate of <span class=\\"variable\\" id=\\"rate\\">2.5</span>
449454
%
450-
with a loan term of <div class=\\"variable\\" id=\\"loanDuration\\">15</div>
455+
with a loan term of <span class=\\"variable\\" id=\\"loanDuration\\">15</span>
451456
,
452-
and monthly payments of <div class=\\"computed>667.0</div>
457+
and monthly payments of <span class=\\"computed\\">667.0</span>
453458
</p>
454459
<p>This is a fixed interest loan to the amount of 100000.0
455460
at the yearly interest rate of 2.5%
456461
with a loan term of 15,
457462
and monthly payments of 667.0</p>
458463
<div class=\\"clause\\" clauseid=\\"bar\\" src=\\"foo\\">
459464
<p>this is
460-
multiline <div class=\\"variable\\" id=\\"rate\\">2.5</div>
465+
multiline <span class=\\"variable\\" id=\\"rate\\">2.5</span>
461466
</p>
462467
<p>content</p>
463468
</div>
469+
</div>
464470
</body>
465471
</html>"
466472
`;
@@ -484,11 +490,13 @@ block.
484490
exports[`html converts codeblock.md to html 2`] = `
485491
"<html>
486492
<body>
493+
<div class=\\"document\\">
487494
<pre><code>
488495
this is a multiline
489496
code
490497
block.
491498
</pre></code>
499+
</div>
492500
</body>
493501
</html>"
494502
`;
@@ -530,6 +538,7 @@ Object {
530538
exports[`html converts codeblock-info.md to html 2`] = `
531539
"<html>
532540
<body>
541+
<div class=\\"document\\">
533542
<pre><code>
534543
this is a multiline
535544
code
@@ -538,6 +547,7 @@ exports[`html converts codeblock-info.md to html 2`] = `
538547
539548
which should be handled by the video plugin.
540549
</pre></code>
550+
</div>
541551
</body>
542552
</html>"
543553
`;
@@ -576,7 +586,9 @@ Object {
576586
exports[`html converts emph.md to html 2`] = `
577587
"<html>
578588
<body>
589+
<div class=\\"document\\">
579590
<p>This is <emph>some</emph> text.</p>
591+
</div>
580592
</body>
581593
</html>"
582594
`;
@@ -620,7 +632,9 @@ Object {
620632
exports[`html converts emph-strong.md to html 2`] = `
621633
"<html>
622634
<body>
635+
<div class=\\"document\\">
623636
<p>This is <emph><strong>some</strong></emph> text.</p>
637+
</div>
624638
</body>
625639
</html>"
626640
`;
@@ -647,7 +661,9 @@ Object {
647661
exports[`html converts h1.md to html 2`] = `
648662
"<html>
649663
<body>
664+
<div class=\\"document\\">
650665
<h1>Heading One</h1>
666+
</div>
651667
</body>
652668
</html>"
653669
`;
@@ -674,7 +690,9 @@ Object {
674690
exports[`html converts h2.md to html 2`] = `
675691
"<html>
676692
<body>
693+
<div class=\\"document\\">
677694
<h2>Heading Two</h2>
695+
</div>
678696
</body>
679697
</html>"
680698
`;
@@ -701,7 +719,9 @@ Object {
701719
exports[`html converts h3.md to html 2`] = `
702720
"<html>
703721
<body>
722+
<div class=\\"document\\">
704723
<h3>Heading Three</h3>
724+
</div>
705725
</body>
706726
</html>"
707727
`;
@@ -728,7 +748,9 @@ Object {
728748
exports[`html converts h4.md to html 2`] = `
729749
"<html>
730750
<body>
751+
<div class=\\"document\\">
731752
<h4>Heading Four</h4>
753+
</div>
732754
</body>
733755
</html>"
734756
`;
@@ -755,7 +777,9 @@ Object {
755777
exports[`html converts h5.md to html 2`] = `
756778
"<html>
757779
<body>
780+
<div class=\\"document\\">
758781
<h5>Heading Five</h5>
782+
</div>
759783
</body>
760784
</html>"
761785
`;
@@ -782,7 +806,9 @@ Object {
782806
exports[`html converts h6.md to html 2`] = `
783807
"<html>
784808
<body>
809+
<div class=\\"document\\">
785810
<h6>Heading Six</h6>
811+
</div>
786812
</body>
787813
</html>"
788814
`;
@@ -830,7 +856,9 @@ Object {
830856
exports[`html converts html-inline.md to html 2`] = `
831857
"<html>
832858
<body>
859+
<div class=\\"document\\">
833860
<p>This is a <custom src=\\"property\\"/> property.</p>
861+
</div>
834862
</body>
835863
</html>"
836864
`;
@@ -884,8 +912,10 @@ Object {
884912
exports[`html converts html-mixed.md to html 2`] = `
885913
"<html>
886914
<body>
915+
<div class=\\"document\\">
887916
<h1>Heading One</h1>
888917
<video src=\\"https://www.youtube.com/embed/dQw4w9WgXcQ\\"/><p>done.</p>
918+
</div>
889919
</body>
890920
</html>"
891921
`;
@@ -919,7 +949,9 @@ Object {
919949
exports[`html converts inline-code.md to html 2`] = `
920950
"<html>
921951
<body>
952+
<div class=\\"document\\">
922953
<p>This is <code>inline code</code>.</p>
954+
</div>
923955
</body>
924956
</html>"
925957
`;
@@ -960,7 +992,9 @@ Object {
960992
exports[`html converts link.md to html 2`] = `
961993
"<html>
962994
<body>
995+
<div class=\\"document\\">
963996
<p>This is <a href=\\"http://clause.io\\">a link/>.</p>
997+
</div>
964998
</body>
965999
</html>"
9661000
`;
@@ -1017,10 +1051,12 @@ contents
10171051
exports[`html converts multiline-html-block.md to html 2`] = `
10181052
"<html>
10191053
<body>
1054+
<div class=\\"document\\">
10201055
<p>This is a custom</p>
10211056
<custom src=\\"property\\">
10221057
contents
10231058
</custom><p>block.</p>
1059+
</div>
10241060
</body>
10251061
</html>"
10261062
`;
@@ -1106,6 +1142,7 @@ Object {
11061142
exports[`html converts ol.md to html 2`] = `
11071143
"<html>
11081144
<body>
1145+
<div class=\\"document\\">
11091146
<p>This is an ordered list:</p>
11101147
11111148
<ol>
@@ -1115,6 +1152,7 @@ exports[`html converts ol.md to html 2`] = `
11151152
</li>
11161153
<li><p>three</p>
11171154
</li></ol><p>Done.</p>
1155+
</div>
11181156
</body>
11191157
</html>"
11201158
`;
@@ -1200,6 +1238,7 @@ Object {
12001238
exports[`html converts ol-tight.md to html 2`] = `
12011239
"<html>
12021240
<body>
1241+
<div class=\\"document\\">
12031242
<p>This is an ordered list:</p>
12041243
12051244
<ol>
@@ -1209,6 +1248,7 @@ exports[`html converts ol-tight.md to html 2`] = `
12091248
</li>
12101249
<li><p>three</p>
12111250
</li></ol><p>Done.</p>
1251+
</div>
12121252
</body>
12131253
</html>"
12141254
`;
@@ -1243,8 +1283,10 @@ Object {
12431283
exports[`html converts paragraphs.md to html 2`] = `
12441284
"<html>
12451285
<body>
1286+
<div class=\\"document\\">
12461287
<p>This is first paragraph.</p>
12471288
<p>This is second paragraph.</p>
1289+
</div>
12481290
</body>
12491291
</html>"
12501292
`;
@@ -1283,7 +1325,9 @@ Object {
12831325
exports[`html converts strong.md to html 2`] = `
12841326
"<html>
12851327
<body>
1328+
<div class=\\"document\\">
12861329
<p>This is <strong>some</strong> text.</p>
1330+
</div>
12871331
</body>
12881332
</html>"
12891333
`;
@@ -1309,7 +1353,9 @@ Object {
13091353
exports[`html converts text.md to html 2`] = `
13101354
"<html>
13111355
<body>
1356+
<div class=\\"document\\">
13121357
<p>This is some text.</p>
1358+
</div>
13131359
</body>
13141360
</html>"
13151361
`;
@@ -1347,10 +1393,12 @@ Object {
13471393
exports[`html converts thematicbreak.md to html 2`] = `
13481394
"<html>
13491395
<body>
1396+
<div class=\\"document\\">
13501397
<p>This is</p>
13511398
13521399
<hr>
13531400
<p>A footer.</p>
1401+
</div>
13541402
</body>
13551403
</html>"
13561404
`;
@@ -1434,6 +1482,7 @@ Object {
14341482
exports[`html converts ul.md to html 2`] = `
14351483
"<html>
14361484
<body>
1485+
<div class=\\"document\\">
14371486
<p>This is an unordered list:</p>
14381487
14391488
<ul>
@@ -1443,6 +1492,7 @@ exports[`html converts ul.md to html 2`] = `
14431492
</li>
14441493
<li><p>three</p>
14451494
</li></ul><p>Done.</p>
1495+
</div>
14461496
</body>
14471497
</html>"
14481498
`;
@@ -1526,6 +1576,7 @@ Object {
15261576
exports[`html converts ul-tight.md to html 2`] = `
15271577
"<html>
15281578
<body>
1579+
<div class=\\"document\\">
15291580
<p>This is an unordered list:</p>
15301581
15311582
<ul>
@@ -1535,6 +1586,7 @@ exports[`html converts ul-tight.md to html 2`] = `
15351586
</li>
15361587
<li><p>three</p>
15371588
</li></ul><p>Done.</p>
1589+
</div>
15381590
</body>
15391591
</html>"
15401592
`;

0 commit comments

Comments
 (0)