perf: cache editor layout geometry and restore synchronous critical CSS

desktop-app/resources/index.html

@@ -16,10 +16,8 @@
     <title>Markdown Viewer</title>
     <link href="/assets/icon.jpg" rel="icon" type="image/jpg">
     <!-- Updated libraries to latest versions with Subresource Integrity (SRI) -->
-    <link rel="preload" href="/libs/bootstrap.min.css" as="style" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous" onload="this.onload=null;this.rel='stylesheet'">
-    <noscript><link rel="stylesheet" href="/libs/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"></noscript>
-    <link rel="preload" href="/libs/github-markdown.min.css" as="style" integrity="sha384-hZuxRjC/Dsr4zEx1JlUhDQqkvqBPp2VLHsgXfnxPq1ULDy1eIdWCiux7nvO1RIZP" crossorigin="anonymous" onload="this.onload=null;this.rel='stylesheet'">
-    <noscript><link rel="stylesheet" href="/libs/github-markdown.min.css" integrity="sha384-hZuxRjC/Dsr4zEx1JlUhDQqkvqBPp2VLHsgXfnxPq1ULDy1eIdWCiux7nvO1RIZP" crossorigin="anonymous"></noscript>
+    <link rel="stylesheet" href="/libs/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
+    <link rel="stylesheet" href="/libs/github-markdown.min.css" integrity="sha384-hZuxRjC/Dsr4zEx1JlUhDQqkvqBPp2VLHsgXfnxPq1ULDy1eIdWCiux7nvO1RIZP" crossorigin="anonymous">
     <link rel="preload" href="/libs/bootstrap-icons.min.css" as="style" integrity="sha384-XGjxtQfXaH2tnPFa9x+ruJTuLE3Aa6LhHSWRr1XeTyhezb4abCG4ccI5AkVDxqC+" crossorigin="anonymous" onload="this.onload=null;this.rel='stylesheet'">
     <noscript><link rel="stylesheet" href="/libs/bootstrap-icons.min.css" integrity="sha384-XGjxtQfXaH2tnPFa9x+ruJTuLE3Aa6LhHSWRr1XeTyhezb4abCG4ccI5AkVDxqC+" crossorigin="anonymous"></noscript>
     <link rel="stylesheet" href="/styles.css">
@@ -856,6 +854,175 @@ <h3 class="modal-section-title">Open-source credits</h3>
         </div>
     </div>
 
