Handling Markdown File Content in Svelte and Adding a Copy Button

I'm working on a Svelte project where I need to load and render Markdown files that are organized in different directories. The Markdown files contain both metadata (like titles and descriptions) and the main content. However, I'm facing issues where the content of the Markdown files is not being properly loaded or processed. Additionally, I want to add a "Copy" button to allow users to easily copy the displayed content.

Here are the details of my setup:

1. Markdown Files Structure

   • Markdown files are located in different directories such as UserManual, DeveloperGuide, DevelopmentOnly, and ReleaseNotes.

   • The Markdown files have a metadata section and a main content section.

2. Code to Load Markdown Files

   I use import.meta.glob() to dynamically import Markdown files. Here’s a simplified version of the relevant code:

   interface MDFile {    metadata: any;}type DocFile = [string, () => Promise<MDFile>];

   export const fetchMarkdown = async (    product: 'UserManual' | 'DeveloperGuide' | 'DevelopmentOnly' | 'ReleaseNotes' | undefined,) => {    let docFiles: DocFile[];    switch (product) {        case 'UserManual':            docFiles = Object.entries(UserManualFiles) as DocFile[];            break;        case 'DeveloperGuide':            docFiles = Object.entries(DeveloperGuideFiles) as DocFile[];            break;        case 'DevelopmentOnly':            docFiles = Object.entries(DevelopmentOnlyFiles) as DocFile[];            break;        case 'ReleaseNotes':            docFiles = Object.entries(ReleaseNotesFiles) as DocFile[];            break;        default:            docFiles = [];            break;    }    let routes: Route[] = await Promise.all(        docFiles.map(async (file) => {            const path = slicePath(file[0], `../../../../../public-docs/${product}`);            try {                const { metadata } = await file[1]();                const content = metadata as Content;                return { path: path, meta: content, children: [], isIndex: file[0].endsWith('_index.md') };            } catch (error) {                console.error(`Error loading file ${file[0]}:`, error);                return { path: path, meta: { title: '', description: '' }, children: [], isIndex: false };            }        }),    );    routes = routes.sort((a, b) => {        return a.path.localeCompare(b.path);    });    routes = makeNestedRoutes(routes);    return routes;};

What I tried:

I used import.meta.glob() to load Markdown files in my Svelte project, expecting to get both metadata and content. I then processed these files but found that the content field was undefined.

What I expected:

I expected both metadata and content to be loaded correctly, with the content not being undefined. I also wanted to replace backslashes in the content and add a "Copy" button to allow users to copy the displayed content.

What actually happened:

The content field was undefined, and I couldn’t see the actual Markdown content. The "Copy" button functionality also needs implementation guidance.