diff --git a/app/services/trix_scrubber.rb b/app/services/trix_scrubber.rb index a8aed288c0..e8ab55afe2 100644 --- a/app/services/trix_scrubber.rb +++ b/app/services/trix_scrubber.rb @@ -2,7 +2,7 @@ class TrixScrubber < Rails::Html::PermitScrubber ALLOWED_TAGS = ["p", "b", "strong", "em", "i", "a", "u", "br", "del", "h1", "blockquote", "pre", - "ul", "ol", "li", "div"].freeze + "ul", "ol", "li", "div", "hr"].freeze ALLOWED_ATTRIBUTES = ["href", "target", "src", "alt"].freeze def initialize diff --git a/app/webpacker/controllers/trixeditor_controller.js b/app/webpacker/controllers/trixeditor_controller.js index 7975d213ed..506086fb2b 100644 --- a/app/webpacker/controllers/trixeditor_controller.js +++ b/app/webpacker/controllers/trixeditor_controller.js @@ -3,10 +3,43 @@ import { Controller } from "stimulus"; export default class extends Controller { connect() { window.addEventListener("trix-change", this.#trixChange); + this.#trixInitialize(); + window.addEventListener("trix-initialize", this.#trixInitialize); } #trixChange = (event) => { // trigger a change event on the form that contains the Trix editor event.target.form.dispatchEvent(new Event("change", { bubbles: true })); }; + + #trixActionInvoke = (event) => { + if (event.actionName === "hr") { + this.element.editor.insertAttachment( + new Trix.Attachment({ content: "
", contentType: "text/html" }) + ); + } + }; + + #trixInitialize = () => { + // Add HR button to the Trix toolbar if it's not already there and the editor is present + if ( + this.element.editor && + !this.element.toolbarElement.querySelector(".trix-button--icon-hr") + ) { + this.#addHRButton(); + } + }; + + #addHRButton = () => { + const button_html = ` + `; + const buttonGroup = this.element.toolbarElement.querySelector( + ".trix-button-group--block-tools" + ); + buttonGroup.insertAdjacentHTML("beforeend", button_html); + buttonGroup.querySelector(".trix-button--icon-hr").addEventListener("click", (event) => { + event.actionName = "hr"; + this.#trixActionInvoke(event); + }); + }; } diff --git a/app/webpacker/css/admin/trix.scss b/app/webpacker/css/admin/trix.scss index 39caa36dae..59c46b7451 100644 --- a/app/webpacker/css/admin/trix.scss +++ b/app/webpacker/css/admin/trix.scss @@ -2,6 +2,10 @@ trix-toolbar [data-trix-button-group="file-tools"] { display: none; } +trix-toolbar .trix-button--icon-hr::before { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 12h18v2H3z'/%3E%3C/svg%3E"); +} + // Match the rendering into the shopfront (see ../darkswarm/) trix-editor { color: #222;