bug: unable to remove header formatting in a specific scenario

[patrickcate]

Is your feature request related to a problem? Please describe.
In the markdown editor toolbar, there is no easy way to remove heading level stylings once applied. From what I can tell, the only way to remove a heading level styling from text is to switch to the raw markdown mode and remove the # formatting there.

Describe the solution you'd like
Add a toolbar option to remove a heading styling if applied to selected text. I can thing of 3 ways this could be implemented.

1. When a heading level option in the dropdown is applied/active, clicking the dropdown item again toggles the formatting off.
2. Add a new heading dropdown option "Remove"
3. Add a new toolbar button that more generally removes any applied markdown formatting from a selection.

[erezrokah]

Hi @patrickcate, does clicking the header button again while at the end of the test works?
See

If not can you share a quick video or a step by step reproduction of what you're trying to accomplish?

[patrickcate]

@erezrokah, yes clicking on the header again while at the end of the text does work. Didn't know that was possible.

It's good to know there is a way to remove the styling without having the go into the raw markdown editor mode, but I think it would be more intuitive if this also functioned when the text was highlighted and/or the cursor was inside the text.

[erezrokah]

It's good to know there is a way to remove the styling without having the go into the raw markdown editor mode, but I think it would be more intuitive if this also functioned when the text was highlighted and/or the cursor was inside the text.

It should. Are you experiencing a different behavior? If so can you post a reproduction?

[patrickcate]

It should. Are you experiencing a different behavior? If so can you post a reproduction?

OK, just tested (I'm just using the Netlify CMS demo site). It does work when the cursor is inside the text or you've select some text inside, but doesn't work when you select the entire line by triple clicking the text.

[erezrokah]

This works for me. Can you share a step by step reproduction?

[patrickcate]

Here's a video showing the issue. When I'm selecting the entire line I'm triple clicking the text.

netflify-cms-header-dropdown.mov

[erezrokah]

Thanks @patrickcate, I updated the issue title to match the video

[bytrangle]

Hello @erezrokah , I know the reason for the issue.

When clicking the Heading button, for example Heading 1, we call the toggleBlock method. This method checks if every block in the selection is of type Heading 1. If it is, set all of them to default type aka paragraph, otherwise they remain heading 1.

This makes sense on paper, but the problem lies with triple click action in the Slate editor. Instead of the selecting just one block, internally it selects all the subsequent block. This means editor.value.blocks will contain more than one block.

Meanwhile, the UI indicates that only one block is selected, which leads to the confusion. The issue is well-documented here.

What do you suggest?

1. Write our own triple-click implementation. In toggleBlock method, checks if it is triple click. If yes, select only the first block in the selection value. I haven't checked the feasibility of this approach though.
2. Wait for the issue on Slate editor to get resolved, or do it myself. Then integrate Slate into Netlify CMS from scratch 😓 because the version we're using is no longer updated.

[erezrokah]

Thanks @bytrangle, that makes sense.
So this issue will happen not just with headers correct?

1. Write our own triple-click implementation. In toggleBlock method, checks if it is triple click. If yes, select only the first block in the selection value. I haven't checked the feasibility of this approach though.

I think this would be preferable, depending on the size of the effort.

2. Wait for the issue on Slate editor to get resolved, or do it myself. Then integrate Slate into Netlify CMS from scratch 😓 because the version we're using is no longer updated.

I've added this to #5652

[bytrangle]

Good question. Interestingly, the List and Quote blocks are not affected because they are handled by different methods that use a different logic. For example:

<h1>Heading 1</h1>
<p>paragraph</p>

If you triple click Heading 1, the selection will be <h1> to </p>. editor.value.blocks will contain two blocks, heading-one and paragraph.

Then click either List or Quote button. The toggleQuoteblock and toggleList only look for editor.value.startBlock, which will always be the first block of the selection and then do the transformation.

In contrast, when clicking a Heading button, we look for editor.value.blocks and check if every single block inside it is of the same heading type with a helper method everyBlock. Of course they aren't, so this method returns false.

If everyBlock returns true, we pass defaultType = 'paragraph' to editor.setBlocks. But it returns false, so we pass the value of heading editor.setBlocks. So editor.setBlocks('heading 1') to a heading-one block doesn't change the same.

toggleBlock(editor, type) {
  switch(type) {
    case 'heading one':
    // ...
      return editor.setBlocks(editor.everyBlock(type) ? defaultType : type)
    // ...
  }
}

You may wonder: How about the paragraph block after <h1>? Does it get turned into heading-one? As I've said, editor.value.blocks contains both blocks, but when calling editor.setBlocks, Slate still correctly identifies “Heading 1” as the only block that gets selected. Hence the paragraph block is untouched.

I don't know why it behaves that way, but this is probably a reason why this triple-click issue has flown under the radar for so long.

But thanks to your inquiry, I think I've discovered an economical way to resolve this issue.

[bytrangle]

@erezrokah While investigating the triple-click issue, I encounter this:

I thought the expectation is to have both blocks be list items?

[erezrokah]

I thought the expectation is to have both blocks be list items?

You're correct. This seems like a separate bug.

[bytrangle]

Has there been an issue filed for that? I've searched, but it's not easy to find the right keywords for these issues so I may have missed it. If there's none, I'll create one tomorrow and work on that one first.

[erezrokah]

Has there been an issue filed for that?

There isn't! I should have mentioned it.

If there's none, I'll create one tomorrow and work on that one first.

That would be great, thank you