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

package/dist/esm/register.js

@@ -254,6 +254,10 @@ var elementStyles = css`
     padding: 0 0.5rem;
   }
 
+  .toolbar[hidden] {
+    display: none;
+  }
+
   .tab-btn {
     padding: 0.5rem 0.875rem;
     border: none;
@@ -492,6 +496,31 @@ var elementStyles = 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;
@@ -526,7 +555,6 @@ var elementStyles = css`
   }
 
   .status-bar-count {
-    margin-left: auto;
     white-space: nowrap;
   }
 
@@ -655,6 +683,52 @@ var elementStyles = 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 {
@@ -999,6 +1073,13 @@ var coreMarkdownStyles = markdownBodyCSS.replace(/@layer\s+components\s*\{/, "")
 var markdownBodySheet = css2`
   ${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 BaseElement {
   static formAssociated = true;
@@ -1016,7 +1097,8 @@ class ElDmMarkdownInput extends BaseElement {
     debounce: { type: Number, reflect: true, default: 300 },
     katexCssUrl: { type: String, reflect: true, attribute: "katex-css-url" },
     mermaidSrc: { type: String, reflect: true, attribute: "mermaid-src" },
-    resize: { type: String, reflect: true, default: "none" }
+    resize: { type: String, reflect: true, default: "none" },
+    noPreview: { type: Boolean, reflect: true, attribute: "no-preview" }
   };
   #internals;
   #initialized = false;
@@ -1044,6 +1126,7 @@ class ElDmMarkdownInput extends BaseElement {
   #lastRenderedSource = null;
   #katexCssInjected = false;
   #uploadIdCounter = 0;
+  #attachedFiles = [];
   constructor() {
     super();
     this.#internals = this.attachInternals();
@@ -1107,15 +1190,28 @@ class ElDmMarkdownInput extends BaseElement {
         this.#renderPreview(ta.value);
       }
     }
+    const noPreview = !!this.noPreview;
+    const toolbar = this.shadowRoot.querySelector(".toolbar");
+    if (noPreview) {
+      toolbar?.setAttribute("hidden", "");
+      if (this.#activeTab === "preview") {
+        this.#activeTab = "write";
+        this.#writeArea?.removeAttribute("hidden");
+        this.#previewBody?.setAttribute("hidden", "");
+      }
+    } else {
+      toolbar?.removeAttribute("hidden");
+    }
     this.#updateStatusBarNow();
   }
   render() {
     const ph = this.placeholder ?? "Write markdown…";
     const disabled = !!this.disabled;
     const readonly = !!this.readonly;
+    const noPreview = !!this.noPreview;
     return `
       <div class="editor">
-        <div class="toolbar" role="tablist" aria-label="Editor mode">
+        <div class="toolbar" role="tablist" aria-label="Editor mode" ${noPreview ? "hidden" : ""}>
           <button
             class="tab-btn"
             id="tab-write"
@@ -1163,10 +1259,20 @@ class ElDmMarkdownInput extends 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"
@@ -1217,7 +1323,7 @@ class ElDmMarkdownInput extends BaseElement {
         if (e.defaultPrevented)
           return;
       }
-      if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === "P") {
+      if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === "P" && !this.noPreview) {
         e.preventDefault();
         this.#switchTab(this.#activeTab === "write" ? "preview" : "write");
         return;
@@ -1342,6 +1448,8 @@ class ElDmMarkdownInput extends BaseElement {
   #switchTab(tab) {
     if (tab === this.#activeTab)
       return;
+    if (tab === "preview" && this.noPreview)
+      return;
     this.#activeTab = tab;
     const writeBtns = this.shadowRoot.querySelectorAll(".tab-btn");
     writeBtns.forEach((btn) => {
@@ -1451,15 +1559,28 @@ class ElDmMarkdownInput extends 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);
@@ -1514,6 +1635,22 @@ class ElDmMarkdownInput extends 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)
@@ -1719,6 +1856,25 @@ class ElDmMarkdownInput extends 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;");
@@ -1729,5 +1885,5 @@ if (!customElements.get("el-dm-markdown-input")) {
   customElements.define("el-dm-markdown-input", ElDmMarkdownInput);
 }
 
-//# debugId=ABC98EC77764587964756E2164756E21
+//# debugId=D5D4120E3A9113D764756E2164756E21
 //# sourceMappingURL=register.js.map