added left/right/center justify text buttons. changed unpinned text menu

4 files changed, 44 insertions, 32 deletions

diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 200486279..f6db1af66 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -5,7 +5,7 @@ import {
     faQuestionCircle, faArrowLeft, faArrowRight, faArrowDown, faArrowUp, faBolt, faBullseye, faCaretUp, faCat, faCheck, faChevronRight, faClipboard, faClone, faCloudUploadAlt,
     faCommentAlt, faCompressArrowsAlt, faCut, faEllipsisV, faEraser, faExclamation, faFileAlt, faFileAudio, faFilePdf, faFilm, faFilter, faFont, faGlobeAsia, faHighlighter,
     faLongArrowAltRight, faMicrophone, faMousePointer, faMusic, faObjectGroup, faPause, faPen, faPenNib, faPhone, faPlay, faPortrait, faRedoAlt, faStamp, faStickyNote,
-    faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faArrowsAlt, faQuoteLeft, faSortAmountDown
+    faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faArrowsAlt, faQuoteLeft, faSortAmountDown, faAlignLeft, faAlignCenter, faAlignRight
 } from '@fortawesome/free-solid-svg-icons';
 import { ANTIMODEMENU_HEIGHT } from './globalCssVariables.scss';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -142,7 +142,7 @@ export class MainView extends React.Component {
             faQuestionCircle, faArrowLeft, faArrowRight, faArrowDown, faArrowUp, faBolt, faBullseye, faCaretUp, faCat, faCheck, faChevronRight, faClipboard, faClone, faCloudUploadAlt,
             faCommentAlt, faCompressArrowsAlt, faCut, faEllipsisV, faEraser, faExclamation, faFileAlt, faFileAudio, faFilePdf, faFilm, faFilter, faFont, faGlobeAsia, faHighlighter,
             faLongArrowAltRight, faMicrophone, faMousePointer, faMusic, faObjectGroup, faPause, faPen, faPenNib, faPhone, faPlay, faPortrait, faRedoAlt, faStamp, faStickyNote, faTrashAlt, faAngleRight, faBell,
-            faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faArrowsAlt, faQuoteLeft, faSortAmountDown);
+            faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faArrowsAlt, faQuoteLeft, faSortAmountDown, faAlignLeft, faAlignCenter, faAlignRight);
         this.initEventListeners();
         this.initAuthenticationRouters();
     }
diff --git a/src/client/views/nodes/formattedText/ProsemirrorExampleTransfer.ts b/src/client/views/nodes/formattedText/ProsemirrorExampleTransfer.ts
index 1bbcb9fa8..9d69f4be7 100644
--- a/src/client/views/nodes/formattedText/ProsemirrorExampleTransfer.ts
+++ b/src/client/views/nodes/formattedText/ProsemirrorExampleTransfer.ts
@@ -1,7 +1,6 @@
 import { chainCommands, exitCode, joinDown, joinUp, lift, deleteSelection, joinBackward, selectNodeBackward, setBlockType, splitBlockKeepMarks, toggleMark, wrapIn, newlineInCode } from "prosemirror-commands";
 import { liftTarget } from "prosemirror-transform";
 import { redo, undo } from "prosemirror-history";
-import { undoInputRule } from "prosemirror-inputrules";
 import { Schema } from "prosemirror-model";
 import { liftListItem, sinkListItem } from "./prosemirrorPatches.js";
 import { splitListItem, wrapInList, } from "prosemirror-schema-list";
@@ -12,7 +11,6 @@ import { Doc, DataSym } from "../../../../fields/Doc";
 import { FormattedTextBox } from "./FormattedTextBox";
 import { Id } from "../../../../fields/FieldSymbols";
 import { Docs } from "../../../documents/Documents";
-import { update } from "lodash";
 
 const mac = typeof navigator !== "undefined" ? /Mac/.test(navigator.platform) : false;
 
