Add text alignment

app/javascript/richtext.js

@@ -3,6 +3,7 @@ import Trix from "trix"
 addHeadingAttributes()
 addForegroundColorAttributes()
 addBackgroundColorAttributes()
+addAlignmentAttributes()
 
 addEventListener("trix-initialize", function (event) {
     new RichText(event.target)
@@ -27,6 +28,7 @@ class RichText {
     this.insertHeadingElements()
     this.insertDividerElements()
     this.insertColorElements()
+    this.insertAlignmentElements()
   }
 
   insertHeadingElements() {
@@ -64,6 +66,19 @@ class RichText {
     this.dialogsElement.insertAdjacentHTML("beforeend", this.dialogColorTemplate)
   }
 
+  insertAlignmentElements() {
+    this.insertAlignmentButton()
+    this.insertDialogAlignment()
+  }
+
+  insertAlignmentButton() {
+    this.buttonGroupTextTools.insertAdjacentHTML("beforeend", this.alignmentButtonTemplate)
+  }
+
+  insertDialogAlignment() {
+    this.dialogsElement.insertAdjacentHTML("beforeend", this.dialogAlignmentTemplate)
+  }
+
   get buttonGroupBlockTools() {
     return this.toolbarElement.querySelector("[data-trix-button-group=block-tools]")
   }
@@ -100,6 +115,10 @@ class RichText {
     return '<button type="button" class="trix-button trix-button--icon trix-button--icon-color" data-trix-action="x-color" title="Color" tabindex="-1">Color</button>'
   }
 
+  get alignmentButtonTemplate() {
+    return '<button type="button" class="trix-button trix-button--icon trix-button--icon-align-center" data-trix-action="x-alignment" title="Alignment" tabindex="-1">Alignment</button>'
+  }
+
   get dialogHeadingTemplate() {
     return `
       <div class="trix-dialog trix-dialog--heading" data-trix-dialog="x-heading" data-trix-dialog-attribute="x-heading">
@@ -149,6 +168,22 @@ class RichText {
       </div>
     `
   }
+
+  get dialogAlignmentTemplate() {
+    return `
+      <div class="trix-dialog trix-dialog--alignment" data-trix-dialog="x-alignment" data-trix-dialog-attribute="x-alignment">
+        <div class="trix-dialog__link-fields">
+          <input type="text" name="x-alignment" class="trix-dialog-hidden__input" data-trix-input>
+          <div class="trix-button-group">
+            <button type="button" class="trix-button trix-button--dialog" data-trix-attribute="left">Left</button>
+            <button type="button" class="trix-button trix-button--dialog" data-trix-attribute="center">Center</button>
+            <button type="button" class="trix-button trix-button--dialog" data-trix-attribute="right">Right</button>
+          </div>
+        </div>
+      </div>
+    `
+  }
+
 }
 
 function addHeadingAttributes() {
@@ -168,3 +203,16 @@ function addBackgroundColorAttributes() {
     Trix.config.textAttributes[`bgColor${(i + 1)}`] = { style: { backgroundColor: color }, inheritable: true, parser: e => e.style.backgroundColor == color }
   })
 }
+
+function addAlignmentAttributes() {
+  Array.from(["left", "center", "right"]).forEach((alignment, i) => {
+    Trix.config.textAttributes[alignment] = {
+      breakOnReturn: true,
+      group: false,
+      tagName: "div",
+      style: {textAlign: alignment},
+      terminal: true,
+      inheritable: true
+    }
+  })
+}

assets/stylesheets/richtext.scss

@@ -1,9 +1,15 @@
 trix-toolbar {
   .trix-button--icon-horizontal-rule::before { background-image: image-url("trix_horizontal_rule.svg"); }
   .trix-button--icon-color::before { background-image: image-url("trix_color.svg"); }
+  .trix-button--icon-align-center::before { background-image: image-url("trix_align_center.svg"); }
+  .trix-button--icon-align-left::before { background-image: image-url("trix_align_left.svg"); }
+  .trix-button--icon-align-right::before { background-image: image-url("trix_align_right.svg"); }
+  // .trix-button--icon-align-justify::before { background-image: image-url("trix_align_justify.svg"); }
 
   .trix-dialog--heading { max-width: 180px; }
 
+  .trix-dialog--alignment { max-width: 145px; }
+
   .trix-dialog--color {
     max-width: 265px;
 

config/initializers/action_text.rb

@@ -1,3 +1,4 @@
 Rails.application.config.after_initialize do
   ActionText::ContentHelper.allowed_attributes << 'style'
+  ActionText::ContentHelper.allowed_attributes << 'align'
 end