Addon-docs: can't set link with absolute path.

[ezhikov]

Describe the bug When I try add link to some external page, either with markdown or anchor element, this URL automatically added to path parameter instead. On other hand, if I add URL without leading slash, it works as expected - as relative link.

To Reproduce Steps to reproduce the behavior:

1. Create new or open existing .mdx doc.
2. Add link to some external page, e.g. /example/:

   [absolute example](/example/)
   [relative example](example/)

3. Go to this page in started or builded storybook
4. First link points to ?path=/example/, and second points to %storybook_path%/example

Expected behavior

1. Both links should work similarly. Either point to pages inside storybook, or to external pages
2. There should be clear way to add links to other parts within same domain.

Screenshots

Code snippets

[absolute example](/example/)
<a href="/example">absolute example</a>
[relative example](example/)
<a href="example">relative example</a>

System:

$ npx -p @storybook/cli@next sb info

Environment Info:

  System:
    OS: Linux 4.19 Ubuntu 18.04.3 LTS (Bionic Beaver)
    CPU: (8) x64 Intel(R) Core(TM) i5-8250U CPU @ 1.60GHz
  Binaries:
    Node: 10.16.3 - ~/.nodenv/versions/10/bin/node
    Yarn: 1.19.1 - /usr/bin/yarn
    npm: 6.9.0 - ~/.nodenv/versions/10/bin/npm
  npmPackages:
    @storybook/addon-a11y: ^5.3.0-beta.10 => 5.3.0-beta.10
    @storybook/addon-docs: ^5.3.0-beta.10 => 5.3.0-beta.10
    @storybook/preset-typescript: ^1.1.0 => 1.1.0
    @storybook/react: ^5.3.0-beta.10 => 5.3.0-beta.10

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[ezhikov]

Hi. This issue still bugging me, but I don't have time at the moment to look at it myself. I believe in a week or two I'll be able to give it a shot.

[jorenbroekema]

I think I have the same issue. In .mdx I got the following: [bug in axios](https://github.com/axios/axios/issues/385)

and it turns into: <a href="http://localhost:9002https://github.com/axios/axios/issues/385" class="sbdocs sbdocs-a css-1cvpre6">bug in axios</a>

[jorenbroekema]

Any idea if this will get fixed for 5.3.0? Can I help somehow? If so, please point me in the direction if you guys know where the source of the issue may be. Is it in MDX to JS or in addon-docs?

It's quite important for our documentation to be able to link to external pages..

[shilman]

@jorenbroekema I'm working on some linking related stuff now and will fold this in (if it's not already fixed -- it might be). Thanks for the nudge!

[chris-dura]

Stumbled across this issue again, I'm sure there's a fix coming, but wanted to post the only workaround I have found for my set up, in case it helps someone else... I basically had to use pure HTML instead of the Markdown syntax, and use target="_blank" :/

import { Meta } from '@storybook/addon-docs/blocks';

<Meta title="Get Started/Introduction"/>

<!-- doesn't work -->
See our [live demo](/demo/).

<!-- sorta works -->
See our <a href="../demo/" target="_blank">live demo</a>.

[stefan-schweiger]

Can we still expect this issue to get fixed? It's pretty annoying if you try to link to external documentation

[shilman]

@stefan-schweiger Do you have a fix for this issue? PRs very welcome!

[stefan-schweiger]

@shilman any pointers where this functionality is located in the code?

Btw the mentioned workaround with the anchor-tag only works for external URL like https://github.com but not for absolute URL like /myapp/profile this still gets converted to http://<storybook url>/iframe.html?path=/myapp/profile

[shilman]

Not 100% sure but I'd check here first:

https://github.com/storybookjs/storybook/blob/next/addons/docs/src/blocks/mdx.tsx#L52

[stefan-schweiger]

@shilman ok I've identified where this is happening, it's actually at this line where absolute links get identified as "storybookPath" https://github.com/storybookjs/storybook/blob/643e7eb011a880e2b4b8d82ad360752aa9461dd6/lib/components/src/typography/DocumentFormatting.tsx#L74

Since this only matches absolute links I'm not 100% why this is done and if this is done on purpose. But it doesn't make a whole lot of sense to me, because therefore all links not starting with / are no "storybookPaths"? Do you maybe have any insight on this?

[stefan-schweiger]

The mdx example has the following kinds of links:

