@lukso/web-components 1.156.0 → 1.156.1

package/dist/components/lukso-markdown-editor/index.js

@@ -48,9 +48,11 @@ let LuksoMarkdownEditor = class extends TailwindStyledElement(style) {
     this.isHeadingDropdownOpen = false;
     this.isColorDropdownOpen = false;
     this.isListDropdownOpen = false;
+    this.isAlignmentDropdownOpen = false;
     this.headingTriggerId = "heading-dropdown-trigger";
     this.colorTriggerId = "color-dropdown-trigger";
     this.listTriggerId = "list-dropdown-trigger";
+    this.alignmentTriggerId = "alignment-dropdown-trigger";
     this.currentSelection = { start: 0, end: 0 };
     this.savedSelection = null;
     this.defaultColor = "#374151";
@@ -61,10 +63,12 @@ let LuksoMarkdownEditor = class extends TailwindStyledElement(style) {
       h1: false,
       h2: false,
       h3: false,
+      h4: false,
       color: false,
       activeColor: this.defaultColor,
       unorderedList: false,
-      orderedList: false
+      orderedList: false,
+      alignment: "left"
     };
     // Undo/Redo state
     this.undoStack = [];
@@ -87,14 +91,19 @@ let LuksoMarkdownEditor = class extends TailwindStyledElement(style) {
         if (this.isListDropdownOpen) {
           this.isListDropdownOpen = false;
         }
+        if (this.isAlignmentDropdownOpen) {
+          this.isAlignmentDropdownOpen = false;
+        }
         return;
       }
       const isInsideHeadingDropdown = this.shadowRoot?.getElementById("headingDropdown")?.contains(target);
       const isInsideColorDropdown = this.shadowRoot?.getElementById("colorDropdown")?.contains(target);
       const isInsideListDropdown = this.shadowRoot?.getElementById("listDropdown")?.contains(target);
+      const isInsideAlignmentDropdown = this.shadowRoot?.getElementById("alignmentDropdown")?.contains(target);
       const isHeadingTrigger = this.shadowRoot?.getElementById(this.headingTriggerId)?.contains(target);
       const isColorTrigger = this.shadowRoot?.getElementById(this.colorTriggerId)?.contains(target);
       const isListTrigger = this.shadowRoot?.getElementById(this.listTriggerId)?.contains(target);
+      const isAlignmentTrigger = this.shadowRoot?.getElementById(this.alignmentTriggerId)?.contains(target);
       if (!isInsideHeadingDropdown && !isHeadingTrigger && this.isHeadingDropdownOpen) {
         this.isHeadingDropdownOpen = false;
       }
@@ -104,6 +113,9 @@ let LuksoMarkdownEditor = class extends TailwindStyledElement(style) {
       if (!isInsideListDropdown && !isListTrigger && this.isListDropdownOpen) {
         this.isListDropdownOpen = false;
       }
+      if (!isInsideAlignmentDropdown && !isAlignmentTrigger && this.isAlignmentDropdownOpen) {
+        this.isAlignmentDropdownOpen = false;
+      }
     };
     this.styles = ce({
       slots: {
@@ -116,6 +128,7 @@ let LuksoMarkdownEditor = class extends TailwindStyledElement(style) {
         colorMenu: "relative",
         headingMenu: "relative",
         listMenu: "relative",
+        alignmentMenu: "relative",
         label: "heading-inter-14-bold text-neutral-20",
         description: "paragraph-inter-12-regular text-neutral-20",
         divider: "w-[1px] h-4 bg-neutral-90"
@@ -328,7 +341,7 @@ let LuksoMarkdownEditor = class extends TailwindStyledElement(style) {
   /**
    * Apply or toggle heading formatting for the current line(s).
    *
-   * @param level - 0 to remove heading, 1-3 for heading levels
+   * @param level - 0 to remove heading, 1-4 for heading levels
    */
   applyHeading(level) {
     if (this.isReadonly || this.isDisabled) return;
@@ -519,6 +532,156 @@ let LuksoMarkdownEditor = class extends TailwindStyledElement(style) {
     if (this.activeFormats.orderedList) return "ordered";
     return "none";
   }
+  /**
+   * Get the current alignment icon name based on activeFormats.
+   */
+  getAlignmentIcon() {
+    switch (this.activeFormats.alignment) {
+      case "center":
+        return "textalign-center";
+      case "right":
+        return "textalign-right";
+      default:
+        return "textalign-left";
+    }
+  }
+  /**
+   * Apply or toggle text alignment for the current line(s).
+   *
+   * @param alignment - 'left', 'center', or 'right'
+   */
+  applyAlignment(alignment) {
+    if (this.isReadonly || this.isDisabled) return;
+    this.saveUndoStateBeforeChange();
+    this.withSelection((textarea, start, end, value) => {
+      const lineStart = value.lastIndexOf("\n", start - 1) + 1;
+      let lineEnd = value.indexOf("\n", end);
+      if (lineEnd === -1) lineEnd = value.length;
+      const before = value.slice(0, lineStart);
+      const selected = value.slice(lineStart, lineEnd);
+      const after = value.slice(lineEnd);
+      let transformed;
+      const currentAlignmentRegex = /<div style="text-align: (left|center|right);">(.*?)<\/div>/s;
+      const existingMatch = selected.match(currentAlignmentRegex);
+      if (existingMatch || this.hasNestedAlignment(selected)) {
+        if (existingMatch) {
+          const existingAlignment = existingMatch[1];
+          const innerContent = existingMatch[2];
+          if (existingAlignment === alignment) {
+            transformed = innerContent;
+          } else {
+            transformed = `<div style="text-align: ${alignment};">${innerContent}</div>`;
+          }
+        } else {
+          if (this.getNestedAlignment(selected) === alignment) {
+            transformed = this.removeNestedAlignment(selected);
+          } else {
+            transformed = this.replaceNestedAlignment(selected, alignment);
+          }
+        }
+      } else {
+        if (alignment === "left") {
+          transformed = selected;
+        } else {
+          transformed = this.wrapContentWithAlignment(selected, alignment);
+        }
+      }
+      this.value = before + transformed + after;
+      textarea.value = before + transformed + after;
+      const cursorPosition = before.length + transformed.length;
+      requestAnimationFrame(() => {
+        textarea.setSelectionRange(cursorPosition, cursorPosition);
+        this.updateActiveFormats();
+      });
+      this.dispatchChange();
+    });
+  }
+  /**
+   * Check if content has nested alignment divs inside formatting markers.
+   */
+  hasNestedAlignment(content) {
+    const alignmentRegex = /<div style="text-align: (left|center|right);">/;
+    return alignmentRegex.test(content);
+  }
+  /**
+   * Get the alignment from nested alignment divs.
+   */
+  getNestedAlignment(content) {
+    const alignmentMatch = content.match(
+      /<div style="text-align: (left|center|right);">/
+    );
+    return alignmentMatch ? alignmentMatch[1] : null;
+  }
+  /**
+   * Remove nested alignment divs from content.
+   */
+  removeNestedAlignment(content) {
+    return content.replace(
+      /<div style="text-align: (left|center|right);">([^<]*?)<\/div>/g,
+      "$2"
+    );
+  }
+  /**
+   * Replace nested alignment with a new alignment.
+   */
+  replaceNestedAlignment(content, newAlignment) {
+    return content.replace(
+      /<div style="text-align: (left|center|right);">([^<]*?)<\/div>/g,
+      `<div style="text-align: ${newAlignment};">$2</div>`
+    );
+  }
+  /**
+   * Wrap content with alignment div, ensuring proper nesting inside formatting markers.
+   * Examples:
+   * - **text** becomes **<div style="text-align: center;">text</div>**
+   * - *text* becomes *<div style="text-align: center;">text</div>*
+   * - # text becomes # <div style="text-align: center;">text</div>
+   *
+   * @param content - the content to wrap
+   * @param alignment - 'left', 'center' or 'right'
+   */
+  wrapContentWithAlignment(content, alignment) {
+    const alignmentDiv = (innerContent) => `<div style="text-align: ${alignment};">${innerContent}</div>`;
+    const headingMatch = content.match(/^(#{1,6}\s+)(.*)$/);
+    if (headingMatch) {
+      const headingPrefix = headingMatch[1];
+      const headingText = headingMatch[2];
+      return headingPrefix + alignmentDiv(headingText);
+    }
+    const boldMatch = content.match(/^(\*\*)(.+?)(\*\*)$/s);
+    if (boldMatch) {
+      const innerText = boldMatch[2];
+      return `**${alignmentDiv(innerText)}**`;
+    }
+    const italicMatch = content.match(/^(\*)(.+?)(\*)$/s);
+    if (italicMatch) {
+      const innerText = italicMatch[2];
+      return `*${alignmentDiv(innerText)}*`;
+    }
+    const linkMatch = content.match(/^(\[)(.+?)(\]\([^)]+\))$/s);
+    if (linkMatch) {
+      const linkStart = linkMatch[1];
+      const linkText = linkMatch[2];
+      const linkEnd = linkMatch[3];
+      return linkStart + alignmentDiv(linkText) + linkEnd;
+    }
+    const colorMatch = content.match(
+      /^(<span style="color: [^"]+;">)(.+?)(<\/span>)$/s
+    );
+    if (colorMatch) {
+      const colorStart = colorMatch[1];
+      const colorText = colorMatch[2];
+      const colorEnd = colorMatch[3];
+      return colorStart + alignmentDiv(colorText) + colorEnd;
+    }
+    const listMatch = content.match(/^(\s*(?:[-*+]|\d+\.)\s+)(.*)$/);
+    if (listMatch) {
+      const listPrefix = listMatch[1];
+      const listText = listMatch[2];
+      return listPrefix + alignmentDiv(listText);
+    }
+    return alignmentDiv(content);
+  }
   /**
    * Toggle inline formatting by wrapping/unwrapping selection or current word.
    *
@@ -752,6 +915,23 @@ let LuksoMarkdownEditor = class extends TailwindStyledElement(style) {
       );
       activeColor = beforeColorMatch?.[1] || selectedColorMatch?.[1] || "";
     }
+    const alignmentRegex = /<div style="text-align: (left|center|right);">/;
+    let alignment = "left";
+    const alignmentMatch = currentLine.match(alignmentRegex);
+    if (alignmentMatch) {
+      alignment = alignmentMatch[1];
+    } else {
+      const beforeCurrentLine = this.value.slice(0, lineStart);
+      const alignmentStartMatch = beforeCurrentLine.match(
+        /.*<div style="text-align: (left|center|right);">[^<]*$/s
+      );
+      if (alignmentStartMatch) {
+        const afterCurrentLine = this.value.slice(lineEnd);
+        if (afterCurrentLine.includes("</div>")) {
+          alignment = alignmentStartMatch[1];
+        }
+      }
+    }
     this.activeFormats = {
       bold: hasBoldWrap,
       italic: hasItalicWrap,
@@ -759,10 +939,12 @@ let LuksoMarkdownEditor = class extends TailwindStyledElement(style) {
       h1: headingLevel === 1,
       h2: headingLevel === 2,
       h3: headingLevel === 3,
+      h4: headingLevel === 4,
       color: hasColorWrap,
       activeColor,
       unorderedList: hasUnorderedList,
-      orderedList: hasOrderedList
+      orderedList: hasOrderedList,
+      alignment
     };
   }
   /**
@@ -964,54 +1146,59 @@ let LuksoMarkdownEditor = class extends TailwindStyledElement(style) {
         return;
       }
       const { start: s, end: e } = this.expandSelectionToWord(start, end, value);
-      const before = value.slice(0, s);
-      let selected = value.slice(s, e);
-      const after = value.slice(e);
-      const colorRegex = /<span style="color: ([^"]+)">(.*?)<\/span>/gs;
-      selected = selected.replace(colorRegex, "$2");
-      const fullColorRegex = /<span style="color: ([^"]+)">(.*?)<\/span>/g;
+      const colorRegex = /<span style="color: ([^"]+)">(.*?)<\/span>/g;
       let match;
-      let foundMatch = false;
-      const searchText = value.slice(
-        Math.max(0, s - 100),
-        Math.min(value.length, e + 100)
-      );
-      const searchOffset = Math.max(0, s - 100);
-      match = fullColorRegex.exec(searchText);
+      let newValue = value;
+      let foundSpan = false;
+      colorRegex.lastIndex = 0;
+      match = colorRegex.exec(value);
       while (match !== null) {
-        const matchStart = searchOffset + match.index;
-        const matchEnd = searchOffset + match.index + match[0].length;
+        const fullMatchStart = match.index;
+        const fullMatchEnd = match.index + match[0].length;
         const spanOpenTag = `<span style="color: ${match[1]}">`;
-        const contentStart = searchOffset + match.index + spanOpenTag.length;
-        const contentEnd = matchEnd - 7;
-        if (contentStart <= s && e <= contentEnd) {
-          const beforeContent = value.slice(contentStart, s);
-          const afterContent = value.slice(e, contentEnd);
-          const newContent = beforeContent + selected + afterContent;
-          this.value = value.slice(0, matchStart) + newContent + value.slice(matchEnd);
-          textarea.value = value.slice(0, matchStart) + newContent + value.slice(matchEnd);
-          const selStart = matchStart + beforeContent.length;
-          const selEnd = selStart + selected.length;
+        const contentStart = fullMatchStart + spanOpenTag.length;
+        const contentEnd = fullMatchEnd - 7;
+        const innerContent = match[2];
+        match = colorRegex.exec(value);
+        const selectionOverlaps = s >= contentStart && s < contentEnd || e > contentStart && e <= contentEnd || s <= contentStart && e >= contentEnd;
+        if (selectionOverlaps) {
+          newValue = value.slice(0, fullMatchStart) + innerContent + value.slice(fullMatchEnd);
+          foundSpan = true;
+          this.value = newValue;
+          textarea.value = newValue;
+          let newStart = s;
+          let newEnd = e;
+          if (s >= fullMatchStart) {
+            const spanOpenTagLength = spanOpenTag.length;
+            if (s >= contentStart) {
+              newStart = s - spanOpenTagLength;
+            } else if (s >= fullMatchStart) {
+              newStart = fullMatchStart;
+            }
+          }
+          if (e >= fullMatchStart) {
+            const spanOpenTagLength = spanOpenTag.length;
+            if (e <= contentEnd) {
+              newEnd = e - spanOpenTagLength;
+            } else {
+              newEnd = e - spanOpenTagLength - 7;
+            }
+          }
           requestAnimationFrame(() => {
-            textarea.setSelectionRange(selStart, selEnd);
+            textarea.setSelectionRange(
+              Math.max(0, newStart),
+              Math.max(0, newEnd)
+            );
             this.updateActiveFormats();
           });
           this.dispatchChange();
-          foundMatch = true;
-          break;
+          return;
         }
-        match = fullColorRegex.exec(searchText);
       }
-      if (!foundMatch) {
-        this.value = before + selected + after;
-        textarea.value = before + selected + after;
-        const selStart = before.length;
-        const selEnd = selStart + selected.length;
+      if (!foundSpan) {
         requestAnimationFrame(() => {
-          textarea.setSelectionRange(selStart, selEnd);
           this.updateActiveFormats();
         });
-        this.dispatchChange();
       }
     });
   }
@@ -1022,6 +1209,7 @@ let LuksoMarkdownEditor = class extends TailwindStyledElement(style) {
     if (this.activeFormats.h1) return 1;
     if (this.activeFormats.h2) return 2;
     if (this.activeFormats.h3) return 3;
+    if (this.activeFormats.h4) return 4;
     return 0;
   }
   /**
@@ -1089,10 +1277,14 @@ let LuksoMarkdownEditor = class extends TailwindStyledElement(style) {
     const textarea = this.textareaEl?.shadowRoot?.querySelector(
       "textarea"
     );
-    if (!textarea) return false;
+    if (!textarea) {
+      return false;
+    }
     const start = textarea.selectionStart ?? 0;
     const end = textarea.selectionEnd ?? 0;
-    if (start !== end) return false;
+    if (start !== end) {
+      return false;
+    }
     const value = this.value;
     const lineStart = value.lastIndexOf("\n", start - 1) + 1;
     let lineEnd = value.indexOf("\n", start);
@@ -1130,10 +1322,8 @@ ${indent}${marker} `;
       this.value = newValue;
       textarea.value = newValue;
       const newCursor = start + prefix.length;
-      requestAnimationFrame(() => {
-        textarea.setSelectionRange(newCursor, newCursor);
-        this.updateActiveFormats();
-      });
+      textarea.setSelectionRange(newCursor, newCursor);
+      this.updateActiveFormats();
       this.dispatchChange();
       return true;
     }
@@ -1155,24 +1345,35 @@ ${indent}${marker} `;
         this.dispatchChange();
         return true;
       }
-      const nextNumber = parseInt(numberStr, 10) + 1;
+      const currentNumber = parseInt(numberStr, 10);
+      const nextNumber = currentNumber + 1;
       const before = value.slice(0, start);
       const after = value.slice(start);
       const prefix = `
 ${indent}${nextNumber}. `;
-      const newValue = before + prefix + after;
-      const renumberedValue = this.renumberOrderedListItems(
-        newValue,
-        start + prefix.length,
-        indent
-      );
-      this.value = renumberedValue;
-      textarea.value = renumberedValue;
+      let newValue = before + prefix + after;
+      const lines = newValue.split("\n");
+      const insertLineIndex = before.split("\n").length;
+      const renumberStartIndex = insertLineIndex + 1;
+      let currentNum = nextNumber + 1;
+      const orderedRegex = /^(\s*)(\d+)\.\s+(.*)$/;
+      for (let i = renumberStartIndex; i < lines.length; i++) {
+        const line = lines[i];
+        const match = line.match(orderedRegex);
+        if (match && match[1] === indent) {
+          const content2 = match[3];
+          lines[i] = `${indent}${currentNum}. ${content2}`;
+          currentNum++;
+        } else if (match && match[1].length < indent.length) {
+          break;
+        }
+      }
+      newValue = lines.join("\n");
+      this.value = newValue;
+      textarea.value = newValue;
       const newCursor = start + prefix.length;
-      requestAnimationFrame(() => {
-        textarea.setSelectionRange(newCursor, newCursor);
-        this.updateActiveFormats();
-      });
+      textarea.setSelectionRange(newCursor, newCursor);
+      this.updateActiveFormats();
       this.dispatchChange();
       return true;
     }
@@ -1186,10 +1387,14 @@ ${indent}${nextNumber}. `;
     const textarea = this.textareaEl?.shadowRoot?.querySelector(
       "textarea"
     );
-    if (!textarea) return false;
+    if (!textarea) {
+      return false;
+    }
     const start = textarea.selectionStart ?? 0;
     const end = textarea.selectionEnd ?? 0;
-    if (start !== end) return false;
+    if (start !== end) {
+      return false;
+    }
     const value = this.value;
     const lineStart = value.lastIndexOf("\n", start - 1) + 1;
     let lineEnd = value.indexOf("\n", start);
@@ -1215,20 +1420,86 @@ ${indent}${nextNumber}. `;
     } else if (orderedMatch) {
       const currentIndent = orderedMatch[1] ?? "";
       const content = orderedMatch[3] ?? "";
-      newLine = `${currentIndent}${indent}1. ${content}`;
-      newCursorOffset = indent.length;
+      if (content.trim() === "") {
+        newLine = currentLine;
+        const nestedLine = `${currentIndent}${indent}1. `;
+        let newValue2 = before + newLine + "\n" + nestedLine + after;
+        const parentIndent = currentIndent;
+        const lines = newValue2.split("\n");
+        const currentLineIndex = Math.floor(lineStart / (newValue2.indexOf("\n") + 1)) || newValue2.slice(0, lineStart).split("\n").length - 1;
+        const currentLineMatch = lines[currentLineIndex]?.match(
+          /^(\s*)(\d+)\.\s*(.*)$/
+        );
+        const nextExpectedNumber = currentLineMatch ? parseInt(currentLineMatch[2], 10) : 1;
+        const orderedRegex = /^(\s*)(\d+)\.\s*(.*)$/;
+        let currentNumber = nextExpectedNumber;
+        for (let i = currentLineIndex + 2; i < lines.length; i++) {
+          const line = lines[i];
+          const orderedMatch2 = line.match(orderedRegex);
+          if (orderedMatch2 && orderedMatch2[1] === parentIndent) {
+            const content2 = orderedMatch2[3];
+            lines[i] = `${parentIndent}${currentNumber}. ${content2}`;
+            currentNumber++;
+          } else if (orderedMatch2 && orderedMatch2[1].length < parentIndent.length) {
+            break;
+          }
+        }
+        newValue2 = lines.join("\n");
+        const newCursor2 = lineStart + newLine.length + 1 + nestedLine.length;
+        this.value = newValue2;
+        textarea.value = newValue2;
+        requestAnimationFrame(() => {
+          textarea.setSelectionRange(newCursor2, newCursor2);
+          this.updateActiveFormats();
+        });
+        this.dispatchChange();
+        return true;
+      } else {
+        const newIndent = currentIndent + indent;
+        let newNumber = 1;
+        const beforeText = value.slice(0, lineStart);
+        const lines = beforeText.split("\n");
+        for (let i = lines.length - 1; i >= 0; i--) {
+          const line = lines[i];
+          const match = line.match(/^(\s*)(\d+)\.\s*(.*)$/);
+          if (match && match[1] === newIndent) {
+            newNumber = parseInt(match[2], 10) + 1;
+            break;
+          } else if (match && match[1].length < newIndent.length) {
+            break;
+          }
+        }
+        newLine = `${newIndent}${newNumber}. ${content}`;
+        newCursorOffset = indent.length;
+      }
     } else {
       return false;
     }
-    const newValue = before + newLine + after;
+    let newValue = before + newLine + after;
+    if (orderedMatch) {
+      const newIndent = (orderedMatch[1] ?? "") + indent;
+      newValue = this.renumberOrderedListItems(
+        newValue,
+        lineStart + newLine.length,
+        // Start renumbering after the current line
+        newIndent
+        // Use the new indentation level
+      );
+      const parentIndent = orderedMatch[1] ?? "";
+      newValue = this.renumberOrderedListItems(
+        newValue,
+        lineStart,
+        // Start from this line for parent level
+        parentIndent
+        // Use the parent level indentation
+      );
+    }
     this.value = newValue;
     textarea.value = newValue;
     const cursorInLine = start - lineStart;
     const newCursor = lineStart + cursorInLine + newCursorOffset;
-    requestAnimationFrame(() => {
-      textarea.setSelectionRange(newCursor, newCursor);
-      this.updateActiveFormats();
-    });
+    textarea.setSelectionRange(newCursor, newCursor);
+    this.updateActiveFormats();
     this.dispatchChange();
     return true;
   }
@@ -1437,25 +1708,46 @@ ${indent}${nextNumber}. `;
       markerEndPosition = indent.length + numberStr.length + 2;
       hasContent = content.trim().length > 0;
     }
-    if (cursorPositionInLine === markerEndPosition && !hasContent) {
+    const isAtOrAfterMarker = cursorPositionInLine >= markerEndPosition;
+    if (isAtOrAfterMarker && !hasContent) {
       this.saveUndoStateBeforeChange();
       const before = value.slice(0, lineStart);
-      const after = value.slice(
-        lineEnd === value.length ? lineEnd : lineEnd + 1
-      );
-      let newValue = before + after;
+      const after = value.slice(lineEnd);
+      let newValue;
+      if (lineEnd === value.length) {
+        newValue = before.endsWith("\n") ? before.slice(0, -1) : before;
+      } else {
+        newValue = before + after.slice(1);
+      }
       if (orderedMatch) {
         const indent = orderedMatch[1] ?? "";
-        newValue = this.renumberOrderedListItems(
-          newValue,
-          before.length,
-          indent
-        );
+        const lines = newValue.split("\n");
+        const startLineIndex = Math.max(0, before.split("\n").length - 1);
+        let nextNumber = 1;
+        for (let i = startLineIndex - 1; i >= 0; i--) {
+          const line = lines[i];
+          const match = line.match(/^(\s*)(\d+)\.\s*(.*)$/);
+          if (match && match[1] === indent) {
+            nextNumber = parseInt(match[2], 10) + 1;
+            break;
+          }
+        }
+        for (let i = startLineIndex; i < lines.length; i++) {
+          const line = lines[i];
+          const match = line.match(/^(\s*)(\d+)\.\s*(.*)$/);
+          if (match && match[1] === indent) {
+            lines[i] = `${indent}${nextNumber}. ${match[3]}`;
+            nextNumber++;
+          } else if (match && match[1].length < indent.length) {
+            break;
+          }
+        }
+        newValue = lines.join("\n");
       }
       this.value = newValue;
       textarea.value = newValue;
       let newCursor = before.length;
-      if (before.endsWith("\n") && before.length > 1) {
+      if (newCursor > 0 && before.endsWith("\n")) {
         newCursor = before.length - 1;
       }
       requestAnimationFrame(() => {
@@ -1615,6 +1907,7 @@ ${indent}${nextNumber}. `;
       e.stopPropagation();
       this.isColorDropdownOpen = false;
       this.isListDropdownOpen = false;
+      this.isAlignmentDropdownOpen = false;
       this.isHeadingDropdownOpen = !this.isHeadingDropdownOpen;
     }}
               aria-expanded=${this.isHeadingDropdownOpen ? "true" : "false"}
@@ -1688,6 +1981,18 @@ ${indent}${nextNumber}. `;
             >
               Heading 3
             </lukso-dropdown-option>
+            <lukso-dropdown-option
+              ?is-selected=${this.getActiveHeadingLevel() === 4}
+              @click=${(e) => {
+      e.stopPropagation();
+      this.restoreFocusAndSelection();
+      this.applyHeading(4);
+      this.isHeadingDropdownOpen = false;
+    }}
+              size="medium"
+            >
+              Heading 4
+            </lukso-dropdown-option>
           </lukso-dropdown>
         </div>
 
@@ -1717,6 +2022,7 @@ ${indent}${nextNumber}. `;
       this.restoreFocusAndSelection();
       this.isHeadingDropdownOpen = false;
       this.isColorDropdownOpen = false;
+      this.isAlignmentDropdownOpen = false;
       this.isListDropdownOpen = !this.isListDropdownOpen;
     }}
               aria-expanded=${this.isListDropdownOpen ? "true" : "false"}
@@ -1789,6 +2095,108 @@ ${indent}${nextNumber}. `;
       this.activeFormats.link
     )}
 
+        <!-- Text Alignment -->
+        <div class=${this.styles().alignmentMenu()}>
+          <lukso-tooltip text="Text alignment" placement="top">
+            <lukso-button
+              id=${this.alignmentTriggerId}
+              @click=${(e) => {
+      e.stopPropagation();
+      this.restoreFocusAndSelection();
+      this.isHeadingDropdownOpen = false;
+      this.isColorDropdownOpen = false;
+      this.isListDropdownOpen = false;
+      this.isAlignmentDropdownOpen = !this.isAlignmentDropdownOpen;
+    }}
+              aria-expanded=${this.isAlignmentDropdownOpen ? "true" : "false"}
+              aria-label="Text alignment"
+              variant="secondary"
+              size="small"
+              custom-class=${this.toolbarButton({
+      active: this.activeFormats.alignment !== "left"
+    })}
+              is-icon
+            >
+              <lukso-icon
+                name=${this.getAlignmentIcon()}
+                size="small"
+                pack="vuesax"
+                variant="linear"
+              ></lukso-icon>
+            </lukso-button>
+          </lukso-tooltip>
+          <lukso-dropdown
+            id="alignmentDropdown"
+            trigger-id=""
+            size="medium"
+            ?is-open=${this.isAlignmentDropdownOpen}
+          >
+            <lukso-dropdown-option
+              ?is-selected=${this.activeFormats.alignment === "left"}
+              @click=${(e) => {
+      e.stopPropagation();
+      this.restoreFocusAndSelection();
+      this.applyAlignment("left");
+      this.isAlignmentDropdownOpen = false;
+    }}
+              size="medium"
+              aria-label="Align left"
+            >
+              <div style="display: flex; align-items: center; gap: 8px;">
+                <lukso-icon
+                  name="textalign-left"
+                  size="small"
+                  pack="vuesax"
+                  variant="linear"
+                ></lukso-icon>
+                Left
+              </div>
+            </lukso-dropdown-option>
+            <lukso-dropdown-option
+              ?is-selected=${this.activeFormats.alignment === "center"}
+              @click=${(e) => {
+      e.stopPropagation();
+      this.restoreFocusAndSelection();
+      this.applyAlignment("center");
+      this.isAlignmentDropdownOpen = false;
+    }}
+              size="medium"
+              aria-label="Align center"
+            >
+              <div style="display: flex; align-items: center; gap: 8px;">
+                <lukso-icon
+                  name="textalign-center"
+                  size="small"
+                  pack="vuesax"
+                  variant="linear"
+                ></lukso-icon>
+                Center
+              </div>
+            </lukso-dropdown-option>
+            <lukso-dropdown-option
+              ?is-selected=${this.activeFormats.alignment === "right"}
+              @click=${(e) => {
+      e.stopPropagation();
+      this.restoreFocusAndSelection();
+      this.applyAlignment("right");
+      this.isAlignmentDropdownOpen = false;
+    }}
+              size="medium"
+              aria-label="Align right"
+            >
+              <div style="display: flex; align-items: center; gap: 8px;">
+                <lukso-icon
+                  name="textalign-right"
+                  size="small"
+                  pack="vuesax"
+                  variant="linear"
+                ></lukso-icon>
+                Right
+              </div>
+            </lukso-dropdown-option>
+          </lukso-dropdown>
+        </div>
+
         <!-- Color -->
         <div class=${this.styles().colorMenu()}>
           <lukso-tooltip text="Text color" placement="top">
@@ -1799,6 +2207,7 @@ ${indent}${nextNumber}. `;
       this.restoreFocusAndSelection();
       this.isHeadingDropdownOpen = false;
       this.isListDropdownOpen = false;
+      this.isAlignmentDropdownOpen = false;
       if (!this.isColorDropdownOpen) {
         const ta = this.textareaEl?.shadowRoot?.querySelector("textarea");
         if (ta) {
@@ -1844,6 +2253,7 @@ ${indent}${nextNumber}. `;
       this.isColorDropdownOpen = false;
     }}
                       type="button"
+                      aria-label="Clear color"
                     >
                       Clear
                     </button>` : E}
@@ -1855,6 +2265,7 @@ ${indent}${nextNumber}. `;
                     style="background-color: ${color}"
                     title=${color}
                     aria-pressed=${this.activeFormats.activeColor === color ? "true" : "false"}
+                    aria-label="Color ${color}"
                     @click=${(e) => {
         e.stopPropagation();
         this.selectColor(color);
@@ -1921,7 +2332,7 @@ __decorateClass([
   n({ type: String })
 ], LuksoMarkdownEditor.prototype, "value", 2);
 __decorateClass([
-  n({ type: String })
+  n({ type: String, reflect: true })
 ], LuksoMarkdownEditor.prototype, "name", 2);
 __decorateClass([
   n({ type: String })
@@ -1971,6 +2382,9 @@ __decorateClass([
 __decorateClass([
   r()
 ], LuksoMarkdownEditor.prototype, "isListDropdownOpen", 2);
+__decorateClass([
+  r()
+], LuksoMarkdownEditor.prototype, "isAlignmentDropdownOpen", 2);
 __decorateClass([
   r()
 ], LuksoMarkdownEditor.prototype, "currentSelection", 2);