Merge pull request #10 from HiDeoo/hd-no-alt-image-dimensions

HiDeoo · Mar 24, 2024 · 0385b40 · 0385b40
2 parents 7118857 + 6718971
commit 0385b40
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 3 deletions.
diff --git a/fixtures/basics/External images with dimensions.md b/fixtures/basics/External images with dimensions.md
@@ -3,3 +3,5 @@
 ![External image with a width|50](https://history-computer.com/ModernComputer/Basis/images/Engelbart.jpg)
 
 ![External image with a width and a height|50x200](https://history-computer.com/ModernComputer/Basis/images/Engelbart.jpg)
+
+![100](https://history-computer.com/ModernComputer/Basis/images/Engelbart.jpg)
diff --git a/fixtures/basics/Internal images with dimensions.md b/fixtures/basics/Internal images with dimensions.md
@@ -3,3 +3,5 @@
 ![[An image.png|An image with a width|100]]
 
 ![[An image.png|An image with a width and a height|100x200]]
+
+![[An image.png|125]]
diff --git a/packages/starlight-obsidian/libs/remark.ts b/packages/starlight-obsidian/libs/remark.ts
@@ -38,7 +38,7 @@ const commentReplacementRegex = /%%(?<comment>(?:(?!%%).)+)%%/gs
 const wikilinkReplacementRegex = /!?\[\[(?<url>(?:(?![[\]|]).)+)(?:\|(?<maybeText>(?:(?![[\]]).)+))?]]/g
 const tagReplacementRegex = /(?:^|\s)#(?<tag>[\w/-]+)/g
 const calloutRegex = /^\[!(?<type>\w+)][+-]? ?(?<title>.*)$/
-const imageSizeRegex = /^(?<altText>.*)\|(?:(?<widthOnly>\d+)|(?:(?<width>\d+)x(?<height>\d+)))$/
+const imageSizeRegex = /^(?:(?<altText>.*)\|)?(?:(?<widthOnly>\d+)|(?:(?<width>\d+)x(?<height>\d+)))$/
 
 const asideDelimiter = ':::'
 
@@ -534,6 +534,7 @@ function handleImagesWithSize(node: Image, context: VisitorContext, type: 'asset
     return
   }
 
+  const imgAltText = altText ?? ''
   const imgWidth = widthOnly ?? width
   const imgHeight = height ?? 'auto'
   // Workaround Starlight `auto` height default style.
@@ -542,7 +543,7 @@ function handleImagesWithSize(node: Image, context: VisitorContext, type: 'asset
   if (type === 'external') {
     replaceNode(context, {
       type: 'html',
-      value: `<img src="${node.url}" alt="${altText}" width="${imgWidth}" height="${imgHeight}"${imgStyle} />`,
+      value: `<img src="${node.url}" alt="${imgAltText}" width="${imgWidth}" height="${imgHeight}"${imgStyle} />`,
     })
   } else {
     const importId = generateAssetImportId()
@@ -556,7 +557,7 @@ function handleImagesWithSize(node: Image, context: VisitorContext, type: 'asset
     replaceNode(
       context,
       createMdxNode(
-        `<Image src={${importId}} alt="${altText}" width="${imgWidth}" height="${imgHeight}"${imgStyle} />`,
+        `<Image src={${importId}} alt="${imgAltText}" width="${imgWidth}" height="${imgHeight}"${imgStyle} />`,
       ),
     )
   }

diff --git a/packages/starlight-obsidian/tests/embeds.test.ts b/packages/starlight-obsidian/tests/embeds.test.ts
@@ -111,6 +111,8 @@ test('transforms external images with dimensions', async () => {
     <img src="https://history-computer.com/ModernComputer/Basis/images/Engelbart.jpg" alt="External image with a width" width="50" height="auto" />
 
     <img src="https://history-computer.com/ModernComputer/Basis/images/Engelbart.jpg" alt="External image with a width and a height" width="50" height="200" style="height: 200px !important;" />
+
+    <img src="https://history-computer.com/ModernComputer/Basis/images/Engelbart.jpg" alt="" width="100" height="auto" />
     "
   `)
 })
@@ -125,4 +127,5 @@ test('transforms internal images with dimensions', async () => {
   expect(result.content).toMatch(
     /^<Image src={\w+} alt="An image with a width and a height" width="100" height="200" style="height: 200px !important;" \/>$/m,
   )
+  expect(result.content).toMatch(/^<Image src={\w+} alt="" width="125" height="auto" \/>$/m)
 })