@vscode/markdown-editor 0.0.2-130 → 0.0.2-131

package/README.md

@@ -39,12 +39,19 @@ Full view fills the visible Markdown viewport, keeps the same iframe alive,
 and restores the previous width mode, inline height, and scroll position on exit.
 The host toolbar groups copy and presentation actions in a compact, themed Codicon
 overlay. It appears on hover or keyboard focus without reserving a header row,
-and always provides an exit button in full view. Escape also exits when handled
+alongside a rounded border around the iframe and its resize grip. These use the
+same 4px frame and 6px toolbar radii as the Mermaid preview controls.
+The toolbar and border fade in and out over 200ms with `ease-in-out`, matching
+Markdown preview. Reduced-motion preferences disable these transitions.
+The toolbar always provides an exit button in full view. Escape also exits when handled
 by the injected iframe bootstrap (nested remote pages can use the message below).
 Resize handles support pointer capture and Arrow Up/Down. After a user resize,
 content-size reports no longer override the chosen height; **Automatic height**
 returns control to the content. Full view always uses the host viewport height.
 Presentation changes never edit the Markdown source.
+The host iframe uses the page theme's background in every presentation mode.
+Guest HTML can remain transparent to show that color without revealing the
+Markdown document behind it in full view.
 
 Cooperative pages can advertise the same preferences with
 `parent.postMessage({ type: 'vscode-markdown-editor::presentation', preferences }, '*')`.
@@ -68,6 +75,14 @@ viewports. Their light/dark Playwright tests exercise scaled-preview alignment,
 drag capture, minimum height, size-report precedence, full-width
 and full-view geometry, mode notifications, state retention, and restoration.
 
+**Red editor (hover)** and **Transparent editor (hover)** default the `mockHover`
+fixture input to true for deterministic visual verification. This sets
+`data-md-iframe-hover="true"` on the fixture container, exercising the same chrome
+visibility rules as real hover/focus without moving the pointer. Set the input
+to false to test natural hover behavior.
+The `animations` fixture input defaults to false for stable screenshots. Set it
+to true to exercise the production fades, with either real or mocked hover.
+
 ## Browser tests
 
 `pnpm test:e2e` builds the fixture dependencies and runs the Playwright interaction

package/dist/web-editors.d.ts

