bug: unable to remove header formatting in a specific scenario

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.

[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.

[patrickcate]

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

https://user-images.githubusercontent.com/6277206/126909999-642ca4d8-9ec7-4d11-8a6f-dfd6dff50ebd.mov