+    <template id="default-markdown">---
+title: Welcome to Markdown Viewer
+description: A GitHub-style Markdown renderer with live preview, math, diagrams, and export support.
+author: ThisIs-Developer
+tags: ["markdown", "preview", "mermaid", "latex", "open-source"]
+---
+
+# Welcome to Markdown Viewer
+
+## ✨ Key Features
+- **Live Preview** with GitHub styling
+- **Smart Import/Export** (MD, HTML, PDF)
+- **Mermaid Diagrams** for visual documentation
+- **LaTeX Math Support** for scientific notation
+- **Emoji Support** 😄 👍 🎉
+
+## 💻 Code with Syntax Highlighting
+```javascript
+  function renderMarkdown() {
+    const markdown = markdownEditor.value;
+    const html = marked.parse(markdown);
+    const sanitizedHtml = DOMPurify.sanitize(html);
+    markdownPreview.innerHTML = sanitizedHtml;
+
+    // Syntax highlighting is handled automatically
+    // during the parsing phase by the marked renderer.
+    // Themes are applied instantly via CSS variables.
+  }
+```
+
+## 🧮 Mathematical Expressions
+Write complex formulas with LaTeX syntax:
+
+Inline equation: $$E = mc^2$$
+
+Display equations:
+$$\frac{\partial f}{\partial x} = \lim_{h \to 0} \frac{f(x+h) - f(x)}{h}$$
+
+$$\sum_{i=1}^{n} i^2 = \frac{n(n+1)(2n+1)}{6}$$
+
+## 📊 Mermaid Diagrams
+Create powerful visualizations directly in markdown:
+
+```mermaid
+flowchart LR
+    A[Start] --> B{Is it working?}
+    B -->|Yes| C[Great!]
+    B -->|No| D[Debug]
+    C --> E[Deploy]
+    D --> B
+```
+
+### Sequence Diagram Example
+```mermaid
+sequenceDiagram
+    User->>Editor: Type markdown
+    Editor->>Preview: Render content
+    User->>Editor: Make changes
+    Editor->>Preview: Update rendering
+    User->>Export: Save as PDF
+```
+
+## 📋 Task Management
+- [x] Create responsive layout
+- [x] Implement live preview with GitHub styling
+- [x] Add syntax highlighting for code blocks
+- [x] Support math expressions with LaTeX
+- [x] Enable mermaid diagrams
+
+## 🆚 Feature Comparison
+
+| Feature                  | Markdown Viewer (Ours) | Other Markdown Editors  |
+|:-------------------------|:----------------------:|:-----------------------:|
+| Live Preview             | ✅ GitHub-Styled       | ✅                     |
+| Sync Scrolling           | ✅ Two-way             | 🔄 Partial/None        |
+| Mermaid Support          | ✅                     | ❌/Limited             |
+| LaTeX Math Rendering     | ✅                     | ❌/Limited             |
+
+### 📝 Multi-row Headers Support
+
+<table>
+  <thead>
+    <tr>
+      <th rowspan="2">Document Type</th>
+      <th colspan="2">Support</th>
+    </tr>
+    <tr>
+      <th>Markdown Viewer (Ours)</th>
+      <th>Other Markdown Editors</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Technical Docs</td>
+      <td>Full + Diagrams</td>
+      <td>Limited/Basic</td>
+    </tr>
+    <tr>
+      <td>Research Notes</td>
+      <td>Full + Math</td>
+      <td>Partial</td>
+    </tr>
+    <tr>
+      <td>Developer Guides</td>
+      <td>Full + Export Options</td>
+      <td>Basic</td>
+    </tr>
+  </tbody>
+</table>
+
+## 📝 Text Formatting Examples
+
+### Text Formatting
+
+Text can be formatted in various ways for ~~strikethrough~~, **bold**, *italic*, or ***bold italic***.
+
+For highlighting important information, use <mark>highlighted text</mark> or add <u>underlines</u> where appropriate.
+
+### Superscript and Subscript
+
+Chemical formulas: H<sub>2</sub>O, CO<sub>2</sub>  
+Mathematical notation: x<sup>2</sup>, e<sup>iπ</sup>
+
+### Keyboard Keys
+
+Press <kbd>Ctrl</kbd> + <kbd>B</kbd> for bold text.
+
+### Abbreviations
+
+<abbr title="Graphical User Interface">GUI</abbr>  
+<abbr title="Application Programming Interface">API</abbr>
+
+### Text Alignment
+
+<div style="text-align: center">
+Centered text for headings or important notices
+</div>
+
+<div style="text-align: right">
+Right-aligned text (for dates, signatures, etc.)
+</div>
+
+### **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:
+<img alt="Markdown Logo" src="https://markdownviewer.pages.dev/assets/icon.jpg" width="120" height="120">
+
+### **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.
+</template>
+
     <script src="/libs/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
     <script src="/js/neutralino.js"></script>
     <script src="/js/main.js"></script>

desktop-app/resources/js/script.js

@@ -864,18 +864,13 @@ document.addEventListener("DOMContentLoaded", function () {
       .replace(/"/g, '"');
   }
 
-  // PERF-012: Default template loaded from external file to reduce bundle size
-  let sampleMarkdown = '# Welcome to Markdown Viewer\n\nStart typing your markdown here...';
-  fetch('sample.md').then(function(r) { return r.text(); }).then(function(text) {
-    sampleMarkdown = text;
-    // Only apply if editor still has the simple fallback or is empty
-    if (!markdownEditor.value || markdownEditor.value === '# Welcome to Markdown Viewer\n\nStart typing your markdown here...') {
-      markdownEditor.value = sampleMarkdown;
-      renderMarkdown();
-    }
-  }).catch(function() { /* Use inline fallback */ });
+  // PERF-012: Inlined default template to eliminate network request, FOUC, and layout shifts
+  const defaultMarkdownTemplate = document.getElementById('default-markdown');
+  const sampleMarkdown = defaultMarkdownTemplate ? defaultMarkdownTemplate.textContent.trim() : '# Welcome to Markdown Viewer\n\nStart typing your markdown here...';
 
-  markdownEditor.value = sampleMarkdown;
+  if (!markdownEditor.value) {
+    markdownEditor.value = sampleMarkdown;
+  }
 
   // ========================================
   // DOCUMENT TABS & SESSION MANAGEMENT