ebd43c7763
This noticeably improves performance in the admin panel, for example
when there are multiple richtext editors on one page (& likely
performance in other areas too, though I mainly tested rich text).
The babel plugin currently only optimizes files with a 'use client'
directive at the top - thus we have to make sure to add use client
wherever possible, even if it's imported by a parent client component.
There's one single component that broke when it was compiled using the
React compiler (it stopped being reactive and failed one of our admin
e2e tests):
150808f608
opting out of it completely fixed that issue
Fixes https://github.com/payloadcms/payload/issues/7366
50 lines
1.2 KiB
TypeScript
50 lines
1.2 KiB
TypeScript
'use client'
|
|
const replacedElements = [
|
|
'IMG',
|
|
'INPUT',
|
|
'TEXTAREA',
|
|
'SELECT',
|
|
'BUTTON',
|
|
'VIDEO',
|
|
'OBJECT',
|
|
'EMBED',
|
|
'IFRAME',
|
|
'HR',
|
|
]
|
|
|
|
/**
|
|
* From ChatGPT, only that verified it works for HR elements.
|
|
*
|
|
* HTML Elements can have CSS lineHeight applied to them, but it doesn't always affect the visual layout.
|
|
* This function checks if the line-height property has an effect on the element's layout.
|
|
* @param htmlElem
|
|
*/
|
|
export function doesLineHeightAffectElement(htmlElem: HTMLElement) {
|
|
if (!htmlElem) return false
|
|
|
|
// Check for replaced elements, elements that typically don't support line-height adjustments,
|
|
// and elements without visible content
|
|
|
|
if (
|
|
replacedElements.includes(htmlElem.tagName) ||
|
|
htmlElem.offsetHeight === 0 ||
|
|
htmlElem.offsetWidth === 0
|
|
) {
|
|
return false
|
|
}
|
|
|
|
// Check for specific CSS properties that negate line-height's visual effects
|
|
const style = window.getComputedStyle(htmlElem)
|
|
if (
|
|
style.display === 'table-cell' ||
|
|
style.position === 'absolute' ||
|
|
style.visibility === 'hidden' ||
|
|
style.opacity === '0'
|
|
) {
|
|
return false
|
|
}
|
|
|
|
// This is a basic check, and there can be more complex scenarios where line-height doesn't have an effect.
|
|
return true
|
|
}
|