How do I repurpose the Spectrum Color Picker?

Currently, the only way is to use this, not public, API.

editor.getModel().initBaseColorPicker(DomElement, { /* spectrum options */ });

I've started working on a new UI module, to handle similar situations (ability to add/replace GrapesJS UI elements) but unfortunately, I have no idea when it'll be released, as it's more in an experimental stage.

is there a way to keep the color picker but configure the spectrum options? for example if i wanted to force hex colors i could pass { preferredFormat: "hex" }?

Thanks for reporting this, @stljeff1.

Great suggestion about How do I repurpose the Spectrum Color Picker?! While this specific feature isn't yet in the core API, there are several ways to achieve similar behavior.

Using the event system:

editor.on('component:update', (component) => {
  // your logic here
});

Alternative approaches:

• Listen to selector:add for CSS selector changes
• Use selector:custom for custom rules
• Tap into the change:* events for fine-grained tracking
• Build a plugin that extends the editor with this capability

Making it official: If this feature would benefit many users, consider opening a formal Feature Request on the GrapesJS repo with:

• A detailed use case
• Code example showing the desired behavior
• Why this matters for your workflow

The core team is receptive to well-motivated feature requests backed by real use cases.