[Style dropdown] Block style applied to the block before a block widget

[niegowski]

📝 Provide detailed reproduction steps (if any)

✔️ Expected result

Only blocks that are visually selected should be affected.

❌ Actual result

A block before a block widget gets the style.

❓ Possible solution

📃 Other details

• Browser: …
• OS: …
• First affected CKEditor version: …
• Installed CKEditor plugins: …

---

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

[filipsobol]

This seems to be consistent with the behavior of other block operations.

If we select the last paragraph, the image, and the end of the heading, as in the GIF above, the style, quote, and code block operations will affect the heading block.
However, if we select only the last paragraph and image, the style and code block operations are disabled, and the quote operation will not affect the heading block.

See this video where I first select only the last paragraph and image, and then also the end of the heading.

recording.mp4

[Witoso]

Good find @filipsobol! I just want to share another recording that may better show where the problem is, and why it may be confusing for the user:

Screen.Recording.2023-04-03.at.09.12.12.mov

Notice that as a user I only slightly raise my selection above the paragraph. My expectation is I select part of the paragraph, and the image. But this small selection (user's perspective), selects heading as well. It's even more visible if you have an empty paragraph. Users may have the intuition, "I only select what's on the level of my cursor", and unfortunately we break this pattern here.

Not sure where the problem lies but it's still there.

[filipsobol]

Other editors have better visual indications when end of the block is selected.

Word:
https://user-images.githubusercontent.com/4145208/229442680-9c895652-0b1b-473f-95f7-b4219fb972b7.mp4

Google docs:
https://user-images.githubusercontent.com/4145208/229442759-fd66d178-ef6b-4365-85b2-809eddb0f815.mp4

[filipsobol]

We decided to ignore the first selected block if the selection starts at the end of that block:

<paragraph>a[</paragraph> // This block should be ignored
<paragraph>b</paragraph>
<paragraph>c]</paragraph>

There should be an exception if this block is empty. Such blocks are still treated as selected:

<paragraph>[</paragraph> // Selection starting at the beginning of the empty block counts
<paragraph>b</paragraph>
<paragraph>c]</paragraph>

We already ignore the last selected block if the selection ends at the beginning of that block:

<paragraph>[a</paragraph>
<paragraph>b</paragraph>
<paragraph>]c</paragraph> // This selection is ignored

However, it doesn't have the above exception, i.e. if the last block is empty, it will NOT be selected:

<paragraph>[a</paragraph>
<paragraph>b</paragraph>
<paragraph>]</paragraph> // This selection is ignored

To have consistent behavior, we will improve the handling for this so that the empty blocks are selected in both cases.

[Witoso]

There should be an exception if this block is empty. Such blocks are still treated as selected:

I'm a bit worried about this one. And not sure if I understand it well.

<heading2>[</heading2> // Selection starting at the beginning of the empty block counts
<imageBlock></imageBlock>
<paragraph>c]</paragraph>

But this case in style dropdown will be also confusing. It will be more visible (I will see a highlight of the selection) but the selection will still be applied when I move the cursor just above the paragraph. Right?

[filipsobol]

Yes, currently that's the case. Interestingly, it happens on Chrome, but not in Firefox.

recording.mp4