Skip to content

Enhanced Editor Features

Bob edited this page May 30, 2026 · 2 revisions

✏️ Enhanced Editor Features

The note editor in Flatnotes-Enhanced is packed with professional-grade features that go beyond basic Markdown editing. This guide covers all the enhancements built into the editor.


🎨 Text Highlighting

Highlight important text with custom colors directly in the editor.

Highlighting Text

Method 1: Using the Highlight Button

  1. Select the text you want to highlight
  2. Click the "H̲" (highlight) button in the toolbar
  3. The text is highlighted with the default color
  4. The text displays as ==highlighted text== in Markdown

Method 2: Using the Color Picker

  1. Select the text you want to highlight
  2. Click the "🎨" (palette) button in the toolbar
  3. Choose a color from the color picker
  4. The text is highlighted with your chosen color

Method 3: Manual Markdown Type the Markdown directly:

==This text is highlighted==

Highlight Colors

The colors available for highlighting are configured in Settings → Appearance → Highlight Colors.

  • Default color: Used when you click the basic highlight button
  • Custom colors: You can add, remove, or modify highlight colors
  • Live preview: See how highlighted text looks before saving

Highlight Examples

==Important information==
==Critical deadline: March 15==
==Question to follow up on==

🔍 Search & Replace

Find and replace text within your note using the built-in search and replace feature.

Opening Search & Replace

  • Keyboard shortcut: Ctrl+H (or Cmd+H on Mac)
  • Toolbar button: Click the "S/R" button in the editor toolbar

Using Search & Replace

  1. Open the search/replace dialog with Ctrl+H
  2. Enter the text to find in the "Find" field
  3. Enter the replacement text in the "Replace" field
  4. Choose an action:
    • Find Next: Jump to the next match
    • Replace: Replace the current match
    • Replace All: Replace all matches at once

Search & Replace Tips

  • Case sensitivity: Check the settings to match case
  • Whole words: Option to match whole words only
  • Regular expressions: Some modes support regex (check your version)
  • Preview: Results are highlighted as you search

Example Workflow

Original text:
  This is a meeting on Monday.
  Another meeting on Friday.

Find: "meeting"
Replace: "conference"

Result:
  This is a conference on Monday.
  Another conference on Friday.

🔗 Wikilink References

Insert note references using wikilink syntax to create connections between your notes.

What Are Wikilinks?

Wikilinks allow you to create clickable references to other notes using double brackets:

[[Note Title]]
[[Projects/Website]]
[[Meeting Notes 2024]]

When viewing the note, these become clickable links to jump to other notes.

Inserting Wikilinks

Method 1: Using the Wikilink Button

  1. Click the "[[]]" button in the editor toolbar
  2. A modal dialog appears showing all available notes
  3. Search for the note you want to link to
  4. Click the note title to insert it
  5. The wikilink [[Note Title]] is inserted at your cursor

Method 2: Using the Keyboard Shortcut

  • Some versions may support a keyboard shortcut (check your setup)

Method 3: Manual Entry Type the Markdown directly:

[[Note Title]]
[[Folder/Subfolder/Note]]

Wikilink Examples

Read more in [[Project Overview]]
See [[Work/Q4 Planning]] for details
Related: [[Tags System]]

Wikilink Features

  • Folder paths: Wikilinks work with notes in any folder
  • Full note titles: Use the complete note path including folder structure
  • Clickable in preview: Viewing the note, you can click wikilinks to jump between notes

Wikilink Best Practices

Do this:

  • Link related notes together: [[Project Proposal]][[Timeline]]
  • Use meaningful note titles that work well as links
  • Link from overview notes to detailed notes
  • Create a "Related reading" section with wikilinks

Avoid this:

  • Linking to every word (creates too many links)
  • Creating circular references (A → B → C → A)
  • Using incomplete note titles
  • Forgetting that links are case-sensitive

📎 File Attachments

Attach files to your notes. Supported formats include documents, spreadsheets, PDFs, images, and more.

Supported File Types

Category File Types
Documents .doc, .docx, .odt, .txt, .rtf
Spreadsheets .xls, .xlsx, .ods, .csv
Presentations .ppt, .pptx, .odp
Apple iWork .pages, .numbers, .key
PDFs .pdf
Images .jpg, .jpeg, .png, .gif, .webp, .svg
Data .json, .yaml, .yml, .xml, .toml
Web .html, .htm
Archives .zip, .gz, .tar, .7z, .rar, .bz2, .xz
Code .js, .ts, .py, .vue, .sh, .rb, .php
Audio .mp3, .m4a, .wav, .ogg, .flac, .aac
Video .mp4, .mkv, .mov, .avi, .webm
Fonts .ttf, .otf, .woff

Uploading Attachments

In the Note Editor:

  1. Click the image icon in the editor toolbar (or manually insert: ![](attachment:filename))
  2. Select an attachment from your computer
  3. The attachment is uploaded and embedded in your note

Attachments Page:

  1. Go to Menu → Attachments
  2. Upload files there to make them available
  3. See which notes use each attachment
  4. Delete unused attachments

Embedding Attachments in Notes

Images:

![Alt text](attachment:image.png)

Other files:

[Link to document](attachment:report.pdf)
[Spreadsheet data](attachment:data.xlsx)

