Some issues (and remarks) on the formatting dropdown

[JeanLucEsser]

Hi there, here are a few issues and comments on the formatting option dropdown:

1. code-block, not code

The documentation says that code (Allow text to be shown as inline code.) is an option for the formatting config. When I read this I thought this was weird as I expected all formatting options to be of block level, not inline. After testing I was right, it is actually the code-block option that is allowed as a formatting option. The documentation should reflect this.

2. toggling between options

As it stands now, selecting an option in the formatting dropdown does not always replace the previous one. This leads to unexpected behavior.

Going from a heading to another heading works as expected:

For example I select h1, then I select h3 and h1 is changed to h3.

But selecting paragraph does not remove the heading:

For exemple I select h1, then I select paragraph, it does nothing. I have to first select h1 one more time to unselect it. This is far from ideal as you can't say for sure just by looking at the text which heading is currently selected. And you have to guess that you need to unselect a heading to go back to paragraph. So what exactly is the paragraph option for anyway?

Making matter worse with blockquote:

Select a heading, then select blockquote. I would expect the heading to be replaced by blockquote. Instead the heading is wrapped in blockquote. Getting out of this is not an easy feat.

I can see why you'd want to allow headings inside blockquotes but then, should you really want to allow for this, remove blockquote as a formatting option and make it only available as a button. Then, when inside a blockquote, show it is active by highlighting the button. And allow for headings / paragraph formatting inside said blockquote.

Options in formatting should not allow for nesting, it should be kept simple, it's one or the other. It's blockquote or heading.

3. simplify

I think allowing headings inside blockquotes is too much complexity for the average user (and not sure about the semantic reasoning behind it). Here's what I would do to simplify the formatting options.

Treat each formatting option as exclusive: Going from h1 to paragraph to h3 to blockquote to code-block should be exclusive and always replace the previous selected block option. Plain and simple. No more, no less.

Let advanced users use what Vizy is good at: If some users need to manage blockquotes with headings and who knows what, let them create a dedicated vizyBlock.

4. inconsistencies

Contrary to the doc, headings (h1 to h6) and blockquote options do not show as buttons. The only access to those options is via the formatting option. I think that's good, just need to update the docs. Except for code-block which is available in both scenarios which does not make sense in that logic.

I should say that I'm on Craft 4 beta 4.

5. allowing for more options

Sometimes you need more. Naming formatting options is a good example. So is the option to have multiple paragraph or heading styles. How about allowing for more options via some attributes:

{
"formatting": {
  "red-paragraph": {
    "name": "My red paragraph", 
    "type": "paragraph", 
    "attributes": [
      {"class": "custom-p-red", "data-name": "red-paragraph"}
    ]
  },
  "paragraph", "block-code", "blockquote", "h1", "h2", "h3"
}
}

This was a long one, and I'm still pretty new to Vizy so I may be out of line on a few things. I think you're onto something really amazing though. Thanks for taking the time reading.

PS: more to come ;)

[engram-design]

Thanks for the comments!

1. Agreed, and will be updated for Craft 4/Vizy 2 - https://github.com/verbb/vizy/issues/117 - the docs just aren't up to date, and still reflect Craft 3.
2. Good point, although this might be down to Tiptap as some of this behaviour is similar (casting items as Paragraph is something we can fix), I'll need to take a look. I suppose the tricky thing is some use-cases are totally valid. What if you want a heading and paragraph text in a blockquote (or just a heading)? There is also a clear-format option to reset formatting.
3. I'll consider it!
4. Currently re-working some things for the Craft 4 version, but using any button in the main toolbar, or within a dropdown is the expected behaviour. That way, for each field, you can create unique setups. Maybe you want a field to only allow h2, bold and italic. It'd be a waste to have a dropdown for only one heading option.
5. Agreed, and we're working on an API for custom buttons! This will likely need to be paired with a Vue component, but still working on the details for that, and how best to approach this. Ideally, I'd like to expose and allow developers to make use of what Tiptap does with regards to parsing the node structure and parsing the DOM nodes

[JeanLucEsser]

Thanks for taking the time to read and comment!

- 2. (and 3.):

I really do think that some of the main issues with wyziwyg editors is that they try to do too much. Which they should, in a way, but you have the chance to invent something new with groups and blocks. Something pioneered by matrix blocks. I think that is an opportunity to simplify the wysiwyg part and externalize some complex use cases to blocks.

You're saying there is some use cases where headings could and should be part of a block quote. True. But I'll answer that there is some use cases where you need to set the cites attribute of a block quote. And I'll add that headings in a block quote should only be h4 for example. Some of this cannot be done. So instead of trying to give some of it in the wysiwyg interface and turn the thing into another wysiwyg "nightmare", why not try this : be opinionated about the editor.

I'm not trying to say what should and what shouldn't be, simply that if you have the real opportunity of creating something new, best of class, disruptive, which is easy to use for basic needs as well as powerful enough for advanced users.

The block quote example could even make the docs:

Create a quick quote from within your paragraphs, or use a Vizy block with heading, cites, author and photo fields for a full featured totally custom quote block! Be inventive!

I see so much potential in Vizy, I wish there was an option to turn off the wisywig part to turn it into a full matrix replacement. Opening an issue on this one right away ;) -> #133

[engram-design]

Yep, I agree with setting conventions, it's more to the point that we'd have to "undo" some Tiptap/Prosemirror behaviour here to accomodate that. But I largely agree, I'll have to give some careful thought to how and when to reset/replace styles for nodes. Typically though, I would expect marks (bold, italic, links, etc) are all fine to be included in a node, but when you want to switch to another node that's where we need to step in.

So you might switch a Paragraph to Blockquote, Blockquote to Code (block), to Heading, etc.

[engram-design]

Updated in 2.1.0