facebook / facebook/lexical

ElementNode should have a way to control when other nodes can be inserted inside

Open
#5,109 2 comments 3 reactions 0 assignees View on GitHub
core feature
Dominant language
TypeScript
Stars
23.9k
Forks
2.2k
Avg merge
1d 16h
Merged PRs (30d)
61

Description

Use case:

You have a link, you're anchored inside and want to prepend some additional nodes. You might not necessarily want these nodes to be part of the link. A valid node would be an Image, an invalid node would a LineBreakNode. We have a way to control text via `canInsertTextBefore/After` but we don't have such equivalent for full-fledges nodes.

Reference test (see issue in code):

```
test.only('can insert a linebreak node before an inline element node', async () => {
const editor = createTestEditor();
const element = document.createElement('div');
editor.setRootElement(element);

await editor.update(() => {
const root = $getRoot();
const paragraph = $createParagraphNode();
root.append(paragraph);
const link = $createLinkNode('https://lexical.dev/');
paragraph.append(link);
const text = $createTextNode('Lexical');
link.append(text);
text.select(0, 0);

$insertNodes([$createLineBreakNode()]);
});

// TODO ElementNode should have a way to control when other nodes can be inserted inside
expect(element.innerHTML).toBe(
'


Lexical

',
);
});
```

Contributor guide

Open the contributing guide

Research direction

Start by locating ElementNode and the existing canInsertTextBefore/After methods, then find the insertion test containing the TODO in the Lexical test suite. Trace how $insertNodes handles a selection inside an inline element. Done means the node-level insertion policy is defined, covered by the reference scenario, and prevents invalid nodes such as line breaks while allowing valid nodes such as images.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.