-
-
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, | |
}) |
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";
I think from prosemirror-tables.