-
-
Save hanspagel/de6cd0c30ece7afb3f2ba663768f373f to your computer and use it in GitHub Desktop.
| 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, | |
| }) |
I think from prosemirror-tables.
Right it is exported there, but not imported into the TipTap table extension; so seems it needs to be imported and exposed on the tiptap extension instance rather than importing the prosemirror-tables extension again.
So I was curious how you made it work when you wrote it.
Thanks again for sharing this, helpful learning the prosemirror transactions.
@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!
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";
Q:
line 13 where does the
columnResizePluginKeycome from?thanks