Merge pull request #46 from ThisIs-Developer/copilot/add-import-markdown-from-github

Add GitHub URL-based Markdown import (repo/tree/blob/raw) with file discovery and selection

Author: ThisIs-Developer

README.md

@@ -24,7 +24,7 @@ Markdown Viewer is a professional, full-featured Markdown editor and preview app
 - **Mermaid diagrams** - Create diagrams and flowcharts within your Markdown; hover over any diagram to reveal a toolbar for zooming, downloading (PNG/SVG), and copying to clipboard
 - **Dark mode toggle** - Switch between light and dark themes for comfortable viewing
 - **Export options** - Download your content as Markdown, HTML, or PDF
-- **Import Markdown files** - Drag & drop or select files to open
+- **Import Markdown files** - Drag & drop, select local files, or import from public GitHub links
 - **Copy to clipboard** - Quickly copy your Markdown content with one click
 - **Sync scrolling** - Keep editor and preview panes aligned (toggleable)
 - **Content statistics** - Track word count, character count, and reading time
@@ -51,7 +51,7 @@ Markdown Viewer is a professional, full-featured Markdown editor and preview app
 
 1. **Writing Markdown** - Type or paste Markdown content in the left editor panel
 2. **Viewing Output** - See the rendered HTML in the right preview panel
-3. **Importing Files** - Click "Import" or drag and drop .md files into the interface
+3. **Importing Files** - Click "Import" for local files, use "GitHub Import" for repository links, or drag and drop .md files
 4. **Exporting Content** - Use the "Export" dropdown to download as MD, HTML, or PDF
 5. **Toggle Dark Mode** - Click the moon icon to switch between light and dark themes
 6. **Toggle Sync Scrolling** - Enable/disable synchronized scrolling between panels

index.html

@@ -102,6 +102,9 @@ <h1 class="h4 mb-0 me-2">Markdown Viewer</h1>
                     <button id="import-button" class="tool-button" title="Import Markdown">
                         <i class="bi bi-upload"></i> Import
                     </button>
+                    <button id="import-github-button" class="tool-button" title="Import Markdown from GitHub URL">
+                        <i class="bi bi-github"></i> GitHub Import
+                    </button>
                     <input type="file" id="file-input" class="file-input" accept=".md,.markdown,text/markdown">
 
                     <div class="dropdown">
@@ -195,6 +198,10 @@ <h5>Menu</h5>
                                 <i class="bi bi-upload me-2"></i> Import Markdown
                             </button>
 
+                            <button id="mobile-import-github-button" class="mobile-menu-item" title="Import Markdown from GitHub URL">
+                                <i class="bi bi-github me-2"></i> Import from GitHub
+                            </button>
+                            
                             <button id="mobile-export-md" class="mobile-menu-item" title="Export as Markdown">
                                 <i class="bi bi-file-earmark-text me-2"></i> Export as Markdown
                             </button>

script.js

