Dropdown Capabilities for options

[una]

A lot of text editors have dropdowns for additional options (i.e. header options, text alignment, etc.) for better organization. It would be good to have one here at the component level

[joshfrench]

Interesting! I hadn't thought of that. In theory it wouldn't be very different from the existing SectionButton component. For a very simple use case I can imagine something like: <FormattingDropdown tags={[h1, h2, h3, ...]} />

A couple questions that immediately come to mind:

1. There are different underlying mobiledoc-kit methods for toggling block-level and inline tags (which is why there are separate SectionButton and MarkupButton components.) Would the dropdown be limited to block-level tags, or would/should it allow inline tags as well? If so, how would it distinguish between them in order to call the right mobiledoc-kit method?
2. The existing toolbar buttons allow for customization of their labels, which is a feature I'd ideally keep. How might that work here while still defaulting to the supplied tag name(s)?

I'll probably ponder this for a while before I do anything about it. Let me know if you roll your own solution in the meantime -- I'd be interested in seeing a reference implementation, as generally the people using this package have more interesting use cases than I do :)

[joshfrench]

Also paging @dbchristopher -- Udacity customized their toolbar, right? Did you add any controls that weren't in the core editor kit?

[una]

Block-level tags would be what I immediately think of [see the header options in this editing block on Github, for example), but would this even make a difference?

I like the syntax of tags={[h1, h2, h3, ...]}, but regarding labels, something like this might be more appropriate:

<SectionDropdown>
  <Icon ... />
  <SectionButton type="button" tag="h1" aria-label="primary heading">
    <h1>Heading</h1>
  </SectionButton>
  <SectionButton type="button" tag="h2"  aria-label="secondary heading">
     <h2>Heading</h2>
  </SectionButton>
</SectionDropdown>

[dbchristopher]

@joshfrench we do have a customized toolbar! But just with custom icons, and a new mobiledoc card type. No fancy style grouping/dropdowns at the moment.

This does feel a little out of scope of what I'd expect react-mobiledoc-editor to supply though. My understanding is that Mobiledoc is meant to meant to supply just enough functionality to build your own custom wisywig. Specific implementation details are left up to the product team building on top of it.

The dropdown goes beyond functionality, and starts to address specific UI concerns. That's probably better left to UI frameworks like Bootstrap imho.

[una]

Hey @dbchristopher -- I see where you're coming from, but I think this is still within the scope of basic functionality of a text editor (grouping). IMO, it makes more sense to have that fit with this set of components (react-mobiledoc-editor) rather than have each team implement their own version of a dropdown to integrate with the given toolset

[joshfrench]

This has been clarifying, thanks for the discussion. It's my intent to provide a toolkit for building the right editor for your project, not a one-size-fits-all solution. Just in the span of this ticket we've come up with two very different and perfectly valid proposals for this feature, and I'm taking that as evidence that those decisions are best left to the end user. Therefore I'm going to err on the side of simplicity here.

As a compromise, I put together a deliberately limited dropdown component for instructional purposes. Hopefully by demonstrating how easy it is to skin the core mobiledoc-kit functionality (and by deliberately avoiding advanced use cases) it'll encourage people to use this package as a starting point instead of receiving it as a complete solution.