fix: gracefully handle missing image references (quantizor#554)

Closes quantizor#524

Signed-off-by: Innei <i@innei.in>

index.compiler.spec.tsx

@@ -755,6 +755,20 @@ describe('images', () => {
     `)
   })
 
+  it('should gracefully handle an empty image reference', () => {
+    render(
+      compiler(theredoc`
+        ![][1]
+        [2]: /xyz.png
+      `)
+    )
+
+    expect(root.innerHTML).toMatchInlineSnapshot(`
+      <p>
+      </p>
+    `)
+  })
+
   it('should handle an image reference with alt text', () => {
     render(
       compiler(theredoc`
@@ -890,6 +904,23 @@ describe('links', () => {
     `)
   })
 
+  it('should gracefully handle an empty link reference', () => {
+    render(
+      compiler(theredoc`
+        [][1]
+        [2]: foo
+      `)
+    )
+
+    expect(root.innerHTML).toMatchInlineSnapshot(`
+      <p>
+        <span>
+          [][1]
+        </span>
+      </p>
+    `)
+  })
+
   it('list item should break paragraph', () => {
     render(compiler('foo\n- item'))
 

index.tsx

@@ -1799,14 +1799,14 @@ export function compiler(
         }
       },
       react(node, output, state) {
-        return (
+        return refs[node.ref] ? (
           <img
             key={state.key}
             alt={node.alt}
             src={sanitizeUrl(refs[node.ref].target)!}
             title={refs[node.ref].title}
           />
-        )
+        ) : null
       },
     } as MarkdownToJSX.Rule<{ alt?: string; ref: string }>,