From 706250efec76d779f1e22e2d08aec9f253c08d2f Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 20 Mar 2026 16:27:40 +0000 Subject: [PATCH 1/7] Initial plan From 1713f801068a7a383540a5e5a147a87e67b979af Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 20 Mar 2026 16:29:09 +0000 Subject: [PATCH 2/7] chore: outline plan for github import file browser Co-authored-by: ThisIs-Developer <109382325+ThisIs-Developer@users.noreply.github.com> --- desktop-app/resources/index.html | 126 ++- desktop-app/resources/js/script.js | 1317 +++++++++++++++++++++++++++- desktop-app/resources/styles.css | 759 +++++++++++++++- 3 files changed, 2154 insertions(+), 48 deletions(-) diff --git a/desktop-app/resources/index.html b/desktop-app/resources/index.html index 8b21ccc..87ae86c 100644 --- a/desktop-app/resources/index.html +++ b/desktop-app/resources/index.html @@ -32,7 +32,6 @@ - @@ -54,6 +53,7 @@ +
@@ -102,9 +102,15 @@

Markdown Viewer

- +
+ + +
@@ -122,6 +128,10 @@

Markdown Viewer

Copy + + @@ -141,6 +151,22 @@
Menu
+ +
+
+ Documents + +
+
+ +
+ +
+
- + + + + @@ -205,6 +239,51 @@
Menu
+ +
+
+ +
+ + + + + + + + + +
+ + + - \ No newline at end of file + diff --git a/desktop-app/resources/js/script.js b/desktop-app/resources/js/script.js index 60c28e1..7ee9126 100644 --- a/desktop-app/resources/js/script.js +++ b/desktop-app/resources/js/script.js @@ -13,7 +13,8 @@ document.addEventListener("DOMContentLoaded", function () { const markdownEditor = document.getElementById("markdown-editor"); const markdownPreview = document.getElementById("markdown-preview"); const themeToggle = document.getElementById("theme-toggle"); - const importButton = document.getElementById("import-button"); + const importFromFileButton = document.getElementById("import-from-file"); + const importFromGithubButton = document.getElementById("import-from-github"); const fileInput = document.getElementById("file-input"); const exportMd = document.getElementById("export-md"); const exportHtml = document.getElementById("export-html"); @@ -52,11 +53,21 @@ 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"); const mobileCopyMarkdown = document.getElementById("mobile-copy-markdown"); const mobileThemeToggle = document.getElementById("mobile-theme-toggle"); + const shareButton = document.getElementById("share-button"); + const mobileShareButton = document.getElementById("mobile-share-button"); + const githubImportModal = document.getElementById("github-import-modal"); + const githubImportTitle = document.getElementById("github-import-title"); + const githubImportUrlInput = document.getElementById("github-import-url"); + const githubImportFileSelect = document.getElementById("github-import-file-select"); + const githubImportError = document.getElementById("github-import-error"); + const githubImportCancelBtn = document.getElementById("github-import-cancel"); + const githubImportSubmitBtn = document.getElementById("github-import-submit"); // Check dark mode preference first for proper initialization const prefersDarkMode = @@ -119,11 +130,6 @@ document.addEventListener("DOMContentLoaded", function () { marked.setOptions({ ...markedOptions, renderer: renderer, - highlight: function (code, language) { - if (language === 'mermaid') return code; - const validLanguage = hljs.getLanguage(language) ? language : "plaintext"; - return hljs.highlight(code, { language: validLanguage }).value; - }, }); const sampleMarkdown = `# Welcome to Markdown Viewer @@ -143,10 +149,9 @@ document.addEventListener("DOMContentLoaded", function () { const sanitizedHtml = DOMPurify.sanitize(html); markdownPreview.innerHTML = sanitizedHtml; - // Apply syntax highlighting to code blocks - markdownPreview.querySelectorAll('pre code').forEach((block) => { - hljs.highlightElement(block); - }); + // Syntax highlighting is handled automatically + // during the parsing phase by the marked renderer. + // Themes are applied instantly via CSS variables. } \`\`\` @@ -275,7 +280,7 @@ Create bullet points: Add a [link](https://github.com/ThisIs-Developer/Markdown-Viewer) to important resources. Embed an image: -![Markdown Logo](https://example.com/logo.png) +![Markdown Logo](https://markdownviewer.pages.dev/assets/icon.jpg) ### **Blockquotes** @@ -290,6 +295,474 @@ This is a fully client-side application. Your content never leaves your browser markdownEditor.value = sampleMarkdown; + // ======================================== + // DOCUMENT TABS & SESSION MANAGEMENT + // ======================================== + + const STORAGE_KEY = 'markdownViewerTabs'; + const ACTIVE_TAB_KEY = 'markdownViewerActiveTab'; + const UNTITLED_COUNTER_KEY = 'markdownViewerUntitledCounter'; + let tabs = []; + let activeTabId = null; + let draggedTabId = null; + let saveTabStateTimeout = null; + let untitledCounter = 0; + + function loadTabsFromStorage() { + try { + return JSON.parse(localStorage.getItem(STORAGE_KEY)) || []; + } catch (e) { + return []; + } + } + + function saveTabsToStorage(tabsArr) { + try { + localStorage.setItem(STORAGE_KEY, JSON.stringify(tabsArr)); + } catch (e) { + console.warn('Failed to save tabs to localStorage:', e); + } + } + + function loadActiveTabId() { + return localStorage.getItem(ACTIVE_TAB_KEY); + } + + function saveActiveTabId(id) { + localStorage.setItem(ACTIVE_TAB_KEY, id); + } + + function loadUntitledCounter() { + return parseInt(localStorage.getItem(UNTITLED_COUNTER_KEY) || '0', 10); + } + + function saveUntitledCounter(val) { + localStorage.setItem(UNTITLED_COUNTER_KEY, String(val)); + } + + function nextUntitledTitle() { + untitledCounter += 1; + saveUntitledCounter(untitledCounter); + return 'Untitled ' + untitledCounter; + } + + function createTab(content, title, viewMode) { + if (content === undefined) content = ''; + if (title === undefined) title = null; + if (viewMode === undefined) viewMode = 'split'; + return { + id: 'tab_' + Date.now() + '_' + Math.random().toString(36).substring(2, 8), + title: title || 'Untitled', + content: content, + scrollPos: 0, + viewMode: viewMode, + createdAt: Date.now() + }; + } + + function renderTabBar(tabsArr, currentActiveTabId) { + const tabList = document.getElementById('tab-list'); + if (!tabList) return; + tabList.innerHTML = ''; + tabsArr.forEach(function(tab) { + const item = document.createElement('div'); + item.className = 'tab-item' + (tab.id === currentActiveTabId ? ' active' : ''); + item.setAttribute('data-tab-id', tab.id); + item.setAttribute('role', 'tab'); + item.setAttribute('aria-selected', tab.id === currentActiveTabId ? 'true' : 'false'); + item.setAttribute('draggable', 'true'); + + const titleSpan = document.createElement('span'); + titleSpan.className = 'tab-title'; + titleSpan.textContent = tab.title || 'Untitled'; + titleSpan.title = tab.title || 'Untitled'; + + // Three-dot menu button + const menuBtn = document.createElement('button'); + menuBtn.className = 'tab-menu-btn'; + menuBtn.setAttribute('aria-label', 'File options'); + menuBtn.title = 'File options'; + menuBtn.innerHTML = '⋯'; + + // Dropdown + const dropdown = document.createElement('div'); + dropdown.className = 'tab-menu-dropdown'; + dropdown.innerHTML = + '' + + '' + + ''; + + menuBtn.appendChild(dropdown); + + menuBtn.addEventListener('click', function(e) { + e.stopPropagation(); + // Close all other open dropdowns first + document.querySelectorAll('.tab-menu-btn.open').forEach(function(btn) { + if (btn !== menuBtn) btn.classList.remove('open'); + }); + menuBtn.classList.toggle('open'); + // Position the dropdown relative to the viewport so it escapes the + // overflow scroll container on .tab-list + if (menuBtn.classList.contains('open')) { + var rect = menuBtn.getBoundingClientRect(); + dropdown.style.top = (rect.bottom + 4) + 'px'; + dropdown.style.right = (window.innerWidth - rect.right) + 'px'; + dropdown.style.left = 'auto'; + } + }); + + dropdown.querySelectorAll('.tab-menu-item').forEach(function(actionBtn) { + actionBtn.addEventListener('click', function(e) { + e.stopPropagation(); + menuBtn.classList.remove('open'); + const action = actionBtn.getAttribute('data-action'); + if (action === 'rename') renameTab(tab.id); + else if (action === 'duplicate') duplicateTab(tab.id); + else if (action === 'delete') deleteTab(tab.id); + }); + }); + + item.appendChild(titleSpan); + item.appendChild(menuBtn); + + item.addEventListener('click', function() { + switchTab(tab.id); + }); + + item.addEventListener('dragstart', function() { + draggedTabId = tab.id; + setTimeout(function() { item.classList.add('dragging'); }, 0); + }); + + item.addEventListener('dragend', function() { + item.classList.remove('dragging'); + draggedTabId = null; + }); + + item.addEventListener('dragover', function(e) { + e.preventDefault(); + item.classList.add('drag-over'); + }); + + item.addEventListener('dragleave', function() { + item.classList.remove('drag-over'); + }); + + item.addEventListener('drop', function(e) { + e.preventDefault(); + item.classList.remove('drag-over'); + if (!draggedTabId || draggedTabId === tab.id) return; + const fromIdx = tabs.findIndex(function(t) { return t.id === draggedTabId; }); + const toIdx = tabs.findIndex(function(t) { return t.id === tab.id; }); + if (fromIdx === -1 || toIdx === -1) return; + const moved = tabs.splice(fromIdx, 1)[0]; + tabs.splice(toIdx, 0, moved); + saveTabsToStorage(tabs); + renderTabBar(tabs, activeTabId); + }); + + tabList.appendChild(item); + }); + + // "+ Create" button at end of tab list + const newBtn = document.createElement('button'); + newBtn.className = 'tab-new-btn'; + newBtn.title = 'New Tab (Ctrl+T)'; + newBtn.setAttribute('aria-label', 'Open new tab'); + newBtn.innerHTML = ''; + newBtn.addEventListener('click', function() { newTab(); }); + tabList.appendChild(newBtn); + + // Auto-scroll active tab into view + const activeItem = tabList.querySelector('.tab-item.active'); + if (activeItem) { + activeItem.scrollIntoView({ block: 'nearest', inline: 'nearest' }); + } + + renderMobileTabList(tabsArr, currentActiveTabId); + } + + function renderMobileTabList(tabsArr, currentActiveTabId) { + const mobileTabList = document.getElementById('mobile-tab-list'); + if (!mobileTabList) return; + mobileTabList.innerHTML = ''; + tabsArr.forEach(function(tab) { + const item = document.createElement('div'); + item.className = 'mobile-tab-item' + (tab.id === currentActiveTabId ? ' active' : ''); + item.setAttribute('role', 'tab'); + item.setAttribute('aria-selected', tab.id === currentActiveTabId ? 'true' : 'false'); + item.setAttribute('data-tab-id', tab.id); + + const titleSpan = document.createElement('span'); + titleSpan.className = 'mobile-tab-title'; + titleSpan.textContent = tab.title || 'Untitled'; + titleSpan.title = tab.title || 'Untitled'; + + // Three-dot menu button (same as desktop) + const menuBtn = document.createElement('button'); + menuBtn.className = 'tab-menu-btn'; + menuBtn.setAttribute('aria-label', 'File options'); + menuBtn.title = 'File options'; + menuBtn.innerHTML = '⋯'; + + // Dropdown (same as desktop) + const dropdown = document.createElement('div'); + dropdown.className = 'tab-menu-dropdown'; + dropdown.innerHTML = + '' + + '' + + ''; + + menuBtn.appendChild(dropdown); + + menuBtn.addEventListener('click', function(e) { + e.stopPropagation(); + document.querySelectorAll('.tab-menu-btn.open').forEach(function(btn) { + if (btn !== menuBtn) btn.classList.remove('open'); + }); + menuBtn.classList.toggle('open'); + if (menuBtn.classList.contains('open')) { + const rect = menuBtn.getBoundingClientRect(); + dropdown.style.top = (rect.bottom + 4) + 'px'; + dropdown.style.right = (window.innerWidth - rect.right) + 'px'; + dropdown.style.left = 'auto'; + } + }); + + dropdown.querySelectorAll('.tab-menu-item').forEach(function(actionBtn) { + actionBtn.addEventListener('click', function(e) { + e.stopPropagation(); + menuBtn.classList.remove('open'); + const action = actionBtn.getAttribute('data-action'); + if (action === 'rename') { + closeMobileMenu(); + renameTab(tab.id); + } else if (action === 'duplicate') { + duplicateTab(tab.id); + closeMobileMenu(); + } else if (action === 'delete') { + deleteTab(tab.id); + } + }); + }); + + item.appendChild(titleSpan); + item.appendChild(menuBtn); + + item.addEventListener('click', function() { + switchTab(tab.id); + closeMobileMenu(); + }); + + mobileTabList.appendChild(item); + }); + } + + // Close any open tab dropdown when clicking elsewhere in the document + document.addEventListener('click', function() { + document.querySelectorAll('.tab-menu-btn.open').forEach(function(btn) { + btn.classList.remove('open'); + }); + }); + + function saveCurrentTabState() { + const tab = tabs.find(function(t) { return t.id === activeTabId; }); + if (!tab) return; + tab.content = markdownEditor.value; + tab.scrollPos = markdownEditor.scrollTop; + tab.viewMode = currentViewMode || 'split'; + saveTabsToStorage(tabs); + } + + function restoreViewMode(mode) { + currentViewMode = null; + setViewMode(mode || 'split'); + } + + function switchTab(tabId) { + if (tabId === activeTabId) return; + saveCurrentTabState(); + activeTabId = tabId; + saveActiveTabId(activeTabId); + const tab = tabs.find(function(t) { return t.id === tabId; }); + if (!tab) return; + markdownEditor.value = tab.content; + restoreViewMode(tab.viewMode); + renderMarkdown(); + requestAnimationFrame(function() { + markdownEditor.scrollTop = tab.scrollPos || 0; + }); + renderTabBar(tabs, activeTabId); + } + + function newTab(content, title) { + if (content === undefined) content = ''; + if (tabs.length >= 20) { + alert('Maximum of 20 tabs reached. Please close an existing tab to open a new one.'); + return; + } + if (!title) title = nextUntitledTitle(); + const tab = createTab(content, title); + tabs.push(tab); + switchTab(tab.id); + markdownEditor.focus(); + } + + function closeTab(tabId) { + const idx = tabs.findIndex(function(t) { return t.id === tabId; }); + if (idx === -1) return; + tabs.splice(idx, 1); + if (tabs.length === 0) { + // Auto-create new "Untitled" when last tab is deleted + const newT = createTab('', nextUntitledTitle()); + tabs.push(newT); + activeTabId = newT.id; + saveActiveTabId(activeTabId); + markdownEditor.value = ''; + restoreViewMode('split'); + renderMarkdown(); + } else if (activeTabId === tabId) { + const newIdx = Math.max(0, idx - 1); + activeTabId = tabs[newIdx].id; + saveActiveTabId(activeTabId); + const newActiveTab = tabs[newIdx]; + markdownEditor.value = newActiveTab.content; + restoreViewMode(newActiveTab.viewMode); + renderMarkdown(); + requestAnimationFrame(function() { + markdownEditor.scrollTop = newActiveTab.scrollPos || 0; + }); + } + saveTabsToStorage(tabs); + renderTabBar(tabs, activeTabId); + } + + function deleteTab(tabId) { + closeTab(tabId); + } + + function renameTab(tabId) { + const tab = tabs.find(function(t) { return t.id === tabId; }); + if (!tab) return; + const modal = document.getElementById('rename-modal'); + const input = document.getElementById('rename-modal-input'); + const confirmBtn = document.getElementById('rename-modal-confirm'); + const cancelBtn = document.getElementById('rename-modal-cancel'); + if (!modal || !input) return; + input.value = tab.title; + modal.style.display = 'flex'; + input.focus(); + input.select(); + + function doRename() { + const newName = input.value.trim(); + if (newName) { + tab.title = newName; + saveTabsToStorage(tabs); + renderTabBar(tabs, activeTabId); + } + modal.style.display = 'none'; + cleanup(); + } + + function cleanup() { + confirmBtn.removeEventListener('click', doRename); + cancelBtn.removeEventListener('click', doCancel); + input.removeEventListener('keydown', onKey); + } + + function doCancel() { + modal.style.display = 'none'; + cleanup(); + } + + function onKey(e) { + if (e.key === 'Enter') doRename(); + else if (e.key === 'Escape') doCancel(); + } + + confirmBtn.addEventListener('click', doRename); + cancelBtn.addEventListener('click', doCancel); + input.addEventListener('keydown', onKey); + } + + function duplicateTab(tabId) { + const tab = tabs.find(function(t) { return t.id === tabId; }); + if (!tab) return; + if (tabs.length >= 20) { + alert('Maximum of 20 tabs reached. Please close an existing tab to open a new one.'); + return; + } + saveCurrentTabState(); + const dupTitle = tab.title + ' (copy)'; + const dup = createTab(tab.content, dupTitle, tab.viewMode); + const idx = tabs.findIndex(function(t) { return t.id === tabId; }); + tabs.splice(idx + 1, 0, dup); + switchTab(dup.id); + } + + function resetAllTabs() { + const modal = document.getElementById('reset-confirm-modal'); + const confirmBtn = document.getElementById('reset-modal-confirm'); + const cancelBtn = document.getElementById('reset-modal-cancel'); + if (!modal) return; + modal.style.display = 'flex'; + + function doReset() { + modal.style.display = 'none'; + cleanup(); + tabs = []; + untitledCounter = 0; + saveUntitledCounter(0); + const welcome = createTab(sampleMarkdown, 'Welcome to Markdown'); + tabs.push(welcome); + activeTabId = welcome.id; + saveActiveTabId(activeTabId); + saveTabsToStorage(tabs); + markdownEditor.value = sampleMarkdown; + restoreViewMode('split'); + renderMarkdown(); + renderTabBar(tabs, activeTabId); + } + + function doCancel() { + modal.style.display = 'none'; + cleanup(); + } + + function cleanup() { + confirmBtn.removeEventListener('click', doReset); + cancelBtn.removeEventListener('click', doCancel); + } + + confirmBtn.addEventListener('click', doReset); + cancelBtn.addEventListener('click', doCancel); + } + + function initTabs() { + untitledCounter = loadUntitledCounter(); + tabs = loadTabsFromStorage(); + activeTabId = loadActiveTabId(); + if (tabs.length === 0) { + const tab = createTab(sampleMarkdown, 'Welcome to Markdown'); + tabs.push(tab); + activeTabId = tab.id; + saveTabsToStorage(tabs); + saveActiveTabId(activeTabId); + } else if (!tabs.find(function(t) { return t.id === activeTabId; })) { + activeTabId = tabs[0].id; + saveActiveTabId(activeTabId); + } + const activeTab = tabs.find(function(t) { return t.id === activeTabId; }); + markdownEditor.value = activeTab.content; + restoreViewMode(activeTab.viewMode); + renderMarkdown(); + requestAnimationFrame(function() { + markdownEditor.scrollTop = activeTab.scrollPos || 0; + }); + renderTabBar(tabs, activeTabId); + } + function renderMarkdown() { try { const markdown = markdownEditor.value; @@ -300,23 +773,21 @@ This is a fully client-side application. Your content never leaves your browser }); markdownPreview.innerHTML = sanitizedHtml; - markdownPreview.querySelectorAll("pre code").forEach((block) => { - try { - if (!block.classList.contains('mermaid') && !block.classList.contains('hljs')) { - hljs.highlightElement(block); - } - } catch (e) { - console.warn("Syntax highlighting failed for a code block:", e); - } - }); - processEmojis(markdownPreview); // Reinitialize mermaid with current theme before rendering diagrams initMermaid(); try { - mermaid.init(undefined, markdownPreview.querySelectorAll('.mermaid')); + const mermaidNodes = markdownPreview.querySelectorAll('.mermaid'); + if (mermaidNodes.length > 0) { + Promise.resolve(mermaid.init(undefined, mermaidNodes)) + .then(() => addMermaidToolbars()) + .catch((e) => { + console.warn("Mermaid rendering failed:", e); + addMermaidToolbars(); + }); + } } catch (e) { console.warn("Mermaid rendering failed:", e); } @@ -344,13 +815,279 @@ This is a fully client-side application. Your content never leaves your browser function importMarkdownFile(file) { const reader = new FileReader(); reader.onload = function(e) { - markdownEditor.value = e.target.result; - renderMarkdown(); + newTab(e.target.result, file.name.replace(/\.md$/i, '')); dropzone.style.display = "none"; }; 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) { + if (!githubImportSubmitBtn) return; + if (isLoading) { + githubImportSubmitBtn.dataset.loadingText = githubImportSubmitBtn.textContent; + githubImportSubmitBtn.textContent = "Importing..."; + } else if (githubImportSubmitBtn.dataset.loadingText) { + githubImportSubmitBtn.textContent = githubImportSubmitBtn.dataset.loadingText; + delete githubImportSubmitBtn.dataset.loadingText; + } + } + + function setGitHubImportMessage(message, options = {}) { + if (!githubImportError) return; + const { isError = true } = options; + githubImportError.classList.toggle("is-info", !isError); + if (!message) { + githubImportError.textContent = ""; + githubImportError.style.display = "none"; + return; + } + githubImportError.textContent = message; + githubImportError.style.display = "block"; + } + + function resetGitHubImportModal() { + if (!githubImportUrlInput || !githubImportFileSelect || !githubImportSubmitBtn) return; + if (githubImportTitle) { + githubImportTitle.textContent = "Import Markdown from GitHub"; + } + githubImportUrlInput.value = ""; + githubImportUrlInput.style.display = "block"; + githubImportUrlInput.disabled = false; + githubImportFileSelect.innerHTML = ""; + githubImportFileSelect.style.display = "none"; + githubImportFileSelect.disabled = false; + githubImportSubmitBtn.dataset.step = "url"; + delete githubImportSubmitBtn.dataset.owner; + delete githubImportSubmitBtn.dataset.repo; + delete githubImportSubmitBtn.dataset.ref; + githubImportSubmitBtn.textContent = "Import"; + setGitHubImportMessage(""); + } + + function openGitHubImportModal() { + if (!githubImportModal || !githubImportUrlInput || !githubImportSubmitBtn) return; + resetGitHubImportModal(); + githubImportModal.style.display = "flex"; + githubImportUrlInput.focus(); + } + + function closeGitHubImportModal() { + if (!githubImportModal) return; + githubImportModal.style.display = "none"; + resetGitHubImportModal(); + } + + async function handleGitHubImportSubmit() { + if (!githubImportSubmitBtn || !githubImportUrlInput || !githubImportFileSelect) return; + const setGitHubImportDialogDisabled = (disabled) => { + githubImportSubmitBtn.disabled = disabled; + if (githubImportCancelBtn) { + githubImportCancelBtn.disabled = disabled; + } + }; + const step = githubImportSubmitBtn.dataset.step || "url"; + if (step === "select") { + const selectedPath = githubImportFileSelect.value; + const owner = githubImportSubmitBtn.dataset.owner; + const repo = githubImportSubmitBtn.dataset.repo; + const ref = githubImportSubmitBtn.dataset.ref; + if (!owner || !repo || !ref || !selectedPath) { + setGitHubImportMessage("Please select a file to import."); + return; + } + setGitHubImportLoading(true); + setGitHubImportDialogDisabled(true); + try { + const markdown = await fetchTextContent(buildRawGitHubUrl(owner, repo, ref, selectedPath)); + newTab(markdown, getFileName(selectedPath).replace(/\.(md|markdown)$/i, "")); + closeGitHubImportModal(); + } catch (error) { + console.error("GitHub import failed:", error); + setGitHubImportMessage("GitHub import failed: " + error.message); + } finally { + setGitHubImportDialogDisabled(false); + setGitHubImportLoading(false); + } + return; + } + + const urlInput = githubImportUrlInput.value.trim(); + if (!urlInput) { + setGitHubImportMessage("Please enter a GitHub URL."); + return; + } + + const parsed = parseGitHubImportUrl(urlInput); + if (!parsed || !parsed.owner || !parsed.repo) { + setGitHubImportMessage("Please enter a valid GitHub URL."); + return; + } + + setGitHubImportMessage(""); + setGitHubImportLoading(true); + setGitHubImportDialogDisabled(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, "")); + closeGitHubImportModal(); + 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) { + setGitHubImportMessage("No Markdown files were found at that GitHub location."); + return; + } + + const shownFiles = files.slice(0, MAX_GITHUB_FILES_SHOWN); + if (files.length === 1) { + const targetPath = files[0]; + const markdown = await fetchTextContent(buildRawGitHubUrl(parsed.owner, parsed.repo, ref, targetPath)); + newTab(markdown, getFileName(targetPath).replace(/\.(md|markdown)$/i, "")); + closeGitHubImportModal(); + return; + } + + githubImportUrlInput.style.display = "none"; + githubImportFileSelect.style.display = "block"; + githubImportFileSelect.innerHTML = ""; + shownFiles.forEach((filePath) => { + const option = document.createElement("option"); + option.value = filePath; + option.textContent = filePath; + githubImportFileSelect.appendChild(option); + }); + if (files.length > MAX_GITHUB_FILES_SHOWN) { + setGitHubImportMessage(`Showing first ${MAX_GITHUB_FILES_SHOWN} of ${files.length} Markdown files.`, { isError: false }); + } else { + setGitHubImportMessage(""); + } + if (githubImportTitle) { + githubImportTitle.textContent = "Select a Markdown file to import"; + } + githubImportSubmitBtn.dataset.step = "select"; + githubImportSubmitBtn.dataset.owner = parsed.owner; + githubImportSubmitBtn.dataset.repo = parsed.repo; + githubImportSubmitBtn.dataset.ref = ref; + githubImportSubmitBtn.textContent = "Import Selected"; + } catch (error) { + console.error("GitHub import failed:", error); + setGitHubImportMessage("GitHub import failed: " + error.message); + } finally { + setGitHubImportDialogDisabled(false); + setGitHubImportLoading(false); + } + } + function processEmojis(element) { const walker = document.createTreeWalker( element, @@ -680,6 +1417,10 @@ This is a fully client-side application. Your content never leaves your browser } }); mobileImportBtn.addEventListener("click", () => fileInput.click()); + mobileImportGithubBtn.addEventListener("click", () => { + closeMobileMenu(); + openGitHubImportModal(); + }); mobileExportMd.addEventListener("click", () => exportMd.click()); mobileExportHtml.addEventListener("click", () => exportHtml.click()); mobileExportPdf.addEventListener("click", () => exportPdf.click()); @@ -688,13 +1429,26 @@ This is a fully client-side application. Your content never leaves your browser themeToggle.click(); mobileThemeToggle.innerHTML = themeToggle.innerHTML + " Toggle Dark Mode"; }); + + const mobileNewTabBtn = document.getElementById("mobile-new-tab-btn"); + if (mobileNewTabBtn) { + mobileNewTabBtn.addEventListener("click", function() { + newTab(); + closeMobileMenu(); + }); + } + + const mobileTabResetBtn = document.getElementById("mobile-tab-reset-btn"); + if (mobileTabResetBtn) { + mobileTabResetBtn.addEventListener("click", function() { + closeMobileMenu(); + resetAllTabs(); + }); + } - renderMarkdown(); + initTabs(); updateMobileStats(); - // Initialize view mode - Story 1.1 - contentContainer.classList.add('view-split'); - // Initialize resizer - Story 1.3 initResizer(); @@ -703,6 +1457,7 @@ This is a fully client-side application. Your content never leaves your browser btn.addEventListener('click', function() { const mode = this.getAttribute('data-mode'); setViewMode(mode); + saveCurrentTabState(); }); }); @@ -711,11 +1466,16 @@ This is a fully client-side application. Your content never leaves your browser btn.addEventListener('click', function() { const mode = this.getAttribute('data-mode'); setViewMode(mode); + saveCurrentTabState(); closeMobileMenu(); }); }); - markdownEditor.addEventListener("input", debouncedRender); + markdownEditor.addEventListener("input", function() { + debouncedRender(); + clearTimeout(saveTabStateTimeout); + saveTabStateTimeout = setTimeout(saveCurrentTabState, 500); + }); // Tab key handler to insert indentation instead of moving focus markdownEditor.addEventListener("keydown", function(e) { @@ -759,9 +1519,40 @@ This is a fully client-side application. Your content never leaves your browser renderMarkdown(); }); - importButton.addEventListener("click", function () { - fileInput.click(); - }); + if (importFromFileButton) { + importFromFileButton.addEventListener("click", function (e) { + e.preventDefault(); + fileInput.click(); + }); + } + + if (importFromGithubButton) { + importFromGithubButton.addEventListener("click", function (e) { + e.preventDefault(); + openGitHubImportModal(); + }); + } + + if (githubImportSubmitBtn) { + githubImportSubmitBtn.addEventListener("click", handleGitHubImportSubmit); + } + if (githubImportCancelBtn) { + githubImportCancelBtn.addEventListener("click", closeGitHubImportModal); + } + const handleGitHubImportInputKeydown = function(e) { + if (e.key === "Enter") { + e.preventDefault(); + handleGitHubImportSubmit(); + } else if (e.key === "Escape") { + closeGitHubImportModal(); + } + }; + if (githubImportUrlInput) { + githubImportUrlInput.addEventListener("keydown", handleGitHubImportInputKeydown); + } + if (githubImportFileSelect) { + githubImportFileSelect.addEventListener("keydown", handleGitHubImportInputKeydown); + } fileInput.addEventListener("change", function (e) { const file = e.target.files[0]; @@ -803,9 +1594,6 @@ This is a fully client-side application. Your content never leaves your browser Markdown Export -