Update the Table `width` when the `colwidth` of a TableCell is updated

CustomTable.js

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,
})

Q:
line 13 where does the columnResizePluginKey come from?

thanks

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";