ElementNode should have a way to control when other nodes can be inserted inside
- 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(
'
);
});
```
Contributor 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