feat: enhance table extension to respect user-defined styles for widths (#7165)

* feat: enhance table extension to respect user-defined styles for widths

* feat: add pull request description template to guidelines

* fix: improve width style check in updateColumns function

* refactor: remove unused addAttributes method from Table extension

Author: bdbch

.changeset/table-width-fix-respect-styles.md

@@ -0,0 +1,5 @@
+---
+"@tiptap/extension-table": patch
+---
+
+Allow setting custom table widths by respecting user-provided `style` attributes instead of always overriding them with calculated widths.

.github/instructions/PR.instructions.md

@@ -0,0 +1,43 @@
+---
+applyTo: '**'
+---
+
+When asked to write a pull request description, use the following template:
+
+```
+## Changes Overview
+
+<!-- Briefly describe your changes. -->
+
+## Implementation Approach
+
+<!-- Describe your approach to implementing these changes. Keep it concise. -->
+
+## Testing Done
+
+<!-- Explain how you tested these changes. Link to test scenarios or specs if relevant. -->
+
+## Verification Steps
+
+<!-- Describe steps reviewers can take to verify the functionality of your changes. -->
+
+## Additional Notes
+
+<!-- Add any other notes or screenshots about the PR here. -->
+
+## Checklist
+
+- [ ] I have created a [changeset](https://github.com/changesets/changesets) for this PR if necessary.
+- [ ] My changes do not break the library.
+- [ ] I have added tests where applicable.
+- [ ] I have followed the project guidelines.
+- [ ] I have fixed any lint issues.
+
+## Related Issues
+
+<!-- Link any related issues here -->
+```
+
+When generating the pull request description, ensure it is clear, concise, and follows the provided template. Focus on the key aspects of the changes made, how they were implemented, and how they can be verified.
+
+Make it as minimal as possible to convey the necessary information effectively without causing to much noise and making it hard to read.

.github/instructions/changeset.instructions.md

@@ -0,0 +1,9 @@
+---
+applyTo: '**'
+---
+
+When a user asks for a changeset to be generated, follow the following rules:
+
+Create a good changeset file for the changes in the diff. Don't include non-frontfacing changes, as the changeset file will be used for the changelog. Our users don't care about deep logic that they'll not interact with so we only want to generate changelog entries for front-facing/user-facing changes and API changes our users will need to know about.
+
+Make sure that the changeset file stays minimal and short but includes important information that may be important for our users to understand what actually changed.

.gitignore

@@ -44,3 +44,5 @@ demos/src/Dev/**
 # instructions
 .github/instructions/*
 !.github/instructions/tiptap.instructions.md
+!.github/instructions/changeset.instructions.md
+!.github/instructions/PR.instructions.md

packages/extension-table/src/table/TableView.ts

@@ -58,7 +58,10 @@ export function updateColumns(
     nextDOM = after
   }
 
-  if (fixedWidth) {
+  // Check if user has set a width style on the table node
+  const hasUserWidth = node.attrs.style && typeof node.attrs.style === 'string' && /\bwidth\s*:/i.test(node.attrs.style)
+
+  if (fixedWidth && !hasUserWidth) {
     table.style.width = `${totalWidth}px`
     table.style.minWidth = ''
   } else {
@@ -86,6 +89,12 @@ export class TableView implements NodeView {
     this.dom = document.createElement('div')
     this.dom.className = 'tableWrapper'
     this.table = this.dom.appendChild(document.createElement('table'))
+
+    // Apply user styles to the table element
+    if (node.attrs.style) {
+      this.table.style.cssText = node.attrs.style
+    }
+
     this.colgroup = this.table.appendChild(document.createElement('colgroup'))
     updateColumns(node, this.colgroup, this.table, cellMinWidth)
     this.contentDOM = this.table.appendChild(document.createElement('tbody'))

packages/extension-table/src/table/table.ts

@@ -280,10 +280,20 @@ export const Table = Node.create<TableOptions>({
   renderHTML({ node, HTMLAttributes }) {
     const { colgroup, tableWidth, tableMinWidth } = createColGroup(node, this.options.cellMinWidth)
 
+    const userStyles = HTMLAttributes.style as string | undefined
+
+    function getTableStyle() {
+      if (userStyles) {
+        return userStyles
+      }
+
+      return tableWidth ? `width: ${tableWidth}` : `min-width: ${tableMinWidth}`
+    }
+
     const table: DOMOutputSpec = [
       'table',
       mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
-        style: tableWidth ? `width: ${tableWidth}` : `min-width: ${tableMinWidth}`,
+        style: getTableStyle(),
       }),
       colgroup,
       ['tbody', 0],