@@ -14,6 +14,7 @@ document.addEventListener("DOMContentLoaded", function () {
   const markdownPreview = document.getElementById("markdown-preview");
   const themeToggle = document.getElementById("theme-toggle");
   const importButton = document.getElementById("import-button");
+  const importGithubButton = document.getElementById("import-github-button");
   const fileInput = document.getElementById("file-input");
   const exportMd = document.getElementById("export-md");
   const exportHtml = document.getElementById("export-html");
@@ -52,6 +53,7 @@ document.addEventListener("DOMContentLoaded", function () {
   const mobileCharCount     = document.getElementById("mobile-char-count");
   const mobileToggleSync    = document.getElementById("mobile-toggle-sync");
   const mobileImportBtn     = document.getElementById("mobile-import-button");
+  const mobileImportGithubBtn = document.getElementById("mobile-import-github-button");
   const mobileExportMd      = document.getElementById("mobile-export-md");
   const mobileExportHtml    = document.getElementById("mobile-export-html");
   const mobileExportPdf     = document.getElementById("mobile-export-pdf");
@@ -812,6 +814,179 @@ This is a fully client-side application. Your content never leaves your browser
     reader.readAsText(file);
   }
 
+  function isMarkdownPath(path) {
+    return /\.(md|markdown)$/i.test(path || "");
+  }
+  const MAX_GITHUB_FILES_SHOWN = 30;
+
+  function getFileName(path) {
+    return (path || "").split("/").pop() || "document.md";
+  }
+
+  function buildRawGitHubUrl(owner, repo, ref, filePath) {
+    const encodedPath = filePath
+      .split("/")
+      .map((part) => encodeURIComponent(part))
+      .join("/");
+    return `https://raw.githubusercontent.com/${encodeURIComponent(owner)}/${encodeURIComponent(repo)}/${encodeURIComponent(ref)}/${encodedPath}`;
+  }
+
+  async function fetchGitHubJson(url) {
+    const response = await fetch(url, {
+      headers: {
+        Accept: "application/vnd.github+json"
+      }
+    });
+    if (!response.ok) {
+      throw new Error(`GitHub API request failed (${response.status})`);
+    }
+    return response.json();
+  }
+
+  async function fetchTextContent(url) {
+    const response = await fetch(url);
+    if (!response.ok) {
+      throw new Error(`Failed to fetch file (${response.status})`);
+    }
+    return response.text();
+  }
+
+  function parseGitHubImportUrl(input) {
+    let parsedUrl;
+    try {
+      parsedUrl = new URL((input || "").trim());
+    } catch (_) {
+      return null;
+    }
+
+    const host = parsedUrl.hostname.replace(/^www\./, "");
+    const segments = parsedUrl.pathname.split("/").filter(Boolean);
+
+    if (host === "raw.githubusercontent.com") {
+      if (segments.length < 5) return null;
+      const [owner, repo, ref, ...rest] = segments;
+      const filePath = rest.join("/");
+      return { owner, repo, ref, type: "file", filePath };
+    }
+
+    if (host !== "github.com" || segments.length < 2) return null;
+
+    const owner = segments[0];
+    const repo = segments[1].replace(/\.git$/i, "");
+    if (segments.length === 2) {
+      return { owner, repo, type: "repo" };
+    }
+
+    const mode = segments[2];
+    if (mode === "blob" && segments.length >= 5) {
+      return {
+        owner,
+        repo,
+        type: "file",
+        ref: segments[3],
+        filePath: segments.slice(4).join("/")
+      };
+    }
+
+    if (mode === "tree" && segments.length >= 4) {
+      return {
+        owner,
+        repo,
+        type: "tree",
+        ref: segments[3],
+        basePath: segments.slice(4).join("/")
+      };
+    }
+
+    return { owner, repo, type: "repo" };
+  }
+
+  async function getDefaultBranch(owner, repo) {
+    const repoInfo = await fetchGitHubJson(`https://api.github.com/repos/${encodeURIComponent(owner)}/${encodeURIComponent(repo)}`);
+    return repoInfo.default_branch;
+  }
+
+  async function listMarkdownFiles(owner, repo, ref, basePath) {
+    const treeResponse = await fetchGitHubJson(`https://api.github.com/repos/${encodeURIComponent(owner)}/${encodeURIComponent(repo)}/git/trees/${encodeURIComponent(ref)}?recursive=1`);
+    const normalizedBasePath = (basePath || "").replace(/^\/+|\/+$/g, "");
+
+    return (treeResponse.tree || [])
+      .filter((entry) => entry.type === "blob" && isMarkdownPath(entry.path))
+      .filter((entry) => !normalizedBasePath || entry.path === normalizedBasePath || entry.path.startsWith(normalizedBasePath + "/"))
+      .map((entry) => entry.path)
+      .sort((a, b) => a.localeCompare(b));
+  }
+
+  function setGitHubImportLoading(isLoading) {
+    [importGithubButton, mobileImportGithubBtn].forEach((btn) => {
+      if (!btn) return;
+      if (!btn.dataset.originalText) {
+        btn.dataset.originalText = btn.innerHTML;
+      }
+      btn.disabled = isLoading;
+      btn.innerHTML = isLoading ? '<i class="bi bi-hourglass-split"></i> Importing...' : btn.dataset.originalText;
+    });
+  }
+
+  async function importMarkdownFromGitHub() {
+    const urlInput = prompt("Enter a GitHub repository, folder, or Markdown file URL:");
+    if (!urlInput) return;
+
+    const parsed = parseGitHubImportUrl(urlInput);
+    if (!parsed || !parsed.owner || !parsed.repo) {
+      alert("Please enter a valid GitHub URL.");
+      return;
+    }
+
+    setGitHubImportLoading(true);
+    try {
+      if (parsed.type === "file") {
+        if (!isMarkdownPath(parsed.filePath)) {
+          throw new Error("The provided URL does not point to a Markdown file.");
+        }
+        const markdown = await fetchTextContent(buildRawGitHubUrl(parsed.owner, parsed.repo, parsed.ref, parsed.filePath));
+        newTab(markdown, getFileName(parsed.filePath).replace(/\.(md|markdown)$/i, ""));
+        return;
+      }
+
+      const ref = parsed.ref || await getDefaultBranch(parsed.owner, parsed.repo);
+      const files = await listMarkdownFiles(parsed.owner, parsed.repo, ref, parsed.basePath || "");
+
+      if (!files.length) {
+        alert("No Markdown files were found at that GitHub location.");
+        return;
+      }
+
+      let targetPath = files[0];
+      if (files.length > 1) {
+        const maxShown = Math.min(files.length, MAX_GITHUB_FILES_SHOWN);
+        const choices = files
+          .slice(0, maxShown)
+          .map((file, index) => `${index + 1}. ${file}`)
+          .join("\n");
+        const choice = prompt(
+          `Found ${files.length} Markdown files.\nEnter a number to import (showing first ${maxShown}):\n\n${choices}${files.length > maxShown ? "\n..." : ""}`,
+          "1"
+        );
+
+        if (choice === null) return;
+        const selectedIndex = Number(choice) - 1;
+        if (!Number.isInteger(selectedIndex) || selectedIndex < 0 || selectedIndex >= maxShown) {
+          throw new Error(`Please enter a number between 1 and ${maxShown} (from the displayed list).`);
+        }
+        targetPath = files[selectedIndex];
+      }
+
+      const markdown = await fetchTextContent(buildRawGitHubUrl(parsed.owner, parsed.repo, ref, targetPath));
+      newTab(markdown, getFileName(targetPath).replace(/\.(md|markdown)$/i, ""));
+    } catch (error) {
+      console.error("GitHub import failed:", error);
+      alert("GitHub import failed: " + error.message);
+    } finally {
+      setGitHubImportLoading(false);
+    }
+  }
+
   function processEmojis(element) {
     const walker = document.createTreeWalker(
       element,
@@ -1141,6 +1316,9 @@ This is a fully client-side application. Your content never leaves your browser
     }
   });
   mobileImportBtn.addEventListener("click", () => fileInput.click());
+  mobileImportGithubBtn.addEventListener("click", () => {
+    importMarkdownFromGitHub().finally(closeMobileMenu);
+  });
   mobileExportMd.addEventListener("click", () => exportMd.click());
   mobileExportHtml.addEventListener("click", () => exportHtml.click());
   mobileExportPdf.addEventListener("click", () => exportPdf.click());
@@ -1243,6 +1421,10 @@ This is a fully client-side application. Your content never leaves your browser
     fileInput.click();
   });
 
