Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

mjs271
Copy link

@mjs271 mjs271 commented Aug 13, 2023

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
  1. Absolute Path
  • e.g., ![[<img-prefix-folder>/img.png]], located in <img-prefix-folder>/img.png
  1. 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
Copy link

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);
            }
    }
  1. get this image list, like this.
    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
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Md file with embedded md can't display correctly
2 participants