[lexical-playground][lexical-list] Bug Fix: Made checklist icon fully scalable, clickable, and properly spaced at large font sizes by swrsaini · Pull Request #7558 · facebook/lexical

swrsaini · 2025-05-21T22:37:32Z

Current behavior:

The checklist icon (checkbox) does not scale properly with large font sizes.
The clickable area of the checkbox does not cover the entire icon at larger sizes, making it hard to toggle.
The checkmark inside the icon remains small and is not visually balanced.
The margin between the icon and the checklist item text is inconsistent at larger sizes.

Changes introduced by this PR:

Ensured the checklist icon and its checkmark scale proportionally with the font size of the checklist item.
Made the entire icon area fully clickable, regardless of size.
Improved the visual alignment and thickness of the checkmark for better visibility.
Fixed the margin between the icon and the item text for consistent spacing at all sizes.

Closes #7554

Before

Checklist icon and checkmark did not scale with large font sizes.
Only part of the icon was clickable at large sizes.
Margin between icon and text was inconsistent.

After

Checklist icon and checkmark scale smoothly with font size.
The entire icon is clickable, even at large sizes.
Margin between icon and text is consistent and visually balanced.

2025-05-22.03-59-39.mp4

vercel · 2025-05-21T22:37:37Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
lexical	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 28, 2025 7:35pm
lexical-playground	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 28, 2025 7:35pm

etrepum

The CSS changes here make the text caret invisible when there is no text in the list item (at least in Chrome 136.0.7103.114 macOS). Probably the flex? If you turn off flex the cursor is there but in the wrong place, because without a span element there's no margin to move it away from the checkbox.

…mproved checklist CSS UI

swrsaini · 2025-05-23T19:15:54Z

Made some changes, i have added a with zero-width space for caret in checklist items to fix that issue

etrepum · 2025-05-23T20:41:25Z

Tests are failing, and I don't think it's appropriate or necessary to change the markup to make this work correctly.

swrsaini · 2025-05-24T05:01:50Z

I removed the span tag that was causing DOM manipulation and replaced it with a zero-width space to handle the caret position. All test cases have passed successfully.

swrsaini · 2025-05-27T20:23:56Z

Yes flex was causing this issue.

etrepum

This works well in the playground but there are going to be edge cases with the way that the css is manipulated here, the custom properties I originally suggested would be a more robust approach. Here's a diff you can try:

commit a351b7aceac9c97f4c8a9ca47dd5aa35dce8f1e0
Author: Bob Ippolito <bob@redivi.com>
Date:   Wed May 28 10:51:18 2025 -0700

    Use css custom property instead of style text

