🎆 Keep IDs on images and videos (#349)

jupyter-book · Apr 5, 2024 · d824eed · d824eed
1 parent 4a43803
commit d824eed
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git a/.changeset/shy-snakes-juggle.md b/.changeset/shy-snakes-juggle.md
@@ -0,0 +1,5 @@
+---
+'myst-to-react': patch
+---
+
+Allow for id on an image/video
diff --git a/packages/myst-to-react/src/image.tsx b/packages/myst-to-react/src/image.tsx
@@ -38,12 +38,14 @@ function alignToMargin(align: string) {
 }
 
 function Video({
+  id,
   src,
   urlSource,
   align = 'center',
   width,
   height,
 }: {
+  id?: string;
   src: string;
   urlSource?: string;
   width?: string;
@@ -52,6 +54,7 @@ function Video({
 }) {
   return (
     <video
+      id={id}
       style={{
         width: getStyleValue(width),
         height: getStyleValue(height),
@@ -70,6 +73,7 @@ function Video({
 }
 
 function Picture({
+  id,
   src,
   srcOptimized,
   urlSource,
@@ -78,6 +82,7 @@ function Picture({
   width,
   height,
 }: {
+  id?: string;
   src: string;
   srcOptimized?: string;
   urlSource?: string;
@@ -87,10 +92,13 @@ function Picture({
   align?: Alignment;
 }) {
   if (src.endsWith('.mp4') || urlSource?.endsWith('.mp4')) {
-    return <Video width={width} height={height} align={align} src={src} urlSource={urlSource} />;
+    return (
+      <Video id={id} width={width} height={height} align={align} src={src} urlSource={urlSource} />
+    );
   }
   const image = (
     <img
+      id={id}
       style={{
         width: getStyleValue(width),
         height: getStyleValue(height),
@@ -113,6 +121,7 @@ function Picture({
 export const Image: NodeRenderer<ImageNode> = ({ node }) => {
   return (
     <Picture
+      id={node.html_id || node.identifier || node.key}
       src={node.url}
       srcOptimized={(node as any).urlOptimized}
       alt={node.alt || node.title}