Last active
September 17, 2022 17:10
-
-
Save hanspagel/de6cd0c30ece7afb3f2ba663768f373f to your computer and use it in GitHub Desktop.
Update the Table `width` when the `colwidth` of a TableCell is updated
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const CustomTable = Table.extend({ | |
// Add a `width` attribute | |
addAttributes() { | |
return { | |
...this.parent?.(), | |
width: { | |
default: null, | |
}, | |
} | |
}, | |
// Add a ProseMirror plugin to listen for colwidth changes | |
// and update the `width` attribute | |
addProseMirrorPlugins() { | |
return [ | |
...this.parent?.(), | |
new Plugin({ | |
appendTransaction: (transactions, oldState, state) => { | |
const transaction = transactions[0] | |
const resizingState = columnResizingPluginKey.getState(state) | |
// Check if it’s a resize transaction | |
if (!resizingState.activeHandle || !resizingState.dragging) { | |
return | |
} | |
// Loop only through the range that has been modified | |
const { doc, before } = transaction | |
const from = before.content.findDiffStart(doc.content) | |
const to = before.content.findDiffEnd(doc.content) | |
if (!from || !to || from === to.b) { | |
return | |
} | |
// Create a new transaction first | |
const tr = state.tr | |
state.doc.nodesBetween(from, to.b, (node, pos) => { | |
if (node.type.name !== 'table') { | |
return | |
} | |
// Get the table width from the DOM | |
const width = this.editor.view.nodeDOM(pos)?.offsetWidth | |
// Update the `width` attribute | |
tr.setNodeMarkup(pos, undefined, { | |
...node.attrs, | |
width, | |
}) | |
}) | |
if (!tr.steps.length) { | |
return | |
} | |
return tr | |
}, | |
}), | |
] | |
}, | |
}).configure({ | |
resizable: true, | |
}) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thanks a lot, this is a life saver. Ended up geting the width from the table and also passed it down to my extended tableCell. With this I can now calculate and set a width percentage on renderHtml on cells.
The imports that is needed from prosemirror: