Allow Preview " ![[Filename#Head123]] " & " ![[Filename^block321]] "

[Connor-yang96]

Allow Preview " ![[Filename#Head123]] " & " ![[Filename^block321]] ".

I believe You can do it .

Thanks.

[zsviczian]

Hi @ozntel, I was just about to record the same idea. This would be a natural fit to Image in Editor, and would be huge help to users. I've just recently implemented the ![[Filename#^block]] transclusion in Excalidraw. It is really very simple. Here's my code: https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/de68ebbe7da6cdd25e6fd5d9919212d20aa59c4c/src/ExcalidrawData.ts#L262

[GitMurf]

I third this @ozntel ! This would be amazing. My need for native WYSIWYG in Obsidian really is for images and block references. Your plugin already solves for images which has helped me a TON! And if you were able to do the same thing with block reference embeds and header reference embeds my need for WYSIWYG would pretty much be satisfied. If you need any help on the code or ideas please let me know as I have played with some of this stuff in the past. Happy to help any way I can!

Thanks for all your hard and amazing work :)

[cyrulnik]

I fourth this. Would basically cover all of my WYSIWYG needs (well maybe query would also be nice)...

[zsviczian]

Hi @ozntel, I reworked my transclusion function. It now supports multi-line transclusions and section references. Here's my code: https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/c6339b28acd7ff95c1ce655b6f5036adfa7adeba/src/ExcalidrawData.ts#L298

Even if you don't format the embedded block in edit mode, just dump the text in a <pre>...</pre> block, I think the feature would be super useful.

Multiline blocks:

  line 1
  line 2
  line 3 
  ^blockref

Heading references e.g. ![[file#section]]

[rushikb]

+1 on this — this would be a hugely helpful feature

[ozntel]

I created a beta version, which shows the transclusions in the editor.

However, there are main obstacles to implement it as it works in the preview mode:

• Styles are not going to be applied in Editor
• You need to add .md extension for the file name. Maybe I can think of removing in the future but it works with extension at the moment.
• I need to use an external markdown to html converter and it won't recognize the Obsidian's own sytaxes.
• Images won't be rendered (I might find an additional function to change the links inside of the html text but for the moment it won't show)

You can download and check how it works for you: Ozan's Image In Editor - Pre-Release

@zsviczian, If you want to check the code and you have an advise, kindly see the commit: Transclusions Initial Implementation - Branch

Sample Looks Like:

[zsviczian]

This is magical!!! And your source code is so much neater than mine. I am envious.

[zsviczian]

@ozntel - can you explain why the .md is required? As much as I can see, that could be omitted without any noticeable performance impact. I run isExcalidrawFile() on all files in the file manager. I don't notice any impact to performance due to this.

[GitMurf]

@ozntel amazing! Thanks so much! One question, any way we could have an option to not require the .md for them to transclude?

[ozntel]

@zsviczian @GitMurf Can you try with this version: Ozan's Image In Editor - Pre-Release - 2

I removed the .md requirement.

I also needed to add a small tweak with pollUntil to ensure that it waits for newly created block id before rendering.

[zsviczian]

I had an Excalidraw drawing open. Maybe you are not checking the view type?

[zsviczian]

my mistake. Nothing to do with Excalidraw being open. I get the above if I have a markdown view open with a block reference.

The removal of the .md requirement is working well. Eventually, it would be nice to have the same enabled for Excalidraw drawings as well.

[ozntel]

I just release the version, which includes this experimental feature.

my mistake. Nothing to do with Excalidraw being open. I get the above if I have a markdown view open with a block reference.

@zsviczian Regarding the error you had, I added an additional check for null file. Since each name change triggers a search, it came up null before you write the full name.

I implemented a trick to manipulate image sources to ensure that they are rendered correctly in the widgets. We will see how to improve the rest in the future. Just to make sure that the code blocks are rendered correctly, I included prismjs highlight.

[GitMurf]

@ozntel it is working great! Wow... THANK YOU!

I am having a "small" problem which isn't that big of a deal but I thought I would let you know. It seems when I create a block ref "too quickly" it is not finding it when it tries to render and it gives an error like screenshot below. Primarily this is happening when I am using my new block ref drag and drop plugin which creates the block ref when dragging it from the source file/line so then it seems your plugin tries to load/render it right away but the block ref hasn't likely been "cached" yet in the metadatacache (assuming without looking at your code).

I am opening up a new Issue for this and will update here with a link: https://github.com/ozntel/oz-image-in-editor-obsidian/issues/54

[cweekly]

This is so great! I was just trying to figure out how to get embeds to preview, and here you've just solved it for me. Bravo! Thank you! :)