Toolbar on hover

[YashPrince]

@artf how can we show toolbar on hover. Currently toolbar is open when we select any element but I want to show it on hover. Any help would be appreciated.

[artf]

The only way I can help you here is to tell you to check this command https://github.com/artf/grapesjs/blob/dev/src/commands/view/SelectComponent.js (id of the command: select-comp) which is responsible for showing the toolbar. So you can try to use Commands API to extend it

[sakshigarg9]

@YashPrince Hi, were you able to solve this? I need a similar implementation

[limbobark]

@sakshigarg9 ,

editor.Commands.extend('select-comp', {
        onHovered(em, component) {
          const trg = component && component.getEl();
          if (trg) {
            const pos = this.getElementPos(trg);
            this.updateBadge(trg, pos);
            this.updateToolbar(component); // show toolbar
            this.updateHighlighter(trg, pos);
            this.showElementOffset(trg, pos);
          }
        },
      });

[ashercoren]

This doesn't seem to work anymore

[zauchad]

I just figured out solution with invoking select event on editor, it's doing slightly more than opening toolbar (additionally selects component), but for my case its ok.

editor.Commands.extend('select-comp', {
    onHovered(em, component) {
        if (component && component.getEl()) {
            if (!editor.getSelected()) {
                editor.select(component);
            } else if (editor.getSelected().getId() !== component.getId()) {
                editor.select(component);
            }
        }
    },
});

[surya492]

this.updateToolbar(component); // show toolbar -- it is not showing the toolbar. this.updateHighlighter(trg, pos); -- this is throwing the error in reactjs application. Please let me know, is there anyone made changes for this?

@artf

[vladninja]

I just figured out solution with invoking select event on editor, it's doing slightly more than opening toolbar (additionally selects component), but for my case its ok.

editor.Commands.extend('select-comp', {
    onHovered(em, component) {
        if (component && component.getEl()) {
            if (!editor.getSelected()) {
                editor.select(component);
            } else if (editor.getSelected().getId() !== component.getId()) {
                editor.select(component);
            }
        }
    },
});

Additionally, there is no block name visible on hover

[surya492]

@vladninja- Thank you for reply. but I'm looking for only onHover. in my case it is not acceptable to select event for hover event.

[vladninja]

@artf Maybe something changed from your last comment from 2018? I am also trying to find a solution that will show a toolbar with actions, but without calling a "select-comp" command.