@lukso/web-components 1.156.0 → 1.157.1

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

@@ -1,10 +1,10 @@
-import { T as TailwindStyledElement, E, x } from '../../index-wzuGnJOC.js';
-import { n, t } from '../../property-BohUfInC.js';
-import { r } from '../../state-DJBtqv5G.js';
+import { T as TailwindStyledElement, E, x } from '../../index-YQoO_Soq.js';
+import { n, t } from '../../property-Dsz7qIbu.js';
+import { r } from '../../state-CcocMKSJ.js';
 import { e } from '../../query-CHb9Ft_d.js';
 import { c as ce } from '../../index-B9iart53.js';
 import '../../tailwind-config.js';
-import { c as cn } from '../../cn-Cu9aP49j.js';
+import { a as axe, c as cn } from '../../axe-BK9JSROP.js';
 import '../lukso-textarea/index.js';
 import '../lukso-markdown/index.js';
 import '../lukso-switch/index.js';
@@ -15,6 +15,178 @@ import '../lukso-dropdown/index.js';
 import '../lukso-dropdown-option/index.js';
 import '../lukso-tooltip/index.js';
 
+function mapAxeViolationToAccessibilityViolation(axeViolation) {
+  return {
+    id: axeViolation.id,
+    impact: axeViolation.impact,
+    description: axeViolation.description,
+    help: axeViolation.help,
+    helpUrl: axeViolation.helpUrl,
+    nodes: axeViolation.nodes?.map((node) => ({
+      html: node.html,
+      target: node.target,
+      failureSummary: node.failureSummary
+    })) || []
+  };
+}
+async function checkAccessibility(element) {
+  if (!element) {
+    return {
+      violations: [],
+      hasViolations: false,
+      violationCount: 0
+    };
+  }
+  try {
+    const results = await axe.run(element, {
+      resultTypes: ["violations"],
+      tags: ["wcag2a", "wcag2aa", "wcag21aa", "best-practice"],
+      rules: {
+        "color-contrast": { enabled: true },
+        "color-contrast-enhanced": { enabled: true },
+        "image-alt": { enabled: true },
+        "button-name": { enabled: true },
+        "link-name": { enabled: true },
+        label: { enabled: true },
+        "form-field-multiple-labels": { enabled: true }
+      }
+    });
+    const violations = results.violations.map(
+      mapAxeViolationToAccessibilityViolation
+    );
+    return {
+      violations,
+      hasViolations: violations.length > 0,
+      violationCount: violations.length
+    };
+  } catch (error) {
+    console.warn("Accessibility checking failed:", error);
+    return {
+      violations: [],
+      hasViolations: false,
+      violationCount: 0
+    };
+  }
+}
+const getViolationSummary = (violations) => {
+  const summary = {
+    critical: 0,
+    serious: 0,
+    moderate: 0,
+    minor: 0,
+    total: violations.length
+  };
+  violations.forEach((violation) => {
+    if (violation.impact) {
+      summary[violation.impact]++;
+    }
+  });
+  return summary;
+};
+function getImpactStyling(impact) {
+  switch (impact) {
+    case "critical":
+      return {
+        colorClass: "text-red-600",
+        borderClass: "border-red-600",
+        label: "Critical"
+      };
+    case "serious":
+      return {
+        colorClass: "text-orange-600",
+        borderClass: "border-orange-600",
+        label: "Serious"
+      };
+    case "moderate":
+      return {
+        colorClass: "text-yellow-600",
+        borderClass: "border-yellow-600",
+        label: "Moderate"
+      };
+    case "minor":
+      return {
+        colorClass: "text-green-600",
+        borderClass: "border-green-600",
+        label: "Minor"
+      };
+    default:
+      return {
+        colorClass: "text-gray-500",
+        borderClass: "border-gray-500",
+        label: "Info"
+      };
+  }
+}
+const formatViolationsForTooltip = (violations) => {
+  if (violations.length === 0) {
+    return `
+      <div class="text-center text-green-600 font-semibold">
+        No accessibility violations found!
+      </div>
+    `;
+  }
+  const summary = getViolationSummary(violations);
+  let tooltip = `
+    <div class="max-w-sm leading-relaxed p-1">
+      <div class="font-bold text-sm mb-1">
+        Accessibility Issues Found
+      </div>
+  `;
+  tooltip += `
+      <div class="mb-2">
+        <div class="flex gap-3 flex-wrap">
+    `;
+  if (summary.critical > 0) {
+    tooltip += `<span class="text-red-600">🚨 ${summary.critical} Critical</span>`;
+  }
+  if (summary.serious > 0) {
+    tooltip += `<span class="text-orange-600">⚠️ ${summary.serious} Serious</span>`;
+  }
+  if (summary.moderate > 0) {
+    tooltip += `<span class="text-yellow-600">⚡ ${summary.moderate} Moderate</span>`;
+  }
+  if (summary.minor > 0) {
+    tooltip += `<span class="text-green-600">💡 ${summary.minor} Minor</span>`;
+  }
+  tooltip += `
+        </div>
+      </div>
+    `;
+  const sortedViolations = violations.sort((a, b) => {
+    const impactOrder = { critical: 0, serious: 1, moderate: 2, minor: 3 };
+    const aOrder = impactOrder[a.impact] ?? 4;
+    const bOrder = impactOrder[b.impact] ?? 4;
+    return aOrder - bOrder;
+  });
+  tooltip += `<div class="space-y-3">`;
+  sortedViolations.forEach((violation) => {
+    const impactStyling = getImpactStyling(violation.impact);
+    tooltip += `
+      <div class="p-2 bg-white border-l-4 ${impactStyling.borderClass} rounded">
+        <div class="flex items-center gap-1.5 mb-1.5">
+          <strong class="text-gray-800 text-xs leading-tight">${violation.help}</strong>
+        </div>
+
+        <div class="flex items-center gap-1.5 mb-1">
+          <span class="text-xs ${impactStyling.colorClass} font-semibold">
+            ${impactStyling.label}
+          </span>
+          <span class="text-xs text-gray-400">•</span>
+          <span class="text-xs text-gray-500">
+            ${violation.nodes?.length || 0} element${(violation.nodes?.length || 0) !== 1 ? "s" : ""} affected
+          </span>
+        </div>
+      </div>
+    `;
+  });
+  tooltip += `
+    </div>
+    <div class="text-10 text-gray-500 mt-2">Check out the <a target="_blank" class="underline" href="https://www.w3.org/TR/WCAG21/">WCAG</a> guidelines why this is important.</div>
+    </div>
+  `;
+  return tooltip.trim();
+};
+
 const style = ":host {\n    display: flex\n}";
 
 var __defProp = Object.defineProperty;
