@duskmoon-dev/el-markdown-input 1.1.2 → 1.1.3

package/dist/cjs/index.js

@@ -521,6 +521,31 @@ var elementStyles = import_el_base.css`
     gap: 0.5rem;
   }
 
+  .status-bar-start,
+  .status-bar-end {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  /* Allow slotted light-DOM children to inherit font and alignment */
+  .status-bar ::slotted(*),
+  .status-bar-start ::slotted(*),
+  .status-bar-end ::slotted(*) {
+    font-size: inherit;
+    font-family: inherit;
+    vertical-align: middle;
+  }
+
+  /* When slot="bottom" is used, the slotted element fills the bar */
+  .status-bar > slot[name="bottom"]::slotted(*) {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex: 1;
+    gap: 0.5rem;
+  }
+
   .attach-btn {
     display: inline-flex;
     align-items: center;
@@ -555,7 +580,6 @@ var elementStyles = import_el_base.css`
   }
 
   .status-bar-count {
-    margin-left: auto;
     white-space: nowrap;
   }
 
@@ -684,6 +708,52 @@ var elementStyles = import_el_base.css`
     white-space: nowrap;
   }
 
+  /* ── Attached files (local form mode) ────────────────────────────── */
+
+  .upload-attached-row {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.375rem 0.75rem;
+    border-top: 1px solid var(--md-border);
+    font-size: 0.75rem;
+    color: var(--md-text-muted);
+  }
+
+  .upload-attached-size {
+    white-space: nowrap;
+    color: var(--md-text-muted);
+  }
+
+  .upload-remove-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.25rem;
+    height: 1.25rem;
+    margin-left: auto;
+    border: none;
+    background: transparent;
+    color: var(--md-text-muted);
+    font-size: 0.85rem;
+    line-height: 1;
+    cursor: pointer;
+    border-radius: 50%;
+    transition:
+      color 150ms ease,
+      background 150ms ease;
+  }
+
+  .upload-remove-btn:hover {
+    color: var(--md-color-error);
+    background: var(--md-bg-hover);
+  }
+
+  .upload-remove-btn:focus-visible {
+    outline: 2px solid var(--md-accent);
+    outline-offset: 1px;
+  }
+
   /* ── Resizable editor ──────────────────────────────────────────────── */
   /* resize attribute mirrors the CSS resize property: vertical | horizontal | both */
   :host([resize='vertical']) .editor {
@@ -1028,6 +1098,13 @@ var coreMarkdownStyles = import_markdown_body.css.replace(/@layer\s+components\s
 var markdownBodySheet = import_el_base3.css`
   ${coreMarkdownStyles}
 `;
+function formatFileSize(bytes) {
+  if (bytes < 1024)
+    return `${bytes} B`;
+  if (bytes < 1024 * 1024)
+    return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
 
 class ElDmMarkdownInput extends import_el_base2.BaseElement {
   static formAssociated = true;
@@ -1074,6 +1151,7 @@ class ElDmMarkdownInput extends import_el_base2.BaseElement {
   #lastRenderedSource = null;
   #katexCssInjected = false;
   #uploadIdCounter = 0;
+  #attachedFiles = [];
   constructor() {
     super();
     this.#internals = this.attachInternals();
@@ -1206,10 +1284,20 @@ class ElDmMarkdownInput extends import_el_base2.BaseElement {
         ></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>
+          <slot name="bottom">
+            <div class="status-bar-start">
+              <slot name="bottom-start">
+                <button class="attach-btn" type="button" aria-label="Attach files" ${disabled || readonly ? "disabled" : ""}>
+                  &#128206; Attach files
+                </button>
+              </slot>
+            </div>
+            <div class="status-bar-end">
+              <slot name="bottom-end">
+                <span class="status-bar-count" aria-live="polite"></span>
+              </slot>
+            </div>
+          </slot>
           <input
             type="file"
             class="file-input"
@@ -1496,15 +1584,28 @@ class ElDmMarkdownInput extends import_el_base2.BaseElement {
     }, ms);
   }
   #syncFormValue() {
-    this.#internals?.setFormValue(this.#textarea?.value ?? "");
+    const text = this.#textarea?.value ?? "";
+    if (this.#attachedFiles.length === 0) {
+      this.#internals?.setFormValue(text);
+      return;
+    }
+    const name = this.name || "markdown";
+    const fd = new FormData;
+    fd.append(name, text);
+    for (const f of this.#attachedFiles) {
+      fd.append(`${name}_files`, f, f.name);
+    }
+    this.#internals?.setFormValue(fd);
   }
   #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");
+      this.#attachedFiles.push(file);
+      this.#addAttachedRow(file, this.#attachedFiles.length - 1, id);
+      this.#syncFormValue();
+      this.emit("upload-done", { file, url: "", markdown: "" });
       return;
     }
     this.#addProgressRow(id, file.name);
@@ -1559,6 +1660,22 @@ class ElDmMarkdownInput extends import_el_base2.BaseElement {
     this.#uploadList.appendChild(row);
     setTimeout(() => row.remove(), 4000);
   }
+  #addAttachedRow(file, index, id) {
+    if (!this.#uploadList)
+      return;
+    const row = document.createElement("div");
+    row.className = "upload-attached-row";
+    row.id = id;
+    row.innerHTML = `
+      <span class="upload-filename">${escapeHtmlStr(file.name)}</span>
+      <span class="upload-attached-size">${formatFileSize(file.size)}</span>
+      <button type="button" class="upload-remove-btn" data-attach-index="${index}" aria-label="Remove ${escapeHtmlStr(file.name)}">&#215;</button>
+    `;
+    row.querySelector(".upload-remove-btn").addEventListener("click", () => {
+      this.removeFile(index);
+    });
+    this.#uploadList.appendChild(row);
+  }
   #handleAutocompleteInput() {
     const ta = this.#textarea;
     if (!ta)
@@ -1764,6 +1881,25 @@ class ElDmMarkdownInput extends import_el_base2.BaseElement {
     this.#acSelectedIndex = list.length > 0 ? 0 : -1;
     this.#updateDropdown();
   }
+  getFiles() {
+    return [...this.#attachedFiles];
+  }
+  removeFile(index) {
+    if (index < 0 || index >= this.#attachedFiles.length)
+      return;
+    this.#attachedFiles.splice(index, 1);
+    this.#rebuildAttachedRows();
+    this.#syncFormValue();
+  }
+  #rebuildAttachedRows() {
+    if (!this.#uploadList)
+      return;
+    this.#uploadList.querySelectorAll(".upload-attached-row").forEach((r) => r.remove());
+    this.#attachedFiles.forEach((file, i) => {
+      const id = `upload-${++this.#uploadIdCounter}`;
+      this.#addAttachedRow(file, i, id);
+    });
+  }
 }
 function escapeHtmlStr(s) {
   return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
@@ -1794,5 +1930,5 @@ var MarkdownInputHook = {
   }
 };
 
-//# debugId=0AA7B81A718D612564756E2164756E21
+//# debugId=FC4F4846FEEC843664756E2164756E21
 //# sourceMappingURL=index.js.map