`,
);
+if (html === originalHtml) {
+ console.error("ā No prepare.js transformations were applied");
+ process.exit(1);
+}
+
fs.writeFileSync(path.join(RESOURCES_DIR, "index.html"), html, "utf-8");
console.log(
"ā Generated resources/index.html (Neutralinojs injections applied)",
diff --git a/desktop-app/resources/assets/Black and Beige Simple Coming Soon Banner.png b/desktop-app/resources/assets/Black and Beige Simple Coming Soon Banner.png
deleted file mode 100644
index 8ec1fc1..0000000
Binary files a/desktop-app/resources/assets/Black and Beige Simple Coming Soon Banner.png and /dev/null differ
diff --git a/desktop-app/resources/assets/code.png b/desktop-app/resources/assets/code.png
deleted file mode 100644
index 9473cb1..0000000
Binary files a/desktop-app/resources/assets/code.png and /dev/null differ
diff --git a/desktop-app/resources/assets/github.png b/desktop-app/resources/assets/github.png
deleted file mode 100644
index 0c2ee50..0000000
Binary files a/desktop-app/resources/assets/github.png and /dev/null differ
diff --git a/desktop-app/resources/assets/icon.jpg b/desktop-app/resources/assets/icon.jpg
deleted file mode 100644
index cdb8b4a..0000000
Binary files a/desktop-app/resources/assets/icon.jpg and /dev/null differ
diff --git a/desktop-app/resources/assets/live-peview.gif b/desktop-app/resources/assets/live-peview.gif
deleted file mode 100644
index 56edb86..0000000
Binary files a/desktop-app/resources/assets/live-peview.gif and /dev/null differ
diff --git a/desktop-app/resources/assets/mathexp.png b/desktop-app/resources/assets/mathexp.png
deleted file mode 100644
index 4731f6f..0000000
Binary files a/desktop-app/resources/assets/mathexp.png and /dev/null differ
diff --git a/desktop-app/resources/assets/mermaid.png b/desktop-app/resources/assets/mermaid.png
deleted file mode 100644
index 16323a4..0000000
Binary files a/desktop-app/resources/assets/mermaid.png and /dev/null differ
diff --git a/desktop-app/resources/assets/table.png b/desktop-app/resources/assets/table.png
deleted file mode 100644
index e0cca14..0000000
Binary files a/desktop-app/resources/assets/table.png and /dev/null differ
diff --git a/desktop-app/resources/js/main.js b/desktop-app/resources/js/main.js
index 70773eb..7e11bc7 100644
--- a/desktop-app/resources/js/main.js
+++ b/desktop-app/resources/js/main.js
@@ -1,36 +1,3 @@
-// This is just a sample app. You can structure your Neutralinojs app code as you wish.
-// This example app is written with vanilla JavaScript and HTML.
-// Feel free to use any frontend framework you like :)
-// See more details: https://neutralino.js.org/docs/how-to/use-a-frontend-library
-
-/*
- Function to display information about the Neutralino app.
- This function updates the content of the 'info' element in the HTML
- with details regarding the running Neutralino application, including
- its ID, port, operating system, and version information.
-*/
-function showInfo() {
- return `
- ${NL_APPID} is running on port ${NL_PORT} inside ${NL_OS}
-
-
server: v${NL_VERSION} . client: v${NL_CVERSION}
- `;
-}
-
-/*
- Function to open the official Neutralino documentation in the default web browser.
-*/
-function openDocs() {
- Neutralino.os.open("https://neutralino.js.org/docs");
-}
-
-/*
- Function to open a tutorial video on Neutralino's official YouTube channel in the default web browser.
-*/
-function openTutorial() {
- Neutralino.os.open("https://www.youtube.com/c/CodeZri");
-}
-
/*
Function to set up a system tray menu with options specific to the window mode.
This function checks if the application is running in window mode, and if so,
@@ -45,7 +12,7 @@ function setTray() {
// Define tray menu items
let tray = {
- icon: "/resources/icons/trayIcon.png",
+ icon: "/resources/assets/icon.jpg",
menuItems: [
{ id: "VERSION", text: "Get version" },
{ id: "SEP", text: "-" },
@@ -68,7 +35,7 @@ function onTrayMenuItemClicked(event) {
// Display version information
Neutralino.os.showMessageBox(
"Version information",
- `Neutralinojs server: v${NL_VERSION} | Neutralinojs client: v${NL_CVERSION}`,
+ `Neutralinojs server: v${NL_VERSION}\nNeutralinojs client: v${NL_CVERSION}\nOS Name: ${NL_OS}\nArchitecture: ${NL_ARCH}\nApplication ID: ${NL_APPID}\nApplication Version: ${NL_APPVERSION}\nPort: ${NL_PORT}\nMode: ${NL_MODE}\nNeutralinojs server: v${NL_VERSION}\nNeutralinojs client: v${NL_CVERSION}\nCurrent working directory: ${NL_CWD}\nApplication path: ${NL_PATH}\nApplication data path: ${NL_DATAPATH}\nCommand-line arguments: ${NL_ARGS}\nProcess ID: ${NL_PID}\nResource mode: ${NL_RESMODE}\nExtensions enabled: ${NL_EXTENABLED}\nFramework binary's release commit hash: ${NL_COMMIT}\nClient library's release commit hash: ${NL_CCOMMIT}\nCustom method identifiers: ${NL_CMETHODS}\nInitial window state was loaded from the saved configuration: ${NL_WSAVSTLOADED}\nUser System Locale: ${NL_LOCALE}\nData passed during the framework binary compilation via the NEU_COMPILATION_DATA definition in the BuildZri configuration file: ${NL_COMPDATA}`,
);
break;
case "QUIT":
@@ -97,31 +64,3 @@ if (NL_OS != "Darwin") {
// TODO: Fix https://github.com/neutralinojs/neutralinojs/issues/615
setTray();
}
-
-// Open file passed as command-line argument (e.g. when double-clicking a .md file)
-(async function loadInitialFile() {
- const args = Array.isArray(NL_ARGS) ? NL_ARGS : (() => { try { return JSON.parse(NL_ARGS); } catch(e) { return []; } })();
- const filePath = args.find(a => typeof a === 'string' && /\.(md|markdown)$/i.test(a));
- if (!filePath) return;
-
- try {
- const content = await Neutralino.filesystem.readFile(filePath);
-
- function applyContent() {
- const editor = document.getElementById('markdown-editor');
- const dropzone = document.getElementById('dropzone');
- if (!editor) return;
- editor.value = content;
- editor.dispatchEvent(new Event('input'));
- if (dropzone) dropzone.style.display = 'none';
- }
-
- if (document.readyState === 'loading') {
- document.addEventListener('DOMContentLoaded', applyContent);
- } else {
- setTimeout(applyContent, 0);
- }
- } catch (e) {
- console.warn('Could not open initial file:', e);
- }
-})();
diff --git a/desktop-app/resources/js/neutralino.d.ts b/desktop-app/resources/js/neutralino.d.ts
deleted file mode 100644
index 09d69e6..0000000
--- a/desktop-app/resources/js/neutralino.d.ts
+++ /dev/null
@@ -1,531 +0,0 @@
-export declare enum LoggerType {
- WARNING = "WARNING",
- ERROR = "ERROR",
- INFO = "INFO"
-}
-export declare enum Icon {
- WARNING = "WARNING",
- ERROR = "ERROR",
- INFO = "INFO",
- QUESTION = "QUESTION"
-}
-export declare enum MessageBoxChoice {
- OK = "OK",
- OK_CANCEL = "OK_CANCEL",
- YES_NO = "YES_NO",
- YES_NO_CANCEL = "YES_NO_CANCEL",
- RETRY_CANCEL = "RETRY_CANCEL",
- ABORT_RETRY_IGNORE = "ABORT_RETRY_IGNORE"
-}
-export declare enum ClipboardFormat {
- unknown = "unknown",
- text = "text",
- image = "image"
-}
-export declare enum Mode {
- window = "window",
- browser = "browser",
- cloud = "cloud",
- chrome = "chrome"
-}
-export declare enum OperatingSystem {
- Linux = "Linux",
- Windows = "Windows",
- Darwin = "Darwin",
- FreeBSD = "FreeBSD",
- Unknown = "Unknown"
-}
-export declare enum Architecture {
- x64 = "x64",
- arm = "arm",
- itanium = "itanium",
- ia32 = "ia32",
- unknown = "unknown"
-}
-export interface DirectoryEntry {
- entry: string;
- path: string;
- type: string;
-}
-export interface FileReaderOptions {
- pos: number;
- size: number;
-}
-export interface DirectoryReaderOptions {
- recursive: boolean;
-}
-export interface OpenedFile {
- id: number;
- eof: boolean;
- pos: number;
- lastRead: number;
-}
-export interface Stats {
- size: number;
- isFile: boolean;
- isDirectory: boolean;
- createdAt: number;
- modifiedAt: number;
-}
-export interface Watcher {
- id: number;
- path: string;
-}
-export interface CopyOptions {
- recursive: boolean;
- overwrite: boolean;
- skip: boolean;
-}
-export interface PathParts {
- rootName: string;
- rootDirectory: string;
- rootPath: string;
- relativePath: string;
- parentPath: string;
- filename: string;
- stem: string;
- extension: string;
-}
-interface Permissions$1 {
- all: boolean;
- ownerAll: boolean;
- ownerRead: boolean;
- ownerWrite: boolean;
- ownerExec: boolean;
- groupAll: boolean;
- groupRead: boolean;
- groupWrite: boolean;
- groupExec: boolean;
- othersAll: boolean;
- othersRead: boolean;
- othersWrite: boolean;
- othersExec: boolean;
-}
-export type PermissionsMode = "ADD" | "REPLACE" | "REMOVE";
-declare function createDirectory(path: string): Promise
;
-declare function remove(path: string): Promise;
-declare function writeFile(path: string, data: string): Promise;
-declare function appendFile(path: string, data: string): Promise;
-declare function writeBinaryFile(path: string, data: ArrayBuffer): Promise;
-declare function appendBinaryFile(path: string, data: ArrayBuffer): Promise;
-declare function readFile(path: string, options?: FileReaderOptions): Promise;
-declare function readBinaryFile(path: string, options?: FileReaderOptions): Promise;
-declare function openFile(path: string): Promise;
-declare function createWatcher(path: string): Promise;
-declare function removeWatcher(id: number): Promise;
-declare function getWatchers(): Promise;
-declare function updateOpenedFile(id: number, event: string, data?: any): Promise;
-declare function getOpenedFileInfo(id: number): Promise;
-declare function readDirectory(path: string, options?: DirectoryReaderOptions): Promise;
-declare function copy(source: string, destination: string, options?: CopyOptions): Promise;
-declare function move(source: string, destination: string): Promise;
-declare function getStats(path: string): Promise;
-declare function getAbsolutePath(path: string): Promise;
-declare function getRelativePath(path: string, base?: string): Promise;
-declare function getPathParts(path: string): Promise;
-declare function getPermissions(path: string): Promise;
-declare function setPermissions(path: string, permissions: Permissions$1, mode: PermissionsMode): Promise;
-declare function getJoinedPath(...paths: string[]): Promise;
-declare function getNormalizedPath(path: string): Promise;
-declare function getUnnormalizedPath(path: string): Promise;
-export interface ExecCommandOptions {
- stdIn?: string;
- background?: boolean;
- cwd?: string;
-}
-export interface ExecCommandResult {
- pid: number;
- stdOut: string;
- stdErr: string;
- exitCode: number;
-}
-export interface SpawnedProcess {
- id: number;
- pid: number;
-}
-export interface SpawnedProcessOptions {
- cwd?: string;
- envs?: Record;
-}
-export interface Envs {
- [key: string]: string;
-}
-export interface OpenDialogOptions {
- multiSelections?: boolean;
- filters?: Filter[];
- defaultPath?: string;
-}
-export interface FolderDialogOptions {
- defaultPath?: string;
-}
-export interface SaveDialogOptions {
- forceOverwrite?: boolean;
- filters?: Filter[];
- defaultPath?: string;
-}
-export interface Filter {
- name: string;
- extensions: string[];
-}
-export interface TrayOptions {
- icon: string;
- menuItems: TrayMenuItem[];
-}
-export interface TrayMenuItem {
- id?: string;
- text: string;
- isDisabled?: boolean;
- isChecked?: boolean;
-}
-export type KnownPath = "config" | "data" | "cache" | "documents" | "pictures" | "music" | "video" | "downloads" | "savedGames1" | "savedGames2" | "temp";
-declare function execCommand(command: string, options?: ExecCommandOptions): Promise;
-declare function spawnProcess(command: string, options?: SpawnedProcessOptions): Promise;
-declare function updateSpawnedProcess(id: number, event: string, data?: any): Promise;
-declare function getSpawnedProcesses(): Promise;
-declare function getEnv(key: string): Promise;
-declare function getEnvs(): Promise;
-declare function showOpenDialog(title?: string, options?: OpenDialogOptions): Promise;
-declare function showFolderDialog(title?: string, options?: FolderDialogOptions): Promise;
-declare function showSaveDialog(title?: string, options?: SaveDialogOptions): Promise;
-declare function showNotification(title: string, content: string, icon?: Icon): Promise;
-declare function showMessageBox(title: string, content: string, choice?: MessageBoxChoice, icon?: Icon): Promise;
-declare function setTray(options: TrayOptions): Promise;
-declare function open$1(url: string): Promise;
-declare function getPath(name: KnownPath): Promise;
-export interface MemoryInfo {
- physical: {
- total: number;
- available: number;
- };
- virtual: {
- total: number;
- available: number;
- };
-}
-export interface KernelInfo {
- variant: string;
- version: string;
-}
-export interface OSInfo {
- name: string;
- description: string;
- version: string;
-}
-export interface CPUInfo {
- vendor: string;
- model: string;
- frequency: number;
- architecture: string;
- logicalThreads: number;
- physicalCores: number;
- physicalUnits: number;
-}
-export interface Display {
- id: number;
- resolution: Resolution;
- dpi: number;
- bpp: number;
- refreshRate: number;
-}
-export interface Resolution {
- width: number;
- height: number;
-}
-export interface MousePosition {
- x: number;
- y: number;
-}
-declare function getMemoryInfo(): Promise;
-declare function getArch(): Promise;
-declare function getKernelInfo(): Promise;
-declare function getOSInfo(): Promise;
-declare function getCPUInfo(): Promise;
-declare function getDisplays(): Promise;
-declare function getMousePosition(): Promise;
-declare function setData(key: string, data: string | null): Promise;
-declare function getData(key: string): Promise;
-declare function removeData(key: string): Promise;
-declare function getKeys(): Promise;
-declare function clear(): Promise;
-declare function log(message: string, type?: LoggerType): Promise;
-export interface OpenActionOptions {
- url: string;
-}
-export interface RestartOptions {
- args: string;
-}
-declare function exit(code?: number): Promise;
-declare function killProcess(): Promise;
-declare function restartProcess(options?: RestartOptions): Promise;
-declare function getConfig(): Promise;
-declare function broadcast(event: string, data?: any): Promise;
-declare function readProcessInput(readAll?: boolean): Promise;
-declare function writeProcessOutput(data: string): Promise;
-declare function writeProcessError(data: string): Promise;
-export interface WindowOptions extends WindowSizeOptions, WindowPosOptions {
- title?: string;
- icon?: string;
- fullScreen?: boolean;
- alwaysOnTop?: boolean;
- enableInspector?: boolean;
- borderless?: boolean;
- maximize?: boolean;
- hidden?: boolean;
- maximizable?: boolean;
- useSavedState?: boolean;
- exitProcessOnClose?: boolean;
- extendUserAgentWith?: string;
- injectGlobals?: boolean;
- injectClientLibrary?: boolean;
- injectScript?: string;
- processArgs?: string;
-}
-export interface WindowSizeOptions {
- width?: number;
- height?: number;
- minWidth?: number;
- minHeight?: number;
- maxWidth?: number;
- maxHeight?: number;
- resizable?: boolean;
-}
-export interface WindowPosOptions {
- x?: number;
- y?: number;
- center?: boolean;
-}
-export interface WindowMenu extends Array {
-}
-export interface WindowMenuItem {
- id?: string;
- text: string;
- action?: string;
- shortcut?: string;
- isDisabled?: boolean;
- isChecked?: boolean;
- menuItems?: WindowMenuItem[];
-}
-declare function setTitle(title: string): Promise;
-declare function getTitle(): Promise;
-declare function maximize(): Promise;
-declare function unmaximize(): Promise;
-declare function isMaximized(): Promise;
-declare function minimize(): Promise;
-declare function unminimize(): Promise;
-declare function isMinimized(): Promise;
-declare function setFullScreen(): Promise;
-declare function exitFullScreen(): Promise;
-declare function isFullScreen(): Promise;
-declare function show(): Promise;
-declare function hide(): Promise;
-declare function isVisible(): Promise;
-declare function focus$1(): Promise;
-declare function setIcon(icon: string): Promise;
-declare function move$1(x: number, y: number): Promise;
-declare function center(): Promise;
-declare function beginDrag(screenX?: number, screenY?: number): Promise;
-declare function setDraggableRegion(DOMElementOrId: string | HTMLElement, options?: {
- exclude?: Array;
-}): Promise<{
- success: true;
- message: string;
- exclusions: {
- add(elements: Array): void;
- remove(elements: Array): void;
- removeAll(): void;
- };
-}>;
-declare function unsetDraggableRegion(DOMElementOrId: string | HTMLElement): Promise<{
- success: true;
- message: string;
-}>;
-declare function setSize(options: WindowSizeOptions): Promise;
-declare function getSize(): Promise;
-declare function getPosition(): Promise;
-declare function setAlwaysOnTop(onTop: boolean): Promise;
-declare function setBorderless(borderless: boolean): Promise;
-declare function create(url: string, options?: WindowOptions): Promise;
-declare function snapshot(path: string): Promise;
-declare function setMainMenu(options: WindowMenu): Promise;
-declare function print$1(): Promise;
-interface Response$1 {
- success: boolean;
- message: string;
-}
-export type Builtin = "ready" | "trayMenuItemClicked" | "windowClose" | "serverOffline" | "clientConnect" | "clientDisconnect" | "appClientConnect" | "appClientDisconnect" | "extClientConnect" | "extClientDisconnect" | "extensionReady" | "neuDev_reloadApp";
-declare function on(event: string, handler: (ev: CustomEvent) => void): Promise;
-declare function off(event: string, handler: (ev: CustomEvent) => void): Promise;
-declare function dispatch(event: string, data?: any): Promise;
-declare function broadcast$1(event: string, data?: any): Promise;
-export interface ExtensionStats {
- loaded: string[];
- connected: string[];
-}
-declare function dispatch$1(extensionId: string, event: string, data?: any): Promise;
-declare function broadcast$2(event: string, data?: any): Promise;
-declare function getStats$1(): Promise;
-export interface Manifest {
- applicationId: string;
- version: string;
- resourcesURL: string;
-}
-declare function checkForUpdates(url: string): Promise;
-declare function install(): Promise;
-export interface ClipboardImage {
- width: number;
- height: number;
- bpp: number;
- bpr: number;
- redMask: number;
- greenMask: number;
- blueMask: number;
- redShift: number;
- greenShift: number;
- blueShift: number;
- data: ArrayBuffer;
-}
-declare function getFormat(): Promise;
-declare function readText(): Promise;
-declare function readImage(format?: string): Promise;
-declare function writeText(data: string): Promise;
-declare function writeImage(image: ClipboardImage): Promise;
-declare function readHTML(): Promise;
-declare function writeHTML(data: string): Promise;
-declare function clear$1(): Promise;
-interface Stats$1 {
- size: number;
- isFile: boolean;
- isDirectory: boolean;
-}
-declare function getFiles(): Promise;
-declare function getStats$2(path: string): Promise;
-declare function extractFile(path: string, destination: string): Promise;
-declare function extractDirectory(path: string, destination: string): Promise;
-declare function readFile$1(path: string): Promise;
-declare function readBinaryFile$1(path: string): Promise;
-declare function mount(path: string, target: string): Promise;
-declare function unmount(path: string): Promise;
-declare function getMounts(): Promise>;
-declare function getMethods(): Promise;
-export interface InitOptions {
- exportCustomMethods?: boolean;
-}
-export declare function init(options?: InitOptions): void;
-export type ErrorCode = "NE_FS_DIRCRER" | "NE_FS_RMDIRER" | "NE_FS_FILRDER" | "NE_FS_FILWRER" | "NE_FS_FILRMER" | "NE_FS_NOPATHE" | "NE_FS_COPYFER" | "NE_FS_MOVEFER" | "NE_OS_INVMSGA" | "NE_OS_INVKNPT" | "NE_ST_INVSTKY" | "NE_ST_STKEYWE" | "NE_RT_INVTOKN" | "NE_RT_NATPRME" | "NE_RT_APIPRME" | "NE_RT_NATRTER" | "NE_RT_NATNTIM" | "NE_CL_NSEROFF" | "NE_EX_EXTNOTC" | "NE_UP_CUPDMER" | "NE_UP_CUPDERR" | "NE_UP_UPDNOUF" | "NE_UP_UPDINER";
-interface Error$1 {
- code: ErrorCode;
- message: string;
-}
-declare global {
- interface Window {
- /** Mode of the application: window, browser, cloud, or chrome */
- NL_MODE: Mode;
- /** Application port */
- NL_PORT: number;
- /** Command-line arguments */
- NL_ARGS: string[];
- /** Basic authentication token */
- NL_TOKEN: string;
- /** Neutralinojs client version */
- NL_CVERSION: string;
- /** Application identifier */
- NL_APPID: string;
- /** Application version */
- NL_APPVERSION: string;
- /** Application path */
- NL_PATH: string;
- /** Application data path */
- NL_DATAPATH: string;
- /** Returns true if extensions are enabled */
- NL_EXTENABLED: boolean;
- /** Returns true if the client library is injected */
- NL_GINJECTED: boolean;
- /** Returns true if globals are injected */
- NL_CINJECTED: boolean;
- /** Operating system name: Linux, Windows, Darwin, FreeBSD, or Uknown */
- NL_OS: OperatingSystem;
- /** CPU architecture: x64, arm, itanium, ia32, or unknown */
- NL_ARCH: Architecture;
- /** Neutralinojs server version */
- NL_VERSION: string;
- /** Current working directory */
- NL_CWD: string;
- /** Identifier of the current process */
- NL_PID: string;
- /** Source of application resources: bundle or directory */
- NL_RESMODE: string;
- /** Release commit of the client library */
- NL_CCOMMIT: string;
- /** An array of custom methods */
- NL_CMETHODS: string[];
- }
- /** Neutralino global object for custom methods **/
- const Neutralino: any;
-}
-
-declare namespace custom {
- export { getMethods };
-}
-declare namespace filesystem {
- export { appendBinaryFile, appendFile, copy, createDirectory, createWatcher, getAbsolutePath, getJoinedPath, getNormalizedPath, getOpenedFileInfo, getPathParts, getPermissions, getRelativePath, getStats, getUnnormalizedPath, getWatchers, move, openFile, readBinaryFile, readDirectory, readFile, remove, removeWatcher, setPermissions, updateOpenedFile, writeBinaryFile, writeFile };
-}
-declare namespace os {
- export { execCommand, getEnv, getEnvs, getPath, getSpawnedProcesses, open$1 as open, setTray, showFolderDialog, showMessageBox, showNotification, showOpenDialog, showSaveDialog, spawnProcess, updateSpawnedProcess };
-}
-declare namespace computer {
- export { getArch, getCPUInfo, getDisplays, getKernelInfo, getMemoryInfo, getMousePosition, getOSInfo };
-}
-declare namespace storage {
- export { clear, getData, getKeys, removeData, setData };
-}
-declare namespace debug {
- export { log };
-}
-declare namespace app {
- export { broadcast, exit, getConfig, killProcess, readProcessInput, restartProcess, writeProcessError, writeProcessOutput };
-}
-declare namespace window$1 {
- export { beginDrag, center, create, exitFullScreen, focus$1 as focus, getPosition, getSize, getTitle, hide, isFullScreen, isMaximized, isMinimized, isVisible, maximize, minimize, move$1 as move, print$1 as print, setAlwaysOnTop, setBorderless, setDraggableRegion, setFullScreen, setIcon, setMainMenu, setSize, setTitle, show, snapshot, unmaximize, unminimize, unsetDraggableRegion };
-}
-declare namespace events {
- export { broadcast$1 as broadcast, dispatch, off, on };
-}
-declare namespace extensions {
- export { broadcast$2 as broadcast, dispatch$1 as dispatch, getStats$1 as getStats };
-}
-declare namespace updater {
- export { checkForUpdates, install };
-}
-declare namespace clipboard {
- export { clear$1 as clear, getFormat, readHTML, readImage, readText, writeHTML, writeImage, writeText };
-}
-declare namespace resources {
- export { extractDirectory, extractFile, getFiles, getStats$2 as getStats, readBinaryFile$1 as readBinaryFile, readFile$1 as readFile };
-}
-declare namespace server {
- export { getMounts, mount, unmount };
-}
-
-export {
- Error$1 as Error,
- Permissions$1 as Permissions,
- Response$1 as Response,
- app,
- clipboard,
- computer,
- custom,
- debug,
- events,
- extensions,
- filesystem,
- os,
- resources,
- server,
- storage,
- updater,
- window$1 as window,
-};
-
-export as namespace Neutralino;
-
-export {};
diff --git a/desktop-app/resources/js/script.js b/desktop-app/resources/js/script.js
deleted file mode 100644
index 7ee9126..0000000
--- a/desktop-app/resources/js/script.js
+++ /dev/null
@@ -1,2835 +0,0 @@
-document.addEventListener("DOMContentLoaded", function () {
- let markdownRenderTimeout = null;
- const RENDER_DELAY = 100;
- let syncScrollingEnabled = true;
- let isEditorScrolling = false;
- let isPreviewScrolling = false;
- let scrollSyncTimeout = null;
- const SCROLL_SYNC_DELAY = 10;
-
- // View Mode State - Story 1.1
- let currentViewMode = 'split'; // 'editor', 'split', or 'preview'
-
- const markdownEditor = document.getElementById("markdown-editor");
- const markdownPreview = document.getElementById("markdown-preview");
- const themeToggle = document.getElementById("theme-toggle");
- const importFromFileButton = document.getElementById("import-from-file");
- const importFromGithubButton = document.getElementById("import-from-github");
- const fileInput = document.getElementById("file-input");
- const exportMd = document.getElementById("export-md");
- const exportHtml = document.getElementById("export-html");
- const exportPdf = document.getElementById("export-pdf");
- const copyMarkdownButton = document.getElementById("copy-markdown-button");
- const dropzone = document.getElementById("dropzone");
- const closeDropzoneBtn = document.getElementById("close-dropzone");
- const toggleSyncButton = document.getElementById("toggle-sync");
- const editorPane = document.getElementById("markdown-editor");
- const previewPane = document.querySelector(".preview-pane");
- const readingTimeElement = document.getElementById("reading-time");
- const wordCountElement = document.getElementById("word-count");
- const charCountElement = document.getElementById("char-count");
-
- // View Mode Elements - Story 1.1
- const contentContainer = document.querySelector(".content-container");
- const viewModeButtons = document.querySelectorAll(".view-mode-btn");
-
- // Mobile View Mode Elements - Story 1.4
- const mobileViewModeButtons = document.querySelectorAll(".mobile-view-mode-btn");
-
- // Resize Divider Elements - Story 1.3
- const resizeDivider = document.querySelector(".resize-divider");
- const editorPaneElement = document.querySelector(".editor-pane");
- const previewPaneElement = document.querySelector(".preview-pane");
- let isResizing = false;
- let editorWidthPercent = 50; // Default 50%
- const MIN_PANE_PERCENT = 20; // Minimum 20% width
-
- const mobileMenuToggle = document.getElementById("mobile-menu-toggle");
- const mobileMenuPanel = document.getElementById("mobile-menu-panel");
- const mobileMenuOverlay = document.getElementById("mobile-menu-overlay");
- const mobileCloseMenu = document.getElementById("close-mobile-menu");
- const mobileReadingTime = document.getElementById("mobile-reading-time");
- const mobileWordCount = document.getElementById("mobile-word-count");
- const mobileCharCount = document.getElementById("mobile-char-count");
- const mobileToggleSync = document.getElementById("mobile-toggle-sync");
- const mobileImportBtn = document.getElementById("mobile-import-button");
- const mobileImportGithubBtn = document.getElementById("mobile-import-github-button");
- const mobileExportMd = document.getElementById("mobile-export-md");
- const mobileExportHtml = document.getElementById("mobile-export-html");
- const mobileExportPdf = document.getElementById("mobile-export-pdf");
- const mobileCopyMarkdown = document.getElementById("mobile-copy-markdown");
- const mobileThemeToggle = document.getElementById("mobile-theme-toggle");
- const shareButton = document.getElementById("share-button");
- const mobileShareButton = document.getElementById("mobile-share-button");
- const githubImportModal = document.getElementById("github-import-modal");
- const githubImportTitle = document.getElementById("github-import-title");
- const githubImportUrlInput = document.getElementById("github-import-url");
- const githubImportFileSelect = document.getElementById("github-import-file-select");
- const githubImportError = document.getElementById("github-import-error");
- const githubImportCancelBtn = document.getElementById("github-import-cancel");
- const githubImportSubmitBtn = document.getElementById("github-import-submit");
-
- // Check dark mode preference first for proper initialization
- const prefersDarkMode =
- window.matchMedia &&
- window.matchMedia("(prefers-color-scheme: dark)").matches;
-
- document.documentElement.setAttribute(
- "data-theme",
- prefersDarkMode ? "dark" : "light"
- );
-
- themeToggle.innerHTML = prefersDarkMode
- ? '${highlightedCode}
-
-
- Document Type
- Support
-
-
- Markdown Viewer (Ours)
- Other Markdown Editors
-
-
-
-
- Technical Docs
- Full + Diagrams
- Limited/Basic
-
-
- Research Notes
- Full + Math
- Partial
-
-
- Developer Guides
- Full + Export Options
- Basic
-
-
-
-
-## š Text Formatting Examples
-
-### Text Formatting
-
-Text can be formatted in various ways for ~~strikethrough~~, **bold**, *italic*, or ***bold italic***.
-
-For highlighting important information, use highlighted text or add underlines where appropriate.
-
-### Superscript and Subscript
-
-Chemical formulas: H2 O, CO2
-Mathematical notation: x2 , eiĻ
-
-### Keyboard Keys
-
-Press Ctrl + B for bold text.
-
-### Abbreviations
-
-GUI
-API
-
-### Text Alignment
-
-
-Centered text for headings or important notices
-
-
-
-Right-aligned text (for dates, signatures, etc.)
-
-
-### **Lists**
-
-Create bullet points:
-* Item 1
-* Item 2
- * Nested item
- * Nested further
-
-### **Links and Images**
-
-Add a [link](https://github.com/ThisIs-Developer/Markdown-Viewer) to important resources.
-
-Embed an image:
-
-
-### **Blockquotes**
-
-Quote someone famous:
-> "The best way to predict the future is to invent it." - Alan Kay
-
----
-
-## š”ļø Security Note
-
-This is a fully client-side application. Your content never leaves your browser and stays secure on your device.`;
-
- markdownEditor.value = sampleMarkdown;
-
- // ========================================
- // DOCUMENT TABS & SESSION MANAGEMENT
- // ========================================
-
- const STORAGE_KEY = 'markdownViewerTabs';
- const ACTIVE_TAB_KEY = 'markdownViewerActiveTab';
- const UNTITLED_COUNTER_KEY = 'markdownViewerUntitledCounter';
- let tabs = [];
- let activeTabId = null;
- let draggedTabId = null;
- let saveTabStateTimeout = null;
- let untitledCounter = 0;
-
- function loadTabsFromStorage() {
- try {
- return JSON.parse(localStorage.getItem(STORAGE_KEY)) || [];
- } catch (e) {
- return [];
- }
- }
-
- function saveTabsToStorage(tabsArr) {
- try {
- localStorage.setItem(STORAGE_KEY, JSON.stringify(tabsArr));
- } catch (e) {
- console.warn('Failed to save tabs to localStorage:', e);
- }
- }
-
- function loadActiveTabId() {
- return localStorage.getItem(ACTIVE_TAB_KEY);
- }
-
- function saveActiveTabId(id) {
- localStorage.setItem(ACTIVE_TAB_KEY, id);
- }
-
- function loadUntitledCounter() {
- return parseInt(localStorage.getItem(UNTITLED_COUNTER_KEY) || '0', 10);
- }
-
- function saveUntitledCounter(val) {
- localStorage.setItem(UNTITLED_COUNTER_KEY, String(val));
- }
-
- function nextUntitledTitle() {
- untitledCounter += 1;
- saveUntitledCounter(untitledCounter);
- return 'Untitled ' + untitledCounter;
- }
-
- function createTab(content, title, viewMode) {
- if (content === undefined) content = '';
- if (title === undefined) title = null;
- if (viewMode === undefined) viewMode = 'split';
- return {
- id: 'tab_' + Date.now() + '_' + Math.random().toString(36).substring(2, 8),
- title: title || 'Untitled',
- content: content,
- scrollPos: 0,
- viewMode: viewMode,
- createdAt: Date.now()
- };
- }
-
- function renderTabBar(tabsArr, currentActiveTabId) {
- const tabList = document.getElementById('tab-list');
- if (!tabList) return;
- tabList.innerHTML = '';
- tabsArr.forEach(function(tab) {
- const item = document.createElement('div');
- item.className = 'tab-item' + (tab.id === currentActiveTabId ? ' active' : '');
- item.setAttribute('data-tab-id', tab.id);
- item.setAttribute('role', 'tab');
- item.setAttribute('aria-selected', tab.id === currentActiveTabId ? 'true' : 'false');
- item.setAttribute('draggable', 'true');
-
- const titleSpan = document.createElement('span');
- titleSpan.className = 'tab-title';
- titleSpan.textContent = tab.title || 'Untitled';
- titleSpan.title = tab.title || 'Untitled';
-
- // Three-dot menu button
- const menuBtn = document.createElement('button');
- menuBtn.className = 'tab-menu-btn';
- menuBtn.setAttribute('aria-label', 'File options');
- menuBtn.title = 'File options';
- menuBtn.innerHTML = '⋯';
-
- // Dropdown
- const dropdown = document.createElement('div');
- dropdown.className = 'tab-menu-dropdown';
- dropdown.innerHTML =
- '' +
- '' +
- '';
-
- menuBtn.appendChild(dropdown);
-
- menuBtn.addEventListener('click', function(e) {
- e.stopPropagation();
- // Close all other open dropdowns first
- document.querySelectorAll('.tab-menu-btn.open').forEach(function(btn) {
- if (btn !== menuBtn) btn.classList.remove('open');
- });
- menuBtn.classList.toggle('open');
- // Position the dropdown relative to the viewport so it escapes the
- // overflow scroll container on .tab-list
- if (menuBtn.classList.contains('open')) {
- var rect = menuBtn.getBoundingClientRect();
- dropdown.style.top = (rect.bottom + 4) + 'px';
- dropdown.style.right = (window.innerWidth - rect.right) + 'px';
- dropdown.style.left = 'auto';
- }
- });
-
- dropdown.querySelectorAll('.tab-menu-item').forEach(function(actionBtn) {
- actionBtn.addEventListener('click', function(e) {
- e.stopPropagation();
- menuBtn.classList.remove('open');
- const action = actionBtn.getAttribute('data-action');
- if (action === 'rename') renameTab(tab.id);
- else if (action === 'duplicate') duplicateTab(tab.id);
- else if (action === 'delete') deleteTab(tab.id);
- });
- });
-
- item.appendChild(titleSpan);
- item.appendChild(menuBtn);
-
- item.addEventListener('click', function() {
- switchTab(tab.id);
- });
-
- item.addEventListener('dragstart', function() {
- draggedTabId = tab.id;
- setTimeout(function() { item.classList.add('dragging'); }, 0);
- });
-
- item.addEventListener('dragend', function() {
- item.classList.remove('dragging');
- draggedTabId = null;
- });
-
- item.addEventListener('dragover', function(e) {
- e.preventDefault();
- item.classList.add('drag-over');
- });
-
- item.addEventListener('dragleave', function() {
- item.classList.remove('drag-over');
- });
-
- item.addEventListener('drop', function(e) {
- e.preventDefault();
- item.classList.remove('drag-over');
- if (!draggedTabId || draggedTabId === tab.id) return;
- const fromIdx = tabs.findIndex(function(t) { return t.id === draggedTabId; });
- const toIdx = tabs.findIndex(function(t) { return t.id === tab.id; });
- if (fromIdx === -1 || toIdx === -1) return;
- const moved = tabs.splice(fromIdx, 1)[0];
- tabs.splice(toIdx, 0, moved);
- saveTabsToStorage(tabs);
- renderTabBar(tabs, activeTabId);
- });
-
- tabList.appendChild(item);
- });
-
- // "+ Create" button at end of tab list
- const newBtn = document.createElement('button');
- newBtn.className = 'tab-new-btn';
- newBtn.title = 'New Tab (Ctrl+T)';
- newBtn.setAttribute('aria-label', 'Open new tab');
- newBtn.innerHTML = '
- Error rendering markdown: ${e.message}
-
- ${markdownEditor.value} `;
- }
- }
-
- function importMarkdownFile(file) {
- const reader = new FileReader();
- reader.onload = function(e) {
- newTab(e.target.result, file.name.replace(/\.md$/i, ''));
- dropzone.style.display = "none";
- };
- reader.readAsText(file);
- }
-
- function isMarkdownPath(path) {
- return /\.(md|markdown)$/i.test(path || "");
- }
- const MAX_GITHUB_FILES_SHOWN = 30;
-
- function getFileName(path) {
- return (path || "").split("/").pop() || "document.md";
- }
-
- function buildRawGitHubUrl(owner, repo, ref, filePath) {
- const encodedPath = filePath
- .split("/")
- .map((part) => encodeURIComponent(part))
- .join("/");
- return `https://raw.githubusercontent.com/${encodeURIComponent(owner)}/${encodeURIComponent(repo)}/${encodeURIComponent(ref)}/${encodedPath}`;
- }
-
- async function fetchGitHubJson(url) {
- const response = await fetch(url, {
- headers: {
- Accept: "application/vnd.github+json"
- }
- });
- if (!response.ok) {
- throw new Error(`GitHub API request failed (${response.status})`);
- }
- return response.json();
- }
-
- async function fetchTextContent(url) {
- const response = await fetch(url);
- if (!response.ok) {
- throw new Error(`Failed to fetch file (${response.status})`);
- }
- return response.text();
- }
-
- function parseGitHubImportUrl(input) {
- let parsedUrl;
- try {
- parsedUrl = new URL((input || "").trim());
- } catch (_) {
- return null;
- }
-
- const host = parsedUrl.hostname.replace(/^www\./, "");
- const segments = parsedUrl.pathname.split("/").filter(Boolean);
-
- if (host === "raw.githubusercontent.com") {
- if (segments.length < 5) return null;
- const [owner, repo, ref, ...rest] = segments;
- const filePath = rest.join("/");
- return { owner, repo, ref, type: "file", filePath };
- }
-
- if (host !== "github.com" || segments.length < 2) return null;
-
- const owner = segments[0];
- const repo = segments[1].replace(/\.git$/i, "");
- if (segments.length === 2) {
- return { owner, repo, type: "repo" };
- }
-
- const mode = segments[2];
- if (mode === "blob" && segments.length >= 5) {
- return {
- owner,
- repo,
- type: "file",
- ref: segments[3],
- filePath: segments.slice(4).join("/")
- };
- }
-
- if (mode === "tree" && segments.length >= 4) {
- return {
- owner,
- repo,
- type: "tree",
- ref: segments[3],
- basePath: segments.slice(4).join("/")
- };
- }
-
- return { owner, repo, type: "repo" };
- }
-
- async function getDefaultBranch(owner, repo) {
- const repoInfo = await fetchGitHubJson(`https://api.github.com/repos/${encodeURIComponent(owner)}/${encodeURIComponent(repo)}`);
- return repoInfo.default_branch;
- }
-
- async function listMarkdownFiles(owner, repo, ref, basePath) {
- const treeResponse = await fetchGitHubJson(`https://api.github.com/repos/${encodeURIComponent(owner)}/${encodeURIComponent(repo)}/git/trees/${encodeURIComponent(ref)}?recursive=1`);
- const normalizedBasePath = (basePath || "").replace(/^\/+|\/+$/g, "");
-
- return (treeResponse.tree || [])
- .filter((entry) => entry.type === "blob" && isMarkdownPath(entry.path))
- .filter((entry) => !normalizedBasePath || entry.path === normalizedBasePath || entry.path.startsWith(normalizedBasePath + "/"))
- .map((entry) => entry.path)
- .sort((a, b) => a.localeCompare(b));
- }
-
- function setGitHubImportLoading(isLoading) {
- if (!githubImportSubmitBtn) return;
- if (isLoading) {
- githubImportSubmitBtn.dataset.loadingText = githubImportSubmitBtn.textContent;
- githubImportSubmitBtn.textContent = "Importing...";
- } else if (githubImportSubmitBtn.dataset.loadingText) {
- githubImportSubmitBtn.textContent = githubImportSubmitBtn.dataset.loadingText;
- delete githubImportSubmitBtn.dataset.loadingText;
- }
- }
-
- function setGitHubImportMessage(message, options = {}) {
- if (!githubImportError) return;
- const { isError = true } = options;
- githubImportError.classList.toggle("is-info", !isError);
- if (!message) {
- githubImportError.textContent = "";
- githubImportError.style.display = "none";
- return;
- }
- githubImportError.textContent = message;
- githubImportError.style.display = "block";
- }
-
- function resetGitHubImportModal() {
- if (!githubImportUrlInput || !githubImportFileSelect || !githubImportSubmitBtn) return;
- if (githubImportTitle) {
- githubImportTitle.textContent = "Import Markdown from GitHub";
- }
- githubImportUrlInput.value = "";
- githubImportUrlInput.style.display = "block";
- githubImportUrlInput.disabled = false;
- githubImportFileSelect.innerHTML = "";
- githubImportFileSelect.style.display = "none";
- githubImportFileSelect.disabled = false;
- githubImportSubmitBtn.dataset.step = "url";
- delete githubImportSubmitBtn.dataset.owner;
- delete githubImportSubmitBtn.dataset.repo;
- delete githubImportSubmitBtn.dataset.ref;
- githubImportSubmitBtn.textContent = "Import";
- setGitHubImportMessage("");
- }
-
- function openGitHubImportModal() {
- if (!githubImportModal || !githubImportUrlInput || !githubImportSubmitBtn) return;
- resetGitHubImportModal();
- githubImportModal.style.display = "flex";
- githubImportUrlInput.focus();
- }
-
- function closeGitHubImportModal() {
- if (!githubImportModal) return;
- githubImportModal.style.display = "none";
- resetGitHubImportModal();
- }
-
- async function handleGitHubImportSubmit() {
- if (!githubImportSubmitBtn || !githubImportUrlInput || !githubImportFileSelect) return;
- const setGitHubImportDialogDisabled = (disabled) => {
- githubImportSubmitBtn.disabled = disabled;
- if (githubImportCancelBtn) {
- githubImportCancelBtn.disabled = disabled;
- }
- };
- const step = githubImportSubmitBtn.dataset.step || "url";
- if (step === "select") {
- const selectedPath = githubImportFileSelect.value;
- const owner = githubImportSubmitBtn.dataset.owner;
- const repo = githubImportSubmitBtn.dataset.repo;
- const ref = githubImportSubmitBtn.dataset.ref;
- if (!owner || !repo || !ref || !selectedPath) {
- setGitHubImportMessage("Please select a file to import.");
- return;
- }
- setGitHubImportLoading(true);
- setGitHubImportDialogDisabled(true);
- try {
- const markdown = await fetchTextContent(buildRawGitHubUrl(owner, repo, ref, selectedPath));
- newTab(markdown, getFileName(selectedPath).replace(/\.(md|markdown)$/i, ""));
- closeGitHubImportModal();
- } catch (error) {
- console.error("GitHub import failed:", error);
- setGitHubImportMessage("GitHub import failed: " + error.message);
- } finally {
- setGitHubImportDialogDisabled(false);
- setGitHubImportLoading(false);
- }
- return;
- }
-
- const urlInput = githubImportUrlInput.value.trim();
- if (!urlInput) {
- setGitHubImportMessage("Please enter a GitHub URL.");
- return;
- }
-
- const parsed = parseGitHubImportUrl(urlInput);
- if (!parsed || !parsed.owner || !parsed.repo) {
- setGitHubImportMessage("Please enter a valid GitHub URL.");
- return;
- }
-
- setGitHubImportMessage("");
- setGitHubImportLoading(true);
- setGitHubImportDialogDisabled(true);
- try {
- if (parsed.type === "file") {
- if (!isMarkdownPath(parsed.filePath)) {
- throw new Error("The provided URL does not point to a Markdown file.");
- }
- const markdown = await fetchTextContent(buildRawGitHubUrl(parsed.owner, parsed.repo, parsed.ref, parsed.filePath));
- newTab(markdown, getFileName(parsed.filePath).replace(/\.(md|markdown)$/i, ""));
- closeGitHubImportModal();
- return;
- }
-
- const ref = parsed.ref || await getDefaultBranch(parsed.owner, parsed.repo);
- const files = await listMarkdownFiles(parsed.owner, parsed.repo, ref, parsed.basePath || "");
-
- if (!files.length) {
- setGitHubImportMessage("No Markdown files were found at that GitHub location.");
- return;
- }
-
- const shownFiles = files.slice(0, MAX_GITHUB_FILES_SHOWN);
- if (files.length === 1) {
- const targetPath = files[0];
- const markdown = await fetchTextContent(buildRawGitHubUrl(parsed.owner, parsed.repo, ref, targetPath));
- newTab(markdown, getFileName(targetPath).replace(/\.(md|markdown)$/i, ""));
- closeGitHubImportModal();
- return;
- }
-
- githubImportUrlInput.style.display = "none";
- githubImportFileSelect.style.display = "block";
- githubImportFileSelect.innerHTML = "";
- shownFiles.forEach((filePath) => {
- const option = document.createElement("option");
- option.value = filePath;
- option.textContent = filePath;
- githubImportFileSelect.appendChild(option);
- });
- if (files.length > MAX_GITHUB_FILES_SHOWN) {
- setGitHubImportMessage(`Showing first ${MAX_GITHUB_FILES_SHOWN} of ${files.length} Markdown files.`, { isError: false });
- } else {
- setGitHubImportMessage("");
- }
- if (githubImportTitle) {
- githubImportTitle.textContent = "Select a Markdown file to import";
- }
- githubImportSubmitBtn.dataset.step = "select";
- githubImportSubmitBtn.dataset.owner = parsed.owner;
- githubImportSubmitBtn.dataset.repo = parsed.repo;
- githubImportSubmitBtn.dataset.ref = ref;
- githubImportSubmitBtn.textContent = "Import Selected";
- } catch (error) {
- console.error("GitHub import failed:", error);
- setGitHubImportMessage("GitHub import failed: " + error.message);
- } finally {
- setGitHubImportDialogDisabled(false);
- setGitHubImportLoading(false);
- }
- }
-
- function processEmojis(element) {
- const walker = document.createTreeWalker(
- element,
- NodeFilter.SHOW_TEXT,
- null,
- false
- );
-
- const textNodes = [];
- let node;
- while ((node = walker.nextNode())) {
- let parent = node.parentNode;
- let isInCode = false;
- while (parent && parent !== element) {
- if (parent.tagName === 'PRE' || parent.tagName === 'CODE') {
- isInCode = true;
- break;
- }
- parent = parent.parentNode;
- }
-
- if (!isInCode && node.nodeValue.includes(':')) {
- textNodes.push(node);
- }
- }
-
- textNodes.forEach(textNode => {
- const text = textNode.nodeValue;
- const emojiRegex = /:([\w+-]+):/g;
-
- let match;
- let lastIndex = 0;
- let result = '';
- let hasEmoji = false;
-
- while ((match = emojiRegex.exec(text)) !== null) {
- const shortcode = match[1];
- const emoji = joypixels.shortnameToUnicode(`:${shortcode}:`);
-
- if (emoji !== `:${shortcode}:`) { // If conversion was successful
- hasEmoji = true;
- result += text.substring(lastIndex, match.index) + emoji;
- lastIndex = emojiRegex.lastIndex;
- } else {
- result += text.substring(lastIndex, emojiRegex.lastIndex);
- lastIndex = emojiRegex.lastIndex;
- }
- }
-
- if (hasEmoji) {
- result += text.substring(lastIndex);
- const span = document.createElement('span');
- span.innerHTML = result;
- textNode.parentNode.replaceChild(span, textNode);
- }
- });
- }
-
- function debouncedRender() {
- clearTimeout(markdownRenderTimeout);
- markdownRenderTimeout = setTimeout(renderMarkdown, RENDER_DELAY);
- }
-
- function updateDocumentStats() {
- const text = markdownEditor.value;
-
- const charCount = text.length;
- charCountElement.textContent = charCount.toLocaleString();
-
- const wordCount = text.trim() === "" ? 0 : text.trim().split(/\s+/).length;
- wordCountElement.textContent = wordCount.toLocaleString();
-
- const readingTimeMinutes = Math.ceil(wordCount / 200);
- readingTimeElement.textContent = readingTimeMinutes;
- }
-
- function syncEditorToPreview() {
- if (!syncScrollingEnabled || isPreviewScrolling) return;
-
- isEditorScrolling = true;
- clearTimeout(scrollSyncTimeout);
-
- scrollSyncTimeout = setTimeout(() => {
- const editorScrollRatio =
- editorPane.scrollTop /
- (editorPane.scrollHeight - editorPane.clientHeight);
- const previewScrollPosition =
- (previewPane.scrollHeight - previewPane.clientHeight) *
- editorScrollRatio;
-
- if (!isNaN(previewScrollPosition) && isFinite(previewScrollPosition)) {
- previewPane.scrollTop = previewScrollPosition;
- }
-
- setTimeout(() => {
- isEditorScrolling = false;
- }, 50);
- }, SCROLL_SYNC_DELAY);
- }
-
- function syncPreviewToEditor() {
- if (!syncScrollingEnabled || isEditorScrolling) return;
-
- isPreviewScrolling = true;
- clearTimeout(scrollSyncTimeout);
-
- scrollSyncTimeout = setTimeout(() => {
- const previewScrollRatio =
- previewPane.scrollTop /
- (previewPane.scrollHeight - previewPane.clientHeight);
- const editorScrollPosition =
- (editorPane.scrollHeight - editorPane.clientHeight) *
- previewScrollRatio;
-
- if (!isNaN(editorScrollPosition) && isFinite(editorScrollPosition)) {
- editorPane.scrollTop = editorScrollPosition;
- }
-
- setTimeout(() => {
- isPreviewScrolling = false;
- }, 50);
- }, SCROLL_SYNC_DELAY);
- }
-
- function toggleSyncScrolling() {
- syncScrollingEnabled = !syncScrollingEnabled;
- if (syncScrollingEnabled) {
- toggleSyncButton.innerHTML = 'Markdown Export
-
- ${sanitizedHtml}
-
-
-`;
- const blob = new Blob([fullHtml], { type: "text/html;charset=utf-8" });
- saveAs(blob, "document.html");
- } catch (e) {
- console.error("HTML export failed:", e);
- alert("HTML export failed: " + e.message);
- }
- });
-
- // ============================================
- // Page-Break Detection Functions (Story 1.1)
- // ============================================
-
- // Page configuration constants for A4 PDF export
- const PAGE_CONFIG = {
- a4Width: 210, // mm
- a4Height: 297, // mm
- margin: 15, // mm each side
- contentWidth: 180, // 210 - 30 (margins)
- contentHeight: 267, // 297 - 30 (margins)
- windowWidth: 1000, // html2canvas config
- scale: 2 // html2canvas scale factor
- };
-
- /**
- * Task 1: Identifies all graphic elements that may need page-break handling
- * @param {HTMLElement} container - The container element to search within
- * @returns {Array} Array of {element, type} objects
- */
- function identifyGraphicElements(container) {
- const graphics = [];
-
- // Query for images
- container.querySelectorAll('img').forEach(el => {
- graphics.push({ element: el, type: 'img' });
- });
-
- // Query for SVGs (Mermaid diagrams)
- container.querySelectorAll('svg').forEach(el => {
- graphics.push({ element: el, type: 'svg' });
- });
-
- // Query for pre elements (code blocks)
- container.querySelectorAll('pre').forEach(el => {
- graphics.push({ element: el, type: 'pre' });
- });
-
- // Query for tables
- container.querySelectorAll('table').forEach(el => {
- graphics.push({ element: el, type: 'table' });
- });
-
- return graphics;
- }
-
- /**
- * Task 2: Calculates element positions relative to the container
- * @param {Array} elements - Array of {element, type} objects
- * @param {HTMLElement} container - The container element
- * @returns {Array} Array with position data added
- */
- function calculateElementPositions(elements, container) {
- const containerRect = container.getBoundingClientRect();
-
- return elements.map(item => {
- const rect = item.element.getBoundingClientRect();
- const top = rect.top - containerRect.top;
- const height = rect.height;
- const bottom = top + height;
-
- return {
- element: item.element,
- type: item.type,
- top: top,
- height: height,
- bottom: bottom
- };
- });
- }
-
- /**
- * Task 3: Calculates page boundary positions
- * @param {number} totalHeight - Total height of content in pixels
- * @param {number} elementWidth - Actual width of the rendered element in pixels
- * @param {Object} pageConfig - Page configuration object
- * @returns {Array} Array of y-coordinates where pages end
- */
- function calculatePageBoundaries(totalHeight, elementWidth, pageConfig) {
- // Calculate pixel height per page based on the element's actual width
- // This must match how PDF pagination will split the canvas
- // The aspect ratio of content area determines page height relative to width
- const aspectRatio = pageConfig.contentHeight / pageConfig.contentWidth;
- const pageHeightPx = elementWidth * aspectRatio;
-
- const boundaries = [];
- let y = pageHeightPx;
-
- while (y < totalHeight) {
- boundaries.push(y);
- y += pageHeightPx;
- }
-
- return { boundaries, pageHeightPx };
- }
-
- /**
- * Task 4: Detects which elements would be split across page boundaries
- * @param {Array} elements - Array of elements with position data
- * @param {Array} pageBoundaries - Array of page break y-coordinates
- * @returns {Array} Array of split elements with additional split info
- */
- function detectSplitElements(elements, pageBoundaries) {
- // Handle edge case: empty elements array
- if (!elements || elements.length === 0) {
- return [];
- }
-
- // Handle edge case: no page boundaries (single page)
- if (!pageBoundaries || pageBoundaries.length === 0) {
- return [];
- }
-
- const splitElements = [];
-
- for (const item of elements) {
- // Find which page the element starts on
- let startPage = 0;
- for (let i = 0; i < pageBoundaries.length; i++) {
- if (item.top >= pageBoundaries[i]) {
- startPage = i + 1;
- } else {
- break;
- }
- }
-
- // Find which page the element ends on
- let endPage = 0;
- for (let i = 0; i < pageBoundaries.length; i++) {
- if (item.bottom > pageBoundaries[i]) {
- endPage = i + 1;
- } else {
- break;
- }
- }
-
- // Element is split if it spans multiple pages
- if (endPage > startPage) {
- // Calculate overflow amount (how much crosses into next page)
- const boundaryY = pageBoundaries[startPage] || pageBoundaries[0];
- const overflowAmount = item.bottom - boundaryY;
-
- splitElements.push({
- element: item.element,
- type: item.type,
- top: item.top,
- height: item.height,
- splitPageIndex: startPage,
- overflowAmount: overflowAmount
- });
- }
- }
-
- return splitElements;
- }
-
- /**
- * Task 5: Main entry point for analyzing graphics for page breaks
- * @param {HTMLElement} tempElement - The rendered content container
- * @returns {Object} Analysis result with totalElements, splitElements, pageCount
- */
- function analyzeGraphicsForPageBreaks(tempElement) {
- try {
- // Step 1: Identify all graphic elements
- const graphics = identifyGraphicElements(tempElement);
- console.log('Step 1 - Graphics found:', graphics.length, graphics.map(g => g.type));
-
- // Step 2: Calculate positions for each element
- const elementsWithPositions = calculateElementPositions(graphics, tempElement);
- console.log('Step 2 - Element positions:', elementsWithPositions.map(e => ({
- type: e.type,
- top: Math.round(e.top),
- height: Math.round(e.height),
- bottom: Math.round(e.bottom)
- })));
-
- // Step 3: Calculate page boundaries using the element's ACTUAL width
- const totalHeight = tempElement.scrollHeight;
- const elementWidth = tempElement.offsetWidth;
- const { boundaries: pageBoundaries, pageHeightPx } = calculatePageBoundaries(
- totalHeight,
- elementWidth,
- PAGE_CONFIG
- );
-
- console.log('Step 3 - Page boundaries:', {
- elementWidth,
- totalHeight,
- pageHeightPx: Math.round(pageHeightPx),
- boundaries: pageBoundaries.map(b => Math.round(b))
- });
-
- // Step 4: Detect split elements
- const splitElements = detectSplitElements(elementsWithPositions, pageBoundaries);
- console.log('Step 4 - Split elements detected:', splitElements.length);
-
- // Calculate page count
- const pageCount = pageBoundaries.length + 1;
-
- return {
- totalElements: graphics.length,
- splitElements: splitElements,
- pageCount: pageCount,
- pageBoundaries: pageBoundaries,
- pageHeightPx: pageHeightPx
- };
- } catch (error) {
- console.error('Page-break analysis failed:', error);
- return {
- totalElements: 0,
- splitElements: [],
- pageCount: 1,
- pageBoundaries: [],
- pageHeightPx: 0
- };
- }
- }
-
- // ============================================
- // End Page-Break Detection Functions
- // ============================================
-
- // ============================================
- // Page-Break Insertion Functions (Story 1.2)
- // ============================================
-
- // Threshold for whitespace optimization (30% of page height)
- const PAGE_BREAK_THRESHOLD = 0.3;
-
- /**
- * Task 3: Categorizes split elements by whether they fit on a single page
- * @param {Array} splitElements - Array of split elements from detection
- * @param {number} pageHeightPx - Page height in pixels
- * @returns {Object} { fittingElements, oversizedElements }
- */
- function categorizeBySize(splitElements, pageHeightPx) {
- const fittingElements = [];
- const oversizedElements = [];
-
- for (const item of splitElements) {
- if (item.height <= pageHeightPx) {
- fittingElements.push(item);
- } else {
- oversizedElements.push(item);
- }
- }
-
- return { fittingElements, oversizedElements };
- }
-
- /**
- * Task 1: Inserts page breaks by adjusting margins for fitting elements
- * @param {Array} fittingElements - Elements that fit on a single page
- * @param {number} pageHeightPx - Page height in pixels
- */
- function insertPageBreaks(fittingElements, pageHeightPx) {
- for (const item of fittingElements) {
- // Calculate where the current page ends
- const currentPageBottom = (item.splitPageIndex + 1) * pageHeightPx;
-
- // Calculate remaining space on current page
- const remainingSpace = currentPageBottom - item.top;
- const remainingRatio = remainingSpace / pageHeightPx;
-
- console.log('Processing split element:', {
- type: item.type,
- top: Math.round(item.top),
- height: Math.round(item.height),
- splitPageIndex: item.splitPageIndex,
- currentPageBottom: Math.round(currentPageBottom),
- remainingSpace: Math.round(remainingSpace),
- remainingRatio: remainingRatio.toFixed(2)
- });
-
- // Task 4: Whitespace optimization
- // If remaining space is more than threshold and element almost fits, skip
- // (Will be handled by Story 1.3 scaling instead)
- if (remainingRatio > PAGE_BREAK_THRESHOLD) {
- const scaledHeight = item.height * 0.9; // 90% scale
- if (scaledHeight <= remainingSpace) {
- console.log(' -> Skipping (can fit with 90% scaling)');
- continue;
- }
- }
-
- // Calculate margin needed to push element to next page
- const marginNeeded = currentPageBottom - item.top + 5; // 5px buffer
-
- console.log(' -> Applying marginTop:', marginNeeded, 'px');
-
- // Determine which element to apply margin to
- // For SVG elements (Mermaid diagrams), apply to parent container for proper layout
- let targetElement = item.element;
- if (item.type === 'svg' && item.element.parentElement) {
- targetElement = item.element.parentElement;
- console.log(' -> Using parent element:', targetElement.tagName, targetElement.className);
- }
-
- // Apply margin to push element to next page
- const currentMargin = parseFloat(targetElement.style.marginTop) || 0;
- targetElement.style.marginTop = `${currentMargin + marginNeeded}px`;
-
- console.log(' -> Element after margin:', targetElement.tagName, 'marginTop =', targetElement.style.marginTop);
- }
- }
-
- /**
- * Task 2: Applies page breaks with cascading adjustment handling
- * @param {HTMLElement} tempElement - The rendered content container
- * @param {Object} pageConfig - Page configuration object (unused, kept for API compatibility)
- * @param {number} maxIterations - Maximum iterations to prevent infinite loops
- * @returns {Object} Final analysis result
- */
- function applyPageBreaksWithCascade(tempElement, pageConfig, maxIterations = 10) {
- let iteration = 0;
- let analysis;
- let previousSplitCount = -1;
-
- do {
- // Re-analyze after each adjustment
- analysis = analyzeGraphicsForPageBreaks(tempElement);
-
- // Use pageHeightPx from analysis (calculated from actual element width)
- const pageHeightPx = analysis.pageHeightPx;
-
- // Categorize elements by size
- const { fittingElements, oversizedElements } = categorizeBySize(
- analysis.splitElements,
- pageHeightPx
- );
-
- // Store oversized elements for Story 1.3
- analysis.oversizedElements = oversizedElements;
-
- // If no fitting elements need adjustment, we're done
- if (fittingElements.length === 0) {
- break;
- }
-
- // Check if we're making progress (prevent infinite loops)
- if (fittingElements.length === previousSplitCount) {
- console.warn('Page-break adjustment not making progress, stopping');
- break;
- }
- previousSplitCount = fittingElements.length;
-
- // Apply page breaks to fitting elements
- insertPageBreaks(fittingElements, pageHeightPx);
- iteration++;
-
- } while (iteration < maxIterations);
-
- if (iteration >= maxIterations) {
- console.warn('Page-break stabilization reached max iterations:', maxIterations);
- }
-
- console.log('Page-break cascade complete:', {
- iterations: iteration,
- finalSplitCount: analysis.splitElements.length,
- oversizedCount: analysis.oversizedElements ? analysis.oversizedElements.length : 0
- });
-
- return analysis;
- }
-
- // ============================================
- // End Page-Break Insertion Functions
- // ============================================
-
- // ============================================
- // Oversized Graphics Scaling Functions (Story 1.3)
- // ============================================
-
- // Minimum scale factor to maintain readability (50%)
- const MIN_SCALE_FACTOR = 0.5;
-
- /**
- * Task 1 & 2: Calculates scale factor with minimum enforcement
- * @param {number} elementHeight - Original height of element in pixels
- * @param {number} availableHeight - Available page height in pixels
- * @param {number} buffer - Small buffer to prevent edge overflow
- * @returns {Object} { scaleFactor, wasClampedToMin }
- */
- function calculateScaleFactor(elementHeight, availableHeight, buffer = 5) {
- const targetHeight = availableHeight - buffer;
- let scaleFactor = targetHeight / elementHeight;
- let wasClampedToMin = false;
-
- // Enforce minimum scale for readability
- if (scaleFactor < MIN_SCALE_FACTOR) {
- console.warn(
- `Warning: Large graphic requires ${(scaleFactor * 100).toFixed(0)}% scaling. ` +
- `Clamping to minimum ${MIN_SCALE_FACTOR * 100}%. Content may be cut off.`
- );
- scaleFactor = MIN_SCALE_FACTOR;
- wasClampedToMin = true;
- }
-
- return { scaleFactor, wasClampedToMin };
- }
-
- /**
- * Task 3: Applies CSS transform scaling to an element
- * @param {HTMLElement} element - The element to scale
- * @param {number} scaleFactor - Scale factor (0.5 = 50%)
- * @param {string} elementType - Type of element (svg, pre, img, table)
- */
- function applyGraphicScaling(element, scaleFactor, elementType) {
- // Get original dimensions before transform
- const originalHeight = element.offsetHeight;
-
- // Task 4: Handle SVG elements (Mermaid diagrams)
- if (elementType === 'svg') {
- // Remove max-width constraint that may interfere
- element.style.maxWidth = 'none';
- }
-
- // Apply CSS transform
- element.style.transform = `scale(${scaleFactor})`;
- element.style.transformOrigin = 'top left';
-
- // Calculate margin adjustment to collapse visual space
- const scaledHeight = originalHeight * scaleFactor;
- const marginAdjustment = originalHeight - scaledHeight;
-
- // Apply negative margin to pull subsequent content up
- element.style.marginBottom = `-${marginAdjustment}px`;
- }
-
- /**
- * Task 6: Handles all oversized elements by applying appropriate scaling
- * @param {Array} oversizedElements - Array of oversized element data
- * @param {number} pageHeightPx - Page height in pixels
- */
- function handleOversizedElements(oversizedElements, pageHeightPx) {
- if (!oversizedElements || oversizedElements.length === 0) {
- return;
- }
-
- let scaledCount = 0;
- let clampedCount = 0;
-
- for (const item of oversizedElements) {
- // Calculate required scale factor
- const { scaleFactor, wasClampedToMin } = calculateScaleFactor(
- item.height,
- pageHeightPx
- );
-
- // Apply scaling to the element
- applyGraphicScaling(item.element, scaleFactor, item.type);
-
- scaledCount++;
- if (wasClampedToMin) {
- clampedCount++;
- }
- }
-
- console.log('Oversized graphics scaling complete:', {
- totalScaled: scaledCount,
- clampedToMinimum: clampedCount
- });
- }
-
- // ============================================
- // End Oversized Graphics Scaling Functions
- // ============================================
-
- exportPdf.addEventListener("click", async function () {
- try {
- const originalText = exportPdf.innerHTML;
- exportPdf.innerHTML = 'Markdown Viewer
-
-
-
-
-
-
-
-
-
-
Are you sure you want to delete all files?
-
- Cancel
- Delete All
-
-
-
-
-
-
-
-
Rename file
-
-
- Cancel
- Rename
-
-
-
-
-
-
-
-
Import Markdown from GitHub
-
-
-
- 0 selected
- Select All
-
-
-
-
- Cancel
- Import
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
${highlightedCode}
-
-
- Document Type
- Support
-
-
- Markdown Viewer (Ours)
- Other Markdown Editors
-
-
-
-
- Technical Docs
- Full + Diagrams
- Limited/Basic
-
-
- Research Notes
- Full + Math
- Partial
-
-
- Developer Guides
- Full + Export Options
- Basic
-
-
-
-
-## š Text Formatting Examples
-
-### Text Formatting
-
-Text can be formatted in various ways for ~~strikethrough~~, **bold**, *italic*, or ***bold italic***.
-
-For highlighting important information, use highlighted text or add underlines where appropriate.
-
-### Superscript and Subscript
-
-Chemical formulas: H2 O, CO2
-Mathematical notation: x2 , eiĻ
-
-### Keyboard Keys
-
-Press Ctrl + B for bold text.
-
-### Abbreviations
-
-GUI
-API
-
-### Text Alignment
-
-
-Centered text for headings or important notices
-
-
-
-Right-aligned text (for dates, signatures, etc.)
-
-
-### **Lists**
-
-Create bullet points:
-* Item 1
-* Item 2
- * Nested item
- * Nested further
-
-### **Links and Images**
-
-Add a [link](https://github.com/ThisIs-Developer/Markdown-Viewer) to important resources.
-
-Embed an image:
-
-
-### **Blockquotes**
-
-Quote someone famous:
-> "The best way to predict the future is to invent it." - Alan Kay
-
----
-
-## š”ļø Security Note
-
-This is a fully client-side application. Your content never leaves your browser and stays secure on your device.`;
-
- markdownEditor.value = sampleMarkdown;
-
- // ========================================
- // DOCUMENT TABS & SESSION MANAGEMENT
- // ========================================
-
- const STORAGE_KEY = 'markdownViewerTabs';
- const ACTIVE_TAB_KEY = 'markdownViewerActiveTab';
- const UNTITLED_COUNTER_KEY = 'markdownViewerUntitledCounter';
- let tabs = [];
- let activeTabId = null;
- let draggedTabId = null;
- let saveTabStateTimeout = null;
- let untitledCounter = 0;
-
- function loadTabsFromStorage() {
- try {
- return JSON.parse(localStorage.getItem(STORAGE_KEY)) || [];
- } catch (e) {
- return [];
- }
- }
-
- function saveTabsToStorage(tabsArr) {
- try {
- localStorage.setItem(STORAGE_KEY, JSON.stringify(tabsArr));
- } catch (e) {
- console.warn('Failed to save tabs to localStorage:', e);
- }
- }
-
- function loadActiveTabId() {
- return localStorage.getItem(ACTIVE_TAB_KEY);
- }
-
- function saveActiveTabId(id) {
- localStorage.setItem(ACTIVE_TAB_KEY, id);
- }
-
- function loadUntitledCounter() {
- return parseInt(localStorage.getItem(UNTITLED_COUNTER_KEY) || '0', 10);
- }
-
- function saveUntitledCounter(val) {
- localStorage.setItem(UNTITLED_COUNTER_KEY, String(val));
- }
-
- function nextUntitledTitle() {
- untitledCounter += 1;
- saveUntitledCounter(untitledCounter);
- return 'Untitled ' + untitledCounter;
- }
-
- function createTab(content, title, viewMode) {
- if (content === undefined) content = '';
- if (title === undefined) title = null;
- if (viewMode === undefined) viewMode = 'split';
- return {
- id: 'tab_' + Date.now() + '_' + Math.random().toString(36).substring(2, 8),
- title: title || 'Untitled',
- content: content,
- scrollPos: 0,
- viewMode: viewMode,
- createdAt: Date.now()
- };
- }
-
- function renderTabBar(tabsArr, currentActiveTabId) {
- const tabList = document.getElementById('tab-list');
- if (!tabList) return;
- tabList.innerHTML = '';
- tabsArr.forEach(function(tab) {
- const item = document.createElement('div');
- item.className = 'tab-item' + (tab.id === currentActiveTabId ? ' active' : '');
- item.setAttribute('data-tab-id', tab.id);
- item.setAttribute('role', 'tab');
- item.setAttribute('aria-selected', tab.id === currentActiveTabId ? 'true' : 'false');
- item.setAttribute('draggable', 'true');
-
- const titleSpan = document.createElement('span');
- titleSpan.className = 'tab-title';
- titleSpan.textContent = tab.title || 'Untitled';
- titleSpan.title = tab.title || 'Untitled';
-
- // Three-dot menu button
- const menuBtn = document.createElement('button');
- menuBtn.className = 'tab-menu-btn';
- menuBtn.setAttribute('aria-label', 'File options');
- menuBtn.title = 'File options';
- menuBtn.innerHTML = '⋯';
-
- // Dropdown
- const dropdown = document.createElement('div');
- dropdown.className = 'tab-menu-dropdown';
- dropdown.innerHTML =
- '' +
- '' +
- '';
-
- menuBtn.appendChild(dropdown);
-
- menuBtn.addEventListener('click', function(e) {
- e.stopPropagation();
- // Close all other open dropdowns first
- document.querySelectorAll('.tab-menu-btn.open').forEach(function(btn) {
- if (btn !== menuBtn) btn.classList.remove('open');
- });
- menuBtn.classList.toggle('open');
- // Position the dropdown relative to the viewport so it escapes the
- // overflow scroll container on .tab-list
- if (menuBtn.classList.contains('open')) {
- var rect = menuBtn.getBoundingClientRect();
- dropdown.style.top = (rect.bottom + 4) + 'px';
- dropdown.style.right = (window.innerWidth - rect.right) + 'px';
- dropdown.style.left = 'auto';
- }
- });
-
- dropdown.querySelectorAll('.tab-menu-item').forEach(function(actionBtn) {
- actionBtn.addEventListener('click', function(e) {
- e.stopPropagation();
- menuBtn.classList.remove('open');
- const action = actionBtn.getAttribute('data-action');
- if (action === 'rename') renameTab(tab.id);
- else if (action === 'duplicate') duplicateTab(tab.id);
- else if (action === 'delete') deleteTab(tab.id);
- });
- });
-
- item.appendChild(titleSpan);
- item.appendChild(menuBtn);
-
- item.addEventListener('click', function() {
- switchTab(tab.id);
- });
-
- item.addEventListener('dragstart', function() {
- draggedTabId = tab.id;
- setTimeout(function() { item.classList.add('dragging'); }, 0);
- });
-
- item.addEventListener('dragend', function() {
- item.classList.remove('dragging');
- draggedTabId = null;
- });
-
- item.addEventListener('dragover', function(e) {
- e.preventDefault();
- item.classList.add('drag-over');
- });
-
- item.addEventListener('dragleave', function() {
- item.classList.remove('drag-over');
- });
-
- item.addEventListener('drop', function(e) {
- e.preventDefault();
- item.classList.remove('drag-over');
- if (!draggedTabId || draggedTabId === tab.id) return;
- const fromIdx = tabs.findIndex(function(t) { return t.id === draggedTabId; });
- const toIdx = tabs.findIndex(function(t) { return t.id === tab.id; });
- if (fromIdx === -1 || toIdx === -1) return;
- const moved = tabs.splice(fromIdx, 1)[0];
- tabs.splice(toIdx, 0, moved);
- saveTabsToStorage(tabs);
- renderTabBar(tabs, activeTabId);
- });
-
- tabList.appendChild(item);
- });
-
- // "+ Create" button at end of tab list
- const newBtn = document.createElement('button');
- newBtn.className = 'tab-new-btn';
- newBtn.title = 'New Tab (Ctrl+T)';
- newBtn.setAttribute('aria-label', 'Open new tab');
- newBtn.innerHTML = '
- Error rendering markdown: ${e.message}
-
- ${markdownEditor.value} `;
- }
- }
-
- function importMarkdownFile(file) {
- const reader = new FileReader();
- reader.onload = function(e) {
- newTab(e.target.result, file.name.replace(/\.md$/i, ''));
- dropzone.style.display = "none";
- };
- reader.readAsText(file);
- }
-
- function isMarkdownPath(path) {
- return /\.(md|markdown)$/i.test(path || "");
- }
- const MAX_GITHUB_FILES_SHOWN = 30;
- 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 < 5) return null;
- const [owner, repo, ref, ...rest] = segments;
- const filePath = rest.join("/");
- return { owner, repo, ref, type: "file", filePath };
- }
-
- if (host !== "github.com" || segments.length < 2) return null;
-
- const owner = segments[0];
- const repo = segments[1].replace(/\.git$/i, "");
- if (segments.length === 2) {
- return { owner, repo, type: "repo" };
- }
-
- const mode = segments[2];
- if (mode === "blob" && segments.length >= 5) {
- return {
- owner,
- repo,
- type: "file",
- ref: segments[3],
- filePath: segments.slice(4).join("/")
- };
- }
-
- if (mode === "tree" && segments.length >= 4) {
- return {
- owner,
- repo,
- type: "tree",
- ref: segments[3],
- basePath: segments.slice(4).join("/")
- };
- }
-
- return { owner, repo, type: "repo" };
- }
-
- async function getDefaultBranch(owner, repo) {
- const repoInfo = await fetchGitHubJson(`https://api.github.com/repos/${encodeURIComponent(owner)}/${encodeURIComponent(repo)}`);
- return repoInfo.default_branch;
- }
-
- async function listMarkdownFiles(owner, repo, ref, basePath) {
- const treeResponse = await fetchGitHubJson(`https://api.github.com/repos/${encodeURIComponent(owner)}/${encodeURIComponent(repo)}/git/trees/${encodeURIComponent(ref)}?recursive=1`);
- const normalizedBasePath = (basePath || "").replace(/^\/+|\/+$/g, "");
-
- return (treeResponse.tree || [])
- .filter((entry) => entry.type === "blob" && isMarkdownPath(entry.path))
- .filter((entry) => !normalizedBasePath || entry.path === normalizedBasePath || entry.path.startsWith(normalizedBasePath + "/"))
- .map((entry) => entry.path)
- .sort((a, b) => a.localeCompare(b));
- }
-
- function 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();
- githubImportModal.style.display = "flex";
- githubImportUrlInput.focus();
- }
-
- function closeGitHubImportModal() {
- if (!githubImportModal) return;
- githubImportModal.style.display = "none";
- resetGitHubImportModal();
- }
-
- async function handleGitHubImportSubmit() {
- if (!githubImportSubmitBtn || !githubImportUrlInput || !githubImportFileSelect) return;
- const setGitHubImportDialogDisabled = (disabled) => {
- githubImportSubmitBtn.disabled = disabled;
- if (githubImportCancelBtn) {
- githubImportCancelBtn.disabled = disabled;
- }
- 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);
- try {
- for (const selectedPath of selectedPaths) {
- const markdown = await fetchTextContent(buildRawGitHubUrl(owner, repo, ref, selectedPath));
- newTab(markdown, getFileName(selectedPath).replace(/\.(md|markdown)$/i, ""));
- }
- closeGitHubImportModal();
- } catch (error) {
- console.error("GitHub import failed:", error);
- setGitHubImportMessage("GitHub import failed: " + error.message);
- } finally {
- setGitHubImportDialogDisabled(false);
- setGitHubImportLoading(false);
- }
- return;
- }
-
- const urlInput = githubImportUrlInput.value.trim();
- if (!urlInput) {
- setGitHubImportMessage("Please enter a GitHub URL.");
- return;
- }
-
- const parsed = parseGitHubImportUrl(urlInput);
- if (!parsed || !parsed.owner || !parsed.repo) {
- setGitHubImportMessage("Please enter a valid GitHub URL.");
- return;
- }
-
- setGitHubImportMessage("");
- setGitHubImportLoading(true);
- setGitHubImportDialogDisabled(true);
- try {
- if (parsed.type === "file") {
- if (!isMarkdownPath(parsed.filePath)) {
- throw new Error("The provided URL does not point to a Markdown file.");
- }
- const markdown = await fetchTextContent(buildRawGitHubUrl(parsed.owner, parsed.repo, parsed.ref, parsed.filePath));
- newTab(markdown, getFileName(parsed.filePath).replace(/\.(md|markdown)$/i, ""));
- closeGitHubImportModal();
- return;
- }
-
- const ref = parsed.ref || await getDefaultBranch(parsed.owner, parsed.repo);
- const files = await listMarkdownFiles(parsed.owner, parsed.repo, ref, parsed.basePath || "");
-
- if (!files.length) {
- setGitHubImportMessage("No Markdown files were found at that GitHub location.");
- return;
- }
-
- const shownFiles = files.slice(0, MAX_GITHUB_FILES_SHOWN);
- if (files.length === 1) {
- const targetPath = files[0];
- const markdown = await fetchTextContent(buildRawGitHubUrl(parsed.owner, parsed.repo, ref, targetPath));
- newTab(markdown, getFileName(targetPath).replace(/\.(md|markdown)$/i, ""));
- closeGitHubImportModal();
- return;
- }
-
- 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);
- 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);
- } finally {
- setGitHubImportDialogDisabled(false);
- setGitHubImportLoading(false);
- }
- }
-
- function processEmojis(element) {
- const walker = document.createTreeWalker(
- element,
- NodeFilter.SHOW_TEXT,
- null,
- false
- );
-
- const textNodes = [];
- let node;
- while ((node = walker.nextNode())) {
- let parent = node.parentNode;
- let isInCode = false;
- while (parent && parent !== element) {
- if (parent.tagName === 'PRE' || parent.tagName === 'CODE') {
- isInCode = true;
- break;
- }
- parent = parent.parentNode;
- }
-
- if (!isInCode && node.nodeValue.includes(':')) {
- textNodes.push(node);
- }
- }
-
- textNodes.forEach(textNode => {
- const text = textNode.nodeValue;
- const emojiRegex = /:([\w+-]+):/g;
-
- let match;
- let lastIndex = 0;
- let result = '';
- let hasEmoji = false;
-
- while ((match = emojiRegex.exec(text)) !== null) {
- const shortcode = match[1];
- const emoji = joypixels.shortnameToUnicode(`:${shortcode}:`);
-
- if (emoji !== `:${shortcode}:`) { // If conversion was successful
- hasEmoji = true;
- result += text.substring(lastIndex, match.index) + emoji;
- lastIndex = emojiRegex.lastIndex;
- } else {
- result += text.substring(lastIndex, emojiRegex.lastIndex);
- lastIndex = emojiRegex.lastIndex;
- }
- }
-
- if (hasEmoji) {
- result += text.substring(lastIndex);
- const span = document.createElement('span');
- span.innerHTML = result;
- textNode.parentNode.replaceChild(span, textNode);
- }
- });
- }
-
- function debouncedRender() {
- clearTimeout(markdownRenderTimeout);
- markdownRenderTimeout = setTimeout(renderMarkdown, RENDER_DELAY);
- }
-
- function updateDocumentStats() {
- const text = markdownEditor.value;
-
- const charCount = text.length;
- charCountElement.textContent = charCount.toLocaleString();
-
- const wordCount = text.trim() === "" ? 0 : text.trim().split(/\s+/).length;
- wordCountElement.textContent = wordCount.toLocaleString();
-
- const readingTimeMinutes = Math.ceil(wordCount / 200);
- readingTimeElement.textContent = readingTimeMinutes;
- }
-
- function syncEditorToPreview() {
- if (!syncScrollingEnabled || isPreviewScrolling) return;
-
- isEditorScrolling = true;
- clearTimeout(scrollSyncTimeout);
-
- scrollSyncTimeout = setTimeout(() => {
- const editorScrollRatio =
- editorPane.scrollTop /
- (editorPane.scrollHeight - editorPane.clientHeight);
- const previewScrollPosition =
- (previewPane.scrollHeight - previewPane.clientHeight) *
- editorScrollRatio;
-
- if (!isNaN(previewScrollPosition) && isFinite(previewScrollPosition)) {
- previewPane.scrollTop = previewScrollPosition;
- }
-
- setTimeout(() => {
- isEditorScrolling = false;
- }, 50);
- }, SCROLL_SYNC_DELAY);
- }
-
- function syncPreviewToEditor() {
- if (!syncScrollingEnabled || isEditorScrolling) return;
-
- isPreviewScrolling = true;
- clearTimeout(scrollSyncTimeout);
-
- scrollSyncTimeout = setTimeout(() => {
- const previewScrollRatio =
- previewPane.scrollTop /
- (previewPane.scrollHeight - previewPane.clientHeight);
- const editorScrollPosition =
- (editorPane.scrollHeight - editorPane.clientHeight) *
- previewScrollRatio;
-
- if (!isNaN(editorScrollPosition) && isFinite(editorScrollPosition)) {
- editorPane.scrollTop = editorScrollPosition;
- }
-
- setTimeout(() => {
- isPreviewScrolling = false;
- }, 50);
- }, SCROLL_SYNC_DELAY);
- }
-
- function toggleSyncScrolling() {
- syncScrollingEnabled = !syncScrollingEnabled;
- if (syncScrollingEnabled) {
- toggleSyncButton.innerHTML = 'Markdown Export
-
- ${sanitizedHtml}
-
-
-`;
- const blob = new Blob([fullHtml], { type: "text/html;charset=utf-8" });
- saveAs(blob, "document.html");
- } catch (e) {
- console.error("HTML export failed:", e);
- alert("HTML export failed: " + e.message);
- }
- });
-
- // ============================================
- // Page-Break Detection Functions (Story 1.1)
- // ============================================
-
- // Page configuration constants for A4 PDF export
- const PAGE_CONFIG = {
- a4Width: 210, // mm
- a4Height: 297, // mm
- margin: 15, // mm each side
- contentWidth: 180, // 210 - 30 (margins)
- contentHeight: 267, // 297 - 30 (margins)
- windowWidth: 1000, // html2canvas config
- scale: 2 // html2canvas scale factor
- };
-
- /**
- * Task 1: Identifies all graphic elements that may need page-break handling
- * @param {HTMLElement} container - The container element to search within
- * @returns {Array} Array of {element, type} objects
- */
- function identifyGraphicElements(container) {
- const graphics = [];
-
- // Query for images
- container.querySelectorAll('img').forEach(el => {
- graphics.push({ element: el, type: 'img' });
- });
-
- // Query for SVGs (Mermaid diagrams)
- container.querySelectorAll('svg').forEach(el => {
- graphics.push({ element: el, type: 'svg' });
- });
-
- // Query for pre elements (code blocks)
- container.querySelectorAll('pre').forEach(el => {
- graphics.push({ element: el, type: 'pre' });
- });
-
- // Query for tables
- container.querySelectorAll('table').forEach(el => {
- graphics.push({ element: el, type: 'table' });
- });
-
- return graphics;
- }
-
- /**
- * Task 2: Calculates element positions relative to the container
- * @param {Array} elements - Array of {element, type} objects
- * @param {HTMLElement} container - The container element
- * @returns {Array} Array with position data added
- */
- function calculateElementPositions(elements, container) {
- const containerRect = container.getBoundingClientRect();
-
- return elements.map(item => {
- const rect = item.element.getBoundingClientRect();
- const top = rect.top - containerRect.top;
- const height = rect.height;
- const bottom = top + height;
-
- return {
- element: item.element,
- type: item.type,
- top: top,
- height: height,
- bottom: bottom
- };
- });
- }
-
- /**
- * Task 3: Calculates page boundary positions
- * @param {number} totalHeight - Total height of content in pixels
- * @param {number} elementWidth - Actual width of the rendered element in pixels
- * @param {Object} pageConfig - Page configuration object
- * @returns {Array} Array of y-coordinates where pages end
- */
- function calculatePageBoundaries(totalHeight, elementWidth, pageConfig) {
- // Calculate pixel height per page based on the element's actual width
- // This must match how PDF pagination will split the canvas
- // The aspect ratio of content area determines page height relative to width
- const aspectRatio = pageConfig.contentHeight / pageConfig.contentWidth;
- const pageHeightPx = elementWidth * aspectRatio;
-
- const boundaries = [];
- let y = pageHeightPx;
-
- while (y < totalHeight) {
- boundaries.push(y);
- y += pageHeightPx;
- }
-
- return { boundaries, pageHeightPx };
- }
-
- /**
- * Task 4: Detects which elements would be split across page boundaries
- * @param {Array} elements - Array of elements with position data
- * @param {Array} pageBoundaries - Array of page break y-coordinates
- * @returns {Array} Array of split elements with additional split info
- */
- function detectSplitElements(elements, pageBoundaries) {
- // Handle edge case: empty elements array
- if (!elements || elements.length === 0) {
- return [];
- }
-
- // Handle edge case: no page boundaries (single page)
- if (!pageBoundaries || pageBoundaries.length === 0) {
- return [];
- }
-
- const splitElements = [];
-
- for (const item of elements) {
- // Find which page the element starts on
- let startPage = 0;
- for (let i = 0; i < pageBoundaries.length; i++) {
- if (item.top >= pageBoundaries[i]) {
- startPage = i + 1;
- } else {
- break;
- }
- }
-
- // Find which page the element ends on
- let endPage = 0;
- for (let i = 0; i < pageBoundaries.length; i++) {
- if (item.bottom > pageBoundaries[i]) {
- endPage = i + 1;
- } else {
- break;
- }
- }
-
- // Element is split if it spans multiple pages
- if (endPage > startPage) {
- // Calculate overflow amount (how much crosses into next page)
- const boundaryY = pageBoundaries[startPage] || pageBoundaries[0];
- const overflowAmount = item.bottom - boundaryY;
-
- splitElements.push({
- element: item.element,
- type: item.type,
- top: item.top,
- height: item.height,
- splitPageIndex: startPage,
- overflowAmount: overflowAmount
- });
- }
- }
-
- return splitElements;
- }
-
- /**
- * Task 5: Main entry point for analyzing graphics for page breaks
- * @param {HTMLElement} tempElement - The rendered content container
- * @returns {Object} Analysis result with totalElements, splitElements, pageCount
- */
- function analyzeGraphicsForPageBreaks(tempElement) {
- try {
- // Step 1: Identify all graphic elements
- const graphics = identifyGraphicElements(tempElement);
- console.log('Step 1 - Graphics found:', graphics.length, graphics.map(g => g.type));
-
- // Step 2: Calculate positions for each element
- const elementsWithPositions = calculateElementPositions(graphics, tempElement);
- console.log('Step 2 - Element positions:', elementsWithPositions.map(e => ({
- type: e.type,
- top: Math.round(e.top),
- height: Math.round(e.height),
- bottom: Math.round(e.bottom)
- })));
-
- // Step 3: Calculate page boundaries using the element's ACTUAL width
- const totalHeight = tempElement.scrollHeight;
- const elementWidth = tempElement.offsetWidth;
- const { boundaries: pageBoundaries, pageHeightPx } = calculatePageBoundaries(
- totalHeight,
- elementWidth,
- PAGE_CONFIG
- );
-
- console.log('Step 3 - Page boundaries:', {
- elementWidth,
- totalHeight,
- pageHeightPx: Math.round(pageHeightPx),
- boundaries: pageBoundaries.map(b => Math.round(b))
- });
-
- // Step 4: Detect split elements
- const splitElements = detectSplitElements(elementsWithPositions, pageBoundaries);
- console.log('Step 4 - Split elements detected:', splitElements.length);
-
- // Calculate page count
- const pageCount = pageBoundaries.length + 1;
-
- return {
- totalElements: graphics.length,
- splitElements: splitElements,
- pageCount: pageCount,
- pageBoundaries: pageBoundaries,
- pageHeightPx: pageHeightPx
- };
- } catch (error) {
- console.error('Page-break analysis failed:', error);
- return {
- totalElements: 0,
- splitElements: [],
- pageCount: 1,
- pageBoundaries: [],
- pageHeightPx: 0
- };
- }
- }
-
- // ============================================
- // End Page-Break Detection Functions
- // ============================================
-
- // ============================================
- // Page-Break Insertion Functions (Story 1.2)
- // ============================================
-
- // Threshold for whitespace optimization (30% of page height)
- const PAGE_BREAK_THRESHOLD = 0.3;
-
- /**
- * Task 3: Categorizes split elements by whether they fit on a single page
- * @param {Array} splitElements - Array of split elements from detection
- * @param {number} pageHeightPx - Page height in pixels
- * @returns {Object} { fittingElements, oversizedElements }
- */
- function categorizeBySize(splitElements, pageHeightPx) {
- const fittingElements = [];
- const oversizedElements = [];
-
- for (const item of splitElements) {
- if (item.height <= pageHeightPx) {
- fittingElements.push(item);
- } else {
- oversizedElements.push(item);
- }
- }
-
- return { fittingElements, oversizedElements };
- }
-
- /**
- * Task 1: Inserts page breaks by adjusting margins for fitting elements
- * @param {Array} fittingElements - Elements that fit on a single page
- * @param {number} pageHeightPx - Page height in pixels
- */
- function insertPageBreaks(fittingElements, pageHeightPx) {
- for (const item of fittingElements) {
- // Calculate where the current page ends
- const currentPageBottom = (item.splitPageIndex + 1) * pageHeightPx;
-
- // Calculate remaining space on current page
- const remainingSpace = currentPageBottom - item.top;
- const remainingRatio = remainingSpace / pageHeightPx;
-
- console.log('Processing split element:', {
- type: item.type,
- top: Math.round(item.top),
- height: Math.round(item.height),
- splitPageIndex: item.splitPageIndex,
- currentPageBottom: Math.round(currentPageBottom),
- remainingSpace: Math.round(remainingSpace),
- remainingRatio: remainingRatio.toFixed(2)
- });
-
- // Task 4: Whitespace optimization
- // If remaining space is more than threshold and element almost fits, skip
- // (Will be handled by Story 1.3 scaling instead)
- if (remainingRatio > PAGE_BREAK_THRESHOLD) {
- const scaledHeight = item.height * 0.9; // 90% scale
- if (scaledHeight <= remainingSpace) {
- console.log(' -> Skipping (can fit with 90% scaling)');
- continue;
- }
- }
-
- // Calculate margin needed to push element to next page
- const marginNeeded = currentPageBottom - item.top + 5; // 5px buffer
-
- console.log(' -> Applying marginTop:', marginNeeded, 'px');
-
- // Determine which element to apply margin to
- // For SVG elements (Mermaid diagrams), apply to parent container for proper layout
- let targetElement = item.element;
- if (item.type === 'svg' && item.element.parentElement) {
- targetElement = item.element.parentElement;
- console.log(' -> Using parent element:', targetElement.tagName, targetElement.className);
- }
-
- // Apply margin to push element to next page
- const currentMargin = parseFloat(targetElement.style.marginTop) || 0;
- targetElement.style.marginTop = `${currentMargin + marginNeeded}px`;
-
- console.log(' -> Element after margin:', targetElement.tagName, 'marginTop =', targetElement.style.marginTop);
- }
- }
-
- /**
- * Task 2: Applies page breaks with cascading adjustment handling
- * @param {HTMLElement} tempElement - The rendered content container
- * @param {Object} pageConfig - Page configuration object (unused, kept for API compatibility)
- * @param {number} maxIterations - Maximum iterations to prevent infinite loops
- * @returns {Object} Final analysis result
- */
- function applyPageBreaksWithCascade(tempElement, pageConfig, maxIterations = 10) {
- let iteration = 0;
- let analysis;
- let previousSplitCount = -1;
-
- do {
- // Re-analyze after each adjustment
- analysis = analyzeGraphicsForPageBreaks(tempElement);
-
- // Use pageHeightPx from analysis (calculated from actual element width)
- const pageHeightPx = analysis.pageHeightPx;
-
- // Categorize elements by size
- const { fittingElements, oversizedElements } = categorizeBySize(
- analysis.splitElements,
- pageHeightPx
- );
-
- // Store oversized elements for Story 1.3
- analysis.oversizedElements = oversizedElements;
-
- // If no fitting elements need adjustment, we're done
- if (fittingElements.length === 0) {
- break;
- }
-
- // Check if we're making progress (prevent infinite loops)
- if (fittingElements.length === previousSplitCount) {
- console.warn('Page-break adjustment not making progress, stopping');
- break;
- }
- previousSplitCount = fittingElements.length;
-
- // Apply page breaks to fitting elements
- insertPageBreaks(fittingElements, pageHeightPx);
- iteration++;
-
- } while (iteration < maxIterations);
-
- if (iteration >= maxIterations) {
- console.warn('Page-break stabilization reached max iterations:', maxIterations);
- }
-
- console.log('Page-break cascade complete:', {
- iterations: iteration,
- finalSplitCount: analysis.splitElements.length,
- oversizedCount: analysis.oversizedElements ? analysis.oversizedElements.length : 0
- });
-
- return analysis;
- }
-
- // ============================================
- // End Page-Break Insertion Functions
- // ============================================
-
- // ============================================
- // Oversized Graphics Scaling Functions (Story 1.3)
- // ============================================
-
- // Minimum scale factor to maintain readability (50%)
- const MIN_SCALE_FACTOR = 0.5;
-
- /**
- * Task 1 & 2: Calculates scale factor with minimum enforcement
- * @param {number} elementHeight - Original height of element in pixels
- * @param {number} availableHeight - Available page height in pixels
- * @param {number} buffer - Small buffer to prevent edge overflow
- * @returns {Object} { scaleFactor, wasClampedToMin }
- */
- function calculateScaleFactor(elementHeight, availableHeight, buffer = 5) {
- const targetHeight = availableHeight - buffer;
- let scaleFactor = targetHeight / elementHeight;
- let wasClampedToMin = false;
-
- // Enforce minimum scale for readability
- if (scaleFactor < MIN_SCALE_FACTOR) {
- console.warn(
- `Warning: Large graphic requires ${(scaleFactor * 100).toFixed(0)}% scaling. ` +
- `Clamping to minimum ${MIN_SCALE_FACTOR * 100}%. Content may be cut off.`
- );
- scaleFactor = MIN_SCALE_FACTOR;
- wasClampedToMin = true;
- }
-
- return { scaleFactor, wasClampedToMin };
- }
-
- /**
- * Task 3: Applies CSS transform scaling to an element
- * @param {HTMLElement} element - The element to scale
- * @param {number} scaleFactor - Scale factor (0.5 = 50%)
- * @param {string} elementType - Type of element (svg, pre, img, table)
- */
- function applyGraphicScaling(element, scaleFactor, elementType) {
- // Get original dimensions before transform
- const originalHeight = element.offsetHeight;
-
- // Task 4: Handle SVG elements (Mermaid diagrams)
- if (elementType === 'svg') {
- // Remove max-width constraint that may interfere
- element.style.maxWidth = 'none';
- }
-
- // Apply CSS transform
- element.style.transform = `scale(${scaleFactor})`;
- element.style.transformOrigin = 'top left';
-
- // Calculate margin adjustment to collapse visual space
- const scaledHeight = originalHeight * scaleFactor;
- const marginAdjustment = originalHeight - scaledHeight;
-
- // Apply negative margin to pull subsequent content up
- element.style.marginBottom = `-${marginAdjustment}px`;
- }
-
- /**
- * Task 6: Handles all oversized elements by applying appropriate scaling
- * @param {Array} oversizedElements - Array of oversized element data
- * @param {number} pageHeightPx - Page height in pixels
- */
- function handleOversizedElements(oversizedElements, pageHeightPx) {
- if (!oversizedElements || oversizedElements.length === 0) {
- return;
- }
-
- let scaledCount = 0;
- let clampedCount = 0;
-
- for (const item of oversizedElements) {
- // Calculate required scale factor
- const { scaleFactor, wasClampedToMin } = calculateScaleFactor(
- item.height,
- pageHeightPx
- );
-
- // Apply scaling to the element
- applyGraphicScaling(item.element, scaleFactor, item.type);
-
- scaledCount++;
- if (wasClampedToMin) {
- clampedCount++;
- }
- }
-
- console.log('Oversized graphics scaling complete:', {
- totalScaled: scaledCount,
- clampedToMinimum: clampedCount
- });
- }
-
- // ============================================
- // End Oversized Graphics Scaling Functions
- // ============================================
-
- exportPdf.addEventListener("click", async function () {
- try {
- const originalText = exportPdf.innerHTML;
- exportPdf.innerHTML = 'Markdown Viewer
-