From 57eb6616c32f33972d725f60a6692d444cbb7fcb Mon Sep 17 00:00:00 2001
From: Franklin Koch <franklinwkoch@gmail.com>
Date: Sun, 8 Oct 2023 16:15:16 -0600
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=86=20Support=20inline=20property=20on?=
 =?UTF-8?q?=20image=20nodes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .changeset/clean-frogs-fail.md       |  5 +++++
 packages/myst-to-react/src/image.tsx | 14 +++++++++++++-
 2 files changed, 18 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/clean-frogs-fail.md

diff --git a/.changeset/clean-frogs-fail.md b/.changeset/clean-frogs-fail.md
new file mode 100644
index 000000000..0edb4233a
--- /dev/null
+++ b/.changeset/clean-frogs-fail.md
@@ -0,0 +1,5 @@
+---
+'myst-to-react': patch
+---
+
+Support inline property on image nodes
diff --git a/packages/myst-to-react/src/image.tsx b/packages/myst-to-react/src/image.tsx
index f6bfc6f76..26bef1203 100644
--- a/packages/myst-to-react/src/image.tsx
+++ b/packages/myst-to-react/src/image.tsx
@@ -37,18 +37,25 @@ function alignToMargin(align: string) {
   }
 }
 
+function inlineStyle(inline?: boolean) {
+  if (inline) return { display: 'inline' };
+  return {};
+}
+
 function Video({
   src,
   urlSource,
   align = 'center',
   width,
   height,
+  inline,
 }: {
   src: string;
   urlSource?: string;
   width?: string;
   height?: string;
   align?: Alignment;
+  inline?: boolean;
 }) {
   return (
     <video
@@ -56,6 +63,7 @@ function Video({
         width: getStyleValue(width),
         height: getStyleValue(height),
         ...alignToMargin(align),
+        ...inlineStyle(inline),
       }}
       src={src}
       data-canonical-url={urlSource}
@@ -77,6 +85,7 @@ function Picture({
   alt,
   width,
   height,
+  inline,
 }: {
   src: string;
   srcOptimized?: string;
@@ -85,6 +94,7 @@ function Picture({
   width?: string;
   height?: string;
   align?: Alignment;
+  inline?: boolean;
 }) {
   if (src.endsWith('.mp4')) {
     return <Video width={width} height={height} align={align} src={src} urlSource={urlSource} />;
@@ -95,6 +105,7 @@ function Picture({
         width: getStyleValue(width),
         height: getStyleValue(height),
         ...alignToMargin(align),
+        ...inlineStyle(inline),
       }}
       src={src}
       alt={alt}
@@ -103,7 +114,7 @@ function Picture({
   );
   if (!srcOptimized) return image;
   return (
-    <picture>
+    <picture style={{ ...inlineStyle(inline) }}>
       <source srcSet={srcOptimized} type="image/webp" />
       {image}
     </picture>
@@ -119,6 +130,7 @@ export const Image: NodeRenderer<ImageNode> = ({ node }) => {
       width={node.width || undefined}
       height={node.height || undefined}
       align={node.align}
+      inline={node.inline}
       // Note that sourceUrl is for backwards compatibility
       urlSource={(node as any).urlSource || (node as any).sourceUrl}
     />