Fix inline images (#710)

* Document inline images and build instructions

* FIX: Inline images now work

* Fix inline images and centered figure captions

* Fix dev index link

* Address comments

* Remove local build fix doc because stefan wants me to ;-)

* Apply suggestion from @choldgraf

* Apply suggestion from @choldgraf

* Fix centered image margin bug

* Vertical align inline images to text-bottom

* Remove figures changes

* chore: fix changeset

---------

Co-authored-by: Angus Hollands <[email protected]>

Author: choldgraf

.changeset/yellow-taxis-peel.md

@@ -0,0 +1,6 @@
+---
+'myst-to-react': patch
+'@myst-theme/styles': patch
+---
+
+Fix inline images and centered figure captions

docs/reference/blocks.md

@@ -14,6 +14,13 @@ def hello_world():
     return True
 ```
 
+```{code-block} python
+:caption: This is a caption for my code block!
+def hello_world():
+    print("Hello, World!")
+    return True
+```
+
 ### Code Block with Line Numbers
 
 ```{code-block} python

docs/reference/images.md

@@ -4,10 +4,33 @@ title: Images & Figures
 
 # Images & Figures
 
+
 ## Basic Image
 
+Here's an image in block form:
+
 ![MyST Logo](../_static/myst-logo-light.svg)
 
+## Inline Images
+
+Text before ![MyST Logo](../_static/myst-logo-light.svg) text after. This image should appear inline with the text, without line breaks before or after it.
+
+### Inline in lists
+
+- Text before ![MyST Logo](../_static/myst-logo-light.svg) text after within a list item.
+- Second item without an image for comparison.
+
+### Inline in tables
+
+| Description | Inline image |
+| ----------- | ------------ |
+| Text before ![MyST Logo](../_static/myst-logo-light.svg) text after | Works inside table cells too |
+
+### Inline in definition lists
+
+Term with logo
+: Text before ![MyST Logo](../_static/myst-logo-light.svg) text after inside a definition description.
+
 ## Figure with Caption
 
 :::{figure} ../_static/myst-logo-light.svg

packages/myst-to-react/src/image.tsx

@@ -32,7 +32,7 @@ function alignToMargin(align: string) {
     case 'right':
       return { marginLeft: 'auto' };
     case 'center':
-      return { margin: '0 auto' };
+      return { marginLeft: 'auto', marginRight: 'auto' };
     default:
       return {};
   }

styles/typography.css

@@ -35,9 +35,17 @@
   .prose dd {
     @apply ml-8;
   }
-  .prose p img {
+  /* Keep inline images inside text flow from forcing line breaks */
+  .article p img,
+  .article table img,
+  .article dd img,
+  .prose p img,
+  .prose table img,
+  .prose dd img {
     margin: 0;
     display: inline-block;
+    max-height: 1.2em;
+    vertical-align: text-bottom;
   }
   article.content {
     min-height: calc(100vh);