basecamp / basecamp/trix

Cannot set HTML class attribute on block element

Open
#1,027 11 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
20k
Forks
1.1k
Avg merge
3d 12h
Merged PRs (30d)
13

Description

It looks like support for html class attributes should work on block elements [here](https://github.com/basecamp/trix/blob/3614f3317b4239b7ed0925d9307f4acbba45a442/src/trix/core/helpers/dom.js#L199-L203) by passing a `className` option.

```
if (options.className) {
options.className.split(" ").forEach((className) => {
element.classList.add(className)
})
}
```

However I cannot get the editor to add a class to the element:
```
Trix.config.blockAttributes.h2 = {
tagName: 'h2',
className: 'test1'
}

addEventListener("trix-initialize", function(event) {
var buttonHTML = 'H2'
event.target.toolbarElement
.querySelector(".button_group.text_tools")
.insertAdjacentHTML("beforeend", buttonHTML)
})
```

##### Steps to Reproduce

1. Go to JS fiddle: https://jsfiddle.net/mzsjpn8e/8/
2. enter text into the editor
3. highlight the text
4. click the `h2` button
5. inspect the source code to see that the h2 element was create but that there is no class attribute
```

test

```
I am using actionText in rails. I see that the class attribute should already be allowed:
```
3.1.3 :001 > ActionText::ContentHelper.allowed_attributes
=>
#
```

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.