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

package/dist/web-editors.d.ts

@@ -72,6 +72,8 @@ declare interface IEmbeddedCodeEditorFactory {
      * back to the default (highlighting / {@link BlockViewOptions.renderCustomCodeBlock}).
      */
     create(language: string, infoString: string, initialContent: string): IEmbeddedCodeEditor | undefined;
+    /** Reposition overlays after the document's layout has been measured. */
+    layout?(): void;
 }
 
 export declare type IframeEditorPresentationMode = 'inline' | 'full-width' | 'full-view';
@@ -142,6 +144,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;
@@ -332,6 +335,7 @@ export declare class VirtualizedIframeEmbeddedEditorFactory implements IEmbedded
     private _ensureFrameRoot;
     private _setFrameRoot;
     private readonly _scheduleLayout;
+    layout(): void;
     private _disposePools;
 }
 

package/dist/web-editors.js

@@ -7126,11 +7126,13 @@ class Wl {
   }
   _scheduleLayout = () => {
     this._layoutFrame || (this._layoutFrame = requestAnimationFrame(() => {
-      this._layoutFrame = 0;
-      for (const e of this._pools.values())
-        e.layout();
+      this._layoutFrame = 0, this.layout();
     }));
   };
+  layout() {
+    for (const e of this._pools.values())
+      e.layout();
+  }
   _disposePools() {
     for (const e of this._pools.values())
       e.dispose();
@@ -7323,9 +7325,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 +7360,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 +7371,7 @@ class Dl {
   _reportedHeight;
   _disposed = !1;
   _onWindowMessage;
+  _surface;
   _toolbar;
   _fullWidthButton;
   _fullViewButton;
@@ -7390,7 +7393,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 +7402,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 +7446,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)