@duskmoon-dev/el-markdown-input 0.8.1 → 0.8.3

package/dist/esm/index.js

@@ -0,0 +1,1189 @@
+var __defProp = Object.defineProperty;
+var __returnValue = (v) => v;
+function __exportSetter(name, newValue) {
+  this[name] = __returnValue.bind(null, newValue);
+}
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: __exportSetter.bind(all, name)
+    });
+};
+var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
+
+// src/css.ts
+import { css } from "@duskmoon-dev/el-base";
+var elementStyles;
+var init_css = __esm(() => {
+  elementStyles = css`
+  /* ── Custom property defaults with design-system fallbacks ─────────── */
+  :host {
+    --md-border: var(--color-outline, #d0d7de);
+    --md-border-focus: var(--color-primary, #0969da);
+    --md-bg: var(--color-surface, #ffffff);
+    --md-bg-toolbar: var(--color-surface-variant, #f6f8fa);
+    --md-bg-hover: var(--color-surface-container, #eaeef2);
+    --md-text: var(--color-on-surface, #1f2328);
+    --md-text-muted: var(--color-on-surface-variant, #656d76);
+    --md-accent: var(--color-primary, #0969da);
+    --md-radius: 6px;
+    --md-upload-bar: var(--color-primary, #0969da);
+    --md-color-warning: var(--color-warning, #d97706);
+    --md-color-error: var(--color-error, #dc2626);
+
+    display: block;
+    position: relative; /* establishes containing block for the ac-dropdown portal */
+    font-family: inherit;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  /* Dark-mode overrides (activated by [dark] attribute on host) */
+  :host([dark]) {
+    --md-border: #30363d;
+    --md-border-focus: #58a6ff;
+    --md-bg: #0d1117;
+    --md-bg-toolbar: #161b22;
+    --md-bg-hover: #21262d;
+    --md-text: #e6edf3;
+    --md-text-muted: #8b949e;
+    --md-accent: #58a6ff;
+    --md-upload-bar: #58a6ff;
+    --md-color-warning: #f59e0b;
+    --md-color-error: #fca5a5;
+  }
+
+  /* ── Editor chrome ──────────────────────────────────────────────────── */
+  .editor {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid var(--md-border);
+    border-radius: var(--md-radius);
+    background: var(--md-bg);
+    color: var(--md-text);
+    overflow: hidden;
+  }
+
+  .editor:focus-within {
+    border-color: var(--md-border-focus);
+    outline: 2px solid var(--md-border-focus);
+    outline-offset: -1px;
+  }
+
+  /* ── Toolbar / tab bar ──────────────────────────────────────────────── */
+  .toolbar {
+    display: flex;
+    gap: 0;
+    background: var(--md-bg-toolbar);
+    border-bottom: 1px solid var(--md-border);
+    padding: 0 0.5rem;
+  }
+
+  .tab-btn {
+    padding: 0.5rem 0.875rem;
+    border: none;
+    background: transparent;
+    color: var(--md-text-muted);
+    font-family: inherit;
+    font-size: 0.875rem;
+    font-weight: 500;
+    cursor: pointer;
+    border-bottom: 2px solid transparent;
+    margin-bottom: -1px;
+    transition:
+      color 150ms ease,
+      border-color 150ms ease;
+  }
+
+  .tab-btn:hover {
+    color: var(--md-text);
+    background: var(--md-bg-hover);
+  }
+
+  .tab-btn[aria-selected='true'] {
+    color: var(--md-text);
+    border-bottom-color: var(--md-accent);
+  }
+
+  .tab-btn:focus-visible {
+    outline: 2px solid var(--md-accent);
+    outline-offset: -2px;
+    border-radius: 3px;
+  }
+
+  /* ── Write area (backdrop + textarea overlay) ───────────────────────── */
+  .write-area {
+    position: relative;
+    min-height: 12rem;
+    flex: 1;
+  }
+
+  /*
+   * Backdrop: renders syntax-highlighted HTML behind the transparent textarea.
+   * Must share IDENTICAL font metrics with the textarea to stay pixel-aligned.
+   */
+  .backdrop {
+    position: absolute;
+    inset: 0;
+    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.
+     */
+
+    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"> */
+  }
+
+  textarea {
+    position: relative;
+    display: block;
+    width: 100%;
+    min-height: 12rem;
+    border: none;
+    outline: none;
+    resize: vertical;
+    background: transparent;
+    color: transparent;
+    caret-color: var(--md-text);
+    box-sizing: border-box;
+
+    /* MUST match .backdrop exactly */
+    font-family: ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+    font-size: 0.875rem;
+    line-height: 1.6;
+    padding: 0.75rem;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+  }
+
+  textarea::placeholder {
+    color: var(--md-text-muted);
+  }
+
+  textarea:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  /* ── Preview panel ──────────────────────────────────────────────────── */
+  .preview-body {
+    padding: 0.75rem;
+    min-height: 12rem;
+    overflow-y: auto;
+    color: var(--md-text);
+    /* .markdown-body styles come from @duskmoon-dev/core via the element */
+  }
+
+  /* ── Status bar ─────────────────────────────────────────────────────── */
+  .status-bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.375rem 0.75rem;
+    border-top: 1px solid var(--md-border);
+    background: var(--md-bg-toolbar);
+    font-size: 0.75rem;
+    color: var(--md-text-muted);
+    gap: 0.5rem;
+  }
+
+  .attach-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.25rem 0.5rem;
+    border: none;
+    background: transparent;
+    color: var(--md-text-muted);
+    font-family: inherit;
+    font-size: 0.75rem;
+    cursor: pointer;
+    border-radius: 4px;
+    transition:
+      color 150ms ease,
+      background 150ms ease;
+  }
+
+  .attach-btn:hover {
+    color: var(--md-text);
+    background: var(--md-bg-hover);
+  }
+
+  .attach-btn:focus-visible {
+    outline: 2px solid var(--md-accent);
+    outline-offset: 1px;
+  }
+
+  .status-bar-count {
+    margin-left: auto;
+    white-space: nowrap;
+  }
+
+  .status-bar-count .warning {
+    color: var(--md-color-warning);
+  }
+
+  .status-bar-count .error {
+    color: var(--md-color-error);
+  }
+
+  .file-input {
+    display: none;
+  }
+
+  /* ── Autocomplete dropdown ──────────────────────────────────────────── */
+  /*
+   * The dropdown is a direct child of :host (outside .editor) so it is not
+   * clipped by .editor's overflow: hidden. :host has position: relative which
+   * establishes the containing block for this absolute positioning.
+   */
+  .ac-dropdown {
+    position: absolute;
+    z-index: 100;
+    left: 0.75rem;
+    /* Align to bottom of the editor chrome; the editor fills 100% of :host height */
+    bottom: calc(var(--md-status-bar-height, 2rem) + 4px);
+    min-width: 16rem;
+    max-width: 28rem;
+    max-height: 16rem;
+    overflow-y: auto;
+    margin: 0;
+    padding: 0.25rem 0;
+    list-style: none;
+    background: var(--md-bg);
+    border: 1px solid var(--md-border);
+    border-radius: var(--md-radius);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  }
+
+  .ac-item {
+    display: flex;
+    flex-direction: column;
+    padding: 0.5rem 0.75rem;
+    cursor: pointer;
+    transition: background 100ms ease;
+  }
+
+  .ac-item:hover,
+  .ac-item[aria-selected='true'] {
+    background: var(--md-bg-hover);
+  }
+
+  .ac-item-label {
+    font-size: 0.875rem;
+    color: var(--md-text);
+    font-weight: 500;
+  }
+
+  .ac-item-subtitle {
+    font-size: 0.75rem;
+    color: var(--md-text-muted);
+    margin-top: 1px;
+  }
+
+  /* ── Upload progress rows ───────────────────────────────────────────── */
+  .upload-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+  }
+
+  .upload-row {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.375rem 0.75rem;
+    border-top: 1px solid var(--md-border);
+    background: var(--md-bg-toolbar);
+    font-size: 0.75rem;
+    color: var(--md-text-muted);
+  }
+
+  .upload-filename {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .upload-bar-track {
+    width: 6rem;
+    height: 3px;
+    background: var(--md-border);
+    border-radius: 2px;
+    overflow: hidden;
+    flex-shrink: 0;
+  }
+
+  .upload-bar {
+    height: 100%;
+    background: var(--md-upload-bar);
+    border-radius: 2px;
+    transition: width 150ms ease;
+  }
+
+  .upload-error-row {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.375rem 0.75rem;
+    border-top: 1px solid var(--md-border);
+    background: oklch(97% 0.02 25);
+    color: var(--md-color-error);
+    font-size: 0.75rem;
+  }
+
+  :host([dark]) .upload-error-row {
+    background: oklch(20% 0.03 25);
+  }
+
+  .upload-error-msg {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+`;
+});
+
+// src/highlight.ts
+function _loadScript(src) {
+  return new Promise((resolve) => {
+    const script = document.createElement("script");
+    script.src = src;
+    script.onload = () => resolve();
+    script.onerror = () => resolve();
+    document.head.appendChild(script);
+  });
+}
+function ensurePrism() {
+  if (window.Prism)
+    return Promise.resolve();
+  if (_prismReady)
+    return _prismReady;
+  _prismReady = _loadScript(PRISM_CORE_URL).then(() => {
+    if (!window.Prism)
+      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 _prismReady;
+}
+function escapeHtml(text) {
+  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function highlightMarkdown(text) {
+  const escaped = escapeHtml(text);
+  if (!window.Prism?.languages?.markdown) {
+    return escaped + " ";
+  }
+  try {
+    const highlighted = window.Prism.highlight(text, window.Prism.languages.markdown, "markdown");
+    return highlighted + " ";
+  } catch {
+    return escaped + " ";
+  }
+}
+function applyPrismTheme(shadowRoot, dark) {
+  const themeUrl = dark ? PRISM_THEME_DARK_URL : PRISM_THEME_LIGHT_URL;
+  let styleEl = shadowRoot.getElementById("prism-theme");
+  if (!styleEl) {
+    styleEl = document.createElement("style");
+    styleEl.id = "prism-theme";
+    shadowRoot.appendChild(styleEl);
+  }
+  const expected = `@import url("${themeUrl}");`;
+  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
+function isAcceptedType(file) {
+  const type = file.type.toLowerCase();
+  if (ACCEPTED_MIME_PREFIXES.some((p) => type.startsWith(p)))
+    return true;
+  if (ACCEPTED_MIME_EXACT.includes(type))
+    return true;
+  const name = file.name.toLowerCase();
+  if (ACCEPTED_EXTENSIONS.some((ext) => name.endsWith(ext)))
+    return true;
+  return false;
+}
+function fileToMarkdown(file, url) {
+  if (file.type.startsWith("image/")) {
+    return `![${file.name}](${url})`;
+  }
+  return `[${file.name}](${url})`;
+}
+function uploadFile(file, uploadUrl, onProgress) {
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest;
+    const body = new FormData;
+    body.append("file", file);
+    xhr.upload.addEventListener("progress", (e) => {
+      if (e.lengthComputable) {
+        onProgress(Math.round(e.loaded / e.total * 100));
+      }
+    });
+    xhr.addEventListener("load", () => {
+      if (xhr.status >= 200 && xhr.status < 300) {
+        try {
+          const data = JSON.parse(xhr.responseText);
+          if (data.url) {
+            resolve(data.url);
+          } else {
+            reject("Upload response missing url field");
+          }
+        } catch {
+          reject("Upload response is not valid JSON");
+        }
+      } else {
+        reject(`Upload failed with status ${xhr.status}`);
+      }
+    });
+    xhr.addEventListener("error", () => reject("Network error during upload"));
+    xhr.addEventListener("abort", () => reject("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) {
+  let i = cursorPos - 1;
+  while (i >= 0) {
+    const ch = value[i];
+    if (ch === "@" || ch === "#") {
+      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)) {
+          return { trigger: ch, query, triggerPos: i };
+        }
+      }
+      return null;
+    }
+    if (/[\s\n]/.test(ch)) {
+      return null;
+    }
+    i--;
+  }
+  return null;
+}
+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;
+  return { newValue, newCursorPos };
+}
+function renderDropdown(suggestions, selectedIndex) {
+  if (suggestions.length === 0)
+    return "";
+  const items = suggestions.map((s, i) => {
+    const selected = i === selectedIndex ? ' aria-selected="true"' : ' aria-selected="false"';
+    const subtitle = s.subtitle ? `<span class="ac-item-subtitle">${escapeHtml2(s.subtitle)}</span>` : "";
+    return `<li id="ac-item-${i}" class="ac-item" role="option" data-ac-index="${i}"${selected}>
+        <span class="ac-item-label">${escapeHtml2(s.label)}</span>${subtitle}
+      </li>`;
+  }).join("");
+  return items;
+}
+function escapeHtml2(text) {
+  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+
+// src/status-bar.ts
+function countWords(text) {
+  if (!text.trim())
+    return 0;
+  return text.trim().split(/\s+/).filter(Boolean).length;
+}
+function countColour(wordCount, maxWords) {
+  if (!maxWords)
+    return "normal";
+  const pct = wordCount / maxWords * 100;
+  if (pct >= 100)
+    return "error";
+  if (pct >= 90)
+    return "warning";
+  return "normal";
+}
+function renderStatusCount(wordCount, charCount, maxWords) {
+  const cap = maxWords ?? null;
+  const colour = countColour(wordCount, cap);
+  const colourClass = colour !== "normal" ? ` class="${colour}"` : "";
+  if (cap) {
+    return `<span${colourClass}>${wordCount} / ${cap} words · ${charCount} chars</span>`;
+  }
+  return `<span>${wordCount} words · ${charCount} chars</span>`;
+}
+
+// src/element.ts
+var exports_element = {};
+__export(exports_element, {
+  ElDmMarkdownInput: () => ElDmMarkdownInput
+});
+import { BaseElement } from "@duskmoon-dev/el-base";
+import { css as markdownBodyCSS } from "@duskmoon-dev/core/components/markdown-body";
+import { css as css2 } from "@duskmoon-dev/el-base";
+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 coreMarkdownStyles, markdownBodySheet, ElDmMarkdownInput;
+var init_element = __esm(() => {
+  init_css();
+  init_highlight();
+  init_upload();
+  coreMarkdownStyles = markdownBodyCSS.replace(/@layer\s+components\s*\{/, "").replace(/\}\s*$/, "");
+  markdownBodySheet = css2`
+  ${coreMarkdownStyles}
+`;
+  ElDmMarkdownInput = class ElDmMarkdownInput extends 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;
+        this.#syncFormValue();
+      }
+    }
+    disconnectedCallback() {
+      this.#resizeObserver?.disconnect();
+      super.disconnectedCallback();
+    }
+    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;
+      }
+      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 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 `
+      <div class="editor">
+        <div class="toolbar" role="tablist" aria-label="Editor mode">
+          <button
+            class="tab-btn"
+            data-tab="write"
+            role="tab"
+            aria-selected="true"
+            aria-controls="write-panel"
+          >Write</button>
+          <button
+            class="tab-btn"
+            data-tab="preview"
+            role="tab"
+            aria-selected="false"
+            aria-controls="preview-panel"
+          >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>
+          <textarea
+            aria-label="Markdown editor"
+            aria-haspopup="listbox"
+            aria-autocomplete="list"
+            aria-controls="ac-dropdown"
+            placeholder="${ph}"
+            ${disabled ? "disabled" : ""}
+            ${readonly ? "readonly" : ""}
+            spellcheck="false"
+            autocomplete="off"
+            autocorrect="off"
+            autocapitalize="off"
+          ></textarea>
+        </div>
+
+        <div
+          class="preview-body markdown-body"
+          id="preview-panel"
+          role="tabpanel"
+          aria-label="Markdown preview"
+          hidden
+        ></div>
+
+        <div class="status-bar">
+          <button class="attach-btn" type="button" aria-label="Attach files" ${disabled || readonly ? "disabled" : ""}>
+            &#128206; Attach files
+          </button>
+          <span class="status-bar-count" aria-live="polite"></span>
+          <input
+            type="file"
+            class="file-input"
+            multiple
+            accept="image/*,application/pdf,.zip,.txt,.csv,.json,.md"
+            aria-hidden="true"
+            tabindex="-1"
+          >
+        </div>
+
+        <div class="upload-list"></div>
+      </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)
+        return;
+      ta.addEventListener("input", () => {
+        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");
+        }
+      });
+      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) => {
+        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);
+      });
+      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();
+          }
+        }
+      });
+      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)
+        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 ?? "");
+        }
+      } 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;
+    }
+    #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 = typeof err === "string" ? err : "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" 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 = `
+      <span class="upload-error-msg">${escapeHtmlStr(file.name)}: ${escapeHtmlStr(message)}</span>
+    `;
+      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;
+      }
+      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 });
+      }
+    }
+    #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.#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;
+      }
+    }
+    #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");
+      }
+    }
+    #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);
+    }
+    getValue() {
+      return this.#textarea?.value ?? "";
+    }
+    setValue(str) {
+      if (this.#textarea) {
+        this.#textarea.value = str;
+        this.#syncFormValue();
+        this.#scheduleHighlight();
+        this.#updateStatusBarNow();
+      } 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();
+    }
+  };
+});
+
+// src/index.ts
+init_element();
+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);
+    });
+  }
+}
+var MarkdownInputHook = {
+  mounted() {
+    this.el.setValue(this.el.dataset.value ?? "");
+    this.el.addEventListener("change", (e) => {
+      const detail = e.detail;
+      this.pushEvent("content_changed", { value: detail.value });
+    });
+    this.el.addEventListener("upload-start", (e) => {
+      const detail = e.detail;
+      this.pushEvent("upload_file", { name: detail.file.name });
+    });
+  },
+  updated() {
+    const v = this.el.dataset.value;
+    if (v !== undefined && v !== this.el.getValue()) {
+      this.el.setValue(v);
+    }
+  }
+};
+export {
+  register,
+  MarkdownInputHook,
+  ElDmMarkdownInput
+};
+
+//# debugId=765ABA8108F4BB0A64756E2164756E21
+//# sourceMappingURL=index.js.map