Medium-editor: nested button / optional button

[mike623]

Is the editor allow custom button which expand more button as option ?

[litera]

This is a nice idea, although putting all the options on the toolbar is much quickly accessible. How would it work? time delay with hover? Show on click? Also think of touch devices where hover is not an option albeit possible...

As long as we don't _pollute_ toolbar with too many buttons I'd suggest not to do it this way.

[mike623]

so you mean the editor dont not provide this feature for now ?

[j0k3r]

The editor doesn't provide that feature now.

[litera]

@mike623, @j0k3r: It doesn't support it out of the box, but it could be changed with much effort to do so.

[mike623]

@j0k3r Here is another idea. Is it possible to change button programmatically for example : trigger add more button / remove button when clicked another button

[litera]

@mike623 check https://github.com/yabwe/medium-editor/wiki/Extensions-Plugins maybe Medium Button can be of some use as it can run Javascript (i.e. toggle some buttons). Just sayin'. I don't suppose this could work, but I thought of several different extensions on that particular page.

[mike623]

@litera very well. thanks for help

[nmielnik]

My org combined all the alignment options into a dropdown (left, center, right, justify).

The button in the toolbar always reflects the state of the current selection (ie if the text is centered within the selection, the 'align center' button is displayed, and clicking it shows a drop-down where the center option has a checkmark next to it).

It's definitely not in a state where I can easily export it into an extension, but I thought it'd be useful to show one way to have a dropdown button.

You can also check out @davideanderson 's repo as a reference for a way to have toolbar buttons that appear/disappear based on the kind of elements that are currently being edited. https://github.com/davideanderson/medium-editor-toolbar-states

[mike623]

@nmielnik It is awesome and the dropdown which is I looking for. Whatever can you export into an extension or not right now. At least you told me that is possible lol. Thank you so much. Btw, how long does you take to create dropdown ?

[litera]

@nmielnik This looks great. Congrats. I think this calls for a new dropdown extension for such things as alignment, maybe borders, sub/sub-script could be done the same way etc... Is this a custom extension you've written or is it some other toolbar you're using but would like to integrate with ME?

[rvetere]

I need a dropdown menu too in the near future - i can look into it to make an extension out of it @nmielnik as soon as i find more time ;) I'm also investigating into solutions how we can make medium-editor make work on mobile devices/touch devices.

Like already mentioned - a dropdown doesn't make any sense on any touch device (you don't have a mouse-hover) - or at least you need to click for everything what is not really convenient.

Now, the built-in iOS toolbar gave me a nice idea to solve it in another way:

Whenever the OS detects that he has not enough space to render the toolbar completely, he just add an arrow button on the right - with a simple paging. Pressing the button, you simply cycle trough the further pages of available buttons:

Now i dream of an extension of the entire medium-editor, where we dynamically detect the space available for rendering the toolbar, and if it gets too narrow, we just start to render the arrows and let the user paginate trough.

Of course it should be controllable trough options and it makes most sense on mobile devices - on desktop this could be still handled trough a dropdown solution, basically..

[nmielnik]

We had definitely talked about having dropdown in medium-editor in the past, it was a very desirable feature but we just never got around to it.

You've outlined the 2 main use cases we thought of for dropdowns (grouping cohesive buttons together, and controlling the width of the toolbar by putting overflow buttons in a 'more buttons' dropdown).

The extension we're using for text alignment is basically 2 pieces, 1) a lightweight dropdown and 2) 'dropdown button extension' that uses the dropdown library and exposed medium-editor methods.

1. I could try to share the dropdown code, though I think it's probably easy enough to find simple, lightweight dropdown libraries out there that are widely supported and aren't custom written by my org.
2. The custom extension basically adds elements into the dropdown that have attributes to say which button they represent (left, center, right, justify). It listens for clicks on those, and then just calls MediumEditor.execAction() to let medium-editor do the work. For checkState(), it just loops through the 4 button types, and call extension.isAlreadyApplied() on them. Whichever one returns true will cause the extension to display the correct button in the toolbar.

I'll work on trying to share this code out in some form, though it's doubtful I'll be able to build out an extension myself. Hopefully this is enough to give you an idea of how this is possible and maybe your efforts will be easier to share out in a helpful way.

[rvetere]

@litera done, thx for the hint ;)

[boycce]

This would be nice, especially for mobile. I like the idea of checkmarks next to selected dropdown buttons (@nmielnik)