altexxy 0.9.21.4 → 0.9.21.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e83217d52e97f1ee6575b9979b4dddcf0c90a685fa1ff92fcffb4e3f0b8f2c72
-  data.tar.gz: 93b523acb2a6e7d4767311986b7eae5a564d233e361491d6c196f150d056a3bb
+  metadata.gz: f52a9c970674f4c6bcc36b6bdcc5333ca5212b9af6687fc6147b0fdce6147eb1
+  data.tar.gz: f1113e93df072f40705409c1a5ebc7ce586bb1b84065bf661524647fbe3af785
 SHA512:
-  metadata.gz: 61b25f9bdb070d3342094b03c4d86f72e543d963c2c015a4b7404b57d2906cd7ca409772929ee96306cc0916b0b00e6f7749d069ded77953980a9161e8c70c7c
-  data.tar.gz: eee9aa23392caeab09ab1d4e752b243d7b44b45fe6243dc9d34abc203d0ac50d2e7c0bd5a54144379f6a73750a2886b9dcb4ec9836e28893e0186dd38d318a6e
+  metadata.gz: fd4d4ee0216e66e0bc073dce8704ac65967383a8d2cd40652174d23a27078e21c8f26396a637bf6f929a3ba79f7c7a5c9a7e95836130aa87d75527e23fde1777
+  data.tar.gz: a4ecae8a1a0af030031831ecd189b0c7156061a945916524ff7bb8bfbcf771f47cd2a0179903a2d8b78711d038d47f373cb56552e741e3462ba86efa707538b5

data/app/assets/javascript/lexxy.js

