@duskmoon-dev/el-markdown-input 0.11.0 → 0.11.1

package/dist/cjs/index.js

@@ -37,11 +37,181 @@ var __export = (target, all) => {
 };
 var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
 
+// src/sanitize-schema.ts
+function deepMergeSchemas(base, extension) {
+  const result = { ...base };
+  if (extension.attributes) {
+    result.attributes = { ...base.attributes };
+    for (const [tag, attrs] of Object.entries(extension.attributes)) {
+      const existing = result.attributes[tag];
+      if (Array.isArray(existing)) {
+        result.attributes[tag] = [...existing, ...attrs];
+      } else {
+        result.attributes[tag] = attrs;
+      }
+    }
+  }
+  if (extension.tagNames) {
+    result.tagNames = [...base.tagNames ?? [], ...extension.tagNames];
+  }
+  return result;
+}
+var import_rehype_sanitize, sanitizeSchema;
+var init_sanitize_schema = __esm(() => {
+  import_rehype_sanitize = require("rehype-sanitize");
+  sanitizeSchema = deepMergeSchemas(import_rehype_sanitize.defaultSchema, {
+    attributes: {
+      span: ["className", "style"],
+      code: ["className"],
+      input: ["type", "checked", "disabled"],
+      math: ["xmlns", "display"],
+      annotation: ["encoding"],
+      mi: ["mathvariant"],
+      mo: ["stretchy", "lspace", "rspace"],
+      mpadded: ["height", "depth", "width", "lspace", "voffset"],
+      mspace: ["height", "depth", "width"],
+      mstyle: ["mathsize", "mathcolor", "mathbackground", "displaystyle"]
+    },
+    tagNames: [
+      "math",
+      "semantics",
+      "mrow",
+      "mi",
+      "mo",
+      "mn",
+      "msup",
+      "msub",
+      "mfrac",
+      "mover",
+      "munder",
+      "msqrt",
+      "mtable",
+      "mtr",
+      "mtd",
+      "annotation",
+      "mtext",
+      "mpadded",
+      "mspace",
+      "merror",
+      "mstyle",
+      "ms",
+      "mphantom",
+      "mmultiscripts",
+      "mprescripts"
+    ]
+  });
+});
+
+// src/render.ts
+var exports_render = {};
+__export(exports_render, {
+  renderMermaidBlocks: () => renderMermaidBlocks,
+  renderMarkdown: () => renderMarkdown
+});
+async function buildProcessor() {
+  const [
+    { unified },
+    { default: remarkParse },
+    { default: remarkGfm },
+    { default: remarkMath },
+    { default: remarkRehype },
+    { default: rehypeKatex },
+    { default: rehypePrismPlus },
+    { default: rehypeSanitize },
+    { default: rehypeStringify }
+  ] = await Promise.all([
+    import("unified"),
+    import("remark-parse"),
+    import("remark-gfm"),
+    import("remark-math"),
+    import("remark-rehype"),
+    import("rehype-katex"),
+    import("rehype-prism-plus"),
+    import("rehype-sanitize"),
+    import("rehype-stringify")
+  ]);
+  return unified().use(remarkParse).use(remarkGfm).use(remarkMath).use(remarkRehype, { allowDangerousHtml: false }).use(rehypeKatex).use(rehypePrismPlus, { ignoreMissing: true }).use(rehypeSanitize, sanitizeSchema).use(rehypeStringify);
+}
+function getProcessor() {
+  if (!processorPromise) {
+    processorPromise = buildProcessor().catch((err) => {
+      processorPromise = null;
+      throw err;
+    });
+  }
+  return processorPromise;
+}
+async function renderMarkdown(source) {
+  const proc = await getProcessor();
+  const file = await proc.process(source);
+  return String(file);
+}
+function getCurrentTheme() {
+  if (typeof document === "undefined")
+    return "default";
+  return document.documentElement.getAttribute("data-theme") ?? "default";
+}
+async function renderMermaidBlocks(container, mermaidSrc) {
+  const blocks = container.querySelectorAll("pre > code.language-mermaid");
+  if (blocks.length === 0)
+    return;
+  if (mermaidSrc !== undefined && !/^https:\/\//i.test(mermaidSrc)) {
+    console.warn(`[el-dm-markdown-input] mermaid-src "${mermaidSrc}" rejected — only https: URLs are allowed. Falling back to bundled mermaid.`);
+    mermaidSrc = undefined;
+  }
+  let mermaidModule;
+  try {
+    mermaidModule = mermaidSrc ? await import(mermaidSrc) : await import("mermaid");
+  } catch (err) {
+    console.error("[el-dm-markdown-input] Failed to load mermaid: %o", err);
+    blocks.forEach((block) => block.parentElement?.classList.add("mermaid-error"));
+    return;
+  }
+  const mermaid = mermaidModule.default ?? mermaidModule;
+  mermaid.initialize({
+    startOnLoad: false,
+    theme: getCurrentTheme() === "moonlight" ? "dark" : "default",
+    fontFamily: "inherit"
+  });
+  for (const [i, block] of [...blocks].entries()) {
+    const pre = block.parentElement;
+    if (!pre)
+      continue;
+    const id = `mermaid-${++mermaidIdCounter}-${i}`;
+    try {
+      const { svg } = await mermaid.render(id, block.textContent ?? "");
+      const wrapper = document.createElement("div");
+      wrapper.className = "mermaid-diagram";
+      wrapper.innerHTML = svg;
+      pre.replaceWith(wrapper);
+    } catch (err) {
+      console.error(`[el-dm-markdown-input] mermaid.render failed for block %s: %o
+Source: %s`, id, err, block.textContent?.slice(0, 200));
+      pre.classList.add("mermaid-error");
+    }
+  }
+}
+var processorPromise = null, mermaidIdCounter = 0;
+var init_render = __esm(() => {
+  init_sanitize_schema();
+});
+
+// src/index.ts
+var exports_src = {};
+__export(exports_src, {
+  register: () => register,
+  MarkdownInputHook: () => MarkdownInputHook,
+  ElDmMarkdownInput: () => ElDmMarkdownInput
+});
+module.exports = __toCommonJS(exports_src);
+
+// src/element.ts
+var import_el_base2 = require("@duskmoon-dev/el-base");
+var import_markdown_body = require("@duskmoon-dev/core/components/markdown-body");
+
 // src/css.ts
