✍️ 02. Notes & Editor

Crafted around core writing experiences.
FlashNote features a cutting-edge rich text engine that unites the fluidity of WYSIWYG editing with the precision and speed of raw Markdown.

📑 In This Guide

1. Create, Edit, Rename & Delete Notes
2. Markdown & WYSIWYG Dual Engine (4 View Modes)
3. Headings, Lists, Quotes, Code Blocks & Links
4. Image Handling
5. Tables, Charts & LaTeX Math
6. Drafts & Folder Management

1. Create, Edit, Rename & Delete Notes

1.1 Lifecycle Management

• New Note: Click the + icon in the top right corner of the sidebar, or use the shortcut Ctrl/Cmd + N;
• Edit Note: Click any note card in the left list to instantly load it into the editor;
• Rename Note: Click directly into the title input above the editor to rename, then press Enter;
• Delete & Trash: Click the ··· menu on any note card and select “Delete”. Deleted notes are moved to “Recently Deleted” trash to prevent accidental data loss.

2. Markdown & WYSIWYG Dual Engine (4 View Modes)

FlashNote innovatively supports 4 View Modes tailored to every stage of creation:

1. Visual Mode: Pure WYSIWYG. Beautiful formatting renders as you type for immersive flow;
2. Split View: Rich-text editing on the left and synchronized Markdown raw source on the right;
3. Source Mode: Native monospace raw text editing with automatic bracket and markdown symbol closing;
4. Preview Mode: Simulates reader layout with interactive links and clean typography.

3. Headings, Lists, Quotes, Code Blocks & Links

3.1 Headings & Hierarchy

• Supports standard # through ###### for H1 to H6 headings;
• Foldable heading toggles and a document outline view help you navigate long documents effortlessly.

3.2 Lists & Task Checkboxes

• Bulleted Lists: Type - or * followed by Space;
• Numbered Lists: Type 1. followed by Space; subsequent numbers increment automatically;
• Interactive Task Lists: Type [] followed by Space to render clickable interactive checkboxes.

3.3 Blockquotes & Hyperlinks

• Type > followed by Space to create a translucent quote card for citations or excerpts;
• Select text and press Ctrl/Cmd + K to insert or edit URLs.

3.4 Smart Code Blocks & Syntax Highlighting

Optimized for engineers and technical authors:

• Instant Creation: Type three backticks ``` and press Enter;
• Language Switcher: Floating language selector supporting TypeScript, Python, Rust, Go, SQL, Shell, HTML/CSS, and more;
• One-Click Copy: Copy button copies code cleanly with subtle feedback animations;
• Line Number Protection: Monospace line numbers use user-select: none, ensuring that selections never accidentally copy line numbers.

4. Image Handling

FlashNote provides complete offline media resilience:

• Flexible Insertion: Paste screenshots via Ctrl/Cmd + V, drag & drop local images, or click the toolbar image button;
• Automatic Offline Caching: External images dragged or pasted into FlashNote are downloaded into browser IndexedDB to prevent broken hotlinks;
• HD Lightbox: Double-click any image in the editor to open a full-screen lightbox with pan and zoom.

5. Tables, Charts & LaTeX Math

5.1 Matrix Tables

• Quickly insert $M \times N$ matrix tables with row/column management and alignment options;
• LaTeX to Unicode Export: Export transforms standard math macros into crisp Unicode characters (e.g., \in $\rightarrow$ $\in$, \rightarrow $\rightarrow$ $\rightarrow$).

5.2 KaTeX Mathematical Formulas

• Inline Formulas: Wrap equations with $E=mc^2$;
• Block Formulas: Use $$ ... $$ on dedicated lines;
• Powered by ultra-fast KaTeX rendering for calculus, matrices, and greek symbols.

5.3 Interactive Mermaid Diagrams

Set the code block language to mermaid to render interactive flowcharts, sequence diagrams, and Gantt charts:

• Pan & Zoom: Scroll to zoom between 30% and 350%; drag to pan canvas;
• Syntax Sanitization: Integrated error sanitizer prevents crashes on typo mistakes;
• Vector Export: Export directly to SVG or 2x Retina PNG.

6. Drafts & Folder Management

• Draft Flag: Mark work in progress as drafts to keep them strictly in your local sandbox;
• Folder Hierarchy: Create multi-level custom folders (e.g., Engineering/Frontend, Book Reviews) to keep your workspace structured.