From eb411d0b4c94d9addb505e7d8cae9c4a73b0bf5d Mon Sep 17 00:00:00 2001
From: Rowan Cockett <rowanc1@gmail.com>
Date: Tue, 29 Oct 2024 13:30:34 -0600
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=87=20Placeholder=20for=20iFrame=20(#1?=
 =?UTF-8?q?609)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .changeset/cool-suits-repair.md        |  7 +++++++
 packages/myst-directives/src/iframe.ts | 19 ++++++++++++++++++-
 packages/myst-spec-ext/src/types.ts    |  1 +
 packages/myst-to-typst/src/index.ts    | 13 +++++++++++++
 4 files changed, 39 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/cool-suits-repair.md

diff --git a/.changeset/cool-suits-repair.md b/.changeset/cool-suits-repair.md
new file mode 100644
index 000000000..bea29b693
--- /dev/null
+++ b/.changeset/cool-suits-repair.md
@@ -0,0 +1,7 @@
+---
+"myst-directives": patch
+"myst-spec-ext": patch
+"myst-to-typst": patch
+---
+
+Allow for iframe to have a placeholder
diff --git a/packages/myst-directives/src/iframe.ts b/packages/myst-directives/src/iframe.ts
index 496f42ef6..5a2d8f477 100644
--- a/packages/myst-directives/src/iframe.ts
+++ b/packages/myst-directives/src/iframe.ts
@@ -1,4 +1,4 @@
-import type { Iframe } from 'myst-spec-ext';
+import type { Iframe, Image } from 'myst-spec-ext';
 import type { DirectiveSpec, DirectiveData, GenericNode } from 'myst-common';
 import { addCommonDirectiveOptions, commonDirectiveOptions } from './utils.js';
 
@@ -23,6 +23,10 @@ export const iframeDirective: DirectiveSpec = {
       type: String,
       doc: 'The alignment of the iframe in the page. Choose one of `left`, `center` or `right`',
     },
+    placeholder: {
+      type: String,
+      doc: 'A placeholder image for the iframe in static exports.',
+    },
   },
   body: { type: 'myst', doc: 'If provided, this will be the iframe caption.' },
   run(data: DirectiveData): GenericNode[] {
@@ -32,6 +36,19 @@ export const iframeDirective: DirectiveSpec = {
       width: data.options?.width as string,
       align: data.options?.align as Iframe['align'],
     };
+    if (data.options?.placeholder) {
+      iframe.children = [
+        {
+          type: 'image',
+          placeholder: true,
+          url: data.options.placeholder as string,
+          alt: data.options?.alt as string,
+          width: data.options?.width as string,
+          height: data.options?.height as string,
+          align: data.options?.align as Image['align'],
+        } as Image,
+      ];
+    }
     if (!data.body) {
       iframe.class = data.options?.class as string;
       addCommonDirectiveOptions(data, iframe);
diff --git a/packages/myst-spec-ext/src/types.ts b/packages/myst-spec-ext/src/types.ts
index d50007c59..b808b82be 100644
--- a/packages/myst-spec-ext/src/types.ts
+++ b/packages/myst-spec-ext/src/types.ts
@@ -125,6 +125,7 @@ export type Iframe = Target & {
   width?: string;
   align?: Image['align'];
   class?: Image['class'];
+  children?: Image[];
 };
 
 export type Admonition = SpecAdmonition & {
diff --git a/packages/myst-to-typst/src/index.ts b/packages/myst-to-typst/src/index.ts
index 5ecdfd734..419d6f5cf 100644
--- a/packages/myst-to-typst/src/index.ts
+++ b/packages/myst-to-typst/src/index.ts
@@ -309,6 +309,19 @@ const handlers: Record<string, Handler> = {
     }
     state.write(')\n\n');
   },
+  iframe(node, state) {
+    const image = node.children?.[0];
+    if (!image || image.placeholder !== true) return;
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { width: nodeWidth, url: nodeSrc, align } = image;
+    const src = nodeSrc;
+    const width = getLatexImageWidth(nodeWidth);
+    state.write(`#image("${src}"`);
+    if (!state.data.isInTable) {
+      state.write(`, width: ${width}`);
+    }
+    state.write(')\n\n');
+  },
   container: containerHandler,
   caption: captionHandler,
   legend: captionHandler,