-var import_el_base, elementStyles;
-var init_css = __esm(() => {
-  import_el_base = require("@duskmoon-dev/el-base");
-  elementStyles = import_el_base.css`
+var import_el_base = require("@duskmoon-dev/el-base");
+var elementStyles = import_el_base.css`
   /* ── Custom property defaults with design-system fallbacks ─────────── */
   :host {
     --md-border: var(--color-outline, #d0d7de);
@@ -90,6 +260,7 @@ var init_css = __esm(() => {
     background: var(--md-bg);
     color: var(--md-text);
     overflow: hidden;
+    height: inherit;
   }
 
   .editor:focus-within {
@@ -139,74 +310,62 @@ var init_css = __esm(() => {
     border-radius: 3px;
   }
 
-  /* ── Write area (backdrop + textarea overlay) ───────────────────────── */
+  /* ── Write area (render-layer + textarea overlay) ──────────────────── */
+  /*
+   * CodeMirror-style render model: .render-layer sits in normal flow and
+   * drives the container height; the textarea is absolutely positioned on
+   * top. No scroll sync required — both layers always share the same size.
+   */
   .write-area {
     position: relative;
     min-height: 12rem;
-    flex: 1;
+    flex: 1 1 auto;
+  }
+
+  .write-area[hidden] {
+    display: none;
   }
 
   /*
-   * Backdrop: renders syntax-highlighted HTML behind the transparent textarea.
-   * Must share IDENTICAL font metrics with the textarea to stay pixel-aligned.
+   * Render layer: highlighted HTML in normal flow. Drives container height.
+   * pointer-events: none lets clicks pass through to the textarea underneath.
+   * Font metrics MUST match the textarea exactly for pixel-aligned overlay.
    */
-  .backdrop {
-    position: absolute;
-    inset: 0;
+  .render-layer {
+    position: relative;
+    z-index: 1;
     pointer-events: none;
-    /*
-     * Use overflow: auto (not overflow: hidden) so the backdrop reserves
-     * the same scrollbar gutter as the textarea when content overflows.
-     * Without this, the textarea scrollbar narrows its text area but the
-     * backdrop stays full-width — lines wrap at different points — causing
-     * the cursor to appear misaligned with the highlighted text.
-     */
-    overflow: auto;
-    scrollbar-width: none; /* Firefox */
-    border: none;
-    background: transparent;
-    /*
-     * Do NOT put white-space: pre-wrap here. The backdrop div contains a
-     * backdrop-content child, and the HTML template has whitespace text
-     * nodes (newline + indent) between them. With pre-wrap on the parent
-     * those text nodes render as a visible leading newline, shifting all
-     * content down by one line and misaligning the cursor vertically.
-     * pre-wrap lives on .backdrop-content instead.
-     */
-
+    min-height: 12rem;
     font-family: ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
     font-size: 0.875rem;
     line-height: 1.6;
     padding: 0.75rem;
-    color: var(--md-text);
-  }
-
-  .backdrop::-webkit-scrollbar {
-    display: none; /* Chrome / Safari */
-  }
-
-  .backdrop-content {
-    display: block;
     white-space: pre-wrap;
     word-wrap: break-word;
     overflow-wrap: break-word;
-    /* Prism token colours are injected via a separate <style id="prism-theme"> */
+    color: var(--md-text);
   }
 
+  /*
+   * Textarea: absolute overlay on top of the render layer. Transparent text
+   * lets highlighted content show through; caret-color keeps cursor visible.
+   * overflow: hidden — the render layer drives height, not the textarea.
+   */
   textarea {
-    position: relative;
+    position: absolute;
+    inset: 0;
+    z-index: 2;
     display: block;
     width: 100%;
-    min-height: 12rem;
+    height: 100%;
     border: none;
     outline: none;
-    resize: vertical;
+    resize: none;
     background: transparent;
     color: transparent;
     caret-color: var(--md-text);
     box-sizing: border-box;
-
-    /* MUST match .backdrop exactly */
+    overflow: hidden;
     font-family: ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
     font-size: 0.875rem;
     line-height: 1.6;
@@ -229,11 +388,100 @@ var init_css = __esm(() => {
   .preview-body {
     padding: 0.75rem;
     min-height: 12rem;
+    height: stretch;
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
     overflow-y: auto;
     color: var(--md-text);
     /* .markdown-body styles come from @duskmoon-dev/core via the element */
   }
 
+  .preview-body[hidden] {
+    display: none;
+  }
+
+  /* ── Preview skeleton (shown while render pipeline loads) ──────────── */
+  .preview-skeleton {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    padding: 0.5rem 0;
+  }
+
+  .skeleton-line {
+    height: 0.875rem;
+    background: linear-gradient(
+      90deg,
+      var(--md-bg-toolbar) 25%,
+      var(--md-bg-hover) 50%,
+      var(--md-bg-toolbar) 75%
+    );
+    background-size: 200% 100%;
+    border-radius: 4px;
+    animation: skeleton-shimmer 1.5s ease-in-out infinite;
+  }
+
+  @keyframes skeleton-shimmer {
+    0% {
+      background-position: 200% 0;
+    }
+    100% {
+      background-position: -200% 0;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .skeleton-line {
+      animation: none;
+      background: var(--md-bg-hover);
+    }
+  }
+
+  /* ── Mermaid diagram blocks ────────────────────────────────────────── */
+  .mermaid-diagram {
+    display: flex;
+    justify-content: center;
+    margin: 1rem 0;
+    overflow-x: auto;
+  }
+
+  .mermaid-error {
+    border-left: 3px solid var(--md-color-error);
+    opacity: 0.7;
+    position: relative;
+  }
+
+  .mermaid-error::before {
+    content: 'Mermaid render failed';
+    display: block;
+    font-size: 0.75rem;
+    color: var(--md-color-error);
+    font-family: inherit;
+    margin-bottom: 0.25rem;
+    padding-left: 0.5rem;
+  }
+
+  /* ── Render error fallback ──────────────────────────────────────────── */
+  .render-error-fallback {
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    font-size: 0.875rem;
+    opacity: 0.8;
+    border-left: 3px solid var(--md-color-error);
+    padding-left: 0.75rem;
+    color: var(--md-text-muted);
+  }
+
+  .render-error-fallback::before {
+    content: 'Preview render failed — showing raw markdown';
+    display: block;
+    font-size: 0.75rem;
+    color: var(--md-color-error);
+    font-family: inherit;
+    margin-bottom: 0.5rem;
+  }
+
   /* ── Status bar ─────────────────────────────────────────────────────── */
   .status-bar {
     display: flex;
@@ -269,6 +517,12 @@ var init_css = __esm(() => {
     background: var(--md-bg-hover);
   }
 
+  .attach-btn:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
   .attach-btn:focus-visible {
     outline: 2px solid var(--md-accent);
     outline-offset: 1px;
@@ -403,14 +657,38 @@ var init_css = __esm(() => {
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+
+  /* ── Reduced motion: disable all transitions and animations ──────── */
+  @media (prefers-reduced-motion: reduce) {
+    .tab-btn,
+    .attach-btn,
+    .ac-item,
+    .upload-bar {
+      transition: none;
+    }
+  }
 `;
-});
 
 // src/highlight.ts
+var PRISM_BASE = "https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0";
+var PRISM_CORE_URL = `${PRISM_BASE}/prism.min.js`;
+var PRISM_AUTOLOADER_URL = `${PRISM_BASE}/plugins/autoloader/prism-autoloader.min.js`;
+var PRISM_SRI = {
+  [PRISM_CORE_URL]: "sha512-7Z9J3l1+EYfeaPKcGXu3MS/7T+w19WtKQY/n+xzmw4hZhJ9tyYmcUS+4QqAlzhicE5LAfMQSF3iFTK9bQdTxXg==",
+  [PRISM_AUTOLOADER_URL]: "sha512-SkmBfuA2hqjzEVpmnMt/LINrjop3GKWqsuLSSB3e7iBmYK7JuWw4ldmmxwD9mdm2IRTTi0OxSAfEGvgEi0i2Kw=="
+};
+var PRISM_THEME_DARK_URL = `${PRISM_BASE}/themes/prism-tomorrow.min.css`;
+var PRISM_THEME_LIGHT_URL = `${PRISM_BASE}/themes/prism-coy.min.css`;
+var _prismReady = null;
 function _loadScript(src) {
   return new Promise((resolve) => {
     const script = document.createElement("script");
     script.src = src;
+    const integrity = PRISM_SRI[src];
+    if (integrity) {
+      script.integrity = integrity;
+      script.crossOrigin = "anonymous";
+    }
     script.onload = () => resolve();
     script.onerror = () => resolve();
     document.head.appendChild(script);
@@ -422,19 +700,22 @@ function ensurePrism() {
   if (_prismReady)
     return _prismReady;
   _prismReady = _loadScript(PRISM_CORE_URL).then(() => {
-    if (!window.Prism)
+    if (!window.Prism) {
+      _prismReady = null;
       return;
+    }
     window.Prism.manual = true;
     return _loadScript(PRISM_AUTOLOADER_URL).then(() => {
       if (window.Prism?.plugins?.autoloader) {
         window.Prism.plugins.autoloader.languages_path = `${PRISM_BASE}/components/`;
       }
+      return _loadScript(`${PRISM_BASE}/components/prism-markdown.min.js`);
     });
   });
   return _prismReady;
 }
 function escapeHtml(text) {
-  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
 function highlightMarkdown(text) {
   const escaped = escapeHtml(text);
@@ -456,20 +737,35 @@ function applyPrismTheme(shadowRoot, dark) {
     styleEl.id = "prism-theme";
     shadowRoot.appendChild(styleEl);
   }
-  const expected = `@import url("${themeUrl}");`;
+  const previewOverrides = `
+.preview-body pre[class*="language-"] {
+  background: transparent;
+  margin: 0;
+  padding: 0;
+  overflow: visible;
+  position: static;
+}
+.preview-body pre[class*="language-"] > code {
+  background: transparent;
+  border: none;
+  box-shadow: none;
+  padding: 0;
+  background-image: none;
+  display: block;
+  overflow: auto;
+  max-height: none;
+  height: auto;
+}`;
+  const expected = `@import url("${themeUrl}");${previewOverrides}`;
   if (styleEl.textContent !== expected) {
     styleEl.textContent = expected;
   }
 }
-var PRISM_BASE = "https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0", PRISM_CORE_URL, PRISM_AUTOLOADER_URL, PRISM_THEME_DARK_URL, PRISM_THEME_LIGHT_URL, _prismReady = null;
-var init_highlight = __esm(() => {
-  PRISM_CORE_URL = `${PRISM_BASE}/prism.min.js`;
-  PRISM_AUTOLOADER_URL = `${PRISM_BASE}/plugins/autoloader/prism-autoloader.min.js`;
-  PRISM_THEME_DARK_URL = `${PRISM_BASE}/themes/prism-tomorrow.min.css`;
-  PRISM_THEME_LIGHT_URL = `${PRISM_BASE}/themes/prism-coy.min.css`;
-});
 
 // src/upload.ts
+var ACCEPTED_MIME_PREFIXES = ["image/"];
+var ACCEPTED_MIME_EXACT = ["application/pdf"];
+var ACCEPTED_EXTENSIONS = [".zip", ".txt", ".csv", ".json", ".md"];
 function isAcceptedType(file) {
   const type = file.type.toLowerCase();
   if (ACCEPTED_MIME_PREFIXES.some((p) => type.startsWith(p)))
@@ -482,12 +778,19 @@ function isAcceptedType(file) {
   return false;
 }
 function fileToMarkdown(file, url) {
+  const isSafeUrl = /^https:\/\//i.test(url) || /^\//.test(url) || /^\.\.?\//.test(url);
+  const safeUrl = isSafeUrl ? url.replace(/\(/g, "%28").replace(/\)/g, "%29") : "#unsafe-url";
+  const safeName = file.name.replace(/[[\]]/g, "\\$&");
   if (file.type.startsWith("image/")) {
-    return `![${file.name}](${url})`;
+    return `![${safeName}](${safeUrl})`;
   }
-  return `[${file.name}](${url})`;
+  return `[${safeName}](${safeUrl})`;
 }
 function uploadFile(file, uploadUrl, onProgress) {
+  const isSafeUploadUrl = /^https:\/\//i.test(uploadUrl) || /^\//.test(uploadUrl) || /^\.\.?\//.test(uploadUrl);
+  if (!isSafeUploadUrl) {
+    return Promise.reject(new Error(`[el-dm-markdown-input] upload-url "${uploadUrl}" rejected — only https: and relative URLs are allowed.`));
+  }
   return new Promise((resolve, reject) => {
     const xhr = new XMLHttpRequest;
     const body = new FormData;
@@ -504,27 +807,21 @@ function uploadFile(file, uploadUrl, onProgress) {
           if (data.url) {
             resolve(data.url);
           } else {
-            reject("Upload response missing url field");
+            reject(new Error("Upload response missing url field"));
           }
         } catch {
-          reject("Upload response is not valid JSON");
+          reject(new Error("Upload response is not valid JSON"));
         }
       } else {
-        reject(`Upload failed with status ${xhr.status}`);
+        reject(new Error(`Upload failed with status ${xhr.status}`));
       }
     });
-    xhr.addEventListener("error", () => reject("Network error during upload"));
-    xhr.addEventListener("abort", () => reject("Upload aborted"));
+    xhr.addEventListener("error", () => reject(new Error("Network error during upload")));
+    xhr.addEventListener("abort", () => reject(new Error("Upload aborted")));
     xhr.open("POST", uploadUrl);
     xhr.send(body);
   });
 }
-var ACCEPTED_MIME_PREFIXES, ACCEPTED_MIME_EXACT, ACCEPTED_EXTENSIONS;
-var init_upload = __esm(() => {
-  ACCEPTED_MIME_PREFIXES = ["image/"];
-  ACCEPTED_MIME_EXACT = ["application/pdf"];
-  ACCEPTED_EXTENSIONS = [".zip", ".txt", ".csv", ".json", ".md"];
-});
 
 // src/autocomplete.ts
 function detectTrigger(value, cursorPos) {
@@ -535,13 +832,13 @@ function detectTrigger(value, cursorPos) {
       const query = value.slice(i + 1, cursorPos);
       if (!/\s/.test(query)) {
         const before = i > 0 ? value[i - 1] : null;
-        if (before === null || /[\s\n]/.test(before)) {
+        if (before === null || /\s/.test(before)) {
           return { trigger: ch, query, triggerPos: i };
         }
       }
       return null;
     }
-    if (/[\s\n]/.test(ch)) {
+    if (/\s/.test(ch)) {
       return null;
     }
     i--;
@@ -552,8 +849,11 @@ function confirmSuggestion(value, triggerPos, cursorPos, trigger, replacement) {
   const before = value.slice(0, triggerPos);
   const after = value.slice(cursorPos);
   const inserted = `${trigger}${replacement}`;
-  const newValue = before + inserted + after;
-  const newCursorPos = triggerPos + inserted.length;
+  const needsSpace = after.length === 0 || after[0] !== " " && after[0] !== `
+`;
+  const suffix = needsSpace ? " " : "";
+  const newValue = before + inserted + suffix + after;
+  const newCursorPos = triggerPos + inserted.length + suffix.length;
   return { newValue, newCursorPos };
 }
 function renderDropdown(suggestions, selectedIndex) {
@@ -569,7 +869,66 @@ function renderDropdown(suggestions, selectedIndex) {
   return items;
 }
 function escapeHtml2(text) {
-  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+
+// src/pairs.ts
+function handlePairKey(ta, key) {
+  if (key !== "`")
+    return false;
+  const start = ta.selectionStart;
+  const end = ta.selectionEnd;
+  const value = ta.value;
+  if (start !== end) {
+    const selected = value.slice(start, end);
+    ta.value = value.slice(0, start) + "`" + selected + "`" + value.slice(end);
+    ta.setSelectionRange(start + 1, end + 1);
+    return true;
+  }
+  if (start >= 2 && value.slice(start - 2, start) === "``") {
+    ta.value = value.slice(0, start) + "`\n\n```" + value.slice(end);
+    ta.setSelectionRange(start + 2, start + 2);
+    return true;
+  }
+  ta.value = value.slice(0, start) + "``" + value.slice(end);
+  ta.setSelectionRange(start + 1, start + 1);
+  return true;
+}
+function handleEnterKey(ta, e) {
+  if (e.key !== "Enter")
+    return false;
+  const pos = ta.selectionStart;
+  const value = ta.value;
+  if (ta.selectionEnd !== pos)
+    return false;
+  const lineStart = value.lastIndexOf(`
+`, pos - 1) + 1;
+  const currentLine = value.slice(lineStart, pos);
+  const result = getLineContinuation(currentLine);
+  if (result === null)
+    return false;
+  e.preventDefault();
+  if (result.eraseCurrentLine) {
+    const newValue = value.slice(0, lineStart) + value.slice(pos);
+    ta.value = newValue;
+    ta.setSelectionRange(lineStart, lineStart);
+  } else {
+    const newValue = value.slice(0, pos) + `
+` + result.prefix + value.slice(ta.selectionEnd);
+    const newPos = pos + 1 + result.prefix.length;
+    ta.value = newValue;
+    ta.setSelectionRange(newPos, newPos);
+  }
+  return true;
+}
+function getLineContinuation(line) {
+  if (line === "* ")
+    return { eraseCurrentLine: true };
+  if (/^\* ./.test(line))
+    return { prefix: "* ", eraseCurrentLine: false };
+  if (/^#{1,6} ./.test(line))
+    return { prefix: "", eraseCurrentLine: false };
+  return null;
 }
 
 // src/status-bar.ts
@@ -599,155 +958,156 @@ function renderStatusCount(wordCount, charCount, maxWords) {
 }
 
 // src/element.ts
-var exports_element = {};
-__export(exports_element, {
-  ElDmMarkdownInput: () => ElDmMarkdownInput
-});
-function sanitizeUrl(url) {
-  const trimmed = url.trim();
-  if (!/^[a-z][a-z\d+\-.]*:/i.test(trimmed))
-    return trimmed;
-  if (/^https?:/i.test(trimmed))
-    return trimmed;
-  return "#";
-}
-function escapeHtmlStr(s) {
-  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
-}
-var import_el_base2, import_markdown_body, import_el_base3, coreMarkdownStyles, markdownBodySheet, ElDmMarkdownInput;
-var init_element = __esm(() => {
-  init_css();
-  init_highlight();
-  init_upload();
-  import_el_base2 = require("@duskmoon-dev/el-base");
-  import_markdown_body = require("@duskmoon-dev/core/components/markdown-body");
-  import_el_base3 = require("@duskmoon-dev/el-base");
-  coreMarkdownStyles = import_markdown_body.css.replace(/@layer\s+components\s*\{/, "").replace(/\}\s*$/, "");
-  markdownBodySheet = import_el_base3.css`
+var import_el_base3 = require("@duskmoon-dev/el-base");
+var coreMarkdownStyles = import_markdown_body.css.replace(/@layer\s+components\s*\{/, "").replace(/\}\s*$/, "");
+var markdownBodySheet = import_el_base3.css`
   ${coreMarkdownStyles}
 `;
-  ElDmMarkdownInput = class ElDmMarkdownInput extends import_el_base2.BaseElement {
-    static formAssociated = true;
-    static properties = {
-      name: { type: String, reflect: true, default: "" },
-      value: { type: String, default: "" },
-      placeholder: { type: String, reflect: true, default: "Write markdown…" },
-      disabled: { type: Boolean, reflect: true },
-      readonly: { type: Boolean, reflect: true },
-      uploadUrl: { type: String, reflect: true, attribute: "upload-url" },
-      maxWords: { type: Number, reflect: true, attribute: "max-words" },
-      dark: { type: Boolean, reflect: true }
-    };
-    #internals;
-    #initialized = false;
-    #activeTab = "write";
-    #highlightTimer = null;
-    #statusTimer = null;
-    #textarea = null;
-    #backdrop = null;
-    #backdropContent = null;
-    #writeArea = null;
-    #previewBody = null;
-    #statusCount = null;
-    #acDropdown = null;
-    #uploadList = null;
-    #fileInput = null;
-    #resizeObserver = null;
-    #acSuggestions = [];
-    #acSelectedIndex = -1;
-    #acTriggerPos = -1;
-    #acTrigger = null;
-    #uploadIdCounter = 0;
-    constructor() {
-      super();
-      this.#internals = this.attachInternals();
-      this.attachStyles([elementStyles, markdownBodySheet]);
-    }
-    connectedCallback() {
-      super.connectedCallback();
-      const initial = this.value ?? "";
-      if (initial && this.#textarea) {
-        this.#textarea.value = initial;
+
+class ElDmMarkdownInput extends import_el_base2.BaseElement {
+  static formAssociated = true;
+  static properties = {
+    name: { type: String, reflect: true, default: "" },
+    value: { type: String, default: "" },
+    placeholder: { type: String, reflect: true, default: "Write markdown…" },
+    disabled: { type: Boolean, reflect: true },
+    readonly: { type: Boolean, reflect: true },
+    required: { type: Boolean, reflect: true },
+    uploadUrl: { type: String, reflect: true, attribute: "upload-url" },
+    maxWords: { type: Number, reflect: true, attribute: "max-words" },
+    dark: { type: Boolean, reflect: true },
+    livePreview: { type: Boolean, reflect: true, attribute: "live-preview" },
+    debounce: { type: Number, reflect: true, default: 300 },
+    katexCssUrl: { type: String, reflect: true, attribute: "katex-css-url" },
+    mermaidSrc: { type: String, reflect: true, attribute: "mermaid-src" }
+  };
+  #internals;
+  #initialized = false;
+  #activeTab = "write";
+  #highlightTimer = null;
+  #statusTimer = null;
+  #textarea = null;
+  #renderLayer = null;
+  #writeArea = null;
+  #previewBody = null;
+  #statusCount = null;
+  #acDropdown = null;
+  #uploadList = null;
+  #fileInput = null;
+  #acSuggestions = [];
+  #acSelectedIndex = -1;
+  #acTriggerPos = -1;
+  #acTrigger = null;
+  #acGeneration = 0;
+  #prevDark = false;
+  #renderFn = null;
+  #mermaidFn = null;
+  #livePreviewTimer = null;
+  #renderAbortController = null;
+  #lastRenderedSource = null;
+  #katexCssInjected = false;
+  #uploadIdCounter = 0;
+  constructor() {
+    super();
+    this.#internals = this.attachInternals();
+    this.attachStyles([elementStyles, markdownBodySheet]);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+  }
+  disconnectedCallback() {
+    this.#renderAbortController?.abort();
+    if (this.#livePreviewTimer !== null)
+      clearTimeout(this.#livePreviewTimer);
+    super.disconnectedCallback();
+  }
+  update() {
+    if (!this.#initialized) {
+      super.update();
+      this.#initialized = true;
+      this.#cacheDOMRefs();
+      this.#attachEventHandlers();
+      this.#initHighlight();
+      const initVal = this.value ?? "";
+      if (this.#textarea) {
+        this.#textarea.value = initVal;
         this.#syncFormValue();
+        if (initVal)
+          this.#scheduleHighlight();
       }
+      this.#updateStatusBarNow();
+      return;
     }
-    disconnectedCallback() {
-      this.#resizeObserver?.disconnect();
-      super.disconnectedCallback();
+    this.#patchDynamicRegions();
+  }
+  #patchDynamicRegions() {
+    const ta = this.#textarea;
+    if (!ta)
+      return;
+    const placeholder = this.placeholder ?? "Write markdown…";
+    ta.placeholder = placeholder;
+    ta.disabled = !!this.disabled;
+    ta.readOnly = !!this.readonly;
+    const attachBtn = this.shadowRoot.querySelector(".attach-btn");
+    if (attachBtn) {
+      attachBtn.disabled = ta.disabled || ta.readOnly;
     }
-    update() {
-      if (!this.#initialized) {
-        super.update();
-        this.#initialized = true;
-        this.#cacheDOMRefs();
-        this.#attachEventHandlers();
-        this.#initHighlight();
-        this.#updateStatusBarNow();
-        const initVal = this.value ?? "";
-        if (initVal && this.#textarea) {
-          this.#textarea.value = initVal;
-          this.#syncFormValue();
-          this.#scheduleHighlight();
-        }
-        return;
+    const propVal = this.value ?? "";
+    if (propVal !== ta.value) {
+      ta.value = propVal;
+      this.#syncFormValue();
+      this.#scheduleHighlight();
+      if (this.#activeTab === "preview" && this.#previewBody) {
+        this.#renderPreview(propVal);
       }
-      this.#patchDynamicRegions();
     }
-    #patchDynamicRegions() {
-      const ta = this.#textarea;
-      if (!ta)
-        return;
-      const placeholder = this.placeholder ?? "Write markdown…";
-      ta.placeholder = placeholder;
-      ta.disabled = !!this.disabled;
-      ta.readOnly = !!this.readonly;
-      const attachBtn = this.shadowRoot.querySelector(".attach-btn");
-      if (attachBtn) {
-        attachBtn.disabled = ta.disabled || ta.readOnly;
+    const dark = !!this.dark;
+    applyPrismTheme(this.shadowRoot, dark);
+    if (dark !== this.#prevDark) {
+      this.#prevDark = dark;
+      if (this.#activeTab === "preview" && this.#previewBody) {
+        this.#lastRenderedSource = null;
+        this.#renderPreview(ta.value);
       }
-      const propVal = this.value ?? "";
-      if (propVal !== ta.value) {
-        ta.value = propVal;
-        this.#syncFormValue();
-        this.#scheduleHighlight();
-      }
-      const dark = !!this.dark;
-      applyPrismTheme(this.shadowRoot, dark);
-      this.#updateStatusBarNow();
     }
-    render() {
-      const ph = this.placeholder ?? "Write markdown…";
-      const disabled = !!this.disabled;
-      const readonly = !!this.readonly;
-      return `
+    this.#updateStatusBarNow();
+  }
+  render() {
+    const ph = this.placeholder ?? "Write markdown…";
+    const disabled = !!this.disabled;
+    const readonly = !!this.readonly;
+    return `
       <div class="editor">
         <div class="toolbar" role="tablist" aria-label="Editor mode">
           <button
             class="tab-btn"
+            id="tab-write"
             data-tab="write"
             role="tab"
             aria-selected="true"
             aria-controls="write-panel"
+            tabindex="0"
           >Write</button>
           <button
             class="tab-btn"
+            id="tab-preview"
             data-tab="preview"
             role="tab"
             aria-selected="false"
             aria-controls="preview-panel"
+            tabindex="-1"
           >Preview</button>
         </div>
 
-        <div class="write-area" id="write-panel" role="tabpanel" aria-label="Markdown editor">
-          <div class="backdrop" aria-hidden="true">
-            <div class="backdrop-content"></div>
-          </div>
+        <div class="write-area" id="write-panel" role="tabpanel" aria-labelledby="tab-write">
+          <div class="render-layer" aria-hidden="true"></div>
           <textarea
             aria-label="Markdown editor"
             aria-haspopup="listbox"
+            aria-expanded="false"
             aria-autocomplete="list"
             aria-controls="ac-dropdown"
-            placeholder="${ph}"
+            placeholder="${escapeHtmlStr(ph)}"
             ${disabled ? "disabled" : ""}
             ${readonly ? "readonly" : ""}
             spellcheck="false"
@@ -761,7 +1121,7 @@ var init_element = __esm(() => {
           class="preview-body markdown-body"
           id="preview-panel"
           role="tabpanel"
-          aria-label="Markdown preview"
+          aria-labelledby="tab-preview"
           hidden
         ></div>
 
@@ -784,410 +1144,493 @@ var init_element = __esm(() => {
       </div>
       <ul id="ac-dropdown" class="ac-dropdown" role="listbox" aria-label="Suggestions" hidden></ul>
     `;
-    }
-    #cacheDOMRefs() {
-      this.#textarea = this.shadowRoot.querySelector("textarea");
-      this.#backdrop = this.shadowRoot.querySelector(".backdrop");
-      this.#backdropContent = this.shadowRoot.querySelector(".backdrop-content");
-      this.#writeArea = this.shadowRoot.querySelector(".write-area");
-      this.#previewBody = this.shadowRoot.querySelector(".preview-body");
-      this.#statusCount = this.shadowRoot.querySelector(".status-bar-count");
-      this.#acDropdown = this.shadowRoot.querySelector(".ac-dropdown");
-      this.#uploadList = this.shadowRoot.querySelector(".upload-list");
-      this.#fileInput = this.shadowRoot.querySelector(".file-input");
-    }
-    #attachEventHandlers() {
-      const ta = this.#textarea;
-      if (!ta)
+  }
+  #cacheDOMRefs() {
+    this.#textarea = this.shadowRoot.querySelector("textarea");
+    this.#renderLayer = this.shadowRoot.querySelector(".render-layer");
+    this.#writeArea = this.shadowRoot.querySelector(".write-area");
+    this.#previewBody = this.shadowRoot.querySelector(".preview-body");
+    this.#statusCount = this.shadowRoot.querySelector(".status-bar-count");
+    this.#acDropdown = this.shadowRoot.querySelector(".ac-dropdown");
+    this.#uploadList = this.shadowRoot.querySelector(".upload-list");
+    this.#fileInput = this.shadowRoot.querySelector(".file-input");
+  }
+  #attachEventHandlers() {
+    const ta = this.#textarea;
+    if (!ta)
+      return;
+    ta.addEventListener("input", () => {
+      this.#syncFormValue();
+      this.emit("change", { value: ta.value });
+      this.#scheduleHighlight();
+      this.#scheduleStatusUpdate();
+      this.#handleAutocompleteInput();
+      this.#scheduleLivePreview();
+    });
+    ta.addEventListener("blur", () => {
+      setTimeout(() => {
+        if (!this.shadowRoot?.activeElement) {
+          this.#closeDropdown();
+        }
+      }, 150);
+    });
+    ta.addEventListener("keydown", (e) => {
+      if (this.#acSuggestions.length > 0 && !this.#acDropdown?.hidden) {
+        this.#handleDropdownKeydown(e);
+        if (e.defaultPrevented)
+          return;
+      }
+      if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === "P") {
+        e.preventDefault();
+        this.#switchTab(this.#activeTab === "write" ? "preview" : "write");
+        return;
+      }
+      if (this.disabled || this.readonly) {
         return;
-      ta.addEventListener("input", () => {
+      }
+      if (!e.ctrlKey && !e.metaKey && !e.altKey && handlePairKey(ta, e.key)) {
+        e.preventDefault();
         this.#syncFormValue();
         this.emit("change", { value: ta.value });
         this.#scheduleHighlight();
-        this.#scheduleStatusUpdate();
-        this.#handleAutocompleteInput();
-      });
-      ta.addEventListener("scroll", () => {
-        if (this.#backdrop) {
-          this.#backdrop.scrollTop = ta.scrollTop;
-          this.#backdrop.scrollLeft = ta.scrollLeft;
-        }
-      });
-      ta.addEventListener("blur", () => {
-        setTimeout(() => {
-          if (!this.shadowRoot?.activeElement) {
-            this.#closeDropdown();
-          }
-        }, 150);
-      });
-      ta.addEventListener("keydown", (e) => {
-        if (this.#acSuggestions.length > 0 && !this.#acDropdown?.hidden) {
-          this.#handleDropdownKeydown(e);
-        }
-        if (e.ctrlKey && e.shiftKey && e.key === "P") {
-          e.preventDefault();
-          this.#switchTab(this.#activeTab === "write" ? "preview" : "write");
+        return;
+      }
+      if (e.key === "Enter" && !e.ctrlKey && !e.metaKey && !e.altKey) {
+        if (handleEnterKey(ta, e)) {
+          this.#syncFormValue();
+          this.emit("change", { value: ta.value });
+          this.#scheduleHighlight();
+          this.#scheduleStatusUpdate();
         }
-      });
-      const writeArea = this.#writeArea;
-      if (writeArea) {
-        writeArea.addEventListener("dragover", (e) => {
-          e.preventDefault();
-          writeArea.style.opacity = "0.8";
-        });
-        writeArea.addEventListener("dragleave", () => {
-          writeArea.style.opacity = "";
-        });
-        writeArea.addEventListener("drop", (e) => {
-          e.preventDefault();
-          writeArea.style.opacity = "";
-          if (this.readonly)
-            return;
-          const files = Array.from(e.dataTransfer?.files ?? []).filter(isAcceptedType);
-          files.forEach((f) => this.#startUpload(f));
-        });
       }
-      ta.addEventListener("paste", (e) => {
+    });
+    const writeArea = this.#writeArea;
+    if (writeArea) {
+      writeArea.addEventListener("dragover", (e) => {
+        if (this.disabled)
+          return;
         if (this.readonly)
           return;
-        const imageFiles = Array.from(e.clipboardData?.files ?? []).filter((f) => f.type.startsWith("image/"));
-        if (imageFiles.length > 0) {
-          e.preventDefault();
-          imageFiles.forEach((f) => this.#startUpload(f));
-        }
+        e.preventDefault();
+        writeArea.style.opacity = "0.8";
       });
-      const toolbar = this.shadowRoot.querySelector(".toolbar");
-      toolbar?.addEventListener("click", (e) => {
-        const btn = e.target.closest(".tab-btn");
-        const tab = btn?.dataset.tab;
-        if (tab)
-          this.#switchTab(tab);
+      writeArea.addEventListener("dragleave", () => {
+        writeArea.style.opacity = "";
       });
-      const attachBtn = this.shadowRoot.querySelector(".attach-btn");
-      attachBtn?.addEventListener("click", () => this.#fileInput?.click());
-      this.#fileInput?.addEventListener("change", () => {
-        const files = Array.from(this.#fileInput?.files ?? []).filter(isAcceptedType);
+      writeArea.addEventListener("drop", (e) => {
+        e.preventDefault();
+        writeArea.style.opacity = "";
+        if (this.disabled)
+          return;
+        if (this.readonly)
+          return;
+        const files = Array.from(e.dataTransfer?.files ?? []).filter(isAcceptedType);
         files.forEach((f) => this.#startUpload(f));
-        if (this.#fileInput)
-          this.#fileInput.value = "";
-      });
-      this.#acDropdown?.addEventListener("click", (e) => {
-        const item = e.target.closest("[data-ac-index]");
-        if (item) {
-          const idx = parseInt(item.dataset.acIndex ?? "-1", 10);
-          if (idx >= 0) {
-            this.#acSelectedIndex = idx;
-            this.#confirmAutocomplete();
-          }
-        }
       });
-      if (typeof ResizeObserver !== "undefined") {
-        this.#resizeObserver = new ResizeObserver(() => {
-          if (this.#backdrop && this.#textarea) {
-            this.#backdrop.style.height = `${this.#textarea.offsetHeight}px`;
-          }
-        });
-        this.#resizeObserver.observe(ta);
-      }
     }
-    #initHighlight() {
-      const dark = !!this.dark;
-      applyPrismTheme(this.shadowRoot, dark);
-      ensurePrism().then(() => {
-        if (this.#textarea && this.#backdropContent) {
-          this.#backdropContent.innerHTML = highlightMarkdown(this.#textarea.value);
-        }
-      });
-    }
-    #scheduleHighlight() {
-      if (this.#highlightTimer !== null)
-        clearTimeout(this.#highlightTimer);
-      this.#highlightTimer = setTimeout(() => {
-        this.#highlightTimer = null;
-        if (this.#backdropContent && this.#textarea) {
-          this.#backdropContent.innerHTML = highlightMarkdown(this.#textarea.value);
-        }
-        if (this.#backdrop && this.#textarea) {
-          this.#backdrop.scrollTop = this.#textarea.scrollTop;
-        }
-      }, 60);
-    }
-    #switchTab(tab) {
-      if (tab === this.#activeTab)
+    ta.addEventListener("paste", (e) => {
+      if (this.disabled)
         return;
-      this.#activeTab = tab;
-      const writeBtns = this.shadowRoot.querySelectorAll(".tab-btn");
-      writeBtns.forEach((btn) => {
-        const isActive = btn.dataset.tab === tab;
-        btn.setAttribute("aria-selected", String(isActive));
-      });
-      if (tab === "preview") {
-        this.#writeArea?.setAttribute("hidden", "");
-        if (this.#previewBody) {
-          this.#previewBody.removeAttribute("hidden");
-          this.#previewBody.innerHTML = this.#renderMarkdown(this.#textarea?.value ?? "");
+      if (this.readonly)
+        return;
+      const imageFiles = Array.from(e.clipboardData?.files ?? []).filter((f) => f.type.startsWith("image/"));
+      if (imageFiles.length > 0) {
+        e.preventDefault();
+        imageFiles.forEach((f) => this.#startUpload(f));
+      }
+    });
+    const toolbar = this.shadowRoot.querySelector(".toolbar");
+    toolbar?.addEventListener("click", (e) => {
+      const btn = e.target.closest(".tab-btn");
+      const tab = btn?.dataset.tab;
+      if (tab)
+        this.#switchTab(tab);
+    });
+    toolbar?.addEventListener("keydown", (e) => {
+      const kev = e;
+      if (kev.key === "ArrowLeft" || kev.key === "ArrowRight") {
+        kev.preventDefault();
+        const nextTab = this.#activeTab === "write" ? "preview" : "write";
+        this.#switchTab(nextTab);
+        const nextBtn = this.shadowRoot.querySelector(`.tab-btn[data-tab="${nextTab}"]`);
+        nextBtn?.focus();
+      }
+    });
+    const attachBtn = this.shadowRoot.querySelector(".attach-btn");
+    attachBtn?.addEventListener("click", () => this.#fileInput?.click());
+    this.#fileInput?.addEventListener("change", () => {
+      const files = Array.from(this.#fileInput?.files ?? []).filter(isAcceptedType);
+      files.forEach((f) => this.#startUpload(f));
+      if (this.#fileInput)
+        this.#fileInput.value = "";
+    });
+    this.#acDropdown?.addEventListener("click", (e) => {
+      const item = e.target.closest("[data-ac-index]");
+      if (item) {
+        const idx = parseInt(item.dataset.acIndex ?? "-1", 10);
+        if (idx >= 0) {
+          this.#acSelectedIndex = idx;
+          this.#confirmAutocomplete();
         }
-      } else {
-        this.#writeArea?.removeAttribute("hidden");
-        this.#previewBody?.setAttribute("hidden", "");
       }
+    });
+  }
+  #initHighlight() {
+    const dark = !!this.dark;
+    applyPrismTheme(this.shadowRoot, dark);
+    ensurePrism().then(() => {
+      if (this.#textarea && this.#renderLayer) {
+        this.#renderLayer.innerHTML = highlightMarkdown(this.#textarea.value);
+      }
+    });
+  }
+  #scheduleHighlight() {
+    if (this.#highlightTimer !== null)
+      clearTimeout(this.#highlightTimer);
+    this.#highlightTimer = setTimeout(() => {
+      this.#highlightTimer = null;
+      if (this.#renderLayer && this.#textarea) {
+        this.#renderLayer.innerHTML = highlightMarkdown(this.#textarea.value);
+      }
+    }, 60);
+  }
+  #switchTab(tab) {
+    if (tab === this.#activeTab)
+      return;
+    this.#activeTab = tab;
+    const writeBtns = this.shadowRoot.querySelectorAll(".tab-btn");
+    writeBtns.forEach((btn) => {
+      const isActive = btn.dataset.tab === tab;
+      btn.setAttribute("aria-selected", String(isActive));
+      btn.setAttribute("tabindex", isActive ? "0" : "-1");
+    });
+    if (tab === "preview") {
+      this.#writeArea?.setAttribute("hidden", "");
+      if (this.#previewBody) {
+        this.#previewBody.removeAttribute("hidden");
+        this.#renderPreview(this.#textarea?.value ?? "");
+      }
+    } else {
+      this.#writeArea?.removeAttribute("hidden");
+      this.#previewBody?.setAttribute("hidden", "");
     }
-    #renderMarkdown(md) {
-      if (!md.trim())
-        return "<p></p>";
-      const CB_PH = "⁠CB";
-      const IC_PH = "⁠IC";
-      const codeBlocks = [];
-      let html = md.replace(/```(\w*)\n?([\s\S]*?)```/g, (_, lang, code) => {
-        const escaped = code.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-        const idx = codeBlocks.push(`<pre><code class="language-${lang || "text"}">${escaped}</code></pre>`) - 1;
-        return `${CB_PH}${idx}${CB_PH}`;
-      });
-      const inlineCodes = [];
-      html = html.replace(/`([^`\n]+)`/g, (_, code) => {
-        const escaped = code.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-        const idx = inlineCodes.push(`<code>${escaped}</code>`) - 1;
-        return `${IC_PH}${idx}${IC_PH}`;
-      });
-      html = html.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-      html = html.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, (_, alt, url) => `<img src="${sanitizeUrl(url)}" alt="${alt}">`);
-      html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (_, text, url) => `<a href="${sanitizeUrl(url)}">${text}</a>`);
-      html = html.replace(/^###### (.+)$/gm, "<h6>$1</h6>").replace(/^##### (.+)$/gm, "<h5>$1</h5>").replace(/^#### (.+)$/gm, "<h4>$1</h4>").replace(/^### (.+)$/gm, "<h3>$1</h3>").replace(/^## (.+)$/gm, "<h2>$1</h2>").replace(/^# (.+)$/gm, "<h1>$1</h1>");
-      html = html.replace(/^[-*_]{3,}$/gm, "<hr>");
-      html = html.replace(/^&gt; (.+)$/gm, "<blockquote>$1</blockquote>");
-      html = html.replace(/\*\*\*(.+?)\*\*\*/g, "<strong><em>$1</em></strong>").replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>").replace(/\*(.+?)\*/g, "<em>$1</em>").replace(/___(.+?)___/g, "<strong><em>$1</em></strong>").replace(/__(.+?)__/g, "<strong>$1</strong>").replace(/_(.+?)_/g, "<em>$1</em>");
-      html = html.replace(/~~(.+?)~~/g, "<del>$1</del>");
-      html = html.replace(/^[ \t]*[-*+] (.+)$/gm, '<li data-list="ul">$1</li>');
-      html = html.replace(/^[ \t]*\d+\. (.+)$/gm, '<li data-list="ol">$1</li>');
-      html = html.replace(/(<li data-list="ul">[^\n]*<\/li>(?:\n<li data-list="ul">[^\n]*<\/li>)*)/g, (match) => "<ul>" + match.replace(/ data-list="ul"/g, "") + "</ul>");
-      html = html.replace(/(<li data-list="ol">[^\n]*<\/li>(?:\n<li data-list="ol">[^\n]*<\/li>)*)/g, (match) => "<ol>" + match.replace(/ data-list="ol"/g, "") + "</ol>");
-      const lines = html.split(`
-
-`);
-      html = lines.map((block) => {
-        const t = block.trim();
-        if (!t)
-          return "";
-        if (/^<(h[1-6]|ul|ol|li|blockquote|hr|pre|img)/.test(t) || t.startsWith(CB_PH))
-          return t;
-        return `<p>${t.replace(/\n/g, "<br>")}</p>`;
-      }).filter(Boolean).join(`
-`);
-      html = html.replace(new RegExp(`${CB_PH}(\\d+)${CB_PH}`, "g"), (_, i) => codeBlocks[parseInt(i, 10)] ?? "");
-      html = html.replace(new RegExp(`${IC_PH}(\\d+)${IC_PH}`, "g"), (_, i) => inlineCodes[parseInt(i, 10)] ?? "");
-      return html;
+  }
+  async#loadRenderPipeline() {
+    if (this.#renderFn && this.#mermaidFn) {
+      return { renderMarkdown: this.#renderFn, renderMermaidBlocks: this.#mermaidFn };
+    }
+    const mod = await Promise.resolve().then(() => (init_render(), exports_render));
+    this.#renderFn = mod.renderMarkdown;
+    this.#mermaidFn = mod.renderMermaidBlocks;
+    return { renderMarkdown: this.#renderFn, renderMermaidBlocks: this.#mermaidFn };
+  }
+  async#renderPreview(source, force = false) {
+    const preview = this.#previewBody;
+    if (!preview)
+      return;
+    if (!force && this.#lastRenderedSource === source && this.#renderFn !== null) {
+      return;
     }
-    #syncFormValue() {
-      this.#internals?.setFormValue(this.#textarea?.value ?? "");
+    this.#renderAbortController?.abort();
+    const controller = new AbortController;
+    this.#renderAbortController = controller;
+    this.emit("render-start", {});
+    preview.setAttribute("aria-busy", "true");
+    if (!this.#renderFn) {
+      preview.innerHTML = `
+        <div class="preview-skeleton" aria-label="Loading preview…">
+          <div class="skeleton-line" style="width:90%"></div>
+          <div class="skeleton-line" style="width:75%"></div>
+          <div class="skeleton-line" style="width:85%"></div>
+          <div class="skeleton-line" style="width:60%"></div>
+        </div>`;
     }
-    #startUpload(file) {
-      this.emit("upload-start", { file });
-      const id = `upload-${++this.#uploadIdCounter}`;
-      const uploadUrl = this.uploadUrl;
-      if (!uploadUrl) {
-        this.emit("upload-error", { file, error: "no upload-url set" });
-        this.#showUploadError(file, "no upload-url set");
+    try {
+      const { renderMarkdown: renderMarkdown2, renderMermaidBlocks: renderMermaidBlocks2 } = await this.#loadRenderPipeline();
+      if (controller.signal.aborted) {
+        preview.removeAttribute("aria-busy");
         return;
       }
-      this.#addProgressRow(id, file.name);
-      uploadFile(file, uploadUrl, (pct) => {
-        this.#updateProgressRow(id, pct);
-      }).then((url) => {
-        this.#removeUploadRow(id);
-        const markdown = fileToMarkdown(file, url);
-        this.insertText(markdown);
-        this.emit("upload-done", { file, url, markdown });
-      }).catch((err) => {
-        this.#removeUploadRow(id);
-        const errorMsg = typeof err === "string" ? err : "Upload failed";
-        this.emit("upload-error", { file, error: errorMsg });
-        this.#showUploadError(file, errorMsg);
-      });
-    }
-    #addProgressRow(id, filename) {
-      if (!this.#uploadList)
+      const html = await renderMarkdown2(source);
+      if (controller.signal.aborted) {
+        preview.removeAttribute("aria-busy");
         return;
-      const row = document.createElement("div");
-      row.className = "upload-row";
-      row.id = id;
-      row.innerHTML = `
+      }
+      preview.innerHTML = html;
+      preview.removeAttribute("aria-busy");
+      this.#ensureKatexCss();
+      const mermaidSrc = this.mermaidSrc;
+      await renderMermaidBlocks2(preview, mermaidSrc);
+      if (controller.signal.aborted) {
+        preview.removeAttribute("aria-busy");
+        return;
+      }
+      this.#lastRenderedSource = source;
+      this.emit("render-done", { html });
+    } catch (err) {
+      if (controller.signal.aborted) {
+        preview.removeAttribute("aria-busy");
+        return;
+      }
+      preview.removeAttribute("aria-busy");
+      preview.innerHTML = `<pre class="render-error-fallback">${escapeHtmlStr(source)}</pre>`;
+      this.emit("render-error", { error: err instanceof Error ? err : new Error(String(err)) });
+    }
+  }
+  #ensureKatexCss() {
+    if (this.#katexCssInjected)
+      return;
+    this.#katexCssInjected = true;
+    const rawUrl = this.katexCssUrl ?? "https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.css";
+    const katexUrl = /^https:\/\//i.test(rawUrl) ? rawUrl : "https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.css";
+    if (katexUrl !== rawUrl) {
+      console.warn(`[el-dm-markdown-input] katex-css-url "${rawUrl}" rejected — only https: URLs are allowed.`);
+    }
+    const link = document.createElement("link");
+    link.id = "katex-css";
+    link.rel = "stylesheet";
+    link.href = katexUrl;
+    this.shadowRoot.appendChild(link);
+  }
+  #scheduleLivePreview() {
+    if (!this.livePreview)
+      return;
+    if (this.#activeTab !== "preview")
+      return;
+    if (this.#livePreviewTimer !== null)
+      clearTimeout(this.#livePreviewTimer);
+    const ms = this.debounce ?? 300;
+    this.#livePreviewTimer = setTimeout(() => {
+      this.#livePreviewTimer = null;
+      this.#renderPreview(this.#textarea?.value ?? "");
+    }, ms);
+  }
+  #syncFormValue() {
+    this.#internals?.setFormValue(this.#textarea?.value ?? "");
+  }
+  #startUpload(file) {
+    this.emit("upload-start", { file });
+    const id = `upload-${++this.#uploadIdCounter}`;
+    const uploadUrl = this.uploadUrl;
+    if (!uploadUrl) {
+      this.emit("upload-error", { file, error: "no upload-url set" });
+      this.#showUploadError(file, "no upload-url set");
+      return;
+    }
+    this.#addProgressRow(id, file.name);
+    uploadFile(file, uploadUrl, (pct) => {
+      this.#updateProgressRow(id, pct);
+    }).then((url) => {
+      this.#removeUploadRow(id);
+      const markdown = fileToMarkdown(file, url);
+      this.insertText(markdown);
+      this.emit("upload-done", { file, url, markdown });
+    }).catch((err) => {
+      this.#removeUploadRow(id);
+      const errorMsg = err instanceof Error ? err.message : "Upload failed";
+      this.emit("upload-error", { file, error: errorMsg });
+      this.#showUploadError(file, errorMsg);
+    });
+  }
+  #addProgressRow(id, filename) {
+    if (!this.#uploadList)
+      return;
+    const row = document.createElement("div");
+    row.className = "upload-row";
+    row.id = id;
+    row.innerHTML = `
       <span class="upload-filename">${escapeHtmlStr(filename)}</span>
-      <div class="upload-bar-track">
+      <div class="upload-bar-track" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" aria-label="Uploading ${escapeHtmlStr(filename)}">
         <div class="upload-bar" style="width: 0%"></div>
       </div>
     `;
-      this.#uploadList.appendChild(row);
-    }
-    #updateProgressRow(id, pct) {
-      const bar = this.#uploadList?.querySelector(`#${id} .upload-bar`);
-      if (bar)
-        bar.style.width = `${pct}%`;
-    }
-    #removeUploadRow(id) {
-      this.#uploadList?.querySelector(`#${id}`)?.remove();
-    }
-    #showUploadError(file, message) {
-      if (!this.#uploadList)
-        return;
-      const row = document.createElement("div");
-      row.className = "upload-error-row";
-      row.innerHTML = `
+    this.#uploadList.appendChild(row);
+  }
+  #updateProgressRow(id, pct) {
+    const track = this.#uploadList?.querySelector(`#${id} .upload-bar-track`);
+    if (track)
+      track.setAttribute("aria-valuenow", String(pct));
+    const bar = this.#uploadList?.querySelector(`#${id} .upload-bar`);
+    if (bar)
+      bar.style.width = `${pct}%`;
+  }
+  #removeUploadRow(id) {
+    this.#uploadList?.querySelector(`#${id}`)?.remove();
+  }
+  #showUploadError(file, message) {
+    if (!this.#uploadList)
+      return;
+    const row = document.createElement("div");
+    row.className = "upload-error-row";
+    row.setAttribute("role", "alert");
+    row.innerHTML = `
       <span class="upload-error-msg">${escapeHtmlStr(file.name)}: ${escapeHtmlStr(message)}</span>
     `;
-      this.#uploadList.appendChild(row);
-      setTimeout(() => row.remove(), 4000);
+    this.#uploadList.appendChild(row);
+    setTimeout(() => row.remove(), 4000);
+  }
+  #handleAutocompleteInput() {
+    const ta = this.#textarea;
+    if (!ta)
+      return;
+    const result = detectTrigger(ta.value, ta.selectionStart ?? 0);
+    if (!result) {
+      this.#closeDropdown();
+      return;
     }
-    #handleAutocompleteInput() {
-      const ta = this.#textarea;
-      if (!ta)
-        return;
-      const result = detectTrigger(ta.value, ta.selectionStart ?? 0);
-      if (!result) {
-        this.#closeDropdown();
-        return;
-      }
-      const { trigger, query, triggerPos } = result;
-      this.#acTrigger = trigger;
-      this.#acTriggerPos = triggerPos;
-      const resolve = (list) => this.setSuggestions(list);
-      if (trigger === "@") {
-        this.emit("mention-query", { trigger, query, resolve });
-      } else {
-        this.emit("reference-query", { trigger, query, resolve });
-      }
+    const { trigger, query, triggerPos } = result;
+    this.#acTrigger = trigger;
+    this.#acTriggerPos = triggerPos;
+    const gen = ++this.#acGeneration;
+    const resolve = (list) => {
+      if (gen === this.#acGeneration)
+        this.setSuggestions(list);
+    };
+    if (trigger === "@") {
+      this.emit("mention-query", { trigger, query, resolve });
+    } else {
+      this.emit("reference-query", { trigger, query, resolve });
     }
-    #handleDropdownKeydown(e) {
-      const len = this.#acSuggestions.length;
-      if (len === 0)
-        return;
-      switch (e.key) {
-        case "ArrowDown":
-          e.preventDefault();
-          this.#acSelectedIndex = (this.#acSelectedIndex + 1) % len;
-          this.#updateDropdown();
-          break;
-        case "ArrowUp":
+  }
+  #handleDropdownKeydown(e) {
+    const len = this.#acSuggestions.length;
+    if (len === 0)
+      return;
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        this.#acSelectedIndex = (this.#acSelectedIndex + 1) % len;
+        this.#updateDropdown();
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        this.#acSelectedIndex = (this.#acSelectedIndex - 1 + len) % len;
+        this.#updateDropdown();
+        break;
+      case "Enter":
+      case "Tab":
+        if (this.#acSelectedIndex >= 0) {
           e.preventDefault();
-          this.#acSelectedIndex = (this.#acSelectedIndex - 1 + len) % len;
-          this.#updateDropdown();
-          break;
-        case "Enter":
-        case "Tab":
-          if (this.#acSelectedIndex >= 0) {
-            e.preventDefault();
-            this.#confirmAutocomplete();
-          }
-          break;
-        case "Escape":
-          this.#closeDropdown();
-          break;
-      }
-    }
-    #confirmAutocomplete() {
-      const ta = this.#textarea;
-      if (!ta || this.#acSelectedIndex < 0 || !this.#acTrigger)
-        return;
-      const suggestion = this.#acSuggestions[this.#acSelectedIndex];
-      if (!suggestion)
-        return;
-      const { newValue, newCursorPos } = confirmSuggestion(ta.value, this.#acTriggerPos, ta.selectionStart ?? ta.value.length, this.#acTrigger, suggestion.id);
-      ta.value = newValue;
-      ta.setSelectionRange(newCursorPos, newCursorPos);
-      this.#syncFormValue();
-      this.emit("change", { value: ta.value });
-      this.#scheduleHighlight();
-      this.#scheduleStatusUpdate();
-      this.#closeDropdown();
-    }
-    #closeDropdown() {
-      this.#acSuggestions = [];
-      this.#acSelectedIndex = -1;
-      this.#acTrigger = null;
-      this.#acTriggerPos = -1;
-      if (this.#acDropdown) {
-        this.#acDropdown.innerHTML = "";
-        this.#acDropdown.hidden = true;
-      }
+          this.#confirmAutocomplete();
+        }
+        break;
+      case "Escape":
+        this.#closeDropdown();
+        break;
     }
-    #updateDropdown() {
-      if (!this.#acDropdown)
-        return;
-      if (this.#acSuggestions.length === 0) {
-        this.#acDropdown.hidden = true;
-        this.#textarea?.removeAttribute("aria-activedescendant");
-        return;
-      }
-      this.#acDropdown.innerHTML = renderDropdown(this.#acSuggestions, this.#acSelectedIndex);
-      this.#acDropdown.hidden = false;
-      if (this.#acSelectedIndex >= 0) {
-        this.#textarea?.setAttribute("aria-activedescendant", `ac-item-${this.#acSelectedIndex}`);
-      } else {
-        this.#textarea?.removeAttribute("aria-activedescendant");
-      }
+  }
+  #confirmAutocomplete() {
+    const ta = this.#textarea;
+    if (!ta || this.#acSelectedIndex < 0 || !this.#acTrigger)
+      return;
+    const suggestion = this.#acSuggestions[this.#acSelectedIndex];
+    if (!suggestion)
+      return;
+    const { newValue, newCursorPos } = confirmSuggestion(ta.value, this.#acTriggerPos, ta.selectionStart ?? ta.value.length, this.#acTrigger, suggestion.id);
+    ta.value = newValue;
+    ta.setSelectionRange(newCursorPos, newCursorPos);
+    this.#syncFormValue();
+    this.emit("change", { value: ta.value });
+    this.#scheduleHighlight();
+    this.#scheduleStatusUpdate();
+    this.#closeDropdown();
+  }
+  #closeDropdown() {
+    this.#acGeneration++;
+    this.#acSuggestions = [];
+    this.#acSelectedIndex = -1;
+    this.#acTrigger = null;
+    this.#acTriggerPos = -1;
+    if (this.#acDropdown) {
+      this.#acDropdown.innerHTML = "";
+      this.#acDropdown.hidden = true;
     }
-    #scheduleStatusUpdate() {
-      if (this.#statusTimer !== null)
-        clearTimeout(this.#statusTimer);
-      this.#statusTimer = setTimeout(() => {
-        this.#statusTimer = null;
-        this.#updateStatusBarNow();
-      }, 100);
+    this.#textarea?.setAttribute("aria-expanded", "false");
+    this.#textarea?.removeAttribute("aria-activedescendant");
+  }
+  #updateDropdown() {
+    if (!this.#acDropdown)
+      return;
+    if (this.#acSuggestions.length === 0) {
+      this.#acDropdown.hidden = true;
+      this.#textarea?.setAttribute("aria-expanded", "false");
+      this.#textarea?.removeAttribute("aria-activedescendant");
+      return;
     }
-    #updateStatusBarNow() {
-      if (!this.#statusCount)
-        return;
-      const text = this.#textarea?.value ?? "";
-      const words = countWords(text);
-      const chars = text.length;
-      const maxWords = this.maxWords ?? null;
-      this.#statusCount.innerHTML = renderStatusCount(words, chars, maxWords);
+    this.#acDropdown.innerHTML = renderDropdown(this.#acSuggestions, this.#acSelectedIndex);
+    this.#acDropdown.hidden = false;
+    this.#textarea?.setAttribute("aria-expanded", "true");
+    if (this.#acSelectedIndex >= 0) {
+      this.#textarea?.setAttribute("aria-activedescendant", `ac-item-${this.#acSelectedIndex}`);
+    } else {
+      this.#textarea?.removeAttribute("aria-activedescendant");
     }
-    getValue() {
-      return this.#textarea?.value ?? "";
+  }
+  #scheduleStatusUpdate() {
+    if (this.#statusTimer !== null)
+      clearTimeout(this.#statusTimer);
+    this.#statusTimer = setTimeout(() => {
+      this.#statusTimer = null;
+      this.#updateStatusBarNow();
+    }, 100);
+  }
+  #updateStatusBarNow() {
+    if (!this.#statusCount)
+      return;
+    const text = this.#textarea?.value ?? "";
+    const words = countWords(text);
+    const chars = text.length;
+    const maxWords = this.maxWords ?? null;
+    this.#statusCount.innerHTML = renderStatusCount(words, chars, maxWords);
+    const isRequired = !!this.required;
+    if (maxWords && words > maxWords) {
+      this.#internals?.setValidity({ customError: true }, `Content exceeds ${maxWords} word limit (${words} words)`, this.#textarea ?? undefined);
+    } else if (isRequired && text.trim() === "") {
+      this.#internals?.setValidity({ valueMissing: true }, "Please fill in this field.", this.#textarea ?? undefined);
+    } else {
+      this.#internals?.setValidity({});
     }
-    setValue(str) {
-      if (this.#textarea) {
-        this.#textarea.value = str;
-        this.#syncFormValue();
-        this.#scheduleHighlight();
-        this.#updateStatusBarNow();
-      } else {
-        this.value = str;
+  }
+  getValue() {
+    return this.#textarea?.value ?? "";
+  }
+  setValue(str) {
+    if (this.#textarea) {
+      this.#textarea.value = str;
+      this.#syncFormValue();
+      this.#scheduleHighlight();
+      this.#updateStatusBarNow();
+      if (this.#activeTab === "preview" && this.#previewBody) {
+        this.#renderPreview(str);
       }
+    } else {
+      this.value = str;
     }
-    insertText(str) {
-      const ta = this.#textarea;
-      if (!ta)
-        return;
-      const start = ta.selectionStart ?? ta.value.length;
-      const end = ta.selectionEnd ?? ta.value.length;
-      ta.value = ta.value.slice(0, start) + str + ta.value.slice(end);
-      const newPos = start + str.length;
-      ta.setSelectionRange(newPos, newPos);
-      ta.dispatchEvent(new Event("input", { bubbles: true }));
-    }
-    setSuggestions(list) {
-      this.#acSuggestions = list;
-      this.#acSelectedIndex = list.length > 0 ? 0 : -1;
-      this.#updateDropdown();
-    }
-  };
-});
-
+  }
+  insertText(str) {
+    const ta = this.#textarea;
+    if (!ta)
+      return;
+    const start = ta.selectionStart ?? ta.value.length;
+    const end = ta.selectionEnd ?? ta.value.length;
+    ta.value = ta.value.slice(0, start) + str + ta.value.slice(end);
+    const newPos = start + str.length;
+    ta.setSelectionRange(newPos, newPos);
+    ta.dispatchEvent(new Event("input", { bubbles: false }));
+  }
+  setSuggestions(list) {
+    this.#acSuggestions = list;
+    this.#acSelectedIndex = list.length > 0 ? 0 : -1;
+    this.#updateDropdown();
+  }
+}
+function escapeHtmlStr(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
 // src/index.ts
-init_element();
-var exports_src = {};
-__export(exports_src, {
-  register: () => register,
-  MarkdownInputHook: () => MarkdownInputHook,
-  ElDmMarkdownInput: () => ElDmMarkdownInput
-});
-module.exports = __toCommonJS(exports_src);
 function register() {
   if (!customElements.get("el-dm-markdown-input")) {
-    Promise.resolve().then(() => (init_element(), exports_element)).then(({ ElDmMarkdownInput: ElDmMarkdownInput2 }) => {
-      customElements.define("el-dm-markdown-input", ElDmMarkdownInput2);
-    });
+    customElements.define("el-dm-markdown-input", ElDmMarkdownInput);
   }
 }
 var MarkdownInputHook = {
@@ -1210,5 +1653,5 @@ var MarkdownInputHook = {
   }
 };
 
-//# debugId=41BCD34F5B96974F64756E2164756E21
+//# debugId=6EA563DA00732E0C64756E2164756E21
 //# sourceMappingURL=index.js.map