Notes with apostrophe (') in title cannot be previewed or edited

[jondoran]

Notes with filenames like Jon's note.md appear in the file tree but cannot be previewed / edited.

Tested on desktop (Windows / Firefox) and mobile (Android / Firefox).

[gamosoft]

Can you please give me more info or steps? I can't repro this.

I have a W11 setup with Python and using Opera/Edge/Chrome as dev browsers.

The only difference you mention is Firefox (I also do have an Android phone)
Maybe try with a different browser and see if it works?

Also check your logs and see if you spot any warnings or errors:

Let me know how it goes.

[jondoran]

NoteDiscovery is installed in a docker container on a VPS. I tested using Edge and encountered the same issue.

Logs show successful GET requests for notes with alphanumeric file names like Jons note.md trigger, but clicking Jon's note.md does not trigger an API call.

Claude thinks it found the root cause - see below. BTW loving the app overall, thank you!

---

Description

Files with special characters (specifically apostrophes ') appear correctly in the file tree sidebar, but clicking on them does not trigger the expected API call to load the note content. The note simply doesn't open - no error, no network request, nothing happens.

Root Cause Analysis

(Based on analysis by Claude Opus 4.5)

The issue is in frontend/app.js in the renderFolderRecursive() function (around lines 1050-1150). When constructing inline event handlers for dynamically rendered file tree items, the code escapes file paths like this:

// Around line 1055 for folders:
const escapedPath = folder.path.replace(/'/g, "\\'").replace(/\\/g, "\\\\");

// Around line 1130 for notes:
const escapedNotePath = note.path.replace(/'/g, "\\'").replace(/\\/g, "\\\\");

These escaped strings are then inserted into HTML attributes:

onclick="window.$root.openItem('${escapedNotePath}', '${note.type}')"

The Problem: The escaping "\\'"produces \' in the output, but this doesn't survive the HTML→JavaScript parsing correctly in all contexts. When the browser parses the HTML attribute and then evaluates it as JavaScript, the single backslash may not properly escape the quote, causing a silent JavaScript syntax error. The click handler simply doesn't execute.

Example of what happens:

• Filename: Jon's Note.md
• After escaping: Jon\'s Note.md
• In HTML: onclick="window.$root.openItem('Jon\'s Note.md', 'note')"
• Browser sees malformed JS and silently fails

Why You Can't Replicate

This bug only manifests when:

1. A filename contains an apostrophe (')
2. The file is rendered via x-html (which uses renderFolderRecursive())
3. The user clicks on it

If your test files don't have apostrophes, or you're testing in a context where Alpine directives are used directly (not via x-html), you won't see the issue.

Suggested Fix

Option 1 (easiest to implement): Use proper JSON encoding

// Replace this:
const escapedNotePath = note.path.replace(/'/g, "\\'").replace(/\\/g, "\\\\");

// With this:
const escapedNotePath = JSON.stringify(note.path).slice(1, -1);

JSON.stringify() properly handles all special characters including quotes, backslashes, newlines, etc.

Option 2 (Best Practice): Refactor to use data attributes + event delegation

Instead of inline handlers with escaped strings:

<div data-note-path="Jon's Note.md" data-note-type="note" class="note-item">

Then use a single delegated event listener that reads from dataset.notePath. This completely avoids the escaping problem and is more maintainable.

Other notes

• This analysis was performed by examining the source code at frontend/app.js and backend/main.py
• The same escaping pattern is used for folders, so folders with apostrophes in their names will also fail to expand/collapse properly
• Double quotes are also unhandled - that's arguably a more severe bug since it could potentially allow XSS if a user creates a maliciously-named file

[gamosoft]

I can't access my dev machine now, and I don't doubt there may be a bug in the code, but I'm confused as why it works for me and not for you, I have recorded a video from the live demo website and it works there:

2026-01-17_11-11-58.mp4

Can you try to do the same there?
https://gamosoft-notediscovery-demo.hf.space/

Also, what version are you working with? Can you deploy latest and test again?

I was thinking maybe some browser extension that may be interfering but then again, seems to happen to you all the time. You mention it's a VPS... can you take a look at its logs? Can you give me more details about it? Maybe something there?

Also, can you open browser dev tools (typically CTRL+SHIFT+I or F12) and see if the console shows something?

[jondoran]

Thanks for the quick response! I've updated to the latest version and done more testing on your demo instance. I can now pinpoint exactly where the bug occurs.

What works:

• Creating/editing a note with an apostrophe in the root directory (e.g., jon's note.md) ✅
• Creating a folder with an apostrophe (e.g., Jon's folder) ✅
• Creating a note inside that folder via the "empty folder" button (the one that appears in the edit pane) ✅

What doesn't work:

• Creating a note via the dropdown menu in the file navigation sidebar ❌
• Expanding Jon's folder to see its contents ❌
• Renaming Jon's folder ❌
• Deleting Jon's folder ❌

The pattern: Root-level notes are unaffected — they're rendered via Alpine directives directly. But folders and their contents are rendered via renderFolderRecursive() in app.js, which generates inline event handlers. That's where the escaping breaks.

In renderFolderRecursive(), you'll see inline handlers like:

onclick="window.$root.toggleFolder('${escapedPath}')"

Where escapedPath is created by:

const escapedPath = folder.path.replace(/'/g, "\\'").replace(/\\/g, "\\\\");

This escaping doesn't survive the HTML attribute → JavaScript parsing correctly.

To reproduce on the demo:

1. Create a folder called gamosoft's folder
2. Try to expand it by clicking the arrow — nothing happens

Suggested fix:

Use JSON.stringify() for proper escaping:

const escapedPath = JSON.stringify(folder.path).slice(1, -1);

Or better yet, refactor to use data- attributes instead of inline handlers, which avoids the escaping issue entirely.

[gamosoft]

Aaaaah thank you so much for the investigation, I appreciate it and you're right, that's the issue. 🙏

I have created this PR using data-* attributes, how do you feel about it? I have tested locally and seems to work fine. 🙃

#152

[jondoran]

Looks good!

Not strictly necessary, but if you wanted to completely future-proof it against future refactors you could add .replace(/'/g, ''') to the escapeHtmlAttr() function.

Thank you! Love your work.

[gamosoft]

Thank you, I also added your suggestion, it will all be in the next release, please take a look and let me know:

https://github.com/gamosoft/NoteDiscovery/releases/tag/v0.14.1

Thank you very much.