Skip to content

Instantly share code, notes, and snippets.

@walterdavis
Created January 7, 2020 13:17
Show Gist options
  • Save walterdavis/ce96b6ec5c7ac68d375771bc1b87eca2 to your computer and use it in GitHub Desktop.
Save walterdavis/ce96b6ec5c7ac68d375771bc1b87eca2 to your computer and use it in GitHub Desktop.
Trix Heading
trix-toolbar .trix-dialog--heading {
max-width: 190px;
}
.trix-content h1, .trix-content h2, .trix-content h3, .trix-content h4, .trix-content h5, .trix-content h6 {
line-height: 1.2;
margin: 0;
}
.trix-content h1 {
font-size: 36px;
}
.trix-content h2 {
font-size: 26px;
}
.trix-content h3 {
font-size: 18px;
}
.trix-content h4 {
font-size: 18px;
}
.trix-content h5 {
font-size: 14px;
}
.trix-content h6 {
font-size: 12px;
}
import Trix, { removeNode } from "trix"
class RichText {
constructor(element) {
this.element = element
this.removeOriginalHeadingButton()
this.insertNewHeadingButton()
this.insertHeadingDialog()
}
removeOriginalHeadingButton() {
removeNode(this.originalHeadingButton)
}
insertNewHeadingButton() {
this.buttonGroupBlockTools.insertAdjacentHTML("afterbegin", this.headingButtonTemplate)
}
insertHeadingDialog() {
this.dialogsElement.insertAdjacentHTML("beforeend", this.dialogTemplate)
}
get buttonGroupBlockTools() {
return this.toolbarElement.querySelector("[data-trix-button-group=block-tools]")
}
get dialogsElement() {
return this.toolbarElement.querySelector("[data-trix-dialogs]")
}
get originalHeadingButton() {
return this.toolbarElement.querySelector("[data-trix-attribute=heading1]")
}
get toolbarElement() {
return this.element.toolbarElement
}
get headingButtonTemplate() {
return '<button type="button" class="trix-button trix-button--icon trix-button--icon-heading-1" data-trix-action="heading" title="Heading" tabindex="-1">Heading</button>'
}
get dialogTemplate() {
return `
<div class="trix-dialog trix-dialog--heading" data-trix-dialog="heading" data-trix-dialog-attribute="heading">
<div class="trix-dialog__link-fields">
<div class="trix-button-group">
<button class="trix-button trix-button--dialog" data-trix-attribute="heading1">H1</button>
<button class="trix-button trix-button--dialog" data-trix-attribute="heading2">H2</button>
<button class="trix-button trix-button--dialog" data-trix-attribute="heading3">H3</button>
<button class="trix-button trix-button--dialog" data-trix-attribute="heading4">H4</button>
<button class="trix-button trix-button--dialog" data-trix-attribute="heading5">H5</button>
<button class="trix-button trix-button--dialog" data-trix-attribute="heading6">H6</button>
</div>
</div>
</div>
`
}
}
addEventListener("trix-initialize", function (e) {
new RichText(e.target)
})
Trix.config.blockAttributes.heading2 = { tagName: "h2", terminal: true, breakOnReturn: true, group: false }
Trix.config.blockAttributes.heading3 = { tagName: "h3", terminal: true, breakOnReturn: true, group: false }
Trix.config.blockAttributes.heading4 = { tagName: "h4", terminal: true, breakOnReturn: true, group: false }
Trix.config.blockAttributes.heading5 = { tagName: "h5", terminal: true, breakOnReturn: true, group: false }
Trix.config.blockAttributes.heading6 = { tagName: "h6", terminal: true, breakOnReturn: true, group: false }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment