@lukso/web-components 1.154.0 → 1.155.0

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

@@ -0,0 +1,1994 @@
+import { T as TailwindStyledElement, E, x } from '../../index-BWp0TAbf.js';
+import { n, t } from '../../property-DkFGx5Fg.js';
+import { r } from '../../state-DPXXwNMf.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 '../lukso-textarea/index.js';
+import '../lukso-markdown/index.js';
+import '../lukso-switch/index.js';
+import '../lukso-button/index.js';
+import '../lukso-icon/index.js';
+import '../lukso-sanitize/index.js';
+import '../lukso-dropdown/index.js';
+import '../lukso-dropdown-option/index.js';
+import '../lukso-tooltip/index.js';
+
+const style = ":host {\n    display: flex\n}";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let LuksoMarkdownEditor = class extends TailwindStyledElement(style) {
+  constructor() {
+    super(...arguments);
+    this.value = "";
+    this.name = "";
+    this.label = "";
+    this.description = "";
+    this.error = "";
+    this.isFullWidth = false;
+    this.isReadonly = false;
+    this.isDisabled = false;
+    this.isNonResizable = false;
+    this.autofocus = false;
+    this.size = "large";
+    this.isPreview = false;
+    this.rows = 6;
+    this.placeholder = "";
+    this.savedSelectionForPreview = null;
+    this.isHeadingDropdownOpen = false;
+    this.isColorDropdownOpen = false;
+    this.isListDropdownOpen = false;
+    this.headingTriggerId = "heading-dropdown-trigger";
+    this.colorTriggerId = "color-dropdown-trigger";
+    this.listTriggerId = "list-dropdown-trigger";
+    this.currentSelection = { start: 0, end: 0 };
+    this.savedSelection = null;
+    this.activeFormats = {
+      bold: false,
+      italic: false,
+      link: false,
+      h1: false,
+      h2: false,
+      h3: false,
+      color: false,
+      activeColor: "",
+      unorderedList: false,
+      orderedList: false
+    };
+    // Undo/Redo state
+    this.undoStack = [];
+    this.redoStack = [];
+    this.isUndoRedoAction = false;
+    this.lastSavedValue = "";
+    this.undoTimeout = null;
+    this.MAX_UNDO_STACK_SIZE = 100;
+    this.UNDO_SAVE_DELAY = 500;
+    this.handleOutsideClick = (event) => {
+      const target = event.target;
+      const isInsideThisComponent = this.contains(target) || this.shadowRoot?.contains(target);
+      if (!isInsideThisComponent) {
+        if (this.isHeadingDropdownOpen) {
+          this.isHeadingDropdownOpen = false;
+        }
+        if (this.isColorDropdownOpen) {
+          this.isColorDropdownOpen = false;
+        }
+        if (this.isListDropdownOpen) {
+          this.isListDropdownOpen = 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 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);
+      if (!isInsideHeadingDropdown && !isHeadingTrigger && this.isHeadingDropdownOpen) {
+        this.isHeadingDropdownOpen = false;
+      }
+      if (!isInsideColorDropdown && !isColorTrigger && this.isColorDropdownOpen) {
+        this.isColorDropdownOpen = false;
+      }
+      if (!isInsideListDropdown && !isListTrigger && this.isListDropdownOpen) {
+        this.isListDropdownOpen = 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",
+        toolbar: "flex flex-wrap items-center gap-1",
+        area: "",
+        editor: "",
+        preview: "p-3",
+        colorMenu: "relative",
+        headingMenu: "relative",
+        listMenu: "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"
+      },
+      variants: {
+        isFullWidth: {
+          true: { wrapper: "w-full" },
+          false: { wrapper: "w-[350px]" }
+        }
+      },
+      compoundVariants: [{ isFullWidth: false, class: { wrapper: "w-[500px]" } }]
+    });
+    this.toolbarButton = ce({
+      base: "hover:bg-neutral-95 transition border-0 !shadow-none",
+      variants: {
+        active: { true: "bg-neutral-95" },
+        disabled: { true: "opacity-50 cursor-not-allowed" }
+      }
+    });
+    this.defaultColor = "#374151";
+    // prose gray
+    /**
+     * Hex color palette for the color picker.
+     * A curated collection of colors organized by hue families,
+     * ranging from light pastels to bold colors.
+     */
+    this.colorSamples = [
+      "#FFE5E5",
+      // very light red
+      "#FFB3B3",
+      "#FF8080",
+      "#FF6666",
+      "#FF4D4D",
+      "#E63946",
+      // strong pastel red
+      "#FFEBD5",
+      // very light orange
+      "#FFD1A3",
+      "#FFB870",
+      "#FFA54D",
+      "#FF944D",
+      "#FF7F11",
+      // bold pastel orange
+      "#FFFBD5",
+      // very light yellow
+      "#FFF3A3",
+      "#FFE870",
+      "#FFDD4D",
+      "#FFD633",
+      "#F4C430",
+      // deep pastel yellow
+      "#E6F9EC",
+      // very light green
+      "#B3E6C1",
+      "#80D499",
+      "#66CC80",
+      "#4DB870",
+      "#2D9C5B",
+      // bold pastel green
+      "#E6F3FF",
+      // very light blue
+      "#B3DAFF",
+      "#80C2FF",
+      "#66B2FF",
+      "#4DA6FF",
+      "#3A86FF",
+      // bold pastel blue
+      "#F3E6FF",
+      // very light purple
+      "#D9B3FF",
+      "#BF80FF",
+      "#A64DFF",
+      "#9333FF",
+      "#7B2CBF",
+      // bold pastel purple
+      "#FFE6F3",
+      // very light pink
+      "#FFB3D9",
+      "#FF80BF",
+      "#FF66B2",
+      "#FF4DA6",
+      "#E75480",
+      // bold pastel pink
+      "#F5E6DA",
+      // very light brown
+      "#E6CBB3",
+      "#D9B38C",
+      "#CC9966",
+      "#B3773A",
+      "#8B5E3C",
+      // bold pastel brown
+      "#FFFFFF",
+      // white
+      "#F5F5F5",
+      // very light gray
+      "#E0E0E0",
+      // light gray
+      "#BDBDBD",
+      // medium gray
+      "#757575",
+      // dark gray
+      "#000000",
+      // black
+      this.defaultColor
+    ];
+    /**
+     * Handle input event from the internal textarea component.
+     * @param event
+     */
+    this.handleTextareaInput = (event) => {
+      const newValue = event.detail?.value || "";
+      if (!this.isUndoRedoAction) {
+        this.scheduleUndoStateSave();
+      }
+      this.value = newValue;
+      this.updateActiveFormats();
+    };
+    /**
+     * Textarea keyup handler.
+     * Update active formats when user navigates with keyboard.
+     */
+    this.handleTextareaKeyUp = () => {
+      requestAnimationFrame(() => this.updateActiveFormats());
+    };
+    /**
+     * Textarea click handler.
+     * Update active formats when user clicks to move cursor.
+     */
+    this.handleTextareaClick = () => {
+      requestAnimationFrame(() => this.updateActiveFormats());
+    };
+    /**
+     * Handle keydown events for undo/redo shortcuts and list continuation.
+     */
+    this.handleKeyDown = (event) => {
+      const isUndo = (event.metaKey || event.ctrlKey) && event.key === "z" && !event.shiftKey;
+      const isRedo = (event.metaKey || event.ctrlKey) && (event.key === "y" || event.key === "z" && event.shiftKey);
+      if (isUndo) {
+        event.preventDefault();
+        this.undo();
+      } else if (isRedo) {
+        event.preventDefault();
+        this.redo();
+      } else if (event.key === "Enter" && !event.metaKey && !event.ctrlKey && !event.shiftKey) {
+        if (this.handleListContinuation()) {
+          event.preventDefault();
+        }
+      } else if (event.key === "Backspace" && !event.metaKey && !event.ctrlKey && !event.shiftKey) {
+        if (this.handleListBackspace()) {
+          event.preventDefault();
+        }
+      } else if (event.key === "Tab" && !event.metaKey && !event.ctrlKey) {
+        if (event.shiftKey) {
+          if (this.handleListOutdent()) {
+            event.preventDefault();
+          }
+        } else {
+          if (this.handleListIndent()) {
+            event.preventDefault();
+          }
+        }
+      }
+    };
+  }
+  dispatchChange(event) {
+    this.updateComplete.then(() => {
+      const changeEvent = new CustomEvent("on-change", {
+        detail: { value: this.value, event },
+        bubbles: false,
+        composed: true
+      });
+      this.dispatchEvent(changeEvent);
+    });
+  }
+  /**
+   * Utility to perform an operation with the current textarea selection.
+   *
+   * @param callback -
+   */
+  withSelection(callback) {
+    const textarea = this.textareaEl?.shadowRoot?.querySelector(
+      "textarea"
+    );
+    if (!textarea) return;
+    const start = textarea.selectionStart ?? 0;
+    const end = textarea.selectionEnd ?? 0;
+    const value = this.value;
+    callback(textarea, start, end, value);
+    textarea.focus();
+  }
+  /**
+   * Expand empty selection to current word boundaries
+   *
+   * @param start - selection start
+   * @param end - selection end
+   * @param value - full textarea value
+   */
+  expandSelectionToWord(start, end, value) {
+    if (start !== end) return { start, end };
+    const charBefore = start > 0 ? value[start - 1] : "";
+    const charAfter = start < value.length ? value[start] : "";
+    if (charBefore === "(" && charAfter === ")" || charBefore === "[" && charAfter === "]") {
+      return { start, end };
+    }
+    let _start = start;
+    let _end = end;
+    const isWord = (ch) => /[\p{L}\p{N}_-]/u.test(ch);
+    while (_start > 0 && isWord(value[_start - 1])) _start--;
+    while (_end < value.length && isWord(value[_end])) _end++;
+    return { start: _start, end: _end };
+  }
+  /**
+   * Apply or toggle heading formatting for the current line(s).
+   *
+   * @param level - 0 to remove heading, 1-3 for heading levels
+   */
+  applyHeading(level) {
+    if (this.isReadonly || this.isDisabled) return;
+    this.saveUndoStateBeforeChange();
+    const desiredPrefix = level > 0 ? `${"#".repeat(level)} ` : "";
+    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);
+      const lines = selected.split("\n");
+      const headingRegex = /^(#{1,6})\s+/;
+      const allAlreadyLevel = lines.every((l) => l.startsWith(desiredPrefix));
+      let transformed;
+      if (level === 0) {
+        transformed = lines.map((l) => l.replace(headingRegex, "")).join("\n");
+      } else {
+        transformed = lines.map((l) => {
+          const withoutAny = l.replace(headingRegex, "");
+          if (allAlreadyLevel) {
+            return withoutAny;
+          }
+          return desiredPrefix + withoutAny;
+        }).join("\n");
+      }
+      this.value = before + transformed + after;
+      textarea.value = before + transformed + after;
+      let cursorPosition = before.length;
+      if (level > 0 && !allAlreadyLevel) {
+        const firstLine = lines[0] || "";
+        const contentAfterHeading = firstLine.replace(headingRegex, "");
+        if (contentAfterHeading.trim()) {
+          const firstLineEnd = transformed.indexOf("\n");
+          cursorPosition = before.length + (firstLineEnd === -1 ? transformed.length : firstLineEnd);
+        } else {
+          cursorPosition = before.length + desiredPrefix.length;
+        }
+      } else if (level === 0 || allAlreadyLevel) {
+        const firstLineEnd = transformed.indexOf("\n");
+        cursorPosition = before.length + (firstLineEnd === -1 ? transformed.length : firstLineEnd);
+      }
+      requestAnimationFrame(() => {
+        textarea.setSelectionRange(cursorPosition, cursorPosition);
+        this.updateActiveFormats();
+      });
+      this.dispatchChange();
+    });
+  }
+  /**
+   * Apply or toggle list formatting for the current line(s).
+   *
+   * @param listType - 'none' to remove list, 'unordered' for bullet list, 'ordered' for numbered list
+   */
+  applyList(listType) {
+    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);
+      const lines = selected.split("\n");
+      const unorderedRegex = /^(\s*)[-*+]\s+/;
+      const orderedRegex = /^(\s*)\d+\.\s+/;
+      let transformed;
+      if (listType === "none") {
+        transformed = lines.map((l) => {
+          if (unorderedRegex.test(l)) {
+            return l.replace(unorderedRegex, "$1");
+          }
+          if (orderedRegex.test(l)) {
+            return l.replace(orderedRegex, "$1");
+          }
+          return l;
+        }).join("\n");
+      } else if (listType === "unordered") {
+        const allAlreadyUnordered = lines.every(
+          (l) => l.trim() === "" || unorderedRegex.test(l)
+        );
+        if (allAlreadyUnordered && lines.some((l) => unorderedRegex.test(l))) {
+          transformed = lines.map((l) => {
+            if (unorderedRegex.test(l)) {
+              return l.replace(unorderedRegex, "$1");
+            }
+            return l;
+          }).join("\n");
+        } else {
+          transformed = lines.map((l) => {
+            if (l.trim() === "") return l;
+            let cleaned = l;
+            if (unorderedRegex.test(l)) {
+              cleaned = l.replace(unorderedRegex, "$1");
+            } else if (orderedRegex.test(l)) {
+              cleaned = l.replace(orderedRegex, "$1");
+            }
+            const indentMatch = cleaned.match(/^(\s*)/);
+            const indent = indentMatch ? indentMatch[1] : "";
+            const content = cleaned.replace(/^\s*/, "");
+            return `${indent}- ${content}`;
+          }).join("\n");
+        }
+      } else if (listType === "ordered") {
+        const allAlreadyOrdered = lines.every(
+          (l) => l.trim() === "" || orderedRegex.test(l)
+        );
+        if (allAlreadyOrdered && lines.some((l) => orderedRegex.test(l))) {
+          transformed = lines.map((l) => {
+            if (orderedRegex.test(l)) {
+              return l.replace(orderedRegex, "$1");
+            }
+            return l;
+          }).join("\n");
+        } else {
+          let counter = 1;
+          const beforeLines = before.split("\n");
+          for (let i = beforeLines.length - 1; i >= 0; i--) {
+            const line = beforeLines[i];
+            const orderedMatch = line.match(/^(\s*)(\d+)\.\s*(.*)$/);
+            if (orderedMatch) {
+              counter = parseInt(orderedMatch[2], 10) + 1;
+              break;
+            } else if (line.trim() !== "" && !line.match(/^\s*[-*+]\s+/)) {
+              break;
+            }
+          }
+          transformed = lines.map((l) => {
+            if (l.trim() === "") return l;
+            let cleaned = l;
+            if (unorderedRegex.test(l)) {
+              cleaned = l.replace(unorderedRegex, "$1");
+            } else if (orderedRegex.test(l)) {
+              cleaned = l.replace(orderedRegex, "$1");
+            }
+            const indentMatch = cleaned.match(/^(\s*)/);
+            const indent = indentMatch ? indentMatch[1] : "";
+            const content = cleaned.replace(/^\s*/, "");
+            return `${indent}${counter++}. ${content}`;
+          }).join("\n");
+        }
+      }
+      let finalValue = before + transformed + after;
+      if (listType === "ordered") {
+        const allAlreadyOrdered = lines.every(
+          (l) => l.trim() === "" || orderedRegex.test(l)
+        );
+        if (!allAlreadyOrdered || !lines.some((l) => orderedRegex.test(l))) {
+          const transformedLines = transformed.split("\n");
+          const lastTransformedLine = transformedLines[transformedLines.length - 1];
+          const indentMatch = lastTransformedLine.match(/^(\s*)/);
+          const indent = indentMatch ? indentMatch[1] : "";
+          const endPosition = before.length + transformed.length;
+          finalValue = this.renumberOrderedListItems(
+            finalValue,
+            endPosition,
+            indent
+          );
+        }
+      }
+      if (listType === "none") {
+        const removedOrderedItems = lines.some((l) => orderedRegex.test(l));
+        if (removedOrderedItems) {
+          finalValue = this.renumberSubsequentOrderedLists(
+            finalValue,
+            before.length + transformed.length
+          );
+        }
+      }
+      this.value = finalValue;
+      textarea.value = finalValue;
+      const firstLineEnd = transformed.indexOf("\n");
+      const cursorPosition = before.length + (firstLineEnd === -1 ? transformed.length : firstLineEnd);
+      requestAnimationFrame(() => {
+        textarea.setSelectionRange(cursorPosition, cursorPosition);
+        this.updateActiveFormats();
+      });
+      this.dispatchChange();
+    });
+  }
+  /**
+   * Get the current active list type based on activeFormats.
+   */
+  getActiveListType() {
+    if (this.activeFormats.unorderedList) return "unordered";
+    if (this.activeFormats.orderedList) return "ordered";
+    return "none";
+  }
+  /**
+   * Toggle inline formatting by wrapping/unwrapping selection or current word.
+   *
+   * @param wrapper - the markdown wrapper to toggle, e.g. '**' for bold, '*' for italic
+   */
+  toggleWrap(wrapper) {
+    if (this.isReadonly || this.isDisabled) return;
+    this.saveUndoStateBeforeChange();
+    this.withSelection((textarea, start, end, value) => {
+      if (this.isSelectionInLinkUrl(start, end, value)) {
+        return;
+      }
+      const { start: s, end: e } = this.expandSelectionToWord(start, end, value);
+      let before = value.slice(0, s);
+      let selected = value.slice(s, e);
+      let after = value.slice(e);
+      const hasOuterWrap = before.endsWith(wrapper) && after.startsWith(wrapper);
+      if (hasOuterWrap) {
+        before = before.slice(0, before.length - wrapper.length);
+        after = after.slice(wrapper.length);
+        this.value = before + selected + after;
+        const selStart2 = before.length;
+        const selEnd2 = selStart2 + selected.length;
+        requestAnimationFrame(() => {
+          textarea.setSelectionRange(selStart2, selEnd2);
+          this.updateActiveFormats();
+        });
+        this.dispatchChange();
+        return;
+      }
+      const innerWrapped = selected.startsWith(wrapper) && selected.endsWith(wrapper);
+      if (innerWrapped) {
+        selected = selected.slice(
+          wrapper.length,
+          selected.length - wrapper.length
+        );
+        this.value = before + selected + after;
+        const selStart2 = before.length;
+        const selEnd2 = selStart2 + selected.length;
+        requestAnimationFrame(() => {
+          textarea.setSelectionRange(selStart2, selEnd2);
+          this.updateActiveFormats();
+        });
+        this.dispatchChange();
+        return;
+      }
+      const wrapped = `${wrapper}${selected || ""}${wrapper}`;
+      this.value = before + wrapped + after;
+      const selStart = before.length + wrapper.length;
+      const selEnd = selStart + (selected ? selected.length : 0);
+      requestAnimationFrame(() => {
+        textarea.setSelectionRange(selStart, selEnd);
+        this.updateActiveFormats();
+      });
+      this.dispatchChange();
+    });
+  }
+  /**
+   * Toggle preview mode on or off.
+   */
+  togglePreview() {
+    if (this.isPreview) {
+      this.exitPreview();
+    } else {
+      this.enterPreview();
+    }
+    this.isPreview = !this.isPreview;
+  }
+  /**
+   * Enter preview mode - save current state and remove keyboard listeners from textarea
+   */
+  enterPreview() {
+    const textarea = this.textareaEl?.shadowRoot?.querySelector("textarea");
+    if (textarea) {
+      this.savedSelectionForPreview = {
+        start: textarea.selectionStart ?? 0,
+        end: textarea.selectionEnd ?? 0
+      };
+      this.removeKeyboardListeners();
+    }
+  }
+  /**
+   * Exit preview mode - restore state and reattach keyboard listeners
+   */
+  exitPreview() {
+    requestAnimationFrame(() => {
+      const textarea = this.textareaEl?.shadowRoot?.querySelector("textarea");
+      if (textarea && this.savedSelectionForPreview) {
+        textarea.focus();
+        textarea.setSelectionRange(
+          this.savedSelectionForPreview.start,
+          this.savedSelectionForPreview.end
+        );
+        this.currentSelection = this.savedSelectionForPreview;
+        this.savedSelectionForPreview = null;
+        this.updateActiveFormats();
+      }
+      this.addKeyboardListeners();
+    });
+  }
+  /**
+   * Insert or edit a markdown link [text](url).
+   */
+  insertLink() {
+    if (this.isReadonly || this.isDisabled) return;
+    this.saveUndoStateBeforeChange();
+    const placeholderText = "link text";
+    const placeholderUrl = "";
+    this.withSelection((textarea, start, end, value) => {
+      if (this.isSelectionInLinkUrl(start, end, value) || this.isSelectionInLinkText(start, end, value)) {
+        const leftBracket2 = value.lastIndexOf("[", start);
+        const rightParen2 = value.indexOf(")", Math.max(start, end));
+        const rightBracket2 = value.indexOf("]", leftBracket2);
+        const openParen2 = value.indexOf("(", rightBracket2);
+        if (leftBracket2 !== -1 && rightBracket2 !== -1 && openParen2 !== -1 && rightParen2 !== -1) {
+          const candidate = value.slice(leftBracket2, rightParen2 + 1);
+          const linkRegex2 = /^\[([^\]]+)\]\(([^)]*)\)$/;
+          const match = candidate.match(linkRegex2);
+          if (match) {
+            const textOnly = match[1];
+            this.value = value.slice(0, leftBracket2) + textOnly + value.slice(rightParen2 + 1);
+            const newCursor = leftBracket2 + textOnly.length;
+            requestAnimationFrame(() => {
+              textarea.setSelectionRange(newCursor, newCursor);
+              this.updateActiveFormats();
+            });
+            this.dispatchChange();
+            return;
+          }
+        }
+        return;
+      }
+      const { start: s, end: e } = this.expandSelectionToWord(start, end, value);
+      const before = value.slice(0, s);
+      const selected = value.slice(s, e);
+      const after = value.slice(e);
+      const linkRegex = /^\[([^\]]+)\]\(([^)]+)\)$/;
+      if (linkRegex.test(selected)) {
+        const match = selected.match(linkRegex);
+        const textOnly = match?.[1] ?? selected;
+        this.value = before + textOnly + after;
+        const newStart = before.length;
+        const newEnd = newStart + textOnly.length;
+        requestAnimationFrame(() => {
+          textarea.setSelectionRange(newStart, newEnd);
+          this.updateActiveFormats();
+        });
+        this.dispatchChange();
+        return;
+      }
+      const leftBracket = value.lastIndexOf("[", s);
+      const rightParen = value.indexOf(")", e);
+      const rightBracket = value.indexOf("]", e);
+      const openParen = value.indexOf("(", e);
+      if (leftBracket !== -1 && rightBracket !== -1 && openParen !== -1 && rightParen !== -1 && leftBracket < rightBracket && rightBracket < openParen && openParen < rightParen) {
+        const candidate = value.slice(leftBracket, rightParen + 1);
+        if (linkRegex.test(candidate)) {
+          const match = candidate.match(linkRegex);
+          const textOnly = match?.[1] ?? candidate;
+          this.value = value.slice(0, leftBracket) + textOnly + value.slice(rightParen + 1);
+          const newCursor = leftBracket + textOnly.length;
+          requestAnimationFrame(() => {
+            textarea.setSelectionRange(newCursor, newCursor);
+            this.updateActiveFormats();
+          });
+          this.dispatchChange();
+          return;
+        }
+      }
+      const text = selected || placeholderText;
+      const md = `[${text}](${placeholderUrl})`;
+      this.value = before + md + after;
+      const cursorPosition = before.length + 1 + text.length + 2;
+      requestAnimationFrame(() => {
+        textarea.focus();
+        textarea.setSelectionRange(cursorPosition, cursorPosition);
+        this.updateActiveFormats();
+      });
+      this.dispatchChange();
+    });
+  }
+  /**
+   * Update active formatting states based on current selection or cursor position.
+   */
+  updateActiveFormats() {
+    const textarea = this.textareaEl?.shadowRoot?.querySelector("textarea");
+    if (!textarea || !this.value) return;
+    const start = textarea.selectionStart ?? 0;
+    const end = textarea.selectionEnd ?? 0;
+    this.currentSelection = { start, end };
+    const { start: s, end: e } = this.expandSelectionToWord(
+      start,
+      end,
+      this.value
+    );
+    const selectedText = this.value.slice(s, e);
+    const beforeSelection = this.value.slice(0, s);
+    const afterSelection = this.value.slice(e);
+    const hasBoldWrap = beforeSelection.endsWith("**") && afterSelection.startsWith("**") || selectedText.startsWith("**") && selectedText.endsWith("**");
+    const hasItalicWrap = beforeSelection.endsWith("*") && afterSelection.startsWith("*") && !beforeSelection.endsWith("**") || selectedText.startsWith("*") && selectedText.endsWith("*") && !selectedText.startsWith("**");
+    const linkRegex = /\[([^\]]+)\]\(([^)]+)\)/;
+    const hasLink = linkRegex.test(selectedText) || this.isWithinLink(start, this.value);
+    const lineStart = this.value.lastIndexOf("\n", start - 1) + 1;
+    const lineEnd = this.value.indexOf("\n", start);
+    const currentLine = this.value.slice(
+      lineStart,
+      lineEnd === -1 ? this.value.length : lineEnd
+    );
+    const headingMatch = currentLine.match(/^(#{1,6})\s/);
+    const headingLevel = headingMatch ? headingMatch[1].length : 0;
+    const unorderedListMatch = currentLine.match(/^\s*[-*+]\s/);
+    const orderedListMatch = currentLine.match(/^\s*\d+\.\s/);
+    const hasUnorderedList = !!unorderedListMatch;
+    const hasOrderedList = !!orderedListMatch;
+    const colorRegex = /<span style="color: ([^"]+)">/;
+    const hasColorWrap = !!(beforeSelection.match(colorRegex) && afterSelection.includes("</span>") || selectedText.match(/^<span style="color: ([^"]+)">(.*)<\/span>$/s));
+    let activeColor = this.defaultColor;
+    if (hasColorWrap) {
+      const beforeColorMatch = beforeSelection.match(
+        /<span style="color: ([^"]+)">([^<]*)$/
+      );
+      const selectedColorMatch = selectedText.match(
+        /^<span style="color: ([^"]+)">/
+      );
+      activeColor = beforeColorMatch?.[1] || selectedColorMatch?.[1] || "";
+    }
+    this.activeFormats = {
+      bold: hasBoldWrap,
+      italic: hasItalicWrap,
+      link: hasLink,
+      h1: headingLevel === 1,
+      h2: headingLevel === 2,
+      h3: headingLevel === 3,
+      color: hasColorWrap,
+      activeColor,
+      unorderedList: hasUnorderedList,
+      orderedList: hasOrderedList
+    };
+  }
+  /**
+   * Check if a given position is within a markdown link [text](url).
+   * @param position - cursor position
+   * @param value  - full textarea value
+   */
+  isWithinLink(position, value) {
+    const leftBracket = value.lastIndexOf("[", position);
+    const rightParen = value.indexOf(")", position);
+    if (leftBracket === -1 || rightParen === -1) return false;
+    const candidate = value.slice(leftBracket, rightParen + 1);
+    return /^\[([^\]]+)\]\(([^)]+)\)$/.test(candidate);
+  }
+  /**
+   * Check if selection is within the text part [] of a markdown link
+   * @param start - selection start position
+   * @param end - selection end position
+   * @param value - full textarea value
+   */
+  isSelectionInLinkText(start, end, value) {
+    const leftBracket = value.lastIndexOf("[", start);
+    const rightParen = value.indexOf(")", Math.max(start, end));
+    if (leftBracket === -1 || rightParen === -1) return false;
+    const rightBracket = value.indexOf("]", leftBracket);
+    const openParen = value.indexOf("(", rightBracket);
+    if (rightBracket === -1 || openParen === -1) return false;
+    if (!(leftBracket < rightBracket && rightBracket < openParen && openParen < rightParen))
+      return false;
+    const candidate = value.slice(leftBracket, rightParen + 1);
+    if (!/^\[([^\]]+)\]\(([^)]*)\)$/.test(candidate)) return false;
+    return start >= leftBracket + 1 && end <= rightBracket;
+  }
+  /**
+   * Check if selection is within the URL part () of a markdown link
+   * @param start - selection start position
+   * @param end - selection end position
+   * @param value - full textarea value
+   */
+  isSelectionInLinkUrl(start, end, value) {
+    const leftBracket = value.lastIndexOf("[", start);
+    const rightParen = value.indexOf(")", Math.max(start, end));
+    if (leftBracket === -1 || rightParen === -1) return false;
+    const rightBracket = value.indexOf("]", leftBracket);
+    const openParen = value.indexOf("(", rightBracket);
+    if (rightBracket === -1 || openParen === -1) return false;
+    if (!(leftBracket < rightBracket && rightBracket < openParen && openParen < rightParen))
+      return false;
+    const candidate = value.slice(leftBracket, rightParen + 1);
+    if (!/^\[([^\]]+)\]\(([^)]*)\)$/.test(candidate)) return false;
+    return start >= openParen + 1 && end <= rightParen;
+  }
+  /**
+   * Add keyboard event listeners to the textarea for undo/redo functionality.
+   */
+  addKeyboardListeners() {
+    const tryAddListener = (attempts = 0) => {
+      const textarea = this.textareaEl?.shadowRoot?.querySelector("textarea");
+      if (textarea) {
+        textarea.removeEventListener("keydown", this.handleKeyDown);
+        textarea.addEventListener("keydown", this.handleKeyDown);
+      } else if (attempts < 15) {
+        requestAnimationFrame(() => tryAddListener(attempts + 1));
+      }
+    };
+    tryAddListener();
+  }
+  /**
+   * Remove keyboard event listeners from the textarea to prevent memory leaks.
+   */
+  removeKeyboardListeners() {
+    const textarea = this.textareaEl?.shadowRoot?.querySelector("textarea");
+    if (textarea) {
+      textarea.removeEventListener("keydown", this.handleKeyDown);
+    }
+  }
+  /**
+   * Toggle color formatting by wrapping/unwrapping selection or current word.
+   *
+   * @param color - the hex color code to apply, e.g. '#FF0000' for red
+   */
+  toggleColorWrap(color) {
+    if (this.isReadonly || this.isDisabled) return;
+    this.saveUndoStateBeforeChange();
+    this.withSelection((textarea, start, end, value) => {
+      if (this.isSelectionInLinkUrl(start, end, value)) {
+        return;
+      }
+      const { start: s, end: e } = this.expandSelectionToWord(start, end, value);
+      let before = value.slice(0, s);
+      let selected = value.slice(s, e);
+      let after = value.slice(e);
+      const colorTagClose = "</span>";
+      const anyColorSpanRegex = /<span style="color: ([^"]+)">$/;
+      const beforeColorMatch = before.match(anyColorSpanRegex);
+      const hasOuterWrap = beforeColorMatch && after.startsWith(colorTagClose);
+      if (hasOuterWrap) {
+        const existingColor = beforeColorMatch[1];
+        let selStart2;
+        let selEnd2;
+        if (existingColor === color) {
+          before = before.slice(0, before.length - beforeColorMatch[0].length);
+          after = after.slice(colorTagClose.length);
+          this.value = before + selected + after;
+          selStart2 = before.length;
+          selEnd2 = selStart2 + selected.length;
+        } else {
+          const newColorTagOpen2 = `<span style="color: ${color}">`;
+          before = before.slice(0, before.length - beforeColorMatch[0].length) + newColorTagOpen2;
+          this.value = before + selected + after;
+          selStart2 = before.length;
+          selEnd2 = selStart2 + selected.length;
+        }
+        requestAnimationFrame(() => {
+          textarea.setSelectionRange(selStart2, selEnd2);
+          this.updateActiveFormats();
+        });
+        this.dispatchChange();
+        return;
+      }
+      const colorRegex = /^<span style="color: ([^"]+)">(.*)<\/span>$/s;
+      const innerMatch = selected.match(colorRegex);
+      if (innerMatch) {
+        const existingColor = innerMatch[1];
+        const innerText = innerMatch[2];
+        if (existingColor === color) {
+          selected = innerText;
+        } else {
+          selected = `<span style="color: ${color}">${innerText}</span>`;
+        }
+        this.value = before + selected + after;
+        const selStart2 = before.length;
+        const selEnd2 = selStart2 + (existingColor === color ? innerText.length : innerText.length);
+        requestAnimationFrame(() => {
+          textarea.setSelectionRange(selStart2, selEnd2);
+          this.updateActiveFormats();
+        });
+        this.dispatchChange();
+        return;
+      }
+      const newColorTagOpen = `<span style="color: ${color}">`;
+      const wrapped = `${newColorTagOpen}${selected || ""}${colorTagClose}`;
+      this.value = before + wrapped + after;
+      const selStart = before.length + newColorTagOpen.length;
+      const selEnd = selStart + (selected ? selected.length : 4);
+      requestAnimationFrame(() => {
+        textarea.setSelectionRange(selStart, selEnd);
+        this.updateActiveFormats();
+      });
+      this.dispatchChange();
+    });
+  }
+  /**
+   * Handle color selection from the dropdown.
+   *
+   * @param color - the selected hex color code
+   */
+  selectColor(color) {
+    if (this.savedSelection) {
+      const textarea = this.textareaEl?.shadowRoot?.querySelector("textarea");
+      if (textarea) {
+        textarea.focus();
+        textarea.setSelectionRange(
+          this.savedSelection.start,
+          this.savedSelection.end
+        );
+        this.currentSelection = this.savedSelection;
+        this.savedSelection = null;
+        this.toggleColorWrap(color);
+      }
+    } else {
+      this.toggleColorWrap(color);
+    }
+  }
+  /**
+   * Clear color formatting from the current selection or word.
+   */
+  clearColor() {
+    if (this.isReadonly || this.isDisabled) return;
+    this.saveUndoStateBeforeChange();
+    if (this.savedSelection) {
+      const textarea = this.textareaEl?.shadowRoot?.querySelector("textarea");
+      if (textarea) {
+        textarea.focus();
+        textarea.setSelectionRange(
+          this.savedSelection.start,
+          this.savedSelection.end
+        );
+        this.currentSelection = this.savedSelection;
+        this.savedSelection = null;
+      }
+    }
+    this.withSelection((ta, start, end, value) => {
+      if (this.isSelectionInLinkUrl(start, end, value)) {
+        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;
+      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);
+      while (match !== null) {
+        const matchStart = searchOffset + match.index;
+        const matchEnd = searchOffset + 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);
+          const selStart = matchStart + beforeContent.length;
+          const selEnd = selStart + selected.length;
+          requestAnimationFrame(() => {
+            ta.setSelectionRange(selStart, selEnd);
+            this.updateActiveFormats();
+          });
+          this.dispatchChange();
+          foundMatch = true;
+          break;
+        }
+        match = fullColorRegex.exec(searchText);
+      }
+      if (!foundMatch) {
+        this.value = before + selected + after;
+        const selStart = before.length;
+        const selEnd = selStart + selected.length;
+        requestAnimationFrame(() => {
+          ta.setSelectionRange(selStart, selEnd);
+          this.updateActiveFormats();
+        });
+        this.dispatchChange();
+      }
+    });
+  }
+  /**
+   * Determine the current active heading level (1-3) based on activeFormats.
+   */
+  getActiveHeadingLevel() {
+    if (this.activeFormats.h1) return 1;
+    if (this.activeFormats.h2) return 2;
+    if (this.activeFormats.h3) return 3;
+    return 0;
+  }
+  /**
+   * Save the initial state to the undo stack.
+   */
+  saveInitialUndoState() {
+    const textarea = this.textareaEl?.shadowRoot?.querySelector("textarea");
+    const initialSelection = textarea ? { start: textarea.selectionStart ?? 0, end: textarea.selectionEnd ?? 0 } : { start: 0, end: 0 };
+    this.undoStack = [{ value: this.value, selection: initialSelection }];
+    this.redoStack = [];
+    this.lastSavedValue = this.value;
+  }
+  /**
+   * Save the current state to the undo stack before making a change.
+   *
+   */
+  saveUndoStateBeforeChange() {
+    if (this.isUndoRedoAction) return;
+    const textarea = this.textareaEl?.shadowRoot?.querySelector("textarea");
+    const selection = textarea ? { start: textarea.selectionStart ?? 0, end: textarea.selectionEnd ?? 0 } : { start: 0, end: 0 };
+    this.undoStack.push({
+      value: this.value,
+      selection
+    });
+    if (this.undoStack.length > this.MAX_UNDO_STACK_SIZE) {
+      this.undoStack.shift();
+    }
+    this.redoStack = [];
+  }
+  /**
+   * Save the current state to the undo stack if the value has changed.
+   */
+  saveUndoState() {
+    if (this.isUndoRedoAction) return;
+    if (this.value !== this.lastSavedValue) {
+      this.undoStack.push({
+        value: this.lastSavedValue,
+        selection: this.currentSelection
+      });
+      if (this.undoStack.length > this.MAX_UNDO_STACK_SIZE) {
+        this.undoStack.shift();
+      }
+      this.redoStack = [];
+      this.lastSavedValue = this.value;
+    }
+  }
+  /**
+   * Schedule an undo state save after a short delay.
+   */
+  scheduleUndoStateSave() {
+    if (this.undoTimeout) {
+      clearTimeout(this.undoTimeout);
+    }
+    this.undoTimeout = window.setTimeout(() => {
+      this.saveUndoState();
+      this.undoTimeout = null;
+    }, this.UNDO_SAVE_DELAY);
+  }
+  /**
+   * Handle list continuation when Enter is pressed within a list item.
+   * Works against the textarea value/selection.
+   * Returns true if handled.
+   */
+  handleListContinuation() {
+    const textarea = this.textareaEl?.shadowRoot?.querySelector(
+      "textarea"
+    );
+    if (!textarea) return false;
+    const start = textarea.selectionStart ?? 0;
+    const end = textarea.selectionEnd ?? 0;
+    if (start !== end) return false;
+    const value = this.value;
+    const lineStart = value.lastIndexOf("\n", start - 1) + 1;
+    let lineEnd = value.indexOf("\n", start);
+    if (lineEnd === -1) lineEnd = value.length;
+    const currentLine = value.slice(lineStart, lineEnd);
+    const unorderedMatch = currentLine.match(/^(\s*)([-*+])\s*(.*)$/);
+    const orderedMatch = currentLine.match(/^(\s*)(\d+)\.\s*(.*)$/);
+    if (!unorderedMatch && !orderedMatch) {
+      return false;
+    }
+    this.saveUndoStateBeforeChange();
+    if (unorderedMatch) {
+      const indent = unorderedMatch[1] ?? "";
+      const marker = unorderedMatch[2] ?? "-";
+      const content = unorderedMatch[3] ?? "";
+      if (content.trim() === "") {
+        const before2 = value.slice(0, lineStart);
+        const after2 = value.slice(lineEnd);
+        const newValue2 = before2 + (lineEnd === value.length ? "" : "") + after2;
+        this.value = newValue2;
+        textarea.value = newValue2;
+        const newCursor2 = before2.length;
+        requestAnimationFrame(() => {
+          textarea.setSelectionRange(newCursor2, newCursor2);
+          this.updateActiveFormats();
+        });
+        this.dispatchChange();
+        return true;
+      }
+      const before = value.slice(0, start);
+      const after = value.slice(start);
+      const prefix = `
+${indent}${marker} `;
+      const newValue = before + prefix + after;
+      this.value = newValue;
+      textarea.value = newValue;
+      const newCursor = start + prefix.length;
+      requestAnimationFrame(() => {
+        textarea.setSelectionRange(newCursor, newCursor);
+        this.updateActiveFormats();
+      });
+      this.dispatchChange();
+      return true;
+    }
+    if (orderedMatch) {
+      const indent = orderedMatch[1] ?? "";
+      const numberStr = orderedMatch[2] ?? "1";
+      const content = orderedMatch[3] ?? "";
+      if (content.trim() === "") {
+        const before2 = value.slice(0, lineStart);
+        const after2 = value.slice(lineEnd);
+        const newValue2 = before2 + (lineEnd === value.length ? "" : "") + after2;
+        this.value = newValue2;
+        textarea.value = newValue2;
+        const newCursor2 = before2.length;
+        requestAnimationFrame(() => {
+          textarea.setSelectionRange(newCursor2, newCursor2);
+          this.updateActiveFormats();
+        });
+        this.dispatchChange();
+        return true;
+      }
+      let nextNumber = parseInt(numberStr, 10) + 1;
+      const beforeText = value.slice(0, lineStart);
+      const beforeLines = beforeText.split("\n");
+      let lastNumberAtThisLevel = 0;
+      for (let i = beforeLines.length - 1; i >= 0; i--) {
+        const line = beforeLines[i];
+        const match = line.match(/^(\s*)(\d+)\.\s*(.*)$/);
+        if (match && match[1] === indent) {
+          lastNumberAtThisLevel = parseInt(match[2], 10);
+          break;
+        } else if (line.trim() !== "" && !line.match(/^\s*[-*+]\s+/) && !match) {
+          break;
+        }
+      }
+      if (lastNumberAtThisLevel > 0) {
+        nextNumber = lastNumberAtThisLevel + 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;
+      const newCursor = start + prefix.length;
+      requestAnimationFrame(() => {
+        textarea.setSelectionRange(newCursor, newCursor);
+        this.updateActiveFormats();
+      });
+      this.dispatchChange();
+      return true;
+    }
+    return false;
+  }
+  /**
+   * Handle Tab key to indent a list item (increase nesting level).
+   * Returns true if handled.
+   */
+  handleListIndent() {
+    const textarea = this.textareaEl?.shadowRoot?.querySelector(
+      "textarea"
+    );
+    if (!textarea) return false;
+    const start = textarea.selectionStart ?? 0;
+    const end = textarea.selectionEnd ?? 0;
+    if (start !== end) return false;
+    const value = this.value;
+    const lineStart = value.lastIndexOf("\n", start - 1) + 1;
+    let lineEnd = value.indexOf("\n", start);
+    if (lineEnd === -1) lineEnd = value.length;
+    const currentLine = value.slice(lineStart, lineEnd);
+    const unorderedMatch = currentLine.match(/^(\s*)([-*+])\s*(.*)$/);
+    const orderedMatch = currentLine.match(/^(\s*)(\d+)\.\s*(.*)$/);
+    if (!unorderedMatch && !orderedMatch) {
+      return false;
+    }
+    this.saveUndoStateBeforeChange();
+    const before = value.slice(0, lineStart);
+    const after = value.slice(lineEnd);
+    const indent = "    ";
+    let newLine;
+    let newCursorOffset = 0;
+    if (unorderedMatch) {
+      const currentIndent = unorderedMatch[1] ?? "";
+      const marker = unorderedMatch[2] ?? "-";
+      const content = unorderedMatch[3] ?? "";
+      newLine = `${currentIndent}${indent}${marker} ${content}`;
+      newCursorOffset = indent.length;
+    } else if (orderedMatch) {
+      const currentIndent = orderedMatch[1] ?? "";
+      const content = orderedMatch[3] ?? "";
+      newLine = `${currentIndent}${indent}1. ${content}`;
+      newCursorOffset = indent.length;
+    } else {
+      return false;
+    }
+    const newValue = before + newLine + after;
+    this.value = newValue;
+    textarea.value = newValue;
+    const cursorInLine = start - lineStart;
+    const newCursor = lineStart + cursorInLine + newCursorOffset;
+    requestAnimationFrame(() => {
+      textarea.setSelectionRange(newCursor, newCursor);
+      this.updateActiveFormats();
+    });
+    this.dispatchChange();
+    return true;
+  }
+  /**
+   * Handle Shift+Tab key to outdent a list item (decrease nesting level).
+   * Returns true if handled.
+   */
+  handleListOutdent() {
+    const textarea = this.textareaEl?.shadowRoot?.querySelector(
+      "textarea"
+    );
+    if (!textarea) return false;
+    const start = textarea.selectionStart ?? 0;
+    const end = textarea.selectionEnd ?? 0;
+    if (start !== end) return false;
+    const value = this.value;
+    const lineStart = value.lastIndexOf("\n", start - 1) + 1;
+    let lineEnd = value.indexOf("\n", start);
+    if (lineEnd === -1) lineEnd = value.length;
+    const currentLine = value.slice(lineStart, lineEnd);
+    const unorderedMatch = currentLine.match(/^(\s*)([-*+])\s*(.*)$/);
+    const orderedMatch = currentLine.match(/^(\s*)(\d+)\.\s*(.*)$/);
+    if (!unorderedMatch && !orderedMatch) {
+      return false;
+    }
+    const currentIndent = (unorderedMatch || orderedMatch)?.[1] ?? "";
+    if (currentIndent.length < 4) {
+      return false;
+    }
+    this.saveUndoStateBeforeChange();
+    const before = value.slice(0, lineStart);
+    const after = value.slice(lineEnd);
+    const outdent = "    ";
+    let newLine;
+    let newCursorOffset = 0;
+    if (unorderedMatch) {
+      const marker = unorderedMatch[2] ?? "-";
+      const content = unorderedMatch[3] ?? "";
+      const newIndent = currentIndent.slice(outdent.length);
+      newLine = `${newIndent}${marker} ${content}`;
+      newCursorOffset = -outdent.length;
+    } else if (orderedMatch) {
+      const content = orderedMatch[3] ?? "";
+      const newIndent = currentIndent.slice(outdent.length);
+      let newNumber = 1;
+      const beforeLines = before.split("\n");
+      for (let i = beforeLines.length - 1; i >= 0; i--) {
+        const line = beforeLines[i];
+        const match = line.match(/^(\s*)(\d+)\.\s*(.*)$/);
+        if (match && match[1] === newIndent) {
+          newNumber = parseInt(match[2], 10) + 1;
+          break;
+        } else if (line.trim() !== "" && !line.match(/^\s*[-*+]\s+/) && !match) {
+          break;
+        }
+      }
+      newLine = `${newIndent}${newNumber}. ${content}`;
+      newCursorOffset = -outdent.length;
+    } else {
+      return false;
+    }
+    let newValue = before + newLine + after;
+    if (orderedMatch) {
+      const newIndent = currentIndent.slice(outdent.length);
+      newValue = this.renumberOrderedListItems(
+        newValue,
+        lineStart + newLine.length,
+        newIndent
+      );
+    }
+    this.value = newValue;
+    textarea.value = newValue;
+    const cursorInLine = start - lineStart;
+    const newCursor = Math.max(
+      lineStart,
+      lineStart + cursorInLine + newCursorOffset
+    );
+    requestAnimationFrame(() => {
+      textarea.setSelectionRange(newCursor, newCursor);
+      this.updateActiveFormats();
+    });
+    this.dispatchChange();
+    return true;
+  }
+  /**
+   * Renumber ordered list items that come after the given position with the same indentation level.
+   *
+   * @param value - The text content to process
+   * @param fromPosition - Start looking for list items from this position
+   * @param targetIndent - Only renumber items with this exact indentation
+   * @returns The text with renumbered list items
+   */
+  renumberOrderedListItems(value, fromPosition, targetIndent) {
+    const lines = value.split("\n");
+    const fromLineIndex = Math.max(
+      0,
+      value.slice(0, fromPosition).split("\n").length - 1
+    );
+    let nextExpectedNumber = 1;
+    const currentLine = lines[fromLineIndex];
+    const currentMatch = currentLine?.match(/^(\s*)(\d+)\.\s*(.*)$/);
+    if (currentMatch && currentMatch[1] === targetIndent) {
+      nextExpectedNumber = parseInt(currentMatch[2], 10) + 1;
+    } else {
+      for (let i = fromLineIndex - 1; i >= 0; i--) {
+        const line = lines[i];
+        const orderedMatch = line.match(/^(\s*)(\d+)\.\s*(.*)$/);
+        if (orderedMatch && orderedMatch[1] === targetIndent) {
+          nextExpectedNumber = parseInt(orderedMatch[2], 10) + 1;
+          break;
+        }
+      }
+    }
+    let currentNumber = nextExpectedNumber;
+    const orderedRegex = /^(\s*)(\d+)\.\s*(.*)$/;
+    for (let i = fromLineIndex + 1; i < lines.length; i++) {
+      const line = lines[i];
+      const orderedMatch = line.match(orderedRegex);
+      if (orderedMatch && orderedMatch[1] === targetIndent) {
+        const indent = orderedMatch[1];
+        const content = orderedMatch[3];
+        lines[i] = `${indent}${currentNumber}. ${content}`;
+        currentNumber++;
+      } else if (orderedMatch && orderedMatch[1].length < targetIndent.length) {
+        break;
+      } else if (line.trim() !== "" && !orderedMatch && !line.match(/^\s*[-*+]\s+/)) {
+        if (targetIndent === "") {
+          break;
+        }
+      }
+    }
+    return lines.join("\n");
+  }
+  /**
+   * Renumber any ordered lists that come after the given position, starting each new sequence from 1.
+   * This is used when removing list formatting breaks the continuity of a list.
+   *
+   * @param value - The text content to process
+   * @param fromPosition - Start looking for list items from this position
+   * @returns The text with renumbered list sequences
+   */
+  renumberSubsequentOrderedLists(value, fromPosition) {
+    const lines = value.split("\n");
+    const fromLineIndex = Math.max(
+      0,
+      value.slice(0, fromPosition).split("\n").length - 1
+    );
+    const orderedRegex = /^(\s*)(\d+)\.\s*(.*)$/;
+    let currentSequenceNumber = 1;
+    let inSequence = false;
+    let currentIndent = "";
+    for (let i = fromLineIndex + 1; i < lines.length; i++) {
+      const line = lines[i];
+      const orderedMatch = line.match(orderedRegex);
+      if (orderedMatch) {
+        const indent = orderedMatch[1];
+        const content = orderedMatch[3];
+        if (!inSequence || indent !== currentIndent) {
+          currentSequenceNumber = 1;
+          inSequence = true;
+          currentIndent = indent;
+        }
+        lines[i] = `${indent}${currentSequenceNumber}. ${content}`;
+        currentSequenceNumber++;
+      } else if (line.trim() !== "" && !line.match(/^\s*[-*+]\s+/)) {
+        inSequence = false;
+      }
+    }
+    return lines.join("\n");
+  }
+  /**
+   * Handle backspace to remove empty list items.
+   * Returns true if handled.
+   */
+  handleListBackspace() {
+    const textarea = this.textareaEl?.shadowRoot?.querySelector(
+      "textarea"
+    );
+    if (!textarea) return false;
+    const start = textarea.selectionStart ?? 0;
+    const end = textarea.selectionEnd ?? 0;
+    if (start !== end) return false;
+    const value = this.value;
+    const lineStart = value.lastIndexOf("\n", start - 1) + 1;
+    let lineEnd = value.indexOf("\n", start);
+    if (lineEnd === -1) lineEnd = value.length;
+    const currentLine = value.slice(lineStart, lineEnd);
+    const cursorPositionInLine = start - lineStart;
+    const unorderedMatch = currentLine.match(/^(\s*)([-*+])\s*(.*)$/);
+    const orderedMatch = currentLine.match(/^(\s*)(\d+)\.\s*(.*)$/);
+    if (!unorderedMatch && !orderedMatch) {
+      return false;
+    }
+    let markerEndPosition = 0;
+    let hasContent = false;
+    if (unorderedMatch) {
+      const indent = unorderedMatch[1] ?? "";
+      const marker = unorderedMatch[2] ?? "-";
+      const content = unorderedMatch[3] ?? "";
+      markerEndPosition = indent.length + marker.length + 1;
+      hasContent = content.trim().length > 0;
+    } else if (orderedMatch) {
+      const indent = orderedMatch[1] ?? "";
+      const numberStr = orderedMatch[2] ?? "1";
+      const content = orderedMatch[3] ?? "";
+      markerEndPosition = indent.length + numberStr.length + 2;
+      hasContent = content.trim().length > 0;
+    }
+    if (cursorPositionInLine === markerEndPosition && !hasContent) {
+      this.saveUndoStateBeforeChange();
+      const before = value.slice(0, lineStart);
+      const after = value.slice(
+        lineEnd === value.length ? lineEnd : lineEnd + 1
+      );
+      let newValue = before + after;
+      if (orderedMatch) {
+        const indent = orderedMatch[1] ?? "";
+        newValue = this.renumberOrderedListItems(
+          newValue,
+          before.length,
+          indent
+        );
+      }
+      this.value = newValue;
+      textarea.value = newValue;
+      let newCursor = before.length;
+      if (before.endsWith("\n") && before.length > 1) {
+        newCursor = before.length - 1;
+      }
+      requestAnimationFrame(() => {
+        textarea.setSelectionRange(newCursor, newCursor);
+        this.updateActiveFormats();
+      });
+      this.dispatchChange();
+      return true;
+    }
+    return false;
+  }
+  /**
+  /**
+   * Perform an undo operation, reverting to the previous state.
+   */
+  undo() {
+    if (this.isReadonly || this.isDisabled || this.undoStack.length <= 1) {
+      return;
+    }
+    const textarea = this.textareaEl?.shadowRoot?.querySelector("textarea");
+    const currentSelection = textarea ? { start: textarea.selectionStart ?? 0, end: textarea.selectionEnd ?? 0 } : { start: 0, end: 0 };
+    this.redoStack.push({ value: this.value, selection: currentSelection });
+    const previousState = this.undoStack.pop();
+    if (!previousState) {
+      return;
+    }
+    this.isUndoRedoAction = true;
+    this.value = previousState.value;
+    this.lastSavedValue = previousState.value;
+    if (textarea) {
+      textarea.value = previousState.value;
+    }
+    requestAnimationFrame(() => {
+      if (textarea) {
+        textarea.setSelectionRange(
+          previousState.selection.start,
+          previousState.selection.end
+        );
+      }
+      this.updateActiveFormats();
+      this.isUndoRedoAction = false;
+    });
+    this.dispatchChange();
+  }
+  /**
+   * Perform a redo operation, reapplying a previously undone state.
+   */
+  redo() {
+    if (this.isReadonly || this.isDisabled || this.redoStack.length === 0) {
+      return;
+    }
+    const textarea = this.textareaEl?.shadowRoot?.querySelector("textarea");
+    const currentSelection = textarea ? { start: textarea.selectionStart ?? 0, end: textarea.selectionEnd ?? 0 } : { start: 0, end: 0 };
+    this.undoStack.push({ value: this.value, selection: currentSelection });
+    const nextState = this.redoStack.pop();
+    if (!nextState) {
+      return;
+    }
+    this.isUndoRedoAction = true;
+    this.value = nextState.value;
+    this.lastSavedValue = nextState.value;
+    if (textarea) {
+      textarea.value = nextState.value;
+    }
+    requestAnimationFrame(() => {
+      if (textarea) {
+        textarea.setSelectionRange(
+          nextState.selection.start,
+          nextState.selection.end
+        );
+      }
+      this.updateActiveFormats();
+      this.isUndoRedoAction = false;
+    });
+    this.dispatchChange();
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    document.addEventListener("click", this.handleOutsideClick);
+  }
+  firstUpdated(changedProperties) {
+    super.firstUpdated(changedProperties);
+    requestAnimationFrame(() => {
+      this.saveInitialUndoState();
+      this.updateActiveFormats();
+      this.addKeyboardListeners();
+    });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener("click", this.handleOutsideClick);
+    if (this.undoTimeout) {
+      clearTimeout(this.undoTimeout);
+    }
+    this.removeKeyboardListeners();
+    this.savedSelectionForPreview = null;
+  }
+  labelTemplate() {
+    return this.label ? x`<label class="heading-inter-14-bold text-neutral-20 block"
+          >${this.label}</label
+        >` : E;
+  }
+  descriptionTemplate() {
+    return this.description ? x`<div class="paragraph-inter-12-regular text-neutral-20">
+          <lukso-sanitize html-content=${this.description}></lukso-sanitize>
+        </div>` : E;
+  }
+  /**
+   * Restore focus and selection to the textarea after toolbar interactions.
+   */
+  restoreFocusAndSelection() {
+    const ta = this.textareaEl?.shadowRoot?.querySelector(
+      "textarea"
+    );
+    if (ta) {
+      ta.focus();
+      const sel = this.currentSelection;
+      const start = typeof sel.start === "number" ? sel.start : ta.selectionStart ?? 0;
+      const end = typeof sel.end === "number" ? sel.end : ta.selectionEnd ?? 0;
+      ta.setSelectionRange(start, end);
+    }
+  }
+  buttonTemplate(icon, handler, name, isActive = false) {
+    return x`
+      <lukso-tooltip text=${name} placement="top">
+        <lukso-button
+          @click=${() => {
+      this.restoreFocusAndSelection();
+      handler();
+    }}
+          aria-label=${name}
+          aria-pressed=${isActive ? "true" : "false"}
+          type="button"
+          variant="secondary"
+          size="small"
+          custom-class=${this.toolbarButton({ active: isActive })}
+          is-icon
+        >
+          <lukso-icon
+            name=${icon}
+            size="small"
+            pack="vuesax"
+            variant="linear"
+          ></lukso-icon></lukso-button
+      ></lukso-tooltip>
+    `;
+  }
+  toolbarTemplate() {
+    return x`
+      <div class="flex items-center gap-2">
+        <div class=${cn(this.styles().headingMenu())}>
+          <!-- Heading -->
+          <lukso-tooltip text="Heading options" placement="top">
+            <lukso-button
+              id=${this.headingTriggerId}
+              @click=${(e) => {
+      e.stopPropagation();
+      this.isColorDropdownOpen = false;
+      this.isListDropdownOpen = false;
+      this.isHeadingDropdownOpen = !this.isHeadingDropdownOpen;
+    }}
+              aria-expanded=${this.isHeadingDropdownOpen ? "true" : "false"}
+              aria-label="Heading options"
+              variant="secondary"
+              size="small"
+              custom-class=${this.toolbarButton({
+      active: this.getActiveHeadingLevel() > 0
+    })}
+              is-icon
+            >
+              <lukso-icon
+                name="smallcaps"
+                size="small"
+                pack="vuesax"
+                variant="linear"
+              ></lukso-icon>
+            </lukso-button>
+          </lukso-tooltip>
+          <lukso-dropdown
+            id="headingDropdown"
+            trigger-id=""
+            size="medium"
+            ?is-open=${this.isHeadingDropdownOpen}
+          >
+            <lukso-dropdown-option
+              ?is-selected=${this.getActiveHeadingLevel() === 0}
+              @click=${(e) => {
+      e.stopPropagation();
+      this.restoreFocusAndSelection();
+      this.applyHeading(0);
+      this.isHeadingDropdownOpen = false;
+    }}
+              size="medium"
+            >
+              Normal text
+            </lukso-dropdown-option>
+            <lukso-dropdown-option
+              ?is-selected=${this.getActiveHeadingLevel() === 1}
+              @click=${(e) => {
+      e.stopPropagation();
+      this.restoreFocusAndSelection();
+      this.applyHeading(1);
+      this.isHeadingDropdownOpen = false;
+    }}
+              size="medium"
+            >
+              Heading 1
+            </lukso-dropdown-option>
+            <lukso-dropdown-option
+              ?is-selected=${this.getActiveHeadingLevel() === 2}
+              @click=${(e) => {
+      e.stopPropagation();
+      this.restoreFocusAndSelection();
+      this.applyHeading(2);
+      this.isHeadingDropdownOpen = false;
+    }}
+              size="medium"
+            >
+              Heading 2
+            </lukso-dropdown-option>
+            <lukso-dropdown-option
+              ?is-selected=${this.getActiveHeadingLevel() === 3}
+              @click=${(e) => {
+      e.stopPropagation();
+      this.restoreFocusAndSelection();
+      this.applyHeading(3);
+      this.isHeadingDropdownOpen = false;
+    }}
+              size="medium"
+            >
+              Heading 3
+            </lukso-dropdown-option>
+          </lukso-dropdown>
+        </div>
+
+        <!-- Bold -->
+        ${this.buttonTemplate(
+      "text-bold",
+      () => this.toggleWrap("**"),
+      "Bold",
+      this.activeFormats.bold
+    )}
+
+        <!-- Italic -->
+        ${this.buttonTemplate(
+      "text-italic",
+      () => this.toggleWrap("*"),
+      "Italic",
+      this.activeFormats.italic
+    )}
+
+        <!-- List -->
+        <div class=${this.styles().listMenu()}>
+          <lukso-tooltip text="List options" placement="top">
+            <lukso-button
+              id=${this.listTriggerId}
+              @click=${(e) => {
+      e.stopPropagation();
+      this.restoreFocusAndSelection();
+      this.isHeadingDropdownOpen = false;
+      this.isColorDropdownOpen = false;
+      this.isListDropdownOpen = !this.isListDropdownOpen;
+    }}
+              aria-expanded=${this.isListDropdownOpen ? "true" : "false"}
+              aria-label="List options"
+              variant="secondary"
+              size="small"
+              custom-class=${this.toolbarButton({
+      active: this.activeFormats.unorderedList || this.activeFormats.orderedList
+    })}
+              is-icon
+            >
+              <lukso-icon
+                name="task"
+                size="small"
+                pack="vuesax"
+                variant="linear"
+              ></lukso-icon>
+            </lukso-button>
+          </lukso-tooltip>
+          <lukso-dropdown
+            id="listDropdown"
+            trigger-id=""
+            size="medium"
+            ?is-open=${this.isListDropdownOpen}
+          >
+            <lukso-dropdown-option
+              ?is-selected=${this.getActiveListType() === "none"}
+              @click=${(e) => {
+      e.stopPropagation();
+      this.restoreFocusAndSelection();
+      this.applyList("none");
+      this.isListDropdownOpen = false;
+    }}
+              size="medium"
+            >
+              No list
+            </lukso-dropdown-option>
+            <lukso-dropdown-option
+              ?is-selected=${this.getActiveListType() === "unordered"}
+              @click=${(e) => {
+      e.stopPropagation();
+      this.restoreFocusAndSelection();
+      this.applyList("unordered");
+      this.isListDropdownOpen = false;
+    }}
+              size="medium"
+            >
+              Unordered
+            </lukso-dropdown-option>
+            <lukso-dropdown-option
+              ?is-selected=${this.getActiveListType() === "ordered"}
+              @click=${(e) => {
+      e.stopPropagation();
+      this.restoreFocusAndSelection();
+      this.applyList("ordered");
+      this.isListDropdownOpen = false;
+    }}
+              size="medium"
+            >
+              Ordered
+            </lukso-dropdown-option>
+          </lukso-dropdown>
+        </div>
+
+        <!-- Link -->
+        ${this.buttonTemplate(
+      "link",
+      () => this.insertLink(),
+      "Link",
+      this.activeFormats.link
+    )}
+
+        <!-- Color -->
+        <div class=${this.styles().colorMenu()}>
+          <lukso-tooltip text="Text color" placement="top">
+            <lukso-button
+              id=${this.colorTriggerId}
+              @click=${(e) => {
+      e.stopPropagation();
+      this.restoreFocusAndSelection();
+      this.isHeadingDropdownOpen = false;
+      this.isListDropdownOpen = false;
+      if (!this.isColorDropdownOpen) {
+        const ta = this.textareaEl?.shadowRoot?.querySelector("textarea");
+        if (ta) {
+          this.savedSelection = {
+            start: ta.selectionStart ?? 0,
+            end: ta.selectionEnd ?? 0
+          };
+        }
+      }
+      this.isColorDropdownOpen = !this.isColorDropdownOpen;
+    }}
+              aria-expanded=${this.isColorDropdownOpen ? "true" : "false"}
+              aria-pressed=${this.activeFormats.color ? "true" : "false"}
+              aria-label="Text color"
+              variant="secondary"
+              size="small"
+              custom-class=${this.toolbarButton({
+      active: this.activeFormats.color
+    })}
+              is-icon
+            >
+              <div
+                class="size-4 rounded-full"
+                style="background-color: ${this.activeFormats.activeColor};"
+              ></div>
+            </lukso-button>
+          </lukso-tooltip>
+          <lukso-dropdown
+            id="colorDropdown"
+            trigger-id=""
+            size="medium"
+            max-height="300"
+            ?is-open=${this.isColorDropdownOpen}
+          >
+            <div class="grid grid-cols-8 gap-2 p-2 w-[260px]">
+              <div class="col-span-8 mb-2 flex items-center justify-between">
+                <span class="text-xs text-neutral-60">Text Color</span>
+                ${this.activeFormats.color ? x`<button
+                      class="text-xs text-neutral-60 hover:text-neutral-20 underline"
+                      @click=${(e) => {
+      e.stopPropagation();
+      this.clearColor();
+      this.isColorDropdownOpen = false;
+    }}
+                      type="button"
+                    >
+                      Clear
+                    </button>` : E}
+              </div>
+              ${this.colorSamples.map(
+      (color) => x`
+                  <button
+                    class="w-6 h-6 rounded-4 border transition-all ${this.activeFormats.activeColor === color ? "border-neutral-20 ring-2 ring-purple-51" : "border-neutral-90 hover:border-neutral-60"}"
+                    style="background-color: ${color}"
+                    title=${color}
+                    aria-pressed=${this.activeFormats.activeColor === color ? "true" : "false"}
+                    @click=${(e) => {
+        e.stopPropagation();
+        this.selectColor(color);
+        this.isColorDropdownOpen = false;
+      }}
+                  ></button>
+                `
+    )}
+            </div>
+          </lukso-dropdown>
+        </div>
+
+        <div class=${this.styles().divider()}></div>
+      </div>
+    `;
+  }
+  render() {
+    const { wrapper, header, toolbar, area, editor, preview } = this.styles({
+      isFullWidth: this.isFullWidth
+    });
+    return x`
+      <div class=${wrapper()}>
+        ${this.labelTemplate()} ${this.descriptionTemplate()}
+
+        <div class=${header()}>
+          <div class=${toolbar()}>${this.toolbarTemplate()}</div>
+          ${this.buttonTemplate(
+      "eye",
+      () => this.togglePreview(),
+      "Toggle preview",
+      this.isPreview
+    )}
+        </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>
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  n({ type: String })
+], LuksoMarkdownEditor.prototype, "value", 2);
+__decorateClass([
+  n({ type: String })
+], LuksoMarkdownEditor.prototype, "name", 2);
+__decorateClass([
+  n({ type: String })
+], LuksoMarkdownEditor.prototype, "label", 2);
+__decorateClass([
+  n({ type: String })
+], LuksoMarkdownEditor.prototype, "description", 2);
+__decorateClass([
+  n({ type: String })
+], LuksoMarkdownEditor.prototype, "error", 2);
+__decorateClass([
+  n({ type: Boolean, attribute: "is-full-width" })
+], LuksoMarkdownEditor.prototype, "isFullWidth", 2);
+__decorateClass([
+  n({ type: Boolean, attribute: "is-readonly" })
+], LuksoMarkdownEditor.prototype, "isReadonly", 2);
+__decorateClass([
+  n({ type: Boolean, attribute: "is-disabled" })
+], LuksoMarkdownEditor.prototype, "isDisabled", 2);
+__decorateClass([
+  n({ type: Boolean, attribute: "is-non-resizable" })
+], LuksoMarkdownEditor.prototype, "isNonResizable", 2);
+__decorateClass([
+  n({ type: Boolean })
+], LuksoMarkdownEditor.prototype, "autofocus", 2);
+__decorateClass([
+  n({ type: String, reflect: true })
+], LuksoMarkdownEditor.prototype, "size", 2);
+__decorateClass([
+  n({ type: Boolean, attribute: "is-preview", reflect: true })
+], LuksoMarkdownEditor.prototype, "isPreview", 2);
+__decorateClass([
+  n({ type: Number })
+], LuksoMarkdownEditor.prototype, "rows", 2);
+__decorateClass([
+  n({ type: String })
+], LuksoMarkdownEditor.prototype, "placeholder", 2);
+__decorateClass([
+  r()
+], LuksoMarkdownEditor.prototype, "savedSelectionForPreview", 2);
+__decorateClass([
+  r()
+], LuksoMarkdownEditor.prototype, "isHeadingDropdownOpen", 2);
+__decorateClass([
+  r()
+], LuksoMarkdownEditor.prototype, "isColorDropdownOpen", 2);
+__decorateClass([
+  r()
+], LuksoMarkdownEditor.prototype, "isListDropdownOpen", 2);
+__decorateClass([
+  r()
+], LuksoMarkdownEditor.prototype, "currentSelection", 2);
+__decorateClass([
+  r()
+], LuksoMarkdownEditor.prototype, "savedSelection", 2);
+__decorateClass([
+  r()
+], LuksoMarkdownEditor.prototype, "activeFormats", 2);
+__decorateClass([
+  e("lukso-textarea")
+], LuksoMarkdownEditor.prototype, "textareaEl", 2);
+LuksoMarkdownEditor = __decorateClass([
+  t("lukso-markdown-editor")
+], LuksoMarkdownEditor);
+
+export { LuksoMarkdownEditor };