fix: do not add target blank to urls that start with # in markdown (#235

)
histoire-dev · Aug 12, 2022 · 4abb77f · 4abb77f
1 parent efcf607
commit 4abb77f
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 3 deletions.
diff --git a/examples/vue3/cypress/integration/markdown-links.js b/examples/vue3/cypress/integration/markdown-links.js
@@ -0,0 +1,13 @@
+/// <reference types="cypress" />
+
+describe('Markdown links', () => {
+  it('should be just #welcome and not contain attribute target="_blank"', () => {
+    cy.visit('/story/src-components-markdownlinks-story-vue?variantId=_default')
+    cy.get('#link-to-welcome').should('have.attr', 'href', '#welcome').should('not.have.attr', 'target')
+  })
+
+  it('should have target="_blank" set when they external', () => {
+    cy.visit('/story/src-components-markdownlinks-story-vue?variantId=_default')
+    cy.get('#link-to-history').should('have.attr', 'href', 'https://histoire.dev/').should('have.attr', 'target', '_blank')
+  })
+})
diff --git a/examples/vue3/cypress/integration/search.js b/examples/vue3/cypress/integration/search.js
@@ -48,7 +48,7 @@ describe('Search', () => {
     cy.visit('/')
     cy.get('[data-test-id="search-btn"]').click()
     cy.get('[data-test-id="search-modal"] input').type('welcome')
-    cy.get('[data-test-id="search-item"]').should('have.length', 1)
+    cy.get('[data-test-id="search-item"]').should('have.length', 2)
     cy.get('[data-test-id="search-item"]').contains('Introduction')
   })
 })
diff --git a/examples/vue3/cypress/integration/stories-list.js b/examples/vue3/cypress/integration/stories-list.js
@@ -4,7 +4,7 @@ describe('Stories list', () => {
   it('should display the stories', () => {
     cy.clearLocalStorage()
     cy.visit('/')
-    cy.get('[data-test-id="story-list-item"]').should('have.length', 23)
+    cy.get('[data-test-id="story-list-item"]').should('have.length', 24)
     cy.get('[data-test-id="story-list-item"]').contains('🐱 Meow')
     cy.get('[data-test-id="story-list-item"]').contains('BaseButton')
       .contains('3') // Variants count

diff --git a/examples/vue3/src/components/MarkdownLinks.story.vue b/examples/vue3/src/components/MarkdownLinks.story.vue
@@ -0,0 +1,15 @@
+<template>
+  <Story
+    group="top"
+    docs-only
+    icon="carbon:bookmark"
+  />
+</template>
+
+<docs lang="md">
+[Link to welcome header](#welcome){id="link-to-welcome"}
+
+# Welcome
+
+This is just a link to [Histoire.dev](https://histoire.dev/){id="link-to-history"}.
+</docs>
diff --git a/packages/histoire/src/node/markdown.ts b/packages/histoire/src/node/markdown.ts
@@ -36,7 +36,7 @@ export async function createMarkdownRenderer () {
       const hrefIndex = tokens[idx].attrIndex('href')
       const classIndex = tokens[idx].attrIndex('class')
 
-      if (hrefIndex >= 0 && !tokens[idx].attrs[hrefIndex][1].startsWith('/') && (classIndex < 0 || !tokens[idx].attrs[classIndex][1].includes('header-anchor'))) {
+      if (hrefIndex >= 0 && !tokens[idx].attrs[hrefIndex][1].startsWith('/') && !tokens[idx].attrs[hrefIndex][1].startsWith('#') && (classIndex < 0 || !tokens[idx].attrs[classIndex][1].includes('header-anchor'))) {
         // If you are sure other plugins can't add `target` - drop check below
         const aIndex = tokens[idx].attrIndex('target')