feat: add text and heading align options

src/menus/formatting.ts

@@ -1,14 +1,15 @@
 import {
   BoldIcon,
   CodeIcon,
-  Heading1Icon,
-  Heading2Icon,
   ItalicIcon,
   BlockQuoteIcon,
   LinkIcon,
   StrikethroughIcon,
   InputIcon,
   HighlightIcon,
+  AlignLeftIcon,
+  AlignRightIcon,
+  AlignCenterIcon,
 } from "outline-icons";
 import { isInTable } from "prosemirror-tables";
 import { EditorState } from "prosemirror-state";
@@ -28,6 +29,16 @@ export default function formattingMenuItems(
   const isList = isInList(state);
   const allowBlocks = !isTable && !isList;
 
+  const isLeftAligned = isNodeActive(schema.nodes.paragraph, {
+    layoutClass: "left",
+  });
+  const isRightAligned = isNodeActive(schema.nodes.paragraph, {
+    layoutClass: "right",
+  });
+  const isCenterAligned = isNodeActive(schema.nodes.paragraph, {
+    layoutClass: "center",
+  });
+
   return [
     {
       name: "link",
@@ -89,11 +100,32 @@ export default function formattingMenuItems(
       attrs: { level: 2 },
       visible: allowBlocks,
     },
+    {
+      name: "separator",
+    },
+    {
+      name: "alignTextLeft",
+      tooltip: dictionary.alignLeft,
+      icon: AlignLeftIcon,
+      active: isLeftAligned,
+    },
+    {
+      name: "alignTextCenter",
+      tooltip: dictionary.alignCenter,
+      icon: AlignCenterIcon,
+      active: isCenterAligned,
+    },
+    {
+      name: "alignTextRight",
+      tooltip: dictionary.alignRight,
+      icon: AlignRightIcon,
+      active: isRightAligned,
+    },
     {
       name: "add_flashcard",
       tooltip: dictionary.quote,
       text: "+ Flashcard",
-      visible: true
+      visible: true,
     },
   ];
 }

src/menus/image.tsx

@@ -37,7 +37,7 @@ export default function imageMenuItems(
       tooltip: dictionary.alignCenter,
       icon: AlignImageCenterIcon,
       visible: true,
-      active: state =>
+      active: (state) =>
         isNodeActive(schema.nodes.image)(state) && isCenterAligned(state),
     },
     {

src/nodes/Heading.ts

@@ -27,6 +27,7 @@ export default class Heading extends Node {
   get schema() {
     return {
       attrs: {
+        layoutClass: { default: null },
         level: {
           default: 1,
         },
@@ -35,24 +36,13 @@ export default class Heading extends Node {
       group: "block",
       defining: true,
       draggable: false,
-      parseDOM: this.options.levels.map(level => ({
+      parseDOM: this.options.levels.map((level) => ({
         tag: `h${level}`,
         attrs: { level },
+        getAttrs: (dom) => this.extractLayoutClassFromDOM(dom),
         contentElement: "span",
       })),
-      toDOM: node => {
-        const button = document.createElement("button");
-        button.innerText = "#";
-        button.type = "button";
-        button.className = "heading-anchor";
-        button.addEventListener("click", this.handleCopyLink());
-
-        return [
-          `h${node.attrs.level + (this.options.offset || 0)}`,
-          // button,
-          ["span", 0],
-        ];
-      },
+      toDOM: (node) => this.createDOMAttributes(node),
     };
   }
 
@@ -78,7 +68,7 @@ export default class Heading extends Node {
   }
 
   handleCopyLink = () => {
-    return event => {
+    return (event) => {
       // this is unfortunate but appears to be the best way to grab the anchor
       // as it's added directly to the dom by a decoration.
       const anchor = event.currentTarget.parentNode.previousSibling;
@@ -119,7 +109,7 @@ export default class Heading extends Node {
   }
 
   get plugins() {
-    const getAnchors = doc => {
+    const getAnchors = (doc) => {
       const decorations: Decoration[] = [];
       const previouslySeen = {};
 
@@ -171,18 +161,43 @@ export default class Heading extends Node {
         },
       },
       props: {
-        decorations: state => plugin.getState(state),
+        decorations: (state) => plugin.getState(state),
       },
     });
 
     return [plugin];
   }
 
   inputRules({ type }: { type: NodeType }) {
-    return this.options.levels.map(level =>
+    return this.options.levels.map((level) =>
       textblockTypeInputRule(new RegExp(`^(#{1,${level}})\\s$`), type, () => ({
         level,
       }))
     );
   }
+
+  extractLayoutClassFromDOM(dom) {
+    const className = dom.className;
+    const layoutClassMatched = className && className.match(/text-(.*)$/);
+    const layoutClass = layoutClassMatched ? layoutClassMatched[1] : null;
+    return { layoutClass };
+  }
+
+  createDOMAttributes(node) {
+    const className = node.attrs.layoutClass
+      ? `text-${node.attrs.layoutClass}`
+      : null;
+
+    const button = document.createElement("button");
+    button.innerText = "#";
+    button.type = "button";
+    button.className = "heading-anchor";
+    button.addEventListener("click", this.handleCopyLink());
+
+    return [
+      `h${node.attrs.level + (this.options.offset || 0)}`,
+      // button,
+      ["span", { class: className }, 0],
+    ];
+  }
 }

src/nodes/Paragraph.tsx

@@ -0,0 +1,91 @@
+import { setBlockType } from "prosemirror-commands";
+import Node from "./Node";
+
+export default class Paragraph extends Node {
+  get name() {
+    return "paragraph";
+  }
+
+  get schema() {
+    return {
+      attrs: {
+        layoutClass: { default: null },
+      },
+      content: "inline*",
+      group: "block",
+      parseDOM: [
+        {
+          tag: "p",
+          getAttrs: (dom) => this.extractLayoutClassFromDOM(dom),
+        },
+      ],
+      toDOM: (node) => this.createDOMAttributes(node),
+    };
+  }
+
+  keys({ type }) {
+    return {
+      "Shift-Ctrl-0": setBlockType(type),
+    };
+  }
+
+  commands({ type }) {
+    const alignText = (state, dispatch, layoutClass) => {
+      const attrs = { layoutClass };
+      const { selection } = state;
+      const pos = selection.$from.pos - 1;
+      const node = state.doc.nodeAt(pos);
+      if (node) {
+        const newAttrs = { ...node.attrs, ...attrs };
+        const tr = state.tr.setNodeMarkup(pos, null, newAttrs);
+        dispatch(tr);
+        return true;
+      }
+      return false;
+    };
+
+    return {
+      setBlockType: () => setBlockType(type),
+      alignTextRight: () => (state, dispatch) =>
+        alignText(state, dispatch, "right"),
+      alignTextLeft: () => (state, dispatch) =>
+        alignText(state, dispatch, "left"),
+      alignTextCenter: () => (state, dispatch) =>
+        alignText(state, dispatch, "center"),
+    };
+  }
+
+  toMarkdown(state, node) {
+    if (this.isEmptyParagraph(node, state)) {
+      state.write("\\\n");
+    } else {
+      state.renderInline(node);
+      state.closeBlock(node);
+    }
+  }
+
+  parseMarkdown() {
+    return { block: "paragraph" };
+  }
+
+  extractLayoutClassFromDOM(dom) {
+    const className = dom.className;
+    const layoutClassMatched = className && className.match(/text-(.*)$/);
+    const layoutClass = layoutClassMatched ? layoutClassMatched[1] : null;
+    return { layoutClass };
+  }
+
+  createDOMAttributes(node) {
+    const className = node.attrs.layoutClass
+      ? `text-${node.attrs.layoutClass}`
+      : null;
+
+    return ["p", { class: className }, 0];
+  }
+
+  isEmptyParagraph(node, state) {
+    return (
+      node.textContent.trim() === "" && node.childCount === 0 && !state.inTable
+    );
+  }
+}