It is not possible to resize a table's column if the editable status of the editor changed from false to true (Vue 2)

[edri]

What’s the bug you are facing?

In my Vue 2 project, I have a TipTap editor that is disabled by default (editable status is set to false during the initialization of the component) and that contains a resizable table.

If the editable status of the editor changes to true for example after a button click, the table's columns remain not resizable, even though we can edit the content of the table.

How can we reproduce the bug on our side?

Create a new table-compatible editor, which is disabled by default, then changes its editable status with this.editor.setOptions({ editable: true });. The columns remain not resizable.

Here is an example: https://codesandbox.io/s/awesome-beaver-nd10k?file=/src/components/TipTap.vue

Can you provide a CodeSandbox?

https://codesandbox.io/s/awesome-beaver-nd10k?file=/src/components/TipTap.vue

What did you expect to happen?

When the editor's editable status changes to true, one should be able to resize the table's columns.

Anything to add? (optional)

No response

Did you update your dependencies?

• Yes, I’ve updated my dependencies to use the latest version of all packages.

Are you sponsoring us?

• Yes, I’m a sponsor. 💖

[longlongago2]

The same problem!

[philippkuehn]

Hey, this is a limitation of prosemirror-tables, which unfortunately is currently not maintained anymore. Maybe we will do a re-write ourselves someday, but this is a huge project and will take a long time.

The only thing you can do right now is to re-create the editor.

[edri]

I re-created it and it is indeed working. Thank you!

[bryanjtc]

@edri Can you share your solution?

[edri]

Hi @bryanjtc, sure here is a sample of my code:

data() {
    return {
      editor: null,
      isDisabled: true,
    };
},
watch: {
    isDisabled() {
      // We have to re-create the whole editor when its `editable` property changes, otherwise the user won't be able to resize tables columns.
      this.destroyEditor();
      this.createEditor();
    },
},
mounted() {
  this.createEditor();
},
beforeUnmount() {
  this.destroyEditor();
},
methods: {
    createEditor() {
      this.editor = new Editor({
        extensions: [
          // ...
          Table.configure({
            resizable: true,
          }),
        ],
        content: '<p>I’m running Tiptap with Vue.js. 🎉</p>',
        editable: !this.isDisabled,
      });
    },
    destroyEditor() {
      if (this.editor) {
        this.editor.destroy();
      }
    },
},

In summary, what I did is re-creating the whole editor every time my isDisabled data changes.