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

package/dist/esm/index.js

@@ -236,6 +236,7 @@ var elementStyles = css`
     color: var(--md-text);
     overflow: hidden;
     height: inherit;
+    min-height: 12rem;
   }
 
   .editor:focus-within {
@@ -287,13 +288,18 @@ var elementStyles = css`
 
   /* ── 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.
+   * CSS grid overlay model: both .render-layer and textarea occupy the same
+   * grid cell (grid-area: 1/1), making them normal-flow siblings. The
+   * render-layer drives the cell's height; the textarea stretches to match.
+   * The write-area is the scroll container — both layers scroll together
+   * with no JS sync required. This fixes overflow when the editor has a
+   * fixed height set by the consumer.
    */
   .write-area {
     position: relative;
-    min-height: 12rem;
+    display: grid;
+    overflow-y: auto;
+    min-height: 0;
     flex: 1 1 auto;
   }
 
@@ -302,15 +308,13 @@ var elementStyles = css`
   }
 
   /*
-   * Render layer: highlighted HTML in normal flow. Drives container height.
-   * pointer-events: none lets clicks pass through to the textarea underneath.
+   * Render layer: highlighted HTML that drives the grid cell height.
+   * pointer-events: none lets clicks pass through to the textarea on top.
    * Font metrics MUST match the textarea exactly for pixel-aligned overlay.
    */
   .render-layer {
-    position: relative;
-    z-index: 1;
+    grid-area: 1 / 1;
     pointer-events: none;
-    min-height: 12rem;
     font-family: ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
     font-size: 0.875rem;
     line-height: 1.6;
@@ -322,14 +326,13 @@ var elementStyles = css`
   }
 
   /*
-   * Textarea: absolute overlay on top of the render layer. Transparent text
+   * Textarea: grid 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.
+   * overflow: hidden — the write-area is the scroll container, not textarea.
    */
   textarea {
-    position: absolute;
-    inset: 0;
-    z-index: 2;
+    grid-area: 1 / 1;
+    z-index: 1;
     display: block;
     width: 100%;
     height: 100%;
@@ -354,6 +357,17 @@ var elementStyles = css`
     color: var(--md-text-muted);
   }
 
+  /*
+   * Selection: keep text transparent so the render layer stays visible, but
+   * apply a semi-transparent highlight so selected regions are clearly marked.
+   * Without this rule the browser's default opaque selection background covers
+   * the render layer, making selected text appear invisible.
+   */
+  textarea::selection {
+    color: transparent;
+    background-color: var(--md-selection-bg, color-mix(in srgb, var(--md-accent) 35%, transparent));
+  }
+
   textarea:disabled {
     cursor: not-allowed;
     opacity: 0.6;
@@ -362,8 +376,7 @@ var elementStyles = css`
   /* ── Preview panel ──────────────────────────────────────────────────── */
   .preview-body {
     padding: 0.75rem;
-    min-height: 12rem;
-    height: stretch;
+    min-height: 0; /* allow flex item to shrink and scroll */
     flex: 1 1 auto;
     display: flex;
     flex-direction: column;
@@ -376,6 +389,15 @@ var elementStyles = css`
     display: none;
   }
 
+  /*
+   * Markdown content children must not shrink below their natural height.
+   * Without this, flex-shrink:1 (default) compresses all children to fit
+   * the 329px container instead of letting overflow-y:auto scroll them.
+   */
+  .preview-body > * {
+    flex-shrink: 0;
+  }
+
   /* ── Preview skeleton (shown while render pipeline loads) ──────────── */
   .preview-skeleton {
     display: flex;
@@ -529,9 +551,9 @@ var elementStyles = css`
   .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);
+    /* top and left are set dynamically by #updateDropdown() via #getCaretCoords() */
+    top: 0;
+    left: 0;
     min-width: 16rem;
     max-width: 28rem;
     max-height: 16rem;
@@ -633,6 +655,20 @@ var elementStyles = css`
     white-space: nowrap;
   }
 
+  /* ── Resizable editor ──────────────────────────────────────────────── */
+  /* resize attribute mirrors the CSS resize property: vertical | horizontal | both */
+  :host([resize='vertical']) .editor {
+    resize: vertical;
+  }
+
+  :host([resize='horizontal']) .editor {
+    resize: horizontal;
+  }
+
+  :host([resize='both']) .editor {
+    resize: both;
+  }
+
   /* ── Reduced motion: disable all transitions and animations ──────── */
   @media (prefers-reduced-motion: reduce) {
     .tab-btn,
@@ -848,6 +884,14 @@ function escapeHtml2(text) {
 }
 
 // src/pairs.ts
+function replaceRange(ta, from, to, text, cursorStart, cursorEnd) {
+  ta.setSelectionRange(from, to);
+  const execOk = typeof document.execCommand === "function" && document.execCommand("insertText", false, text);
+  if (!execOk) {
+    ta.value = ta.value.slice(0, from) + text + ta.value.slice(to);
+  }
+  ta.setSelectionRange(cursorStart, cursorEnd ?? cursorStart);
+}
 function handlePairKey(ta, key) {
   if (key !== "`")
     return false;
@@ -856,17 +900,38 @@ function handlePairKey(ta, key) {
   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);
+    replaceRange(ta, start, end, "`" + selected + "`", 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);
+    let consumeEnd = end;
+    while (consumeEnd < value.length && value[consumeEnd] === "`")
+      consumeEnd++;
+    replaceRange(ta, start, consumeEnd, "`\n\n```", start + 2);
     return true;
   }
