Live Preview: Make HTML renderings editable

Feature requests
1

Hey Obsidian-Community,

I recently started developing a plugin for updating PDF annotation back and forth between markdown file and PDF file.

I represent annotation with callout blocks in the markdown file. I do so, because I really like the rendering of callout blocks.
Source mode example of an annotation block in markdown file:

>[!Annotation] _Type: Underline, Link: [[PluginTest/2105.15203/2105.15203.pdf#page=1]]_
>>[!metadata]- _Metadata_
>>creationDate: "2024-05-09T04:13:35+02:00"
>>modificationDate: "2024-06-21T22:00:03+02:00"
>>filePath: "PluginTest/2105.15203/2105.15203.pdf"
>>pageNumber: 1
>>id: "4P_597R"
>>subType: "Underline"
>>rect: [127.97,408.167,484.169,441.964]
>>meanPosition: [306.07,425.066]
>>quadPoints: [454.88,440.428,467.927,440.428,454.88,431.521,467.927,431.521,144.384,429.519,467.978,429.519,144.384,420.612,467.978,420.612,144.161,418.61,300,418.61,144.161,409.703,300,409.703]
>>author: "xxx"
>>color: [0,0,0]
>
>>[!cite] **Cite** 
>>'Undelined text in PDF file'
>
>>[!info] **Comment** 
>>- 'Comment for underline annotation'
>

Use case or problem

Now this markdown ‘code’ gets rendered to the callout block as expected, both in live preview and reading mode.
For my ease of use I would like to edit the rendered callout block directly, without switching back to source mode view.

Sadly, editing is currently not possible in the rendered HTML Element for callout blocks. So, e.g. by clicking on it, the block returns back to the source mode view.

Detailed reasoning:

  • Especially when the annotation blocks get large, searching the position I want to edit something at becomes quite cumbersome.
  • Not mentioning all the markdown key symbols, like ‘>’ (for callouts), I don’t want to edit because I am only editing what’s contained inside the callout block.
  • Furthermore, the whole callout block gets selected in source mode, at least when clicking on the rendered live preview. This requires to search for the position I want to edit something at, all over again.

Proposed solution

What I would propose is to allow editing of the live preview (callouts as a special case). From my understanding this should be possible as the live preview rendering is just another HTMLElement getting inserted into the HTMLElement of the full viewport, which is present even in source mode view.
Use cases and how I think it should behave:

  • Callouts in general:
    • Clicking/moving cursor inside: Preserve rendered block structure of the callout, but view the inside in source mode
    • But do not show the callout structure related markdown symbols (‘>’)
    • Leaving a callout just by the tab logic, analogously to the list tabbing
  • Nested callouts
    • Only lowest HTML child containing the cursor has to be re-rendered (viewed in source mode)
    • Again tabbing in and out of nested stuff just like with list
  • Clicking on rendered callouts
    • Find the lowest HTML child containing the click event and proceed with the logic above

And in case one really wants to edit in full source mode view, one can trigger it with the already existing button (top-right corner of the rendered callout block) or make what I have proposed above an optional feature, which can be enabled in the settings.

Long story short: I would much appreciate a more efficient editing experience for callout blocks.

P.S. on implementation: I am not sure, if, what I have proposed above, can be implemented with just a plugin. From my understanding, the plugin API allows post-processing of markdown renderings (and even pre-processing), but does not give the ability to completely prevent or override Obsidian’s default way of rendering and which rendering actions happen on certain user input events (mouse/keyboard events). That said, any editor extension (CM) applying some decorations or markdown rendering post-processor would just add that behavior to the Obsidian’s default, which acts its (unwanted) way when interacting with rendered callout blocks.

2 Likes