${escapeHtml(jsyaml.dump(value).trimEnd())}`;
}
if (typeof value === 'object') {
return `${escapeHtml(jsyaml.dump(value).trimEnd())}`;
}
return escapeHtml(String(value));
}
function renderFrontmatterTable(data) {
const rows = Object.entries(data).map(([key, value]) =>
`
Error rendering markdown: ${safeMessage}
${safeMarkdown}`;
}
}
}
function importMarkdownFile(file) {
if (file.size > 10 * 1024 * 1024) {
alert('File is too large (maximum 10MB supported).');
return;
}
const reader = new FileReader();
reader.onload = function(e) {
const text = e.target.result || '';
// Simple binary check: look for null bytes in the first 8KB
const checkLength = Math.min(text.length, 8000);
for (let i = 0; i < checkLength; i++) {
if (text.charCodeAt(i) === 0) {
alert('Cannot import: The selected file appears to be a binary file.');
return;
}
}
newTab(text, file.name.replace(/\.md$/i, ''));
};
reader.onerror = function() {
alert('Failed to read the file. Please check permissions and try again.');
};
reader.readAsText(file);
}
function isMarkdownPath(path) {
return /\.(md|markdown)$/i.test(path || "");
}
const MAX_GITHUB_FILES_SHOWN = 30;
const GITHUB_IMPORT_MIN_REQUEST_INTERVAL_MS = 800;
let lastGitHubImportRequestAt = 0;
const selectedGitHubImportPaths = new Set();
let availableGitHubImportPaths = [];
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 now = Date.now();
const waitTime = GITHUB_IMPORT_MIN_REQUEST_INTERVAL_MS - (now - lastGitHubImportRequestAt);
if (waitTime > 0) {
await new Promise((resolve) => setTimeout(resolve, waitTime));
}
lastGitHubImportRequestAt = Date.now();
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 < 4) 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 buildMarkdownFileTree(paths) {
const root = { folders: {}, files: [] };
(paths || []).forEach((path) => {
const segments = (path || "").split("/").filter(Boolean);
if (!segments.length) return;
const fileName = segments.pop();
let node = root;
segments.forEach((segment) => {
if (!node.folders[segment]) {
node.folders[segment] = { folders: {}, files: [] };
}
node = node.folders[segment];
});
node.files.push({ name: fileName, path });
});
return root;
}
function updateGitHubImportSelectedCount() {
if (!githubImportSelectedCount) return;
const count = selectedGitHubImportPaths.size;
githubImportSelectedCount.textContent = `${count} selected`;
}
function updateGitHubSelectAllButtonLabel() {
if (!githubImportSelectAllBtn) return;
const total = availableGitHubImportPaths.length;
const allSelected = total > 0 && selectedGitHubImportPaths.size === total;
githubImportSelectAllBtn.textContent = allSelected ? "Clear All" : "Select All";
}
function syncGitHubSelectionToButtons() {
if (!githubImportTree) return;
Array.from(githubImportTree.querySelectorAll(".github-tree-file-btn")).forEach((btn) => {
const isSelected = selectedGitHubImportPaths.has(btn.dataset.path);
btn.classList.toggle("is-selected", isSelected);
btn.setAttribute("aria-pressed", isSelected ? "true" : "false");
});
}
function setGitHubSelectedPaths(paths) {
selectedGitHubImportPaths.clear();
(paths || []).forEach((path) => selectedGitHubImportPaths.add(path));
updateGitHubImportSelectedCount();
syncGitHubSelectionToButtons();
updateGitHubSelectAllButtonLabel();
}
function toggleGitHubSelectedPath(path) {
if (!path) return;
if (selectedGitHubImportPaths.has(path)) {
selectedGitHubImportPaths.delete(path);
} else {
selectedGitHubImportPaths.add(path);
}
updateGitHubImportSelectedCount();
syncGitHubSelectionToButtons();
updateGitHubSelectAllButtonLabel();
}
function renderGitHubImportTree(paths) {
if (!githubImportTree || !githubImportFileSelect) return;
githubImportTree.innerHTML = "";
const tree = buildMarkdownFileTree(paths);
const createTreeBranch = function(node, parentPath) {
const list = document.createElement("ul");
const folderNames = Object.keys(node.folders).sort((a, b) => a.localeCompare(b));
folderNames.forEach((folderName) => {
const folderPath = parentPath ? `${parentPath}/${folderName}` : folderName;
const item = document.createElement("li");
const folderLabel = document.createElement("span");
folderLabel.className = "github-tree-folder-label";
folderLabel.textContent = `📁 ${folderName}`;
item.appendChild(folderLabel);
item.appendChild(createTreeBranch(node.folders[folderName], folderPath));
list.appendChild(item);
});
node.files
.sort((a, b) => a.path.localeCompare(b.path))
.forEach((file) => {
const fileItem = document.createElement("li");
const fileButton = document.createElement("button");
fileButton.type = "button";
fileButton.className = "github-tree-file-btn";
fileButton.dataset.path = file.path;
fileButton.setAttribute("aria-pressed", "false");
fileButton.textContent = `📄 ${file.name}`;
fileButton.addEventListener("click", function() {
toggleGitHubSelectedPath(file.path);
});
fileItem.appendChild(fileButton);
list.appendChild(fileItem);
});
return list;
};
githubImportTree.appendChild(createTreeBranch(tree, ""));
syncGitHubSelectionToButtons();
}
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;
if (githubImportSelectionToolbar) {
githubImportSelectionToolbar.style.display = "none";
}
availableGitHubImportPaths = [];
setGitHubSelectedPaths([]);
if (githubImportTree) {
githubImportTree.innerHTML = "";
githubImportTree.style.display = "none";
}
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();
openAppModal(githubImportModal, {
focusTarget: githubImportUrlInput,
onClose: closeGitHubImportModal
});
}
function closeGitHubImportModal() {
if (!githubImportModal) return;
closeAppModal(githubImportModal);
resetGitHubImportModal();
}
async function handleGitHubImportSubmit() {
if (!githubImportSubmitBtn || !githubImportUrlInput || !githubImportFileSelect) return;
const setGitHubImportDialogDisabled = (disabled) => {
githubImportSubmitBtn.disabled = disabled;
if (githubImportCancelBtn) {
githubImportCancelBtn.disabled = disabled;
}
if (githubImportSelectAllBtn) {
githubImportSelectAllBtn.disabled = disabled;
}
};
const step = githubImportSubmitBtn.dataset.step || "url";
if (step === "select") {
const selectedPaths = Array.from(selectedGitHubImportPaths);
const owner = githubImportSubmitBtn.dataset.owner;
const repo = githubImportSubmitBtn.dataset.repo;
const ref = githubImportSubmitBtn.dataset.ref;
if (!owner || !repo || !ref || !selectedPaths.length) {
setGitHubImportMessage("Please select at least one file to import.");
return;
}
setGitHubImportLoading(true);
setGitHubImportDialogDisabled(true);
announceToScreenReader("Importing selected files from GitHub...");
try {
for (const selectedPath of selectedPaths) {
const markdown = await fetchTextContent(buildRawGitHubUrl(owner, repo, ref, selectedPath));
newTab(markdown, getFileName(selectedPath).replace(/\.(md|markdown)$/i, ""));
}
closeGitHubImportModal();
announceToScreenReader("Files imported successfully.");
} catch (error) {
console.error("GitHub import failed:", error);
setGitHubImportMessage("GitHub import failed: " + error.message);
announceToScreenReader("GitHub import failed.");
} 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.");
}
announceToScreenReader("Fetching file from GitHub...");
const markdown = await fetchTextContent(buildRawGitHubUrl(parsed.owner, parsed.repo, parsed.ref, parsed.filePath));
newTab(markdown, getFileName(parsed.filePath).replace(/\.(md|markdown)$/i, ""));
closeGitHubImportModal();
announceToScreenReader("File imported successfully.");
return;
}
// Accessibility dynamic live announcer
const fetchingText = I18N_DICTS[activeLang].loadingFiles || "Fetching file tree...";
announceToScreenReader(fetchingText);
// Render hierarchical visual skeleton tree while the list is loading
if (githubImportTree) {
renderGitHubImportTreeSkeleton();
githubImportTree.style.display = "block";
}
const ref = parsed.ref || await getDefaultBranch(parsed.owner, parsed.repo);
const files = await listMarkdownFiles(parsed.owner, parsed.repo, ref, parsed.basePath || "");
if (!files.length) {
if (githubImportTree) {
githubImportTree.innerHTML = "";
githubImportTree.style.display = "none";
}
setGitHubImportMessage("No Markdown files were found at that GitHub location.");
announceToScreenReader("Failed to locate Markdown files.");
return;
}
const shownFiles = files.slice(0, MAX_GITHUB_FILES_SHOWN);
if (files.length === 1) {
const targetPath = files[0];
announceToScreenReader("Fetching file content...");
const markdown = await fetchTextContent(buildRawGitHubUrl(parsed.owner, parsed.repo, ref, targetPath));
newTab(markdown, getFileName(targetPath).replace(/\.(md|markdown)$/i, ""));
closeGitHubImportModal();
announceToScreenReader("File imported successfully.");
return;
}
githubImportFileSelect.innerHTML = "";
githubImportUrlInput.style.display = "none";
githubImportFileSelect.style.display = "none";
if (githubImportSelectionToolbar) {
githubImportSelectionToolbar.style.display = "flex";
}
if (githubImportTree) {
githubImportTree.style.display = "block";
}
shownFiles.forEach((filePath) => {
const option = document.createElement("option");
option.value = filePath;
option.textContent = filePath;
githubImportFileSelect.appendChild(option);
});
availableGitHubImportPaths = shownFiles.slice();
setGitHubSelectedPaths(shownFiles[0] ? [shownFiles[0]] : []);
renderGitHubImportTree(shownFiles);
// Announce load complete
announceToScreenReader("GitHub files loaded. " + files.length + " files available in the tree.");
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 Markdown file(s) 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);
announceToScreenReader("GitHub import failed.");
if (githubImportTree) {
githubImportTree.innerHTML = "";
githubImportTree.style.display = "none";
}
} finally {
setGitHubImportDialogDisabled(false);
setGitHubImportLoading(false);
}
}
function scheduleEmojiLookupRefresh() {
if (emojiLookupLoaded || emojiRenderScheduled) return;
emojiRenderScheduled = true;
loadEmojiEntries()
.then(() => {
if (emojiUrlMap.size) {
renderMarkdown({ force: true, reason: 'emoji-refresh' });
}
})
.finally(() => {
emojiRenderScheduled = false;
});
}
function processEmojis(element) {
// Early exit if the raw text content has no colon characters (PERF-013)
// This avoids the expensive TreeWalker DOM walk for documents without emoji shortcodes
if (!element.textContent || !element.textContent.includes(':')) return;
// PERF-002: Lazy-load JoyPixels on first use
if (typeof joypixels === 'undefined') {
Promise.all([
loadScript(CDN.joypixels),
loadStyle(CDN.joypixels_css)
]).then(function() { processEmojis(element); });
return;
}
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);
}
}
let needsEmojiLookup = false;
textNodes.forEach(textNode => {
const text = textNode.nodeValue;
const emojiRegex = /:([\w+-]+):/g;
let match;
let lastIndex = 0;
let hasEmoji = false;
const fragment = document.createDocumentFragment();
while ((match = emojiRegex.exec(text)) !== null) {
const shortcode = match[1];
const emoji = joypixels.shortnameToUnicode(`:${shortcode}:`);
if (emoji !== `:${shortcode}:`) { // If conversion was successful
hasEmoji = true;
if (match.index > lastIndex) {
fragment.appendChild(document.createTextNode(text.substring(lastIndex, match.index)));
}
fragment.appendChild(document.createTextNode(emoji));
lastIndex = emojiRegex.lastIndex;
} else {
const emojiUrl = emojiUrlMap.get(shortcode);
if (emojiUrl) {
hasEmoji = true;
if (match.index > lastIndex) {
fragment.appendChild(document.createTextNode(text.substring(lastIndex, match.index)));
}
const image = document.createElement('img');
image.className = 'emoji-inline';
image.src = emojiUrl;
image.alt = `:${shortcode}:`;
image.loading = 'lazy';
image.setAttribute('aria-label', `:${shortcode}:`);
fragment.appendChild(image);
lastIndex = emojiRegex.lastIndex;
} else if (!emojiLookupLoaded) {
needsEmojiLookup = true;
}
}
}
if (hasEmoji) {
if (lastIndex < text.length) {
fragment.appendChild(document.createTextNode(text.substring(lastIndex)));
}
textNode.parentNode.replaceChild(fragment, textNode);
}
});
if (needsEmojiLookup) {
scheduleEmojiLookupRefresh();
}
}
function debouncedRender() {
clearTimeout(markdownRenderTimeout);
const delay = getPreviewRenderDelay(markdownEditor.value);
markdownRenderTimeout = setTimeout(function() {
renderMarkdown({ reason: 'edit' });
}, delay);
}
function countWordsFast(text) {
let count = 0;
let inWord = false;
for (let i = 0; i < text.length; i += 1) {
const code = text.charCodeAt(i);
if (
code === 32 ||
code === 9 ||
code === 10 ||
code === 13 ||
code === 12 ||
code === 11 ||
code === 160
) {
inWord = false;
} else if (!inWord) {
count += 1;
inWord = true;
}
}
return count;
}
function updateDocumentStats() {
const text = markdownEditor.value;
const charCount = text.length;
charCountElement.textContent = charCount.toLocaleString();
const wordCount = countWordsFast(text);
wordCountElement.textContent = wordCount.toLocaleString();
const readingTimeMinutes = Math.ceil(wordCount / 200);
readingTimeElement.textContent = readingTimeMinutes;
}
function syncEditorToPreview() {
if (!syncScrollingEnabled || isPreviewScrolling || isProgrammaticScrolling) return;
isEditorScrolling = true;
if (scrollSyncTimeout) cancelAnimationFrame(scrollSyncTimeout);
scrollSyncTimeout = requestAnimationFrame(function() {
const editorScrollRange = markdownEditor.scrollHeight - markdownEditor.clientHeight;
const editorScrollRatio =
editorScrollRange > 0 ? markdownEditor.scrollTop / editorScrollRange : 0;
const previewScrollPosition =
(previewPane.scrollHeight - previewPane.clientHeight) *
editorScrollRatio;
if (!isNaN(previewScrollPosition) && isFinite(previewScrollPosition)) {
previewPane.scrollTop = previewScrollPosition;
}
setTimeout(function() {
isEditorScrolling = false;
}, 50);
});
}
function syncPreviewToEditor() {
if (!syncScrollingEnabled || isEditorScrolling || isProgrammaticScrolling) return;
isPreviewScrolling = true;
if (scrollSyncTimeout) cancelAnimationFrame(scrollSyncTimeout);
scrollSyncTimeout = requestAnimationFrame(function() {
const previewScrollRange = previewPane.scrollHeight - previewPane.clientHeight;
const previewScrollRatio =
previewScrollRange > 0 ? previewPane.scrollTop / previewScrollRange : 0;
const editorScrollPosition =
(markdownEditor.scrollHeight - markdownEditor.clientHeight) *
previewScrollRatio;
if (!isNaN(editorScrollPosition) && isFinite(editorScrollPosition)) {
markdownEditor.scrollTop = editorScrollPosition;
syncEditorScrollOverlays();
}
setTimeout(function() {
isPreviewScrolling = false;
}, 50);
});
}
function toggleSyncScrolling() {
syncScrollingEnabled = !syncScrollingEnabled;
if (syncScrollingEnabled) {
toggleSyncButton.innerHTML = ' Sync Off';
toggleSyncButton.classList.add("sync-disabled");
toggleSyncButton.classList.remove("sync-enabled");
toggleSyncButton.classList.add("sync-active");
} else {
toggleSyncButton.innerHTML = ' Sync On';
toggleSyncButton.classList.add("sync-enabled");
toggleSyncButton.classList.remove("sync-disabled");
toggleSyncButton.classList.remove("sync-active");
}
saveGlobalState({ syncScrollingEnabled });
}
// 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-view-mode');
if (btnMode === mode) {
btn.classList.add('is-active');
btn.setAttribute('aria-pressed', 'true');
} else {
btn.classList.remove('is-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 {
// Reset inline pane widths when not in split mode
resetPaneWidths();
}
// Re-render markdown when switching to a view that includes preview
if (mode === 'split' || mode === 'preview') {
renderMarkdown({ reason: 'view-switch' });
}
if (mode === 'split' || mode === 'editor') {
refreshEditorWidth();
scheduleLineNumberUpdate({ force: true });
updateFindHighlights();
scheduleEditorOverlayScrollSync();
}
}
function resolveViewToggleMode(mode) {
if ((mode === 'editor' || mode === 'preview') && currentViewMode === mode) {
return 'split';
}
return mode;
}
// Story 1.2: Update sync toggle visibility
function updateSyncToggleVisibility(mode) {
const isSplitView = mode === 'split';
// Desktop sync toggle
if (toggleSyncButton) {
toggleSyncButton.style.display = '';
toggleSyncButton.disabled = !isSplitView;
toggleSyncButton.setAttribute('aria-disabled', String(!isSplitView));
toggleSyncButton.removeAttribute('aria-hidden');
}
// Mobile sync toggle
if (mobileToggleSync) {
mobileToggleSync.style.display = '';
mobileToggleSync.disabled = !isSplitView;
mobileToggleSync.setAttribute('aria-disabled', String(!isSplitView));
mobileToggleSync.removeAttribute('aria-hidden');
}
}
function replaceEditorRange(start, end, replacement, selectStart, selectEnd) {
pushProgrammaticHistoryState();
markdownEditor.focus();
markdownEditor.setRangeText(replacement, start, end, 'end');
const nextStart = typeof selectStart === 'number' ? selectStart : start + replacement.length;
const nextEnd = typeof selectEnd === 'number' ? selectEnd : nextStart;
markdownEditor.setSelectionRange(nextStart, nextEnd);
markdownEditor.dispatchEvent(new Event('input', { bubbles: true }));
lastPushedValue = markdownEditor.value;
lastInputType = 'programmatic';
}
function wrapEditorSelection(prefix, suffix, placeholder) {
const start = markdownEditor.selectionStart;
const end = markdownEditor.selectionEnd;
const selected = markdownEditor.value.slice(start, end) || placeholder;
const replacement = prefix + selected + suffix;
const selectionStart = start + prefix.length;
const selectionEnd = selectionStart + selected.length;
replaceEditorRange(start, end, replacement, selectionStart, selectionEnd);
}
function getCurrentLineRange() {
const value = markdownEditor.value;
const start = markdownEditor.selectionStart;
const lineStart = value.lastIndexOf('\n', Math.max(0, start - 1)) + 1;
let lineEnd = value.indexOf('\n', start);
if (lineEnd === -1) lineEnd = value.length;
return { start: lineStart, end: lineEnd, text: value.slice(lineStart, lineEnd) };
}
function getSelectedLineRange() {
const value = markdownEditor.value;
const start = markdownEditor.selectionStart;
const end = markdownEditor.selectionEnd;
const lineStart = value.lastIndexOf('\n', Math.max(0, start - 1)) + 1;
let lineEnd = value.indexOf('\n', end);
if (lineEnd === -1) lineEnd = value.length;
return { start: lineStart, end: lineEnd, text: value.slice(lineStart, lineEnd) };
}
function transformEditorLines(transformer) {
const range = getSelectedLineRange();
const replacement = range.text.split('\n').map(transformer).join('\n');
replaceEditorRange(range.start, range.end, replacement, range.start, range.start + replacement.length);
}
function getListLineRange() {
const value = markdownEditor.value;
const start = markdownEditor.selectionStart;
const end = markdownEditor.selectionEnd;
const effectiveEnd = end > start && value[end - 1] === '\n' ? end - 1 : end;
const lineStart = value.lastIndexOf('\n', Math.max(0, start - 1)) + 1;
let lineEnd = value.indexOf('\n', effectiveEnd);
if (lineEnd === -1) lineEnd = value.length;
return { start: lineStart, end: lineEnd, text: value.slice(lineStart, lineEnd) };
}
function parseMarkdownListItem(line) {
const match = line.match(/^(\s*)((\d+)\.|[-*+])(?:\s+|$)(.*)$/);
if (!match) return null;
const isOrdered = typeof match[3] !== 'undefined';
return {
type: isOrdered ? 'ordered' : 'unordered',
indent: match[1],
marker: match[2],
number: isOrdered ? parseInt(match[3], 10) : null,
bullet: isOrdered ? null : match[2],
body: match[4] || '',
prefix: match[1] + match[2] + ' '
};
}
function stripListMarkerForApply(line) {
const parsed = parseMarkdownListItem(line);
if (parsed) {
return { indent: parsed.indent, body: parsed.body };
}
const match = line.match(/^(\s*)(.*)$/);
return { indent: match ? match[1] : '', body: match ? match[2] : line };
}
function getPreviousLineInfo(lineStart) {
if (lineStart <= 0) return null;
const value = markdownEditor.value;
const previousEnd = lineStart - 1;
const previousStart = previousEnd > 0 ? value.lastIndexOf('\n', previousEnd - 1) + 1 : 0;
return { start: previousStart, text: value.slice(previousStart, previousEnd) };
}
function getOrderedListStartNumber(lineStart) {
const previousLine = getPreviousLineInfo(lineStart);
if (!previousLine || !previousLine.text.trim()) return 1;
const parsed = parseMarkdownListItem(previousLine.text);
return parsed && parsed.type === 'ordered' ? parsed.number + 1 : 1;
}
function applyMarkdownList(type) {
const range = getListLineRange();
const hadSelection = markdownEditor.selectionStart !== markdownEditor.selectionEnd;
const lines = range.text.split('\n');
let nextNumber = type === 'ordered' ? getOrderedListStartNumber(range.start) : 1;
let firstPrefixLength = null;
const replacement = lines.map(function(line) {
const stripped = stripListMarkerForApply(line);
const prefix = type === 'ordered'
? stripped.indent + (nextNumber++) + '. '
: stripped.indent + '- ';
if (firstPrefixLength === null) firstPrefixLength = prefix.length;
return prefix + stripped.body;
}).join('\n');
const isSingleLine = lines.length === 1;
const caret = (!hadSelection || isSingleLine)
? range.start + (firstPrefixLength || 0)
: range.start + replacement.length;
replaceEditorRange(range.start, range.end, replacement, caret, caret);
}
function renumberOrderedListAfterPosition(position, nextNumber) {
let value = markdownEditor.value;
let lineStart = value.indexOf('\n', position);
if (lineStart === -1) return;
lineStart += 1;
let changed = false;
while (lineStart < value.length) {
let lineEnd = value.indexOf('\n', lineStart);
const hasNewline = lineEnd !== -1;
if (!hasNewline) lineEnd = value.length;
const line = value.slice(lineStart, lineEnd);
if (!line.trim()) break;
const parsed = parseMarkdownListItem(line);
if (!parsed || parsed.type !== 'ordered') break;
const replacement = parsed.indent + nextNumber + '. ' + parsed.body;
if (replacement !== line) {
value = value.slice(0, lineStart) + replacement + value.slice(lineEnd);
changed = true;
}
lineStart += replacement.length + (hasNewline ? 1 : 0);
nextNumber += 1;
}
if (changed) {
const selectionStart = markdownEditor.selectionStart;
const selectionEnd = markdownEditor.selectionEnd;
markdownEditor.value = value;
markdownEditor.setSelectionRange(selectionStart, selectionEnd);
markdownEditor.dispatchEvent(new Event('input', { bubbles: true }));
}
}
function handleListEnter(e) {
if (e.key !== 'Enter' || e.shiftKey || markdownEditor.selectionStart !== markdownEditor.selectionEnd) {
return false;
}
const range = getCurrentLineRange();
const parsed = parseMarkdownListItem(range.text);
if (!parsed) return false;
e.preventDefault();
if (!parsed.body.trim()) {
const caret = range.start + parsed.indent.length;
replaceEditorRange(range.start, range.end, parsed.indent, caret, caret);
return true;
}
const nextPrefix = parsed.type === 'ordered'
? parsed.indent + (parsed.number + 1) + '. '
: parsed.indent + parsed.bullet + ' ';
const insertAt = markdownEditor.selectionStart;
const caret = insertAt + 1 + nextPrefix.length;
replaceEditorRange(insertAt, insertAt, '\n' + nextPrefix, caret, caret);
if (parsed.type === 'ordered') {
renumberOrderedListAfterPosition(caret, parsed.number + 2);
}
return true;
}
function transformSelectionOrCurrentLine(transformer) {
let start = markdownEditor.selectionStart;
let end = markdownEditor.selectionEnd;
if (start === end) {
const range = getCurrentLineRange();
start = range.start;
end = range.end;
}
const replacement = transformer(markdownEditor.value.slice(start, end));
replaceEditorRange(start, end, replacement, start, start + replacement.length);
}
function stripBasicMarkdown(text) {
return text
.replace(/^#{1,6}\s+/gm, '')
.replace(/^>\s?/gm, '')
.replace(/^(\s*)([-*+]|\d+\.)\s+/gm, '$1')
.replace(/!\[([^\]]*)\]\([^)]+\)/g, '$1')
.replace(/\[([^\]]+)\]\([^)]+\)/g, '$1')
.replace(/(\*\*|__)(.*?)\1/g, '$2')
.replace(/(\*|_)(.*?)\1/g, '$2')
.replace(/~~(.*?)~~/g, '$1')
.replace(/`([^`]+)`/g, '$1');
}
function getOrCreateTabHistory(tabId) {
if (!tabId) return { undoStack: [], redoStack: [] };
if (!tabHistories[tabId]) {
tabHistories[tabId] = {
undoStack: [],
redoStack: []
};
}
return tabHistories[tabId];
}
function initTabHistory(tabId, initialValue) {
const hist = getOrCreateTabHistory(tabId);
if (hist.undoStack.length === 0) {
hist.undoStack.push({
value: initialValue || '',
selectionStart: 0,
selectionEnd: 0
});
lastPushedValue = initialValue || '';
currentHistoryTabId = tabId;
pendingState = null;
}
}
function pushProgrammaticHistoryState() {
if (typingTimeout) {
clearTimeout(typingTimeout);
typingTimeout = null;
}
const tabId = activeTabId;
const hist = getOrCreateTabHistory(tabId);
const currentValue = markdownEditor.value;
if (pendingState) {
hist.undoStack.push(pendingState);
if (hist.undoStack.length > 200) {
hist.undoStack.shift();
}
hist.redoStack.length = 0;
pendingState = null;
lastPushedValue = currentValue;
} else if (currentValue !== lastPushedValue) {
hist.undoStack.push({
value: currentValue,
selectionStart: markdownEditor.selectionStart,
selectionEnd: markdownEditor.selectionEnd
});
if (hist.undoStack.length > 200) {
hist.undoStack.shift();
}
hist.redoStack.length = 0;
lastPushedValue = currentValue;
}
updateUndoRedoButtons();
}
function commitPendingState() {
if (typingTimeout) {
clearTimeout(typingTimeout);
typingTimeout = null;
}
if (!pendingState) return;
const tabId = activeTabId;
const hist = getOrCreateTabHistory(tabId);
hist.undoStack.push(pendingState);
if (hist.undoStack.length > 200) {
hist.undoStack.shift();
}
hist.redoStack.length = 0;
lastPushedValue = markdownEditor.value;
pendingState = null;
updateUndoRedoButtons();
}
function handleKeystrokeHistory(e) {
const currentValue = markdownEditor.value;
if (currentValue === lastPushedValue) return;
const inputType = e && typeof e.inputType === 'string' ? e.inputType : '';
if (!pendingState) {
pendingState = {
value: lastPushedValue,
selectionStart: lastCursorStart,
selectionEnd: lastCursorEnd
};
}
let shouldCommit = false;
if (inputType === 'insertLineBreak' || inputType === 'insertParagraph' || inputType === 'insertFromPaste' || lastInputType === 'programmatic') {
shouldCommit = true;
} else if (e && e.data === ' ') {
shouldCommit = true;
} else {
const isDelete = inputType.startsWith('delete');
const wasDelete = lastInputType === 'delete';
const isInsert = inputType.startsWith('insert');
const wasInsert = lastInputType === 'insert';
if ((isDelete && wasInsert) || (isInsert && wasDelete)) {
shouldCommit = true;
}
}
if (shouldCommit) {
commitPendingState();
}
if (typingTimeout) {
clearTimeout(typingTimeout);
}
typingTimeout = setTimeout(function() {
commitPendingState();
}, 1000);
if (inputType.startsWith('delete')) {
lastInputType = 'delete';
} else if (inputType.startsWith('insert')) {
lastInputType = 'insert';
} else {
lastInputType = 'other';
}
}
function updateLastCursor() {
if (markdownEditor) {
lastCursorStart = markdownEditor.selectionStart;
lastCursorEnd = markdownEditor.selectionEnd;
}
}
function updateUndoRedoButtons() {
const undoBtn = document.querySelector('[data-md-action="undo"]');
const redoBtn = document.querySelector('[data-md-action="redo"]');
if (!undoBtn || !redoBtn) return;
const tabId = activeTabId;
const hist = getOrCreateTabHistory(tabId);
const canUndo = hist.undoStack.length > 0 || pendingState !== null;
const canRedo = hist.redoStack.length > 0;
undoBtn.disabled = !canUndo;
undoBtn.classList.toggle('disabled', !canUndo);
redoBtn.disabled = !canRedo;
redoBtn.classList.toggle('disabled', !canRedo);
}
function executeUndo() {
if (typingTimeout) {
clearTimeout(typingTimeout);
typingTimeout = null;
}
const tabId = activeTabId;
const hist = getOrCreateTabHistory(tabId);
const currentValue = markdownEditor.value;
let stateToRestore = null;
if (pendingState) {
stateToRestore = pendingState;
pendingState = null;
hist.redoStack.push({
value: currentValue,
selectionStart: markdownEditor.selectionStart,
selectionEnd: markdownEditor.selectionEnd
});
if (hist.redoStack.length > 200) {
hist.redoStack.shift();
}
} else if (hist.undoStack.length > 0) {
const topState = hist.undoStack.pop();
if (topState) {
stateToRestore = topState;
hist.redoStack.push({
value: currentValue,
selectionStart: markdownEditor.selectionStart,
selectionEnd: markdownEditor.selectionEnd
});
if (hist.redoStack.length > 200) {
hist.redoStack.shift();
}
}
}
if (stateToRestore) {
markdownEditor.value = stateToRestore.value;
markdownEditor.setSelectionRange(stateToRestore.selectionStart, stateToRestore.selectionEnd);
lastPushedValue = stateToRestore.value;
lastInputType = null;
markdownEditor.dispatchEvent(new Event('input', { bubbles: true }));
saveCurrentTabState();
}
updateUndoRedoButtons();
}
function executeRedo() {
if (typingTimeout) {
clearTimeout(typingTimeout);
typingTimeout = null;
}
const tabId = activeTabId;
const hist = getOrCreateTabHistory(tabId);
const currentValue = markdownEditor.value;
if (hist.redoStack.length > 0) {
const stateToRestore = hist.redoStack.pop();
hist.undoStack.push({
value: currentValue,
selectionStart: markdownEditor.selectionStart,
selectionEnd: markdownEditor.selectionEnd
});
if (hist.undoStack.length > 200) {
hist.undoStack.shift();
}
markdownEditor.value = stateToRestore.value;
markdownEditor.setSelectionRange(stateToRestore.selectionStart, stateToRestore.selectionEnd);
lastPushedValue = stateToRestore.value;
lastInputType = null;
pendingState = null;
markdownEditor.dispatchEvent(new Event('input', { bubbles: true }));
saveCurrentTabState();
}
updateUndoRedoButtons();
}
function stripMarkdownFormatting(text) {
if (!text) return '';
return text
// Remove fenced code block syntax
.replace(/^```[a-zA-Z0-9-]*\r?\n?/gm, '')
.replace(/```\r?$/gm, '')
// Remove reference link definitions (e.g., [id]: url "title")
.replace(/^\[[^\]]+\]:\s*\S+(?:\s+(?:"[^"]*"|'[^']*'|\([^)]*\)))?\s*$/gm, '')
// Strip basic markdown constructs (headers, blockquotes, lists, bold, italic, strikethrough, code)
.replace(/^#{1,6}\s+/gm, '')
.replace(/^>\s?/gm, '')
.replace(/^(\s*)([-*+]|\d+\.)\s+/gm, '$1')
.replace(/!\[([^\]]*)\]\([^)]*\)/g, '$1')
.replace(/\[([^\]]+)\]\([^)]*\)/g, '$1')
// HTML alignment tags or custom tags (strip the tags, keep inner text)
.replace(/<[^>]+>/g, '')
// Bold, Italic, Strikethrough, Inline code
.replace(/(\*\*|__)(.*?)\1/g, '$2')
.replace(/(\*|_)(.*?)\1/g, '$2')
.replace(/~~(.*?)~~/g, '$1')
.replace(/`([^`]+)`/g, '$1')
// Remove horizontal rules
.replace(/^\s*[-*_]{3,}\s*$/gm, '');
}
function applyClearFormatting() {
const fullText = markdownEditor.value;
pushProgrammaticHistoryState();
replaceEditorRange(0, fullText.length, '', 0, 0);
// Force immediate visual rendering and gutter update
renderMarkdown();
updateLineNumbers();
updateFindHighlights();
saveCurrentTabState();
}
function toTitleCase(text) {
return text.toLowerCase().replace(/\b\w/g, function(letter) {
return letter.toUpperCase();
});
}
function toSlug(text) {
const slug = text.toLowerCase().trim()
.replace(/[^a-z0-9\s-]/g, '')
.replace(/\s+/g, '-')
.replace(/-+/g, '-');
return slug || 'section';
}
function getUsedReferenceNumbers(text) {
const used = new Set();
const regex = /^\[(\d+)\]:/gm;
let match = regex.exec(text);
while (match) {
const num = parseInt(match[1], 10);
if (!Number.isNaN(num)) used.add(num);
match = regex.exec(text);
}
return used;
}
function extractReferenceDefinitions(markdown) {
const definitions = new Map();
// Matches reference definitions: [1]: \n`;
const blockEnd = `\n
`;
const block = `${blockStart}${hasSelection ? selected : ''}${blockEnd}`;
const needsLeadingBreak = start > 0 && value[start - 1] !== '\n';
const needsTrailingBreak = end < value.length && value[end] !== '\n';
const replacement = (needsLeadingBreak ? '\n' : '') + block + (needsTrailingBreak ? '\n' : '');
const contentStart = start + (needsLeadingBreak ? 1 : 0) + blockStart.length;
const contentEnd = contentStart + (hasSelection ? selected.length : 0);
replaceEditorRange(start, end, replacement, contentStart, hasSelection ? contentEnd : contentStart);
}
function insertMarkdownBlock(block, startOverride, endOverride) {
const value = markdownEditor.value;
const start = typeof startOverride === 'number' ? startOverride : markdownEditor.selectionStart;
const end = typeof endOverride === 'number' ? endOverride : markdownEditor.selectionEnd;
const needsLeadingBreak = start > 0 && value[start - 1] !== '\n';
const needsTrailingBreak = end < value.length && value[end] !== '\n';
const replacement = (needsLeadingBreak ? '\n' : '') + block + (needsTrailingBreak ? '\n' : '');
const caret = start + replacement.length;
replaceEditorRange(start, end, replacement, caret, caret);
}
function clampNumber(value, min, max, fallback) {
const parsed = parseInt(value, 10);
if (Number.isNaN(parsed)) return fallback;
return Math.max(min, Math.min(max, parsed));
}
function buildMarkdownTable(columns, rows) {
const header = Array.from({ length: columns }, (_, index) => `Column ${index + 1}`).join(' | ');
const divider = Array.from({ length: columns }, () => '---').join(' | ');
const bodyRows = Array.from({ length: rows }, () => `| ${Array.from({ length: columns }, () => 'Value').join(' | ')} |`);
return `| ${header} |\n| ${divider} |\n${bodyRows.join('\n')}\n`;
}
function loadEmojiEntries() {
if (emojiLoadPromise) return emojiLoadPromise;
emojiLoadPromise = fetch(EMOJI_API_URL)
.then((response) => {
if (!response.ok) throw new Error(`Emoji request failed (${response.status})`);
return response.json();
})
.then((data) => {
emojiEntries = Object.keys(data)
.sort((a, b) => a.localeCompare(b))
.map((name) => ({
name,
url: data[name],
shortcode: `:${name}:`,
search: `${name} :${name}:`.toLowerCase(),
}));
emojiUrlMap = new Map(emojiEntries.map((entry) => [entry.name, entry.url]));
emojiLookupLoaded = true;
return emojiEntries;
})
.catch((error) => {
console.error('Failed to load GitHub emojis:', error);
emojiEntries = [];
emojiUrlMap = new Map();
emojiLookupLoaded = true;
return emojiEntries;
});
return emojiLoadPromise;
}
function createAlertPreview(type, meta) {
const wrapper = document.createElement('div');
wrapper.className = `markdown-alert markdown-alert-${type}`;
const title = document.createElement('p');
title.className = 'markdown-alert-title';
const icon = document.createElement('span');
icon.className = 'markdown-alert-icon';
icon.setAttribute('aria-hidden', 'true');
if (meta.path) {
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('viewBox', meta.viewBox || '0 0 512 512');
const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
path.setAttribute('d', meta.path);
svg.appendChild(path);
icon.appendChild(svg);
}
const label = document.createElement('span');
label.textContent = meta.label;
title.appendChild(icon);
title.appendChild(label);
const body = document.createElement('p');
body.textContent = `${meta.label} details go here.`;
wrapper.appendChild(title);
wrapper.appendChild(body);
return wrapper;
}
function flashCopyButton(button) {
const icon = button.querySelector('i');
if (!icon) return;
icon.className = 'bi bi-check-lg';
button.classList.add('is-copied');
clearTimeout(button.copyTimeout);
button.copyTimeout = setTimeout(() => {
icon.className = 'bi bi-clipboard';
button.classList.remove('is-copied');
}, 1200);
}
function openTableModal() {
const modal = document.getElementById('table-modal');
const columnInput = document.getElementById('table-modal-columns');
const rowInput = document.getElementById('table-modal-rows');
const confirmBtn = document.getElementById('table-modal-insert');
const cancelBtn = document.getElementById('table-modal-cancel');
if (!modal || !columnInput || !rowInput || !confirmBtn || !cancelBtn) return;
const start = markdownEditor.selectionStart;
const end = markdownEditor.selectionEnd;
columnInput.value = '3';
rowInput.value = '1';
modal.style.display = 'flex';
function insertTable() {
const columns = clampNumber(columnInput.value, 1, 20, 3);
const rows = clampNumber(rowInput.value, 1, 20, 1);
const table = buildMarkdownTable(columns, rows);
modal.style.display = 'none';
cleanup();
insertMarkdownBlock(table, start, end);
}
function closeModal() {
modal.style.display = 'none';
cleanup();
}
function onKey(e) {
if (e.key === 'Enter') {
e.preventDefault();
insertTable();
} else if (e.key === 'Escape') {
e.preventDefault();
closeModal();
}
}
function cleanup() {
confirmBtn.removeEventListener('click', insertTable);
cancelBtn.removeEventListener('click', closeModal);
columnInput.removeEventListener('keydown', onKey);
rowInput.removeEventListener('keydown', onKey);
}
confirmBtn.addEventListener('click', insertTable);
cancelBtn.addEventListener('click', closeModal);
columnInput.addEventListener('keydown', onKey);
rowInput.addEventListener('keydown', onKey);
requestAnimationFrame(() => {
columnInput.focus();
columnInput.select();
});
}
function openEmojiModal() {
const modal = document.getElementById('emoji-modal');
const grid = document.getElementById('emoji-modal-grid');
const emptyMessage = document.getElementById('emoji-modal-empty');
const searchInput = document.getElementById('emoji-modal-search');
const confirmBtn = document.getElementById('emoji-modal-insert');
const cancelBtn = document.getElementById('emoji-modal-cancel');
if (!modal || !grid || !emptyMessage || !searchInput || !confirmBtn || !cancelBtn) return;
const start = markdownEditor.selectionStart;
const end = markdownEditor.selectionEnd;
modal.style.display = 'flex';
confirmBtn.disabled = true;
// Localized and accessible announcements for loading
const loadingText = I18N_DICTS[activeLang].loadingEmojis || "Loading emojis...";
emptyMessage.textContent = loadingText;
emptyMessage.style.display = 'block';
announceToScreenReader(loadingText);
searchInput.value = '';
emojiSelection.clear();
// PERF-007: Clear elements using textContent
grid.textContent = '';
grid.scrollTop = 0;
emojiItems = [];
// Render visual placeholders during active requests
if (!emojiLookupLoaded) {
renderEmojiSkeletons();
}
let currentFilteredEntries = [];
let renderedCount = 0;
const CHUNK_SIZE = 120;
function updateInsertState() {
confirmBtn.disabled = emojiSelection.size === 0;
}
function toggleSelection(shortcode, element) {
if (emojiSelection.has(shortcode)) {
emojiSelection.delete(shortcode);
element.classList.remove('is-selected');
} else {
emojiSelection.add(shortcode);
element.classList.add('is-selected');
}
element.setAttribute('aria-pressed', emojiSelection.has(shortcode).toString());
updateInsertState();
}
function renderEmojiChunk(clear = false) {
if (clear) {
// PERF-007: Clear elements using textContent
grid.textContent = '';
emojiItems = [];
renderedCount = 0;
}
const nextBatch = currentFilteredEntries.slice(renderedCount, renderedCount + CHUNK_SIZE);
if (nextBatch.length === 0) {
emptyMessage.style.display = emojiItems.length ? 'none' : 'block';
return;
}
const fragment = document.createDocumentFragment();
const newItems = nextBatch.map((entry) => {
const item = document.createElement('button');
item.type = 'button';
item.className = 'emoji-item';
const isSelected = emojiSelection.has(entry.shortcode);
if (isSelected) {
item.classList.add('is-selected');
}
item.setAttribute('aria-pressed', isSelected ? 'true' : 'false');
item.dataset.search = entry.search;
item.dataset.shortcode = entry.shortcode;
const preview = document.createElement('span');
preview.className = 'emoji-preview';
const image = document.createElement('img');
image.src = entry.url;
image.alt = entry.shortcode;
image.loading = 'lazy';
preview.appendChild(image);
const shortcodeRow = document.createElement('div');
shortcodeRow.className = 'emoji-shortcode';
const code = document.createElement('span');
code.textContent = entry.shortcode;
const copyBtn = document.createElement('button');
copyBtn.type = 'button';
copyBtn.className = 'emoji-copy-btn';
copyBtn.setAttribute('aria-label', `Copy ${entry.shortcode}`);
copyBtn.innerHTML = '';
copyBtn.addEventListener('click', (event) => {
event.stopPropagation();
copyTextToClipboard(entry.shortcode)
.then(() => flashCopyButton(copyBtn))
.catch((error) => console.error('Copy failed:', error));
});
shortcodeRow.appendChild(code);
shortcodeRow.appendChild(copyBtn);
item.appendChild(preview);
item.appendChild(shortcodeRow);
item.addEventListener('click', () => toggleSelection(entry.shortcode, item));
fragment.appendChild(item);
return { element: item, search: entry.search, shortcode: entry.shortcode };
});
emojiItems = emojiItems.concat(newItems);
grid.appendChild(fragment);
renderedCount += nextBatch.length;
emptyMessage.style.display = emojiItems.length ? 'none' : 'block';
}
function applyFilter() {
const query = searchInput.value.trim().toLowerCase();
currentFilteredEntries = emojiEntries.filter(entry => !query || entry.search.includes(query));
renderEmojiChunk(true);
}
function handleScroll() {
if (grid.scrollTop + grid.clientHeight >= grid.scrollHeight - 60) {
renderEmojiChunk(false);
}
}
function insertEmojis() {
if (!emojiSelection.size) return;
// Retain the modal's visual/definition order of emojis, consistent with the Symbols modal
const ordered = emojiItems
.filter(item => emojiSelection.has(item.shortcode))
.map(item => item.shortcode);
const insertion = ordered.join(' ');
modal.style.display = 'none';
cleanup();
replaceEditorRange(start, end, insertion, start + insertion.length, start + insertion.length);
}
function closeModal() {
modal.style.display = 'none';
cleanup();
}
function onKey(e) {
if (e.key === 'Escape') {
e.preventDefault();
closeModal();
}
}
function cleanup() {
confirmBtn.removeEventListener('click', insertEmojis);
cancelBtn.removeEventListener('click', closeModal);
searchInput.removeEventListener('input', applyFilter);
searchInput.removeEventListener('keydown', onKey);
grid.removeEventListener('scroll', handleScroll);
}
loadEmojiEntries().then((entries) => {
if (!entries.length) {
emptyMessage.textContent = 'Unable to load emojis.';
emptyMessage.style.display = 'block';
// PERF-007: Clear elements using textContent
grid.textContent = '';
emojiItems = [];
announceToScreenReader("Failed to load emojis.");
return;
}
currentFilteredEntries = entries;
renderEmojiChunk(true);
emptyMessage.textContent = 'No emojis found.';
announceToScreenReader("Emojis loaded. " + entries.length + " items available.");
updateInsertState();
});
confirmBtn.addEventListener('click', insertEmojis);
cancelBtn.addEventListener('click', closeModal);
searchInput.addEventListener('input', applyFilter);
searchInput.addEventListener('keydown', onKey);
grid.addEventListener('scroll', handleScroll);
requestAnimationFrame(() => searchInput.focus());
}
function openSymbolsModal() {
const modal = document.getElementById('symbols-modal');
const grid = document.getElementById('symbols-modal-grid');
const emptyMessage = document.getElementById('symbols-modal-empty');
const searchInput = document.getElementById('symbols-modal-search');
const confirmBtn = document.getElementById('symbols-modal-insert');
const cancelBtn = document.getElementById('symbols-modal-cancel');
if (!modal || !grid || !emptyMessage || !searchInput || !confirmBtn || !cancelBtn) return;
const start = markdownEditor.selectionStart;
const end = markdownEditor.selectionEnd;
modal.style.display = 'flex';
confirmBtn.disabled = true;
searchInput.value = '';
symbolSelection.clear();
// PERF-007: Clear elements using textContent
grid.textContent = '';
const sectionEntries = [];
SYMBOL_SECTIONS.forEach((section) => {
const sectionWrapper = document.createElement('div');
sectionWrapper.className = 'symbol-section';
const title = document.createElement('p');
title.className = 'symbol-section-title';
title.textContent = section.title;
const sectionGrid = document.createElement('div');
sectionGrid.className = 'symbol-section-grid';
const sectionItems = section.items.map((entry) => {
const item = document.createElement('button');
item.type = 'button';
item.className = 'symbol-item';
item.setAttribute('aria-pressed', 'false');
const preview = document.createElement('span');
preview.className = 'symbol-preview';
preview.textContent = entry.symbol;
const codeRow = document.createElement('div');
codeRow.className = 'symbol-code';
const code = document.createElement('span');
code.textContent = entry.entity;
const copyBtn = document.createElement('button');
copyBtn.type = 'button';
copyBtn.className = 'symbol-copy-btn';
copyBtn.setAttribute('aria-label', `Copy ${entry.entity}`);
copyBtn.innerHTML = '';
copyBtn.addEventListener('click', (event) => {
event.stopPropagation();
copyTextToClipboard(entry.entity)
.then(() => flashCopyButton(copyBtn))
.catch((error) => console.error('Copy failed:', error));
});
codeRow.appendChild(code);
codeRow.appendChild(copyBtn);
item.appendChild(preview);
item.appendChild(codeRow);
item.dataset.search = `${entry.symbol} ${entry.entity} ${entry.name}`.toLowerCase();
item.dataset.entity = entry.entity;
item.addEventListener('click', () => {
if (symbolSelection.has(entry.entity)) {
symbolSelection.delete(entry.entity);
item.classList.remove('is-selected');
} else {
symbolSelection.add(entry.entity);
item.classList.add('is-selected');
}
item.setAttribute('aria-pressed', symbolSelection.has(entry.entity).toString());
confirmBtn.disabled = symbolSelection.size === 0;
});
sectionGrid.appendChild(item);
return { element: item, search: item.dataset.search, entity: entry.entity };
});
sectionWrapper.appendChild(title);
sectionWrapper.appendChild(sectionGrid);
grid.appendChild(sectionWrapper);
sectionEntries.push({ wrapper: sectionWrapper, items: sectionItems });
});
symbolItems = sectionEntries.flatMap((section) => section.items);
function applyFilter() {
const query = searchInput.value.trim().toLowerCase();
let visibleCount = 0;
sectionEntries.forEach((section) => {
let sectionVisible = 0;
section.items.forEach((item) => {
const match = !query || item.search.includes(query);
item.element.style.display = match ? '' : 'none';
if (match) {
visibleCount += 1;
sectionVisible += 1;
}
});
section.wrapper.style.display = sectionVisible ? '' : 'none';
});
emptyMessage.style.display = visibleCount ? 'none' : 'block';
}
function insertSymbols() {
if (!symbolSelection.size) return;
const ordered = symbolItems
.filter((item) => symbolSelection.has(item.entity))
.map((item) => item.entity);
const insertion = ordered.join(' ');
modal.style.display = 'none';
cleanup();
replaceEditorRange(start, end, insertion, start + insertion.length, start + insertion.length);
}
function closeModal() {
modal.style.display = 'none';
cleanup();
}
function onKey(e) {
if (e.key === 'Escape') {
e.preventDefault();
closeModal();
}
}
function cleanup() {
confirmBtn.removeEventListener('click', insertSymbols);
cancelBtn.removeEventListener('click', closeModal);
searchInput.removeEventListener('input', applyFilter);
searchInput.removeEventListener('keydown', onKey);
}
emptyMessage.textContent = 'No symbols found.';
applyFilter();
confirmBtn.addEventListener('click', insertSymbols);
cancelBtn.addEventListener('click', closeModal);
searchInput.addEventListener('input', applyFilter);
searchInput.addEventListener('keydown', onKey);
requestAnimationFrame(() => searchInput.focus());
}
function openAlertModal() {
const modal = document.getElementById('alert-modal');
const grid = document.getElementById('alert-modal-grid');
const confirmBtn = document.getElementById('alert-modal-insert');
const cancelBtn = document.getElementById('alert-modal-cancel');
if (!modal || !grid || !confirmBtn || !cancelBtn) return;
const start = markdownEditor.selectionStart;
const end = markdownEditor.selectionEnd;
modal.style.display = 'flex';
// PERF-007: Clear elements using textContent
grid.textContent = '';
const alertTypes = ['note', 'tip', 'important', 'warning', 'caution'];
let selectedType = alertTypes[0];
const options = [];
alertTypes.forEach((type) => {
const meta = GITHUB_ALERT_META[type] || { label: type };
const option = document.createElement('button');
option.type = 'button';
option.className = 'alert-option';
option.dataset.alertType = type;
option.setAttribute('aria-pressed', (type === selectedType).toString());
const preview = document.createElement('div');
preview.className = 'alert-preview';
preview.appendChild(createAlertPreview(type, meta));
option.appendChild(preview);
if (type === selectedType) option.classList.add('is-selected');
option.addEventListener('click', () => {
selectedType = type;
options.forEach((item) => {
const isSelected = item === option;
item.classList.toggle('is-selected', isSelected);
item.setAttribute('aria-pressed', isSelected.toString());
});
});
options.push(option);
grid.appendChild(option);
});
function insertAlert() {
const type = selectedType.toUpperCase();
const meta = GITHUB_ALERT_META[selectedType] || { label: selectedType };
const body = `${meta.label} details go here.`;
const block = `> [!${type}]\n> ${body}\n`;
modal.style.display = 'none';
cleanup();
insertMarkdownBlock(block, start, end);
}
function closeModal() {
modal.style.display = 'none';
cleanup();
}
function onKey(e) {
if (e.key === 'Escape') {
e.preventDefault();
closeModal();
}
}
function cleanup() {
confirmBtn.removeEventListener('click', insertAlert);
cancelBtn.removeEventListener('click', closeModal);
modal.removeEventListener('keydown', onKey);
}
confirmBtn.addEventListener('click', insertAlert);
cancelBtn.addEventListener('click', closeModal);
modal.addEventListener('keydown', onKey);
}
function insertMarkdownLink() {
const modal = document.getElementById('link-modal');
const urlInput = document.getElementById('link-modal-url');
const textInput = document.getElementById('link-modal-text');
const confirmBtn = document.getElementById('link-modal-apply');
const cancelBtn = document.getElementById('link-modal-cancel');
if (!modal || !urlInput || !textInput || !confirmBtn || !cancelBtn) return;
const start = markdownEditor.selectionStart;
const end = markdownEditor.selectionEnd;
const selected = markdownEditor.value.slice(start, end);
urlInput.value = 'https://';
textInput.value = selected || '';
modal.style.display = 'flex';
function applyLink() {
const url = urlInput.value.trim() || 'https://';
const linkText = textInput.value.trim() || selected || 'link text';
const replacement = '[' + linkText + '](' + url + ')';
modal.style.display = 'none';
cleanup();
replaceEditorRange(start, end, replacement, start + replacement.length, start + replacement.length);
}
function closeModal() {
modal.style.display = 'none';
cleanup();
}
function onKey(e) {
if (e.key === 'Enter') {
e.preventDefault();
applyLink();
} else if (e.key === 'Escape') {
e.preventDefault();
closeModal();
}
}
function cleanup() {
confirmBtn.removeEventListener('click', applyLink);
cancelBtn.removeEventListener('click', closeModal);
urlInput.removeEventListener('keydown', onKey);
textInput.removeEventListener('keydown', onKey);
}
confirmBtn.addEventListener('click', applyLink);
cancelBtn.addEventListener('click', closeModal);
urlInput.addEventListener('keydown', onKey);
textInput.addEventListener('keydown', onKey);
requestAnimationFrame(function() {
urlInput.focus();
urlInput.select();
});
}
function insertMarkdownImage() {
const modal = document.getElementById('image-modal');
const uploadOption = document.getElementById('image-source-upload');
const urlOption = document.getElementById('image-source-url');
const uploadFields = document.getElementById('image-upload-fields');
const urlFields = document.getElementById('image-url-fields');
const fileInput = document.getElementById('image-modal-file');
const urlInput = document.getElementById('image-modal-url');
const altInput = document.getElementById('image-modal-alt');
const confirmBtn = document.getElementById('image-modal-insert');
const cancelBtn = document.getElementById('image-modal-cancel');
if (!modal || !uploadOption || !urlOption || !uploadFields || !urlFields || !fileInput || !urlInput || !altInput || !confirmBtn || !cancelBtn) return;
const start = markdownEditor.selectionStart;
const end = markdownEditor.selectionEnd;
const selected = markdownEditor.value.slice(start, end);
urlInput.value = 'https://';
altInput.value = selected || '';
fileInput.value = '';
urlOption.checked = true;
uploadOption.checked = false;
modal.style.display = 'flex';
function buildImageMarkdown(url) {
const titleText = altInput.value.trim();
const altText = titleText || 'alt text';
const safeTitle = sanitizeMarkdownTitle(titleText);
const titlePart = safeTitle ? ' "' + safeTitle + '"' : '';
return '';
}
function insertImage(url) {
const safeUrl = url.trim() || 'https://';
const replacement = buildImageMarkdown(safeUrl);
modal.style.display = 'none';
cleanup();
replaceEditorRange(start, end, replacement, start + replacement.length, start + replacement.length);
}
function insertFromFile(file) {
const objectUrl = URL.createObjectURL(file);
imageObjectUrls.add(objectUrl);
insertImage(objectUrl);
}
function updateMode(shouldFocus) {
const isUpload = uploadOption.checked;
uploadFields.style.display = isUpload ? 'flex' : 'none';
urlFields.style.display = isUpload ? 'none' : 'flex';
if (shouldFocus) {
requestAnimationFrame(function() {
if (isUpload) {
fileInput.focus();
} else {
urlInput.focus();
urlInput.select();
}
});
}
}
function onModeChange() {
updateMode(true);
}
function onFileChange() {
const file = fileInput.files && fileInput.files[0];
if (file) {
insertFromFile(file);
}
}
function onKey(e) {
if (e.key === 'Enter') {
e.preventDefault();
if (uploadOption.checked) {
const file = fileInput.files && fileInput.files[0];
if (file) insertFromFile(file);
else fileInput.click();
} else {
insertImage(urlInput.value);
}
} else if (e.key === 'Escape') {
e.preventDefault();
closeModal();
}
}
function closeModal() {
modal.style.display = 'none';
cleanup();
}
function cleanup() {
confirmBtn.removeEventListener('click', onConfirm);
cancelBtn.removeEventListener('click', closeModal);
uploadOption.removeEventListener('change', onModeChange);
urlOption.removeEventListener('change', onModeChange);
fileInput.removeEventListener('change', onFileChange);
fileInput.removeEventListener('keydown', onKey);
urlInput.removeEventListener('keydown', onKey);
altInput.removeEventListener('keydown', onKey);
}
function onConfirm() {
if (uploadOption.checked) {
const file = fileInput.files && fileInput.files[0];
if (file) insertFromFile(file);
else fileInput.click();
} else {
insertImage(urlInput.value);
}
}
confirmBtn.addEventListener('click', onConfirm);
cancelBtn.addEventListener('click', closeModal);
uploadOption.addEventListener('change', onModeChange);
urlOption.addEventListener('change', onModeChange);
fileInput.addEventListener('change', onFileChange);
fileInput.addEventListener('keydown', onKey);
urlInput.addEventListener('keydown', onKey);
altInput.addEventListener('keydown', onKey);
updateMode(true);
}
function insertMarkdownReference() {
const modal = document.getElementById('reference-modal');
const numberInput = document.getElementById('reference-modal-number');
const urlInput = document.getElementById('reference-modal-url');
const titleInput = document.getElementById('reference-modal-title-input');
const confirmBtn = document.getElementById('reference-modal-apply');
const cancelBtn = document.getElementById('reference-modal-cancel');
if (!modal || !numberInput || !urlInput || !titleInput || !confirmBtn || !cancelBtn) return;
const start = markdownEditor.selectionStart;
const end = markdownEditor.selectionEnd;
const currentValue = markdownEditor.value;
const used = getUsedReferenceNumbers(currentValue);
const maxUsed = used.size ? Math.max(...used) : 0;
referenceCounter = Math.max(1, maxUsed + 1);
const suggestedNumber = getNextAvailableReferenceNumber(used, referenceCounter);
numberInput.value = '[' + suggestedNumber + ']';
urlInput.value = 'https://';
titleInput.value = '';
modal.style.display = 'flex';
function insertReference() {
const latestValue = markdownEditor.value;
const usedNumbers = getUsedReferenceNumbers(latestValue);
const parsed = parseInt(numberInput.value.replace(/[^\d]/g, ''), 10);
const baseNumber = Number.isNaN(parsed) ? suggestedNumber : parsed;
const finalNumber = getNextAvailableReferenceNumber(usedNumbers, baseNumber);
const url = urlInput.value.trim() || 'https://';
const title = titleInput.value.trim();
const safeTitle = sanitizeMarkdownTitle(title);
const definition = '[' + finalNumber + ']: ' + url + (safeTitle ? ' "' + safeTitle + '"' : '');
const selected = latestValue.slice(start, end);
const inlineReference = selected + '[' + finalNumber + ']';
const baseValue = latestValue.slice(0, start) + inlineReference + latestValue.slice(end);
let separator = '';
if (baseValue.length && !baseValue.endsWith('\n')) {
separator = '\n';
}
const updatedValue = baseValue + separator + definition;
markdownEditor.value = updatedValue;
markdownEditor.focus();
const caret = start + inlineReference.length;
markdownEditor.setSelectionRange(caret, caret);
markdownEditor.dispatchEvent(new Event('input', { bubbles: true }));
referenceCounter = Math.max(referenceCounter, finalNumber + 1);
modal.style.display = 'none';
cleanup();
}
function closeModal() {
modal.style.display = 'none';
cleanup();
}
function onKey(e) {
if (e.key === 'Enter') {
e.preventDefault();
insertReference();
} else if (e.key === 'Escape') {
e.preventDefault();
closeModal();
}
}
function cleanup() {
confirmBtn.removeEventListener('click', insertReference);
cancelBtn.removeEventListener('click', closeModal);
numberInput.removeEventListener('keydown', onKey);
urlInput.removeEventListener('keydown', onKey);
titleInput.removeEventListener('keydown', onKey);
}
confirmBtn.addEventListener('click', insertReference);
cancelBtn.addEventListener('click', closeModal);
numberInput.addEventListener('keydown', onKey);
urlInput.addEventListener('keydown', onKey);
titleInput.addEventListener('keydown', onKey);
requestAnimationFrame(function() {
numberInput.focus();
numberInput.select();
});
}
function escapeRegExp(text) {
return text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}
function getFocusableElements(container) {
return Array.from(container.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'))
.filter(element => !element.disabled && element.offsetParent !== null);
}
function trapFocusInModal(modal, event) {
const focusable = getFocusableElements(modal);
if (!focusable.length) {
event.preventDefault();
return;
}
const first = focusable[0];
const last = focusable[focusable.length - 1];
if (event.shiftKey && document.activeElement === first) {
event.preventDefault();
last.focus();
} else if (!event.shiftKey && document.activeElement === last) {
event.preventDefault();
first.focus();
}
}
function openAppModal(modal, options = {}) {
if (!modal) return;
if (activeModal && activeModal !== modal) {
closeAppModal(activeModal);
}
lastFocusedElement = document.activeElement;
modal.style.display = 'flex';
requestAnimationFrame(function() {
modal.classList.add('is-visible');
});
modal.setAttribute('aria-hidden', 'false');
activeModal = modal;
const focusTarget = options.focusTarget || getFocusableElements(modal)[0];
if (focusTarget) {
focusTarget.focus();
}
const handleKeydown = function(event) {
if (event.key === 'Escape') {
event.preventDefault();
if (options.onClose) {
options.onClose();
} else {
closeAppModal(modal);
}
} else if (event.key === 'Tab') {
trapFocusInModal(modal, event);
}
};
const handlePointerDown = function(event) {
if (event.target === modal) {
if (options.onClose) {
options.onClose();
} else {
closeAppModal(modal);
}
}
};
modal.addEventListener('keydown', handleKeydown);
modal.addEventListener('mousedown', handlePointerDown);
modal._modalHandlers = { handleKeydown, handlePointerDown };
}
function closeAppModal(modal) {
if (!modal) return;
modal.classList.remove('is-visible');
modal.setAttribute('aria-hidden', 'true');
const handlers = modal._modalHandlers || {};
if (handlers.handleKeydown) modal.removeEventListener('keydown', handlers.handleKeydown);
if (handlers.handlePointerDown) modal.removeEventListener('mousedown', handlers.handlePointerDown);
if (activeModal === modal) activeModal = null;
window.setTimeout(function() {
if (!modal.classList.contains('is-visible')) {
modal.style.display = 'none';
}
}, 200);
if (lastFocusedElement && typeof lastFocusedElement.focus === 'function') {
lastFocusedElement.focus();
}
}
function updateFindHighlights() {
updatePreviewFindHighlights();
if (!editorHighlightLayer) return;
if (!isEditorVisible()) return;
if (!isFindModalOpen || !findReplaceInput || !findReplaceInput.value || !findMatches.length) {
if (editorHighlightLayer.textContent !== '') {
editorHighlightLayer.textContent = '';
}
return;
}
const text = markdownEditor.value || '';
const scrollTop = cachedScrollTop;
const scrollLeft = cachedScrollLeft;
const fragment = document.createDocumentFragment();
let lastIndex = 0;
findMatches.forEach(function(match, index) {
fragment.appendChild(document.createTextNode(text.slice(lastIndex, match.start)));
const mark = document.createElement('mark');
mark.className = 'find-highlight' + (index === activeFindIndex ? ' active' : '');
mark.textContent = text.slice(match.start, match.end);
fragment.appendChild(mark);
lastIndex = match.end;
});
fragment.appendChild(document.createTextNode(text.slice(lastIndex)));
editorHighlightLayer.textContent = '';
editorHighlightLayer.appendChild(fragment);
editorHighlightLayer.scrollTop = scrollTop;
editorHighlightLayer.scrollLeft = scrollLeft;
}
let previewHighlights = [];
let activePreviewHighlightIndex = -1;
function isPreviewVisible() {
return currentViewMode === 'preview' || currentViewMode === 'split';
}
function clearPreviewFindHighlights() {
if (!markdownPreview) return;
const highlights = markdownPreview.querySelectorAll('.preview-find-highlight');
highlights.forEach(function(el) {
const parent = el.parentNode;
if (parent) {
parent.replaceChild(document.createTextNode(el.textContent), el);
}
});
markdownPreview.normalize();
}
function highlightPreviewText(node, regex) {
if (!node) return;
if (node.nodeType === Node.TEXT_NODE) {
const val = node.nodeValue;
if (!val) return;
regex.lastIndex = 0;
let match;
const matches = [];
while ((match = regex.exec(val)) !== null) {
if (match[0].length === 0) {
regex.lastIndex++;
continue;
}
matches.push({
start: match.index,
end: match.index + match[0].length,
text: match[0]
});
}
if (matches.length > 0) {
const parent = node.parentNode;
if (!parent) return;
const fragment = document.createDocumentFragment();
let lastIdx = 0;
matches.forEach(function(m) {
if (m.start > lastIdx) {
fragment.appendChild(document.createTextNode(val.slice(lastIdx, m.start)));
}
const mark = document.createElement('mark');
mark.className = 'preview-find-highlight';
mark.textContent = m.text;
fragment.appendChild(mark);
lastIdx = m.end;
});
if (lastIdx < val.length) {
fragment.appendChild(document.createTextNode(val.slice(lastIdx)));
}
parent.replaceChild(fragment, node);
}
} else if (node.nodeType === Node.ELEMENT_NODE) {
const tagName = node.tagName.toLowerCase();
if (tagName === 'script' || tagName === 'style' || tagName === 'textarea' || tagName === 'noscript' || tagName === 'svg') {
return;
}
if (node.classList.contains('mermaid') || node.classList.contains('mjx-container') || node.closest('.mermaid') || node.closest('.mjx-container')) {
return;
}
const children = Array.from(node.childNodes);
children.forEach(function(child) {
highlightPreviewText(child, regex);
});
}
}
function updatePreviewFindHighlights() {
clearPreviewFindHighlights();
previewHighlights = [];
if (!isFindModalOpen || !findReplaceInput || !findReplaceInput.value || !isPreviewVisible()) {
return;
}
const query = findReplaceInput.value;
const isRegex = document.getElementById('find-regex').classList.contains('active');
const isCaseSensitive = document.getElementById('find-case').classList.contains('active');
const isWholeWord = document.getElementById('find-word').classList.contains('active');
let regex;
try {
let pattern = isRegex ? query : query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
if (isWholeWord) {
pattern = `\\b${pattern}\\b`;
}
const flags = isCaseSensitive ? 'g' : 'gi';
regex = new RegExp(pattern, flags);
} catch (e) {
return;
}
highlightPreviewText(markdownPreview, regex);
previewHighlights = Array.from(markdownPreview.querySelectorAll('.preview-find-highlight'));
updateActivePreviewHighlight();
}
function updateActivePreviewHighlight() {
previewHighlights.forEach(function(el) {
el.classList.remove('active');
});
if (!previewHighlights.length) {
activePreviewHighlightIndex = -1;
return;
}
if (findMatches.length > 0 && activeFindIndex >= 0) {
const ratio = activeFindIndex / findMatches.length;
activePreviewHighlightIndex = Math.min(
previewHighlights.length - 1,
Math.floor(ratio * previewHighlights.length)
);
} else {
activePreviewHighlightIndex = 0;
}
if (activePreviewHighlightIndex >= 0 && activePreviewHighlightIndex < previewHighlights.length) {
const activeEl = previewHighlights[activePreviewHighlightIndex];
activeEl.classList.add('active');
scrollPreviewHighlightIntoView(activeEl);
}
}
function scrollPreviewHighlightIntoView(element) {
if (!element || !previewPane) return;
const paneRect = previewPane.getBoundingClientRect();
const elemRect = element.getBoundingClientRect();
const isVisible = (
elemRect.top >= paneRect.top + 40 &&
elemRect.bottom <= paneRect.bottom - 40
);
if (!isVisible) {
const scrollTop = previewPane.scrollTop + (elemRect.top - paneRect.top) - (paneRect.height / 2) + (elemRect.height / 2);
previewPane.scrollTop = scrollTop;
}
}
function syncHighlightScroll() {
if (!editorHighlightLayer) return;
editorHighlightLayer.scrollTop = cachedScrollTop;
editorHighlightLayer.scrollLeft = cachedScrollLeft;
}
function scheduleEditorOverlayScrollSync() {
if (editorOverlayScrollFrame) return;
editorOverlayScrollFrame = requestAnimationFrame(function() {
editorOverlayScrollFrame = null;
syncHighlightScroll();
syncLineNumberScroll();
});
}
function updateLineNumberGutter(lineCount) {
if (!editorPaneElement) return;
const digits = String(Math.max(1, lineCount)).length;
const gutterSize = `${Math.max(LINE_NUMBER_GUTTER_MIN_CH, digits + LINE_NUMBER_GUTTER_PADDING_CH)}ch`;
editorPaneElement.style.setProperty('--line-number-gutter', gutterSize);
}
function getLineHeight(styles) {
const computed = parseFloat(styles.lineHeight);
if (!Number.isNaN(computed)) return computed;
const fontSize = parseFloat(styles.fontSize) || 14;
return fontSize * 1.5;
}
function getWrappedLineCountMonospace(lineText, maxCharsPerLine) {
if (!lineText) return 1;
const words = lineText.replace(/\t/g, ' ').split(' ');
let linesCount = 1;
let currentLineLength = 0;
for (let i = 0; i < words.length; i++) {
const word = words[i];
const wordLength = word.length;
if (wordLength === 0) {
if (currentLineLength + 1 > maxCharsPerLine) {
linesCount++;
currentLineLength = 1;
} else {
currentLineLength++;
}
continue;
}
if (wordLength > maxCharsPerLine) {
const remainingSpace = maxCharsPerLine - currentLineLength;
if (remainingSpace > 0 && currentLineLength > 0) {
const firstPart = wordLength - remainingSpace;
linesCount += 1 + Math.floor(firstPart / maxCharsPerLine);
currentLineLength = firstPart % maxCharsPerLine;
} else {
linesCount += Math.floor(wordLength / maxCharsPerLine);
currentLineLength = wordLength % maxCharsPerLine;
}
continue;
}
const spaceRequired = currentLineLength === 0 ? 0 : 1;
if (currentLineLength + spaceRequired + wordLength > maxCharsPerLine) {
linesCount++;
currentLineLength = wordLength;
} else {
currentLineLength += spaceRequired + wordLength;
}
}
return Math.max(1, linesCount);
}
const lineCache = new Map();
let cachedPaddingLeft = 10;
let cachedPaddingRight = 10;
let cachedCharWidth = 0;
let cachedLineHeight = 21;
let cachedEditorWidth = 0;
let cachedMaxCharsPerLine = 80;
let cachedScrollTop = 0;
let cachedScrollLeft = 0;
let isGeometryInitialized = false;
let lastLineNumberLineCount = 0;
let lastLineNumberDocumentLength = 0;
function countLinesFast(text) {
if (!text) return 1;
let count = 1;
for (let i = 0; i < text.length; i += 1) {
if (text.charCodeAt(i) === 10) count += 1;
}
return count;
}
function countLinesBeforeIndex(text, endIndex) {
let count = 0;
const max = Math.max(0, Math.min(text.length, endIndex));
for (let i = 0; i < max; i += 1) {
if (text.charCodeAt(i) === 10) count += 1;
}
return count;
}
function initEditorGeometry() {
if (!markdownEditor) return;
const styles = window.getComputedStyle(markdownEditor);
cachedPaddingLeft = parseFloat(styles.paddingLeft) || 10;
cachedPaddingRight = parseFloat(styles.paddingRight) || 10;
// Measure character width
const testSpan = document.createElement('span');
testSpan.style.fontFamily = styles.fontFamily;
testSpan.style.fontSize = styles.fontSize;
testSpan.style.visibility = 'hidden';
testSpan.style.position = 'absolute';
testSpan.style.whiteSpace = 'pre';
testSpan.textContent = 'a'.repeat(100);
document.body.appendChild(testSpan);
cachedCharWidth = testSpan.getBoundingClientRect().width / 100;
document.body.removeChild(testSpan);
// Calculate line height
const computed = parseFloat(styles.lineHeight);
if (!Number.isNaN(computed)) {
cachedLineHeight = computed;
} else {
const fontSize = parseFloat(styles.fontSize) || 14;
cachedLineHeight = fontSize * 1.5;
}
isGeometryInitialized = true;
lineCache.clear();
}
function refreshEditorWidth() {
if (!markdownEditor) return;
if (!isGeometryInitialized) {
initEditorGeometry();
}
cachedEditorWidth = markdownEditor.clientWidth;
const availableWidth = cachedEditorWidth - cachedPaddingLeft - cachedPaddingRight;
const nextMaxCharsPerLine = Math.max(1, Math.floor(availableWidth / cachedCharWidth));
if (nextMaxCharsPerLine !== cachedMaxCharsPerLine) {
cachedMaxCharsPerLine = nextMaxCharsPerLine;
lineCache.clear();
}
cachedScrollTop = markdownEditor.scrollTop;
cachedScrollLeft = markdownEditor.scrollLeft;
}
function updateLineNumberItem(item, index, lineText, lineHeight) {
if (!item) return;
let wrapHeight = lineCache.get(lineText);
if (wrapHeight === undefined) {
const wrapCount = getWrappedLineCountMonospace(lineText, cachedMaxCharsPerLine);
wrapHeight = wrapCount * lineHeight;
if (lineCache.size >= LINE_CACHE_MAX_ENTRIES) {
lineCache.clear();
}
lineCache.set(lineText, wrapHeight);
}
const targetText = String(index + 1);
if (item.textContent !== targetText) {
item.textContent = targetText;
}
const targetHeight = `${wrapHeight}px`;
if (item.style.height !== targetHeight) {
item.style.height = targetHeight;
}
}
function updateActiveLineNumberHeight(text, lineCount, lineHeight) {
const caret = markdownEditor.selectionStart || 0;
const lineIndex = Math.min(lineCount - 1, countLinesBeforeIndex(text, caret));
const lineStart = text.lastIndexOf('\n', Math.max(0, caret - 1)) + 1;
const lineEndIndex = text.indexOf('\n', caret);
const lineEnd = lineEndIndex === -1 ? text.length : lineEndIndex;
updateLineNumberItem(lineNumbers.children[lineIndex], lineIndex, text.slice(lineStart, lineEnd), lineHeight);
}
function updateLineNumbers(options) {
const opts = options || {};
if (!lineNumbers || !markdownEditor) return;
if (!isEditorVisible()) return;
const text = markdownEditor.value || '';
const lineCount = countLinesFast(text);
if (cachedEditorWidth === 0) {
refreshEditorWidth();
}
updateLineNumberGutter(lineCount);
const lineHeight = cachedLineHeight;
const existingItems = lineNumbers.children;
const existingCount = existingItems.length;
const isLargeEditorDocument = text.length >= LARGE_DOCUMENT_THRESHOLD;
const canUseActiveLineFastPath =
isLargeEditorDocument &&
!opts.force &&
lineCount === lastLineNumberLineCount &&
existingCount === lineCount;
if (canUseActiveLineFastPath) {
updateActiveLineNumberHeight(text, lineCount, lineHeight);
lastLineNumberDocumentLength = text.length;
syncLineNumberScroll();
return;
}
const lines = text.split('\n');
// Adjust the number of DOM elements in-place to avoid complete tear-down
if (existingCount < lineCount) {
const fragment = document.createDocumentFragment();
for (let i = existingCount; i < lineCount; i += 1) {
const lineNumber = document.createElement('div');
lineNumber.className = 'line-number';
fragment.appendChild(lineNumber);
}
lineNumbers.appendChild(fragment);
} else if (existingCount > lineCount) {
while (lineNumbers.children.length > lineCount) {
lineNumbers.removeChild(lineNumbers.lastChild);
}
}
// Update only the heights and numbers that changed, using monospace simulator to avoid forced reflows
for (let i = 0; i < lineCount; i += 1) {
updateLineNumberItem(existingItems[i], i, lines[i], lineHeight);
}
lastLineNumberLineCount = lineCount;
lastLineNumberDocumentLength = text.length;
syncLineNumberScroll();
}
function scheduleLineNumberUpdate(options) {
const opts = options || {};
if (!lineNumbers) return;
if (!isEditorVisible()) return;
if (opts.force) {
if (lineNumberUpdateTimeout) {
clearTimeout(lineNumberUpdateTimeout);
lineNumberUpdateTimeout = null;
}
if (lineNumberUpdateFrame) {
cancelAnimationFrame(lineNumberUpdateFrame);
lineNumberUpdateFrame = null;
}
} else if (lineNumberUpdateFrame || lineNumberUpdateTimeout) {
return;
}
const text = markdownEditor ? markdownEditor.value || '' : '';
const delay = opts.delay !== undefined
? opts.delay
: (opts.inputType === 'insertFromPaste' || text.length >= LARGE_DOCUMENT_THRESHOLD ? getEditorWorkDelay(text) : 0);
const runUpdate = function() {
lineNumberUpdateFrame = window.requestAnimationFrame(function() {
lineNumberUpdateFrame = null;
updateLineNumbers(opts);
});
};
if (delay > 0) {
lineNumberUpdateTimeout = setTimeout(function() {
lineNumberUpdateTimeout = null;
runUpdate();
}, delay);
} else {
runUpdate();
}
}
function syncLineNumberScroll() {
if (!lineNumbers) return;
lineNumbers.scrollTop = cachedScrollTop;
}
function syncEditorScrollOverlays() {
cachedScrollTop = markdownEditor.scrollTop;
cachedScrollLeft = markdownEditor.scrollLeft;
syncHighlightScroll();
syncLineNumberScroll();
}
function clampEditorScrollTop(scrollTop) {
const maxScrollTop = Math.max(0, markdownEditor.scrollHeight - markdownEditor.clientHeight);
return Math.min(maxScrollTop, Math.max(0, scrollTop));
}
function estimateEditorOffsetForIndex(index) {
if (!isGeometryInitialized || cachedEditorWidth !== markdownEditor.clientWidth) {
refreshEditorWidth();
}
const styles = window.getComputedStyle(markdownEditor);
const paddingTop = parseFloat(styles.paddingTop) || 10;
const textBefore = (markdownEditor.value || '').slice(0, Math.max(0, index));
const lines = textBefore.split('\n');
let visualRows = 0;
for (let i = 0; i < lines.length - 1; i += 1) {
visualRows += getWrappedLineCountMonospace(lines[i], cachedMaxCharsPerLine);
}
const currentLinePrefix = lines[lines.length - 1] || '';
visualRows += Math.max(0, getWrappedLineCountMonospace(currentLinePrefix, cachedMaxCharsPerLine) - 1);
return paddingTop + (visualRows * cachedLineHeight);
}
function getActiveFindHighlight() {
if (!editorHighlightLayer) return null;
return editorHighlightLayer.querySelector('.find-highlight.active');
}
function scrollActiveMatchIntoView(match) {
let matchTop = null;
let matchHeight = cachedLineHeight;
let activeHighlight = getActiveFindHighlight();
if (!activeHighlight) {
updateFindHighlights();
activeHighlight = getActiveFindHighlight();
}
if (activeHighlight) {
matchTop = activeHighlight.offsetTop;
matchHeight = activeHighlight.offsetHeight || matchHeight;
} else {
matchTop = estimateEditorOffsetForIndex(match.start);
}
const targetScrollTop = clampEditorScrollTop(
matchTop - (markdownEditor.clientHeight / 2) + (matchHeight / 2)
);
markdownEditor.scrollTop = targetScrollTop;
syncEditorScrollOverlays();
}
// Class encapsulating Search & Replace Engine
class FindReplaceEngine {
constructor(editor) {
this.editor = editor;
this.history = { find: [], replace: [] };
this.activeMatches = [];
this.currentMatchIndex = -1;
this._cachedScopeText = null;
this._cachedScopeMap = null;
}
buildASTScopeMap(text) {
// PERF-026: Cache scope map to avoid re-lexing on every search keystroke
if (text === this._cachedScopeText && this._cachedScopeMap) {
return this._cachedScopeMap;
}
if (typeof marked === 'undefined' || !marked.lexer) return [];
try {
const tokens = marked.lexer(text);
const scopeMap = [];
let currentIndex = 0;
const traverse = (tokenList) => {
for (const token of tokenList) {
const start = text.indexOf(token.raw, currentIndex);
if (start === -1) continue;
const end = start + token.raw.length;
currentIndex = end;
let scope = 'plain';
if (token.type === 'heading') scope = 'heading';
else if (token.type === 'code') {
if (token.lang === 'mermaid') scope = 'mermaid';
else scope = 'code';
} else if (token.type === 'paragraph' && token.raw.startsWith('$$') && token.raw.endsWith('$$')) {
scope = 'latex';
}
scopeMap.push({ start, end, scope, type: token.type });
if (token.tokens) traverse(token.tokens);
}
};
traverse(tokens);
this._cachedScopeText = text;
this._cachedScopeMap = scopeMap;
return scopeMap;
} catch (e) {
console.warn("AST scope parsing failed:", e);
return [];
}
}
compileRegExp(query, isRegex, isCaseSensitive, isWholeWord) {
if (!query) return null;
let pattern = isRegex ? query : query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
if (isWholeWord) {
pattern = `\\b${pattern}\\b`;
}
const flags = isCaseSensitive ? 'gd' : 'gid';
return new RegExp(pattern, flags);
}
executeSearch(options) {
const { query, isRegex, isCaseSensitive, isWholeWord, scopeFilter, findInSelection } = options;
const fullText = this.editor.value || '';
let searchRange = { start: 0, end: fullText.length };
if (findInSelection) {
searchRange.start = this.editor.selectionStart;
searchRange.end = this.editor.selectionEnd;
}
let regex;
try {
regex = this.compileRegExp(query, isRegex, isCaseSensitive, isWholeWord);
} catch (err) {
throw new Error(err.message);
}
if (!regex) {
this.activeMatches = [];
this.currentMatchIndex = -1;
return this.activeMatches;
}
const rawMatches = [];
let match;
while ((match = regex.exec(fullText)) !== null) {
if (match.index >= searchRange.end) break;
if (match.index >= searchRange.start) {
rawMatches.push({
start: match.index,
end: match.index + match[0].length,
value: match[0],
groups: match.groups || null,
matchArray: match
});
}
if (regex.lastIndex === match.index) {
regex.lastIndex++;
}
}
if (scopeFilter && scopeFilter !== 'entire') {
const scopeMap = this.buildASTScopeMap(fullText);
this.activeMatches = rawMatches.filter(m => {
const matchingScope = scopeMap.find(s => m.start >= s.start && m.end <= s.end);
return matchingScope && matchingScope.scope === scopeFilter;
});
} else {
this.activeMatches = rawMatches;
}
this.currentMatchIndex = this.activeMatches.length > 0 ? 0 : -1;
this.addHistory('find', query);
return this.activeMatches;
}
preserveCase(source, replacement) {
if (source === source.toUpperCase()) {
return replacement.toUpperCase();
}
if (source === source.toLowerCase()) {
return replacement.toLowerCase();
}
if (source[0] === source[0].toUpperCase() && source.slice(1) === source.slice(1).toLowerCase()) {
return replacement[0].toUpperCase() + replacement.slice(1).toLowerCase();
}
return replacement;
}
applyCaptureGroups(match, replacementTemplate) {
if (!match.matchArray) return replacementTemplate;
let result = replacementTemplate;
result = result.replace(/\$(\d+)/g, (m, number) => {
const idx = parseInt(number, 10);
return match.matchArray[idx] !== undefined ? match.matchArray[idx] : m;
});
if (match.groups) {
result = result.replace(/\$<([^>]+)>/g, (m, name) => {
return match.groups[name] !== undefined ? match.groups[name] : m;
});
}
return result;
}
executeReplace(match, replacementTemplate, options) {
const { preserveCase, isRegex } = options;
const text = this.editor.value;
let finalReplacement = replacementTemplate;
if (isRegex) {
finalReplacement = this.applyCaptureGroups(match, finalReplacement);
}
if (preserveCase) {
finalReplacement = this.preserveCase(match.value, finalReplacement);
}
const before = text.slice(0, match.start);
const after = text.slice(match.end);
this.editor.value = before + finalReplacement + after;
this.editor.dispatchEvent(new Event('input', { bubbles: true }));
this.addHistory('replace', replacementTemplate);
return finalReplacement.length - match.value.length;
}
addHistory(type, query) {
if (!query) return;
const list = this.history[type];
const index = list.indexOf(query);
if (index !== -1) {
list.splice(index, 1);
}
list.unshift(query);
if (list.length > 10) {
list.pop();
}
}
}
// Verification helper for rich text blocks
function validateBlockSyntax(originalBlockText, newBlockText, scope) {
if (scope === 'latex') {
const origDisplay = (originalBlockText.match(/\$\$/g) || []).length;
const newDisplay = (newBlockText.match(/\$\$/g) || []).length;
const origInline = (originalBlockText.match(/[^\$]\$[^\$]/g) || []).length;
const newInline = (newBlockText.match(/[^\$]\$[^\$]/g) || []).length;
if (origDisplay !== newDisplay || origInline !== newInline) {
return { valid: false, reason: "LaTeX math block delimiters are unbalanced." };
}
}
if (scope === 'mermaid') {
const diagramTypePattern = /^(graph|flowchart|sequenceDiagram|classDiagram|stateDiagram-v2|erDiagram|gantt|pie|quadrantChart|c4Context|mindmap|timeline|zenuml)/i;
if (!diagramTypePattern.test(newBlockText.trim())) {
return { valid: false, reason: "Missing diagram type definition (e.g. flowchart TD)." };
}
}
return { valid: true };
}
// Global Engine Instance
let frEngine = null;
let isFrDocked = false;
let dragOffset = { x: 0, y: 0 };
let isPanelDragging = false;
let lastFloatingLeft = null;
let lastFloatingTop = null;
let lastFloatingRight = null;
function initFindReplacePanelDrag() {
const handle = document.getElementById('find-replace-drag-handle');
const panel = document.getElementById('find-replace-modal');
if (!handle || !panel) return;
const startDrag = (clientX, clientY) => {
isPanelDragging = true;
dragOffset.x = clientX - panel.offsetLeft;
dragOffset.y = clientY - panel.offsetTop;
document.body.classList.add('resizing');
};
const moveDrag = (clientX, clientY) => {
const x = clientX - dragOffset.x;
const y = clientY - dragOffset.y;
// Keep panel inside viewport boundaries
const maxX = window.innerWidth - panel.offsetWidth;
const maxY = window.innerHeight - panel.offsetHeight;
const newLeft = `${Math.max(0, Math.min(maxX, x))}px`;
const newTop = `${Math.max(0, Math.min(maxY, y))}px`;
panel.style.left = newLeft;
panel.style.top = newTop;
panel.style.right = 'auto';
lastFloatingLeft = newLeft;
lastFloatingTop = newTop;
lastFloatingRight = 'auto';
};
const stopDrag = () => {
if (isPanelDragging) {
isPanelDragging = false;
document.body.classList.remove('resizing');
}
};
// Mouse events
handle.addEventListener('mousedown', (e) => {
if (isFrDocked) return;
if (window.innerWidth < 768) return; // Do NOT allow dragging on mobile layouts
if (e.target.closest('.find-replace-header-actions')) return;
startDrag(e.clientX, e.clientY);
});
document.addEventListener('mousemove', (e) => {
if (!isPanelDragging || isFrDocked) return;
moveDrag(e.clientX, e.clientY);
});
document.addEventListener('mouseup', stopDrag);
// Touch events for tablets
handle.addEventListener('touchstart', (e) => {
if (isFrDocked) return;
if (window.innerWidth < 768) return; // Do NOT allow dragging on mobile layouts
if (e.target.closest('.find-replace-header-actions')) return;
if (e.touches && e.touches[0]) {
startDrag(e.touches[0].clientX, e.touches[0].clientY);
}
}, { passive: true });
document.addEventListener('touchmove', (e) => {
if (!isPanelDragging || isFrDocked) return;
if (e.touches && e.touches[0]) {
moveDrag(e.touches[0].clientX, e.touches[0].clientY);
}
}, { passive: true });
document.addEventListener('touchend', stopDrag);
}
let frPreferredDocked = false;
function toggleFrDockMode(forceFloat = false) {
// If forceFloat is an Event (e.g. from click listener directly), treat as false
if (forceFloat instanceof Event || (forceFloat && typeof forceFloat === 'object')) {
forceFloat = false;
}
const panel = document.getElementById('find-replace-modal');
const dockBtn = document.getElementById('find-replace-dock');
const contentCont = document.querySelector('.content-container');
if (!panel || !dockBtn || !contentCont) return;
// Save active element focus and selection before DOM movement
const activeEl = document.activeElement;
const activeId = activeEl ? activeEl.id : null;
const isInput = activeEl && (activeEl.tagName === 'INPUT' || activeEl.tagName === 'SELECT' || activeEl.tagName === 'TEXTAREA');
let selStart = 0;
let selEnd = 0;
if (isInput && typeof activeEl.selectionStart === 'number') {
selStart = activeEl.selectionStart;
selEnd = activeEl.selectionEnd;
}
if (window.innerWidth < 1080 || forceFloat) {
isFrDocked = false;
panel.classList.remove('docked');
if (panel.parentElement !== document.body) {
document.body.appendChild(panel);
}
contentCont.classList.remove('fr-docked');
contentCont.style.setProperty('--dock-width', '0px');
panel.style.left = lastFloatingLeft !== null ? lastFloatingLeft : '';
panel.style.top = lastFloatingTop !== null ? lastFloatingTop : '';
panel.style.right = lastFloatingRight !== null ? lastFloatingRight : '';
dockBtn.innerHTML = '';
dockBtn.title = "Toggle Dock Mode";
panel.style.display = 'flex';
applyPaneWidths();
// Restore focus and selection
if (activeId) {
const el = document.getElementById(activeId);
if (el) {
el.focus();
if (isInput && typeof el.selectionStart === 'number') {
el.setSelectionRange(selStart, selEnd);
}
}
}
return;
}
isFrDocked = !isFrDocked;
// Save preference to localStorage
frPreferredDocked = isFrDocked;
localStorage.setItem('find-replace-docked', frPreferredDocked ? 'true' : 'false');
if (isFrDocked) {
panel.classList.add('docked');
panel.style.left = 'auto';
panel.style.top = 'auto';
panel.style.right = 'auto';
// Append panel to dock container (.content-container)
contentCont.appendChild(panel);
contentCont.classList.add('fr-docked');
contentCont.style.setProperty('--dock-width', '340px');
dockBtn.innerHTML = '';
dockBtn.title = "Toggle Floating Mode";
} else {
panel.classList.remove('docked');
// Reset position and float on body
document.body.appendChild(panel);
contentCont.classList.remove('fr-docked');
contentCont.style.setProperty('--dock-width', '0px');
panel.style.left = lastFloatingLeft !== null ? lastFloatingLeft : '';
panel.style.top = lastFloatingTop !== null ? lastFloatingTop : '';
panel.style.right = lastFloatingRight !== null ? lastFloatingRight : '';
dockBtn.innerHTML = '';
dockBtn.title = "Toggle Dock Mode";
}
// Ensure display is flex and recalculate split panes
panel.style.display = 'flex';
applyPaneWidths();
// Restore focus and selection after layout change
if (activeId) {
const el = document.getElementById(activeId);
if (el) {
el.focus();
if (isInput && typeof el.selectionStart === 'number') {
el.setSelectionRange(selStart, selEnd);
}
}
}
}
function updateFindControls() {
const total = findMatches.length;
const current = total && activeFindIndex >= 0 ? activeFindIndex + 1 : 0;
const countSpan = document.getElementById('find-replace-count');
if (countSpan) {
countSpan.textContent = `${current} of ${total} matches`;
}
const prevBtn = document.getElementById('find-prev');
const nextBtn = document.getElementById('find-next');
const replaceCurrentBtn = document.getElementById('find-replace-current');
const replaceAllBtn = document.getElementById('find-replace-all');
const hasMatches = total > 0;
const hasQuery = !!(findReplaceInput && findReplaceInput.value);
if (prevBtn) prevBtn.disabled = !hasMatches;
if (nextBtn) nextBtn.disabled = !hasMatches;
if (replaceCurrentBtn) replaceCurrentBtn.disabled = !hasMatches;
if (replaceAllBtn) replaceAllBtn.disabled = !hasQuery || !hasMatches;
}
function refreshFindMatches(options) {
clearTimeout(findRefreshTimeout);
findRefreshTimeout = null;
const opts = options || {};
const query = findReplaceInput ? findReplaceInput.value : '';
const errorBox = document.getElementById('find-replace-error');
const errorMsg = document.getElementById('regex-error-msg');
if (errorBox) errorBox.style.display = 'none';
if (!isFindModalOpen || !query) {
findMatches = [];
activeFindIndex = -1;
updateFindControls();
updateFindHighlights();
return;
}
const isRegex = document.getElementById('find-regex').classList.contains('active');
const isCaseSensitive = document.getElementById('find-case').classList.contains('active');
const isWholeWord = document.getElementById('find-word').classList.contains('active');
const scopeFilter = document.getElementById('find-replace-scope').value;
const findInSelection = document.getElementById('find-sel').classList.contains('active');
try {
findMatches = frEngine.executeSearch({
query,
isRegex,
isCaseSensitive,
isWholeWord,
scopeFilter,
findInSelection
});
} catch (err) {
findMatches = [];
activeFindIndex = -1;
if (errorBox && errorMsg) {
errorMsg.textContent = err.message;
errorBox.style.display = 'block';
}
}
const shouldResetActiveIndex = opts.resetIndex || query !== lastFindQuery;
if (shouldResetActiveIndex) {
activeFindIndex = findMatches.length ? 0 : -1;
} else if (activeFindIndex >= findMatches.length) {
activeFindIndex = findMatches.length - 1;
}
lastFindQuery = query;
updateFindControls();
updateFindHighlights();
if (shouldResetActiveIndex && findMatches.length && activeFindIndex >= 0) {
scrollActiveMatchIntoView(findMatches[activeFindIndex]);
}
updateHistoryDropdowns();
}
function scheduleFindRefresh(options) {
clearTimeout(findRefreshTimeout);
const text = markdownEditor ? markdownEditor.value || '' : '';
const delay = text.length >= LARGE_DOCUMENT_THRESHOLD ? LARGE_FIND_REFRESH_DELAY : FIND_REFRESH_DELAY;
findRefreshTimeout = setTimeout(function() {
findRefreshTimeout = null;
refreshFindMatches(options);
}, delay);
}
function selectActiveMatch() {
if (!findMatches.length || activeFindIndex < 0) return;
const match = findMatches[activeFindIndex];
markdownEditor.focus();
markdownEditor.setSelectionRange(match.start, match.end);
try {
scrollActiveMatchIntoView(match);
} catch (e) {
console.warn("Viewport centering scroll failed:", e);
}
}
function cycleFindMatch(direction) {
const totalMatches = findMatches.length;
if (!totalMatches) return;
activeFindIndex = (activeFindIndex + direction + totalMatches) % totalMatches;
updateFindControls();
updateFindHighlights();
selectActiveMatch();
}
function openFindReplaceModal() {
if (!findReplaceModal || !findReplaceInput) return;
if (!frEngine) {
frEngine = new FindReplaceEngine(markdownEditor);
}
isFindModalOpen = true;
const selected = markdownEditor.value.slice(markdownEditor.selectionStart, markdownEditor.selectionEnd);
if (selected && selected.length < 100) {
findReplaceInput.value = selected;
}
// Restore docked/floating mode preference
let wasDockedPref = localStorage.getItem('find-replace-docked') === 'true';
// Force floating-only mode on mobile/tablet viewports
if (window.innerWidth < 1080) {
wasDockedPref = false;
}
if (wasDockedPref) {
isFrDocked = false; // Set false so toggleFrDockMode() turns it to true
toggleFrDockMode();
} else {
isFrDocked = true; // Set true so toggleFrDockMode() turns it to false
toggleFrDockMode();
}
findReplaceModal.style.display = 'flex';
requestAnimationFrame(function() {
findReplaceInput.focus();
findReplaceInput.select();
});
refreshFindMatches({ resetIndex: true });
if (findMatches.length) {
selectActiveMatch();
}
}
function closeFindReplaceModal() {
isFindModalOpen = false;
const panel = document.getElementById('find-replace-modal');
const contentCont = document.querySelector('.content-container');
if (panel) {
panel.style.display = 'none';
if (isFrDocked) {
// Reset split layout styles when closed
if (contentCont) {
contentCont.classList.remove('fr-docked');
contentCont.style.setProperty('--dock-width', '0px');
applyPaneWidths();
}
}
}
findMatches = [];
activeFindIndex = -1;
updateFindControls();
updateFindHighlights();
}
function replaceCurrentMatch() {
if (!findMatches.length || activeFindIndex < 0) return;
const replacement = findReplaceWith ? findReplaceWith.value : '';
const match = findMatches[activeFindIndex];
const preserveCase = document.getElementById('replace-preserve-case').classList.contains('active');
const isRegex = document.getElementById('find-regex').classList.contains('active');
// Syntax validation
const scopeFilter = document.getElementById('find-replace-scope').value;
if (scopeFilter === 'latex' || scopeFilter === 'mermaid') {
const check = validateBlockSyntax(match.value, replacement, scopeFilter);
if (!check.valid) {
alert(`Blocked replacement: ${check.reason}`);
return;
}
}
frEngine.executeReplace(match, replacement, { preserveCase, isRegex });
refreshFindMatches();
if (findMatches.length) {
activeFindIndex = Math.min(activeFindIndex, findMatches.length - 1);
selectActiveMatch();
}
}
function replaceAllMatches() {
if (!findMatches.length) return;
const query = findReplaceInput ? findReplaceInput.value : '';
const replacement = findReplaceWith ? findReplaceWith.value : '';
const showDiff = document.getElementById('find-replace-diff-toggle').checked;
if (showDiff) {
renderDiffPreview();
return;
}
executeBulkReplace();
}
function executeBulkReplace() {
const replacement = findReplaceWith ? findReplaceWith.value : '';
const preserveCase = document.getElementById('replace-preserve-case').classList.contains('active');
const isRegex = document.getElementById('find-regex').classList.contains('active');
// Reverse sorting to replace from bottom up
const matchesCopy = [...findMatches];
matchesCopy.sort((a, b) => b.start - a.start);
for (const match of matchesCopy) {
frEngine.executeReplace(match, replacement, { preserveCase, isRegex });
}
refreshFindMatches({ resetIndex: true });
if (findMatches.length) {
selectActiveMatch();
}
}
function renderDiffPreview() {
const container = document.getElementById('find-replace-diff-container');
const modal = document.getElementById('find-replace-diff-modal');
if (!container || !modal) return;
const replacement = findReplaceWith ? findReplaceWith.value : '';
const preserveCase = document.getElementById('replace-preserve-case').classList.contains('active');
const isRegex = document.getElementById('find-regex').classList.contains('active');
const lines = markdownEditor.value.split('\n');
const matchesCopy = [...findMatches];
matchesCopy.sort((a, b) => b.start - a.start);
// Draft the replaced value in memory
let draftValue = markdownEditor.value;
for (const match of matchesCopy) {
let finalRepl = replacement;
if (isRegex) {
finalRepl = frEngine.applyCaptureGroups(match, finalRepl);
}
if (preserveCase) {
finalRepl = frEngine.preserveCase(match.value, finalRepl);
}
draftValue = draftValue.slice(0, match.start) + finalRepl + draftValue.slice(match.end);
}
const draftLines = draftValue.split('\n');
// PERF-007: Clear elements using textContent
container.textContent = '';
const fragment = document.createDocumentFragment();
const maxLines = Math.max(lines.length, draftLines.length);
for (let i = 0; i < maxLines; i++) {
const origLine = lines[i] !== undefined ? lines[i] : null;
const newLine = draftLines[i] !== undefined ? draftLines[i] : null;
if (origLine !== newLine) {
if (origLine !== null) {
const delLine = document.createElement('div');
delLine.className = 'diff-line deletion';
delLine.innerHTML = `${i + 1}- ${escapeHtml(origLine)}`;
fragment.appendChild(delLine);
}
if (newLine !== null) {
const addLine = document.createElement('div');
addLine.className = 'diff-line addition';
addLine.innerHTML = `${i + 1}+ ${escapeHtml(newLine)}`;
fragment.appendChild(addLine);
}
} else if (origLine !== null) {
// Show context for matching lines to prevent giant blank diff spaces
// Show context only if it surrounds a modified line
const hasDiffNearby = Array.from({length: 5}, (_, idx) => i - 2 + idx)
.some(lineIdx => lines[lineIdx] !== undefined && draftLines[lineIdx] !== undefined && lines[lineIdx] !== draftLines[lineIdx]);
if (hasDiffNearby) {
const ctxLine = document.createElement('div');
ctxLine.className = 'diff-line context';
ctxLine.innerHTML = `${i + 1} ${escapeHtml(origLine)}`;
fragment.appendChild(ctxLine);
}
}
}
container.appendChild(fragment);
openAppModal(modal, {
focusTarget: document.getElementById('find-replace-diff-confirm'),
onClose: () => closeAppModal(modal)
});
}
function updateHistoryDropdowns() {
const select = document.getElementById('find-replace-history');
if (!select || !frEngine) return;
// Preserve the first option
select.innerHTML = '';
frEngine.history.find.forEach(q => {
const opt = document.createElement('option');
opt.value = q;
opt.textContent = q;
select.appendChild(opt);
});
}
function initFindReplaceModal() {
const modal = document.getElementById('find-replace-modal');
if (!modal) return;
initFindReplacePanelDrag();
// Toggle options
const toggleButtons = ['find-case', 'find-word', 'find-regex', 'find-sel', 'replace-preserve-case', 'find-wrap'];
toggleButtons.forEach(id => {
const btn = document.getElementById(id);
if (btn) {
btn.addEventListener('click', () => {
const isActive = btn.classList.contains('active');
if (isActive) {
btn.classList.remove('active');
btn.setAttribute('aria-pressed', 'false');
} else {
btn.classList.add('active');
btn.setAttribute('aria-pressed', 'true');
}
refreshFindMatches({ resetIndex: true });
});
}
});
// History select handler
const historySelect = document.getElementById('find-replace-history');
if (historySelect) {
historySelect.addEventListener('change', () => {
if (historySelect.value) {
findReplaceInput.value = historySelect.value;
refreshFindMatches({ resetIndex: true });
}
});
}
// Scope select handler
const scopeSelect = document.getElementById('find-replace-scope');
if (scopeSelect) {
scopeSelect.addEventListener('change', () => {
refreshFindMatches({ resetIndex: true });
});
}
// Reset position handler
const resetBtn = document.getElementById('find-replace-reset');
const resetFooterBtn = document.getElementById('find-replace-reset-footer');
const doResetPosition = () => {
lastFloatingLeft = null;
lastFloatingTop = null;
lastFloatingRight = null;
modal.style.left = '';
modal.style.top = '';
modal.style.right = '';
};
if (resetBtn) {
resetBtn.addEventListener('click', doResetPosition);
}
if (resetFooterBtn) {
resetFooterBtn.addEventListener('click', doResetPosition);
}
// Dock toggle handler
const dockBtn = document.getElementById('find-replace-dock');
if (dockBtn) {
dockBtn.addEventListener('click', () => toggleFrDockMode(false));
}
// Advanced Drawer Toggle
const drawerToggle = document.getElementById('fr-drawer-toggle');
const drawerContent = document.getElementById('fr-drawer-content');
if (drawerToggle && drawerContent) {
drawerToggle.addEventListener('click', () => {
const isOpen = drawerContent.style.display === 'flex';
if (isOpen) {
drawerContent.style.display = 'none';
drawerToggle.setAttribute('aria-expanded', 'false');
drawerToggle.innerHTML = ' Advanced Options';
} else {
drawerContent.style.display = 'flex';
drawerToggle.setAttribute('aria-expanded', 'true');
drawerToggle.innerHTML = ' Advanced Options';
}
});
}
// Inputs
if (findReplaceInput) {
findReplaceInput.addEventListener('input', function() {
refreshFindMatches({ resetIndex: true });
});
findReplaceInput.addEventListener('keydown', function(event) {
if (event.key === 'Enter') {
event.preventDefault();
cycleFindMatch(event.shiftKey ? -1 : 1);
}
});
}
if (findReplaceWith) {
findReplaceWith.addEventListener('input', updateFindControls);
}
// Navigation buttons
const prevBtn = document.getElementById('find-prev');
const nextBtn = document.getElementById('find-next');
if (prevBtn) prevBtn.addEventListener('click', () => cycleFindMatch(-1));
if (nextBtn) nextBtn.addEventListener('click', () => cycleFindMatch(1));
// Action buttons
const currentBtn = document.getElementById('find-replace-current');
const allBtn = document.getElementById('find-replace-all');
if (currentBtn) currentBtn.addEventListener('click', replaceCurrentMatch);
if (allBtn) allBtn.addEventListener('click', replaceAllMatches);
// Close buttons
const closeBtn = document.getElementById('find-replace-close');
const closeIcon = document.getElementById('find-replace-close-icon');
if (closeBtn) closeBtn.addEventListener('click', closeFindReplaceModal);
if (closeIcon) closeIcon.addEventListener('click', closeFindReplaceModal);
// Diff modal confirmation triggers
const diffConfirmBtn = document.getElementById('find-replace-diff-confirm');
const diffCancelBtn = document.getElementById('find-replace-diff-cancel');
const diffCloseIcon = document.getElementById('find-replace-diff-close-icon');
const diffModal = document.getElementById('find-replace-diff-modal');
if (diffConfirmBtn) {
diffConfirmBtn.addEventListener('click', () => {
executeBulkReplace();
closeAppModal(diffModal);
});
}
if (diffCancelBtn) diffCancelBtn.addEventListener('click', () => closeAppModal(diffModal));
if (diffCloseIcon) diffCloseIcon.addEventListener('click', () => closeAppModal(diffModal));
}
function initAppModals() {
if (clearFormattingConfirm) {
clearFormattingConfirm.addEventListener('click', function() {
applyClearFormatting();
closeAppModal(clearFormattingModal);
});
}
if (clearFormattingCancel) {
clearFormattingCancel.addEventListener('click', function() { closeAppModal(clearFormattingModal); });
}
if (clearFormattingClose) {
clearFormattingClose.addEventListener('click', function() { closeAppModal(clearFormattingModal); });
}
if (helpModalClose) {
helpModalClose.addEventListener('click', function() { closeAppModal(helpModal); });
}
if (helpModalCloseIcon) {
helpModalCloseIcon.addEventListener('click', function() { closeAppModal(helpModal); });
}
if (aboutModalClose) {
aboutModalClose.addEventListener('click', function() { closeAppModal(aboutModal); });
}
if (aboutModalCloseIcon) {
aboutModalCloseIcon.addEventListener('click', function() { closeAppModal(aboutModal); });
}
}
function openHelpModal() {
if (helpModal) {
openAppModal(helpModal);
}
}
function openAboutModal() {
if (aboutModal) {
const aboutVersion = document.getElementById("about-version");
if (aboutVersion) {
aboutVersion.textContent = APP_VERSION;
}
openAppModal(aboutModal);
}
}
function openClearFormattingModal() {
if (clearFormattingModal) {
openAppModal(clearFormattingModal);
}
}
function runMarkdownTool(action, button) {
if (action === 'undo') {
executeUndo();
return;
}
if (action === 'redo') {
executeRedo();
return;
}
if (action === 'bold') wrapEditorSelection('**', '**', 'bold text');
else if (action === 'strike') wrapEditorSelection('~~', '~~', 'struck text');
else if (action === 'italic') wrapEditorSelection('*', '*', 'italic text');
else if (action === 'quote') transformEditorLines(function(line) { return line ? '> ' + line.replace(/^>\s?/, '') : '>'; });
else if (action === 'align-left') insertAlignmentBlock('left');
else if (action === 'align-center') insertAlignmentBlock('center');
else if (action === 'align-right') insertAlignmentBlock('right');
else if (action === 'title-case') transformSelectionOrCurrentLine(toTitleCase);
else if (action === 'uppercase') transformSelectionOrCurrentLine(function(text) { return text.toUpperCase(); });
else if (action === 'lowercase') transformSelectionOrCurrentLine(function(text) { return text.toLowerCase(); });
else if (action === 'heading') {
const level = parseInt(button.getAttribute('data-md-level') || '1', 10);
const marker = '#'.repeat(Math.max(1, Math.min(6, level))) + ' ';
transformEditorLines(function(line) { return marker + line.replace(/^#{1,6}\s+/, ''); });
} else if (action === 'unordered-list') {
applyMarkdownList('unordered');
} else if (action === 'ordered-list') {
applyMarkdownList('ordered');
} else if (action === 'horizontal-rule') insertMarkdownBlock('---\n');
else if (action === 'link') insertMarkdownLink();
else if (action === 'reference') insertMarkdownReference();
else if (action === 'image') insertMarkdownImage();
else if (action === 'inline-code') wrapEditorSelection('`', '`', 'code');
else if (action === 'code-block') insertMarkdownBlock('```js\n' + (markdownEditor.value.slice(markdownEditor.selectionStart, markdownEditor.selectionEnd) || 'console.log("Hello, Markdown!");') + '\n```\n');
else if (action === 'table') openTableModal();
else if (action === 'date-time') {
const now = new Date();
const datePart = now.toLocaleDateString('en-CA');
const timePart = now.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true });
const dayName = now.toLocaleDateString('en-US', { weekday: 'long' });
const timestamp = `${datePart} ${timePart} ${dayName}`;
replaceEditorRange(markdownEditor.selectionStart, markdownEditor.selectionEnd, timestamp, markdownEditor.selectionStart + timestamp.length, markdownEditor.selectionStart + timestamp.length);
} else if (action === 'emoji') {
openEmojiModal();
}
else if (action === 'symbols') openSymbolsModal();
else if (action === 'alert') openAlertModal();
else if (action === 'terminal-block') insertMarkdownBlock('```bash\nnpm run dev\n```\n');
else if (action === 'fullscreen') {
if (document.fullscreenElement && document.exitFullscreen) document.exitFullscreen();
else if (document.documentElement.requestFullscreen) document.documentElement.requestFullscreen();
} else if (action === 'clear-formatting') openClearFormattingModal();
else if (action === 'find') openFindReplaceModal();
else if (action === 'help') openHelpModal();
else if (action === 'info') openAboutModal();
}
function initMarkdownFormatToolbar() {
if (!markdownFormatToolbar) return;
markdownFormatToolbar.addEventListener('mousedown', function(e) {
if (e.target.closest('[data-md-action]')) e.preventDefault();
});
markdownFormatToolbar.addEventListener('click', function(e) {
const button = e.target.closest('[data-md-action]');
if (!button) return;
e.preventDefault();
runMarkdownTool(button.getAttribute('data-md-action'), button);
});
}
// Story 1.3: Resize Divider Functions
function initResizer() {
if (!resizeDivider) return;
// Set up WAI-ARIA accessibility tags
resizeDivider.setAttribute('role', 'separator');
resizeDivider.setAttribute('aria-orientation', 'vertical');
resizeDivider.setAttribute('tabindex', '0');
resizeDivider.setAttribute('aria-valuemin', MIN_PANE_PERCENT.toString());
resizeDivider.setAttribute('aria-valuemax', (100 - MIN_PANE_PERCENT).toString());
updateResizerAria();
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);
resizeDivider.addEventListener('keydown', handleResizerKeydown);
function handleResizerKeydown(e) {
if (currentViewMode !== 'split') return;
let delta = 0;
if (e.key === 'ArrowLeft') {
delta = -5; // Shift left by 5%
} else if (e.key === 'ArrowRight') {
delta = 5; // Shift right by 5%
} else {
return;
}
e.preventDefault();
editorWidthPercent = Math.max(MIN_PANE_PERCENT, Math.min(100 - MIN_PANE_PERCENT, editorWidthPercent + delta));
applyPaneWidths();
updateResizerAria();
}
function updateResizerAria() {
resizeDivider.setAttribute('aria-valuenow', Math.round(editorWidthPercent));
}
}
function startResize(e) {
if (window.innerWidth < 1080) return;
if (currentViewMode !== 'split') return;
e.preventDefault();
isResizing = true;
resizeDivider.classList.add('dragging');
document.body.classList.add('resizing');
}
function startResizeTouch(e) {
if (window.innerWidth < 1080) return;
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 (window.innerWidth < 1080) {
resetPaneWidths();
return;
}
if (currentViewMode !== 'split') return;
const previewPercent = 100 - editorWidthPercent;
editorPaneElement.style.flex = `0 0 calc((100% - var(--dock-width, 0px)) * ${editorWidthPercent / 100} - 4px)`;
previewPaneElement.style.flex = `0 0 calc((100% - var(--dock-width, 0px)) * ${previewPercent / 100} - 4px)`;
refreshEditorWidth();
scheduleLineNumberUpdate();
}
function resetPaneWidths() {
editorPaneElement.style.flex = '';
previewPaneElement.style.flex = '';
refreshEditorWidth();
}
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("sync-active");
} else {
mobileToggleSync.innerHTML = ' Sync On';
mobileToggleSync.classList.add("sync-enabled");
mobileToggleSync.classList.remove("sync-disabled");
mobileToggleSync.classList.remove("sync-active");
}
});
mobileImportBtn.addEventListener("click", () => {
if (typeof Neutralino !== 'undefined') {
nativeImportMarkdown();
} else {
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();
if (loadGlobalState().syncScrollingEnabled === false) toggleSyncScrolling();
updateMobileStats();
updateFindHighlights();
syncHighlightScroll();
// Defer DOM geometry measurement until after FCP/LCP critical paint path
setTimeout(function() {
initEditorGeometry();
refreshEditorWidth();
scheduleLineNumberUpdate();
}, 100);
// Initialize resizer - Story 1.3
initResizer();
function constrainFloatingPanelPosition() {
const panel = document.getElementById('find-replace-modal');
if (!panel || isFrDocked || panel.style.display === 'none') return;
if (window.innerWidth < 768) return; // Mobile layout forces fixed responsive positioning via CSS
// Only adjust if the inline style has custom dragged coordinates
if (!panel.style.left || panel.style.left === 'auto') return;
const leftVal = parseFloat(panel.style.left) || 0;
const topVal = parseFloat(panel.style.top) || 0;
const maxX = window.innerWidth - panel.offsetWidth;
const maxY = window.innerHeight - panel.offsetHeight;
const constrainedLeft = `${Math.max(0, Math.min(maxX, leftVal))}px`;
const constrainedTop = `${Math.max(0, Math.min(maxY, topVal))}px`;
panel.style.left = constrainedLeft;
panel.style.top = constrainedTop;
lastFloatingLeft = constrainedLeft;
lastFloatingTop = constrainedTop;
}
let resizeLayoutTimeout = null;
window.addEventListener('resize', () => {
clearTimeout(resizeLayoutTimeout);
resizeLayoutTimeout = setTimeout(function() {
initEditorGeometry();
refreshEditorWidth();
scheduleLineNumberUpdate();
if (window.innerWidth < 1080 && isFrDocked && isFindModalOpen) {
toggleFrDockMode(true);
}
constrainFloatingPanelPosition();
}, 100);
});
// View Mode Button Event Listeners - Story 1.1
viewModeButtons.forEach(btn => {
btn.addEventListener('click', function() {
const mode = this.getAttribute('data-view-mode');
setViewMode(resolveViewToggleMode(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(e) {
handleKeystrokeHistory(e);
debouncedRender();
clearTimeout(saveTabStateTimeout);
saveTabStateTimeout = setTimeout(saveCurrentTabState, 500);
if (isFindModalOpen) {
scheduleFindRefresh();
} else {
updateFindHighlights();
}
scheduleLineNumberUpdate({
inputType: e && typeof e.inputType === 'string' ? e.inputType : '',
});
});
markdownEditor.addEventListener('keydown', updateLastCursor);
markdownEditor.addEventListener('keyup', updateLastCursor);
markdownEditor.addEventListener('mousedown', updateLastCursor);
markdownEditor.addEventListener('mouseup', updateLastCursor);
markdownEditor.addEventListener('focus', updateLastCursor);
initMarkdownFormatToolbar();
initFindReplaceModal();
initAppModals();
// Editor key handlers for list continuation and indentation
markdownEditor.addEventListener("keydown", function(e) {
if (handleListEnter(e)) {
return;
}
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'));
}
});
markdownEditor.addEventListener("scroll", function() {
cachedScrollTop = this.scrollTop;
cachedScrollLeft = this.scrollLeft;
syncEditorToPreview();
scheduleEditorOverlayScrollSync();
});
previewPane.addEventListener("scroll", syncPreviewToEditor);
toggleSyncButton.addEventListener("click", toggleSyncScrolling);
if (directionToggle) {
directionToggle.addEventListener("click", function () {
const currentDir = markdownEditor ? markdownEditor.getAttribute("dir") : "ltr";
const direction = currentDir === "rtl" ? "ltr" : "rtl";
applyDirectionToContent(direction);
saveGlobalState({ direction });
updateDirectionToggleUI(direction);
});
}
themeToggle.addEventListener("click", function () {
_lastRenderedContent = null;
const theme =
document.documentElement.getAttribute("data-theme") === "dark"
? "light"
: "dark";
document.documentElement.setAttribute("data-theme", theme);
saveGlobalState({ theme });
if (theme === "dark") {
themeToggle.innerHTML = '';
} else {
themeToggle.innerHTML = '';
}
// PERF-004: Only re-render Mermaid diagrams on theme change instead of full renderMarkdown()
// CSS custom properties handle all other theme transitions automatically.
// PERF-002: Guard mermaid re-render — skip if not loaded yet
if (typeof mermaid !== 'undefined') {
initMermaid(true); // Force re-init with new theme
try {
const mermaidNodes = markdownPreview.querySelectorAll('.mermaid');
if (mermaidNodes.length > 0) {
// Clear existing rendered Mermaid SVGs and re-render with new theme
mermaidNodes.forEach(function(node) {
// Restore original diagram code to prevent parsing already-rendered SVG as source
const originalCode = node.getAttribute('data-original-code');
if (originalCode) {
const decodedCode = decodeURIComponent(originalCode);
const escapedCode = decodedCode
.replace(/&/g, "&")
.replace(//g, ">");
node.innerHTML = escapedCode;
}
node.removeAttribute('data-processed');
const container = node.closest('.mermaid-container');
if (container) {
container.classList.add('is-loading');
const oldToolbar = container.querySelector('.mermaid-toolbar');
if (oldToolbar) oldToolbar.remove();
}
});
Promise.resolve(mermaid.init(undefined, mermaidNodes))
.then(function() {
markdownPreview.querySelectorAll('.mermaid-container.is-loading').forEach(function(c) {
c.classList.remove('is-loading');
});
addMermaidToolbars();
})
.catch(function(e) {
console.warn('Mermaid theme re-render failed:', e);
markdownPreview.querySelectorAll('.mermaid-container.is-loading').forEach(function(c) {
c.classList.remove('is-loading');
});
});
}
} catch (e) {
console.warn('Mermaid theme re-render failed:', e);
}
}
});
async function nativeSaveMarkdown() {
try {
const content = markdownEditor.value;
const result = await Neutralino.os.showSaveDialog("Save Markdown File", {
filters: [
{ name: "Markdown files (*.md)", extensions: ["md", "markdown"] },
{ name: "All files (*.*)", extensions: ["*"] }
]
});
if (result) {
await Neutralino.filesystem.writeFile(result, content);
const fileName = result.split(/[/\\]/).pop().replace(/\.(md|markdown)$/i, "");
const activeTab = tabs.find(function(t) { return t.id === activeTabId; });
if (activeTab) {
activeTab.title = fileName;
activeTab.content = content;
saveTabsToStorage(tabs);
renderTabBar(tabs, activeTabId);
}
}
} catch (e) {
console.error("Native save failed:", e);
alert("Native save failed: " + e.message);
}
}
async function nativeSaveHtml(htmlContent) {
try {
const result = await Neutralino.os.showSaveDialog("Save HTML document", {
filters: [
{ name: "HTML documents (*.html)", extensions: ["html", "htm"] }
]
});
if (result) {
await Neutralino.filesystem.writeFile(result, htmlContent);
}
} catch (e) {
console.error("Native HTML save failed:", e);
alert("Native HTML save failed: " + e.message);
}
}
async function nativeImportMarkdown() {
try {
const result = await Neutralino.os.showOpenDialog("Open Markdown file", {
filters: [
{ name: "Markdown files (*.md)", extensions: ["md", "markdown"] },
{ name: "All files (*.*)", extensions: ["*"] }
],
multiSelections: true
});
if (result && result.length > 0) {
for (const filePath of result) {
const content = await Neutralino.filesystem.readFile(filePath);
const fileName = filePath.split(/[/\\]/).pop().replace(/\.(md|markdown)$/i, "");
newTab(content, fileName);
}
}
} catch (e) {
console.error("Native import failed:", e);
alert("Native import failed: " + e.message);
}
}
if (importFromFileButton) {
importFromFileButton.addEventListener("click", function (e) {
e.preventDefault();
if (typeof Neutralino !== 'undefined') {
nativeImportMarkdown();
} else {
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);
}
if (githubImportSelectAllBtn) {
githubImportSelectAllBtn.addEventListener("click", function() {
const allPaths = availableGitHubImportPaths.slice();
const shouldSelectAll = selectedGitHubImportPaths.size !== allPaths.length;
setGitHubSelectedPaths(shouldSelectAll ? allPaths : []);
});
}
fileInput.addEventListener("change", function (e) {
const file = e.target.files[0];
if (file) {
importMarkdownFile(file);
}
this.value = "";
});
exportMd.addEventListener("click", function () {
if (typeof Neutralino !== 'undefined') {
nativeSaveMarkdown();
return;
}
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 { frontmatter, body } = parseFrontmatter(markdownEditor.value);
const tableHtml = frontmatter ? renderFrontmatterTable(frontmatter) : '';
const referenceData = extractReferenceDefinitions(body);
const html = tableHtml + marked.parse(referenceData.cleanedMarkdown);
const sanitizedHtml = DOMPurify.sanitize(html, {
ADD_TAGS: ['mjx-container', 'input'],
ADD_ATTR: ['id', 'class', 'style', 'align', 'type', 'checked', 'disabled', 'data-original-code'],
ALLOWED_URI_REGEXP: /^(?:(?:https?|mailto|tel|blob):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i
});
const tempContainer = document.createElement("div");
tempContainer.innerHTML = sanitizedHtml;
applyReferencePreviewLinks(tempContainer, referenceData.definitions);
enhanceGitHubAlerts(tempContainer);
const enhancedHtml = tempContainer.innerHTML;
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 = `
Generating PDF
0%
Current Step
Preparing
Estimated remaining
Calculating...