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, | |
}) |
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:
import { columnResizingPluginKey } from "@_ueberdosis/prosemirror-tables";
import { Plugin } from "prosemirror-state";
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@hanspagel man, thank you very much for this. This gist is the closest thing I have found about how to hack in the column width attributes.
One question, in line 19 you reference this
columnResizingPluginKey.getState(state)
.The thing is that at that point, that PluginKey does not exists.
I tried creating it this way:
const columnResizingPluginKey= new PluginKey('tableColumnResizing');
But when getting here:
columnPluginKey.getState(state)
Its undefined. Any idea on how to achieve this?
Thanks a lot!