Merge pull request #32577 from github/repo-sync

Repo sync

src/content-render/stylesheets/images.scss

@@ -1,32 +0,0 @@
-.markdown-body .procedural-image-wrapper {
-  display: block;
-  padding: 1rem 0;
-  margin: 1rem 0;
-  border: none;
-  max-width: calc(100% - 2rem);
-
-  img {
-    width: auto;
-    height: auto;
-    max-height: 32rem;
-    padding: 0;
-    box-shadow: var(--color-shadow-medium);
-  }
-
-  img[src*="https://github.githubassets.com/images/icons/emoji"]
-  {
-    box-shadow: none;
-  }
-}
-
-.markdown-body img {
-  max-height: 32rem;
-  padding: 0;
-}
-
-// make sure images that contain emoji render at the expected size
-.markdown-body img[src*="https://github.githubassets.com/images/icons/emoji"]
-{
-  height: 20px;
-  width: 20px;
-}

src/content-render/stylesheets/index.scss

@@ -1,6 +1,5 @@
 @import "annotate.scss";
 @import "heading-links.scss";
-@import "images.scss";
 @import "markdown-overrides.scss";
 @import "syntax-highlighting.scss";
 @import "alerts.scss";

src/content-render/unified/wrap-procedural-images.js

@@ -11,7 +11,7 @@ import { visitParents } from 'unist-util-visit-parents'
  *
  *   <ol>
  *     <li>
- *       <span class="procedural-image-wrapper">
+ *       <div class="procedural-image-wrapper">
  *         <img src="..." />
  *
  *
@@ -33,7 +33,7 @@ function insideOlLi(ancestors) {
 function visitor(node, ancestors) {
   if (insideOlLi(ancestors)) {
     const shallowClone = Object.assign({}, node)
-    shallowClone.tagName = 'span'
+    shallowClone.tagName = 'div'
     shallowClone.properties = { class: 'procedural-image-wrapper' }
     shallowClone.children = [node]
     const parent = ancestors.at(-1)

src/fixtures/tests/images.js

@@ -45,7 +45,7 @@ describe('render Markdown image tags', () => {
   test('image inside a list keeps its span', async () => {
     const $ = await getDOM('/get-started/images/images-in-lists')
 
-    const imageSpan = $('#article-contents > div > ol > li > span.procedural-image-wrapper')
+    const imageSpan = $('#article-contents > div > ol > li > div.procedural-image-wrapper')
     expect(imageSpan.length).toBe(1)
   })
 

src/frame/components/ui/MarkdownContent/MarkdownContent.module.scss

@@ -2,6 +2,7 @@
 @import "./stylesheets/headers.scss";
 @import "./stylesheets/lists.scss";
 @import "./stylesheets/table.scss";
+@import "./stylesheets/images.scss";
 
 .markdownBody {
   :not(h1, h2, h3, h4, h5, h6, [role="tablist"]) {

src/frame/components/ui/MarkdownContent/stylesheets/images.scss

@@ -0,0 +1,20 @@
+.markdownBody {
+  // All non-emoji screenshots get the same shadow and height constraint
+  img:not([src*="https://github.githubassets.com/images/icons/emoji"])
+  {
+    max-height: 32rem;
+    box-shadow: var(--color-shadow-medium);
+  }
+
+  // Make sure images that contain emoji render at the expected size
+  img[src*="https://github.githubassets.com/images/icons/emoji"]
+  {
+    height: 20px;
+    width: 20px;
+  }
+
+  // For when writers don't leave an empty line and there's no `p` tag preceding the image
+  :global(.procedural-image-wrapper) {
+    margin: 1rem 0;
+  }
+}