change

Author: dmytrokirpa

change/@fluentui-react-storybook-addon-b114671d-8487-459e-ac61-bd859e51634b.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: add Copy as Markdown button to FluentDocsPage",
+  "packageName": "@fluentui/react-storybook-addon",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-storybook-addon/package.json

@@ -18,14 +18,18 @@
   "dependencies": {
     "@fluentui/react-aria": "^9.17.0",
     "@fluentui/react-button": "^9.6.6",
-    "@fluentui/react-menu": "^9.19.6",
+    "@fluentui/react-icons": "^2.0.245",
     "@fluentui/react-label": "^9.3.5",
-    "@fluentui/react-switch": "^9.4.5",
-    "@fluentui/react-text": "^9.6.5",
     "@fluentui/react-link": "^9.6.5",
+    "@fluentui/react-menu": "^9.19.6",
     "@fluentui/react-provider": "^9.22.5",
-    "@fluentui/react-utilities": "^9.24.1",
+    "@fluentui/react-shared-contexts": "^9.24.0",
+    "@fluentui/react-spinner": "^9.6.5",
+    "@fluentui/react-switch": "^9.4.5",
+    "@fluentui/react-text": "^9.6.5",
     "@fluentui/react-theme": "^9.2.0",
+    "@fluentui/react-toast": "^9.7.1",
+    "@fluentui/react-utilities": "^9.24.1",
     "@griffel/react": "^1.5.22",
     "@swc/helpers": "^0.5.1"
   },

packages/react-components/react-storybook-addon/src/docs/CopyAsMarkdownButton.tsx

@@ -1,21 +1,12 @@
 import * as React from 'react';
-import {
-  makeStyles,
-  Menu,
-  MenuButtonProps,
-  MenuItem,
-  MenuList,
-  MenuPopover,
-  MenuTrigger,
-  Spinner,
-  SplitButton,
-  Toast,
-  Toaster,
-  ToastTitle,
-  useId,
-  useToastController,
-} from '@fluentui/react-components';
+import { SplitButton, type MenuButtonProps } from '@fluentui/react-button';
+import { Menu, MenuItem, MenuList, MenuPopover, MenuTrigger } from '@fluentui/react-menu';
+import { Spinner } from '@fluentui/react-spinner';
+import { Toast, Toaster, ToastTitle, useToastController } from '@fluentui/react-toast';
+import { useId } from '@fluentui/react-utilities';
+import { makeStyles } from '@griffel/react';
 import { bundleIcon, MarkdownFilled, MarkdownRegular } from '@fluentui/react-icons';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
 
 const MarkdownIcon = bundleIcon(MarkdownFilled, MarkdownRegular);
 
