facebook / facebook/lexical

Feature: Add ability to disable text formatting and text-align in a performant and easy way

Open
#7,298 4 comments 0 reactions 0 assignees View on GitHub
enhancement
Dominant language
TypeScript
Stars
23.9k
Forks
2.2k
Avg merge
1d 16h
Merged PRs (30d)
61

Description

For context, a decision was previously made [to disable pasting of styles such as color and background-color from the clipboard](https://github.com/facebook/lexical/pull/3017).

The reason for this is that the editor might end up with unwanted styles.

However this does not take into account:
- TextNode formats, such as bold, italics, underline, etc.
- ElementNode text-align (format)

In Payload, if those formats are not explicitly enabled in an editor, [we use a transformListener on TextNode](https://github.com/payloadcms/payload/pull/9507/files#diff-fc5dffa33fb08c5f06c7db5976cae11124255bca89ab73bf115c4c05da266189R17-R28) to revert the nodes with those formats.

This could be made more performant if instead of iterating over dirty nodes, Lexical introduced a property to disable those styles. The implementation I can think of would be to have that property intervene in the setFormat method of TextNode.

Note that I did not consider the option of overriding the command to add formats, as that does not prevent other forms of mutation such as paste from clipboard, browser extensions, other editor plugins, etc.

The problem has become worse now that I have tried to implement the same for text align.

NodeTransforms cannot be registered on ElementNode, and registering the same change on all nodes that might have text-align feels wrong.

I thought about using a transformation on RootNode and iterating over dirtyElements, but that object is created when the transformations finish and before the update listeners start.

Doing this in the updateListener would not be ideal either, as it would trigger an incorrect and unnecessary update.

Again, I think we should include an option in the editorConfig to disable text-align, as well as text formats.

The API I imagine is something like this:

```ts
const editorConfig = {
disabledFormats: ["text-align", "bold", "italic"]
// ...
}
```

If the idea makes sense to you, I can do the PR.

Contributor guide

Open the contributing guide

Research direction

Start by reviewing the editorConfig API and TextNode.setFormat, then examine the RootNode and ElementNode transformation paths described in the issue. Compare these with the existing clipboard-style handling and the Payload transformListener example. Done means a decided, performant way to disable listed text formats and text-align across mutation sources, with behavior validated by relevant tests.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.