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