@fishawack/lab-velocity 1.6.0 → 1.7.0

package/components/_basic.scss

@@ -48,7 +48,7 @@
     .icon {
         width: 24px;
         min-width: 24px;
-        padding-bottom: 24px;
+        padding: 0px !important;
         fill: #cfd8dd !important
     }
 }

package/components/_wysiwyg2.scss

@@ -115,3 +115,22 @@
     }
 }
 
+
+
+.lab-table, .lab-table-cell, .lab-table-header {
+    border: solid .5px $color1;
+}
+.lab-table-header {
+    background-color: $color5;
+}
+
+.lab-table {
+    a {
+        text-decoration: underline;
+    }
+}
+.lab-table-cell {
+    &:active, &:focus-within, &.selectedCell {
+        background-color: transparentize($color: $color5, $amount: .8);
+    }
+}

package/form/Wysiwyg/CustomTableView.ts

@@ -0,0 +1,124 @@
+import { Node as ProseMirrorNode } from '@tiptap/pm/model'
+import { NodeView, ViewMutationRecord } from '@tiptap/pm/view'
+
+export function getColStyleDeclaration(minWidth: number, width: number | undefined): [string, string] {
+    if (width) {
+      // apply the stored width unless it is below the configured minimum cell width
+      return ['width', `${Math.max(width, minWidth)}px`]
+    }
+  
+    // set the minimum with on the column if it has no stored width
+    return ['min-width', `${minWidth}px`]
+  
+  }
+
+export function updateColumns(
+  node: ProseMirrorNode,
+  colgroup: HTMLTableColElement, // <colgroup> has the same prototype as <col>
+  table: HTMLTableElement,
+  cellMinWidth: number,
+  overrideCol?: number,
+  overrideValue?: number,
+) {
+  let totalWidth = 0
+  let fixedWidth = false
+  let nextDOM = colgroup.firstChild
+  const row = node.firstChild
+
+  if (row !== null) {
+    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]) as number | undefined
+        const cssWidth = hasWidth ? `${hasWidth}px` : ''
+
+        totalWidth += hasWidth || cellMinWidth
+
+        if (!hasWidth) {
+          fixedWidth = false
+        }
+
+        if (!nextDOM) {
+          const colElement = document.createElement('col')
+
+          const [propertyKey, propertyValue] = getColStyleDeclaration(cellMinWidth, hasWidth)
+
+          colElement.style.setProperty(propertyKey, propertyValue)
+
+          colgroup.appendChild(colElement)
+        } else {
+          if ((nextDOM as HTMLTableColElement).style.width !== cssWidth) {
+            const [propertyKey, propertyValue] = getColStyleDeclaration(cellMinWidth, hasWidth);
+
+            (nextDOM as HTMLTableColElement).style.setProperty(propertyKey, propertyValue)
+          }
+
+          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 CustomTableView implements NodeView {
+  node: ProseMirrorNode
+
+  cellMinWidth: number
+
+  dom: HTMLDivElement
+
+  table: HTMLTableElement
+
+  colgroup: HTMLTableColElement
+
+  contentDOM: HTMLTableSectionElement
+
+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'))
+
+        if (node.attrs.class) {
+            this.table.className = node.attrs.class
+        }
+}
+
+  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: ViewMutationRecord) {
+    return (
+      mutation.type === 'attributes'
+      && (mutation.target === this.table || this.colgroup.contains(mutation.target))
+    )
+  }
+}

package/form/Wysiwyg/Table.js

@@ -0,0 +1,30 @@
+import Table from '@tiptap/extension-table'
+import {CustomTableView} from './CustomTableView.ts'
+
+export default Table.extend({
+
+    // @ts-ignore
+    addOptions() {
+        return {
+            HTMLAttributes: {},
+            resizable: true,
+            handleWidth: 5,
+            cellMinWidth: 25,
+            // TODO: fix
+            View: CustomTableView, /* REPLACED BY CUSTOM_TABLE_VIEW */
+            lastColumnResizable: true,
+            allowTableNodeSelection: false,
+        }
+    },
+
+    addAttributes() {
+        return {
+            ...this.parent?.(),
+            class: {
+                default: 'lab-table',
+                parseHTML: element => element.getAttribute('class'),
+                renderHTML: attributes => attributes.class ? {class: attributes.class} : {},
+            },
+        }
+    },
+})

package/form/Wysiwyg2.vue

@@ -150,7 +150,7 @@ import { ElDropdown, ElDropdownItem, ElDropdownMenu, ElDialog, ElButton, ElInput
 import { Editor, EditorContent } from '@tiptap/vue-3'
 import StarterKit from '@tiptap/starter-kit';
 import Underline from '@tiptap/extension-underline'
-import Table from '@tiptap/extension-table'
+import Table from "./Wysiwyg/Table.js"
 import TableCell from '@tiptap/extension-table-cell'
 import TableHeader from '@tiptap/extension-table-header'
 import TableRow from '@tiptap/extension-table-row'
@@ -253,12 +253,22 @@ export default {
         ];
         if(this.$props.table) {
             extensions.push(
-            Table.configure({
-                resizable: true,
+            Table,
+            TableRow.configure({
+                HTMLAttributes: {
+                    class: 'lab-table-row'
+                }
+            }),
+            TableHeader.configure({
+                HTMLAttributes: {
+                    class: 'lab-table-header'
+                }
             }),
-            TableRow,
-            TableHeader,
-            TableCell);
+            TableCell.configure({
+                HTMLAttributes: {
+                    class: 'lab-table-cell'
+                }
+            }));
         }
 
         this.editor = new Editor({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fishawack/lab-velocity",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "Avalere Health branded style system",
   "scripts": {
     "setup": "npm ci || npm i && npm run content",