Trying to add Vditor to Trilium as editor: steps and problems

[shutaozhenzhen]

Want to use Markdown in Trilium. ckeditor do not support lots of features, like keybinding to make header, code block within list block, etc. The problem is just, ckeditor is a rich text editor, not a Markdown editor.

#3891 use draw.io to render svg, which make me thinking can I render Markdown using online Makedown editor.

Find Vditor seems like a good choice, because it has multi modes, for both WYSIWYG (Rich Text), Instant Rendering (Typora-like) and Split View modes. And it can use in html page by refer to https://unpkg.com/vditor/dist/index.min.js.
Also, there is a office viewer extension for VSCode, which use Vditor.
Here's my progress so far. I'm working offline.

1. download index.min.js from https://unpkg.com/vditor/dist/index.min.js.

2. create a render note connect with index.html (~renderNote=index.html, link file can use @ . Only put file in subtree and input filename render nothing)

3. html content: <div id="vditor" class="vditor-content"></div>(Refer from [Feature request] Run webapps inside nodes / scripting API #1168)

   1. use Vditor in html need to provide a document, by calling new Vditor(id), Vditor auto find element with id, and, if this element has class vditor-content, it will render to a Vditor editor.

4. issues 1168 example call x_spreadsheet directly. But put index.min.js in subtree of js with code

   1. Vditor = new Vditor('vditor')

   2. tell me can not find Vditor
   3. after reading the two min.js, I find xspreadsheet will add x_spreadsheet function to js global var window, but Vditor will first check if module.export or export exists. So Vditor need to use as module.export js file, call by parent js note by its filename. After change index.min.js to Vditor and add const to js, things go right.

   4. const Vditor = new Vditor('vditor')

5. But render note still empty. Open debug panel find that Vditor download language file and lute.min.js from cdn. In offline envirment, I need to download and provide them to Vditor.

6. lute can be refered by set _lutePath, but path in Trilium is useless.

7. By setting cdn to localhost, Vditor can get file in local. But in Trilium, get Note by url can only use etapi, which use noteid, not the file's path

   1. Can I create a node.js server, when get file by url, find file in local, read content, and return?
      1. using etapi within Trilium js script do not need to login, right?