When using the DOMSerializer table does not include colgroup / cols for pixel width’s, have others hit this issue? How have you worked around it ?
It’s pretty rough and it’s making some assumptions about the initial state of the table, but I wanted to share my proposed solution to this problem…
var fragment = DOMSerializer.fromSchema(this.schema).serializeFragment(this.view.state.doc.content);
domNode.appendChild(fragment);
domNode.querySelectorAll("table").forEach(function(table){
var colgroup = document.createElement("colgroup"), tbody = table.querySelector("tbody");
if ( table.rows && table.rows.length > 0 ) {
for ( var c=0, clen = table.rows[0].cells.length; c < clen; c++ ){
var cell = table.rows[0].cells[c],
colwidth = cell.getAttribute('data-colwidth'),
colwidths = [],
col;
if ( colwidth ) {
colwidths = colwidth.split(",");
for( var w=0, wlen = colwidths.length; w < wlen; w++ ) {
col = document.createElement("col");
col.style.width = colwidths[w] + "px";
colgroup.appendChild(col);
}
} else {
col = document.createElement("col");
colgroup.appendChild(col);
}
}
table.insertBefore(colgroup, tbody);
}
});
In schema I define table like this
tableNodes({
tableGroup: 'block',
cellContent: 'block+',
cellAttributes: {
background: {
default: null,
getFromDOM (dom) {
return dom.dataset.colwidth || null
},
setDOMAttr (value, attrs) {
if (value) {
attrs.style =
(attrs.style || '') + `width: ${value}px;`
}
}
}
}
})
Then use fixed layout for the table tag
table {
table-layout: fixed;
}