+  importGithubButton.addEventListener("click", function () {
+    importMarkdownFromGitHub();
+  });
+
   fileInput.addEventListener("change", function (e) {
     const file = e.target.files[0];
     if (file) {

wiki/Features.md

@@ -167,6 +167,7 @@ Generates a PDF of the current preview using **jsPDF** + **html2canvas**. Comple
 
 - **Drag & Drop**: Drag any `.md` file onto the editor pane.
 - **File Picker**: Click the Import button to open the OS file dialog.
+- **GitHub Import**: Paste a public GitHub repository/folder/file link to discover and import Markdown files.
 
 Supported extensions: `.md`, `.markdown`.
 

wiki/Usage-Guide.md

@@ -56,7 +56,7 @@ When you first open the application, the editor contains a sample document demon
 
 ## Importing Files
 
-You can load an existing `.md` file into the editor in two ways:
+You can load Markdown into the editor in three ways:
 
 ### Drag & Drop
 
@@ -68,6 +68,16 @@ Drag a `.md` file from your file explorer directly onto the **editor pane**. The
 2. Select a `.md` file in the file picker dialog.
 3. The file content is loaded into the editor.
 
+### GitHub Import
+
+1. Click **GitHub Import** in the toolbar (or in the mobile menu).
+2. Paste a public GitHub URL:
+   - Repository URL (for example: `https://github.com/owner/repo`)
+   - Folder URL (for example: `https://github.com/owner/repo/tree/main/docs`)
+   - Markdown file URL (for example: `https://github.com/owner/repo/blob/main/README.md`)
+3. If multiple Markdown files are found, choose the file number from the prompt list.
+4. The selected file is opened in a new tab.
+
 > **Tip**: Only `.md` and `.markdown` files are accepted.
 
 ---