Skip to content

Commit

Permalink
fix: issue with table col/row span
Browse files Browse the repository at this point in the history
  • Loading branch information
@VolodymyrBaydalka
VolodymyrBaydalka committed Oct 28, 2022
1 parent 75a7612 commit a3ea7c5
Show file tree
Hide file tree
Showing 8 changed files with 186 additions and 9 deletions.
7 changes: 5 additions & 2 deletions dist/docx-preview.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion dist/docx-preview.js.map
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/docx-preview.min.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/docx-preview.min.js.map
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "docx-preview",
"version": "0.1.13",
"version": "0.1.14",
"license": "Apache-2.0",
"keywords": [
"word",
Expand Down
8 changes: 5 additions & 3 deletions src/html-renderer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1007,16 +1007,18 @@ section.${c}>article { margin-bottom: auto; }
renderTableCell(elem: WmlTableCell) {
let result = this.createElement("td");

if (elem.verticalMerge) {
const key = this.currentCellPosition.col;
const key = this.currentCellPosition.col;

if (elem.verticalMerge) {
if (elem.verticalMerge == "restart") {
this.currentVerticalMerge[key] = result;
result.rowSpan = 1;
} else if (this.currentVerticalMerge[key]) {
this.currentVerticalMerge[key].rowSpan += 1;
result.style.display = "none";
}
} else {
this.currentVerticalMerge[key] = null;
}

this.renderClass(elem, result);
Expand All @@ -1026,7 +1028,7 @@ section.${c}>article { margin-bottom: auto; }
if (elem.span)
result.colSpan = elem.span;

this.currentCellPosition.col++;
this.currentCellPosition.col += result.colSpan;

return result;
}
Expand Down
Binary file added tests/render-test/table-spans/document.docx
View file
Binary file not shown.
172 changes: 172 additions & 0 deletions tests/render-test/table-spans/result.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,172 @@
<!--docxjs library predefined styles--><style>
.docx-wrapper { background: gray; padding: 30px; padding-bottom: 0px; display: flex; flex-flow: column; align-items: center; }
.docx-wrapper>section.docx { background: white; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); margin-bottom: 30px; }
.docx { color: black; }
section.docx { box-sizing: border-box; display: flex; flex-flow: column nowrap; position: relative; overflow: hidden; }
section.docx>article { margin-bottom: auto; }
.docx table { border-collapse: collapse; }
.docx table td, .docx table th { vertical-align: top; }
.docx p { margin: 0pt; min-height: 1em; }
.docx span { white-space: pre-wrap; overflow-wrap: break-word; }
.docx a { color: inherit; text-decoration: inherit; }
</style><!--docxjs mathml polyfill styles--><style>@namespace "http://www.w3.org/1998/Math/MathML";
math {
display: inline-block;
line-height: initial;
}

mfrac {
display: inline-block;
vertical-align: -50%;
text-align: center;
}
mfrac > :first-child {
border-bottom: solid thin currentColor;
}
mfrac > * {
display: block;
}

msub > :nth-child(2) {
font-size: smaller;
vertical-align: sub;
}

msup > :nth-child(2) {
font-size: smaller;
vertical-align: super;
}

munder, mover, munderover {
display: inline-flex;
flex-flow: column nowrap;
vertical-align: middle;
text-align: center;
}
munder > :not(:first-child), mover > :not(:first-child), munderover > :not(:first-child) {
font-size: smaller;
}

munderover > :last-child {
order: -1;
}

mroot, msqrt {
position: relative;
display: inline-block;
border-top: solid thin currentColor;
margin-top: 0.5px;
vertical-align: middle;
margin-left: 1ch;
}
mroot:before, msqrt:before {
content: "";
display: inline-block;
position: absolute;
width: 1ch;
left: -1ch;
top: -1px;
bottom: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 20 100%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27m0,75 l5,0 l5,25 l10,-100%27 stroke=%27black%27 fill=%27none%27 vector-effect=%27non-scaling-stroke%27/%3E%3C/svg%3E");
}
/*# sourceURL=webpack://./src/mathml.scss */
/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8uL3NyYy9tYXRobWwuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSwrQ0FBQTtBQUVBO0VBQ0kscUJBQUE7RUFDQSxvQkFBQTtBQUFKOztBQUdBO0VBQ0kscUJBQUE7RUFDQSxvQkFBQTtFQUNBLGtCQUFBO0FBQUo7QUFFSTtFQUNJLHNDQUFBO0FBQVI7QUFHSTtFQUNJLGNBQUE7QUFEUjs7QUFNSTtFQUNJLGtCQUFBO0VBQ0EsbUJBQUE7QUFIUjs7QUFRSTtFQUNJLGtCQUFBO0VBQ0EscUJBQUE7QUFMUjs7QUFTQTtFQUNJLG9CQUFBO0VBQ0Esd0JBQUE7RUFDQSxzQkFBQTtFQUNBLGtCQUFBO0FBTko7QUFRSTtFQUNJLGtCQUFBO0FBTlI7O0FBV0k7RUFBZ0IsU0FBQTtBQVBwQjs7QUFVQTtFQUNJLGtCQUFBO0VBQ0EscUJBQUE7RUFDQSxtQ0FBQTtFQUNBLGlCQUFBO0VBQ0Esc0JBQUE7RUFDQSxnQkFBQTtBQVBKO0FBU0k7RUFDSSxXQUFBO0VBQ0EscUJBQUE7RUFDQSxrQkFBQTtFQUNBLFVBQUE7RUFDQSxVQUFBO0VBQ0EsU0FBQTtFQUNBLFNBQUE7RUFDQSx5REFBQTtBQVBSIiwic291cmNlc0NvbnRlbnQiOlsiQG5hbWVzcGFjZSBcImh0dHA6Ly93d3cudzMub3JnLzE5OTgvTWF0aC9NYXRoTUxcIjtcclxuXHJcbm1hdGgge1xyXG4gICAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xyXG4gICAgbGluZS1oZWlnaHQ6IGluaXRpYWw7XHJcbn1cclxuXHJcbm1mcmFjIHtcclxuICAgIGRpc3BsYXk6IGlubGluZS1ibG9jaztcclxuICAgIHZlcnRpY2FsLWFsaWduOiAtNTAlO1xyXG4gICAgdGV4dC1hbGlnbjogY2VudGVyO1xyXG5cclxuICAgICY+OmZpcnN0LWNoaWxkIHtcclxuICAgICAgICBib3JkZXItYm90dG9tOiBzb2xpZCB0aGluIGN1cnJlbnRDb2xvcjtcclxuICAgIH1cclxuXHJcbiAgICAmPioge1xyXG4gICAgICAgIGRpc3BsYXk6IGJsb2NrO1xyXG4gICAgfVxyXG59XHJcblxyXG5tc3ViIHtcclxuICAgICY+Om50aC1jaGlsZCgyKSB7XHJcbiAgICAgICAgZm9udC1zaXplOiBzbWFsbGVyO1xyXG4gICAgICAgIHZlcnRpY2FsLWFsaWduOiBzdWI7XHJcbiAgICB9XHJcbn1cclxuXHJcbm1zdXAge1xyXG4gICAgJj46bnRoLWNoaWxkKDIpIHtcclxuICAgICAgICBmb250LXNpemU6IHNtYWxsZXI7XHJcbiAgICAgICAgdmVydGljYWwtYWxpZ246IHN1cGVyO1xyXG4gICAgfVxyXG59XHJcblxyXG5tdW5kZXIsIG1vdmVyLCBtdW5kZXJvdmVyIHtcclxuICAgIGRpc3BsYXk6IGlubGluZS1mbGV4O1xyXG4gICAgZmxleC1mbG93OiBjb2x1bW4gbm93cmFwO1xyXG4gICAgdmVydGljYWwtYWxpZ246IG1pZGRsZTtcclxuICAgIHRleHQtYWxpZ246IGNlbnRlcjtcclxuXHJcbiAgICAmPjpub3QoOmZpcnN0LWNoaWxkKSB7XHJcbiAgICAgICAgZm9udC1zaXplOiBzbWFsbGVyO1xyXG4gICAgfVxyXG59XHJcblxyXG5tdW5kZXJvdmVyIHtcclxuICAgICY+Omxhc3QtY2hpbGQgeyBvcmRlcjogLTE7IH1cclxufVxyXG5cclxubXJvb3QsIG1zcXJ0IHtcclxuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcclxuICAgIGRpc3BsYXk6IGlubGluZS1ibG9jaztcclxuICAgIGJvcmRlci10b3A6IHNvbGlkIHRoaW4gY3VycmVudENvbG9yOyAgXHJcbiAgICBtYXJnaW4tdG9wOiAwLjVweDtcclxuICAgIHZlcnRpY2FsLWFsaWduOiBtaWRkbGU7ICBcclxuICAgIG1hcmdpbi1sZWZ0OiAxY2g7IFxyXG5cclxuICAgICY6YmVmb3JlIHtcclxuICAgICAgICBjb250ZW50OiBcIlwiO1xyXG4gICAgICAgIGRpc3BsYXk6IGlubGluZS1ibG9jaztcclxuICAgICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XHJcbiAgICAgICAgd2lkdGg6IDFjaDtcclxuICAgICAgICBsZWZ0OiAtMWNoO1xyXG4gICAgICAgIHRvcDogLTFweDtcclxuICAgICAgICBib3R0b206IDA7XHJcbiAgICAgICAgYmFja2dyb3VuZC1pbWFnZTogdXJsKFwiZGF0YTppbWFnZS9zdmcreG1sLCUzQ3N2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyMCAxMDAnIHByZXNlcnZlQXNwZWN0UmF0aW89J25vbmUnJTNFJTNDcGF0aCBkPSdtMCw3NSBsNSwwIGw1LDI1IGwxMCwtMTAwJyBzdHJva2U9J2JsYWNrJyBmaWxsPSdub25lJyB2ZWN0b3ItZWZmZWN0PSdub24tc2NhbGluZy1zdHJva2UnLyUzRSUzQy9zdmclM0VcIik7XHJcbiAgICB9XHJcbn0iXSwic291cmNlUm9vdCI6IiJ9 */</style><!--docxjs document styles--><style>.docx span {
font-family: Liberation Serif;
min-height: 12.00pt;
font-size: 12.00pt;
}
.docx p {
}
p.docx_normal {
margin-top: 0.00pt;
margin-bottom: 0.00pt;
text-align: left;
}
p.docx_normal span {
font-family: Liberation Serif;
color: black;
min-height: 12.00pt;
font-size: 12.00pt;
}
p.docx_style14 {
margin-top: 12.00pt;
margin-bottom: 6.00pt;
text-align: left;
}
p.docx_style14 span {
font-family: Liberation Sans;
min-height: 14.00pt;
font-size: 14.00pt;
color: black;
}
p.docx_style15 {
margin-top: 0.00pt;
margin-bottom: 7.00pt;
line-height: 1.15;
text-align: left;
}
p.docx_style15 span {
font-family: Liberation Serif;
color: black;
min-height: 12.00pt;
font-size: 12.00pt;
}
p.docx_style16 {
margin-top: 0.00pt;
margin-bottom: 7.00pt;
line-height: 1.15;
text-align: left;
}
p.docx_style16 span {
font-family: Liberation Serif;
color: black;
min-height: 12.00pt;
font-size: 12.00pt;
}
p.docx_style17 {
margin-top: 6.00pt;
margin-bottom: 6.00pt;
text-align: left;
}
p.docx_style17 span {
font-style: italic;
min-height: 12.00pt;
font-size: 12.00pt;
font-family: Liberation Serif;
color: black;
}
p.docx_style18 {
margin-top: 0.00pt;
margin-bottom: 0.00pt;
text-align: left;
}
p.docx_style18 span {
font-family: Liberation Serif;
color: black;
min-height: 12.00pt;
font-size: 12.00pt;
}
p.docx_style19 {
margin-top: 0.00pt;
margin-bottom: 0.00pt;
text-align: left;
}
p.docx_style19 span {
font-family: Liberation Serif;
color: black;
min-height: 12.00pt;
font-size: 12.00pt;
}
p.docx_style20 {
text-align: center;
margin-top: 0.00pt;
margin-bottom: 0.00pt;
}
p.docx_style20 span {
font-weight: bold;
font-family: Liberation Serif;
color: black;
min-height: 12.00pt;
font-size: 12.00pt;
}
</style><div class="docx-wrapper"><section class="docx" id="docx-page-1" style="padding: 56.7pt; width: 595.3pt; min-height: 841.9pt;"><article><table style="width: 481.9pt; text-align: left; table-layout: auto;"><colgroup><col style="width: 139.7pt;"><col style="width: 72pt;"><col style="width: 67.55pt;"><col style="width: 67.5pt;"><col style="width: 67.55pt;"><col style="width: 67.6pt;"></colgroup><tr><td rowspan="6" style="width: 139.7pt; border-top: 0.25pt solid rgb(0, 0, 0); border-left: 0.25pt solid rgb(0, 0, 0); border-bottom: 0.25pt solid rgb(0, 0, 0); background-color: inherit; padding-top: 2.75pt; padding-bottom: 2.75pt;"><p class="docx_style19"><span>Test</span></p><p class="docx_style19"><span>Test</span></p><p class="docx_style19"><span>Test</span></p><p class="docx_style19"><span>Test</span></p><p class="docx_style19"><span>Test</span></p><p class="docx_style19"><span>Test</span></p><p class="docx_style19"><span>Test</span></p></td><td rowspan="2" style="width: 72pt; border-top: 0.25pt solid rgb(0, 0, 0); border-left: 0.25pt solid rgb(0, 0, 0); border-bottom: 0.25pt solid rgb(0, 0, 0); background-color: inherit; padding-top: 2.75pt; padding-bottom: 2.75pt;"><p class="docx_style19"><span>Test</span></p><p class="docx_style19"><span>Test</span></p></td><td rowspan="2" style="width: 67.55pt; border-top: 0.25pt solid rgb(0, 0, 0); border-left: 0.25pt solid rgb(0, 0, 0); border-bottom: 0.25pt solid rgb(0, 0, 0); background-color: inherit; padding-top: 2.75pt; padding-bottom: 2.75pt;"><p class="docx_style19"><span>Test</span></p><p class="docx_style19"><span>Test</span></p></td><td rowspan="2" style="width: 67.5pt; border-top: 0.25pt solid rgb(0, 0, 0); border-left: 0.25pt solid rgb(0, 0, 0); border-bottom: 0.25pt solid rgb(0, 0, 0); background-color: inherit; padding-top: 2.75pt; padding-bottom: 2.75pt;"><p class="docx_style19"><span>Test</span></p><p class="docx_style19"><span>Test</span></p></td><td colspan="2" style="width: 135.15pt; border-width: 0.25pt; border-style: solid; border-color: rgb(0, 0, 0); background-color: inherit; padding-top: 2.75pt; padding-bottom: 2.75pt;"><p class="docx_style19"><span>Test Test</span></p></td></tr><tr><td style="display: none; width: 139.7pt; border-top: 0.25pt solid rgb(0, 0, 0); border-left: 0.25pt solid rgb(0, 0, 0); border-bottom: 0.25pt solid rgb(0, 0, 0); background-color: inherit; padding-top: 2.75pt; padding-bottom: 2.75pt;"><p class="docx_style19"><span></span></p></td><td style="display: none; width: 72pt; border-top: 0.25pt solid rgb(0, 0, 0); border-left: 0.25pt solid rgb(0, 0, 0); border-bottom: 0.25pt solid rgb(0, 0, 0); background-color: inherit; padding-top: 2.75pt; padding-bottom: 2.75pt;"><p class="docx_style19"><span></span></p></td><td style="display: none; width: 67.55pt; border-top: 0.25pt solid rgb(0, 0, 0); border-left: 0.25pt solid rgb(0, 0, 0); border-bottom: 0.25pt solid rgb(0, 0, 0); background-color: inherit; padding-top: 2.75pt; padding-bottom: 2.75pt;"><p class="docx_style19"><span></span></p></td><td style="display: none; width: 67.5pt; border-top: 0.25pt solid rgb(0, 0, 0); border-left: 0.25pt solid rgb(0, 0, 0); border-bottom: 0.25pt solid rgb(0, 0, 0); background-color: inherit; padding-top: 2.75pt; padding-bottom: 2.75pt;"><p class="docx_style19"><span></span></p></td><td style="width: 67.55pt; border-left: 0.25pt solid rgb(0, 0, 0); border-bottom: 0.25pt solid rgb(0, 0, 0); background-color: inherit; padding-top: 2.75pt; padding-bottom: 2.75pt;"><p class="docx_style19"><span>Test</span></p></td><td style="width: 67.6pt; border-left: 0.25pt solid rgb(0, 0, 0); border-bottom: 0.25pt solid rgb(0, 0, 0); border-right: 0.25pt solid rgb(0, 0, 0); background-color: inherit; padding-top: 2.75pt; padding-bottom: 2.75pt;"><p class="docx_style19"><span>Test</span></p></td></tr><tr><td style="display: none; width: 139.7pt; border-top: 0.25pt solid rgb(0, 0, 0); border-left: 0.25pt solid rgb(0, 0, 0); border-bottom: 0.25pt solid rgb(0, 0, 0); background-color: inherit; padding-top: 2.75pt; padding-bottom: 2.75pt;"><p class="docx_style19"><span></span></p></td><td style="width: 72pt; border-left: 0.25pt solid rgb(0, 0, 0); border-bottom: 0.25pt solid rgb(0, 0, 0); background-color: inherit; padding-top: 2.75pt; padding-bottom: 2.75pt;"><p class="docx_style19"><span>Test</span></p></td><td style="width: 67.55pt; border-left: 0.25pt solid rgb(0, 0, 0); border-bottom: 0.25pt solid rgb(0, 0, 0); background-color: inherit; padding-top: 2.75pt; padding-bottom: 2.75pt;"><p class="docx_style19"><span>Test</span></p></td><td style="width: 67.5pt; border-left: 0.25pt solid rgb(0, 0, 0); border-bottom: 0.25pt solid rgb(0, 0, 0); background-color: inherit; padding-top: 2.75pt; padding-bottom: 2.75pt;"><p class="docx_style19"><span>Test</span></p></td><td style="width: 67.55pt; border-left: 0.25pt solid rgb(0, 0, 0); border-bottom: 0.25pt solid rgb(0, 0, 0); background-color: inherit; padding-top: 2.75pt; padding-bottom: 2.75pt;"><p class="docx_style19"><span>Test</span></p></td><td style="width: 67.6pt; border-left: 0.25pt solid rgb(0, 0, 0); border-bottom: 0.25pt solid rgb(0, 0, 0); border-right: 0.25pt solid rgb(0, 0, 0); background-color: inherit; padding-top: 2.75pt; padding-bottom: 2.75pt;"><p class="docx_style19"><span>Test</span></p></td></tr><tr><td style="display: none; width: 139.7pt; border-top: 0.25pt solid rgb(0, 0, 0); border-left: 0.25pt solid rgb(0, 0, 0); border-bottom: 0.25pt solid rgb(0, 0, 0); background-color: inherit; padding-top: 2.75pt; padding-bottom: 2.75pt;"><p class="docx_style19"><span></span></p></td><td colspan="5" style="width: 342.2pt; border-left: 0.25pt solid rgb(0, 0, 0); border-bottom: 0.25pt solid rgb(0, 0, 0); border-right: 0.25pt solid rgb(0, 0, 0); background-color: inherit; padding-top: 2.75pt; padding-bottom: 2.75pt;"><p class="docx_style19"><span>Test Test Test Test Test</span></p></td></tr><tr><td style="display: none; width: 139.7pt; border-top: 0.25pt solid rgb(0, 0, 0); border-left: 0.25pt solid rgb(0, 0, 0); border-bottom: 0.25pt solid rgb(0, 0, 0); background-color: inherit; padding-top: 2.75pt; padding-bottom: 2.75pt;"><p class="docx_style19"><span></span></p></td><td colspan="2" style="width: 139.55pt; border-left: 0.25pt solid rgb(0, 0, 0); border-bottom: 0.25pt solid rgb(0, 0, 0); background-color: inherit; padding-top: 2.75pt; padding-bottom: 2.75pt;"><p class="docx_style19"><span>Test Test</span></p><p class="docx_style19"><span>Test Test</span></p></td><td rowspan="2" colspan="3" style="width: 202.65pt; border-left: 0.25pt solid rgb(0, 0, 0); border-bottom: 0.25pt solid rgb(0, 0, 0); border-right: 0.25pt solid rgb(0, 0, 0); background-color: inherit; padding-top: 2.75pt; padding-bottom: 2.75pt;"><p class="docx_style19"><span>Test Test Test</span></p><p class="docx_style19"><span>Test Test Test</span></p><p class="docx_style19"><span>Test Test Test</span></p></td></tr><tr><td style="display: none; width: 139.7pt; border-top: 0.25pt solid rgb(0, 0, 0); border-left: 0.25pt solid rgb(0, 0, 0); border-bottom: 0.25pt solid rgb(0, 0, 0); background-color: inherit; padding-top: 2.75pt; padding-bottom: 2.75pt;"><p class="docx_style19"><span></span></p></td><td style="width: 72pt; border-left: 0.25pt solid rgb(0, 0, 0); border-bottom: 0.25pt solid rgb(0, 0, 0); background-color: inherit; padding-top: 2.75pt; padding-bottom: 2.75pt;"><p class="docx_style19"><span>Test</span></p></td><td style="width: 67.55pt; border-left: 0.25pt solid rgb(0, 0, 0); border-bottom: 0.25pt solid rgb(0, 0, 0); background-color: inherit; padding-top: 2.75pt; padding-bottom: 2.75pt;"><p class="docx_style19"><span>Test</span></p></td><td colspan="3" style="display: none; width: 202.65pt; border-left: 0.25pt solid rgb(0, 0, 0); border-bottom: 0.25pt solid rgb(0, 0, 0); border-right: 0.25pt solid rgb(0, 0, 0); background-color: inherit; padding-top: 2.75pt; padding-bottom: 2.75pt;"><p class="docx_style19"><span></span></p></td></tr></table><p class="docx_normal"><span></span></p></article></section></div>

0 comments on commit a3ea7c5

Please sign in to comment.