@vscode/markdown-editor 0.0.2-120 → 0.0.2-122

package/dist/web-editors.d.ts

@@ -138,7 +138,7 @@ declare class PhysicalIframe implements IDisposable {
     dispose(): void;
     private _setup;
     private _getThemeCss;
-    private _postTheme;
+    updateTheme(): void;
     private _applyReportedHeight;
 }
 
@@ -159,6 +159,7 @@ declare class PhysicalIframePool implements IDisposable {
     park(iframe: HTMLIFrameElement): void;
     dispose(): void;
     layout(): void;
+    updateTheme(): void;
     private _createFrame;
 }
 
@@ -259,6 +260,7 @@ export declare class VirtualizedIframeEmbeddedEditorFactory implements IEmbedded
     private _layoutObserver;
     private _layoutFrame;
     private readonly _observer;
+    private readonly _themeSubscription;
     private readonly _logicalEditors;
     private readonly _pools;
     private readonly _descriptorCache;
@@ -287,6 +289,8 @@ export declare interface VirtualizedIframeEmbeddedEditorOptions {
     readonly frameRoot?: HTMLElement;
     readonly scriptNonce?: string;
     readonly themeCss?: string | (() => string);
+    /** Notify existing frames when the CSS returned by themeCss changes. */
+    readonly onDidChangeTheme?: (listener: () => void) => IDisposable;
     /** Optional same-origin document URL to load before writing the iframe content. */
     readonly iframeBootstrapUrl?: string;
     readonly defaultHeight?: number;

package/dist/web-editors.js

@@ -6999,7 +6999,10 @@ class Dl {
     this._options = t, this._providers = t.providers, this._frameLayer = document.createElement("div"), this._frameLayer.style.position = "absolute", this._frameLayer.style.inset = "0", this._frameLayer.style.height = "0", this._frameLayer.style.pointerEvents = "none", this._frameLayer.style.zIndex = "1", t.frameRoot && this._setFrameRoot(t.frameRoot), this._observer = typeof IntersectionObserver > "u" ? void 0 : new IntersectionObserver((n) => {
       for (const r of n)
         Array.from(this._logicalEditors).find((i) => i.element === r.target)?.setVisible(r.isIntersecting);
-    }, { root: t.root ?? null });
+    }, { root: t.root ?? null }), this._themeSubscription = t.onDidChangeTheme?.(() => {
+      for (const n of this._pools.values())
+        n.updateTheme();
+    });
   }
   _frameLayer;
   _frameRoot;
@@ -7007,6 +7010,7 @@ class Dl {
   _layoutObserver;
   _layoutFrame = 0;
   _observer;
+  _themeSubscription;
   _logicalEditors = /* @__PURE__ */ new Set();
   _pools = /* @__PURE__ */ new Map();
   _descriptorCache = /* @__PURE__ */ new Map();
@@ -7056,7 +7060,7 @@ class Dl {
   }
   dispose() {
     if (!this._disposed) {
-      this._disposed = !0, this._observer?.disconnect(), this._layoutObserver?.disconnect(), cancelAnimationFrame(this._layoutFrame), window.removeEventListener("resize", this._scheduleLayout);
+      this._disposed = !0, this._observer?.disconnect(), this._themeSubscription?.dispose(), this._layoutObserver?.disconnect(), cancelAnimationFrame(this._layoutFrame), window.removeEventListener("resize", this._scheduleLayout);
       for (const t of Array.from(this._logicalEditors))
         t.dispose();
       this._disposePools(), this._frameLayer.remove(), this._frameRoot && this._restoreFrameRootPosition !== void 0 && (this._frameRoot.style.position = this._restoreFrameRootPosition);
@@ -7168,7 +7172,7 @@ class Rl {
   }
   applyHeight(t) {
     const n = Ft(t);
-    this.element.style.minHeight = `${n}px`, this.frame && (this.frame.iframe.style.height = `${n}px`, this.frame.layout(this));
+    this.element.style.minHeight = `${n}px`, this._frameHost.style.height = `${n}px`, this.frame && (this.frame.iframe.style.height = `${n}px`, this.frame.layout(this));
   }
   observeLayout(t) {
     t.observe(this.element);
@@ -7189,6 +7193,7 @@ class Rl {
     this.disposed || (this.disposed = !0, this._factory.remove(this), this.element.remove());
   }
   _renderFallback() {
+    this._frameHost.style.height = "";
     const t = document.createElement("pre"), n = document.createElement("code");
     n.textContent = this._content, t.appendChild(n), this._frameHost.replaceChildren(t);
   }
@@ -7228,6 +7233,10 @@ class Nl {
     for (const t of this._frames)
       t.editor && t.layout(t.editor);
   }
+  updateTheme() {
+    for (const t of this._frames)
+      t.updateTheme();
+  }
   _createFrame() {
     const t = this.descriptor.hostTransport ? this._provider.createHostTransport?.(this.descriptor.runtimeKey) : void 0, n = new Cl(
       this,
@@ -7282,7 +7291,7 @@ class Cl {
   layout(t) {
     if (this.editor !== t)
       return;
-    const n = t.element.getBoundingClientRect(), r = this._frameRoot.getBoundingClientRect(), o = this._frameRoot === document.body, i = o ? n.top + window.scrollY : n.top - r.top + this._frameRoot.scrollTop, s = o ? n.left + window.scrollX : n.left - r.left + this._frameRoot.scrollLeft;
+    const n = t.frameHost.getBoundingClientRect(), r = this._frameRoot.getBoundingClientRect(), o = this._frameRoot === document.body, i = o ? n.top + window.scrollY : n.top - r.top + this._frameRoot.scrollTop, s = o ? n.left + window.scrollX : n.left - r.left + this._frameRoot.scrollLeft;
     this.iframe.style.top = `${i}px`, this.iframe.style.left = `${s}px`, this.iframe.style.right = "", this.iframe.style.width = `${n.width}px`;
   }
   dispose() {
@@ -7304,7 +7313,7 @@ class Cl {
       initialText: r?.content ?? "",
       readOnly: r?.readOnly ?? !1,
       hostTransport: this._hostTransport
-    }), this._host.onDidChangeText(({ text: i }) => this.editor?.applyGuestText(i)), this._host.onDidReportSize(({ height: i }) => this._applyReportedHeight(i)), this.iframe.addEventListener("load", () => this._postTheme(), { once: !0 });
+    }), this._host.onDidChangeText(({ text: i }) => this.editor?.applyGuestText(i)), this._host.onDidReportSize(({ height: i }) => this._applyReportedHeight(i)), this.iframe.addEventListener("load", () => this.updateTheme(), { once: !0 });
     const o = Zl(
       this._descriptor.html,
       this._descriptor.resourceBaseUrl,
@@ -7319,7 +7328,7 @@ class Cl {
   _getThemeCss() {
     return typeof this._themeCss == "function" ? this._themeCss() : this._themeCss;
   }
-  _postTheme() {
+  updateTheme() {
     const t = this._getThemeCss();
     t !== void 0 && this.iframe.contentWindow?.postMessage({ type: Xe, themeCss: t }, "*");
   }