@@ -27,6 +199,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
+const DEFAULT_PREVIEW_BACKGROUND_COLOR = "#f9f9f9";
 let LuksoMarkdownEditor = class extends TailwindStyledElement(style) {
   constructor() {
     super(...arguments);
@@ -44,13 +217,16 @@ let LuksoMarkdownEditor = class extends TailwindStyledElement(style) {
     this.isPreview = false;
     this.rows = 6;
     this.placeholder = "";
+    this.previewBackgroundColor = DEFAULT_PREVIEW_BACKGROUND_COLOR;
     this.savedSelectionForPreview = null;
     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 +237,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 = [];
@@ -74,6 +252,10 @@ let LuksoMarkdownEditor = class extends TailwindStyledElement(style) {
     this.undoTimeout = null;
     this.MAX_UNDO_STACK_SIZE = 100;
     this.UNDO_SAVE_DELAY = 500;
+    this.accessibilityViolations = [];
+    this.hasAccessibilityViolations = false;
+    this.accessibilityCheckTimeout = null;
+    this.ACCESSIBILITY_CHECK_DELAY = 1e3;
     this.handleOutsideClick = (event) => {
       const target = event.target;
       const isInsideThisComponent = this.contains(target) || this.shadowRoot?.contains(target);
@@ -87,14 +269,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,18 +291,22 @@ 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: {
         wrapper: "w-[inherit] grid gap-3",
         header: "flex items-center justify-between gap-2 border border-neutral-90 rounded-12 px-3 py-2 bg-neutral-100",
         toolbar: "flex flex-wrap items-center gap-1",
-        area: "",
+        area: "relative",
         editor: "",
-        preview: "p-3",
+        preview: "p-3 border border-neutral-90 rounded-12 min-h-[158px]",
         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"
@@ -229,7 +420,7 @@ let LuksoMarkdownEditor = class extends TailwindStyledElement(style) {
         this.scheduleUndoStateSave();
       }
       this.value = newValue;
-      this.updateActiveFormats();
+      this.emitChangeAndRefresh(event);
     };
     /**
      * Textarea keyup handler.
@@ -280,7 +471,7 @@ let LuksoMarkdownEditor = class extends TailwindStyledElement(style) {
   }
   dispatchChange(event) {
     this.updateComplete.then(() => {
-      const changeEvent = new CustomEvent("on-change", {
+      const changeEvent = new CustomEvent("on-markdown-change", {
         detail: { value: this.value, event },
         bubbles: false,
         composed: true
@@ -288,6 +479,68 @@ let LuksoMarkdownEditor = class extends TailwindStyledElement(style) {
       this.dispatchEvent(changeEvent);
     });
   }
+  /**
+   * Check accessibility violations on the live preview content
+   */
+  async performAccessibilityCheck() {
+    if (!this.value.trim()) {
+      this.accessibilityViolations = [];
+      this.hasAccessibilityViolations = false;
+      return;
+    }
+    try {
+      if (this.isPreview) {
+        const markdownEl = this.shadowRoot?.querySelector("lukso-markdown");
+        if (markdownEl) {
+          await new Promise((resolve) => setTimeout(resolve, 200));
+          const sanitizeEl = markdownEl.shadowRoot?.querySelector("lukso-sanitize");
+          const proseDiv = sanitizeEl?.shadowRoot?.querySelector(
+            "div.prose"
+          );
+          if (proseDiv) {
+            const result = await checkAccessibility(proseDiv);
+            this.accessibilityViolations = result.violations;
+            this.hasAccessibilityViolations = result.hasViolations;
+          } else {
+            this.accessibilityViolations = [];
+            this.hasAccessibilityViolations = false;
+          }
+        }
+      } else {
+        this.accessibilityViolations = [];
+        this.hasAccessibilityViolations = false;
+      }
+    } catch (error) {
+      console.warn("Accessibility checking failed:", error);
+      this.accessibilityViolations = [];
+      this.hasAccessibilityViolations = false;
+    }
+    this.requestUpdate();
+  }
+  /**
+   * Schedule accessibility check with debouncing
+   */
+  scheduleAccessibilityCheck() {
+    if (this.accessibilityCheckTimeout) {
+      clearTimeout(this.accessibilityCheckTimeout);
+    }
+    this.accessibilityCheckTimeout = window.setTimeout(() => {
+      this.performAccessibilityCheck();
+      this.accessibilityCheckTimeout = null;
+    }, this.ACCESSIBILITY_CHECK_DELAY);
+  }
+  /**
+   * Unified helper that ensures both active format state and change events are properly
+   * emitted after any value mutation. This replaces the scattered updateActiveFormats()
+   * and dispatchChange() calls throughout the codebase.
+   *
+   * @param event - Optional event that triggered the change
+   */
+  emitChangeAndRefresh(event) {
+    this.updateActiveFormats();
+    this.dispatchChange(event);
+    this.scheduleAccessibilityCheck();
+  }
   /**
    * Utility to perform an operation with the current textarea selection.
    *
@@ -328,7 +581,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;
@@ -374,9 +627,8 @@ let LuksoMarkdownEditor = class extends TailwindStyledElement(style) {
       }
       requestAnimationFrame(() => {
         textarea.setSelectionRange(cursorPosition, cursorPosition);
-        this.updateActiveFormats();
+        this.emitChangeAndRefresh();
       });
-      this.dispatchChange();
     });
   }
   /**
@@ -506,9 +758,8 @@ let LuksoMarkdownEditor = class extends TailwindStyledElement(style) {
       const cursorPosition = before.length + (firstLineEnd === -1 ? transformed.length : firstLineEnd);
       requestAnimationFrame(() => {
         textarea.setSelectionRange(cursorPosition, cursorPosition);
-        this.updateActiveFormats();
+        this.emitChangeAndRefresh();
       });
-      this.dispatchChange();
     });
   }
   /**
@@ -519,6 +770,155 @@ 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.emitChangeAndRefresh();
+      });
+    });
+  }
+  /**
+   * 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.
    *
@@ -545,9 +945,8 @@ let LuksoMarkdownEditor = class extends TailwindStyledElement(style) {
         const selEnd2 = selStart2 + selected.length;
         requestAnimationFrame(() => {
           textarea.setSelectionRange(selStart2, selEnd2);
-          this.updateActiveFormats();
+          this.emitChangeAndRefresh();
         });
-        this.dispatchChange();
         return;
       }
       const innerWrapped = selected.startsWith(wrapper) && selected.endsWith(wrapper);
@@ -562,9 +961,8 @@ let LuksoMarkdownEditor = class extends TailwindStyledElement(style) {
         const selEnd2 = selStart2 + selected.length;
         requestAnimationFrame(() => {
           textarea.setSelectionRange(selStart2, selEnd2);
-          this.updateActiveFormats();
+          this.emitChangeAndRefresh();
         });
-        this.dispatchChange();
         return;
       }
       const wrapped = `${wrapper}${selected || ""}${wrapper}`;
@@ -574,9 +972,8 @@ let LuksoMarkdownEditor = class extends TailwindStyledElement(style) {
       const selEnd = selStart + (selected ? selected.length : 0);
       requestAnimationFrame(() => {
         textarea.setSelectionRange(selStart, selEnd);
-        this.updateActiveFormats();
+        this.emitChangeAndRefresh();
       });
-      this.dispatchChange();
     });
   }
   /**
@@ -589,6 +986,11 @@ let LuksoMarkdownEditor = class extends TailwindStyledElement(style) {
       this.enterPreview();
     }
     this.isPreview = !this.isPreview;
+    if (this.isPreview) {
+      requestAnimationFrame(() => {
+        this.scheduleAccessibilityCheck();
+      });
+    }
   }
   /**
    * Enter preview mode - save current state and remove keyboard listeners from textarea
@@ -647,9 +1049,8 @@ let LuksoMarkdownEditor = class extends TailwindStyledElement(style) {
             const newCursor = leftBracket2 + textOnly.length;
             requestAnimationFrame(() => {
               textarea.setSelectionRange(newCursor, newCursor);
-              this.updateActiveFormats();
+              this.emitChangeAndRefresh();
             });
-            this.dispatchChange();
             return;
           }
         }
@@ -669,9 +1070,8 @@ let LuksoMarkdownEditor = class extends TailwindStyledElement(style) {
         const newEnd = newStart + textOnly.length;
         requestAnimationFrame(() => {
           textarea.setSelectionRange(newStart, newEnd);
-          this.updateActiveFormats();
+          this.emitChangeAndRefresh();
         });
-        this.dispatchChange();
         return;
       }
       const leftBracket = value.lastIndexOf("[", s);
@@ -688,9 +1088,8 @@ let LuksoMarkdownEditor = class extends TailwindStyledElement(style) {
           const newCursor = leftBracket + textOnly.length;
           requestAnimationFrame(() => {
             textarea.setSelectionRange(newCursor, newCursor);
-            this.updateActiveFormats();
+            this.emitChangeAndRefresh();
           });
-          this.dispatchChange();
           return;
         }
       }
@@ -702,9 +1101,8 @@ let LuksoMarkdownEditor = class extends TailwindStyledElement(style) {
       requestAnimationFrame(() => {
         textarea.focus();
         textarea.setSelectionRange(cursorPosition, cursorPosition);
-        this.updateActiveFormats();
+        this.emitChangeAndRefresh();
       });
-      this.dispatchChange();
     });
   }
   /**
@@ -752,6 +1150,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 +1174,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
     };
   }
   /**
@@ -880,9 +1297,8 @@ let LuksoMarkdownEditor = class extends TailwindStyledElement(style) {
         }
         requestAnimationFrame(() => {
           textarea.setSelectionRange(selStart2, selEnd2);
-          this.updateActiveFormats();
+          this.emitChangeAndRefresh();
         });
-        this.dispatchChange();
         return;
       }
       const colorRegex = /^<span style="color: ([^"]+)">(.*)<\/span>$/s;
@@ -901,9 +1317,8 @@ let LuksoMarkdownEditor = class extends TailwindStyledElement(style) {
         const selEnd2 = selStart2 + (existingColor === color ? innerText.length : innerText.length);
         requestAnimationFrame(() => {
           textarea.setSelectionRange(selStart2, selEnd2);
-          this.updateActiveFormats();
+          this.emitChangeAndRefresh();
         });
-        this.dispatchChange();
         return;
       }
       const newColorTagOpen = `<span style="color: ${color}">`;
@@ -914,9 +1329,8 @@ let LuksoMarkdownEditor = class extends TailwindStyledElement(style) {
       const selEnd = selStart + (selected ? selected.length : 4);
       requestAnimationFrame(() => {
         textarea.setSelectionRange(selStart, selEnd);
-        this.updateActiveFormats();
+        this.emitChangeAndRefresh();
       });
-      this.dispatchChange();
     });
   }
   /**
@@ -964,54 +1378,58 @@ 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);
-            this.updateActiveFormats();
+            textarea.setSelectionRange(
+              Math.max(0, newStart),
+              Math.max(0, newEnd)
+            );
+            this.emitChangeAndRefresh();
           });
-          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 +1440,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 +1508,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);
@@ -1117,9 +1540,8 @@ let LuksoMarkdownEditor = class extends TailwindStyledElement(style) {
         const newCursor2 = before2.length;
         requestAnimationFrame(() => {
           textarea.setSelectionRange(newCursor2, newCursor2);
-          this.updateActiveFormats();
+          this.emitChangeAndRefresh();
         });
-        this.dispatchChange();
         return true;
       }
       const before = value.slice(0, start);
@@ -1130,11 +1552,8 @@ ${indent}${marker} `;
       this.value = newValue;
       textarea.value = newValue;
       const newCursor = start + prefix.length;
-      requestAnimationFrame(() => {
-        textarea.setSelectionRange(newCursor, newCursor);
-        this.updateActiveFormats();
-      });
-      this.dispatchChange();
+      textarea.setSelectionRange(newCursor, newCursor);
+      this.emitChangeAndRefresh();
       return true;
     }
     if (orderedMatch) {
@@ -1150,30 +1569,39 @@ ${indent}${marker} `;
         const newCursor2 = before2.length;
         requestAnimationFrame(() => {
           textarea.setSelectionRange(newCursor2, newCursor2);
-          this.updateActiveFormats();
+          this.emitChangeAndRefresh();
         });
-        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();
-      });
-      this.dispatchChange();
+      textarea.setSelectionRange(newCursor, newCursor);
+      this.emitChangeAndRefresh();
       return true;
     }
     return false;
@@ -1186,10 +1614,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,21 +1647,85 @@ ${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.emitChangeAndRefresh();
+        });
+        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();
-    });
-    this.dispatchChange();
+    textarea.setSelectionRange(newCursor, newCursor);
+    this.emitChangeAndRefresh();
     return true;
   }
   /**
@@ -1308,9 +1804,8 @@ ${indent}${nextNumber}. `;
     );
     requestAnimationFrame(() => {
       textarea.setSelectionRange(newCursor, newCursor);
-      this.updateActiveFormats();
+      this.emitChangeAndRefresh();
     });
-    this.dispatchChange();
     return true;
   }
   /**
@@ -1437,32 +1932,52 @@ ${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(() => {
         textarea.setSelectionRange(newCursor, newCursor);
-        this.updateActiveFormats();
+        this.emitChangeAndRefresh();
       });
-      this.dispatchChange();
       return true;
     }
     return false;
@@ -1495,10 +2010,9 @@ ${indent}${nextNumber}. `;
           previousState.selection.end
         );
       }
-      this.updateActiveFormats();
+      this.emitChangeAndRefresh();
       this.isUndoRedoAction = false;
     });
-    this.dispatchChange();
   }
   /**
    * Perform a redo operation, reapplying a previously undone state.
@@ -1527,10 +2041,9 @@ ${indent}${nextNumber}. `;
           nextState.selection.end
         );
       }
-      this.updateActiveFormats();
+      this.emitChangeAndRefresh();
       this.isUndoRedoAction = false;
     });
-    this.dispatchChange();
   }
   connectedCallback() {
     super.connectedCallback();
@@ -1542,14 +2055,26 @@ ${indent}${nextNumber}. `;
       this.saveInitialUndoState();
       this.updateActiveFormats();
       this.addKeyboardListeners();
+      if (this.isPreview && this.value.trim()) {
+        this.scheduleAccessibilityCheck();
+      }
     });
   }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("previewBackgroundColor") && this.isPreview && this.value.trim()) {
+      this.scheduleAccessibilityCheck();
+    }
+  }
   disconnectedCallback() {
     super.disconnectedCallback();
     document.removeEventListener("click", this.handleOutsideClick);
     if (this.undoTimeout) {
       clearTimeout(this.undoTimeout);
     }
+    if (this.accessibilityCheckTimeout) {
+      clearTimeout(this.accessibilityCheckTimeout);
+    }
     this.removeKeyboardListeners();
     this.savedSelectionForPreview = null;
   }
@@ -1605,7 +2130,7 @@ ${indent}${nextNumber}. `;
   }
   toolbarTemplate() {
     return x`
-      <div class="flex items-center gap-2">
+      <div class="flex items-center gap-1">
         <div class=${cn(this.styles().headingMenu())}>
           <!-- Heading -->
           <lukso-tooltip text="Heading options" placement="top">
@@ -1615,6 +2140,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 +2214,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 +2255,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 +2328,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 +2440,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 +2486,7 @@ ${indent}${nextNumber}. `;
       this.isColorDropdownOpen = false;
     }}
                       type="button"
+                      aria-label="Clear color"
                     >
                       Clear
                     </button>` : E}
@@ -1855,6 +2498,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);
@@ -1871,47 +2515,88 @@ ${indent}${nextNumber}. `;
       </div>
     `;
   }
+  accessibilityIndicatorTemplate() {
+    if (!this.hasAccessibilityViolations || this.accessibilityViolations.length === 0 || !this.isPreview) {
+      return E;
+    }
+    const tooltipText = formatViolationsForTooltip(this.accessibilityViolations);
+    return x`
+      <div
+        class="accessibility-indicator has-violations absolute top-2 right-2 z-10"
+        style="pointer-events: auto;"
+      >
+        <lukso-tooltip placement="left">
+          <div slot="text">
+            <div .innerHTML=${tooltipText}></div>
+          </div>
+          <div
+            class="flex cursor-help"
+            role="alert"
+            aria-label="Accessibility violations found"
+          >
+            <lukso-icon
+              name="warning-2"
+              size="small"
+              color="red-65"
+              pack="vuesax"
+              variant="linear"
+            ></lukso-icon>
+          </div>
+        </lukso-tooltip>
+      </div>
+    `;
+  }
   render() {
     const { wrapper, header, toolbar, area, editor, preview } = this.styles({
       isFullWidth: this.isFullWidth
     });
+    if (!this.previewBackgroundColor) {
+      this.previewBackgroundColor = DEFAULT_PREVIEW_BACKGROUND_COLOR;
+    }
     return x`
       <div class=${wrapper()}>
         ${this.labelTemplate()} ${this.descriptionTemplate()}
 
-        <div class=${header()}>
-          <div class=${toolbar()}>${this.toolbarTemplate()}</div>
-          ${this.buttonTemplate(
+        <div class="flex flex-col gap-2">
+          <div class=${header()}>
+            <div class=${toolbar()}>${this.toolbarTemplate()}</div>
+            ${this.buttonTemplate(
       "eye",
       () => this.togglePreview(),
       "Toggle preview",
       this.isPreview
     )}
-        </div>
+          </div>
 
-        <div class=${area()}>
-          ${!this.isPreview ? x`<div class=${editor()}>
-                <lukso-textarea
-                  .value=${this.value}
-                  name=${this.name ? this.name : E}
-                  size=${this.size ? this.size : E}
-                  rows=${this.rows ? this.rows : E}
-                  placeholder=${this.placeholder ? this.placeholder : E}
-                  error=${this.error ? this.error : E}
-                  ?is-full-width=${true}
-                  ?is-disabled=${this.isDisabled}
-                  ?is-readonly=${this.isReadonly}
-                  ?is-non-resizable=${this.isNonResizable}
-                  @on-input=${this.handleTextareaInput}
-                  @on-key-up=${this.handleTextareaKeyUp}
-                  @on-input-click=${this.handleTextareaClick}
-                ></lukso-textarea>
-              </div>` : x`<div class=${preview()}>
-                <lukso-markdown
-                  value=${this.value}
-                  prose-classes="prose prose-base prose-gray"
-                ></lukso-markdown>
-              </div>`}
+          <div class=${area()}>
+            ${!this.isPreview ? x`<div class=${editor()}>
+                  <lukso-textarea
+                    .value=${this.value}
+                    name=${this.name ? this.name : E}
+                    size=${this.size ? this.size : E}
+                    rows=${this.rows ? this.rows : E}
+                    placeholder=${this.placeholder ? this.placeholder : E}
+                    error=${this.error ? this.error : E}
+                    ?is-full-width=${true}
+                    ?is-disabled=${this.isDisabled}
+                    ?is-readonly=${this.isReadonly}
+                    ?is-non-resizable=${this.isNonResizable}
+                    @on-input=${this.handleTextareaInput}
+                    @on-key-up=${this.handleTextareaKeyUp}
+                    @on-input-click=${this.handleTextareaClick}
+                  ></lukso-textarea>
+                  ${this.accessibilityIndicatorTemplate()}
+                </div>` : x`<div
+                  class=${preview()}
+                  style="background-color: ${this.previewBackgroundColor};"
+                >
+                  <lukso-markdown
+                    value=${this.value}
+                    prose-classes="prose prose-base prose-gray"
+                  ></lukso-markdown>
+                  ${this.accessibilityIndicatorTemplate()}
+                </div>`}
+          </div>
         </div>
       </div>
     `;
@@ -1921,7 +2606,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 })
@@ -1959,6 +2644,13 @@ __decorateClass([
 __decorateClass([
   n({ type: String })
 ], LuksoMarkdownEditor.prototype, "placeholder", 2);
+__decorateClass([
+  n({
+    type: String,
+    attribute: "preview-background-color",
+    reflect: true
+  })
+], LuksoMarkdownEditor.prototype, "previewBackgroundColor", 2);
 __decorateClass([
   r()
 ], LuksoMarkdownEditor.prototype, "savedSelectionForPreview", 2);
@@ -1971,6 +2663,9 @@ __decorateClass([
 __decorateClass([
   r()
 ], LuksoMarkdownEditor.prototype, "isListDropdownOpen", 2);
+__decorateClass([
+  r()
+], LuksoMarkdownEditor.prototype, "isAlignmentDropdownOpen", 2);
 __decorateClass([
   r()
 ], LuksoMarkdownEditor.prototype, "currentSelection", 2);
@@ -1980,6 +2675,12 @@ __decorateClass([
 __decorateClass([
   r()
 ], LuksoMarkdownEditor.prototype, "activeFormats", 2);
+__decorateClass([
+  r()
+], LuksoMarkdownEditor.prototype, "accessibilityViolations", 2);
+__decorateClass([
+  r()
+], LuksoMarkdownEditor.prototype, "hasAccessibilityViolations", 2);
 __decorateClass([
   e("lukso-textarea")
 ], LuksoMarkdownEditor.prototype, "textareaEl", 2);