sal0max / grav-plugin-shortcode-gallery-plusplus

A Shortcode extension to add sweet galleries with a lightbox to your Grav website.
MIT License
33 stars 8 forks source link

CodeMirror Editor Button for the Gallery #21

Open lisandi opened 2 years ago

lisandi commented 2 years ago

For usability, it would be great if a button could be added to the editor menu which enters the shortcode markers

[gallery lastRow=justify] [/gallery]

to the text where the shortcode should get inserted and placing the cursor just behind "...justify]Cursor". That way there won't be an empty line to start the gallery and the "lastRow=justify" as standard guarantees that the gallery is always in a nice looking format no matter what image formats had been inserted.

It would make the gallery plugin much more usable and would limit typing errors.

sal0max commented 2 years ago

Thanks for the suggestion.

However, you need to help me out here, a little. I've never heard of a tool named CodeMirror with Grav, and googling doesn't help a lot, neither. I guess you're talking about adding a button to the WYSIWYG editor of the Grav Admin Panel. In that case you have to give me some hint, how to add buttons there.

As for the lastRow=justify thing: You can set justify as default behavior for this plugin in the gallery settings. No need to always use it as shortcode.

beamaria commented 2 years ago

HI! I think you could add an editor button using the already existing "Editor buttons" plugin I was able to customise it adding a "Justify" option for the text- Path: admin folder/buttons folder/insert-shortcodes folder/js folder/shortcodes-core.js in js file I added this chunk of code:

{
                            'shortcodes-alignjustify': {
                                identifier: 'shortcodes-alignjustify',
                                title: 'AlignJustify',
                                label: '<i class="fa fa-fw fa-align-justify"></i>',
                                modes: ['gfm', 'markdown'],
                                action: function(_ref) {
                                    var codemirror = _ref.codemirror, button = _ref.button;
                                    button.on('click.editor.shortcodes-alignjustify', function() {
                                        Instance.buttonStrategies.replaceSelections({ token: '$1', template: '[justify]$1[/justify]', codemirror: codemirror});
                                       codemirror.focus();
                                    });
                                }
                            }
                        },

Hope it works for adding the gallery button too