Make the plugin compatible with live preview (Obsidian v0.13.0 onwards)

[riddyrayes]

The plugin fails to work in Live preview.

---

This is not a urgent request. I would accept if you decide to work on this after Live preview goes public.

[gavvvr]

Hi @riddyrayes. Thanks for early reporting!

Did not know anything about live preview before you posted this. Quickly googled to get the idea. So, live preview is something similar to WYSIWYG.

I have not tried any 0.13+, correct me if I am wrong, but I suggest that the problem with LivePreview is that the plugin simply does not work, as if it was disabled. I guess, there could be many other plugins affected. Please add links to the same issues of other projects (if you have them). I am interested in how it will be fixed. I guess the solution will be similar for all. Maybe there is already a common discussion of this problem, so please leave useful links here

[riddyrayes]

• yes, Live Preview is Obsidian's implementation of WYSIWYG
• yes, the plugin just seems to be turned off when using Live Preview - both source mode (uses Codemirror 6 afaik) and (live) preview mode. If the (beta) preview is totally turned off (the old editor, uses Codemirror 5) the plugin works as usual.
• I see Obsidian Excalidraw solved its issue of embeds in live preview (WYSIWYG transclusion).

I will attach any important developments in this regard when I find them! Thanks for the quick response!

[ih8snow]

Hi,

any plans when this great plugin will be ready for "live preview"? I'm using Obsidian Release v0.13.8 (Insider build) which is working great but not with the imgur upload.

[dlccyes]

Live preview is public now, but this very important plugin doesn't work with live preview. Hope it can be implemented soon!

[artk47]

Confirmed, livepreview rolled out and imgur is n/a in any mode, pretty sad and lost tones of time trying to figure what's going on(

[gavvvr]

😬
I thought it works at least when you choose old editing mode. Just updated and now it does not work for me too :( Even the Legacy editor switch does not help.

I have no idea how to bring it back to life now. It's a really breaking change. The registerCodeMirror does not seem to be invoked on plugin startup anymore, there is a new CodeMirror 6 under the hood.
Found nothingislost/obsidian-cm6-attributes as an example, but it will take enough time to understand how can I extend the new editor. Any contributions are very welcomed (even in the form of useful links with examples how other plugins switch to the new CM6 editor)

[renmu123]

You may can use this to fix, but l do not known how to off this event.

    this.app.workspace.on(
      "editor-paste",
      (evt: ClipboardEvent, editor: Editor, markdownView: MarkdownView) => {
        let files = evt.clipboardData.files;
        if (
          files.length !== 0 ||
          files[0].type.startsWith("image")
        ) {
          this.uploadFileAndEmbedImgurImage(editor).catch(console.error);
          evt.preventDefault();
        }
      }
    );

[ih8snow]

Maybe this info from https://www.obsidianroundup.org/2021-12-25/
will help?

For Developers:

Here's a handy guide for how to update your plugins and themes for Obsidian 0.13+.
Link: https://publish.obsidian.md/hub/04+-+Guides%2C+Workflows%2C+%26+Courses/Guides/How+to+update+your+plugins+and+CSS+for+live+preview

There's further documentation on how to use CM6 with Obsidian from Obsidian October winner @nothingislost.
Link: https://github.com/nothingislost/obsidian-cm6-attributes

[gavvvr]

Thanks a lot @renmu123 . This is almost the solution.
Looks like .on() is a straightforward way to add custom behavior on certain events (I was unable to do it initially because of the tricky events system in the previous CodeMirror and also there was no such an API from Obsidian back then, that's why I used a private _handlers field). Right now I am struggling with converting my event handler's code to registering it with .on().

• .on() does not turn off the default handler (until you invoke preventDefault)
• since my handler needs to await (i.e. a response from user's modal), it actually returns a Promise immediately

As I understand the combination of both facts above leads to an immediate event propagation to default handler, so the image gets pasted locally even before a user provided his response from modal window.

And I can not invoke preventDefault always in the very beginning, because I won't be able to call default handler for local pasting if I need it further.

So, at the moment I am stuck with this problem 😩. I see 2 ways in theory:

• I either need to remove async from event handler. To do it, I need to resolve all the promises (modal response promise, upload promise, etc) synchronously. Looks like it's not possible in JS with a single thread. If I block the thread, who will do the upload job then?
• Or I always invoke preventDefault in the very beginning, but if I need a default handler for local paste (i.e. when user responded so with modal or when there is no internet connection for remote upload), I need to know where can I find the reference to default handler

[renmu123]

Thanks a lot @renmu123 . This is almost the solution. Looks like .on() is a straightforward way to add custom behavior on certain events (I was unable to do it initially because of the tricky events system in the previous CodeMirror and also there was no such an API from Obsidian back then, that's why I used a private _handlers field). Right now I am struggling with converting my event handler's code to registering it with .on().

• .on() does not turn off the default handler (until you invoke preventDefault)
• since my handler needs to await (i.e. a response from user's modal), it actually returns a Promise immediately

As I understand the combination of both facts above leads to an immediate event propagation to default handler, so the image gets pasted locally even before a user provided his response from modal window.

And I can not invoke preventDefault always in the very beginning, because I won't be able to call default handler for local pasting if I need it further.

So, at the moment I am stuck with this problem 😩. I see 2 ways in theory:

• I either need to remove async from event handler. To do it, I need to resolve all the promises (modal response promise, upload promise, etc) synchronously. Looks like it's not possible in JS with a single thread. If I block the thread, who will do the upload job then?
• Or I always invoke preventDefault in the very beginning, but if I need a default handler for local paste (i.e. when user responded so with modal or when there is no internet connection for remote upload), I need to know where can I find the reference to default handler

You may can read yaml config instead of confirming every upload ,this may rearch the feature

[gavvvr]

You may can read yaml config instead of confirming every upload

This would break the backwards compatibility for anyone who is used to reply to modal on each upload. I will not go this way.

[artk47]

You may can read yaml config instead of confirming every upload

This would break the backwards compatibility for anyone who is used to reply to modal on each upload. I will not go this way.

Currently the whole sense of plugin is broken, everyone notified of problem, so could be a red notice on plugin page. Idk if you have stats for how much ppl really use confirmations, doesn't seem to be sensitive feature at all

[gavvvr]

Licat has helped me on Discord to solve my dilemma

It turned out there are undocumented methods to process an event (or it's copy) once again:

• markdownView.currentMode.clipboardManager.handlePaste
• markdownView.currentMode.clipboardManager.handleDrop

The 2.1.1 version has just been released🥳.

It is also bound to implementation details (which was also true for previous versions), so we can expect this plugin to break in the future. But looks like using undocumented API is the best option available to me now.

Thanks to everybody who did any contribution to get this plugin fixed ❤️