ProsemirrorTables: Wondering why TableView class is not properly exposed

1

context: I would like to wrap the tableWrapper in an outer wrapper for styling purposes.

I figured maybe I could take TableView and do some updating to its constructor, however it’s not included in the type files and maybe I’m approaching this incorrectly. Is it safe to use as is (there’s the risk that TableView’s implementation will be updated in a future and our code could break), [should one] consider exposing it?

For reference, this is how I tried to extend the class in ts

class TableView extends (ProsemirrorTables as any).TableView {
    constructor(node: ProsemirrorModel.Node, cellMinWidth: number) {
        super(node, cellMinWidth);

        const wrapper = document.createElement("div");
        wrapper.className = "ProsemirrorEditor-outerTableWrapper";
        wrapper.appendChild(this.dom);
        this.dom = wrapper;
    }

(Cross posted from ProsemirrorTables)

2

Subclassing classes that weren’t designed to be subclassed is, despite what classical OO culture believed, usually a fragile and problematic thing to do. I think the class isn’t exported because there’s not a lot you can do with it. (But note that I don’t maintain the package anymore so it’s not my call.)

3

Yeah that makes sense. I guess another question to ask is if there are any ideas of how I could add a wrapping div around the tableWrapper. The plugin takes command so adding it via the schema’s toDom doesn’t work.

4

You could write your own TableView NodeView and re-use most of the methods in prosemirror-tables still.

    this.node = node
    this.cellMinWidth = cellMinWidth

    this.innerWrapper = document.createElement("div")
    this.innerWrapper.className = "innerTableWrapper"

    this.dom = document.createElement("div")
    this.dom.className = "outerTableWrapper"
    this.dom.appendChild(this.innerWrapper)

    this.table = this.innerWrapper.appendChild(document.createElement("table"))
    this.colgroup = this.table.appendChild(document.createElement("colgroup"))
    updateColumns(node, this.colgroup, this.table, cellMinWidth)
    this.contentDOM = this.table.appendChild(document.createElement("tbody"))
  }
5

I wanted to avoid doing that due to maintenance cost (if the owner decides to change TableView and now mine will be out of date), but I guess there doesn’t seem to be a clear way to do this that’d cover all my bases safely.

Anyway, I think I will move forward with that approach.

Thanks for the replies!

6

You could also try a PR to prosemirror-tables to add more configurability there, but I don’t know how quickly that would be responded to.