Tiptap: Table cell background color with tiptap extensions

[Drabble]

I have made a button to change the background-color style attribute of a table cell. I am using setCellAttr('background','#F100F1') to change the color, but nothing happens.

Here is an example with my button on the top left of the page. When you select a cell and click on the button, nothing happens.

https://codesandbox.io/s/vue-issue-template-forked-z22wj?file=/src/App.vue

Am I using setCellAttr wrong? Thank you!

[inarendran]

There is an issue with setCellAttr however you can write your own custom command to do this. refer node_modules/prosemirror-tables/src/commands.js

[Drabble]

In order to set the color now (with the changes in the pull request), I can use the following code to change the background-color of a cell:

<chrome
  value="#000000"
  @input="
    commands.setCellAttr({
      name: 'background',
      value: $event.hex,
  })">
</chrome>

I have made a temporary command that I can use instead of the one in tiptap-extensions until the PR is merged:

import { Node } from "tiptap";
import { setCellAttr } from "prosemirror-tables";

export default class SetCellAttrFix extends Node {
  get name() {
    return "setCellAttrFix";
  }

  get schema() {
    return {
      tableGroup: "block",
      cellContent: "block+",
      cellAttributes: {
        background: {
          default: null,
          getFromDOM(dom) {
            return dom.style.backgroundColor || null;
          },
          setDOMAttr(value, attrs) {
            if (value) {
              const style = { style: `${attrs.style || ""}background-color: ${value};` };
              Object.assign(attrs, style);
            }
          },
        },
      },
    };
  }

  commands({ schema }) {
    return {
      setCellAttrFix: ({ name, value }) => setCellAttr(name, value),
    };
  }
}