Expose spectrum color picker options

Is something like this already possible and I missed it? If not, would you consider merging a pull request that adds this functionality?

Unfortunately, not yet possible but I'll definitely accept a PR (ok for the option colorPicker) The spectrum is called inside InputColor and used then in PropertyColorView and TraitColorView

I'd put a comment to not override default options like change, move, etc. as it will break it

Thanks @artf! Do you have any general thoughts on how to best make this change? I've reviewed the code and am not seeing an easy way to accomplish this, and I'd like to avoid spending time going down the wrong path.

Here's a summary of what the ideas I've considered so far...any of these sound better/worse than the others?

• Add ColorPicker to the utils object
  • This would make it easy to pass the config along like this, utilizing the existing loadModule functionality: grapesjs.init({ utils: { colorPicker: { ... } } });
  • I think this would require changing how the InputColor/PropertyColorView/TraitColorView objects reference it - they would need to go through editor.Utils.ColorPicker instead of simply requiring the js file dependency. None of those objects appear to currently have any reference to the editor object, so this doesn't seem very straightforward.
• Move the ColorPicker object to be a top-level editor object (kind of like the rich text editor editor.RichTextEditor, but this would be editor.ColorPicker)
  • I guess the same issues exist here as with moving ColorPicker into the utils object...all referencing code would need to access this through editor.ColorPicker rather than requiring the js file dependency...
• Backbone/jQuery implementation
  • Modify Backbone.$.fn.spectrum.defaults in the editor if the colorPicker config was passed to grapesjs.init, and modify the ColorPicker to use those defaults if they exist.
  • This solution feels very hacky to me :(

Any feedback that you could provide would be greatly appreciated :)

Honestly, I was thinking about a less invasive approach

None of those objects appear to currently have any reference to the editor object

Actually, PropertyColorView injectsEditorModel (which I commonly reference as em) as an option via target (probably will be best to rename it to em) but not in TraitColorView (easy fix, just need to pass this.config.em). After we have the em inside we can easily update InputColor like this

colorEl.spectrum({
         //...
         palette: [],
         ...this.target.getConfig('colorPicker'), // or this.em.getConfig...
         // We need move(), change(), etc. to make the color input work properly
         // so I'd keep them out
         move(color) {...},
         //...

What do you think?