Issue #554💬 AnsweredOpened November 22, 2017by ryandeba0 reactions

Prevent hover highlighter and prevent selecting certain components

快速解答by artf

Prevent the hover highlight effect on certain components. Components already have a "highlightable" property that is being used for the dotted outline style. I was thinking about using that same property to prevent the hover highlight effect, but it could also be a new property (maybe "hoverable" or "highlightOnHover"...

Read full answer below ↓

Question

Hi @artf,

I would like to get your thoughts on the following 2 items before submitting a pull request. These are to satisfy requirements for a project that I'm currently working on, but I'm hoping that they could have a place in grapesjs core.

  1. Prevent the hover highlight effect on certain components. Components already have a "highlightable" property that is being used for the dotted outline style. I was thinking about using that same property to prevent the hover highlight effect, but it could also be a new property (maybe "hoverable" or "highlightOnHover"?). I haven't tested it yet, but it looks like I could just check the value of the property in SelectComponent.updateHighlighter() and return early if the value is set to false.

  2. Prevent selecting certain components. I would also like to completely prevent selecting certain components when they are clicked. I have some hacky code now that adds a "selectable" property to components, and if that property is set to false when the component:selected event fires then I un-select it (editor.select("")). I would prefer the component to not actually get selected in the first place to prevent other component:selected listeners from running, as well as to prevent the quick flash of the blue style outline & toolbar that briefly appears (I see this happen in chrome...not sure about other browsers). Is there an existing property that could be used for this? If not, what do you think about me adding a "selectable" property that could be used to prevent component selection?

Thanks for everything you do for this project, I really appreciate it!

Answers (3)

artfNovember 23, 2017
  1. Prevent the hover highlight effect on certain components. Components already have a "highlightable" property that is being used for the dotted outline style. I was thinking about using that same property to prevent the hover highlight effect, but it could also be a new property (maybe "hoverable" or "highlightOnHover"?). I haven't tested it yet, but it looks like I could just check the value of the property in SelectComponent.updateHighlighter() and return early if the value is set to false.

hoverable approved 👍 I'd like to point out not to use camelCase naming in Model's properties as it makes them invaluable via data-gjs-* attributes. Confirm also about your thoughts on SelectComponent.updateHighlighter

  1. Prevent selecting certain components. I would also like to completely prevent selecting certain components when they are clicked. I have some hacky code now that adds a "selectable" property to components, and if that property is set to false when the component:selected event fires then I un-select it (editor.select("")). I would prefer the component to not actually get selected in the first place to prevent other component:selected listeners from running, as well as to prevent the quick flash of the blue style outline & toolbar that briefly appears (I see this happen in chrome...not sure about other browsers). Is there an existing property that could be used for this? If not, what do you think about me adding a "selectable" property that could be used to prevent component selection?

I was already thinking about adding something like so go on.

Thanks to you for your help :)

ryandebaNovember 23, 2017

Thanks for the feedback! I've created a couple of pull requests for these items, let me know if you want to discuss further.

artfNovember 23, 2017

Merged, Thanks Ryan 👍

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →
Premium option

Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.

Browse premium plugins →

Related tutorials

In-depth guides on the same topic.

All tutorials →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.