The built in behavior of inserting quotes and lists seems unintuitive to me

[corymharper]

I'm currently working on a project with an existing editor solution, but we are trying to move over to Lexical for various reasons. One of the biggest sticking points so far has been the treatment of lists and quotes by the built in commands INSERT_ORDERED_LIST, INSERT_UNORDERED_LIST and the code the playground uses to insert a quote:

      editor.update(() => {
        const selection = $getSelection();
        
        if (
          $isRangeSelection(selection) ||
          DEPRECATED_$isGridSelection(selection)
        ) {
          $setBlocksType(selection, () => blockType === 'quote' ?  $createParagraphNode() : $createQuoteNode());
        }
      });

Here's some examples of what I mean, all experiments done in the playground:

Entering the following content:

Line one{ENTER}
Line two{ENTER}
Line three{ENTER}

Has what seems like intuitive interactions with lists:

1. If I highlight all three lines, and format them as a list, I get three list items
2. If I highlight one line I get one list item consisting of the content of that one line

Quotes though are a different story, the behavior here is internally consistent its just not what I would expect:

1. If I highlight all three lines, and format them as a quote, I get three separate quotes
2. If I highlight one line I get one quote consisting of the content of that one line

The second point is as I would expect, but in the first I expected to get one quote with the content of all three line separate into paragraphs as they had already been. As for my reasoning for why this seems unintuitive, is that if I highlight what is seemingly one large block consisting of multiple paragraphs of text in order to format it as a quote, I am not thinking, "I want a separate quote for each paragraph" I am thinking that I want all of the selected text in one big quote.

Now lets look at if I did that same thing but with SHIFT + ENTER instead of ENTER.

Lists now get a little weird:

1. If I highlight all three lines, and format them as a list, I get one list item consisting of all of the text highlighted
2. If I highlight one line I get one list item consisting of all of the text I've typed so far

I can kind of understand the first point, this is now just one large string separated by line breaks, but I'd still usually expect these to have come out as separate list items delimited by the line breaks. The second result is really visually confusing, the reason its happening is for the same reason as the first point but you end up with a list item including content you had not selected.

Quotes now behave how I expected in one instance but not the other:

1. If I highlight all three lines, and format them as a quote, I get one quote with all of the highlighted content
2. If I highlight one line I get one quote consisting of all of the text I've typed so far

Now the first point behaves exactly as I would expect, but the second, similar to lists, is formatting content I would not expect it to format.

The way quotes and lists interact is strange as well, highlighting any part of a quote and formatting as list will format the entire quote as a list, and formatting a list as a quote has a very similar interaction.

I opened this as a discussion because maybe its my thinking that is off, and if so I'd like to know. If there is interest in changing any of this behavior in the packages themselves, I would be willing to contribute changes. Either way I have to implement the behavior for us to use this package in our project, which we want to. These behaviors might apply to other elements as well, these have just been the ones that I have been interacting with the most.

[moy2010]

I understand your points, since I also gave them a thought a while ago. I arrived to the conclusion that this behaviour is the correct one. The key point is that, as an analogy of the DOM, Lexical is modeled with hierarchical data models in the form of elements and nodes.

Paragraph for example is an element that is comprised of, among other things, of LineBreak and Text nodes, and every time that you press {Enter}, a new Paragraph is created. On the other hand, if you press {SHIFT} + {Enter}, you will create a new LineBreak node instead.

The same behaviour is observed in other elements such as List as you pointed out. This is crucial if you want to achieve the following:

• First

• Second

• Third

  Some text still within the third bullet point.

• Fourth

[corymharper]

We know its not the case that an element node can't be the child of an element node, as is the case when ListItemNode is the child of ListNode, so it seems unproblematic to me to have several paragraph nodes be the child of a quote node for example.

[moy2010]

Such restrictions are not imposed, so it depends on how you model your editor, I guess. I speak for myself here, but I wouldn't like my editor to start inserting block elements such as Paragraph within other block elements such as ListNode.

[corymharper]

I'd agree that would be undesirable for some block elements like ListNode, the only children allowed of ul or ol are li and a couple of other edge cases, so as an analogy to the DOM that doesn't make sense. But for an element like a quote where that content is valid, it seems like that makes sense to me?

I know I can implement a lot of this behavior in custom logic for my editor built using Lexical, but I'm going to have to bypass a lot of the nodes and behavior ready made for us in packages like @lexical/rich-text and @lexical/list, which if it made sense to change in the package itself, is the reason I opened this discussion.

[moy2010]

I see. Unfortunately I haven't implemented the Quote node on my editor yet, so I don't have any further thoughts that could contribute to this discussion. Let's hope more people can bring something to the table :).

[moy2010]

@corymharper , just found this conversation about supporting nested block nodes: #4339

[sep2]

Got this issue that requireing paragraphs inside quote, too