-  ta.value = value.slice(0, start) + "``" + value.slice(end);
-  ta.setSelectionRange(start + 1, start + 1);
+  replaceRange(ta, start, end, "``", start + 1);
+  return true;
+}
+var INDENT = "  ";
+function handleTabKey(ta, e) {
+  if (e.key !== "Tab")
+    return false;
+  e.preventDefault();
+  const { selectionStart: start, selectionEnd: end, value } = ta;
+  if (start === end && !e.shiftKey) {
+    replaceRange(ta, start, end, INDENT, start + INDENT.length);
+    return true;
+  }
+  const lineStart = value.lastIndexOf(`
+`, start - 1) + 1;
+  const block = value.slice(lineStart, end);
+  const transformed = e.shiftKey ? block.replace(/^ {1,2}/gm, "") : block.replace(/^/gm, INDENT);
+  const delta = transformed.length - block.length;
+  const firstLineLeading = block.split(`
+`)[0].match(/^ */)?.[0].length ?? 0;
+  const firstLineDelta = e.shiftKey ? -Math.min(2, firstLineLeading) : INDENT.length;
+  replaceRange(ta, lineStart, end, transformed, Math.max(lineStart, start + firstLineDelta), end + delta);
   return true;
 }
 function handleEnterKey(ta, e) {
@@ -884,15 +949,11 @@ function handleEnterKey(ta, e) {
     return false;
   e.preventDefault();
   if (result.eraseCurrentLine) {
-    const newValue = value.slice(0, lineStart) + value.slice(pos);
-    ta.value = newValue;
-    ta.setSelectionRange(lineStart, lineStart);
+    replaceRange(ta, lineStart, pos, "", 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);
+    const insert = `
+` + result.prefix;
+    replaceRange(ta, pos, pos, insert, pos + insert.length);
   }
   return true;
 }
@@ -954,7 +1015,8 @@ class ElDmMarkdownInput extends BaseElement {
     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" }
+    mermaidSrc: { type: String, reflect: true, attribute: "mermaid-src" },
+    resize: { type: String, reflect: true, default: "none" }
   };
   #internals;
   #initialized = false;
@@ -1170,6 +1232,14 @@ class ElDmMarkdownInput extends BaseElement {
         this.#scheduleHighlight();
         return;
       }
+      if (e.key === "Tab" && !e.ctrlKey && !e.metaKey) {
+        if (handleTabKey(ta, e)) {
+          this.#syncFormValue();
+          this.emit("change", { value: ta.value });
+          this.#scheduleHighlight();
+        }
+        return;
+      }
       if (e.key === "Enter" && !e.ctrlKey && !e.metaKey && !e.altKey) {
         if (handleEnterKey(ta, e)) {
           this.#syncFormValue();
@@ -1540,6 +1610,57 @@ class ElDmMarkdownInput extends BaseElement {
     } else {
       this.#textarea?.removeAttribute("aria-activedescendant");
     }
+    const coords = this.#getCaretCoords();
+    if (coords) {
+      this.#acDropdown.style.top = `${coords.top}px`;
+      this.#acDropdown.style.left = `${coords.left}px`;
+    }
+  }
+  #getCaretCoords() {
+    const ta = this.#textarea;
+    if (!ta)
+      return null;
+    const pos = ta.selectionStart ?? 0;
+    const cs = getComputedStyle(ta);
+    const taRect = ta.getBoundingClientRect();
+    const mirror = document.createElement("div");
+    Object.assign(mirror.style, {
+      position: "fixed",
+      visibility: "hidden",
+      pointerEvents: "none",
+      top: `${taRect.top}px`,
+      left: `${taRect.left}px`,
+      width: `${taRect.width}px`,
+      font: cs.font,
+      letterSpacing: cs.letterSpacing,
+      paddingTop: cs.paddingTop,
+      paddingRight: cs.paddingRight,
+      paddingBottom: cs.paddingBottom,
+      paddingLeft: cs.paddingLeft,
+      borderTopWidth: cs.borderTopWidth,
+      borderRightWidth: cs.borderRightWidth,
+      borderBottomWidth: cs.borderBottomWidth,
+      borderLeftWidth: cs.borderLeftWidth,
+      boxSizing: cs.boxSizing,
+      whiteSpace: "pre-wrap",
+      wordBreak: "break-word",
+      overflowWrap: cs.overflowWrap,
+      overflow: "hidden"
+    });
+    const before = document.createTextNode(ta.value.substring(0, pos));
+    const marker = document.createElement("span");
+    marker.textContent = "​";
+    mirror.appendChild(before);
+    mirror.appendChild(marker);
+    document.body.appendChild(mirror);
+    const markerRect = marker.getBoundingClientRect();
+    document.body.removeChild(mirror);
+    const hostRect = this.getBoundingClientRect();
+    const lineHeight = parseFloat(cs.lineHeight) || 20;
+    return {
+      top: markerRect.top - hostRect.top - ta.scrollTop + lineHeight,
+      left: Math.max(0, markerRect.left - hostRect.left)
+    };
   }
   #scheduleStatusUpdate() {
     if (this.#statusTimer !== null)
@@ -1633,5 +1754,5 @@ export {
   ElDmMarkdownInput
 };
 
-//# debugId=5F508B6BDB08E0B664756E2164756E21
+//# debugId=97DFE6DBE61B280764756E2164756E21
 //# sourceMappingURL=index.js.map