[external link](https://hichroma.com)
[external link with title](https://hichroma.com 'Insert title!')
[link to in page anchor](#h1-heading)
[link to another story (docs)](?path=/docs/addons-docs-docs-only--page)
[link to another story (canvas)](?path=/story/addons-docs-buttongroup--basic)
[link to about page](?path=/settings/about)
[link to absolute local url](/absolute)

Except the absolute link none of those should be affected if we would remove the code mentioned before. And the absolute links would finally work correctly.

But this could still mean breaking changes if somebody relied on the "incorrect" implementation for absolute urls (even though I can't think of a use case for this right now).

[reno1979]

Same problem here, then link inside our markdown file (typography)[?path=/story/foundation-typography--page] will result in http://localhost/iframe.html?path=/story/foundation-typography--page

[stefan-schweiger]

@reno1979 this shouldn't matter because as long as it stats with ?path= storybook/the iframe will resolve it internally if it's a valid and existing path. Those kind of links work for me without a problem (test them in the examples).

[reno1979]

@stefan-schweiger For us the created links do not work.

Removing the iframe.html part from the url is a valid path that works.

Where are working with storybook 6.2.9 I'll try some more tests, thanks for your input.

[stefan-schweiger]

@reno1979 do the links in this example work for you? https://storybookjs.netlify.app/official-storybook/?path=/story/addons-docs-markdown-docs--page

[reno1979]

@stefan-schweiger The example works. Our Storybook opens the story as if its a single page (no storybook logo, menu etc) And the url ends with &viewMode=story

Perhaps a configuration I should change.

[reno1979]

ok this is what happens:

[Typography](?path=/story/foundation-typography--page)

becomes:

http://localhost/iframe.html?path=/story/foundation-typography--page

and after loading the link, the new url is:

http://localhost/iframe.html?id=foundation-typography--page&viewMode=story

The content of the called mdx file is:

import { Meta, Typeset } from '@storybook/addon-docs/blocks';
import { init } from './typography.js';

<script>{init()}</script>

<Meta
  title="Foundation/Typography"
  parameters={{options: { isToolshown: false }, docsOnly:true, previewTabs:{ canvas: {hidden:true}}}}
 />

# Typography

And the direct link (from the storybook menu) works as expected.

http://localhost/?path=/story/foundation-typography--page

.storybook/main.js

module.exports = {
  stories: [
    '../stories/**/*.stories.mdx',
    '../stories/**/*.stories.@(js|jsx|ts|tsx)'
  ],
  addons: [
    '@storybook/addon-web-components',
    {
      name: '@storybook/addon-essentials',
      options: {
        actions: false
      }
    }
  ]
}

.storybook/manager.js

// .storybook/manager.js
import { addons } from '@storybook/addons';

addons.setConfig({
  enableShortcuts: false,
});

.storybook/preview.js

// .storybook/preview.js

/* Dependencies */
/* ------------ */
import { setCustomElements } from '@storybook/web-components';
/* ------------------- */
/* End of Dependencies */

/* Local variables */
/* --------------- */
import customElements from '@gls/kws/dist/custom-elements.json';
/* ------------------- */
/* End of Dependencies */

/* Local variables */
/* --------------- */
setCustomElements(customElements);
/* ---------------------- */
/* End of local variables */

/* PRIVATE */
/* ------- */

/* Public */
/* ------ */

export const parameters = {
  layout: 'centered',
  controls: { expanded: true },
  options: {
    storySort: {
      order: ['Getting started', 'Foundation', 'Buttons', 'Misc']
    }
  }
};

[reno1979]

@stefan-schweiger Updated our storybook to 6.3.3, still same behavior.

[alee8]

I am curious about the status of this issue. Are there plans to address this? I am running 6.4.12 and still annoyed that the only way is to right-click the link so that I can open it in another tab. Not something our users naturally think of doing.

[archfisv]

Same after bumping to 6.5.0-alpha.49

[rolaru]

Tried with Storybook 6.5.0-alpha.50 and this issue still reproduces. It's quite challenging because we have to write links in .mdx files using HTML syntax and character escaping for them to work properly (e.g.: <a target="_blank" href="https://www.somelink.com">https&#58;//www&#46;somelink.com</a>).

[archasek]

It's also a problem for me. I had to refactor all links, as they stopped working.

[shilman]

We’re cleaning house! Storybook has changed a lot since this issue was created and we don’t know if it’s still valid. Please open a new issue referencing this one if:

• this is still a problem in SB 7.x
• you can provide a consistent reproduction in 7.x (at https://storybook.new/ or per repro docs).