@@ -6218,7 +6218,7 @@ function E$3(e,...t){const n=new URL("https://lexical.dev/docs/error"),o=new URL
 
 const ALLOWED_HTML_ATTRIBUTES = [ "class", "contenteditable", "href", "src", "style", "title" ];
 
-const ALLOWED_STYLE_PROPERTIES = [ "color", "background-color", "font-size" ];
+const ALLOWED_STYLE_PROPERTIES = [ "color", "background-color", "font-size", "text-align" ];
 
 function styleFilterHook(_currentNode, hookEvent) {
   if (hookEvent.attrName === "style" && hookEvent.attrValue) {
@@ -6570,6 +6570,26 @@ var ToolbarIcons = {
     <path d="M2.84155 6V3.01367H2.79053L1.85596 3.64478V2.79614L2.84155 2.12476H3.82715V6H2.84155Z"/>
   </svg>`,
 
+  "alignLeft":
+  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+    <path d="M2 3.5C2 2.94772 2.44772 2.5 3 2.5H15C15.5523 2.5 16 2.94772 16 3.5C16 4.05228 15.5523 4.5 15 4.5H3C2.44772 4.5 2 4.05228 2 3.5ZM2 7.16667C2 6.61438 2.44772 6.16667 3 6.16667H11C11.5523 6.16667 12 6.61438 12 7.16667C12 7.71895 11.5523 8.16667 11 8.16667H3C2.44772 8.16667 2 7.71895 2 7.16667ZM2 10.8333C2 10.281 2.44772 9.83333 3 9.83333H15C15.5523 9.83333 16 10.281 16 10.8333C16 11.3856 15.5523 11.8333 15 11.8333H3C2.44772 11.8333 2 11.3856 2 10.8333ZM2 14.5C2 13.9477 2.44772 13.5 3 13.5H11C11.5523 13.5 12 13.9477 12 14.5C12 15.0523 11.5523 15.5 11 15.5H3C2.44772 15.5 2 15.0523 2 14.5Z"/>
+  </svg>`,
+
+  "alignCenter":
+  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+    <path d="M2 3.5C2 2.94772 2.44772 2.5 3 2.5H15C15.5523 2.5 16 2.94772 16 3.5C16 4.05228 15.5523 4.5 15 4.5H3C2.44772 4.5 2 4.05228 2 3.5ZM4 7.16667C4 6.61438 4.44772 6.16667 5 6.16667H13C13.5523 6.16667 14 6.61438 14 7.16667C14 7.71895 13.5523 8.16667 13 8.16667H5C4.44772 8.16667 4 7.71895 4 7.16667ZM2 10.8333C2 10.281 2.44772 9.83333 3 9.83333H15C15.5523 9.83333 16 10.281 16 10.8333C16 11.3856 15.5523 11.8333 15 11.8333H3C2.44772 11.8333 2 11.3856 2 10.8333ZM4 14.5C4 13.9477 4.44772 13.5 5 13.5H13C13.5523 13.5 14 13.9477 14 14.5C14 15.0523 13.5523 15.5 13 15.5H5C4.44772 15.5 4 15.0523 4 14.5Z"/>
+  </svg>`,
+
+  "alignRight":
+  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+    <path d="M2 3.5C2 2.94772 2.44772 2.5 3 2.5H15C15.5523 2.5 16 2.94772 16 3.5C16 4.05228 15.5523 4.5 15 4.5H3C2.44772 4.5 2 4.05228 2 3.5ZM6 7.16667C6 6.61438 6.44772 6.16667 7 6.16667H15C15.5523 6.16667 16 6.61438 16 7.16667C16 7.71895 15.5523 8.16667 15 8.16667H7C6.44772 8.16667 6 7.71895 6 7.16667ZM2 10.8333C2 10.281 2.44772 9.83333 3 9.83333H15C15.5523 9.83333 16 10.281 16 10.8333C16 11.3856 15.5523 11.8333 15 11.8333H3C2.44772 11.8333 2 11.3856 2 10.8333ZM6 14.5C6 13.9477 6.44772 13.5 7 13.5H15C15.5523 13.5 16 13.9477 16 14.5C16 15.0523 15.5523 15.5 15 15.5H7C6.44772 15.5 6 15.0523 6 14.5Z"/>
+  </svg>`,
+
+  "alignJustify":
+  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+    <path d="M2 3.5C2 2.94772 2.44772 2.5 3 2.5H15C15.5523 2.5 16 2.94772 16 3.5C16 4.05228 15.5523 4.5 15 4.5H3C2.44772 4.5 2 4.05228 2 3.5ZM2 7.16667C2 6.61438 2.44772 6.16667 3 6.16667H15C15.5523 6.16667 16 6.61438 16 7.16667C16 7.71895 15.5523 8.16667 15 8.16667H3C2.44772 8.16667 2 7.71895 2 7.16667ZM2 10.8333C2 10.281 2.44772 9.83333 3 9.83333H15C15.5523 9.83333 16 10.281 16 10.8333C16 11.3856 15.5523 11.8333 15 11.8333H3C2.44772 11.8333 2 11.3856 2 10.8333ZM2 14.5C2 13.9477 2.44772 13.5 3 13.5H15C15.5523 13.5 16 13.9477 16 14.5C16 15.0523 15.5523 15.5 15 15.5H3C2.44772 15.5 2 15.0523 2 14.5Z"/>
+  </svg>`,
+
   "image":
   `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
     <path d="M14 2C15.6569 2 17 3.34315 17 5V13C17 14.6569 15.6569 16 14 16H4C2.34315 16 1 14.6569 1 13V5C1 3.34315 2.34315 2 4 2H14ZM3.06348 13.3496C3.2053 13.7294 3.57078 14 4 14H13.5859L11 11.4141L9.70703 12.707C9.31651 13.0976 8.68349 13.0976 8.29297 12.707C7.90244 12.3165 7.90244 11.6835 8.29297 11.293L8.58594 11L7 9.41406L3.06348 13.3496ZM4 4C3.44772 4 3 4.44772 3 5V10.5859L6.29297 7.29297L6.36914 7.22461C6.76191 6.90427 7.34092 6.92686 7.70703 7.29297L10 9.58594L10.293 9.29297L10.3691 9.22461C10.7619 8.90427 11.3409 8.92686 11.707 9.29297L15 12.5859V5C15 4.44772 14.5523 4 14 4H4ZM12.5 5C13.3284 5 14 5.67157 14 6.5C14 7.32843 13.3284 8 12.5 8C11.6716 8 11 7.32843 11 6.5C11 5.67157 11.6716 5 12.5 5Z"/>
@@ -6818,7 +6838,7 @@ class LexicalToolbarElement extends HTMLElement {
     if (!anchorNode.getParent()) { return }
 
     const { isBold, isItalic, isStrikethrough, isUnderline, isHighlight, isInLink, isInQuote, isInHeading,
-      headingTag, isInCode, isInList, listType, isInTable } = this.selection.getFormat();
+      alignment, headingTag, isInCode, isInList, listType, isInTable } = this.selection.getFormat();
 
     this.#setButtonPressed("bold", isBold);
     this.#setButtonPressed("italic", isItalic);
@@ -6834,6 +6854,11 @@ class LexicalToolbarElement extends HTMLElement {
     this.#setButtonPressed("heading-5", headingTag === "h5");
     this.#setButtonPressed("heading-6", headingTag === "h6");
 
+    this.#setButtonPressed("align-left", alignment === "left");
+    this.#setButtonPressed("align-center", alignment === "center");
+    this.#setButtonPressed("align-right", alignment === "right");
+    this.#setButtonPressed("align-justify", alignment === "justify");
+
     this.#setButtonPressed("lists", isInList);
     this.#setButtonPressed("unordered-list", isInList && listType === "bullet");
     this.#setButtonPressed("ordered-list", isInList && listType === "number");
@@ -6879,6 +6904,7 @@ class LexicalToolbarElement extends HTMLElement {
 
   #refreshOverflow() {
     this.#hideOverflowMenuButton();
+    this.#positionNewToolbarItems();
     this.#resetToolbarOverflow();
     this.#reindexToolbarItems();
     this.#compactMenu();
@@ -6890,14 +6916,31 @@ class LexicalToolbarElement extends HTMLElement {
     this.#showOverflowMenuButton(isOverflowing);
   }
 
+  #positionNewToolbarItems() {
+    let nextPosition = Math.max(
+      -1,
+      ...[ ...this.#toolbarItems, ...this.#overflowMenuItems ].map((item) => this.#itemPosition(item))
+    ) + 1;
+
+    for (const item of this.#toolbarItems) {
+      if (item.dataset.position == null) {
+        item.dataset.position = nextPosition.toString();
+        nextPosition++;
+      }
+    }
+  }
+
   #resetToolbarOverflow() {
-    const items = Array.from(this.#overflowMenuDropdown.children);
-    items.sort((a, b) => this.#itemPosition(b) - this.#itemPosition(a));
+    for (const item of this.#overflowMenuItems) {
+      item.removeAttribute("role");
+      this.insertBefore(item, this.#overflowMenuButton);
+    }
+
+    const items = this.#toolbarItems;
+    items.sort((a, b) => this.#itemPosition(a) - this.#itemPosition(b));
 
     for (const item of items) {
-      const nextItem = this.querySelector(`[data-position="${this.#itemPosition(item) + 1}"]`) ?? this.#overflowMenuButton;
-      item.removeAttribute("role");
-      this.insertBefore(item, nextItem);
+      this.insertBefore(item, this.#overflowMenuButton);
     }
   }
 
@@ -6971,6 +7014,10 @@ class LexicalToolbarElement extends HTMLElement {
     return this.#overflowMenuButton?.querySelector(":scope > [data-dropdown-panel]")
   }
 
+  get #overflowMenuItems() {
+    return Array.from(this.#overflowMenuDropdown.children)
+  }
+
   get #overflowableItems() {
     return Array.from(this.querySelectorAll(":scope > :not(.lexxy-editor__toolbar-overflow):not([data-prevent-overflow])"))
   }
@@ -7141,6 +7188,22 @@ class LexicalToolbarElement extends HTMLElement {
         ${ToolbarIcons.ol}
       </button>
 
+      <button class="lexxy-editor__toolbar-button" type="button" name="align-left" data-command="alignLeft" title="Align left">
+        ${ToolbarIcons.alignLeft}
+      </button>
+
+      <button class="lexxy-editor__toolbar-button" type="button" name="align-center" data-command="alignCenter" title="Align center">
+        ${ToolbarIcons.alignCenter}
+      </button>
+
+      <button class="lexxy-editor__toolbar-button" type="button" name="align-right" data-command="alignRight" title="Align right">
+        ${ToolbarIcons.alignRight}
+      </button>
+
+      <button class="lexxy-editor__toolbar-button lexxy-editor__toolbar-group-end" type="button" name="align-justify" data-command="alignJustify" title="Justify">
+        ${ToolbarIcons.alignJustify}
+      </button>
+
       <button class="lexxy-editor__toolbar-button" type="button" name="table" data-command="insertTable" title="Insert a table">
         ${ToolbarIcons.table}
       </button>
@@ -10578,6 +10641,10 @@ const COMMANDS = [
   "setFormatHeadingSmall",
   "setFormatParagraph",
   "clearFormatting",
+  "alignLeft",
+  "alignCenter",
+  "alignRight",
+  "alignJustify",
   "insertUnorderedList",
   "insertOrderedList",
   "insertQuoteBlock",
@@ -10867,6 +10934,22 @@ class CommandDispatcher {
     this.contents.clearFormatting();
   }
 
+  dispatchAlignLeft() {
+    this.editor.dispatchCommand(Re$1, "left");
+  }
+
+  dispatchAlignCenter() {
+    this.editor.dispatchCommand(Re$1, "center");
+  }
+
+  dispatchAlignRight() {
+    this.editor.dispatchCommand(Re$1, "right");
+  }
+
+  dispatchAlignJustify() {
+    this.editor.dispatchCommand(Re$1, "justify");
+  }
+
   dispatchUploadImage() {
     this.#dispatchUploadAttachment("image/*,video/*");
   }
@@ -11156,6 +11239,7 @@ class Selection {
       isInQuote: Mt$2(topLevelElement),
       isInHeading: headingNode !== null,
       isInCode: this.#isInCode(selection, anchorNode),
+      alignment: this.#getNearestBlockElementFormat(anchorNode),
       headingTag: headingNode?.getTag() ?? null,
       isInList: listType !== null,
       listType,
@@ -11331,6 +11415,17 @@ class Selection {
     return Tr(anchorNode) && anchorNode.hasFormat("code")
   }
 
+  #getNearestBlockElementFormat(node) {
+    let blockElement;
+    if (Wi(node) && !node.isInline()) {
+      blockElement = node;
+    } else {
+      blockElement = dl(node, parentNode => Wi(parentNode) && !parentNode.isInline());
+    }
+
+    return blockElement?.getFormatType() || null
+  }
+
   #getSelectedLinkNode(selection) {
     if (selection.isCollapsed()) {
       return At$2(selection.anchor.getNode(), F$4)
@@ -13974,13 +14069,14 @@ class BrowserAdapter {
     this.editorElement = editorElement;
   }
 
-  dispatchAttributesChange(attributes, link, highlight, headingTag, fontSize) {
+  dispatchAttributesChange(attributes, link, highlight, headingTag, fontSize, alignment) {
     dispatch(this.editorElement, "lexxy:attributes-change", {
       attributes,
       link: typeof link === "string" ? { href: link } : link,
       highlight,
       headingTag,
-      fontSize
+      fontSize,
+      alignment
     });
   }
 
@@ -16322,6 +16418,7 @@ class LexicalEditorElement extends HTMLElement {
     let highlight = null;
     let headingTag = null;
     let fontSize = null;
+    let alignment = null;
     let link = null;
 
     this.editor.getEditorState().read(() => {
@@ -16343,6 +16440,10 @@ class LexicalEditorElement extends HTMLElement {
         link: { active: linkNode !== null, enabled: true },
         quote: { active: format.isInQuote, enabled: true },
         heading: { active: format.isInHeading, enabled: true },
+        "align-left": { active: format.alignment === "left", enabled: true },
+        "align-center": { active: format.alignment === "center", enabled: true },
+        "align-right": { active: format.alignment === "right", enabled: true },
+        "align-justify": { active: format.alignment === "justify", enabled: true },
         "unordered-list": { active: format.isInList && format.listType === "bullet", enabled: true },
         "ordered-list": { active: format.isInList && format.listType === "number", enabled: true },
         undo: { active: false, enabled: this.canUndo },
@@ -16356,10 +16457,11 @@ class LexicalEditorElement extends HTMLElement {
       }
       headingTag = format.headingTag ?? null;
       fontSize = getSelectionStyle(selection, "font-size");
+      alignment = format.alignment || null;
     });
 
     if (attributes) {
-      this.adapter.dispatchAttributesChange(attributes, link, highlight, headingTag, fontSize);
+      this.adapter.dispatchAttributesChange(attributes, link, highlight, headingTag, fontSize, alignment);
     }
   }
 
@@ -18312,13 +18414,14 @@ class NativeAdapter {
     this.editorContentElement = editorElement.editorContentElement;
   }
 
-  dispatchAttributesChange(attributes, link, highlight, headingTag, fontSize) {
+  dispatchAttributesChange(attributes, link, highlight, headingTag, fontSize, alignment) {
     dispatch(this.editorElement, "lexxy:attributes-change", {
       attributes,
       link: typeof link === "string" ? { href: link } : link,
       highlight,
       headingTag,
-      fontSize
+      fontSize,
+      alignment
     });
   }