Got alignment buttons barely working for paragraphs

resources/js/editor/menu/index.js

@@ -1,6 +1,6 @@
 import {
     MenuItem, Dropdown, DropdownSubmenu, renderGrouped, icons, joinUpItem, liftItem, selectParentNodeItem,
-    undoItem, redoItem, wrapItem, blockTypeItem
+    undoItem, redoItem, wrapItem, blockTypeItem, setAttrItem,
 } from "./menu"
 
 import {toggleMark} from "prosemirror-commands";
@@ -102,12 +102,28 @@ const formats = [
     ], { label: 'Callouts' }),
 ];
 
+const alignments = [
+    setAttrItem('align', 'left', {
+        label: 'Align Left'
+    }),
+    setAttrItem('align', 'right', {
+        label: 'Align Right'
+    }),
+    setAttrItem('align', 'center', {
+        label: 'Align Center'
+    }),
+    setAttrItem('align', 'justify', {
+        label: 'Align Justify'
+    }),
+];
+
 const menu = menuBar({
     floating: false,
     content: [
         [undoItem, redoItem],
         [new DropdownSubmenu(formats, { label: 'Formats' })],
         inlineStyles,
+        alignments,
     ],
 });
 

resources/js/editor/menu/menu.js

@@ -8,6 +8,7 @@
 import crel from "crelt"
 import {lift, joinUp, selectParentNode, wrapIn, setBlockType} from "prosemirror-commands"
 import {undo, redo} from "prosemirror-history"
+import {setBlockAttr} from "../commands";
 
 import {getIcon} from "./icons"
 
@@ -457,6 +458,21 @@ export function blockTypeItem(nodeType, options) {
   return new MenuItem(passedOptions)
 }
 
+export function setAttrItem(attrName, attrValue, options) {
+  const command = setBlockAttr(attrName, attrValue);
+  const passedOptions = {
+    run: command,
+    enable(state) { return command(state) },
+    active(state) {
+      const {$from, to, node} = state.selection
+      if (node) return node.attrs[attrValue] === attrValue;
+      return to <= $from.end() && $from.parent.attrs[attrValue] === attrValue;
+    }
+  }
+  for (const prop in options) passedOptions[prop] = options[prop]
+  return new MenuItem(passedOptions)
+}
+
 // Work around classList.toggle being broken in IE11
 function setClass(dom, cls, on) {
   if (on) dom.classList.add(cls)