A color picker 100% functional !

**EDIT**: if you are using Trix 2.0+ read the tutorial but instead of using this stimulus_controller, please use the stimulus_controller here: https://github.com/basecamp/trix/issues/985#issuecomment-1307422240

After a good time of reading issues and thinking I finally could create a fully functional color picker for Trix

This also works when reloading the editor page because I call reset after the config.

I also added text-align center icon to center blocks


For this to work, just wrap your `rich_text_area` in a div with `data-controller="trix"` and add a `data: { trix_target: 'editor' }` to the rich_text_area

```erb

Also add a stimulus controller called trix-controller.js and then update the stimulus manifest

`update the Stimulus manifest with ./bin/rails stimulus:manifest:update`

```js
import { Controller } from '@hotwired/stimulus'
import Trix from 'trix'

// Connects to data-controller="trix"
export default class extends Controller {
static targets = ['editor', 'foregroundColorPicker', 'backgroundColorPicker']

connect () {
this.initTrix()
this.reloadOriginalContent()
}

initTrix () {
if (this.hasForegroundColorPickerTarget) { return }

Trix.config.blockAttributes.heading1.tagName = 'h3'
this.addForegroundButtonInToolbar()
this.addBackgroundButtonInToolbar()
this.addTextAlignCenterButtonInToolbar()
}

reloadOriginalContent () {
this.editorTarget.reset()
}

openForegroundColorPicker () {
this.foregroundColorPickerTarget.click()
}

openBackgroundColorPicker () {
this.backgroundColorPickerTarget.click()
}

foregroundColorChanged () {
this.editorTarget.editor.activateAttribute('foregroundColor', this.foregroundColorPickerTarget.value)
}

backgroundColorChanged () {
this.editorTarget.editor.activateAttribute('backgroundColor', this.backgroundColorPickerTarget.value)
}

addForegroundButtonInToolbar () {
Trix.config.textAttributes.foregroundColor = {
styleProperty: 'color',
inheritable: true
}

this.element
.querySelector('.trix-button-group.trix-button-group--text-tools')
.insertAdjacentHTML('beforeend', this.foregroundColorButtons)
}

addBackgroundButtonInToolbar () {
Trix.config.textAttributes.backgroundColor = {
styleProperty: 'backgroundColor',
inheritable: true
}

this.element
.querySelector('.trix-button-group.trix-button-group--text-tools')
.insertAdjacentHTML('beforeend', this.backgroundColorButtons)
}

addTextAlignCenterButtonInToolbar () {
Trix.config.blockAttributes.textAlignCenter = {
tagName: 'centered-div'
}

this.element
.querySelector('.trix-button-group.trix-button-group--block-tools')
.insertAdjacentHTML('beforeend', this.textAlignButtons)
}

get foregroundColorButtons () {
return `


`
}

get backgroundColorButtons () {
return `


`
}

get textAlignButtons () {
return `

`
}
}

```

You may want to replace the icon `` (I use fontawesome, feel free to use whatever you like, maybe a 🎨 icon would work)

this solves https://github.com/basecamp/trix/issues/498 https://github.com/basecamp/trix/issues/606 https://github.com/basecamp/trix/issues/655 and many others.

For the centered text you will need to:

Add this css

```css
centered-div {
display: block;
text-align: center;
}
```

Also add `centered-div` as allowed tags (I have this in my application.rb)

```ruby
config.after_initialize do
ActionText::ContentHelper.allowed_attributes.add 'style'
ActionText::ContentHelper.allowed_attributes.add 'controls'
ActionText::ContentHelper.allowed_attributes.add 'poster'

ActionText::ContentHelper.allowed_tags.add 'video'
ActionText::ContentHelper.allowed_tags.add 'source'
ActionText::ContentHelper.allowed_tags.add 'centered-div'
end
```