Support background colors for table

[kartikmandhan]

Is your feature request related to a problem? Please describe.

Currently table, has only support for toggling header cell, can we have support to provide custom background color for a cell in the table, as part of tableBubbleMenu

[kartikmandhan]

Will this feature be supported in future releases? Or can you give me a starting point, where I should start to build this, and then raise the MR for it. As I tried adding background-color to TableCell component from the browser-developer tools as well, but it doesn't work for me.

[sjdemartini]

Will this feature be supported in future releases? Or can you give me a starting point, where I should start to build this, and then raise the MR for it. As I tried adding background-color to TableCell component from the browser-developer tools as well, but it doesn't work for me.

I have no plans to implement this currently. In terms of where to start building this, I would recommend taking a look at the Tiptap docs on custom extensions https://tiptap.dev/docs/editor/extensions/custom-extensions. You will likely need to extend the TableCell extension, add a property to it, and use the property to render a color.

[kartikmandhan]

I just want the support for it, for example if an existing html has a background-color property that should render inside the editor.
<th style="background-color: red;> head</th> the css doesn't apply to this cell, will this part also need modification in the TableCell component of tiptap library or some modification in the mui-tiptap is sufficient for the usecase?
Please let me know the next steps to investigate @sjdemartini

[kartikmandhan]

The code below serves my usecase, but whether should I add this in mui-tiptap or not required is my ask, I can add the options in the Table bubble-menu as well if required, to support background-color for table cells.

import { TableCell } from "@tiptap/extension-table-cell";

const TableCellImproved = TableCell.extend({
  addAttributes() {
    return {
      ...this.parent?.(),
      backgroundColor: {
        default: null,
        renderHTML: (attributes) => {
          if (!attributes.backgroundColor) {
            return {};
          }

          return {
            style: `background-color: ${attributes.backgroundColor as string}`,
          };
        },
        parseHTML: (element) => {
          return element.style.backgroundColor.replace(/['"]+/g, "");
        },
      },
    };
  },
});

export default TableCellImproved;

[kartikmandhan]

Or In general, adding this snippet will support all the styles

import { TableCell } from "@tiptap/extension-table-cell";

const TableCellImproved = TableCell.extend({
  addAttributes() {
    return {
      ...this.parent?.(),
      style: {
        default: null,
        renderHTML: (attributes) => {
          if (!attributes.style) {
            return {};
          }

          return {
            style: attributes.style,
          };
        },
        parseHTML: (element) => {
          const style = element.getAttribute("style") || "";
          return style;
        },
      },
    };
  },
});

export default TableCellImproved;

[sjdemartini]

Thanks for sharing the examples in case others would like to see. I don't have plans to incorporate this into mui-tiptap at this time, and as you say it will require some relatively tricky modifications to the table bubble menu, but the beauty of tiptap is that you can modify as you need and bring your own extensions based on your own specific use case.

[kartikmandhan]

But we could at least add TableCellImproved via a PR, if you agree. That would enhance the rendering of HTML content by the editor.

[sjdemartini]

I think without additional functionality to utilize those new extension fields within mui-tiptap, and because it's so simple to define that sort of extension in a consuming project if someone wants it, there isn't much value in including that extension in mui-tiptap at this time.