${highlightedCode}| Document Type | -Support | -|
|---|---|---|
| Markdown Viewer (Ours) | -Other Markdown Editors | -|
| Technical Docs | -Full + Diagrams | -Limited/Basic | -
| Research Notes | -Full + Math | -Partial | -
| Developer Guides | -Full + Export Options | -Basic | -
${markdownEditor.value}`;
- }
- }
-
- function importMarkdownFile(file) {
- const reader = new FileReader();
- reader.onload = function(e) {
- 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,
- NodeFilter.SHOW_TEXT,
- null,
- false
- );
-
- const textNodes = [];
- let node;
- while ((node = walker.nextNode())) {
- let parent = node.parentNode;
- let isInCode = false;
- while (parent && parent !== element) {
- if (parent.tagName === 'PRE' || parent.tagName === 'CODE') {
- isInCode = true;
- break;
- }
- parent = parent.parentNode;
- }
-
- if (!isInCode && node.nodeValue.includes(':')) {
- textNodes.push(node);
- }
- }
-
- textNodes.forEach(textNode => {
- const text = textNode.nodeValue;
- const emojiRegex = /:([\w+-]+):/g;
-
- let match;
- let lastIndex = 0;
- let result = '';
- let hasEmoji = false;
-
- while ((match = emojiRegex.exec(text)) !== null) {
- const shortcode = match[1];
- const emoji = joypixels.shortnameToUnicode(`:${shortcode}:`);
-
- if (emoji !== `:${shortcode}:`) { // If conversion was successful
- hasEmoji = true;
- result += text.substring(lastIndex, match.index) + emoji;
- lastIndex = emojiRegex.lastIndex;
- } else {
- result += text.substring(lastIndex, emojiRegex.lastIndex);
- lastIndex = emojiRegex.lastIndex;
- }
- }
-
- if (hasEmoji) {
- result += text.substring(lastIndex);
- const span = document.createElement('span');
- span.innerHTML = result;
- textNode.parentNode.replaceChild(span, textNode);
- }
- });
- }
-
- function debouncedRender() {
- clearTimeout(markdownRenderTimeout);
- markdownRenderTimeout = setTimeout(renderMarkdown, RENDER_DELAY);
- }
-
- function updateDocumentStats() {
- const text = markdownEditor.value;
-
- const charCount = text.length;
- charCountElement.textContent = charCount.toLocaleString();
-
- const wordCount = text.trim() === "" ? 0 : text.trim().split(/\s+/).length;
- wordCountElement.textContent = wordCount.toLocaleString();
-
- const readingTimeMinutes = Math.ceil(wordCount / 200);
- readingTimeElement.textContent = readingTimeMinutes;
- }
-
- function syncEditorToPreview() {
- if (!syncScrollingEnabled || isPreviewScrolling) return;
-
- isEditorScrolling = true;
- clearTimeout(scrollSyncTimeout);
-
- scrollSyncTimeout = setTimeout(() => {
- const editorScrollRatio =
- editorPane.scrollTop /
- (editorPane.scrollHeight - editorPane.clientHeight);
- const previewScrollPosition =
- (previewPane.scrollHeight - previewPane.clientHeight) *
- editorScrollRatio;
-
- if (!isNaN(previewScrollPosition) && isFinite(previewScrollPosition)) {
- previewPane.scrollTop = previewScrollPosition;
- }
-
- setTimeout(() => {
- isEditorScrolling = false;
- }, 50);
- }, SCROLL_SYNC_DELAY);
- }
-
- function syncPreviewToEditor() {
- if (!syncScrollingEnabled || isEditorScrolling) return;
-
- isPreviewScrolling = true;
- clearTimeout(scrollSyncTimeout);
-
- scrollSyncTimeout = setTimeout(() => {
- const previewScrollRatio =
- previewPane.scrollTop /
- (previewPane.scrollHeight - previewPane.clientHeight);
- const editorScrollPosition =
- (editorPane.scrollHeight - editorPane.clientHeight) *
- previewScrollRatio;
-
- if (!isNaN(editorScrollPosition) && isFinite(editorScrollPosition)) {
- editorPane.scrollTop = editorScrollPosition;
- }
-
- setTimeout(() => {
- isPreviewScrolling = false;
- }, 50);
- }, SCROLL_SYNC_DELAY);
- }
-
- function toggleSyncScrolling() {
- syncScrollingEnabled = !syncScrollingEnabled;
- if (syncScrollingEnabled) {
- toggleSyncButton.innerHTML = ' Sync Off';
- toggleSyncButton.classList.add("sync-disabled");
- toggleSyncButton.classList.remove("sync-enabled");
- toggleSyncButton.classList.add("border-primary");
- } else {
- toggleSyncButton.innerHTML = ' Sync On';
- toggleSyncButton.classList.add("sync-enabled");
- toggleSyncButton.classList.remove("sync-disabled");
- toggleSyncButton.classList.remove("border-primary");
- }
- }
-
- // View Mode Functions - Story 1.1 & 1.2
- function setViewMode(mode) {
- if (mode === currentViewMode) return;
-
- const previousMode = currentViewMode;
- currentViewMode = mode;
-
- // Update content container class
- contentContainer.classList.remove('view-editor-only', 'view-preview-only', 'view-split');
- contentContainer.classList.add('view-' + (mode === 'editor' ? 'editor-only' : mode === 'preview' ? 'preview-only' : 'split'));
-
- // Update button active states (desktop)
- viewModeButtons.forEach(btn => {
- const btnMode = btn.getAttribute('data-mode');
- if (btnMode === mode) {
- btn.classList.add('active');
- btn.setAttribute('aria-pressed', 'true');
- } else {
- btn.classList.remove('active');
- btn.setAttribute('aria-pressed', 'false');
- }
- });
-
- // Story 1.4: Update mobile button active states
- mobileViewModeButtons.forEach(btn => {
- const btnMode = btn.getAttribute('data-mode');
- if (btnMode === mode) {
- btn.classList.add('active');
- btn.setAttribute('aria-pressed', 'true');
- } else {
- btn.classList.remove('active');
- btn.setAttribute('aria-pressed', 'false');
- }
- });
-
- // Story 1.2: Show/hide sync toggle based on view mode
- updateSyncToggleVisibility(mode);
-
- // Story 1.3: Handle pane widths when switching modes
- if (mode === 'split') {
- // Restore preserved pane widths when entering split mode
- applyPaneWidths();
- } else if (previousMode === 'split') {
- // Reset pane widths when leaving split mode
- resetPaneWidths();
- }
-
- // Re-render markdown when switching to a view that includes preview
- if (mode === 'split' || mode === 'preview') {
- renderMarkdown();
- }
- }
-
- // Story 1.2: Update sync toggle visibility
- function updateSyncToggleVisibility(mode) {
- const isSplitView = mode === 'split';
-
- // Desktop sync toggle
- if (toggleSyncButton) {
- toggleSyncButton.style.display = isSplitView ? '' : 'none';
- toggleSyncButton.setAttribute('aria-hidden', !isSplitView);
- }
-
- // Mobile sync toggle
- if (mobileToggleSync) {
- mobileToggleSync.style.display = isSplitView ? '' : 'none';
- mobileToggleSync.setAttribute('aria-hidden', !isSplitView);
- }
- }
-
- // Story 1.3: Resize Divider Functions
- function initResizer() {
- if (!resizeDivider) return;
-
- resizeDivider.addEventListener('mousedown', startResize);
- document.addEventListener('mousemove', handleResize);
- document.addEventListener('mouseup', stopResize);
-
- // Touch support for tablets (though disabled via CSS, keeping for future)
- resizeDivider.addEventListener('touchstart', startResizeTouch);
- document.addEventListener('touchmove', handleResizeTouch);
- document.addEventListener('touchend', stopResize);
- }
-
- function startResize(e) {
- if (currentViewMode !== 'split') return;
- e.preventDefault();
- isResizing = true;
- resizeDivider.classList.add('dragging');
- document.body.classList.add('resizing');
- }
-
- function startResizeTouch(e) {
- if (currentViewMode !== 'split') return;
- e.preventDefault();
- isResizing = true;
- resizeDivider.classList.add('dragging');
- document.body.classList.add('resizing');
- }
-
- function handleResize(e) {
- if (!isResizing) return;
-
- const containerRect = contentContainer.getBoundingClientRect();
- const containerWidth = containerRect.width;
- const mouseX = e.clientX - containerRect.left;
-
- // Calculate percentage
- let newEditorPercent = (mouseX / containerWidth) * 100;
-
- // Enforce minimum pane widths
- newEditorPercent = Math.max(MIN_PANE_PERCENT, Math.min(100 - MIN_PANE_PERCENT, newEditorPercent));
-
- editorWidthPercent = newEditorPercent;
- applyPaneWidths();
- }
-
- function handleResizeTouch(e) {
- if (!isResizing || !e.touches[0]) return;
-
- const containerRect = contentContainer.getBoundingClientRect();
- const containerWidth = containerRect.width;
- const touchX = e.touches[0].clientX - containerRect.left;
-
- let newEditorPercent = (touchX / containerWidth) * 100;
- newEditorPercent = Math.max(MIN_PANE_PERCENT, Math.min(100 - MIN_PANE_PERCENT, newEditorPercent));
-
- editorWidthPercent = newEditorPercent;
- applyPaneWidths();
- }
-
- function stopResize() {
- if (!isResizing) return;
- isResizing = false;
- resizeDivider.classList.remove('dragging');
- document.body.classList.remove('resizing');
- }
-
- function applyPaneWidths() {
- if (currentViewMode !== 'split') return;
-
- const previewPercent = 100 - editorWidthPercent;
- editorPaneElement.style.flex = `0 0 calc(${editorWidthPercent}% - 4px)`;
- previewPaneElement.style.flex = `0 0 calc(${previewPercent}% - 4px)`;
- }
-
- function resetPaneWidths() {
- editorPaneElement.style.flex = '';
- previewPaneElement.style.flex = '';
- }
-
- function openMobileMenu() {
- mobileMenuPanel.classList.add("active");
- mobileMenuOverlay.classList.add("active");
- }
- function closeMobileMenu() {
- mobileMenuPanel.classList.remove("active");
- mobileMenuOverlay.classList.remove("active");
- }
- mobileMenuToggle.addEventListener("click", openMobileMenu);
- mobileCloseMenu.addEventListener("click", closeMobileMenu);
- mobileMenuOverlay.addEventListener("click", closeMobileMenu);
-
- function updateMobileStats() {
- mobileCharCount.textContent = charCountElement.textContent;
- mobileWordCount.textContent = wordCountElement.textContent;
- mobileReadingTime.textContent = readingTimeElement.textContent;
- }
-
- const origUpdateStats = updateDocumentStats;
- updateDocumentStats = function() {
- origUpdateStats();
- updateMobileStats();
- };
-
- mobileToggleSync.addEventListener("click", () => {
- toggleSyncScrolling();
- if (syncScrollingEnabled) {
- mobileToggleSync.innerHTML = ' Sync Off';
- mobileToggleSync.classList.add("sync-disabled");
- mobileToggleSync.classList.remove("sync-enabled");
- mobileToggleSync.classList.add("border-primary");
- } else {
- mobileToggleSync.innerHTML = ' Sync On';
- mobileToggleSync.classList.add("sync-enabled");
- mobileToggleSync.classList.remove("sync-disabled");
- mobileToggleSync.classList.remove("border-primary");
- }
- });
- 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());
- mobileCopyMarkdown.addEventListener("click", () => copyMarkdownButton.click());
- mobileThemeToggle.addEventListener("click", () => {
- 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();
- });
- }
-
- initTabs();
- updateMobileStats();
-
- // Initialize resizer - Story 1.3
- initResizer();
-
- // View Mode Button Event Listeners - Story 1.1
- viewModeButtons.forEach(btn => {
- btn.addEventListener('click', function() {
- const mode = this.getAttribute('data-mode');
- setViewMode(mode);
- saveCurrentTabState();
- });
- });
-
- // Story 1.4: Mobile View Mode Button Event Listeners
- mobileViewModeButtons.forEach(btn => {
- btn.addEventListener('click', function() {
- const mode = this.getAttribute('data-mode');
- setViewMode(mode);
- saveCurrentTabState();
- closeMobileMenu();
- });
- });
-
- 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) {
- if (e.key === 'Tab') {
- e.preventDefault();
-
- const start = this.selectionStart;
- const end = this.selectionEnd;
- const value = this.value;
-
- // Insert 2 spaces
- const indent = ' '; // 2 spaces
-
- // Update textarea value
- this.value = value.substring(0, start) + indent + value.substring(end);
-
- // Update cursor position
- this.selectionStart = this.selectionEnd = start + indent.length;
-
- // Trigger input event to update preview
- this.dispatchEvent(new Event('input'));
- }
- });
-
- editorPane.addEventListener("scroll", syncEditorToPreview);
- previewPane.addEventListener("scroll", syncPreviewToEditor);
- toggleSyncButton.addEventListener("click", toggleSyncScrolling);
- themeToggle.addEventListener("click", function () {
- const theme =
- document.documentElement.getAttribute("data-theme") === "dark"
- ? "light"
- : "dark";
- document.documentElement.setAttribute("data-theme", theme);
-
- if (theme === "dark") {
- themeToggle.innerHTML = '';
- } else {
- themeToggle.innerHTML = '';
- }
-
- renderMarkdown();
- });
-
- 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];
- if (file) {
- importMarkdownFile(file);
- }
- this.value = "";
- });
-
- exportMd.addEventListener("click", function () {
- try {
- const blob = new Blob([markdownEditor.value], {
- type: "text/markdown;charset=utf-8",
- });
- saveAs(blob, "document.md");
- } catch (e) {
- console.error("Export failed:", e);
- alert("Export failed: " + e.message);
- }
- });
-
- exportHtml.addEventListener("click", function () {
- try {
- const markdown = markdownEditor.value;
- const html = marked.parse(markdown);
- const sanitizedHtml = DOMPurify.sanitize(html, {
- ADD_TAGS: ['mjx-container'],
- ADD_ATTR: ['id', 'class', 'style']
- });
- const isDarkTheme =
- document.documentElement.getAttribute("data-theme") === "dark";
- const cssTheme = isDarkTheme
- ? "https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.3.0/github-markdown-dark.min.css"
- : "https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.3.0/github-markdown.min.css";
- const fullHtml = `
-
-
-
-
- Drop your Markdown file here or click to browse
-