add table default styling, add options to table plugins

packages/extension-table/src/TableView.ts

@@ -0,0 +1,61 @@
+// @ts-nocheck
+
+export class TableView {
+  constructor(node, cellMinWidth) {
+    this.node = node
+    this.cellMinWidth = cellMinWidth
+    this.dom = document.createElement('div')
+    this.dom.className = 'tableWrapper'
+    this.table = this.dom.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'))
+  }
+
+  update(node) {
+    if (node.type != this.node.type) return false
+    this.node = node
+    updateColumns(node, this.colgroup, this.table, this.cellMinWidth)
+    return true
+  }
+
+  ignoreMutation(record) {
+    return record.type == 'attributes' && (record.target == this.table || this.colgroup.contains(record.target))
+  }
+}
+
+export function updateColumns(node, colgroup, table, cellMinWidth, overrideCol, overrideValue) {
+  let totalWidth = 0; let
+    fixedWidth = true
+  let nextDOM = colgroup.firstChild; const
+    row = node.firstChild
+  for (let i = 0, col = 0; i < row.childCount; i++) {
+    const { colspan, colwidth } = row.child(i).attrs
+    for (let j = 0; j < colspan; j++, col++) {
+      const hasWidth = overrideCol == col ? overrideValue : colwidth && colwidth[j]
+      const cssWidth = hasWidth ? `${hasWidth}px` : ''
+      totalWidth += hasWidth || cellMinWidth
+      if (!hasWidth) fixedWidth = false
+      if (!nextDOM) {
+        colgroup.appendChild(document.createElement('col')).style.width = cssWidth
+      } else {
+        if (nextDOM.style.width != cssWidth) nextDOM.style.width = cssWidth
+        nextDOM = nextDOM.nextSibling
+      }
+    }
+  }
+
+  while (nextDOM) {
+    const after = nextDOM.nextSibling
+    nextDOM.parentNode.removeChild(nextDOM)
+    nextDOM = after
+  }
+
+  if (fixedWidth) {
+    table.style.width = `${totalWidth}px`
+    table.style.minWidth = ''
+  } else {
+    table.style.width = ''
+    table.style.minWidth = `${totalWidth}px`
+  }
+}