@@ -215,10 +213,13 @@ export default function buildKeymap<S extends Schema<any>>(schema: S, props: any
                 marks && tx3.setStoredMarks([...marks]);
                 dispatch(tx3);
             })) {
+                const fromattrs = state.selection.$from.node().attrs;
                 if (!splitBlockKeepMarks(state, (tx3: Transaction) => {
-                    splitMetadata(marks, tx3);
-                    if (!liftListItem(schema.nodes.list_item)(tx3, dispatch as ((tx: Transaction<Schema<any, any>>) => void))) {
-                        dispatch(tx3);
+                    const tonode = tx3.selection.$to.node();
+                    const tx4 = tx3.setNodeMarkup(tx3.selection.to - 1, tonode.type, fromattrs, tonode.marks);
+                    splitMetadata(marks, tx4);
+                    if (!liftListItem(schema.nodes.list_item)(tx4, dispatch as ((tx: Transaction<Schema<any, any>>) => void))) {
+                        dispatch(tx4);
                     }
                 })) {
                     return false;
@@ -281,19 +282,6 @@ export default function buildKeymap<S extends Schema<any>>(schema: S, props: any
         return false;
     });
 
-    // bind("^", (state: EditorState<S>, dispatch: (tx: Transaction<S>) => void) => {
-    //     let newNode = schema.nodes.footnote.create({});
-    //     if (dispatch && state.selection.from === state.selection.to) {
-    //         let tr = state.tr;
-    //         tr.replaceSelectionWith(newNode); // replace insertion with a footnote.
-    //         dispatch(tr.setSelection(new NodeSelection( // select the footnote node to open its display
-    //             tr.doc.resolve(  // get the location of the footnote node by subtracting the nodesize of the footnote from the current insertion point anchor (which will be immediately after the footnote node)
-    //                 tr.selection.anchor - tr.selection.$anchor.nodeBefore!.nodeSize))));
-    //         return true;
-    //     }
-    //     return false;
-    // });
-
     return keys;
 }
 
diff --git a/src/client/views/nodes/formattedText/RichTextMenu.tsx b/src/client/views/nodes/formattedText/RichTextMenu.tsx
index 839943aac..a06fcec9a 100644
--- a/src/client/views/nodes/formattedText/RichTextMenu.tsx
+++ b/src/client/views/nodes/formattedText/RichTextMenu.tsx
@@ -412,6 +412,28 @@ export default class RichTextMenu extends AntimodeMenu {
         dispatch?.(tr.replaceSelectionWith(newNode).removeMark(tr.selection.from - 1, tr.selection.from, mark));
         return true;
     }
+    alignCenter = (state: EditorState<any>, dispatch: any) => {
+        return this.alignParagraphs(state, "center", dispatch);
+    }
+    alignLeft = (state: EditorState<any>, dispatch: any) => {
+        return this.alignParagraphs(state, "left", dispatch);
+    }
+    alignRight = (state: EditorState<any>, dispatch: any) => {
+        return this.alignParagraphs(state, "right", dispatch);
+    }
+
+    alignParagraphs(state: EditorState<any>, align: "left" | "right" | "center", dispatch: any) {
+        var tr = state.tr;
+        state.doc.nodesBetween(state.selection.from, state.selection.to, (node, pos, parent, index) => {
+            if (node.type === schema.nodes.paragraph) {
+                tr = tr.setNodeMarkup(pos, node.type, { ...node.attrs, align }, node.marks);
+                return false;
+            }
+            return true;
+        });
+        dispatch?.(tr);
+        return true;
+    }
 
     insertBlockquote(state: EditorState<any>, dispatch: any) {
         const path = (state.selection.$from as any).path;
@@ -768,18 +790,21 @@ export default class RichTextMenu extends AntimodeMenu {
         TraceMobx();
         const row1 = <div className="antimodeMenu-row" key="row1" style={{ display: this.collapsed ? "none" : undefined }}>{[
             !this.collapsed ? this.getDragger() : (null),
-            this.createButton("bold", "Bold", this.boldActive, toggleMark(schema.marks.strong)),
-            this.createButton("italic", "Italic", this.italicsActive, toggleMark(schema.marks.em)),
-            this.createButton("underline", "Underline", this.underlineActive, toggleMark(schema.marks.underline)),
-            this.createButton("strikethrough", "Strikethrough", this.strikethroughActive, toggleMark(schema.marks.strikethrough)),
-            this.createButton("superscript", "Superscript", this.superscriptActive, toggleMark(schema.marks.superscript)),
-            this.createButton("subscript", "Subscript", this.subscriptActive, toggleMark(schema.marks.subscript)),
+            !this.Pinned ? (null) : <> {[
+                this.createButton("bold", "Bold", this.boldActive, toggleMark(schema.marks.strong)),
+                this.createButton("italic", "Italic", this.italicsActive, toggleMark(schema.marks.em)),
+                this.createButton("underline", "Underline", this.underlineActive, toggleMark(schema.marks.underline)),
+                this.createButton("strikethrough", "Strikethrough", this.strikethroughActive, toggleMark(schema.marks.strikethrough)),
+                this.createButton("superscript", "Superscript", this.superscriptActive, toggleMark(schema.marks.superscript)),
+                this.createButton("subscript", "Subscript", this.subscriptActive, toggleMark(schema.marks.subscript)),
+            ]}</>,
             this.createColorButton(),
             this.createHighlighterButton(),
             this.createLinkButton(),
             this.createBrushButton(),
-            this.createButton("sort-amount-down", "Summarize", undefined, this.insertSummarizer),
-            this.createButton("quote-left", "Blockquote", undefined, this.insertBlockquote),
+            this.createButton("align-left", "Align Left", undefined, this.alignLeft),
+            this.createButton("align-center", "Align Center", undefined, this.alignCenter),
+            this.createButton("align-right", "Align Right", undefined, this.alignRight),
         ]}</div>;
 
         const row2 = <div className="antimodeMenu-row row-2" key="antimodemenu row2">
@@ -787,7 +812,9 @@ export default class RichTextMenu extends AntimodeMenu {
             <div key="row" style={{ display: this.collapsed ? "none" : undefined }}>
                 {[this.createMarksDropdown(this.activeFontSize, this.fontSizeOptions, "font size"),
                 this.createMarksDropdown(this.activeFontFamily, this.fontFamilyOptions, "font family"),
-                this.createNodesDropdown(this.activeListType, this.listTypeOptions, "nodes")]}
+                this.createNodesDropdown(this.activeListType, this.listTypeOptions, "nodes"),
+                this.createButton("sort-amount-down", "Summarize", undefined, this.insertSummarizer),
+                this.createButton("quote-left", "Blockquote", undefined, this.insertBlockquote),]}
             </div>
             <div key="button">
                 {/* <div key="collapser">
diff --git a/src/client/views/nodes/formattedText/RichTextRules.ts b/src/client/views/nodes/formattedText/RichTextRules.ts
index 6a85e3b7c..612a824fc 100644
--- a/src/client/views/nodes/formattedText/RichTextRules.ts
+++ b/src/client/views/nodes/formattedText/RichTextRules.ts
@@ -315,8 +315,6 @@ export class RichTextRules {
                     return node ? state.tr.replaceRangeWith(start, end, dashDoc).setStoredMarks([...node.marks, ...(sm ? sm : [])]) : state.tr;
                 }),
 
-
-
             // create an inline view of a tag stored under the '#' field
             new InputRule(
                 new RegExp(/#([a-zA-Z_\-]+[a-zA-Z_;\-0-9]*)\s$/),
@@ -374,7 +372,6 @@ export class RichTextRules {
             new InputRule(
                 new RegExp(/%\)/),
                 (state, match, start, end) => {
-
                     return state.tr.deleteRange(start, end).removeStoredMark(state.schema.marks.summarizeInclusive.create());
                 }),