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.

Sign up for GitHub

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

[lexical-list] Bullet item color matches text color #7024

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
+85 −15
Open

[lexical-list] Bullet item color matches text color #7024

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
7080a79
Bullet color to follow text color
ivailop7 Jan 7, 2025
af615a0
Using Listeners
ivailop7 Jan 12, 2025
6b7f32c
Implement suggestions
ivailop7 Jan 14, 2025
5869d83
Check selection is collapsed
ivailop7 Jan 19, 2025
5622672
Fix test
ivailop7 Jan 19, 2025
f9f3cc2
nodetransform
ivailop7 Jan 28, 2025
e8c3774
Change ListItemNode style based on transforms and selection
etrepum Jan 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion packages/lexical-list/src/LexicalListItemNode.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,9 @@ export class ListItemNode extends ElementNode {
}
element.value = this.__value;
$setListItemThemeClassNames(element, config.theme, this);
if (this.__style !== '') {
Copy link
Collaborator

Choose a reason for hiding this comment

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

Using the element's style attribute in createDOM and updateDOM was part of the fix here

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

We'll need to add the style export to the ExportDOM too

Copy link
Collaborator

Choose a reason for hiding this comment

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

I didn’t look there because I wasn’t trying to polish this off, just demonstrate the approach, but usually createDOM is used by exportDOM so unless it has specific stuff that would override this then it might not need extra code

element.style.cssText = this.__style;
}
return element;
}

Expand All @@ -95,7 +98,9 @@ export class ListItemNode extends ElementNode {
// @ts-expect-error - this is always HTMLListItemElement
dom.value = this.__value;
$setListItemThemeClassNames(dom, config.theme, this);

if (prevNode.__style !== this.__style) {
dom.style.cssText = this.__style;
}
return false;
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

I see, could you explain to me the general rule here. Why are we avoiding returning 'true' in updateDOM with something like (this.style != prevNode.style), but we are always ok on doing the comparison and changing this in here and returning false. Does updateDOM returning true, trigger a waterfall of updates that is unnecessary?

Copy link
Collaborator

Choose a reason for hiding this comment

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

The check here is for performance and to avoid having style=“” show up in the DOM, it could be unconditionally set.

returning true should be avoided whenever possible, it creates a lot more work on the browser and can lose state if there’s anything ephemeral in the DOM. Same reason why react does DOM diffing instead of rendering everything from scratch, just more manual here.

}

Expand Down
44 changes: 44 additions & 0 deletions packages/lexical-list/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,15 @@ import type {LexicalCommand, LexicalEditor} from 'lexical';

import {mergeRegister} from '@lexical/utils';
import {
$getSelection,
$isRangeSelection,
$isTextNode,
COMMAND_PRIORITY_EDITOR,
COMMAND_PRIORITY_LOW,
createCommand,
INSERT_PARAGRAPH_COMMAND,
SELECTION_CHANGE_COMMAND,
TextNode,
} from 'lexical';

