Fix for Embedded Non-image Files Glitching the Card Header Display

[mjs271]

Well... I got bored/motivated today and managed to squash this bug. I tested what I believe are all of the cases for the imagePrefix (attachments folder) on my own machine:

1. Short Path
   • e.g., ![[img.png]], located in <img-prefix-folder>/img.png
2. Absolute Path
   • e.g., ![[<img-prefix-folder>/img.png]], located in <img-prefix-folder>/img.png
3. Markdown Link
   • e.g., ![pointless-name](<img-prefix-folder>/big%20red%20firetruck.png), located in <img-prefix-folder>/big red firetruck.png

I haven't worked in Typescript or with the Obsidian API before, so I'd certainly give things a look to make sure I didn't screw up in any major ways. I also don't know whether this solution is portable to mobile os, since I'm not aware of the salient concerns.

As it is, I'm following what appears to be @xpgo's convention of not considering images that are not a) in the user's settings-specified attachments folder, or b) in the specified folder in the ccard code block as imagePrefix: 'attachments/', since that seems to avoid a large number of headaches.

Anyway, I really appreciate your work putting this .plugin together, and hopefully this works out

Fixes #43 (and #37)

[jianwu003]

Now have two method fix this BUG

1. Use Obsidian Official MarkdownRender, like this, but in this plugin, use many await function, it will make this method lose effectiveness. The official MarkdownRender must be used before a function await.

   
   import { App, MarkdownView, MarkdownPostProcessorContext, MarkdownRenderer, TFile} from "obsidian";

export class ObMarkdownRenderer { app: App;

constructor() {
    this.app = app;
}

createChatBubble(message: string, element: HTMLElement, sourcePath: string,) {
    const bubble = element.createDiv({
        cls: ["chat-view-bubble", `chat-view-align`]
    });
    const bubbleChildren = bubble.createDiv({
        cls: ["assssssssss"]
    });
        if (message.length > 0) {
            MarkdownRenderer.renderMarkdown(message, bubbleChildren, sourcePath, null);
        }
}

2. get this image list, like this.
````ts
    GetImagePath(imageName: string){
        // 获取Vault中的所有文件
        const files = this.app.vault.getFiles();

        // 过滤出图片文件
        const imageFiles = files.filter(file => {
            return file.extension === 'png' || file.extension === 'jpg' || file.extension === 'jpeg';
        });

        // 输出图片路径
        for (const imageFile of imageFiles) {
            if (imageFile instanceof TFile && imageFile.name === imageName) {
                // console.log(imageFile.path);

                return imageFile.path;
            }
        }
    }

But I don't know what to do with this separate ts file.

[jianwu003]

The best way is to use Obsidian markdownrenderer. Because it will save a lot of trouble, using obsidian official renderer means that we don't need to deal with link pairs too much.