@@ -35,6 +26,8 @@ export interface CopyAsMarkdownProps {
  * The markdown content is fetched from the Storybook API and cached for subsequent requests.
  */
 export const CopyAsMarkdownButton: React.FC<CopyAsMarkdownProps> = ({ storyId = '' }) => {
+  const { targetDocument } = useFluent();
+  const targetWindow = targetDocument?.defaultView;
   const styles = useStyles();
   const toastId = useId('copy-toast');
   const toasterId = useId('toaster');
@@ -48,8 +41,8 @@ export const CopyAsMarkdownButton: React.FC<CopyAsMarkdownProps> = ({ storyId =
 
   // Full URL to the markdown endpoint for this story
   const markdownUrl = React.useMemo(() => {
-    return convertStoryIdToMarkdownUrl(storyId);
-  }, [storyId]);
+    return targetWindow ? convertStoryIdToMarkdownUrl(targetWindow, storyId) : '';
+  }, [storyId, targetWindow]);
 
   // Cleanup: abort pending requests on unmount
   React.useEffect(() => {
@@ -69,6 +62,11 @@ export const CopyAsMarkdownButton: React.FC<CopyAsMarkdownProps> = ({ storyId =
       return;
     }
 
+    // Ensure we have a window context to use for clipboard and fetch
+    if (!targetWindow) {
+      return;
+    }
+
     // Create new AbortController for this request
     const abortController = new AbortController();
     abortControllerRef.current = abortController;
@@ -88,11 +86,11 @@ export const CopyAsMarkdownButton: React.FC<CopyAsMarkdownProps> = ({ storyId =
     try {
       // Use cached content if available, otherwise fetch from API
       if (!markdownContentCache.current) {
-        markdownContentCache.current = await fetchMarkdownContent(markdownUrl, abortController.signal);
+        markdownContentCache.current = await fetchMarkdownContent(targetWindow, markdownUrl, abortController.signal);
       }
 
       // Copy to clipboard
-      await navigator.clipboard.writeText(markdownContentCache.current);
+      await targetWindow?.navigator.clipboard.writeText(markdownContentCache.current);
 
       // Update toast to success
       updateToast({
@@ -128,12 +126,12 @@ export const CopyAsMarkdownButton: React.FC<CopyAsMarkdownProps> = ({ storyId =
       // Clear the abort controller ref to allow new requests
       abortControllerRef.current = null;
     }
-  }, [dispatchToast, updateToast, toastId, markdownUrl]);
+  }, [dispatchToast, updateToast, toastId, markdownUrl, targetWindow]);
 
   /** Opens the markdown content in a new browser tab */
   const openInNewTab = React.useCallback(() => {
-    window.open(markdownUrl, '_blank');
-  }, [markdownUrl]);
+    targetWindow?.open(markdownUrl, '_blank');
+  }, [markdownUrl, targetWindow]);
 
   if (!storyId) {
     return null;
@@ -182,33 +180,40 @@ const STORYBOOK_VARIANT_SUFFIX_PATTERN = /--\w+$/g;
 /**
  * Gets the base URL for fetching markdown content from the Storybook LLM endpoint.
  * Each story's markdown is available at: {BASE_URL}/{storyId}.txt
+ * @param targetWindow - The window object to use for location access
  * @returns The base URL constructed from current location origin and pathname
  */
-function getStorybookMarkdownApiBaseUrl(): string {
+function getStorybookMarkdownApiBaseUrl(targetWindow: Window): string {
   // Remove the [page].html file from pathname and append /llms/
-  const basePath = window.location.pathname.replace(/\/[^/]*\.html$/, '');
-  return `${window.location.origin}${basePath}/llms/`;
+  const basePath = targetWindow.location.pathname.replace(/\/[^/]*\.html$/, '');
+  return `${targetWindow.location.origin}${basePath}/llms/`;
 }
 
 /**
  * Converts a Storybook story ID to a markdown URL.
+ * @param targetWindow - The window object to use for location access
  * @param storyId - The Storybook story ID
  * @returns The full URL to the markdown endpoint for the story
  * @example "button--primary" -> "https://storybooks.fluentui.dev/llms/button.txt"
  */
-function convertStoryIdToMarkdownUrl(storyId: string): string {
-  return `${getStorybookMarkdownApiBaseUrl()}${storyId.replace(STORYBOOK_VARIANT_SUFFIX_PATTERN, '.txt')}`;
+function convertStoryIdToMarkdownUrl(targetWindow: Window, storyId: string): string {
+  return `${getStorybookMarkdownApiBaseUrl(targetWindow)}${storyId.replace(STORYBOOK_VARIANT_SUFFIX_PATTERN, '.txt')}`;
 }
 
 /**
  * Fetches markdown content from the Storybook API.
+ * @param targetWindow - The window object to use for fetch access
  * @param url - The URL to fetch markdown content from
  * @param signal - Optional AbortSignal to cancel the request
  * @returns Promise resolving to the markdown text content
  * @throws Error if the fetch request fails or is aborted
  */
-async function fetchMarkdownContent(url: string, signal?: AbortSignal): Promise<string> {
-  const response = await fetch(url, {
+async function fetchMarkdownContent(
+  targetWindow: Window,
+  url: string,
+  signal: AbortSignal | undefined,
+): Promise<string> {
+  const response = await targetWindow.fetch(url, {
     headers: {
       'Content-Type': 'text/plain',
     },