@@ -142,6 +142,7 @@ declare class PhysicalIframe implements IDisposable {
     private _reportedHeight;
     private _disposed;
     private readonly _onWindowMessage;
+    private readonly _surface;
     private readonly _toolbar;
     private readonly _fullWidthButton;
     private readonly _fullViewButton;

package/dist/web-editors.js

@@ -7323,9 +7323,9 @@ class Fl {
 }
 class Dl {
   constructor(e, n, r, i, o, s, a, c) {
-    this._descriptor = n, this._hostTransport = r, this._frameRoot = o, this._scriptNonce = s, this._themeCss = a, this._iframeBootstrapUrl = c, this.pool = e;
+    this._descriptor = n, this._hostTransport = r, this._frameRoot = o, this._scriptNonce = s, this._themeCss = a, this._iframeBootstrapUrl = c, this.pool = e, this._surface = document.createElement("div"), this._surface.className = "md-iframe-surface";
     const u = document.createElement("iframe");
-    u.setAttribute("sandbox", Wr(n.sandbox)), u.setAttribute("allow", n.sandbox?.clipboardWrite ? "clipboard-write" : ""), u.style.width = "100%", u.style.border = "none", u.style.display = "block", u.style.position = "absolute", u.style.pointerEvents = "auto", u.style.background = "transparent", u.style.height = `${n.initialHeight ?? 120}px`, e.park(u), u.addEventListener("blur", () => {
+    u.setAttribute("sandbox", Wr(n.sandbox)), u.setAttribute("allow", n.sandbox?.clipboardWrite ? "clipboard-write" : ""), u.style.width = "100%", u.style.border = "none", u.style.display = "block", u.style.position = "absolute", u.style.pointerEvents = "auto", u.style.background = "var(--md-iframe-background, #fff)", u.style.height = `${n.initialHeight ?? 120}px`, e.park(u), u.addEventListener("blur", () => {
       const d = this.editor;
       d && !d.visible && this.pool.release(d);
     }), this.iframe = u, u.className = "md-iframe-frame", this._toolbar = document.createElement("div"), this._toolbar.className = "md-iframe-toolbar", this._toolbar.setAttribute("data-md-editor-chrome", ""), this._toolbar.setAttribute("role", "toolbar"), this._toolbar.setAttribute("aria-label", "Embedded editor presentation"), this._resetHeightButton = this._addButton("Automatic height", "discard", () => this.editor?.resetHeight()), this._fullWidthButton = this._addButton("Full width", "arrow-both", () => this.editor?.toggleFullWidth()), this._fullViewButton = this._addButton("Full view", "screen-full", () => this.editor?.toggleFullView()), this._toolbar.addEventListener("keydown", (d) => {
@@ -7358,7 +7358,7 @@ class Dl {
         return;
       }
       l?.type !== Xe || typeof l.height != "number" || !Number.isFinite(l.height) || this._applyReportedHeight(l.height);
-    }, window.addEventListener("message", this._onWindowMessage), i.appendChild(u), i.append(this._toolbar, this._resizeHandle), this._toolbar.hidden = !0, this._resizeHandle.hidden = !0, queueMicrotask(() => this._setup());
+    }, window.addEventListener("message", this._onWindowMessage), this._surface.append(u, this._toolbar, this._resizeHandle), i.appendChild(this._surface), this._surface.hidden = !0, this._toolbar.hidden = !0, this._resizeHandle.hidden = !0, queueMicrotask(() => this._setup());
   }
   iframe;
   editor;
@@ -7369,6 +7369,7 @@ class Dl {
   _reportedHeight;
   _disposed = !1;
   _onWindowMessage;
+  _surface;
   _toolbar;
   _fullWidthButton;
   _fullViewButton;
@@ -7390,7 +7391,7 @@ class Dl {
       return;
     e.exitFullView(), this._endResize();
     const n = e.estimateHeight();
-    this.editor = void 0, e.mountActions(), e.unbindFrame(n), this.pool.park(this.iframe), this._toolbar.hidden = !0, this._resizeHandle.hidden = !0;
+    this.editor = void 0, e.mountActions(), e.unbindFrame(n), this.pool.park(this.iframe), this._surface.hidden = !0, this._toolbar.hidden = !0, this._resizeHandle.hidden = !0;
   }
   layout(e) {
     if (this.editor !== e)
@@ -7399,8 +7400,10 @@ class Dl {
       this._frameRoot,
       s.left - (i ? 0 : r.left),
       (o ? s.top : n.top) - (i ? 0 : r.top)
-    ), c = st(this._frameRoot, s.width, s.height), u = a.y + (i ? window.scrollY : this._frameRoot.scrollTop), d = a.x + (i ? window.scrollX : this._frameRoot.scrollLeft), l = c.x, h = o ? Math.max(1, c.y) : e.inlineHeight, p = o ? "10" : "";
-    this.iframe.style.zIndex = p, this._toolbar.style.zIndex = o ? "11" : "1", this._resizeHandle.style.zIndex = p, this.iframe.style.top = `${u}px`, this.iframe.style.left = `${d}px`, this.iframe.style.right = "", this.iframe.style.width = `${l}px`, this.iframe.style.height = `${h}px`, this._toolbar.hidden = e.toolbarHeight === 0, this._toolbar.classList.toggle("md-iframe-toolbar-full-view", o), e.mountActions(this._toolbar.hidden ? void 0 : this._toolbar), this._toolbar.style.top = `${u + 6}px`, this._toolbar.style.left = `${d + l - 6}px`, this._toolbar.style.maxWidth = `${Math.max(0, l - 12)}px`, this._toolbar.style.height = `${e.toolbarHeight}px`, this._fullWidthButton.hidden = !e.presentation.fullWidth || o, this._fullWidthButton.setAttribute("aria-pressed", String(e.mode === "full-width")), this._fullViewButton.hidden = !e.presentation.fullView, this._setButtonAppearance(this._fullViewButton, o ? "Exit full view" : "Full view", o ? "screen-normal" : "screen-full"), this._fullViewButton.setAttribute("aria-pressed", String(o)), this._resetHeightButton.hidden = !e.presentation.resizable || o, this._resizeHandle.hidden = !e.presentation.resizable || o, this._resizeHandle.style.top = `${u + h}px`, this._resizeHandle.style.left = `${d}px`, this._resizeHandle.style.width = `${l}px`, this._resizeHandle.style.height = `${e.handleHeight}px`, this._resizeHandle.setAttribute("aria-valuenow", String(Math.round(h))), this._resizeHandle.setAttribute("aria-valuemin", String(e.presentation.minHeight ?? 1)), this._resizeHandle.setAttribute("aria-valuemax", String(Ut));
+    ), c = st(this._frameRoot, s.width, s.height), u = a.y + (i ? window.scrollY : this._frameRoot.scrollTop), d = a.x + (i ? window.scrollX : this._frameRoot.scrollLeft), l = c.x, h = o ? Math.max(1, c.y) : e.inlineHeight;
+    this._surface.hidden = !1, this._surface.style.top = `${u}px`, this._surface.style.left = `${d}px`, this._surface.style.width = `${l}px`, this._surface.style.height = `${h + (o ? 0 : e.handleHeight)}px`, this._surface.style.zIndex = o ? "10" : "";
+    const p = o ? "10" : "";
+    this.iframe.style.zIndex = p, this._toolbar.style.zIndex = o ? "11" : "1", this._resizeHandle.style.zIndex = p, this.iframe.style.top = "0", this.iframe.style.left = "0", this.iframe.style.right = "", this.iframe.style.width = `${l}px`, this.iframe.style.height = `${h}px`, this._toolbar.hidden = e.toolbarHeight === 0, this._toolbar.classList.toggle("md-iframe-toolbar-full-view", o), e.mountActions(this._toolbar.hidden ? void 0 : this._toolbar), this._toolbar.style.top = "6px", this._toolbar.style.left = `${l - 6}px`, this._toolbar.style.maxWidth = `${Math.max(0, l - 12)}px`, this._toolbar.style.height = `${e.toolbarHeight}px`, this._fullWidthButton.hidden = !e.presentation.fullWidth || o, this._fullWidthButton.setAttribute("aria-pressed", String(e.mode === "full-width")), this._fullViewButton.hidden = !e.presentation.fullView, this._setButtonAppearance(this._fullViewButton, o ? "Exit full view" : "Full view", o ? "screen-normal" : "screen-full"), this._fullViewButton.setAttribute("aria-pressed", String(o)), this._resetHeightButton.hidden = !e.presentation.resizable || o, this._resizeHandle.hidden = !e.presentation.resizable || o, this._resizeHandle.style.top = `${h}px`, this._resizeHandle.style.left = "0", this._resizeHandle.style.width = `${l}px`, this._resizeHandle.style.height = `${e.handleHeight}px`, this._resizeHandle.setAttribute("aria-valuenow", String(Math.round(h))), this._resizeHandle.setAttribute("aria-valuemin", String(e.presentation.minHeight ?? 1)), this._resizeHandle.setAttribute("aria-valuemax", String(Ut));
   }
   get reportedHeight() {
     return this._reportedHeight;
@@ -7441,7 +7444,7 @@ class Dl {
     this._drag = void 0, this.editor && (this.editor.resizing = !1), this.iframe.style.pointerEvents = "auto", e && this._resizeHandle.hasPointerCapture(e.pointerId) && this._resizeHandle.releasePointerCapture(e.pointerId);
   }
   dispose() {
-    this._disposed || (this._disposed = !0, this.unbind(), window.removeEventListener("message", this._onWindowMessage), this._host?.dispose(), this._transport?.dispose(), this._hostTransport?.dispose(), this.iframe.remove(), this._toolbar.remove(), this._resizeHandle.remove());
+    this._disposed || (this._disposed = !0, this.unbind(), window.removeEventListener("message", this._onWindowMessage), this._host?.dispose(), this._transport?.dispose(), this._hostTransport?.dispose(), this.iframe.remove(), this._toolbar.remove(), this._resizeHandle.remove(), this._surface.remove());
   }
   _setup() {
     if (this._disposed)