import {
Expand Down Expand Up @@ -58,6 +64,21 @@ export const REMOVE_LIST_COMMAND: LexicalCommand<void> = createCommand(
'REMOVE_LIST_COMMAND',
);

function $checkSelectionListener(): boolean {
const selection = $getSelection();
if ($isRangeSelection(selection) && selection.isCollapsed()) {
const node = selection.anchor.getNode();
if (
$isListItemNode(node) &&
node.isEmpty() &&
selection.style !== node.getStyle()
) {
node.setStyle(selection.style);
}
}
return false;
}

export function registerList(editor: LexicalEditor): () => void {
const removeListener = mergeRegister(
editor.registerCommand(
Expand Down Expand Up @@ -97,6 +118,29 @@ export function registerList(editor: LexicalEditor): () => void {
},
COMMAND_PRIORITY_LOW,
),
editor.registerCommand(
SELECTION_CHANGE_COMMAND,
$checkSelectionListener,
COMMAND_PRIORITY_EDITOR,
),
Comment on lines +121 to +125
Copy link
Collaborator

Choose a reason for hiding this comment

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

This updates the style when a new ListItemNode is created based on the selection

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Testing in the preview playground, upon creating the list item, it does not seem to pick up the selection style. Styles only get updated after the first child gets created inside the node.

Copy link
Collaborator

Choose a reason for hiding this comment

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

It worked when I tried it so maybe you’re doing something I wasn’t, I’m pretty deep into fixing some more fundamental issues right now and am not planning to spend more hands-on time on this for at least a few days

editor.registerNodeTransform(ListItemNode, (node) => {
const firstChild = node.getFirstChild();
if (firstChild && $isTextNode(firstChild)) {
const style = firstChild.getStyle();
if (node.getStyle() !== style) {
node.setStyle(style);
}
}
}),
editor.registerNodeTransform(TextNode, (node) => {
const listItemParentNode = node.getParent();
if (
$isListItemNode(listItemParentNode) &&
node.is(listItemParentNode.getFirstChild())
) {
listItemParentNode.markDirty();
}
}),
Comment on lines +126 to +143
Copy link
Collaborator

Choose a reason for hiding this comment

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

Here we are only looking at the first child to propagate the style to the parent ListItemNode. It could probably be generalized a bit to work with element nodes too, I was just following your template here.

);
return removeListener;
}
Expand Down
2 changes: 1 addition & 1 deletion packages/lexical-playground/__tests__/e2e/List.spec.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -176,7 +176,7 @@ test.describe.parallel('Nested List', () => {

await assertHTML(
page,
'<ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" dir="ltr"><strong class="PlaygroundEditorTheme__textBold" style="color: rgb(208, 2, 27)" data-lexical-text="true">Hello</strong></li></ul><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><strong class="PlaygroundEditorTheme__textBold" style="color: rgb(208, 2, 27)" data-lexical-text="true">World</strong></p>',
'<ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" dir="ltr" style="color: rgb(208, 2, 27)"><strong class="PlaygroundEditorTheme__textBold" style="color: rgb(208, 2, 27)" data-lexical-text="true">Hello</strong></li></ul><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><strong class="PlaygroundEditorTheme__textBold" style="color: rgb(208, 2, 27)" data-lexical-text="true">World</strong></p>',
);
});

Expand Down
11 changes: 8 additions & 3 deletions packages/lexical-selection/src/lexical-node.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import {
$isTextNode,
$isTokenOrSegmented,
BaseSelection,
ElementNode,
LexicalEditor,
LexicalNode,
Point,
Expand Down Expand Up @@ -241,7 +242,7 @@ export function $addNodeStyle(node: TextNode): void {
}

function $patchStyle(
target: TextNode | RangeSelection,
target: TextNode | RangeSelection | ElementNode,
patch: Record<
string,
| string
Expand All @@ -263,7 +264,7 @@ function $patchStyle(
}
return styles;
},
{...prevStyles} || {},
{...prevStyles},
);
const newCSSText = getCSSFromStyleObject(newStyles);
target.setStyle(newCSSText);
Expand All @@ -285,12 +286,16 @@ export function $patchStyleText(
| null
| ((
currentStyleValue: string | null,
target: TextNode | RangeSelection,
target: TextNode | RangeSelection | ElementNode,
) => string)
>,
): void {
if (selection.isCollapsed() && $isRangeSelection(selection)) {
$patchStyle(selection, patch);
const emptyNode = selection.anchor.getNode();
if ($isElementNode(emptyNode) && emptyNode.isEmpty()) {
$patchStyle(emptyNode, patch);
}
Comment on lines +295 to +298
Copy link
Collaborator

Choose a reason for hiding this comment

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

This was the more fundamental fix, we want to patch an empty element's style when the selection is collapsed on it or else there will be a disagreement of which style is correct since LexicalEvents has the selection's style follow the node's

} else {
$forEachSelectedTextNode((textNode) => {
$patchStyle(textNode, patch);
Expand Down
36 changes: 26 additions & 10 deletions packages/lexical/src/LexicalEvents.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -337,31 +337,27 @@ function onSelectionChange(
anchor.offset === lastOffset &&
anchor.key === lastKey
) {
selection.format = lastFormat;
selection.style = lastStyle;
$updateSelectionFormatStyle(selection, lastFormat, lastStyle);
} else {
if (anchor.type === 'text') {
invariant(
$isTextNode(anchorNode),
'Point.getNode() must return TextNode when type is text',
);
selection.format = anchorNode.getFormat();
selection.style = anchorNode.getStyle();
$updateSelectionFormatStyleFromNode(selection, anchorNode);
} else if (anchor.type === 'element' && !isRootTextContentEmpty) {
invariant(
$isElementNode(anchorNode),
'Point.getNode() must return ElementNode when type is element',
);
const lastNode = anchor.getNode();
selection.style = '';
if (
// This previously applied to all ParagraphNode
lastNode.isEmpty()
) {
selection.format = lastNode.getTextFormat();
selection.style = lastNode.getTextStyle();
$updateSelectionFormatStyleFromNode(selection, lastNode);
} else {
selection.format = 0;
$updateSelectionFormatStyle(selection, 0, '');
}
}
}
Expand Down Expand Up @@ -411,6 +407,27 @@ function onSelectionChange(
});
}

function $updateSelectionFormatStyle(
selection: RangeSelection,
format: number,
style: string,
) {
if (selection.format !== format || selection.style !== style) {
selection.format = format;
selection.style = style;
selection.dirty = true;
}
}
Comment on lines +410 to +420
Copy link
Collaborator

Choose a reason for hiding this comment

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

This was just a clean up to make sure that everything is set properly and marked dirty as appropriate


function $updateSelectionFormatStyleFromNode(
selection: RangeSelection,
node: TextNode | ElementNode,
) {
const format = node.getFormat();
const style = node.getStyle();
$updateSelectionFormatStyle(selection, format, style);
}

// This is a work-around is mainly Chrome specific bug where if you select
// the contents of an empty block, you cannot easily unselect anything.
// This results in a tiny selection box that looks buggy/broken. This can
Expand Down Expand Up @@ -578,12 +595,11 @@ function onBeforeInput(event: InputEvent, editor: LexicalEditor): void {
if ($isRangeSelection(selection)) {
const anchorNode = selection.anchor.getNode();
anchorNode.markDirty();
selection.format = anchorNode.getFormat();
invariant(
$isTextNode(anchorNode),
'Anchor node must be a TextNode',
);
selection.style = anchorNode.getStyle();
$updateSelectionFormatStyleFromNode(selection, anchorNode);
}
} else {
$setCompositionKey(null);
Expand Down
Loading