obsidian-folder-note-plugin icon indicating copy to clipboard operation
obsidian-folder-note-plugin copied to clipboard

Md file with embedded md can't display correctly

Open quanru opened this issue 4 years ago • 2 comments

# Outline
## Start here
- General how-this-work
- What to expect
- How to start
## Definition 
- ![[PARA Notes#Definitions]]
## Methodology
- Actionnability
- Fluidity
- Project based
- Constraint
## Workflow
- ![[PARA Notes#Workflow]]
## Next steps
- Tiago's blog
- Discord

quanru avatar Jan 22 '22 08:01 quanru

image

quanru avatar Jan 22 '22 08:01 quanru

I've been trying to figure this one out, myself. The answer appears to be in (the possibly duplicate issue) #37.

Though I haven't actually messed around with the code, myself, it looks like this bit is causing the issue

// image
var imageUrl = this.getContentImage(contentOrg, folderPath);
if (imageUrl.length > 0) {
    card.setHeadImage(imageUrl);
}

because the function it calls is only looking for embedded links (e.g., ![<anything>](<anything>) or ![[<anything>]] (not a regex specialist, but I think this is correct). Once it's got the imageUrl which could be something like app://local/[...] or on mac something like obsidian://open?vault=theVault&file=Notes/[...], it only tests whether it's length is > 0 and doesn't begin with http. As a result, embedded links of notes sneak through and are then treated like images, which glitches the header.

    getContentImage(contentOrg: string, folderPath: string) {
        var imageUrl = '';
        // for patten: ![xxx.png]
        let regexImg = new RegExp('!\\[(.*?)\\]\\((.*?)\\)');
        var match = regexImg.exec(contentOrg);
        if (match != null) {
            imageUrl = match[2];
        }
        else {
            // for patten: ![[xxx.png]]
            let regexImg2 = new RegExp('!\\[\\[(.*?)\\]\\]');
            match = regexImg2.exec(contentOrg);
            if (match != null) imageUrl = match[1];
        }
        // add image url
        if (imageUrl.length > 0) {
            if (!imageUrl.startsWith('http')) {
                let headPath = folderPath;
                let relativePath = false;
                while (imageUrl.startsWith('../')) {
                    imageUrl = imageUrl.substring(3);
                    headPath = headPath.substring(0, headPath.lastIndexOf('/'));
                    relativePath = true;
                }
                if (relativePath) {
                    imageUrl = headPath + '/' + imageUrl;
                }
                imageUrl = imageUrl.replace(/\%20/g, ' ')
                // imageUrl = this.app.vault.adapter.getResourcePath(imageUrl);
            }
        }
        return imageUrl;
    }

Fix Ideas

  • Check whether the URL is a note file or image file, though doing this may be tricker.
    • At least for me, on macOS, Obsidian URL's have no file extension if they are markdown, so that's an option.
  • Additionally, and this is probably an obscure corner case, but local filesystem links should probably be checked for.
    • E.g., again on my mac, file:///Users/<uname>/[...]
    • This is actually my go-to way to embed something that already lives on my computer somewhere and I don't want it doubled.
  • ~~Also, it'd probably be best to check https in addition to http when excluding web links.~~ 🙃

Alternative

  • I suppose this could also be addressed by allowing the user to disable the header image when using folder_brief_live, but that feels more like a bandaid.

Finally, sorry to not just submit a fixed PR, but I'm not well-versed in typescript and probably won't be able to get to this in the near future. Anyone else up for a shot at it (@xpgo)?

mjs271 avatar Aug 11 '23 20:08 mjs271