refactor, feat: support notationHightligh (close #50), feat: editing in live preview (close #19, about #44)

[LincZero]

There are currently some problems with this PR:

This PR works

en

• feat
  • allow editing in linve preview. close #19 close #44 close #1
  • support notaion hightlight / diff / errorLevel ... ([!code hl], [!code ++]). close #50
  • add min version. close #53 about #41
  • show language type, edit language type live
  • new option: render mode
  • new option: render engine
  • new option: auto save mode (live edit)
• enhance
  • update shiki version: 1.24.0 -> 3.4.2

zh

• 功能
  • 允许实时编辑
  • 支持注释标注的高亮、差异化、错误等级等
  • 添加mini版本
  • 展示语言类型，并也允许实时编辑
  • 新的选项：渲染方式
  • 新的选项：渲染引擎
  • 新的选项：自动保存方式 (用于实时编辑)
• 增强
  • 更新shiki版本：1.24.0 -> 3.4.2

TODO / Task

• enhance
  • [x] Excessive compilation size (This problem exists after the shiki version upgrade, and use from 'shiki' replace from 'shiki.mjs') (Because of the problems with bun and npm)
  • [x] It might be necessary to add a new switch option.
  • [-] (option) a short-key to switch the current code block to the original state.
  • when cursor moves up and down (like Typora)
    • [x] from textarea to root editor
    • [-] from root editor to textarea
• fix
  • [x] editing in preview, should auto save
  • [x] edit button z-index to low
  • [x] meta highlight invalid
  • [x] Fail to align when the last line is an blank line
  • [x] black line zero height, influence background coloring
  • [x] indent: match
  • [x] indent: render, no treatment tabindex
  • [x] edit: press tab key
• feat
  • [-] (option) new option: allow custom language-type (langAlias, like dateview, dateviewjs, ...)
  • [x] There is no need to edit the line where languageType is located in real time. This requires creating an independent textarea, just like typora.
  • [x] New strategy: textarea / editablePre. The principle of editablePre does not use overlapping textare and pre. Rather, it's like my other project: https://linczero.github.io/obsidian-node-flow/
• docs
  • [x] A website for choosing theme styles: https://textmate-grammars-themes.netlify.app/
  • [x] Notation syntax
  • [x] New feature warning: Confirm that your repository has a synchronization system (such as git)
• style
  • [x] style: p::selection {background-color; color} (Adaptive light and shade)
• other
  • [x] Just code2html directly, this might be a problem? (I'm not sure. At present, it seems that there aren't any problems. I'm not sure what the use is for those codes that I chose to jump out in advance and didn't use)

TODO / Task in nestVersion

• All types of languages are allowed
• (last) a short-key to switch the current code block to the original state.
• (last) new option: allow custom language-type (langAlias, like dateview, dateviewjs, ...)

[LincZero]

https://github.com/user-attachments/assets/3f32108e-7f49-47ed-977d-5e03563c7c9c

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:

[LincZero]

Review note

• Switching renderMode.codemirror in the Settings is the original behavior of the plugin. (If you merge, you can choose to modify this option back to the codemirror option)
• You can test the behavior of the min version. It's also very useful.
• I hope to create an organization and add a min sub-project to release the min version. If possible, add me to the organization members.

A review item I haven't modified: obsidian docuemnt api

Although I know that obsidian provides a more convenient document api, I used to like using him too. It was very convenient.

But I didn't use it here because I will encapsulate it into a universal module unrelated to obsidian later (for my use in other projects).

Yes, an editable textarea encapsulated based on shiki/prism component, should be independent of obsidian.

[LincZero]

Reconstruct, then switch back to draft.

Refactor: Extract "editable codeblock" as a universal module that is independent of Obsidian, so that this module can be used jointly in this project and my other projects.

This module will be a universal tool that can be embedded into any software.

[LincZero]

latest developments: online demo: https://editableblock.github.io/EditableBlock/

It is not ruled out that a new warehouse and plugins will be created.