You can not select more than 25 topics
			Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
		
		
		
		
		
			
		
			
				
					92 lines
				
				2.4 KiB
			
		
		
			
		
	
	
					92 lines
				
				2.4 KiB
			| 
								 
											3 years ago
										 
									 | 
							
								// @ts-nocheck
							 | 
						||
| 
								 | 
							
								import { Node as ProseMirrorNode } from 'prosemirror-model'
							 | 
						||
| 
								 | 
							
								import { NodeView } from 'prosemirror-view'
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								export function updateColumns(node: ProseMirrorNode, colgroup: Element, table: Element, cellMinWidth: number, overrideCol?: number, overrideValue?: any) {
							 | 
						||
| 
								 | 
							
								  let totalWidth = 0
							 | 
						||
| 
								 | 
							
								  let fixedWidth = true
							 | 
						||
| 
								 | 
							
								  let nextDOM = colgroup.firstChild
							 | 
						||
| 
								 | 
							
								  const row = node.firstChild
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								  for (let i = 0, col = 0; i < row.childCount; i += 1) {
							 | 
						||
| 
								 | 
							
								    const { colspan, colwidth } = row.child(i).attrs
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								    for (let j = 0; j < colspan; j += 1, col += 1) {
							 | 
						||
| 
								 | 
							
								      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`
							 | 
						||
| 
								 | 
							
								  }
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								export class TableView implements NodeView {
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								  node: ProseMirrorNode
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								  cellMinWidth: number
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								  dom: Element
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								  table: Element
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								  colgroup: Element
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								  contentDOM: Element
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								  constructor(node: ProseMirrorNode, cellMinWidth: number) {
							 | 
						||
| 
								 | 
							
								    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: ProseMirrorNode) {
							 | 
						||
| 
								 | 
							
								    if (node.type !== this.node.type) {
							 | 
						||
| 
								 | 
							
								      return false
							 | 
						||
| 
								 | 
							
								    }
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								    this.node = node
							 | 
						||
| 
								 | 
							
								    updateColumns(node, this.colgroup, this.table, this.cellMinWidth)
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								    return true
							 | 
						||
| 
								 | 
							
								  }
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								  ignoreMutation(mutation: MutationRecord | { type: 'selection'; target: Element }) {
							 | 
						||
| 
								 | 
							
								    return mutation.type === 'attributes' && (mutation.target === this.table || this.colgroup.contains(mutation.target))
							 | 
						||
| 
								 | 
							
								  }
							 | 
						||
| 
								 | 
							
								}
							 |