[Question] Add grapesjs color picker to a new trait type?

@nojacko I've modified my code a little, here's basically what I'm doing:

 getInputEl: function() {
      if (!this.inputEl) {
        var input = document.createElement('div');
        input.innerHTML = this.inputHtml
        var inputEl = input;
        var pickerEl = inputEl.querySelector(".myolorPicker");
        pickerEl.id = "ppcp" + this.cid;
        if (!this.model.colorPickerEl) {// add the jQuery spectrum color picker to our trait editor
          this.model.colorPickerEl = editor.TraitManager.getType('color').prototype.getInputEl.apply(this, arguments);
        }
        pickerEl.appendChild(this.model.colorPickerEl)
        
        ... code to handle value changes and update other fields ...

      return this.inputEl;
}

Hope this helps. This is still a work in progress :)

Note that the getInputEl method of the colorPicker appends a spectrum colorpicker to the body of the canvas each time it's called, and it appears to be mapped to the element it returns, which is why I'm only calling it if I don't already have that element as part of my model. I suspect there are probably better ways to handle this, but this is working for my app at the moment.

Hi @pnellesen this is actually a really good question, definitely, we should allow doing so but unfortunately, right now it's not so straightforward. We should refactor few modules to make the UI more reusable. BTW try to extend editor.TraitManager.getType('color').prototype.getInputEl inside getInputEl method and see if it might help you