Support line editing in live preview

[Thylane]

This is more of an idea. It's related to #19, but still not direct editing.

A row edit button is added to each line of the code block. When clicked, it selects the corresponding line.
This allows us to start editing from the middle of the block rather than from the beginning.

The feature is shown in the video below (click the edit button on line 15 to edit the line).

Recording-2025-01-11.212053.mp4

---

To avoid the edit buttons being obscured by native buttons, I also added some settings to hide copy buttons and edit block buttons, which default to false.

---

Known limitations:

• If a new file is opened in reading mode, the row edit buttons for the first code block are not added when switching from reading mode to live preview. I didn't look into why this happens.
• Changes to settings will take effect in newly rendered code blocks, not old ones. Well.. not interested.
• The solution relies on native buttons to work, such as the edit block button to break the uneditable state of a code block. Didn't find a better way to do this.

Appreciate any improvements :)

[mProjectsCode]

I am not sure if I like this. Looking at the code, this should break when lines above the code block are added or removed and when the code block is in a sub-section, such as a callout.

[Thylane]

this should break when lines above the code block are added or removed

I'm not sure if I understand the problem right, but I've been using it for a while and haven't encountered this.

when the code block is in a sub-section, such as a callout.

Yes, the buttons won't be added if the code block is in a callout. Edit block button can be changed to use the top-level section's button instead of this code block's, which is easy. But the main problem is that it currently relies on sectionInfo to get the LineStart of code. I'm not familiar with obsidian API and don't know how to get it other way.

[LincZero]

QQ2025519-18453.mp4

How about that. I referred to the textarea on the https://shiki.style/ page. The principle is to stack textarea and pre together.

Warning

This strategy has a drawback: it is very susceptible to the influence of themes/plugins/styles, etc. Because it is necessary to ensure that the textarea and pre overlap perfectly; otherwise, the editing experience will not be good.

It's still the same display:

• pr: refactor, feat: support notationHightligh (close #50), feat: editing in live preview (close #19, about #44) #51 (It is being refined)
• todo: After the textarea is edited, it should be automatically saved