Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(table): set min-width to <col> #5464

Merged
merged 5 commits into from
Oct 30, 2024
Merged

Conversation

Ragnar-Oock
Copy link
Contributor

Changes Overview

Add min-width to the style attribute of <col> elements when width is not available (the user didn't resize column)

Implementation Approach

Added a helper to generate the style of the <col> elements from the stored column width and the configured cellMinWidth

Testing Done

  • Updated tests for editor.getHTML in Table related suites
  • Added a tests case to check if <col> elements were generated with the appropriate style attribute

Verification Steps

  • Open the table demo
  • remove the width: 100% set on the table
  • create an empty column (remove existing content or insert a column)

=> The empty columns (or those with not enough content to push them above the minimum) respect the configured cellMinWidth

Additional Notes

I took the liberty of fixing up the types in the TableView.ts file after removing the // @ts-nocheck present at the top of the file. I have no objection to reverting the type changes if they are deemed out of scope for the PR.

Checklist

  • I have created a changeset 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

#5435

Copy link

changeset-bot bot commented Aug 9, 2024

🦋 Changeset detected

Latest commit: 644b141

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 54 packages
Name Type
@tiptap/extension-table Patch
@tiptap/core Patch
@tiptap/extension-blockquote Patch
@tiptap/extension-bold Patch
@tiptap/extension-bubble-menu Patch
@tiptap/extension-bullet-list Patch
@tiptap/extension-character-count Patch
@tiptap/extension-code-block-lowlight Patch
@tiptap/extension-code-block Patch
@tiptap/extension-code Patch
@tiptap/extension-collaboration-cursor Patch
@tiptap/extension-collaboration Patch
@tiptap/extension-color Patch
@tiptap/extension-document Patch
@tiptap/extension-dropcursor Patch
@tiptap/extension-floating-menu Patch
@tiptap/extension-focus Patch
@tiptap/extension-font-family Patch
@tiptap/extension-gapcursor Patch
@tiptap/extension-hard-break Patch
@tiptap/extension-heading Patch
@tiptap/extension-highlight Patch
@tiptap/extension-history Patch
@tiptap/extension-horizontal-rule Patch
@tiptap/extension-image Patch
@tiptap/extension-italic Patch
@tiptap/extension-link Patch
@tiptap/extension-list-item Patch
@tiptap/extension-list-keymap Patch
@tiptap/extension-mention Patch
@tiptap/extension-ordered-list Patch
@tiptap/extension-paragraph Patch
@tiptap/extension-placeholder Patch
@tiptap/extension-strike Patch
@tiptap/extension-subscript Patch
@tiptap/extension-superscript Patch
@tiptap/extension-table-cell Patch
@tiptap/extension-table-header Patch
@tiptap/extension-table-row Patch
@tiptap/extension-task-item Patch
@tiptap/extension-task-list Patch
@tiptap/extension-text-align Patch
@tiptap/extension-text-style Patch
@tiptap/extension-text Patch
@tiptap/extension-typography Patch
@tiptap/extension-underline Patch
@tiptap/extension-youtube Patch
@tiptap/html Patch
@tiptap/pm Patch
@tiptap/react Patch
@tiptap/starter-kit Patch
@tiptap/suggestion Patch
@tiptap/vue-2 Patch
@tiptap/vue-3 Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Copy link

netlify bot commented Aug 9, 2024

Deploy Preview for tiptap-embed ready!

Name Link
🔨 Latest commit 644b141
🔍 Latest deploy log https://app.netlify.com/sites/tiptap-embed/deploys/6721f9ce686d790008b365e4
😎 Deploy Preview https://deploy-preview-5464--tiptap-embed.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

- update and run tests relative to tables
- fix types in TableView after removing @ts-nocheck
}

nextDOM = nextDOM.nextSibling
if (nextDOM === null) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry for the nit, would prefer to keep this as

Suggested change
if (nextDOM === null) {
if (!nextDOM) {

Just in case it is undefined, and to reduce differentiation from the prior behavior

if (nextDOM === null) {
const colElement = document.createElement('col')

colElement.style.setProperty(...getColStyleDeclaration(cellMinWidth, hasWidth))
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

While clever, I would prefer to be explicit around this, so that it is easy to understand what is happening:

Suggested change
colElement.style.setProperty(...getColStyleDeclaration(cellMinWidth, hasWidth))
const [propertyKey, propertyValue] = getColStyleDeclaration(cellMinWidth, hasWidth)
colElement.style.setProperty(propertyKey, propertyValue)

Same thing in the next few lines

Comment on lines 1 to 14
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 getColStyle(minWidth: number, width: number): string {
return getColStyleDeclaration(minWidth, width).join(': ')
}
Copy link
Contributor

@nperez0111 nperez0111 Aug 12, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is abstracting over a couple of if statements, I'm not sure it warrants the complexity it adds.

I would honestly prefer for there to be a single function here, either stick to the string version or the array version, both just adds complexity and indirection.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I extracted them because the logic was originally copy-pasted in both the create and the update code, I can remove the getColStyle function and do the concatenation in the table creation function directly instead of having a function in this file

Copy link
Contributor

@nperez0111 nperez0111 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Other than the slight nits, this looks look to be a high quality PR. Thanks for your contribution

@Ragnar-Oock
Copy link
Contributor Author

I'll commit the changes when I get the time

@Ragnar-Oock
Copy link
Contributor Author

I forgot to run the tests and I had fuck up something in my code
something else came up with the tests but I don't think it's related to my code, the test suite for Extensions/History/React failed one test when running the full test suite and up to 4 when running them via the UI. Some other tests failed when run with npm run test but succeeded when running them manually via npm run test:open

@Ragnar-Oock
Copy link
Contributor Author

Is there anything I can do to get this PR merged ? It would allow me to remove some rather unsavory code from my codebase (i.e. copy-paste of the files changed by the PR)

@nperez0111
Copy link
Contributor

Hi @Ragnar-Oock, I hadn't realized this was ready yet. It seemed to me that some of your tests you wanted fix: #5464 (comment)

Copy link
Contributor

@nperez0111 nperez0111 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This all looks good to me!

@nperez0111 nperez0111 merged commit 1523901 into ueberdosis:develop Oct 30, 2024
14 checks passed
@nperez0111
Copy link
Contributor

Thanks for your contribution.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
No open projects
Archived in project
Development

Successfully merging this pull request may close these issues.

2 participants