Viewing Attachment Details

On the Attachments page, each file shows:

  • Filename - Name of the attachment
  • File size - How much space it takes
  • Category - Type of file (Document, Image, PDF, etc.)
  • Usage - Which notes reference this file
  • Preview button - View/download the file

Attachment Management

Preview:

  • Click the eye icon to preview an attachment (for supported types)
  • Preview opens in a new tab

Download:

  • Click the download icon to download an attachment
  • Or use the preview link to download from there

Copy URL:

  • Click the copy icon next to filename
  • Shares the full URL to the attachment

Delete:

  • Click the trash icon to delete an unused attachment
  • You can't delete attachments that are still referenced in notes
  • To delete: remove all references from notes first

Attachment Best Practices

Do this:

  • Use PDFs for documents (universal format)
  • Organize attachments logically (use meaningful filenames)
  • Delete unused attachments to save space
  • Reference attachments from multiple notes if relevant

Avoid this:

  • Uploading very large files (can slow down backups)
  • Duplicating the same file (use one copy, link from multiple notes)
  • Storing temporary files (clean up unused attachments)

🛠️ Advanced Formatting

Beyond highlighting and links, the editor supports all standard Markdown features plus some enhancements.

Basic Formatting

Format Markdown Toolbar Button
Bold **text** B
Italic *text* I
Strikethrough ~~text~~ S
Code `code` `

Lists

Unordered list:
- Item 1
- Item 2
- Item 3

Ordered list:
1. First
2. Second
3. Third

Task list:
- [x] Completed task
- [ ] Pending task
- [>] In progress

Headings

# H1 Heading
## H2 Heading
### H3 Heading
#### H4 Heading
##### H5 Heading
###### H6 Heading

Tables

| Header 1 | Header 2 |
|----------|----------|
| Cell 1   | Cell 2   |
| Cell 3   | Cell 4   |

Quotes & Code Blocks

> This is a blockquote
> Can span multiple lines

`inline code`

code block on multiple lines

Links

[Link text](https://example.com)
[[Internal note link]]

Callouts (Enhanced)

> [!note]
> This is a note callout

> [!warning]
> This is a warning

> [!custom-type] Optional Title
> Custom callout with color and icon

⌨️ Keyboard Shortcuts in Editor

Text Formatting

Shortcut Action
Ctrl+B Bold
Ctrl+I Italic
Ctrl+H Search & Replace

Navigation & Editing

Shortcut Action
Ctrl+Z Undo
Ctrl+Y or Ctrl+Shift+Z Redo
Tab Indent
Shift+Tab Outdent

🖥️ Editor Modes

View Modes

  • Edit mode - Full Markdown editor with live preview
  • Preview mode - View the rendered note (read-only)
  • Markdown mode - Raw Markdown code view

Switching Modes

Look for the mode toggle buttons in the editor toolbar or use keyboard shortcuts if available.


💾 Auto-Save & Drafts

The editor automatically saves your changes:

  • Auto-save: Changes are saved as you type (after a brief delay)
  • Save indicator: Shows when the note is saved
  • No manual save needed - Just start typing and your changes are preserved
  • Backup safety - Check the .flatnotes/ folder for backup metadata

📱 Editor on Mobile

The editor is fully responsive on mobile and tablet:

  • Full-width editing - Editor takes up the entire screen
  • Touch keyboard - Native keyboard support
  • Toolbar collapses - Buttons reorganize for smaller screens
  • Simplified layout - Less visual clutter on mobile

Mobile Editing Tips

  • Use external keyboard for faster typing
  • Portrait orientation recommended for editing
  • Swipe to close sidebars before editing
  • Long-press toolbar buttons to see tooltips

Troubleshooting Editor Issues

Highlighting Not Working

Problem: Highlight button doesn't work

Solutions:

  • Make sure text is selected before clicking highlight
  • Try using the color picker button instead
  • Check if highlights are enabled in Settings

Search & Replace Not Finding Text

Problem: Search returns no results

Solutions:

  • Check spelling and capitalization
  • Use simple search terms
  • Try searching for part of the word
  • Enable/disable "Match case" setting if available

Wikilinks Not Working

Problem: Wikilinks don't appear as links

Solutions:

  • Check note title matches exactly (including capitalization)
  • Use full folder path if note is in a subfolder
  • Make sure the linked note actually exists
  • Refresh the page to see new wikilinks

Attachment Upload Failing

Problem: Can't upload a file

Solutions:

  • Check file size (very large files may timeout)
  • Verify file type is supported
  • Try a different file
  • Check disk space available
  • Refresh and try again

Tips & Tricks

Using Multiple Wikilinks

Create a "See Also" or "Related Reading" section:

## Related Notes
- [[Project Overview]]
- [[Team Members]]
- [[Timeline]]
- [[Budget]]

Highlighting for Different Purposes

Configure highlight colors in Settings for different uses:

  • Yellow: General importance
  • Green: Completed/approved
  • Blue: Questions/review needed
  • Red: Critical/urgent

Using Callouts with Highlights

Combine callouts and highlights for emphasis:

> [!warning]
> This is ==critical== and needs immediate attention

Linking to Specific Sections

For detailed references, include section context in your wikilinks:

For implementation details, see [[Technical Design#Architecture]]

See Also

Clone this wiki locally