diff --git a/packages/lexical-list/src/LexicalListItemNode.ts b/packages/lexical-list/src/LexicalListItemNode.ts
index 25b28cc92..253163258 100644
--- a/packages/lexical-list/src/LexicalListItemNode.ts
+++ b/packages/lexical-list/src/LexicalListItemNode.ts
@@ -95,58 +95,41 @@ export class ListItemNode extends ElementNode {
 
   createDOM(config: EditorConfig): HTMLElement {
     const element = document.createElement('li');
-    const parent = this.getParent();
-    if ($isListNode(parent) && parent.getListType() === 'check') {
-      updateListItemChecked(element, this, null, parent);
-    }
-    element.value = this.__value;
-    $setListItemThemeClassNames(element, config.theme, this);
-    const nextStyle = this.__style;
-
-    // Merge font-size from textStyle into <li> style if present
-    const textStyleObj = getStyleObjectFromCSS(this.__textStyle);
-    if (textStyleObj['font-size']) {
-      element.style.fontSize = textStyleObj['font-size'];
-    }
-    if (nextStyle) {
-      element.style.cssText += nextStyle;
-    }
-
-    applyMarkerStyles(element, this, null);
-
+    this.updateListItemDOM(null, element, config);
     return element;
   }
 
-  updateDOM(
-    prevNode: ListItemNode,
-    dom: HTMLElement,
+  updateListItemDOM(
+    prevNode: ListItemNode | null,
+    dom: HTMLLIElement,
     config: EditorConfig,
-  ): boolean {
+  ) {
     const parent = this.getParent();
     if ($isListNode(parent) && parent.getListType() === 'check') {
       updateListItemChecked(dom, this, prevNode, parent);
     }
-    // @ts-expect-error - this is always HTMLListItemElement
     dom.value = this.__value;
     $setListItemThemeClassNames(dom, config.theme, this);
-    const prevStyle = prevNode.__style;
+    const prevStyle = prevNode ? prevNode.__style : '';
     const nextStyle = this.__style;
-
-    // Merge font-size from textStyle into <li> style if present
-    const textStyleObj = getStyleObjectFromCSS(this.__textStyle);
-    if (textStyleObj['font-size']) {
-      dom.style.fontSize = textStyleObj['font-size'];
-    } else {
-      dom.style.removeProperty('font-size');
-    }
     if (prevStyle !== nextStyle) {
       if (nextStyle === '') {
         dom.removeAttribute('style');
       } else {
-        dom.style.cssText += nextStyle;
+        dom.style.cssText = nextStyle;
       }
     }
     applyMarkerStyles(dom, this, prevNode);
+  }
+
+  updateDOM(
+    prevNode: ListItemNode,
+    dom: HTMLElement,
+    config: EditorConfig,
+  ): boolean {
+    // @ts-expect-error - this is always HTMLListItemElement
+    const element: HTMLLIElement = dom;
+    this.updateListItemDOM(prevNode, element, config);
     return false;
   }
 
diff --git a/packages/lexical-playground/src/themes/PlaygroundEditorTheme.css b/packages/lexical-playground/src/themes/PlaygroundEditorTheme.css
index d82d1aad3..d68b9dcbc 100644
--- a/packages/lexical-playground/src/themes/PlaygroundEditorTheme.css
+++ b/packages/lexical-playground/src/themes/PlaygroundEditorTheme.css
@@ -453,6 +453,9 @@
 }
 .PlaygroundEditorTheme__listItem {
   margin: 0 32px;
+  font-family: var(--listitem-marker-font-family);
+  font-size: var(--listitem-marker-font-size);
+  background-color: var(--listitem-marker-background-color);
 }
 .PlaygroundEditorTheme__listItem::marker {
   color: var(--listitem-marker-color);
@@ -462,7 +465,6 @@
 }
 .PlaygroundEditorTheme__listItemChecked,
 .PlaygroundEditorTheme__listItemUnchecked {
-  font-size: inherit;
   position: relative;
   margin-left: 0.5em;
   margin-right: 0.5em;

etrepum · 2025-05-28T19:12:16Z

packages/lexical-list/src/LexicalListItemNode.ts

+      dom.style.setProperty(
+        '--listitem-marker-font-size',
+        textStyleObj['font-size'],
+      );
    } else {
-      dom.style.removeProperty('font-size');
+      dom.style.removeProperty('--listitem-marker-font-size');


You don't need any of this, applyMarkerStyles manages the --listitem-marker custom properties

Yes i removed that. Any other suggestions?

etrepum · 2025-05-28T19:17:22Z

packages/lexical-list/src/checkList.ts

-  const beforeStyles = window.getComputedStyle(target, '::before');
-
-  const beforeWidth = beforeStyles.width;
-  const beforeWidthInPixels = parseFloat(beforeWidth);
+  let iconRect = rect;
+  if (window.getComputedStyle) {
+    const style = window.getComputedStyle(target, '::before');
+    const width = parseFloat(style.width);
+    const height = parseFloat(style.height);
+    if (!isNaN(width) && !isNaN(height)) {
+      iconRect = {
+        bottom: rect.top + height,
+        height,
+        left: rect.left,
+        right: rect.left + width,
+        toJSON: () => ({
+          bottom: rect.top + height,
+          height,
+          left: rect.left,
+          right: rect.left + width,
+          top: rect.top,
+          width,
+        }),
+        top: rect.top,
+        width,
+        x: rect.left,
+        y: rect.top,
+      };
+    }
+  }
  if (
    target.dir === 'rtl'
-      ? pageX < rect.right && pageX > rect.right - beforeWidthInPixels
-      : pageX > rect.left && pageX < rect.left + beforeWidthInPixels
+      ? pageX < iconRect.right && pageX > iconRect.left
+      : pageX > iconRect.left && pageX < iconRect.right


The previous code in here was simpler (by not computing unnecessary things) and had the same purpose, if you needed the window.getComputedStyle check you could do something like:

const beforeStyles = window.getComputedStyle ? window.getComputedStyle(target, '::before') : { width: '0px' };

etrepum

It doesn't look like this code was removed, at least not in what's on github right now

etrepum · 2025-05-28T19:26:36Z

packages/lexical-list/src/LexicalListItemNode.ts

+    // Set custom property for font-size from textStyle if present
+    const textStyleObj = getStyleObjectFromCSS(this.__textStyle);
+    if (textStyleObj['font-size']) {
+      dom.style.setProperty(
+        '--listitem-marker-font-size',
+        textStyleObj['font-size'],
+      );
+    } else {
+      dom.style.removeProperty('--listitem-marker-font-size');
+    }


Suggested change

// Set custom property for font-size from textStyle if present

const textStyleObj = getStyleObjectFromCSS(this.__textStyle);

if (textStyleObj['font-size']) {

dom.style.setProperty(

'--listitem-marker-font-size',

textStyleObj['font-size'],

);

} else {

dom.style.removeProperty('--listitem-marker-font-size');

}

etrepum · 2025-05-28T19:26:44Z

packages/lexical-list/src/LexicalListItemNode.ts

        dom.removeAttribute('style');
      } else {
-        dom.style.cssText = nextStyle;
+        dom.style.cssText += nextStyle;


Suggested change

dom.style.cssText += nextStyle;

dom.style.cssText = nextStyle;

etrepum

Looks good!

… scalable, clickable, and properly spaced at large font sizes (#7558)

Fixes #13386 Below I write a clarification to copy and paste into the release note, based on our latest upgrade of Lexical [in v3.29.0](https://github.com/payloadcms/payload/releases/tag/v3.29.0). ## Important This release upgrades the lexical dependency from 0.28.0 to 0.34.0. If you installed lexical manually, update it to 0.34.0. Installing lexical manually is not recommended, as it may break between updates, and our re-exported versions should be used. See the [yellow banner box](https://payloadcms.com/docs/rich-text/custom-features) for details. If you still encounter richtext-lexical errors, do the following, in this order: - Delete node_modules - Delete your lockfile (e.g. pnpm-lock.json) - Reinstall your dependencies (e.g. pnpm install) ### Lexical Breaking Changes The following Lexical releases describe breaking changes. We recommend reading them if you're using Lexical APIs directly (`@payloadcms/richtext-lexical/lexical/*`). - [v.0.33.0](https://github.com/facebook/lexical/releases/tag/v0.33.0) - [v.0.30.0](https://github.com/facebook/lexical/releases/tag/v0.30.0) - [v.0.29.0](https://github.com/facebook/lexical/releases/tag/v0.29.0) ___ TODO: - [x] facebook/lexical#7719 - [x] facebook/lexical#7362 - [x] facebook/lexical#7707 - [x] facebook/lexical#7388 - [x] facebook/lexical#7357 - [x] facebook/lexical#7352 - [x] facebook/lexical#7472 - [x] facebook/lexical#7556 - [x] facebook/lexical#7417 - [x] facebook/lexical#1036 - [x] facebook/lexical#7509 - [x] facebook/lexical#7693 - [x] facebook/lexical#7408 - [x] facebook/lexical#7450 - [x] facebook/lexical#7415 - [x] facebook/lexical#7368 - [x] facebook/lexical#7372 - [x] facebook/lexical#7572 - [x] facebook/lexical#7558 - [x] facebook/lexical#7613 - [x] facebook/lexical#7405 - [x] facebook/lexical#7420 - [x] facebook/lexical#7662 --- - To see the specific tasks where the Asana app for GitHub is being used, see below: - https://app.asana.com/0/0/1211202581885926

swrsaini and others added 2 commits May 21, 2025 20:43

Updated checklist checkbox styles to use relative units (em)

f46f251

Made checklist icon scalable, fully clickable, and properly spaced

4f144f7

swrsaini requested review from Fetz, Sahejkm, acywatson, fantactuka, ivailop7, lilshady, potatowagon, takuyakanbr and zurfyx as code owners May 21, 2025 22:37

facebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label May 21, 2025

vercel bot deployed to Preview – lexical May 21, 2025 22:38 View deployment

vercel bot deployed to Preview – lexical-playground May 21, 2025 22:39 View deployment

etrepum added the extended-tests Run extended e2e tests on a PR label May 22, 2025

etrepum mentioned this pull request May 22, 2025

[lexical-list] Bug Fix: Removed the hardcoded checkbox width in checklist onclick helper #7559

Merged

etrepum reviewed May 22, 2025

View reviewed changes

swrsaini added 2 commits May 24, 2025 00:22

Merge remote-tracking branch 'upstream/main'

329ae22

Added <span> with zero-width space for caret in checklist items and i…

b1b1b8a

…mproved checklist CSS UI

vercel bot deployed to Preview – lexical May 23, 2025 19:16 View deployment

vercel bot deployed to Preview – lexical-playground May 23, 2025 19:17 View deployment

swrsaini requested a review from etrepum May 23, 2025 19:28

Removed unnecessary DOM manipulations for list items

e4806ce

vercel bot deployed to Preview – lexical May 23, 2025 22:21 View deployment

vercel bot deployed to Preview – lexical-playground May 23, 2025 22:21 View deployment

Merge branch 'main' into main

a47c66e

removed flex layout in checklist items

3ad10e0

vercel bot deployed to Preview – lexical May 27, 2025 20:22 View deployment

vercel bot deployed to Preview – lexical-playground May 27, 2025 20:23 View deployment

Merge branch 'main' into main

86a4952

vercel bot deployed to Preview – lexical May 28, 2025 16:59 View deployment

vercel bot deployed to Preview – lexical-playground May 28, 2025 17:00 View deployment

etrepum reviewed May 28, 2025

View reviewed changes

Merge branch 'main' into main

6ffd1c6

vercel bot deployed to Preview – lexical May 28, 2025 19:06 View deployment

vercel bot deployed to Preview – lexical-playground May 28, 2025 19:07 View deployment

improve checklist item alignment and accessibility styles

bc845b7

vercel bot deployed to Preview – lexical May 28, 2025 19:10 View deployment

vercel bot deployed to Preview – lexical-playground May 28, 2025 19:11 View deployment

etrepum reviewed May 28, 2025

View reviewed changes

Simplify checklist icon click area logic

0236279

vercel bot deployed to Preview – lexical May 28, 2025 19:31 View deployment

vercel bot deployed to Preview – lexical-playground May 28, 2025 19:33 View deployment

update

51e6dd4

vercel bot deployed to Preview – lexical May 28, 2025 19:34 View deployment

vercel bot deployed to Preview – lexical-playground May 28, 2025 19:35 View deployment

etrepum approved these changes May 29, 2025

View reviewed changes

etrepum added this pull request to the merge queue May 29, 2025

Merged via the queue into facebook:main with commit 3ee0245 May 29, 2025
38 checks passed

fantactuka pushed a commit that referenced this pull request Aug 11, 2025

[lexical-playground][lexical-list] Bug Fix: Made checklist icon fully…

162ace1

… scalable, clickable, and properly spaced at large font sizes (#7558)

GermanJablo mentioned this pull request Aug 29, 2025

feat(richtext-lexical): upgrade lexical from 0.28.0 to 0.34.0 payloadcms/payload#13622

Merged

23 tasks

	dom.style.cssText += nextStyle;
	dom.style.cssText = nextStyle;

Conversation

swrsaini commented May 21, 2025

Uh oh!

vercel bot commented May 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

etrepum left a comment

Choose a reason for hiding this comment

Uh oh!

swrsaini commented May 23, 2025

Uh oh!

etrepum commented May 23, 2025

Uh oh!

swrsaini commented May 24, 2025

Uh oh!

swrsaini commented May 27, 2025

Uh oh!

etrepum left a comment

Choose a reason for hiding this comment

Uh oh!

etrepum May 28, 2025

Choose a reason for hiding this comment

Uh oh!

swrsaini May 28, 2025

Choose a reason for hiding this comment

Uh oh!

etrepum May 28, 2025

Choose a reason for hiding this comment

Uh oh!

etrepum left a comment

Choose a reason for hiding this comment

Uh oh!

etrepum May 28, 2025

Choose a reason for hiding this comment

Uh oh!

etrepum May 28, 2025

Choose a reason for hiding this comment

Uh oh!

etrepum left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

vercel bot commented May 21, 2025 •

edited

Loading